كتاب تعلم HTML الاحترف by zaamsam

www.dinaro.com/vb3

 :HTML ‫ﻣﻘﺪﻣﺔ ﻓﻲ ﻟﻐﺔ‬ :

‫ﺍﻟﺪﺭﺱ ﺍﻷﻭﻝ‬

:‫ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻧﻲ‬ : ‫ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻟﺚ‬ : ‫ﺍﻟﺪﺭﺱ ﺍﻟﺮﺍﺑﻊ‬ : ‫ﺍﻟﺪﺭﺱ ﺍﻟﺨﺎﻣﺲ‬ : ‫ﺍﻟﺪﺭﺱ ﺍﻟﺴﺎﺩﺱ‬ 1: ‫ﺍﻟﺪﺭﺱ ﺍﻟﺴﺎﺑﻊ‬ 2: ‫ﺍﻟﺪﺭﺱ ﺍﻟﺜﺎﻣﻦ‬ : ‫ﺍﻟﺪﺭﺱ ﺍﻟﺘﺎﺳﻊ‬ : ‫ﺍﻟﺪﺭﺱ ﺍﻟﻌﺎﺷﺮ‬ 2

www.dinaro.com/vb3

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

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

Explorer

‫‪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

           

‫‪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>

:‫اﻟﻨﺎﺗﺞ‬

‫‪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

‫أﻟﯿﺲ ھﺬا‬ ‫ﻣﻤﺘﻌﺎ‬ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!! 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

‫‪www.dinaro.com/vb3‬‬

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

‫‪28‬‬

www.dinaro.com/vb3

‫‪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 ‫ﺗﻘﻮم اﻟﺨﺎﺻﯿﺔ‬ :‫وﻗﺪ اﺳﺘﺨﺪﻣﺖ اﻟﺼﻮرة اﻟﺘﺎﻟﯿﺔ‬

‫‪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

‫‪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

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>

‫‪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

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

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

‫‪B‬‬ ‫‪F‬‬ ‫‪J‬‬ ‫‪N‬‬ ‫‪R‬‬

‫‪C‬‬ ‫‪G‬‬ ‫‪K‬‬ ‫‪O‬‬ ‫‪S‬‬

‫‪D‬‬ ‫‪H‬‬ ‫‪L‬‬ ‫‪P‬‬ ‫‪T‬‬

‫رﺑﻤﺎ ﺗﻮﺻﻠﺖ إﻟﻰ أﻧﻲ اﺳﺘﺨﺪﻣﺖ ﻋﺪداً ﻛﺒﯿﺮاً ﻣﻦ وﺳﻮم اﻟﻔﺮاﻏﺎت &;‪ 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

www.dinaro.com/vb3

‫‪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

‫‪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

‫‪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> :‫ ﻓﮭﺬا ﺟﺪول ﺑﮭﺎ‬،‫أﻣﺎ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ اﻟﺨﻼﯾﺎ‬

www.dinaro.com/vb3

‫‪www.dinaro.com/vb3‬‬

‫وﻗﺒﻞ أن ﻧﺴﺘﻤﺮ‪ ،‬ﯾﺒﺪو ﻟﻲ أن ھﻨﺎك ﺑﻌﺾ اﻟﻤﻼﺣﻈﺎت اﻟﻤﮭﻤﺔ اﻟﺘﻲ ﯾﻨﺒﻐﻲ ذﻛﺮھﺎ‪:‬‬ ‫ﻛﻤﺎ ﺗﻼﺣﻆ ھﻨﺎك ﺧﺼﺎﺋﺺ ﺗﺘﻜﺮر ﻣﻊ ﺟﻤﯿﻊ اﻟﻮﺳﻮم‪ .‬ﺧﺬ ﻣﺜﻼً اﻟﺨﺎﺻﯿﺔ ‪.BGCOLOR‬‬ ‫ﻛﯿﻒ ﯾﺘﻢ اﻟﺘﻌﺎﻣﻞ ﻣﻌﮭﺎ إذا ﻛﺮرت ﻣﻊ ﺟﻤﯿﻊ اﻟﻮﺳﻮم؟ ﺑﻜﻞ ﺑﺴﺎﻃﺔ ﯾﺘﻢ ﺗﻄﺒﯿﻖ اﻟﻠﻮن اﻟﻤﺤﺪد‬ ‫ﻣﻊ وﺳﻢ اﻟﺨﻠﯿﺔ‪ ،‬ﻓﺈذا ﻟﻢ ﯾﻜﻦ ﻣﺤﺪداً ﯾﻄﺒﻖ اﻟﻠﻮن اﻟﻤﺤﺪد ﻣﻊ وﺳﻢ اﻟﺼﻒ‪ ،‬ﻓﺈذا ﻟﻢ ﯾﻮﺟﺪ‬ ‫ﯾﻄﺒﻖ اﻟﻠﻮن اﻟﻤﺤﺪد ﻣﻊ وﺳﻢ اﻟﺠﺪول‪ .‬وإذا ﻟﻢ ﯾﻜﻦ ھﺬا ﻣﺤﺪداً ﺑﺪوره ﯾﺘﻢ إﻋﺘﻤﺎد ﻟﻮن‬ ‫ﺧﻠﻔﯿﺔ اﻟﺼﻔﺤﺔ اﻟﻤﺤﺪد ﻓﻲ اﻟﻮﺳﻢ >‪.<BODY‬‬ ‫اﻟﻤﻼﺣﻈﺔ اﻟﺜﺎﻧﯿﺔ ﺗﺘﻌﻠﻖ ﺑﺎﻟﺨﺼﺎﺋﺺ ‪ .HEIGHT ،WIDTH‬ﯾﺨﺘﻠﻒ أﺳﻠﻮب اﻟﺘﻌﺎﻣﻞ‬ ‫ﻣﻊ ھﺬه اﻟﺨﺼﺎﺋﺺ ﻣﻦ ﻣﺘﺼﻔﺢ ﻵﺧﺮ‪ ،‬ﺑﻞ وﺗﺨﺘﻠﻒ أﯾﻀﺎً ﻃﺮﯾﻘﺔ ﺗﻔﺴﯿﺮ اﻟﻘﯿﻢ اﻟﻤﺤﺪدة‬ ‫ﻣﻌﮭﺎ وﺧﺼﻮﺻﺎً ﻓﯿﻤﺎ ﯾﺘﻌﻠﻖ ﺑﺎﻟﻨﺴﺐ اﻟﻤﺌﻮﯾﺔ‪) .‬راﺟﻊ اﻟﻤﻮﺿﻮع‪ :‬اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ‬ ‫واﻟﻤﺘﺼﻔﺤﺎت (‪.‬‬ ‫وﺑﺪون اﻟﺨﻮض ﻓﻲ ﺗﻔﺎﺻﯿﻞ ھﺬه اﻹﺧﺘﻼﻓﺎت اﻟﺘﻲ ﻟﻦ ﺗﺆدي إﻻ إﻟﻰ اﻟﻤﺰﯾﺪ ﻣﻦ اﻹﺷﻜﺎﻻت‬ ‫ﻟﺪﯾﻚ‪ ...‬وﺑﻌﺪ اﻟﺘﺠﺮﺑﺔ ﯾﺒﺪو أن أﻓﻀﻞ ﻃﺮﯾﻘﺔ ﻟﻠﺘﻌﺎﻣﻞ ﻣﻊ ھﺬه اﻟﺨﺼﺎﺋﺺ ھﻲ ﻗﯿﺎﻣﻚ ﺑﺘﺤﺪﯾﺪ‬ ‫اﻟﻌﺮض )وﻛﺬﻟﻚ اﻹرﺗﻔﺎع إذا أردت ذﻟﻚ( ﻟﻠﺠﺪول ﻛﻜﻞ ﻣﻦ ﺧﻼل اﻟﻮﺳﻢ >‪ .<TABLE‬ﺛﻢ‬ ‫اﺳﺘﺨﺪام ھﺬه اﻟﺨﺼﺎﺋﺺ ﻓﻲ وﺳﻮم اﻟﺨﻼﯾﺎ وﺗﺤﺪﯾﺪ اﻟﻌﺮض اﻟﻤﻄﻠﻮب ﻟﻜﻞ ﺧﻠﯿﺔ ﻋﻠﻰ ﺣﺪه‬ ‫ﻓﻲ اﻟﺼﻒ اﻷول‪ ،‬واﻻرﺗﻔﺎع اﻟﻤﻄﻠﻮب ﻟﻜﻞ ﺻﻒ ﻓﻲ اﻟﺠﺪول‪.‬‬ ‫وھﺬه ﺑﺮأﯾﻲ أﻓﻀﻞ ﻃﺮﯾﻘﺔ ﺗﻀﻤﻦ ﺑﮭﺎ أﻓﻀﻞ ﻣﺸﺎھﺪة ﻟﻠﺠﺪول ﻟﺠﻤﯿﻊ زوار ﻣﻮﻗﻌﻚ‪.‬‬ ‫إذا أردت أن ﺗﺤﺘﻮي ﺑﻌﺾ اﻟﺼﻔﻮف ﻓﻲ اﻟﺠﺪول ﻋﻠﻰ ﻋﺪد ﻣﻦ اﻟﺨﻼﯾﺎ أﻗﻞ ﻣﻦ ﺑﺎﻗﻲ‬ ‫اﻟﺼﻔﻮف‪ ،‬ﻓﻼ ﯾﻜﻔﻲ أن ﺗﻘﻮم ﺑﺤﺬف وﺳﻮم اﻟﺨﻼﯾﺎ ﻣﻨﮭﺎ‪) .‬ﻛﻤﺎ ﺗﺮى ﻓﻲ اﻟﺸﯿﻔﺮة اﻟﺘﺎﻟﯿﺔ‪(:‬‬

‫‪96‬‬

www.dinaro.com/vb3

<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

‫‪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

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%‬‬ ‫>‪</FRAMESET‬‬

‫‪<FRAMESET‬‬ ‫>"‪COLS="20%,50%,30%‬‬ ‫>‪</FRAMESET‬‬

‫‪106‬‬

‫ﯾﺤﺪد إﻃﺎرﯾﻦ ﻋﻤﻮدﯾﯿﻦ ﺣﺠﻢ ﻛﻞ ﻣﻨﮭﻤﺎ ‪ %50‬ﻣﻦ ﺣﺠﻢ اﻟﺸﺎﺷﺔ‬

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

‫‪www.dinaro.com/vb3‬‬

‫‪<FRAMESET‬‬ ‫>"*‪COLS="200,300,‬‬ ‫>‪</FRAMESET‬‬

‫‪<FRAMESET‬‬ ‫>"‪COLS="200,*,15%,20%‬‬ ‫>‪</FRAMESET‬‬

‫‪<FRAMESET‬‬ ‫>"*‪COLS="150,*,2‬‬ ‫>‪</FRAMESET‬‬

‫ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات ﻋﻤﻮدﯾﺔ اﻷول ﺣﺠﻤﮫ ‪ 200‬ﺑﯿﻜﺴﻞ‪ ،‬واﻟﺜﺎﻧﻲ ‪300‬‬ ‫ﺑﯿﻜﺴﻞ‪،‬‬ ‫أﻣﺎ اﻟﺜﺎﻟﺚ * أي اﻧﮫ ﻏﯿﺮ ﻣﺤﺪد ﺑﺤﺠﻢ ﻣﻌﯿﻦ وﻟﻜﻨﮫ ﺳﯿﻜﻮن ﺑﺎﻟﺤﺠﻢ‬ ‫اﻟﻤﺘﺒﻘﻲ ﻣﻦ اﻟﺸﺎﺷﺔ )ﻃﺎﻟﻤﺎ أﻧﻨﺎ ﻻ ﻧﻌﺮف اﺳﺘﺒﺎﻧﺔ اﻟﺸﺎﺷﺔ اﻟﺘﻲ‬ ‫ﯾﺴﺘﺨﺪﻣﮭﺎ زاﺋﺮ اﻟﻤﻮﻗﻊ(‬ ‫ﯾﺤﺪد أرﺑﻌﺔ إﻃﺎرات ﺣﺠﻢ اﻷول ھﻮ ‪ 200‬ﺑﯿﻜﺴﻞ‪ ،‬واﻟﺜﺎﻟﺚ ‪ %15‬ﻣﻦ‬ ‫ﺣﺠﻢ اﻟﺸﺎﺷﺔ‪ ،‬واﻟﺮاﺑﻊ ‪ %20‬ﻣﻦ ﺣﺠﻢ اﻟﺸﺎﺷﺔ أﻣﺎ اﻟﺜﺎﻧﻲ ﻓﺴﯿﻜﻮن‬ ‫ﺣﺠﻤﮫ ﺑﻤﺎ ﺗﺒﻘﻰ ﻣﻦ اﻟﺸﺎﺷﺔ‪.‬‬ ‫ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات اﻷول ﺣﺠﻤﮫ ‪ 150‬ﺑﯿﻜﺴﻞ‪ ....‬أﻣﺎ اﻟﻤﺴﺎﺣﺔ اﻟﻤﺘﺒﻘﯿﺔ‬ ‫ﻓﺘﻘﺴﻢ ﻋﻠﻰ أﺳﺎس أن اﻹﻃﺎر اﻟﺜﺎﻟﺚ ﺣﺠﻤﮫ ھﻮ ﺿﻌﻔﻲ )*‪ (2‬ﺣﺠﻢ‬ ‫اﻹﻃﺎر اﻟﺜﺎﻧﻲ )*(‬

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

‫‪<FRAMESET‬‬ ‫>"‪ROWS="20%,50%,30%‬‬ ‫>‪</FRAMESET‬‬

‫‪<FRAMESET‬‬ ‫>"*‪ROWS="50,120,‬‬ ‫>‪</FRAMESET‬‬

‫‪<FRAMESET‬‬ ‫>"‪ROWS="50,*,15%,20%‬‬ ‫>‪</FRAMESET‬‬

‫‪107‬‬

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

‫ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات أﻓﻘﯿﺔ ارﺗﻔﺎﻋﺎﺗﮭﺎ ‪ %20‬و ‪ %50‬و ‪ %30‬ﻋﻠﻰ‬ ‫اﻟﺘﻮاﻟﻲ ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ‬ ‫ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات أﻓﻘﯿﺔ اﻷول ارﺗﻔﺎﻋﮫ ‪ 50‬ﺑﯿﻜﺴﻞ‪ ،‬واﻟﺜﺎﻧﻲ ‪120‬‬ ‫ﺑﯿﻜﺴﻞ‪ ،‬واﻟﺜﺎﻟﺚ ﺳﯿﻜﻮن ﺑﺎﻹرﺗﻔﺎع اﻟﻤﺘﺒﻘﻲ ﻣﻦ اﻟﺸﺎﺷﺔ‬ ‫ﯾﺤﺪد أرﺑﻌﺔ إﻃﺎرات أﻓﻘﯿﺔ ارﺗﻔﺎع اﻷول ھﻮ ‪ 50‬ﺑﯿﻜﺴﻞ‪ ،‬واﻟﺜﺎﻟﺚ ‪%15‬‬ ‫ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ‪ ،‬واﻟﺮاﺑﻊ ‪ %20‬ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ أﻣﺎ اﻟﺜﺎﻧﻲ ﻓﺴﯿﻜﻮن‬ ‫ارﺗﻔﺎﻋﮫ ﺑﻤﺎ ﺗﺒﻘﻰ ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ‪.‬‬

‫‪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

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

:‫ﻣﺜﺎل آﺧﺮ‬ <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

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

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

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‬‬ ‫>‪<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‬‬

‫‪1‬‬

‫‪3‬‬

‫‪2‬‬

‫أرﺳﻞ‬

‫اﻧﺴﻰ اﻷﻣﺮ‬

‫وھﻲ اﻷﺷﻜﺎل اﻟﻤﻮﺟﻮدة ﻓﻲ اﻟﺪﻓﺘﺮ ﻓﻘﻂ‪ .‬وأود أن أﻟﻔﺖ ﻧﻈﺮك إﻟﻰ وﺟﻮد أﺷﻜﺎل أﺧﺮى‬ ‫ﺳﻮف ﯾﺘﻢ اﻟﺘﻌﺎﻣﻞ ﻣﻌﮭﺎ ﻣﻦ ﺧﻼل ھﺬا اﻟﺪرس‪.‬‬ ‫واﻵن إﻟﻰ اﻟﻌﻤﻞ ﯾﺎ ﻋﺰﯾﺰي اﻟﻤﺘﺪرب‬ ‫‪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‬‬ ‫>"‪<INPUT TYPE="submit‬‬

‫‪Soumettre la requête‬‬

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

‫‪Rétablir‬‬

‫>"‪<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‬‬ ‫‪: Please enter your address‬‬

‫‪132‬‬

‫‪maroc‬‬

‫‪www.dinaro.com/vb3‬‬

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

‫‪: Please enter your address‬‬

‫‪maroc‬‬

‫ﺣﺎول اﻟﻜﺘﺎﺑﺔ ﻓﻲ ھﺬا اﻟﺤﻘﻞ ﻷﻛﺜﺮ ﻣﻦ ‪ 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