تعلم html - PDF Free Download

www.dinaro.com/vb3 1 www.dinaro.com/vb3  :HTML ‫ﻣﻘﺪﻣﺔ ﻓﻲ ﻟﻐﺔ‬ : ‫ﺍﻟﺪﺭﺱ ﺍﻷﻭﻝ‬ :‫ﺍﻟﺪ...

Author: أيوب معتصم

86 downloads 463 Views 8MB Size Report

This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!

Report copyright / DMCA form

DOWNLOAD PDF

www.dinaro.com/vb3

1

www.dinaro.com/vb3

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

‫ﺍﻟﺪﺭﺱ ﺍﻷﻭﻝ‬

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

www.dinaro.com/vb3

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

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

Explorer

3

‫‪www.dinaro.com/vb3‬‬

‫ﻛﻠﻤﺔ ﺍﻟﻤﺆﻟﻒ‬ ‫ان اﻟﺘﻄﻮر اﻟﺸﺪﯾﺪ اﻟﺬي ﺷﮭﺪﺗﮫ ﻟﻐﺔ ‪، HTML‬واﻻﻋﺪاد اﻟﮭﺎﺋﻠﺔ اﻟﺘﻲ ﺗﺤﺎول ان ﺗﺘﻌﻠﻢ‬ ‫ھﺬه اﻟﻠﻐﺔ اﻟﺠﻤﯿﻠﺔ واﻟﺴﮭﻠﺔ ﻛﺎن ﻻﺑﺪ ﻟﻲ ﻣﻦ اﻧﺸﺎء ﻛﺘﺎب ﯾﺘﺤﺪث ﻋﻦ ھﺬه اﻟﻠﻐﺔ‪.‬‬ ‫وﻓﻲ اﻟﺤﻘﯿﻘﺔ ﺗﻮﺟﺪ ﻛﺜﯿﺮ ﻣﻦ اﻟﻜﺘﺐ ﺗﺘﺤﺪث ﻋﻦ ﻟﻐﺔ ‪، HTML‬وﻟﻜﻦ ﻗﻠﯿﻞ ﻣﻨﮭﺎ ﯾﻌﻠﻤﻚ‬ ‫ﻛﯿﻒ ﺗﺼﺒﺢ ﻣﺼﻤﻢ ﺻﻔﺤﺎت وﯾﺐ ﻧﺎﺟﺢ‪.‬‬ ‫وﻓﻲ ھﺬا اﻟﻜﺘﺎب ﺳﻨﺴﯿﺮ ﺧﻄﻮة ﺧﻄﻮة ﯾﺎ ﻋﺰﯾﺰي اﻟﻤﺘﺪرب‪.‬‬ ‫وﻟﻘﺪ اﻋﺘﻤﺪت ﻋﻠﻰ ﻋﺪة ﻣﺼﺎدر وﻛﺘﺐ ‪.......................‬وادﻋﻮا ﻟﮭﻢ ﺑﺎﻟﺨﯿﺮ واﻟﺼﺤﺔ‬ ‫واﻟﻌﻄﺎء اﻟﺪاﺋﻢ‪.‬‬

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

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

‫‪4‬‬

‫‪www.dinaro.com/vb3‬‬

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

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

‫‪www.dinaro.com/vb3‬‬

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

‫ﯾﻤﻨﻊ اﺳﺘﻐﻼل ھﺬا اﻟﻜﺘﺎب ﻓﻲ اي اﻣﻮر ﺗﺠﺎرﯾﺔ ﺑﺪون اﻻذن اﻟﺨﻄﻲ ﻣﻦ‬ ‫اﻟﻤﺆﻟﻒ‪..........‬‬ ‫اﻟﻤﺆﻟﻒ ﻏﯿﺮ ﻣﺴﺆول ﺗﻤﺎﻣﺎ ﻋﻦ اي اﺳﺘﻌﻤﺎل ﻏﯿﺮ ﺷﺮﻋﻲ ﻟﮭﺬا اﻟﻜﺘﺎب‪..‬‬ ‫ﻓﻲ ﺣﺎﻟﺔ وﺟﺪت اي اﺧﻄﺎء ﻓﻲ ھﺬا اﻟﻜﺘﺎب ﯾﻤﻜﻨﻚ ﻣﺮاﺳﻠﺘﻲ ﻋﻠﻰ اﻟﺒﺮﯾﺪ اﻟﺘﺎﻟﻲ ‪:‬‬

‫‪[email protected]‬‬

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

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

‫‪www.dinaro.com/vb3‬‬

‫ﺛﻤﻦ ﺍﻟﻜﺘﺎﺏ‬ ‫ﺍﻟﺪﻋﺎﺀ ﻟﻲ ﻭﻟﻮﺍﻟﺪﻱ ﻭﻟﺠﻤﻴﻊ ﺍﻟﻤﺴﻠﻤﻴﻦ ﺑﺎﻟﺼﺤﺔ ﻭﺍﻟﻬﻨﺎﺀ ﻭﺍﻻﺯﺩﻫﺎﺭ ﻭﺍﻟﻨﻤﺎﺀ‬

‫ﻭﺍﻟﻌﻄﺎﺀ ﺍﻟﺪﺍﺋﻢ ﻭﺍﻟﺸﻔﺎﺀ‪...............................‬ﻭﺍﻟﻔﻮﺯ ﺑﺎﻟﺠﻨﺔ ﻭﺍﻟﻨﺠﺎﺓ ﻣﻦ ﺍﻟﻨﺎﺭ‬ ‫ﻭﻫﺬﺍ ﻛﻞ ﻣﺎ ﺃﻃﻠﺒﻪ‪......‬ﻭﺷﻜﺮﺍ ﻟﻜﻢ‪...‬‬

‫‪7‬‬

www.dinaro.com/vb3

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

8

‫‪www.dinaro.com/vb3‬‬

‫ﻣﻘﺪﻣﺔ ﻓﻲ ﻟﻐﺔ ‪HTML‬‬ ‫أھﻼً ﺑﻚ إﻟﻰ ﻣﻘﺪﻣﺔ ﻟﻐﺔ ‪ HTML‬أو ﻛﻤﺎ ﯾﺴﻤﯿﮭﺎ اﻟﺒﻌﺾ ﻟﻐﺔ اﻟﮭﺘﻤﻞ ‪.‬‬ ‫ﺣﺴﻨﺎً ﻓﻠﻨﺒﺪأ اﻟﺸﺮح وﻟﻜﻦ أوﻻً أرﯾﺪ أن أﺟﯿﺐ ﻋﻠﻰ ﺑﻌﺾ أﺳﺌﻠﺘﻚ واﺗﻮﻗﻊ أن أول ﺳﺆال‬ ‫ﯾﻘﻮل ‪:‬‬ ‫ﻣﺎ ﻣﻌﻨﻰ ﻟﻐﺔ ‪ HTML‬؟‬ ‫ان ﻟﻐﺔ ‪ HTML‬وھﻲ اﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ )‪(Language Markup Text Hyper‬‬ ‫وھﻲ إﺣﺪى اﻟﻄﺮق ﻓﻲ ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎت ﻋﻠﻰ اﻻﻧﺘﺮﻧﺖ أو ﺗﺰﯾﯿﻦ اﻟﺮﺳﺎﺋﻞ اﻟﺘﻲ ﺗﺒﻌﺚ ﻋﺒﺮ‬ ‫اﻟﺒﺮﯾﺪاﻻﻟﻜﺘﺮوﻧﻲ‪.‬‬ ‫ان ﻟﻐﺔ ‪ HTML‬ﻟﯿﺴﺖ ﻟﻐﺔ ﺑﺮﻣﺠﯿﺔ ﻛﻠﻐﺔ ‪ C++‬أو ‪ JAVA‬أو ‪ C‬ﻓﮭﻲ ﻟﻐﺔ ﺳﮭﻠﺔ‬ ‫وﻏﯿﺮ ﻣﻌﻘﺪة وﻻ ﺗﺤﺘﻮي ﻋﻠﻰ ﺷﯿﻔﺮات ﻛﺜﯿﺮة ﻛﺬﻟﻚ ﻓﮭﻲ ﻻ ﺗﺤﺘﺎج إﻟﻰ ﻣﺘﺮﺟﻢ ‪ .‬ﻟﺬﻟﻚ ﻓﮭﻲ‬ ‫ﻟﻐﺔ ﺑﺴﯿﻄﺔ ﺟﺪاً‪ ،‬وﺳﮭﻠﺔ اﻟﻔﮭﻢ واﻟﺘﻌﻠﻢ وﻻ ﺗﺤﺘﺎج ﻟﻤﻌﺮﻓﺔ ﻣﺴﺒﻘﺔ ﺑﻠﻐﺎت اﻟﺒﺮﻣﺠﺔ‬ ‫واﻟﮭﯿﻜﻠﯿﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﯿﮭﺎ‪.‬‬ ‫ﺗﺤﺘﺎج داﺋﻤﺎً إﻟﻰ ﺗﻄﺒﯿﻖ ﻣﺎ ﺗﺘﻌﻠﻤﮫ ﺑﺼﻮرة ﻋﻤﻠﯿﺔ أﻛﺜﺮ ﻣﻦ ﻣﺠﺮد اﻷﻣﺜﻠﺔ اﻟﻤﺪرﺟﺔ ﻓﻲ‬ ‫اﻟﻜﺘﺎب‪.‬‬

‫‪9‬‬

‫‪www.dinaro.com/vb3‬‬

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

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

‫‪10‬‬

‫‪www.dinaro.com/vb3‬‬

‫ﺳﻮف أﺷﺮح ﻛﻞ وﺳﻢ ﻋﻠﻰ ﺣﺪى ‪:‬‬ ‫واﻟﻮﺳﻢ اﻷول ھﻮ اﻟﻮﺳﻢ > ‪ < HTML‬اﻟﺬي ﻛﻤﺎ ذﻛﺮت ﺳﺎﺑﻘﺎً أﻧﮫ أھﻢ اﻟﻮﺳﻮم‬ ‫اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﻲ ﺑﻨﺎء اﻟﺼﻔﺤﺎت اﻟﻤﺴﺘﺨﺪم ﻓﯿﮭﺎ ﻟﻐﺔ اﻟـ‪ ، HTML‬ﻷﻧﮫ ﯾﻘﻮم ﺑﺘﻌﺮﯾﻒ‬ ‫ﻟﻠﻤﺘﺼﻔﺢ أن ھﺬه اﻟﺼﻔﺤﺔ ﻣﺼﻨﻮﻋﺔ ﺑﻠﻐﺔ اﻟـ‪ HTML‬وﯾﻮﺿﻊ ھﺬا اﻟﻮﺳﻢ ﻓﻲ أول‬ ‫اﻟﻤﺴﺘﻨﺪ اﻟﻤﺼﻨﻮع ﺑﻠﻐﺔ اﻟـ‪ HTML‬وﻟﻮﻻ ھﺬا اﻟﻮﺳﻢ ﻟﻈﮭﺮت ﻣﺤﺘﻮﯾﺎت اﻟﺼﻔﺤﺔ ﺑﺼﻮرة‬ ‫ﺑﺎھﺘﺔ وﻏﯿﺮ ﻣﻔﮭﻮﻣﺔ ‪ ،‬وﺳﻢ اﻟﻨﮭﺎﯾﺔ ھﻮ > ‪ < /HTML‬اﻟﺬي ﯾﻮﺿﻊ أﺧﺮ اﻟﻤﺴﺘﻨﺪ‬ ‫اﻟﻤﺼﻨﻮع ﺑﻠﻐﺔ اﻟـ‪. HTML‬‬ ‫ﻓﻠﻨﺄﺗﻲ اﻵن ﻟﻠﻮﺳﻢ > ‪ < HEAD‬اﻟﺬي ﯾﺴﺘﺨﺪم ﻟﺘﻌﺮﯾﻒ ﺻﺎﺣﺐ اﻟﺼﻔﺤﺔ واﻟﻠﻐﺔ واﻟﻌﺪﯾﺪ‬ ‫ﻣﻦ اﻷﺷﯿﺎء اﻟﺘﻲ ﺳﻮف ﻧﺸﺮﺣﮭﺎ ﻓﻲ دروس ﻗﺎدﻣﺔ إﻧﺸﺎء اﷲ ‪ .‬وأذﻛﺮك أن وﺳﻢ اﻟﻨﮭﺎﯾﺔ‬ ‫اﻟﺨﺎص ﺑﮫ ھﻮ > ‪< /HEAD‬‬

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

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

‫‪11‬‬

‫‪www.dinaro.com/vb3‬‬

‫ﺇﺫﻥ ﻤﻠﻑ ‪ Html‬ﻴﺒﺩﺃ ﺩﺍﺌﻤﺎﹰ ﺒﺎﻟﻭﺴﻡ >‪ ‪ .‪‪‪<TITLE‬‬ ‫‪first page web‬‬ ‫>‪‪
www.dinaro.com/vb3

hello world !!

:‫اﻟﻨﺎﺗﺞ‬

13

‫‪www.dinaro.com/vb3‬‬

‫اﻟﻨﺎﺗﺞ‪:‬‬

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

‫‪14‬‬

‫‪www.dinaro.com/vb3‬‬

‫ﻻ ﯾﻮﺟﺪ ﻓﺮق ﺑﯿﻦ ﻛﺘﺎﺑﺔ اﻟﻮﺳﻮم ﺑﺎﻷﺣﺮف اﻹﻧﺠﻠﯿﺰﯾﺔ اﻟﻜﺒﯿﺮة ‪ UPPERCASE‬أو‬ ‫اﻷﺣﺮف اﻟﺼﻐﯿﺮة ‪ .lowercase‬ﻟﺬﻟﻚ ﺗﺴﺘﻄﯿﻊ اﻟﻜﺘﺎﺑﺔ ﺑﺄي ﺷﻜﻞ ﻣﻨﮭﻤﺎ أو ﺣﺘﻰ اﻟﻜﺘﺎﺑﺔ‬ ‫ﺑﻜﻠﯿﮭﻤﺎ‪.‬‬

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

‫‪<TITLE> first page web‬‬ ‫>‪‪hello world !! ‪‪‪<TITLE‬‬ ‫‪first‬‬ ‫‪page‬‬ ‫‪web‬‬ ‫>‪‪‪
‫‪www.dinaro.com/vb3‬‬

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

‫ﺳﻮف ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪
‫ﻗﻢ ﺑﺘﻌﺪﯾﻞ اﻟﻤﻠﻒ اﻟﺴﺎﺑﻖ ﻟﻜﻲ ﯾﺼﺒﺢ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ ‪:‬‬ ‫>‪‪‪<TITLE‬‬ ‫‪first page web‬‬ ‫>‪‪‪‪hello
world ‪‪
‫اﻟﻨﺎﺗﺞ‪:‬‬ ‫‪16‬‬

‫‪www.dinaro.com/vb3‬‬

‫وھﻨﺎك أﯾﻀﺎ اﻟﻮﺳﻢ >‪
‫>‪‪‪<TITLE‬‬ ‫‪first page web‬‬ ‫>‪‪‪‪hello

world ‪‪
‫‪17‬‬

‫‪www.dinaro.com/vb3‬‬

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

‫اﻟﻨﺎﺗﺞ‪:‬‬

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

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

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

‫‪19‬‬

www.dinaro.com/vb3

20

www.dinaro.com/vb3

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

‫‪www.dinaro.com/vb3‬‬

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

‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺜﺎﻧﻲ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬ ‫ﺳﻮف ﻧﻘﻮم ﻓﻲ ھﺬا اﻟﺪرس ﺑﺎﻟﺘﻌﺮف ﻋﻠﻰ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﯾﻤﻜﻦ إﺿﺎﻓﺘﮭﺎ إﻟﻰ اﻟﻮﺳﻢ‬ ‫>‪ ‪. ...
‫‪22‬‬

‫‪www.dinaro.com/vb3‬‬

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

‫ﻣﺜﺎل ‪:‬‬ ‫>‪‪‪<TITLE‬‬ ‫‪first page web‬‬ ‫>‪‪"‪
‫ﻓﻤﻦ أﯾﻦ ﺟﺎءت ھﺬه اﻟﻘﯿﻢ‪ ،‬وﻛﯿﻒ؟‬

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

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

‫‪24‬‬

‫‪www.dinaro.com/vb3‬‬

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

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

‫وﺑﻌﻤﻠﯿﺔ ﺣﺴﺎﺑﯿﺔ ﺑﺴﯿﻄﺔ ‪ 256×256×256‬ﯾﻨﺘﺞ ﻟﺪﯾﻨﺎ أن ﻋﺪد اﻷﻟﻮان اﻟﺘﻲ ﯾﻤﻜﻦ‬ ‫اﻟﺤﺼﻮل ﻋﻠﯿﮭﺎ ﺑﻤﺰج اﻷﻟﻮان اﻟﺜﻼﺛﺔ اﻟﺴﺎﺑﻘﺔ ھﻮ ‪ 16777216‬ﺑﺎﻟﻀﺒﻂ‪.‬‬

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

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

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

www.dinaro.com/vb3

26

www.dinaro.com/vb3

27

‫‪www.dinaro.com/vb3‬‬

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

‫‪28‬‬

www.dinaro.com/vb3

29

‫‪www.dinaro.com/vb3‬‬

‫ﻣﻼﺣﻈﺔ ﻣﮭﻤﺔ‪:‬‬ ‫ﺑﻌﺾ اﻟﻤﺘﺼﻔﺤﺎت ﻻ ﺗﺘﻌﺮف ﻋﻠﻰ رﻣﻮز اﻷﻟﻮان إﻻ ﺑﻮﺿﻊ إﺷﺎرة ‪ #‬ﻗﺒﻞ ھﺬه اﻟﺮﻣﻮز‪،‬‬ ‫ﻟﺬﻟﻚ ﻣﻦ اﻷﻓﻀﻞ اﺳﺘﺨﺪاﻣﮭﺎ داﺋﻤﺎً‪.‬‬ ‫وﺑﺎﻟﻨﺴﺒﺔ ﻟﺒﻌﺾ اﻷﻟﻮان اﻷﺳﺎﺳﯿﺔ واﻟﺪارﺟﺔ‪ ،‬ﻣﻦ اﻟﻤﻤﻜﻦ اﺳﺘﺨﺪام أﺳﻤﺎء ھﺬه اﻷﻟﻮان‬ ‫ﻣﺒﺎﺷﺮة ﺑﺪﻻً ﻣﻦ اﻷرﻗﺎم اﻟﺴﺪاس ﻋﺸﺮﯾﺔ‪ .‬وھﺬا ﺟﺪول ﯾﻮﺿﺢ ھﺬه اﻷﻟﻮان وﻣﺴﻤﯿﺎﺗﮭﺎ‪:‬‬

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

‫ﻣﺜﺎل ‪:‬‬

‫‪30‬‬

www.dinaro.com/vb3

<TITLE> first page web hello world !! ‫ ﺑﺘﺤﺪﯾﺪ ﺻﻮرة ﻛﺨﻠﻔﯿﺔ )ورق ﺟﺪران( ﻟﻠﺼﻔﺤﺔ‬BACKGROUND ‫ﺗﻘﻮم اﻟﺨﺎﺻﯿﺔ‬ :‫وﻗﺪ اﺳﺘﺨﺪﻣﺖ اﻟﺼﻮرة اﻟﺘﺎﻟﯿﺔ‬

31

‫‪www.dinaro.com/vb3‬‬

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

‫‪32‬‬

‫‪www.dinaro.com/vb3‬‬

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

‫‪www.dinaro.com/vb3‬‬

‫واﻵن‪ ،‬دﻋﻨﺎ ﻧﺠﻤﻞ اﻟﺨﺼﺎﺋﺺ اﻟﺴﺎﺑﻘﺔ ﻓﻲ ﻋﺒﺎرة واﺣﺪة‪ .‬وﺳﻮف أﻛﺘﺐ اﻟﺮﻣﻮز اﻟﺨﺎﺻﺔ‬ ‫ﺑﺎﻷﻟﻮان ﺑﻨﻔﺲ ﺗﻠﻚ اﻷﻟﻮان اﻟﺘﻲ ﺗﻤﺜﻠﮭﺎ‪ .‬وأﻟﻔﺖ ﻧﻈﺮك إﻟﻰ أﻧﮫ ﻻ أھﻤﯿﺔ ﻟﻠﺘﺮﺗﯿﺐ ﻓﻲ ﻛﺘﺎﺑﺔ‬ ‫ھﺬه اﻟﺨﺼﺎﺋﺺ داﺧﻞ اﻟﻌﺒﺎرة‪.‬‬ ‫ﻣﺜﺎل ‪:‬‬ ‫>‪‪‪<TITLE‬‬ ‫‪first page web‬‬ ‫>‪‪ This is multi colors, multi faces, and multi sizes text This

is

multi colors, multi

faces,

and

multi sizes

text

C O 40

‫‪www.dinaro.com/vb3‬‬

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

‫ھﻞ ﻻﺣﻈﺖ اﻧﮫ وﺳﻢ ﻣﻔﺮد وﻻ ﯾﺤﺘﻮي ﻋﻠﻰ وﺳﻢ ﻟﻠﻨﮭﺎﯾﺔ؟ ﺑﺎﻟﻄﺒﻊ ﻣﺎ اﻟﺤﺎﺟﺔ إﻟﻰ وﺳﻢ‬ ‫اﻟﻨﮭﺎﯾﺔ ﻃﺎﻟﻤﺎ أﻧﮫ ﯾﺘﻌﺎﻣﻞ ﻣﻊ اﻟﺼﻔﺤﺔ ﻛﻜﻞ وﻣﻊ اﻹﻋﺪادات اﻷﺳﺎﺳﯿﺔ ﻟﮭﺎ‪ ،‬وﻟﯿﺲ ﻣﻊ ﻛﻠﻤﺔ‬ ‫أو ﺳﻄﺮ أو ﻓﻘﺮة ﺑﺬاﺗﮭﺎ‪ .‬ﻟﺬﻟﻚ ﻓﺈن ھﺬا اﻟﻮﺳﻢ ﯾﻜﺘﺐ ﻋﺎدة ﻓﻲ أول اﻟﻤﻠﻒ‪ ،‬وﯾﻔﻀﻞ ﻣﺒﺎﺷﺮة‬ ‫ﺑﻌﺪ وﺳﻢ >‪ .‪) ،
‫>"‪‪
‫‪This text is red, size + 3, Italic, and‬‬ ‫‪Underlined‬‬ ‫وﻗﺪ أردت ﻣﻦ ھﺬه اﻷﻣﺜﻠﺔ ﺗﻮﺿﯿﺢ ﻣﺴﺎﺋﻞ ﻣﻌﯿﻨﺔ أوﻟﮭﺎ‪ :‬أن ﺑﺈﻣﻜﺎﻧﻨﺎ اﺳﺘﺨﺪام ﻋﺪة وﺳﻮم‬ ‫وﺗﻨﺴﯿﻘﺎت ﻣﻌﺎً ﻓﻲ ﻧﻔﺲ اﻟﻮﻗﺖ وﻟﻨﻔﺲ اﻟﻤﻘﻄﻊ ﻣﻦ اﻟﻨﺺ‪) .‬وذﻟﻚ ﻟﺠﻤﯿﻊ اﻟﻮﺳﻮم وﻟﯿﺲ‬ ‫ﻓﻘﻂ ﻟﻮﺳﻮم اﻟﺨﻄﻮط(‪ .‬وﻛﻤﺎ ذﻛﺮت ﺳﺎﺑﻘﺎً‪ ،‬ﻻ أھﻤﯿﺔ ﻟﺘﺮﺗﯿﺐ ھﺬه اﻟﻮﺳﻮم وﻻ أﯾﮭﺎ ورد‬

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

‫‪47‬‬

‫‪www.dinaro.com/vb3‬‬

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

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

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

www.dinaro.com/vb3

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

‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﺮﺍﺑﻊ‬

‫‪‬‬ ‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺮاﺑﻊ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬ ‫ﻓﻲ ھﺬا اﻟﺪرس ﺳﻮف ﻧﻨﺎﻗﺶ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺎﻟﻔﻘﺮات ﺑﺸﻜﻞ ﺧﺎص وﺗﺮﺗﯿﺐ اﻟﺼﻔﺤﺎت‬ ‫وﺗﻨﺴﯿﻘﮭﺎ ﺑﺸﻜﻞ ﻋﺎم‪.‬‬ ‫ﺻﺤﯿﺢ أن اﺳﺘﺨﺪاﻣﻚ ﻟﻸﻟﻮان واﻟﺮﺳﻮﻣﺎت ﻓﻲ اﻟﺼﻔﺤﺔ ﯾﻀﻔﻲ ﻋﻠﯿﮭﺎ ﻧﻮﻋﺎً ﻣﻦ اﻟﺤﯿﻮﯾﺔ‪،‬‬ ‫وأن اﻟﺨﻄﻮط ﺗﻌﻄﻲ ﺻﻔﺤﺘﻚ روﻧﻘﺎً وﺟﻤﺎﻻً‪ .‬ﻟﻜﻨﻚ إن ﻟﻢ ﺗﮭﺘﻢ ﺑﺘﺮﺗﯿﺐ ﺻﻔﺤﺘﻚ أو ﺗﻘﻀﻲ‬ ‫ﺑﻌﺾ اﻟﻮﻗﺖ ﻓﻲ ﺗﻨﺴﯿﻖ ھﯿﻜﻠﮭﺎ اﻟﻌﺎم وﺗﻨﻈﯿﻢ ﻓﻘﺮاﺗﮭﺎ وﻗﻮاﺋﻤﮭﺎ‪ ،‬ﻓﺈﻧﮫ ﻣﻦ اﻟﺼﻌﺐ ﻋﻠﯿﻚ‬ ‫اﻟﺤﺼﻮل ﻋﻠﻰ ﺻﻔﺤﺔ وﯾﺐ ﻧﺎﺟﺤﺔ‪ .‬ﻓﺎﻟﺘﺮﺗﯿﺐ ھﻮ اﻟﺨﻄﻮة اﻷوﻟﻰ ﻟﺠﺬب اھﺘﻤﺎم اﻟﺰاﺋﺮ أو‬ ‫اﻟﻘﺎرئ ﻟﺼﻔﺤﺘﻚ وﺗﺴﮭﻞ ﻋﻠﯿﮫ ﻓﮭﻢ اﻟﺨﻄﻮط اﻟﻌﺮﯾﻀﺔ ﻟﻠﺼﻔﺤﺔ‪.‬‬ ‫ﻟﻘﺪ ﻗﻤﺖ ﻓﻲ اﻟﺪرس اﻷول ﺑﺈﯾﻀﺎح ﺑﻌﺾ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺎﻟﻔﻘﺮات‪ .‬وﻻ ﺑﺄس ﻣﻦ ﺗﺬﻛﯿﺮك‬ ‫ﺑﮭﺎ‪ .‬ﻓﺎﻟﻮﺳﻢ >‪ ‪
‫‪50‬‬

www.dinaro.com/vb3

...

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

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

This is a left-aligned paragraph

This is left-aligned paragraph

This is right-aligned paragraph
This is a right-aligned paragraph

This is a centered paragraph
This is a centered paragraph

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

This is a centered text This is a centered text 51

‫‪www.dinaro.com/vb3‬‬

‫أﻣﺎ اﻟﺨﺎﺻﯿﺔ ‪ DIR‬واﻟﺘﻲ ﻧﺴﺘﺨﺪﻣﮭﺎ أﯾﻀﺎً ﻣﻊ >‪
‫)ﺗﺬﻛﺮ ھﺬه اﻟﺨﺎﺻﯿﺔ ﺟﯿﺪاً ﻓﮭﻲ ﻣﮭﻤﺔ ﻋﻨﺪ ﻛﺘﺎﺑﺔ ﺻﻔﺤﺎت ﺑﺎﻟﻠﻐﺔ اﻟﻌﺮﺑﯿﺔ(‬

‫وﻟﺘﻨﺴﯿﻖ اﻟﻔﻘﺮات أﯾﻀﺎً ﯾﻮﺟﺪ اﻟﻮﺳﻮم‬ ‫>‪ ...
‫أﻧﻈﺮ إﻟﻰ اﻟﻔﻘﺮة اﻟﺘﺎﻟﯿﺔ اﻟﺘﻲ ﻗﻤﺖ )ﺑﺎﻗﺘﺒﺎﺳﮭﺎ( ﻣﻦ إﺣﺪى ﺻﻔﺤﺎت ھﺬا اﻟﻤﻮﻗﻊ‪ .‬وﻣﻦ ﺛﻢ‬ ‫وﺿﻌﺘﮭﺎ ﺿﻤﻦ >‪ ...
‫واﻟﺤﻘﯿﻘﺔ أﻧﻚ ﺗﺴﺘﻄﯿﻊ وﺿﻊ ﻋﺪة وﺳﻮم ﻣﻌﺎً إذا أردت إدراج ھﻮاﻣﺶ أﻛﺒﺮ‪ .‬ﻛﻤﺎ ﻓﻲ‬ ‫اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ‪:‬‬

‫‪52‬‬

‫‪www.dinaro.com/vb3‬‬

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

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

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

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

‫رﺑﻤﺎ ﺗﻮﺻﻠﺖ إﻟﻰ أﻧﻲ اﺳﺘﺨﺪﻣﺖ ﻋﺪداً ﻛﺒﯿﺮاً ﻣﻦ وﺳﻮم اﻟﻔﺮاﻏﺎت &;‪ nbsp‬وﻧﮭﺎﯾﺔ‬ ‫اﻟﺴﻄﺮ >‪.
‫ﺣﺴﻨﺎً‪ ،‬إﺳﺘﻨﺘﺎﺟﻚ ﻻ ﺑﺄس ﺑﮫ وﻟﻜﻨﮫ ﻟﯿﺲ دﻗﯿﻘﺎً ﻓﺄﻧﺎ ﻟﻢ أﺳﺘﺨﺪم أﯾﺎً ﻣﻦ ھﺬه اﻟﻮﺳﻮم ھﻨﺎ‪.‬‬

‫ﺑﻞ ﻛﻞ ﻣﺎ ﻓﻌﻠﺘﮫ ﺑﻌﺪ إﻋﺪاد ھﺬا اﻟﺸﻜﻞ ھﻮ وﺿﻌﮫ ﺿﻤﻦ‪:‬‬ ‫>‪
...
‫‪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‬‬

‫>‪ ... ‪ ...
‫وﻟﺘﻌﯿﯿﻦ ﻛﻞ ﺑﻨﺪ ﻣﻦ ﺑﻨﻮد اﻟﻘﺎﺋﻤﺔ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪
‫>‪‪‪‪‪‪‪‪‪‪‪‪‪‪
‫‪56‬‬

‫‪www.dinaro.com/vb3‬‬

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

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

‫‪57‬‬

‫‪www.dinaro.com/vb3‬‬

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

‫>"‪

‫>"‪
‫ھﺬا اﻟﺤﺪﯾﺚ ﯾﻘﻮدﻧﻲ إﻟﻰ وﺣﺪة اﻟﺒﯿﻜﺴﻞ ‪) 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‬‬

‫ﻧﺴﺘﺨﺪم اﻟﻮﺳﻮم‬ ‫>‪ ...
‫ﻛﻮﺳﻮم أﺳﺎﺳﯿﺔ ﻹدراج اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ‪ ،‬وھﻲ اﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ ‪ .Anchor‬وھﻲ ﻻ‬ ‫ﺗﻌﻤﻞ ﻟﻮﺣﺪھﺎ ﺑﻞ ﺗﺘﻄﻠﺐ إﺿﺎﻓﺔ ﺧﺼﺎﺋﺺ ﻣﻌﯿﻨﺔ أوﻟﮭﺎ وأھﻤﮭﺎ اﻟﺨﺎﺻﯿﺔ‬

‫‪HREF‬‬

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

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

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

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

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

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

‫>‪Go To Dinaro
‫‪Go To Dinaro‬‬

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

‫‪74‬‬

‫‪www.dinaro.com/vb3‬‬

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

‫"=‪‪DINARO1.gif" BORDER="0">
‫أو ﺣﺘﻰ ﺗﻜﺒﯿﺮه ﺑﻜﺘﺎﺑﺔ اﻟﺴﻤﻚ اﻟﻤﻄﻠﻮب ﻣﻊ ھﺬه اﻟﺨﺎﺻﯿﺔ‪.‬‬ ‫"=‪‪DINARO1.gif" BORDER="7">
‫‪www.dinaro.com/vb3‬‬

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

‫>‪Main Page
‫‪Main Page‬‬ ‫وأذﻛﺮك ﺑﺄﻧﻚ ﺗﺴﺘﻄﯿﻊ إدراج ﺻﻮرة ھﻨﺎ أﯾﻀﺎً ﻛﻌﻨﻮان ﻟﻠﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ وذﻟﻚ ﺑﻨﻔﺲ‬ ‫اﻟﺘﻔﺎﺻﯿﻞ اﻟﺘﻲ ﺷﺮﺣﺘﮭﺎ ﻓﻲ اﻟﺤﺎﻟﺔ اﻟﺴﺎﺑﻘﺔ‪.‬‬ ‫ھﯿﺎ ﻧﺪرج ﺻﻮرة ﻣﺼﻐﺮة ﻛﻌﻨﻮان ﻟﻮﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ ﻟﻠﺼﻮرة اﻷﺻﻠﯿﺔ‪.‬‬ ‫"‪
‫‪www.dinaro.com/vb3‬‬

‫ﻟﻜﻦ إﻧﺘﺒﮫ إذا ﻛﺎن اﻟﻤﻠﻒ اﻟﻤﻄﻠﻮب واﻟﺬي ﺗﺮﯾﺪ اﻹﺷﺎرة إﻟﯿﮫ ﻣﻮﺟﻮداً ﻓﻲ ﻣﺠﻠﺪ ﻣﺨﺘﻠﻒ ﻋﻦ‬ ‫اﻟﻤﺠﻠﺪ اﻟﺬي ﯾﻮﺟﺪ ﺑﮫ اﻟﻤﻠﻒ اﻟﺤﺎﻟﻲ‪ ،‬ﻓﯿﺠﺐ ﻋﻠﯿﻚ ﺗﺤﺪﯾﺪ اﻟﻤﺴﺎر اﻟﻜﺎﻣﻞ ﻟﮭﺬا اﻟﻤﻠﻒ وذﻟﻚ‬ ‫ﺑﻨﻔﺲ اﻟﻄﺮﯾﻘﺔ اﻟﺘﻲ ﻧﺎﻗﺸﻨﺎھﺎ ﻓﻲ اﻟﺪرس اﻟﺴﺎﺑﻖ ﻋﻨﺪﻣﺎ ﻗﻤﻨﺎ ﯾﺈدراج اﻟﺼﻮر‪.‬‬ ‫اﻟﺤﺎﻟﺔ اﻟﺜﺎﻟﺜﺔ ھﻲ أن ﻧﻘﻮم ﺑﺎﻹﺷﺎرة إﻟﻰ ﻣﻜﺎن آﺧﺮ داﺧﻞ ﻧﻔﺲ اﻟﺼﻔﺤﺔ‪ ،‬إﻟﻰ أوﻟﮭﺎ ﻣﺜﻼً أو‬ ‫إﻟﻰ آﺧﺮھﺎ أو أي ﻣﻜﺎن آﺧﺮ ﻧﺮﯾﺪه‪...‬‬ ‫ﻃﺒﻌﺎً ﻣﮭﻤﺎ ﺑﻠﻐﺖ درﺟﺔ اﻟﺬﻛﺎء واﻷﻟﻤﻌﯿﺔ اﻟﺘﻲ ﯾﺘﺼﻒ ﺑﮭﺎ اﻟﻜﻤﺒﯿﻮﺗﺮ وﻣﺘﺼﻔﺢ اﻹﻧﺘﺮﻧﺖ‪،‬‬ ‫ﻓﮭﻤﺎ ﻻ ﯾﺴﺘﻄﯿﻌﺎن ﻣﻌﺮﻓﺔ ﻣﺎ ﯾﺪور ﺑﻔﻜﺮك وﺑﺎﻟﺘﺎﻟﻲ ﻻ ﯾﺴﺘﻄﯿﻌﺎن ﻣﻌﺮﻓﺔ اﻟﻤﻜﺎن اﻟﻤﻮﺟﻮد‬ ‫ﻓﻲ ﻧﻔﺲ اﻟﺼﻔﺤﺔ واﻟﺬي ﺗﺮﯾﺪ ﻧﻘﻞ زاﺋﺮك إﻟﯿﮫ ﻣﻦ ﺧﻼل اﻟﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ‪ .‬ﻟﺬﻟﻚ ﯾﺠﺐ أن‬ ‫ﺗﻘﻮم أﻧﺖ ﺑﺘﺤﺪﯾﺪه‪.‬‬ ‫واﻟﻤﺒﺪأ ھﻨﺎ ھﻮ أن ﺗﻘﻮم ﺑﺘﻌﺮﯾﻒ أو ﺗﺴﻤﯿﺔ ھﺬا اﻟﻤﻜﺎن ﺑﺈﺳﻢ ﻣﻌﯿﻦ ﺳﻮف ﺗﻘﻮم ﻻﺣﻘﺎ‬ ‫ﺑﺎﺳﺘﺨﺪاﻣﮫ ﻓﻲ اﻟﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ‪ .‬وﻓﻲ ھﺬه اﻟﺤﺎﻟﺔ ﯾﺘﺤﺘﻢ ﻋﻠﯿﻚ اﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ اﻟﺜﺎﻧﯿﺔ‬ ‫ﻟﻠﻮﺳﻢ >‪
‫‪www.dinaro.com/vb3‬‬

‫ﻟﻨﻘﻢ ﻣﻌﺎً ﺑﺈدراج وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ داﺧﻞ ھﺬه اﻟﺼﻔﺤﺔ ﺗﻘﻮم ﺑﻨﻘﻞ اﻟﺰاﺋﺮ ﻣﻦ ﻣﻜﺎن وﺟﻮد ھﺬه‬ ‫اﻟﻮﺻﻠﺔ إﻟﻰ اﻟﻔﻘﺮة اﻟﺜﺎﻟﺜﺔ ﻣﻦ ھﺬه اﻟﺼﻔﺤﺔ واﻟﺘﻲ ﺑﺪأﻧﺎ ﻓﯿﮭﺎ اﻟﺤﺪﯾﺚ ﻋﻦ اﻟﻮﺻﻼت‬ ‫اﻟﺘﺸﻌﺒﯿﺔ ‪Links‬‬ ‫أول ﻣﺎ ﯾﺠﺐ ﻓﻌﻠﮫ ھﻮ اﻟﺬھﺎب إﻟﻰ ھﺬه اﻟﻔﻘﺮة واﺧﺘﯿﺎر أول ﻛﻠﻤﺔ ﻓﯿﮭﺎ ﺛﻢ وﺿﻌﮭﺎ داﺧﻞ‬ ‫اﻟﻮﺳﻮم >‪ ... ‪LINKS
‫>‪LINKS‪3rd Paragraph
‫‪www.dinaro.com/vb3‬‬

‫‪3rd Paragraph‬‬

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

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

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

‫ھﻞ أﻧﺖ ﻣﺴﺘﻌﺪ ﯾﺎ ﻋﺰﯾﺰي اﻟﻤﺘﺪرب؟ إذن ھﯿّﺎ ﺑﻨﺎ…‬ ‫ﺑﺪاﯾﺔ‪ ،‬إﻟﯿﻚ ھﺬا اﻟﻮﺻﻒ اﻟﺒﺴﯿﻂ ﻟﻠﻮﺳﻮم اﻷﺳﺎﺳﯿﺔ اﻟﺨﺎﺻﺔ ﺑﺎﻟﺠﺪاول‬

‫واﻵن ﻟﻨﺘﻜﻠﻢ ﺑﺼﻮرة أﻛﺜﺮ دﻗﺔ وﺗﻔﺼﯿﻼً‪:‬‬ ‫ھﺬه ھﻲ اﻟﻮﺳﻮم اﻟﺘﻲ ﻧﺒﺪأ ﺑﮭﺎ ﻹدراج ﺟﺪول ﻣﻜﻮن ﻣﻦ ﺧﻠﯿﺔ واﺣﺪة أو ﻣﻦ ﻣﻠﯿﻮن‬ ‫ﺧﻠﯿﺔ… اﻷﻣﺮ ﺳﯿﺎن‬ ‫>‪ ... ‪ ...
‫‪82‬‬

‫‪www.dinaro.com/vb3‬‬

‫>‪‪‪‪‪‪‪‪‪ ... ‪ ... ‪‪‪ Data ‪ Data
‫‪www.dinaro.com/vb3‬‬

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

‫ﻣﺴﺘﻮى اﻟﺠﺪول ﻛﻜﻞ‬ ‫ﻣﺴﺘﻮى اﻟﺼﻔﻮف ﻛﻜﻞ أو ﻛﻞ واﺣﺪ ﻋﻠﻰ ﺣﺪه‬ ‫ﻣﺴﺘﻮى اﻟﺨﻼﯾﺎ ﻛﻜﻞ أو ﻛﻞ واﺣﺪة ﻋﻠﻰ ﺣﺪه‬ ‫‪84‬‬

‫‪www.dinaro.com/vb3‬‬

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

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

‫‪www.dinaro.com/vb3‬‬

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

‫>"‪

87

www.dinaro.com/vb3

88

‫‪www.dinaro.com/vb3‬‬

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

Data Data

Data Data

Data Data

90

‫‪www.dinaro.com/vb3‬‬

‫"‪

Data Data

Data Data

Data Data

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

Data Data Data Data

97

‫‪www.dinaro.com/vb3‬‬

‫ﻟﻘﺪ ﺑﻘﻲ ﻣﻜﺎن اﻟﺨﻼﯾﺎ اﻟﻤﺤﺬوﻓﺔ ﻣﺤﺠﻮزاً ﻛﻤﺎ ﻟﻮ أﻧﮭﺎ ﻟﻢ ﺗﺤﺬف‪ .‬أﻣﺎ اﻟﺨﻼﯾﺎ اﻟﺒﺎﻗﯿﺔ ﻓﻈﻠﺖ‬ ‫ﻣﺤﺘﻔﻈﺔ ﺑﻨﻔﺲ ﺧﺼﺎﺋﺼﮭﺎ‪ ،‬أي أﻧﻨﺎ ﻟﻢ ﻧﺴﺘﻔﺪ ﻣﻦ ﻋﻤﻠﯿﺔ اﻟﺤﺬف‪.‬‬ ‫واﻟﺤﻘﯿﻘﺔ أن اﻟﻄﺮﯾﻘﺔ اﻟﻤﺜﻠﻰ ﻟﺬﻟﻚ ھﻲ أن ﺗﻘﻮم ﺑﺪﻣﺞ اﻟﺨﻼﯾﺎ ﻣﻌﺎً وذﻟﻚ ﺑﺎﺳﺘﺨﺪام‬ ‫اﻟﺨﺼﺎﺋﺺ ‪.ROWSPAN ،COLSPAN‬‬ ‫إذن ﻟﻨﻘﻢ ﺑﺈﻋﺎدة ﻛﺘﺎﺑﺔ ﺷﯿﻔﺮة اﻟﺠﺪول ﻣﻊ اﺳﺘﺨﺪام ھﺬه اﻟﺨﺼﺎﺋﺺ‪:‬‬

‫>"‪ Data ‪‪‪
Data ‪ Data ‪‪‪ Data ‪‪
‫‪www.dinaro.com/vb3‬‬

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

‫ﻻﺣﻆ أن اﻟﻌﺪد ‪ 2‬ھﻮ ﻋﺪد اﻟﺨﻼﯾﺎ اﻟﺘﻲ ﻗﻤﻨﺎ ﺑﺪﻣﺠﮭﺎ‪ .‬وﻻﺣﻆ أﯾﻀﺎً اﻧﻨﻲ ﻟﻢ أﻗﻢ ﺑﺈﻋﺎدة‬ ‫وﺳﻮم اﻟﺨﻼﯾﺎ اﻟﻤﺤﺬوﻓﺔ ﻷﻧﻨﺎ أﺻﻼً ﻻ ﻧﺤﺘﺎج ﻟﮭﺎ ﺑﻌﺪ أن ﻗﻤﻨﺎ ﺑﺎﻟﺪﻣﺞ‪.‬‬ ‫وﻛﻘﺎﻋﺪة أﺳﺎﺳﯿﺔ‪ :‬ﻛﻞ ﺧﻠﯿﺔ ﯾﺘﻢ دﻣﺠﮭﺎ ﯾﺠﺐ ﺑﺎﻟﻤﻘﺎﺑﻞ ﺣﺬف وﺳﻮم اﻟﺘﻌﺮﯾﻒ اﻟﺨﺎﺻﺔ ﺑﮭﺎ‪.‬‬ ‫ﻣﺎ ﻋﺪا ﺗﻌﺮﯾﻒ اﻟﺨﻠﯿﺔ اﻷﺳﺎﺳﯿﺔ ﺑﺎﻟﻄﺒﻊ‪.‬‬ ‫ﻣﺜﺎل آﺧﺮ‪ :‬ﻟﻨﻘﻢ ﺑﺪﻣﺞ اﻟﺨﻼﯾﺎ اﻟﻤﻮﺟﻮدة ﻓﻲ اﻟﻌﻤﻮد اﻷول‬ ‫>"‪ Data ‪ ... ‪ ‪ ...
www.dinaro.com/vb3

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

‫‪www.dinaro.com/vb3‬‬

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

‫ھﻨﺎك ﻧﻮع ﺧﺎص ﻣﻦ اﻟﺨﻼﯾﺎ اﻟﺘﻲ ﯾﺘﻢ ﺗﻌﺮﯾﻔﮭﺎ ﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻮم >‪ ... ‪
Table Caption
Data Data

Data Data

Data Data

Table Caption Data Data Data

Data

Data

Data

101

‫‪www.dinaro.com/vb3‬‬

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

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

‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﺘﺎﺳﻊ‬ ‫‪‬‬ ‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﺘﺎﺳﻊ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬ ‫ﻓﻲ ھﺬا اﻟﺪرس ﺳﻮف ﻧﻘﻮم ﺑﺎﻟﺘﻌﺮف ﻋﻠﻰ اﻹﻃﺎرات ‪ Frames‬وﻃﺮﯾﻘﺔ ﻋﺮض ﺻﻔﺤﺎت‬ ‫اﻟﻮﯾﺐ ﺑﺎﺳﺘﺨﺪاﻣﮭﺎ…‬ ‫ﻓﮭﻞ ﺗﻌﺮف ﻣﺎ ھﻲ اﻹﻃﺎرات؟ ﺣﺴﻨﺎ‪ ،‬ﺳﺄوﺿﺤﮭﺎ ﻟﻚ… ھﻞ ﺳﺒﻖ ﻟﻚ وأن زرت إﺣﺪى‬ ‫اﻟﺼﻔﺤﺎت ﻟﺘﺸﺎھﺪ أﻧﮭﺎ ﻣﻘﺴﻤﺔ إﻟﻰ ﻋﺪة أﻗﺴﺎم ﺑﺤﯿﺚ ﯾﻈﮭﺮ ﻓﻲ ﻛﻞ ﻣﻨﮭﺎ ﺻﻔﺤﺔ ﻣﺴﺘﻘﻠﺔ‪،‬‬ ‫وﺗﺒﺪو ﺑﺼﻮرة ﻣﻨﻔﺼﻠﺔ ﻋﻦ اﻷﻗﺴﺎم اﻷﺧﺮى‪ .‬ورﺑﻤﺎ ﺗﻜﻮن ﻗﺪ ﻗﻤﺖ ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ إﺣﺪى‬ ‫اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ اﻟﻤﻮﺟﻮدة ﻓﻲ أﺣﺪ اﻷﻗﺴﺎم ﻟﺘﻈﮭﺮ اﻟﺼﻔﺤﺔ اﻟﻤﺘﻌﻠﻘﺔ ﺑﮭﺎ ﻓﻲ اﻟﻘﺴﻢ‬ ‫اﻵﺧﺮ‪.‬‬ ‫إذا ﻛﻨﺖ ﻗﺪ ﺷﺎھﺪت ﻣﺜﻞ ھﺬه اﻟﺼﻔﺤﺎت ﻓﮭﺬا ﯾﻌﻨﻲ أن اﻹﻃﺎرات ﻣﺄﻟﻮﻓﺔ ﻟﺪﯾﻚ وإﻻ ﻓﺸﺎھﺪ‬ ‫ﻣﺜﺎﻻً ﻋﻠﻰ ﺻﻔﺤﺔ ذات إﻃﺎرات‬

‫‪103‬‬

‫‪www.dinaro.com/vb3‬‬

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

‫‪104‬‬

‫‪www.dinaro.com/vb3‬‬

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

‫>‪‪‪<TITLE>Frame1‪‪‪‪‪ ... ‪ ...
‫‪105‬‬

‫‪www.dinaro.com/vb3‬‬

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

‫‪"‪COLS="50%,50%‬‬ ‫>‪
‫‪"‪COLS="20%,50%,30%‬‬ ‫>‪
‫‪106‬‬

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

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

‫‪www.dinaro.com/vb3‬‬

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

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

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

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

‫‪www.dinaro.com/vb3‬‬

‫>"*‪

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

:‫ﻣﺜﺎل آﺧﺮ‬ :‫ﻣﺜﺎل ﺛﺎﻟﺚ‬ :‫ﻣﺜﺎل راﺑﻊ‬ 109

www.dinaro.com/vb3

‫< ﺗﻤﺎﻣﺎً ﻛﻤﺎ ﻧﺪرﺟﮭﺎ ﺑﺎﺳﺘﺨﺪام‬FRAME SRC>

110

‫‪www.dinaro.com/vb3‬‬

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

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

‫• اﻟﻤﻠﻒ اﻟﺮﺋﯿﺴﻲ ھﻮ ﻣﻠﻒ ‪ HTML‬إﻋﺘﯿﺎدي ﻏﯿﺮ أﻧﻨﺎ ﻧﻜﺘﺐ اﻟﻮﺳﻮم‬ ‫>‪ ... ‪....
‫• ﻧﺴﺘﺨﺪم اﻟﺨﺼﺎﺋﺺ ‪ COLS, ROWS‬ﻟﺘﺤﺪﯾﺪ ﻋﺪد اﻹﻃﺎرات )ﺻﻔﻮﻓﺎً ﻛﺎﻧﺖ أو أﻋﻤﺪة(‬ ‫وأﺣﺠﺎﻣﮭﺎ‪.‬‬

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

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

‫‪111‬‬

‫‪www.dinaro.com/vb3‬‬

‫ھﻞ ﺗﺄﻛﺪت ﻣﻦ ﻓﮭﻤﻚ ﻟﮭﺬه اﻟﻨﻘﺎط؟ ﻟﻨﺘﺎﺑﻊ إذن ‪...‬‬ ‫ﺣﺘﻰ اﻵن ﻗﻤﻨﺎ ﺑﺘﻘﺴﯿﻢ اﻟﺼﻔﺤﺔ إﻣﺎ ﻹﻃﺎرات أﻓﻘﯿﺔ أو ﻹﻃﺎرات ﻋﻤﻮدﯾﺔ‪ .‬ﻟﻜﻦ ﻧﺤﺘﺎج‬ ‫ﻟﻤﻌﺮﻓﺔ ﻛﯿﻔﯿﺔ إدراج ﻛﻼھﻤﺎ ﻓﻲ اﻟﺼﻔﺤﺔ‪ .‬ﻛﻤﺎ ﻓﻲ اﻷﻣﺜﻠﺔ اﻟﺘﺎﻟﯿﺔ‪:‬‬ ‫ﺻﻔﺤﺔ ﻣﻜﻮﻧﺔ ﻣﻦ ﺻﻔﯿﻦ‪ ،‬اﻟﺜﺎﻧﻲ ﻣﻨﮭﻤﺎ ﻣﻘﺴﻢ ﺑﺪوره إﻟﻰ ﻋﻤﻮدﯾﻦ‬

‫‪112‬‬

‫‪www.dinaro.com/vb3‬‬

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

‫‪113‬‬

‫‪www.dinaro.com/vb3‬‬

‫ﻟﻨﺒﺪأ ﺑﺎﻟﻤﺜﺎل اﻷول‪:‬‬ ‫ﺑﻤﺎ أن اﻟﺼﻔﺤﺔ ﺗﺤﺘﻮي ﻋﻠﻰ ﺻﻔﯿﻦ ﻧﻘﻮم ﺑﺘﻌﺮﯾﻔﮭﻤﺎ أوﻻً ﺣﺴﺐ اﻹرﺗﻔﺎﻋﺎت اﻟﻤﺮﻏﻮب‬ ‫ﺑﮭﺎ‪:‬‬ ‫>"*‪ :‫ﻟﻨﻘﻢ اﻵن ﺑﺈدراج ﻣﺜﺎل آﺧﺮ وﺗﺤﻠﯿﻠﮫ‬

115

‫‪www.dinaro.com/vb3‬‬

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

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

‫‪www.dinaro.com/vb3‬‬

‫ﺍﻟﺪﺭﺱ ﺍﻟﻌﺎﺷﺮ‬

‫‪‬‬ ‫أھﻼً وﺳﮭﻼً ﺑﻚ إﻟﻰ اﻟﺪرس اﻟﻌﺎﺷﺮ ﻣﻦ ﻛﺘﺎب ﺗﻌﻠﻢ ‪.HTML‬‬ ‫ﻛﻤﺎ ﺗﺮى ﻣﻦ اﻟﻌﻨﻮان ﻓﻘﺪ اﺧﺘﺮت أن ﯾﻜﻮن ھﺬا اﻟﺪرس ﺧﺎرﺟﺎً ﻗﻠﯿﻼً ﻋﻦ ﻧﻄﺎق اﻟﺪروس‬ ‫اﻟﺴﺎﺑﻘﺔ ﻣﻦ ﺣﯿﺚ اﻟﻤﺤﺘﻮى‪ .‬ﻓﻠﻦ ﺗﺠﺪ ھﻨﺎ وﺳﻮﻣﺎً ﻣﺤﺪدة ﺗﺴﺘﻄﯿﻊ ﺣﺼﺮھﺎ ﺗﺤﺖ ﻣﻮﺿﻮع‬ ‫ﻣﻌﯿﻦ‪ ،‬ﺑﻞ وﺳﻮﻣﺎً ﻋﺎﻣﺔ وﺧﺼﺎﺋﺺ إﺿﺎﻓﯿﺔ ﻟﻮﺳﻮم ذﻛﺮت ﺳﺎﺑﻘﺎً‪ .‬وإن ﻛﺎن اﻟﮭﺪف ﻣﻦ‬ ‫ﻣﻌﻈﻤﮭﺎ ﺗﺮﺗﯿﺐ اﻟﺼﻔﺤﺔ واﻟﺘﺤﻜﻢ ﺑﺸﻜﻞ ﻣﺤﺘﻮﯾﺎﺗﮭﺎ‪ .‬وﻻ أﺧﻔﻲ ﻋﻠﯿﻚ أﻧﻲ ﻗﺼﺪت ﺗﺄﺟﯿﻞ‬ ‫ﺑﻌﻀﮭﺎ ﺣﺘﻰ ھﺬا اﻟﺪرس ﻣﻊ أﻧﮫ ﻛﺎن ﻣﻦ اﻟﻤﻤﻜﻦ إدراﺟﮭﺎ ﺿﻤﻦ دروس ﺳﺎﺑﻘﺔ‪ ،‬وﺧﺎﺻﺔ‬ ‫اﻟﺪرس اﻟﺮاﺑﻊ )اﻟﻔﻘﺮات(‪ .‬ﻟﻜﻦ ﺣﺠّﺘﻲ ﻓﻲ ﻋﺪم إدراﺟﮭﺎ ﻓﻲ ﺣﯿﻨﮫ أن ھﺬه اﻟﻮﺳﻮم ﻟﻦ ﯾﺘﻢ‬ ‫اﺳﺘﺨﺪاﻣﮭﺎ وﻟﻦ ﺗُﻔﮭﻢ ﻃﺮﯾﻘﺔ ﻋﻤﻠﮭﺎ إﻻّ ﻋﻨﺪ اﺳﺘﺨﺪام وﺳﻮم أﺧﺮى ﺗﻢّ ﺷﺮﺣﮭﺎ ﻓﻲ وﻗﺖ‬ ‫ﻻﺣﻖ ﺑﻌﺪ اﻟﻔﻘﺮات ﻣﺜﻞ اﻟﺼﻮر واﻟﺠﺪاول‪ .‬أﻣﺎ اﻟﺒﻌﺾ اﻵﺧﺮ ﻓﻔﻀﻠﺖ ﻋﺪم ﺣﺼﺮھﺎ ﺿﻤﻦ‬ ‫أي درس ﻋﻠﻰ اﻋﺘﺒﺎر أﻧﮭﺎ وﺳﻮم ﻋﺎﻣﺔ ﻻ ﺗﺨﺘﺺ ﺑﺄي ﻣﻮﺿﻮع‪ .‬ﻋﻠﻰ أﯾﺔ ﺣﺎل ﯾﻜﻔﯿﻨﺎ ھﺬه‬ ‫اﻟﻤﻘﺪﻣﺔ وأﺗﺮك ﻟﻚ ﺣﺮﯾﺔ ﺗﺼﻨﯿﻔﮭﺎ ﻛﻤﺎ ﯾﺤﻠﻮ ﻟﻚ‪ .‬واﻵن ﻟﻨﺪﺧﻞ ﻣﺒﺎﺷﺮة ﻓﻲ اﻟﻤﻮﺿﻮع‪.‬‬ ‫أﺗﺮى ھﺬا اﻟﺨﻂ اﻟﺬي ﻓﺼﻠﺖ ﺑﮫ ھﺬه اﻟﻔﻘﺮة ﻋﻦ اﻟﻔﻘﺮة اﻟﺴﺎﺑﻘﺔ؟ إﻧﮫ ﯾﺴﻤﻰ ﺑﻠﻐﺔ‬ ‫‪ HTML‬ﺑﺎﻟﻤﺴﻄﺮة اﻷﻓﻘﯿﺔ ‪ Horizontal Rule‬وﺗﺴﺘﻄﯿﻊ إدراﺟﮫ ﻟﺘﻘﺴﯿﻢ ﺻﻔﺤﺘﻚ‬ ‫ﺑﻜﺘﺎﺑﺔ اﻟﻮﺳﻢ >‪ ‪
‫‪www.dinaro.com/vb3‬‬

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

‫>"‪

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

120

‫‪www.dinaro.com/vb3‬‬

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

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

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

‫>‪This is line one‪‪and, this is line three
‫‪www.dinaro.com/vb3‬‬

‫‪This is line one‬‬ ‫‪and, this is line three‬‬ ‫ﻣﻦ اﻟﻤﺆﻛﺪ أﻧﻚ ﺗﻌﺮف اﻟﻮﺳﻢ >‪
‫‪www.dinaro.com/vb3‬‬

‫ﻣﻨﻄﻖ ﻣﻌﻜﻮس‪ ...‬أﻟﯿﺲ ﻛﺬﻟﻚ؟ ﻋﻠﻰ أﯾﺔ ﺣﺎل إذا ﻛﻨﺖ ﺗﻜﺮة ھﺬه اﻟﺘﻌﻘﯿﺪات وﺗﺤﺐ اﻟﻄﺮق‬ ‫اﻟﻤﺨﺘﺼﺮة ﻣﺜﻠﻲ‪ ،‬ﻓﺎﺳﺘﺨﺪم اﻟﻘﯿﻤﺔ ‪ all‬اﻟﺘﻲ ﺗﻤﻨﻊ اﻹﻟﺘﻔﺎف ﻣﻦ ﺟﻤﯿﻊ اﻟﺠﻮاﻧﺐ‪.‬‬ ‫ﻣﺎ رأﯾﻚ أن ﻧﻘﺘﺒﺲ ﺑﻌﺾ اﻷﻣﺜﻠﺔ ﻣﻦ اﻟﺪرس اﻟﺨﺎﻣﺲ ﻟﻨﺸﺎھﺪ ﻛﯿﻒ ﺗﻌﻤﻞ ﻣﻊ إﺿﺎﻓﺔ ھﺬه‬ ‫اﻟﺨﺎﺻﯿﺔ؟ وﺳﻮف أدرج ھﺬه اﻷﻣﺜﻠﺔ ﻛﻤﺎ ھﻲ ﻧﺼﺎً وﺣﺮﻓﺎً أﻣﺎ اﻹﺿﺎﻓﺎت ﻓﮭﻲ اﻟﻤﻤﯿﺰة‬ ‫ﺑﺎﻟﻠﻮن اﻷﺣﻤﺮ‬

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

‫‪123‬‬

‫‪www.dinaro.com/vb3‬‬

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

‫وأﺗﺮك ﻟﻚ اﻟﻤﺠﺎل ﻟﻜﻲ ﺗﺠﺮب اﻟﻘﯿﻤﺔ ‪ all‬ﺑﻨﻔﺴﻚ‬ ‫ﻣﻦ اﻟﻘﻮاﻋﺪ اﻹﻓﺘﺮاﺿﯿﺔ ﻟﻠﻤﺘﺼﻔﺤﺎت أن اﻷﺳﻄﺮ ﻓﻲ ﻛﻞ ﻓﻘﺮة ﺗﻠﺘﻒ وﺗﻨﻘﺴﻢ ﺑﺼﻮرة‬ ‫ﺗﻠﻘﺎﺋﯿﺔ ﺣﺴﺐ إﺳﺘﺒﺎﻧﺔ اﻟﺸﺎﺷﺔ وﻋﺮض ﻧﺎﻓﺬة اﻟﻤﺘﺼﻔﺢ‪) .‬ھﺬه ﻧﻌﺮﻓﮭﺎ ﻣﻦ اﻟﺪرس اﻷول(‪.‬‬ ‫ﻟﻜﻦ ﻟﻨﻘﻞ أﻧﻨﺎ ﻧﺮﯾﺪ ﻣﻦ أﺣﺪ اﻷﺳﻄﺮ أن ﻻ ﯾﻨﻘﺴﻢ ﻣﮭﻤﺎ ﻛﺎن ﻣﻘﺪار اﻹﺳﺘﺒﺎﻧﺔ وﻋﺮض‬ ‫اﻟﻨﺎﻓﺬة‪.‬‬ ‫ﺣﺴﻨﺎً‪ ،‬ﻛﻞ ﻣﺎ ﻋﻠﯿﻨﺎ ﻓﻌﻠﮫ ھﻮ وﺿﻊ ھﺬا اﻟﺴﻄﺮ ﺿﻤﻦ اﻟﻮﺳﻮم‬

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

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

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

‫‪
...‬‬ ‫>‪ ...‬‬ ‫>‪
‫‪128‬‬

‫‪www.dinaro.com/vb3‬‬

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

‫"‪ ... ... ‪
‫‪:Please enter your address‬‬

‫‪129‬‬

‫‪www.dinaro.com/vb3‬‬

‫ﺣﺴﻨﺎً‪ ،‬ﻟﻘﺪ اﺳﺘﺨﺪﻣﺖ اﻟﻮﺳﻢ >‪ ‪"‪"‪SIZE="40" MAXLENGTH="30‬‬ ‫‪Please enter your passwod :‬‬ ‫""=‪"‪SIZE="40" MAXLENGTH="30‬‬ ‫>‪
‫ﻻﺣﻆ أﻧﻨﻲ ﻟﻢ أرﻏﺐ ﻓﻲ ﻛﺘﺎﺑﺔ ﻗﯿﻢ إﻓﺘﺮاﺿﯿﺔ ‪ VALUES‬ﻟﻠﺤﻘﻮل‪ ،‬وﻟﺬﻟﻚ ﺗﺮﻛﺘﮭﺎ ﻓﺎرﻏﺔ‬ ‫وأﺳﺘﻄﯿﻊ أﯾﻀﺎً أن أﻟﻐﯿﮭﺎ ﻧﮭﺎﺋﯿﺎً ﻣﻦ اﻟﺸﯿﻔﺮة‪ .‬وأﻧﺎ ﻓﻲ ھﺬا اﻟﻤﺜﺎل أردت أن أوﺿﺢ ﻟﻚ ﻋﺪم‬ ‫أھﻤﯿﺔ ﻛﺘﺎﺑﺔ ﻗﯿﻤﺔ إﻓﺘﺮاﺿﯿﺔ ﻟﻠﺤﻘﻮل ﻓﻲ ﺑﻌﺾ اﻟﺤﺎﻻت‪.‬‬ ‫ﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﻨﻮع اﻟﺜﺎﻟﺚ ﻣﻦ أﻧﻮاع اﻟﺤﻘﻮل وھﻮ ‪ hidden‬أي اﻟﺤﻘﻞ اﻟﻤﺨﻔﻲ‪ .‬وﻛﻤﺎ‬ ‫ﻧﺴﺘﻨﺘﺞ ﻣﻦ اﺳﻤﮫ ﻓﮭﻮ ﻟﻦ ﯾﻈﮭﺮ ﺿﻤﻦ اﻟﻨﻤﻮذج‪ .‬وھﺬا ﻣﺜﺎل‪:‬‬

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

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

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

‫>"‪

Please enter your password :

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

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

‫>‪‪‪
‫>‪"‪ ‪ ‪
‫‪www.dinaro.com/vb3‬‬

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

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

‫‪www.dinaro.com/vb3‬‬

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

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

Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0

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

‫>‪"‪ Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
Sindbad 3.0 Sindbad 4.0 MS Explorer 3.0 MS Explorer 4.0

‫ وھﺬا اﻟﻨﻮع ﺳﻮف ﯾﻘﻮدﻧﺎ‬،‫اﻟﻨﻮع اﻟﺜﺎﻟﺚ ﻣﻦ أﺷﻜﺎل اﻹﺧﺘﯿﺎر ﻣﻦ ﻣﺘﻌﺪد ھﻮ ﻗﻮاﺋﻢ اﻻﺧﺘﯿﺎر‬ ‫< وھﻲ‬INPUT> ‫إﻟﻰ وﺳﻮم ﺟﺪﯾﺪة ﻣﻦ وﺳﻮم اﻟﺘﻌﺮﯾﻒ واﻟﺘﻲ ﺳﺘﺴﺘﺨﺪم ﺑﺪﻻً ﻣﻦ‬

<SELECT>