www.dinaro.

com/vb3

1
 www.dinaro.com/vb3



:HTML ‫ﻣﻘﺪﻣﺔ ﻓﻲ ﻟﻐﺔ‬

: ‫ﺍﻟﺪﺭﺱ ﺍﻷﻭﻝ‬

:‫ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻧﻲ‬

: ‫ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻟﺚ‬

: ‫ﺍﻟﺪﺭﺱ ﺍﻟﺮﺍﺑﻊ‬

: ‫ﺍﻟﺪﺭﺱ ﺍﻟﺨﺎﻣﺲ‬

: ‫ﺍﻟﺪﺭﺱ ﺍﻟﺴﺎﺩﺱ‬

1: ‫ﺍﻟﺪﺭﺱ ﺍﻟﺴﺎﺑﻊ‬

2: ‫ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻣﻦ‬

: ‫ﺍﻟﺪﺭﺱ ﺍﻟﺘﺎﺳﻊ‬

: ‫ﺍﻟﺪﺭﺱ ﺍﻟﻌﺎﺷﺮ‬

2
 www.dinaro.com/vb3

1: ‫ﺍﻟﺪﺭﺱ ﺍﻟﺤﺎﺩﻱ ﻋﺸﺮ‬

2: ‫ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻧﻲ ﻋﺸﺮ‬

MS : ‫ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻟﺚ ﻋﺸﺮ‬

Internet Explorer

3
 ‫‪www.dinaro.com/vb3‬‬

‫ﻛﻠﻤﺔ ﺍﻟﻤﺆﻟﻒ‬
‫ان اﻟﺘﻄﻮر اﻟﺸﺪﯾﺪ اﻟﺬي ﺷﮭﺪﺗﮫ ﻟﻐﺔ ‪، HTML‬واﻻﻋﺪاد اﻟﮭﺎﺋﻠﺔ اﻟﺘﻲ ﺗﺤﺎول ان ﺗﺘﻌﻠﻢ‬
‫ھﺬه اﻟﻠﻐﺔ اﻟﺠﻤﯿﻠﺔ واﻟﺴﮭﻠﺔ ﻛﺎن ﻻﺑﺪ ﻟﻲ ﻣﻦ اﻧﺸﺎء ﻛﺘﺎب ﯾﺘﺤﺪث ﻋﻦ ھﺬه اﻟﻠﻐﺔ‪.‬‬

‫وﻓﻲ اﻟﺤﻘﯿﻘﺔ ﺗﻮﺟﺪ ﻛﺜﯿﺮ ﻣﻦ اﻟﻜﺘﺐ ﺗﺘﺤﺪث ﻋﻦ ﻟﻐﺔ ‪، HTML‬وﻟﻜﻦ ﻗﻠﯿﻞ ﻣﻨﮭﺎ ﯾﻌﻠﻤﻚ‬
‫ﻛﯿﻒ ﺗﺼﺒﺢ ﻣﺼﻤﻢ ﺻﻔﺤﺎت وﯾﺐ ﻧﺎﺟﺢ‪.‬‬

‫وﻓﻲ ھﺬا اﻟﻜﺘﺎب ﺳﻨﺴﯿﺮ ﺧﻄﻮة ﺧﻄﻮة ﯾﺎ ﻋﺰﯾﺰي اﻟﻤﺘﺪرب‪.‬‬

‫وﻟﻘﺪ اﻋﺘﻤﺪت ﻋﻠﻰ ﻋﺪة ﻣﺼﺎدر وﻛﺘﺐ ‪.......................‬وادﻋﻮا ﻟﮭﻢ ﺑﺎﻟﺨﯿﺮ واﻟﺼﺤﺔ‬
‫واﻟﻌﻄﺎء اﻟﺪاﺋﻢ‪.‬‬

‫وﻋﻤﻮﻣﺎ اﺗﻤﻨﻰ ﻟﻜﻢ اﺳﻌﺪ اﻻوﻗﺎت‪ ،‬واﺳﺘﻔﺎدة ﻣﻮﻓﻘﺔ ﺑﺈدن اﷲ !‬

‫اﻟﻤﺆﻟﻒ!!‬
‫أﯾﻮب ﻣﻌﺘﺼﻢ‬

‫‪4‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻗﺒﻞ ﻗﺮﺍﺀﺓ ﻫﺬﺍ ﺍﻟﻜﺘﺎﺏ‬

‫ﯾﺠﺐ ان ﯾﻜﻮن ﻟﺪﯾﻚ ﻣﺤﺮر ﻧﺼﻮص ﻣﺜﻞ ‪ NotePad‬اﻟﻤﺮﻓﻖ ﻣﻊ ‪Windows‬‬
‫وﻣﺘﺼﻔﺢ ﻟﻤﻌﺎﯾﻨﺔ اﻟﻨﺘﺎﺋﺞ ﻣﺜﻞ ‪ Netscape Navigator‬ﺃﻭ ‪.MS Internet‬‬

‫وﻻ ﺗﻈﻦ ان اﺑﺪا ان اﻧﺸﺎء ﻣﻮاﻗﻊ ﻋﻤﻠﯿﺔ ﺻﻌﺒﺔ ھﺬا ﺧﺎﻃﺊ ھﺬا ﺧﺎﻃﺊ ھﺬا ﺧﺎﻃﺊ‪..........‬‬
‫واذا اﻛﻤﻠﺖ ﻗﺮاءة ھﺬا اﻟﻜﺘﺎب ﺟﯿﺪا ﺳﺘﺘﻤﻜﻦ ﻣﻦ ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎت اﻟﻮﯾﺐ‪.‬‬

‫‪5‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ان ﺗﻌﻠﻢ ﻟﻐﺔ ‪ HTML‬اﻣﺮ ﻣﻤﺘﻊ وﺳﺘﻌﺮف ذﻟﻚ‪.‬‬

‫ﯾﺎ ﻋﺰﯾﺰي اﻟﻤﺘﺪرب ﻟﻘﺪ ﻛﻨﺖ ﻣﺘﻠﻚ ﻣﺒﺘﺪئ ﻟﻜﻦ ﺑﻌﻮن اﷲ ورﻋﺎﯾﺘﮫ ﺻﺮت ﻣﺼﻤﻢ ﻣﻮاﻗﻊ‬
‫وﯾﺐ ﻧﺎﺟﺢ‪.‬‬

‫ﯾﻤﻨﻊ اﺳﺘﻐﻼل ھﺬا اﻟﻜﺘﺎب ﻓﻲ اي اﻣﻮر ﺗﺠﺎرﯾﺔ ﺑﺪون اﻻذن اﻟﺨﻄﻲ ﻣﻦ‬
‫اﻟﻤﺆﻟﻒ‪..........‬‬

‫اﻟﻤﺆﻟﻒ ﻏﯿﺮ ﻣﺴﺆول ﺗﻤﺎﻣﺎ ﻋﻦ اي اﺳﺘﻌﻤﺎل ﻏﯿﺮ ﺷﺮﻋﻲ ﻟﮭﺬا اﻟﻜﺘﺎب‪..‬‬

‫ﻓﻲ ﺣﺎﻟﺔ وﺟﺪت اي اﺧﻄﺎء ﻓﻲ ھﺬا اﻟﻜﺘﺎب ﯾﻤﻜﻨﻚ ﻣﺮاﺳﻠﺘﻲ ﻋﻠﻰ اﻟﺒﺮﯾﺪ اﻟﺘﺎﻟﻲ ‪:‬‬

‫‪Dinaro2Ayoub@gmail.com‬‬

‫أو‬

‫‪Dinaro_22@hotmail.com‬‬
‫ﺳﯿﻜﻮن ﻋﻤﺎ ﻗﺮﯾﺐ ﺑﺈذن اﷲ ﻛﺘﺐ ﺟﺪﯾﺪة ﻓﻲ ﻋﺪة ﻟﻐﺎت ﻣﻨﮭﺎ ‪ pascal :‬و ‪ php‬و ‪css‬‬
‫و ‪ visual basic 6‬و ‪ javascript‬و ‪.mysql‬‬

‫ارﺟﻮا زﯾﺎرة اﻟﻤﻨﺘﺪى ‪www.dinaro.com/vb3‬‬

‫‪6‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺛﻤﻦ ﺍﻟﻜﺘﺎﺏ‬
‫ﺍﻟﺪﻋﺎﺀ ﻟﻲ ﻭﻟﻮﺍﻟﺪﻱ ﻭﻟﺠﻤﻴﻊ ﺍﻟﻤﺴﻠﻤﻴﻦ ﺑﺎﻟﺼﺤﺔ ﻭﺍﻟﻬﻨﺎﺀ ﻭﺍﻻﺯﺩﻫﺎﺭ ﻭﺍﻟﻨﻤﺎﺀ‬
‫ﻭﺍﻟﻌﻄﺎﺀ ﺍﻟﺪﺍﺋﻢ ﻭﺍﻟﺸﻔﺎﺀ‪...............................‬ﻭﺍﻟﻔﻮﺯ ﺑﺎﻟﺠﻨﺔ ﻭﺍﻟﻨﺠﺎﺓ ﻣﻦ ﺍﻟﻨﺎﺭ‬
‫ﻭﻫﺬﺍ ﻛﻞ ﻣﺎ ﺃﻃﻠﺒﻪ‪......‬ﻭﺷﻜﺮﺍ ﻟﻜﻢ‪...‬‬

‫‪7‬‬
 www.dinaro.com/vb3

 

 

 
 
 


8
 ‫‪www.dinaro.com/vb3‬‬

‫ﻣﻘﺪﻣﺔ ﻓﻲ ﻟﻐﺔ ‪HTML‬‬

‫أھﻼً ﺑﻚ إﻟﻰ ﻣﻘﺪﻣﺔ ﻟﻐﺔ ‪ HTML‬أو ﻛﻤﺎ ﯾﺴﻤﯿﮭﺎ اﻟﺒﻌﺾ ﻟﻐﺔ اﻟﮭﺘﻤﻞ ‪.‬‬
‫ﺣﺴﻨﺎً ﻓﻠﻨﺒﺪأ اﻟﺸﺮح وﻟﻜﻦ أوﻻً أرﯾﺪ أن أﺟﯿﺐ ﻋﻠﻰ ﺑﻌﺾ أﺳﺌﻠﺘﻚ واﺗﻮﻗﻊ أن أول ﺳﺆال‬
‫ﯾﻘﻮل ‪:‬‬

‫ﻣﺎ ﻣﻌﻨﻰ ﻟﻐﺔ ‪ HTML‬؟‬

‫ان ﻟﻐﺔ ‪ HTML‬وھﻲ اﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ )‪(Language Markup Text Hyper‬‬

‫وھﻲ إﺣﺪى اﻟﻄﺮق ﻓﻲ ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎت ﻋﻠﻰ اﻻﻧﺘﺮﻧﺖ أو ﺗﺰﯾﯿﻦ اﻟﺮﺳﺎﺋﻞ اﻟﺘﻲ ﺗﺒﻌﺚ ﻋﺒﺮ‬
‫اﻟﺒﺮﯾﺪاﻻﻟﻜﺘﺮوﻧﻲ‪.‬‬

‫ان ﻟﻐﺔ ‪ HTML‬ﻟﯿﺴﺖ ﻟﻐﺔ ﺑﺮﻣﺠﯿﺔ ﻛﻠﻐﺔ ‪ C++‬أو ‪ JAVA‬أو ‪ C‬ﻓﮭﻲ ﻟﻐﺔ ﺳﮭﻠﺔ‬
‫وﻏﯿﺮ ﻣﻌﻘﺪة وﻻ ﺗﺤﺘﻮي ﻋﻠﻰ ﺷﯿﻔﺮات ﻛﺜﯿﺮة ﻛﺬﻟﻚ ﻓﮭﻲ ﻻ ﺗﺤﺘﺎج إﻟﻰ ﻣﺘﺮﺟﻢ ‪ .‬ﻟﺬﻟﻚ ﻓﮭﻲ‬
‫ﻟﻐﺔ ﺑﺴﯿﻄﺔ ﺟﺪاً‪ ،‬وﺳﮭﻠﺔ اﻟﻔﮭﻢ واﻟﺘﻌﻠﻢ وﻻ ﺗﺤﺘﺎج ﻟﻤﻌﺮﻓﺔ ﻣﺴﺒﻘﺔ ﺑﻠﻐﺎت اﻟﺒﺮﻣﺠﺔ‬
‫واﻟﮭﯿﻜﻠﯿﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﯿﮭﺎ‪.‬‬

‫ﺗﺤﺘﺎج داﺋﻤﺎً إﻟﻰ ﺗﻄﺒﯿﻖ ﻣﺎ ﺗﺘﻌﻠﻤﮫ ﺑﺼﻮرة ﻋﻤﻠﯿﺔ أﻛﺜﺮ ﻣﻦ ﻣﺠﺮد اﻷﻣﺜﻠﺔ اﻟﻤﺪرﺟﺔ ﻓﻲ‬
‫اﻟﻜﺘﺎب‪.‬‬

‫‪9‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻻﻭﻝ‬

‫‪‬‬
‫ﺣﺴﻨﺎً ﻓﻠﻨﺒﺪأ اﻟﺸﺮح ﺗﻜﺘﺐ ﻟﻐﺔ ‪ HTML‬ﺑﺮﻣﻮز ﻏﺮﯾﺒﺔ وﻛﺜﯿﺮة اﺳﻤﮭﺎ ﺑﺎﻟﻠﻐﺔ اﻻﻧﺠﻠﯿﺰﯾﺔ‬
‫اﻟـ‪ Tags‬وﺗﺴﻤﻰ ﺑﺎﻟﻠﻐﺔ اﻟﻌﺮﺑﯿﺔ اﻟﻮﺳﻮم ‪.‬‬

‫و ﻟﻜﻞ وﺳﻢ ﻣﻦ وﺳﻮم ﻟﻐﺔ اﻟـ‪ HTML‬وﺳﻢ ﺑﺪاﯾﺔ ووﺳﻢ ﻧﮭﺎﯾﺔ وﺳﻮف اﻣﺜﻠﮫ ﻟﻚ ﻣﻦ‬
‫ﺧﻼل اﻟﺮﺳﻢ اﻟﺘﺎﻟﻲ ‪:‬‬

‫‪10‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺳﻮف أﺷﺮح ﻛﻞ وﺳﻢ ﻋﻠﻰ ﺣﺪى ‪:‬‬

‫واﻟﻮﺳﻢ اﻷول ھﻮ اﻟﻮﺳﻢ > ‪ < HTML‬اﻟﺬي ﻛﻤﺎ ذﻛﺮت ﺳﺎﺑﻘﺎً أﻧﮫ أھﻢ اﻟﻮﺳﻮم‬
‫اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﻲ ﺑﻨﺎء اﻟﺼﻔﺤﺎت اﻟﻤﺴﺘﺨﺪم ﻓﯿﮭﺎ ﻟﻐﺔ اﻟـ‪ ، HTML‬ﻷﻧﮫ ﯾﻘﻮم ﺑﺘﻌﺮﯾﻒ‬
‫ﻟﻠﻤﺘﺼﻔﺢ أن ھﺬه اﻟﺼﻔﺤﺔ ﻣﺼﻨﻮﻋﺔ ﺑﻠﻐﺔ اﻟـ‪ HTML‬وﯾﻮﺿﻊ ھﺬا اﻟﻮﺳﻢ ﻓﻲ أول‬
‫اﻟﻤﺴﺘﻨﺪ اﻟﻤﺼﻨﻮع ﺑﻠﻐﺔ اﻟـ‪ HTML‬وﻟﻮﻻ ھﺬا اﻟﻮﺳﻢ ﻟﻈﮭﺮت ﻣﺤﺘﻮﯾﺎت اﻟﺼﻔﺤﺔ ﺑﺼﻮرة‬
‫ﺑﺎھﺘﺔ وﻏﯿﺮ ﻣﻔﮭﻮﻣﺔ ‪ ،‬وﺳﻢ اﻟﻨﮭﺎﯾﺔ ھﻮ > ‪ < /HTML‬اﻟﺬي ﯾﻮﺿﻊ أﺧﺮ اﻟﻤﺴﺘﻨﺪ‬
‫اﻟﻤﺼﻨﻮع ﺑﻠﻐﺔ اﻟـ‪. HTML‬‬

‫ﻓﻠﻨﺄﺗﻲ اﻵن ﻟﻠﻮﺳﻢ > ‪ < HEAD‬اﻟﺬي ﯾﺴﺘﺨﺪم ﻟﺘﻌﺮﯾﻒ ﺻﺎﺣﺐ اﻟﺼﻔﺤﺔ واﻟﻠﻐﺔ واﻟﻌﺪﯾﺪ‬
‫ﻣﻦ اﻷﺷﯿﺎء اﻟﺘﻲ ﺳﻮف ﻧﺸﺮﺣﮭﺎ ﻓﻲ دروس ﻗﺎدﻣﺔ إﻧﺸﺎء اﷲ ‪ .‬وأذﻛﺮك أن وﺳﻢ اﻟﻨﮭﺎﯾﺔ‬
‫اﻟﺨﺎص ﺑﮫ ھﻮ > ‪< /HEAD‬‬

‫ﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﻮﺳﻢ > ‪ < TITLE‬اﻟﺬي ﯾﻤﺜﻞ اﻟﺠﻤﻠﺔ اﻟﺘﻲ ﺗﻮﺿﻊ أﻋﻠﻰ اﻟﺸﺎﺷﺔ ﻋﻠﻰ‬
‫اﻟﯿﺴﺎر ‪ ،‬ووﺳﻢ اﻟﻨﮭﺎﯾﺔ اﻟﺨﺎص ﺑﮫ ھﻮ > ‪ ، < /TITLE‬ﻣﻼﺣﻈﺔ ﯾﻮﺿﻊ ھﺬا اﻟﻮﺳﻢ ﺑﯿﻦ‬
‫اﻟﻮﺳﻤﯿﻦ > ‪ < HEAD‬و > ‪< /HEAD‬‬

‫ﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﻮﺳﻢ > ‪ < BODY‬اﻟﺬي ھﻮ ﻟﺐ اﻟﺪروس ﺑﺄﻛﻤﻠﮭﺎ ‪ ،‬ﺣﯿﺚ ﯾﻤﺜﻞ ھﺬا‬
‫اﻟﻮﺳﻢ ﻣﺤﺘﻮﯾﺎت اﻟﺼﻔﺤﺔ ﺑﺄﻛﻤﻠﮭﺎ ﺣﯿﺚ ﺗﻀﻊ ﻓﯿﮫ اﻟﺠﺪاول واﻟﺼﻮر و اﻟﻤﻮاﺿﯿﻊ وﻛﻞ‬
‫ﻣﺎﺗﺮﯾﺪه أن ﯾﻈﮭﺮ ﻋﻠﻰ اﻟﺼﻔﺤﺔ ‪.‬‬
‫ﺳﻮف أﺑﺴﻂ ﻟﻚ ﻛﻞ ﻣﺎ ذﻛﺮت ﻓﻲ ھﺬا اﻟﺪرس داﺧﻞ ھﺬا اﻟﺮﺳﻢ اﻟﺘﺒﯿﺎﻧﻲ ‪:‬‬

‫‪11‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺇﺫﻥ ﻤﻠﻑ ‪ Html‬ﻴﺒﺩﺃ ﺩﺍﺌﻤﺎﹰ ﺒﺎﻟﻭﺴﻡ >‪ <HTML‬ﻭﻴﻨﺘﻬﻲ ﺒﺎﻟﻭﺴﻡ‬

‫>‪ .</HTML‬ﻻ ﺘﻨﺴﻰ ﺫﻟﻙ!‬

‫اذن ﻋﺰﯾﺰي اﻟﻤﺘﺪرب ﻣﺎ رأﯾﻚ ﻟﻮ ﻧﻄﺒﻖ ذﻟﻚ ﺑﺼﻮرة ﻋﻤﻠﯿﺔ ‪:‬‬

‫وﻻ ﺗﻨﺴﻰ أن اﻻﻣﺘﺪاد اﻟﻤﺴﺘﺨﺪم ﻓﻲ أﺳﻤﺎء ﻣﻠﻔﺎت ‪ HTML‬ھﻮ ‪ .htm‬أو ‪.html‬‬
‫ﻣﺜﺎل ‪:‬‬
‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪first page web‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬

‫‪12‬‬
 www.dinaro.com/vb3

<BODY>
hello world !!
</BODY>
</HTML>

:‫اﻟﻨﺎﺗﺞ‬

13
 ‫‪www.dinaro.com/vb3‬‬

‫اﻟﻨﺎﺗﺞ‪:‬‬

‫ھﻞ ﺣﺼﻠﺖ ﻋﻠﻰ ﻧﻔﺲ اﻟﻨﺘﯿﺠﺔ؟ إذن ﻣﺒﺮوك ﻟﻘﺪ ﻗﻤﺖ ﺑﺈﻧﺸﺎء أول ﺻﻔﺤﺔ وﯾﺐ ﺧﺎﺻﺔ‬
‫ﺑﻚ‪.‬‬

‫‪14‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻻ ﯾﻮﺟﺪ ﻓﺮق ﺑﯿﻦ ﻛﺘﺎﺑﺔ اﻟﻮﺳﻮم ﺑﺎﻷﺣﺮف اﻹﻧﺠﻠﯿﺰﯾﺔ اﻟﻜﺒﯿﺮة ‪ UPPERCASE‬أو‬

‫اﻷﺣﺮف اﻟﺼﻐﯿﺮة ‪ .lowercase‬ﻟﺬﻟﻚ ﺗﺴﺘﻄﯿﻊ اﻟﻜﺘﺎﺑﺔ ﺑﺄي ﺷﻜﻞ ﻣﻨﮭﻤﺎ أو ﺣﺘﻰ اﻟﻜﺘﺎﺑﺔ‬
‫ﺑﻜﻠﯿﮭﻤﺎ‪.‬‬

‫إن اﻟﻤﺘﺼﻔﺤﺎت ﻻ ﺗﺄﺧﺬ ﺑﻌﯿﻦ اﻻﻋﺘﺒﺎر اﻟﻔﺮاﻏﺎت اﻟﺰاﺋﺪة أو إﺷﺎرات ﻧﮭﺎﯾﺔ اﻟﻔﻘﺮات )أي‬
‫ﻋﻨﺪﻣﺎ ﺗﻘﻮم ﺑﻀﻐﻂ ﻣﻔﺘﺎح ‪ (Enter‬اﻟﺘﻲ ﺗﺠﺪھﺎ ھﺬه اﻟﻤﺘﺼﻔﺤﺎت ﻓﻲ ﻣﻠﻒ ‪.Html‬‬
‫وﺑﻌﺒﺎرة أﺧﺮى ﻓﺈن ﺑﺎﺳﺘﻄﺎﻋﺘﻚ ﻛﺘﺎﺑﺔ ﻣﻠﻔﻚ اﻟﺴﺎﺑﻖ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬

‫‪<HTML><HEAD><TITLE> first page web‬‬

‫>‪</TITLE></HEAD><BODY‬‬
‫>‪hello world !! </BODY></HTML‬‬

‫أو ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬

‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪first‬‬
‫‪page‬‬
‫‪web‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬
‫>‪<BODY‬‬
‫‪hello‬‬
‫‪world‬‬

‫‪15‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫!!‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬
‫وﻓﻲ ﻛﻞ اﻟﺤﺎﻻت ﺳﺘﺤﺼﻞ ﻋﻠﻰ ﻧﻔﺲ اﻟﻨﺘﯿﺠﺔ‪.‬‬

‫إذن ﻛﯿﻒ ﯾﻤﻜﻦ اﻟﺘﺤﻜﻢ ﺑﻤﻘﺪار اﻟﻨﺺ اﻟﻤﻜﺘﻮب ﻓﻲ ﻛﻞ ﺳﻄﺮ وﻛﯿﻒ ﯾﻤﻜﻦ ﺗﺤﺪﯾﺪ ﻧﮭﺎﯾﺔ‬
‫اﻟﻔﻘﺮة وﺑﺪاﯾﺔ اﻟﻔﻘﺮة اﻟﺘﻲ ﺗﻠﯿﮭﺎ؟‬

‫ﺳﻮف ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <BR‬ﻟﺘﺤﺪﯾﺪ اﻟﻨﮭﺎﯾﺔ ﻟﻠﺴﻄﺮ‪ .‬واﻟﺒﺪء ﺑﺴﻄﺮ ﺟﺪﯾﺪ )ﻻﺣﻆ أن ھﺬا‬
‫اﻟﻮﺳﻢ ﻣﻔﺮد‪ ،‬أي ﻟﯿﺲ ﻟﮫ وﺳﻢ ﻧﮭﺎﯾﺔ(‪.‬‬

‫ﻗﻢ ﺑﺘﻌﺪﯾﻞ اﻟﻤﻠﻒ اﻟﺴﺎﺑﻖ ﻟﻜﻲ ﯾﺼﺒﺢ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ ‪:‬‬

‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪first page web‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬

‫>‪<BODY‬‬
‫!! >‪hello <BR> world <BR‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬

‫اﻟﻨﺎﺗﺞ‪:‬‬
‫‪16‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫وھﻨﺎك أﯾﻀﺎ اﻟﻮﺳﻢ >‪ <P‬اﻟﺬي ﯾﻘﻮم ﺗﻘﺮﯾﺒﺎً ﺑﻨﻔﺲ ﻋﻤﻞ اﻟﻮﺳﻢ اﻟﺴﺎﺑﻖ أي أﻧﮫ ﯾﻨﮭﻲ‬
‫اﻟﺴﻄﺮ أو اﻟﻔﻘﺮة وﯾﺒﺪأ ﺑﺴﻄﺮ ﺟﺪﯾﺪ ﻟﻜﻦ ﻣﻊ إﺿﺎﻓﺔ ﺳﻄﺮ إﺿﺎﻓﻲ ﻓﺎرغ ﺑﯿﻦ اﻟﻔﻘﺮات‪.‬‬

‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪first page web‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬

‫>‪<BODY‬‬
‫!! >‪hello <p> world <p‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬
‫اﻟﻨﺎﺗﺞ‪:‬‬

‫‪17‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫أﻣﺎ اﻟﻔﺮاﻏﺎت ﻓﺘﻌﺘﺒﺮ رﻣﻮزاً ﺧﺎﺻﺔ ﻟﺬﻟﻚ ﻻ ﻧﺴﺘﻄﯿﻊ اﻟﺘﺤﻜﻢ ﺑﮭﺎ وﺑﻌﺪدھﺎ إﻻ ﺑﺎﺳﺘﺨﺪام‬
‫اﻟﻮﺳﻢ &;‪) nbsp‬واﻷﺣﺮف ھﻲ اﺧﺘﺼﺎر ﻟﻠﻌﺒﺎرة ‪ .(Non Breakable Space‬وإذا‬
‫أردت إدﺧﺎل ﻋﺪة ﻓﺮاﻏﺎت ﺑﯿﻦ ﻧﺺ وآﺧﺮ ﻣﺎ ﻋﻠﯿﻚ إﻻ ﻛﺘﺎﺑﺔ ھﺬا اﻟﻮﺳﻢ ﺑﻨﻔﺲ ﻋﺪد‬
‫اﻟﻔﺮاﻏﺎت اﻟﻤﻄﻠﻮب‪ .‬ﻛﻤﺎ ﯾﺠﺐ ﻋﻠﯿﻚ اﻟﺘﻘﯿﺪ ﺑﺎﻷﺣﺮف اﻟﺼﻐﯿﺮة ھﻨﺎ‪.‬‬
‫ﻣﺜﺎل ‪:‬‬
‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪first page web‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬

‫>‪<BODY‬‬
‫!! ;‪hello &nbsp; &nbsp; world &nbsp; &nbsp‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬

‫‪18‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫اﻟﻨﺎﺗﺞ‪:‬‬

‫ھﻨﺎك اﻟﻌﺪﯾﺪ ﻣﻦ ھﺬه اﻟﺮﻣﻮز واﻟﺘﻲ ﯾﺠﺐ أن ﺗﻜﺘﺐ ﺑﺼﻮرة ﻣﻌﯿﻨﺔ وﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻮم‬
‫وﻟﯿﺲ ﻣﺒﺎﺷﺮة ﺑﺼﻮرﺗﮭﺎ اﻟﻌﺎدﯾﺔ‪.‬‬

‫ﻛﻞ ھﺬه اﻹﺷﺎرات ﺗﺴﺘﺨﺪم أﺻﻼً ﻣﻊ اﻟﻮﺳﻮم ﻓﮭﻲ ﻣﺤﺠﻮزه ﺿﻤﻦ ﻣﻔﺮدات ﻟﻐﺔ ‪HTML‬‬
‫وﻣﻦ اﻟﺨﻄﺄ اﺳﺘﺨﺪاﻣﮭﺎ ﺑﺼﻮرﺗﮭﺎ اﻟﺼﺮﯾﺤﺔ ﻟﺌﻼ ﯾﺆدي ذﻟﻚ إﻟﻰ ﺣﺪوث ﻣﺸﺎﻛﻞ ﻓﻲ ﻃﺮﯾﻘﺔ‬
‫ﻋﺮض اﻟﺼﻔﺤﺔ‪ .‬ﻛﺬﻟﻚ ﻓﺈن ھﻨﺎك رﻣﻮزاً ﻏﯿﺮ ﻣﻮﺟﻮدة أﺳﺎﺳﺎً ﻋﻠﻰ ﻟﻮﺣﺔ اﻟﻤﻔﺎﺗﯿﺢ ﻛﺮﻣﺰ‬
‫ﺣﻘﻮق اﻟﻄﺒﻊ © ورﻣﺰ اﻟﻌﻼﻣﺔ اﻟﻤﺴﺠﻠﺔ ® وﻧﺤﺘﺎج إﻟﻰ ھﺬه اﻟﻄﺮﯾﻘﺔ)ﻃﺮﯾﻘﺔ اﻟﻮﺳﻮم(‬
‫ﻟﻜﺘﺎﺑﺘﮭﺎ‪.‬‬

‫وإﻟﯿﻚ ﺟﺪول ﺑﺒﻌﺾ ھﺬه اﻟﺮﻣﻮز ووﺳﻮﻣﮭﺎ اﻟﻤﻜﺎﻓﺌﺔ‪ .‬وأﻟﻔﺖ ﻧﻈﺮك إﻟﻰ أﻧﮭﺎ ﺗﻜﺘﺐ ﻛﻤﺎ‬
‫ھﻲ ﻓﻲ اﻟﺠﺪول وﺑﺪون إﺷﺎرﺗﻲ > <‬

‫‪19‬‬
www.dinaro.com/vb3

20
 www.dinaro.com/vb3

‫أﻟﯿﺲ ھﺬا‬
‫ﻣﻤﺘﻌﺎ‬
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
H

21
 ‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻧﻲ‬
‫‪‬‬

‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺜﺎﻧﻲ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬

‫ﺳﻮف ﻧﻘﻮم ﻓﻲ ھﺬا اﻟﺪرس ﺑﺎﻟﺘﻌﺮف ﻋﻠﻰ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﯾﻤﻜﻦ إﺿﺎﻓﺘﮭﺎ إﻟﻰ اﻟﻮﺳﻢ‬
‫>‪ <BODY‬ﻣﻦ أﺟﻞ اﻟﺘﺤﻜﻢ ﺑﺎﻟﺸﻜﻞ اﻟﻌﺎم ﻟﻠﺼﻔﺤﺔ‪ ،‬وﺧﺼﻮﺻﺎ ﻓﯿﻤﺎ ﯾﺘﻌﻠﻖ ﺑﺎﻷﻟﻮان‪.‬‬

‫ﻃﺒﻌﺎً أﻧﺖ ﻻ زﻟﺖ ﺗﺬﻛﺮ اﻟﺼﻔﺤﺔ اﻟﺘﻲ ﻗﻤﻨﺎ ﺑﻜﺘﺎﺑﺘﮭﺎ ﻓﻲ اﻟﺪرس اﻷول‪ .‬ﺻﻔﺤﺔ ﺑﺴﯿﻄﺔ‬
‫ﺑﺨﻠﻔﯿﺔ رﻣﺎدﯾﺔ وﺧﻂ ﺻﻐﯿﺮ ﻧﺴﺒﯿﺎً ﻟﻮﻧﮫ أﺳﻮد‪ .‬وھﺬه ھﻲ اﻹﻋﺪادات اﻹﻓﺘﺮاﺿﯿﺔ اﻟﺘﻲ‬
‫ﯾﻌﺘﻤﺪھﺎ اﻟﻤﺘﺼﻔﺢ ﻋﻨﺪﻣﺎ ﻻ ﻧﻘﻮم ﻧﺤﻦ ﺑﺘﺤﺪﯾﺪ إﻋﺪادات أﺧﺮى‪) .‬رﺑﻤﺎ ﺗﻘﻮل‪ :‬أھﺬه ﺻﻔﺤﺔ‬
‫إﻧﺘﺮﻧﺖ! أﯾﻦ اﻷﻟﻮان واﻟﺮﺳﻮﻣﺎت واﻟﺨﻄﻮط اﻟﺠﻤﯿﻠﺔ واﻟﺘﻨﺴﯿﻘﺎت اﻟﺘﻲ ﻧﺮاھﺎ ﻓﻲ ﺻﻔﺤﺎت‬
‫اﻹﻧﺘﺮﻧﺖ؟ ﻣﻌﻚ ﺣﻖ ﻟﻜﻦ ﻣﮭﻼً ﻓﻤﺎ زﻟﻨﺎ ﻓﻲ اﻟﺒﺪاﯾﺔ(‪.‬‬

‫ﺳﻮف ﻧﺴﺘﻤﺮ ﺑﺎﺳﺘﺨﺪام ﺻﻔﺤﺘﻨﺎ ھﺬه ﻟﺘﻮﺿﯿﺢ أﻣﺜﻠﺔ ھﺬا اﻟﺪرس أﯾﻀﺎً‪ ،‬ﻟﻜﻦ ﻟﻦ أﻗﻮم‬
‫ﺑﺘﻜﺮار ﻛﺘﺎﺑﺔ وﺳﻮم اﻟﺒﺪاﯾﺔ ﻃﺎﻟﻤﺎ أن ﻋﻤﻠﻨﺎ ﯾﺘﺮﻛﺰ ﻓﻲ اﻟﺠﺰء اﻟﻤﺨﺼﺺ ﻟﻤﺤﺘﻮﯾﺎت‬
‫اﻟﺼﻔﺤﺔ ﻧﻔﺴﮭﺎ أي ﺿﻤﻦ اﻟﻮﺳﻤﯿﻦ >‪.</BODY> ... <BODY‬‬

‫ﻟﻨﺒﺪأ اﻟﻌﻤﻞ ﯾﺎ ﻋﺰﯾﺰي اﻟﻤﺘﺪرب !!!!!!!‬

‫‪22‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻧﻄﻠﻖ ﻛﻠﻤﺔ ﺧﺎﺻﯿﺔ )‪ (Attribute‬ﻋﻠﻰ اﻟﺘﻌﺎﺑﯿﺮ اﻟﺘﻲ ﺗﻀﺎف إﻟﻰ اﻟﻮﺳﻮم‪ ،‬ﻣﻦ أﺟﻞ‬
‫ﺗﺤﺪﯾﺪ اﻟﻜﯿﻔﯿﺔ أو اﻟﺸﻜﻞ اﻟﺬي ﺗﻌﻤﻞ ﺑﮭﺎ ھﺬه اﻟﻮﺳﻮم‪ .‬وﺑﻌﺒﺎرة أﺧﺮى ﻓﺈن اﻟﻮﺳﻢ ﯾﻘﻮم‬
‫ﺑﺈﺧﺒﺎر اﻟﻤﺘﺼﻔﺢ ﻋﻦ اﻟﻌﻤﻞ اﻟﺬي ﯾﺠﺐ اﻟﻘﯿﺎم ﺑﮫ أﻣﺎ اﻟﺨﺎﺻﯿﺔ ﻓﺘﺤﺪد اﻟﻜﯿﻔﯿﺔ اﻟﺘﻲ ﺳﯿﺘﻢ ﺑﮭﺎ‬
‫أداء ھﺬا اﻟﻌﻤﻞ‪.‬‬

‫ﻣﺜﺎل ‪:‬‬
‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪first page web‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬

‫>"‪<BODY BGCOLOR="#00FF00‬‬
‫!! ‪hello world‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬
‫اﻟﻨﺎﺗﺞ‪:‬‬

‫‪23‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻟﻘﺪ ﻗﻤﺖ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺎﺻﯿﺔ ‪ BGCOLOR‬إﻟﻰ اﻟﻮﺳﻢ >‪ ، <BODY‬وھﻲ ﺗﻘﻮم‬

‫ﺑﺘﺤﺪﯾﺪ ﻟﻮن اﻟﺨﻠﻔﯿﺔ ﻟﻠﺼﻔﺤﺔ‪ .‬أﻣﺎ ‪ 00FF00‬ﻓﮭﻲ اﻟﻘﯿﻤﺔ اﻟﺘﻲ ﺗﻤﺜﻞ اﻟﻠﻮن اﻟﻤﺨﺘﺎر‬
‫وھﻮ ھﻨﺎ اﻟﻠﻮن اﻷﺧﻀﺮ‪) ،‬ﻻﺣﻆ أﻧﮭﺎ ﻣﻜﺘﻮﺑﮫ ﺑﯿﻦ إﺷﺎرﺗﻲ " " (‬

‫ﻓﻤﻦ أﯾﻦ ﺟﺎءت ھﺬه اﻟﻘﯿﻢ‪ ،‬وﻛﯿﻒ؟‬

‫اﻟﻘﻠﯿﻞ ﻋﻦ اﻷﻟﻮان‪...‬‬

‫ﺗﻼﺣﻆ أن اﻟﻘﯿﻢ اﻟﺴﺎﺑﻘﺔ ﻣﻜﻮﻧﺔ ﻣﻦ ﺳﺘﺔ رﻣﻮز‪ ،‬وھﻲ ﻣﻜﺘﻮﺑﺔ ﺑﺎﻟﺼﯿﻐﺔ اﻟﺘﺎﻟﯿﺔ‪:‬‬

‫‪24‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ھﻨﺎك ﺛﻼﺛﺔ أﻟﻮان أﺳﺎﺳﯿﺔ ھﻲ اﻷﺣﻤﺮ واﻷﺧﻀﺮ واﻷزرق‪ ،‬وﻟﻜﻞ ﻣﻨﮭﺎ ﯾﻮﺟﺪ ‪ 256‬درﺟﺔ‬
‫ﻟﻮﻧﯿﺔ وﯾﻌﺒﺮ ﻋﻦ ھﺬه اﻟﺪرﺟﺎت ﺑﺎﻷرﻗﺎم ﻣﻦ ‪ 000‬وﺣﺘﻰ ‪ .255‬وﻣﻦ ﺧﻼل ﻣﺰج ھﺬه‬
‫اﻷﻟﻮان ﺑﺪرﺟﺎﺗﮭﺎ اﻟﻠﻮﻧﯿﺔ اﻟﻤﺨﺘﻠﻔﺔ ﻧﺤﺼﻞ ﻋﻠﻰ اﻷﻟﻮان اﻷﺧﺮى‪.‬‬

‫ﻓﻤﺜﻼ اﻟﻠﻮن اﻷﺳﻮد ﻣﻜﻮن ﻣﻦ اﻟﺪرﺟﺔ ‪ 000‬ﻣﻦ ﻛﻞ ﻣﻦ اﻟﻠﻮن اﻷﺣﻤﺮ واﻷﺧﻀﺮ‬

‫واﻷزرق‪ .‬واﻟﻠﻮن اﻷﺑﯿﺾ ﻣﻜﻮن ﻣﻦ اﻟﺪرﺟﺔ ‪ 255‬ﻣﻦ ھﺬه اﻷﻟﻮان‪ .‬أﻣﺎ اﻟﻠﻮن اﻷﺻﻔﺮ‬
‫ﻓﮭﻮ ﻣﻜﻮن ﻣﻦ اﻟﺪرﺟﺔ ‪ 255‬ﻟﻠﻮن اﻷﺣﻤﺮ‪ ،‬واﻟﺪرﺟﺔ ‪ 255‬ﻟﻠﻮن اﻷﺧﻀﺮ‪ ،‬واﻟﺪرﺟﺔ ‪000‬‬
‫ﻣﻦ اﻟﻠﻮن اﻷزرق‪ ...‬وھﻜﺬا ﺑﻨﻔﺲ اﻟﻄﺮﯾﻘﺔ ﯾﺘﻢ ﺗﻜﻮﯾﻦ ﺑﺎﻗﻲ اﻷﻟﻮان‬

‫وﺑﻌﻤﻠﯿﺔ ﺣﺴﺎﺑﯿﺔ ﺑﺴﯿﻄﺔ ‪ 256×256×256‬ﯾﻨﺘﺞ ﻟﺪﯾﻨﺎ أن ﻋﺪد اﻷﻟﻮان اﻟﺘﻲ ﯾﻤﻜﻦ‬

‫اﻟﺤﺼﻮل ﻋﻠﯿﮭﺎ ﺑﻤﺰج اﻷﻟﻮان اﻟﺜﻼﺛﺔ اﻟﺴﺎﺑﻘﺔ ھﻮ ‪ 16777216‬ﺑﺎﻟﻀﺒﻂ‪.‬‬

‫ﺣﺴﻨﺎ‪ ،‬ﻟﻜﻦ ﻣﻦ أي ﺟﺎءت اﻟﺮﻣﻮز ‪ FFFFFF‬واﻟﺘﻲ ﻋﺒﺮت ﻋﻦ اﻟﻠﻮن اﻷﺑﯿﺾ ﺑﮭﺎ‪ .‬إﻧﮭﺎ‬
‫ﺑﺒﺴﺎﻃﺔ أرﻗﺎم… ﻣﻜﺘﻮﺑﺔ ﺑﺎﻟﻨﻈﺎم اﻟﺴﺪاس ﻋﺸﺮي )ﻧﻈﺎم ﻋﺪدي أﺳﺎﺳﮫ اﻟﺮﻗﻢ ‪ 16‬وﯾﻌﺒﺮ‬
‫ﻋﻨﮫ ﺑﺎﺳﺘﺨﺪام اﻷرﻗﺎم اﻟﻌﺎدﯾﺔ ﻣﻦ ‪ 0‬إﻟﻰ ‪ 9‬واﻟﺮﻣﻮز ‪ .( A,B,C,D,E,F‬ﻓﺎﻟﺮﻗﻢ ‪255‬‬
‫ﺑﺎﻟﻨﻈﺎم اﻟﻌﺸﺮي اﻟﻌﺎدي ﯾﻜﺎﻓﺌﮫ اﻟﺮﻗﻢ ‪ FF‬ﺑﺎﻟﻨﻈﺎم اﻟﺴﺪاس ﻋﺸﺮي‪.‬‬

‫إذن ﻓﺎﻟﺮﻗﻢ اﻟﺴﺪاس ﻋﺸﺮي ‪ FF‬ﻋﻠﻰ اﻟﯿﺴﺎر ﯾﻤﺜﻞ اﻟﺪرﺟﺔ ‪ 255‬ﻟﻠﻮن اﻷﺣﻤﺮ‪ .‬واﻟﺮﻗﻢ‬
‫‪ FF‬ﻓﻲ اﻟﻮﺳﻂ ﯾﻤﺜﻞ اﻟﺪرﺟﺔ ‪ 255‬ﻣﻦ اﻟﻠﻮن اﻷﺧﻀﺮ‪ .‬واﻟﺮﻗﻢ ‪ FF‬ﻋﻠﻰ اﻟﯿﻤﯿﻦ ﯾﻤﺜﻞ‬
‫اﻟﺪرﺟﺔ ‪ 255‬ﻣﻦ اﻟﻠﻮن اﻷزرق‪.‬‬

‫وﻋﻠﻰ ھﺬا اﻟﻤﻨﻮال ﯾﻌﺒﺮ ﻋﻦ اﻟﻠﻮن اﻷزرق اﻟﻔﺎﺗﺢ ﺑﺎﻟﺮﻗﻢ اﻟﺴﺪاس ﻋﺸﺮي‪CC6699 :‬‬
‫أﻣﺎ اﻟﻠﻮن اﻷﺳﻮد ﻓﺮﻗﻤﮫ ھﻮ ‪.000000‬‬
‫وھﺬا ﺟﺪول ﺑﺒﻌﺾ اﻷﻟﻮان ورﻣﻮزھﺎ اﻟﻤﻜﺎﻓﺌﺔ ﺑﺎﻟﻨﻈﺎم اﻟﺴﺪاس ﻋﺸﺮي‪.‬‬
‫‪25‬‬
www.dinaro.com/vb3

26
www.dinaro.com/vb3

27
‫‪www.dinaro.com/vb3‬‬

‫ﺑﯿﺎن ﺑﺄﻟﻮان اﻟﺨﻠﻔﯿﺎت ‪:‬‬

‫‪28‬‬
www.dinaro.com/vb3

29
 ‫‪www.dinaro.com/vb3‬‬

‫ﻣﻼﺣﻈﺔ ﻣﮭﻤﺔ‪:‬‬

‫ﺑﻌﺾ اﻟﻤﺘﺼﻔﺤﺎت ﻻ ﺗﺘﻌﺮف ﻋﻠﻰ رﻣﻮز اﻷﻟﻮان إﻻ ﺑﻮﺿﻊ إﺷﺎرة ‪ #‬ﻗﺒﻞ ھﺬه اﻟﺮﻣﻮز‪،‬‬
‫ﻟﺬﻟﻚ ﻣﻦ اﻷﻓﻀﻞ اﺳﺘﺨﺪاﻣﮭﺎ داﺋﻤﺎً‪.‬‬

‫وﺑﺎﻟﻨﺴﺒﺔ ﻟﺒﻌﺾ اﻷﻟﻮان اﻷﺳﺎﺳﯿﺔ واﻟﺪارﺟﺔ‪ ،‬ﻣﻦ اﻟﻤﻤﻜﻦ اﺳﺘﺨﺪام أﺳﻤﺎء ھﺬه اﻷﻟﻮان‬
‫ﻣﺒﺎﺷﺮة ﺑﺪﻻً ﻣﻦ اﻷرﻗﺎم اﻟﺴﺪاس ﻋﺸﺮﯾﺔ‪ .‬وھﺬا ﺟﺪول ﯾﻮﺿﺢ ھﺬه اﻷﻟﻮان وﻣﺴﻤﯿﺎﺗﮭﺎ‪:‬‬

‫وﻧﻌﻮد إﻟﻰ اﻟﻮﺳﻮم و ﺧﺼﺎﺋﺼﮭﺎ ‪...‬‬

‫ﻣﺜﺎل ‪:‬‬

‫‪30‬‬
 www.dinaro.com/vb3

<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>

<BODY BGCOLOR="#000000"
BACKGROUND=" maroc.jpg">
hello world !!
</BODY>
</HTML>

‫ ﺑﺘﺤﺪﯾﺪ ﺻﻮرة ﻛﺨﻠﻔﯿﺔ )ورق ﺟﺪران( ﻟﻠﺼﻔﺤﺔ‬BACKGROUND ‫ﺗﻘﻮم اﻟﺨﺎﺻﯿﺔ‬

:‫وﻗﺪ اﺳﺘﺨﺪﻣﺖ اﻟﺼﻮرة اﻟﺘﺎﻟﯿﺔ‬

31
 ‫‪www.dinaro.com/vb3‬‬

‫واﻟﻤﺴﻤﺎة ‪ maroc.jpg‬ﻓﻲ ﺻﻔﺤﺘﻲ وﻛﺎﻧﺖ ھﺬه اﻟﻨﺘﯿﺠﺔ ‪:‬‬

‫‪32‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺗﻼﺣﻆ أن اﻟﻤﺘﺼﻔﺢ ﻗﺪ ﻗﺎم ﺑﺘﻜﺮار ﻋﺮض اﻟﺼﻮرة ﺑﻄﺮﯾﻘﺔ اﻟﺘﺠﺎﻧﺐ وأﻧﮭﺎ أﺻﺒﺤﺖ ﺗﻐﻄﻲ‬
‫ﻛﻞ اﻟﺸﺎﺷﺔ‪ .‬ﺑﺤﯿﺚ ﺣﺠﺒﺖ أﯾﻀﺎً اﻟﻠﻮن اﻷﺑﯿﺾ اﻟﺬي ﺣﺪدﻧﺎه ﻛﻠﻮن اﻟﺨﻠﻔﯿﺔ )ﻣﻦ ﺧﻼل‬
‫اﻟﺨﺎﺻﯿﺔ ‪ (BGCOLOR‬واﻟﺤﻘﯿﻘﺔ أن اﻟﻠﻮن ﯾﻈﮭﺮ ﻓﻘﻂ ﻋﻨﺪﻣﺎ ﻻ ﻧﻘﻮم ﺑﺎﺳﺘﺨﺪام‬
‫ﺻﻮرة ﻣﺎ ﻛﺨﻠﻔﯿﺔ‪ .‬وﻣﻊ ذﻟﻚ ﯾﻔﻀﻞ ﺗﺤﺪﯾﺪه إﺣﺘﯿﺎﻃﺎً ﺧﺎﺻﺔ وأن ﺑﻌﺾ اﻟﻤﺘﺼﻔﺤﺎت اﻟﻘﺪﯾﻤﺔ‬
‫ﺗﻮﺻﻒ ﺑﺄﻧﮭﺎ ﻣﺘﺼﻔﺤﺎت ﻧﺼﯿﺔ ‪) Text-Based Browsers‬أي ﻟﯿﺲ ﺑﺈﻣﻜﺎﻧﮭﺎ ﻋﺮض‬
‫اﻟﺼﻮر(‪ .‬أو رﺑﻤﺎ ھﻨﺎك ﺑﻌﺾ اﻟﻤﺴﺘﺨﺪﻣﯿﻦ اﻟﺬﯾﻦ ﻗﺎﻣﻮا ﺑﺈﻟﻐﺎء ﺧﯿﺎر ﻋﺮض اﻟﺼﻮر ﺗﻠﻘﺎﺋﯿﺎً‬
‫ﻣﻦ ﻣﺘﺼﻔﺤﺎﺗﮭﻢ‪ .‬إذن ﻟﻨﻌﻄﮭﻢ ﻋﻠﻰ اﻷﻗﻞ ﻓﺮﺻﺔ ﻣﺸﺎھﺪة ﺑﻌﺾ اﻷﻟﻮان إن ﻟﻢ ﯾﺴﺘﻄﯿﻌﻮا‬
‫ﻣﺸﺎھﺪة اﻟﺼﻮر‪.‬‬

‫إﻧﻨﺎ ﻧﺴﺘﻄﯿﻊ اﺳﺘﺨﺪام اﻟﺼﻮر ﺑﺄﺣﺠﺎم ﻣﺨﺘﻠﻔﺔ ﻃﻮﻟﯿﺎً أو ﻋﺮﺿﯿﺎً ﻛﺨﻠﻔﯿﺎت ﻟﻠﺼﻔﺤﺔ‪،‬‬
‫واﻟﻤﺘﺼﻔﺢ ﻧﻔﺴﮫ ھﻮ اﻟﺬي ﯾﻘﻮم ﺗﻠﻘﺎﺋﯿﺎً ﺑﻌﺮﺿﮭﺎ ﻓﻲ وﺿﻊ اﻟﺘﺠﺎﻧﺐ ﻣﻤﺎ ﯾﻌﻄﻲ اﻻﻧﻄﺒﺎع‬
‫ﺑﺄﻧﮭﺎ ﺻﻮرة ﻛﺒﯿﺮة‪.‬‬

‫وﻟﻨﻜﻤﻞ ﻣﻊ ﺑﺎﻗﻲ اﻟﺨﺼﺎﺋﺺ ﻓﻲ وﺳﻢ >‪ :<BODY‬رﺑﻤﺎ ﻻﺣﻈﺖ ﺧﻼل اﺳﺘﺨﺪاﻣﻚ‬

‫ﻟﻺﻧﺘﺮﻧﺖ أن ﻣﻌﻈﻢ اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ )‪ (Links‬اﻟﺘﻲ ﺗﻨﻘﺮ ﻋﻠﯿﮭﺎ ﻟﺘﻨﻘﻠﻚ إﻟﻰ ﺻﻔﺤﺎت أو‬
‫ﻣﻮاﻗﻊ أﺧﺮى ﻋﻠﻰ اﻟﺸﺒﻜﺔ ھﻲ داﺋﻤﺎً ﻣﻤﯿﺰة ﺑﺎﻟﻠﻮن اﻷزرق‪ ،‬وأن اﻟﻮﺻﻼت اﻟﺘﻲ ﻗﻤﺖ‬
‫ﺑﺰﯾﺎرﺗﮭﺎ ﻓﻌﻼً ﻗﺪ ﺗﺤﻮل ﻟﻮﻧﮭﺎ إﻟﻰ اﻟﻘﺮﻣﺰي‪ .‬ﺣﺴﻨﺎً‪ ،‬ھﺬه ھﻲ اﻷﻟﻮان اﻹﻓﺘﺮاﺿﯿﺔ اﻟﺘﻲ‬
‫ﺗﻌﺘﻤﺪھﺎ اﻟﻤﺘﺼﻔﺤﺎت‪ .‬ﻟﻜﻦ ﻗﺪ ﻻ ﯾﻌﺠﺒﻚ ذﻟﻚ وﺗﺮﯾﺪ ﺗﻐﯿﯿﺮ ھﺬا اﻟﻨﻈﺎم‪ .‬أو ﺑﺒﺴﺎﻃﺔ رﺑﻤﺎ ﺗﺮﯾﺪ‬
‫اﺳﺘﺨﺪام ﻟﻮن أو ﺻﻮرة ﻏﺎﻣﻘﺔ ﻟﺨﻠﻔﯿﺔ اﻟﺼﻔﺤﺔ ﺑﻤﺎ ﺳﯿﺆدي إﻟﻰ اﺧﺘﻔﺎء ھﺬه اﻟﻮﺻﻼت أو‬
‫ﺣﺘﻰ اﺧﺘﻔﺎء ﻧﺺ اﻟﺼﻔﺤﺔ ﻧﻔﺴﮭﺎ‪ .‬ﻓﻤﺎ اﻟﻌﻤﻞ؟‬

‫ﺇﻟﻴﻙ ﻫﺫﻩ ﺍﻟﺨﺼﺎﺌﺹ ﺍﻟﺘﻲ ﺘﻘﻭﻡ ﺒﺎﻟﺘﺤﻜﻡ ﻓﻲ ﺃﻟﻭﺍﻥ ﺍﻟﻨﺼﻭﺹ‪:‬‬

‫‪33‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫واﻵن‪ ،‬دﻋﻨﺎ ﻧﺠﻤﻞ اﻟﺨﺼﺎﺋﺺ اﻟﺴﺎﺑﻘﺔ ﻓﻲ ﻋﺒﺎرة واﺣﺪة‪ .‬وﺳﻮف أﻛﺘﺐ اﻟﺮﻣﻮز اﻟﺨﺎﺻﺔ‬
‫ﺑﺎﻷﻟﻮان ﺑﻨﻔﺲ ﺗﻠﻚ اﻷﻟﻮان اﻟﺘﻲ ﺗﻤﺜﻠﮭﺎ‪ .‬وأﻟﻔﺖ ﻧﻈﺮك إﻟﻰ أﻧﮫ ﻻ أھﻤﯿﺔ ﻟﻠﺘﺮﺗﯿﺐ ﻓﻲ ﻛﺘﺎﺑﺔ‬
‫ھﺬه اﻟﺨﺼﺎﺋﺺ داﺧﻞ اﻟﻌﺒﺎرة‪.‬‬
‫ﻣﺜﺎل ‪:‬‬
‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪first page web‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬
‫"‪<BODY BACKGROUND="dinaro.jpg‬‬
‫"‪BGCOLOR="#ff9900‬‬
‫"‪TEXT="#33ff66‬‬
‫"‪LINK="#6600ff‬‬
‫"‪VLINK="#ff0000‬‬
‫>"‪ALINK="#999999‬‬
‫!! ‪hello world‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬
‫اﻟﻨﺎﺗﺞ‪:‬‬

‫‪34‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺣﺎول أن ﺗﺤﻠﻠﮭﺎ! ھﻞ اﺳﺘﻨﺘﺠﺖ أﻧﻨﻲ ﻗﺪ ﺣﺪدت اﻟﺼﻮرة ‪ dinaro.jpg‬ﻛﺨﻠﻔﯿﺔ ﻟﻠﺼﻔﺤﺔ؟‬

‫وأﻧﻨﻲ اﺧﺘﺮت اﻟﻠﻮن اﻟﺒﺮﺗﻘﺎﻟﻲ ﻟﻠﺨﻠﻔﯿﺔ )ﻓﻲ ﺣﺎﻟﺔ ﻋﺪم ﻋﺮض اﻟﺼﻮرة اﻟﺴﺎﺑﻘﺔ ﻛﺨﻠﻔﯿﺔ(؟‬
‫وان اﻟﻨﺺ ﺳﯿﻈﮭﺮ ﺑﺎﻟﻠﻮن اﻷﺧﻀﺮ ؟ أﻣﺎ اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ ﻓﻠﻮﻧﮭﺎ أزرق‪ ،‬واﻟﻮﺻﻼت‬
‫اﻟﺘﻲ ﺗﻤﺖ زﯾﺎرﺗﮭﺎ ﺳﺘﻈﮭﺮ ﺑﺎﻟﻠﻮن اﻷﺣﻤﺮ‪ .‬أﻣﺎ ﺗﻠﻚ اﻟﻮﺻﻠﺔ اﻟﻔﻌﺎﻟﺔ ﻓﺴﺘﻈﮭﺮ ﺑﺎﻟﻠﻮن‬
‫اﻟﺮﻣﺎدي ﻓﻲ ﻟﺤﻈﺔ اﻟﻨﻘﺮ ﻋﻠﯿﮭﺎ ﺑﺎﻟﻔﺄرة‪.‬‬

‫إذا ﻛﺎﻧﺖ ھﺬه ھﻲ اﺳﺘﻨﺘﺎﺟﺎﺗﻚ‪ ...‬ﻓﻤﺒﺮوك‪ ،‬ﻟﻘﺪ ﻧﺠﺤﺖ‪ .‬وﻛﻞ ﻣﺎ أﺗﻤﻨﺎه أن ﺗﻜﻮن ﻗﺪ ﻗﻀﯿﺖ‬
‫وﻗﺘﺎً ﻣﻠﻮﻧﺎً وزاھﯿﺎً ﻣﻊ ھﺬا اﻟﺪرس‪.‬‬

‫أﻟﯿﺲ ھﺬا‬
‫ﻣﻤﺘﻌﺎ‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫!!!!!!!!!!!!!!!!‬
‫‪HHHHHHHHHHHHHH‬‬
‫‪HHHHHHHHHHH‬‬
‫‪35‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﺙ‬
‫‪‬‬

‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺜﺎﻟﺚ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬

‫ﻻ زﻟﻨﺎ ﻧﻨﺎﻗﺶ ﻣﻌﺎً أﺳﺎﺳﯿﺎت ﺗﻨﺴﯿﻖ ﺻﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ واﻟﺘﺤﻜﻢ ﺑﺨﺼﺎﺋﺼﮭﺎ‪ .‬وﺳﻮف ﻧﺘﺎﺑﻊ‬
‫ذﻟﻚ ﻓﻲ ھﺬا اﻟﺪرس ﻣﻦ ﺧﻼل اﻟﺘﻌﺮف ﻋﻠﻰ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺎﻟﺨﻄﻮط‪.‬‬

‫ﺳﻮف ﺗﻼﺣﻆ ﻓﻲ ھﺬا اﻟﺪرس واﻟﺪروس اﻟﻼﺣﻘﺔ أن ھﻨﺎك أﻛﺜﺮ ﻣﻦ ﻃﺮﯾﻘﺔ ﻷداء ﻧﻔﺲ‬
‫اﻟﻌﻤﻞ‪ ،‬أو إﻋﻄﺎء ﻧﻔﺲ اﻟﺨﺼﺎﺋﺺ ﻟﺼﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ‪ .‬وﺑﺎﻟﻤﻘﺎﺑﻞ ﻗﺪ ﯾﺒﺪو ﻟﻚ أن ﺑﻌﺾ‬
‫اﻟﻮﺳﻮم واﻟﺨﺼﺎﺋﺺ ﻣﺘﺸﺎﺑﮭﺔ ﻓﻲ ﺗﺄﺛﯿﺮھﺎ‪ ،‬ﻟﻜﻦ ﺑﺎﻟﻘﻠﯿﻞ ﻣﻦ اﻟﺘﺪﻗﯿﻖ واﻟﺘﺠﺮﺑﺔ ﺳﺘﻜﺘﺸﻒ‬
‫أن ﻟﻜﻞ وﺳﻢ ﺧﺼﻮﺻﯿﺘﮫ‪.‬‬

‫ﻟﻨﺒﺪأ اﻟﻌﻤﻞ ﯾﺎ ﻋﺰﯾﺰي اﻟﻤﺘﺪرب !!!!!!!‬

‫راﺟﻊ ﺻﻔﺤﺘﻨﺎ اﻟﺒﺴﯿﻄﺔ اﻟﺘﻲ ﻋﻤﻠﻨﺎ ﻓﯿﮭﺎ ﻓﻲ اﻟﺪرﺳﯿﻦ اﻟﺴﺎﺑﻘﯿﻦ‪ .‬إﻧﻨﺎ ﻟﻢ ﻧﻘﻢ ﺑﺎﻟﺘﻌﺎﻣﻞ ﻣﻊ‬
‫اﻟﺨﻄﻮط ﻓﯿﮭﺎ وﻻ ﺑﺄي ﺷﻜﻞ ﻣﻦ اﻷﺷﻜﺎل‪ .‬أي أﻧﻨﺎ ﺗﺮﻛﻨﺎھﺎ ﻋﻠﻰ إﻋﺪاداﺗﮭﺎ اﻻﻓﺘﺮاﺿﯿﺔ‪.‬‬

‫وﺑﺎﻟﻤﻨﺎﺳﺒﺔ ﻓﺈن ھﺬه اﻹﻋﺪادات ھﻲ ﺧﻂ ﻋﺎدي‪ ،‬ﻧﻮﻋﮫ ‪ Times New Roman‬وﺣﺠﻤﮫ‬

‫‪) 3‬ﺑﻤﻘﯿﺎس ﻣﺘﺼﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ(‪.‬‬

‫‪36‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫اﻟﻮﺳﻢ اﻷول اﻟﺨﺎص ﺑﺎﻟﺨﻄﻮط ھﻮ >‪.<FONT/> ... <FONT‬‬

‫وھﻮ ﯾﻘﻮم ﺑﺎﻟﺘﺤﻜﻢ ﺑﺎﻟﺨﻄﻮط ﻣﻦ ﺣﯿﺚ اﻟﻨﻮع واﻟﻠﻮن واﻟﺤﺠﻢ‪ .‬أﻣﺎ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ‬
‫ﻧﺴﺘﺨﺪﻣﮭﺎ ﻣﻊ ھﺬا اﻟﻮﺳﻢ واﻟﻮﺳﻮم اﻷﺧﺮى ﻟﻠﺨﻄﻮط ﻓﮭﻲ ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬

‫‪37‬‬
www.dinaro.com/vb3

38
 ‫‪www.dinaro.com/vb3‬‬

‫واﻵن أﻋﺮف ﻣﺎذا ﺗﺮﯾﺪ أن ﺗﺴﺄل‪ ،‬ﺳﺘﻘﻮل ﻟﻘﺪ ﺛﺒﺖ ﺣﺠﻢ اﻟﺨﻂ ﻋﻠﻰ ﺣﺪه اﻷدﻧﻰ ﻋﻨﺪ‬
‫اﻟﺪرﺟﺔ ‪ 2-‬وﻋﻠﻰ ﺣﺪه اﻷﻋﻠﻰ ﻋﻨﺪ اﻟﺪرﺟﺔ ‪ .4+‬إذن ﻣﺎ اﻟﻔﺎﺋﺪة ﻣﻦ وﺟﻮد اﻟﺪرﺟﺎت‬
‫اﻷﺧﺮى اﻷﻗﻞ ﻣﻦ ‪ 2-‬واﻷﻛﺒﺮ ﻣﻦ ‪4+‬؟‬

‫ﺣﺴﻨﺎ وأﻧﺎ أﺟﯿﺒﻚ ﺑﺴﺆال آﺧﺮ‪ :‬ﻣﺎذا ﻟﻮ ﻗﻤﻨﺎ ﺑﺘﻐﯿﯿﺮ اﻟﺤﺠﻢ اﻻﻓﺘﺮاﺿﻲ ﻟﻠﺨﻂ ﻓﻲ ﻛﻞ‬
‫اﻟﺼﻔﺤﺔ إﻟﻰ ‪ 1‬ﺑﺪﻻً ﻣﻦ ‪3‬؟ )وﺳﻮف ﻧﻘﻮم ﺑﺬﻟﻚ ﻓﻌﻼً ﺑﻌﺪ ﻗﻠﯿﻞ(‪ ،‬أﻻ ﻧﺤﺘﺎج ﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ‬
‫إﻟﻰ اﻟﺪرﺟﺎت ﻣﻦ ‪ 1+‬إﻟﻰ ‪ 6+‬ﻟﺘﻤﺜﯿﻞ اﻷﺣﺠﺎم اﻷﻛﺒﺮ ﻣﻨﮫ؟ وإذا ﻗﻤﻨﺎ ﺑﺘﺤﺪﯾﺪ ‪ 7‬ﻛﺤﺠﻢ‬
‫إﻓﺘﺮاﺿﻲ أﻻ ﻧﺤﺘﺎج إﻟﻰ اﻟﺪرﺟﺎت ﻣﻦ ‪ 1-‬إﻟﻰ ‪ 6-‬ﻟﺘﻤﺜﯿﻞ اﻷﺣﺠﺎم اﻷﺻﻐﺮ ﻣﻨﮫ؟ إذن ﻧﺤﻦ‬
‫ﻧﺤﺘﺎج ﻓﻌﻼً إﻟﻰ ھﺬه اﻟﺪرﺟﺎت ﻟﻜﻲ ﻧﻐﻄﻲ ﺟﻤﯿﻊ اﻹﺣﺘﻤﺎﻻت اﻟﻮاردة‪.‬‬

‫أرﺟﻮ أن ﯾﻜﻮن ھﺬا اﻟﺠﻮاب ﻗﺪ أﻗﻨﻌﻚ ‪(-:‬‬

‫وھﺬه ﺑﻌﺾ اﻷﻣﺜﻠﺔ ﻟﺘﻮﺿﺢ ﻟﻚ ﻛﯿﻔﯿﺔ اﺳﺘﺨﺪام ھﺬا اﻟﻮﺳﻢ‪ ،‬وﺳﻮف أرﻓﻖ ﻧﺘﯿﺠﺔ ﻛﻞ ﻣﺜﺎل‬
‫ﺑﻌﺪه ﻣﺒﺎﺷﺮة‪.‬‬
‫>”‪<FONT FACE="arial" SIZE="6" COLOR="#6633ff‬‬
‫‪This font is Arial, Size is 6, Color is Red‬‬
‫>‪</FONT‬‬

‫‪This font is Arial, Size is 6, Color is Blue‬‬

‫>"‪<FONT FACE="arial" SIZE="+3" COLOR="#FF0000‬‬
‫‪This font is Arial, Size is +3, Color is Red‬‬
‫>‪</FONT‬‬

‫‪39‬‬
 www.dinaro.com/vb3

This font is Arial, Size is +3, Color

is Red
<FONT FACE="Arial" SIZE="5" COLOR="#00FF00"> This
</FONT>
<FONT FACE="Times New Roman" SIZE="7"
COLOR="#FF00FF"> is </FONT>
<FONT FACE="Arial" SIZE="2" COLOR="#FF0000"> multi
</FONT>
<FONT FACE="Impact" SIZE="4" COLOR="#000000">
colors, </FONT>
<FONT FACE="Courier" SIZE="2" COLOR="#0000FF"> multi
</FONT>
<FONT FACE="Times New Roman" SIZE="3"
COLOR="#008080"> faces, </FONT>
<FONT FACE="Courier" SIZE="6" COLOR="#FFFF00"> and
</FONT>
<FONT FACE="Arial" SIZE="5" COLOR="#808080"> multi
</FONT>
<FONT FACE="Impact" SIZE="2" COLOR="#800000"> sizes
</FONT>
<FONT FACE="Times New Roman" SIZE="7"
COLOR="#00FFFF"> text </FONT>

This is multi colors, multi faces, and multi sizes text

<FONT FACE="Impact" SIZE="6" COLOR="#000000">C
</FONT>
<FONT FACE="Impact" SIZE="6"
COLOR="#008080">O</FONT>
40
 ‫‪www.dinaro.com/vb3‬‬

‫"‪<FONT FACE="Impact" SIZE="6‬‬

‫>‪COLOR="#FF0000">L</FONT‬‬
‫"‪<FONT FACE="Impact" SIZE="6‬‬
‫>‪COLOR="#0000FF">O</FONT‬‬
‫"‪<FONT FACE="Impact" SIZE="6‬‬
‫>‪COLOR="#800000">R</FONT‬‬
‫"‪<FONT FACE="Impact" SIZE="6‬‬
‫>‪COLOR="#FF00FF">S</FONT‬‬

‫‪COLORS‬‬
‫ﻧﻨﺘﻘﻞ اﻵن إﻟﻰ اﻟﻮﺳﻢ اﻟﺜﺎﻧﻲ ﻣﻦ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺎﻟﺨﻄﻮط وھﻮ >‪.<BASEFONT‬‬

‫وﻋﻤﻠﮫ ھﻮ ﺗﺤﺪﯾﺪ ﻧﻮع اﻟﺨﻂ وﺧﺼﺎﺋﺼﮫ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﺼﻔﺤﺔ ﻛﻠﮭﺎ ‪ .‬أي أﻧﮫ ﯾﻘﻮم ﺑﺘﻌﺮﯾﻒ‬
‫ﻧﻮع اﻟﺨﻂ اﻷﺳﺎﺳﻲ اﻟﺬي ﺳﯿﺴﺘﺨﺪم ﻓﻲ اﻟﺼﻔﺤﺔ ﻣﻦ ﺑﺪاﯾﺘﮭﺎ إﻟﻰ ﻧﮭﺎﯾﺘﮭﺎ وﯾﺤﺪد ﻟﻮﻧﮫ‬
‫وﺣﺠﻤﮫ‪.‬‬

‫ھﻞ ﻻﺣﻈﺖ اﻧﮫ وﺳﻢ ﻣﻔﺮد وﻻ ﯾﺤﺘﻮي ﻋﻠﻰ وﺳﻢ ﻟﻠﻨﮭﺎﯾﺔ؟ ﺑﺎﻟﻄﺒﻊ ﻣﺎ اﻟﺤﺎﺟﺔ إﻟﻰ وﺳﻢ‬
‫اﻟﻨﮭﺎﯾﺔ ﻃﺎﻟﻤﺎ أﻧﮫ ﯾﺘﻌﺎﻣﻞ ﻣﻊ اﻟﺼﻔﺤﺔ ﻛﻜﻞ وﻣﻊ اﻹﻋﺪادات اﻷﺳﺎﺳﯿﺔ ﻟﮭﺎ‪ ،‬وﻟﯿﺲ ﻣﻊ ﻛﻠﻤﺔ‬
‫أو ﺳﻄﺮ أو ﻓﻘﺮة ﺑﺬاﺗﮭﺎ‪ .‬ﻟﺬﻟﻚ ﻓﺈن ھﺬا اﻟﻮﺳﻢ ﯾﻜﺘﺐ ﻋﺎدة ﻓﻲ أول اﻟﻤﻠﻒ‪ ،‬وﯾﻔﻀﻞ ﻣﺒﺎﺷﺮة‬
‫ﺑﻌﺪ وﺳﻢ >‪ .<BODY‬أﻣﺎ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻌﮫ ﻓﮭﻲ ﻧﻔﺲ اﻟﺨﺼﺎﺋﺺ ﺳﺎﻟﻔﺔ‬
‫اﻟﺬﻛﺮ ﻣﻊ >‪) ، <FONT‬ﻧﺴﺘﻄﯿﻊ اﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ ‪ Name‬ﻣﻌﮫ ﺑﺪﻻً ﻣﻦ ‪.(Face‬‬
‫وﺑﻨﻔﺲ اﻟﻄﺮﯾﻘﺔ وﺑﺪون أي اﺧﺘﻼﻓﺎت‪ .‬وإﻟﯿﻚ ھﺬه اﻟﺸﯿﻔﺮة ﻛﻤﺜﺎل‪:‬‬

‫>"‪<BASEFONT Name="Arial" COLOR="#FF0000" SIZE="5‬‬

‫‪41‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫وﺑﺪراﺳﺔ ھﺬا اﻟﻤﺜﺎل ﻧﺴﺘﻨﺘﺞ أﻧﮫ ﯾﻘﻮم ﺑﺘﻌﺪﯾﻞ اﻟﺨﻂ اﻻﻓﺘﺮاﺿﻲ ﻟﻠﺼﻔﺤﺔ ﺑﺤﯿﺚ ﯾﺼﺒﺢ‬
‫ﻧﻮﻋﮫ ‪ Arial‬وﺣﺠﻤﮫ ‪ 5‬وﻟﻮﻧﮫ أﺣﻤﺮ‪ .‬وﺑﺎﻟﺘﺎﻟﻲ ﻓﺈن ﻛﻞ اﻟﻨﺼﻮص اﻟﻤﻜﺘﻮﺑﺔ ﻓﻲ ﺗﻠﻚ‬
‫اﻟﺼﻔﺤﺔ ﺳﯿﻄﺒﻖ ﻋﻠﯿﮭﺎ ھﺬا اﻟﻨﻤﻂ ﻣﻦ اﻟﺨﻂ‪ .‬ﻣﺎ ﻟﻢ ﻧﻘﻢ ﻃﺒﻌﺎ ﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻮم >‪<Font‬‬
‫‪ <Font/> ...‬ﻟﺘﻌﺪﯾﻠﮭﺎ واﻟﺘﺤﻜﻢ ﺑﻤﻈﮭﺮھﺎ ﻛﻤﺎ ﻓﻌﻠﻨﺎ ﻓﻲ اﻷﻣﺜﻠﺔ اﻟﺴﺎﺑﻘﺔ‪ ،‬ﻓﮭﻲ أﻛﺜﺮ ﺗﺤﺪﯾﺪاً‬
‫وأﻛﺜﺮ ﻣﺮوﻧﺔ ﻣﻦ اﻟﻮﺳﻢ >‪. <BASEFONT‬‬

‫وﺑﻤﻨﺎﺳﺒﺔ اﻟﺤﺪﯾﺚ ﻋﻦ اﻷﻟﻮان وﺗﻐﯿﯿﺮ اﻟﻠﻮن اﻷﺳﺎﺳﻲ ﻟﻨﺺ اﻟﺼﻔﺤﺔ‪ .‬أﻻ ﺗﺬﻛﺮ أﻧﻨﺎ ﻓﻲ‬
‫اﻟﺪرس اﻟﺴﺎﺑﻖ ﺗﻜﻠﻤﻨﺎ ﻋﻦ اﻟﺨﺎﺻﯿﺔ ‪ Text‬اﻟﺘﻲ ﺗﻜﺘﺐ ﻣﻊ اﻟﻮﺳﻢ >‪ <Body‬واﻟﺘﻲ‬
‫اﺳﺘﺨﺪﻣﻨﺎھﺎ ﻟﺘﺤﺪﯾﺪ ﻟﻮن ﻧﺺ اﻟﺼﻔﺤﺔ‪ ...‬أﻧﺎ ﻻ زﻟﺖ أذﻛﺮ ذﻟﻚ‪.‬‬

‫ﻻ ﯾﻮﺟﺪ ﺗﻌﺎرض ﺑﯿﻦ ھﺬه اﻟﺨﺎﺻﯿﺔ وﺧﺎﺻﯿﺔ ‪ Color‬ﻓﻲ اﻟﻮﺳﻢ >‪<BASEFONT‬‬

‫ﻓﺄﻧﺖ ﺑﻜﻞ ﺑﺴﺎﻃﺔ ﺗﺴﺘﻄﯿﻊ اﺳﺘﺨﺪام أي ﻣﻨﮭﻤﺎ ﻓﻲ ﺻﻔﺤﺘﻚ‪ .‬وإذا ﺣﺪث واﺳﺘﺨﺪﻣﺖ ﻛﻼھﻤﺎ‬
‫ﻓﺈن اﻟﻠﻮن اﻟﻤﺤﺪد ﻣﻊ اﻟﻮﺳﻢ >‪ <BASEFONT‬ھﻮ اﻟﺬي ﺳﯿﻄﺒﻘﮫ اﻟﻤﺘﺼﻔﺢ وﯾﻌﺘﻤﺪه‪.‬‬

‫وھﻨﺎ أرﯾﺪ أن أذﻛﺮك ﺑﻤﺎ ﻗﻠﺘﮫ ﻓﻲ ﺑﺪاﯾﺔ ھﺬا اﻟﺪرس‪:‬‬

‫ﻳﻮﺟﺪ ﺩﺍﺋﻤﺎﹰ ﺃﻛﺜﺮ ﻣﻦ ﻃﺮﻳﻘﺔ‬

‫ﻷﺩﺍﺀ ﻧﻔﺲ ﺍﻟﻌﻤﻞ‬

‫‪42‬‬
 www.dinaro.com/vb3

:‫ ﻓﻲ ﺻﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ وھﻲ‬Headings ‫ھﻨﺎك وﺳﻮم ﺧﺎﺻﺔ ﺗﺴﺘﺨﺪم ﻟﺘﻤﯿﯿﺰ اﻟﻌﻨﺎوﯾﻦ‬

</Hn> ... <Hn>

.‫ ﯾﻤﺜﻞ ﻣﺴﺘﻮى اﻟﻌﻨﻮان‬6-1 ‫ ھﻮ رﻗﻢ ﺑﯿﻦ‬n ‫وﺣﺮف‬

<H1> Heading 1 </H1>

<H2> Heading 2 </H2>
<H3> Heading 3 </H3>
<H4> Heading 4 </H4>
<H5> Heading 5 </H5>
<H6> Heading 6 </H6>

43
 ‫‪www.dinaro.com/vb3‬‬

‫وﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﺘﻨﺴﯿﻘﺎت واﻟﺘﺄﺛﯿﺮات اﻟﺘﻲ ﯾﻤﻜﻦ إﺿﺎﻓﺘﮭﺎ إﻟﻰ اﻟﻨﺼﻮص‪ .‬وﻓﯿﻤﺎ ﯾﻠﻲ‬
‫اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﮭﺎ ﻣﺘﺒﻮﻋﺔ ﺑﻤﺜﺎل وﻧﺘﯿﺠﺘﮫ‪:‬‬

‫‪ ü‬ﺧﻂ اﻟﻐﺎﻣﻖ )اﻷﺳﻮد اﻟﻌﺮﯾﺾ(‪ ،‬وﻧﺴﺘﺨﺪم ﻟﮫ اﻟﻮﺳﻮم اﻟﺘﺎﻟﯿﺔ‪:‬‬

‫>‪<B> ... </B‬‬
‫>‪<STRONG> ... </STRONG‬‬

‫‪ ü‬اﻟﺨﻂ اﻟﻤﺎﺋﻞ‬
‫>‪<I> ... </I‬‬
‫>‪<EM> ... </EM‬‬

‫‪ ü‬اﻟﺨﻂ اﻟﻤﺴﻄﺮ‬
‫>‪<U> ... </U‬‬

‫‪ ü‬اﻟﺨﻂ اﻟﻤﺮﺗﻔﻊ‬
‫>‪<SUP> ... </SUP‬‬

‫‪44‬‬
 www.dinaro.com/vb3

‫ اﻟﺨﻂ اﻟﻤﻨﺨﻔﺾ‬ü
<SUB> ... </SUB>

‫ ﺧﻂ ﻛﺒﯿﺮ‬ü
<BIG> ... </BIG>

‫ ﺧﻂ ﺻﻐﯿﺮ‬ü
<SMALL> ... </SMALL>

‫ ﻧﺺ ﯾﻌﺘﺮﺿﮫ ﺧﻂ‬ü
<STRIKE> ... </STRIKE>
<S> ... </S>

TeleType ‫ ﻧﺺ اﻵﻟﺔ اﻟﻄﺎﺑﻌﺔ‬ü

<TT> ... </TT>

45
 ‫‪www.dinaro.com/vb3‬‬

‫وھﺬا اﻟﻨﺺ ﯾﻌﺮف أﯾﻀﺎً ﺑﺎﻟﻨﺺ ﻣﻮﺣَﺪ اﻟﻤﺴﺎﻓﺎت ‪ .Monospaced Text‬وﻟﺘﻮﺿﯿﺢ‬

‫ھﺬا اﻟﻤﻔﮭﻮم إﻟﯿﻚ اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ‪:‬‬

‫إذا أﺧﺬﻧﺎ اﻟﺤﺮﻓﯿﻦ ‪ m,i‬وﻛﺘﺒﻨﺎ ﻛﻞ ﻣﻨﮭﻤﺎ ﻋﺸﺮ ﻣﺮات ﻣﺘﺘﺎﻟﯿﺔ ﻧﻼﺣﻆ أن اﻟﻤﺴﺎﺣﺔ اﻟﺘﻲ‬
‫ﺷﻐﻠﮭﺎ اﻟﺤﺮف ‪ m‬ھﻲ أﺿﻌﺎف اﻟﻤﺴﺎﺣﺔ اﻟﺘﻲ ﺷﻐﻠﮭﺎ اﻟﺤﺮف ‪i‬‬

‫‪iiiiiiiiii‬‬
‫‪mmmmmmmmmm‬‬

‫أﻣﺎ ﻋﻨﺪ اﺳﺘﺨﺪام اﻟﻮﺳﻢ >‪ </TT> ... <TT‬ﻓﺈن اﻟﻤﺴﺎﺣﺔ اﻟﺘﻲ ﯾﺸﻐﻠﮭﺎ ﻛﻼ اﻟﺤﺮﻓﯿﻦ‬
‫ﺗﺼﺒﺢ ﻣﻮﺣﺪة‬

‫‪iiiiiiiiii‬‬
‫‪mmmmmmmmmm‬‬

‫وھﺬه أﻣﺜﻠﺔ ﺗﺠﻤﻊ ﺑﯿﻦ ﻋﺪة ﺗﻨﺴﯿﻘﺎت ﻣﻌﺎً‪:‬‬

‫>‪<B><I><U‬‬
‫‪This is a Bold, Italic and Underlined Text‬‬
‫>‪</U> </I> </B‬‬

‫‪46‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫‪This is a Bold, Italic and Underlined Text‬‬

‫>‪<FONT COLOR="#6633ff="+3"><U><I‬‬
‫‪This text is red, size +3, Italic, and Underlined‬‬
‫>‪</I> </U> </FONT‬‬

‫‪This text is red, size + 3, Italic, and‬‬

‫‪Underlined‬‬

‫وﻗﺪ أردت ﻣﻦ ھﺬه اﻷﻣﺜﻠﺔ ﺗﻮﺿﯿﺢ ﻣﺴﺎﺋﻞ ﻣﻌﯿﻨﺔ أوﻟﮭﺎ‪ :‬أن ﺑﺈﻣﻜﺎﻧﻨﺎ اﺳﺘﺨﺪام ﻋﺪة وﺳﻮم‬
‫وﺗﻨﺴﯿﻘﺎت ﻣﻌﺎً ﻓﻲ ﻧﻔﺲ اﻟﻮﻗﺖ وﻟﻨﻔﺲ اﻟﻤﻘﻄﻊ ﻣﻦ اﻟﻨﺺ‪) .‬وذﻟﻚ ﻟﺠﻤﯿﻊ اﻟﻮﺳﻮم وﻟﯿﺲ‬
‫ﻓﻘﻂ ﻟﻮﺳﻮم اﻟﺨﻄﻮط(‪ .‬وﻛﻤﺎ ذﻛﺮت ﺳﺎﺑﻘﺎً‪ ،‬ﻻ أھﻤﯿﺔ ﻟﺘﺮﺗﯿﺐ ھﺬه اﻟﻮﺳﻮم وﻻ أﯾﮭﺎ ورد‬

‫أوﻻً‪ ...‬ﻟﻜﻦ‬
‫ﻋﻨﺪ اﺳﺘﺨﺪام اﻟﻮﺳﻮم اﻟﻤﺘﻌﺪدة ﻓﻲ ﻣﻘﻄﻊ واﺣﺪ ﯾﺠﺐ ﻣﺮاﻋﺎة ﻋﺪم اﻟﺘﺪاﺧﻞ ﺑﯿﻨﮭﺎ!‪ ...‬ﻛﯿﻒ؟‬
‫أﻧﻈﺮ إﻟﻰ اﻟﺮﺳﻢ اﻟﺘﺎﻟﻲ‪:‬‬

‫‪47‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻓﻜﺘﺎﺑﺔ اﻟﻮﺳﻮم اﻟﺴﺎﺑﻘﺔ ﺑﺎﻟﻄﺮق اﻟﺘﺎﻟﯿﺔ ھﻮ ﺧﻄﺄ‪:‬‬

‫>‪<B><I><U‬‬
‫‪This is a Bold, Italic and Underlined Text‬‬
‫>‪</B> </I> </U‬‬

‫>‪<B><I><U‬‬
‫‪This is a Bold, Italic and Underlined Text‬‬
‫>‪</B> </U> </I‬‬

‫أﻋﺮف أﻧﻚ ﻟﻢ ﺗﺼﺪﻗﻨﻲ وأﻧﻚ ﻗﻤﺖ ﺑﺘﺠﺮﺑﺔ ھﺬه اﻟﻮﺳﻮم ورﺑﻤﺎ ﺣﺼﻠﺖ ﻋﻠﻰ ﻧﺘﯿﺠﺔ‬
‫ﺻﺤﯿﺤﺔ‪ .‬ﺣﺴﻨﺎً اﻟﻌﺒﺮة ﻟﯿﺴﺖ ﻓﻲ ﻋﺒﺎرة واﺣﺪة ﻣﻜﻮﻧﺔ ﻣﻦ وﺳﻤﯿﻦ أو ﺛﻼﺛﺔ ﺗﻜﺘﺒﮭﺎ ﻓﻲ‬
‫ﻣﻠﻒ ﺻﻐﯿﺮ ﺑﻞ ﻓﻲ ﺻﻔﺤﺔ إﻧﺘﺮﻧﺖ ﻛﺎﻣﻠﺔ ﻗﺪ ﺗﺘﺄﻟﻒ ﻣﻦ ﻣﺌﺎت أو ﺣﺘﻰ آﻻف اﻟﻮﺳﻮم ﻣﻜﺘﻮﺑﺔ‬
‫ﻓﻲ ﻣﻠﻒ ﺧﺎلٍ ﻣﻦ اﻷﺧﻄﺎء اﻟﻤﻨﻄﻘﯿﺔ واﻟﺘﺪاﺧﻼت اﻟﺘﻲ ﻗﺪ ﺗﺴﺒﺐ اﻹرﺑﺎك ﻟﻠﻤﺘﺼﻔﺤﺎت‪،‬‬
‫وﺗﺆدي إﻟﻰ ﻋﺪم ﻋﺮض ھﺬه اﻟﺼﻔﺤﺔ ﺑﺎﻟﺸﻜﻞ اﻟﻤﻨﺎﺳﺐ واﻟﻤﻄﻠﻮب‪.‬‬

‫ﻟﺬﻟﻚ ﻓﺄھﻤﯿﺔ أن ﺗﺘﺠﻨﺐ وﺟﻮد اﻟﻮﺳﻮم اﻟﻤﺘﺪاﺧﻠﺔ ﻓﻲ ﺻﻔﺤﺘﻚ ھﻮ ﺑﻨﻔﺲ اﻷھﻤﯿﺔ اﻟﺘﻲ ﯾﺠﺐ‬
‫أن ﺗﻮﻟﯿﮭﺎ ﻟﻜﺘﺎﺑﺔ ھﺬه اﻟﻮﺳﻮم ﺑﺎﻟﺼﻮرة اﻟﺼﺤﯿﺤﺔ إﻣﻼﺋﯿﺎً‪ .‬وإﻻ ﻓﺎﻟﻤﺘﺼﻔﺤﺎت ﻻ ﺗﺮﺣﻢ‪.‬‬
‫وﻛﺜﯿﺮة ھﻲ اﻟﻤﺮات اﻟﺘﻲ ﺣﺼﻞ ﻓﯿﮭﺎ اﻟﻤﺼﻤﻤﻮن ﻋﻠﻰ ﺻﻔﺤﺎت ﻣﻨﮭﺎرة ﺑﺴﺒﺐ ﻧﺴﯿﺎن‬
‫ﺣﺮف واﺣﺪ أو إﺷﺎرة ﻣﺜﻞ > أو < أو "‬

‫ﺑﺈﺧﺘﺼﺎر ﺷﺪﯾﺪ‪ ...‬وﻛﻘﺎﻋﺪة أﺳﺎﺳﯿﺔ‪ ،‬اﻟﺼﻔﺤﺔ اﻟﻤﺼﻤﻤﺔ ﺟﯿﺪاً ھﻲ اﻟﺼﻔﺤﺔ ذات اﻟﻮﺳﻮم‬
‫اﻟﺼﺤﯿﺤﺔ وﻏﯿﺮ اﻟﻤﺘﺪاﺧﻠﺔ‪.‬‬

‫وﺻﻠﻨﺎ اﻵن إﻟﻰ ﻧﮭﺎﯾﺔ ھﺬا اﻟﺪرس‪ .‬أﺗﻤﻨﻰ أن ﺗﻜﻮن ﻗﺪ ﻗﻀﯿﺖ وﻗﺘﺎً ﻣﻤﺘﻌﺎً ﻣﻌﮫ‪ .‬وأن ﻻ‬
‫ﯾﻜﻮن ﻗﺪ أﺣﺪث ﺗﺪاﺧﻼً ﻓﻲ وﺳﻮم أﻓﻜﺎرك‪ .‬أراك ﻓﻲ اﻟﺪرس اﻟﺘﺎﻟﻲ‪.‬‬

‫‪48‬‬
 www.dinaro.com/vb3

‫أﻟﯿﺲ ھﺬا‬
‫ﻣﻤﺘﻌﺎ‬
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHH
49
 ‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﺮﺍﺑﻊ‬
‫‪‬‬

‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺮاﺑﻊ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬

‫ﻓﻲ ھﺬا اﻟﺪرس ﺳﻮف ﻧﻨﺎﻗﺶ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺎﻟﻔﻘﺮات ﺑﺸﻜﻞ ﺧﺎص وﺗﺮﺗﯿﺐ اﻟﺼﻔﺤﺎت‬
‫وﺗﻨﺴﯿﻘﮭﺎ ﺑﺸﻜﻞ ﻋﺎم‪.‬‬

‫ﺻﺤﯿﺢ أن اﺳﺘﺨﺪاﻣﻚ ﻟﻸﻟﻮان واﻟﺮﺳﻮﻣﺎت ﻓﻲ اﻟﺼﻔﺤﺔ ﯾﻀﻔﻲ ﻋﻠﯿﮭﺎ ﻧﻮﻋﺎً ﻣﻦ اﻟﺤﯿﻮﯾﺔ‪،‬‬

‫وأن اﻟﺨﻄﻮط ﺗﻌﻄﻲ ﺻﻔﺤﺘﻚ روﻧﻘﺎً وﺟﻤﺎﻻً‪ .‬ﻟﻜﻨﻚ إن ﻟﻢ ﺗﮭﺘﻢ ﺑﺘﺮﺗﯿﺐ ﺻﻔﺤﺘﻚ أو ﺗﻘﻀﻲ‬
‫ﺑﻌﺾ اﻟﻮﻗﺖ ﻓﻲ ﺗﻨﺴﯿﻖ ھﯿﻜﻠﮭﺎ اﻟﻌﺎم وﺗﻨﻈﯿﻢ ﻓﻘﺮاﺗﮭﺎ وﻗﻮاﺋﻤﮭﺎ‪ ،‬ﻓﺈﻧﮫ ﻣﻦ اﻟﺼﻌﺐ ﻋﻠﯿﻚ‬
‫اﻟﺤﺼﻮل ﻋﻠﻰ ﺻﻔﺤﺔ وﯾﺐ ﻧﺎﺟﺤﺔ‪ .‬ﻓﺎﻟﺘﺮﺗﯿﺐ ھﻮ اﻟﺨﻄﻮة اﻷوﻟﻰ ﻟﺠﺬب اھﺘﻤﺎم اﻟﺰاﺋﺮ أو‬
‫اﻟﻘﺎرئ ﻟﺼﻔﺤﺘﻚ وﺗﺴﮭﻞ ﻋﻠﯿﮫ ﻓﮭﻢ اﻟﺨﻄﻮط اﻟﻌﺮﯾﻀﺔ ﻟﻠﺼﻔﺤﺔ‪.‬‬

‫ﻟﻘﺪ ﻗﻤﺖ ﻓﻲ اﻟﺪرس اﻷول ﺑﺈﯾﻀﺎح ﺑﻌﺾ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺎﻟﻔﻘﺮات‪ .‬وﻻ ﺑﺄس ﻣﻦ ﺗﺬﻛﯿﺮك‬
‫ﺑﮭﺎ‪ .‬ﻓﺎﻟﻮﺳﻢ >‪ <P‬ﯾﻘﻮم ﺑﺈﻧﮭﺎء اﻟﻔﻘﺮة‪ .‬واﻟﻮﺳﻢ >‪ <BR‬ﯾﻨﮭﻲ اﻟﺴﻄﺮ اﻟﺤﺎﻟﻲ وﯾﻨﻘﻞ‬
‫اﻟﻨﺺ إﻟﻰ ﺳﻄﺮ ﺟﺪﯾﺪ‪ .‬واﻟﻮﺳﻢ &;‪ nbsp‬ﯾﻘﻮم ﺑﺈﺿﺎﻓﺔ اﻟﻔﺮاﻏﺎت‪ ،‬وﯾﺠﺐ ﺗﻜﺮار ﻛﺘﺎﺑﺘﮫ‬
‫ﺑﻨﻔﺲ ﻋﺪد اﻟﻔﺮاﻏﺎت اﻟﻤﻄﻠﻮب‪.‬‬

‫وﻧﺘﺎﺑﻊ ﻓﻲ ھﺬا اﻟﺪرس ﻣﻊ ھﺬه اﻟﻮﺳﻮم وﻏﯿﺮھﺎ‪.‬‬

‫‪50‬‬
 www.dinaro.com/vb3

... <P> ‫< ھﻮ وﺳﻢ ﻣﻔﺮد ﻟﻜﻨﮫ ﯾﺴﺘﺨﺪم أﯾﻀﺎً ﻛﻮﺳﻢ ﻣﺰدوج‬P> ‫ﻟﻘﺪ ﻗﻠﺖ إن اﻟﻮﺳﻢ‬
‫< وﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ ﯾﻤﻜّﻨﻨﺎ ﻣﻦ ﺗﺤﺪﯾﺪ إﺗﺠﺎه اﻟﻔﻘﺮة وإﺗﺠﺎه اﻟﻨﺺ ﻓﯿﮭﺎ ﺣﯿﺚ ﯾﺴﺘﺨﺪم‬/P>
.DIR ،ALIGN ‫ﻣﻌﮫ اﻟﺨﺼﺎﺋﺺ‬

Center, Right ،Left ‫ ﺗﺤﺪد ﻣﺤﺎذاة اﻟﻔﻘﺮة وھﻲ ﺗﺄﺧﺬ اﻟﻘﯿﻢ‬ALIGN ‫ﻓﺎﻟﺨﺎﺻﯿﺔ‬
:‫وأوﺿﺤﮭﺎ ﺑﺎﻷﻣﺜﻠﺔ اﻟﺘﺎﻟﯿﺔ‬

<P Align="left"> This is a left-aligned paragraph </P>

This is left-aligned paragraph

<P Align="right"> This is right-aligned paragraph</P>

This is a right-aligned paragraph

<P Align="center"> This is a centered paragraph</P>

This is a centered paragraph

‫ﻛﺬﻟﻚ ﻟﺘﻮﺳﯿﻂ اﻟﻔﻘﺮات أو اﻟﻜﺎﺋﻨﺎت ﺑﺸﻜﻞ ﻋﺎم ﻓﻲ اﻟﺼﻔﺤﺔ ﻧﺴﺘﻄﯿﻊ اﺳﺘﺨﺪام اﻟﻮﺳﻮم‬
<CENTER/> ... <CENTER>

<CENTER> This is a centered text </CENTER>

This is a centered text

51
 ‫‪www.dinaro.com/vb3‬‬

‫أﻣﺎ اﻟﺨﺎﺻﯿﺔ ‪ DIR‬واﻟﺘﻲ ﻧﺴﺘﺨﺪﻣﮭﺎ أﯾﻀﺎً ﻣﻊ >‪ <P‬ﻓﺘﻘﻮم ﺑﺘﺤﺪﯾﺪ إﺗﺠﺎه ﻗﺮاءة اﻟﻨﺺ‬
‫وﺗﺄﺧﺬ اﻟﻘﯿﻢ‬

‫)ﺗﺬﻛﺮ ھﺬه اﻟﺨﺎﺻﯿﺔ ﺟﯿﺪاً ﻓﮭﻲ ﻣﮭﻤﺔ ﻋﻨﺪ ﻛﺘﺎﺑﺔ ﺻﻔﺤﺎت ﺑﺎﻟﻠﻐﺔ اﻟﻌﺮﺑﯿﺔ(‬

‫وﻟﺘﻨﺴﯿﻖ اﻟﻔﻘﺮات أﯾﻀﺎً ﯾﻮﺟﺪ اﻟﻮﺳﻮم‬

‫>‪ </BLOCKQUOTE> ... <BLOCKQUOTE‬أي وﺳﻮم اﻟﻔﻘﺮات‬

‫اﻟﻤﻘﺘﺒﺴﺔ‪ .‬ووﻇﯿﻔﺘﮭﺎ ﺗﻤﯿﯿﺰ اﻟﻔﻘﺮة ﻣﻦ ﺧﻼل إدراج ﻣﺴﺎﻓﺔ إﺿﺎﻓﯿﺔ ﻋﻠﻰ اﻟﮭﺎﻣﺸﯿﻦ اﻷﯾﻤﻦ‬
‫واﻷﯾﺴﺮ ﻟﮭﺎ‪.‬‬

‫أﻧﻈﺮ إﻟﻰ اﻟﻔﻘﺮة اﻟﺘﺎﻟﯿﺔ اﻟﺘﻲ ﻗﻤﺖ )ﺑﺎﻗﺘﺒﺎﺳﮭﺎ( ﻣﻦ إﺣﺪى ﺻﻔﺤﺎت ھﺬا اﻟﻤﻮﻗﻊ‪ .‬وﻣﻦ ﺛﻢ‬
‫وﺿﻌﺘﮭﺎ ﺿﻤﻦ >‪</BLOCKQUOTE> ... <BLOCKQUOTE‬‬

‫واﻟﺤﻘﯿﻘﺔ أﻧﻚ ﺗﺴﺘﻄﯿﻊ وﺿﻊ ﻋﺪة وﺳﻮم ﻣﻌﺎً إذا أردت إدراج ھﻮاﻣﺶ أﻛﺒﺮ‪ .‬ﻛﻤﺎ ﻓﻲ‬
‫اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ‪:‬‬

‫‪52‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>‪<BLOCKQUOTE‬‬
‫>‪<BLOCKQUOTE‬‬
‫اﻟﻨﺺ ﯾﻜﺘﺐ ھﻨﺎ‬
‫>‪</BLOCKQUOTE‬‬
‫>‪</BLOCKQUOTE‬‬
‫وﺑﺎﻟﻄﺒﻊ ﻟﯿﺲ ﺷﺮﻃﺎً أن ﺗﺴﺘﺨﺪم ھﺬا اﻟﻮﺳﻮم ﻣﻊ اﻟﻔﻘﺮات اﻟﻤﻘﺘﺒﺴﺔ ﻓﻘﻂ‪ .‬ﻓﺄﻧﺎ ﻣﺜ ً‬
‫ﻼ‬
‫أﺿﻌﮭﺎ ﻓﻲ ﺑﺪاﯾﺔ وﻧﮭﺎﯾﺔ ﻛﻞ ﺻﻔﺤﺔ ﻣﻦ ﺻﻔﺤﺎت ھﺬا اﻟﻤﻮﻗﻊ‪ .‬وﺑﺎﻟﺘﺎﻟﻲ ﯾﻈﮭﺮ اﻟﻨﺺ ﺑﻌﯿﺪاً‬
‫ﻗﻠﯿﻼً ﻋﻦ ﺣﺎﺷﯿﺔ اﻟﺼﻔﺤﺔ ﻓﮭﺬا أﻓﻀﻞ ﻣﻦ أن ﯾﻜﻮن ﻣﻼﺻﻘﺎً ﻟﮭﺎ وأﺟﻤﻞ‪.‬‬

‫واﻵن ﺗﺄﻣﻞ ھﺬا اﻟﺸﻜﻞ وﺣﺎول أن ﺗﺴﺘﻨﺘﺞ ﻛﯿﻒ ﻗﻤﺖ ﺑﺈﻋﺪاده‪!...‬؟‬

‫‪D‬‬ ‫‪C‬‬ ‫‪B‬‬ ‫‪A‬‬
‫‪H‬‬ ‫‪G‬‬ ‫‪F‬‬ ‫‪E‬‬
‫‪L‬‬ ‫‪K‬‬ ‫‪J‬‬ ‫‪I‬‬
‫‪P‬‬ ‫‪O‬‬ ‫‪N‬‬ ‫‪M‬‬
‫‪T‬‬ ‫‪S‬‬ ‫‪R‬‬ ‫‪Q‬‬

‫رﺑﻤﺎ ﺗﻮﺻﻠﺖ إﻟﻰ أﻧﻲ اﺳﺘﺨﺪﻣﺖ ﻋﺪداً ﻛﺒﯿﺮاً ﻣﻦ وﺳﻮم اﻟﻔﺮاﻏﺎت &;‪ nbsp‬وﻧﮭﺎﯾﺔ‬
‫اﻟﺴﻄﺮ >‪.<BR‬‬

‫ﺣﺴﻨﺎً‪ ،‬إﺳﺘﻨﺘﺎﺟﻚ ﻻ ﺑﺄس ﺑﮫ وﻟﻜﻨﮫ ﻟﯿﺲ دﻗﯿﻘﺎً ﻓﺄﻧﺎ ﻟﻢ أﺳﺘﺨﺪم أﯾﺎً ﻣﻦ ھﺬه اﻟﻮﺳﻮم ھﻨﺎ‪.‬‬

‫ﺑﻞ ﻛﻞ ﻣﺎ ﻓﻌﻠﺘﮫ ﺑﻌﺪ إﻋﺪاد ھﺬا اﻟﺸﻜﻞ ھﻮ وﺿﻌﮫ ﺿﻤﻦ‪:‬‬

‫>‪<PRE> ... </PRE‬‬
‫‪53‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫وھﻤﺎ اﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ ‪ Preformated‬أي اﻟﻤﻨﺴﻖ ﻣﺴﺒﻘﺎً‪ .‬وﺑﺎﻟﻔﻌﻞ ﻓﻘﺪ اﺣﺘﻔﻆ ھﺬا‬
‫اﻟﺸﻜﻞ ﺑﺎﻟﺘﻨﺴﯿﻖ اﻟﻤﺴﺒﻖ اﻟﺬي ﺗﻢ إﻋﺪاده ﺑﮫ‪ .‬ﻟﻜﻦ ﺗﻢ ﺗﺤﻮﯾﻞ اﻟﺨﻂ إﻟﻰ ﺧﻂ ﻣﻮﺣﺪ‬
‫اﻟﻤﺴﺎﻓﺎت )راﺟﻊ اﻟﺪرس اﻟﺴﺎﺑﻖ( وﻟﻮ ﻟﻢ أﻗﻢ ﺑﻮﺿﻌﮫ ﺿﻤﻦ ھﺬه اﻟﻮﺳﻮم ﻟﻜﺎﻧﺖ اﻟﻨﺘﯿﺠﺔ‬
‫ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬
‫‪ABCDEFGHIJKLMNOPQRST‬‬

‫ﻻﺣﻆ أن ھﺬا اﻟﻮﺳﻢ ﯾﺴﺘﺨﺪم ﻣﻊ اﻟﻔﻘﺮات اﻟﺘﻲ ﻻ ﻧﺤﺘﺎج ﻓﯿﮭﺎ إﻟﻰ ﺗﻨﺴﯿﻘﺎت ﻣﺘﻌﺪدة‬
‫ﻟﻠﺨﻄﻮط أو اﻷﻟﻮان‪ .‬ﺑﻞ ﻓﻘﻂ ﻣﻊ اﻟﻔﻘﺮات اﻟﻌﺎدﯾﺔ ﻣﻮﺣﺪة اﻟﺨﻂ واﻟﺘﻨﺴﯿﻘﺎت‪.‬‬

‫اﻟﻘﻮاﺋﻢ‬

‫ﺗﺤﺘﻮي ﻟﻐﺔ ‪ HTML‬ﻋﻠﻰ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺘﻨﻈﯿﻢ اﻟﺒﯿﺎﻧﺎت ﻓﻲ ﻗﻮاﺋﻢ‬

‫وﺑﺎﺳﺘﺨﺪام ﻋﺪة ﺧﯿﺎرات‪ .‬وھﻨﺎك ﻧﻮﻋﯿﻦ ﻣﻦ اﻟﻘﻮاﺋﻢ‪:‬‬

‫أوﻟﮭﻤﺎ اﻟﻤﺘﺴﻠﺴﻠﺔ ‪.Lists Ordered‬‬

‫واﻟﯿﻚ اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ ﻋﻠﯿﮭﺎ‬

‫أﺳﻤﺎء ﺑﻌﺾ اﻟﻤﺪن اﻟﻔﻠﺴﻄﯿﻨﯿﺔ ‪:‬‬

‫‪54‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫اﻟﻘﺪس‬ ‫‪.1‬‬
‫ﻧﺎﺑﻠﺲ‬ ‫‪.2‬‬
‫رام اﷲ‬ ‫‪.3‬‬
‫اﻟﺨﻠﯿﻞ‬ ‫‪.4‬‬
‫ﺟﻨﯿﻦ‬ ‫‪.5‬‬
‫ﻃﻮﻟﻜﺮم‬ ‫‪.6‬‬

‫وﺛﺎﻧﯿﮭﻤﺎ اﻟﻘﻮاﺋﻢ ﻏﯿﺮ اﻟﻤﺘﺴﻠﺴﻠﺔ ‪ Unordered Lists‬وھﺬا ﻣﺜﺎل ﻋﻠﯿﮭﺎ‬

‫أﺳﻤﺎء ﺑﻌﺾ اﻟﺠﺎﻣﻌﺎت اﻟﻔﻠﺴﻄﯿﻨﯿﺔ ‪:‬‬

‫ﺟﺎﻣﻌﺔ اﻟﻨﺠﺎح‬ ‫•‬

‫ﺟﺎﻣﻌﺔ اﻟﻘﺪس اﻟﻤﻔﺘﻮﺣﺔ‬ ‫•‬

‫ﺟﺎﻣﻌﺔ ﺑﯿﺮزﯾﺖ‬ ‫•‬

‫ﺟﺎﻣﻌﺔ اﻟﺨﻠﯿﻞ‬ ‫•‬

‫ﻋﻨﺪ اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﻘﻮاﺋﻢ ﺑﻨﻮﻋﯿﮭﻤﺎ ﻧﺤﺘﺎج إﻟﻰ وﺳﻮم ﺧﺎﺻﺔ ﺑﺘﺤﺪﯾﺪ ﺑﺪاﯾﺔ وﻧﮭﺎﯾﺔ اﻟﻘﺎﺋﻤﺔ‬
‫ووﺳﻮم ﺗﺤﺪد ﺑﻨﻮد ھﺬه اﻟﻘﺎﺋﻤﺔ‪.‬‬

‫ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻘﻮاﺋﻢ اﻟﻤﺘﺴﻠﺴﻠﺔ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻮم‬

‫‪55‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>‪</OL> ... <OL‬‬

‫أﻣﺎ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻘﻮاﺋﻢ ﻏﯿﺮ اﻟﻤﺘﺴﻠﺴﻠﺔ ﻓﻨﺴﺘﺨﺪم‬
‫>‪</UL> ... <UL‬‬

‫وﻟﺘﻌﯿﯿﻦ ﻛﻞ ﺑﻨﺪ ﻣﻦ ﺑﻨﻮد اﻟﻘﺎﺋﻤﺔ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <LI‬وھﻮ وﺳﻢ ﻣﻔﺮد ﯾﻜﺘﺐ‬
‫ﻓﻲ ﺑﺪاﯾﺔ اﻟﺴﻄﺮ اﻟﺨﺎص ﺑﻜﻞ ﺑﻨﺪ ‪.List Item‬‬

‫إذن ﻋﻨﺪﻣﺎ ﻗﻤﺖ ﺑﺈﻧﺸﺎء اﻟﻘﻮاﺋﻢ اﻟﺴﺎﺑﻘﺔ اﺳﺘﺨﺪﻣﺖ اﻟﺸﯿﻔﺮة اﻟﺘﺎﻟﯿﺔ‪:‬‬

‫>‪<OL‬‬
‫اﻟﻘﺪس>‪<LI‬‬
‫ﻧﺎﺑﻠﺲ>‪<LI‬‬
‫اﷲ رام>‪<LI‬‬
‫اﻟﺨﻠﯿﻞ>‪<LI‬‬
‫ﺟﻨﯿﻦ>‪<LI‬‬
‫ﻃﻮﻟﻜﺮم>‪<LI‬‬
‫>‪</OL‬‬

‫>‪<UL‬‬
‫اﻟﻨﺠﺎح ﺟﺎﻣﻌﺔ>‪<LI‬‬
‫ﺟﺎﻣﻌﺔ اﻟﻘﺪس اﻟﻤﻔﺘﻮﺣﺔ>‪<LI‬‬
‫ﺑﯿﺮزﯾﺖ ﺟﺎﻣﻌﺔ>‪<LI‬‬
‫ﺟﺎﻣﻌﺔ اﻟﺨﻠﯿﻞ>‪<LI‬‬
‫>‪</UL‬‬

‫‪56‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫واﻟﺨﺎﺻﯿﺔ اﻟﻮﺣﯿﺪة اﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻣﻊ ھﺬه اﻟﻮﺳﻮم ھﻲ ‪ TYPE‬ووﻇﯿﻔﺘﮭﺎ ﺗﺤﺪﯾﺪ ﺷﻜﻞ‬

‫اﻟﺮﻣﺰ اﻟﻈﺎھﺮ ﻣﻊ ﺑﻨﻮد اﻟﻘﺎﺋﻤﺔ‪ ،‬وﻋﺎدة ﺗﺴﺘﺨﺪم ﻣﻊ وﺳﻮم ﺑﺪاﯾﺔ اﻟﻘﻮاﺋﻢ >‪ <UL‬أو‬
‫>‪ <OL‬وﺑﺬﻟﻚ ﻧﺤﺪد رﻣﺰاً واﺣﺪاً ﻟﻜﻞ اﻟﻘﺎﺋﻤﺔ‪.‬‬

‫وﻟﻜﻦ ﻧﺴﺘﻄﯿﻊ اﺳﺘﺨﺪاﻣﮭﺎ أﯾﻀﺎً ﻣﻊ وﺳﻢ اﻟﺒﻨﻮد >‪ <LI‬ﻹﻋﻄﺎء ﺗﺤﻜﻢ أﻛﺒﺮ ﻓﻲ ﻣﻈﮭﺮ‬
‫اﻟﻘﺎﺋﻤﺔ ﻣﻦ ﺧﻼل ﺗﺤﺪﯾﺪ رﻣﺰ ﻣﺨﺘﻠﻒ ﻟﻜﻞ ﺑﻨﺪ‪.‬‬

‫ﻓﻌﻨﺪ وﺿﻌﮭﺎ ﺿﻤﻦ ﺗﻌﺮﯾﻒ اﻟﻘﻮاﺋﻢ اﻟﻤﺘﺴﻠﺴﻠﺔ ﺗﺄﺧﺬ اﻟﻘﯿﻢ‪ A, a, I, i :‬اﻟﺘﻲ ﺗﻐﯿﺮ رﻣﻮز‬
‫اﻟﺘﺮﻗﯿﻢ ﻣﻦ اﻷرﻗﺎم اﻟﻌﺎدﯾﺔ اﻹﻓﺘﺮاﺿﯿﺔ )واﻟﺘﻲ رﻣﺰھﺎ ‪ (1‬إﻟﻰ ﺗﺮﻗﯿﻢ ﺑﺎﺳﺘﺨﺪام اﻷﺣﺮف‬
‫اﻟﻼﺗﯿﻨﯿﺔ اﻟﻜﺒﯿﺮة أو اﻟﺼﻐﯿﺮة‪ ،‬أو ﺑﺎﺳﺘﺨﺪام اﻷرﻗﺎم اﻟﺮوﻣﺎﻧﯿﺔ ﻛﻤﺎ ﺗﺮى ﻓﻲ اﻟﺠﺪول‬
‫اﻟﺘﺎﻟﻲ‪:‬‬

‫واﻟﺤﺪﯾﺚ ﻋﻦ ھﺬه اﻟﺨﺎﺻﯿﺔ ﯾﻘﻮدﻧﻲ إﻟﻰ اﻟﺤﺪﯾﺚ ﻋﻦ ﻣﺴﺄﻟﺔ ﻣﮭﻤﺔ ﻓﻲ ﻟﻐﺔ ‪HTML‬‬
‫وھﻲ ﻣﺴﺄﻟﺔ اﻟﻮﺳﻮم واﻟﺨﺼﺎﺋﺺ اﻟﻤﺤﺪدة ﺑﻤﺘﺼﻔﺢ ﻣﻌﯿﻦ دون ﻏﯿﺮه أي اﻟﺘﻲ ﺗﻌﻤﻞ ﻣﻊ‬
‫أﺣﺪ اﻟﻤﺘﺼﻔﺤﺎت وﻻ ﺗﻌﻤﻞ ﻣﻊ ﻏﯿﺮه‪.‬‬

‫‪57‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫واﻟﺴﺒﺐ ﻓﻲ ذﻟﻚ أن ھﺬه اﻟﺨﺎﺻﯿﺔ ﺗﺴﺘﺨﺪم أﯾﻀﺎً ﻣﻊ اﻟﻘﻮاﺋﻢ ﻏﯿﺮ اﻟﻤﺘﺴﻠﺴﻠﺔ‪ ،‬ﻟﻜﻦ ﻟﯿﺲ‬
‫ﺑﺼﻮرة ﻣﻄﻠﻘﺔ‪...‬ﻛﯿﻒ؟ أﻧﺖ ﺗﺮى أن اﻟﺮﻣﺰ اﻟﻤﻮﺟﻮد ﻋﻨﺪ ﻛﻞ ﺑﻨﺪ ﻓﻲ اﻟﻘﺎﺋﻤﺔ ھﻮ ﻋﺒﺎرة‬
‫ﻋﻦ ﻧﻘﻄﺔ ﺳﻮداء ﯾﻄﻠﻖ ﻋﻠﯿﮭﺎ اﺳﻢ ‪ Disc‬وھﻲ اﻟﻤﻌﺮﻓﺔ ﺿﻤﻨﺎً ﻓﻲ ﺧﺎﺻﯿﺔ ‪.TYPE‬‬
‫ﻟﻜﻦ ھﻨﺎك رﻣﻮز أﺧﺮى ﯾﻤﻜﻦ إﻇﮭﺎرھﺎ وھﻲ اﻟﻤﺮﺑﻊ ‪ ،square‬واﻟﺪاﺋﺮة اﻟﻤﻔﺮﻏﺔ‬
‫‪ circle‬وﺗﻌﺮف ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬

‫>"‪<UL TYPE="square‬‬
‫>"‪<UL TYPE="circle‬‬

‫وﻟﻜﻦ ﻟﻸﺳﻒ ھﺬه اﻟﺨﺎﺻﯿﺔ ﻻ ﺗﻌﻤﻞ وﻻ ﯾﻈﮭﺮ ﺗﺄﺛﯿﺮھﺎ إﻻ ﻣﻊ ﻣﺘﺼﻔﺢ ﻧﯿﺘﺴﻜﯿﺐ وﻟﯿﺲ‬
‫ﻣﻊ ﻣﺎﯾﻜﺮوﺳﻮﻓﺖ إﻛﺴﺒﻠﻮرر اﻟﺬي ﯾﺘﻌﺎﻣﻞ ﻓﻘﻂ ﻣﻊ اﻟﻘﯿﻤﺔ اﻹﻓﺘﺮاﺿﯿﺔ ﻟﻠﺨﺎﺻﯿﺔ‪) .‬رﺟﺎءً ﻻ‬
‫ﯾﻐﻀﺐ ﻣﺴﺘﺨﺪﻣﻮ إﻛﺴﺒﻠﻮرر ﻓﮭﻨﺎك اﻟﻜﺜﯿﺮ ﻣﻦ اﻟﻮﺳﻮم واﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﻻ ﯾﺴﺘﻄﯿﻊ‬
‫ﻧﯿﺘﺴﻜﯿﺐ ﻋﺮﺿﮭﺎ أﯾﻀﺎً(‪.‬‬

‫وﻹﺗﻤﺎم اﻟﺤﺪﯾﺚ ﻋﻦ اﻟﻘﻮاﺋﻢ‪ ،‬أذﻛﺮ ﻟﻚ أن ھﻨﺎك وﺳﻮﻣﺎً أﺧﺮى ﺗﺴﺘﺨﺪم ﻹﻧﺸﺎء اﻟﻘﻮاﺋﻢ‬
‫ﻏﯿﺮ اﻟﻤﺘﺴﻠﺴﻠﺔ‪ ،‬وﺑﻨﻔﺲ اﻟﻄﺮﯾﻘﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ >‪ </UL>...<UL‬وھﺬه اﻟﻮﺳﻮم‬
‫ھﻲ‪:‬‬

‫>‪<DIR> ... </DIR‬‬

‫>‪<MENU> ... </MENU‬‬

‫ھﻨﺎك ﻧﻮع ﺧﺎص ﻣﻦ اﻟﻘﻮاﺋﻢ ﯾﺪﻋﻰ ﻗﻮاﺋﻢ اﻟﺸﺮح أو اﻟﺘﻌﺮﯾﻔﺎت ‪Definition Lists‬‬
‫وﻛﻤﺎ ﯾﺪل اﻹﺳﻢ ﺗﺴﺘﺨﺪم ﻋﻨﺪﻣﺎ ﻧﺮﯾﺪ إدراج ﻗﺎﺋﻤﺔ ﻣﻦ اﻟﻤﺼﻄﻠﺤﺎت ﯾﺘﺒﻊ ﻛﻞ واﺣﺪ ﻣﻨﮭﺎ‬
‫ﺷﺮح أو ﺗﻌﻠﯿﻖ‪.‬‬

‫‪58‬‬
 www.dinaro.com/vb3

HTML
Hyper Text Markup Language
WWW
World Wide Web
FTP
File Transfer Protocol
GIF
Graphical Interchange Format
JPG, JPEG
Joint Photographic Experts Group

:‫وﻧﺤﺘﺎج ﻹﻧﺸﺎء ھﺬه اﻟﻘﻮاﺋﻢ إﻟﻰ ﺛﻼﺛﺔ وﺳﻮم‬

.‫< ﻟﺘﻌﺮﯾﻒ ﺑﺪاﯾﺔ وﻧﮭﺎﯾﺔ اﻟﻘﺎﺋﻤﺔ‬/DL> ... <DL> ‫اﻷول‬

.‫ وھﻮ وﺳﻢ ﻣﻔﺮد‬،‫< وﯾﻮﺿﻊ ﻗﺒﻞ ﻛﻞ ﻣﺼﻄﻠﺢ ﻟﺘﺤﺪﯾﺪه‬DT> ‫واﻟﺜﺎﻧﻲ‬

.‫< وھﻮ وﺳﻢ اﻟﺸﺮح أو اﻟﺘﻌﻠﯿﻖ وھﻮ أﯾﻀﺎ ﻣﻔﺮد‬DD> ‫أﻣﺎ اﻟﺜﺎﻟﺚ ﻓﮭﻮ‬

‫وﻟﻨﻘﻢ اﻵن ﺑﻜﺘﺎﺑﺔ ﺷﯿﻔﺮة اﻟﻘﺎﺋﻤﺔ اﻟﺴﺎﺑﻘﺔ‬

<DL>
<DT>HTML <DD>Hyper Text Markup Language
<DT>WWW <DD>World Wide Web
<DT>FTP <DD>File Transport Protocol
<DT>GIF <DD>Graphical Interchange Format

59
 ‫‪www.dinaro.com/vb3‬‬

‫‪<DT>JPG, JPEG <DD>Joint Photographic Experts Group‬‬

‫>‪</DL‬‬

‫وﺻﻠﻨﺎ اﻵن إﻟﻰ ﻧﮭﺎﯾﺔ ھﺬا اﻟﺪرس‪ ،‬واﻟﺬي ﻧﺎﻗﺸﻨﺎ ﻓﯿﮫ ﺗﺮﺗﯿﺐ اﻟﺼﻔﺤﺎت واﻟﻔﻘﺮات‬
‫واﻟﻘﻮاﺋﻢ‪ .‬أﺗﻤﻨﻰ ﻟﻚ ﺻﻔﺤﺎت ﻣﺮﺗﺒﺔ داﺋﻤﺎً‪.‬‬

‫أﻟﯿﺲ ھﺬا‬
‫ﻣﻤﺘﻌﺎ‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫!!!!!‬
‫‪HHHHHHHHHHHHHH‬‬
‫‪HHHHHHHHHHHHHH‬‬
‫‪HHHHHHHH‬‬
‫‪60‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﺨﺎﻣﺲ‬

‫‪‬‬
‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺨﺎﻣﺲ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬

‫ﻓﻲ ھﺬا اﻟﺪرس ﺳﻮف أﻗﻮم ﺑﺎﻟﺤﺪﯾﺚ ﻋﻦ اﻟﺼﻮر واﻟﺮﺳﻮﻣﺎت وﻣﺎ ﯾﺘﻌﻠﻖ ﺑﺎﻟﺘﻌﺎﻣﻞ ﻣﻌﮭﺎ‪،‬‬
‫ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ اﻟﺘﻌﺮﯾﻒ ﺑﺄﻧﻮاع اﻟﻤﻠﻔﺎت اﻟﺮﺳﻮﻣﯿﺔ اﻟﺪارﺟﺔ ﻓﻲ اﻹﻧﺘﺮﻧﺖ‪.‬‬

‫ﻟﻘﺪ اﻗﺘﺼﺮ ﺣﺪﯾﺜﻨﺎ ﻋﻦ اﻟﺼﻮر ﺣﺘﻰ اﻵن ﻋﻠﻰ إﺿﺎﻓﺔ ﺧﻠﻔﯿﺎت ﻟﻠﺼﻔﺤﺎت‪ ،‬وﻛﺎن ذﻟﻚ ﻓﻲ‬
‫اﻟﺪرس اﻟﺜﺎﻧﻲ أﻣﺎ إدراج اﻟﺼﻮر ﺿﻤﻦ اﻟﺼﻔﺤﺎت ﻧﻔﺴﮭﺎ ﻓﻠﮫ ﺣﻜﺎﯾﺔ أﺧﺮى‪ ،‬أﺑﺪأ ﺑﺮواﯾﺘﮭﺎ‬
‫ﻟﻚ اﻵن‪.‬‬

‫إن اﻟﻮﺳﻢ اﻟﺮﺋﯿﺴﻲ اﻟﻤﺴﺘﺨﺪم ﻟﺘﻌﺮﯾﻒ ﺻﻮرة ﻣﺎ داﺧﻞ اﻟﺼﻔﺤﺔ ھﻮ >‪ <IMG‬وھﻮ‬
‫وﺳﻢ ﻣﻔﺮد‪ .‬ﻟﻜﻦ ھﻞ ﯾﻜﻔﻲ ھﺬا ﻹدراج ﺻﻮرة؟ ﻛﻼ‪ ،‬ﺑﺎﻟﻄﺒﻊ ﯾﺠﺐ أن ﻧﺤﺪد اﻟﺼﻮرة اﻟﺘﻲ‬
‫ﻧﺮﯾﺪھﺎ‪ .‬ﻟﺬﻟﻚ ﻧﻀﯿﻒ اﻟﺨﺎﺻﯿﺔ ﻟﮫ ‪ SRC‬ﻟﺘﺤﺪﯾﺪ ﻣﻮﻗﻊ واﺳﻢ اﻟﺼﻮرة‪.‬‬

‫اﻟﺼﻮرة اﻟﺘﺎﻟﯿﺔ إﺳﻤﮭﺎ ‪ alah.jpg‬وﻋﻨﺪﻣﺎ ﻗﻤﺖ ﺑﺈدراﺟﮭﺎ‪ .‬ﻛﺎﻧﺖ اﻟﺸﯿﻔﺮة اﻟﺨﺎﺻﺔ ﺑﺬﻟﻚ‬
‫ھﻲ‬
‫‪:‬‬
‫>" ‪<IMG SRC=" alah.jpg‬‬

‫‪61‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫واﻟﺼﯿﻐﺔ ھﺬه ﺗﻔﺘﺮض أن اﻟﺼﻮرة ﻣﻮﺟﻮدة ﻓﻲ ﻧﻔﺲ اﻟﺪﻟﯿﻞ اﻟﻔﺮﻋﻲ أو اﻟﻤﺠﻠﺪ ﺣﯿﺚ‬
‫ﯾﺘﻮاﺟﺪ ﻣﻠﻒ ‪ HTML‬اﻟﺬي أﻋﻤﻞ ﻋﻠﯿﮫ‪ ،‬وﻗﻤﺖ ﺑﺎﺳﺘﺪﻋﺎء اﻟﺼﻮرة ﻣﻦ ﺧﻼﻟﮫ‪ .‬ﻟﻜﻦ ﻣﺎذا‬
‫ﻟﻮ ﻛﺎﻧﺖ اﻟﺼﻮرة ﻓﻲ ﻣﺠﻠﺪ ﻓﺮﻋﻲ آﺧﺮ؟ ﺣﺴﻨﺎ ﺳﻮف اﻧﺎﻗﺶ ﻣﻌﻚ ﺣﺎﻟﺘﯿﻦ ﻟﮭﺬه اﻟﻤﺴﺄﻟﺔ‪.‬‬

‫اﻟﺤﺎﻟﺔ اﻷوﻟﻰ‪ :‬أن ﺗﻜﻮن اﻟﺼﻮرة ﻣﻮﺟﻮدة ﻓﻲ ﻣﺠﻠﺪ ﻣﺘﻔﺮع ﻋﻦ اﻟﻤﺠﻠﺪ اﻟﻤﻮﺟﻮد ﺑﮫ‬
‫ﻣﻠﻒ ‪ HTML‬ﺣﺴﺐ اﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬

‫ﻧﻘﻮم ﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ ﺑﻜﺘﺎﺑﺔ إﺳﻢ ھﺬا اﻟﻤﺠﻠﺪ ﺗﺘﺒﻌﮫ إﺷﺎرة ‪ /‬ﺛﻢ اﺳﻢ اﻟﺼﻮرة‪.‬‬

‫‪62‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫اﻟﺤﺎﻟﺔ اﻟﺜﺎﻧﯿﺔ‪ :‬أن ﯾﻜﻮن ﻣﻠﻒ ‪ HTML‬ﻣﻮﺟﻮداً ﻓﻲ ﻣﺠﻠﺪ ﻣﺎ وﺗﻜﻮن اﻟﺼﻮرة ﻣﻮﺟﻮدة‬
‫ﻓﻲ ﻣﺠﻠﺪ آﺧﺮ ﺑﻨﻔﺲ اﻟﻤﺴﺘﻮى‪ .‬أي أﻧﮭﻤﺎ ﻣﺠﻠﺪﯾﻦ ﻣﺘﺠﺎورﯾﻦ وﻟﯿﺴﺎ ﻣﺘﻔﺮﻋﯿﻦ أﺣﺪھﻤﺎ ﻋﻦ‬
‫اﻵﺧﺮ‪.‬‬

‫وﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ ﻧﻜﺘﺐ ‪) ..‬ﻧﻘﻄﺘﯿﻦ( ﻟﺘﻮﺟﯿﮫ اﻟﻤﺘﺼﻔﺢ ﻟﻠﺨﺮوج ﻣﻦ اﻟﻤﺠﻠﺪ اﻟﻔﺮﻋﻲ اﻟﺤﺎﻟﻲ‬
‫)ﺣﯿﺚ ﯾﻮﺟﺪ ﻣﻠﻒ ‪ (HTML‬وﻣﻦ ﺛﻢ اﻟﺪﺧﻮل إﻟﻰ اﻟﻤﺠﻠﺪ ‪ images‬ﺣﯿﺚ ﺗﻮﺟﺪ‬
‫اﻟﺼﻮرة‪.‬‬

‫وﺑﺸﻜﻞ ﻋﺎم‪ ،‬ﻣﮭﻤﺎ ﻛﺎﻧﺖ ﻣﻮاﻗﻊ ﺗﻮاﺟﺪ اﻟﻤﻠﻔﺎت ﻓﺈن ﻋﻤﻠﯿﺔ ﺗﺤﺪﯾﺪ ﻣﻮاﻗﻌﮭﺎ واﻟﻮﺻﻮل‬
‫إﻟﯿﮭﺎ ﻻ ﺗﺨﺮج ﻋﻦ ﻧﻄﺎق ھﺬا اﻟﻨﻤﻂ ﻣﻦ اﻟﺸﯿﻔﺮة‪ .‬أي ﻛﺘﺎﺑﺔ اﻟﻨﻘﻄﺘﯿﻦ ﻟﻠﺨﺮوج ﻣﻦ ﻣﺠﻠﺪ‬
‫ﻓﺮﻋﻲ‪ ،‬وﻛﺘﺎﺑﺔ اﺳﻢ اﻟﻤﺠﻠﺪ اﻟﺬي ﯾﺠﺐ اﻟﺪﺧﻮل إﻟﯿﮫ‪.‬‬

‫إن اﻷﺑﻌﺎد اﻷﺳﺎﺳﯿﺔ ﻟﮭﺬه اﻟﺼﻮرة ھﻲ ‪ 145×200‬ﺑﯿﻜﺴﻞ ‪) Pixel‬ﺗﺎﺑﻊ اﻟﻘﺮاءة ﺣﺘﻰ‬

‫ﻧﮭﺎﯾﺔ ھﺬا اﻟﺪرس وأﻋﺪك أن أوﺿﺢ ﻟﻚ ﻣﺎ ھﻲ وﺣﺪة اﻟﺒﯿﻜﺴﻞ إذا ﻛﺎﻧﺖ ھﺬه أول ﻣﺮة‬

‫‪63‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺗﺘﻌﺮف ﻓﯿﮭﺎ ﻋﻠﻰ ھﺬه اﻟﻮﺣﺪة( وﻛﻤﺎ ﺗﻼﺣﻆ ﺗﻢ إدراج اﻟﺼﻮرة ﻣﻊ اﻟﻤﺤﺎﻓﻈﺔ ﻋﻠﻰ ھﺬه‬
‫اﻷﺑﻌﺎد‪ .‬وﻣﻊ ذﻟﻚ ﻓﻨﺤﻦ ﻧﺴﺘﻄﯿﻊ اﻟﺘﺤﻜﻢ أﯾﻀﺎً ﺑﮭﺎ وإﻇﮭﺎر اﻟﺼﻮرة ﺑﺎﻟﺤﺠﻢ اﻟﺬي ﻧﺮﯾﺪه‬
‫ﻣﻦ ﺧﻼل ھﺬا اﻟﻮﺳﻢ‪ .‬ﻛﯿﻒ؟ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺼﺎﺋﺺ ‪ HEIGHT, WIDTH‬ﻣﺘﺒﻮﻋﺔ‬
‫ﺑﺄرﻗﺎم ﺗﻤﺜﻞ اﻹرﺗﻔﺎع واﻟﻌﺮض اﻟﻤﻄﻠﻮﺑﯿﻦ‪.‬‬

‫>"‪<IMG SRC="alah.jpg" HEIGHT="70" WIDTH="120‬‬

‫>"‪<IMG SRC="alah.jpg" HEIGHT="300" WIDTH="500‬‬

‫‪64‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫اﻟﺨﺎﺻﯿﺔ اﻟﺘﺎﻟﯿﺔ اﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻣﻊ >‪ <IMG‬ھﻲ ‪ ALT‬وﻓﯿﮭﺎ ﻧﺤﺪد ﻧﺼﺎً ﺑﺪﯾﻼً ﯾﻈﮭﺮ‬
‫ﻣﻜﺎن اﻟﺼﻮرة‪ .‬وھﺬا اﻟﻨﺺ ﯾﻼﺣﻆ ﺧﺼﻮﺻﺎً ﻋﻨﺪﻣﺎ ﯾﻜﻮن ﺧﯿﺎر "إﻇﮭﺎر اﻟﺼﻮر ﺗﻠﻘﺎﺋﯿﺎً"‬
‫ﻏﯿﺮ ﻓﻌﺎل ﻓﻲ اﻟﻤﺘﺼﻔﺢ‪ .‬ﻛﻤﺎ ﺗﺴﺘﻄﯿﻊ ﻣﻼﺣﻈﺘﮫ ﻓﻲ اﻟﻔﺘﺮة اﻟﺘﻲ ﺗﺴﺒﻖ ﺗﺤﻤﯿﻞ اﻟﺼﻮر‬
‫وﺧﺎﺻﺔ ﻓﻲ اﻟﻤﻮاﻗﻊ ﺑﻄﯿﺌﺔ اﻟﺘﺤﻤﯿﻞ‪.‬‬

‫>"‪<IMG SRC="thedome.jpg" ALT="The Dome Of The Rock‬‬

‫ﻋﻨﺪﻣﺎ ﻧﻘﻮم ﺑﺈدراج ﺻﻮرة ﺿﻤﻦ ﻓﻘﺮة ﻓﺈن ﻣﻮﻗﻊ ﻇﮭﻮرھﺎ ﯾﺘﺤﺪد ﺑﺎﻟﻄﺒﻊ ﺣﺴﺐ ﺗﺮﺗﯿﺐ‬
‫ورودھﺎ ﻓﻲ اﻟﻔﻘﺮة‪ ،‬ﻣﺜﻠﮭﺎ ﻣﺜﻞ أي ﻛﻠﻤﺔ أو ﻋﺒﺎرة أﺧﺮى‪ .‬وﻧﺴﺘﺨﺪم اﻟﺨﺎﺻﯿﺔ ‪ALIGN‬‬
‫ﻟﺘﺤﺪﯾﺪ ﻣﺤﺎذاة اﻟﺼﻮرة ﻣﻊ اﻟﻨﺺ اﻟﻤﺮاﻓﻖ ﻟﮭﺎ أو ﻟﻨﻘﻞ ﺑﻌﺒﺎرة أﺧﺮى‪ :‬ﺗﺤﺪﯾﺪ ﻣﻮﻗﻊ اﻟﻨﺺ‬
‫اﻟﺬي ﯾﻠﯿﮭﺎ ﺑﺎﻟﻨﺴﺒﺔ ﻟﮭﺎ وھﻲ ﺗﺄﺧﺬ اﻟﻘﯿﻢ‪BOTTOM, TOP, MIDDLE, :‬‬
‫‪ RIGHT ،LEFT‬وأوﺿﺢ ﻟﻚ ﺗﺄﺛﯿﺮ ﻛﻞ ﻗﯿﻤﺔ ﻛﻤﺎ ﯾﻠﻲ‪:‬‬

‫‪65‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫واﻵن ﺑﻌﺪ أن ﻗﻤﻨﺎ ﺑﺘﺤﺪﯾﺪ ﻣﺤﺎذاة اﻟﺼﻮرة ﻧﺤﺘﺎج إﻟﻰ ﺗﺤﺪﯾﺪ اﻟﻤﺴﺎﻓﺔ اﻟﻔﺎﺻﻠﺔ ﺑﯿﻨﮭﺎ‬
‫وﺑﯿﻦ اﻟﻨﺺ اﻟﺬي ﯾﺠﺎورھﺎ‪ .‬وﻧﺴﺘﺨﺪم ﻟﺬﻟﻚ اﻟﺨﺼﺎﺋﺺ اﻟﺘﺎﻟﯿﺔ‪:‬‬

‫‪ :VSPACE‬ﻟﺘﺤﺪﯾﺪ اﻟﻤﺴﺎﻓﺔ اﻟﻌﻤﻮدﯾﺔ اﻟﻔﺎﺻﻠﺔ ﺑﯿﻦ اﻟﻨﺺ واﻟﺤﺎﻓﺘﯿﻦ اﻟﻌﻠﯿﺎ واﻟﺴﻔﻠﻰ‬

‫ﻟﻠﺼﻮرة‪.‬‬

‫‪ :HSPACE‬ﻟﺘﺤﺪﯾﺪ اﻟﻤﺴﺎﻓﺔ اﻷﻓﻘﯿﺔ اﻟﻔﺎﺻﻠﺔ ﺑﯿﻦ اﻟﻨﺺ واﻟﺤﺎﻓﺘﯿﻦ اﻟﯿﻤﻨﻰ واﻟﯿﺴﺮى‬

‫ﻟﻠﺼﻮرة‪.‬‬

‫ﻣﺜﺎل ‪:‬‬

‫"‪<IMG SRC="alah.jpg" ALIGN="RIGHT" VSPACE="20‬‬

‫>"‪HSPACE="20‬‬
‫‪66‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫اﻟﺨﺎﺻﯿﺔ اﻷﺧﯿﺮة واﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻣﻊ اﻟﻮﺳﻢ >‪ <IMG‬ھﻲ ‪ BORDER‬ووﻇﯿﻔﺘﮭﺎ‬

‫إﺿﺎﻓﺔ إﻃﺎر ﺣﻮل اﻟﺼﻮر واﻟﺘﺤﻜﻢ ﺑﺴُﻤﻜِﮫ‪ .‬وھﺬه اﻟﺨﺎﺻﯿﺔ ﺗﺴﺘﺨﺪم ﺑﺸﻜﻞ ﺧﺎص ﻋﻨﺪ‬
‫ﺗﻌﯿﯿﻦ ﺻﻮرة ﻣﺎ ﻛﻮﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ‪ .‬وﯾﺘﻢ اﻟﺘﺤﻜﻢ ﺑﺎﻟﺴُﻤﻚ ﻣﻦ ﺧﻼل إﺳﻨﺎد رﻗﻢ ﯾﻤﺜﻞ اﻟﺴُﻤﻚ‬
‫ﺑﺎﻟﺒﯿﻜﺴﻞ‪ .‬واﻟﻘﯿﻤﺔ اﻹﻓﺘﺮاﺿﯿﺔ ﻟﮫ ھﻲ ‪ 0‬أي ﻻ ﯾﻮﺟﺪ إﻃﺎر ﺣﻮل اﻟﺼﻮرة‪.‬‬

‫ﻣﺜﻼٌ ﻹﺿﺎﻓﺔ إﻃﺎر ﺳُﻤﻜﮫ ‪ 5‬ﺑﯿﻜﺴﻞ ﻧﻜﺘﺐ اﻟﺸﯿﻔﺮة اﻟﺘﺎﻟﯿﺔ‪:‬‬

‫>"‪<IMG SRC="image.jpg" BORDER="5‬‬

‫واﻵن ﺣﺎن اﻟﻮﻗﺖ ﻟﻜﻲ ﻧﻨﺎﻗﺶ ﻣﻌﺎً ﺑﻌﺾ اﻷﻣﻮر اﻟﺘﻲ ﺗﺘﻌﻠﻖ ﺑﺎﻟﺼﻮر واﻟﺮﺳﻮﻣﺎت ﺑﺸﻜﻞ‬
‫ﻋﺎم‪.‬‬

‫‪ ü‬ھﻞ ﺣﺎوﻟﺖ أن ﺗﺘﻌﺮف ﻋﻠﻰ أﻧﻮاع اﻟﻤﻠﻔﺎت اﻟﺮﺳﻮﻣﯿﺔ اﻟﺘﻲ ﺗﻘﻮم ﺑﺘﺤﻤﯿﻠﮭﺎ ﺧﻼل‬
‫ﺗﺼﻔﺤﻚ ﻟﻤﻮاﻗﻊ اﻹﻧﺘﺮﻧﺖ؟‬

‫‪67‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﯾﺰﺧﺮ ﻋﺎﻟﻢ اﻟﻜﻤﺒﯿﻮﺗﺮ ﺑﺎﻟﻌﺸﺮات ﻣﻦ أﻧﻮاع اﻟﻤﻠﻔﺎت اﻟﺮﺳﻮﻣﯿﺔ وﺗﻨﺴﯿﻘﺎت اﻟﺼﻮر‪ .‬وﻛﻞ‬
‫ﻣﻨﮭﺎ ﯾﺨﺘﻠﻒ ﻋﻦ ﻏﯿﺮه ﻣﻦ ﻋﺪة ﻧﻮاح‪ ،‬أذﻛﺮ ﻟﻚ ﻣﻨﮭﺎ‪ :‬اﻟﺪﻗﺔ‪ ،‬وﻋﺪد اﻷﻟﻮان اﻟﺘﻲ‬
‫ﯾﺴﺘﻮﻋﺒﮭﺎ‪ ،‬واﻟﺤﺠﻢ اﻟﺘﺨﺰﯾﻨﻲ ﻟﻠﻤﻠﻒ‪ .‬ﻟﻜﻦ ھﻨﺎك ﻧﻮﻋﯿﻦ ﻓﻘﻂ ﻣﻦ ھﺬه اﻟﻤﻠﻔﺎت ﯾﺘﻢ‬
‫ﺗﺪاوﻟﮭﻤﺎ ﺣﺎﻟﯿﺎً ﻓﻲ اﻹﻧﺘﺮﻧﺖ وھﻤﺎ‪:‬‬

‫‪JPG, JPEG‬‬
‫إﺧﺘﺼﺎر ﻟـِ ‪ .Group Experts Photographic Joint‬وﯾﺪﻋﻢ ھﺬا اﻟﺘﻨﺴﯿﻖ ﺻﻮراً‬
‫ﺑﻌﯿﺎر ‪ 24‬ﺑﺖ )أي ‪ 16.7‬ﻣﻠﯿﻮن ﻟﻮن(‪ .‬وﻣﯿﺰة ھﺬا اﻟﺘﻨﺴﯿﻖ ﺗﺘﻤﺜﻞ ﻓﻲ إﻣﻜﺎﻧﯿﺔ ﺿﻐﻂ‬
‫اﻟﺼﻮر ﺑﻨﺴﺐ ﻣﺨﺘﻠﻔﺔ ﻋﻨﺪ ﺗﺨﺰﯾﻨﮭﺎ وﺑﺎﻟﺘﺎﻟﻲ اﻟﺤﺼﻮل ﻋﻠﻰ ﺻﻮر ﺻﻐﯿﺮة اﻟﺤﺠﻢ‬
‫ﻧﺴﺒﯿﺎً‪).‬أﻋﻨﻲ ھﻨﺎ ﺣﺠﻢ اﻟﺘﺨﺰﯾﻦ ﺑﺎﻟﻜﯿﻠﻮﺑﺎﯾﺘﺎت وﻟﯿﺲ أﺑﻌﺎد اﻟﺼﻮرة(‪ .‬ﻟﻜﻦ ﺑﺎﻟﻤﻘﺎﺑﻞ ﻛﻠﻤﺎ‬
‫إزدادت ﻧﺴﺒﺔ اﻟﻀﻐﻂ وﺻﻐﺮ ﺣﺠﻢ اﻟﻤﻠﻒ ﻛﺎن ذﻟﻚ ﻋﻠﻰ ﺣﺴﺎب اﻟﺠﻮدة واﻟﻮﺿﻮح‪.‬‬

‫‪GIF‬‬
‫إﺧﺘﺼﺎر ﻟـِ ‪ Format Interchange Graphical‬وأﻗﺼﻰ ﻋﺪد ﻟﻸﻟﻮان ﻓﻲ ھﺬا‬
‫اﻟﺘﻨﺴﯿﻖ ھﻮ ‪ 265‬ﻟﻮن‪ .‬وﻣﻊ ذﻟﻚ ﻓﺈن أﺣﺠﺎم اﻟﺼﻮر اﻟﻤﺨﺰﻧﺔ ﺑﮫ ﻛﺒﯿﺮ ﻧﺴﺒﯿﺎً ﻣﻘﺎرﻧﺔ‬
‫ﺑﺘﻨﺴﯿﻖ ‪ .JPG‬ﻟﻜﻦ ھﻨﺎك ﻣﺰاﯾﺎ راﺋﻌﺔ ﯾﻨﻔﺮد ﺑﮭﺎ ﺗﻨﺴﯿﻖ ‪ GIF‬ﻣﻤﺎ ﯾﺴﺘﺪﻋﻲ اﺳﺘﺨﺪاﻣﮫ‬
‫ﻓﻲ ﺻﻔﺤﺎت اﻟﻮﯾﺐ‪ ،‬أوﻟﮭﺎ اﻟﻘﺪرة ﻋﻠﻰ ﺗﺨﺰﯾﻦ ﺻﻮر ﺑﺨﻠﻔﯿﺎت ﺷﻔﺎﻓﺔ ‪Transparent‬‬
‫‪ Images‬وﺛﺎﻧﯿﮭﺎ اﻟﺼﻮر اﻟﻤﺘﺤﺮﻛﺔ ‪Animated Gifs‬‬

‫وﺗﺠﺪ ﻣﻌﻠﻮﻣﺎت واﻓﯿﺔ ودروﺳﺎً ﻣﻔﺼﻠﺔ ﺣﻮل ھﺬه اﻟﻤﻮاﺿﯿﻊ ﺿﻤﻦ دروس ‪Paint‬‬
‫‪.Shop Pro‬‬

‫واﻵن ﻗﺪ ﺗﺴﺄل‪ ،‬أي ﻣﻦ ھﺬﯾﻦ اﻟﺘﻨﺴﯿﻘﯿﻦ أﺳﺘﺨﺪم ﻓﻲ ﺻﻔﺤﺎﺗﻲ؟! ﻻ ﯾﻮﺟﺪ ﺟﻮاب ﻗﻄﻌﻲ‬
‫ﻟﮭﺬا اﻟﺴﺆال ﻟﻜﻦ إﻟﯿﻚ ھﺎﺗﯿﻦ اﻟﻤﻌﺎدﻟﺘﯿﻦ‪:‬‬

‫‪68‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫‪ =JPG‬اﻟﺼﻮر اﻟﺤﻘﯿﻘﯿﺔ ذات اﻟﻌﺪد اﻟﻜﺒﯿﺮ ﻣﻦ اﻷﻟﻮان‪ ،‬وذات اﻷﺑﻌﺎد اﻟﻜﺒﯿﺮة‬

‫‪ =GIF‬اﻟﺼﻮر ﻗﻠﯿﻠﺔ اﻷﻟﻮان وﺻﻐﯿﺮة اﻷﺑﻌﺎد ﻣﺜﻞ اﻷزرار‪.‬‬

‫‪ ü‬ﻣﺎ ھﻲ درﺟﺔ إﺳﺘﺒﺎﻧﺔ ﺷﺎﺷﺘﻚ ‪Resolution‬؟ إذا ﻛﻨﺖ ﻻ ﺗﻌﺮف اﻟﺠﻮاب ﻗﻢ ﺑﻔﺘﺢ‬
‫ﺗﻄﺒﯿﻖ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ ﻓﻲ وﯾﻨﺪوز ‪ 95‬وإﺧﺘﺮ أﯾﻘﻮﻧﺔ)اﻟﻌﺮض( ﺛﻢ اﺧﺘﺮ اﻟﺘﺒﻮﯾﺐ )إﻋﺪادات(‬
‫وھﻨﺎك ﺳﻮف ﺗﺸﺎھﺪ "ﻣﺴﺎﺣﺔ ﺳﻄﺢ اﻟﻤﻜﺘﺐ" اﻟﺬي ﯾﺪل ﻋﻠﻰ درﺟﺔ إﺳﺘﺒﺎﻧﺔ اﻟﺸﺎﺷﺔ‪،‬‬
‫وﻋﻠﻰ اﻷﻏﻠﺐ ﺳﺘﻜﻮن ‪ 480×640‬أو ‪ ،600×800‬وھﻨﺎك درﺟﺎت أﻋﻠﻰ ﺗﻌﺘﻤﺪ ﻋﻠﻰ‬
‫ﻗﺪرة ﻣﺤﻮل اﻟﻌﺮض‪ .‬ﻛﺬﻟﻚ ﺳﻮف ﺗﺸﺎھﺪ "ﻟﻮح اﻷﻟﻮان" اﻟﺬي ﯾﺪل ﻋﻠﻰ ﻋﺪد اﻷﻟﻮان‬
‫اﻟﺘﻲ ﯾﻤﻜﻦ ﻋﺮﺿﮭﺎ ﺑﺎﻹﻋﺪادات اﻟﺤﺎﻟﯿﺔ ﻟﻠﺸﺎﺷﺔ‪.‬‬

‫أﻣﺎ ﻓﻲ وﯾﻨﺪوز ‪ 3.11‬أو ‪ 3.1‬ﻓﺎﺧﺘﺮ أﯾﻘﻮﻧﺔ ﺑﺮﻧﺎﻣﺞ إﻋﺪاد ‪ Windows‬ﻣﻦ ﻟﻮﺣﺔ اﻟﺘﺤﻜﻢ‬
‫ﻓﺘﻈﮭﺮ ﻟﻚ ﻗﺎﺋﻤﺔ ﺗﺠﺪ ﺑﻀﻤﻨﮭﺎ ﻧﻮع وإﺳﺘﺒﺎﻧﺔ اﻟﺸﺎﺷﺔ‪.‬‬

‫ھﺬا اﻟﺤﺪﯾﺚ ﯾﻘﻮدﻧﻲ إﻟﻰ وﺣﺪة اﻟﺒﯿﻜﺴﻞ ‪) Pixel‬أﻟﻢ أﻋﺪك ﻣﺴﺒﻘﺎً ﺑﺘﻮﺿﯿﺤﮭﺎ(‪ .‬وھﻲ‬
‫اﺧﺘﺼﺎر ﻟـِ ‪ .Picture Element‬إذا ﻛﺎﻧﺖ ﺷﺎﺷﺘﻚ ﺑﺈﺳﺘﺒﺎﻧﺔ ‪ 480×640‬ﻓﮭﺬا ﯾﻌﻨﻲ‬
‫أﻧﮭﺎ ﻣﻘﺴﻤﺔ)ﻧﻈﺮﯾﺎً( إﻟﻰ ﺷﺒﻜﺔ ﻣﻦ ‪ 640‬ﻋﻤﻮد و‪ 480‬ﺳﻄﺮ‪ .‬وﺑﻤﻨﺘﮭﻰ اﻟﺒﺴﺎﻃﺔ‪ ،‬إن ﻛﻞ‬
‫ﺧﻠﯿﺔ ﻣﻦ ھﺬه اﻟﺸﺒﻜﺔ ﺗﻤﺜﻞ ﺑﯿﻜﺴﻞ وﺑﺎﻟﻄﺒﻊ ﻛﻠﻤﺎ زادت اﻹﺳﺘﺒﺎﻧﺔ ﻛﻠﻤﺎ ﺻﻐﺮ ﺣﺠﻢ وﺣﺪة‬
‫اﻟﺒﯿﻜﺴﻞ‪.‬‬

‫‪ ü‬ھﻞ ﺳﺒﻖ ﻟﻚ وأن ﺳﻤﻌﺖ ﺑﻤﺼﻄﻠﺢ ‪ Thumbnail‬ﺿﻤﻦ ﻣﺼﻄﻠﺤﺎت اﻹﻧﺘﺮﻧﺖ؟‬

‫ﺣﺴﻨﺎً‪ ،‬ﻻ ﺗﻠﺘﻔﺖ إﻟﻰ اﻟﺘﺮﺟﻤﺔ اﻟﺤﺮﻓﯿﺔ ﻟﮭﺬه اﻟﻜﻠﻤﺔ‪ ،‬واﻟﺘﻲ ﺗﻌﻨﻲ "ﻇﻔﺮ اﻹﺑﮭﺎم"‪.‬‬

‫ﻓﺎﻟﻤﻘﺼﻮد ﺣﻘﯿﻘﺔً ﺑﮭﺎ ھﻲ ﺗﻠﻚ اﻟﺼﻮرة اﻟﺼﻐﯿﺮة ﺟﺪاً اﻟﺘﻲ ﺗﻘﻮم ﺑﺎﻟﻨﻘﺮ ﻋﻠﯿﮭﺎ ﻓﺘﺆدي إﻟﻰ‬
‫ﻋﺮض ﺻﻮرة ﺑﺤﺠﻢ أﻛﺒﺮ‪ .‬ﻟﺬﻟﻚ ﻗﺪ ﯾﻜﻮن اﻟﻤﺼﻄﻠﺢ اﻷﻧﺴﺐ ﻟﻮﺻﻔﮭﺎ ھﻮ "اﻟﻌﯿّﻨﺔ"‪.‬‬

‫‪69‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫)وإذا ﻛﻨﺖ ﻗﺪ زرت أﺣﺪ اﻟﻤﻮاﻗﻊ اﻹﺧﺒﺎرﯾﺔ ﻟﺮأﯾﺖ ﻛﯿﻒ ﯾﺘﻢ ﻋﺮض ﻋﯿﻨﺎت وﺻﻮر‬
‫ﻣﺼﻐﺮة ﻟﻠﻘﻄﺎت اﻷﺣﺪاث وﻋﻨﺪ اﻟﻨﻘﺮ ﻋﻠﻰ اﻟﻌﯿﻨﺔ ﺗﻈﮭﺮ اﻟﺼﻮرة اﻷﺻﻠﯿﺔ‪ .‬إذن أﻧﺖ ﻟﺴﺖ‬
‫ﻣﺠﺒﺮاً ﻋﻠﻰ اﻹﻧﺘﻈﺎر ﻟﻮﻗﺖ ﻃﻮﯾﻞ ﻟﺤﯿﻦ ﻇﮭﻮر ﺻﻮرة ذات ﺣﺠﻢ ﻛﺒﯿﺮ ﻟﻠﻘﻄﺔ ﻟﺴﺖ ﻣﻌﻨﯿﺎً‬
‫ﺑﮭﺎ(‪.‬‬

‫وﻣﻦ اﻟﻮاﺿﺢ أن اﺳﺘﺨﺪام اﻟﻌﯿﻨﺎت ﻣﻔﯿﺪ وﻋﻤﻠﻲ ﺟﺪاً وأن وﺿﻌﮭﺎ ﻓﻲ اﻟﻤﻮاﻗﻊ اﻟﺘﻲ‬
‫ﺗﺤﺘﻮي ﻋﻠﻰ اﻟﻌﺪﯾﺪ ﻣﻦ اﻟﺼﻮر ﯾﺆدي إﻟﻰ ﺗﻘﻠﯿﻞ اﻟﺰﻣﻦ اﻟﻼزم ﻟﺘﺤﻤﯿﻞ اﻟﺼﻔﺤﺎت وﺗﺠﻨﺐ‬
‫ﺿﯿﺎع اﻟﻮﻗﺖ ﺑﺎﻧﺘﻈﺎر ﻇﮭﻮر اﻟﺼﻮر اﻷﺻﻠﯿﺔ ﻛﺒﯿﺮة اﻟﺤﺠﻢ‪ .‬ﻷﻧﮭﺎ ﺗﻌﻄﻲ اﻟﺰاﺋﺮ اﻟﺤﺮﯾﺔ‬
‫ﻓﻲ اﻟﻨﻘﺮ ﻋﻠﯿﮭﺎ إذا رﻏﺐ ﻓﻲ رؤﯾﺔ اﻷﺻﻞ أو ﺗﺠﺎھﻠﮭﺎ‪ .‬أﻣﺎ ﻛﯿﻒ ﯾﺘﻢ ﻋﻤﻞ ھﺬه اﻟﻌﯿﻨﺎت؟‬
‫ﻓﺬﻟﻚ ﺑﺎﺳﺘﺨﺪام أﺣﺪ ﺑﺮاﻣﺞ ﻣﻌﺎﻟﺠﺔ اﻟﺮﺳﻮم ﻛﺒﺮﻧﺎﻣﺞ ‪ .Pro Paint Shop‬ﻣﻦ ﺧﻼل‬
‫ﺗﺼﻐﯿﺮ أﺑﻌﺎد اﻟﺼﻮر اﻷﺻﻠﯿﺔ إﻟﻰ اﻟﻨﺴﺒﺔ اﻟﻤﻄﻠﻮﺑﺔ‪.‬‬

‫أﻋﺮف ﻣﺎذا ﺳﺘﺴﺄل اﻵن‪ ،‬ﺳﺘﻘﻮل أﻟﻢ ﻧﺘﻌﻠﻢ ﻗﺒﻞ ﻗﻠﯿﻞ ﻛﯿﻔﯿﺔ ﻋﺮض اﻟﺼﻮر ﻣﻊ اﻟﺘﺤﻜﻢ‬
‫ﺑﺄﺑﻌﺎدھﺎ؟ أﻻ ﯾﺆدي اﺳﺘﺨﺪام اﻟﺨﺼﺎﺋﺺ ‪ HEIGHT ،WIDTH‬إﻟﻰ اﻟﺘﺤﻜﻢ ﺑﺤﺠﻢ‬
‫اﻟﺼﻮر وﻋﺮﺿﮭﺎ ﺑﻨﺴﺐ ﻣﺼﻐﺮة ﺣﺴﺐ ﻣﺎ ھﻮ ﻣﻄﻠﻮب؟‬

‫إن اﺳﺘﺨﺪاﻣﻚ ﻟﮭﺬه اﻟﺨﺼﺎﺋﺺ ﯾﺆدي إﻟﻰ إﻇﮭﺎر اﻟﺼﻮرة ﺑﺤﯿﺚ ﺗﺒﺪو ﻣﺼﻐﺮة‪ ،‬ﻟﻜﻨﻚ‬
‫ﻓﻌﻠﯿﺎً ﻗﻤﺖ ﺑﺈﺟﺒﺎر ﻣﺘﺼﻔﺢ اﻟﺰاﺋﺮ ﻋﻠﻰ ﺗﺤﻤﯿﻞ اﻟﺼﻮرة ﺑﺎﻟﺤﺠﻢ واﻷﺑﻌﺎد اﻷﺻﻠﯿﺔ ﺛﻢ‬
‫ﻋﺮﺿﮭﺎ ﺑﺎﻟﺤﺠﻢ اﻟﻤﺼﻐﺮ أي أﻧﻚ ﻓﻲ اﻟﻨﮭﺎﯾﺔ ﻟﻢ ﺗﺤﻘﻖ اﻟﻐﺎﯾﺔ ﻣﻦ وﺟﻮد ھﺬه اﻟﻌﯿﻨﺎت‪.‬‬

‫أﻟﯿﺲ ھﺬا‬
‫ﻣﻤﺘﻌﺎ‬
‫‪70‬‬
 www.dinaro.com/vb3

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HH
71
 ‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﺴﺎﺩﺱ‬

‫‪‬‬

‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺴﺎدس ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬

‫‪ ...Links‬أو اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ ھﻲ روح اﻹﻧﺘﺮﻧﺖ‪ .‬وإذا ﻛﺎﻧﺖ اﻹﻧﺘﺮﻧﺖ ﺑﻤﺠﻤﻠﮭﺎ ھﻲ‬
‫ﺷﺒﻜﺔ اﻟﻌﻨﻜﺒﻮت ﻓﺈن ھﺬه اﻟﻮﺻﻼت ھﻲ اﻟﺨﯿﻮط اﻟﺘﻲ ﺗﺸﻜﻞ ھﺬه اﻟﺸﺒﻜﺔ وﺗﺆﻟﻒ ﺣﻠﻘﺎت‬
‫اﻟﻮﺻﻞ ﺑﯿﻦ اﻟﻤﻼﯾﯿﻦ ﻣﻦ ﻣﻮاﻗﻌﮭﺎ‪ .‬ﺗﻨﻘﺮ ﻋﻠﻰ وﺻﻠﺔ ﻣﺎ ﻓﺘﻨﻘﻠﻚ إﻟﻰ ﺻﻔﺤﺔ أﺧﺮى ﻓﻲ‬
‫ﻧﻔﺲ اﻟﻤﻮﻗﻊ‪ ...‬وﺗﻨﻘﺮ ﻋﻠﻰ وﺻﻠﺔ أﺧﺮى ﻟﺘﻨﻘﻠﻚ ﻛﻠﯿﺎً إﻟﻰ أﺣﺪ اﻟﻤﻮاﻗﻊ ﻓﻲ اﻟﺠﺎﻧﺐ اﻵﺧﺮ‬
‫ﻣﻦ اﻟﻌﺎﻟﻢ‪ ...‬وﺻﻠﺔ ﺗﺠﻌﻠﻚ ﺗﺤﻤّﻞ ﻣﻠﻔﺎً وأﺧﺮى ﺗﺠﻌﻠﻚ ﺗﺸﻐّﻞ ﻣﻘﻄﻌﺎ ﻣﻮﺳﯿﻘﯿﺎً وﺛﺎﻟﺜﺔ‬
‫ﺗﻌﺮض ﻟﻚ ﺻﻮرة‪...‬‬

‫ﺣﺴﻨﺎً‪ ،‬ﻣﻦ اﻟﻤﺆﻛﺪ أﻧﻚ اﺳﺘﻨﺘﺠﺖ اﻵن ﻣﻦ ھﺬه اﻟﻤﻘﺪﻣﺔ أﻧﻚ ﺑﺼﺪد ﺗﻌﻠﻢ ﻛﯿﻔﯿﺔ إدراج‬
‫اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ ﻓﻲ ﺻﻔﺤﺎﺗﻚ‪ ...‬ﻟﻘﺪ ﺻﺪق اﺳﺘﻨﺘﺎﺟﻚ ﻟﺬﻟﻚ ھﯿﺎ إﻟﻰ اﻟﻌﻤﻞ‪...‬‬

‫ھﻨﺎك ﻋﺪة ﺧﯿﺎرات ﻟﻠﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ‪ ،‬ﻣﻨﮭﺎ أن ﺗﻜﻮن اﻟﻮﺻﻠﺔ ﻟﻤﻮﻗﻊ آﺧﺮ‪ ،‬أو أن ﺗﻜﻮن‬
‫ﻟﺼﻔﺤﺔ أﺧﺮى داﺧﻞ اﻟﻤﻮﻗﻊ ﻧﻔﺴﮫ‪ ،‬وﻣﻨﮭﺎ أن ﺗﻜﻮن ﻟﻤﻜﺎن آﺧﺮ ﻓﻲ ﻧﻔﺲ اﻟﺼﻔﺤﺔ )إﻟﻰ‬
‫أﻋﻠﻰ أو أﺳﻔﻞ ﻋﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل( أو أن ﺗﻜﻮن وﺻﻠﺔ ﻟﻌﻨﻮان ﺑﺮﯾﺪ إﻟﻜﺘﺮوﻧﻲ ‪E-mail‬‬
‫وﻓﻲ ﺟﻤﯿﻊ اﻟﺤﺎﻻت ﻓﺈن اﻟﻤﺒﺪأ واﺣﺪ ﻟﻜﻦ ﺗﺨﺘﻠﻒ ﺑﻌﺾ اﻟﺘﻔﺎﺻﯿﻞ‪ .‬وﺳﻮف أﻧﺎﻗﺶ ﻣﻌﻚ‬
‫ﻛﻞ ﺣﺎﻟﺔ ﻋﻠﻰ ﺣﺪة وﺑﺎﻟﺘﻔﺼﯿﻞ‪.‬‬

‫‪72‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻧﺴﺘﺨﺪم اﻟﻮﺳﻮم‬
‫>‪</A> ... <A‬‬

‫ﻛﻮﺳﻮم أﺳﺎﺳﯿﺔ ﻹدراج اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ‪ ،‬وھﻲ اﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ ‪ .Anchor‬وھﻲ ﻻ‬

‫ﺗﻌﻤﻞ ﻟﻮﺣﺪھﺎ ﺑﻞ ﺗﺘﻄﻠﺐ إﺿﺎﻓﺔ ﺧﺼﺎﺋﺺ ﻣﻌﯿﻨﺔ أوﻟﮭﺎ وأھﻤﮭﺎ اﻟﺨﺎﺻﯿﺔ‬

‫‪HREF‬‬

‫اﻟﺘﻲ ﻧﺤﺪد ﻣﻦ ﺧﻼﻟﮭﺎ اﻟﻤﻮﻗﻊ اﻟﺬي ﻧﺮﯾﺪ اﻟﺪﻻﻟﺔ ﻋﻠﯿﮫ‪ ،‬وﯾﺠﺐ أن ﯾﻜﺘﺐ ﻋﻨﻮان اﻟﻤﻮﻗﻊ‬
‫ﻛﺎﻣﻼً‪.‬‬

‫اﻟﺤﺎﻟﺔ اﻷوﻟﻰ‪ :‬إدراج وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ ﺗﺸﯿﺮ إﻟﻰ ﻣﻮﻗﻊ ﺧﺎرﺟﻲ‪.‬‬

‫ﻟﻨﻘﻢ ﺑﺈدراج وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ إﻟﻰ أﺣﺪ اﻟﻤﻮاﻗﻊ اﻟﻌﺮﺑﯿﺔ اﻟﺮاﺋﺪة واﻟﺮاﺋﻌﺔ‪ ،‬وھﻮ ﻣﻮﻗﻊ ﺷﺮﻛﺔ‬
‫ﺻﺨﺮ‪ .‬وﻋﻨﻮاﻧﮫ ‪ http://www.Dinaro.com/vb3‬ﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ ﯾﺘﻢ ﻛﺘﺎﺑﺔ‬
‫اﻟﺸﯿﻔﺮة ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬

‫>‪<A HREF="http://www.Dinaro.com/vb3"> </A‬‬

‫ﻟﻜﻦ ﺑﻘﻲ ﺷﻲء واﺣﺪ وھﻮ اﻟﻌﺒﺎرة أو اﻟﻜﻠﻤﺔ اﻟﺘﻲ ﺳﯿﺘﻢ اﻟﻨﻘﺮ ﻋﻠﯿﮭﺎ ﻟﺘﺸﻐﯿﻞ اﻟﻮﺻﻠﺔ‪،‬‬
‫وھﺬه ﯾﺠﺐ أن ﺗﻮﺿﻊ ﺑﯿﻦ اﻟﻮﺳﻤﯿﻦ >‪ .</A> ... <A‬أي ﻟﻜﻲ ﺗﻜﺘﻤﻞ اﻟﻮﺻﻠﺔ اﻟﺴﺎﺑﻘﺔ‬
‫ﯾﺠﺐ أن ﻧﻜﺘﺐ ﻣﻌﮭﺎ أي ﻋﺒﺎرة ﻧﺮﯾﺪھﺎ‪ ،‬ﻟﻜﻲ ﯾﻨﻘﺮ ﻋﻠﯿﮭﺎ اﻟﺰاﺋﺮ ﻓﺘﻨﻘﻠﮫ إﻟﻰ اﻟﻌﻨﻮان‬
‫اﻟﻤﻄﻠﻮب‪ .‬ﻣﺎ رأﯾﻚ ﺑﻌﺒﺎرة‪ Go To Dinaro :‬واﻟﺘﻲ ﺗﺼﺒﺢ اﻟﺸﯿﻔﺮة ﻣﻌﮭﺎ ﺑﺎﻟﺸﻜﻞ‬
‫اﻟﺘﺎﻟﻲ‪:‬‬
‫‪73‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>‪<A HREF="http://www.Dinaro.com/vb3">Go To Dinaro </A‬‬

‫وﺗﻈﮭﺮ اﻟﻮﺻﻠﺔ ﻛﻤﺎ ﯾﻠﻲ‪:‬‬

‫‪Go To Dinaro‬‬

‫ﻟﻢ ﺗﻌﺠﺒﻚ؟ ﻟﯿﺲ ذﻟﻚ ﻣﺸﻜﻠﺔ ﻓﺄﻧﺖ ﺗﺴﺘﻄﯿﻊ ﻛﺘﺎﺑﺔ أي ﺷﻲء ﺗﺮﯾﺪه ﻛﻌﻨﻮان ﻟﻠﻮﺻﻠﺔ اﻟﺘﻲ‬
‫ﺗﺮﯾﺪھﺎ‪ .‬ﻣﺎ رأﯾﻚ ﻟﻮ ﺟﻌﻠﻨﺎ ﻛﻠﻤﺔ ‪ Dinaro‬ھﻲ ﻓﻘﻂ اﻟﻌﻨﻮان ﻟﮭﺬه اﻟﻮﺻﻠﺔ‬

‫>‪Go To <A HREF="http://www.Dinaro.com/vb3"> Dinaro </A‬‬

‫‪Go To Dinaro‬‬

‫ﺑﻞ إﻧﻚ ﺗﺴﺘﻄﯿﻊ إدراج ﺻﻮرة أو )زر( ﻛﺒﺪﯾﻞ ﻋﻦ اﻟﻜﻠﻤﺎت ‪-‬ﻛﻤﺎ ﺗﺸﺎھﺪ ﻓﻲ اﻟﻜﺜﯿﺮ ﻣﻦ‬
‫اﻟﻤﻮاﻗﻊ‪ -‬وﻛﻞ ﻣﺎ ﻋﻠﯿﻚ ﻓﻌﻠﮫ ﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ ھﻮ ﻛﺘﺎﺑﺔ اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺈدراج اﻟﺼﻮرة‬
‫ﺑﯿﻦ اﻟﻮﺳﻤﯿﻦ >‪ </A> ... <A‬ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬

‫"=‪<A HREF="http://www.Dinaro.com/vb3""><IMG SRC‬‬

‫>‪DINARO1.gif"></A‬‬

‫واﻟﺬي ﯾﺆدي إﻟﻰ ﻇﮭﻮر اﻟﺼﻮرة اﻟﺘﺎﻟﯿﺔ ﻛﻮﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ ﻟﻤﻮﻗﻊ دﯾﻨﺎروا‬

‫‪74‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫وﺑﺸﻜﻞ ﻋﺎم ﻓﺈن أي ﺷﻲء ﯾﻮﺿﻊ ﺑﯿﻦ اﻟﻮﺳﻤﯿﻦ >‪ </A> ... <A‬ﺳﻮف ﯾﻜﻮن اﻟﻮﺳﯿﻠﺔ‬
‫أو اﻟﻌﻨﻮان اﻟﺬي ﯾﻨﻘﻠﻨﺎ إﻟﻰ اﻟﻤﻮﻗﻊ اﻟﻤﺸﺎر إﻟﯿﮫ ﻓﻲ اﻟﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ‪ ،‬ﺳﻮاءً ﻛﺎن ھﺬا‬
‫اﻟﺸﻲء ﻧﺼﺎً أو ﺻﻮرة أو ﻛﻼھﻤﺎ ﻣﻌﺎً‪.‬‬

‫واﻵن ھﻞ ﺗﻼﺣﻆ اﻹﻃﺎر اﻟﻈﺎھﺮ ﺣﻮل اﻟﺼﻮرة؟ وھﻞ ﺗﺬﻛﺮ ﻣﺘﻰ ﻗﻤﻨﺎ ﺑﺎﻟﺤﺪﯾﺚ ﻋﻦ ھﺬا‬
‫اﻟﻨﻮع ﻣﻦ اﻹﻃﺎرات؟ ﻧﻌﻢ‪ ،‬ﻓﻲ اﻟﺪرس اﻟﺴﺎﺑﻖ‪ .‬ﻋﻨﺪ إدراج ﺻﻮرة ﻛﻮﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ ﯾﻈﮭﺮ‬
‫ﺣﻮﻟﮭﺎ إﻃﺎر ﺳﻤﻜﮫ ‪ 2‬ﺑﯿﻜﺴﻞ وھﺬه ھﻲ اﻟﺤﺎﻟﺔ اﻹﻓﺘﺮاﺿﯿﺔ‪ .‬وﺑﺎﻟﻄﺒﻊ ﻧﺴﺘﻄﯿﻊ إزاﻟﺘﮫ‬
‫ﺑﻜﺘﺎﺑﺔ اﻟﺨﺎﺻﯿﺔ "‪ BORDER="0‬ﺿﻤﻦ وﺳﻢ اﻟﺼﻮرة‪.‬‬

‫"=‪<A HREF="http://www.Dinaro.com/vb3""><IMG SRC‬‬

‫>‪DINARO1.gif" BORDER="0"></A‬‬

‫أو ﺣﺘﻰ ﺗﻜﺒﯿﺮه ﺑﻜﺘﺎﺑﺔ اﻟﺴﻤﻚ اﻟﻤﻄﻠﻮب ﻣﻊ ھﺬه اﻟﺨﺎﺻﯿﺔ‪.‬‬

‫"=‪<A HREF="http://www.Dinaro.com/vb3""><IMG SRC‬‬
‫>‪DINARO1.gif" BORDER="7"></A‬‬
‫‪75‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻧﻨﺘﻘﻞ اﻵن إﻟﻰ اﻟﺤﺎﻟﺔ اﻟﺜﺎﻧﯿﺔ‪ ،‬وھﻲ أن ﺗﺸﯿﺮ اﻟﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ إﻟﻰ ﻣﻠﻒ ﻣﻮﺟﻮد ﻓﻲ ﻧﻔﺲ‬
‫اﻟﻤﻮﻗﻊ )أي ﻣﻠﻒ ﻣﺤﻠﻲ( ﺳﻮاءً ﻛﺎن ﻣﻠﻒ ‪ HTML‬أو ﺻﻮرة أو ﻏﯿﺮ ذﻟﻚ‪ .‬وﻓﻲ ھﺬه‬
‫اﻟﺤﺎﻟﺔ ﻓﺈن ﻣﺎ ﯾﻜﺘﺐ ﻣﻊ اﻟﺨﺎﺻﯿﺔ ‪ HREF‬ھﻮ اﺳﻢ ھﺬا اﻟﻤﻠﻒ اﻟﻤﻄﻠﻮب اﻟﻮﺻﻮل إﻟﯿﮫ‪.‬‬

‫ﻟﻨﻘﻢ ﺑﺈﻧﺸﺎء وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ ﺗﻘﻮدﻧﺎ إﻟﻰ اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ ﻟﮭﺬا اﻟﻤﻮﻗﻊ وﺑﺎﻟﻤﻨﺎﺳﺒﺔ ﻓﺈن‬
‫اﻟﻤﻠﻒ اﻟﺬي ﯾﺤﺘﻮﯾﮭﺎ اﺳﻤﮫ ‪ ، index.html‬واﻟﺸﯿﻔﺮة اﻟﺨﺎﺻﺔ ﺑﺬﻟﻚ ھﻲ‪:‬‬

‫>‪<A HREF="index.html">Main Page</A‬‬

‫‪Main Page‬‬

‫وأذﻛﺮك ﺑﺄﻧﻚ ﺗﺴﺘﻄﯿﻊ إدراج ﺻﻮرة ھﻨﺎ أﯾﻀﺎً ﻛﻌﻨﻮان ﻟﻠﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ وذﻟﻚ ﺑﻨﻔﺲ‬
‫اﻟﺘﻔﺎﺻﯿﻞ اﻟﺘﻲ ﺷﺮﺣﺘﮭﺎ ﻓﻲ اﻟﺤﺎﻟﺔ اﻟﺴﺎﺑﻘﺔ‪.‬‬

‫ھﯿﺎ ﻧﺪرج ﺻﻮرة ﻣﺼﻐﺮة ﻛﻌﻨﻮان ﻟﻮﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ ﻟﻠﺼﻮرة اﻷﺻﻠﯿﺔ‪.‬‬

‫"‪<A HREF=" image.jpg"><IMG SRC=" image _1.jpg‬‬

‫>‪BORDER="0"></A‬‬

‫ﻓﻲ ھﺬا اﻟﻤﺜﺎل ﻗﻤﺖ ﺑﺘﺤﺪﯾﺪ اﻟﺼﻮرة اﻟﻤﺼﻐﺮة اﻟﻤﺴﻤﺎه ‪ image _1.jpg‬ﻛﻮﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ‬
‫ﺗﺼﻠﻨﺎ إﻟﻰ اﻟﺼﻮرة اﻷﺻﻠﯿﺔ اﻟﻤﺴﻤﺎه ‪image.jpg‬‬
‫‪76‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻟﻜﻦ إﻧﺘﺒﮫ إذا ﻛﺎن اﻟﻤﻠﻒ اﻟﻤﻄﻠﻮب واﻟﺬي ﺗﺮﯾﺪ اﻹﺷﺎرة إﻟﯿﮫ ﻣﻮﺟﻮداً ﻓﻲ ﻣﺠﻠﺪ ﻣﺨﺘﻠﻒ ﻋﻦ‬
‫اﻟﻤﺠﻠﺪ اﻟﺬي ﯾﻮﺟﺪ ﺑﮫ اﻟﻤﻠﻒ اﻟﺤﺎﻟﻲ‪ ،‬ﻓﯿﺠﺐ ﻋﻠﯿﻚ ﺗﺤﺪﯾﺪ اﻟﻤﺴﺎر اﻟﻜﺎﻣﻞ ﻟﮭﺬا اﻟﻤﻠﻒ وذﻟﻚ‬
‫ﺑﻨﻔﺲ اﻟﻄﺮﯾﻘﺔ اﻟﺘﻲ ﻧﺎﻗﺸﻨﺎھﺎ ﻓﻲ اﻟﺪرس اﻟﺴﺎﺑﻖ ﻋﻨﺪﻣﺎ ﻗﻤﻨﺎ ﯾﺈدراج اﻟﺼﻮر‪.‬‬

‫اﻟﺤﺎﻟﺔ اﻟﺜﺎﻟﺜﺔ ھﻲ أن ﻧﻘﻮم ﺑﺎﻹﺷﺎرة إﻟﻰ ﻣﻜﺎن آﺧﺮ داﺧﻞ ﻧﻔﺲ اﻟﺼﻔﺤﺔ‪ ،‬إﻟﻰ أوﻟﮭﺎ ﻣﺜﻼً أو‬
‫إﻟﻰ آﺧﺮھﺎ أو أي ﻣﻜﺎن آﺧﺮ ﻧﺮﯾﺪه‪...‬‬

‫ﻃﺒﻌﺎً ﻣﮭﻤﺎ ﺑﻠﻐﺖ درﺟﺔ اﻟﺬﻛﺎء واﻷﻟﻤﻌﯿﺔ اﻟﺘﻲ ﯾﺘﺼﻒ ﺑﮭﺎ اﻟﻜﻤﺒﯿﻮﺗﺮ وﻣﺘﺼﻔﺢ اﻹﻧﺘﺮﻧﺖ‪،‬‬
‫ﻓﮭﻤﺎ ﻻ ﯾﺴﺘﻄﯿﻌﺎن ﻣﻌﺮﻓﺔ ﻣﺎ ﯾﺪور ﺑﻔﻜﺮك وﺑﺎﻟﺘﺎﻟﻲ ﻻ ﯾﺴﺘﻄﯿﻌﺎن ﻣﻌﺮﻓﺔ اﻟﻤﻜﺎن اﻟﻤﻮﺟﻮد‬
‫ﻓﻲ ﻧﻔﺲ اﻟﺼﻔﺤﺔ واﻟﺬي ﺗﺮﯾﺪ ﻧﻘﻞ زاﺋﺮك إﻟﯿﮫ ﻣﻦ ﺧﻼل اﻟﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ‪ .‬ﻟﺬﻟﻚ ﯾﺠﺐ أن‬
‫ﺗﻘﻮم أﻧﺖ ﺑﺘﺤﺪﯾﺪه‪.‬‬

‫واﻟﻤﺒﺪأ ھﻨﺎ ھﻮ أن ﺗﻘﻮم ﺑﺘﻌﺮﯾﻒ أو ﺗﺴﻤﯿﺔ ھﺬا اﻟﻤﻜﺎن ﺑﺈﺳﻢ ﻣﻌﯿﻦ ﺳﻮف ﺗﻘﻮم ﻻﺣﻘﺎ‬
‫ﺑﺎﺳﺘﺨﺪاﻣﮫ ﻓﻲ اﻟﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ‪ .‬وﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ ﯾﺘﺤﺘﻢ ﻋﻠﯿﻚ اﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ اﻟﺜﺎﻧﯿﺔ‬
‫ﻟﻠﻮﺳﻢ >‪ <A‬وھﻲ ‪NAME‬‬
‫‪77‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻟﻨﻘﻢ ﻣﻌﺎً ﺑﺈدراج وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ داﺧﻞ ھﺬه اﻟﺼﻔﺤﺔ ﺗﻘﻮم ﺑﻨﻘﻞ اﻟﺰاﺋﺮ ﻣﻦ ﻣﻜﺎن وﺟﻮد ھﺬه‬
‫اﻟﻮﺻﻠﺔ إﻟﻰ اﻟﻔﻘﺮة اﻟﺜﺎﻟﺜﺔ ﻣﻦ ھﺬه اﻟﺼﻔﺤﺔ واﻟﺘﻲ ﺑﺪأﻧﺎ ﻓﯿﮭﺎ اﻟﺤﺪﯾﺚ ﻋﻦ اﻟﻮﺻﻼت‬
‫اﻟﺘﺸﻌﺒﯿﺔ ‪Links‬‬

‫أول ﻣﺎ ﯾﺠﺐ ﻓﻌﻠﮫ ھﻮ اﻟﺬھﺎب إﻟﻰ ھﺬه اﻟﻔﻘﺮة واﺧﺘﯿﺎر أول ﻛﻠﻤﺔ ﻓﯿﮭﺎ ﺛﻢ وﺿﻌﮭﺎ داﺧﻞ‬
‫اﻟﻮﺳﻮم >‪</A> ... <A‬‬

‫>‪<A>LINKS</A‬‬

‫واﻵن ﺣﺎن اﻟﻮﻗﺖ ﻻﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ ‪ NAME‬ﻓﺎﻟﺨﻄﻮة اﻟﺜﺎﻧﯿﺔ ھﻲ ﺗﻌﺮﯾﻒ ھﺬه اﻟﻜﻠﻤﺔ‬
‫ﺑﺄي اﺳﻢ ﻧﺮﯾﺪه )اﻟﻤﮭﻢ أن ﻧﺒﻘﻰ ﻣﺘﺬﻛﺮﯾﻦ ﻟﮫ(‪ .‬ﺳﻮف أﻗﻮم ﺑﺈﻋﻄﺎء اﻻﺳﻢ ‪attrib1‬‬

‫>‪<A NAME="attrib1">LINKS</A‬‬

‫ﻟﻘﺪ أﺻﺒﺤﺖ ھﺬه اﻟﻔﻘﺮة ﺟﺎھﺰة ﻟﻜﻲ ﻧﻘﻮم ﺑﺈدراج وﺻﻼت ﺗﺸﻌﺒﯿﺔ إﻟﯿﮭﺎ ﻣﻦ أي ﻣﻜﺎن ﻓﻲ‬
‫ھﺬا اﻟﻤﻠﻒ‪ ،‬ﺑﻞ وﻣﻦ أي ﻣﻠﻒ آﺧﺮ ‪ ...‬وأﻛﺜﺮ ﻣﻦ ذﻟﻚ أﻧﮫ إذا أراد أﺣﺪ ﻣﺎ ﻓﻲ أﺣﺪ اﻟﻤﻮاﻗﻊ‬
‫اﻷﺧﺮى أن ﯾﻀﻊ وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ ﻟﮭﺎ ﻣﻦ ﻣﻮﻗﻌﮫ ﻓﺈن ﺑﺎﺳﺘﻄﺎﻋﺘﮫ ذﻟﻚ ﺷﺮط أن ﯾﻌﺮف اﻹﺳﻢ‬
‫اﻟﺬي ﻋﺮّﻓﻨﺎھﺎ ﺑﮫ وھﺬا ﻟﯿﺲ ﺻﻌﺒﺎً ﺑﺎﻟﻄﺒﻊ‪.‬‬

‫اﻟﺨﻄﻮة اﻟﺜﺎﻟﺜﺔ ھﻲ إدراج اﻟﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ ﻟﮭﺬه اﻟﻔﻘﺮة‪.‬‬

‫وﯾﻠﺰﻣﻨﺎ ھﻨﺎ ﻣﻌﺮﻓﺔ اﺳﻢ اﻟﻤﻠﻒ اﻟﺬي ﺗﻮﺟﺪ ﺑﮫ ھﺬه اﻟﻔﻘﺮة )أي ھﺬا اﻟﻤﻠﻒ اﻟﺬي ﻧﻌﻤﻞ ﺑﮫ(‬
‫واﺳﻤﮫ ‪ htutor06.html‬ﻷﻧﮫ ﺳﯿﺸﻜﻞ اﻟﻤﺪﺧﻞ اﻷﺳﺎﺳﻲ ﻟﻠﻮﺻﻮل إﻟﻰ اﻟﻔﻘﺮة اﻟﻤﺤﺪدة‪.‬‬
‫وﺗﻜﻮن ﺷﯿﻔﺮة اﻟﻮﺻﻮل إﻟﻰ ھﺬه اﻟﻔﻘﺮة ھﻲ ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬

‫>‪<A HREF="htutor06.html#attrib1">3rd Paragraph</A‬‬

‫‪78‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫‪3rd Paragraph‬‬

‫ﻻﺣﻆ أﻧﻨﺎ ﻟﻢ ﻧﻜﺘﻒ ﺑﺬﻛﺮ اﺳﻢ اﻟﻔﻘﺮة ﻟﻮﺣﺪھﺎ ﺑﻞ ﯾﺠﺐ أن ﺗﻘﺮن ﺑﺎﺳﻢ اﻟﻤﻠﻒ اﻷب اﻟﺬي‬
‫ﯾﺘﻀﻤﻨﮭﺎ ﻣﻦ ﺧﻼل إﺷﺎرة ‪#‬‬

‫أﻣﺎ اﻟﺤﺎﻟﺔ اﻷﺧﯿﺮة واﻟﺘﻲ ﻧﻘﻮم ﻓﯿﮭﺎ ﺑﺈدراج وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ ﻟﻌﻨﻮان ﺑﺮﯾﺪ إﻟﻜﺘﺮوﻧﻲ‪ ،‬ﯾﺆدي‬
‫اﻟﻨﻘﺮ ﻋﻠﯿﮭﺎ إﻟﻰ إﻃﻼق ﺑﺮﻧﺎﻣﺞ اﻟﺒﺮﯾﺪ اﻹﻟﻜﺘﺮوﻧﻲ ﻟﻠﺰاﺋﺮ ﺑﺸﻜﻞ ﺗﻠﻘﺎﺋﻲ‪.‬‬

‫ﻓﺎﻹﺧﺘﻼف اﻟﻮﺣﯿﺪ اﻟﺬي ﯾﻄﺮأ ھﻨﺎ ھﻮ ﻛﺘﺎﺑﺔ ﻛﻠﻤﺔ ‪ DINARO‬ﺑﻌﺪ ﺧﺎﺻﯿﺔ ‪ HREF‬ﻟﻜﻲ‬
‫ﺗﺪل ﻋﻠﻰ أن اﻟﻌﻨﻮان اﻟﺬي ﯾﻠﻲ ھﻮ ﻋﻨﻮان ‪ GMAIL‬وﻟﯿﺲ أي ﻋﻨﻮان آﺧﺮ‬

‫>"‪<A HREF="DINARO:DINARO2AYOUB@GMAIL.COM‬‬
‫>‪GMAIL</A‬‬

‫‪GMAIL‬‬

‫أﻟﯿﺲ ھﺬا‬
‫ﻣﻤﺘﻌﺎ‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫‪79‬‬
 www.dinaro.com/vb3

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHH
80
 ‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﺴﺎﺑﻊ‬

‫‪1‬‬

‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺴﺎﺑﻊ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬

‫ھﺬا اﻟﺪرس ﺳﯿﻜﻮن اﻷول ﻣﻦ درﺳﯿﻦ ﺣﻮل اﻟﺠﺪاول‪ .‬وﻗﺪ ﻓﻀﻠﺖ ﺗﺠﺰﺋﺘﮭﺎ إﻟﻰ ﻗﺴﻤﯿﻦ‬
‫وذﻟﻚ ﻷھﻤﯿﺔ ھﺬا اﻟﻤﻮﺿﻮع وﺗﻌﺪد ﺧﺼﺎﺋﺺ اﻟﺠﺪاول واﺣﺘﻤﺎﻻت اﺳﺘﺨﺪاﻣﮭﺎ ﻓﻲ ﺻﻔﺤﺎت‬
‫اﻟﻮﯾﺐ‪.‬‬

‫ﺗﻌﺪ اﻟﺠﺪاول ﻣﻦ أﻗﻮى اﻷدوات اﻟﺘﻲ ﺗﺘﻀﻤﻨﮭﺎ ﻟﻐﺔ ‪ HTML‬وأﻛﺎد أﺟﺰم ﺑﺄﻧﮫ ﻻ ﯾﻮﺟﺪ‬
‫ﻣﻮﻗﻊ ﻓﻲ اﻹﻧﺘﺮﻧﺖ إﻻ وﯾﺴﺘﺨﺪﻣﮭﺎ ﺑﺼﻮرة أو ﺑﺄﺧﺮى‪ .‬واﻟﺤﻘﯿﻘﺔ أن وﺿﻊ اﻟﺠﺪاول ﻓﻲ‬
‫ﺻﻔﺤﺎت اﻟﻮﯾﺐ ﻻ ﯾﻘﺘﺼﺮ ﻋﻠﻰ ﺗﻠﻚ اﻟﻘﻮاﺋﻢ ﻣﻦ اﻟﺒﯿﺎﻧﺎت اﻟﺘﻲ ﻧﺤﺘﺎج ﻟﺘﺮﺗﯿﺒﮭﺎ ﻓﻲ ﺻﻔﻮف‬
‫وأﻋﻤﺪة‪ ،‬ﺑﻞ ﯾﺘﻌﺪى ذﻟﻚ إﻟﻰ اﺳﺘﺨﺪاﻣﮭﺎ ﻓﻲ ﺗﺼﻤﯿﻢ اﻟﺼﻔﺤﺎت ﻧﻔﺴﮭﺎ وﺗﻨﻈﯿﻤﮭﺎ‪ ،‬واﻟﺘﺤﻜﻢ‬
‫ﺑﻤﻈﮭﺮھﺎ ﺑﺼﻮرة ﻗﻮﯾﺔ وﻓﻌﺎﻟﺔ ﻻ ﯾﻤﻜﻦ أداؤھﺎ ﻣﮭﻤﺎ اﺳﺘﺨﺪﻣﻨﺎ ﻣﻦ وﺳﻮم ﺧﺎﺻﺔ ﺑﺘﻨﺴﯿﻖ‬
‫اﻟﺼﻔﺤﺎت‪.‬‬

‫إن اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﺠﺪاول وإدراﺟﮭﺎ ﻓﻲ ﺻﻔﺤﺎت اﻟﻮﯾﺐ ﺳﮭﻞ ﺟﺪاً ﻣﺜﻠﮫ ﻣﺜﻞ أي أداة ﻣﻦ‬
‫أدوات ‪ HTML‬ﻟﻜﻨﮫ ﻗﺪ ﯾﺒﺪو ﻟﻚ ﻣﺮﺑﻜﺎً ﺑﻌﺾ اﻟﺸﻲء وﺧﺎﺻﺔ ﻓﻲ اﻟﺒﺪاﯾﺔ‪ ،‬وذﻟﻚ ﻟﺘﻌﺪد‬
‫اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﺗﺴﺘﻌﻤﻞ ﻣﻌﮭﺎ وﺗﻌﺪد اﻷوﺟﮫ اﻟﺘﻲ ﻧﺴﺘﻄﯿﻊ اﻟﺘﺼﺮف ﺑﮭﺎ‪ .‬ﻟﻜﻦ ﻻ ﺗﻘﻠﻖ ﻓﻜﻞ‬
‫ﺷﻲء ﯾﺒﺪو ﺻﻌﺒﺎً ﻓﻲ ﺑﺪاﯾﺘﮫ وﻟﻜﻦ ﺳﺮﻋﺎن ﻣﺎ ﯾﺼﺒﺢ ﺳﮭﻼً‪.‬‬

‫‪81‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ھﻞ أﻧﺖ ﻣﺴﺘﻌﺪ ﯾﺎ ﻋﺰﯾﺰي اﻟﻤﺘﺪرب؟ إذن ھﯿّﺎ ﺑﻨﺎ…‬

‫ﺑﺪاﯾﺔ‪ ،‬إﻟﯿﻚ ھﺬا اﻟﻮﺻﻒ اﻟﺒﺴﯿﻂ ﻟﻠﻮﺳﻮم اﻷﺳﺎﺳﯿﺔ اﻟﺨﺎﺻﺔ ﺑﺎﻟﺠﺪاول‬

‫واﻵن ﻟﻨﺘﻜﻠﻢ ﺑﺼﻮرة أﻛﺜﺮ دﻗﺔ وﺗﻔﺼﯿﻼً‪:‬‬

‫ھﺬه ھﻲ اﻟﻮﺳﻮم اﻟﺘﻲ ﻧﺒﺪأ ﺑﮭﺎ ﻹدراج ﺟﺪول ﻣﻜﻮن ﻣﻦ ﺧﻠﯿﺔ واﺣﺪة أو ﻣﻦ ﻣﻠﯿﻮن‬
‫ﺧﻠﯿﺔ… اﻷﻣﺮ ﺳﯿﺎن‬

‫>‪</TABLE> ... <TABLE‬‬

‫واﻵن ﺑﻌﺪ إدراج ھﺬﯾﻦ اﻟﻮﺳﻤﯿﻦ‪ ،‬ھﻨﺎك ﺳﺆاﻟﯿﻦ ﯾﻨﺒﻐﻲ اﻹﺟﺎﺑﺔ ﻋﻠﯿﮭﻤﺎ‪ .‬اﻷول‪ :‬ﻛﻢ ﻋﺪد‬
‫اﻟﺼﻔﻮف اﻟﺘﻲ ﻧﺮﯾﺪھﺎ ﻓﻲ اﻟﺠﺪول؟ ﺛﻼﺛﺔ‪ ،‬أرﺑﻌﺔ‪ ،‬ﻣﺎﺋﺔ؟ ﻻ ﺑﺄس‪ ،‬ﻗﻢ ﺑﺈﺿﺎﻓﺔ اﻟﻮﺳﻮم‬

‫>‪</TR> ... <TR‬‬

‫ﺑﻨﻔﺲ ﻋﺪد اﻟﺼﻔﻮف اﻟﺘﻲ ﺗﺮﯾﺪھﺎ‪ .‬وﻟﻨﻔﺘﺮض ھﻨﺎ أﻧﮭﺎ ﺛﻼﺛﺔ‪.‬‬

‫‪82‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>‪<TABLE‬‬
‫>‪<TR‬‬
‫>‪</TR‬‬

‫>‪<TR‬‬
‫>‪</TR‬‬

‫>‪<TR‬‬
‫>‪</TR‬‬
‫>‪</TABLE‬‬

‫واﻟﺴﺆال اﻟﺜﺎﻧﻲ ھﻮ‪ ،‬ﻛﻢ ﻋﺪد اﻟﺨﻼﯾﺎ )أو اﻷﻋﻤﺪة( اﻟﺘﻲ ﻧﺮﯾﺪھﺎ ﻓﻲ ﻛﻞ ﺻﻒ؟‬

‫>‪</TD> ... <TD‬‬

‫ﺑﻨﻔﺲ ﻋﺪد اﻟﺨﻼﯾﺎ اﻟﻤﻄﻠﻮب‪ .‬وﻣﻦ اﻟﺒﺪﯾﮭﻲ أن ﻧﻜﺘﺒﮭﺎ ﺑﯿﻦ اﻟﻮﺳﻮم >‪</TR> ... <TR‬‬
‫ﻃﺎﻟﻤﺎ أن اﻟﺨﻼﯾﺎ ھﻲ ﺟﺰء ﻣﻦ اﻟﺼﻔﻮف‪ .‬وھﻨﺎ ﺳﺄﻓﺘﺮض أﻧﻨﺎ ﻧﺮﯾﺪ ﺧﻠﯿﺘﯿﻦ ﻓﻲ ﻛﻞ ﺻﻒ‪،‬‬
‫وﺑﺬﻟﻚ ﯾﺠﺐ ﺗﻜﺮار ﻛﺘﺎﺑﺘﮭﺎ ﻣﺮﺗﯿﻦ ﻟﻜﻞ ﺻﻒ‪.‬‬

‫وأذﻛﺮك أن اﻟﻨﺺ اﻟﺬي ﻧﺮﯾﺪ إدراﺟﮫ ﻓﻲ اﻟﺨﻠﯿﺔ ﯾﻜﺘﺐ ﺿﻤﻦ ھﺬﯾﻦ اﻟﻮﺳﻤﯿﻦ‬

‫>‪<TABLE‬‬
‫>‪<TR‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬

‫‪83‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>‪</TR‬‬

‫>‪<TR‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬

‫>‪<TR‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬
‫>‪</TABLE‬‬

‫ھﻞ اﺗﻀﺤﺖ ﻟﻚ اﻟﺼﻮرة اﻵن‪ .‬أﻧﻈﺮ إﻟﻰ ﻧﺘﯿﺠﺔ اﻟﻌﻤﻞ اﻟﺘﻲ ﺣﺼﻠﻨﺎ ﻋﻠﯿﮭﺎ‪.‬‬

‫ھﻨﺎك ﺷﻲء ﻣﺎ ﯾﻨﻘﺺ‪ .‬ﺑﺎﻟﻄﺒﻊ ‪ ...‬اﻟﺤﺪود‪ .‬اﻧﺘﻈﺮ ﻗﻠﯿﻼً وﺳﺘﻌﺮف اﻟﺨﺎﺻﯿﺔ اﻟﺘﻲ ﺗﻘﻮم‬
‫ﺑﺈﺿﺎﻓﺔ اﻟﺤﺪود ﻟﻠﺠﺪول وﻏﯿﺮھﺎ ﻣﻦ اﻟﺨﺼﺎﺋﺺ اﻷﺧﺮى‪ .‬ﻷﻧﻨﻲ ﻗﺒﻞ أن أﺳﺘﻤﺮ أود أن‬
‫أﻟﻔﺖ ﻧﻈﺮك ﻟﻤﺴﺄﻟﺔ ﻣﻌﯿﻨﺔ ﻓﻲ اﻟﺠﺪاول‪ .‬وھﻲ أن ﻃﺮﯾﻘﺔ اﻟﺘﻌﺎﻣﻞ ﻣﻌﮭﺎ ﺗﺘﻢ ﻋﻠﻰ ﺛﻼﺛﺔ‬
‫ﻣﺴﺘﻮﯾﺎت‪:‬‬

‫ﻣﺴﺘﻮى اﻟﺠﺪول ﻛﻜﻞ‬ ‫•‬

‫ﻣﺴﺘﻮى اﻟﺼﻔﻮف ﻛﻜﻞ أو ﻛﻞ واﺣﺪ ﻋﻠﻰ ﺣﺪه‬ ‫•‬

‫ﻣﺴﺘﻮى اﻟﺨﻼﯾﺎ ﻛﻜﻞ أو ﻛﻞ واﺣﺪة ﻋﻠﻰ ﺣﺪه‬ ‫•‬

‫‪84‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫وﻟﻜﻞ ﻣﻦ ھﺬه اﻟﻤﺴﺘﻮﯾﺎت ﺧﺼﺎﺋﺼﮫ اﻟﺘﻲ ﯾﻨﻔﺮد ﺑﮭﺎ ﻛﻤﺎ أن ھﻨﺎك ﺧﺼﺎﺋﺺ ﻣﺸﺘﺮﻛﺔ‬
‫ﺗﺴﺘﺨﺪم ﻣﻊ ﻛﻞ اﻟﻮﺳﻮم‪.‬‬

‫ﻧﺒﺪأ ﺑﻤﻨﺎﻗﺸﺔ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻣﻊ اﻟﻮﺳﻮم >‪</TABLE> ... <TABLE‬‬

‫وﺳﺄﻗﻮم أوﻻً ﺑﺴﺮدھﺎ ﻟﻚ‪ ،‬وﻣﻦ ﺛﻢ إدراج ﺑﻌﺾ اﻷﻣﺜﻠﺔ اﻟﺘﻲ ﺗﻮﺿﺤﮭﺎ‪.‬‬

‫‪85‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ھﺬه ھﻲ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﻌﻤﻠﺔ ﻣﻊ اﻟﺠﺪول‪ .‬وﺳﺄﻗﻮم اﻵن ﺑﺘﻄﺒﯿﻘﮭﺎ ﻋﻠﻰ اﻟﻤﺜﺎل اﻟﻮارد ﻓﻲ‬
‫ﺑﺪاﯾﺔ ھﺬا اﻟﺪرس وﺳﺄﻛﺘﻔﻲ ﺑﻜﺘﺎﺑﺔ وﺳﻢ اﻟﺒﺪاﯾﺔ أﻣﺎ ﺑﺎﻗﻲ اﻟﻮﺳﻮم ﻓﮭﻲ ﻧﻔﺴﮭﺎ‪:‬‬

‫>"‪<TABLE BORDER="5‬‬

‫>"‪<TABLE BORDER="5" CELLPADDING="5‬‬

‫‪86‬‬
 www.dinaro.com/vb3

<TABLE BORDER="5" CELLPADDING="5"

CELLSPACING="10">

<TABLE BORDER="5" CELLPADDING="5"

CELLSPACING="10"
BGCOLOR="#FFFF00">

87
 www.dinaro.com/vb3

<TABLE BORDER="5" CELLPADDING="5"

CELLSPACING="10"
BGCOLOR="#FFFF00" HEIGHT="300">

<TABLE BORDER="5" CELLPADDING="5"

CELLSPACING="10"
BGCOLOR="#FFFF00" HEIGHT="300" WIDTH="75%">

88
 ‫‪www.dinaro.com/vb3‬‬

‫وﻧﺘﻜﻠﻢ اﻵن ﻋﻦ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ وﺳﻮم اﻟﺼﻒ >‪ </TR> ... <TR‬وﻻ ﺑﺄس‬
‫ﻣﻦ ﺗﺬﻛﯿﺮك أن ﻋﺪد اﻟﺼﻔﻮف ﻓﻲ اﻟﺠﺪول ﯾﺘﺤﺪد ﺑﻌﺪد ھﺬه اﻟﻮﺳﻮم‪ .‬أﻣﺎ أھﻢ اﻟﺨﺼﺎﺋﺺ‬
‫اﻟﺘﻲ ﺗﻀﺎف ﻟﮭﺬا اﻟﻮﺳﻢ ﻓﮭﻲ‪:‬‬

‫وﻧﻌﻮد اﻵن إﻟﻰ ﺟﺪوﻟﻨﺎ اﻟﺴﺎﺑﻖ ﻟﻨﻄﺒﻖ ﻋﻠﯿﮫ ھﺬه اﻟﺨﺼﺎﺋﺺ ﻣﻦ ﺧﻼل اﻷﻣﺜﻠﺔ اﻟﺘﺎﻟﯿﺔ‪:‬‬

‫>"‪<TABLE BORDER="5" HEIGHT="300‬‬

‫>"‪<TR ALIGN="Left‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬

‫>"‪<TR ALIGN="Right‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬

‫>"‪<TR ALIGN="Center‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬
‫>‪</TABLE‬‬
‫‪89‬‬
 www.dinaro.com/vb3

<TABLE BORDER="5" HEIGHT="300">

<TR VALIGN="Top">
<TD> Data </TD>
<TD> Data </TD>
</TR>

<TR VALIGN="Bottom">
<TD> Data </TD>
<TD> Data </TD>
</TR>

<TR VALIGN="Baseline">
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>

90
 ‫‪www.dinaro.com/vb3‬‬

‫"‪<TABLE BORDER="5" HEIGHT="300‬‬

‫>"‪BGCOLOR="#FFFFFF‬‬
‫>"‪<TR BGCOLOR="#808080‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬

‫>"‪<TR BGCOLOR="#C0C0C0‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬

‫>‪<TR‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬
‫>‪</TABLE‬‬

‫واﻵن ﻣﺎذا ﺑﻘﻲ ﻟﺪﯾﻨﺎ؟ ﺑﺎﻟﻄﺒﻊ ﺑﻘﯿﺖ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺎﻟﺨﻼﯾﺎ‪ .‬وﺳﻮف أﺗﺎﺑﻊ اﻟﺤﺪﯾﺚ ﻋﻨﮭﺎ‬
‫ﻓﻲ اﻟﺪرس اﻟﻘﺎدم إن ﺷﺎء اﷲ‪ .‬أراك ﻓﻲ اﻟﺪرس اﻟﺘﺎﻟﻲ ﻟﻨﺘﺎﺑﻊ اﻟﺤﺪﯾﺚ ﻋﻦ ﻣﻮﺿﻮع‬
‫اﻟﺠﺪاول‪.‬‬
‫‪91‬‬
 www.dinaro.com/vb3

‫أﻟﯿﺲ ھﺬا‬
‫ﻣﻤﺘﻌﺎ‬
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHH
92
 ‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻣﻦ‬

‫‪2‬‬

‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺜﺎﻣﻦ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬

‫ﻧﺘﺎﺑﻊ ﻣﻌﺎً ﻓﻲ ھﺬا اﻟﺪرس اﻟﺤﺪﯾﺚ ﻋﻦ اﻟﺠﺪاول‪ .‬وأﻧﺎ أﻓﺘﺮض أﻧﻚ ﻗﺪ أﻧﮭﯿﺖ اﻟﺪرس اﻟﺴﺎﺑﻖ‬
‫ﺑﻨﺠﺎح‪ ،‬وأن ﻟﺪﯾﻚ اﻵن ﻓﻜﺮة ﺟﯿﺪة ﺟﺪاً ﻋﻦ اﻟﺠﺪاول وﻛﯿﻔﯿﺔ إﻧﺸﺎﺋﮭﺎ واﻟﺘﻌﺎﻣﻞ ﻣﻊ‬
‫ﺧﺼﺎﺋﺼﮭﺎ وﻣﻊ اﻟﺼﻔﻮف وﺧﺼﺎﺋﺼﮭﺎ‪ .‬وﻧﻜﻤﻞ اﻵن ﻣﻦ ﺣﯿﺚ ﺗﻮﻗﻔﻨﺎ‪ ،‬أي ﻣﻊ ﺧﺼﺎﺋﺺ‬
‫اﻟﺨﻼﯾﺎ‪.‬‬

‫ھﻞ ﺗﺬﻛﺮ ﻣﺎ ﻗﻠﻨﺎه ﻋﻦ ﻋﺪد اﻟﺨﻼﯾﺎ ﻓﻲ اﻟﺼﻒ اﻟﻮاﺣﺪ؟ إن ﻋﺪد اﻟﺨﻼﯾﺎ اﻟﻤﻄﻠﻮب ﯾﺘﺤﺪد ﻣﻦ‬
‫ﺧﻼل ﻛﺘﺎﺑﺔ اﻟﻮﺳﻮم >‪ </TD> ... <TD‬ﻣﺮات ﺑﻨﻔﺲ اﻟﻌﺪد اﻟﻤﻄﻠﻮب‪ .‬وﻣﻦ اﻟﻤﻤﻜﻦ أن‬
‫ﺗﺤﺘﻮي اﻟﺨﻠﯿﺔ ﻋﻠﻰ أي ﻋﻨﺼﺮ ﻣﻦ ﻋﻨﺎﺻﺮ ﻟﻐﺔ ‪ : HTML‬ﻧﺼﻮص‪ ،‬رﺳﻮم‪ ،‬ﻗﻮاﺋﻢ‪،‬‬
‫وﺻﻼت ﺗﺸﻌﺒﯿﺔ‪ ،‬ﺑﻞ وﺣﺘﻰ ﺟﺪاول‪) .‬ﻧﻌﻢ‪ ،‬ﺗﺴﺘﻄﯿﻊ إدراج ﺟﺪول داﺧﻞ ﺟﺪول آﺧﺮ(‬

‫ﻟﻨﺴﺘﺮﺟﻊ ﻣﻌﺎ اﻟﻤﺜﺎل اﻟﺬي ﻗﻤﻨﺎ ﺑﺎﻟﺘﺪرب ﻋﻠﯿﮫ ﻓﻲ اﻟﺪرس اﻟﺴﺎﺑﻖ‪ ،‬ﻓﺴﻮف ﻧﻜﻤﻞ ھﺬا‬
‫اﻟﺪرس ﻣﻌﮫ‪ .‬وھﻮ ﺟﺪول ﺻﻐﯿﺮ ﻣﻜﻮن ﻣﻦ ﺛﻼﺛﺔ ﺻﻔﻮف وﻋﻤﻮدﯾﻦ )أي ﺧﻠﯿﺘﯿﻦ ﻓﻲ ﻛﻞ‬
‫ﺻﻒ(‪.‬‬

‫‪93‬‬
 www.dinaro.com/vb3

<TABLE>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>

<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>

<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>

:‫ ﻓﮭﺬا ﺟﺪول ﺑﮭﺎ‬،‫أﻣﺎ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ اﻟﺨﻼﯾﺎ‬

94
www.dinaro.com/vb3

95
 ‫‪www.dinaro.com/vb3‬‬

‫وﻗﺒﻞ أن ﻧﺴﺘﻤﺮ‪ ،‬ﯾﺒﺪو ﻟﻲ أن ھﻨﺎك ﺑﻌﺾ اﻟﻤﻼﺣﻈﺎت اﻟﻤﮭﻤﺔ اﻟﺘﻲ ﯾﻨﺒﻐﻲ ذﻛﺮھﺎ‪:‬‬

‫ﻛﻤﺎ ﺗﻼﺣﻆ ھﻨﺎك ﺧﺼﺎﺋﺺ ﺗﺘﻜﺮر ﻣﻊ ﺟﻤﯿﻊ اﻟﻮﺳﻮم‪ .‬ﺧﺬ ﻣﺜﻼً اﻟﺨﺎﺻﯿﺔ ‪.BGCOLOR‬‬
‫ﻛﯿﻒ ﯾﺘﻢ اﻟﺘﻌﺎﻣﻞ ﻣﻌﮭﺎ إذا ﻛﺮرت ﻣﻊ ﺟﻤﯿﻊ اﻟﻮﺳﻮم؟ ﺑﻜﻞ ﺑﺴﺎﻃﺔ ﯾﺘﻢ ﺗﻄﺒﯿﻖ اﻟﻠﻮن اﻟﻤﺤﺪد‬
‫ﻣﻊ وﺳﻢ اﻟﺨﻠﯿﺔ‪ ،‬ﻓﺈذا ﻟﻢ ﯾﻜﻦ ﻣﺤﺪداً ﯾﻄﺒﻖ اﻟﻠﻮن اﻟﻤﺤﺪد ﻣﻊ وﺳﻢ اﻟﺼﻒ‪ ،‬ﻓﺈذا ﻟﻢ ﯾﻮﺟﺪ‬
‫ﯾﻄﺒﻖ اﻟﻠﻮن اﻟﻤﺤﺪد ﻣﻊ وﺳﻢ اﻟﺠﺪول‪ .‬وإذا ﻟﻢ ﯾﻜﻦ ھﺬا ﻣﺤﺪداً ﺑﺪوره ﯾﺘﻢ إﻋﺘﻤﺎد ﻟﻮن‬
‫ﺧﻠﻔﯿﺔ اﻟﺼﻔﺤﺔ اﻟﻤﺤﺪد ﻓﻲ اﻟﻮﺳﻢ >‪.<BODY‬‬

‫اﻟﻤﻼﺣﻈﺔ اﻟﺜﺎﻧﯿﺔ ﺗﺘﻌﻠﻖ ﺑﺎﻟﺨﺼﺎﺋﺺ ‪ .HEIGHT ،WIDTH‬ﯾﺨﺘﻠﻒ أﺳﻠﻮب اﻟﺘﻌﺎﻣﻞ‬

‫ﻣﻊ ھﺬه اﻟﺨﺼﺎﺋﺺ ﻣﻦ ﻣﺘﺼﻔﺢ ﻵﺧﺮ‪ ،‬ﺑﻞ وﺗﺨﺘﻠﻒ أﯾﻀﺎً ﻃﺮﯾﻘﺔ ﺗﻔﺴﯿﺮ اﻟﻘﯿﻢ اﻟﻤﺤﺪدة‬
‫ﻣﻌﮭﺎ وﺧﺼﻮﺻﺎً ﻓﯿﻤﺎ ﯾﺘﻌﻠﻖ ﺑﺎﻟﻨﺴﺐ اﻟﻤﺌﻮﯾﺔ‪) .‬راﺟﻊ اﻟﻤﻮﺿﻮع‪ :‬اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ‬
‫واﻟﻤﺘﺼﻔﺤﺎت (‪.‬‬

‫وﺑﺪون اﻟﺨﻮض ﻓﻲ ﺗﻔﺎﺻﯿﻞ ھﺬه اﻹﺧﺘﻼﻓﺎت اﻟﺘﻲ ﻟﻦ ﺗﺆدي إﻻ إﻟﻰ اﻟﻤﺰﯾﺪ ﻣﻦ اﻹﺷﻜﺎﻻت‬
‫ﻟﺪﯾﻚ‪ ...‬وﺑﻌﺪ اﻟﺘﺠﺮﺑﺔ ﯾﺒﺪو أن أﻓﻀﻞ ﻃﺮﯾﻘﺔ ﻟﻠﺘﻌﺎﻣﻞ ﻣﻊ ھﺬه اﻟﺨﺼﺎﺋﺺ ھﻲ ﻗﯿﺎﻣﻚ ﺑﺘﺤﺪﯾﺪ‬
‫اﻟﻌﺮض )وﻛﺬﻟﻚ اﻹرﺗﻔﺎع إذا أردت ذﻟﻚ( ﻟﻠﺠﺪول ﻛﻜﻞ ﻣﻦ ﺧﻼل اﻟﻮﺳﻢ >‪ .<TABLE‬ﺛﻢ‬
‫اﺳﺘﺨﺪام ھﺬه اﻟﺨﺼﺎﺋﺺ ﻓﻲ وﺳﻮم اﻟﺨﻼﯾﺎ وﺗﺤﺪﯾﺪ اﻟﻌﺮض اﻟﻤﻄﻠﻮب ﻟﻜﻞ ﺧﻠﯿﺔ ﻋﻠﻰ ﺣﺪه‬
‫ﻓﻲ اﻟﺼﻒ اﻷول‪ ،‬واﻻرﺗﻔﺎع اﻟﻤﻄﻠﻮب ﻟﻜﻞ ﺻﻒ ﻓﻲ اﻟﺠﺪول‪.‬‬

‫وھﺬه ﺑﺮأﯾﻲ أﻓﻀﻞ ﻃﺮﯾﻘﺔ ﺗﻀﻤﻦ ﺑﮭﺎ أﻓﻀﻞ ﻣﺸﺎھﺪة ﻟﻠﺠﺪول ﻟﺠﻤﯿﻊ زوار ﻣﻮﻗﻌﻚ‪.‬‬

‫إذا أردت أن ﺗﺤﺘﻮي ﺑﻌﺾ اﻟﺼﻔﻮف ﻓﻲ اﻟﺠﺪول ﻋﻠﻰ ﻋﺪد ﻣﻦ اﻟﺨﻼﯾﺎ أﻗﻞ ﻣﻦ ﺑﺎﻗﻲ‬
‫اﻟﺼﻔﻮف‪ ،‬ﻓﻼ ﯾﻜﻔﻲ أن ﺗﻘﻮم ﺑﺤﺬف وﺳﻮم اﻟﺨﻼﯾﺎ ﻣﻨﮭﺎ‪) .‬ﻛﻤﺎ ﺗﺮى ﻓﻲ اﻟﺸﯿﻔﺮة اﻟﺘﺎﻟﯿﺔ‪(:‬‬

‫‪96‬‬
 www.dinaro.com/vb3

<TABLE BORDER="5">
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>

<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>

<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>

:‫ﻷن ھﺬا ﻣﺎ ﺳﺘﺤﺼﻞ ﻋﻠﯿﮫ‬

Data
Data Data
Data

97
 ‫‪www.dinaro.com/vb3‬‬

‫ﻟﻘﺪ ﺑﻘﻲ ﻣﻜﺎن اﻟﺨﻼﯾﺎ اﻟﻤﺤﺬوﻓﺔ ﻣﺤﺠﻮزاً ﻛﻤﺎ ﻟﻮ أﻧﮭﺎ ﻟﻢ ﺗﺤﺬف‪ .‬أﻣﺎ اﻟﺨﻼﯾﺎ اﻟﺒﺎﻗﯿﺔ ﻓﻈﻠﺖ‬
‫ﻣﺤﺘﻔﻈﺔ ﺑﻨﻔﺲ ﺧﺼﺎﺋﺼﮭﺎ‪ ،‬أي أﻧﻨﺎ ﻟﻢ ﻧﺴﺘﻔﺪ ﻣﻦ ﻋﻤﻠﯿﺔ اﻟﺤﺬف‪.‬‬

‫واﻟﺤﻘﯿﻘﺔ أن اﻟﻄﺮﯾﻘﺔ اﻟﻤﺜﻠﻰ ﻟﺬﻟﻚ ھﻲ أن ﺗﻘﻮم ﺑﺪﻣﺞ اﻟﺨﻼﯾﺎ ﻣﻌﺎً وذﻟﻚ ﺑﺎﺳﺘﺨﺪام‬
‫اﻟﺨﺼﺎﺋﺺ ‪.ROWSPAN ،COLSPAN‬‬

‫إذن ﻟﻨﻘﻢ ﺑﺈﻋﺎدة ﻛﺘﺎﺑﺔ ﺷﯿﻔﺮة اﻟﺠﺪول ﻣﻊ اﺳﺘﺨﺪام ھﺬه اﻟﺨﺼﺎﺋﺺ‪:‬‬

‫>"‪<TABLE BORDER="5‬‬
‫>‪<TR‬‬
‫>‪<TD COLSPAN="2"> Data </TD‬‬
‫>‪</TR‬‬

‫>‪<TR‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬

‫>‪<TR‬‬
‫>‪<TD COLSPAN="2"> Data </TD‬‬
‫>‪</TR‬‬
‫>‪</TABLE‬‬

‫‪98‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻷن ھﺬا ﻣﺎ ﺳﺘﺤﺼﻞ ﻋﻠﯿﮫ‪:‬‬

‫‪Data‬‬
‫‪Data Data‬‬
‫‪Data‬‬

‫ﻻﺣﻆ أن اﻟﻌﺪد ‪ 2‬ھﻮ ﻋﺪد اﻟﺨﻼﯾﺎ اﻟﺘﻲ ﻗﻤﻨﺎ ﺑﺪﻣﺠﮭﺎ‪ .‬وﻻﺣﻆ أﯾﻀﺎً اﻧﻨﻲ ﻟﻢ أﻗﻢ ﺑﺈﻋﺎدة‬
‫وﺳﻮم اﻟﺨﻼﯾﺎ اﻟﻤﺤﺬوﻓﺔ ﻷﻧﻨﺎ أﺻﻼً ﻻ ﻧﺤﺘﺎج ﻟﮭﺎ ﺑﻌﺪ أن ﻗﻤﻨﺎ ﺑﺎﻟﺪﻣﺞ‪.‬‬

‫وﻛﻘﺎﻋﺪة أﺳﺎﺳﯿﺔ‪ :‬ﻛﻞ ﺧﻠﯿﺔ ﯾﺘﻢ دﻣﺠﮭﺎ ﯾﺠﺐ ﺑﺎﻟﻤﻘﺎﺑﻞ ﺣﺬف وﺳﻮم اﻟﺘﻌﺮﯾﻒ اﻟﺨﺎﺻﺔ ﺑﮭﺎ‪.‬‬
‫ﻣﺎ ﻋﺪا ﺗﻌﺮﯾﻒ اﻟﺨﻠﯿﺔ اﻷﺳﺎﺳﯿﺔ ﺑﺎﻟﻄﺒﻊ‪.‬‬

‫ﻣﺜﺎل آﺧﺮ‪ :‬ﻟﻨﻘﻢ ﺑﺪﻣﺞ اﻟﺨﻼﯾﺎ اﻟﻤﻮﺟﻮدة ﻓﻲ اﻟﻌﻤﻮد اﻷول‬

‫>"‪<TABLE BORDER="5‬‬
‫>‪<TR‬‬
‫>‪<TD ROWSPAN="3"> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬

‫>‪<TR‬‬
‫>‪<TD> Data </TD‬‬

‫‪99‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>‪</TR‬‬

‫>‪<TR‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬
‫>‪</TABLE‬‬

‫وﻣﺮة أﺧﺮى ﺑﻌﺪ ﺗﻌﺮﯾﻒ ﺧﺎﺻﯿﺔ اﻟﺪﻣﺞ اﻟﻌﻤﻮدي‪ ،‬ﻗﻤﺖ ﺑﺤﺬف ﺗﻌﺮﯾﻒ اﻟﺨﻼﯾﺎ اﻟﻤﺪﻣﻮﺟﺔ‬
‫ﻣﻦ اﻟﺼﻒ اﻟﺜﺎﻧﻲ واﻟﺜﺎﻟﺚ‪ .‬وھﺬا ھﻮ اﻟﺠﺪول اﻟﻨﺎﺗﺞ‪.‬‬

‫‪Data‬‬
‫‪Data Data‬‬
‫‪Data‬‬

‫ھﻨﺎك ﻧﻮع ﺧﺎص ﻣﻦ اﻟﺨﻼﯾﺎ اﻟﺘﻲ ﯾﺘﻢ ﺗﻌﺮﯾﻔﮭﺎ ﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻮم >‪</TH> ... <TH‬‬
‫وھﻲ اﺧﺘﺼﺎر ‪ Table Header‬أي ﺗﺮوﯾﺴﺔ اﻟﺠﺪول‪.‬‬

‫واﻟﻔﺮق اﻟﻮﺣﯿﺪ ﺑﯿﻨﮭﺎ وﺑﯿﻦ >‪ </TD> ... <TD‬ھﻮ أن اﻟﻨﺺ اﻟﺬي ﺗﺤﺘﻮﯾﮫ ﯾﻈﮭﺮ ﺑﺨﻂ‬
‫أﺳﻮد ﻋﺮﯾﺾ وﻣﺤﺎذاﺗﮫ ﻓﻲ ﻣﻨﺘﺼﻒ اﻟﺨﻠﯿﺔ ﺑﺼﻮرة إﻓﺘﺮاﺿﯿﺔ‪) .‬ﻟﯿﺲ ﺑﺎﻟﺸﻲء اﻟﻤﮭﻢ‪ ،‬ﻛﻤﺎ‬
‫أﻋﺘﻘﺪ(‪ ،‬ﺧﺎﺻﺔ وأن اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻌﮭﺎ ھﻲ ﻧﻔﺲ ﺧﺼﺎﺋﺺ >‪ <TD‬وﺑﻨﻔﺲ‬
‫اﻟﺘﻔﺎﺻﯿﻞ اﻟﺘﻲ ذﻛﺮت‪.‬‬

‫اﻟﻮﺳﻮم اﻷﺧﯿﺮة اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﻲ اﻟﺠﺪاول ھﻲ >‪</CAPTION> ... <CAPTION‬‬

‫وھﻲ ﺗﺨﺘﺺ ﺑﺈﺿﺎﻓﺔ ﻋﻨﻮان رﺋﯿﺴﻲ ﻟﻠﺠﺪول ﻛﻜﻞ‪ .‬ﻟﺬﻟﻚ ﻓﮭﻲ ﻋﻨﺪﻣﺎ ﺗﻜﺘﺐ ﯾﺘﻢ وﺿﻌﮭﺎ‬

‫‪100‬‬
 www.dinaro.com/vb3

‫< وﺑﺼﻮرة ﻣﺴﺘﻘﻠﺔ وﻟﯿﺲ ﺿﻤﻦ وﺳﻮم اﻟﺼﻔﻮف أو‬TABLE> ‫ﻣﺒﺎﺷﺮة ﺑﻌﺪ اﻟﻮﺳﻢ‬
.‫اﻟﺨﻼﯾﺎ‬

<TABLE BORDER="5">
<CAPTION> Table Caption </CAPTION>
<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>

<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>

<TR>
<TD> Data </TD>
<TD> Data </TD>
</TR>
</TABLE>

Table Caption
Data Data
Data Data
Data Data

101
 ‫‪www.dinaro.com/vb3‬‬

‫وأﺧﯿﺮاً‪ ...‬وﺻﻠﻨﺎ إﻟﻰ ﻧﮭﺎﯾﺔ ھﺬه اﻟﺪرس‪ .‬وﻣﺎ ﺑﻘﻲ ﻟﺪي ھﻮ أن أﺣﺜـﻚ ﻋﻠﻰ ﺗﻄﺒﯿﻖ ﻣﺎ ﻗﻤﺖ‬
‫ﺑﺸﺮﺣﮫ ﻓﯿﮫ وﻓﻲ اﻟﺪرس اﻟﺴﺎﺑﻖ وﺑﺎﻗﻲ اﻟﺪروس‪ ،‬وﺗﺠﺮﺑﺔ ﺟﻤﯿﻊ اﻻﺣﺘﻤﺎﻻت اﻟﻮاردة‬
‫ﻟﻠﺨﺼﺎﺋﺺ واﻟﻘﯿﻢ‪.‬‬

‫أﻟﯿﺲ ھﺬا‬
‫ﻣﻤﺘﻌﺎ‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫!!!!!!!!!!!!!!!‬
‫‪HHHHHHHHHHHHHH‬‬
‫‪HHHHHHHHHHHHHH‬‬
‫‪HHHHHHHHHHHHHH‬‬
‫‪HHH‬‬
‫‪102‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﺘﺎﺳﻊ‬

‫‪‬‬

‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺘﺎﺳﻊ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬

‫ﻓﻲ ھﺬا اﻟﺪرس ﺳﻮف ﻧﻘﻮم ﺑﺎﻟﺘﻌﺮف ﻋﻠﻰ اﻹﻃﺎرات ‪ Frames‬وﻃﺮﯾﻘﺔ ﻋﺮض ﺻﻔﺤﺎت‬
‫اﻟﻮﯾﺐ ﺑﺎﺳﺘﺨﺪاﻣﮭﺎ…‬

‫ﻓﮭﻞ ﺗﻌﺮف ﻣﺎ ھﻲ اﻹﻃﺎرات؟ ﺣﺴﻨﺎ‪ ،‬ﺳﺄوﺿﺤﮭﺎ ﻟﻚ… ھﻞ ﺳﺒﻖ ﻟﻚ وأن زرت إﺣﺪى‬
‫اﻟﺼﻔﺤﺎت ﻟﺘﺸﺎھﺪ أﻧﮭﺎ ﻣﻘﺴﻤﺔ إﻟﻰ ﻋﺪة أﻗﺴﺎم ﺑﺤﯿﺚ ﯾﻈﮭﺮ ﻓﻲ ﻛﻞ ﻣﻨﮭﺎ ﺻﻔﺤﺔ ﻣﺴﺘﻘﻠﺔ‪،‬‬
‫وﺗﺒﺪو ﺑﺼﻮرة ﻣﻨﻔﺼﻠﺔ ﻋﻦ اﻷﻗﺴﺎم اﻷﺧﺮى‪ .‬ورﺑﻤﺎ ﺗﻜﻮن ﻗﺪ ﻗﻤﺖ ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ إﺣﺪى‬
‫اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ اﻟﻤﻮﺟﻮدة ﻓﻲ أﺣﺪ اﻷﻗﺴﺎم ﻟﺘﻈﮭﺮ اﻟﺼﻔﺤﺔ اﻟﻤﺘﻌﻠﻘﺔ ﺑﮭﺎ ﻓﻲ اﻟﻘﺴﻢ‬
‫اﻵﺧﺮ‪.‬‬

‫إذا ﻛﻨﺖ ﻗﺪ ﺷﺎھﺪت ﻣﺜﻞ ھﺬه اﻟﺼﻔﺤﺎت ﻓﮭﺬا ﯾﻌﻨﻲ أن اﻹﻃﺎرات ﻣﺄﻟﻮﻓﺔ ﻟﺪﯾﻚ وإﻻ ﻓﺸﺎھﺪ‬
‫ﻣﺜﺎﻻً ﻋﻠﻰ ﺻﻔﺤﺔ ذات إﻃﺎرات‬

‫‪103‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻛﻤﺎ ﺷﺎھﺪت‪ ،‬ﻓﺈن اﻟﺼﻔﺤﺔ ﻣﻜﻮﻧﺔ ﻣﻦ ﺛﻼﺛﺔ أﻗﺴﺎم‪ :‬ﻋﻠﻮي وأﯾﺴﺮ وأﯾﻤﻦ… واﻟﺤﻘﯿﻘﺔ أن‬
‫ﻛﻞ ﻗﺴﻢ ﻣﻨﮭﺎ ھﻮ ﻋﺒﺎرة ﻋﻦ ﻣﻠﻒ ‪ Html‬ﻛﺎﻣﻞ وﻣﺴﺘﻘﻞ ﺑﺤﺪ ذاﺗﮫ‪ .‬وھﻲ ﻣﺠﺮد ﺻﻔﺤﺎت‬
‫ﻋﺎدﯾﺔ ﻻ ﺗﺨﺘﻠﻒ أﺑﺪاً ﻋﻦ ﺗﻠﻚ اﻟﺘﻲ ﺗﻌﻠﻤﺖ إﻧﺸﺎءھﺎ ﻓﻲ اﻟﺪروس اﻟﺴﺎﺑﻘﺔ‪ ،‬وﻻ ﻋﻼﻗﺔ ﻟﻜﻞ‬
‫ﻣﻨﮭﺎ ﺑﺎﻟﺼﻔﺤﺎت اﻷﺧﺮى ﻣﻦ ﺣﯿﺚ اﻟﺘﺮﻛﯿﺐ واﻟﺘﻌﺮﯾﻒ‪.‬‬

‫أﻣﺎ ﻛﯿﻒ ﺗﻢ ﺟﻤﻌﮭﺎ ﻣﻌﺎ ﻟﺘﻈﮭﺮ ﺑﺎﻟﺸﻜﻞ اﻟﺬي ﺷﺎھﺪﺗﮫ؟ ﻓﮭﻨﺎ ﺑﯿﺖ اﻟﻘﺼﯿﺪ‪ .‬ﻓﺒﺎﻹﺿﺎﻓﺔ إﻟﻰ‬
‫اﻟﺼﻔﺤﺎت واﻟﻤﻠﻔﺎت اﻹﻋﺘﯿﺎدﯾﺔ ﯾﻮﺟﺪ داﺋﻤﺎً ﻣﻠﻒ أﺳﺎﺳﻲ ﯾﺘﻢ إﻧﺸﺎؤه ﺧﺼﯿﺼﺎ ﻟﺘﻌﺮﯾﻒ‬
‫ﺻﻔﺤﺔ اﻹﻃﺎرات وﺗﺠﻤﯿﻌﮭﺎ وﺗﺤﺪﯾﺪ ﺧﺼﺎﺋﺼﮭﺎ‪ .‬أي أن اﻟﻤﻌﺎدﻟﺔ ﺗﺘﻠﺨﺺ ﺑـِ‪:‬‬

‫ﻣﻜﻮﻧﺎت ﺻﻔﺤﺔ اﻹﻃﺎرات = ﻋﺪد ﻣﻠﻔﺎت اﻟﺼﻔﺤﺔ ﻧﻔﺴﮭﺎ ‪ +‬ﺻﻔﺤﺔ اﻟﻤﻠﻒ اﻷﺳﺎﺳﻲ اﻟﺬي ﯾﺠﻤﻌﮭﺎ‪.‬‬

‫‪104‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫أي أﻧﻨﻲ ﻓﻲ اﻟﻤﺜﺎل اﻟﺴﺎﺑﻖ إﺣﺘﺠﺖ ﻓﻌﻠﯿﺎً إﻟﻰ أرﺑﻌﺔ ﻣﻠﻔﺎت ﻟﺘﻜﻮﯾﻦ اﻟﺼﻔﺤﺔ‪.‬‬

‫وﻗﺒﻞ أن ﻧﺒﺪأ ﯾﺎ ﻋﺰﯾﺰي اﻟﻤﺘﺪرب… ﻟﻨﻘﻢ ﺑﺎﻟﺘﺤﻀﯿﺮ ﻟﻸﻣﺜﻠﺔ اﻟﺘﻲ ﺳﺘﺮد ﻓﻲ ھﺬا اﻟﺪرس‪.‬‬
‫ﻟﺬﻟﻚ ﻗﻢ ﺑﺈﻧﺸﺎء ﺛﻼﺛﺔ أو أرﺑﻌﺔ ﻣﻠﻔﺎت ﺑﺴﯿﻄﺔ ﻟﻜﻲ ﺗﺴﺘﺨﺪﻣﮭﺎ ﻓﻲ ﺗﻄﺒﯿﻖ اﻷﻣﺜﻠﺔ أو‬
‫اﺳﺘﺨﺪم ﻣﻠﻔﺎﺗﻚ اﻟﻘﺪﯾﻤﺔ اﻟﺘﻲ ﻗﻤﺖ ﺑﺎﻟﺘﺪرب ﻋﻠﯿﮭﺎ ﻓﻲ اﻟﺪروس اﻟﺴﺎﺑﻘﺔ‪ .‬أﻧﺎ ﻗﻤﺖ ﺑﺈﻧﺸﺎء‬
‫ﻣﻠﻔﺎت ﻋﻠﻰ اﻟﻨﻤﻂ اﻟﺘﺎﻟﻲ )وھﻲ اﻟﺘﻲ اﺳﺘﺨﺪﻣﺘﮭﺎ ﻓﻲ اﻟﻤﺜﺎل( وأﺳﻤﯿﺘﮭﺎ ‪frame1.html,‬‬
‫‪frame2.html, frame3.html‬‬

‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE>Frame1</TITLE‬‬
‫>‪</HEAD‬‬
‫>‪<BODY‬‬
‫‪Frame 1‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬

‫وﻧﺒﺪأ اﻵن ﺑﺘﻌﺮﯾﻒ اﻟﻤﻠﻒ اﻟﺮﺋﯿﺴﻲ اﻟﺬي ﺳﯿﻀﻢ ﻛﺎﻓﺔ اﻹﻃﺎرات واﻟﻤﻠﻔﺎت‪ .‬وھﻮ ﺑﺎﻟﻤﻨﺎﺳﺒﺔ‬
‫ﻣﻠﻒ ذو ﺣﺎﻟﺔ ﺧﺎﺻﺔ ﺣﯿﺚ ﻧﻘﻮم ﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻮم‬

‫>‪<FRAMESET> ... </FRAMESET‬‬

‫ﺑﺪﻻً ﻣﻦ اﻟﻮﺳﻮم >‪</BODY> ... <BODY‬‬

‫))إذن اﻟﻤﻠﻒ اﻟﺮﺋﯿﺴﻲ ﻟﻺﻃﺎرات ﻻ ﯾﺘﻀﻤﻦ ﺗﻌﺮﯾﻔﺎ ﺑﺎﺳﺘﺨﺪام ‪(( BODY‬‬

‫‪105‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE>Master File</TITLE‬‬
‫>‪</HEAD‬‬

‫>‪<FRAMESET‬‬
‫>‪</FRAMESET‬‬

‫>‪</HTML‬‬

‫ﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﺨﺼﺎﺋﺺ‪ :‬واﻟﺨﺎﺻﯿﺔ اﻷوﻟﻰ اﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻣﻊ ھﺬه اﻟﻮﺳﻮم ھﻲ ‪COLS‬‬
‫وھﻲ ﺗﻌﺮّف ﻋﺪد وأﺣﺠﺎم اﻹﻃﺎرات اﻟﻌﻤﻮدﯾﺔ ﻟﻠﺼﻔﺤﺔ‪ .‬وﺗُﺤﺪد اﻷﺣﺠﺎم ﺑﻄﺮﯾﻘﺘﯿﻦ )ھﻞ‬
‫ﻋﺮﻓﺘﮭﻤﺎ؟( ﻧﻌﻢ… إﻧﮭﻤﺎ اﻟﻄﺮﯾﻘﺔ اﻟﻤﺒﺎﺷﺮة واﻟﻄﺮﯾﻘﺔ اﻟﻨﺴﺒﯿﺔ‪...‬أو ﻛﻼھﻤﺎ ﻣﻌﺎ‪.‬‬

‫واﻵن إﻟﯿﻚ ھﺬه اﻷﻣﺜﻠﺔ اﻟﺘﻲ ﺗﻮﺿﺢ ﻣﻔﮭﻮم اﻷﻋﻤﺪة‪ ...‬وأﻟﻔﺖ ﻧﻈﺮك إﻟﻰ أن ﻗﯿﺎﻣﻚ ﺑﺎﻟﻨﻘﺮ‬
‫ﻋﻠﻰ اﻟﺸﯿﻔﺮة ﻟﻜﻞ ﻣﺜﺎل ﺳﯿﺆدي ﺑﻚ إﻟﻰ ﻣﺸﺎھﺪة ھﺬا اﻟﻤﺜﺎل ﺑﺼﻮرة ﻋﻤﻠﯿﺔ ﻟﻜﻦ إﻧﺘﺒﮫ!‬
‫ﻓﮭﺬه اﻟﺸﯿﻔﺮة ﻏﯿﺮ ﻣﻜﺘﻤﻠﺔ وﻛﺘﺎﺑﺘﮭﺎ ﺑﮭﺬا اﻟﺸﻜﻞ ﻓﻘﻂ ﻟﻦ ﯾﺆدي إﻟﻰ أي‬
‫ﻧﺘﯿﺠﺔ وﻻ إﻟﻰ ﻇﮭﻮر أي إﻃﺎرات ﺣﯿﺚ ﯾﻨﻘﺼﮭﺎ وﺳﻮم أﺧﺮى ﺧﺎﺻﺔ ﺑﻤﺼﺪر‬
‫اﻟﻤﻠﻔﺎت اﻟﻈﺎھﺮة داﺧﻞ اﻹﻃﺎرات‪ ،‬وﻗﺪ ﻗﻤﺖ ﺑﺈﻛﻤﺎﻟﮭﺎ ﻟﻐﺮض ﺗﻮﺿﯿﺢ اﻟﻨﺘﯿﺠﺔ ﻟﻚ ﻓﻘﻂ‪.‬‬
‫ﻟﺬﻟﻚ أرﺟﻮ أن ﺗﻜﺘﻔﻲ اﻵن ﺑﻤﻌﺎﯾﻨﺔ ﻛﻞ ﺷﯿﻔﺮة وﻧﺘﯿﺠﺘﮭﺎ إﻟﻰ أن أﻗﻮم ﺑﺴﺮد ﺑﺎﻗﻲ‬
‫اﻟﺨﺼﺎﺋﺺ اﻟﻤﮭﻤﺔ ﻻﺣﻘﺎً‪.‬‬

‫‪<FRAMESET‬‬
‫>"‪COLS="50%,50%‬‬
‫ﯾﺤﺪد إﻃﺎرﯾﻦ ﻋﻤﻮدﯾﯿﻦ ﺣﺠﻢ ﻛﻞ ﻣﻨﮭﻤﺎ ‪ %50‬ﻣﻦ ﺣﺠﻢ اﻟﺸﺎﺷﺔ‬ ‫>‪</FRAMESET‬‬

‫‪<FRAMESET‬‬
‫ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات أﺣﺠﺎﻣﮭﺎ ‪ %20‬و ‪ %50‬و ‪ %30‬ﻋﻠﻰ اﻟﺘﻮاﻟﻲ‬ ‫>"‪COLS="20%,50%,30%‬‬
‫ﻣﻦ ﺣﺠﻢ اﻟﺸﺎﺷﺔ‬ ‫>‪</FRAMESET‬‬

‫‪106‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات ﻋﻤﻮدﯾﺔ اﻷول ﺣﺠﻤﮫ ‪ 200‬ﺑﯿﻜﺴﻞ‪ ،‬واﻟﺜﺎﻧﻲ ‪300‬‬

‫ﺑﯿﻜﺴﻞ‪،‬‬ ‫‪<FRAMESET‬‬
‫>"*‪COLS="200,300,‬‬
‫أﻣﺎ اﻟﺜﺎﻟﺚ * أي اﻧﮫ ﻏﯿﺮ ﻣﺤﺪد ﺑﺤﺠﻢ ﻣﻌﯿﻦ وﻟﻜﻨﮫ ﺳﯿﻜﻮن ﺑﺎﻟﺤﺠﻢ‬ ‫>‪</FRAMESET‬‬
‫اﻟﻤﺘﺒﻘﻲ ﻣﻦ اﻟﺸﺎﺷﺔ )ﻃﺎﻟﻤﺎ أﻧﻨﺎ ﻻ ﻧﻌﺮف اﺳﺘﺒﺎﻧﺔ اﻟﺸﺎﺷﺔ اﻟﺘﻲ‬
‫ﯾﺴﺘﺨﺪﻣﮭﺎ زاﺋﺮ اﻟﻤﻮﻗﻊ(‬

‫ﯾﺤﺪد أرﺑﻌﺔ إﻃﺎرات ﺣﺠﻢ اﻷول ھﻮ ‪ 200‬ﺑﯿﻜﺴﻞ‪ ،‬واﻟﺜﺎﻟﺚ ‪ %15‬ﻣﻦ‬ ‫‪<FRAMESET‬‬

‫>"‪COLS="200,*,15%,20%‬‬
‫ﺣﺠﻢ اﻟﺸﺎﺷﺔ‪ ،‬واﻟﺮاﺑﻊ ‪ %20‬ﻣﻦ ﺣﺠﻢ اﻟﺸﺎﺷﺔ أﻣﺎ اﻟﺜﺎﻧﻲ ﻓﺴﯿﻜﻮن‬ ‫>‪</FRAMESET‬‬
‫ﺣﺠﻤﮫ ﺑﻤﺎ ﺗﺒﻘﻰ ﻣﻦ اﻟﺸﺎﺷﺔ‪.‬‬

‫‪<FRAMESET‬‬
‫ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات اﻷول ﺣﺠﻤﮫ ‪ 150‬ﺑﯿﻜﺴﻞ‪ ....‬أﻣﺎ اﻟﻤﺴﺎﺣﺔ اﻟﻤﺘﺒﻘﯿﺔ‬ ‫>"*‪COLS="150,*,2‬‬
‫ﻓﺘﻘﺴﻢ ﻋﻠﻰ أﺳﺎس أن اﻹﻃﺎر اﻟﺜﺎﻟﺚ ﺣﺠﻤﮫ ھﻮ ﺿﻌﻔﻲ )*‪ (2‬ﺣﺠﻢ‬ ‫>‪</FRAMESET‬‬
‫اﻹﻃﺎر اﻟﺜﺎﻧﻲ )*(‬

‫أﻣﺎ اﻟﺨﺎﺻﯿﺔ اﻟﺜﺎﻧﯿﺔ ﻓﮭﻲ ‪ ROWS‬وأﻋﺘﻘﺪ أﻧﻚ اﺳﺘﻨﺠﺖ ﻃﺒﯿﻌﺔ ﻋﻤﻠﮭﺎ‪ .‬ﻧﻌﻢ ھﻲ ﺗﺤﺪد‬
‫ﻋﺪد وﺣﺠﻢ اﻹﻃﺎرات اﻷﻓﻘﯿﺔ )اﻟﺼﻔﻮف( داﺧﻞ اﻟﺼﻔﺤﺔ‪ .‬وذﻟﻚ ﺑﻨﻔﺲ اﻷﺳﻠﻮب اﻟﻤﺘﺒﻊ ﻣﻊ‬
‫اﻷﻋﻤﺪة‪ ،‬أي إﻣﺎ ﺑﺎﺳﺘﺨﺪام اﻟﻄﺮﯾﻘﺔ اﻟﻨﺴﺒﯿﺔ أو اﻟﻤﻄﻠﻘﺔ‪ .‬وﺳﺄﻗﻮم ﺑﺴﺮد ﺑﻌﺾ اﻷﻣﺜﻠﺔ‬
‫ﻟﺘﻮﺿﯿﺤﮭﺎ )وأذﻛﺮك ﺛﺎﻧﯿﺔ أن ھﺬه اﻷﻣﺜﻠﺔ ﻏﯿﺮ ﻣﻜﺘﻤﻠﺔ(‪:‬‬

‫‪<FRAMESET‬‬
‫>"‪ROWS="50%,50%‬‬
‫ﯾﺤﺪد إﻃﺎرﯾﻦ أﻓﻘﯿﯿﻦ ارﺗﻔﺎع ﻛﻞ ﻣﻨﮭﻤﺎ ‪ %50‬ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ‬ ‫>‪</FRAMESET‬‬

‫‪<FRAMESET‬‬
‫ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات أﻓﻘﯿﺔ ارﺗﻔﺎﻋﺎﺗﮭﺎ ‪ %20‬و ‪ %50‬و ‪ %30‬ﻋﻠﻰ‬ ‫>"‪ROWS="20%,50%,30%‬‬
‫اﻟﺘﻮاﻟﻲ ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ‬ ‫>‪</FRAMESET‬‬

‫‪<FRAMESET‬‬
‫ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات أﻓﻘﯿﺔ اﻷول ارﺗﻔﺎﻋﮫ ‪ 50‬ﺑﯿﻜﺴﻞ‪ ،‬واﻟﺜﺎﻧﻲ ‪120‬‬ ‫>"*‪ROWS="50,120,‬‬
‫ﺑﯿﻜﺴﻞ‪ ،‬واﻟﺜﺎﻟﺚ ﺳﯿﻜﻮن ﺑﺎﻹرﺗﻔﺎع اﻟﻤﺘﺒﻘﻲ ﻣﻦ اﻟﺸﺎﺷﺔ‬ ‫>‪</FRAMESET‬‬

‫ﯾﺤﺪد أرﺑﻌﺔ إﻃﺎرات أﻓﻘﯿﺔ ارﺗﻔﺎع اﻷول ھﻮ ‪ 50‬ﺑﯿﻜﺴﻞ‪ ،‬واﻟﺜﺎﻟﺚ ‪%15‬‬ ‫‪<FRAMESET‬‬
‫>"‪ROWS="50,*,15%,20%‬‬
‫ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ‪ ،‬واﻟﺮاﺑﻊ ‪ %20‬ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ أﻣﺎ اﻟﺜﺎﻧﻲ ﻓﺴﯿﻜﻮن‬ ‫>‪</FRAMESET‬‬
‫ارﺗﻔﺎﻋﮫ ﺑﻤﺎ ﺗﺒﻘﻰ ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ‪.‬‬

‫‪107‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>"*‪<FRAMESET COLS="*,2‬‬
‫ﯾﺤﺪد إﻃﺎرﯾﻦ اﻟﺜﺎﻧﻲ ارﺗﻔﺎﻋﮫ ﺿﻌﻔﻲ ارﺗﻔﺎع اﻷول‬ ‫>‪</FRAMESET‬‬

‫ﻟﻢ ﻧﻨﺘﮫ ﺑﻌﺪ ﻣﻦ ذﻛﺮ ﻛﻞ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺘﻌﻠﻘﺔ ﺑﺎﻟﻮﺳﻮم >‪ <FRAMESET‬ﻓﻼ زال ھﻨﺎك‬
‫اﻟﻜﺜﯿﺮ‪ .‬وﻟﻜﻦ ﻣﻦ اﻟﻀﺮوري أن ﻧﻘﻮم اﻵن ﺑﺎﻹﻧﺘﻘﺎل إﻟﻰ وﺳﻢ آﺧﺮ ﻟﻺﻃﺎرات ﻷﻧﮫ ﻣﺮﺗﺒﻂ‬
‫إرﺗﺒﺎﻃﺎً وﺛﯿﻘﺎً ﺑﺎﻟﻮﺳﻮم اﻟﺴﺎﺑﻘﺔ وﺧﺼﺎﺋﺼﮭﺎ اﻟﻤﺬﻛﻮرة أﻋﻼه‪ ،‬وھﻲ >‪ <FRAME‬ﻓﻤﺎ‬
‫ھﻮ ﻋﻤﻞ ھﺬا اﻟﻮﺳﻢ؟‬

‫ﺣﺴﻨﺎ‪ ،‬ﻛﻞ ﻣﺎ ﻗﻤﻨﺎ ﺑﮫ ﺣﺘﻰ اﻵن ھﻮ ﺗﻌﺮﯾﻒ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻹﻃﺎرات وﺧﺼﺎﺋﺼﮭﺎ )ﻓﻘﻂ‬
‫ﺗﻌﺮﯾﻒ اﻹﻃﺎرات( ﻟﻜﻦ ﻟﻢ ﻧﺤﺪد ﻣﺎھﯿﺔ ھﺬه اﻹﻃﺎرات وﻻ ﻣﺤﺘﻮﯾﺎﺗﮭﺎ وﻻ ﻣﺼﺎدرھﺎ‪ .‬ﺗﻤﺎﻣﺎ‬
‫ﻛﻤﺎ ﻧﻘﻮم ﺑﺘﻌﺮﯾﻒ ﺻﻔﺤﺎت اﻟﻮﯾﺐ اﻹﻋﺘﯿﺎدﯾﺔ وﺧﺼﺎﺋﺼﮭﺎ ﻓﻲ اﻟﻮﺳﻢ >‪ <BODY‬دون‬
‫أن ﯾﻌﻨﻲ ذﻟﻚ ﺗﺤﺪﯾﺪ ﻣﺤﺘﻮﯾﺎت ھﺬه اﻟﺼﻔﺤﺎت‪ .‬ﻓﺈذا أردﻧﺎ ﻓﯿﻤﺎ ﺑﻌﺪ إدراج ﺻﻮرة ﻣﺜﻼً‬
‫ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺬﻟﻚ وھﻮ >‪<"IMG SRC="imagname.ext‬‬

‫وﻓﻲ ﺣﺎﻟﺔ اﻹﻃﺎرات ﻓﺈﻧﻨﺎ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <FRAME‬وھﻮ وﺳﻢ ﻣﻔﺮد أي ﻟﯿﺲ ﻟﮫ‬
‫وﺳﻢ ﻧﮭﺎﯾﺔ ﺗﻤﺎﻣﺎً ﻣﺜﻞ >‪ .<IMG‬وﻓﯿﮫ ﻧﻘﻮم ﺑﺘﺤﺪﯾﺪ ﻣﺼﺪر وﺧﺼﺎﺋﺺ ﻛﻞ ﻣﻠﻒ ﻧﺮﯾﺪ‬
‫إﻇﮭﺎره داﺧﻞ أﺣﺪ اﻹﻃﺎرات‪ .‬وﯾﺘﻢ اﺳﺘﺨﺪام ھﺬا اﻟﻮﺳﻢ ﻣﺮات ﺑﻨﻔﺲ ﻋﺪد اﻹﻃﺎرات‬
‫اﻟﻤﺬﻛﻮرة داﺧﻞ >‪ .<FRAMESET‬وﺳﻮف أﻗﻮم ﻣﺒﺎﺷﺮة ﺑﺎﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ ‪SRC‬‬
‫ﻟﺘﺤﺪﯾﺪ ﻣﺼﺪر اﻟﻤﻠﻒ‪.‬‬

‫دﻋﻨﺎ ﻧﻘﻮم اﻵن ﺑﺈﺗﻤﺎم اﻟﺸﯿﻔﺮة ﻟﺒﻌﺾ اﻷﻣﺜﻠﺔ اﻟﻤﺬﻛﻮرة أﻋﻼه‪ .‬وﻧﺒﺪأ ﺑﺎﻟﻤﺜﺎل اﻷول‪:‬‬

‫>"‪<FRAMESET COLS="50%,50%‬‬
‫>"‪<FRAME SRC="frame1.html‬‬

‫‪108‬‬
 www.dinaro.com/vb3

<FRAME SRC="frame2.html">
</FRAMESET>

.‫ واﻵن ﻓﻘﻂ أﺻﺒﺢ ﻟﺪﯾﻚ ﺻﻔﺤﺔ إﻃﺎرات ﻣﺤﺘﺮﻣﺔ‬... ‫اﻵن‬

:‫ﻣﺜﺎل آﺧﺮ‬

<FRAMESET COLS="200,400,*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
</FRAMESET>

:‫ﻣﺜﺎل ﺛﺎﻟﺚ‬

<FRAMESET ROWS="50,*,15%,20%">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
</FRAMESET>

:‫ﻣﺜﺎل راﺑﻊ‬

<FRAMESET COLS="*,2*">
<FRAME SRC="frame1.html">
109
 www.dinaro.com/vb3

<FRAME SRC="frame2.html">
</FRAMESET

‫ ﻧﺴﺘﻄﯿﻊ إدراج ﺻﻮرة ﻣﺒﺎﺷﺮةً داﺧﻞ اﻹﻃﺎر وﺑﺎﺳﺘﺨﺪام‬،‫وﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ ﻣﺎ ذﻛﺮ‬

‫< وإﻟﯿﻚ ھﺬا اﻟﻤﺜﺎل‬IMG SRC> ‫< ﺗﻤﺎﻣﺎً ﻛﻤﺎ ﻧﺪرﺟﮭﺎ ﺑﺎﺳﺘﺨﺪام‬FRAME SRC>

<FRAMESET COLS="50%,50%">
<FRAME SRC="frame1.html">
<FRAME SRC="alah.jpg">
</FRAMESET>

110
 ‫‪www.dinaro.com/vb3‬‬

‫واﻵن ﻟﻤﺎذا ﻻ ﻧﻘﻢ ﻣﻌﺎً ﺑﻤﺮاﺟﻌﺔ اﻷﻓﻜﺎر اﻷﺳﺎﺳﯿﺔ اﻟﺴﺎﺑﻘﺔ اﻟﺬﻛﺮ وﺗﻠﺨﯿﺼﮭﺎ؟ وھﺬه ھﻲ‪:‬‬

‫• ﻹدراج ﺻﻔﺤﺔ إﻃﺎرات ﻧﺤﺘﺎج إﻟﻰ ﻣﻠﻒ رﺋﯿﺴﻲ ﯾﻌﺘﺒﺮ ﺑﻤﺜﺎﺑﺔ اﻟﻮﻋﺎء اﻟﺬي ﺳﯿﻀﻢ ھﺬه‬
‫اﻹﻃﺎرات‪.‬‬

‫• اﻟﻤﻠﻒ اﻟﺮﺋﯿﺴﻲ ھﻮ ﻣﻠﻒ ‪ HTML‬إﻋﺘﯿﺎدي ﻏﯿﺮ أﻧﻨﺎ ﻧﻜﺘﺐ اﻟﻮﺳﻮم‬

‫>‪ </FRAMESET>... <FRAMESET‬ﺑﺪﻻً ﻣﻦ >‪.<BODY/>... <BODY‬‬
‫وﺑﺎﻟﺘﺎﻟﻲ ﻓﮭﻮ ﯾﺤﺘﻮي ﻋﻠﻰ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﻧﺮﯾﺪھﺎ ﻟﻺﻃﺎرات وﺗﻌﺮﯾﻔﺎﺗﮭﺎ‪.‬‬

‫• ﻧﺴﺘﺨﺪم اﻟﺨﺼﺎﺋﺺ ‪ COLS, ROWS‬ﻟﺘﺤﺪﯾﺪ ﻋﺪد اﻹﻃﺎرات )ﺻﻔﻮﻓﺎً ﻛﺎﻧﺖ أو أﻋﻤﺪة(‬

‫وأﺣﺠﺎﻣﮭﺎ‪.‬‬

‫• اﻟﻤﻠﻔﺎت اﻟﻔﺮﻋﯿﺔ اﻟﺘﻲ ﺗﻈﮭﺮ ﺿﻤﻦ اﻹﻃﺎرات ھﻲ ﻣﻠﻔﺎت ﻋﺎدﯾﺔ ﻛﺎﻟﺘﻲ ﻗﻤﻨﺎ ﺑﺈﻧﺸﺎﺋﮭﺎ ﻓﻲ‬
‫اﻟﺪروس اﻟﺴﺎﺑﻘﺔ أو ﺻﻮراً‪ .‬وﻻ ﺗﺤﺘﻮي ﻋﻠﻰ أي ﺗﻨﺴﯿﻖ أو وﺳﻮم ﺧﺎﺻﺔ‪.‬‬

‫• ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <FRAME‬داﺧﻞ اﻟﻤﻠﻒ اﻟﺮﺋﯿﺴﻲ ﻟﻤﻨﺎداة اﻟﻤﻠﻔﺎت اﻟﻔﺮﻋﯿﺔ داﺧﻞ‬
‫اﻹﻃﺎرات‪ ،‬وذﻟﻚ ﻣﻊ اﻟﺨﺎﺻﯿﺔ ‪ .SRC‬ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ اﺳﺘﺨﺪاﻣﮫ ﻟﺘﺤﺪﯾﺪ ﺑﺎﻗﻲ اﻟﺨﺼﺎﺋﺺ ‪.‬‬

‫ﻛﻤﺎ ﻧﺴﺘﻄﯿﻊ ﺗﻤﺜﯿﻞ ھﯿﻜﻠﯿﺔ اﻹﻃﺎرات ﻣﻦ ﺧﻼل اﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬

‫‪111‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ھﻞ ﺗﺄﻛﺪت ﻣﻦ ﻓﮭﻤﻚ ﻟﮭﺬه اﻟﻨﻘﺎط؟ ﻟﻨﺘﺎﺑﻊ إذن ‪...‬‬

‫ﺣﺘﻰ اﻵن ﻗﻤﻨﺎ ﺑﺘﻘﺴﯿﻢ اﻟﺼﻔﺤﺔ إﻣﺎ ﻹﻃﺎرات أﻓﻘﯿﺔ أو ﻹﻃﺎرات ﻋﻤﻮدﯾﺔ‪ .‬ﻟﻜﻦ ﻧﺤﺘﺎج‬
‫ﻟﻤﻌﺮﻓﺔ ﻛﯿﻔﯿﺔ إدراج ﻛﻼھﻤﺎ ﻓﻲ اﻟﺼﻔﺤﺔ‪ .‬ﻛﻤﺎ ﻓﻲ اﻷﻣﺜﻠﺔ اﻟﺘﺎﻟﯿﺔ‪:‬‬

‫ﺻﻔﺤﺔ ﻣﻜﻮﻧﺔ ﻣﻦ ﺻﻔﯿﻦ‪ ،‬اﻟﺜﺎﻧﻲ ﻣﻨﮭﻤﺎ ﻣﻘﺴﻢ ﺑﺪوره إﻟﻰ ﻋﻤﻮدﯾﻦ‬

‫‪112‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺻﻔﺤﺔ ﻣﻜﻮﻧﺔ ﻣﻦ ﻋﻤﻮدﯾﻦ‪ ،‬اﻟﺜﺎﻧﻲ ﻣﻨﮭﻤﺎ ﻣﻘﺴﻢ ﺑﺪوره إﻟﻰ ﺻﻔﯿﻦ‬

‫‪113‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻟﻨﺒﺪأ ﺑﺎﻟﻤﺜﺎل اﻷول‪:‬‬

‫ﺑﻤﺎ أن اﻟﺼﻔﺤﺔ ﺗﺤﺘﻮي ﻋﻠﻰ ﺻﻔﯿﻦ ﻧﻘﻮم ﺑﺘﻌﺮﯾﻔﮭﻤﺎ أوﻻً ﺣﺴﺐ اﻹرﺗﻔﺎﻋﺎت اﻟﻤﺮﻏﻮب‬
‫ﺑﮭﺎ‪:‬‬

‫>"*‪<FRAMESET ROWS="100,‬‬
‫>"‪<FRAME SRC="frame1.html‬‬
‫>"‪<FRAME SRC="frame2.html‬‬
‫>‪</FRAMESET‬‬

‫ﻟﻜﻦ اﻟﺼﻒ اﻟﺜﺎﻧﻲ ﻣﻘﺴﻢ إﻟﻰ ﻋﻤﻮدﯾﻦ وھﻨﺎ ﯾﻌﺘﺒﺮ ﺑﻤﻔﮭﻮم ﻟﻐﺔ ‪ HTML‬وﻛﺄﻧﮫ ﺻﻔﺤﺔ‬
‫إﻃﺎرات ﺟﺪﯾﺪة ﻟﺬﻟﻚ ﻻ ﻧﺤﺘﺎج ﻟﺘﻌﺮﯾﻔﮫ ﻛﺼﻒ وﺑﺪﻻً ﻣﻦ ذﻟﻚ ﻧﻌﺎود اﺳﺘﺨﺪام ﺗﻌﺮﯾﻒ‬
‫اﻟﺼﻔﺤﺎت! أي >‪ <FRAMESET‬ﻣﺮة أﺧﺮى‪.‬‬

‫>"*‪<FRAMESET ROWS="100,‬‬
‫>"‪<FRAME SRC="frame1.html‬‬

‫>‪<FRAMESET‬‬
‫>‪</FRAMESET‬‬

‫>‪</FRAMESET‬‬

‫وﺑﻤﺎ أن اﻟﺼﻒ اﻟﺜﺎﻧﻲ )أو ﻟﻨﻘﻞ اﻹﻃﺎر اﻟﺜﺎﻧﻲ( ﻣﻘﺴﻢ إﻟﻰ ﻋﻤﻮدﯾﻦ‪ ،‬إذن ﺑﻘﻲ ﻋﻠﯿﻨﺎ إﺿﺎﻓﺔ‬
‫ﺗﻌﺮﯾﻒ ﻟﮭﺬه اﻷﻋﻤﺪة‪ .‬وﺑﺬﻟﻚ ﺗﻜﻮن اﻟﺸﯿﻔﺮة اﻟﻨﮭﺎﺋﯿﺔ ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬

‫‪114‬‬
 www.dinaro.com/vb3

<FRAMESET ROWS="100,*">
<FRAME SRC="frame1.html">

<FRAMESET COLS="200,*">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
</FRAMESET>

</FRAMESET>

:‫ﻟﻨﻘﻢ اﻵن ﺑﺈدراج ﻣﺜﺎل آﺧﺮ وﺗﺤﻠﯿﻠﮫ‬

115
 ‫‪www.dinaro.com/vb3‬‬

‫ﯾﻮﺟﺪ ﻟﺪﯾﻨﺎ ﺛﻼﺛﺔ أﻋﻤﺪة‪ ،‬أﻟﯿﺲ ﻛﺬﻟﻚ؟ إذن ﻟﻨﻘﻢ ﺑﺘﻌﺮﯾﻒ ﺻﻔﺤﺔ إﻃﺎرات ذات ﺛﻼﺛﺔ أﻋﻤﺪة‬
‫)ﻃﺒﻌﺎً ﻻ ﯾﻮﺟﺪ أھﻤﯿﺔ ﻟﻸﺣﺠﺎم اﻟﻤﺬﻛﻮرة‪ ،‬ﻓﺄﻧﺎ اﺧﺘﺮﺗﮭﺎ ﺣﺴﺐ رﻏﺒﺘﻲ وﺗﺴﺘﻄﯿﻊ أﻧﺖ‬
‫اﺧﺘﯿﺎر اﻷﺣﺠﺎم اﻟﺘﻲ ﺗﺮﯾﺪھﺎ(‪.‬‬

‫>"‪<FRAMESET COLS="100,*,100‬‬
‫>"‪<FRAME SRC="frame1.html‬‬
‫>"‪<FRAME SRC="frame2.html‬‬
‫>"‪<FRAME SRC="frame3.html‬‬
‫>‪</FRAMESET‬‬

‫اﻟﻌﻤﻮد اﻷوﺳﻂ ﻣﻦ ھﺬه اﻟﺼﻔﺤﺔ ﻣﻘﺴﻢ إﻟﻰ ﺻﻔﯿﻦ‪ ،‬إذن ﻧﺴﺘﺒﺪل ﺗﻌﺮﯾﻔﮫ ﺑﺘﻌﺮﯾﻒ آﺧﺮ‬
‫ﻟﺼﻔﺤﺔ إﻃﺎرات ﻣﻜﻮﻧﺔ ﻣﻦ ﺻﻔﯿﻦ )وھﺬا ھﻮ اﻟﺘﻌﺮﯾﻒ ﺑﺼﻮرة ﻣﺴﺘﻘﻠﺔ(‬

‫>"*‪<FRAMESET ROWS="80,‬‬
‫>"‪<FRAME SRC="frame2.html‬‬
‫>"‪<FRAME SRC="frame4.html‬‬
‫>‪</FRAMESET‬‬

‫وﺑﻌﺪ دﻣﺞ اﻟﺸﯿﻔﺮﺗﯿﻦ اﻟﺴﺎﺑﻘﺘﯿﻦ ﻣﻌﺎً ﻧﺤﺼﻞ ﻋﻠﻰ ھﺬه اﻟﺸﯿﻔﺮة اﻟﻨﮭﺎﺋﯿﺔ‪:‬‬

‫>"‪<FRAMESET COLS="100,*,100‬‬
‫>"‪<FRAME SRC="frame1.html‬‬

‫>"*‪<FRAMESET ROWS="80,‬‬
‫>"‪<FRAME SRC="frame2.html‬‬
‫>"‪<FRAME SRC="frame4.html‬‬
‫>‪</FRAMESET‬‬
‫‪116‬‬
 www.dinaro.com/vb3

<FRAME SRC="frame3.html">
</FRAMESET>

.‫ أراك ﻋﻠﻰ ﺧﯿﺮ ﻓﻲ اﻟﺪرس اﻟﺘﺎﻟﻲ‬.‫وﺻﻠﻨﺎ اﻵن إﻟﻰ ﻧﮭﺎﯾﺔ ھﺬا اﻟﺪرس‬

‫أﻟﯿﺲ ھﺬا‬
‫ﻣﻤﺘﻌﺎ‬
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHH
117
 ‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﻌﺎﺷﺮ‬
‫‪‬‬

‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﻌﺎﺷﺮ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬

‫ﻛﻤﺎ ﺗﺮى ﻣﻦ اﻟﻌﻨﻮان ﻓﻘﺪ اﺧﺘﺮت أن ﯾﻜﻮن ھﺬا اﻟﺪرس ﺧﺎرﺟﺎً ﻗﻠﯿﻼً ﻋﻦ ﻧﻄﺎق اﻟﺪروس‬
‫اﻟﺴﺎﺑﻘﺔ ﻣﻦ ﺣﯿﺚ اﻟﻤﺤﺘﻮى‪ .‬ﻓﻠﻦ ﺗﺠﺪ ھﻨﺎ وﺳﻮﻣﺎً ﻣﺤﺪدة ﺗﺴﺘﻄﯿﻊ ﺣﺼﺮھﺎ ﺗﺤﺖ ﻣﻮﺿﻮع‬
‫ﻣﻌﯿﻦ‪ ،‬ﺑﻞ وﺳﻮﻣﺎً ﻋﺎﻣﺔ وﺧﺼﺎﺋﺺ إﺿﺎﻓﯿﺔ ﻟﻮﺳﻮم ذﻛﺮت ﺳﺎﺑﻘﺎً‪ .‬وإن ﻛﺎن اﻟﮭﺪف ﻣﻦ‬
‫ﻣﻌﻈﻤﮭﺎ ﺗﺮﺗﯿﺐ اﻟﺼﻔﺤﺔ واﻟﺘﺤﻜﻢ ﺑﺸﻜﻞ ﻣﺤﺘﻮﯾﺎﺗﮭﺎ‪ .‬وﻻ أﺧﻔﻲ ﻋﻠﯿﻚ أﻧﻲ ﻗﺼﺪت ﺗﺄﺟﯿﻞ‬
‫ﺑﻌﻀﮭﺎ ﺣﺘﻰ ھﺬا اﻟﺪرس ﻣﻊ أﻧﮫ ﻛﺎن ﻣﻦ اﻟﻤﻤﻜﻦ إدراﺟﮭﺎ ﺿﻤﻦ دروس ﺳﺎﺑﻘﺔ‪ ،‬وﺧﺎﺻﺔ‬
‫اﻟﺪرس اﻟﺮاﺑﻊ )اﻟﻔﻘﺮات(‪ .‬ﻟﻜﻦ ﺣﺠّﺘﻲ ﻓﻲ ﻋﺪم إدراﺟﮭﺎ ﻓﻲ ﺣﯿﻨﮫ أن ھﺬه اﻟﻮﺳﻮم ﻟﻦ ﯾﺘﻢ‬
‫اﺳﺘﺨﺪاﻣﮭﺎ وﻟﻦ ﺗُﻔﮭﻢ ﻃﺮﯾﻘﺔ ﻋﻤﻠﮭﺎ إﻻّ ﻋﻨﺪ اﺳﺘﺨﺪام وﺳﻮم أﺧﺮى ﺗﻢّ ﺷﺮﺣﮭﺎ ﻓﻲ وﻗﺖ‬
‫ﻻﺣﻖ ﺑﻌﺪ اﻟﻔﻘﺮات ﻣﺜﻞ اﻟﺼﻮر واﻟﺠﺪاول‪ .‬أﻣﺎ اﻟﺒﻌﺾ اﻵﺧﺮ ﻓﻔﻀﻠﺖ ﻋﺪم ﺣﺼﺮھﺎ ﺿﻤﻦ‬
‫أي درس ﻋﻠﻰ اﻋﺘﺒﺎر أﻧﮭﺎ وﺳﻮم ﻋﺎﻣﺔ ﻻ ﺗﺨﺘﺺ ﺑﺄي ﻣﻮﺿﻮع‪ .‬ﻋﻠﻰ أﯾﺔ ﺣﺎل ﯾﻜﻔﯿﻨﺎ ھﺬه‬
‫اﻟﻤﻘﺪﻣﺔ وأﺗﺮك ﻟﻚ ﺣﺮﯾﺔ ﺗﺼﻨﯿﻔﮭﺎ ﻛﻤﺎ ﯾﺤﻠﻮ ﻟﻚ‪ .‬واﻵن ﻟﻨﺪﺧﻞ ﻣﺒﺎﺷﺮة ﻓﻲ اﻟﻤﻮﺿﻮع‪.‬‬

‫أﺗﺮى ھﺬا اﻟﺨﻂ اﻟﺬي ﻓﺼﻠﺖ ﺑﮫ ھﺬه اﻟﻔﻘﺮة ﻋﻦ اﻟﻔﻘﺮة اﻟﺴﺎﺑﻘﺔ؟ إﻧﮫ ﯾﺴﻤﻰ ﺑﻠﻐﺔ‬
‫‪ HTML‬ﺑﺎﻟﻤﺴﻄﺮة اﻷﻓﻘﯿﺔ ‪ Horizontal Rule‬وﺗﺴﺘﻄﯿﻊ إدراﺟﮫ ﻟﺘﻘﺴﯿﻢ ﺻﻔﺤﺘﻚ‬
‫ﺑﻜﺘﺎﺑﺔ اﻟﻮﺳﻢ >‪ <HR‬ﻓﻘﻂ ﻻ ﻏﯿﺮ‪ .‬أﻛﺘﺐ‪:‬‬

‫>‪<HR‬‬

‫ﻟﯿﻈﮭﺮ ﻟﺪﯾﻚ ھﺬا اﻟﺨﻂ‪:‬‬

‫‪118‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻟﻜﻦ ھﺬا ﻟﯿﺲ ﻛﻞ ﺷﻲء‪ .‬ﻷﻧﻚ ﺗﺴﺘﻄﯿﻊ ﺗﺤﺪﯾﺪ ﺳُﻤﻚ ھﺬا اﻟﺨﻂ إذا أﺿﻔﺖ ﻟﮫ اﻟﺨﺎﺻﯿﺔ‬
‫‪ SIZE‬وأﺗﺒﻌﺘﮭﺎ ﺑﺮﻗﻢ ﯾﻤﺜﻞ ھﺬا اﻟﺴُﻤﻚ ﻣﺜﻼً‪:‬‬

‫>"‪<HR SIZE="5‬‬

‫>"‪<HR SIZE="1‬‬

‫>"‪<HR SIZE="10‬‬

‫ﻛﺬﻟﻚ ﯾﻤﻜﻨﻚ ﺗﺤﺪﯾﺪ ﻋﺮض اﻟﺨﻂ ﺑﺎﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ ‪ WIDTH‬واﻟﺘﻲ ﻣﻦ اﻟﻤﻤﻜﻦ أن‬
‫ﺗﺄﺧﺬ ﻗﯿﻤﺔ ﻣﻄﻠﻘﺔ أو ﻧﺴﺒﯿﺔ‬

‫>"‪<HR WIDTH="80%‬‬

‫‪119‬‬
 www.dinaro.com/vb3

<HR WIDTH="400">

<HR SIZE="5" WIDTH="60%">

‫ واﻟﺘﻲ ﺗﺄﺧﺬ اﻟﻘﯿﻢ‬ALIGN ‫وﻣﻦ اﻟﺨﺼﺎﺋﺺ اﻷﺧﺮى ﻟﮭﺬا اﻟﺨﻂ ﺧﺎﺻﯿﺔ اﻟﻤﺤﺎذاه‬
left, right ،center

<HR WIDTH="80%" ALIGN="center">

<HR WIDTH="400" ALIGN="left">

<HR SIZE="5" WIDTH="60%" ALIGN="right">

120
 ‫‪www.dinaro.com/vb3‬‬

‫وﻛﻤﺎ ﺗﻼﺣﻆ ﻓﺈن ھﺬا اﻟﺨﻂ ﯾﻜﺘﺴﺐ ﻣﻈﮭﺮاً ﻏﺎﺋﺮاً ﺛﻼﺛﻲ اﻷﺑﻌﺎد وإذا أردت ﺧﻄﺎً ﻋﺎدﯾﺎً ﻏﯿﺮ‬
‫ﻏﺎﺋﺮ ﻓﻘﻢ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺎﺻﯿﺔ ‪NOSHADE‬‬

‫>‪<HR SIZE="5" WIDTH="60%" ALIGN="center" NOSHADE‬‬

‫أﻣﺎ إذا ﻛﺎن ﻟﻮن ھﺬا اﻟﺨﻂ ﻻ ﯾﻌﺠﺒﻚ‪ ،‬ﻓﻤﺎ ﻣﻦ ﻣﺸﻜﻠﺔ إذ أﻧﻚ ﺗﺴﺘﻄﯿﻊ اﺧﺘﯿﺎر اﻟﻠﻮن اﻟﺬي‬
‫ﯾﻌﺤﺒﻚ ﻣﻦ ﺧﻼل اﻟﺨﺎﺻﯿﺔ ‪) COLOR‬ﺗﻌﻤﻞ ﻓﻘﻂ ﻣﻊ ‪(MS Explorer‬‬

‫"‪<HR SIZE="5" WIDTH="60%" ALIGN="center‬‬

‫>‪COLOR="#FF0000" NOSHADE‬‬

‫اﻟﻮﺳﻢ اﻟﺘﺎﻟﻲ ﻓﻲ ھﺬه اﻟﻤﺠﻤﻮﻋﺔ ھﻮ وﺳﻢ اﻟﻤﻼﺣﻈﺎت >!‪ <-- ... --‬وﻧﺴﺘﺨﺪﻣﮫ ﻋﻨﺪ‬
‫اﻟﺤﺎﺟﺔ ﻟﻜﺘﺎﺑﺔ ﺑﻌﺾ اﻟﻤﻼﺣﻈﺎت اﻟﺨﺎﺻﺔ أو اﻟﻌﺒﺎرات اﻟﺘﻮﺿﯿﺤﯿﺔ ﺿﻤﻦ اﻟﻤﻠﻒ واﻟﺘﻲ‬
‫ﯾﻘﺼﺪ أن ﻻ ﺗﻈﮭﺮ ﻋﻨﺪ اﺳﺘﻌﺮاض ھﺬا اﻟﻤﻠﻒ ﻓﻲ اﻟﻤﺘﺼﻔﺢ‪.‬‬

‫>‪This is line one<BR‬‬

‫>‪<!-- This is line two --><BR‬‬
‫>‪and, this is line three<BR‬‬

‫وھﺬه ھﻲ اﻟﻨﺘﯿﺠﺔ‬

‫‪121‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫‪This is line one‬‬

‫‪and, this is line three‬‬

‫ﻣﻦ اﻟﻤﺆﻛﺪ أﻧﻚ ﺗﻌﺮف اﻟﻮﺳﻢ >‪ <BR‬واﻟﺬي ﯾﻘﻮم ﺑﺎﻟﺘﺤﻜﻢ ﻓﻲ ﻧﮭﺎﯾﺎت اﻷﺳﻄﺮ )أي أﻧﮫ‬
‫ﯾﻨﮭﻲ اﻟﺴﻄﺮ اﻟﺤﺎﻟﻲ ﺑﺤﯿﺚ ﯾﻈﮭﺮ اﻟﻨﺺ اﻟﺬي ﯾﻠﯿﮫ ﻓﻲ ﺳﻄﺮ ﺟﺪﯾﺪ(‪ .‬ﻓﮭﻞ ﺗﻌﻠﻢ أﻧﮫ ﯾﻮﺟﺪ‬
‫ﺧﺎﺻﯿﺔ ﻟﮭﺬا اﻟﻮﺳﻢ وھﻲ ‪CLEAR‬؟‬

‫ﻟﻜﻲ ﺗﺘﻮﺿﺢ ﻟﻚ ﻃﺒﯿﻌﺔ ﻋﻤﻞ ھﺬه اﻟﺨﺎﺻﯿﺔ‪ ،‬ﻗﻢ ﺑﻤﺮاﺟﻌﺔ ﻣﺎ ذﻛﺮﻧﺎه ﻓﻲ اﻟﺪرس اﻟﺨﺎﻣﺲ‬
‫ﻋﻦ اﻟﺼﻮر واﻟﺮﺳﻮﻣﺎت‪ ،‬واﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ ‪ ALIGN‬اﻟﺘﻲ ﺗﺤﺪد ﻣﻮﻗﻊ ھﺬه اﻟﺼﻮر‬
‫ﻋﻠﻰ اﻟﺼﻔﺤﺔ‪ .‬ﺣﺴﻨﺎً‪ ،‬ﻟﻘﺪ إﺗﻔﻘﻨﺎ ﻓﻲ ﺣﯿﻨﮫ ﻋﻠﻰ أن اﻟﻘﯿﻤﺔ ‪ right‬ﺗﻮﺟﮫ اﻟﺼﻮرة إﻟﻰ ﯾﻤﯿﻦ‬
‫اﻟﺼﻔﺤﺔ وأن اﻟﻨﺺ اﻟﺬي ﯾﻠﯿﮭﺎ ﯾﻈﮭﺮ ﻣﻠﺘﻔﺎً ﺑﻌﺪة أﺳﻄﺮ ﻋﻠﻰ اﻟﺠﮭﺔ اﻟﯿﺴﺮى‪ .‬وﻛﺬﻟﻚ اﻷﻣﺮ‬
‫)ﺑﺼﻮرة ﻣﻌﻜﻮﺳﺔ( ﻋﻨﺪ اﺳﺘﺨﺪام اﻟﻘﯿﻤﺔ ‪ .left‬وﺣﺘﻰ ﻟﻮ اﺳﺘﺨﺪﻣﻨﺎ اﻟﻘﯿﻤﺔ ‪ bottom‬أو ﻟﻢ‬
‫ﻧﻘﻢ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺎﺻﯿﺔ ‪ ALIGN‬أﺻﻼً‪ ،‬ﻓﺴﻮف ﻧﺠﺪ أن اﻟﻨﺺ اﻟﺬي ﯾﻠﯿﮭﺎ ﯾﻈﮭﺮ ﺑﻤﺤﺎذاة‬
‫اﻟﺤﺎﻓﺔ اﻟﺴﻔﻠﻰ ﻟﻠﺼﻮرة‪.‬‬

‫ﯾﺘﻠﺨﺺ ﻋﻤﻞ اﻟﺨﺎﺻﯿﺔ ‪ CLEAR‬ﻓﻲ ﻣﻨﻊ اﻟﻨﺺ ﻣﻦ اﻹﻟﺘﻔﺎف ﻋﻠﻰ أي ﻣﻦ ﺟﺎﻧﺒﻲ‬

‫اﻟﺼﻮرة‪.‬‬

‫وھﻲ ﺗﺄﺧﺬ اﻟﻘﯿﻢ ‪ right‬اﻟﺘﻲ ﺗﻤﻨﻊ ﻇﮭﻮر اﻟﻨﺺ إﻻّ ﻋﻨﺪ ﺑﺪاﯾﺔ اﻟﮭﺎﻣﺶ اﻷﯾﻤﻦ اﻟﻔﺎرغ ﺑﻌﺪ‬
‫اﻟﺼﻮرة )أي ﺑﻤﻨﺘﮭﻰ اﻟﺒﺴﺎﻃﺔ ﺗﻤﻨﻊ ﻇﮭﻮر اﻟﻨﺺ واﻟﺘﻔﺎﻓﮫ ﻋﻠﻰ اﻟﺠﮭﺔ اﻟﯿﺴﺮى‬
‫ﻟﻠﺼﻮرة‪ ...‬أﻟﯿﺴﺖ ھﺬه اﻟﻌﺒﺎرة أﺳﮭﻞ ﻟﻠﻔﮭﻢ؟!!( وﺑﺎﻟﺘﺎﻟﻲ ﻓﺈن ھﺬه اﻟﻘﯿﻤﺔ ﺗﺴﺘﺨﺪم ﻋﻨﺪﻣﺎ‬
‫ﺗﻜﻮن ﻗﯿﻤﺔ ‪ ALIGN‬ﻟﻠﺼﻮرة ھﻲ ‪.right‬‬

‫وﺑﻨﻔﺲ اﻟﻤﺒﺪأ ﻟﻜﻦ ﺑﺼﻮرة ﻣﻌﻜﻮﺳﺔ ﻧﺴﺘﺨﺪم اﻟﻘﯿﻤﺔ ‪ left‬واﻟﺘﻲ ﻓﻲ ﻧﺘﯿﺠﺘﮭﺎ ﺗﻤﻨﻊ إﻟﺘﻔﺎف‬
‫اﻟﻨﺺ ﻋﻠﻰ اﻟﺠﮭﺔ اﻟﯿﻤﻨﻰ ﻣﻦ اﻟﺼﻮرة‪ .‬وذﻟﻚ ﻋﻨﺪﻣﺎ ﺗﻜﻮن ﻣﺤﺎذاة اﻟﺼﻮرة ھﻲ ‪left‬‬
‫‪122‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻣﻨﻄﻖ ﻣﻌﻜﻮس‪ ...‬أﻟﯿﺲ ﻛﺬﻟﻚ؟ ﻋﻠﻰ أﯾﺔ ﺣﺎل إذا ﻛﻨﺖ ﺗﻜﺮة ھﺬه اﻟﺘﻌﻘﯿﺪات وﺗﺤﺐ اﻟﻄﺮق‬
‫اﻟﻤﺨﺘﺼﺮة ﻣﺜﻠﻲ‪ ،‬ﻓﺎﺳﺘﺨﺪم اﻟﻘﯿﻤﺔ ‪ all‬اﻟﺘﻲ ﺗﻤﻨﻊ اﻹﻟﺘﻔﺎف ﻣﻦ ﺟﻤﯿﻊ اﻟﺠﻮاﻧﺐ‪.‬‬

‫ﻣﺎ رأﯾﻚ أن ﻧﻘﺘﺒﺲ ﺑﻌﺾ اﻷﻣﺜﻠﺔ ﻣﻦ اﻟﺪرس اﻟﺨﺎﻣﺲ ﻟﻨﺸﺎھﺪ ﻛﯿﻒ ﺗﻌﻤﻞ ﻣﻊ إﺿﺎﻓﺔ ھﺬه‬
‫اﻟﺨﺎﺻﯿﺔ؟ وﺳﻮف أدرج ھﺬه اﻷﻣﺜﻠﺔ ﻛﻤﺎ ھﻲ ﻧﺼﺎً وﺣﺮﻓﺎً أﻣﺎ اﻹﺿﺎﻓﺎت ﻓﮭﻲ اﻟﻤﻤﯿﺰة‬
‫ﺑﺎﻟﻠﻮن اﻷﺣﻤﺮ‬

‫واﻵن ﻟﻨﺠﺮب اﺳﺘﺨﺪام اﻟﻘﯿﻤﺔ ‪ left‬ﻣﻊ ھﺬا اﻟﻤﺜﺎل ﻧﻔﺴﮫ‬

‫‪123‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺣﺴﻨﺎً ﻟﻨﺴﺘﺨﺪم اﻟﻘﯿﻤﺔ ‪ left‬ﻓﻲ ﻣﻜﺎﻧﮭﺎ اﻟﺼﺤﯿﺢ‪ ،‬أي ﻣﻊ اﻟﻤﺤﺎذاة ‪left‬‬

‫وأﺗﺮك ﻟﻚ اﻟﻤﺠﺎل ﻟﻜﻲ ﺗﺠﺮب اﻟﻘﯿﻤﺔ ‪ all‬ﺑﻨﻔﺴﻚ‬

‫ﻣﻦ اﻟﻘﻮاﻋﺪ اﻹﻓﺘﺮاﺿﯿﺔ ﻟﻠﻤﺘﺼﻔﺤﺎت أن اﻷﺳﻄﺮ ﻓﻲ ﻛﻞ ﻓﻘﺮة ﺗﻠﺘﻒ وﺗﻨﻘﺴﻢ ﺑﺼﻮرة‬

‫ﺗﻠﻘﺎﺋﯿﺔ ﺣﺴﺐ إﺳﺘﺒﺎﻧﺔ اﻟﺸﺎﺷﺔ وﻋﺮض ﻧﺎﻓﺬة اﻟﻤﺘﺼﻔﺢ‪) .‬ھﺬه ﻧﻌﺮﻓﮭﺎ ﻣﻦ اﻟﺪرس اﻷول(‪.‬‬
‫ﻟﻜﻦ ﻟﻨﻘﻞ أﻧﻨﺎ ﻧﺮﯾﺪ ﻣﻦ أﺣﺪ اﻷﺳﻄﺮ أن ﻻ ﯾﻨﻘﺴﻢ ﻣﮭﻤﺎ ﻛﺎن ﻣﻘﺪار اﻹﺳﺘﺒﺎﻧﺔ وﻋﺮض‬
‫اﻟﻨﺎﻓﺬة‪.‬‬

‫ﺣﺴﻨﺎً‪ ،‬ﻛﻞ ﻣﺎ ﻋﻠﯿﻨﺎ ﻓﻌﻠﮫ ھﻮ وﺿﻊ ھﺬا اﻟﺴﻄﺮ ﺿﻤﻦ اﻟﻮﺳﻮم‬

‫>‪<NOBR> ... </NOBR‬‬

‫وھﻲ إﺧﺘﺼﺎر ﻟـِ ‪ NO BReak‬أي )ﻻ إﻧﻘﺴﺎم(‪.‬‬

‫‪124‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ھﺎ ﻗﺪ وﺻﻠﻨﺎ إﻟﻰ ﻧﮭﺎﯾﺔ ھﺬا اﻟﺪرس واﻟﺬي ﻧﺎﻗﺸﻨﺎ ﻓﯿﮫ وﺳﻮﻣﺎً ﻣﻨﻮﻋﺔ ﺗﺘﻌﻠﻖ ﻓﻲ ﻣﺠﻤﻠﮭﺎ‬
‫ﺑﺘﻨﺴﯿﻖ اﻟﺼﻔﺤﺎت‪ .‬أراك ﻋﻠﻰ ﺧﯿﺮ ﻓﻲ اﻟﺪرس اﻟﺘﺎﻟﻲ‪.‬‬

‫أﻟﯿﺲ ھﺬا‬
‫ﻣﻤﺘﻌﺎ‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫!!!!!!!!!!!!!!!!!!‬
‫‪HHHHHHHHHHHHHH‬‬
‫‪HHHHHHHHHHHHHH‬‬
‫‪HHHHHHHHHHHHHH‬‬
‫‪HHH‬‬
‫‪125‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﺤﺎﺩﻱ ﻋﺸﺮ‬

‫‪1‬‬

‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺤﺎدي ﻋﺸﺮ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬

‫ﺳﯿﻜﻮن ھﺬا اﻟﺪرس اﻷول ﻣﻦ درﺳﯿﻦ ﺳﻨﺘﺤﺪث ﻓﯿﮭﻤﺎ ﻋﻦ اﻟﻨﻤﺎذج وﻛﯿﻔﯿﺔ ﺗﻀﻤﯿﻨﮭﺎ ﻓﻲ‬
‫ﺻﻔﺤﺎت اﻟﻮﯾﺐ‪.‬‬

‫ﻣﻊ أن اﻟﻨﻤﺎذج ﺗﻌﺘﺒﺮ ﻣﻦ اﻟﻤﻮاﺿﯿﻊ اﻟﻤﺘﻘﺪﻣﺔ )وﻏﯿﺮ اﻟﺴﮭﻠﺔ( ﻧﻮﻋﺎً ﻣﺎ ﻓﻲ ﻟﻐﺔ ‪HTML‬‬
‫إﻻ أن ﻣﻌﻈﻢ ﻣﻮاﻗﻊ اﻟﻮﯾﺐ ﺗﻜﺎد ﻻ ﺗﺨﻠﻮ ﻣﻦ وﺟﻮدھﺎ‪ ،‬وذﻟﻚ ﻟﻌﺪة أﺳﺒﺎب ﻟﻌﻞ ﻣﻦ أھﻤﮭﺎ‬
‫إﯾﺠﺎد إﻣﻜﺎﻧﯿﺔ ﻟﻠﺘﻔﺎﻋﻞ ﺑﯿﻦ اﻟﻤﻮﻗﻊ وﺻﺎﺣﺒﮫ ﻣﻦ ﺟﮭﺔ واﻟﺰوار ﻣﻦ ﺟﮭﺔ أﺧﺮى‪...‬أﺣﯿﺎﻧﺎ ﻗﺪ‬
‫ﺗﺤﺘﺎج ﻛﻤﺼﻤﻢ ﻟﻤﻮﻗﻊ وﯾﺐ أن ﺗﻌﺮف آراء زوار ﻣﻮﻗﻌﻚ ﻓﻲ ﻣﺴﺎﺋﻞ ﻣﻌﯿﻨﺔ وﻗﺪ ﺗﻜﺘﻔﻲ‬
‫ﺑﺮﺳﺎﺋﻞ اﻟﺒﺮﯾﺪ اﻹﻟﻜﺘﺮوﻧﻲ اﻟﺘﻲ ﯾﺮﺳﻠﻮھﺎ ﻟﻚ‪ ،‬ﻟﻜﻦ ﻋﻨﺪﻣﺎ ﺗﺮﯾﺪ ﻣﻌﺮﻓﺔ أﺷﯿﺎء ﻣﺤﺪدة ﺑﺬاﺗﮭﺎ‬
‫ﻓﺈن اﻟﻨﻤﺎذج ھﻲ اﻟﺨﯿﺎر اﻷﻓﻀﻞ ﻟﻚ‪ .‬ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ إﻣﻜﺎﻧﯿﺔ ﺗﻨﻈﯿﻢ اﻟﺒﯿﺎﻧﺎت اﻟﻤﺪﺧﻠﺔ ﻣﻦ‬
‫ﺧﻼﻟﮭﺎ وﺳﮭﻮﻟﺔ وﺳﺮﻋﺔ اﺳﺘﺨﺪاﻣﮭﺎ ﻣﻦ ﻗﺒﻞ زوار اﻟﻤﻮﻗﻊ‪ .‬وﻣﻦ أﺑﺮز اﻷﻣﺜﻠﺔ ﻋﻠﻰ‬
‫اﻟﻨﻤﺎذج ﻓﻲ ﻣﻮاﻗﻊ اﻟﻮﯾﺐ ھﻲ دﻓﺎﺗﺮ اﻟﺰوار وﺻﻔﺤﺎت اﻟﺒﺤﺚ ﻋﻦ اﻟﻜﻠﻤﺎت أو اﻟﻌﺒﺎرات‬
‫داﺧﻞ اﻟﻤﻮاﻗﻊ‪.‬‬

‫ﻻ ﺗﻜﻤﻦ ﺻﻌﻮﺑﺔ اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﻨﻤﺎذج ﻓﻲ ﻛﻮﻧﮭﺎ ﻣﻌﻘﺪة ﺑﺤﺪ ذاﺗﮭﺎ‪ ،‬ﻛﻼ ‪ ...‬ﻓﮭﻲ إﺣﺪى‬
‫اﻟﻌﻨﺎﺻﺮ اﻟﺘﻲ ﺗﺪﻋﻤﮭﺎ ﻟﻐﺔ ‪ HTML‬وھﻲ ﻣﺠﺮد وﺳﻮم ﻋﺎدﯾﺔ ﻣﺜﻠﮭﺎ ﻣﺜﻞ اﻟﻮﺳﻮم اﻟﺘﻲ‬
‫ﺗﻌﺎﻣﻠﻨﺎ ﻣﻌﮭﺎ ﻓﻲ ﺟﻤﯿﻊ اﻟﺪروس اﻟﺴﺎﺑﻘﺔ‪ .‬وﺑﺈﻣﻜﺎﻧﻚ إﻧﺸﺎء اﻟﻨﻤﺎذج ﻓﻲ ﻣﻮﻗﻌﻚ ﺑﻨﻔﺲ‬
‫اﻟﺴﮭﻮﻟﺔ اﻟﺘﻲ ﺗﺪرج ﻓﯿﮭﺎ ﺟﺪوﻻً أو إﻃﺎراً )ھﺬا ﺑﺎﻟﻄﺒﻊ إذا ﻛﻨﺖ ﺗﻌﺘﻘﺪ أن اﻟﺠﺪاول‬
‫واﻹﻃﺎرات ﺳﮭﻠﺔ( ﻟﻜﻦ اﻟﺘﺪاﺧﻞ ﺑﯿﻨﮭﺎ )وأﻋﻨﻲ اﻟﻨﻤﺎذج( وﺑﯿﻦ ﻟﻐﺎت اﻟﺒﺮﻣﺠﺔ اﻟﻤﺘﻘﺪﻣﺔ ﻓﻲ‬
‫‪126‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫اﻟﻮﯾﺐ ﻣﺜﻞ ‪ JavaScript, CGI‬ھﻲ ﻣﺎ ﯾﺠﻌﻠﮭﺎ ﺗﺨﺘﻠﻒ ﻋﻦ ﺳﺎﺑﻘﯿﮭﺎ ﻣﻦ اﻟﻮﺳﻮم أو‬

‫اﻟﻌﻨﺎﺻﺮ اﻷﺧﺮى‪ .‬ﺧﺎﺻﺔ إذا اﺣﺘﺠﺖ إﻟﻰ ﺑﻌﺾ اﻟﻤﻘﺎﻃﻊ اﻟﺒﺮﻣﺠﯿﺔ ﻣﻦ ھﺬه اﻟﻠﻐﺎت ﺿﻤﻦ‬
‫ﻧﻤﺎذﺟﻚ‪ .‬أﻣﺎ إذا اﻛﺘﻔﯿﺖ ﺑﺎﻹﻣﻜﺎﻧﺎت اﻟﻤﺘﻮاﺿﻌﺔ اﻟﺘﻲ ﺗﻮﻓﺮھﺎ ‪ HTML‬ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻨﻤﺎذج‪.‬‬
‫ﻓﻤﺎ ﻣﻦ ﻣﺸﻜﻠﺔ‪ ...‬ﻷﻧﮫ ﺳﯿﻜﻮن ﺑﺈﻣﻜﺎﻧﻚ اﻟﺘﻌﺎﻣﻞ ﻣﻌﮭﺎ ﺑﻜﻞ ﺑﺴﺎﻃﺔ‪ .‬وﻓﻲ ھﺬا اﻟﺪرس ﻟﻦ‬
‫ﻧﺘﻄﺮق ﺑﺎﻟﻄﺒﻊ إﻟﻰ أي ﻣﻦ اﻟﻠﻐﺎت ﺳﻮى ‪.HTML‬‬

‫ﻗﺒﻞ أن ﻧﺒﺪأ‪ ،‬ﻣﺎ رأﯾﻚ ﺑﺰﯾﺎرة ﺻﻔﺤﺔ )دﻓﺘﺮ اﻟﺰوار( ﻓﻲ ھﺬا اﻟﻤﻮﻗﻊ ﻟﻺﻃﻼع ﻋﻠﻰ ﻣﺜﺎل‬
‫ﻟﻠﻨﻤﺎذج‪) ،‬ورﺑﻤﺎ ﺗﻮد أﯾﻀﺎً اﻟﺘﻮﻗﯿﻊ ﻓﯿﮫ(‪.‬‬
‫ﻛﻢ ﺷﻜﻼً ﻣﻦ أﺷﻜﺎل إدﺧﺎل اﻟﺒﯿﺎﻧﺎت ﯾﻮﺟﺪ ﻓﻲ ھﺬا اﻟﺪﻓﺘﺮ؟ اﻟﺤﻘﯿﻘﺔ أﻧﮫ ﯾﻮﺟﺪ ﺳﺘﺔ أﺷﻜﺎل‬
‫ھﻲ ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬

‫‪Text‬‬

‫‪Option 1‬‬

‫‪3‬‬ ‫‪2‬‬ ‫‪1‬‬

‫أرﺳﻞ‬

‫اﻧﺴﻰ اﻷﻣﺮ‬

‫وھﻲ اﻷﺷﻜﺎل اﻟﻤﻮﺟﻮدة ﻓﻲ اﻟﺪﻓﺘﺮ ﻓﻘﻂ‪ .‬وأود أن أﻟﻔﺖ ﻧﻈﺮك إﻟﻰ وﺟﻮد أﺷﻜﺎل أﺧﺮى‬
‫ﺳﻮف ﯾﺘﻢ اﻟﺘﻌﺎﻣﻞ ﻣﻌﮭﺎ ﻣﻦ ﺧﻼل ھﺬا اﻟﺪرس‪.‬‬

‫واﻵن إﻟﻰ اﻟﻌﻤﻞ ﯾﺎ ﻋﺰﯾﺰي اﻟﻤﺘﺪرب‬

‫‪127‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻣﻊ أن اﻷﺷﻜﺎل اﻟﺴﺎﺑﻘﺔ ﺗﺨﺘﻠﻒ ﻋﻦ ﺑﻌﻀﮭﺎ اﻟﺒﻌﺾ ﻣﻦ ﺣﯿﺚ اﻟﻤﺒﺪأ واﻟﻤﻈﮭﺮ )وﻃﺮﯾﻘﺔ‬
‫اﻟﺘﻌﺮﯾﻒ أﯾﻀﺎً( إﻻ أﻧﮭﺎ ﯾﺠﺐ أن ﺗﺪرج ﺟﻤﯿﻌﺎً ﺿﻤﻦ وﺳﻤﯿﻦ أﺳﺎﺳﯿﯿﻦ ﻟﻠﻨﻤﺎذج ھﻤﺎ‪:‬‬

‫>‪</FORM> ... <FORM‬‬

‫وﻛﻤﺎ ﺟﺮت اﻟﻌﺎدة ﻧﺤﺘﺎج ﻟﺘﺤﺪﯾﺪ ﺑﻌﺾ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﺗﺘﻌﻠﻖ ﺑﻄﺒﯿﻌﺔ ھﺬا اﻟﻨﻤﻮذج‪ .‬وﻟﺪﯾﻨﺎ‬
‫ھﻨﺎ ﺛﻼث ﺧﺼﺎﺋﺺ‪:‬‬

‫‪ACTION‬‬

‫ﺗﺤﺪد اﻟﻌﻨﻮان اﻟﺬي ﺳﯿﺘﻢ إرﺳﺎل ﺑﯿﺎﻧﺎت اﻟﻨﻤﻮذج إﻟﯿﮫ ﻟﺘﺘﻢ ﻣﻌﺎﻟﺠﺘﮭﺎ ﺑﺎﻟﺼﻮرة اﻟﻤﻄﻠﻮﺑﺔ‪.‬‬
‫وﻋﺎدة ﯾﻜﻮن ھﺬا ﻋﻨﻮاﻧﺎً ﻟﺒﺮﯾﺪ إﻟﻜﺘﺮوﻧﻲ ‪ Email‬ﺳﻮف ﯾﺘﻢ إرﺳﺎل ﺑﯿﺎﻧﺎت اﻟﻨﻤﻮذج إﻟﯿﮫ‪.‬‬
‫أو ﻗﺪ ﯾﻜﻮن ﻋﻨﻮاﻧﺎً ﻟﺒﺮﻧﺎﻣﺞ ‪ CGI‬ﻣﻮﺟﻮد ﻋﻠﻰ اﻟﻜﻤﺒﯿﻮﺗﺮ اﻟﺨﺎدم ‪ Server‬اﻟﺬي ﺗﺘﻮاﺟﺪ‬
‫ﻋﻠﯿﮫ ﺻﻔﺤﺔ اﻟﻮﯾﺐ‪ ،‬ﺣﯿﺚ ﯾﺴﺘﻘﺒﻞ ھﺬه اﻟﺒﯿﺎﻧﺎت وﯾﻌﺎﻟﺠﮭﺎ ﺣﺴﺐ اﻟﺘﻌﻠﯿﻤﺎت اﻟﻤﻮﺟﻮدة ﻓﯿﮫ‬
‫ﻛﺄن ﯾﻀﯿﻔﮭﺎ ﻣﺜﻼً إﻟﻰ إﺣﺪى اﻟﺼﻔﺤﺎت )ﻛﻤﺎ ﯾﺤﺪث ﻋﺎدة ﻓﻲ دﻓﺎﺗﺮ اﻟﺰوار( أو ﯾﺘﺤﻘﻖ ﻣﻦ‬
‫ﺻﺤﺔ ﺑﻌﺾ اﻟﺤﻘﻮل اﻟﻤﺪﺧﻠﺔ وﻣﻄﺎﺑﻘﺘﮭﺎ ﻟﻤﻌﺎﯾﯿﺮ ﻣﻌﯿﻨﺔ‪ ،‬أو أن ﯾﻘﻮم ﺑﺎﻟﺒﺤﺚ ﻋﻦ ﻛﻠﻤﺔ أو‬
‫ﻋﺒﺎرة ﺿﻤﻦ ﺻﻔﺤﺎت اﻟﻤﻮﻗﻊ ﻛﻤﺎ ﻓﻲ ﻧﻤﺎذج اﻟﺒﺤﺚ اﻟﻤﻮﺟﻮدة ﻓﻲ ﻣﻮاﻗﻊ اﻟﻮﯾﺐ‪.‬‬

‫‪<FORM ACTION="mailto:someone@domain.com"> ...‬‬

‫>‪</FORM‬‬
‫‪<FORM ACTION="name_and_address_of_CGI_script"> ...‬‬
‫>‪</FORM‬‬

‫‪128‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫‪METHOD‬‬

‫ﺗﺤﺪد اﻟﻄﺮﯾﻘﺔ اﻟﺘﻲ ﺳﯿﺘﻢ ﺑﮭﺎ اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﻌﻨﻮان اﻟﻤﺤﺪد ﻓﻲ اﻟﺨﺎﺻﯿﺔ اﻟﺴﺎﺑﻘﺔ‬
‫‪ .ACTION‬وھﻨﺎك ﻗﯿﻤﺘﯿﻦ ﻟﮭﺬه اﻟﺨﺎﺻﯿﺔ ھﻤﺎ‪ GET :‬اﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻓﻲ ﺣﺎﻟﺔ ﻛﻮن‬
‫ﻋﻤﻠﯿﺔ اﻟﻤﻌﺎﻟﺠﺔ داﺧﻠﯿﺔ أي ﺗﺘﻢ داﺧﻞ اﻟﺨﺎدم ‪ Server‬ﻧﻔﺴﮫ‪ .‬ﻓﻔﻲ ﻣﺜﺎﻟﻨﺎ اﻟﺴﺎﺑﻖ ﻋﻨﺪﻣﺎ‬
‫ﻧﺴﺘﺨﺪم ﻧﻤﻮذج اﻟﺒﺤﺚ ﻋﻦ ﻛﻠﻤﺔ ﻓﻲ اﻟﻤﻮﻗﻊ‪ ،‬ﻓﺈن ﻋﻤﻠﯿﺔ اﻟﻤﻌﺎﻟﺠﺔ )أي اﻟﺒﺤﺚ( ﺗﺠﺮي‬
‫ﻣﺒﺎﺷﺮة ﻓﻲ اﻟﻤﻮﻗﻊ‪ .‬واﻟﻘﯿﻤﺔ اﻟﺜﺎﻧﯿﺔ ھﻲ ‪ Post‬وﺗﺴﺘﺨﺪم ﻋﻨﺪﻣﺎ ﺗﻜﻮن ﻋﻤﻠﯿﺔ اﻟﻤﻌﺎﻟﺠﺔ‬
‫ﺧﺎرﺟﯿﺔ ﻛﺄن ﯾﺘﻢ إرﺳﺎل اﻟﺒﯿﺎﻧﺎت إﻟﻰ ﻋﻨﻮان ﺑﺮﯾﺪ إﻟﻜﺘﺮوﻧﻲ‪.‬‬

‫"‪<FORM ACTION="mailto:someone@domain.com‬‬
‫>‪METHOD="post"> ... </FORM‬‬
‫"‪<FORM ACTION="name_and_address_of_CGI_script‬‬
‫>‪METHOD="get"> ... </FORM‬‬

‫ﻧﺒﺪأ اﻵن ﻓﻲ ﻋﻤﻠﯿﺔ ﺗﻌﺮﯾﻒ أﺷﻜﺎل اﻟﺒﯿﺎﻧﺎت ﻓﻲ اﻟﻨﻤﻮذج‪ .‬وﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪<INPUT‬‬
‫ﻟﺘﻌﺮﯾﻔﮭﺎ واﻟﺤﻘﯿﻘﺔ أن ھﺬه اﻷﺷﻜﺎل ھﻲ ﻣﺠﺮد ﺧﺼﺎﺋﺺ أو ﺑﺎﻷﺣﺮى ﻗﯿﻢ ﻟﺨﺼﺎﺋﺺ ﺗﺎﺑﻌﺔ‬
‫ﻟﮭﺬا اﻟﻮﺳﻢ‪ .‬ﻛﯿﻒ؟ ‪ ...‬ﻟﻨﺄﺧﺬ ﻣﺜﺎﻻً ﻋﻠﻰ ذﻟﻚ ﻷوﺿﺢ ﻟﻚ ھﺬا اﻟﻤﻔﮭﻮم‬

‫ﻣﻼﺣﻈﺔ‪ :‬إذا ﻛﻨﺖ ﺗﺴﺘﺨﺪم ‪ x.3 Sindbad‬ﻓﺴﯿﺒﺪو اﻟﺤﻘﻞ واﻟﻨﺺ اﻟﻤﺠﺎور ﻟﮫ ﺑﺼﻮرة‬
‫ﻣﻌﻜﻮﺳﺔ‪ ،‬وھﻲ ﻣﺸﻜﻠﺔ ﻧﺎﺗﺠﺔ ﻋﻦ ﺑﺮﻧﺎﻣﺞ ‪ Netscape‬اﻟﺬي ﯾﻌﻤﻞ ﻣﻦ ﺧﻼﻟﮫ‬

‫‪:Please enter your address‬‬

‫‪129‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺣﺴﻨﺎً‪ ،‬ﻟﻘﺪ اﺳﺘﺨﺪﻣﺖ اﻟﻮﺳﻢ >‪ <INPUT‬ﻟﺘﻌﺮﯾﻒ ھﺬا اﻟﺸﻜﻞ )ھﺬه إﺗﻔﻘﻨﺎ ﻋﻠﯿﮭﺎ ﻣﺴﺒﻘﺎً(‬
‫وﻣﻦ ﺛﻢ ﻗﻤﺖ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺎﺻﯿﺔ ‪ TYPE‬ﻟﮭﺬا اﻟﻮﺳﻢ ﻟﺘﺤﺪﯾﺪ ﻧﻮع اﻟﺸﻜﻞ اﻟﺬي أرﯾﺪه‬
‫وأﻋﻄﯿﺘﮭﺎ اﻟﻘﯿﻤﺔ ‪ TEXT‬أي‬

‫>‪<FORM ...‬‬
‫>"‪<INPUT TYPE="text‬‬
‫>‪</FORM‬‬

‫ﻟﯿﻨﺘﺞ ﻟﺪﯾﻨﺎ ھﺬا اﻟﺸﻜﻞ‪:‬‬

‫ﻓﻘﺮة ﻣﻌﺘﺮﺿﺔ‪:‬‬
‫إﻟﯿﻚ ﺟﻤﯿﻊ اﻷﺷﻜﺎل )اﻟﻘﯿﻢ( اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ اﻟﺨﺎﺻﯿﺔ‬
‫‪ TYPE‬وﺳﻮف أﺗﺮﻛﮭﺎ اﻵن ﺑﺪون ﺗﻌﻠﯿﻖ ﻟﺤﯿﻦ ﻣﻨﺎﻗﺸﮭﺎ‬
‫ﻻﺣﻘﺎً ﺑﺸﻜﻞ ﻣﻔﺼﻞ‪ .‬ﻣﻊ ﻣﻼﺣﻈﺔ أن ھﻨﺎك ﺷﻜﻠﯿﻦ‬
‫آﺧﺮﯾﻦ ﻧﺪرﺟﮭﻤﺎ ﺑﺎﻟﻮﺳﻮم‬
‫>‪<TEXTAREA> ،<SELECT‬‬
‫>"‪<INPUT TYPE="text‬‬

‫>"‪<INPUT TYPE="password‬‬

‫>"‪<INPUT TYPE="hidden‬‬

‫>"‪<INPUT TYPE="radio‬‬

‫>"‪<INPUT TYPE="checkbox‬‬

‫‪Soumettre la requête‬‬ ‫>"‪<INPUT TYPE="submit‬‬

‫‪Rétablir‬‬ ‫>"‪<INPUT TYPE="reset‬‬

‫>"‪<INPUT TYPE="button‬‬

‫‪130‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺃﺭﺠﻭ ﺃﻥ ﺃﻜﻭﻥ ﻗﺩ ﻭﻀﺤﺕ ﻟﻙ ﺍﻵﻥ ﻭﻅﻴﻔﺔ ﺍﻟﺨﺎﺼﻴﺔ ‪ TYPE‬ﻭﺠﻤﻴﻊ ﺍﻟﻘﻴﻡ ﺍﻟﻤﺴﺘﺨﺩﻤﺔ‬

‫ﻤﻌﻬﺎ‬

‫وﻧﻌﻮد اﻵن إﻟﻰ ﻣﺜﺎﻟﻨﺎ‪ ..‬اﻟﺨﺎﺻﯿﺔ اﻟﺜﺎﻧﯿﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ >‪ <INPUT‬ھﻲ ‪NAME‬‬
‫وﺗﺴﺘﺨﺪم ﻟﺘﺴﻤﯿﺔ ﺣﻘﻞ اﻟﺒﯿﺎﻧﺎت ﺣﯿﺚ ﻗﻤﺖ ﺑﺈﻋﻄﺎء اﻹﺳﻢ ‪ address‬ﻟﮭﺬا اﻟﺤﻘﻞ ﻓﻲ‬
‫اﻟﻤﺜﺎل‪) .‬ﻟﻚ ﻛﻞ اﻟﺤﺮﯾﺔ ﻓﻲ إﻋﻄﺎء اﻹﺳﻢ اﻟﺬي ﺗﺮﯾﺪه ﻟﻠﺤﻘﻞ(‪ .‬واﻟﺤﻘﯿﻘﺔ أن ھﺬا اﻹﺳﻢ‬
‫ﯾﻌﺮّف اﻟﺤﻘﻞ ﻓﻲ داﺧﻞ اﻟﻨﻤﻮذج ﻧﻔﺴﮫ‪ ،‬ﺑﺤﯿﺚ ﯾﻤﻜﻦ اﺳﺘﺨﺪاﻣﮫ ﻓﯿﻤﺎ ﺑﻌﺪ ﻟﻠﺤﺎﺟﺎت اﻟﺒﺮﻣﺠﯿﺔ‬
‫وﺿﺮورات اﻟﻤﻌﺎﻟﺠﺔ إن وﺟﺪت ﻣﻦ ﻗﺒﻞ اﻟﺒﺮاﻣﺞ اﻟﺘﻲ ﻗﺪ ﺗﻀﯿﻔﮭﺎ ﻛﻤﺼﻤﻢ ﻟﻠﻤﻮﻗﻊ‪ .‬وﺣﺘﻰ‬
‫ﻋﻨﺪﻣﺎ ﺗﺮﯾﺪ أن ﯾُﺮﺳﻞ اﻟﻨﻤﻮذج إﻟﯿﻚ ﺑﺎﻟﺒﺮﯾﺪ ﻓﺈن ﺣﻘﻮﻟﮫ ﺗﻌﺮّف ﺑﺎﻻﺳﻢ اﻟﺬي أدرﺟﺘﮫ ﻟﮭﺎ ﻣﻦ‬
‫ﺧﻼل ھﺬه اﻟﺨﺎﺻﯿﺔ‪) .‬ﻻﺣﻆ ﻣﺎ ﻗﻠﺘُﮫ ﺳﺎﺑﻘﺎً ﻋﻦ ﺗﻌﺮﯾﻒ أﺳﻤﺎء اﻟﺤﻘﻮل ﻋﻨﺪﻣﺎ ﺗﺤﺪﺛﻨﺎ ﻋﻦ‬
‫اﻟﺘﺮﻣﯿﺰ واﻟﻄﺮق اﻟﺘﻲ ﺗﺼﻞ ﺑﮭﺎ ﻣﺤﺘﻮﯾﺎت اﻟﻨﻤﻮذج(‪ .‬وﻛﻤﺎ ﺗﺮى ﻻ ﯾﻮﺟﺪ )ﺣﺘﻰ اﻵن( ﻣﺎ‬
‫ﯾﺪل ﻋﻠﻰ أن ھﺬا اﻟﺤﻘﻞ ﯾﺨﺘﺺ ﺑﺈدﺧﺎل اﻟﻌﻨﻮان‪.‬‬

‫>‪<FORM ...‬‬
‫>"‪<INPUT TYPE="text" NAME="address‬‬
‫>‪</FORM‬‬

‫أﻣﺎ اﻟﻌﺒﺎرة ‪ : Please enter your address‬ﻓﮭﻲ ﻣﺠﺮد ﻋﺒﺎرة ﺗﻮﺿﯿﺤﯿﺔ أﺿﻔﺘﮭﺎ‬
‫ﻟﯿﻌﺮف اﻟﺰاﺋﺮ ﻣﺎ اﻟﺬي ﯾﺠﺐ ﻋﻠﯿﮫ ﻛﺘﺎﺑﺘﮫ وﺗﺴﺘﻄﯿﻊ ﺻﯿﺎﻏﺔ ھﺬه اﻟﻌﺒﺎرة ﻛﻤﺎ ﺗﺮﯾﺪ‪ .‬ﻓﻔﻲ ﻛﻞ‬
‫اﻷﺣﻮال ﻟﯿﺲ ﻟﮭﺎ ﻋﻼﻗﺔ ﺑﺠﻮھﺮ اﻟﻨﻤﻮذج ﻧﻔﺴﮫ ﺑﻌﻜﺲ اﻟﺨﺎﺻﯿﺔ ‪.NAME‬‬

‫>‪<FORM ...‬‬
‫"‪Please enter your address : <INPUT TYPE="text‬‬

‫‪131‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>"‪NAME="address‬‬
‫>‪</FORM‬‬
‫‪: Please enter your address‬‬

‫ﻗﺪ ﻧﺤﺘﺎج أﺣﯿﺎﻧﺎً إﻟﻰ ﺗﺤﺪﯾﺪ ﺣﺠﻢ اﻟﺤﻘﻞ وﻟﺬﻟﻚ ﻧﺴﺘﺨﺪم اﻟﺨﺎﺻﯿﺔ ‪ SIZE‬ﻣﻊ اﻟﺮﻗﻢ اﻟﺬي‬
‫ﻧﺮﯾﺪه ﻛﺤﺠﻢ ﻟﻠﺤﻘﻞ‪ ،‬ﻟﻨﺠﺮب اﻟﺮﻗﻢ ‪40‬‬

‫>‪<FORM ...‬‬
‫"‪Please enter your address : <INPUT TYPE="text‬‬
‫>"‪NAME="address" SIZE="40‬‬
‫>‪</FORM‬‬

‫‪: Please enter your address‬‬

‫اﻟﺨﺎﺻﯿﺔ ‪ VALUE‬ﺗﺴﺘﺨﺪم ﻓﻲ اﻟﺤﺎﻻت اﻟﺘﻲ ﻧﺘﻮﻗﻊ ﻓﯿﮭﺎ ﻛﺘﺎﺑﺔ ﻗﯿﻤﺔ دارﺟﺔ أو ﻣﺘﻜﺮرة‬
‫ﻣﻦ ﻗﺒﻞ ﻣﻌﻈﻢ اﻟﺰوار وﻟﻠﺘﺴﮭﯿﻞ ﻋﻠﯿﮭﻢ ﯾﺘﻢ ﺗﻌﯿﯿﻨﮭﺎ ﻛﻘﯿﻤﺔ إﻓﺘﺮاﺿﯿﺔ وﺑﺎﻟﻄﺒﻊ ﻣﻊ ﺗﻮﻓﺮ‬
‫إﻣﻜﺎﻧﯿﺔ ﺣﺬﻓﮭﺎ وﻛﺘﺎﺑﺔ ﻣﺎ ﯾﺮﯾﺪﻧﮫ ﺑﺪﻻً ﻣﻨﮭﺎ‪.‬‬

‫>‪<FORM ...‬‬
‫"‪Please enter your address : <INPUT TYPE="text‬‬
‫>"‪NAME="address" VALUE="maroc‬‬
‫>‪</FORM‬‬
‫‪maroc‬‬
‫‪: Please enter your address‬‬

‫‪132‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻻ ﯾﻮﺟﺪ ﻟﻠﺨﺎﺻﯿﺔ ‪ SIZE‬أي ﺻﻔﺔ ﺗﺤﻜﻤﯿﺔ ﺑﺎﻟﻨﺴﺒﺔ ﻟﺤﺠﻢ اﻟﻤﺪﺧﻼت اﻟﺘﻲ ﯾﻤﻜﻦ ﻟﻠﺰاﺋﺮ أن‬
‫ﯾﻜﺘﺒﮭﺎ داﺧﻞ اﻟﺤﻘﻞ‪ .‬وﺑﻌﺒﺎرة أﺧﺮى‪ :‬ﺻﺤﯿﺢ أﻧﻨﺎ ﺣﺪدﻧﺎ ﺣﺠﻢ اﻟﺤﻘﻞ ﻟﻜﻦ ذﻟﻚ ﯾﺴﺮي ﻓﻘﻂ‬
‫ﻋﻠﻰ ﻣﻈﮭﺮه ﻋﻠﻰ اﻟﺸﺎﺷﺔ‪ .‬وﻻ ﯾﻮﺟﺪ ﻣﺎ ﯾﻤﻨﻊ اﻟﺰاﺋﺮ ﻣﻦ اﻟﻜﺘﺎﺑﺔ ﺑﺤﯿﺚ ﯾﺘﺠﺎوز اﻟﻨﺺ ﺣﺠﻢ‬
‫اﻟﺤﻘﻞ اﻟﻤﺤﺪد‪ .‬وھﻨﺎ ﯾﺄﺗﻲ دور اﻟﺨﺎﺻﯿﺔ ‪ MAXLENGTH‬ﻟﺘﺘﺤﻜﻢ ﺑﺎﻟﺤﺪ اﻷﻗﺼﻰ‬
‫ﻟﻠﻨﺺ اﻟﻤﺪﺧﻞ‪.‬‬

‫>‪<FORM ...‬‬
‫"‪Please enter your address : <INPUT TYPE="text‬‬
‫"‪NAME="address" VALUE="maroc‬‬
‫>"‪SIZE="40" MAXLENGTH="30‬‬
‫>‪</FORM‬‬

‫‪maroc‬‬
‫‪: Please enter your address‬‬

‫ﺣﺎول اﻟﻜﺘﺎﺑﺔ ﻓﻲ ھﺬا اﻟﺤﻘﻞ ﻷﻛﺜﺮ ﻣﻦ ‪ 60‬ﺣﺮﻓﺎً وأﻧﻈﺮ ﻣﺎذا ﺳﯿﺤﺪث؟‬

‫إﻧﺘﮭﯿﻨﺎ اﻵن ﻣﻦ ﺧﺼﺎﺋﺺ اﻟﻮﺳﻢ ‪ INPUT‬ﻓﻤﺎ رأﯾﻚ ﺑﺈﺟﻤﺎﻟﮭﺎ ﻣﺮة أﺧﺮى؟ ﺣﺴﻨﺎً‪ ،‬ھﺬه‬
‫ھﻲ‪:‬‬

‫‪ :TYPE‬ﻟﺘﺤﺪﯾﺪ ﻧﻮع )ﺷﻜﻞ( ﺣﻘﻞ اﻟﺒﯿﺎﻧﺎت‪.‬‬ ‫•‬

‫‪ :NAME‬ﻟﺘﻌﯿﯿﻦ اﺳﻢ ﻟﺤﻘﻞ اﻟﺒﯿﺎﻧﺎت‪.‬‬ ‫•‬

‫‪ :VALUE‬ﻟﺘﻌﯿﯿﻦ ﻗﯿﻤﺔ إﻓﺘﺮاﺿﯿﺔ )ﻣﺒﺪﺋﯿﺔ( ﻟﺤﻘﻞ اﻟﺒﯿﺎﻧﺎت‪.‬‬ ‫•‬

‫‪ :SIZE‬ﻟﺘﺤﺪﯾﺪ ﺣﺠﻢ ﺣﻘﻞ اﻟﺒﯿﺎﻧﺎت‪.‬‬ ‫•‬

‫‪ :MAXLENGTH‬ﻟﺘﻌﯿﯿﻦ اﻟﺤﺪ اﻷﻗﺼﻰ ﻟﻌﺪد اﻟﺤﺮوف اﻟﻤﺪﺧﻠﺔ ﻓﻲ اﻟﺤﻘﻞ‪.‬‬ ‫•‬

‫‪133‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫اﻟﻨﻮع اﻟﺜﺎﻧﻲ ﻣﻦ اﻟﺤﻘﻮل اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﻲ اﻟﻨﻤﺎذج ھﻮ ﺣﻘﻞ ‪ password‬وھﻮ ﯾﺸﺒﮫ اﻟﺤﻘﻞ‬

‫‪ text‬ﻣﻦ ﺣﯿﺚ اﻟﺨﺼﺎﺋﺺ ﺗﻤﺎﻣﺎً ﻏﯿﺮ أن ﻣﺪﺧﻼﺗﮫ ﺗﻈﮭﺮ ﻋﻠﻰ ﺷﻜﻞ ****** ﻣﮭﻤﺎ‬
‫ﻛﺎﻧﺖ‪ ،‬وھﻮ اﻟﻔﺮق اﻟﻮﺣﯿﺪ ﺑﯿﻨﮭﻤﺎ‪ .‬ورﺑﻤﺎ ﺗﻜﻮن ﻗﺪ اﺳﺘﻨﺘﺠﺖ اﻵن أن ھﺬا اﻟﻨﻮع ﻣﻦ‬
‫اﻟﺤﻘﻮل ﯾﺴﺘﺨﺪم ﻋﻨﺪﻣﺎ ﯾﻮﺟﺪ ﺣﺎﺟﺔ ﻹدﺧﺎل ﻛﻠﻤﺔ ﺳﺮ ﻣﻦ ﻗﺒﻞ اﻟﺰاﺋﺮ ﻓﻲ اﻟﻨﻤﻮذج‬

‫>‪<FORM ...‬‬
‫‪Please enter your name :‬‬
‫""=‪<INPUT TYPE="text" NAME="the name" VALUE‬‬
‫>"‪SIZE="40" MAXLENGTH="30‬‬
‫‪Please enter your passwod :‬‬
‫""=‪<INPUT TYPE="password" NAME="the password" VALUE‬‬
‫>"‪SIZE="40" MAXLENGTH="30‬‬
‫>‪</FORM‬‬

‫‪: Please enter your name‬‬

‫‪: Please enter your password‬‬

‫ﻻﺣﻆ أﻧﻨﻲ ﻟﻢ أرﻏﺐ ﻓﻲ ﻛﺘﺎﺑﺔ ﻗﯿﻢ إﻓﺘﺮاﺿﯿﺔ ‪ VALUES‬ﻟﻠﺤﻘﻮل‪ ،‬وﻟﺬﻟﻚ ﺗﺮﻛﺘﮭﺎ ﻓﺎرﻏﺔ‬
‫وأﺳﺘﻄﯿﻊ أﯾﻀﺎً أن أﻟﻐﯿﮭﺎ ﻧﮭﺎﺋﯿﺎً ﻣﻦ اﻟﺸﯿﻔﺮة‪ .‬وأﻧﺎ ﻓﻲ ھﺬا اﻟﻤﺜﺎل أردت أن أوﺿﺢ ﻟﻚ ﻋﺪم‬
‫أھﻤﯿﺔ ﻛﺘﺎﺑﺔ ﻗﯿﻤﺔ إﻓﺘﺮاﺿﯿﺔ ﻟﻠﺤﻘﻮل ﻓﻲ ﺑﻌﺾ اﻟﺤﺎﻻت‪.‬‬

‫ﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﻨﻮع اﻟﺜﺎﻟﺚ ﻣﻦ أﻧﻮاع اﻟﺤﻘﻮل وھﻮ ‪ hidden‬أي اﻟﺤﻘﻞ اﻟﻤﺨﻔﻲ‪ .‬وﻛﻤﺎ‬
‫ﻧﺴﺘﻨﺘﺞ ﻣﻦ اﺳﻤﮫ ﻓﮭﻮ ﻟﻦ ﯾﻈﮭﺮ ﺿﻤﻦ اﻟﻨﻤﻮذج‪ .‬وھﺬا ﻣﺜﺎل‪:‬‬

‫>‪<FORM ...‬‬
‫‪Please enter your name :‬‬
‫""=‪<INPUT TYPE="text" NAME="the name" VALUE‬‬

‫‪134‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>"‪SIZE="40" MAXLENGTH="30‬‬

‫>"‪<INPUT TYPE="hidden" NAME="my forms" VALUE="form1‬‬

‫‪Please enter your passwod :‬‬

‫""=‪<INPUT TYPE="password" NAME="the password" VALUE‬‬
‫>"‪SIZE="40" MAXLENGTH="30‬‬
‫>‪</FORM‬‬

‫‪: Please enter your name‬‬

‫‪: Please enter your passwod‬‬

‫ﻻﺣﻆ ھﻨﺎ أن وﺟﻮد ھﺬا اﻟﺤﻘﻞ ﻣﺜﻞ ﻋﺪﻣﮫ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻤﻈﮭﺮ اﻟﻨﻤﻮذج‪ ،‬وأن اﻟﺰاﺋﺮ ﻟﻦ ﯾﺘﻌﺎﻣﻞ‬
‫ﻣﻌﮫ ﺑﻞ ورﺑﻤﺎ ﻟﻦ ﯾﻌﺮف أن ھﻨﺎك ﺣﻘﻼً ﻣﺨﻔﯿﺎً‪ .‬واﻟﺴﺆال ھﻨﺎ‪ :‬ﻣﺎ اﻟﻔﺎﺋﺪة ﻣﻦ وﺟﻮد ﺷﻲء‬
‫ﻣﺨﻔﻰ ﻻ إﻣﻜﺎﻧﯿﺔ ﻻﺳﺘﺨﺪاﻣﮫ؟ وﻟﻜﻲ أﺟﯿﺐ ﻋﻠﻰ ھﺬا اﻟﺴﺆال دﻋﻨﻲ أﻃﺮح ﻟﻚ ﻣﺜﺎﻻً أو ﺣﺎﻟﺔ‬
‫ﻗﺪ ﺗﻮاﺟﮭﻚ ﻛﻤﺼﻤﻢ ﺻﻔﺤﺎت وﯾﺐ‪...‬‬

‫ﻟﻨﻔﺮض أن ﻟﺪﯾﻚ ﺛﻼث ﺻﻔﺤﺎت ﺗﺘﻀﻤﻦ ﻛﻞ ﻣﻨﮭﺎ ﻧﻤﻮذﺟﺎً ﻣﺎ وأن ھﺬه اﻟﻨﻤﺎذج ﻣﺘﺸﺎﺑﮭﺔ‪.‬‬
‫وﺗﺤﺘﻮي ﻋﻠﻰ ﻧﻔﺲ اﻟﺤﻘﻮل‪ .‬وﻋﻨﺪﻣﺎ ﺗﺼﻠﻚ اﻟﺒﯿﺎﻧﺎت ﻛﯿﻒ ﺳﺘﺴﺘﻄﯿﻊ ﺗﻤﯿﯿﺰ أي ﻣﻦ ھﺬه‬
‫اﻟﻨﻤﺎذج اﺳﺘﺨﺪم ﻹرﺳﺎل اﻟﺒﯿﺎﻧﺎت؟ ﺑﺈﻣﻜﺎﻧﻚ إﺿﺎﻓﺔ ھﺬا اﻟﺤﻘﻞ )اﻟﻮھﻤﻲ( وإﺳﻨﺎد أي اﺳﻢ‬
‫وأي ﻗﯿﻤﺔ ﻟﮫ ﻓﻲ ﻛﻞ ﻧﻤﻮذج‪.‬‬

‫ﻓﻲ اﻟﻨﻤﻮذج اﻷول ‪...‬‬

‫>"‪<INPUT TYPE="hidden" NAME="my forms" VALUE="form1‬‬

‫‪135‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻓﻲ اﻟﻨﻤﻮذج اﻟﺜﺎﻧﻲ ‪...‬‬

‫>"‪<INPUT TYPE="hidden" NAME="my forms" VALUE=" form2‬‬

‫ﻓﻲ اﻟﻨﻤﻮذج اﻟﺜﺎﻟﺚ ‪...‬‬

‫>"‪<INPUT TYPE="hidden" NAME="my forms" VALUE=" form3‬‬

‫وﺑﺬﻟﻚ ﻋﻨﺪﻣﺎ ﺗﺼﻠﻚ اﻟﺒﯿﺎﻧﺎت اﻟﻤﺮﺳﻠﺔ ﻣﻦ ﻗﺒﻞ أي زاﺋﺮ اﺳﺘﺨﺪم أي ﻣﻦ اﻟﻨﻤﺎذج اﻟﺜﻼﺛﺔ‬
‫ﺳﯿﺼﻠﻚ أﯾﻀﺎ ﺣﻘﻞ إﺿﺎﻓﻲ ﻗﻤﺖ أﻧﺖ ﻧﻔﺴﻚ ﺑﺘﻌﺒﺌﺘﮫ ﺳﻠﻔﺎً ﻋﻨﺪﻣﺎ ﺻﻤﻤﺖ اﻟﻨﻤﻮذج وذﻟﻚ‬
‫ﺑﺄﺣﺪ اﻷﺷﻜﺎل اﻟﺘﺎﻟﯿﺔ‪:‬‬
‫‪ my forms=form1‬أو‬
‫‪ forms=form2 my‬أو‬
‫‪my forms=form3‬‬

‫إذن ﻧﺴﺘﻄﯿﻊ اﻟﻘﻮل أن اﻟﺤﻘﻞ اﻟﻤﺨﻔﻲ ھﻮ ﻻﺳﺘﺨﺪام اﻟﻤﺼﻤﻢ وﻟﯿﺲ اﻟﺰاﺋﺮ‪ ،‬وأن ﻗﯿﻤﺘﮫ‬
‫ﺗﺪﺧﻞ ﻣﺒﺎﺷﺮة ﻋﻨﺪ اﻟﺘﺼﻤﯿﻢ‪ .‬وﯾﺴﺘﺨﺪم ﺑﮭﺪف ﺗﻌﺮﯾﻒ ﻗﯿﻢ ﻣﺎ ﺳﯿﺘﻢ إرﺳﺎﻟﮭﺎ ﺟﻨﺒﺎً إﻟﻰ ﺟﻨﺐ‬
‫ﺿﻤﻦ ﺑﯿﺎﻧﺎت اﻟﻨﻤﻮذج اﻟﺘﻲ ﻗﺎم اﻟﺰاﺋﺮ ﺑﺘﻌﺒﺌﺘﮭﺎ‪.‬‬

‫ﻣﻼﺣﻈﺔ ﻣﮭﻤﺔ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻨﻤﺎذج ﺑﺸﻜﻞ ﻋﺎم‪ .‬ﻣﻦ أﺟﻞ إﻇﮭﺎر اﻟﻨﻤﻮذج ﺑﺼﻮرة ﻣﺮﺗﺒﺔ‬
‫وﻣﻨﺴﻘﺔ واﻟﺘﺤﻜﻢ ﺑﻤﻮﻗﻊ اﻟﺤﻘﻮل ﻓﯿﮫ ﻓﻤﻦ اﻷﻓﻀﻞ داﺋﻤﺎً وﺿﻌﮫ داﺧﻞ ﺟﺪول ﻣﻊ ﺟﻌﻞ‬
‫اﻟﺠﺪول ﺑﻼ ﺣﺪود‪.‬‬

‫>‪<FORM ...‬‬
‫>"‪<TABLE BORDER="0‬‬
‫‪136‬‬
 www.dinaro.com/vb3

<TR>
<TD>Please enter your name : </TD>
<TD>
<INPUT TYPE="text" NAME="the name" VALUE=""
SIZE="40" MAXLENGTH="30">
</TD>
</TR>

<TR>
<TD>Please enter your password :</TD>
<TD>
<INPUT TYPE="password" NAME="the password" VALUE=""
SIZE="40" MAXLENGTH="30">
</TD>
</TR>
</TABLE>
</FORM>

‫وﻛﻤﺎ ﺗﺮى ﺗﺤﺘﺎج إﻟﻰ اﻟﻘﻠﯿﻞ ﻣﻦ اﻟﻌﻤﻞ اﻹﺿﺎﻓﻲ ﻟﻜﻨﻚ ﺑﺎﻟﻤﻘﺎﺑﻞ ﺳﺘﺤﺼﻞ ﻋﻠﻰ اﻟﻨﺘﯿﺠﺔ‬
‫اﻟﺘﺎﻟﯿﺔ‬

Please enter your name :

Please enter your password :

‫ أﻟﯿﺲ ﻛﺬﻟﻚ ﯾﺎ أﯾﮭﺎ اﻟﻤﺼﻤﻢ ؟‬...‫ھﻜﺬا أﻓﻀﻞ‬

137
 ‫‪www.dinaro.com/vb3‬‬

‫ﻧﻜﻮن اﻵن ﻗﺪ وﺻﻠﻨﺎ إﻟﻰ ﻧﮭﺎﯾﺔ ھﺬا اﻟﺪرس‪ .‬وأﺗﻤﻨﻰ أن أﻛﻮن ﻗﺪ ﻧﺠﺤﺖ ﻓﻲ ﺗﯿﺴﯿﺮ ﻋﻤﻠﯿﺔ‬
‫ﻓﮭﻤﮭﺎ واﻟﺘﻌﺎﻣﻞ ﻣﻌﮭﺎ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻚ‪ .‬وﻣﻊ ذﻟﻚ ﻓﻨﺤﻦ ﻟﻢ ﻧﻨﺘﮫ ﺑﻌﺪ‪ ...‬ﻓﺴﻮف ﻧﻨﺎﻗﺶ ﻣﺎ ﺗﺒﻘﻰ‬
‫ﻓﻲ اﻟﺪرس اﻟﻘﺎدم ‪ ،‬أﻟﻘﺎك ھﻨﺎك‪.‬‬

‫أﻟﯿﺲ ھﺬا‬
‫ﻣﻤﺘﻌﺎ‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫!!!!!!!!!!!!!!!!!!!!!!!!!!!!‬
‫‪HHHHHHHHHHHHHH‬‬
‫‪HHHHHHHHHHHHHH‬‬
‫‪HHHHHHHHHHHHH‬‬

‫‪138‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻧﻲ ﻋﺸﺮ‬

‫‪2‬‬

‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺜﺎﻧﻲ ﻋﺸﺮ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬

‫ھﺬا اﻟﺪرس ھﻮ اﻟﺜﺎﻧﻲ ﻣﻦ درﺳﯿﻦ ﺣﻮل اﻟﻨﻤﺎذج‪ .‬ﻟﻘﺪ ﻗﻤﻨﺎ ﻓﻲ اﻟﺪرس اﻟﺴﺎﺑﻖ ﺑﻤﻨﺎﻗﺸﺔ‬
‫اﻟﻮﺳﻮم اﻷﺳﺎﺳﯿﺔ ﻟﻠﻨﻤﺎذج وﺗﻌﻠﻤﻨﺎ ﻛﯿﻔﯿﺔ إدراج اﻟﻨﻤﺎذج ﻓﻲ ﺻﻔﺤﺎت اﻟﻮﯾﺐ‪ .‬ﻛﻤﺎ ﻗﻤﻨﺎ‬
‫ﺑﻤﻨﺎﻗﺸﺔ ﺑﻌﺾ أﺷﻜﺎل إدﺧﺎل اﻟﺒﯿﺎﻧﺎت ﻓﻲ اﻟﻨﻤﻮذج وھﻲ ‪Text, Password, Hidden‬‬
‫ھﻞ ﺗﺬﻛﺮ ﻛﯿﻒ ﻧﻘﻮم ﺑﺘﻌﺮﯾﻔﮭﺎ؟ راﺟﻊ اﻟﺪرس اﻟﺴﺎﺑﻖ إن أردت اﻟﻤﺰﯾﺪ ﻣﻦ اﻟﺘﻮﺿﯿﺢ‪ ،‬وإﻻ‬
‫ھﯿﺎ ﺑﻨﺎ ﻧﻜﻤﻞ وﻟﻨﺪﺧﻞ ﻓﻲ اﻟﻤﻮﺿﻮع ﻣﺒﺎﺷﺮة‪.‬‬

‫ﺳﻮف ﻧﺘﺎﺑﻊ اﻵن ﻣﻊ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻷﺷﻜﺎل اﻟﺨﺎﺻﺔ ﺑﺎﻻﺧﺘﯿﺎر ﻣﻦ ﻣﺘﻌﺪد وھﻲ ﺑﺎﻟﻤﻨﺎﺳﺒﺔ‬
‫ﺛﻼﺛﺔ أﻧﻮاع‪ Radio, Checkbox :‬وﻗﺎﺋﻤﺔ اﻹﺧﺘﯿﺎر‬

‫ﻧﺒﺪأ ﻣﻊ اﻟﺸﻜﻞ اﻟﻤﺴﻤﻰ ‪ .RADIO‬وﻣﻦ ﻣﺴﻮﻏﺎت اﺳﺘﺨﺪام ھﺬا اﻟﺸﻜﻞ أن اﻟﺴﺆال‬

‫اﻟﻤﻄﺮوح ﯾﻨﺒﻐﻰ أن ﯾﻜﻮن ﻟﮫ إﺟﺎﺑﺔ واﺣﺪة ﻓﻘﻂ‪ ،‬أو ﺑﻌﺒﺎرة أﺧﺮى ﻋﻠﻰ اﻟﺰاﺋﺮ أن ﯾﺨﺘﺎر‬
‫إﺟﺎﺑﺔ واﺣﺪة ﻓﻘﻂ‪.‬‬

‫وﻛﻤﺜﺎل‪ ،‬ﻟﻨﻔﺮض أﻧﻨﻲ أرﯾﺪ أن أﺳﺄل اﻟﺰاﺋﺮ ﻋﻦ اﻟﻤﺘﺼﻔﺢ اﻟﺬي ﯾﺴﺘﺨﺪﻣﮫ )ﻛﻤﺎ ھﻮ ﻣﻮﺟﻮد‬
‫ﻓﻲ دﻓﺘﺮ اﻟﺰوار ﻋﻠﻰ ﺷﻜﻞ ﻗﺎﺋﻤﺔ إﺧﺘﯿﺎر( ﻟﻜﻦ ﺑﺪﻻ ﻣﻦ أن ﯾﻜﻮن ﻋﻠﻰ ﺷﻜﻞ ﻗﺎﺋﻤﺔ إﺧﺘﯿﺎر‬

‫‪139‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫أرﯾﺪه أن ﯾﻜﻮن ﻋﻠﻰ ﺷﻜﻞ ‪ RADIO‬وذﻟﻚ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪):‬أود أن أذﻛﺮك أن ﻋﻨﺎﺻﺮ‬

‫اﻟﻨﻤﻮذج ﺗﻈﮭﺮ ﺑﺸﻜﻞ ﻣﻌﻜﻮس إذا ﻛﻨﺖ ﺗﺴﺘﺨﺪم ‪(Sindbad 3.0‬‬

‫‪Sindbad 3.0‬‬
‫‪Sindbad 4.0‬‬
‫‪Ms Explorer 3.0‬‬
‫‪Ms Explorer 4.0‬‬

‫ﻓﻜﯿﻒ ﻧﻨﺸﻲء ﻣﺜﻞ ھﺬه اﻟﻘﺎﺋﻤﺔ؟ ‪ ...‬ﺣﺴﻨﺎً‪ ،‬ﻟﻨﺒﺪأ ﻣﻦ اﻟﺼﻔﺮ وﻧﻌﺮّف ﻧﻤﻮذﺟﺎً‬

‫>‪<FORM‬‬

‫>‪</FORM‬‬

‫ﺛﻢ ﻟﻨﻘﻢ ﺑﺘﻌﺮﯾﻒ ھﺬا اﻟﺸﻜﻞ‪ ،‬ھﻞ ﺗﺬﻛﺮ اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺬﻟﻚ؟ إﻧﮫ >‪<INPUT‬‬

‫>‪<FORM‬‬
‫>"‪<INPUT TYPE="radio‬‬
‫>‪</FORM‬‬

‫ﻟﻜﻦ ﺑﻤﺎ أن ھﻨﺎك أرﺑﻌﺔ ﻣﺪﺧﻼت‪ ،‬إذن ﻧﺤﺘﺎج إﻟﻰ أرﺑﻌﺔ وﺳﻮم‬

‫>‪<FORM‬‬
‫>‪<INPUT TYPE="radio"> <BR‬‬
‫>‪<INPUT TYPE="radio"> <BR‬‬
‫>‪<INPUT TYPE="radio"> <BR‬‬
‫‪140‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>‪<INPUT TYPE="radio"> <BR‬‬

‫>‪</FORM‬‬

‫ﻧﺤﺘﺎج اﻵن إﻟﻰ ﺗﺴﻤﯿﺔ ھﺬه اﻟﻤﺪﺧﻼت‪ ،‬أي أﻧﻨﺎ ﺳﻨﺴﺘﺨﺪم اﻟﺨﺎﺻﯿﺔ ‪ NAME‬ﻣﻌﮭﺎ‪ .‬أﻣﺎ‬
‫اﻻﺳﻢ اﻟﻤﻌﻄﻰ ﺑﺤﺪ ذاﺗﮫ ﻓﻤﻦ اﻷﻓﻀﻞ أن ﯾﻜﻮن ﻣﺮﺗﺒﻄﺎً ﻧﻮﻋﺎً ﻣﺎ ﺑﻤﻮﺿﻮع اﻟﺴﺆال‪ ،‬ﻟﯿﺲ‬
‫ﻷن ھﺬا ﺿﺮوري ﻟﻠﻨﻤﻮذج ﺑﻞ ھﻮ ﺿﺮوري ﻟﻚ ﻛﺸﺨﺺ ﺳﯿﻘﻮم ﺑﺎﺳﺘﻘﺒﺎل اﻟﺒﯿﺎﻧﺎت‬
‫اﻟﻤﺮﺳﻠﺔ ﻣﻦ ﺧﻼل اﻟﻨﻤﻮذج‪ ،‬وﺑﺎﻟﺘﺎﻟﻲ ﻣﻦ اﻷﻓﻀﻞ أن ﯾﻮﺟﺪ ﻋﻨﻮان ﻣﻌﺒّﺮ ﻟﻠﺒﯿﺎﻧﺎت ﺑﻐﺮض‬
‫اﻟﺘﻤﯿﯿﺰ‪ .‬وﺑﻤﺎ أﻧﻨﺎ ھﻨﺎ ﻧﺘﺤﺪث ﻋﻦ اﻟﻤﺘﺼﻔﺤﺎت ﻓﻠﯿﻜﻦ ھﺬا اﻻﺳﻢ ھﻮ ‪browser‬‬

‫>‪<FORM‬‬
‫>‪<INPUT TYPE="radio" NAME="browser"> <BR‬‬
‫>‪<INPUT TYPE="radio" NAME="browser"> <BR‬‬
‫>‪<INPUT TYPE="radio" NAME="browser"> <BR‬‬
‫>‪<INPUT TYPE="radio" NAME="browser"> <BR‬‬
‫>‪</FORM‬‬

‫وﻛﻤﺎ ﺗﻼﺣﻆ ﻣﻦ اﻟﻨﺘﯿﺠﺔ أن ھﺬه اﻟﺘﺴﻤﯿﺔ ھﻲ ﺿﻤﻨﯿﺔ ﻓﻘﻂ وﻻ ﺗﺆﺛﺮ ﻋﻠﻰ ﺷﻜﻞ اﻟﻨﻤﻮذج‬
‫)راﺟﻊ اﻟﺪرس اﻟﺴﺎﺑﻖ( ﻟﻜﻦ أي إﺧﺘﯿﺎر ﺳﯿﻘﻮم ﺑﮫ اﻟﺰاﺋﺮ ﻣﻦ ھﺬه اﻷرﺑﻌﺔ ﺧﯿﺎرات ﺳﻮف‬
‫ﯾﺼﻠﻚ ﺗﺤﺖ اﻻﺳﻢ ‪.browser‬‬
‫‪141‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫اﻟﺨﻄﻮة اﻟﺘﺎﻟﯿﺔ ھﻲ إﻋﻄﺎء ﻗﯿﻤﺔ ﻟﻜﻞ ﻣﺪﺧﻠﺔ ﻓﻲ ھﺬه اﻟﻘﺎﺋﻤﺔ وذﻟﻚ ﺣﺴﺐ ﻣﺎ ﻧﺮاه ﻣﻨﺎﺳﺒﺎً‪،‬‬
‫إذن ﺣﺎن اﻟﻮﻗﺖ ﻻﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ ‪:VALUE‬‬

‫>‪<FORM‬‬
‫>"‪<INPUT TYPE="radio" NAME="browser" VALUE="Sind3‬‬
‫>‪<BR‬‬
‫>"‪<INPUT TYPE="radio" NAME="browser" VALUE="Sind4‬‬
‫>‪<BR‬‬
‫>"‪<INPUT TYPE="radio" NAME="browser" VALUE="Msie3‬‬
‫>‪<BR‬‬
‫>"‪<INPUT TYPE="radio" NAME="browser" VALUE="Msie4‬‬
‫>‪<BR‬‬
‫>‪</FORM‬‬

‫وھﻨﺎ أﯾﻀﺎ ﻧﻼﺣﻆ أن ﻻ ﺗﻐﯿّﺮ ﻓﻲ ﺷﻜﻞ اﻟﻨﻤﻮذج ﻇﺎھﺮﯾﺎً ﻣﻊ إﺿﺎﻓﺔ ھﺬه اﻟﺨﺎﺻﯿﺔ‪ .‬ﻟﻜﻦ ﻣﻊ‬
‫ذﻟﻚ ﻓﻘﺪ ﻗﻤﻨﺎ ﺣﺘﻰ اﻵن ﺑﺘﺴﻤﯿﺔ اﻟﺤﻘﻮل وإﻋﻄﺎء ﻛﻞ ﺣﻘﻞ ﻗﯿﻤﺔ ﻣﺤﺪدة‪ .‬وﻓﻌﻠﯿﺎً ﻟﻘﺪ إﻧﺘﮭﯿﻨﺎ‬
‫ﻣﻦ ھﺬا اﻟﻨﻤﻮذج‪ .‬ﻟﻜﻦ ﺑﺎﻟﻄﺒﻊ ﻧﺤﻦ ﻻ ﻧﺘﻮﻗﻊ أن ﯾﻜﻮن اﻟﺰاﺋﺮ ﻋﺎﻟﻤﺎً ﺑﺎﻟﻐﯿﺐ ﻟﻜﻲ ﯾﺨﻤﻦ أي‬
‫ﻣﻦ ھﺬه اﻟﺤﻘﻮل ﺗﺨﺘﺺ ﺑﻜﻞ ﻗﯿﻤﺔ‪ .‬ﻟﺬﻟﻚ ﺑﻘﻰ ﻋﻠﯿﻨﺎ ﺗﻌﺮﯾﻒ ﻛﻞ ﺣﻘﻞ ﺑﺎﺳﻢ ﺻﺮﯾﺢ ﯾﻮﺿﺢ‬
‫ﻣﺤﺘﻮاه‪.‬‬

‫>‪<FORM‬‬
‫>"‪<INPUT TYPE="radio" NAME="browser" VALUE="Sind3‬‬
‫>‪Sindbad 3.0 <BR‬‬
‫>"‪<INPUT TYPE="radio" NAME="browser" VALUE="Sind4‬‬
‫>‪Sindbad 4.0<BR‬‬
‫‪142‬‬
 www.dinaro.com/vb3

<INPUT TYPE="radio" NAME="browser" VALUE="Msie3">

MS Explorer 3.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4">
MS Explorer 4.0<BR>
</FORM>

Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0

‫ وھﻲ أﻧﻚ إذا أردت أن ﯾﻈﮭﺮ أﺣﺪھﺎ وﻗﺪ ﺗﻢ‬،‫وھﻨﺎك ﺧﺎﺻﯿﺔ ﺗﺘﻌﻠﻖ ﺑﮭﺬا اﻟﻨﻮع ﻣﻦ اﻟﺤﻘﻮل‬
‫ ﻣﻊ ﺗﺮك ﻛﻞ اﻟﺤﺮﯾﺔ‬،‫ إﻟﯿﮫ‬CHECKED ‫اﺧﺘﯿﺎره ﺑﺸﻜﻞ ﺗﻠﻘﺎﺋﻲ ﻓﻌﻠﯿﻚ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺎﺻﯿﺔ‬
.‫ﻟﻠﺰاﺋﺮ ﻓﻲ اﺧﺘﯿﺎر ﻣﺎ ﯾﺮﯾﺪه ﻓﯿﻤﺎ ﺑﻌﺪ‬

<FORM>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3">
Sindbad 3.0 <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4"
CHECKED>
Sindbad 4.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3">
MS Explorer 3.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4">
MS Explorer 4.0<BR>
</FORM>

143
 ‫‪www.dinaro.com/vb3‬‬

‫‪Sindbad 3.0‬‬
‫‪Sindbad 4.0‬‬
‫‪MS Explorer 3.0‬‬
‫‪MS Explorer 4.0‬‬

‫وأﺧﯿﺮاً‪ ...‬أود أن أوﺿﺢ ﻟﻚ اﻟﺼﻮرة اﻟﺘﻲ ﯾﺼﻠﻚ ﺑﮭﺎ اﻟﻨﻤﻮذج ﻋﻨﺪ اﺧﺘﯿﺎر أﺣﺪ ﺣﻘﻮﻟﮫ‬
‫)وﻟﻨﻔﺘﺮض أﻧﮫ اﻟﺨﯿﺎر اﻟﺜﺎﻟﺚ(‪ .‬وھﻲ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬

‫‪browser=Msie3‬‬

‫ﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﺸﻜﻞ اﻟﺜﺎﻧﻲ ﻣﻦ أﺷﻜﺎل اﻹﺧﺘﯿﺎر ﻣﻦ ﻣﺘﻌﺪد واﻟﺬي ﯾﺪﻋﻰ‬
‫‪ .CHECKBOX‬ﻇﺎھﺮﯾﺎً ﻻ ﯾﺨﺘﻠﻒ ھﺬا اﻟﺸﻜﻞ ﻋﻦ اﻟﺸﻜﻞ اﻟﺬي ﺳﺒﻘﮫ‪ ،‬ﻟﻜﻦ ﻋﻤﻠﯿﺎً ھﻨﺎك‬
‫اﺧﺘﻼﻓﺎت ﺟﺬرﯾﺔ ﻣﻦ ﺣﯿﺚ اﻟﻤﻔﮭﻮم واﻟﺘﻌﺮﯾﻒ‪ .‬وأﻧﺎ أﻓﻀّﻞ أن ﻧﺒﻘﻰ ﻋﻠﻰ اﺳﺘﺨﺪاﻣﻨﺎ ﻟﻠﻤﺜﺎل‬
‫اﻟﺴﺎﺑﻖ ﺣﺘﻰ ﯾﺴﮭﻞ ﻋﻠﯿﻨﺎ ﺗﻤﯿﯿﺰ اﻟﻔﺮوق‪.‬‬

‫‪Sindbad 3.0‬‬
‫‪Sindbad 4.0‬‬
‫‪MS Explorer 3.0‬‬
‫‪MS Explorer 4.0‬‬

‫ﻗﺒﻞ أن ﻧﺴﺘﻤﺮ ﻗﻢ ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ أﻛﺜﺮ ﻣﻦ ﺣﻘﻞ ﻓﻲ اﻟﻘﺎﺋﻤﺔ اﻟﺴﺎﺑﻘﺔ وأﻧﻈﺮ ﻣﺎذا ﺳﯿﺤﺪث؟ إن‬
‫ﺑﺎﺳﺘﻄﺎﻋﺘﻚ اﺧﺘﯿﺎر أﻛﺜﺮ ﻣﻦ ﺣﻘﻞ ﻓﻲ ﻧﻔﺲ اﻟﻮﻗﺖ! وھﺬا ھﻮ اﻟﻔﺮق اﻷول ﺑﯿﻦ‬
‫‪ CHECKBOX‬و ‪ RADIO‬ﻓﻔﻲ ‪ RADIO‬ﯾﻤﻜﻦ اﺧﺘﯿﺎر ﺣﻘﻞ واﺣﺪ ﻓﻘﻂ ﻟﯿﺲ أﻛﺜﺮ‪.‬‬

‫‪144‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>‪<FORM‬‬
‫>"‪<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes‬‬
‫>‪Sindbad 3.0 <BR‬‬
‫>"‪<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes‬‬
‫>‪Sindbad 4.0 <BR‬‬
‫>"‪<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes‬‬
‫>‪MS Explorer 3.0 <BR‬‬
‫>"‪<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes‬‬
‫>‪MS Explorer 4.0 <BR‬‬
‫>‪</FORM‬‬

‫ﻣﺎذا ﺗﻼﺣﻆ؟ أوﻻً ﻟﻘﺪ أﺳﻨﺪﻧﺎ اﻟﻘﯿﻤﺔ ‪ checkbox‬ﻟﻠﺨﺎﺻﯿﺔ ‪ .TYPE‬ﺛﻢ أﻋﻄﯿﻨﺎ ﻟﻜﻞ ﺣﻘﻞ‬
‫ﻓﻲ اﻟﻘﺎﺋﻤﺔ إﺳﻤﺎً ﻣﻤﯿﺰاً ﻓﻲ اﻟﺨﺎﺻﯿﺔ ‪ NAME‬ﯾﺨﺘﻠﻒ ﻋﻦ ﺑﺎﻗﻲ اﻟﺤﻘﻮل‪ .‬أﻣﺎ اﻟﺨﺎﺻﯿﺔ‬
‫‪ VALUE‬ﻓﺄﻋﻄﯿﻨﺎھﺎ ﻗﯿﻤﺔ ﻣﻮﺣﺪة ﻟﺠﻤﯿﻊ اﻟﺤﻘﻮل‪ .‬وﺑﺎﻟﻄﺒﻊ ﻗﻤﻨﺎ ﻓﻲ اﻟﻨﮭﺎﯾﺔ ﺑﻜﺘﺎﺑﺔ‬
‫اﻷﺳﻤﺎء اﻟﺘﻌﺮﯾﻔﯿﺔ ﻟﻜﻞ ﺣﻘﻞ‪.‬‬

‫ﻓﻲ ‪ RADIO‬ﻧﺴﺘﻄﯿﻊ اﺧﺘﯿﺎر ﺣﻘﻞ واﺣﺪ ﻓﻘﻂ أﻣﺎ ﻓﻲ‬

‫‪ CHECKBOX‬ﻓﻨﺨﺘﺎر أﻛﺜﺮ ﻣﻦ ﺣﻘﻞ‪ ،‬ﻟﺬﻟﻚ ﯾﺴﺘﺨﺪم ﻋﺎدة ﻓﻲ‬
‫اﻟﺤﺎﻻت اﻟﺘﻲ ﯾﺤﺘﻤﻞ أن ﻧﺤﺼﻞ ﻓﯿﮭﺎ ﻋﻠﻰ ﻋﺪة أﺟﻮﺑﺔ ﻟﻨﻔﺲ اﻟﺴﺆال‪.‬‬
‫ﻓﻲ ‪ RADIO‬ﺗﻜﻮن أﺳﻤﺎء اﻟﺤﻘﻮل ﻣﻮﺣﺪة واﻟﻘﯿﻢ ﻣﺨﺘﻠﻔﺔ‪ ،‬أﻣﺎ ﻓﻲ ‪CHECKBOX‬‬
‫ﻓﺘﻜﻮن اﻷﺳﻤﺎء ﻣﺨﺘﻠﻔﺔ واﻟﻘﯿﻢ ﻣﻮﺣﺪة‬

‫ﻛﯿﻒ ﺳﺘﺼﻞ اﻟﺒﯿﺎﻧﺎت؟ ﺣﺴﻨﺎً ﻟﻨﻔﺮض أﻧﮫ ﺗﻢ اﺧﺘﯿﺎر اﻟﺤﻘﻠﯿﻦ اﻟﺜﺎﻧﻲ واﻟﺮاﺑﻊ ﻓﺴﻮف ﺗﺼﻠﻚ‬
‫اﻟﻨﺘﯿﺠﺔ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬

‫‪Sind4=Yes‬‬
‫‪Msie4=Yes‬‬
‫‪145‬‬
 www.dinaro.com/vb3

‫ ﺑﺎﺳﺘﺨﺪام‬RADIO ‫ﻛﻤﺎ ﻧﺴﺘﻄﯿﻊ أﯾﻀﺎً ﺗﻌﻠﯿﻢ ﺑﻌﺾ اﻟﺤﻘﻮل ﺑﺼﻮرة ﺗﻠﻘﺎﺋﯿﺔ ﻛﻤﺎ ﻓﻌﻠﻨﺎ ﻣﻊ‬
CHECKED ‫ﻧﻔﺲ اﻟﺨﺎﺻﯿﺔ‬

<FORM>
<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes"
CHECKED>
Sindbad 3.0 <BR>
<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes">
Sindbad 4.0 <BR>
<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes"
CHECKED>
MS Explorer 3.0 <BR>
<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes">
MS Explorer 4.0 <BR>
</FORM>

Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
‫ وھﺬا اﻟﻨﻮع ﺳﻮف ﯾﻘﻮدﻧﺎ‬،‫اﻟﻨﻮع اﻟﺜﺎﻟﺚ ﻣﻦ أﺷﻜﺎل اﻹﺧﺘﯿﺎر ﻣﻦ ﻣﺘﻌﺪد ھﻮ ﻗﻮاﺋﻢ اﻻﺧﺘﯿﺎر‬
‫< وھﻲ‬INPUT> ‫إﻟﻰ وﺳﻮم ﺟﺪﯾﺪة ﻣﻦ وﺳﻮم اﻟﺘﻌﺮﯾﻒ واﻟﺘﻲ ﺳﺘﺴﺘﺨﺪم ﺑﺪﻻً ﻣﻦ‬

<SELECT>
<OPTION>
<OPTION>
146
 ‫‪www.dinaro.com/vb3‬‬

‫>‪<OPTION‬‬
‫‪.....‬‬
‫‪.....‬‬
‫>‪</SELECT‬‬

‫ﺑﺤﯿﺚ أن >‪ <SELECT/> ... <SELECT‬ﺗﺤﺪدان ﺑﺪاﯾﺔ وﻧﮭﺎﯾﺔ اﻟﻘﺎﺋﻤﺔ‪ ،‬واﻟﻮﺳﻢ‬

‫>‪ <OPTION‬اﻟﺬي ﯾﻮﺿﻊ داﺋﻤﺎ ﺑﯿﻨﮭﻤﺎ ﯾﺴﺘﺨﺪم ﻟﺘﺤﺪﯾﺪ ﻛﻞ ﻋﻨﺼﺮ ﻣﻦ ﻋﻨﺎﺻﺮ‬
‫اﻟﻘﺎﺋﻤﺔ‪ .‬ﻟﻨﻌﺪ إﻟﻰ ﻣﺜﺎﻟﻨﺎ اﻟﺴﺎﺑﻖ ﻟﻨﺮى ﻛﯿﻒ ﯾﻤﻜﻦ وﺿﻊ اﻟﺨﯿﺎرات ﻓﻲ ﻗﺎﺋﻤﺔ‬

‫>‪<FORM‬‬
‫>‪<SELECT‬‬
‫‪<OPTION> Sindbad 3.0‬‬
‫‪<OPTION> Sindbad 4.0‬‬
‫‪<OPTION> MS Explorer 3.0‬‬
‫‪<OPTION> MS Explorer 4.0‬‬
‫>‪</SELECT‬‬
‫>‪</FORM‬‬

‫وﺑﺬﻟﻚ ﺗﻜﻮن اﻟﻨﺘﯿﺠﺔ ھﻲ‪:‬‬

‫‪Sindbad 3.0‬‬

‫وﻛﺎﻟﻤﻌﺘﺎد ﻻ ﯾﺨﻠﻮ اﻷﻣﺮ ﻣﻦ وﺟﻮد ﺧﺼﺎﺋﺺ ﺗﺤﺪد ﻃﺮﯾﻘﺔ ﻋﻤﻞ ھﺬه اﻟﻮﺳﻮم‪ .‬وھﻨﺎك‬
‫ﺧﺼﺎﺋﺺ ﻣﺸﺘﺮﻛﺔ ﻋﺮﻓﻨﺎھﺎ ﻓﻲ اﻷﺷﻜﺎل اﻟﺴﺎﺑﻘﺔ ﺳﯿﺘﻢ اﺳﺘﺨﺪاﻣﮭﺎ ھﻨﺎ أﯾﻀﺎً ﻛﻤﺎ ﯾﻮﺟﺪ‬
‫ﺧﺼﺎﺋﺺ ﺟﺪﯾﺪة ﺗﺘﻌﻠﻖ ﻓﻘﻂ ﺑﮭﺬا اﻟﺸﻜﻞ ﻣﻦ ﺣﻘﻮل اﻟﺒﯿﺎﻧﺎت‪ .‬ﻓﺒﺎﻟﻨﺴﺒﺔ ﻟـِ >‪<SELECT‬‬
‫ﯾﻮﺟﺪ اﻟﺨﺎﺻﯿﺔ ‪ NAME‬وھﻲ ﻛﻤﺎ ﺗﻌﻠﻢ ﺗﺤﺪد اﺳﻢ اﻟﻘﺎﺋﻤﺔ‪ .‬ﻛﻤﺎ ﺗﻮﺟﺪ اﻟﺨﺎﺻﯿﺔ ‪SIZE‬‬
‫اﻟﺘﻲ ﺗﺤﺪد ﺣﺠﻢ )أو ﺑﺎﻷﺣﺮى( ارﺗﻔﺎع اﻟﻘﺎﺋﻤﺔ‪ ،‬وﺑﺎﻟﺘﺎﻟﻲ ﻋﺪد اﻟﺒﯿﺎﻧﺎت اﻟﻈﺎھﺮة ﻓﯿﮭﺎ‪ .‬وھﻲ‬
‫ﺗﺄﺧﺬ أي ﻗﯿﻤﺔ ﻋﺪدﯾﺔ ﺻﺤﯿﺤﺔ‪.‬‬

‫‪147‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>‪<FORM‬‬
‫>"‪<SELECT NAME="browser" SIZE="2‬‬
‫‪<OPTION> Sindbad 3.0‬‬
‫‪<OPTION> Sindbad 4.0‬‬
‫‪<OPTION> MS Explorer 3.0‬‬
‫‪<OPTION> MS Explorer 4.0‬‬
‫>‪</SELECT‬‬
‫>‪</FORM‬‬

‫وﺑﺬﻟﻚ ﺗﻜﻮن اﻟﻨﺘﯿﺠﺔ ھﻲ‪:‬‬

‫‪Sindbad 3.0‬‬
‫‪Sindbad 4.0‬‬

‫وﻃﺎﻟﻤﺎ ﺑﺎﻹﻣﻜﺎن ﻋﺮض اﻟﻘﺎﺋﻤﺔ ﺑﺄي ارﺗﻔﺎع ﻧﺮﯾﺪ‪ ،‬وﻗﺪ ﯾﺼﻞ إﻟﻰ ﺣﺪ ﻋﺮض ﺟﻤﯿﻊ ﺑﯿﺎﻧﺎت‬
‫اﻟﻘﺎﺋﻤﺔ ﻣﻌﺎً‪ ،‬ﻓﺈن ھﻨﺎك إﻣﻜﺎﻧﯿﺔ أﯾﻀﺎً ﻟﺠﻌﻞ اﺧﺘﯿﺎر اﻟﺒﯿﺎﻧﺎت ﻣﻦ ھﺬه اﻟﻘﺎﺋﻤﺔ ﻣﺘﻌﺪداً وﻟﯿﺲ‬
‫ﻓﻘﻂ ﻗﯿﻤﺔ واﺣﺪة‪ ،‬ﻛﯿﻒ؟؟ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺎﺻﯿﺔ ‪ .MULTIPLE‬ﻟﻨﻘﻢ اﻵن ﺑﻌﺮض ﺟﻤﯿﻊ‬
‫اﻟﻘﯿﻢ )ﻟﺪﯾﻨﺎ أرﺑﻌﺔ ﻗﯿﻢ‪ ،‬إذن اﻟﻘﯿﻤﺔ اﻟﻤﻜﺘﻮﺑﺔ ﻣﻊ ‪ SIZE‬ﯾﺠﺐ أن ﺗﻜﻮن ‪ ،(4‬وﻣﻦ ﺛﻢ ﻟﻨﺘﺢ‬
‫اﻟﻤﺠﺎل أﻣﺎم اﻟﺰاﺋﺮ ﻻﺧﺘﯿﺎر أﻛﺜﺮ ﻣﻦ ﻗﯿﻤﺔ واﺣﺪة ﻓﻲ اﻟﻘﺎﺋﻤﺔ‪.‬‬

‫>‪<FORM‬‬
‫>‪<SELECT NAME="browser" SIZE="4" MULTIPLE‬‬
‫‪<OPTION> Sindbad 3.0‬‬
‫‪<OPTION> Sindbad 4.0‬‬
‫‪<OPTION> MS Explorer 3.0‬‬
‫‪<OPTION> MS Explorer 4.0‬‬

‫‪148‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>‪</SELECT‬‬
‫>‪</FORM‬‬

‫وﺑﺬﻟﻚ ﺗﻜﻮن اﻟﻨﺘﯿﺠﺔ ھﻲ‪:‬‬

‫‪Sindbad 3.0‬‬
‫‪Sindbad 4.0‬‬
‫‪MS Explorer 3.0‬‬
‫‪MS Explorer 4.0‬‬

‫ﻻﺣﻆ أﻧﮫ ﻷداء ﻋﺪة اﺧﺘﯿﺎرات ﯾﺠﺐ أن ﺗﻘﻮم ﺑﺎﻟﻀﻐﻂ ﻋﻠﻰ اﻟﻤﻔﺘﺎح ‪ ctrl‬ﺑﺼﻮرة‬
‫ﻣﺘﻮاﺻﻠﺔ أﺛﻨﺎء ﻋﻤﻠﯿﺔ اﻹﺧﺘﯿﺎر‪.‬‬

‫أﻣﺎ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ اﻟﻮﺳﻢ >‪ <OPTION‬ﻓﮭﻲ ‪ VALUE‬واﻟﺘﻲ‬

‫اﺳﺘﺨﺪﻣﻨﺎھﺎ ﻣﻦ ﻗﺒﻞ وﺳﻨﺴﺘﺨﺪﻣﮭﺎ اﻵن ﻹﻋﻄﺎء ﻗﯿﻤﺔ ﻟﻜﻞ ﺣﻘﻞ ﺑﯿﺎﻧﺎت ﻓﻲ اﻟﻘﺎﺋﻤﺔ‪ .‬وﻛﺬﻟﻚ‬
‫اﻟﺨﺎﺻﯿﺔ ‪ SELECTED‬واﻟﺘﻲ ﻧﻜﺘﺒﮭﺎ ﻣﻊ أي >‪ <OPTION‬ﻧﺮﯾﺪ أن ﯾﻈﮭﺮ وﻗﺪ ﺗﻢ‬
‫اﺧﺘﯿﺎره ﺑﺼﻮرة ﺗﻠﻘﺎﺋﯿﺔ‪.‬‬

‫>‪<FORM‬‬
‫>‪<SELECT NAME="browser" SIZE="4" MULTIPLE‬‬
‫‪<OPTION VALUE="Sindbad 3.0"> Sindbad 3.0‬‬
‫‪<OPTION VALUE="Sindbad 4.0" SELECTED> Sindbad‬‬
‫‪4.0‬‬
‫‪<OPTION VALUE="MS Explorer 3.0"> MS Explorer 3.0‬‬
‫‪149‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫‪<OPTION VALUE="MS Explorer 4.0"> MS Explorer 4.0‬‬

‫>‪</SELECT‬‬
‫>‪</FORM‬‬

‫وﺑﺬﻟﻚ ﺗﻜﻮن اﻟﻨﺘﯿﺠﺔ ھﻲ‪:‬‬

‫‪Sindbad 3.0‬‬
‫‪Sindbad 4.0‬‬
‫‪MS Explorer 3.0‬‬
‫‪MS Explorer 4.0‬‬

‫اﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ ﻣﻦ أﺷﻜﺎل ﺣﻘﻮل اﻟﺒﯿﺎﻧﺎت ﯾﺪﻋﻰ ‪TEXTAREA‬‬

‫وھﻮ اﻟﻤﺴﺘﺨﺪم ﻋﺎدة ﻟﻜﺘﺎﺑﺔ اﻟﺘﻌﻠﯿﻘﺎت اﻟﺤﺮة ﻓﻲ اﻟﻨﻤﻮذج وﯾﺘﻢ إدراﺟﮫ ﺑﻜﺘﺎﺑﺔ اﻟﻮﺳﻮم‬

‫>‪<TEXTAREA> ... </TEXTAREA‬‬

‫ھﻞ ﺗﺴﺘﻄﯿﻊ ﺗﺨﻤﯿﻦ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻌﮫ؟ ﺑﺎﻟﻄﺒﻊ ﻻ ﺑﺪ ﻣﻦ وﺟﻮد اﻟﺨﺎﺻﯿﺔ‬

‫‪ NAME‬ﻹﻋﻄﺎءه اﺳﻢ اﻟﺘﻌﺮﯾﻒ‪ .‬ﻟﻜﻦ ﻻ وﺟﻮد ﻟﻠﺨﺎﺻﯿﺔ ‪ ، VALUE‬وﺑﺎﻟﻤﻘﺎﺑﻞ ﻓﺈن أي‬
‫ﻧﺺ ﯾﻜﺘﺐ ﺑﯿﻦ اﻟﻮﺳﻤﯿﻦ ﺳﯿﺘﻢ ﻋﺮﺿﮫ داﺧﻞ اﻟﺤﻘﻞ ﺑﺼﻮرة ﺗﻠﻘﺎﺋﯿﺔ‬

‫‪150‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>"‪<TEXTAREA NAME="comments‬‬
‫)‪Hello, please write your comments here :-‬‬
‫>‪</TEXTAREA‬‬

‫‪Hello, please w rite your comments here :‬‬

‫ﻛﻤﺎ ﺗﻮﺟﺪ ﺧﺼﺎﺋﺺ ﻟﺘﺤﺪﯾﺪ ﻣﺴﺎﺣﺔ ھﺬا اﻟﺤﻘﻞ ﻋﺮﺿﺎً وارﺗﻔﺎﻋﺎً‪ ،‬وھﻲ ‪ COLS‬اﻟﺘﻲ‬
‫ﺗﺤﺪد اﻟﻌﺮض و ‪ ROWS‬اﻟﺘﻲ ﺗﺤﺪد اﻹرﺗﻔﺎع‬

‫>"‪<TEXTAREA NAME="comments" COLS="30" ROWS="6‬‬

‫>‪</TEXTAREA‬‬

‫أﻣﺎ اﻟﺨﺎﺻﯿﺔ اﻷﺧﯿﺮة ھﻨﺎ ﻓﮭﻲ ‪ WRAP‬اﻟﺘﻲ ﺗﺤﺪد ﻃﺮﯾﻘﺔ إﻟﺘﻔﺎف اﻟﻨﺺ اﻟﻤﻜﺘﻮب داﺧﻞ‬
‫اﻟﺤﻘﻞ )ﻻ ﺗﻌﻤﻞ ھﺬه اﻟﺨﺎﺻﯿﺔ ﻣﻊ ‪ (MS Explorer 3.0‬وھﻨﺎك ﺛﻼﺛﺔ ﻗﯿﻢ ﺗﺄﺧﺬھﺎ وھﻲ‬
‫ﻋﻠﻰ اﻟﻨﺤﻮ اﻟﺘﺎﻟﻲ‪:‬‬

‫‪ : virtual‬اﻟﺘﻲ ﺗﻌﻨﻲ أن اﻟﻨﺺ ﺳﯿﻠﺘﻒ ﻋﻠﻰ ﻋﺪة أﺳﻄﺮ ﻋﻨﺪ ﻛﺘﺎﺑﺘﮫ وﻟﻜﻨﮫ ﺳﯿﺼﻠﻚ ﻋﻨﺪ‬
‫إرﺳﺎﻟﮫ ﻋﻠﻰ ﺷﻜﻞ ﺳﻄﺮ واﺣﺪ ﻣﺘﺘﺎﺑﻊ )ﺣﺎول اﻟﻜﺘﺎﺑﺔ داﺧﻞ اﻟﺤﻘﻮل وأﻧﻈﺮ ﻛﯿﻔﯿﺔ ﺗﺄﺛﯿﺮ ھﺬه‬
‫اﻟﺨﺎﺻﯿﺔ ﻋﻠﻰ ﻛﻞ ﻣﻨﮭﺎ(‬

‫‪151‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫"‪<TEXTAREA NAME="comments" COLS="30" ROWS="6‬‬

‫>"‪WRAP="virtual‬‬
‫>‪</TEXTAREA‬‬

‫‪ : physical‬ﺗﻌﻨﻲ أن اﻟﻨﺺ ﺳﯿﻠﺘﻒ ﻋﻠﻰ ﻋﺪة أﺳﻄﺮ وﺳﯿﺼﻠﻚ أﯾﻀﺎً ﻋﻠﻰ ھﺬا اﻟﻨﺤﻮ‬
‫ﻋﻨﺪ إرﺳﺎﻟﮫ‬

‫"‪<TEXTAREA NAME="comments" COLS="30" ROWS="6‬‬

‫>"‪WRAP="physical‬‬
‫>‪</TEXTAREA‬‬

‫‪ : off‬ﺗﻌﻨﻲ أن اﻟﻨﺺ ﻟﻦ ﯾﻠﺘﻒ ﺑﺼﻮرة ﺗﻠﻘﺎﺋﯿﺔ ﻋﻠﻰ ﻋﺪة أﺳﻄﺮ ﻟﻜﻨﮫ ﻋﻠﻰ أﯾﺔ ﺣﺎل‬
‫ﺳﯿﺼﻠﻚ ﺑﻨﻔﺲ اﻟﺸﻜﻞ اﻟﺬي ﺗﻢ إدﺧﺎﻟﮫ ﺑﮫ‬

‫‪152‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫"‪<TEXTAREA NAME="comments" COLS="30" ROWS="6‬‬

‫>"‪WRAP="off‬‬
‫>‪</TEXTAREA‬‬

‫ﺣﺴﻨﺎً‪ ،‬ﺑﺎﻓﺘﺮاض أﻧﻨﺎ إﻧﺘﮭﯿﻨﺎ ﻣﻦ ﻛﺘﺎﺑﺔ اﻟﺸﯿﻔﺮة اﻟﺨﺎﺻﺔ ﺑﺎﻟﻨﻤﻮذج وﻧﻨﺘﻈﺮ ﻣﻦ أي زاﺋﺮ‬
‫ﻟﻠﻤﻮﻗﻊ أن ﯾﻤﻸه‪ ،‬واﻟﺴﺆال ھﻮ ﻛﯿﻒ ﯾﻤﻜﻦ ﻟﮫ أن ﯾﺮﺳﻠﮫ ﻓﻌﻠﯿﺎً؟ ﻧﻌﻮد اﻵن إﻟﻰ اﻟﻮﺳﻢ‬
‫>‪ <INPUT‬وھﺬه اﻟﻤﺮة ﻣﻊ اﻟﻨﻮع ‪ submit‬واﻟﺘﻲ ﺳﺘﻘﻮم ﺗﻠﻘﺎﺋﯿﺎً ﺑﺈﻧﺸﺎء زر ﺳﯿﻘﻮم‬
‫ﻋﻨﺪ اﻟﻨﻘﺮ ﻋﻠﯿﮫ ﺑﺈرﺳﺎل اﻟﺒﯿﺎﻧﺎت اﻟﺘﻲ ﺗﻢ ﻣﻠﺆھﺎ ﻓﻲ اﻟﻨﻤﻮذج‪.‬‬

‫>"‪<INPUT TYPE="submit‬‬

‫‪Soumettre la requête‬‬

‫ﻻﺣﻆ أن ‪ Submit‬أو ) ‪ Submit Query‬ﻓﻲ ‪ (Netscape‬ﻇﺎھﺮة ﻋﻠﻰ اﻟﺰر وھﻲ‬

‫اﻟﻌﺒﺎرة اﻹﻓﺘﺮاﺿﯿﺔ‪ ،‬ﻓﺈذا أردت ﺗﻐﯿﯿﺮھﺎ ﻓﻌﻠﯿﻚ ﺑﺎﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ ‪ VALUE‬ﻟﮭﺬا‬
‫اﻟﻐﺮض‬

‫‪INPUT TYPE="submit" VALUE="Press here to send the‬‬

‫>"‪form‬‬

‫‪153‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫‪Press here to send the form‬‬

‫ﻓﻲ ﺣﺎﻟﺔ ﻛﺎن زوار ﻣﻮﻗﻌﻚ ﻣﻦ اﻟﻨﻮﻋﯿﺔ اﻟﻤﺘﺮددة ﻣﻦ اﻟﻨﺎس واﻟﺬﯾﻦ ﻗﺪ ﯾﻐﯿﺮون آراﺋﮭﻢ ﻓﻲ‬
‫آﺧﺮ ﻟﺤﻈﺔ‪ ،‬ﯾﻤﻜﻨﻚ أن ﺗﺘﯿﺢ ﻟﮭﻢ إﻣﻜﺎﻧﯿﺔ ﻣﺴﺢ ﻣﺎ ﻛﺘﺒﻮه ﻓﻲ اﻟﻨﻤﻮذج وإﻟﻐﺎء اﻷﻣﺮ‪ ،‬وذﻟﻚ‬
‫ﺑﺎﺳﺘﺨﺪام ‪ reset‬ﻛﻨﻮع ‪ TYPE‬ﻟﻠﻮﺳﻢ >‪ <INPUT‬ﺑﻨﻔﺲ ﻃﺮﯾﻘﺔ اﻟﺘﻌﺮﯾﻒ‬
‫واﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ ‪.submit‬‬

‫>"‪<INPUT TYPE="reset" VALUE="Forget about it‬‬

‫‪Forget about it‬‬

‫اﻟﺸﻜﻞ اﻷﺧﯿﺮ ﻣﻦ أﺷﻜﺎل اﻟﺒﯿﺎﻧﺎت ﻓﻲ اﻟﻨﻤﺎذج واﻟﻤﺪرج ﻣﻊ اﻟﻮﺳﻢ >‪ <INPUT‬ھﻮ‬

‫‪ button‬واﻟﺬي ﯾﻘﻮم ﺑﺈﻧﺸﺎء زر ﺿﻤﻦ اﻟﻨﻤﻮذج‪ ،‬وھﻮ ﻣﺮﺗﺒﻂ ﺑﺎﻟﻨﻤﺎذج اﻟﺘﻲ ﺗﺤﺘﻮي ﻋﻠﻰ‬
‫ﻧﺼﻮص ﺑﺮﻣﺠﯿﺔ )أو ﺑﺮاﻣﺞ ﻣﻜﺘﻤﻠﺔ( ﻣﻦ ﻟﻐﺎت ﻣﺘﻘﺪﻣﺔ ﻣﺜﻞ ‪ JavaScript‬ﻛﻮﻧﮫ ﯾﺴﺘﺨﺪم‬
‫ﻟﺘﺸﻐﯿﻞ ھﺬه اﻟﺒﺮاﻣﺞ وإﻃﻼﻗﮭﺎ‪ .‬وﻃﺒﻌﺎً ھﻨﺎك ﻃﺮق ﻣﻌﯿﻨﺔ ﻟﺮﺑﻄﮭﺎ ﻣﻊ اﻟﺒﺮاﻣﺞ وﻟﯿﺲ ھﻨﺎ‬
‫اﻟﻤﺠﺎل ﻟﻄﺮﺣﮭﺎ‪ .‬ﻟﻜﻦ ﻣﺒﺪﺋﯿﺎً أﻗﻮل إن ﻃﺮﯾﻘﺔ اﻹدراج واﻟﺘﻌﺮﯾﻒ ھﻲ ذاﺗﮭﺎ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ‬
‫‪.reset, submit‬‬

‫‪<INPUT TYPE="button" VALUE="This is a sample‬‬

‫>"‪button‬‬

‫وأﺧﯿﺮاً ‪ ...‬وﺻﻠﻨﺎ اﻵن إﻟﻰ ﻧﮭﺎﯾﺔ ﺣﺪﯾﺜﻨﺎ ﻋﻦ اﻟﻨﻤﺎذج‪ .‬ﻓﻤﺎ رأﯾﻚ؟ ھﻞ ھﻮ ﻣﻦ اﻟﻤﻮاﺿﯿﻊ‬
‫اﻟﺴﮭﻠﺔ أم اﻟﺼﻌﺒﺔ؟ ﻻ ﺷﻲء ﺳﮭﻞ ﻓﻲ ﺑﺪاﯾﺘﮫ‪ .‬ﻟﺬﻟﻚ ﻣﻦ اﻷﻓﻀﻞ ﻟﻚ أن ﺗﺤﺎول داﺋﻤﺎً اﻟﺘﺪرب‬
‫أوﻻً ﺑﺄول ﻋﻠﻰ اﻟﻮﺳﻮم اﻟﻤﺸﺮوﺣﺔ‪ ،‬ﺑﻞ واﻟﻌﻮدة إﻟﻰ اﻟﺪروس اﻟﺴﺎﺑﻘﺔ إذا اﻗﺘﻀﻰ اﻷﻣﺮ‬
‫وﺧﺎﺻﺔ إذا ﺗﺪاﺧﻠﺖ ﺑﻌﻀﮭﺎ ﻣﻊ اﻟﺪروس اﻷﺣﺪث‪.‬‬
‫‪154‬‬
 www.dinaro.com/vb3

.‫ وﻣﻊ ﺗﻤﻨﯿﺎﺗﻲ ﻟﻚ ﺑﻨﻤﺎذج ﻣﻮﻓﻘﺔ ﺗﺨﻠﻮ ﻣﻦ اﻟﺘﻌﻘﯿﺪ‬... ‫إﻟﻰ اﻟﻠﻘﺎء‬

‫أﻟﯿﺲ ھﺬا‬
‫ﻣﻤﺘﻌﺎ‬
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHHHHHHHHHH
HHHHHH
155
 ‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻟﺚ ﻋﺸﺮ‬

‫‪MS Internet ‬‬
‫‪Explorer‬‬

‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺜﺎﻟﺚ ﻋﺸﺮ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬

‫واﻟﺬي ﺳﻨﻨﺎﻗﺶ ﻓﯿﮫ واﺣﺪاً ﻣﻦ اﻟﻤﻮاﺿﯿﻊ اﻟﻤﮭﻤﺔ‪ ..‬واﻟﺸﺎﺋﻜﺔ‪ ..‬واﻟﻤﺰﻋﺠﺔ ﻧﻮﻋﺎً ﻣﺎ ﻓﻲ‬
‫ھﺬه اﻟﻠﻐﺔ‪ ،‬وﻓﻲ ﻣﺠﺎل ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎت اﻟﻮﯾﺐ ﻋﻤﻮﻣﺎً‪ .‬وھﻮ ﻣﻮﺿﻮع اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ‪...‬‬
‫ﻓﻤﺎ ھﻲ ھﺬه اﻟﻮﺳﻮم؟‬

‫ﻣﻼﺣﻈﺔ ﻣﮭﻤﺔ‪ :‬ﺗﺤﺘﻮي ھﺬه اﻟﺼﻔﺤﺔ ﻋﻠﻰ وﺳﻮم ﺧﺎﺻﺔ ﺑﺎﻟﻤﺘﺼﻔﺢ ‪MS Internet‬‬
‫‪ Explorer‬ﻓﺈذا ﻛﺎن ﻣﺘﺼﻔﺤﻚ ﺧﻼف ذﻟﻚ ﻓﻠﻦ ﺗﺴﺘﻄﯿﻊ ﻣﺸﺎھﺪة اﻟﺼﻔﺤﺔ ﺑﺎﻟﺼﻮرة‬
‫اﻟﻤﻨﺎﺳﺒﺔ‬

‫• أﺻﻮات ﻣﻮﺳﯿﻘﯿﺔ >‪<BGSOUND‬‬

‫• ﻻﻓﺘﺎت >‪<MARQUEE‬‬

‫‪156‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>‪<BGSOUND‬‬

‫ﺗﺴﺘﻄﯿﻊ ﺗﻌﯿﯿﻦ أي ﻣﻠﻒ ﺻﻮﺗﻲ ﯾﺤﻤﻞ اﻹﻣﺘﺪاد ‪ mid‬أو ‪ wav‬أو ‪ au‬ﺑﺤﯿﺚ ﯾﻌﻤﻞ ﺗﻠﻘﺎﺋﯿًﺎ‬
‫ﻋﻨﺪﻣﺎ ﯾﺘﻢ ﺗﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ ﻓﻲ اﻟﻤﺘﺼﻔﺢ‪ ،‬وذﻟﻚ ﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻢ >‪) <BGSOUND‬أي‬
‫‪ (Sound BackGround‬ﻓﻌﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل‪ ،‬ﻗﻤﺖ ﺑﺈدراج اﻟﻤﻘﻄﻊ اﻟﻤﺴﻤﻰ ‪lkl.mid‬‬
‫ﺑﺎﻟﻄﺮﯾﻘﺔ اﻟﺘﺎﻟﯿﺔ‬

‫>"‪<BGSOUND SRC="lkl.mid‬‬

‫إذن ھﻨﺎك اﻟﺨﺎﺻﯿﺔ ‪ SRC‬واﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻛﻤﺎ ﺗﺮى ﻟﺘﺤﺪﯾﺪ اﺳﻢ اﻟﻤﻠﻒ اﻟﻤﺪرج‪ .‬ﻛﻤﺎ ﯾﻮﺟﺪ‬
‫أﯾﻀﺎً اﻟﺨﺎﺻﯿﺔ ‪ LOOP‬اﻟﺘﻲ ﺗﺤﺪد ﻋﺪد ﻣﺮات ﺗﻜﺮار ﻋﺰف اﻟﻤﻘﻄﻮﻋﺔ أي أﻧﮭﺎ ﺗﺄﺧﺬ‬
‫أرﻗﺎﻣﺎً ﺻﺤﯿﺤﺔ ﻋﺎدة‪ .‬أﻣﺎ ﻟﻮ ﻗﻤﺖ ﺑﺈﻋﻄﺎءھﺎ اﻟﻘﯿﻤﺔ ‪ -1‬أو اﻟﻘﯿﻤﺔ ‪ infinite‬ﻓﮭﺬا ﺳﻮف‬
‫ﯾﺆدي إﻟﻰ ﺗﻜﺮار ﻋﺰف اﻟﻤﻘﻄﻮﻋﺔ إﻟﻰ ﻣﺎ ﻻ ﻧﮭﺎﯾﺔ )ﻻ ﺗﺨﻒ‪ ،‬ﻓﮭﺬا ﻻ ﯾﻌﻨﻲ أن اﻟﻌﺰف‬
‫ﺳﯿﺴﺘﻤﺮ ﺑﻌﺪ أن ﺗﻘﻮم ﺑﺈﻃﻔﺎء ﺟﮭﺎزك( ﻓﻘﻂ ﺳﻮف ﺗﺴﻤﻌﮭﺎ ﻃﺎﻟﻤﺎ أﻧﻚ ﻣﻮﺟﻮد ﻓﻲ اﻟﺼﻔﺤﺔ‬
‫وﺳﯿﺘﻮﻗﻒ ﺑﻤﺠﺮد اﻧﺘﻘﺎﻟﻚ ﻟﺼﻔﺤﺔ أﺧﺮى أو ﺧﺮوﺟﻚ ﻣﻦ اﻟﺒﺮﻧﺎﻣﺞ‪.‬‬

‫>"‪<BGSOUND SRC="lkl.mid" LOOP="infinite‬‬

‫>"‪<BGSOUND SRC="lkl.mid" LOOP="3‬‬

‫أﻣﺎ ﻓﻲ ﺣﺎﻟﺔ أردت إدراج وﺻﻼت ﺗﺸﻌﺒﯿﺔ ﻟﻤﻠﻔﺎت ﺻﻮﺗﯿﺔ ﻓﻲ ﻣﻮﻗﻌﻚ ﺑﺤﯿﺚ ﯾﻤﻜﻦ ﻟﻠﺰاﺋﺮ‬
‫أن ﯾﺤﻤّﻠﮭﺎ أو أن ﯾﻨﻘﺮ ﻋﻠﯿﮭﺎ إذا أراد ﺳﻤﺎﻋﮭﺎ‪ ،‬ﻓﺬﻟﻚ ﯾﺘﻢ ﺑﺎﻟﻄﺮﯾﻘﺔ اﻹﻋﺘﯿﺎدﯾﺔ ﻹدراج‬
‫اﻟﻮﺻﻼت واﻟﺘﻲ ﺗﻌﻠﻤﻨﺎھﺎ ﻓﻲ اﻟﺪرس اﻟﺴﺎدس أي ﻛﻤﺎ ﯾﻠﻲ‪:‬‬

‫>‪<A HREF="lkl.mid"> ... </A‬‬

‫‪157‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫>‪</MARQUEE> ... <MARQUEE‬‬

‫ﻧﺺ ﯾﺘﺤﺮك ﻣﻦ اﻟﯿﺴﺎر إﻟﻰ اﻟﯿﻤﯿﻦ‬

‫ﻣﺎ رأﯾﻚ ﺑﮭﺬا اﻟﻨﺺ اﻟﻤﺘﺴﻜﻊ أﻣﺎﻣﻚ ﻋﻠﻰ اﻟﺸﺎﺷﺔ؟ ﺟﻤﯿﻞ ‪..‬أﻟﯿﺲ ﻛﺬﻟﻚ؟ ھﺬه اﻟﻼﻓﺘﺔ )إن‬
‫ﺟﺎز اﻟﺘﻌﺒﯿﺮ( ھﻲ إﺣﺪى اﻟﻤﺆﺛﺮات اﻟﺨﺎﺻﺔ اﻟﺘﻲ ﯾﻤﻜﻦ إﺣﺪاﺛﮭﺎ ﻓﻲ ‪.MS Explorer‬‬
‫ﺑﻮاﺳﻄﺔ ھﺬه اﻟﻮﺳﻮم‪ .‬وﺑﻜﻞ ﺑﺴﺎﻃﺔ ھﺬه ھﻲ اﻟﺸﯿﻔﺮة اﻟﺨﺎﺻﺔ ﺑﺬﻟﻚ‬

‫>‪<MARQUEE‬‬
‫‪HTML‬‬
‫>‪</MARQUEE‬‬

‫ﺑﺎﻟﻄﺒﻊ ﻻ ﯾﻤﻜﻦ أن ﺗﻤﺮ اﻷﻣﻮر ھﻨﺎ ﺑﺒﺴﺎﻃﺔ ﻓﻼ ﺑﺪ ﻣﻦ وﺟﻮد ﺧﺼﺎﺋﺺ ﻟﮭﺬه اﻟﻮﺳﻮم‪،‬‬
‫واﻟﺤﻘﯿﻘﺔ أن ھﻨﺎك إﺣﺪى ﻋﺸﺮة ﺧﺎﺻﯿﺔ ﻧﺴﺘﺨﺪﻣﮭﺎ )ﻋﺪد ﻟﯿﺲ ﺑﺎﻟﻘﻠﯿﻞ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻮﺳﻮم‬
‫ﺧﺎﺻﺔ(‪ .‬ﻟﻜﻨﮭﺎ ﻋﻠﻰ أﯾﺔ ﺣﺎل ﻟﯿﺴﺖ ﺻﻌﺒﺔ اﻟﺘﻄﺒﯿﻖ ﺑﻞ إﻧﻨﺎ ﺗﻌﺎﻣﻠﻨﺎ ﺑﺸﻜﻞ أو ﺑﺂﺧﺮ ﻣﻌﮭﺎ‬
‫ﻣﺴﺒﻘﺎً وﺧﺎﺻﺔ ﻣﻊ اﻟﻮﺳﻢ >‪ <IMG‬وھﺬه ھﻲ اﻟﺨﺼﺎﺋﺺ أﺳﺮدھﺎ ﻟﻚ ﻣﻊ اﻷﻣﺜﻠﺔ‪:‬‬

‫‪ :BGCOLOR‬ﻟﺘﺤﺪﯾﺪ ﻟﻮن اﻟﺨﻠﻔﯿﺔ‬

‫>"‪<MARQUEE BGCOLOR="#FF0000‬‬
‫‪HTML‬‬
‫>‪</MARQUEE‬‬

‫‪158‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫‪ :HEIGHT‬ﻟﺘﺤﺪﯾﺪ إرﺗﻔﺎع اﻟﻼﻓﺘﺔ‪ ،‬وھﻲ إﻣﺎ أن ﺗﺄﺧﺬ ﻗﯿﻤﺔ ﺛﺎﺑﺘﺔ أو ﻗﯿﻤﺔ ﻧﺴﺒﯿﺔ ﺣﺴﺐ‬
‫إرﺗﻔﺎع ﻧﺎﻓﺬة اﻟﻤﺘﺼﻔﺢ‪.‬‬

‫>"‪<MARQUEE BGCOLOR="#FF0000" HEIGHT="80‬‬

‫‪HTML‬‬
‫>‪</MARQUEE‬‬

‫‪ :WIDTH‬ﻟﺘﺤﺪﯾﺪ ﻋﺮض اﻟﻼﻓﺘﺔ‪ ،‬وھﻨﺎ أﯾﻀﺎً إﻣﺎ أن ﺗﺄﺧﺬ ﻗﯿﻤﺔ ﺛﺎﺑﺘﺔ أو ﻧﺴﺒﯿﺔ‬

‫"‪<MARQUEE BGCOLOR="#FF0000" HEIGHT="80‬‬

‫>"‪WIDTH="40%‬‬
‫‪HTML‬‬
‫>‪</MARQUEE‬‬

‫‪ :ALIGN‬ﻟﺘﺤﺪﯾﺪ اﻟﻤﺤﺎذاة اﻟﻌﻤﻮدﯾﺔ ﻟﻠﻨﺺ اﻟﺬي ﻗﺪ ﯾﺘﻮاﺟﺪ ﻋﻠﻰ ﺟﺎﻧﺒﻲ اﻟﻼﻓﺘﺔ‪ ،‬وھﻲ‬
‫ﺗﺄﺧﺬ اﻟﻘﯿﻢ ‪ top, middle‬و ‪ bottom‬وھﻲ اﻹﻓﺘﺮاﺿﯿﺔ أي اﻟﺘﻲ ﺗﻄﺒﻖ ﺗﻠﻘﺎﺋﯿﺎً ﻋﻨﺪ ﻋﺪم‬
‫إدراج ھﺬه اﻟﺨﺎﺻﯿﺔ‬

‫‪Welcome to‬‬
‫"‪<MARQUEE BGCOLOR="#FF0000" HEIGHT="80‬‬
‫>"‪WIDTH="40%‬‬
‫‪HTML‬‬
‫>‪</MARQUEE‬‬
‫‪Have a good time.‬‬

‫‪159‬‬
 www.dinaro.com/vb3

Welcome to
<MARQUEE BGCOLOR="#FF0000" HEIGHT="80"
WIDTH="40%" ALIGN="middle">
HTML
</MARQUEE>
Have a good time. Welcome to
<MARQUEE BGCOLOR="#FF0000" HEIGHT="80"
WIDTH="40%" ALIGN="middle">
H.P in arabic
</MARQUEE>
Have a good time.

Welcome to
<MARQUEE BGCOLOR="#FF0000" HEIGHT="80"
WIDTH="40%" ALIGN="top">
HTML
</MARQUEE>
Have a good time.

‫ ﻟﺘﺤﺪﯾﺪ اﻟﻤﺴﺎﻓﺔ اﻟﻔﺎرﻏﺔ اﻟﺘﻲ ﺗﻔﺼﻞ ﺑﯿﻦ اﻟﻼﻓﺘﺔ وﺑﯿﻦ اﻟﻨﺺ اﻟﻤﻮﺟﻮد‬:HSPACE
‫ﻋﻠﻰ ﺟﺎﻧﺒﯿﮭﺎ‬

Welcome to
<MARQUEE BGCOLOR="#FF0000" HEIGHT="80"
WIDTH="40%" HSPACE="30">
HTML
</MARQUEE>
Have a good time
160
 ‫‪www.dinaro.com/vb3‬‬

‫‪ :VSPACE‬ﺗﻌﻤﻞ ﻣﺜﻞ اﻟﺨﺎﺻﯿﺔ اﻟﺴﺎﺑﻘﺔ ﻟﻜﻨﮭﺎ ﺗﺤﺪد اﻟﻤﺴﺎﻓﺔ اﻟﻔﺎرﻏﺔ ﻋﻤﻮدﯾﺎً ﻣﻦ‬
‫اﻷﻋﻠﻰ واﻷﺳﻔﻞ‬

‫ﺣﺘﻰ اﻵن ﻛﺎﻧﺖ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﻧﺎﻗﺸﻨﺎھﺎ ﻣﺠﺮد ﺧﺼﺎﺋﺺ ﻣﻈﮭﺮﯾﺔ ﺗﺘﻌﻠﻖ ﺑﺸﻜﻞ وﻣﻈﮭﺮ‬
‫اﻟﻼﻓﺘﺔ دون ﺗﻐﯿﯿﺮ ﻃﺮﯾﻘﺔ ﻋﻤﻠﮭﺎ‪ .‬واﻵن ﻧﺄﺗﻲ إﻟﻰ اﻟﺨﺼﺎﺋﺺ اﻟﻔﻨﯿﺔ‪:‬‬

‫‪ BEHAVIOR‬ﺗﺤﺪد ﺳﻠﻮك اﻟﻨﺺ اﻟﻤﻮﺟﻮد ﻓﻲ اﻟﻼﻓﺘﺔ وﻃﺮﯾﻘﺔ ﻋﻤﻠﮫ وھﻨﺎك ﺛﻼﺛﺔ ﻗﯿﻢ‬
‫)أو ﺑﺎﻷﺣﺮى( ﺛﻼﺛﺔ أﺳﺎﻟﯿﺐ ﻟﺤﺮﻛﺔ اﻟﻨﺺ وھﻲ اﻟﺘﺎﻟﯿﺔ‪:‬‬

‫• ‪ scroll‬ﯾﺘﺤﺮك ﺑﻨﻔﺲ اﻹﺗﺠﺎه ﻣﻦ ﺟﺎﻧﺐ إﻟﻰ آﺧﺮ وﺑﺼﻮرة ﻣﺴﺘﻤﺮة وھﻲ‬

‫اﻟﻘﯿﻤﺔ اﻹﻓﺘﺮاﺿﯿﺔ‪ ،‬ﻟﺬﻟﻚ ﻻ ﯾﮭﻢ إن ﻛﺘﺒﺖ أم ﻻ‪.‬‬

‫• ‪ slide‬ﯾﺘﺤﺮك اﻟﻨﺺ ﻣﺮة واﺣﺪة ﻣﻦ ﺟﺎﻧﺐ إﻟﻰ اﻟﺠﺎﻧﺐ اﻵﺧﺮ وﯾﺘﻮﻗﻒ‬

‫ﻋﻨﺪه‪.‬‬

‫"‪<MARQUEE BGCOLOR="#FF0000" WIDTH="80%‬‬

‫>"‪BEHAVIOR="slide‬‬
‫‪HTML‬‬
‫>‪</MARQUEE‬‬

‫ﻣﻦ اﻟﻤﺤﺘﻤﻞ أن ﯾﻜﻮن اﻟﻨﺺ ﻓﻲ اﻟﻤﺜﺎل ﻣﺘﻮﻗﻔﺎً ﺑﻌﺪ أن ﯾﻜﻮن ﻗﺪ أﻛﻤﻞ ﺗﺤﺮﻛﮫ‪ ،‬ﻟﺬﻟﻚ ﻗﻢ‬
‫ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ زر ‪ Refresh‬اﻟﻤﻮﺟﻮد ﻓﻲ ﻣﺘﺼﻔﺤﻚ ﻹﻋﺎدة ﺗﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ وﺗﺤﺮﯾﻚ اﻟﻨﺺ‬
‫ﻣﺮة أﺧﺮى‬

‫‪161‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫• ‪ alternate‬ﯾﺘﺄرﺟﺢ اﻟﻨﺺ ﺟﯿﺌﺔ وذھﺎﺑﺎً ﻣﻦ ﺟﺎﻧﺐ إﻟﻰ آﺧﺮ‪.‬‬

‫"‪<MARQUEE BGCOLOR="#FF0000" WIDTH="80%‬‬

‫>"‪BEHAVIOR="alternate‬‬
‫‪HTML‬‬
‫>‪</MARQUEE‬‬

‫‪ DIRECTION‬ﺗﺤﺪد إﺗﺠﺎه ﺳﯿﺮ اﻟﻨﺺ وذﻟﻚ ﻣﻦ ﺧﻼل اﻟﻘﯿﻢ ‪ left‬اﻟﺘﻲ ﺗﺤﺮﻛﮫ إﻟﻰ‬
‫اﻟﯿﺴﺎر )وھﻲ اﻹﻓﺘﺮاﺿﯿﺔ( و ‪ right‬اﻟﺘﻲ ﺗﺤﺮﻛﮫ إﻟﻰ اﻟﯿﻤﯿﻦ‪.‬‬

‫"‪<MARQUEE BGCOLOR="#FF0000" WIDTH="80%‬‬

‫>"‪DIRECTION="right‬‬
‫‪HTML‬‬
‫>‪</MARQUEE‬‬

‫‪ LOOP‬ﺗﺤﺪد ﻋﺪد اﻟﻤﺮات اﻟﺘﻲ ﺳﯿﺘﺤﺮك ﻓﯿﮭﺎ اﻟﻨﺺ داﺧﻞ اﻟﻼﻓﺘﺔ‪ .‬ﻓﺈذا أردت أن‬
‫ﺗﺴﺘﻤﺮ اﻟﺤﺮﻛﺔ إﻟﻰ ﻣﺎ ﻻ ﻧﮭﺎﯾﺔ ﻓﻀﻊ اﻟﻘﯿﻤﺔ ‪ -1‬أو ‪ infinite‬وﺑﺨﻼف ذﻟﻚ ﺿﻊ ﻋﺪد‬
‫اﻟﻤﺮات اﻟﺘﻲ ﺗﺮﯾﺪھﺎ‪ .‬واﻟﺸﯿﻔﺮة اﻟﺘﺎﻟﯿﺔ ﺗﺤﺪد ﻋﺪد ﻣﺮات اﻟﺤﺮﻛﺔ ﺑﺜﻼث‪) .‬إذا وﺟﺪت اﻟﻨﺺ‬
‫ﺳﺎﻛﻨﺎً أو ﻟﻢ ﺗﺠﺪ ﻧﺼﺎً ﻋﻠﻰ اﻹﻃﻼق ﻓﮭﺬا ﯾﻌﻨﻲ أﻧﮫ ﻗﺪ اﺳﺘﻨﻔﺬ ﺣﺮﻛﺎﺗﮫ اﻟﺜﻼث ﻟﺬﻟﻚ ﺗﺤﺘﺎج‬
‫ﻟﻠﻨﻘﺮ ﻋﻠﻰ ‪ Refresh‬ﻹﻋﺎدة ﺗﺸﻐﯿﻠﮫ(‬

‫‪162‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫"‪<MARQUEE BGCOLOR="#FF0000" WIDTH="80%‬‬

‫>"‪DIRECTION="right" LOOP="3‬‬
‫‪HTML‬‬
‫>‪</MARQUEE‬‬

‫ﺑﻘﻲ ﻟﺪﯾﻨﺎ اﻵن ﺧﺎﺻﯿﺘﯿﻦ ﺗﻘﻮﻣﺎن ﺑﺘﺤﺪﯾﺪ ﺳﺮﻋﺔ ﺗﺤﺮك اﻟﻨﺺ ﻓﻲ اﻟﻼﻓﺘﺔ‬

‫واﻵن إﻟﯿﻚ اﻟﺨﺼﺎﺋﺺ‪:‬‬

‫‪ :SCROLLAMOUNT‬ھﺬه اﻟﺨﺎﺻﯿﺔ ﺗﺤﺪد اﻟﻤﺴﺎﻓﺔ ﺑﯿﻦ ﻛﻞ ﻟﻘﻄﺔ وأﺧﺮى ﻟﻠﻨﺺ‬

‫وھﻲ ﺗﺄﺧﺬ ﻗﯿﻤﺎً ﻋﺪدﯾﺔ ﺻﺤﯿﺤﺔ ﺗﺤﺪد اﻟﻤﺴﺎﻓﺔ اﻟﻤﻘﻄﻮﻋﺔ ﺑﺎﻟﺒﯿﻜﺴﻞ )أﻋﺮف أﻧﮭﺎ ﺻﻌﺒﺔ‬
‫ﻗﻠﯿﻼً ﻟﻜﻦ ﻻ ﺑﺄس ﺳﺄوﺿﺤﮭﺎ ﺑﺎﻷﻣﺜﻠﺔ(‪.‬‬

‫‪<MARQUEE SCROLLAMOUNT="1"> HTML‬‬

‫>‪</MARQUEE‬‬

‫‪<MARQUEE SCROLLAMOUNT="50"> HTML‬‬

‫>‪</MARQUEE‬‬

‫‪<MARQUEE SCROLLAMOUNT="100"> HTML‬‬

‫>‪</MARQUEE‬‬

‫‪163‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫‪<MARQUEE SCROLLAMOUNT="200"> HTML‬‬

‫>‪</MARQUEE‬‬

‫ﻓﻲ اﻟﺤﺎﻟﺔ اﻷوﻟﻰ ﻓﺈن اﻟﻤﺴﺎﻓﺔ اﻟﺘﻲ ﺗﻘﻄﻌﮭﺎ ﻛﻠﻤﺔ ‪ HTML‬ﻓﻲ ﻛﻞ ﺣﺮﻛﺔ ﻟﮭﺎ ھﻲ ‪1‬‬
‫ﺑﯿﻜﺴﻞ‪ .‬أﻣﺎ ﻓﻲ اﻟﻤﺜﺎل اﻟﺜﺎﻧﻲ ﻓﺎﻟﻤﺴﺎﻓﺔ ھﻲ ‪ 50‬ﺑﯿﻜﺴﻞ أي أن اﻟﻜﻠﻤﺔ ﺗﻘﻔﺰ ‪ 50‬ﺑﯿﻜﺴﻞ ﻓﻲ‬
‫ﻛﻞ ﺧﻄﻮة )أو ﻟﻘﻄﺔ( ﺑﻤﺎ ﯾﺴﺎوي ‪ 50‬ﺿﻌﻔﺎً ﻋﻦ اﻟﻤﺜﺎل اﻟﺴﺎﺑﻖ وھﺬا ﻣﺎ ﯾﻌﻄﻲ اﻹﻧﻄﺒﺎع‬
‫ﺑﺎﻟﺴﺮﻋﺔ‪ ،‬وھﻜﺬا اﻷﻣﺮ ﻟﻠﻤﺜﺎﻟﯿﻦ اﻟﻼﺣﻘﯿﻦ وھﻤﺎ ‪ 100‬و ‪ 200‬ﺑﯿﻜﺴﻞ ﻋﻠﻰ اﻟﺘﻮاﻟﻲ‪.‬‬

‫‪ :SCROLLDELAY‬ﻟﻜﻲ ﻧﺤﺪد اﻟﺰﻣﻦ اﻟﺬي ﯾﺴﺘﻐﺮﻗﮫ اﻟﻨﺺ ﻓﻲ اﻟﻘﻔﺰ ﺑﯿﻦ ﻛﻞ‬

‫ﺧﻄﻮة وأﺧﺮى ﻧﺴﺘﺨﺪم ھﺬه اﻟﺨﺎﺻﯿﺔ‪ ،‬واﻟﻘﯿﻤﺔ اﻟﻤﻌﻄﺎه ﻣﻊ ھﺬه اﻟﺨﺎﺻﯿﺔ ﺗﻤﺜﻞ اﻟﺰﻣﻦ‬
‫ﺑﺎﻟﻤﯿﻠﻲ ﺛﺎﻧﯿﺔ )‪ 0.001‬ﻣﻦ اﻟﺜﺎﻧﯿﺔ(‬

‫ﺳﻮف أﺳﺘﺨﺪم ﻧﻔﺲ اﻷﻣﺜﻠﺔ اﻟﺴﺎﺑﻘﺔ ﻣﻊ ھﺬه اﻟﺨﺎﺻﯿﺔ ﻟﻨﻘﺎرن ﺑﯿﻦ اﻟﻨﺘﺎﺋﺞ ﻓﻲ اﻟﺤﺎﻟﺘﯿﻦ‪:‬‬

‫"‪<MARQUEE SCROLLAMOUNT="1‬‬
‫>‪SCROLLDELAY="500"> HTML </MARQUEE‬‬

‫"‪<MARQUEE SCROLLAMOUNT="50‬‬
‫>‪SCROLLDELAY="500"> HTML </MARQUEE‬‬

‫"‪<MARQUEE SCROLLAMOUNT="100‬‬
‫>‪SCROLLDELAY="500"> HTML </MARQUEE‬‬

‫‪164‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫"‪<MARQUEE SCROLLAMOUNT="200‬‬
‫>‪SCROLLDELAY="500"> HTML </MARQUEE‬‬

‫ﻟﻘﺪ أﺳﻨﺪت اﻟﻘﯿﻤﺔ ‪ 500‬ﻟﮭﺬه اﻟﺨﺎﺻﯿﺔ ﻓﻲ ﺟﻤﯿﻊ اﻷﻣﺜﻠﺔ وھﻲ ﺗﻌﻨﻲ أن ھﻨﺎك ﻓﺘﺮة ﻧﺼﻒ‬
‫ﺛﺎﻧﯿﺔ )ﺑﺎﻟﺘﻤﺎم واﻟﻜﻤﺎل( ﺗﻔﺼﻞ ﺑﯿﻦ ﻛﻞ ﺧﻄﻮة وأﺧﺮى ﻟﻠﻜﻠﻤﺔ‪ .‬وأﻋﺘﻘﺪ أن ﻣﺎ ﺗﺮاه اﻵن‬
‫ﯾﻮﺿﺢ ﻟﻚ ﻣﺒﺪأ ﻋﻤﻞ اﻟﺨﺎﺻﯿﺔ اﻟﺴﺎﺑﻘﺔ أﯾﻀﺎً‪ .‬وﺑﺎﻟﻤﻨﺎﺳﺒﺔ‪ ،‬ﻗﺪ ﺗﻀﻄﺮ ﻟﻺﻧﺘﻈﺎر دھﺮاً‬
‫ﻛﺎﻣﻼً ﻟﻜﻲ ﺗﺮى اﻟﻨﺺ ﻓﻲ اﻟﻤﺜﺎل اﻷول‪.‬‬

‫ﻣﺎ رأﯾﻚ اﻵن ﻟﻮ ﻧﻠﻐﻲ اﻟﺨﺎﺻﯿﺔ ‪ SCROLLAMOUNT‬ﻟﻨﺮى ﻛﯿﻒ ﺗﻌﻤﻞ‬

‫‪ SCROLLDELAY‬ﻟﻮﺣﺪھﺎ‬

‫>‪<MARQUEE SCROLLDELAY="500"> HTML </MARQUEE‬‬

‫ﻧﻜﻮن اﻵن ﻗﺪ وﺻﻠﻨﺎ إﻟﻰ ﻧﮭﺎﯾﺔ ھﺬا اﻟﺪرس وھﺬا اﻟﻜﺘﺎب‪ ،‬ﻣﻊ أﺻﺪق ﺗﻤﻨﯿﺎﺗﻲ ﺑﺄن ﯾﻜﻮن‬
‫ﻣﻮﻗﻌﻚ داﺋﻤﺎ ﻣﻨﯿﺮااااااااااااا ﺑﻌﻮن اﷲ‪.........‬‬

‫‪165‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﻨﻬﺎﻳﺔ‬
‫ﺍﻟﻤﺮﺍﺟﻊ ﺍﻟﺘﻲ ﺇﺳﺘﻔﺪﺕ ﻣﻨﻬﺎ ﻫﺬﺍ ﺍﻟﻜﺘﺎﺏ ‪:‬‬

‫ﻣﻮﻗﻊ ‪:‬‬
‫‪www.khayma.com\HPINARABIC‬‬

‫ﺗﻢ ﺑﺤﻤﺪ ﺍﷲ‬

‫ﻧﺴﺄﻝ ﺍﷲ ﺗﺒﺎﺭﻙ ﻭﺗﻌﺎﻟﻰ ﺃﻥ ﻳﻜﻮﻥ ﻫﺬﺍ ﺍﻟﻌﻤﻞ‬
‫ﻃﺎﻫﺮﺍ ﺇﻧﻪ ﻭﻟﻲ ﺫﻟﻚ ﻭﺍﻟﻘﺎﺩﺭ ﻋﻠﻴﻪ‪.‬‬

‫ﻭﺻﻠﻲ ﺍﻟﻠﻬﻢ ﻭﺳﻠﻢ ﻭﺑﺎﺭﻙ ﻋﻠﻰ ﻧﺒﻴﻨﺎ ﻣﺤﻤﺪ ﻭﻋﻠﻰ‬

‫ﺁﻟﻪ ﻭﺻﺤﺒﻪ ﺃﺟﻤﻌﻴﻦ‪.‬‬
‫‪166‬‬
 ‫‪www.dinaro.com/vb3‬‬

‫ﻭﺁﺧﺮ ﺩﻋﻮﺍﻧﺎ ﺃﻥ ﺍﻟﺤﻤﺪ ﷲ ﺭﺏ ﺍﻟﻌﺎﻟﻤﻴﻦ‪.‬‬

‫ﻭﺍﻟﺴﻼﻡ ﻋﻠﻴﻜﻢ ﻭﺭﺣﻤﻪ ﺍﷲ ﻭﺑﺮﻛﺎﺗﻪ‪.‬‬

‫‪167‬‬
www.dinaro.com/vb3

168
www.dinaro.com/vb3

169