TeachYourSelf_HTML_AR

‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬ ‫ﺧﺮاﺋﻂ اﻟﺼﻮر‬ ‫ﺳﯿﺨﺼﺺ ﻫﺬا اﻟﺪرس ﻟﻤﻨﺎﻗﺸﺔ واﺣﺪًا ﻣﻦ اﻟﻤﻮاﺿﯿﻊ اﻟﻤﺘﻘﺪﻣﺔ ﻧﻮﻋًﺎ ﻣﺎ واﻟﻤﻤﺘﻌﺔ ﻓﻲ ﻟﻐﺔ ‪ HTML‬أﻻ وﻫﻮ‬ ‫ﻣﻮﺿﻮع ﺧﺮاﺋﻂ اﻟﺼﻮر‪.‬‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] اﻟﺸﺮح | اﻟﺒﺪاﯾﻪ | ﺷﻔﺮة اﻟﺨﺮﯾﻄﺔ | اﻟﺨﺼﺎﺋﺺ | اﻟﻨﻬﺎﯾﺔ | ﻫﺎم ﺟﺪا | ﻣﺴﻚ اﻟﺨﺘﺎم [‬ ‫أﻧﺖ ﺗﻌﺮف ﺑﻼ ﺷﻚ ﻣﻦ ﺧﻼل دراﺳﺘﻚ ﻟﻠﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ‪ ،‬أﻧﻨﺎ ﻧﺴﺘﻄﯿﻊ إدراج أي ﺻﻮرة ﻧﺮﯾﺪﻫﺎ ﻟﺘﻤﺜﻞ وﺻﻠﺔ‬ ‫ﺗﺸﻌﺒﯿﺔ ﻣﺎ‪ .‬ﻟﻜﻦ ﻣﺎ رأﯾﻚ ﺑﺼﻮرة واﺣﺪة ﺗﺤﺘﻮي ﻋﻠﻰ اﻟﻌﺪﯾﺪ ﻣﻦ ﻫﺬه اﻟﻮﺻﻼت اﻟﺘﻲ ﺗﻘﻮم ﺑﺈﯾﺼﺎﻟﻨﺎ إﻟﻰ ﻣﻮاﻗﻊ‬ ‫ﻣﺨﺘﻠﻔﺔ!!؟ ﻫﺬا ﻫﻮ ﺑﺒﺴﺎﻃﺔ ﻣﺒﺪأ اﻟﺨﺮاﺋﻂ اﻟﺼﻮرﯾﺔ‪ .‬ﻣﻦ اﻟﻤﺤﺘﻤﻞ أن ﺗﻜﻮن ﻻ ﺗﻌﺮﻓﻬﺎ وأن ﯾﻜﻮن ﻫﺬا اﻟﻤﻮﺿﻮع‬ ‫ﺟﺪﯾﺪاً ﻋﻠﯿﻚ‪ ،‬ﻟﻜﻦ ﻣﻦ اﻟﻤﺆﻛﺪ أﻧﻚ اﺳﺘﺨﺪﻣﺘﻬﺎ ﻣﻦ ﻗﺒﻞ‪ .‬ﻓﻲ اﻟﺒﺪاﯾﻪ ﺑﻤﺎ أﻧﻨﺎ ﻧﺘﺤﺪث ﻋﻦ ﺧﺮاﺋﻂ اﻟﺼﻮر ﺳﻮف ﻧﻌﻮد‬ ‫أﯾﻀﺎً ﻟﻠﺘﻌﺎﻣﻞ ﻣﻊ وﺳﻮم اﻟﺼﻮر ﻛﺬﻟﻚ ﺳﻨﺘﻌﺎﻣﻞ ﻣﻊ اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ )ﻛﻮن اﻟﺨﺮاﺋﻂ اﻟﺼﻮرﯾﺔ ﻫﻲ ﺗﻄﺒﯿﻖ آﺧﺮ‬‫ﻟﻠﻮﺻﻼت(‪ ..‬وﺳﺘﺤﺘﺎج أﯾﻀًﺎ إﻟﻰ اﻟﻘﻠﯿﻞ ﻣﻦ اﻟﻬﻨﺪﺳﺔ )ﻧﻌﻢ ‪ ..‬اﻟﻬﻨﺪﺳﺔ‪ .‬ذﻟﻚ اﻟﻌﻠﻢ اﻟﺬي ﯾﺠﺒﺮك اﻟﻤﻌﻠﻢ ﻓﯿﻪ ﻋﻠﻰ ﺣﻤﻞ‬ ‫اﻟﺒﯿﻜﺎر ﻟﺘﺮﺳﻢ ﺑﻪ داﺋﺮة‪ ..‬ﻓﺘﻜﻮن اﻟﻨﺘﯿﺠﺔ ﺷﻜ ًﻼ ﻋﺠﺎﺋﺒﯿﺎً ﻗﺪ ﯾﻜﻮن أي ﺷﻲء ‪ ..‬إﻻ أن ﯾﻜﻮن داﺋﺮة(‪ .‬وأﺧﯿﺮاً ﻧﺤﺘﺎج‬ ‫إﻟﻰ أﺣﺪ ﺑﺮاﻣﺞ ﺗﺤﺮﯾﺮ اﻟﺼﻮر ﻣﺜﻞ « ‪ Paint Shop Pro‬ﻟﻤﺴﺎﻋﺪﺗﻨﺎ ﻓﻲ ﻣﻌﺮﻓﺔ ﺑﻌﺾ اﻟﺘﻔﺎﺻﯿﻞ اﻟﺨﺎﺻﺔ‬ ‫ﺑﺎﻟﺼﻮر‪.‬‬ ‫ﻓﺎﻟﻨﺒﺪأ اﻵن‬ ‫ﻫﺬه ﻫﻲ ﺧﺮﯾﻄﺘﻨﺎ أو ﺑﺎﻷﺣﺮى ﻣﺎ ﺳﻮف ﺗﺼﺒﺢ ﺑﻌﺪ ﻗﻠﯿﻞ ﺧﺮﯾﻄﺘﻨﺎ ‪ ..‬ﻣﺠﺮد ﺻﻮرة ﻋﺎدﯾﺔ ﺳﻨﻘﻮم ﺑﺈدراﺟﻬﺎ ﻓﻲ‬ ‫اﻟﺼﻔﺤﺔ‪.‬‬

‫وﻫﺬه ﻫﻲ اﻟﺸﯿﻔﺮة اﻟﺨﺎﺻﺔ ﺑﺈدراﺟﻬﺎ‬‫>\"‪<IMG SRC=\"flowers.jpg\" WIDTH=\"320\" HEIGHT=\"310\" BORDER=\"0‬‬ ‫واﻵن ﺳﻮف ﻧﻀﯿﻒ ﻟﻬﺬه اﻟﺸﯿﻔﺮة ﺧﺎﺻﯿﺔ ﺟﺪﯾﺪة ﻣﻦ ﺧﺼﺎﺋﺺ اﻟﻮﺳﻢ >‪ <IMG‬ﻫﻲ‬‫\"‪USEMAP=\"#map_name‬‬ ‫واﻟﺘﻲ ﺗﺨﺒﺮ اﻟﻤﺘﺼﻔﺢ أن ﯾﺴﺘﺨﺪم ﻫﺬه اﻟﺼﻮرة ﻛﺨﺮﯾﻄﺔ وذﻟﻚ ﺣﺴﺐ اﻟﺘﺤﺪﯾﺪات اﻟﻤﻮﺟﻮدة ﻓﻲ ﺗﻌﺮﯾﻒ ﻫﺬه‬ ‫اﻟﺨﺮﯾﻄﺔ )وﺳﻨﺘﺤﺪث ﻋﻦ ﻫﺬه اﻟﺘﺤﺪﯾﺪات ﻻﺣﻘﺎً إن ﺷﺎء اﷲ(‪ .‬أﻣﺎ اﻟﻘﯿﻤﺔ ‪ map_name‬ﻓﻬﻲ ﺗﻤﺜﻞ اﻻﺳﻢ اﻟﺬي ﻧﺮﯾﺪ‬ ‫أن ﻧﻌﯿّﻨﻪ ﻟﻠﺨﺮﯾﻄﺔ )أي اﺳﻢ ﻧﺮﯾﺪه ‪).‬وﻛﻤﺎ ﺗﺮى ﻓﺈن ﻫﺬا اﻻﺳﻢ ﻣﺴﺒﻮق ﺑﺈﺷﺎرة ‪#.‬‬ ‫ﻣﺎ رأﯾﻚ أن ﻧﺴﻤﻲ اﻟﺨﺮﯾﻄﺔ ﺑﺎﺳﻢ ‪ ourmap.‬ﻋﻨﺪﻫﺎ ﺳﻮف ﺗﺼﺒﺢ اﻟﺸﯿﻔﺮة ﻛﻤﺎ ﯾﻠﻲ ‪:‬‬‫\"‪<IMG SRC=\"flowers.jpg\" WIDTH=\"320\" HEIGHT=\"310\" BORDER=\"0‬‬‫>\"‪USEMAP=\"#ourmap‬‬ ‫وﻛﺎﻧﺖ ﻫﺬه ﻫﻲ اﻟﺨﻄﻮة اﻷوﻟﻰ ﻓﻲ ﺗﻌﺮﯾﻒ اﻟﺨﺮﯾﻄﺔ‪ .‬واﻟﺨﻄﻮة اﻟﺜﺎﻧﯿﺔ ﻫﻲ ﺗﺤﺪﯾﺪ اﻟﺘﻔﺎﺻﯿﻞ‬ ‫ﻟﻨﻘﻢ ﺑﺈﺧﺒﺎر اﻟﻤﺘﺼﻔﺢ أﻧﻨﺎ ﻧﺮﯾﺪ ﺧﺮﯾﻄﺔ ﺗﺤﻤﻞ اﻹﺳﻢ ‪ourmap‬‬‫>\"‪<MAP NAME=\"ourmap‬‬‫‪...‬‬‫>‪</MAP‬‬ ‫وﻻﺣﻆ أﻧﻨﺎ ﻻ ﻧﺴﺘﺨﺪم إﺷﺎرة ‪ #‬ﻣﻊ اﻟﺘﺴﻤﯿﺔ ﻫﻨﺎ‬ ‫ﺑﻌﺪ ذﻟﻚ ﻧﺤﺘﺎج أن ﻧﺤﺪد اﻟﻤﻨﺎﻃﻖ اﻟﺴﺎﺧﻨﺔ ﻟﻠﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ‪ ،‬وﻟﻨﻔﺘﺮض أﻧﻨﺎ ﻧﺮﯾﺪﻫﺎ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬

‫وﻫﻨﺎ أرﯾﺪ أن أؤﻛﺪ ﻋﻠﯿﻚ وﺑﺼﻮرة ﻣﺸﺪدة أن رﺳﻢ ﻫﺬه اﻷﺷﻜﺎل اﻟﻬﻨﺪﺳﯿﺔ ﻫﻮ ﻓﻘﻂ ﺑﻐﺮض ﺗﻮﺿﯿﺢ ﻣﺒﺪأ اﻟﻤﻨﺎﻃﻖ‬ ‫اﻟﺴﺎﺧﻨﺔ ﻟﻚ‪ ،‬وﺗﺤﺪﯾﺪ ﺷﻜﻞ وﻣﻮﻗﻊ ﻛﻞ ﻣﻨﻄﻘﺔ‪ .‬وﻻ ﻧﺤﺘﺎج ﻟﻬﺎ أﺑﺪاً ﻋﻨﺪﻣﺎ ﻧﺮﯾﺪ إﻧﺸﺎء ﺧﺮﯾﻄﺔ ﺻﻮرﯾﺔ ﻛﺬﻟﻚ ﻓﻘﺪ‬ ‫ﻗﻤﺖ ﺑﺎﺧﺘﯿﺎرﻫﺎ ورﺳﻤﻬﺎ ﺑﺼﻮرة ﻋﺸﻮاﺋﯿﺔ‪ ،‬ﺑﻤﻌﻨﻰ أﻧﻚ ﺗﺴﺘﻄﯿﻊ إﺧﺘﯿﺎر أي ﻣﻨﺎﻃﻖ أﺧﺮى ﻣﻐﺎﯾﺮة ﻛﻤﺎ ﺗﺴﺘﻄﯿﻊ‬ ‫إﺧﺘﯿﺎر أي أﺷﻜﺎل ﺗﺮﯾﺪﻫﺎ‪ .‬وذﻟﻚ ﺑﺎﻟﻄﺒﻊ وﻓﻘﺎً ﻟﺮﻏﺒﺘﻚ ﻛﻤﺼﻤﻢ ﺻﻔﺤﺎت وﯾﺐ ‪.‬‬ ‫واﻟﺴﺆال اﻵن ﻫﻮ‪ ،‬ﻛﯿﻒ ﻧﺤﺪد ﻫﺬه اﻟﻤﻨﺎﻃﻖ ﺑﺎﺳﺘﺨﺪام ‪ HTML‬وﻛﯿﻒ ﯾﻤﻜﻦ ﻟﻠﻤﺘﺼﻔﺢ أن ﯾﻤﯿﺰﻫﺎ دون ﻏﯿﺮﻫﺎ؟‬ ‫واﻟﺠﻮاب ﻫﻮ اﺳﺘﺨﺪام اﻟﻮﺳﻢ >‪ <AREA‬واﻟﺬي ﯾﺪرج ﺿﻤﻦ اﻟﻮﺳﻢ اﻟﺴﺎﺑﻖ وﺑﻨﻔﺲ ﻋﺪد اﻟﻤﻨﺎﻃﻖ اﻟﺴﺎﺧﻨﺔ اﻟﺘﻲ‬ ‫ﻧﺮﯾﺪﻫﺎ ﻓﻬﻨﺎ ﻓﻲ ﻫﺬا اﻟﻤﺜﺎل ﻧﺮﯾﺪ أرﺑﻊ ﻣﻨﺎﻃﻖ‪.‬‬‫>\"‪<MAP NAME=\"ourmap‬‬‫>‪<AREA‬‬‫>‪<AREA‬‬‫>‪<AREA‬‬‫>‪<AREA‬‬‫>‪</MAP‬‬ ‫وﻣﻊ ذﻟﻚ ﻓﻬﺬا ﻟﯿﺲ ﻛﻞ ﺷﻲء ﻷﻧﻨﺎ ﻧﺤﺘﺎج أوﻻً ﻟﺘﺤﺪﯾﺪ ﺷﻜﻞ ﻛﻞ ﻣﻨﻄﻘﺔ وﻧﺴﺘﺨﺪم ﻟﻬﺬا اﻟﻐﺮض اﻟﺨﺎﺻﯿﺔ ‪SHAPE‬‬ ‫وﻣﻦ ﺛﻢ ﻧﺤﺘﺎج ﻟﺘﺤﺪﯾﺪ ﻣﻮﻗﻊ ﻛﻞ ﻣﻨﻄﻘﺔ وﻫﺬا ﯾﺘﻢ ﺑﺎﻟﺨﺎﺻﯿﺔ ‪ COORDS‬وأﺧﯿﺮًا ﺑﻤﺎ أن ﻛﻞ ﻣﻨﻄﻘﺔ ﺗﻤﺜﻞ وﺻﻠﺔ‬‫ﺗﺸﻌﺒﯿﺔ وﺗﺸﯿﺮ إﻟﻰ ﻋﻨﻮان ﻣﻮﻗﻊ ﻣﺎ ﻓﻤﻦ اﻟﺒﺪﯾﻬﻲ أن ﻧﺴﺘﺨﺪم ﺧﺎﺻﯿﺔ ﺗﺤﺪﯾﺪ اﻟﻤﻮاﻗﻊ وﻫﻲ ‪ HREF‬واﻟﺘﻲ ﻣﺮت ﻣﻌﻨﺎ‬ ‫ﻓﻲ درس اﻟﻮﺻﻼت اﻷﺳﺎﺳﯿﻪ‬ ‫إﻟﻰ اﻟﺘﻔﺎﺻﯿﻞ ‪...‬‬ ‫ﺗﺄﺧﺬ اﻟﺨﺎﺻﯿﺔ ‪ SHAPE‬ﺛﻼﺛﺔ ﻗﯿﻢ ﻟﺘﺤﺪﯾﺪ ﺷﻜﻞ اﻟﻤﻨﻄﻘﺔ اﻟﺴﺎﺧﻨﺔ وﻫﻲ‪:‬‬ ‫‪RECT‬ﻟﻸﺷﻜﺎل اﻟﻤﺮﺑﻌﺔ واﻟﻤﺴﺘﻄﯿﻠﺔ اﻟﻤﻨﺘﻈﻤﺔ‬ ‫•‬ ‫‪CIRCLE‬ﻟﻠﺪواﺋﺮ‬ ‫•‬ ‫•‬ ‫‪POLY‬ﻟﻸﺷﻜﺎل اﻟﻌﺸﻮاﺋﯿﺔ واﻟﻤﻀﻠﻌﺔ‬‫وﻟﺪﯾﻨﺎ داﺋﺮة وﻣﺴﺘﻄﯿﻞ وﺷﻜﻠﯿﻦ ﻋﺸﻮاﺋﯿﯿﻦ‪ ،‬إذن ﺗﺼﺒﺢ اﻟﺸﯿﻔﺮة ﻛﻤﺎ ﯾﻠﻲ( دون أﻫﻤﯿﺔ ﻟﺘﺮﺗﯿﺒﻬﺎ‪):‬‬

‫>\"‪<MAP NAME=\"ourmap‬‬‫>\"‪<AREA SHAPE=\"poly‬‬‫>\"‪<AREA SHAPE=\"rect‬‬‫>\"‪<AREA SHAPE=\"circle‬‬‫>\"‪<AREA SHAPE=\"poly‬‬‫>‪</MAP‬‬ ‫ﻧﺄﺗﻲ اﻵن إﻟﻰ ﺗﺤﺪﯾﺪ ﻣﻮﻗﻊ ﻛﻞ ﺷﻜﻞ ﻣﻦ اﻟﺨﺮﯾﻄﺔ‪ ،‬واﻟﺬي ﯾﺘﻢ ﺑﺎﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ ‪ COORDS.‬ﺗﺄﺧﺬ ﻫﺬه اﻟﺨﺎﺻﯿﺔ‬ ‫ﻗﯿﻤًﺎ رﻗﻤﯿﺔ ﺗﻤﺜﻞ إﺣﺪاﺛﯿﺎت اﻟﺸﻜﻞ اﻟﻬﻨﺪﺳﻲ ﺑﺎﻟﺒﯿﻜﺴﻞ ﻋﻠﻰ اﻟﺨﺮﯾﻄﺔ )أﻟﻢ أﻗﻞ ﻟﻚ أﻧﻚ ﺳﺘﺤﺘﺎج إﻟﻰ اﻟﻘﻠﯿﻞ ﻣﻦ‬‫اﻟﻬﻨﺪﺳﺔ( وﻣﻦ اﻟﺒﺪﯾﻬﻲ أن ﺗﺨﺘﻠﻒ دﻻﻟﺔ ﻛﻞ ﻗﯿﻤﺔ ﺑﺈﺧﺘﻼف اﻟﺸﻜﻞ اﻟﻤﻘﺼﻮد‪ .‬أﻧﻈﺮ إﻟﻰ اﻷﺷﻜﺎل اﻟﺘﻮﺿﯿﺤﯿﺔ اﻟﺘﺎﻟﯿﺔ ‪:‬‬ ‫ﻓﻲ اﻟﺸﻜﻞ اﻟﺮﺑﺎﻋﻲ اﻟﻤﻨﺘﻈﻢ ﻧﺤﺘﺎج ﻟﻤﻌﺮﻓﺔ إﺣﺪاﺛﯿﻲ اﻟﺰاوﯾﺔ اﻟﯿﺴﺮى اﻟﻌﻠﯿﺎ وإﺣﺪاﺛﯿﻲ اﻟﺰاوﯾﺔ اﻟﯿﻤﻨﻰ اﻟﺴﻔﻠﻰ‪.‬‬ ‫)أرﺑﻌﺔ أرﻗﺎم(‬ ‫أﻣﺎ ﻓﻲ اﻟﺪاﺋﺮة ﻓﻜﻞ ﻣﺎ ﻧﺤﺘﺎﺟﻪ ﻫﻮ إﺣﺪاﺛﯿﻲ ﻧﻘﻄﺔ اﻟﻤﺮﻛﺰ ﻟﻬﺬه اﻟﺪاﺋﺮة ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ ﻣﻌﺮﻓﺔ ﻧﺼﻒ ﻗﻄﺮﻫﺎ‪) .‬ﺛﻼﺛﺔ‬ ‫أرﻗﺎم ﻓﻘﻂ(‬ ‫وأﺧﯿﺮاً ﻓﻲ اﻷﺷﻜﺎل اﻟﻤﻀﻠﻌﺔ اﻟﻌﺸﻮاﺋﯿﺔ ﻧﺤﺘﺎج ﻟﻤﻌﺮﻓﺔ إﺣﺪاﺛﯿﻲ ﻛﻞ ﻧﻘﻄﺔ ﻣﻦ اﻟﻨﻘﺎط اﻟﺘﻲ ﺗﻤﺜﻞ زواﯾﺎ ﻫﺬا اﻟﺸﻜﻞ‬ ‫ﻣﻬﻤﺎ ﻛﺎن ﻋﺪدﻫﺎ‪) .‬ﻋﺪد اﻷرﻗﺎم ﻏﯿﺮ ﻣﺤﺪد وﯾﺨﺘﻠﻒ ﺑﺈﺧﺘﻼف اﻟﺸﻜﻞ اﻟﻤﻘﺼﻮد(‬

‫وﻗﺪ ﺗﺴﺄل اﻵن‪ ،‬ﻛﯿﻒ ﻧﺴﺘﻄﯿﻊ إﯾﺠﺎد ﻫﺬه اﻹﺣﺪاﺛﯿﺎت؟ ﻣﺎ ﻣﻦ ﻣﺸﻜﻠﺔ !ﻫﻨﺎ ﯾﺄﺗﻲ دور ﺑﺮﻧﺎﻣﺞ اﻟﺠﺮاﻓﯿﻜﺲ‪ ،‬ﻓﻜﻞ ﻣﺎ‬ ‫ﻋﻠﯿﻚ ﻫﻮ ﺗﺤﻤﯿﻞ اﻟﺼﻮر ﻓﻲ ﻫﺬا اﻟﺒﺮﻧﺎﻣﺞ ﺛﻢ وﺿﻊ اﻟﻤﺆﺷﺮ ﻓﻲ اﻟﻤﻜﺎن اﻟﻤﻄﻠﻮب وﺳﻮف ﺗﺸﺎﻫﺪ إﺣﺪاﺛﯿﺎت اﻟﻨﻘﻄﺔ‬ ‫اﻟﺘﻲ ﯾﻘﻊ ﻋﻠﯿﻬﺎ اﻟﻤﺆﺷﺮ ﻋﻠﻰ اﻟﺸﺮﯾﻂ اﻟﻤﻮﺟﻮد أﺳﻔﻞ ﻧﺎﻓﺬة اﻟﺒﺮﻧﺎﻣﺞ‪ .‬وﺑﺎﻹﺿﺎﻓﺔ ﻟﺬﻟﻚ ﺗﺴﺘﻄﯿﻊ ﻣﻌﺮﻓﺔ أﺑﻌﺎد‬ ‫اﻟﺼﻮرة ﻛﻜﻞ‪ .‬وﻋﻠﻰ أﯾﺔ ﺣﺎل ﻛﻞ ﻣﺎ ﻋﻠﯿﻚ ﻓﻌﻠﻪ ﻫﻮ ﺗﺴﺠﯿﻞ إﺣﺪاﺛﯿﺎت ﺟﻤﯿﻊ اﻟﻨﻘﺎط اﻟﻤﻄﻠﻮﺑﺔ ﻣﻦ أﺟﻞ اﺳﺘﺨﺪاﻣﻬﺎ‬ ‫ﻓﻲ ﺗﻌﺮﯾﻒ اﻟﺨﺮﯾﻄﺔ ‪.‬‬ ‫وﻟﻨﻌﺪ اﻵن إﻟﻰ ﺧﺮﯾﻄﺘﻨﺎ‪:‬‬ ‫ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﺸﻜﻞ اﻟﻤﺴﺘﻄﯿﻞ ﻛﺎﻧﺖ إﺣﺪاﺛﯿﺎت اﻟﻨﻘﻄﺔ اﻟﻌﻠﯿﺎ ﻫﻲ‪ (٢٨،٢٥٥):‬وإﺣﺪاﺛﯿﺎت اﻟﻨﻘﻄﺔ اﻟﺴﻔﻠﻰ ﻫﻲ‬ ‫)‪). ٣١٠،٣٠٠‬‬ ‫أﻣﺎ اﻟﺪاﺋﺮة ﻓﻜﺎﻧﺖ إﺣﺪاﺛﯿﺎت ﻧﻘﻄﺔ ﻣﺮﻛﺰﻫﺎ ﻫﻲ )‪ (١٤٥،١٦٤‬وﻧﺼﻒ ﻗﻄﺮﻫﺎ ‪ ٨٤‬ﺑﯿﻜﺴﻞ ‪.‬‬ ‫أﻣﺎ اﻟﺸﻜﻞ اﻟﻤﻀﻠﻊ اﻷﯾﻤﻦ )اﻟﻤﺜﻠﺚ( ﻓﺄن إﺣﺪاﺛﯿﺎت زواﯾﺎه ﻫﻲ )‪), (315,230) ٣٠٠،٢٠) ،(١٥٠،١٠‬وﺗﺬﻛﺮ‬ ‫ﻫﻨﺎ أن ﻻ أﻫﻤﯿﺔ ﻟﻠﺘﺮﺗﯿﺐ ﻓﻲ ذﻛﺮ ﻫﺬه اﻟﻨﻘﺎط‪ .‬اﻟﻤﻬﻢ ﻓﻘﻂ أن ﺗﻜﻮن اﻹﺣﺪاﺛﯿﺎت دﻗﯿﻘﺔ إﻟﻰ ﺣﺪ ﻣﺎ ‪.‬‬ ‫وأﺧﯿﺮًا ﻓﺈن إﺣﺪاﺛﯿﺎت اﻟﻨﻘﺎط ﻓﻲ اﻟﺸﻜﻞ اﻟﻤﻀﻠﻊ اﻷﯾﺴﺮ )اﻟﺮﺑﺎﻋﻲ( ﻫﻲ‪،(١١٠،٦٥) ،(١٣٠،١٠) ،(١٠،١٠) :‬‬ ‫)‪) ١٠،١٤٠‬‬ ‫ﻟﻨﻘﻢ اﻵن ﺑﻜﺘﺎﺑﺔ ﻫﺬه اﻟﺒﯿﺎﻧﺎت ﺿﻤﻦ اﻟﺸﯿﻔﺮة اﻟﺴﺎﺑﻘﺔ واﻟﺘﻲ ﺳﺘﺼﺒﺢ ﻛﻤﺎ ﯾﻠﻲ‪:‬‬‫>\"‪<MAP NAME=\"ourmap‬‬‫>\"‪<AREA SHAPE=\"poly\" COORDS=\"10,10,130,10,110,65,10,140‬‬‫>\"‪<AREA SHAPE=\"rect\" COORDS=\"28,255,310,300‬‬‫>\"‪<AREA SHAPE=\"circle\" COORDS=\"145,164,84‬‬‫>\"‪<AREA SHAPE=\"poly\" COORDS=\"150,10,300,20,315,230‬‬‫>‪</MAP‬‬ ‫ﻣﺎذا ﺑﻘﻲ اﻵن؟ ﺑﻘﻲ ﺗﻌﯿﯿﻦ اﻟﻌﻨﺎوﯾﻦ اﻟﺘﻲ ﺳﺘﺸﯿﺮ إﻟﯿﻬﺎ اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ واﻟﺘﻲ ﺳﻨﺴﺘﺨﺪم ﻟﻬﺎ اﻟﺨﺎﺻﯿﺔ ‪HREF.‬‬ ‫إﻟﯿﻚ ﻋﻨﺎوﯾﻦ أرﺑﻌﺔ ﻣﻦ اﻟﻤﻮاﻗﻊ اﻟﻌﺮﺑﯿﺔ اﻟﻤﻤﺘﺎزة‬‫>\"‪<MAP NAME=\"ourmap‬‬‫\"‪<AREA SHAPE=\"poly\" COORDS=\"10,10,130,10,110,65,10,140‬‬‫>\"‪HREF=\"http://asdh4.dk3.com‬‬‫\"‪<AREA SHAPE=\"rect\" COORDS=\"28,255,310,300‬‬‫>\"‪HREF=\"http://www.ayna.com‬‬‫\"‪<AREA SHAPE=\"circle\" COORDS=\"145,164,84‬‬‫>\"‪HREF=\"http://www.pcmag-arabic.com‬‬‫\"‪<AREA SHAPE=\"poly\" COORDS=\"150,10,300,20,315,230‬‬‫>\"‪HREF=\"http://www.ahram.org.eg‬‬‫>‪</MAP‬‬ ‫وأﺧﯿﺮاً ﺑﻌﺪ ﺗﺠﻤﯿﻊ اﻟﺸﯿﻔﺮة اﻟﺨﺎﺻﺔ ﺑﺈدراج اﻟﺼﻮرة ﻣﻊ ﻫﺬه اﻟﺸﯿﻔﺮة ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪) .‬وﺑﺎﻟﻤﻨﺎﺳﺒﺔ ﻓﻘﺪ ﻗﻤﺖ‬‫ﺑﺎﻟﺘﺠﻤﯿﻊ ﻣﻦ أﺟﻞ ﺗﻮﺿﯿﺢ اﻟﻨﺘﯿﺠﺔ اﻟﻨﻬﺎﺋﯿﺔ ﻟﺸﯿﻔﺮة اﻟﺨﺮﯾﻄﺔ ﻛﻜﻞ‪ .‬وﻓﻲ اﻟﻮاﻗﻊ أﻧﻨﺎ ﻧﺴﺘﻄﯿﻊ وﺿﻊ ﺗﻌﺮﯾﻒ اﻟﺨﺮﯾﻄﺔ‬ ‫ﻓﻲ أي ﻣﻜﺎن ﻧﺮﯾﺪه داﺧﻞ اﻟﻤﻠﻒ وﻟﯿﺲ ﺷﺮﻃﺎً أن ﯾﻜﻮن ﻗﺮﯾﺒﺎً ﻣﻦ ﺷﯿﻔﺮة إدراج اﻟﺼﻮرة )‬

‫\"‪<IMG SRC=\"flowers.jpg\" WIDTH=\"320\" HEIGHT=\"310\" BORDER=\"0‬‬‫>\"‪USEMAP=\"#ourmap‬‬‫>\"‪<MAP NAME=\"ourmap‬‬‫\"‪<AREA SHAPE=\"poly\" COORDS=\"10,10,130,10,110,65,10,140‬‬‫>\"‪HREF=\"http://asdh4.dk3.com‬‬‫\"‪<AREA SHAPE=\"rect\" COORDS=\"28,255,310,300‬‬‫>\"‪HREF=\"http://www.ayna.com‬‬‫\"‪<AREA SHAPE=\"circle\" COORDS=\"145,164,84‬‬‫>\"‪HREF=\"http://www.pcmag-arabic.com‬‬‫\"‪<AREA SHAPE=\"poly\" COORDS=\"150,10,300,20,315,230‬‬‫>\"‪HREF=\"http://www.ahram.org.eg‬‬‫>‪</MAP‬‬ ‫ﺳﻮف ﻧﺤﺼﻞ ﻋﻠﻰ اﻟﻨﺘﯿﺠﺔ اﻟﺘﺎﻟﯿﺔ وﺣﺎول أن ﺗﺠﺮﺑﻬﺎ ‪:‬‬ ‫ﺷﻜﺮ ﺧﺎص ﻟﻲ ‪http://www.khayma.com/hpinarabic‬‬ ‫واﻵن أرﯾﺪ أن أﺛﯿﺮ ﻣﺴﺄﻟﺘﯿﻦ ﻣﻬﻤﺘﯿﻦ ﻓﻲ ﻫﺬا اﻟﺴﯿﺎق‪:‬‬ ‫اﻷوﻟﻰ‪ :‬ﻣﺎذا ﻟﻮ أردﻧﺎ إدراج ﻫﺬه اﻟﺨﺮﯾﻄﺔ أﻛﺜﺮ ﻣﻦ ﻣﺮة ﻓﻲ اﻟﺼﻔﺤﺔ‪ ،‬ﻓﻬﻞ ﻧﺤﺘﺎج إﻟﻰ ﺗﻜﺮار ﻛﺘﺎﺑﺔ اﻟﺸﯿﻔﺮة‬ ‫>‪<MAP> ... </MAP‬ﻣﻊ ﻛﻞ ﻣﺮة ﻧﺪرج ﻓﯿﻬﺎ اﻟﺼﻮرة؟ اﻟﺠﻮاب ﻗﻄﻌﺎً ﻻ!!‪.‬‬ ‫ﻓﻄﺎﻟﻤﺎ أﻧﻨﺎ ﻧﻜﺘﺐ اﻟﺨﺎﺻﯿﺔ ‪ USEMAP‬ﻓﺈن اﻟﻤﺘﺼﻔﺢ ﯾﻘﻮم ﺑﺎﻟﺒﺤﺚ ﻋﻦ ﺷﯿﻔﺮة اﻟﺨﺮﯾﻄﺔ اﻟﺘﻲ ﺣﺪدﻧﺎ اﺳﻤﻬﺎ ﻣﻊ ﻫﺬه‬ ‫اﻟﺨﺎﺻﯿﺔ‪ ،‬وﻣﻦ ﺛﻢ ﯾﻄﺒﻘﻬﺎ ﻋﻠﻰ اﻟﺼﻮرة اﻟﻤﻌﻄﺎة ﻣﻬﻤﺎ ﻛﺎن ﻋﺪد ﻣﺮات إدراﺟﻬﺎ ‪.‬‬ ‫اﻟﺜﺎﻧﯿﺔ‪ :‬ﻣﺎذا ﻟﻮ ﻗﺮرﻧﺎ إﻟﻐﺎء ﻫﺬه اﻟﺼﻮرة ووﺿﻊ ﺻﻮرة أﺧﺮى ﻣﻜﺎﻧﻬﺎ ‪.‬ﻫﻞ ﻣﻦ ﻣﺸﻜﻠﺔ؟ أﯾﻀﺎً ﻻ ﯾﻮﺟﺪ ﻫﻨﺎ أي‬ ‫ﻣﺸﻜﻠﺔ‪ .‬ﻷن ﺗﻌﺮﯾﻒ اﻟﺨﺮﯾﻄﺔ ﺑﻄﺒﯿﻌﺘﻪ ﻏﯿﺮ ﻣﺮﺗﺒﻂ ﺑﺼﻮرة ﻣﺤﺪدة ﺑﻌﯿﻨﻬﺎ‪ .‬ﻫﻮ ﻓﻘﻂ ﯾﻌﺮف ﻣﻨﺎﻃﻖ ﻣﺤﺪدة ﺑﺎﻟﺸﻜﻞ‬ ‫واﻟﻤﻮﻗﻊ‪ .‬وﻟﻮ دﻗﻘﺖ اﻟﻨﻈﺮ ﻓﻲ ﻫﺬا اﻟﺘﻌﺮﯾﻒ ﻓﻠﻦ ﺗﺠﺪ ﻣﺎ ﯾﺸﯿﺮ إﻟﻰ أﻧﻬﺎ ﻣﺮﺗﺒﻄﺔ ﺑﺼﻮرة ﺑﻌﯿﻨﻬﺎ‪ ،‬أﻟﯿﺲ ﻛﺬﻟﻚ؟ ﺑﻞ‬ ‫إﻧﻚ ﻟﻮ أدرﺟﺖ ﺻﻮرة أﻛﺒﺮ ﻣﻤﺎ ﯾﺠﺐ أو ﺣﺘﻰ ﺻﻮرة أﺻﻐﺮ ﻣﻤﺎ ﯾﺠﺐ واﺳﺘﺨﺪﻣﺖ ﺧﺎﺻﯿﺔ ‪ USEMAP‬ﻣﻌﻬﻤﺎ‬ ‫ﻟﺘﺸﯿﺮ إﻟﻰ اﻟﺨﺮﯾﻄﺔ‪ ،‬ﻓﻠﻦ ﺗﻮاﺟﻪ أي ﻣﺸﻜﻠﺔ ﻓﻲ ذﻟﻚ‪) .‬وأﻋﻨﻲ ﻫﻨﺎ ﻣﺸﻜﻠﺔ ﻟﻠﻤﺘﺼﻔﺢ )ﻟﻜﻦ ﺑﺎﻟﻄﺒﻊ ﻓﺎﻟﺼﻮرة اﻟﻜﺒﯿﺮة‬ ‫ﺳﺘﺤﺘﻮي ﻋﻠﻰ ﻣﻨﺎﻃﻖ دون وﺻﻼت ﺗﺸﻌﺒﯿﺔ‪ ،‬واﻟﺼﻮرة اﻟﺼﻐﯿﺮة ﺳﻮف ﻟﻦ ﺗﺤﺘﻮي ﻋﻠﻰ ﺑﻌﺾ اﻟﻮﺻﻼت‬ ‫اﻟﻤﻌﺮﻓﺔ ﻓﻲ اﻟﺨﺮﯾﻄﺔ ﻛﻤﺎ ﺗﺮي ﻓﻲ ﻫﺬا اﻟﺸﻜﻞ‪:-‬‬

‫ﺧﻄﺄ!‬ ‫واﻟﺨﻼﺻﺔ أن ﺗﻌﺮﯾﻒ اﻟﺨﺮﯾﻄﺔ ﻫﻮ ﺗﻌﺮﯾﻒ ﻣﺸﺎع ﯾﻮﺿﻊ ﻣﺮة واﺣﺪة ﻓﻘﻂ وﻓﻲ أي ﻣﻜﺎن داﺧﻞ اﻟﺼﻔﺤﺔ‪ ،‬وﺑﺸﺮط‬‫أن ﯾﻜﻮن ﺿﻤﻦ وﺳﻢ >‪ </BODY> ... <BODY‬وﺑﺎﻟﻤﻘﺎﺑﻞ ﻧﺴﺘﻄﯿﻊ إدراج ﻋﺸﺮات اﻟﺼﻮر ﻣﻬﻤﺎ ﻛﺎﻧﺖ ﻃﺒﯿﻌﺘﻬﺎ‬ ‫داﺧﻞ اﻟﺼﻔﺤﺔ ﻟﺘﻜﻮن ﺧﺮاﺋﻂ ﺻﻮرﯾﺔ ﺗﺴﺘﺨﺪم ﻧﻔﺲ ﺗﻌﺮﯾﻒ ﻫﺬه اﻟﺨﺮﯾﻄﺔ ﻃﺎﻟﻤﺎ أﻧﻨﺎ وﺿﻌﻨﺎ اﻟﺨﺎﺻﯿﺔ‬ ‫\"‪ USEMAP=\"#map_name‬ﻣﻊ ﻫﺬه اﻟﺼﻮر‪.‬‬ ‫وﻣﺴﻚ اﻟﺨﺘﺎم ‪:‬ﺗﺤﻔﻞ اﻹﻧﺘﺮﻧﺖ ﺑﺎﻟﻜﺜﯿﺮ ﻣﻦ اﻟﺒﺮاﻣﺞ اﻟﺘﻲ ﺗﻘﻮم ﺑﺘﺼﻤﯿﻢ اﻟﺨﺮاﺋﻂ اﻟﺼﻮرﯾﺔ ﺑﺴﺮﻋﺔ وﺳﻬﻮﻟﺔ‬‫ﻣﺘﻨﺎﻫﯿﺘﯿﻦ‪ ..‬ﻓﻘﻂ ﺗﻘﻮم ﺑﺘﺤﻤﯿﻞ اﻟﺼﻮرة اﻟﻤﻄﻠﻮﺑﺔ‪ ،‬ﺛﻢ ﺗﺮﺳﻢ اﻷﺷﻜﺎل اﻟﺘﻲ ﺗﺮﯾﺪﻫﺎ ﻋﻠﯿﻬﺎ ﻛﻤﺎ ﻟﻮ ﻛﻨﺖ ﺗﺴﺘﺨﺪم ﺑﺮﻧﺎﻣﺞ‬ ‫اﻟﺮﺳﺎم‪ ،‬وﻣﻦ ﺛﻢ ﺗﻜﺘﺐ ﻋﻨﺎوﯾﻦ اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ اﻟﻤﻄﻠﻮﺑﺔ ﻟﻜﻞ ﻣﻦ ﻫﺬه اﻷﺷﻜﺎل‪ .‬وﻫﻜﺬا ﺑﺒﺴﺎﻃﺔ ﯾﻘﻮم اﻟﺒﺮﻧﺎﻣﺞ‬ ‫ﺑﺈﯾﺠﺎد اﻹﺣﺪاﺛﯿﺎت اﻟﺨﺎﺻﺔ ﺑﻜﻞ ﺷﻜﻞ وإﻧﺸﺎء ﺷﯿﻔﺮة اﻟﺨﺮﯾﻄﺔ اﻟﻤﻄﻠﻮﺑﺔ!! أي أﻧﻚ ﺧﻼل دﻗﺎﺋﻖ ﻣﻌﺪودة ﺗﺴﺘﻄﯿﻊ‬ ‫إﻧﺸﺎء أﻋﻘﺪ اﻟﺨﺮاﺋﻂ اﻟﺼﻮرﯾﺔ‪ ..‬ﻟﻜﻦ ﺑﻤﺎ أﻧﻚ ﺗﻬﻮى اﻟﺼﻌﺐ وﺗﺘﺤﺪى اﻟﻤﺴﺘﺤﯿﻞ ﻓﻼ اﻋﺘﻘﺪ أﻧﻚ ﺳﺘﻔﻀﻞ ﻫﺬا اﻟﻨﻮع‬ ‫ﻣﻦ اﻟﺒﺮاﻣﺞ‪) .‬ﺑﺎﻟﻤﻨﺎﺳﺒﺔ‪ ،‬ﻟﻘﺪ ﻓﻀﻠﺖ ﺗﺄﺧﯿﺮ ﻛﺘﺎﺑﺔ ﻫﺬه اﻟﻤﻼﺣﻈﺔ ﺣﺘﻰ ﻧﻬﺎﯾﺔ ﻫﺬا اﻟﺪرس‪ ،‬ﻷﻧﻲ ﻟﻮ وﺿﻌﺘﻬﺎ ﻓﻲ‬‫اﻟﺒﺪاﯾﺔ ﻟﻤﺎ أﻛﻤﻠﺖ ﻫﺬا اﻟﺪرس أﺻ ًﻼ وﻟﻬﺮﻋﺖ ﻟﻺﻧﺘﺮﻧﺖ ﻟﻠﺒﺤﺚ ﻋﻦ ﻣﺜﻞ ﻫﺬه اﻟﺒﺮاﻣﺞ( وﻋﻠﻰ أﯾﺔ إﻟﯿﻚ ﻫﺬا اﻟﻌﻨﻮان‬ ‫ﻟﺒﺮﻧﺎﻣﺞ راﺋﻊ ﯾﺪﻋﻰ ‪ Live Image‬ﻣﻦ ﺷﺮﻛﺔ ‪Mediatec‬‬ ‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬ ‫إﺿﺎﻓﺔ اﻟﻮﺳﺎﺋﻂ اﻟﻤﺘﻌﺪده‬ ‫ﻓﻲ ﻫﺬا اﻟﻔﺼﻞ ﺳﻨﺘﺤﺪث ﻋﻦ ﻛﯿﻔﯿﻪ إﺿﺎﻓﺔ ) إدراج ) اﻟﻮﺳﺎﺋﻂ اﻟﻤﺘﻌﺪده‪.‬‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬

‫] ﺻﻮت اﻟﺨﻠﻔﯿﻪ | إدراج وﺳﺎﺋﻂ أﺧﺮى | وﺳﻢ ال‪[ EMBED‬‬ ‫>‪<BGSOUND‬‬‫ﻫﻞ ﺗﺄﻛﺪت أن ﻣﻜﺒﺮات اﻟﺼﻮت ﻓﻲ ﺟﻬﺎزك ﺗﻌﻤﻞ ﺟﯿﺪاً؟ ﻣﻦ اﻟﻤﻔﺘﺮض ﻋﻨﺪ دﺧﻮﻟﻚ ﻟﻬﺬه اﻟﺼﻔﺤﺔ أن ﺗﺴﻤﻊ ﻣﻘﻄﻌﺎً‬ ‫ﻣﻮﺳﯿﻘﯿًﺎ ﯾُﻌﺰف ﺑﺼﻮرة ﺗﻠﻘﺎﺋﯿﺔ )أرﺟﻮ أن ﯾﻌﺠﺒﻚ(‪.‬‬ ‫ﻣﻼﺣﻈﺔ ﻫﺬا اﻟﻮﺳﻢ ﻻ ﯾﻌﻤﻞ إﻻ ﻣﻊ اﻹﻧﺘﺮﻧﺖ إﻛﺴﯿﺒﻠﻮﻟﺮ‬ ‫ﺗﺴﺘﻄﯿﻊ ﺗﻌﯿﯿﻦ أي ﻣﻠﻒ ﺻﻮﺗﻲ ﯾﺤﻤﻞ اﻹﻣﺘﺪاد ‪ mid‬أو ‪ wav‬أو ‪ au‬ﺑﺤﯿﺚ ﯾﻌﻤﻞ ﺗﻠﻘﺎﺋﯿًﺎ ﻋﻨﺪﻣﺎ ﯾﺘﻢ ﺗﺤﻤﯿﻞ‬‫اﻟﺼﻔﺤﺔ ﻓﻲ اﻟﻤﺘﺼﻔﺢ‪ ،‬وذﻟﻚ ﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻢ >‪) <BGSOUND‬أي ‪ (BackGround Sound‬ﻓﻌﻠﻰ ﺳﺒﯿﻞ‬ ‫اﻟﻤﺜﺎل‪ ،‬ﻗﻤﺖ ﺑﺈدراج اﻟﻤﻘﻄﻊ اﻟﺬي ﺗﺴﻤﻌﻪ واﻟﻤﺴﻤﻰ‪ yankee.mid‬ﺑﺎﻟﻄﺮﯾﻘﺔ اﻟﺘﺎﻟﯿﺔ‬‫>\"‪<BGSOUND SRC=\"yankee.mid‬‬ ‫إذن ﻫﻨﺎك اﻟﺨﺎﺻﯿﺔ ‪ SRC‬واﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻛﻤﺎ ﺗﺮى ﻟﺘﺤﺪﯾﺪ اﺳﻢ اﻟﻤﻠﻒ اﻟﻤﺪرج ‪.‬ﻛﻤﺎ ﯾﻮﺟﺪ أﯾﻀﺎً اﻟﺨﺎﺻﯿﺔ ‪LOOP‬‬ ‫اﻟﺘﻲ ﺗﺤﺪد ﻋﺪد ﻣﺮات ﺗﻜﺮار ﻋﺰف اﻟﻤﻘﻄﻮﻋﺔ أي أﻧﻬﺎ ﺗﺄﺧﺬ أرﻗﺎﻣﺎً ﺻﺤﯿﺤﺔ ﻋﺎدة‪ .‬أﻣﺎ ﻟﻮ ﻗﻤﺖ ﺑﺈﻋﻄﺎءﻫﺎ اﻟﻘﯿﻤﺔ‪-‬‬ ‫‪1‬أو اﻟﻘﯿﻤﺔ ‪ infinite‬ﻓﻬﺬا ﺳﻮف ﯾﺆدي إﻟﻰ ﺗﻜﺮار ﻋﺰف اﻟﻤﻘﻄﻮﻋﺔ إﻟﻰ ﻣﺎ ﻻ ﻧﻬﺎﯾﺔ )ﻻ ﺗﺨﻒ‪ ،‬ﻓﻬﺬا ﻻ ﯾﻌﻨﻲ أن‬‫اﻟﻌﺰف ﺳﯿﺴﺘﻤﺮ ﺑﻌﺪ أن ﺗﻘﻮم ﺑﺈﻃﻔﺎء ﺟﻬﺎزك( ﻓﻘﻂ ﺳﻮف ﺗﺴﻤﻌﻬﺎ ﻃﺎﻟﻤﺎ أﻧﻚ ﻣﻮﺟﻮد ﻓﻲ اﻟﺼﻔﺤﺔ وﺳﯿﺘﻮﻗﻒ ﺑﻤﺠﺮد‬ ‫اﻧﺘﻘﺎﻟﻚ ﻟﺼﻔﺤﺔ أﺧﺮى أو ﺧﺮوﺟﻚ ﻣﻦ اﻟﺒﺮﻧﺎﻣﺞ ‪.‬‬‫>\"‪<BGSOUND SRC=\"yankee.mid\" LOOP=\"infinite‬‬‫>\"‪<BGSOUND SRC=\"yankee.mid\" LOOP=\"3‬‬ ‫أﻣﺎ ﻓﻲ ﺣﺎﻟﺔ أردت إدراج وﺻﻼت ﺗﺸﻌﺒﯿﺔ ﻟﻤﻠﻔﺎت ﺻﻮﺗﯿﺔ ﻓﻲ ﻣﻮﻗﻌﻚ ﺑﺤﯿﺚ ﯾﻤﻜﻦ ﻟﻠﺰاﺋﺮ أن ﯾﺤﻤّﻠﻬﺎ أو أن ﯾﻨﻘﺮ‬ ‫ﻋﻠﯿﻬﺎ إذا أراد ﺳﻤﺎﻋﻬﺎ‪ ،‬ﻓﺬﻟﻚ ﯾﺘﻢ ﺑﺎﻟﻄﺮﯾﻘﺔ اﻹﻋﺘﯿﺎدﯾﺔ ﻹدراج اﻟﻮﺻﻼت واﻟﺘﻲ ﺗﻌﻠﻤﻨﺎﻫﺎ ﻓﻲ اﻟﺪرس اﻟﻮﺻﻼت‬ ‫اﻷﺳﺎﺳﯿﻪ أي ﻛﻤﺎ ﯾﻠﻲ‪:‬‬‫>‪ </A‬ﲪﻞ ﻫﺬه اﳌﻘﻄﻮﻋﺔ>\"‪<A HREF=\"yankee.mid‬‬ ‫ﺗﻈﻬﺮ ﻟﻚ اﻟﻮﺻﻠﻪ ﺑﻬﺬا اﻟﺸﻜﻞ و ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﯿﻬﺎ ﯾﻈﻬﺮ ﻟﻚ ﺻﻨﺪوق اﻹﺧﺘﯿﺎرات‬ ‫ﺣﻤﻞ ﻫﺬه اﻟﻤﻘﻄﻮﻋﻪ‬ ‫وﻫﻲ ‪-‬ﻛﻤﺎ ﺗﻌﻠﻢ‪ -‬ﻃﺮﯾﻘﺔ ﻋﺎﻣﺔ ﻟﯿﺲ ﻟﻬﺎ ﻋﻼﻗﺔ ﺑﻨﻮع اﻟﻤﺘﺼﻔﺢ اﻟﻤﺴﺘﺨﺪم‬ ‫إدراج وﺳﺎﺋﻂ أﺧﺮى‬ ‫ﻣﻦ اﻟﻤﻌﺮوف أن اﻟﻤﺴﺘﻌﺮﺿﺎت ﻟﻦ ﺗﺴﺘﻄﯿﻊ أن ﺗﻌﺮض ﺟﻤﯿﻊ اﻟﻮﺳﺎﺋﻂ اﻟﻤﺘﻌﺪده اﻟﺘﻲ ﺗﻘﻮم ﺑﻮﺿﻌﻬﺎ ﻓﻲ ﺻﻔﺤﺎﺗﻚ‬ ‫وﻟﻜﻦ ﺑﺈﺳﺘﺨﺪام ال ‪ Plug In‬ﺗﺴﺘﻄﯿﻊ أن ﺗﺘﻐﻠﺐ ﻋﻠﻲ ﻫﺬه اﻟﻤﺸﻜﻠﻪ وﺗﻮﺿﯿﺤﺎ أﻛﺜﺮ ‪ ،‬ﻓﻠﻜﻲ ﺗﻘﻮم ﺑﻌﺮض ﻣﺜﻼ‬‫ﺟﺰء ﻣﻦ ﻓﯿﻠﻢ ‪ AVI‬أو ﺗﻘﻮم ﺑﻌﺮض اﻷﻏﻨﯿﻪ و ﺗﺘﺤﻜﻢ ﻓﯿﻬﺎ ﻣﻦ ﺣﯿﺚ اﻟﺘﻮﻗﻒ ﺛﻢ اﻹﺳﺘﻤﺮار ﻣﺮة أﺧﺮي ﻓﺄﻧﺖ ﺗﺤﺘﺎج‬ ‫إﻟﻲ أن ﯾﻜﻮن اﻟﺠﻬﺎز اﻟﺬي ﺳﯿﻘﻮم ﺑﻌﺮض ﺻﻔﺤﺎﺗﻚ ﻣﺜﺒﺖ ﺑﻪ ال ‪ Plug In‬اﻟﺨﺎﺻﻪ ﺑﻬﺬه اﻟﻮﺳﺎﺋﻂ أو‬ ‫‪Multimedia‬و ﺗﺠﺪ ﻫﺬه ال ‪ Plug In‬ﻣﻮﺟﻮد ﻣﻊ ﻛﺜﯿﺮ ﻣﻦ اﻟﺒﺮاﻣﺞ ﻣﺜﻞ ‪» Windows Media Player‬‬ ‫وﻫﺬا ﯾﺴﺎﻋﺪ ﻣﺴﺘﺨﺪﻣﯿﻦ اﻹﻧﺘﺮﻧﺖ إﻛﺴﯿﺒﻠﻮﻟﺮ ) ‪( Internet Explorer‬أﻣﺎ ﺑﺎﻟﻨﺴﺒﻪ ﻟﻤﺴﺘﺨﺪﻣﻲ اﻟﻨﺖ ﺳﻜﯿﺐ‬ ‫‪Netscape‬ﻓﻼﺑﺪ وان ﯾﻜﻮن ﻟﺪﯾﻬﻢ ‪ » Netscape's plug-in centre‬أﻣﺎ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻤﺴﺘﺨﺪم اﻟﻤﺘﺼﻔﺤﯿﻦ‬ ‫اﻟﺴﺎﺑﻘﯿﻦ ﻓﻼﺑﺪ وان ﯾﻜﻮن ﻟﺪﯾﻪ ‪» QuickTime‬‬

‫‪The EMBED Tag‬‬ ‫ﻧﺄﺗﻲ اﻵن إﻟﻲ ﻛﯿﻔﯿﻪ وﺿﻊ أو إدراج ﻫﺬه اﻟﻮﺳﺎﺋﻂ و ﻟﻬﺬا ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <EMBED‬وﻫﻮ اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺈدراج‬ ‫اﻟﻮﺳﺎﺋﻂ اﻟﻤﺘﻌﺪده وﺗﻜﻮن ﺻﯿﻐﺘﻪ ﻛﺎﻟﺘﺎﻟﻲ‬‫\"‪<EMBED SRC=\"Media/CANYON.MID\" AUTOSTART=\"false\" LOOP=\"false\" HEIGHT=\"45‬‬‫‪WIDTH=\"170\"><NOEMBED>You Must Have QuickTime Program you can download it from‬‬‫>‪http://www.quicktime.com</NOEMBED‬‬ ‫‪You Must Have QuickTime Program you can download it from‬‬ ‫‪http://www.quicktime.com‬‬ ‫ﻧﺄﺗﻲ اﻵن إﻟﻲ ﺷﺮح اﻟﻮﺳﻚ وﺧﻮاﺻﻪ‬ ‫و ﺗﻼﺣﻆ ﻓﻲ ﻫﺬا اﻟﻮﺳﻢ اﻟﻜﺜﯿﺮ ﻣﻦ اﻟﺨﻮاﺻﻪ اﻟﺘﻲ ﻗﻤﻨﺎ ﺑﺸﺮﺣﻬﺎ ﻓﻲ وﺳﻮم اﻟﺼﻮر ﻣﺜﻞ اﻟﻌﺮض واﻹرﺗﻔﺎع وﻣﻜﺎن‬ ‫اﻟﻤﻠﻒ و ﺳﻨﻘﻮم ﺑﺸﺮح اﻟﺨﻮاص اﻟﺠﺪﯾﺪه ﻋﻠﯿﻚ‬ ‫\"‪AUTOSTART=\"...‬‬ ‫و ﻫﺬه اﻟﺨﺼﯿﻪ ﺗﺄﺧﺬ اﻟﻘﯿﻤﺔ ‪ True‬أو ‪ False‬ﻹأذا ﻗﻤﺖ ﺑﺄﻋﻄﺎﺋﻬﺎ اﻟﻘﯿﻤﺔ ‪ False‬ﻓﻬﺬا ﯾﺠﻊ اﻟﻤﻠﻒ ﯾﻌﻤﻞ ﻋﻨﺪﻣﺎ‬ ‫ﯾﻘﻮم ﺑﺘﺸﻐﯿﻠﻪ اﻟﻤﺴﺘﺨﺪم أم إذا ﻛﺎن ‪ True‬ﻓﻬﻮ ﯾﻌﻤﻞ ﺑﻄﺮﯾﻘﻪ ﻃﻠﻘﺎﺋﯿﻪ و ﻣﻦ وﺟﻬﺔ ﻧﻈﺮي ﻓﺄﻧﺎ أﻧﺼﺢ ]أن ﺗﺘﺮك‬ ‫اﻟﺤﺮﯾﻪ ﻟﻠﻤﺴﺘﺨﺪم ﻗﺮار ﻣﺘﻲ ﯾﻘﻮم ﺑﺘﺸﻐﯿﻞ اﻟﻤﻠﻒ‬ ‫\"‪LOOP=\"...‬‬ ‫و ﺗﻘﻮم ﻫﺬه اﻟﺨﺼﯿﻪ ﺑﺘﺤﺪﯾﺪ أم ﯾﻌﻤﻞ اﻟﻤﻠﻒ ﺗﻠﻘﺎﺋﯿﻪ ﺑﻌﺪ إﻧﺘﻬﺎﺋﻪ أم ﻻ و ﯾﺄﺧﺬ أﯾﻀﺎ اﻟﻘﯿﻢ ‪False ، True‬‬ ‫\"‪HIDDEN=\"...‬‬ ‫و ﺗﻘﻮم ﻫﺬه اﻟﺨﺎﺻﯿﻪ ﺑﺈﺧﻔﺎء ال‪ Plug In‬و ﻫﺬه اﻟﺨﺎﺻﯿﻪ ﺧﻄﯿﺮة ﺟﺪا ﺣﯿﺚ إﻧﻬﺎ ﺗﺠﻌﻞ اﻟﻤﻠﻒ ﯾﻌﻤﻞ دوﻣﺎ دون‬ ‫اﻟﺘﺤﻜﻢ ﻓﯿﻪ ﻣﻦ ﻗﺒﻞ اﻟﻤﺴﺘﺨﺪم إﻻ ﺑﺈﻏﻼق ﺻﻔﺤﺘﻚ‬ ‫>‪<NOEMBED> ......</NOEMBED‬‬ ‫و ﺗﻘﻮم ﻫﺬه اﻟﺨﺎﺻﯿﻪ ﺑﺈﻇﻬﺎر رﺳﺎﻟﻪ ﻟﻠﻤﺴﺘﺨﺪم اﻟﺬي ﻻ ﯾﻮﺟﺪ ﻟﺪﯾﻪ ال ‪ Pluge In‬اﻟﺨﺎص ﺑﻬﺬا اﻟﻤﻠﻒ و اﻟﻤﻜﺎن‬ ‫اﻟﻤﻨﺎﺳﺐ ﻟﺘﺤﻤﯿﻞ ﻫﺬا اﻟﻤﻠﻒ ﻋﺒﺮ اﻹﻧﺘﺮﻧﺖ‬ ‫أﻣﺎ ﺑﺎﻟﻨﺴﺒﻪ ﻟﻤﻼﻓﺎت اﻟﻔﯿﺪﯾﻮ ﻓﺄﻧﺎ ﻟﻦ أدرج ﻣﻠﻒ ﻓﯿﺪﯾﻮ ﻓﻲ ﻫﺬه اﻟﺼﻔﺤﺔ ﻧﻈﺮا ﻛﺒﺮ ﺣﺠﻢ ﻣﻠﻔﺎت اﻟﻔﯿﺪﯾﻮ وﻟﻜﻦ ﯾﺠﺐ‬ ‫أن ﺗﻌﺮف أﻧﻬﺎ إﯾﻀﺎ ﺗﺴﺘﺨﺪم اﻟﻮﺳﻢ اﻟﺴﺎﺑﻖ‬ ‫ﺗﺮي اﻵن أﺳﻔﻞ ﻫﺬا اﻟﻜﻼم ﺷﻌﺎر ﯾﺘﺤﺮك وﻫﺬا اﻟﺸﻌﺎر ﯾﻌﺘﻤﺪ ﻋﻠﻲ وﺟﻮد ﺑﺮﻧﺎﻣﺞ ال « ‪Macromedia‬‬ ‫‪ Player Flash‬و إﯾﻀﺎ ﻧﺴﺘﺨﺪم ﻧﻔﺲ اﻟﻮﺳﻢ اﻟﺴﺎﺑﻖ ﻹدراﺟﻪ‬ ‫‪Have Macromedia Flash You Can Download It at Must You‬‬ ‫‪htt://www.macromedia.com‬‬ ‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬

‫أﺳﻤﺎء اﻷﻟﻮان‬ ‫أﺳﻤﺎء اﻷﻟﻮان‬ ‫ ﻣﻦ اﻟﻤﻤﻜﻦ اﺳﺘﺨﺪام أﺳﻤﺎء ﻫﺬه اﻷﻟﻮان ﻣﺒﺎﺷﺮة ﺑﺪ ًﻻ ﻣﻦ اﻷرﻗﺎم‬،‫ﺑﺎﻟﻨﺴﺒﺔ ﻟﺒﻌﺾ اﻷﻟﻮان اﻷﺳﺎﺳﯿﺔ واﻟﺪارﺟﺔ‬‫ ﻟﻮن ﻛﻠﻬﺎ ذات أﺳﻤﺎء ﺟﻤﯿﻠﻪ‬١٤٠ ‫ ﻛﻮد وﻋﺪد ﻫﺬه اﻷﻟﻮان ﻫﻮ‬HEX ‫ ﺑﻤﻌﻨﻲ اﻧﻬﺎ ﻻ ﺗﺤﺘﺎج ﻟﻠـ‬،‫اﻟﺴﺪاس ﻋﺸﺮﯾﺔ‬ ‫وﻟﻜﻦ ﺑﺎﻟﻠﻐﻪ اﻹﻧﺠﻠﯿﺰﯾﺔ ﻓﻤﺜﻼ أذا أرﺗﺪ اﻟﻠﻮن اﻷزرق ﺗﻜﺘﺐ‬ COLOR=\"blue\" ‫ وﻫﺬا ﺟﺪول ﯾﻮﺿﺢ ﻫﺬه اﻷﻟﻮان وﻣﺴﻤﯿﺎﺗﻬﺎ‬HEX‫ ﻛﻤﺎ اﻟﺤﺎل ﻓﻲ أﻛﻮاد ال‬# ‫وﻻ ﺗﺤﺘﺎج ﻟﻮﺿﻊ ﻫﺬه اﻟﻌﻼﻣﺔ‬ :‫ أﯾﻀﺎ وﻟﻜﻦ أﻧﺖ ﻻﺗﺤﺘﺎج ﻟﻜﺘﺎﺑﻪ أي ﻛﻮد ﻓﻘﻂ أﻛﺘﺐ أﺳﻢ اﻟﻠﻮن‬HEX‫وأﻛﻮاد ال‬ Aqua Antiquewhite Aliceblue #00FFFF #FAEBD7 #F0F8FF Beige Azure Aquamarine #F5F5DC #F0FFFF #7FFFD4Blanchedalmond Black Bisque #FFEBCD #000000 #FFE4C4 Brown Blueviolet Blue #A52A2A #8A2BE2 #0000FF Chartreuse Cadetblue Burlywood #7FFF00 #5F9EA0 #DEB887 Cornflowerblue Coral Chocolate #6495ED #FF7F50 #D2691E Cyan Crimson Cornsilk #00FFFF #DC143C #FFF8DC Darkgoldenrod Darkcyan Darkblue #B8860B #008B8B #00008B Darkkhaki Darkgreen Darkgray #BDB76B #006400 #A9A9A9 Darkorange Darkolivegreen Darkmagenta #FF8C00 #556B2F #8B008B Darksalmon Darkred Darkorchid #E9967A #8B0000 #9932CC Darkslategray Darkslateblue Darkseagreen #2F4F4F #483D8B #8FBC8F Deeppink Darkviolet Darkturquoise #FF1493 #9400D3 #00CED1 Dodgerblue Dimgray Deepskyblue #1E90FF #696969 #00BFFF Forestgreen Floralwhite Firebrick #228B22 #FFFAF0 #B22222 Ghostwhite Gainsboro Fuchsia #F8F8FF #DCDCDC #FF00FF

Gray Goldenrod Gold#808080 #DAA520 #FFD700Honeydew Greenyellow Green #F0FFF0 #ADFF2F #008000 Indigo Indianred Hotpink#4B0082 #CD5C5C #FF69B4Lavender Khaki Ivory#E6E6FA #F0E68C #FFFFF0Lemonchiffon Lawngreen Lavenderblush #FFFACD #7CFC00 #FFF0F5Lightcyan Lightcoral Lightblue#E0FFFF #F08080 #ADD8E6Lightgrey Lightgreen Lightgoldenrodyellow#D3D3D3 #90EE90 #FAFAD2Lightseagreen Lightsalmon Lightpink #20B2AA #FFA07A #FFB6C1Lightsteelblue Lightslategray Lightskyblue #B0C4DE #778899 #87CEFALimegreen Lime Lightyellow #32CD32 #00FF00 #FFFFE0Maroon Magenta Linen#800000 #FF00FF #FAF0E6Mediumorchid Mediumblue Mediumauqamarine #BA55D3 #0000CD #66CDAAMediumslateblue Mediumseagreen Mediumpurple #9370D8#7B68EE #3CB371Mediumvioletred Mediumturquoise Mediumspringgreen#C71585 #48D1CC #00FA9AMistyrose Mintcream Midnightblue#FFE4E1 #F5FFFA #191970 Navy Navajowhite Moccasin#000080 #FFDEAD #FFE4B5Olivedrab Olive Oldlace #688E23 #808000 #FDF5E6 Orchid Orangered Orange#DA70D6 #FF4500 #FFA500Paleturquoise Palegreen Palegoldenrod #AFEEEE #98FB98 #EEE8AAPeachpuff Papayawhip Palevioletred#FFDAB9 #FFEFD5 #D87093 Plum Pink Peru#DDA0DD #FFC0CB #CD853F Red Purple Powderblue#FF0000 #800080 #B0E0E6Saddlebrown Royalblue Rosybrown #8B4513 #4169E1 #BC8F8FSeagreen Sandybrown Salmon#2E8B57 #F4A460 #FA8072Silver Sienna Seashell

‫‪#C0C0C0‬‬ ‫‪#A0522D‬‬ ‫‪#FFF5EE‬‬ ‫‪Slategray‬‬ ‫‪Slateblue‬‬ ‫‪Skyblue‬‬ ‫‪#708090‬‬ ‫‪#6A5ACD‬‬ ‫‪#87CEEB‬‬ ‫‪Steelblue‬‬ ‫‪Springgreen‬‬ ‫‪Snow‬‬ ‫‪#4682B4‬‬ ‫‪#00FF7F‬‬ ‫‪#FFFAFA‬‬ ‫‪Thistle‬‬ ‫‪Teal‬‬ ‫‪Tan‬‬ ‫‪#D8BFD8‬‬ ‫‪#008080‬‬ ‫‪#D2B48C‬‬ ‫‪Violet‬‬ ‫‪Turquoise‬‬ ‫‪Tomato‬‬ ‫‪#EE82EE‬‬ ‫‪#40E0D0‬‬ ‫‪#FF6347‬‬‫‪Whitesmoke‬‬ ‫‪White‬‬ ‫‪Wheat‬‬ ‫‪#F5F5F5‬‬ ‫‪#FFFFFF‬‬ ‫‪#F5DEB3‬‬ ‫‪YellowGreen‬‬ ‫‪Yellow‬‬ ‫‪#9ACD32‬‬ ‫‪#FFFF00‬‬ ‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬‫‪216‬ﻛﻮد ﻷﻟﻮان ﻣﺨﺘﻠﻔﺔ‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬‫] أﺧﺘﻼف اﻷﻟﻮان | أﻟﻮان اﻟﺨﻠﻔﯿﺎت | أﻟﻮان اﻟﻨﺺ [‬ ‫ﺗﻮﺿﯿﺢ أﺧﺘﻼف اﻷﻟﻮان‬‫ﻟﻮ ﻟﻢ ﺗﻼﺣﻆ أن اﻟﺼﻮر وﺻﻔﺤﺎت اﻟﻤﻮاﻗﻊ ﺗﻈﻬﺮ ﺑﺄﻟﻮان ﻣﺨﺘﻠﻔﺔ أذا ﺗﻢ ﻣﺸﺎﻫﺪﺗﻬﺎ ﻋﻠﻲ أﺟﻬﺰة ﻣﺨﺘﻠﻔﺔ أو ﻋﻠﻲ‬‫ﻣﺴﺘﻌﺮﺿﺎت ﻣﺨﺘﻠﻔﺔ ‪ ،‬ﻓﻤﻦ اﻟﻤﺤﺘﻤﻞ أن ﺗﺸﻤﻞ اﻟﺼﻮرة ﻋﻠﻲ ﻟﻮن ﻣﻌﯿﻦ ﻏﯿﺮ ﻣﺘﺎح ﻟﺪﯾﻚ وذﻟﻚ ﻻن ﻋﻤﻖ اﻟﻠﻮن‬‫ﻣﻨﺨﻔﺾ ﺟﺪا ﻟﺪﯾﻚ ‪ ،‬وﻟﻜﻲ ﺗﺨﺘﺒﺮ ﻋﻤﻖ اﻷﻟﻮان ﻓﻲ اﻟﻮﯾﻨﺪوز أﺿﻐﻂ ﻋﻠﻲ ﻫﺬه اﻷﯾﻜﻮﻧﻪ اﻟﺼﻐﯿﺮة ﻓﻲ ﺷﺮﯾﻂ اﻟﻤﻬﺎم‬‫وﻟﻮ وﺟﺪت أﻧﻚ ﻋﻠﻲ ﻋﻤﻖ أﻟﻮان ‪ ٢٥٦‬ﻟﻮن ﺳﺘﻔﻬﻢ ﻣﺎذا أﻗﺼﺪ !! وﻋﻨﺪﻫﺎ ﯾﺠﺐ أن ﺗﻌﺮف أن اﻟﻮﯾﻨﺪوز ﻟﯿﺲ‬‫ﻟﺪﯾﻪ ﻋﻤﻖ اﻷﻟﻮان اﻟﻌﺎﻟﻲ ﺟﺪا أو اﻟﻤﻠﯿﻮن ﻟﻮن ﻏﯿﺮ ﻣﺘﺎح ﻟﺪﯾﻪ ‪ ،‬وﻋﻨﺪﻫﺎ ﺳﯿﺤﺎول اﻟﻤﺴﺘﻌﺮض أن ﯾﻘﻠﺪ ﻫﺬا اﻟﻠﻮن‬ ‫ﺑﻤﺰج ﻟﻮﻧﯿﻦ أو أﻛﺜﺮ ﻣﻌﺎً ﻟﻜﻲ ﯾﻌﻄﯿﻚ اﻟﻠﻮن اﻟﻤﻄﻠﻮب ﺗﻘﺮﯾﺒﺎ‬ ‫ﻣﺜﺎل ‪ -:‬اﻟﻠﻮن اﻟﺒﺮﺗﻘﺎﻟﻲ‬‫ﺗﺨﯿﻞ أﻧﻚ ﺗﺮﯾﺪ ﻣﺜﻼ اﻟﻠﻮن اﻟﺒﺮﺗﻘﺎﻟﻲ وﻻ ﯾﻮﺟﺪ ﻟﺪي اﻟﻮﯾﻨﺪوز ﻗﺪرة ﻋﺎﻟﯿﻪ ﻣﻦ إﺳﺘﺨﺪام اﻷﻟﻮان ) اﻟﻤﻠﯿﻮن ﻟﻮن ﻏﯿﺮ‬ ‫ﻣﺘﺎح ( ‪ .‬ﻋﻨﺪﻫﺎ ﺳﯿﺤﺎول اﻟﻤﺴﺘﻌﺮض ﻣﺰج اﻟﻠﻮن اﻷﺣﻤﺮ واﻷﺻﻔﺮ ﻛﻬﺬا ‪-:‬‬‫اﻵن أﻧﺖ ﺗﺮي اﻟﻔﺮق ﺑﯿﻦ اﻟﺼﻮرﺗﯿﻦ ﻓﻘﻂ ﻗﻒ ﻋﻠﻲ اﻟﺼﻮرة واﻗﺮأ ﻟﺘﻌﻠﻢ أﯾﻬﻢ ﻟﺪﯾﻪ اﻟﻘﺪرة ﻋﻠﻲ اﻟﻤﻠﯿﻮن ﻟﻮن و‬ ‫اﻷﺧﺮ ﻻ ‪ ،‬وﻟﻜﻦ ﻣﻦ اﻟﻮﻫﻠﻪ اﻷوﻟﻲ ﯾﺘﻀﺢ أن اﻟﺼﻮرة اﻟﻤﻮﺟﻮده ﻋﻠﻲ اﻟﯿﺴﺎر ذات اﻟﻤﻠﯿﻮن ﻟﻮن‪.‬‬

‫ﻣﻼﺣﻈﺔ ‪ -:‬ﻻﺑﺪ وان ﺗﻌﻠﻢ و اﻧﺖ ﺗﺴﺘﺨﺪم ﻫﺬه اﻷﻟﻮان أن اﻟـ‪ HEX‬ﻛﻮد ﯾﺠﺐ وان ﯾﺒﺪأ ﺑﻬﺬه اﻟﻌﻼﻣﺔ ‪ #‬ﻓﻲ ﺑﺪاﯾﻪ‬ ‫اﻟﺮﻗﻢ ﻋﻠﻲ ﺳﺒﯿﻞ اﻟﻤﺜﺎل ‪-:‬‬ ‫\"‪COLOR=\"#0000FF‬‬ ‫ﺗﻼﺣﻆ أن اﻟﻘﯿﻢ اﻟﺴﺎﺑﻘﺔ ﻣﻜﻮﻧﺔ ﻣﻦ ﺳﺘﺔ رﻣﻮز‪ ،‬وﻫﻲ ﻣﻜﺘﻮﺑﺔ ﺑﺎﻟﺼﯿﻐﺔ اﻟﺘﺎﻟﯿﺔ‪-:‬‬ ‫ﻫﻨﺎك ﺛﻼﺛﺔ أﻟﻮان أﺳﺎﺳﯿﺔ ﻫﻲ اﻷﺣﻤﺮ واﻷﺧﻀﺮ واﻷزرق‪ ،‬وﻟﻜﻞ ﻣﻨﻬﺎ ﯾﻮﺟﺪ ‪ ٢٥٦‬درﺟﺔ ﻟﻮﻧﯿﺔ وﯾﻌﺒﺮ ﻋﻦ ﻫﺬه‬ ‫اﻟﺪرﺟﺎت ﺑﺎﻷرﻗﺎم ﻣﻦ ‪ ٠٠٠‬وﺣﺘﻰ ‪ .٢٥٥‬وﻣﻦ ﺧﻼل ﻣﺰج ﻫﺬه اﻷﻟﻮان ﺑﺪرﺟﺎﺗﻬﺎ اﻟﻠﻮﻧﯿﺔ اﻟﻤﺨﺘﻠﻔﺔ ﻧﺤﺼﻞ ﻋﻠﻰ‬ ‫اﻷﻟﻮان اﻷﺧﺮى‪.‬‬ ‫ﻓﻤﺜﻼ اﻟﻠﻮن اﻷﺳﻮد ﻣﻜﻮن ﻣﻦ اﻟﺪرﺟﺔ ‪ ٠٠٠‬ﻣﻦ ﻛﻞ ﻣﻦ اﻟﻠﻮن اﻷﺣﻤﺮ واﻷﺧﻀﺮ واﻷزرق ‪.‬واﻟﻠﻮن اﻷﺑﯿﺾ‬‫ﻣﻜﻮن ﻣﻦ اﻟﺪرﺟﺔ ‪ ٢٥٥‬ﻣﻦ ﻫﺬه اﻷﻟﻮان‪ .‬أﻣﺎ اﻟﻠﻮن اﻷﺻﻔﺮ ﻓﻬﻮ ﻣﻜﻮن ﻣﻦ اﻟﺪرﺟﺔ ‪ ٢٥٥‬ﻟﻠﻮن اﻷﺣﻤﺮ‪ ،‬واﻟﺪرﺟﺔ‬ ‫‪ ٢٥٥‬ﻟﻠﻮن اﻷﺧﻀﺮ‪ ،‬واﻟﺪرﺟﺔ ‪ ٠٠٠‬ﻣﻦ اﻟﻠﻮن اﻷزرق ‪...‬وﻫﻜﺬا ﺑﻨﻔﺲ اﻟﻄﺮﯾﻘﺔ ﯾﺘﻢ ﺗﻜﻮﯾﻦ ﺑﺎﻗﻲ اﻷﻟﻮان ‪.‬‬‫وﺑﻌﻤﻠﯿﺔ ﺣﺴﺎﺑﯿﺔ ﺑﺴﯿﻄﺔ ‪ 256×256×256‬ﯾﻨﺘﺞ ﻟﺪﯾﻨﺎ أن ﻋﺪد اﻷﻟﻮان اﻟﺘﻲ ﯾﻤﻜﻦ اﻟﺤﺼﻮل ﻋﻠﯿﻬﺎ ﺑﻤﺰج اﻷﻟﻮان‬ ‫اﻟﺜﻼﺛﺔ اﻟﺴﺎﺑﻘﺔ ﻫﻮ ‪ ١٦٧٧٧٢١٦‬ﺑﺎﻟﻀﺒﻂ ‪.‬‬ ‫ﺣﺴﻨﺎ‪ ،‬ﻟﻜﻦ ﻣﻦ أي ﺟﺎءت اﻟﺮﻣﻮز ‪ FFFFFF‬واﻟﺘﻲ ﻋﺒﺮت ﻋﻦ اﻟﻠﻮن اﻷﺑﯿﺾ ﺑﻬﺎ‪ .‬إﻧﻬﺎ ﺑﺒﺴﺎﻃﺔ أرﻗﺎم…‬‫ﻣﻜﺘﻮﺑﺔ ﺑﺎﻟﻨﻈﺎم اﻟﺴﺪاس ﻋﺸﺮي( ﻧﻈﺎم ﻋﺪدي أﺳﺎﺳﻪ اﻟﺮﻗﻢ ‪ ١٦‬وﯾﻌﺒﺮ ﻋﻨﻪ ﺑﺎﺳﺘﺨﺪام اﻷرﻗﺎم اﻟﻌﺎدﯾﺔ ﻣﻦ ‪ ٠‬إﻟﻰ ‪٩‬‬ ‫واﻟﺮﻣﻮز ‪ A,B,C,D,E,F ).‬ﻓﺎﻟﺮﻗﻢ ‪ ٢٥٥‬ﺑﺎﻟﻨﻈﺎم اﻟﻌﺸﺮي اﻟﻌﺎدي ﯾﻜﺎﻓﺌﻪ اﻟﺮﻗﻢ ‪ FF‬ﺑﺎﻟﻨﻈﺎم اﻟﺴﺪاس ﻋﺸﺮي‪.‬‬ ‫إذن ﻓﺎﻟﺮﻗﻢ اﻟﺴﺪاس ﻋﺸﺮي ‪ FF‬ﻋﻠﻰ اﻟﯿﺴﺎر ﯾﻤﺜﻞ اﻟﺪرﺟﺔ ‪ ٢٥٥‬ﻟﻠﻮن اﻷﺣﻤﺮ ‪.‬واﻟﺮﻗﻢ ‪ FF‬ﻓﻲ اﻟﻮﺳﻂ ﯾﻤﺜﻞ‬ ‫اﻟﺪرﺟﺔ ‪ ٢٥٥‬ﻣﻦ اﻟﻠﻮن اﻷﺧﻀﺮ‪ .‬واﻟﺮﻗﻢ ‪ FF‬ﻋﻠﻰ اﻟﯿﻤﯿﻦ ﯾﻤﺜﻞ اﻟﺪرﺟﺔ ‪ ٢٥٥‬ﻣﻦ اﻟﻠﻮن اﻷزرق ‪.‬‬ ‫وﻋﻠﻰ ﻫﺬا اﻟﻤﻨﻮال ﯾﻌﺒﺮ ﻋﻦ اﻟﻠﻮن اﻷزرق اﻟﻔﺎﺗﺢ ﺑﺎﻟﺮﻗﻢ اﻟﺴﺪاس ﻋﺸﺮي ‪: CC6699‬أﻣﺎ اﻟﻠﻮن اﻷﺳﻮد ﻓﺮﻗﻤﻪ‬ ‫ﻫﻮ‪000000.‬‬ ‫و اﻟﺠﺪول اﻟﺘﺎﻟﻲ ﯾﺒﯿﻦ ‪ ٢١٦‬ﻟﻮن ﻣﻤﺘﺰﺟﯿﻦ وأﻛﻮادﻫﻢ أﻣﺎ إذا ﻛﻨﺖ ﺗﺮﯾﺪ أﻛﺜﺮ ﻣﻦ ذﻟﻚ أﺿﻐﻂ ﻫﻨﺎ‬ ‫ﺑﯿﺎن ﺑﺄﻟﻮان اﻟﺨﻠﻔﯿﺎت‬ ‫‪#00FF00 #00CC00 #009900 #006600 #003300 #000000‬‬ ‫‪#00FF33 #00CC33 #009933 #006633 #003333 #000033‬‬ ‫‪#00FF66 #00CC66 #009966 #006666 #003366 #000066‬‬ ‫‪#00FF99 #00CC99 #009999 #006699 #003399 #000099‬‬ ‫‪#00FFCC #00CCCC #0099CC #0066CC #0033CC #0000CC‬‬

#00FFFF #00CCFF #0099FF #0066FF #0033FF #0000FF #33FF00 #33CC00 #339900 #336600 #333300 #330000 #33FF33 #33CC33 #339933 #336633 #333333 #330033 #33FF66 #33CC66 #339966 #336666 #333366 #330066 #33FF99 #33CC99 #339999 #336699 #333399 #330099#33FFCC #33CCCC #3399CC #3366CC #3333CC #3300CC#33FFFF #33CCFF #3399FF #3366FF #3333FF #3300FF #66FF00 #66CC00 #669900 #666600 #663300 #660000#66FFCC #66CC33 #669933 #666633 #663333 #660033 #66FF66 #66CC66 #669966 #666666 #663366 #660066 #66FF99 #66CC99 #669999 #666699 #663399 #660099#66FFCC #66CCCC #6699CC #6666CC #6633CC #6600CC#66FFFF #66CCFF #6699FF #6666FF #6633FF #6600FF #99FF00 #99CC00 #999900 #996699 #993300 #990000 #99FF33 #99CC33 #999933 #996633 #993333 #990033 #99FF66 #99CC66 #999966 #996666 #993366 #990066 #99FF99 #99CC99 #999999 #996699 #993399 #990099#99FFCC #99CCCC #9999CC #9966CC #9933CC #9900CC#99FFFF #99CCFF #9999FF #9966FF #9933FF #9900FF#CCFF00 #CCCC00 #CC9900 #CC6600 #CC3300 #CC0000#CCFF33 #CCCC33 #CC9933 #CC6633 #CC3333 #CC0033#CCFF66 #CCCC66 #CC9966 #CC6666 #CC3366 #CC0066#CCFF99 #CCCC99 #CC9999 #CC6699 #CC3399 #CC0099#CCFFCC #CCCCCC #CC99CC #CC66CC #CC33CC #CC00CC#CCFFFF #CCCCFF #CC99FF #CC66FF #CC33FF #CC00FF#FFFF00 #FFCC00 #FF9900 #FF6600 #FF3300 #FF0000#FFFF33 #FFCC33 #FF9933 #FF6633 #FF3333 #FF0033#FFFF66 #FFCC66 #FF9966 #FF6666 #FF3366 #FF0066#FFFF99 #FFCC99 #FF9999 #FF6699 #FF3399 #FF0099#FFFFCC #FFCCCC #FF99CC #FF66CC #FF33CC #FF00CC#FFFFFF #FFCCFF #FF99FF #FF66FF #FF33FF #FF00FF (‫ﺑﯿﺎن ﺑﺄﻟﻮان اﻟﻨﺺ ) اﻟﺨﻂ‬ | ‫| أﺧﻀﺮ < أزرق‬#0000FF #0000CC #000099 #000066 #000033 #000000 _#0033FF #0033CC #003399 #003366 #003333 #003300#0066FF #0066CC #006699 #006666 #006633 #006600 ‫أ‬#0099FF #0099CC #009999 #009966 #009933 #009900 ‫خ‬#00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00 ‫ض‬#00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00 ‫ر‬#3300FF #3300CC #330099 #330066 #330033 #330000

#3333FF #3333CC #333399 #333366 #333333 #333300 > #3366FF #3366CC #336699 #336666 #336633 #336600 #3399FF #3399CC #339999 #339966 #339933 #339900 ‫أ‬#33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00 ‫ح‬#33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00 ‫م‬ #6600FF #6600CC #660099 #660066 #660033 #660000 ‫ر‬ #6633FF #6633CC #663399 #663366 #663333 #663300 _ #6666FF #6666CC #666699 #666666 #666633 #666600 #6699FF #6699CC #669999 #669966 #669933 #669900#66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00#66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00 #9900FF #9900CC #990099 #990066 #990033 #990000 #9933FF #9933CC #993399 #993366 #993333 #993300 #9966FF #9966CC #996699 #996666 #996633 #996600 #9999FF #9999CC #999999 #999966 #999933 #999900#99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00#CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000#CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300#CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600#CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900#CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00#FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000#FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300#FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600#FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900#FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00 «««‫اﻟﺪرس اﻟﺘﺎﻟﻲ‬‫اﻟﺠﺪاول‬‫ ﻟﻜﻦ ﺗﻬﻞ ﻋﻠﯿﻨﺎ اﻟﺠﺪاول‬، ‫اﻟﺠﺪاول ﻣﻤﻤﻢ؟؟؟ ﻣﻔﯿﺪة ﺟﺪا ﻟﻌﻤﻞ اﻹﻃﺎرات اﻟﺨﺎرﺟﯿﻪ و ﺧﺼﻮﺻﺎ ﻣﻊ اﻹﺳﺘﻌﻤﺎل اﻟﺠﯿﺪ‬ ‫ ﻟﻜﻦ ﻋﻨﺪﻣﺎ ﺗﺘﻤﻜﻦ ﻣﻨﻬﺎ وﺗﺘﻌﻠﻤﻬﺎ ﺟﯿﺪا ﻓﻬﺬا ﺳﯿﻜﻮن ﺟﺰء ﺛﻤﯿﻦ‬، ‫ﺑﺎﻷﻛﻮاد واﻟﻮﺳﻮم و ﻫﺬا ﻣﺎ ﯾﺨﯿﻒ ﻓﻲ اﻟﻤﻮﺿﻮع‬ HTML‫وﯾﻜﺴﺒﻚ ﺧﺒﺮة ﻛﺒﯿﺮة ﻓﻲ ال‬ ‫أﺳﺎﺳﯿﺎت اﻟﺠﺪاول‬ .‫ ﻓﻲ ﻧﻔﺲ اﻟﻮﻗﺖ ﻟﻦ ﺗﺘﻌﻠﻢ إﻻ إذا ﺣﺎوﻟﺖ‬، ‫أول ﺟﺪول ﻟﻚ داﺋﻤﺎ ﯾﻜﻮن اﻟﺸﺨﺺ ﺧﺎﺋﻒ وﻫﺎﺋﺐ أن ﯾﺤﺎول‬ ( ‫اﻟﺠﺪاول اﻟﻤﺘﻘﺪﻣﻪ ) ﻟﻠﻤﺤﺘﺮﻓﯿﻦ‬

‫أﻧﺖ ﺗﻌﺘﻘﺪ أﻧﻪ ﻻ ﯾﻮﺟﺪ ﺷﻲء أﻛﺜﺮ ﺗﻌﻘﯿﺪا ؟؟ أﻗﺮأ ﻫﺬا‪.‬‬ ‫اﻟﺠﺪاول اﻟﻤﺘﺪاﺧﻠﻪ واﻟﻤﺴﺘﺪﯾﺮة ) ﻟﻠﻤﺤﺘﺮﻓﯿﻦ (‬‫أﻛﺜﺮ ﺗﻌﻘﯿﺪا !!!! ﻟﺠﻌﻞ ﺟﺪاوﻟﻚ أﻛﺜﺮ ﺗﻌﻘﯿﺪا ﺿﻊ واﺣﺪا داﺧﻞ اﻵﺧﺮ و ﻗﻢ ﺑﺈﺳﺘﻌﻤﺎل ﺑﻌﺾ اﻟﺼﻮر اﻟﺼﻐﯿﺮة ﻟﻜﻲ‬ ‫ﺗﻌﻄﻲ ﻟﺠﺪوﻟﻚ زواﯾﺎ ﻣﺴﺘﺪﯾﺮة‬ ‫أﺳﺎﺳﯿﺎت اﻟﺠﺪاول‬ ‫ﺗﻌﺪ اﻟﺠﺪاول ﻣﻦ أﻗﻮى اﻷدوات اﻟﺘﻲ ﺗﺘﻀﻤﻨﻬﺎ ﻟﻐﺔ ‪ HTML‬وأﻛﺎد أﺟﺰم ﺑﺄﻧﻪ ﻻ ﯾﻮﺟﺪ ﻣﻮﻗﻊ ﻓﻲ اﻹﻧﺘﺮﻧﺖ إﻻ‬ ‫وﯾﺴﺘﺨﺪﻣﻬﺎ ﺑﺼﻮرة أو ﺑﺄﺧﺮى ﻣﻊ اﻟﻌﻠﻢ أن ﻣﻮﻗﻌﻨﺎ ﻫﺬا ﻣﺼﻤﻢ ﻛﺎﻣﻠﺘﺎ ﺑﺎﻟﺠﺪاول ‪.‬واﻟﺤﻘﯿﻘﺔ أن وﺿﻊ اﻟﺠﺪاول ﻓﻲ‬‫ﺻﻔﺤﺎت اﻟﻮﯾﺐ ﻻ ﯾﻘﺘﺼﺮ ﻋﻠﻰ ﺗﻠﻚ اﻟﻘﻮاﺋﻢ ﻣﻦ اﻟﺒﯿﺎﻧﺎت اﻟﺘﻲ ﻧﺤﺘﺎج ﻟﺘﺮﺗﯿﺒﻬﺎ ﻓﻲ ﺻﻔﻮف وأﻋﻤﺪة‪ ،‬ﺑﻞ ﯾﺘﻌﺪى ذﻟﻚ‬ ‫إﻟﻰ اﺳﺘﺨﺪاﻣﻬﺎ ﻓﻲ ﺗﺼﻤﯿﻢ اﻟﺼﻔﺤﺎت ﻧﻔﺴﻬﺎ وﺗﻨﻈﯿﻤﻬﺎ‪ ،‬واﻟﺘﺤﻜﻢ ﺑﻤﻈﻬﺮﻫﺎ ﺑﺼﻮرة ﻗﻮﯾﺔ وﻓﻌﺎﻟﺔ ﻻ ﯾﻤﻜﻦ أداؤﻫﺎ‬ ‫ﻣﻬﻤﺎ اﺳﺘﺨﺪﻣﻨﺎ ﻣﻦ وﺳﻮم ﺧﺎﺻﺔ ﺑﺘﻨﺴﯿﻖ اﻟﺼﻔﺤﺎت‪.‬‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬‫] وﺳﻢ اﻟﺠﺪول | ﺧﺼﺎﺋﺺ اﻟﺠﺪول [‬ ‫وﺳﻢ اﻟﺠﺪول‬‫إن اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﺠﺪاول وإدراﺟﻬﺎ ﻓﻲ ﺻﻔﺤﺎت اﻟﻮﯾﺐ ﺳﻬﻞ ﺟﺪًا ﻣﺜﻠﻪ ﻣﺜﻞ أي أداة ﻣﻦ أدوات ‪ HTML‬ﻟﻜﻨﻪ ﻗﺪ‬‫ﯾﺒﺪو ﻟﻚ ﻣﺮﺑﻜﺎً ﺑﻌﺾ اﻟﺸﻲء وﺧﺎﺻﺔ ﻓﻲ اﻟﺒﺪاﯾﺔ‪ ،‬وذﻟﻚ ﻟﺘﻌﺪد اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﺗﺴﺘﻌﻤﻞ ﻣﻌﻬﺎ وﺗﻌﺪد اﻷوﺟﻪ اﻟﺘﻲ‬‫ﻧﺴﺘﻄﯿﻊ اﻟﺘﺼﺮف ﺑﻬﺎ‪ .‬ﻟﻜﻦ ﻻ ﺗﻘﻠﻖ ﻓﻜﻞ ﺷﻲء ﯾﺒﺪو ﺻﻌﺒًﺎ ﻓﻲ ﺑﺪاﯾﺘﻪ وﻟﻜﻦ ﺳﺮﻋﺎن ﻣﺎ ﯾﺼﺒﺢ ﺳﻬﻼً‪.‬‬‫>\"‪<TABLE BORDER=\"1‬‬‫>‪</TD></TR‬ﺧﻠﯿﻪ ‪ 1</TD><TD>٢‬ﺧﻠﯿﻪ>‪<TR><TD‬‬‫>‪</TD></TR‬ﺧﻠﯿﻪ ‪ 3</TD><TD>٤‬ﺧﻠﯿﻪ>‪<TR><TD‬‬‫>‪</TABLE‬‬ ‫و ﻫﺬا اﻟﻮﺳﻢ اﻟﺴﺎﺑﻖ ﯾﻨﺸﺎء اﻟﺠﺪول اﻟﺘﺎﻟﻲ‬ ‫ﺧﻠﯿﻪ ‪ ١‬ﺧﻠﯿﻪ ‪٢‬‬ ‫ﺧﻠﯿﻪ ‪ ٣‬ﺧﻠﯿﻪ ‪٤‬‬ ‫و اﻵن إﺳﻤﺢ ﻟﻲ أن أوﺿﺤﻠﻚ اﻟﻮﺳﻢ اﻟﺴﺎﺑﻖ‬‫وﺳﻮم ﺗﻌﺮﯾﻒ اﻟﺠﺪول‬ ‫>‪</TABLE>...<TABLE‬‬‫‪ Table Row‬وﺳﻮم ﺗﻌﺮﯾﻒ اﻟﺼﻒ ﻓﻲ‬ ‫>‪</TR>...<TR‬‬ ‫اﻟﺠﺪول‬‫‪ Table Data‬وﺳﻮم ﺗﻌﺮﯾﻒ اﻟﺨﻼﯾﺎ ﻓﻲ‬ ‫>‪</TD>.... <TD‬‬ ‫اﻟﺼﻒ وﺗﻌﺮﯾﻒ ﻣﺤﺘﻮﯾﺎت ﻛﻞ ﺧﻠﯿﺔ‬

‫واﻵن ﻟﻨﺘﻜﻠﻢ ﺑﺼﻮرة أﻛﺜﺮ دﻗﺔ وﺗﻔﺼﯿﻼً‪:‬‬‫ﻫﺬه ﻫﻲ اﻟﻮﺳﻮم اﻟﺘﻲ ﻧﺒﺪأ ﺑﻬﺎ ﻹدراج ﺟﺪول ﻣﻜﻮن ﻣﻦ ﺧﻠﯿﺔ واﺣﺪة أو ﻣﻦ ﻣﻠﯿﻮن ﺧﻠﯿﺔ… اﻷﻣﺮ ﺳﯿﺎن‬‫>‪<TABLE> ... </TABLE‬‬ ‫واﻵن ﺑﻌﺪ إدراج ﻫﺬﯾﻦ اﻟﻮﺳﻤﯿﻦ‪ ،‬ﻫﻨﺎك ﺳﺆاﻟﯿﻦ ﯾﻨﺒﻐﻲ اﻹﺟﺎﺑﺔ ﻋﻠﯿﻬﻤﺎ ‪.‬اﻷول‪ :‬ﻛﻢ ﻋﺪد اﻟﺼﻔﻮف اﻟﺘﻲ ﻧﺮﯾﺪﻫﺎ ﻓﻲ‬ ‫اﻟﺠﺪول؟ ﺛﻼﺛﺔ‪ ،‬أرﺑﻌﺔ‪ ،‬ﻣﺎﺋﺔ؟ ﻻ ﺑﺄس‪ ،‬ﻗﻢ ﺑﺈﺿﺎﻓﺔ اﻟﻮﺳﻮم‬‫>‪<TR> ... </TR‬‬ ‫ﺑﻨﻔﺲ ﻋﺪد اﻟﺼﻔﻮف اﻟﺘﻲ ﺗﺮﯾﺪﻫﺎ‪ .‬وﻟﻨﻔﺘﺮض ﻫﻨﺎ أﻧﻬﺎ ﺛﻼﺛﺔ ‪.‬‬‫>‪<TABLE‬‬‫>‪<TR‬‬‫>‪</TR‬‬‫>‪<TR‬‬‫>‪</TR‬‬‫>‪<TR‬‬‫>‪</TR‬‬‫>‪</TABLE‬‬ ‫واﻟﺴﺆال اﻟﺜﺎﻧﻲ ﻫﻮ‪ ،‬ﻛﻢ ﻋﺪد اﻟﺨﻼﯾﺎ )أو اﻷﻋﻤﺪة( اﻟﺘﻲ ﻧﺮﯾﺪﻫﺎ ﻓﻲ ﻛﻞ ﺻﻒ؟‬ ‫وﻫﻨﺎ ﻧﻀﯿﻒ اﻟﻮﺳﻮم‬‫>‪<TD> ... </TD‬‬ ‫ﺑﻨﻔﺲ ﻋﺪد اﻟﺨﻼﯾﺎ اﻟﻤﻄﻠﻮب‪ .‬وﻣﻦ اﻟﺒﺪﯾﻬﻲ أن ﻧﻜﺘﺒﻬﺎ ﺑﯿﻦ اﻟﻮﺳﻮم >‪ <TR> ... </TR‬ﻃﺎﻟﻤﺎ أن اﻟﺨﻼﯾﺎ ﻫﻲ ﺟﺰء‬ ‫ﻣﻦ اﻟﺼﻔﻮف‪ .‬وﻫﻨﺎ ﺳﺄﻓﺘﺮض أﻧﻨﺎ ﻧﺮﯾﺪ ﺧﻠﯿﺘﯿﻦ ﻓﻲ ﻛﻞ ﺻﻒ‪ ،‬وﺑﺬﻟﻚ ﯾﺠﺐ ﺗﻜﺮار ﻛﺘﺎﺑﺘﻬﺎ ﻣﺮﺗﯿﻦ ﻟﻜﻞ ﺻﻒ‪.‬‬ ‫وأذﻛﺮك أن اﻟﻨﺺ اﻟﺬي ﻧﺮﯾﺪ إدراﺟﻪ ﻓﻲ اﻟﺨﻠﯿﺔ ﯾﻜﺘﺐ ﺿﻤﻦ ﻫﺬﯾﻦ اﻟﻮﺳﻤﯿﻦ ‪.‬‬‫>‪<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‬‬ ‫ﻫﻞ اﺗﻀﺤﺖ ﻟﻚ اﻟﺼﻮرة اﻵن‪ .‬أﻧﻈﺮ إﻟﻰ ﻧﺘﯿﺠﺔ اﻟﻌﻤﻞ اﻟﺘﻲ ﺣﺼﻠﻨﺎ ﻋﻠﯿﻬﺎ ‪.‬‬ ‫‪Data Data‬‬ ‫‪Data Data‬‬ ‫‪Data Data‬‬ ‫ﻫﻨﺎك ﺷﻲء ﻣﺎ ﯾﻨﻘﺺ‪ .‬ﺑﺎﻟﻄﺒﻊ ‪ ...‬اﻟﺤﺪود‪ .‬اﻧﺘﻈﺮ ﻗﻠﯿ ًﻼ وﺳﺘﻌﺮف اﻟﺨﺎﺻﯿﺔ اﻟﺘﻲ ﺗﻘﻮم ﺑﺈﺿﺎﻓﺔ اﻟﺤﺪود ﻟﻠﺠﺪول‬ ‫وﻏﯿﺮﻫﺎ ﻣﻦ اﻟﺨﺼﺎﺋﺺ اﻷﺧﺮى‪ .‬ﻷﻧﻨﻲ ﻗﺒﻞ أن أﺳﺘﻤﺮ أود أن أﻟﻔﺖ ﻧﻈﺮك ﻟﻤﺴﺄﻟﺔ ﻣﻌﯿﻨﺔ ﻓﻲ اﻟﺠﺪاول‪ .‬وﻫﻲ أن‬ ‫ﻃﺮﯾﻘﺔ اﻟﺘﻌﺎﻣﻞ ﻣﻌﻬﺎ ﺗﺘﻢ ﻋﻠﻰ ﺛﻼﺛﺔ ﻣﺴﺘﻮﯾﺎت‪:‬‬ ‫‪ o‬ﻣﺴﺘﻮى اﻟﺠﺪول ﻛﻜﻞ‬ ‫‪ o‬ﻣﺴﺘﻮى اﻟﺼﻔﻮف ﻛﻜﻞ أو ﻛﻞ واﺣﺪ ﻋﻠﻰ ﺣﺪه‬ ‫‪ o‬ﻣﺴﺘﻮى اﻟﺨﻼﯾﺎ ﻛﻜﻞ أو ﻛﻞ واﺣﺪة ﻋﻠﻰ ﺣﺪه ‪.‬‬ ‫وﻟﻜﻞ ﻣﻦ ﻫﺬه اﻟﻤﺴﺘﻮﯾﺎت ﺧﺼﺎﺋﺼﻪ اﻟﺘﻲ ﯾﻨﻔﺮد ﺑﻬﺎ ﻛﻤﺎ أن ﻫﻨﺎك ﺧﺼﺎﺋﺺ ﻣﺸﺘﺮﻛﺔ ﺗﺴﺘﺨﺪم ﻣﻊ ﻛﻞ اﻟﻮﺳﻮم ‪.‬‬ ‫وﻧﺒﺪأ اﻵن ﺑﻤﻨﺎﻗﺸﺔ ﻫﺬه اﻟﺨﺼﺎﺋﺺ‬ ‫ﺧﺼﺎﺋﺺ اﻟﺠﺪول‬ ‫‪BORDER‬ﺗﻘﻮم ﻫﺬه اﻟﺨﺎﺻﯿﺔ ﺑﺈﺿﺎﻓﺔ ﺣﺪود ﻟﻠﺠﺪول وﺗﺤﺪﯾﺪ ﺳﻤﺎﻛﺘﻬﺎ‪ ،‬واﻟﻘﯿﻤﺔ اﻹﻓﺘﺮاﺿﯿﺔ ﻟﻬﺎ ﻫﻲ ﺻﻔﺮ أي‬ ‫ﻻ ﺣﺪود‬‫>\"‪<TABLE BORDER=\"5‬‬‫>\"‪<TABLE BORDER=\"0‬‬ ‫ﺳﻤﻚ ﺣﺪود ﻫﺬا‬ ‫اﻟﺠﺪول ﻫﻲ ‪٥‬‬‫‪WIDTH‬ﻧﺴﺘﺨﺪم ﻫﺬه اﻟﺨﺎﺻﯿﺔ ﻟﺘﺤﺪﯾﺪ ﻋﺮض اﻟﺠﺪول ﻛﻜﻞ‪ .‬وﻫﻨﺎك أﺳﻠﻮﺑﯿﻦ ﻟﺘﺤﺪﯾﺪ اﻟﻌﺮض‪ :‬اﻟﻤﻄﻠﻖ أي ﺑﻜﺘﺎﺑﺔ‬ ‫اﻟﺮﻗﻢ اﻟﺬي ﯾﻤﺜﻞ اﻟﻌﺮض ﺑﺼﻮرة ﻣﺒﺎﺷﺮة‪ .‬واﻟﻨﺴﺒﻲ أي ﻛﺘﺎﺑﺔ رﻗﻢ ﻧﺴﺒﻲ ﻣﺌﻮي ﯾﺤﺪد ﻋﺮض اﻟﺠﺪول ﺣﺴﺐ‬ ‫ﻋﺮض ﻧﺎﻓﺬة اﻟﻤﺘﺼﻔﺢ‪) .‬أي أن ﻋﺮض اﻟﺠﺪول ﺳﯿﺨﺘﻠﻒ ﺑﺎﺧﺘﻼف ﻋﺮض ﻧﺎﻓﺬة اﻟﻤﺘﺼﻔﺢ ‪).‬‬‫>\"‪<TABLE WIDTH=\"600‬‬‫>\"‪<TABLE WIDTH=\"80%‬‬ ‫وﻫﺬا اﻟﺠﺪول ذو ﻋﺮض ‪% ٨٠‬‬

‫‪HEIGHT‬ﻟﺘﺤﺪﯾﺪ ارﺗﻔﺎع اﻟﺠﺪول‪ ،‬وﯾﻜﻮن ﺗﺤﺪﯾﺪ ﻫﺬا اﻹرﺗﻔﺎع ﻣﻦ ﺧﻼل ﻗﯿﻤﺔ ﻣﻄﻠﻘﺔ ﺗﺤﺪد اﻹرﺗﻔﺎع ﺑﺎﻟﺒﯿﻜﺴﻞ‪.‬‬ ‫أو ﻗﯿﻤﺔ ﻧﺴﺒﯿﺔ ﺗﺤﺪد ارﺗﻔﺎع اﻟﺠﺪول ﺑﺎﻟﻨﺴﺒﺔ ﻹرﺗﻔﺎع ﺻﻔﺤﺔ اﻟﻤﺘﺼﻔﺢ ﻣﺜﻠﻬﺎ ﻣﺜﻞ اﻟﻌﺮض ﺗﻤﺎﻣﺎ‬‫>\"‪<TABLE HEIGHT=\"500‬‬‫>\"‪<TABLE HEIGHT=\"100%‬‬ ‫‪CELLSPACING‬ﻟﺘﺤﺪﯾﺪ اﻟﻤﺴﺎﻓﺔ ﺑﯿﻦ ﻛﻞ ﺧﻠﯿﺔ ﻣﻦ ﺧﻼﯾﺎ اﻟﺠﺪول‬‫>\"‪<TABLE CELLSPACING=\"10‬‬ ‫ﺑﻌﺪ اﻟﻜﺘﺎﺑﻪ‬ ‫ﺗﻼﺣﻆ‬ ‫اﻟﺤﺪود ﺑﻤﻘﺪار‪10‬‬ ‫ﻋﻦ‬ ‫‪CELLPADDING‬ﻟﺘﺤﺪﯾﺪ اﻟﻤﺴﺎﻓﺔ اﻟﻔﺎﺻﻠﺔ ﺑﯿﻦ اﻟﺤﺪود وﺑﺪاﯾﺔ اﻟﻨﺺ ﻓﻲ ﻛﻞ ﺧﻠﯿﺔ‪ .‬أو ﻟﻨﻘﻞ‪ :‬ﺗﺤﺪﯾﺪ ﺣﺠﻢ‬ ‫اﻟﻬﻮاﻣﺶ ﻟﺨﻼﯾﺎ اﻟﺠﺪول ‪.‬‬‫>\"‪<TABLE CELLPADDING=\"10‬‬ ‫ﺗﺒﺎﻋﺪ‬ ‫ﺗﻼﺣﻆ‬ ‫ﺑﻤﻘﺪار ‪١٠‬‬ ‫اﻟﺨﻼﯾﺎ‬ ‫‪ALIGN‬ﻟﺘﺤﺪﯾﺪ ﻣﺤﺎذاة اﻟﺠﺪول أﻓﻘﯿًﺎ ﻋﻠﻰ اﻟﺼﻔﺤﺔ ﯾﻤﯿﻨﺎً أو ﯾﺴﺎراً‪ .‬وﻫﻮ ﯾﺄﺧﺬ اﻟﻘﯿﻢ ‪right, left‬‬‫>\"‪<TABLE ALIGN=\"Left‬‬‫>\"‪<TABLE ALIGN=\"Right‬‬‫ﻫﺬا ﻟﻠﯿﺴﺎر‬ ‫و ﻫﺬا ﻟﻠﯿﻤﯿﻦ‬ ‫‪BGCOLOR‬وﯾﺴﺘﺨﺪم ﻟﺘﺤﺪﯾﺪ ﻟﻮن اﻟﺨﻠﻔﯿﺔ ﻟﻠﺠﺪول و ﺗﺴﺘﻄﯿﻊ أﺧﺘﯿﺎر اﻟﻠﻮن أﻣﺎ ﺑﺎﻷﺳﻤﺎء أو ﻋﻦ ﻃﺮﯾﻖ‬ ‫ال ‪HEX‬ﻛﻮد‬‫>\"‪<TABLE BGCOLOR=\"#0099cc‬‬

‫و ﻫﺬا ذو ﺧﻠﻔﯿﻪ زرﻗﺎء‬ ‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬ ‫اﻟﺠﺪاول اﻟﻤﺘﻘﺪﻣﺔ‬‫ﺗﻮﻗﻔﻨﺎ ﻓﻲ «اﻟﻔﺼﻞ اﻟﺴﺎﺑﻖ ﻋﻨﺪ ﻛﯿﻔﯿﻪ إﻧﺸﺎء ﺟﺪول وﺗﻌﺮﻓﻨﺎ ﻋﻠﻲ وﺳﻮم و اﻟﺨﺼﺎﺋﺺ اﻟﺨﺎﺻﻪ ﺑﻪ و ﻓﻲ ﻫﺬا‬ ‫اﻟﻔﺼﻞ ﺳﻨﻘﻮم ﺑﺸﺮح ﺧﺼﺎﺋﺺ اﻟﺨﻼﯾﺎ وﺑﻌﺾ اﻷﺷﯿﺎء اﻟﻤﺘﻘﺪة ﻓﻲ إﺳﺘﺨﺪام اﻟﺠﺪاول‪.‬‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬‫| ‪ | ALIGN | VALIGN | BGCOLOR | WIDTH | HEIGHT | COLSPAN‬ﺧﺼﺎﺋﺺ اﻟﺠﺪول [‬ ‫]‪ROWSPAN | CAPTION‬‬ ‫ﺧﺼﺎﺋﺺ اﻟﺨﻼﯾﺎ‬‫وﻧﺘﻜﻠﻢ اﻵن ﻋﻦ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ وﺳﻮم اﻟﺼﻒ >‪ <TR> ... </TR‬وﻻ ﺑﺄس ﻣﻦ ﺗﺬﻛﯿﺮك أن ﻋﺪد‬ ‫اﻟﺼﻔﻮف ﻓﻲ اﻟﺠﺪول ﯾﺘﺤﺪد ﺑﻌﺪد ﻫﺬه اﻟﻮﺳﻮم‪ .‬أﻣﺎ أﻫﻢ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﺗﻀﺎف ﻟﻬﺬا اﻟﻮﺳﻢ ﻓﻬﻲ ‪:‬‬‫‪ALIGN‬ﻟﺘﺤﺪﯾﺪ ﻣﺤﺎذاة اﻟﻨﺺ أﻓﻘﯿًﺎ داﺧﻞ اﻟﺨﻼﯾﺎ اﻟﺘﻲ ﯾﺘﻜﻮن ﻣﻨﻬﺎ اﻟﺼﻒ‪ ،‬واﻟﻘﯿﻢ اﻟﻤﺤﺘﻤﻠﺔ ﻟﻬﺎ ﻫﻲ ‪Right,‬‬ ‫‪Left, Center‬واﻟﻘﯿﻤﺔ اﻹﻓﺘﺮاﺿﯿﺔ ﻫﻲ ‪ Center‬ﻛﻤﺎ ﺗﺮي‪:-‬‬‫>\"‪<TD ALIGN=\"LEFT‬‬‫>\"‪<TD ALIGN=\"RIGHT‬‬‫‪Left‬‬ ‫‪Center‬‬ ‫‪right‬‬ ‫‪ VALIGN‬ﻟﺘﺤﺪﯾﺪ اﻟﻤﺤﺎذاة اﻟﻌﻤﻮدﯾﺔ ﻟﻠﻨﺺ داﺧﻞ ﺧﻼﯾﺎ اﻟﺼﻒ‪ ،‬وذﻟﻚ إﻣﺎ ﻟﻸﻋﻠﻰ أو ﻟﻸﺳﻔﻞ أو ﻓﻲ اﻟﻤﻨﺘﺼﻒ‬ ‫أو ﻋﻠﻰ اﻣﺘﺪاد اﻟﺨﻂ اﻷﺳﺎﺳﻲ ﻟﻠﺨﻠﯿﺔ‪ .‬وﻗﯿﻤﻬﺎ ﻋﻠﻰ اﻟﺘﻮاﻟﻲ ﻫﻲ‪Top, Bottom, Middle :‬‬‫>\"‪<TR VALIGN=\"MIDDLE‬‬‫>\"‪<TR VALIGN=\"TOP‬‬‫>\"‪<TR VALIGN=\"BOTTOM‬‬ ‫‪top‬‬ ‫‪middle‬‬ ‫‪bottom‬‬

‫‪BGCOLOR‬ﻟﺘﺤﺪﯾﺪ ﻟﻮن اﻟﺨﻠﻔﯿﺔ ﻟﻠﺨﻼﯾﺎ اﻟﺘﻲ ﯾﺘﻜﻮن ﻣﻨﻬﺎ اﻟﺼﻒ‪ .‬وﻫﻨﺎ ﯾﺘﻢ ﺗﺠﺎﻫﻞ ﻟﻮن اﻟﺨﻠﻔﯿﺔ اﻟﻤﺤﺪد ﺿﻤﻦ‬ ‫وﺳﻢ >‪ <TABLE‬وﯾﺘﻢ ﺗﻄﺒﯿﻖ اﻟﻠﻮن اﻟﻤﺤﺪد ﻫﻨﺎ ﻓﻲ ﻫﺬه اﻟﺨﺎﺻﯿﻪ ‪.‬و ﺗﺴﺘﻄﯿﻊ أﯾﻀﺎ أﺧﺘﯿﺎر اﻟﻠﻮن أﻣﺎ ﺑﺎﻷﺳﻤﺎء أو‬ ‫ﻋﻦ ﻃﺮﯾﻖ ال ‪HEX‬ﻛﻮد‬‫>\"‪<TR BGCOLOR=\"#4682B4‬‬‫>\"‪<TR BGCOLOR=\"#0099CC‬‬ ‫ﻫﺬا ﻫﻮ ﻟﻮن ﺧﻠﻔﯿﻪ اﻟﺠﺪول اﻷﺳﺎﺳﻲ‬ ‫ﻛﻤﺎ ﺗﺴﺘﻄﯿﻊ اﯾﻀﺎ ان ﺗﻀﻊ ﺻﻮرة ﻓﻲ اﻟﺨﻠﻔﯿﻪ ﻟﻠﺨﻼﯾﺎ‬‫>\"‪<TR BGCOLOR=\"face.gif‬‬ ‫ﻛﻤﺎ ﯾﻤﻜﻨﻚ أن ﺗﻜﺘﺐ‬ ‫ﻓﻮق اﻟﺼﻮرة‬ ‫‪ WIDTH‬ﺗﺤﺪد ﻋﺮض اﻟﺨﻠﯿﺔ‪ ،‬وذﻟﻚ ﺑﻜﺘﺎﺑﺔ اﻟﻘﯿﻤﺔ اﻟﻤﺒﺎﺷﺮة ﻟﻠﻌﺮض اﻟﻤﻄﻠﻮب ﺑﺎﻟﺒﯿﻜﺴﻞ‪ ،‬أو ﺑﻜﺘﺎﺑﺔ رﻗﻢ ﯾﻤﺜﻞ‬‫اﻟﻨﺴﺒﺔ اﻟﻤﺌﻮﯾﺔ‪ .‬وﯾﻜﻔﻲ ﺗﺤﺪﯾﺪ اﻟﻌﺮض ﻟﻠﺨﻼﯾﺎ ﻓﻲ أﺣﺪ اﻟﺼﻔﻮف ﻟﻜﻲ ﯾﺘﻢ ﺗﻄﺒﯿﻘﻪ ﻋﻠﻰ ﻛﻞ اﻟﺨﻼﯾﺎ ﻓﻲ ﻛﻞ اﻟﺼﻔﻮف‬ ‫‪ HEIGHT‬ﺗﺤﺪد اﻹرﺗﻔﺎع اﻟﻤﻄﻠﻮب ﻟﻠﺨﻠﯿﺔ ﻓﻲ اﻟﺼﻒ‪ ،‬وذﻟﻚ ﺑﺎﻟﻄﺮق اﻟﻤﺒﺎﺷﺮة أو اﻟﻨﺴﺒﯿﺔ‪ .‬وﻗﯿﺎﻣﻚ ﺑﺘﺤﺪﯾﺪ‬ ‫ارﺗﻔﺎع إﺣﺪى اﻟﺨﻼﯾﺎ ﻓﻲ اﻟﺼﻒ ﯾﺆدي إﻟﻰ ﺗﻄﺒﯿﻘﻪ ﻋﻠﻰ ﻛﻞ اﻟﺨﻼﯾﺎ ﻓﯿﻪ‪.‬‬ ‫‪ COLSPAN‬ﯾﻘﻮم ﺑﺪﻣﺞ اﻟﺨﻠﯿﺔ اﻟﺤﺎﻟﯿﺔ ﻣﻊ اﻟﻌﺪد اﻟﻤﻄﻠﻮب ﻣﻦ اﻟﺨﻼﯾﺎ اﻟﺘﻲ ﺗﻠﯿﻬﺎ أﻓﻘﯿًﺎ‬ ‫>\"‪<TD COLSPAN=\"n‬‬ ‫ﺣﯿﺚ ‪ n‬ﻫﻮ ﻋﺪد اﻟﺨﻼﯾﺎ اﻟﺘﻲ ﺳﯿﺘﻢ دﻣﺠﻬﺎ‬‫>‪<tr‬‬‫>‪ </td‬وﺳﻌﺎ ﻫﺎي أﻧﺎ ﻫﻨﺎ أﻛﺜﺮ>\"‪<td colspan=\"3‬‬‫>‪</tr‬‬‫>‪<tr‬‬‫>‪ </td‬اﻟﻠﻌﻨﻪ ﯾﺎ>\"‪<td align=\"center‬‬‫>‪ </td‬ﳓﻦ>\"‪<td align=\"center‬‬‫>‪ !!!</td‬ﻻ>\"‪<td align=\"center‬‬‫>‪</tr‬‬ ‫ﻫﺎي أﻧﺎ ﻫﻨﺎ أﻛﺜﺮ وﺳﻌﺎ‬ ‫ﯾﺎ اﻟﻠﻌﻨﻪ ﻧﺤﻦ ﻻ!!!‬ ‫‪ ROWSPAN‬ﯾﻘﻮم ﺑﺪﻣﺞ اﻟﺨﻠﯿﺔ اﻟﺤﺎﻟﯿﺔ ﻣﻊ اﻟﻌﺪد اﻟﻤﻄﻠﻮب ﻣﻦ اﻟﺨﻼﯾﺎ اﻟﺘﻲ ﺗﻠﯿﻬﺎ ﻋﻤﻮدﯾﺎً )أي أﺳﻔﻠﻬﺎ(‪.‬‬ ‫>\"‪<TD ROWSPAN=\"n‬‬ ‫ﺳﯿﺘﻢ دﻣﺠﻬﺎ ﻫﻮ ﻋﺪد اﻟﺨﻼﯾﺎ اﻟﺘﻲ ‪ n‬وﺑﺎﻟﻄﺒﻊ‬

‫>\"‪<TABLE BORDER=\"1\" ALIGN=\"RIGHT\" WIDTH=\"200‬‬‫>‪<TR‬‬‫>‪</TH‬واو>‪<BR‬ﳑﻤﻢ>\"‪<TH ROWSPAN=\"2‬‬‫>‪</TH‬اﻟﻌﻠﻮي اﳉﺰء>‪<TH‬‬‫>‪</TR‬‬‫>‪</TH‬اﻟﺴﻔﻠﻲ اﳉﺰء>‪<TR><TH‬‬‫>‪</TR‬‬‫>‪</TABLE‬‬‫اﻟﺠﺰء اﻟﻌﻠﻮي‬ ‫ﻣﻤﻤﻤﻤﻢ‪....‬‬‫اﻟﺠﺰء اﻟﺴﻔﻠﻲ‬ ‫واووو‬ ‫‪CAPTION‬‬‫اﻟﻮﺳﻮم اﻷﺧﯿﺮة اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﻲ اﻟﺠﺪاول ﻫﻲ >‪ </CAPTION> ... <CAPTION‬وﻫﻲ ﺗﺨﺘﺺ ﺑﺈﺿﺎﻓﺔ‬‫ﻋﻨﻮان رﺋﯿﺴﻲ ﻟﻠﺠﺪول ﻛﻜﻞ‪ .‬ﻟﺬﻟﻚ ﻓﻬﻲ ﻋﻨﺪﻣﺎ ﺗﻜﺘﺐ ﯾﺘﻢ وﺿﻌﻬﺎ ﻣﺒﺎﺷﺮة ﺑﻌﺪ اﻟﻮﺳﻢ >‪ <TABLE‬وﺑﺼﻮرة‬ ‫ﻣﺴﺘﻘﻠﺔ وﻟﯿﺲ ﺿﻤﻦ وﺳﻮم اﻟﺼﻔﻮف أو اﻟﺨﻼﯾﺎ‪.‬‬‫>‪<TABLE‬‬‫>‪</CAPTION‬ﻫﻨﺎ ﻋﻨﻮان اﳉﺪول >‪<CAPTION‬‬‫>‪</TD‬ﺑﯿﺎﻧﺎت>‪<TD‬‬‫>‪</TD‬اﳉﺪول>‪<TD‬‬‫>‪<tr‬‬‫>‪</TD‬ﺗﻀﻊ>‪<TD‬‬‫>‪ </TD‬ﻫﻨﺎ>‪<TD‬‬‫>‪</tr‬‬‫>‪</table‬‬‫ﻋﻨﻮان اﻟﺠﺪول ﻫﻨﺎ‬‫اﻟﺠﺪول‬ ‫ﺑﯿﺎﻧﺎت‬ ‫ﻫﻨﺎ‬ ‫ﺗﻀﻊ‬ ‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬‫اﻟﺠﺪاول اﻟﻤﺘﺪاﺧﻠﻪ و اﻟﻤﺴﺘﺪﯾﺮة‬‫ﻓﻲ اﻟﺒﺪاﯾﻪ ﻧﺘﻤﻲ ان ﺗﻜﻮن ﻗﺪ ﻓﻬﻤﺖ ﻣﺎ ﺳﺒﻖ ﻣﻦ أﺳﺎﺳﯿﺎت اﻟﺠﺪاول و اﻟﺠﺪاول اﻟﻤﺘﻘﺪﻣﻪ و إذا ﻟﻢ ﺗﻜﻦ ﻧﺮﺟﻮا ان‬ ‫ﺗﻘﻮم ﺑﻤﺮاﺟﻌﺘﻬﻢ ﻣﺮة أﺧﺮي ‪،‬ﻓﻲ اﻟﺒﺪاﯾﻪ ﺳﻨﺘﻜﻠﻢ ﻋﻠﻲ اﻟﺠﺪاول اﻟﻤﺘﺪاﺧﻠﻪ ﺛﻢ ﻛﯿﻔﯿﻪ إﻋﻄﺎء ﻣﻨﻈﺮ ﺟﯿﺪ ﻟﻠﺠﺪاول و‬ ‫زواﯾﺎ ﻣﺴﺘﺪﯾﺮة‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬

‫] ﺟﺪول داﺧﻞ ﺟﺪول | ﺟﺪاول ﻣﺴﺘﺪﯾﺮة [‬ ‫ﺟﺪول داﺧﻞ ﺟﺪول‬‫ﻛﯿﻒ ﯾﻤﻜﻦ ان ﺗﻨﺸﺄ ﺟﺪول ﺑﺪاﺧﻞ ﺟﺪول ؟ إن اﻹﺟﺎﺑﺔ ﻋﻠﻲ ﻫﺬا اﻟﺴﺆال ﻓﻲ ﻏﺎﯾﻪ اﻟﺒﺴﺎﻃﺔ واﻟﺴﻬﻮﻟﻪ ﻓﻘﻂ ﻛﻞ ﻣﺎ‬‫ﻋﻠﯿﻚ إﻻ أن ﺗﺤﺪد اﻟﺠﺪول اﻟﻜﺒﯿﺮ اﻟﺬي ﺳﯿﺤﺘﻮي ﺑﺪاﺧﻠﻪ اﻟﺠﺪول اﻵﺧﺮ ﻛﻤﺎ ﺗﺮي‬ ‫ﻫﻨﺎ ﺗﺮي اﻟﺠﺪول اﻵﺧﺮ‬ ‫ﻫﺬه ﻫﻲ اﻟﺨﻠﯿﻪ اﻷوﻟﻲ ﻓﻲ اﻟﺠﺪول اﻟﻜﺒﯿﺮ‬‫و ﻫﺬا اﻟﺠﺪول ﺑﺪاﺧﻞ اﻟﺠﺪول اﻟﻜﺒﯿﺮ‬ ‫أﻣﺎ اﻟﺨﻠﯿﻪ اﻵﺧﺮة ﻓﻬﻲ اﻟﻤﻮﺟﻮده ﺑﺎﻟﯿﺴﺎر‬ ‫‪.‬‬‫و ﻟﻌﻤﻞ اﻟﺠﺪول داﺧﻞ ﺟﺪول ﯾﺘﻄﻠﺐ ﻣﻨﻚ ان ﺗﻘﻮم ﺑﻜﺘﺎﺑﺔ اﻷوﺳﻢ ﺻﺤﯿﺤﻪ و ﻫﺬا ﻫﻮ اﻟﻜﻮد اﻟﺨﺎص ﺑﻌﻤﻞ ﻣﺜﻞ ﻫﺬا‬ ‫اﻟﺠﺪول ) ﻻﺣﻆ أن ﻛﻮد اﻟﺠﺪول اﻵﺧﺮ ﺑﺪاﺧﻞ اﻟﻮﺳﻢ (‬‫>‪<TABLE‬‬‫>‪<TR‬‬‫ﻫﻲ اﳋﻠﯿﻪ اﻷوﱄ ﰲ اﳉﺪول اﻟﻜﺒﲑ أﻣﺎ اﳋﻠﯿﻪ اﻷﺧﺮي ﻓﻬﻲ ﻫﺬه>‪<TD‬‬‫>‪</TD‬ﺑﺎﻟﯿﺴﺎر اﳌﻮﺟﻮد‬‫>‪<TD‬‬ ‫>‪<TABLE‬‬ ‫>‪</TH></TR‬ﺗﺮي اﳉﺪول اﻵﺧﺮ ﻫﻨﺎ>‪<TR><TH‬‬ ‫>‪</TH></TR‬اﳉﺪول اﻟﻜﺒﲑ و ﻫﺬا اﳉﺪول ﺑﺪاﺧﻞ>‪<TR><TH‬‬ ‫>‪</TABLE‬‬‫>‪</TD‬‬‫>‪</TR‬‬‫>‪</TABLE‬‬ ‫و ﺗﻼﺣﻆ أن اﻟﺠﺪول اﻷول ﺑﺪاء ﺑﺎﻟﻮﺳﻢ >‪ <TABLE‬ﺛﻢ ﺗﻌﺮﯾﻒ اﻟﺨﻼﯾﺎ ﺛﻢ ﺟﺎء وﺳﻢ اﻟﺠﺪول اﻵﺧﺮ أﯾﻀﺎ ﺑﺪاء‬‫ﺑﺎﻟﻮﺳﻢ >‪ <TABLE‬و ﻟﻢ ﻧﻘﻢ ﺑﺈﻧﻬﺎء وﺳﻢ اﻟﺠﺪول اﻷول ﺑﻌﺪ ﺛﻢ ﻗﻤﻨﺎ ﺑﺘﺤﺪﯾﺪ ﺧﻼﯾﺎ اﻟﺠﺪول اﻵﺧﺮ و إﻏﻼق اﻟﻮﺳﻢ‬ ‫و ﺑﻌﺪﻫﺎ ﻗﻤﻨﺎ ﺑﺈﻏﻼق اﻟﺨﻼﯾﺎ ﻟﻠﺠﺪول اﻟﺮﺋﯿﺴﻲ ﺛﻢ ﻗﻤﻨﺎ ﺑﺈﻏﻼﻗﻪ ‪.‬‬ ‫رﺑﻤﺎ ﺗﻜﻮن ﺗﻌﺒﺖ ﻣﻦ اﻟﻌﻤﻞ ﺑﺎﻟﺠﺪاول ﺣﯿﺚ ان ﻛﻞ ﺷﻲء ﻣﺴﺘﻘﯿﻢ ﺣﺘﻰ اﻟﺤﻮاف واﻟﺰواﯾﺎ وﻟﻜﻦ ﻣﺎ رأﯾﻚ أن ﻧﻌﻄﻲ‬ ‫ﻟﻬﺎ ﺷﻜﻞ ﺟﺪﯾﺪ و ﺟﯿﺪ ﻣﺜﻼ ﻣﺎرأﯾﻚ أن ﻧﺠﻌﻞ ﺣﻮاف و زواﯾﺎ اﻟﺠﺪول ﻣﺴﺘﺪﯾﺮة ؟ إﻧﻬﺎ ﻓﻜﺮة راﺋﻌﻪ وﺳﻬﻠﻪ ﻻ ﺗﺤﺘﺎج‬ ‫ﻣﻨﻚ إﻻ ﺑﻌﺾ ﻓﻨﻮن اﻟﺮﺳﻢ اﻟﺒﯿﺎﻧﻲ ﻓﻘﻂ واﻟﺠﺪاول ‪ ،‬اﻵن ﺳﺄﺷﺮح ﻟﻚ ﻣﺎذا أﻗﺼﺪ ﻋﻠﻲ ﻫﺬا اﻟﻤﺜﺎل‬

‫‪oo‬‬ ‫ﻣﺤﺘﻮﯾﺎت اﻟﺨﻠﯿﻪ اﻷﺳﺎﺳﯿﻪ‬ ‫‪oo‬‬ ‫‪oo‬‬ ‫ﻣﺤﺘﻮﯾﺎت اﻟﺨﻠﯿﻪ اﻷﺳﺎﺳﯿﻪ‬ ‫‪oo‬‬ ‫ﻫﺬا ﻫﻮ اﻟﺠﺪول اﻟﺬي ﺳﻨﺠﻌﻞ زواﯾﺎ ﻣﺴﺘﺪﯾﺮة ﻓﻲ اﻟﺒﺪاﯾﻪ ﯾﺠﺐ ان ﺗﻜﻮن اﻟﺰواﯾﻪ ﺧﻼﯾﺎ ﻣﺴﺘﻘﻠﻪ ﺑﺬاﺗﻬﺎ وﻻ ﺷﻲء‬ ‫ﺑﺪاﺧﻠﻬﺎ و ﻟﻘﺪ وﺿﻌﺖ ﻓﻲ ﻛﻞ زاوﯾﻪ ﻣﻦ اﻟﺰواﯾﻪ \"‪ \"o‬ﺣﺘﻰ ﯾﺴﻬﻞ ﻋﻠﯿﻚ اﻷﻣﺮ ‪ ،‬ﻫﻨﺎك أرﺑﻊ زواﯾﺎ أذن ﻧﺤﻦ‬ ‫ﺳﻨﺤﺘﺎج إﻟﻲ أرﺑﻊ ﺻﻮر ﺑﺸﻜﻞ ﻣﺮﺑﻊ ‪ .‬ﯾﻜﻮن ﻣﻮﺟﻮد ﺑﻬﺎ ﻗﻮس وﻟﻜﻦ ﻛﻞ ﻗﻮس ﯾﻜﻮن ﺑﺸﻜﻞ ﻣﺨﺘﻠﻒ ﻻﻧﻬﻢ ﻛﻠﻬﻢ‬ ‫ﯾﻮاﺟﻬﻮان زواﯾﺎ ﻣﺨﺘﻠﻔﺔ ‪.‬‬ ‫و ﯾﻜﻮن اﻟﻜﻮد ﻟﻬﺬا اﻟﺠﺪول ﻛﻤﺎ ﯾﻠﻲ ‪-:‬‬‫>\"‪<TABLE BORDER=\"0\" WIDTH=\"200\" CELLPADDING=\"0\" CELLSPACING=\"0‬‬‫>\"‪<TR BGCOLOR=\"#CC00CC‬‬‫>‪<TH WIDTH=\"15\">o</TH‬‬‫>‪<TH WIDTH=\"170\">&nbsp;</TH‬‬‫>‪<TH WIDTH=\"15\">o</TH‬‬‫>‪</TR‬‬‫>\"‪<TR BGCOLOR=\"#CC00CC‬‬‫>‪<TH WIDTH=\"15\">&nbsp;</TH‬‬‫>\"‪<TH WIDTH=\"170\" BGCOLOR=\"#CC3399‬‬‫‪Main Content cell‬‬‫>‪</TH‬‬‫>‪<TH WIDTH=\"15\">&nbsp;</TH‬‬‫>‪</TR‬‬‫>\"‪<TR BGCOLOR=\"#CC00CC‬‬‫>‪<TH WIDTH=\"15\">o</TH‬‬‫>‪<TH WIDTH=\"170\">&nbsp;</TH‬‬‫>‪<TH WIDTH=\"15\">o</TR‬‬‫>‪</TABLE‬‬‫ﻻ ﺑﺪ وان ﺗﻜﻮن ﻗﺪ ﻗﺮأت وﻓﻬﻤﺖ أﺳﺎﺳﯿﺎت اﻟﺠﺪاول و اﻟﺠﺪاول اﻟﻤﺘﻘﺪﻣﻪ ﻟﻜﻲ ﺗﺴﺘﻄﯿﻊ ان ﺗﻔﻬﻢ اﻟﻜﻮد اﻟﺴﺎﺑﻖ ﻛﻤﺎ‬ ‫ﯾﺠﺐ ان ﺗﺘﺬﻛﺮ ان اﻟﺨﻼﯾﺎ اﻟﻔﺎرﻏﻪ ﯾﺠﺐ ان ﺗﺤﺘﻮي ﻋﻠﻲ &‪nbsp‬؛ ﻟﻜﻲ ﯾﻈﻬﺮوا ‪ ،‬و إذا ﻗﻤﺖ ﺑﺈﺳﺘﺨﺪام اﻟﻜﻮد‬ ‫اﻟﻌﻠﻮي ﻓﺴﺘﻼﺣﻆ ان اﻟﺠﺪول ﻃﻮﯾﻞ ﺟﺪا و ﻟﺬﻟﻚ ﻻﻧﻪ ﻣﻌﺮف ﻋﻠﻲ ﺣﺠﻢ ﺧﻂ ‪ ٣‬ﻟﻠﺨﻠﯿﻪ ﻛﺤﺠﻢ إﻓﺘﺮاﺿﻲ وﻟﻬﺬا ﻛﻞ‬ ‫ﻣﺎ ﻋﻠﯿﻂ ﻓﻌﻠﻪ ﻫﻮ ان ﺗﻀﻊ ﺧﺎﺻﯿﺔ وﺳﻢ اﻟﺨﻂ ﺣﻮﻟﻬﺎ ﻣﺜﻞ ﻫﺬا‬‫>‪<FONT SIZE=\"1\">&nbsp;</FONT‬‬

‫و اﻵن إﻟﻲ ﻣﺤﺮر اﻟﺮﺳﻮﻣﺎت أي ﺑﺮﻧﺎﻣﺞ ﯾﻘﻮم ﺑﻌﻤﻞ ﺻﻮر ذات إﻣﺘﺪاد ‪ gif‬ﯾﺼﻠﺢ ﻟﻬﺬا ‪ ،‬ﻛﻦ ﻣﺘﺄﻛﺪ ﻣﻦ ﺣﺠﻢ‬ ‫اﻟﺼﻮرة اﻟﺘﻲ ﺳﺘﻘﻮم ﺑﺈﻧﺸﺎﺋﻬﺎ ﻓﻠﺬﻟﻚ ﻧﻨﺼﺢ داﺋﻤﺎ ﺑﺄن ﺗﻘﻮم ﺑﻌﻤﻞ اﻟﺠﺪول ﻓﻲ اﻟﺒﺪاﯾﻪ و ﺗﺨﺘﺎر اﻷﻟﻮان اﻟﻤﻨﺎﺳﺒﻪ ﺛﻢ‬ ‫ﺗﻘﻮم ﺑﺈﻧﺸﺎء اﻟﺼﻮر و ﻟﻘﺪ إﺧﺘﺎرت ﺣﺠﻢ ﺧﻼﯾﺎ اﻟﺠﺪول ‪ ١٥ × ١٥‬و ﻟﺬﻟﻚ ﻗﻤﺖ ﺑﻌﻤﻞ ﺻﻮرة ﺑﻨﻔﺲ اﻟﺤﺠﻢ ﻟﻌﻤﻞ‬ ‫أﻗﻮاس ﺻﻐﯿﺮة ﻟﻄﯿﻔﺔ ﻟﻜﻦ ﯾﻤﻜﻨﻚ أن ﺗﺨﺘﺎر اﻧﺖ ﻣﺎ ﺗﺮﯾﺪ ﻣﻦ أﺣﺠﺎم ‪.‬‬ ‫ﻓﻘﻂ ﻗﻢ ﺑﻌﻤﻞ أﻗﻮاس ﻣﺴﺘﺪﯾﺮة ﺑﻨﻔﺲ ﻟﻮن ﺧﻠﻔﯿﻪ اﻟﺠﺪول ) ﻗﻢ ﺑﻌﻤﻞ ﻗﻮس واﺣﺪ ﺛﻢ ﻗﻢ ﺑﺤﻔﻆ اﻟﺼﻮرة ﺛﻢ ﻗﻢ ﺑﻠﻒ‬ ‫اﻟﺼﻮرة ﺳﺘﺤﺼﻞ ﻋﻠﻲ اﻟﺰواﯾﻪ اﻵﺧﺮى ﺛﻢ ﻗﻢ ﺑﺤﻔﻈﻬﺎ ﺛﻢ ﻫﻜﺬا ﺣﺘﻰ ﺗﺤﺼﻞ ﻋﻠﻲ اﻷﻗﻮاس اﻷرﺑﻊ (‬ ‫و اﻵن ﻛﻞ ﻣﺎ ﻋﻠﯿﻚ ﻓﻌﻠﻪ ﻫﻮ أن ﺗﻀﻊ اﻟﺼﻮر ﻓﻲ اﻟﻤﻜﺎن اﻟﺼﺤﯿﻪ ﻓﻲ اﻟﺨﻼﯾﺎ ﻟﻠﺠﺪول و ﯾﺠﺐ ان ﺗﺘﺬﻛﺮ ﻋﺪم‬ ‫وﺟﻮد ﻣﺴﺎﻓﺎت ﺑﯿﻦ اﻟﺨﻼﯾﺎ وﺑﻌﻀﻬﺎ ﺣﺘﻲ ﺗﺤﺼﻞ ﻋﻠﻲ اﻟﺠﺪول ﻣﺘﻨﺎﺳﻖ ‪.‬‬ ‫و ﻋﻨﺪ اﻧﺘﻬﺎء ﻣﻦ ﻛﻞ ﻫﺬا ‪ ،‬ﺳﯿﺼﺒﺢ ﻟﺪﯾﻚ ﺟﺪول ﺑﻬﺬا اﻟﺸﻜﻞ‬ ‫ﻣﺤﺘﻮﯾﺎت اﻟﺨﻠﯿﻪ اﻷﺳﺎﺳﯿﻪ‬ ‫‪http://www.yourhtmlsource.comBig Thanks For‬‬ ‫اﻷﻃﺮ‬‫اﻷﻃﺮ ﺗﻌﻄﯿﻚ أﻣﻜﺎﻧﯿﻪ ﻓﺘﺢ أﻛﺜﺮ ﻣﻦ ﺻﻔﺤﺔ ﻓﻲ ﻧﻔﺲ اﻟﻤﺴﺘﻌﺮض‪ ،‬ﻛﻤﺎ ﯾﻌﻄﯿﻚ أﻣﻜﺎﻧﯿﻪ ﻓﺘﺢ ﺻﻔﺤﺔ ﻓﻲ ﻧﺎﺣﯿﻪ آﺧﺮي‬ ‫ﻣﻦ ﻣﻦ اﻟﻤﺴﺘﻌﺮﺿﺎت ذات اﻟﻘﻀﺒﺎن ‪ ،‬و ﯾﺪﻣﺠﻮن ﺑﻄﺮﯾﻘﻪ ﻣﻌﯿﻨﻪ ﻓﻲ ﻟﻐﻪ ال ‪ HTML‬و ﻋﻠﻲ اﻟﺮﻏﻢ ﻣﻦ اﻟﻌﻮاق‬ ‫اﻟﺘﻲ ﺗﺠﺪﻫﺎ إﻻ أﻧﻬﺎ ﻣﻔﯿﺪه ﺟﺪا ﻓﻲ ﻛﺜﯿﺮ ﻣﻦ اﻟﻤﻮاﻗﻊ‪.‬‬ ‫أﺳﺎﺳﯿﺎت اﻷﻃﺮ‬ ‫ﻫﺬه ﻣﻘﺪﻣﺔ ﻛﺎﻣﻠﺔ ﻓﻲ إﻧﺸﺎء اﻹﻃﺎرات‪.‬‬ ‫اﻷﻃﺮ اﻟﻤﺘﻘﺪﻣﻪ‬ ‫ﺧﻮاص أﻛﺜﺮ و ﺳﺘﺘﻌﻠﻢ ﻛﯿﻒ ﺗﺘﺤﻜﻢ وﺗﺴﯿﻄﺮ ﻓﻲ اﻷﻃﺮ‬ ‫ﺗﺎﺑﻊ اﻷﻃﺮ اﻟﻤﺘﻘﺪﻣﺔ‬

‫ﺳﻨﺘﺎﺑﻊ اﻟﺤﺪﯾﺚ ﻋﻦ اﻟﻮﺳﻮم واﻟﺨﻮاص اﻟﻤﺘﻘﺪﻣﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ اﻷﻃﺮ‬ ‫أﺳﺎﺳﯿﺎت اﻷﻃﺮ‬ ‫ﻓﻲ ﻫﺬا اﻟﺪرس ﺳﻮف ﻧﻘﻮم ﺑﺎﻟﺘﻌﺮف ﻋﻠﻰ اﻹﻃﺎرات ‪ Frames‬وﻃﺮﯾﻘﺔ ﻋﺮض ﺻﻔﺤﺎت اﻟﻮﯾﺐ ﺑﺎﺳﺘﺨﺪاﻣﻬﺎ‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] اﻹﻃﺎرات | ‪[ NOFRAMES | ROWS | COLS | FRAMESET‬‬ ‫اﻹﻃﺎرات‬ ‫ﻓﻬﻞ ﺗﻌﺮف ﻣﺎ ﻫﻲ اﻹﻃﺎرات؟ ﺣﺴﻨﺎ‪ ،‬ﺳﺄوﺿﺤﻬﺎ ﻟﻚ… ﻫﻞ ﺳﺒﻖ ﻟﻚ وأن زرت إﺣﺪى اﻟﺼﻔﺤﺎت ﻟﺘﺸﺎﻫﺪ أﻧﻬﺎ‬ ‫ﻣﻘﺴﻤﺔ إﻟﻰ ﻋﺪة أﻗﺴﺎم ﺑﺤﯿﺚ ﯾﻈﻬﺮ ﻓﻲ ﻛﻞ ﻣﻨﻬﺎ ﺻﻔﺤﺔ ﻣﺴﺘﻘﻠﺔ‪ ،‬وﺗﺒﺪو ﺑﺼﻮرة ﻣﻨﻔﺼﻠﺔ ﻋﻦ اﻷﻗﺴﺎم اﻷﺧﺮى‪.‬‬‫ورﺑﻤﺎ ﺗﻜﻮن ﻗﺪ ﻗﻤﺖ ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ إﺣﺪى اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ اﻟﻤﻮﺟﻮدة ﻓﻲ أﺣﺪ اﻷﻗﺴﺎم ﻟﺘﻈﻬﺮ اﻟﺼﻔﺤﺔ اﻟﻤﺘﻌﻠﻘﺔ ﺑﻬﺎ‬ ‫ﻓﻲ اﻟﻘﺴﻢ اﻵﺧﺮ‪.‬‬‫إذا ﻛﻨﺖ ﻗﺪ ﺷﺎﻫﺪت ﻣﺜﻞ ﻫﺬه اﻟﺼﻔﺤﺎت ﻓﻬﺬا ﯾﻌﻨﻲ أن اﻹﻃﺎرات ﻣﺄﻟﻮﻓﺔ ﻟﺪﯾﻚ وإﻻ ﻗﻢ ﺑﺎﻟﻨﻘﺮ ﻫﻨﺎ ﻟﺘﺸﺎﻫﺪ ﻣﺜﺎ ًﻻ ﻋﻠﻰ‬ ‫ﺻﻔﺤﺔ ذات إﻃﺎرات )وﻻ ﺗﻨﺴﻰ اﻟﻌﻮدة ﻟﻜﻲ ﺗﺘﺎﺑﻊ اﻟﺪرس ﻣﻌﺎ(‪.‬‬ ‫ﻛﻤﺎ ﺷﺎﻫﺪت‪ ،‬ﻓﺈن اﻟﺼﻔﺤﺔ ﻣﻜﻮﻧﺔ ﻣﻦ ﺛﻼﺛﺔ أﻗﺴﺎم‪ :‬ﻋﻠﻮي وأﯾﺴﺮ وأﯾﻤﻦ… واﻟﺤﻘﯿﻘﺔ أن ﻛﻞ ﻗﺴﻢ ﻣﻨﻬﺎ ﻫﻮ ﻋﺒﺎرة‬ ‫ﻋﻦ ﻣﻠﻒ ‪ Html‬ﻛﺎﻣﻞ وﻣﺴﺘﻘﻞ ﺑﺤﺪ ذاﺗﻪ‪ .‬وﻫﻲ ﻣﺠﺮد ﺻﻔﺤﺎت ﻋﺎدﯾﺔ ﻻ ﺗﺨﺘﻠﻒ أﺑﺪاً ﻋﻦ ﺗﻠﻚ اﻟﺘﻲ ﺗﻌﻠﻤﺖ‬ ‫إﻧﺸﺎءﻫﺎ ﻓﻲ اﻟﺪروس اﻟﺴﺎﺑﻘﺔ‪ ،‬وﻻ ﻋﻼﻗﺔ ﻟﻜﻞ ﻣﻨﻬﺎ ﺑﺎﻟﺼﻔﺤﺎت اﻷﺧﺮى ﻣﻦ ﺣﯿﺚ اﻟﺘﺮﻛﯿﺐ واﻟﺘﻌﺮﯾﻒ‪.‬‬ ‫أﻣﺎ ﻛﯿﻒ ﺗﻢ ﺟﻤﻌﻬﺎ ﻣﻌﺎ ﻟﺘﻈﻬﺮ ﺑﺎﻟﺸﻜﻞ اﻟﺬي ﺷﺎﻫﺪﺗﻪ؟ ﻓﻬﻨﺎ ﺑﯿﺖ اﻟﻘﺼﯿﺪ‪ .‬ﻓﺒﺎﻹﺿﺎﻓﺔ إﻟﻰ اﻟﺼﻔﺤﺎت واﻟﻤﻠﻔﺎت‬‫اﻹﻋﺘﯿﺎدﯾﺔ ﯾﻮﺟﺪ داﺋﻤًﺎ ﻣﻠﻒ أﺳﺎﺳﻲ ﯾﺘﻢ إﻧﺸﺎؤه ﺧﺼﯿﺼﺎ ﻟﺘﻌﺮﯾﻒ ﺻﻔﺤﺔ اﻹﻃﺎرات وﺗﺠﻤﯿﻌﻬﺎ وﺗﺤﺪﯾﺪ ﺧﺼﺎﺋﺼﻬﺎ‪.‬‬ ‫أي أن اﻟﻤﻌﺎدﻟﺔ ﺗﺘﻠﺨﺺ ﺑِـ‪:‬‬ ‫ﻫﺎم ﺟﺪاﻣﻜﻮﻧﺎت ﺻﻔﺤﺔ اﻹﻃﺎرات = ﻋﺪد ﻣﻠﻔﺎت اﻟﺼﻔﺤﺔ ﻧﻔﺴﻬﺎ ‪ +‬ﺻﻔﺤﺔ اﻟﻤﻠﻒ اﻷﺳﺎﺳﻲ اﻟﺬي ﯾﺠﻤﻌﻬﺎ‬ ‫أي أﻧﻨﻲ ﻓﻲ اﻟﻤﺜﺎل اﻟﺴﺎﺑﻖ إﺣﺘﺠﺖ ﻓﻌﻠﯿﺎً إﻟﻰ أرﺑﻌﺔ ﻣﻠﻔﺎت ﻟﺘﻜﻮﯾﻦ اﻟﺼﻔﺤﺔ ‪.‬‬ ‫‪FRAMESET‬‬ ‫وﻗﺒﻞ أن ﻧﺒﺪأ… ﻟﻨﻘﻢ ﺑﺎﻟﺘﺤﻀﯿﺮ ﻟﻸﻣﺜﻠﺔ اﻟﺘﻲ ﺳﺘﺮد ﻓﻲ ﻫﺬا اﻟﺪرس ‪.‬ﻟﺬﻟﻚ ﻗﻢ ﺑﺈﻧﺸﺎء ﺛﻼﺛﺔ أو أرﺑﻌﺔ ﻣﻠﻔﺎت ﺑﺴﯿﻄﺔ‬ ‫ﻟﻜﻲ ﺗﺴﺘﺨﺪﻣﻬﺎ ﻓﻲ ﺗﻄﺒﯿﻖ اﻷﻣﺜﻠﺔ أو اﺳﺘﺨﺪم ﻣﻠﻔﺎﺗﻚ اﻟﻘﺪﯾﻤﺔ اﻟﺘﻲ ﻗﻤﺖ ﺑﺎﻟﺘﺪرب ﻋﻠﯿﻬﺎ ﻓﻲ اﻟﺪروس اﻟﺴﺎﺑﻘﺔ‪ .‬أﻧﺎ‬ ‫ﻗﻤﺖ ﺑﺈﻧﺸﺎء ﻣﻠﻔﺎت ﻋﻠﻰ اﻟﻨﻤﻂ اﻟﺘﺎﻟﻲ )وﻫﻲ اﻟﺘﻲ اﺳﺘﺨﺪﻣﺘﻬﺎ ﻓﻲ اﻟﻤﺜﺎل( وأﺳﻤﯿﺘﻬﺎ ‪Contents.htm ,‬‬ ‫‪Banner.htm, MasterFrame.htm‬‬ ‫وﻧﺒﺪأ اﻵن ﺑﺘﻌﺮﯾﻒ اﻟﻤﻠﻒ اﻟﺮﺋﯿﺴﻲ اﻟﺬي ﺳﯿﻀﻢ ﻛﺎﻓﺔ اﻹﻃﺎرات واﻟﻤﻠﻔﺎت‪ .‬وﻫﻮ ﺑﺎﻟﻤﻨﺎﺳﺒﺔ ﻣﻠﻒ ذو ﺣﺎﻟﺔ ﺧﺎﺻﺔ‬ ‫ﺣﯿﺚ ﻧﻘﻮم ﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻮم‬‫>‪<FRAMESET> ... </FRAMESET‬‬ ‫ﺑﺪﻻً ﻣﻦ اﻟﻮﺳﻮم >‪<BODY> ... </BODY‬‬ ‫إذن اﻟﻤﻠﻒ اﻟﺮﺋﯿﺴﻲ ﻟﻺﻃﺎرات ﻻ ﯾﺘﻀﻤﻦ ﺗﻌﺮﯾﻔﺎ ﺑﺎﺳﺘﺨﺪام ‪BODY‬‬

‫>‪<HTML‬‬‫>‪<HEAD‬‬‫>‪<TITLE>Master Frame</TITLE‬‬‫>‪</HEAD‬‬ ‫>‪<FRAMESET‬‬‫>‪</FRAMESET‬‬ ‫>‪</HTML‬‬ ‫ﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﺨﺼﺎﺋﺺ ‪:‬‬ ‫‪COLS‬‬ ‫واﻟﺨﺎﺻﯿﺔ اﻷوﻟﻰ اﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻣﻊ ﻫﺬه اﻟﻮﺳﻮم ﻫﻲ ‪ COLS‬وﻫﻲ ﺗﻌ ّﺮف ﻋﺪد وأﺣﺠﺎم اﻹﻃﺎرات اﻟﻌﻤﻮدﯾﺔ‬ ‫ﻟﻠﺼﻔﺤﺔ‪ .‬وُﺗﺤﺪد اﻷﺣﺠﺎم ﺑﻄﺮﯾﻘﺘﯿﻦ )ﻫﻞ ﻋﺮﻓﺘﻬﻤﺎ؟ )ﻧﻌﻢ… إﻧﻬﻤﺎ اﻟﻄﺮﯾﻘﺔ اﻟﻤﺒﺎﺷﺮة )ﺑﺎﻟﺒﯿﻜﺴﻞ( واﻟﻄﺮﯾﻘﺔ‬ ‫اﻟﻨﺴﺒﯿﺔ‪...‬أو ﻛﻼﻫﻤﺎ ﻣﻌﺎ ‪.‬ﻟﻜﻦ إﻧﺘﺒﻪ! ﻓﻬﺬه اﻟﺸﯿﻔﺮة ﻏﯿﺮ ﻣﻜﺘﻤﻠﺔ وﻛﺘﺎﺑﺘﻬﺎ ﺑﻬﺬا اﻟﺸﻜﻞ ﻓﻘﻂ ﻟﻦ ﯾﺆدي إﻟﻰ أي ﻧﺘﯿﺠﺔ‬ ‫وﻻ إﻟﻰ ﻇﻬﻮر أي إﻃﺎرات ﺣﯿﺚ ﯾﻨﻘﺼﻬﺎ وﺳﻮم أﺧﺮى ﺧﺎﺻﺔ ﺑﻤﺼﺪر اﻟﻤﻠﻔﺎت اﻟﻈﺎﻫﺮة داﺧﻞ اﻹﻃﺎرات‬ ‫واﻵن إﻟﯿﻚ ﻫﺬه اﻷﻣﺜﻠﺔ اﻟﺘﻲ ﺗﻮﺿﺢ ﻣﻔﻬﻮم اﻷﻋﻤﺪة‬‫ﯾﺤﺪد إﻃﺎرﯾﻦ ﻋﻤﻮدﯾﯿﻦ ﺣﺠﻢ ﻛﻞ ﻣﻨﻬﻤﺎ ‪ %٥٠‬ﻣﻦ‬ ‫‪<FRAMESET‬‬ ‫ﺣﺠﻢ اﻟﺸﺎﺷﺔ‬ ‫>\"‪COLS=\"50%,50%‬‬ ‫>‪</FRAMESET‬‬‫‪ <FRAMESET‬ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات أﺣﺠﺎﻣﻬﺎ ‪ %٢٠‬و ‪ %٥٠‬و‬ ‫>\"‪COLS=\"20%,50%,30%‬‬‫‪ %٣٠‬ﻋﻠﻰ اﻟﺘﻮاﻟﻲ ﻣﻦ ﺣﺠﻢ اﻟﺸﺎﺷﺔ‬ ‫>‪</FRAMESET‬‬ ‫ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات ﻋﻤﻮدﯾﺔ اﻷول ﺣﺠﻤﻪ ‪٢٠٠‬‬ ‫‪<FRAMESET‬‬ ‫>\"*‪COLS=\"200,300,‬‬‫ﺑﯿﻜﺴﻞ‪ ،‬واﻟﺜﺎﻧﻲ ‪ ٣٠٠‬ﺑﯿﻜﺴﻞ‪ ،‬أﻣﺎ اﻟﺜﺎﻟﺚ * أي اﻧﻪ‬ ‫>‪</FRAMESET‬‬ ‫ﻏﯿﺮ ﻣﺤﺪد ﺑﺤﺠﻢ ﻣﻌﯿﻦ وﻟﻜﻨﻪ ﺳﯿﻜﻮن ﺑﺎﻟﺤﺠﻢ‬ ‫اﻟﻤﺘﺒﻘﻲ ﻣﻦ اﻟﺸﺎﺷﺔ )ﻃﺎﻟﻤﺎ أﻧﻨﺎ ﻻ ﻧﻌﺮف اﺳﺘﺒﺎﻧﺔ‬ ‫اﻟﺸﺎﺷﺔ اﻟﺘﻲ ﯾﺴﺘﺨﺪﻣﻬﺎ زاﺋﺮ اﻟﻤﻮﻗﻊ(‬‫ﯾﺤﺪد أرﺑﻌﺔ إﻃﺎرات ﺣﺠﻢ اﻷول ﻫﻮ ‪ ٢٠٠‬ﺑﯿﻜﺴﻞ‪،‬‬ ‫‪<FRAMESET‬‬ ‫واﻟﺜﺎﻟﺚ ‪ %١٥‬ﻣﻦ ﺣﺠﻢ اﻟﺸﺎﺷﺔ‪ ،‬واﻟﺮاﺑﻊ ‪%٢٠‬‬ ‫>\"‪COLS=\"200,*,15%,20%‬‬ ‫>‪</FRAMESET‬‬ ‫ﻣﻦ ﺣﺠﻢ اﻟﺸﺎﺷﺔ أﻣﺎ اﻟﺜﺎﻧﻲ ﻓﺴﯿﻜﻮن ﺣﺠﻤﻪ ﺑﻤﺎ‬ ‫ﺗﺒﻘﻰ ﻣﻦ اﻟﺸﺎﺷﺔ‪.‬‬‫ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات اﻷول ﺣﺠﻤﻪ ‪ ١٥٠‬ﺑﯿﻜﺴﻞ‪....‬‬ ‫‪<FRAMESET‬‬ ‫أﻣﺎ اﻟﻤﺴﺎﺣﺔ اﻟﻤﺘﺒﻘﯿﺔ ﻓﺘﻘﺴﻢ ﻋﻠﻰ أﺳﺎس أن اﻹﻃﺎر‬ ‫>\"*‪COLS=\"150,*,2‬‬‫اﻟﺜﺎﻟﺚ ﺣﺠﻤﻪ ﻫﻮ ﺿﻌﻔﻲ )*‪ (٢‬ﺣﺠﻢ اﻹﻃﺎر اﻟﺜﺎﻧﻲ‬ ‫>‪</FRAMESET‬‬ ‫)*(‬ ‫و إﻟﯿﻚ ﻫﺬا اﻟﻤﺜﺎل ﻋﻠﻲ اﻹﻓﺘﺮاض اﻷﺧﯿﺮ‬ ‫‪ROWS‬‬ ‫أﻣﺎ اﻟﺨﺎﺻﯿﺔ اﻟﺜﺎﻧﯿﺔ ﻓﻬﻲ ‪ ROWS‬وأﻋﺘﻘﺪ أﻧﻚ اﺳﺘﻨﺠﺖ ﻃﺒﯿﻌﺔ ﻋﻤﻠﻬﺎ‪ .‬ﻧﻌﻢ ﻫﻲ ﺗﺤﺪد ﻋﺪد وﺣﺠﻢ اﻹﻃﺎرات‬‫اﻷﻓﻘﯿﺔ )اﻟﺼﻔﻮف( داﺧﻞ اﻟﺼﻔﺤﺔ‪ .‬وذﻟﻚ ﺑﻨﻔﺲ اﻷﺳﻠﻮب اﻟﻤﺘﺒﻊ ﻣﻊ اﻷﻋﻤﺪة‪ ،‬أي إﻣﺎ ﺑﺎﺳﺘﺨﺪام اﻟﻄﺮﯾﻘﺔ اﻟﻨﺴﺒﯿﺔ أو‬ ‫اﻟﻤﻄﻠﻘﺔ‪) .‬وأذﻛﺮك ﺛﺎﻧﯿﺔ أن ﻫﺬه اﻷوﺳﻤﻪ ﻏﯿﺮ ﻣﻜﺘﻤﻠﺔ(‬

‫‪<FRAMESET‬‬ ‫ﯾﺤﺪد إﻃﺎرﯾﻦ أﻓﻘﯿﯿﻦ ارﺗﻔﺎع ﻛﻞ ﻣﻨﻬﻤﺎ ‪ %٥٠‬ﻣﻦ‬‫>\"‪ROWS=\"50%,50%‬‬ ‫ارﺗﻔﺎع اﻟﺸﺎﺷﺔ‬‫>‪</FRAMESET‬‬‫‪<FRAMESET‬‬ ‫ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات أﻓﻘﯿﺔ ارﺗﻔﺎﻋﺎﺗﻬﺎ ‪ %٢٠‬و‬‫>\"‪ROWS=\"20%,50%,30%‬‬ ‫‪ %٥٠‬و ‪ %٣٠‬ﻋﻠﻰ اﻟﺘﻮاﻟﻲ ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ‬‫>‪</FRAMESET‬‬‫‪<FRAMESET‬‬ ‫ﯾﺤﺪد ﺛﻼﺛﺔ إﻃﺎرات أﻓﻘﯿﺔ اﻷول ارﺗﻔﺎﻋﻪ ‪٥٠‬‬‫>\"*‪ROWS=\"50,120,‬‬ ‫ﺑﯿﻜﺴﻞ‪ ،‬واﻟﺜﺎﻧﻲ ‪ ١٢٠‬ﺑﯿﻜﺴﻞ‪ ،‬واﻟﺜﺎﻟﺚ ﺳﯿﻜﻮن‬‫>‪</FRAMESET‬‬ ‫ﺑﺎﻹرﺗﻔﺎع اﻟﻤﺘﺒﻘﻲ ﻣﻦ اﻟﺸﺎﺷﺔ‬‫‪<FRAMESET‬‬‫>\"‪ROWS=\"50,*,15%,20%‬‬ ‫ﯾﺤﺪد أرﺑﻌﺔ إﻃﺎرات أﻓﻘﯿﺔ ارﺗﻔﺎع اﻷول ﻫﻮ ‪٥٠‬‬‫>‪</FRAMESET‬‬ ‫ﺑﯿﻜﺴﻞ‪ ،‬واﻟﺜﺎﻟﺚ ‪ %١٥‬ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ‪ ،‬واﻟﺮاﺑﻊ‬ ‫‪ %٢٠‬ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ أﻣﺎ اﻟﺜﺎﻧﻲ ﻓﺴﯿﻜﻮن‬ ‫ارﺗﻔﺎﻋﻪ ﺑﻤﺎ ﺗﺒﻘﻰ ﻣﻦ ارﺗﻔﺎع اﻟﺸﺎﺷﺔ‪.‬‬‫>\"*‪<FRAMESET ROWS=\"*,2‬‬ ‫ﯾﺤﺪد إﻃﺎرﯾﻦ اﻟﺜﺎﻧﻲ ارﺗﻔﺎﻋﻪ ﺿﻌﻔﻲ ارﺗﻔﺎع اﻷول‬‫>‪</FRAMESET‬‬ ‫و إﻟﯿﻚ ﻫﺬا اﻟﻤﺜﺎل ﻋﻠﻲ اﻹﻓﺘﺮاض اﻷﺧﯿﺮ‬ ‫ﻟﻢ ﻧﻨﺘﻪ ﺑﻌﺪ ﻣﻦ ذﻛﺮ ﻛﻞ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺘﻌﻠﻘﺔ ﺑﺎﻟﻮﺳﻮم >‪ <FRAMESET‬ﻓﻼ زال ﻫﻨﺎك اﻟﻜﺜﯿﺮ‪ .‬وﻟﻜﻦ ﻣﻦ‬ ‫اﻟﻀﺮوري أن ﻧﻘﻮم اﻵن ﺑﺎﻹﻧﺘﻘﺎل إﻟﻰ وﺳﻢ آﺧﺮ ﻟﻺﻃﺎرات ﻷﻧﻪ ﻣﺮﺗﺒﻂ إرﺗﺒﺎﻃﺎً وﺛﯿﻘﺎً ﺑﺎﻟﻮﺳﻮم اﻟﺴﺎﺑﻘﺔ‬ ‫وﺧﺼﺎﺋﺼﻬﺎ اﻟﻤﺬﻛﻮرة أﻋﻼه‪ ،‬وﻫﻲ >‪ <FRAME‬ﻓﻤﺎ ﻫﻮ ﻋﻤﻞ ﻫﺬا اﻟﻮﺳﻢ؟‬‫ﺣﺴﻨﺎ‪ ،‬ﻛﻞ ﻣﺎ ﻗﻤﻨﺎ ﺑﻪ ﺣﺘﻰ اﻵن ﻫﻮ ﺗﻌﺮﯾﻒ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻹﻃﺎرات وﺧﺼﺎﺋﺼﻬﺎ )ﻓﻘﻂ ﺗﻌﺮﯾﻒ اﻹﻃﺎرات( ﻟﻜﻦ ﻟﻢ‬ ‫ﻧﺤﺪد ﻣﺎﻫﯿﺔ ﻫﺬه اﻹﻃﺎرات وﻻ ﻣﺤﺘﻮﯾﺎﺗﻬﺎ وﻻ ﻣﺼﺎدرﻫﺎ‪ .‬ﺗﻤﺎﻣﺎ ﻛﻤﺎ ﻧﻘﻮم ﺑﺘﻌﺮﯾﻒ ﺻﻔﺤﺎت اﻟﻮﯾﺐ اﻹﻋﺘﯿﺎدﯾﺔ‬‫وﺧﺼﺎﺋﺼﻬﺎ ﻓﻲ اﻟﻮﺳﻢ >‪ <BODY‬دون أن ﯾﻌﻨﻲ ذﻟﻚ ﺗﺤﺪﯾﺪ ﻣﺤﺘﻮﯾﺎت ﻫﺬه اﻟﺼﻔﺤﺎت‪ .‬ﻓﺈذا أردﻧﺎ ﻓﯿﻤﺎ ﺑﻌﺪ إدراج‬ ‫ﺻﻮرة ﻣﺜ ًﻼ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺬﻟﻚ وﻫﻮ‬‫>\"أﺳﻢ اﻟﺼﻮرة\"=‪<IMG SRC‬‬ ‫وﻓﻲ ﺣﺎﻟﺔ اﻹﻃﺎرات ﻓﺈﻧﻨﺎ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <FRAME‬وﻫﻮ وﺳﻢ ﻣﻔﺮد أي ﻟﯿﺲ ﻟﻪ وﺳﻢ ﻧﻬﺎﯾﺔ ﺗﻤﺎﻣﺎً ﻣﺜﻞ‬ ‫>‪ .<IMG‬وﻓﯿﻪ ﻧﻘﻮم ﺑﺘﺤﺪﯾﺪ ﻣﺼﺪر وﺧﺼﺎﺋﺺ ﻛﻞ ﻣﻠﻒ ﻧﺮﯾﺪ إﻇﻬﺎره داﺧﻞ أﺣﺪ اﻹﻃﺎرات‪ .‬وﯾﺘﻢ اﺳﺘﺨﺪام ﻫﺬا‬‫اﻟﻮﺳﻢ ﻣﺮات ﺑﻨﻔﺲ ﻋﺪد اﻹﻃﺎرات اﻟﻤﺬﻛﻮرة داﺧﻞ >‪ .<FRAMESET‬وﺳﻮف أﻗﻮم ﻣﺒﺎﺷﺮة ﺑﺎﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ‬ ‫‪ SRC‬ﻟﺘﺤﺪﯾﺪ ﻣﺼﺪر اﻟﻤﻠﻒ‪.‬‬ ‫دﻋﻨﺎ ﻧﻘﻮم اﻵن ﺑﺈﺗﻤﺎم اﻟﺸﯿﻔﺮة ﻟﺒﻌﺾ اﻷﻣﺜﻠﺔ اﻟﻤﺬﻛﻮرة أﻋﻼه‪ .‬وﻧﺒﺪأ ﺑﺎﻟﻤﺜﺎل اﻷول‪:‬‬‫>\"‪<FRAMESET COLS=\"50%,50%‬‬ ‫>\"‪<FRAME SRC=\"frame1.html‬‬ ‫>\"‪<FRAME SRC=\"frame2.html‬‬‫>‪</FRAMESET‬‬ ‫اﻵن ‪ ...‬واﻵن ﻓﻘﻂ أﺻﺒﺢ ﻟﺪﯾﻚ ﺻﻔﺤﺔ إﻃﺎرات ﻣﺤﺘﺮﻣﺔ‪.‬‬ ‫ﻣﺜﺎل آﺧﺮ‪:‬‬

‫>\"‪<FRAMESET ROWS=\"50,*,15%,20%‬‬ ‫>\"‪<FRAME SRC=\"frame1.html‬‬ ‫>\"‪<FRAME SRC=\"frame2.html‬‬ ‫>\"‪<FRAME SRC=\"frame3.html‬‬ ‫>\"‪<FRAME SRC=\"frame4.html‬‬‫>‪</FRAMESET‬‬‫وﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ ﻣﺎ ذﻛﺮ‪ ،‬ﻧﺴﺘﻄﯿﻊ إدراج ﺻﻮرة ﻣﺒﺎﺷﺮًة داﺧﻞ اﻹﻃﺎر وﺑﺎﺳﺘﺨﺪام >‪ <FRAME SRC‬ﺗﻤﺎﻣﺎً ﻛﻤﺎ‬ ‫ﻧﺪرﺟﻬﺎ ﺑﺎﺳﺘﺨﺪام >‪ <IMG SRC‬وإﻟﯿﻚ ﻫﺬا اﻟﻤﺜﺎل‪:‬‬‫>\"‪<FRAMESET COLS=\"50%,50%‬‬ ‫>\"‪<FRAME SRC=\"frame1.html‬‬ ‫>\"‪<FRAME SRC=\"thedome.jpg‬‬‫>‪</FRAMESET‬‬ ‫ﻫﻞ ﺗﺄﻛﺪت ﻣﻦ ﻓﻬﻤﻚ ﻟﻬﺬه اﻟﻨﻘﺎط؟ ﻟﻨﺘﺎﺑﻊ إذن ‪...‬‬ ‫ﺣﺘﻰ اﻵن ﻗﻤﻨﺎ ﺑﺘﻘﺴﯿﻢ اﻟﺼﻔﺤﺔ إﻣﺎ ﻹﻃﺎرات أﻓﻘﯿﺔ أو ﻹﻃﺎرات ﻋﻤﻮدﯾﺔ‪ .‬ﻟﻜﻦ ﻧﺤﺘﺎج ﻟﻤﻌﺮﻓﺔ ﻛﯿﻔﯿﺔ إدراج ﻛﻼﻫﻤﺎ‬ ‫ﻓﻲ اﻟﺼﻔﺤﺔ‪ .‬ﻛﻤﺎ ﻓﻲ ﻫﺬه اﻟﺼﻔﺤﻪ‬ ‫ﻟﻨﺒﺪأ ﺻﻔﺤﺔ ﻣﻜﻮﻧﺔ ﻣﻦ ﺻﻔﯿﻦ‪ ،‬اﻟﺜﺎﻧﻲ ﻣﻨﻬﻤﺎ ﻣﻘﺴﻢ ﺑﺪوره إﻟﻰ ﻋﻤﻮدﯾﻦ‬ ‫ﺑﻤﺎ أن اﻟﺼﻔﺤﺔ ﺗﺤﺘﻮي ﻋﻠﻰ ﺻﻔﯿﻦ ﻧﻘﻮم ﺑﺘﻌﺮﯾﻔﻬﻤﺎ أوﻻً ﺣﺴﺐ اﻹرﺗﻔﺎﻋﺎت اﻟﻤﺮﻏﻮب ﺑﻬﺎ‪:‬‬‫>\"*‪<FRAMESET ROWS=\"100,‬‬ ‫>\"‪<FRAME SRC=\"Contents.htm‬‬ ‫>\"‪<FRAME SRC=\"index.htm‬‬‫>‪</FRAMESET‬‬ ‫ﻟﻜﻦ اﻟﺼﻒ اﻟﺜﺎﻧﻲ ﻣﻘﺴﻢ إﻟﻰ ﻋﻤﻮدﯾﻦ وﻫﻨﺎ ﯾﻌﺘﺒﺮ ﺑﻤﻔﻬﻮم ﻟﻐﺔ ‪ HTML‬وﻛﺄﻧﻪ ﺻﻔﺤﺔ إﻃﺎرات ﺟﺪﯾﺪة ﻟﺬﻟﻚ ﻻ‬ ‫ﻧﺤﺘﺎج ﻟﺘﻌﺮﯾﻔﻪ ﻛﺼﻒ وﺑﺪﻻً ﻣﻦ ذﻟﻚ ﻧﻌﺎود اﺳﺘﺨﺪام ﺗﻌﺮﯾﻒ اﻟﺼﻔﺤﺎت! أي >‪ <FRAMESET‬ﻣﺮة أﺧﺮى‪.‬‬‫>\"*‪<FRAMESET ROWS=\"100,‬‬ ‫>\"‪<FRAME SRC=\"Contents.htm‬‬ ‫>‪<FRAMESET‬‬ ‫>‪</FRAMESET‬‬ ‫>‪</FRAMESET‬‬ ‫وﺑﻤﺎ أن اﻟﺼﻒ اﻟﺜﺎﻧﻲ )أو ﻟﻨﻘﻞ اﻹﻃﺎر اﻟﺜﺎﻧﻲ( ﻣﻘﺴﻢ إﻟﻰ ﻋﻤﻮدﯾﻦ‪ ،‬إذن ﺑﻘﻲ ﻋﻠﯿﻨﺎ إﺿﺎﻓﺔ ﺗﻌﺮﯾﻒ ﻟﻬﺬه اﻷﻋﻤﺪة‪.‬‬ ‫وﺑﺬﻟﻚ ﺗﻜﻮن اﻟﺸﯿﻔﺮة اﻟﻨﻬﺎﺋﯿﺔ ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬‫>\"*‪<FRAMESET ROWS=\"100,‬‬ ‫>\"‪<FRAME SRC=\"Contents.htm‬‬ ‫>\"*‪<FRAMESET COLS=\"200,‬‬ ‫>\"‪<FRAME SRC=\"index.htm‬‬ ‫>\"‪<FRAME SRC=\"Banner.htm‬‬ ‫>‪</FRAMESET‬‬ ‫>‪</FRAMESET‬‬ ‫ﻟﻤﺸﺎﻫﺪة اﻟﺼﻔﺤﺔ أﺿﻐﻂ ﻫﻨﺎ‬ ‫‪NOFRAMES‬‬

‫ﻧﺄﺗﻲ إﻟﻲ آﺧﺮ وﺳﻢ ﻓﻲ ﻫﺬه اﻟﺼﻔﺤﺔ وﻫﻮ >‪ <NOFRAMES‬و ﻫﻮ اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺎﻟﻤﺴﺘﻌﺮﺿﺎت اﻟﺘﻲ ﻻ‬ ‫ﺗﺴﺘﺨﺪم اﻷﻃﺮ‬ ‫ﻣﺜﻞ اﻹﺻﺪارات اﻟﻘﺪﯾﻤﺔ ﻟِـ ‪ MS Internet, Netscape‬ﻟﻜﻨﻚ ﺣﺘﻤﺎً ﺗﺴﺘﻄﯿﻊ ﻣﺸﺎﻫﺪﺗﻬﺎ وذﻟﻚ ﻷن اﻹﺻﺪارات‬ ‫اﻟﻤﻌﺮﺑﺔ ﻣﻦ ﻫﺬه اﻟﻤﺘﺼﻔﺤﺎت ﻫﻲ إﺻﺪارات ﺣﺪﯾﺜﺔ ﻧﺴﺒﯿًﺎ وﺗﺪﻋﻢ اﻹﻃﺎرات ‪.‬‬ ‫ﻓﺈذا أردت أن ﺗﻤﻨﺢ زوار ﻣﻮﻗﻌﻚ اﻟﺬﯾﻦ ﻻ ﯾﺴﺘﺨﺪﻣﻮن ﻣﺘﺼﻔﺤﺎً ﺣﺪﯾﺜﺎً ﻓﺮﺻﺔ ﻣﺸﺎﻫﺪة ﻣﻮﻗﻌﻚ‪ ،‬ﻓﻜﻞ ﻣﺎ ﻋﻠﯿﻚ ﻓﻌﻠﻪ‬‫ﻫﻮ إدراج ﻫﺬا اﻟﻮﺳﻢ ﻓﻲ ﻧﻬﺎﯾﺔ اﻟﻤﻠﻒ اﻟﺮﺋﯿﺴﻲ ﻟﻺﻃﺎرات واﻟﺒﺪء ﺑﻜﺘﺎﺑﺔ ﺻﻔﺤﺘﻚ ﻛﻤﺎ ﻟﻮ ﻛﺎﻧﺖ ﺻﻔﺤﺔ وﯾﺐ ﻋﺎدﯾﺔ‪.‬‬‫>‪<NOFRAMES‬‬ ‫ﻫﺬه اﻟﺼﻔﺤﺔ ﺗﺴﺘﺨﺪم اﻷﻃﺮ‬‫>‪<BODY‬‬‫‪ :-‬ﺗﺴﺘﻄﯿﻊ ان ﺗﻜﺘﺐ ﻫﻨﺎ ﻣﺎ ﳛﻠﻮ ﻟﻚ ﻣﺜﻞ‬‫ﯾﺪﻋﻤﻬﺎ ﻣﺴﺘﻌﺮﺿﻚ ﻻ و‬‫>‪</BODY‬‬‫>‪</NOFRAMES‬‬‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬‫اﻷﻃﺮ اﻟﻤﺘﻘﺪﻣﺔ‬‫ﺗﻮﻗﻔﻨﺎ ﻓﻲ «اﻟﻔﺼﻞ اﻟﺴﺎﺑﻖ ﻋﻨﺪ ﻛﯿﻔﯿﺔ إﻧﺸﺎء ﺻﻔﺤﺔ وﯾﺐ ﺑﺎﺳﺘﺨﺪام ﻣﺒﺪأ اﻹﻃﺎرات‪ .‬وﻧﺘﺎﺑﻊ ﻣﻌًﺎ اﻟﺘﻌﺮف ﻋﻠﻰ ﺑﺎﻗﻲ‬ ‫اﻟﺨﺼﺎﺋﺺ واﻟﺘﺤﺪﯾﺪات اﻟﻤﺘﻌﻠﻘﺔ ﺑﻬﺎ‪.‬‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] ‪[ in-line frames | FRAMEBORDER‬‬‫ﻋﻨﺪ اﻟﺤﺪﯾﺚ ﻋﻦ اﻹﻃﺎرات ﺳﻮف ﻧﻮاﺟﻪ ﺗﻠﻚ اﻟﻤﺸﻜﻠﺔ اﻟﻌﺘﯿﺪة اﻟﺘﻲ ﺗﺆرق داﺋﻤًﺎ ﻣﺼﻤﻤﻲ ﺻﻔﺤﺎت اﻟﻮﯾﺐ‪ ،‬أﻻ وﻫﻲ‬‫ﻣﺴﺄﻟﺔ ﺗﻮاﻓﻖ اﻟﻮﺳﻮم واﻟﺨﺼﺎﺋﺺ ﻣﻊ اﻟﻤﺘﺼﻔﺤﺎت اﻟﻤﺨﺘﻠﻔﺔ‪ ،‬ﻓﻤﺜﻼً ﻟﺪﯾﻨﺎ أرﺑﻊ ﺧﺼﺎﺋﺺ ﻟﻠﻮﺳﻢ >‪<FRAMESET‬‬ ‫‪ ،‬ﻟﻜﻦ واﺣﺪة ﻣﻨﻬﺎ ﻓﻘﻂ ﺗﻌﻤﻞ ﻣﻊ ﻛﻼ اﻟﻤﺘﺼﻔﺤﯿﻦ اﻟﺮﺋﯿﺴﯿﯿﻦ ‪MS Internet , Netscape Navigator‬‬‫‪. Explorer‬وﻛﻤﺎ إﻋﺘﺪﻧﺎ ﻟﻦ أرﻛﺰ ﻋﻠﻰ ﻫﺬه اﻟﺨﺼﺎﺋﺺ ‪ ،‬ﻟﻜﻦ ﻋﻠﻰ اﻷﻗﻞ ﺳﺄﻛﺘﻔﻲ ﺑﺬﻛﺮﻫﺎ وذﻛﺮ ﻋﻤﻠﻬﺎ وأﺗﺮك ﻟﻚ‬ ‫ﺣﺮﯾﺔ ﺗﺠﺮﺑﺘﻬﺎ إن أردت ‪.‬‬ ‫‪FRAMEBORDER‬‬ ‫أوﻟﻰ ﻫﺬه اﻟﺨﺼﺎﺋﺺ ﻫﻲ ‪ FRAMEBORDER‬وﻫﻲ ﺗﻘﻮم ﺑﺘﺤﺪﯾﺪ ﻇﻬﻮر أو ﻋﺪم ﻇﻬﻮر اﻟﺤﺪود ﺣﻮل‬ ‫اﻹﻃﺎرات وﺗﺄﺧﺬ اﻟﻘﯿﻢ ‪ ١‬ﻟﻠﻈﻬﻮر‪ ،‬و‪ ٠‬ﻟﻌﺪم اﻟﻈﻬﻮر‪ .‬وﻫﺬا ﻣﺜﺎل ﻋﻠﯿﻬﺎ‪:‬‬‫>\"‪<FRAMESET ROWS=\"50,*\" FRAMEBORDER=\"0‬‬ ‫>\"‪<FRAME SRC=\"frame1.html‬‬ ‫>\"‪<FRAME SRC=\"frame2.html‬‬ ‫>‪</FRAMESET‬‬ ‫أﻣﺎ اﻟﺨﺼﺎﺋﺺ اﻟﺜﻼث اﻷﺧﺮى ﻓﻬﻲ‪:‬‬

‫• ‪ :BORDER‬ﺗﺤﺪد ﺳﻤﻚ اﻟﺤﺪود اﻟﻈﺎﻫﺮة ﺣﻮل اﻹﻃﺎرات وﻫﻲ ﺗﺄﺧﺬ ﻗﯿﻤﺎً ﺑﺎﻟﺒﯿﻜﺴﻞ‪.‬‬ ‫)\"‪ (BORDER=\"n‬وﺗﻌﻤﻞ ﻓﻘﻂ ﻣﻊ ‪Netscape‬‬‫• ‪ :BORDERCOLOR‬ﻹﺿﺎﻓﺔ ﻟﻮن ﻟﻠﺤﺪود )\"‪ (BORDERCOLOR=\"rrggbb‬ﺑﺎﻟﻄﺒﻊ‬ ‫ﺗﺴﺘﻄﯿﻊ ان ﺗﺨﺘﺎر أﺳﻤﺎء اﻷﻟﻮان أو ﻛﻮد ال‪ HEX‬وﺗﻌﻤﻞ ﻣﻊ ‪ Netscape‬أﯾﻀًﺎ‪.‬‬ ‫• ‪ :FRAMESPACING‬ﻟﺘﺤﺪﯾﺪ ﻣﺴﺎﻓﺎت ﻓﺎرﻏﺔ إﺿﺎﻓﯿﺔ ﺣﻮل اﻹﻃﺎرات وﺗﺄﺧﺬ ﻗﯿﻤًﺎ ﺑﺎﻟﺒﯿﻜﺴﻞ‬ ‫)\"‪ (FRAMESPACING=\"n‬وﻫﻲ ﺗﻌﻤﻞ ﻣﻊ ‪MS Internet‬‬ ‫أﻣﺎ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ اﻟﻮﺳﻢ >‪ <FRAME‬ﻓﻬﻲ ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬‫‪ :MARGINHEIGHT‬ﺗﺤﺪد ﻣﻘﺪار اﻟﻤﺴﺎﻓﺔ اﻟﻔﺎرﻏﺔ اﻟﻤﺘﺮوﻛﺔ ﻟﻠﻬﻮاﻣﺶ اﻟﻌﻠﻮﯾﺔ واﻟﺴﻔﻠﯿﺔ ﻟﻺﻃﺎر‬ ‫•‬ ‫•‬ ‫)ﺑﺎﻟﺒﯿﻜﺴﻞ(‪MARGINHEIGHT=\"n\" .‬‬ ‫•‬ ‫‪ :MARGINWIDTH‬ﺗﺤﺪد ﻣﻘﺪار اﻟﻤﺴﺎﻓﺔ اﻟﻔﺎرﻏﺔ اﻟﻤﺘﺮوﻛﺔ ﻟﻠﻬﻮاﻣﺶ اﻟﯿﻤﻨﻰ واﻟﯿﺴﺮى ﻟﻺﻃﺎر‬ ‫)ﺑﺎﻟﺒﯿﻜﺴﻞ(‪MARGINWIDTH=\"n\" .‬‬‫‪SCROLLING:‬ﺗﺤﺪد إﻣﻜﺎﻧﯿﺔ ﻇﻬﻮر أو ﻋﺪم ﻇﻬﻮر أﺷﺮﻃﺔ اﻟﺘﺼﻔﺢ اﻷﻓﻘﯿﺔ واﻟﻌﻤﻮدﯾﺔ ﻋﻠﻰ ﺟﻮاﻧﺐ أو‬‫أﺳﻔﻞ اﻹﻃﺎر‪ .‬وﺗﺄﺧﺬ اﻟﻘﯿﻢ ‪ yes‬ﻟﻠﻈﻬﻮر ‪. no‬ﻟﻌﺪم اﻟﻈﻬﻮر‪ .‬و ‪ auto‬اﻟﺘﻲ ﺗﺤﺪد ﻇﻬﻮر اﻷﺷﺮﻃﺔ أو‬ ‫ﻋﺪﻣﻪ ﺗﻠﻘﺎﺋﯿﺎً ﺑﺤﺴﺐ اﻟﺤﺎﺟﺔ إﻟﯿﻬﺎ‪ .‬ﺗﻤﺎﻣًﺎ ﻛﻤﺎ ﯾﺤﺪث ﻓﻲ ﻣﻌﻈﻢ ﺗﻄﺒﯿﻘﺎت ‪Windows‬‬‫\"‪SCROLLING=\"yes‬‬‫\"‪SCROLLING=\"no‬‬‫\"‪SCROLLING=\"auto‬‬ ‫• ‪ NORESIZE‬ﻋﻨﺪ إﺿﺎﻓﺔ ﻫﺬه اﻟﺨﺎﺻﯿﺔ ﯾﺘﻢ ﻣﻨﻊ ﻋﻤﻠﯿﺔ اﻟﺘﺤﻜﻢ ﺑﺤﺠﻢ اﻹﻃﺎر ﺑﺎﻟﺘﺼﻐﯿﺮ أو اﻟﺘﻜﺒﯿﺮ‬ ‫ﻣﻦ ﺧﻼل اﻟﺴﺤﺐ واﻹﻓﻼت‪ .‬وﻫﻲ ﻻ ﺗﺄﺧﺬ أي ﻗﯿﻢ‪.‬ﻓﻘﻂ ﺗﻜﺘﺐ ﻛﻤﺎ ﻫﻲ‬ ‫وﻟﺘﻮﺿﯿﺢ ﻣﺒﺪأ ﻋﻤﻞ ﻫﺬه اﻟﺨﺼﺎﺋﺺ إﻟﯿﻚ ﻫﺬه اﻟﻤﺜﺎل‪ ،‬وﻗﻢ ﺑﺘﻔﺤﺺ ﻫﺬه اﻟﺼﻔﺤﺔ واﻟﺘﺪﻗﯿﻖ ﻓﻲ ﺗﻔﺎﺻﯿﻠﻪ ﻟﻜﻲ‬ ‫ﺗﻘﺎرﻧﻬﺎ ﺑﻤﺎ ﺳﯿﻨﺘﺞ ﻋﻦ اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ‪ ،‬ﻛﺬﻟﻚ ﺣﺎول اﻟﻘﯿﺎم ﺑﺘﻜﺒﯿﺮ اﻹﻃﺎر أو ﺗﺼﻐﯿﺮه ﺑﻮﺿﻊ اﻟﻤﺆﺷﺮ ﻋﻠﻰ اﻟﺤﺪ ﺛﻢ‬ ‫اﺳﺘﺨﺪام اﻟﺴﺤﺐ واﻹﻓﻼت ﺑﺎﻹﺗﺠﺎه اﻟﻤﻄﻠﻮب‪ .‬وذﻟﻚ ﻟﻜﻲ ﺗﺴﺘﻄﯿﻊ ﺗﻤﯿﯿﺰ ﻋﻤﻞ اﻟﺨﺎﺻﯿﺔ ‪NORESIZE‬‬‫>\"‪<FRAMESET COLS=\"50%,50%‬‬‫\"‪<FRAME SRC=\"frame1.htm\" MARGINHEIGHT=\"40\" MARGINWIDTH=\"30‬‬‫>‪SCROLLING=\"yes\" NORESIZE‬‬‫>\"‪<FRAME SRC=\"frame2.htm‬‬‫>‪</FRAMESET‬‬ ‫إﻟﻘﻲ ﻧﻈﺮة اﻵن ﻋﻠﻲ ﻫﺬه اﻟﺼﻔﺤﺔ ﺗﻼﺣﻆ ﻋﺪم اﻟﻘﺪرة ﻋﻠﻲ اﻟﺘﺤﻜﻢ ﻓﻲ ﺣﺠﻢ اﻹﻃﺎر ﻣﻦ ﺧﻼل ﻣﺆﺷﺮ اﻟﻤﻮس‪.‬‬ ‫ﻛﺬﻟﻚ ﻫﻨﺎك اﻟﺨﺼﺎﺋﺺ ‪FRAMEBORDER, FRAMESPACING, BORDER,‬‬‫‪ BORDERCOLOR‬اﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻣﻊ ﻫﺬا اﻟﻮﺳﻢ وﺑﻨﻔﺲ اﻟﺘﻔﺎﺻﯿﻞ اﻟﺘﻲ ذﻛﺮت ﻣﻊ >‪.<FRAMESET‬‬ ‫ﻟﻜﻨﻬﺎ ﺑﺎﻟﻄﺒﻊ ﺗﺤﺪد ﺧﺼﺎﺋﺺ اﻹﻃﺎر وﺣﺪه وﻟﯿﺲ ﻣﺠﻤﻮﻋﺔ اﻹﻃﺎرات ﻛﻜﻞ ﻓﻲ اﻟﺼﻔﺤﺔ‪ .‬وﻫﻲ ﺗﻌﻤﻞ ﻋﻠﻰ‬ ‫ﻣﺘﺼﻔﺤﺎت ﻣﻌﯿﻨﺔ دون ﻏﯿﺮﻫﺎ‪.‬‬

‫‪frames in-line‬‬ ‫و اﻵن ﻧﺘﺤﺪث ﻋﻦ ﻛﯿﻔﯿﺔ إدراج إﻃﺎر داﺧﻞ ﺻﻔﺤﺔ ﻋﺎدﯾﻪ ﻣﺜﻞ ﻫﺬا‬‫و اﻵن أﻧﺎ ﻟﺪي ﺻﻔﺤﺘﯿﻦ ﯾﻈﻬﺮون ﻓﻲ ﺻﻔﺤﺔ واﺣﺪه ﻓﻲ اﻟﺤﻘﯿﻘﺔ وﺳﻢ ال‪ in-line frames‬ﻣﻦ أﺳﻬﻞ اﻷوﺳﻤﻪ ﻛﻞ‬‫ﻣﺎ ﻋﻠﯿﻚ ﻫﻮ ﺗﺤﺪﯾﺪ ﻣﻜﺎن اﻟﺼﻔﺤﺔ اﻟﺘﻲ ﺳﺘﻈﻬﺮ ﻓﻲ اﻹﻃﺎر ﺑﺸﻜﻞ ﺻﺤﯿﺢ ﻛﻤﺎ ﺗﺤﺪد اﻹرﺗﻔﺎﻋﺎت و اﻟﻌﺮض ﺑﺸﻜﻞ‬ ‫ﻣﻨﺎﺳﺐ‬‫>‪<IFRAME SRC=\"inlineframes1.html\" WIDTH=\"70%\" HEIGHT=\"90\"></IFRAME‬‬‫ﺑﺎﻟﻄﺒﻊ ﺗﺴﺘﻄﯿﻊ ان ﺗﺪرج أﻛﺜﺮ ﻣﻦ إﻃﺎرﻓﻲ ﺻﻔﺤﺔ واﺣﺪه ﻟﻜﻦ ﯾﺠﺐ ﻋﻠﯿﻚ أن ﺗﻌﻄﻲ ﻛﻞ إﻃﺎر اﺳﻢ ‪) NAME‬‬ ‫ﺳﻨﻘﻮم ﺑﺸﺮح ﻫﺬه اﻟﺨﺎﺻﯿﻪ ﻓﻲ اﻟﺪرس اﻟﻘﺎدم (‬‫]‪[left] [right‬‬ ‫و إﻟﯿﻚ ﺑﺎﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺬﻟﻚ‬‫>‪<IFRAME SRC=\"left.html\" NAME=\"left\"></IFRAME‬‬‫>‪<IFRAME SRC=\"right.html\" NAME=\"right\"></IFRAME‬‬ ‫و ﺑﺎﻟﻄﺒﻊ ﺗﺴﺘﻄﯿﻊ ان ﺗﺴﺘﺨﺪم ﻣﻌﻬﺎ ﻛﻞ اﻟﺨﺼﺎﺋﺺ ﻣﻊ ﻫﺬا اﻟﻮﺳﻢ ﻛﻤﺎ ذﻛﺮﻧﺎ ﻣﻦ ﻗﺒﻞ ‪ ،‬وﻻ ﺗﻘﻠﻖ ﺳﺄﻗﻮم إﻧﺸﺎء اﷲ‬ ‫ﺑﺸﺮح اﻟﺨﺎﺻﯿﻪ ‪ NAME‬ﺑﺎﻟﺘﻔﺼﯿﻞ ﻓﻲ اﻟﺪرس اﻟﻘﺎدم‬ ‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬ ‫ﺗﺎﺑﻊ اﻷﻃﺮ اﻟﻤﺘﻘﺪﻣﺔ‬ ‫ﻛﻤﺎ ﺗﺮى ﻻزﻟﻨﺎ ﻧﺘﺎﺑﻊ ﻓﻲ ﻣﻮﺿﻮع اﻹﻃﺎرات‪ ،‬وﻓﻲ اﻟﻘﺴﻢ اﻟﺜﺎﻟﺚ ﻣﻨﻪ ‪.‬وذﻟﻚ ﻷﻫﻤﯿﺔ ﻫﺬا اﻟﻤﻮﺿﻮع وﺗﺸﺎﺑﻚ‬ ‫ﺧﻄﻮﻃﻪ‪ .‬وﺧﺼﻮﺻﺎً ﻷﻧﻨﺎ ﻧﺤﺘﺎج إﻟﻰ اﻟﺘﻌﺎﻣﻞ ﻣﻊ أﻛﺜﺮ ﻣﻦ وﺳﻢ ﻓﻲ ﻧﻔﺲ اﻟﻮﻗﺖ وداﺧﻞ أﻛﺜﺮ ﻣﻦ ﻣﻠﻒ‪ .‬ﻣﻤﺎ‬ ‫ﯾﺴﺘﺪﻋﻲ اﻟﺘﺮﻛﯿﺰ ﻋﻨﺪﻣﺎ ﺗﺮﯾﺪ إﻧﺸﺎء ﺻﻔﺤﺔ إﻃﺎرات‪.‬‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] ‪[ TARGET | NAME‬‬ ‫‪NAME‬‬‫ﻟﻘﺪ أﻧﻬﯿﻨﺎ ﻓﻲ اﻟﺪرﺳﯿﻦ اﻟﻤﺎﺿﯿﯿﻦ ﺷﺮح ﻛﺎﻓﺔ اﻟﻮﺳﻮم واﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﺗﺘﻌﻠﻖ ﺑﺎﻹﻃﺎرات‪ ،‬ﻋﺪا واﺣﺪة ﻫﻲ ‪NAME‬‬ ‫وﺳﻮف أﻗﻮم ﺑﺸﺮﺣﻬﺎ ﺑﺼﻮرة واﻓﯿﺔ ﻓﻲ ﻫﺬا اﻟﺪرس ‪ ،‬إن ﻫﺬه اﻟﺨﺎﺻﯿﺔ ﺗﻌﺘﺒﺮ ﻣﻦ أﻫﻢ ﺧﺼﺎﺋﺺ اﻟﻮﺳﻢ‬ ‫>‪<FRAME‬ﻷﻧﻬﺎ ﺗﺤﺪد ﻃﺮﯾﻘﺔ ﺗﻨﺴﯿﻖ اﻟﻌﻤﻞ ﺑﯿﻦ اﻹﻃﺎرات واﻟﺼﻔﺤﺎت وأﺳﻠﻮب ﻋﺮﺿﻬﺎ‪ .‬ﻟﻨﻌﺘﺒﺮ ﻫﺬا ﺗﻌﺮﯾﻔﺎً‬ ‫ﻣﺒﺪﺋﯿﺎً‪ .‬وﻟﻜﻲ أوﺿﺢ ﻟﻚ اﻟﻬﺪف ﻣﻦ ﻫﺬه اﻟﺨﺎﺻﯿﺔ‪ ،‬ﻗﻢ ﺑﺎﺳﺘﻌﺮاض اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ ‪ ...‬اﻟﺬي ﻗﻤﺖ ﻓﯿﻪ ﺑﺘﻤﺜﯿﻞ ﺑﻌﺾ‬ ‫اﻷﺟﺰاء ﻣﻦ ﻫﺬا اﻟﻤﻮﻗﻊ )ﻟﻨﺘﺮك ﺗﻠﻚ اﻷﻣﺜﻠﺔ اﻟﻤﻤﻠﺔ اﻟﺘﻲ ﻛﻨﺎ ﻧﻌﻤﻞ ﻋﻠﯿﻬﺎ ﻓﻲ ﻫﺬا اﻟﺪرﺳﯿﻦ اﻟﺴﺎﺑﻘﯿﻦ وﻟﻨﺒﺪأ ﺑﺎﻟﻌﻤﻞ‬ ‫اﻟﺠﺪي(‪ .‬وأﻧﻘﺮ ﻋﻠﻰ أزرار اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ اﻟﻤﻮﺟﻮدة ﻓﻲ اﻹﻃﺎر اﻷﯾﺴﺮ‬

‫ﻣﺎذا وﺟﺪت ؟ ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﻲ أي وﺻﻠﻪ ﻓﻲ اﻹﻃﺎر اﻹﯾﺴﺮ ﯾﻔﺘﺢ اﻟﺼﻔﺤﺔ ﻓﻲ اﻹﻃﺎر اﻵﺧﺮ إذن ﻛﯿﻒ ﯾﺤﺪث‬ ‫ﻫﺬا ؟‬ ‫ﻫﻨﺎ ﯾﺄﺗﻲ دور اﻟﺨﺎﺻﯿﺔ ‪ NAME‬واﻟﺘﻲ ﻧﻘﻮم ﻣﻦ ﺧﻼﻟﻬﺎ ﺑﺘﻌﯿﯿﻦ اﺳﻢ ﻣﺎ ﻟﻺﻃﺎر ( أي اﻹﻃﺎر اﻟﺬي ﻧﺮﻏﺐ أن ﺗﻈﻬﺮ‬‫ﺑﻪ اﻟﻤﻠﻔﺎت ﻋﻨﺪﻣﺎ ﻧﻘﻮم ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ ) ﺣﯿﺚ ﺳﯿﺘﻢ ﻓﯿﻤﺎ ﺑﻌﺪ اﺳﺘﺨﺪام ﻫﺬا اﻹﺳﻢ ﻣﻦ أﺟﻞ اﺳﺘﻬﺪاف‬ ‫ﻫﺬا اﻹﻃﺎر ﻣﻦ ﻗﺒﻞ اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ ﻓﻲ اﻹﻃﺎرات اﻷﺧﺮى أو ﺣﺘﻰ ﻓﻲ اﻟﺼﻔﺤﺎت اﻷﺧﺮى‪.‬‬ ‫وﺑﺎﻟﻤﻨﺎﺳﺒﺔ ﻓﻘﺪ ﺣﺎن اﻵن ذﻛﺮ ﺧﺎﺻﯿﺔ ﺟﺪﯾﺪة ﻣﻦ ﺧﺼﺎﺋﺺ اﻟﻮﺳﻢ ( >‪ <A> ... </A‬وﻫﻮ وﺳﻢ اﻟﻮﺻﻼت‬ ‫اﻟﺘﺸﻌﺒﯿﺔ ﻛﻤﺎ ﻋﺮﻓﺖ ﻓﻲاﻟﻮﺻﻠﻪ اﻷﺳﺎﺳﯿﻪ ) وﻫﺬه اﻟﺨﺎﺻﯿﺔ ﻫﻲ ‪TARGET.‬‬ ‫دﻋﻨﺎ ﻧﻘﻮم ﺑﺘﺮﺗﯿﺐ اﻷﻣﻮر ﺑﺼﻮرة أﻛﺜﺮ وﺿﻮﺣًﺎ وﺗﺴﻠﺴ ًﻼ‪:‬‬ ‫أن ﻫﺬا اﻟﻮﺳﻢ ﯾﻮﺿﻊ ﻓﻘﻂ ﻓﻲ اﻟﻤﻠﻒ اﻟﺮﺋﯿﺴﻲ إذن ﻫﻲ ﺗﻮﺿﻊ ﻓﻲ اﻟﻤﻠﻒ اﻟﺮﺋﯿﺴﻲ‪ ...‬ﻫﺬه أﺻﺒﺤﺖ واﺿﺤﺔ! ﻟﻜﻦ‬ ‫ﻣﻊ أي وﺳﻢ ﻣﻦ وﺳﻮم >‪ <FRAME‬اﻟﻤﻮﺟﻮدة ﻓﻲ اﻟﻤﻠﻒ اﻟﺮﺋﯿﺴﻲ؟؟ أﻧﻪ ﯾﻮﺿﻊ ﻓﻲ اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺘﻌﺮﯾﻒ‬ ‫اﻹﻃﺎر اﻟﻌﺎم اﻟﺬي ﺳﺘﻈﻬﺮ ﺑﻪ اﻟﻤﻠﻔﺎت‪ .‬وﺑﺎﻓﺘﺮاض أﻧﻨﺎ ﻧﺮﯾﺪ ﺗﺴﻤﯿﺔ ﻫﺬا اﻹﻃﺎر ﺑﺎﻻﺳﻢ ‪ .main‬وﻫﻮ اﺳﻢ اﺧﺘﻠﻘﺘﻪ‬ ‫أﻧﺎ ﺣﺴﺐ ﻣﺎ أرﯾﺪ وأﺳﺘﻄﯿﻊ إﻋﻄﺎءه أي اﺳﻢ آﺧﺮ أرﯾﺪه ﻃﺎﻟﻤﺎ أﻧﻪ ﯾﺒﺪأ ﺑﺤﺮف أﺑﺤﺪي أو رﻗﻢ وﻟﯿﺲ ﺑﺮﻣﺰ ﺧﺎص‬ ‫ﻣﺜﻞ ‪/‬؟‪^%$#‬‬ ‫إذن ﺗﺼﺒﺢ ﺷﯿﻔﺮة اﻟﻤﻠﻒ اﻷﺳﺎﺳﻲ ﻫﻲ‪:‬‬‫>‪<html‬‬‫>‪<head‬‬‫>‪<title>Master Frame</title‬‬‫>‪</head‬‬‫>\"*‪<frameset rows=\"68,‬‬‫>\"‪<frame scrolling=\"no\" noresize src=\"Banner.htm‬‬‫>\"*‪<frameset cols=\"150,‬‬‫>\"‪<frame src=\"Contents.htm‬‬‫>\"‪<frame NAME=\"MAIN\" src=\"index.htm‬‬‫>‪</frameset‬‬‫>‪<noframes‬‬‫>‪<body‬‬‫>‪<p>This page uses frames, but your browser doesn't support them.</p‬‬‫>‪</body‬‬‫>‪</noframes‬‬‫>‪</frameset‬‬‫>‪</html‬‬ ‫وﺑﻬﺬا ﻧﻜﻮن ﻗﺪ إﻧﺘﻬﯿﻨﺎ ﻣﻦ إﻋﺪاد اﻟﻤﻠﻒ اﻟﺮﺋﯿﺴﻲ ﻟﯿﻜﻮن ﻣﻠﻒ إﻃﺎرات ﻓﻌﺎل ﻣﺎﺋﺔ ﺑﺎﻟﻤﺎﺋﺔ‪ .‬وﻧﺴﺘﻄﯿﻊ اﻵن اﺳﺘﻬﺪاف‬ ‫ذﻟﻚ اﻹﻃﺎر ﻣﻦ أي ﻣﻜﺎن ﺑﺎﺳﺘﺨﺪام اﻹﺳﻢ اﻟﺬي ﻋﺮﻓﻨﺎه ﺑﻪ‪.‬‬ ‫‪TARGET‬‬ ‫اﻟﻤﺮﺣﻠﺔ اﻟﺜﺎﻧﯿﺔ ﻫﻲ ﺗﻌﺮﯾﻒ اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ ﺑﻄﺮﯾﻘﺔ ﺗﺠﻌﻞ اﻟﻤﻠﻔﺎت اﻟﻤﺘﻌﻠﻘﺔ ﺑﻬﺬه اﻟﻮﺻﻼت ﺗﻈﻬﺮ ﻓﻲ اﻹﻃﺎر‬ ‫اﻟﻤﺤﺪد‪ .‬وﻫﻨﺎ ﯾﺄﺗﻲ دور اﻟﺨﺎﺻﯿﺔ ‪ TARGET‬ﺳﺎﻟﻔﺔ اﻟﺬﻛﺮ ﻟﻜﻲ ﺗﻘﻮم ﻋﻠﻰ اﻟﺮﺣﺐ واﻟﺴﻌﺔ ﺑﺄداء ﻫﺬه اﻟﻮﻇﯿﻔﺔ‪.‬‬ ‫وﺳﻮف ﻧﻌﻤﻞ اﻵن ﻋﻠﻰ اﻟﻤﻠﻒ اﻟﻤﺴﻤﻰ ‪ Contents.htm‬أﻟﯿﺲ ﻫﻮ اﻟﻤﻠﻒ اﻟﺬي ﯾﺤﺘﻮي ﻋﻠﻰ اﻟﻮﺻﻼت‬ ‫اﻟﺘﺸﻌﺒﯿﺔ؟! ﻟﯿﺼﺒﺢ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬‫>‪<html‬‬‫>‪<head‬‬‫>‪<title>Master Frame</title‬‬‫>‪</head‬‬‫>\"*‪<frameset rows=\"68,‬‬‫>\"‪<frame scrolling=\"no\" noresize TARGET=\"MAIN\" src=\"Banner.htm‬‬‫>\"*‪<frameset cols=\"150,‬‬‫>\"‪<frame TARGET=\"MAIN\" src=\"Contents.htm‬‬‫>\"‪<frame name=\"main\" src=\"index.htm‬‬

‫>‪</frameset‬‬‫>‪<noframes‬‬‫>‪<body‬‬‫>‪<p>This page uses frames, but your browser doesn't support them.</p‬‬‫>‪</body‬‬‫>‪</noframes‬‬‫>‪</frameset‬‬‫>‪</html‬‬ ‫واﻵن ﺣﺎن وﻗﺖ اﻟﺘﺠﺮﺑﻪ ﺣﺎول أن ﺗﻨﺸﺄ ﻣﻠﻒ ﺑﻨﻔﺴﻚ ؟‬ ‫ﺑﻌﺪ أن ﻗﻤﺖ ﺑﺎﻟﺘﺠﺮﺑﻪ ﺳﻮف ﻧﺘﺤﺪث اﻵن ﻋﻦ ﻗﯿﻤﺔ ﻣﺘﻘﺪﻣﺔ ﺗﺴﺘﺨﺪم ﻣﻊ اﻟﺨﺎﺻﯿﻪ ‪ TARGET‬وﻫﻲ \"‪ \"_top‬ﻟﺘﺨﺒﺮ‬ ‫اﻟﻤﺘﺼﻔﺢ أن ﯾﻘﻮم ﺑﺘﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ ﻓﻲ اﻟﻤﺴﺘﻮى اﻷﻋﻠﻰ ﻣﻦ اﻟﺸﺎﺷﺔ‪ .‬أي ان ﯾﻘﻮم ﺑﺈﻟﻐﺎء أي إﻃﺎرات أو ﺻﻔﺤﺎت‬‫ﻋﺎدﯾﺔ ﻣﻮﺟﻮدة أﺻ ًﻼ وأن ﯾﺤﻤﻞ اﻟﺼﻔﺤﺔ اﻟﺠﺪﯾﺪة ﻣﻜﺎﻧﻬﺎ ‪.‬وﻫﺬه اﻟﻘﯿﻤﺔ ﻣﻌﺮﻓﺔ ﺑﺸﻜﻞ ﻣﺴﺒﻖ ﻓﻲ ﻟﻐﺔ ‪ HTML‬وﻟﯿﺴﺖ‬ ‫ﻣﻦ ﻋﻨﺪي ﻛﻤﺎ ﻓﻲ اﻹﺳﻢ ‪main.‬‬ ‫واﻟﺤﻘﯿﻘﺔ أﻧﻪ ﯾﻮﺟﺪ ﺛﻼث ﻗﯿﻢ أﺧﺮى ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ ‪ _top‬ﻣﻌﺮﻓﺔ ﺑﺸﻜﻞ ﻣﺴﺒﻖ ﻓﻲ ﻟﻐﺔ ‪ HTML‬ﻟﺘﺤﺪد ﻣﻮﻗﻊ ﻇﻬﻮر‬ ‫اﻟﺼﻔﺤﺔ اﻟﻤﻌﻨﯿﺔ‪ .‬وﯾﺠﺐ أن ﺗﺘﺬﻛﺮ داﺋﻤًﺎ أﻧﻬﺎ ﺗﻜﺘﺐ ﺑﺎﻷﺣﺮف اﻟﺼﻐﯿﺮة ‪ lowercase.‬ﻓﺈذا ﻛﺘﺒﺖ ﺑﺎﻷﺣﺮف‬ ‫اﻟﻜﺒﯿﺮة ﻓﻠﻦ ﺗﺤﺼﻞ ﻋﻠﻰ اﻟﻨﺘﯿﺠﺔ اﻟﺘﻲ ﺗﺮﯾﺪﻫﺎ ﻷﻧﻬﺎ ﺳﺘﻌﺘﺒﺮ ﻓﻲ ﻫﺬه اﻟﺤﺎﻟﺔ وﻛﺄﻧﻬﺎ أﺳﻤﺎء ﻋﺎدﯾﺔ ‪.‬وﻫﺬه ﻫﻲ اﻟﻘﯿﻢ‬ ‫اﻷرﺑﻌﺔ ‪:‬‬ ‫‪_top‬‬ ‫ﺗﺤﻤﻞ اﻟﺼﻔﺤﺔ ﻓﻲ أﻋﻠﻰ ﻣﺴﺘﻮى ﻟﻠﺸﺎﺷﺔ أي ﺗﻠﻐﻲ اﻹﻃﺎرات اﻟﻤﻮﺟﻮدة أﺻﻼً‬‫‪_blank‬‬ ‫ﺗﻘﻮم ﺑﻔﺘﺢ ﺷﺎﺷﺔ ﺟﺪﯾﺪة وﻓﺎرﻏﺔ ﻟﻠﻤﺘﺼﻔﺢ وﺗﻌﺮض اﻟﺼﻔﺤﺔ اﻟﻤﺤﻤﻠﺔ ﻓﯿﻪ‬‫‪_self‬‬

‫(اﻟﺤﺎﻟﺔ اﻹﻓﺘﺮاﺿﯿﺔ( ﺗﻘﻮم ﺑﺘﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ ﻓﻲ ﻧﻔﺲ اﻹﻃﺎر اﻟﺬي ﺗﻮﺟﺪ ﺑﻪ اﻟﻮﺻﻠﺔ‬ ‫اﻟﺘﺸﻌﺒﯿﺔ اﻟﺘﻲ ﺗﻢ اﻟﻨﻘﺮ ﻋﻠﯿﻬﺎ‪) ،‬وﺑﺎﻟﻄﺒﻊ ﻫﺬا ﻣﺎ ﯾﺤﺪث داﺋﻤﺎ دون وﺟﻮد ﻫﺬه اﻟﻘﯿﻤﺔ‪ ،‬أﻟﯿﺲ‬ ‫ﻛﺬﻟﻚ؟ )‬‫‪_parent‬‬ ‫ﺗﻘﻮم ﺑﻌﺮض اﻹﻃﺎر اﻟﻤﺤﻤﻞ ﻣﻜﺎن اﻹﻃﺎر اﻷب‪ ،‬وﺗﺄﻣﻞ اﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ اﻟﺬي ﯾﻤﺜﻞ ﺻﻔﺤﺔ‬ ‫إﻃﺎرات ﻣﺮﻛﺒﺔ‪.‬‬ ‫أﻧﺖ ﺗﻌﺮف أﻧﻨﺎ ﻧﺤﺘﺎج إﻟﻰ ﺛﻼﺛﺔ أزواج ﻣﻦ اﻟﻮﺳﻮم >‪... <FRAMESET‬‬ ‫>‪ </FRAMESET‬ﻹﺧﺮاج ﻣﺜﻞ ﻫﺬه اﻟﺼﻔﺤﺔ‪.‬‬ ‫§ اﻷول ﻟﺘﺤﺪﯾﺪ اﻟﺼﻔﺤﺔ ﻛﻜﻞ‬ ‫§ اﻟﺜﺎﻧﻲ ﻟﺘﺤﺪﯾﺪ اﻹﻃﺎرﯾﻦ ‪ ٢‬و ‪ ٣‬اﻟﻤﺘﻔﺮﻋﯿﻦ ﻣﻦ اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ‬ ‫§ اﻟﺜﺎﻟﺚ ﻟﺘﺤﺪﯾﺪ اﻹﻃﺎرﯾﻦ ‪ ٤‬و ‪ ٥‬اﻟﻤﺘﻔﺮﻋﯿﻦ ﻣﻦ اﻹﻃﺎر ‪٣‬‬ ‫وﺑﺎﻟﺘﺎﻟﻲ ﻧﻘﻮل أن اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ ﻫﻲ اﻷب )أو اﻷم إذا أردت( ﻟﻺﻃﺎرﯾﻦ ‪ ٢‬و ‪ ٣‬وأن‬‫اﻹﻃﺎر ‪ ٣‬ﻫﻮ اﻷب ﻟﻺﻃﺎرﯾﻦ ‪ ٤‬و ‪ .٥‬وﻋﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل إذا اﺣﺘﻮى اﻹﻃﺎر ‪ ٥‬أو ‪ ٤‬ﻋﻠﻰ‬ ‫وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ ﻫﺪﻓﻬﺎ اﻟﻘﯿﻤﺔ _‪ parent‬ﻟﯿﺘﻢ ﺗﺤﻤﯿﻠﻬﺎ ﻣﻜﺎن اﻹﻃﺎر ‪ ...٣‬وﻫﻜﺬا اﻷﻣﺮ‬ ‫ﺑﺎﻟﻨﺴﺒﺔ ﻟﻺﻃﺎرﯾﻦ ‪ ١‬و ‪ ٢‬ﺑﻤﻘﺎﺑﻞ اﻟﺼﻔﺤﺔ اﻟﺮﺋﯿﺴﯿﺔ‪.‬‬ ‫وﻟﻠﺘﻤﯿﯿﺰ ﺑﯿﻦ ﻫﺬه اﻟﻘﯿﻤﺔ واﻟﻘﯿﻤﺔ _‪ top‬ﻓﺈن اﻟﻘﯿﻤﺔ _‪ top‬ﺗﻘﻮم ﺑﺎﻟﺘﺤﻤﯿﻞ ﻓﻲ اﻟﻤﺴﺘﻮى‬ ‫اﻷول )اﻷﻋﻠﻰ( داﺋﻤﺎً وﺑﻐﺾ اﻟﻨﻈﺮ ﻋﻦ ﻣﻮﻗﻊ اﻟﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ‪.‬‬ ‫ﻧﺮﺟﻮا ان ﻧﻜﻮن ﻟﻢ ﻧﻄﻞ ﻋﻠﯿﻚ وان ﯾﻜﻮن اﻷﻣﺮ ﺳﻬﻞ‬ ‫اﻟﻨﻤﺎذج‬

‫اﻟﻨﻤﺎذج ﻫﻲ اﻟﻄﺮﯾﻘﺔ اﻟﺒﺴﯿﻄﺔ ﺟﺪا اﻟﺘﻲ ﺗﺴﻤﺢ ﻟﺰوارك أن ﯾﺮﺳﻠﻮا ﻟﻚ ﻣﻌﻠﻮﻣﺎت ﺑﺴﯿﻄﻪ ‪ ،‬ﺳﻮاء ﻷﻏﺮاض اﻟﺮد ‪،‬‬ ‫اﻹﺷﺘﺮاك أو ﻣﻌﻠﻮﻣﺎت ﺷﺮاء‪ ،‬أ‪ ،‬اﻟﻌﺪﯾﺪ ﻣﻦ اﻹﺳﺘﻌﻤﺎﻻت اﻵﺧﺮى‪.‬‬ ‫اﻟﻨﻤﺎذج اﻷﺳﺎﺳﯿﻪ‬‫ﯾﺸﺮح ﻫﺬا اﻟﺪرس ﻛﯿﻔﯿﻪ ﺗﻀﻤﯿﻦ ﻧﻤﻮذج داﺧﻞ ﺻﻔﺤﺎت اﻟﻤﻮﻗﻊ و ﯾﻘﻮم ﺑﺘﻌﻠﯿﻤﻚ اﻟﻮﺳﻮم اﻷﺳﺎﺳﯿﻪ ﻷﺷﻜﺎل اﻟﻨﻤﺎذج‬ ‫و ﻣﺤﺘﻮﯾﺎﺗﻬﺎ‬ ‫ﺗﺎﺑﻊ اﻟﻨﻤﺎذج اﻷﺳﺎﺳﯿﻪ‬ ‫ﻧﺘﺎﺑﻊ ﻓﻲ ﻫﺬا اﻟﺪرس ﺑﺎﻗﻲ وﺳﻮم أﺷﻜﺎل اﻟﻨﻤﺎذج و ﺑﻌﺾ اﻷﺷﻜﺎل اﻟﺨﺎﺻﻪ اﻟﻤﺘﻘﺪﻣﺔ‬ ‫ﺗﻨﺴﯿﻖ اﻟﻨﻤﺎذج‬‫ﻫﻨﺎك اﻟﻌﺪﯾﺪ ﻣﻦ اﻟﻮﺳﻮم ) ﺗﺴﻤﻲ ﺑﺎﻟﻮﺳﻮم اﻟﺨﺎدﻋﻪ( و اﻟﺘﻲ ﺗﻌﻄﻲ اﻟﻨﻤﻮذج ﻣﻨﻈﺮ ﺟﯿﺪ ﻓﻲ اﻟﺘﻌﺎﻣﻞ و ﺗﻜﻮن ﺳﻬﻠﺔ‬ ‫اﻹﺳﺘﻌﻤﺎل ﻣﻊ ﻛﻞ اﻟﺰوار واﻟﻘﺮاء‬ ‫ﺻﻮرة ﻟﻠﺰر ‪Submit‬‬ ‫رﺑﻤﺎ ﺗﻜﻮن ﻗﺪ ﻣﻠﻠﺖ ﻣﻦ إﺳﺘﻌﻤﻞ زر ‪ Submit‬اﻟﺮﻣﺎدي وﺗﺮﯾﺪ أن ﺗﻀﯿﻒ ﻋﻠﯿﻪ ﺑﻌﺾ اﻟﺤﯿﻮﯾﻪ ﻫﺬا ﻣﺎ ﻗﻤﻨﺎ‬ ‫ﺑﺸﺮﺣﻪ ﻓﻲ ﻫﺬا اﻟﺪرس‬ ‫اﻟﻨﻤﺎذج اﻷﺳﺎﺳﯿﻪ‬ ‫ﺳﻨﺘﺤﺪث اﻵن أﻋﺰاﺋﻲ ﻋﻦ اﻟﻨﻤﺎذج وﻛﯿﻔﯿﺔ ﺗﻀﻤﯿﻨﻬﺎ ﻓﻲ ﺻﻔﺤﺎت اﻟﻮﯾﺐ‪.‬‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] ﻣﻘﺪﻣﺔ | ‪[ INPUT | ENCTYPE | METHOD | ACTION‬‬ ‫ﻣﻘﺪﻣﺔ‬ ‫ﻻ ﺗﻜﻤﻦ ﺻﻌﻮﺑﺔ اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﻨﻤﺎذج ﻓﻲ ﻛﻮﻧﻬﺎ ﻣﻌﻘﺪة ﺑﺤﺪ ذاﺗﻬﺎ‪ ،‬ﻛﻼ ‪ ...‬ﻓﻬﻲ إﺣﺪى اﻟﻌﻨﺎﺻﺮ اﻟﺘﻲ ﺗﺪﻋﻤﻬﺎ ﻟﻐﺔ‬ ‫‪HTML‬وﻫﻲ ﻣﺠﺮد وﺳﻮم ﻋﺎدﯾﺔ ﻣﺜﻠﻬﺎ ﻣﺜﻞ اﻟﻮﺳﻮم اﻟﺘﻲ ﺗﻌﺎﻣﻠﻨﺎ ﻣﻌﻬﺎ ﻓﻲ ﺟﻤﯿﻊ اﻟﺪروس اﻟﺴﺎﺑﻘﺔ‪ .‬وﺑﺈﻣﻜﺎﻧﻚ‬‫إﻧﺸﺎء اﻟﻨﻤﺎذج ﻓﻲ ﻣﻮﻗﻌﻚ ﺑﻨﻔﺲ اﻟﺴﻬﻮﻟﺔ اﻟﺘﻲ ﺗﺪرج ﻓﯿﻬﺎ ﺟﺪو ًﻻ أو إﻃﺎرًا )ﻫﺬا ﺑﺎﻟﻄﺒﻊ إذا ﻛﻨﺖ ﺗﻌﺘﻘﺪ أن اﻟﺠﺪاول‬ ‫واﻹﻃﺎرات ﺳﻬﻠﺔ( ﻟﻜﻦ اﻟﺘﺪاﺧﻞ ﺑﯿﻨﻬﺎ )وأﻋﻨﻲ اﻟﻨﻤﺎذج( وﺑﯿﻦ ﻟﻐﺎت اﻟﺒﺮﻣﺠﺔ اﻟﻤﺘﻘﺪﻣﺔ ﻓﻲ اﻟﻮﯾﺐ ﻣﺜﻞ‬‫‪JavaScript, CGI‬ﻫﻲ ﻣﺎ ﯾﺠﻌﻠﻬﺎ ﺗﺨﺘﻠﻒ ﻋﻦ ﺳﺎﺑﻘﯿﻬﺎ ﻣﻦ اﻟﻮﺳﻮم أو اﻟﻌﻨﺎﺻﺮ اﻷﺧﺮى‪ .‬ﺧﺎﺻﺔ إذا اﺣﺘﺠﺖ‬ ‫إﻟﻰ ﺑﻌﺾ اﻟﻤﻘﺎﻃﻊ اﻟﺒﺮﻣﺠﯿﺔ ﻣﻦ ﻫﺬه اﻟﻠﻐﺎت ﺿﻤﻦ ﻧﻤﺎذﺟﻚ‪ .‬أﻣﺎ إذا اﻛﺘﻔﯿﺖ ﺑﺎﻹﻣﻜﺎﻧﺎت اﻟﻤﺘﻮاﺿﻌﺔ اﻟﺘﻲ ﺗﻮﻓﺮﻫﺎ‬‫‪HTML‬ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻨﻤﺎذج‪ .‬ﻓﻤﺎ ﻣﻦ ﻣﺸﻜﻠﺔ‪ ...‬ﻷﻧﻪ ﺳﯿﻜﻮن ﺑﺈﻣﻜﺎﻧﻚ اﻟﺘﻌﺎﻣﻞ ﻣﻌﻬﺎ ﺑﻜﻞ ﺑﺴﺎﻃﺔ‪ .‬وﻓﻲ ﻫﺬا اﻟﺪرس ﻟﻦ‬ ‫ﻧﺘﻄﺮق ﺑﺎﻟﻄﺒﻊ إﻟﻰ أي ﻣﻦ اﻟﻠﻐﺎت ﺳﻮى ‪HTML.‬‬

‫إن اﻟﻮﺳﻢ اﻷﺳﺎﺳﻲ ﻟﻠﻨﻤﺎذج واﻟﺘﻲ ﯾﺠﺐ أن ﯾﺪرج ﺟﻤﯿﻊ اﻟﻮﺳﻮم اﻷﺧﺮى اﻟﻤﺘﻌﻠﻘﺔ ﺑﺎﻟﻨﻤﺎذج داﺧﻞ ﻫﺬﯾﻦ اﻟﻮﺳﻤﯿﻦ ‪-:‬‬‫>‪<FORM> ... </FORM‬‬ ‫وﻛﻤﺎ ﺟﺮت اﻟﻌﺎدة ﻧﺤﺘﺎج ﻟﺘﺤﺪﯾﺪ ﺑﻌﺾ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﺗﺘﻌﻠﻖ ﺑﻄﺒﯿﻌﺔ ﻫﺬا اﻟﻨﻤﻮذج ‪.‬وﻟﺪﯾﻨﺎ ﻫﻨﺎ ﺛﻼث ﺧﺼﺎﺋﺺ ‪:‬‬ ‫‪ACTION‬‬ ‫ﺗﺤﺪد اﻟﻌﻨﻮان اﻟﺬي ﺳﯿﺘﻢ إرﺳﺎل ﺑﯿﺎﻧﺎت اﻟﻨﻤﻮذج إﻟﯿﻪ ﻟﺘﺘﻢ ﻣﻌﺎﻟﺠﺘﻬﺎ ﺑﺎﻟﺼﻮرة اﻟﻤﻄﻠﻮﺑﺔ‪ .‬وﻋﺎدة ﯾﻜﻮن ﻫﺬا ﻋﻨﻮاﻧًﺎ‬ ‫ﻟﺒﺮﯾﺪ إﻟﻜﺘﺮوﻧﻲ ‪ Email‬ﺳﻮف ﯾﺘﻢ إرﺳﺎل ﺑﯿﺎﻧﺎت اﻟﻨﻤﻮذج إﻟﯿﻪ‪ .‬أو ﻗﺪ ﯾﻜﻮن ﻋﻨﻮاﻧًﺎ ﻟﺒﺮﻧﺎﻣﺞ ‪ CGI‬ﻣﻮﺟﻮد ﻋﻠﻰ‬ ‫اﻟﻜﻤﺒﯿﻮﺗﺮ اﻟﺨﺎدم ‪ Server‬اﻟﺬي ﺗﺘﻮاﺟﺪ ﻋﻠﯿﻪ ﺻﻔﺤﺔ اﻟﻮﯾﺐ‪ ،‬ﺣﯿﺚ ﯾﺴﺘﻘﺒﻞ ﻫﺬه اﻟﺒﯿﺎﻧﺎت وﯾﻌﺎﻟﺠﻬﺎ ﺣﺴﺐ‬‫اﻟﺘﻌﻠﯿﻤﺎت اﻟﻤﻮﺟﻮدة ﻓﯿﻪ ﻛﺄن ﯾﻀﯿﻔﻬﺎ ﻣﺜ ًﻼ إﻟﻰ إﺣﺪى اﻟﺼﻔﺤﺎت( ﻛﻤﺎ ﯾﺤﺪث ﻋﺎدة ﻓﻲ دﻓﺎﺗﺮ اﻟﺰوار( أو ﯾﺘﺤﻘﻖ ﻣﻦ‬ ‫ﺻﺤﺔ ﺑﻌﺾ اﻟﺤﻘﻮل اﻟﻤﺪﺧﻠﺔ وﻣﻄﺎﺑﻘﺘﻬﺎ ﻟﻤﻌﺎﯾﯿﺮ ﻣﻌﯿﻨﺔ‪ ،‬أو أن ﯾﻘﻮم ﺑﺎﻟﺒﺤﺚ ﻋﻦ ﻛﻠﻤﺔ أو ﻋﺒﺎرة ﺿﻤﻦ ﺻﻔﺤﺎت‬ ‫اﻟﻤﻮﻗﻊ ﻛﻤﺎ ﻓﻲ ﻧﻤﺎذج اﻟﺒﺤﺚ اﻟﻤﻮﺟﻮدة ﻓﻲ ﻣﻮاﻗﻊ اﻟﻮﯾﺐ ‪.‬‬‫>‪<FORM ACTION=\"mailto:[email protected]\"> ... </FORM‬‬‫>‪<FORM ACTION=\"name_and_address_of_CGI_script\"> ... </FORM‬‬ ‫‪METHOD‬‬ ‫ﺗﺤﺪد اﻟﻄﺮﯾﻘﺔ اﻟﺘﻲ ﺳﯿﺘﻢ ﺑﻬﺎ اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﻌﻨﻮان اﻟﻤﺤﺪد ﻓﻲ اﻟﺨﺎﺻﯿﺔ اﻟﺴﺎﺑﻘﺔ ‪ ACTION.‬وﻫﻨﺎك ﻗﯿﻤﺘﯿﻦ ﻟﻬﺬه‬ ‫اﻟﺨﺎﺻﯿﺔ ﻫﻤﺎ ‪: GET‬اﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻓﻲ ﺣﺎﻟﺔ ﻛﻮن ﻋﻤﻠﯿﺔ اﻟﻤﻌﺎﻟﺠﺔ داﺧﻠﯿﺔ أي ﺗﺘﻢ داﺧﻞ اﻟﺨﺎدم ‪ Server‬ﻧﻔﺴﻪ‪ .‬ﻓﻲ‬ ‫ﻋﻨﺪﻣﺎ ﻧﺴﺘﺨﺪم ﻧﻤﻮذج اﻟﺒﺤﺚ ﻋﻦ ﻛﻠﻤﺔ ﻓﻲ اﻟﻤﻮﻗﻊ‪ ،‬ﻓﺈن ﻋﻤﻠﯿﺔ اﻟﻤﻌﺎﻟﺠﺔ )أي اﻟﺒﺤﺚ( ﺗﺠﺮي ﻣﺒﺎﺷﺮة ﻓﻲ اﻟﻤﻮﻗﻊ‪.‬‬ ‫واﻟﻘﯿﻤﺔ اﻟﺜﺎﻧﯿﺔ ﻫﻲ ‪ Post‬وﺗﺴﺘﺨﺪم ﻋﻨﺪﻣﺎ ﺗﻜﻮن ﻋﻤﻠﯿﺔ اﻟﻤﻌﺎﻟﺠﺔ ﺧﺎرﺟﯿﺔ ﻛﺄن ﯾﺘﻢ إرﺳﺎل اﻟﺒﯿﺎﻧﺎت إﻟﻰ ﻋﻨﻮان ﺑﺮﯾﺪ‬ ‫إﻟﻜﺘﺮوﻧﻲ ‪.‬‬‫>‪<FORM ACTION=\"mailto:[email protected]\" METHOD=\"post\"> ... </FORM‬‬‫>‪<FORM ACTION=\"name_and_address_of_CGI_script\" METHOD=\"get\"> ... </FORM‬‬ ‫‪ENCTYPE‬‬ ‫ﻫﺬه اﻟﺨﺎﺻﯿﺔ ﺗﺤﺪد ﻃﺮﯾﻘﺔ اﻟﺘﺮﻣﯿﺰ اﻟﺘﻲ ﺳﯿﺘﻢ إرﺳﺎل اﻟﺒﯿﺎﻧﺎت وﻓﻘﺎً ﻟﻬﺎ‪ .‬وﻫﻲ ﺗﺄﺧﺬ اﻟﻘﯿﻤﺘﯿﻦ اﻟﺘﺎﻟﯿﺘﯿﻦ‪) :‬ﯾﺠﺐ أن‬ ‫ﺗﻜﺘﺐ ﻫﺬه اﻟﻘﯿﻢ ﻛﻤﺎ ﻫﻲ ﻧﺼًﺎ وﺣﺮﻓًﺎ(‬ ‫‪application/x-www-form-urlencoded o‬‬ ‫‪text/plain o‬‬ ‫وﺑﺪون اﻟﺨﻮض ﻓﻲ اﻷﺳﺒﺎب اﻟﺘﻘﻨﯿﺔ اﻟﺘﻲ أدت إﻟﻰ إﯾﺠﺎد ﻫﺬﯾﻦ اﻟﻨﻮﻋﯿﻦ ﻣﻦ ﻃﺮق اﻟﺘﺮﻣﯿﺰ أو ﻓﻲ أﻣﻮر ﺑﺮﻣﺠﯿﺔ‬ ‫ﺑﻌﯿﺪة ﻋﻦ ﻣﻮﺿﻮﻋﻨﺎ‪ ،‬ﻓﺈن اﻟﺪاﻓﻊ ﻹﺳﺘﺨﺪام أي ﻣﻦ اﻟﻘﯿﻤﺘﯿﻦ ﻫﻮ ﻃﺒﯿﻌﺔ ﻋﻤﻠﯿﺔ اﻟﻤﻌﺎﻟﺠﺔ اﻟﺘﻲ ﺳﺘﺠﺮى ﻋﻠﻰ اﻟﺒﯿﺎﻧﺎت‬ ‫أو ﻃﺒﯿﻌﺔ ﺑﺮﻧﺎﻣﺞ اﻟﺒﺮﯾﺪ اﻹﻟﻜﺘﺮوﻧﻲ اﻟﺬي ﺳﺘﺴﺘﻘﺒﻞ ﻫﺬه اﻟﺒﯿﺎﻧﺎت ﻣﻦ ﺧﻼﻟﻪ )إذا ﻛﺎن ﯾﺪﻋﻢ ‪ MIME‬أم ﻻ‪ ،‬وﻫﻲ‬ ‫إﺧﺘﺼﺎر ﻟﻠﻌﺒﺎرة ‪ Extentions Mail Internet Multi-purpose‬وﻫﻲ ﻣﻦ اﻟﻤﻌﺎﯾﯿﺮ اﻟﺴﺎﺋﺪة ﻓﻲ اﻹﻧﺘﺮﻧﺖ‬ ‫واﻟﺘﻲ ﺗﺘﻌﻠﻖ ﺑﻨﻘﻞ ﺟﻤﯿﻊ أﻧﻮاع اﻟﺒﯿﺎﻧﺎت ﻣﻦ ﺻﻮت وﺻﻮرة وﻟﯿﺲ ﻓﻘﻂ اﻟﻨﺼﻮص ﻣﻦ ﺧﻼل اﻟﺒﺮﯾﺪ اﻹﻟﻜﺘﺮوﻧﻲ(‪.‬‬‫وﻣﺎ ﯾﻌﻨﯿﻨﺎ ﻫﻨﺎ ﻫﻮ اﻟﻔﺮق ﺑﯿﻦ اﻟﻄﺮﯾﻘﺘﯿﻦ ﻣﻦ ﺣﯿﺚ ﻃﺮﯾﻘﺔ إرﺳﺎل واﺳﺘﻘﺒﺎل اﻟﺒﯿﺎﻧﺎت‪ .‬ﻓﻌﻨﺪ اﺳﺘﺨﺪام ‪text/plain‬‬ ‫ﺳﺘﺼﻞ اﻟﺒﯿﺎﻧﺎت ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬‫‪NAME=Ahmed Salah‬‬‫‪Address=Cairo, Egypt‬‬‫‪[email protected]‬‬

‫(اﻟﻜﻠﻤﺎت ‪ Name, Address, Email‬ﻫﻲ أﺳﻤﺎء اﻟﺤﻘﻮل ﻓﻲ اﻟﻨﻤﻮذج وﻧﻘﻮم ﻧﺤﻦ ﺑﺘﻌﺮﯾﻔﻬﺎ أﺛﻨﺎء ﻋﻤﻠﯿﺔ‬ ‫ﺗﺼﻤﯿﻢ اﻟﻨﻤﻮذج أﻣﺎ اﻟﻨﺼﻮص اﻟﻈﺎﻫﺮة ﺑﻌﺪ إﺷﺎرة اﻟﻤﺴﺎواة ﻓﻬﻲ اﻟﺒﯿﺎﻧﺎت اﻟﻤﺪﺧﻠﺔ‪ ،‬وﺳﻮف ﻧﺘﺤﺪث ﻋﻦ ﺗﻌﺮﯾﻒ‬ ‫أﺳﻤﺎء اﻟﺤﻘﻮل ﺑﻌﺪ ﻗﻠﯿﻞ )‬ ‫أﻣﺎ ﻋﻨﺪ اﺳﺘﺨﺪام ‪ application/x-www-form-urlencoded‬ﻓﺴﺘﺼﻞ اﻟﺒﯿﺎﻧﺎت ﺑﺎﻟﺸﻜﻞ‪:‬‬‫‪NAME=Ahmed+Salah&Address=Cairo+,+Egypt&[email protected]‬‬ ‫وﻟﻚ أن ﺗﺨﯿﻞ ﻣﺒﻠﻎ اﻟﺼﻌﻮﺑﺔ ﻓﻲ ﺗﺤﻠﯿﻠﻬﺎ إذا اﺣﺘﻮت ﻋﻠﻰ ﻋﺸﺮات اﻟﺤﻘﻮل ‪.‬ﻟﺬﻟﻚ ﺗﺘﻮﻓﺮ ﺑﺮاﻣﺞ ﺧﺎﺻﺔ ﺗﻌﺮف ﺑِـ‬ ‫‪Formaters‬ﺗﻘﻮم ﺑﺈﻋﺎدة ﺗﺮﺗﯿﺐ اﻟﺒﯿﺎﻧﺎت اﻟﻤﺮﺳﻠﺔ ﻣﻦ ﺧﻼل اﻟﻨﻤﺎذج ﺑﺸﻜﻞ ﻣﻔﻬﻮم ﺑﺤﯿﺚ ﺗﺼﺒﺢ ﻛﻤﺎ ﻟﻮ ﻛﺎﻧﺖ‬ ‫ﻣﺮﺳﻠﺔ ﺑﺘﺮﻣﯿﺰ ‪ text/plain‬وإﻟﯿﻚ أﺣﺪﻫﺎ وﻫﻮ ﺑﺮﻧﺎﻣﺞ ﻣﺠﺎﻧﻲ ﯾﺪﻋﻰ ‪ UrlCook.‬ﻟﻜﻦ ﻻ ﺗﻌﺘﻘﺪ أن اﻟﻄﺮﯾﻘﺔ‬ ‫اﻷوﻟﻰ ﻫﻲ اﻷﻓﻀﻞ داﺋﻤﺎً ﻓﺬﻟﻚ ﯾﻌﺘﻤﺪ ﻛﻤﺎ ﻗﻠﻨﺎ ﻋﻠﻰ ﻃﺮﯾﻘﺔ اﻟﻤﻌﺎﻟﺠﺔ واﻟﻨﻘﻞ ﺑﺎﻟﺒﺮﯾﺪ‪ .‬ﻟﺬﻟﻚ ﻻ ﺿﯿﺮ ﻣﻦ أن ﺗﺠﺮب‬ ‫اﻟﻄﺮﯾﻘﺘﯿﻦ ﻟﺘﻌﺮف أﯾﻬﻤﺎ أﻧﺴﺐ ﻟﻚ ‪.‬‬ ‫إذن ﺧﻼﺻﺔ اﻟﻘﻮل‪ :‬ﻗﺪ ﺗﻜﻮن أﻓﻀﻞ ﺻﯿﻐﺔ ﻟﺘﻌﺮﯾﻒ اﻟﻨﻤﻮذج ﻓﻲ ﺣﺎﻟﺔ أردت اﺳﺘﻘﺒﺎل اﻟﺒﯿﺎﻧﺎت ﻣﻦ ﻣﻮﻗﻌﻚ إﻟﻰ‬ ‫ﻋﻨﻮان ﺑﺮﯾﺪك اﻹﻟﻜﺘﺮوﻧﻲ ﻫﻲ ‪:‬‬‫‪<FORM ACTION=\"mailto:[email protected]\" METHOD=\"post\" ENCTYPE=\"text/plain\">...‬‬‫>‪</FORM‬‬ ‫وﺑﻬﺬا ﻧﻜﻮن ﻗﺪ إﻧﺘﻬﯿﻨﺎ ﻣﻦ ﻋﻤﻠﯿﺔ ﺗﻌﺮﯾﻒ اﻟﻨﻤﻮذج وﺧﺼﺎﺋﺼﻪ‪ ،‬ﻟﻜﻦ اﻧﺘﻈﺮ ﻓﻤﺎ زﻟﻨﺎ ﻓﻲ ﺑﺪاﯾﺔ اﻟﻄﺮﯾﻖ‪.‬‬ ‫‪INPUT‬‬ ‫ﻧﺒﺪأ اﻵن ﻓﻲ ﻋﻤﻠﯿﺔ ﺗﻌﺮﯾﻒ أﺷﻜﺎل اﻟﺒﯿﺎﻧﺎت ﻓﻲ اﻟﻨﻤﻮذج‪ .‬وﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <INPUT‬ﻟﺘﻌﺮﯾﻔﻬﺎ واﻟﺤﻘﯿﻘﺔ أن ﻫﺬه‬ ‫اﻷﺷﻜﺎل ﻫﻲ ﻣﺠﺮد ﺧﺼﺎﺋﺺ أو ﺑﺎﻷﺣﺮى ﻗﯿﻢ ﻟﺨﺼﺎﺋﺺ ﺗﺎﺑﻌﺔ ﻟﻬﺬا اﻟﻮﺳﻢ‪ .‬ﻛﯿﻒ؟ ‪ ...‬ﻟﻨﺄﺧﺬ ﻣﺜﺎ ًﻻ ﻋﻠﻰ ذﻟﻚ‬ ‫ﻷوﺿﺢ ﻟﻚ ﻫﺬا اﻟﻤﻔﻬﻮم‬‫ﺣﺴﻨًﺎ‪ ،‬ﻟﻘﺪ اﺳﺘﺨﺪﻣﺖ اﻟﻮﺳﻢ >‪ <INPUT‬ﻟﺘﻌﺮﯾﻒ ﻫﺬا اﻟﺸﻜﻞ )ﻫﺬه إﺗﻔﻘﻨﺎ ﻋﻠﯿﻬﺎ ﻣﺴﺒﻘﺎً( وﻣﻦ ﺛﻢ ﻗﻤﺖ ﺑﺈﺿﺎﻓﺔ‬ ‫اﻟﺨﺎﺻﯿﺔ ‪ TYPE‬ﻟﻬﺬا اﻟﻮﺳﻢ ﻟﺘﺤﺪﯾﺪ ﻧﻮع اﻟﺸﻜﻞ اﻟﺬي أرﯾﺪه وأﻋﻄﯿﺘﻬﺎ اﻟﻘﯿﻤﺔ ‪ TEXT‬أي‬‫>‪<FORM ...‬‬‫>\"‪<INPUT TYPE=\"text‬‬‫>‪</FORM‬‬ ‫ﻣﻠﺨﺺ ﺳﺮﯾﻊ‬‫إﻟﯿﻚ ﺟﻤﯿﻊ اﻷﺷﻜﺎل )اﻟﻘﯿﻢ( اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ اﻟﺨﺎﺻﯿﺔ ‪ TYPE‬وﺳﻮف أﺗﺮﻛﻬﺎ اﻵن‬ ‫ﺑﺪون ﺗﻌﻠﯿﻖ ﻟﺤﯿﻦ ﻣﻨﺎﻗﺸﻬﺎ ﻻﺣﻘًﺎ ﺑﺸﻜﻞ ﻣﻔﺼﻞ ‪.‬ﻣﻊ ﻣﻼﺣﻈﺔ أن ﻫﻨﺎك ﺷﻜﻠﯿﻦ‬ ‫آﺧﺮﯾﻦ ﻧﺪرﺟﻬﻤﺎ ﺑﺎﻟﻮﺳﻮم‬‫اﻟﻨﺘﯿﺠﻪ‬ ‫>‪<SELECT>, <TEXTAREA‬‬ ‫اﻟﻮﺳﻢ‬ ‫>\"‪<INPUT TYPE=\"text‬‬

‫>\"‪<INPUT TYPE=\"password‬‬ ‫>\"‪<INPUT TYPE=\"hidden‬‬ ‫>\"‪<INPUT TYPE=\"radio‬‬ ‫>\"‪<INPUT TYPE=\"checkbox‬‬ ‫>\"‪Submit Query <INPUT TYPE=\"submit‬‬ ‫>\"‪Reset <INPUT TYPE=\"reset‬‬ ‫>\"‪<INPUT TYPE=\"button‬‬‫وﺟﻤﯿﻊ اﻟﻘﯿﻢ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻌﻬﺎ‪TYPE‬أرﺟﻮ أن أﻛﻮن ﻗﺪ وﺿﺤﺖ ﻟﻚ اﻵن وﻇﯿﻔﺔ اﻟﺨﺎﺻﯿﺔ‬ ‫وﻧﻌﻮد اﻵن إﻟﻰ ﻣﺜﺎﻟﻨﺎ‪ ..‬اﻟﺨﺎﺻﯿﺔ اﻟﺜﺎﻧﯿﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ >‪ <INPUT‬ﻫﻲ ‪ NAME‬وﺗﺴﺘﺨﺪم ﻟﺘﺴﻤﯿﺔ ﺣﻘﻞ‬ ‫اﻟﺒﯿﺎﻧﺎت ﺣﯿﺚ ﻗﻤﺖ ﺑﺈﻋﻄﺎء اﻹﺳﻢ ‪ address‬ﻟﻬﺬا اﻟﺤﻘﻞ ﻓﻲ اﻟﻤﺜﺎل‪) .‬ﻟﻚ ﻛﻞ اﻟﺤﺮﯾﺔ ﻓﻲ إﻋﻄﺎء اﻹﺳﻢ اﻟﺬي‬ ‫ﺗﺮﯾﺪه ﻟﻠﺤﻘﻞ(‪ .‬واﻟﺤﻘﯿﻘﺔ أن ﻫﺬا اﻹﺳﻢ ﯾﻌ ّﺮف اﻟﺤﻘﻞ ﻓﻲ داﺧﻞ اﻟﻨﻤﻮذج ﻧﻔﺴﻪ‪ ،‬ﺑﺤﯿﺚ ﯾﻤﻜﻦ اﺳﺘﺨﺪاﻣﻪ ﻓﯿﻤﺎ ﺑﻌﺪ‬ ‫ﻟﻠﺤﺎﺟﺎت اﻟﺒﺮﻣﺠﯿﺔ وﺿﺮورات اﻟﻤﻌﺎﻟﺠﺔ إن وﺟﺪت ﻣﻦ ﻗﺒﻞ اﻟﺒﺮاﻣﺞ اﻟﺘﻲ ﻗﺪ ﺗﻀﯿﻔﻬﺎ ﻛﻤﺼﻤﻢ ﻟﻠﻤﻮﻗﻊ‪ .‬وﺣﺘﻰ‬ ‫ﻋﻨﺪﻣﺎ ﺗﺮﯾﺪ أن ﯾُﺮﺳﻞ اﻟﻨﻤﻮذج إﻟﯿﻚ ﺑﺎﻟﺒﺮﯾﺪ ﻓﺈن ﺣﻘﻮﻟﻪ ﺗﻌﺮّف ﺑﺎﻻﺳﻢ اﻟﺬي أدرﺟﺘﻪ ﻟﻬﺎ ﻣﻦ ﺧﻼل ﻫﺬه اﻟﺨﺎﺻﯿﺔ‪.‬‬ ‫)ﻻﺣﻆ ﻣﺎ ﻗﻠُﺘﻪ ﺳﺎﺑﻘﺎً ﻋﻦ ﺗﻌﺮﯾﻒ أﺳﻤﺎء اﻟﺤﻘﻮل ﻋﻨﺪﻣﺎ ﺗﺤﺪﺛﻨﺎ ﻋﻦ اﻟﺘﺮﻣﯿﺰ واﻟﻄﺮق اﻟﺘﻲ ﺗﺼﻞ ﺑﻬﺎ ﻣﺤﺘﻮﯾﺎت‬ ‫اﻟﻨﻤﻮذج(‪.‬إﻟﯿﻚ ﻫﺬا اﻟﻤﺜﺎل‬ ‫‪Cairo, Egypt‬‬‫‪Please enter your address :‬‬ ‫اﻟﻌﺒﺎرة ‪ Please enter your address :‬ﻓﻬﻲ ﻣﺠﺮد ﻋﺒﺎرة ﺗﻮﺿﯿﺤﯿﺔ أﺿﻔﺘﻬﺎ ﻟﯿﻌﺮف اﻟﺰاﺋﺮ ﻣﺎ اﻟﺬي‬ ‫ﯾﺠﺐ ﻋﻠﯿﻪ ﻛﺘﺎﺑﺘﻪ وﺗﺴﺘﻄﯿﻊ ﺻﯿﺎﻏﺔ ﻫﺬه اﻟﻌﺒﺎرة ﻛﻤﺎ ﺗﺮﯾﺪ‪ .‬ﻓﻔﻲ ﻛﻞ اﻷﺣﻮال ﻟﯿﺲ ﻟﻬﺎ ﻋﻼﻗﺔ ﺑﺠﻮﻫﺮ اﻟﻨﻤﻮذج ﻧﻔﺴﻪ‬ ‫ﺑﻌﻜﺲ اﻟﺨﺎﺻﯿﺔ ‪NAME.‬‬‫>‪<FORM ...‬‬‫>\"‪Please enter your address : <INPUT TYPE=\"text\" NAME=\"address‬‬‫>‪</FORM‬‬ ‫أﻣﺎ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻌﺒﺎرة اﻟﻈﺎﻫﺮة داﺧﻞ اﻟﺤﻘﻞ ‪) Egypt ،Cairo‬أو أي ﻋﺒﺎرة أﺧﺮى ﺗﺮﯾﺪﻫﺎ( وﻫﻲ ﺑﻤﺜﺎﺑﺔ اﻟﻘﯿﻤﺔ‬ ‫اﻹﻓﺘﺮاﺿﯿﺔ اﻟﺘﻲ ﺗﺮﯾﺪﻫﺎ ﻟﻠﺤﻘﻞ‪ ،‬ﻓﺒﺎﻹﻣﻜﺎن إﻇﻬﺎرﻫﺎ ﻣﻦ ﺧﻼل اﻟﺨﺎﺻﯿﺔ ‪ .VALUE‬وﻫﺬه اﻟﺨﺎﺻﯿﺔ ﺗﺴﺘﺨﺪم ﻓﻲ‬ ‫اﻟﺤﺎﻻت اﻟﺘﻲ ﻧﺘﻮﻗﻊ ﻓﯿﻬﺎ ﻛﺘﺎﺑﺔ ﻗﯿﻤﺔ دارﺟﺔ أو ﻣﺘﻜﺮرة ﻣﻦ ﻗﺒﻞ ﻣﻌﻈﻢ اﻟﺰوار وﻟﻠﺘﺴﻬﯿﻞ ﻋﻠﯿﻬﻢ ﯾﺘﻢ ﺗﻌﯿﯿﻨﻬﺎ ﻛﻘﯿﻤﺔ‬ ‫إﻓﺘﺮاﺿﯿﺔ وﺑﺎﻟﻄﺒﻊ ﻣﻊ ﺗﻮﻓﺮ إﻣﻜﺎﻧﯿﺔ ﺣﺬﻓﻬﺎ وﻛﺘﺎﺑﺔ ﻣﺎ ﯾﺮﯾﺪﻧﻪ ﺑﺪ ًﻻ ﻣﻨﻬﺎ‪.‬‬‫>‪<FORM ...‬‬‫>\"‪Please enter your address : <INPUT TYPE=\"text\" NAME=\"address\" VALUE=\"Cairo, Egypt‬‬‫>‪</FORM‬‬ ‫ﻗﺪ ﻧﺤﺘﺎج أﺣﯿﺎﻧًﺎ إﻟﻰ ﺗﺤﺪﯾﺪ ﺣﺠﻢ اﻟﺤﻘﻞ وﻟﺬﻟﻚ ﻧﺴﺘﺨﺪم اﻟﺨﺎﺻﯿﺔ ‪ SIZE‬ﻣﻊ اﻟﺮﻗﻢ اﻟﺬي ﻧﺮﯾﺪه ﻛﺤﺠﻢ ﻟﻠﺤﻘﻞ‪،‬‬ ‫ﻟﻨﺠﺮب اﻟﺮﻗﻢ ‪٤٠‬‬‫>‪<FORM ...‬‬‫‪Please enter your address : <INPUT TYPE=\"text\" NAME=\"address\" VALUE=\"Nablus,‬‬‫>\"‪Palestine\" SIZE=\"40‬‬‫>‪</FORM‬‬

‫‪Cairo, Egypt‬‬‫‪Please enter your address :‬‬ ‫أو ﻟﻨﺠﺮب اﻟﺮﻗﻢ ‪ ١٠‬أﯾﻀًﺎ‬ ‫‪Cairo, Egypt‬‬‫‪Please enter your address :‬‬ ‫ﻻ ﯾﻮﺟﺪ ﻟﻠﺨﺎﺻﯿﺔ ‪ SIZE‬أي ﺻﻔﺔ ﺗﺤﻜﻤﯿﺔ ﺑﺎﻟﻨﺴﺒﺔ ﻟﺤﺠﻢ اﻟﻤﺪﺧﻼت اﻟﺘﻲ ﯾﻤﻜﻦ ﻟﻠﺰاﺋﺮ أن ﯾﻜﺘﺒﻬﺎ داﺧﻞ اﻟﺤﻘﻞ‪.‬‬ ‫وﺑﻌﺒﺎرة أﺧﺮى‪ :‬ﺻﺤﯿﺢ أﻧﻨﺎ ﺣﺪدﻧﺎ ﺣﺠﻢ اﻟﺤﻘﻞ ﻟﻜﻦ ذﻟﻚ ﯾﺴﺮي ﻓﻘﻂ ﻋﻠﻰ ﻣﻈﻬﺮه ﻋﻠﻰ اﻟﺸﺎﺷﺔ‪ .‬وﻻ ﯾﻮﺟﺪ ﻣﺎ ﯾﻤﻨﻊ‬‫اﻟﺰاﺋﺮ ﻣﻦ اﻟﻜﺘﺎﺑﺔ ﺑﺤﯿﺚ ﯾﺘﺠﺎوز اﻟﻨﺺ ﺣﺠﻢ اﻟﺤﻘﻞ اﻟﻤﺤﺪد‪ .‬وﻫﻨﺎ ﯾﺄﺗﻲ دور اﻟﺨﺎﺻﯿﺔ ‪ MAXLENGTH‬ﻟﺘﺘﺤﻜﻢ‬ ‫ﺑﺎﻟﺤﺪ اﻷﻗﺼﻰ ﻟﻠﻨﺺ اﻟﻤﺪﺧﻞ‪.‬‬‫>‪<FORM ...‬‬‫‪Please enter your address : <INPUT TYPE=\"text\" NAME=\"address\" VALUE=\"Nablus,‬‬‫\"‪Palestine‬‬‫>\"‪SIZE=\"40\" MAXLENGTH=\"30‬‬‫>‪</FORM‬‬ ‫‪Cairo, Egypt‬‬‫‪Please enter your address :‬‬ ‫ﺣﺎول اﻟﻜﺘﺎﺑﺔ ﻓﻲ ﻫﺬا اﻟﺤﻘﻞ ﻷﻛﺜﺮ ﻣﻦ ‪ ٣٠‬ﺣﺮﻓﺎً وأﻧﻈﺮ ﻣﺎذا ﺳﯿﺤﺪث؟‬‫اﻟﻨﻮع اﻟﺜﺎﻧﻲ ﻣﻦ اﻟﺤﻘﻮل اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﻲ اﻟﻨﻤﺎذج ﻫﻮ ﺣﻘﻞ ‪ password‬وﻫﻮ ﯾﺸﺒﻪ اﻟﺤﻘﻞ ‪ text‬ﻣﻦ ﺣﯿﺚ اﻟﺨﺼﺎﺋﺺ‬‫ﺗﻤﺎﻣًﺎ ﻏﯿﺮ أن ﻣﺪﺧﻼﺗﻪ ﺗﻈﻬﺮ ﻋﻠﻰ ﺷﻜﻞ ****** ﻣﻬﻤﺎ ﻛﺎﻧﺖ‪ ،‬وﻫﻮ اﻟﻔﺮق اﻟﻮﺣﯿﺪ ﺑﯿﻨﻬﻤﺎ‪ .‬ورﺑﻤﺎ ﺗﻜﻮن ﻗﺪ اﺳﺘﻨﺘﺠﺖ‬ ‫اﻵن أن ﻫﺬا اﻟﻨﻮع ﻣﻦ اﻟﺤﻘﻮل ﯾﺴﺘﺨﺪم ﻋﻨﺪﻣﺎ ﯾﻮﺟﺪ ﺣﺎﺟﺔ ﻹدﺧﺎل ﻛﻠﻤﺔ ﺳﺮ ﻣﻦ ﻗﺒﻞ اﻟﺰاﺋﺮ ﻓﻲ اﻟﻨﻤﻮذج‬‫>‪<FORM ...‬‬‫‪Please enter your name :‬‬‫>\"‪<INPUT TYPE=\"text\" NAME=\"the name\" SIZE=\"40\" MAXLENGTH=\"30‬‬‫‪Please enter your passwod :‬‬‫>\"‪<INPUT TYPE=\"password\" NAME=\"the password\" 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=\"\" 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‬‬ ‫ﻓﻲ اﻟﻨﻤﻮذج اﻟﺜﺎﻧﻲ ‪...‬‬‫>\"‪<INPUT TYPE=\"hidden\" NAME=\"my forms\" VALUE=\"form2‬‬ ‫ﻓﻲ اﻟﻨﻤﻮذج اﻟﺜﺎﻟﺚ ‪...‬‬‫>\"‪<INPUT TYPE=\"hidden\" NAME=\"my forms\" VALUE=\"form3‬‬‫وﺑﺬﻟﻚ ﻋﻨﺪﻣﺎ ﺗﺼﻠﻚ اﻟﺒﯿﺎﻧﺎت اﻟﻤﺮﺳﻠﺔ ﻣﻦ ﻗﺒﻞ أي زاﺋﺮ اﺳﺘﺨﺪم أي ﻣﻦ اﻟﻨﻤﺎذج اﻟﺜﻼﺛﺔ ﺳﯿﺼﻠﻚ أﯾﻀﺎ ﺣﻘﻞ إﺿﺎﻓﻲ‬ ‫ﻗﻤﺖ أﻧﺖ ﻧﻔﺴﻚ ﺑﺘﻌﺒﺌﺘﻪ ﺳﻠﻔًﺎ ﻋﻨﺪﻣﺎ ﺻﻤﻤﺖ اﻟﻨﻤﻮذج وذﻟﻚ ﺑﺄﺣﺪ اﻷﺷﻜﺎل اﻟﺘﺎﻟﯿﺔ‪:‬‬ ‫‪ my forms=form1‬أو‬ ‫‪ my forms=form2‬أو‬ ‫‪my forms=form3‬‬‫إذن ﻧﺴﺘﻄﯿﻊ اﻟﻘﻮل أن اﻟﺤﻘﻞ اﻟﻤﺨﻔﻲ ﻫﻮ ﻻﺳﺘﺨﺪام اﻟﻤﺼﻤﻢ وﻟﯿﺲ اﻟﺰاﺋﺮ‪ ،‬وأن ﻗﯿﻤﺘﻪ ﺗﺪﺧﻞ ﻣﺒﺎﺷﺮة ﻋﻨﺪ اﻟﺘﺼﻤﯿﻢ‪.‬‬ ‫وﯾﺴﺘﺨﺪم ﺑﻬﺪف ﺗﻌﺮﯾﻒ ﻗﯿﻢ ﻣﺎ ﺳﯿﺘﻢ إرﺳﺎﻟﻬﺎ ﺟﻨﺒﺎً إﻟﻰ ﺟﻨﺐ ﺿﻤﻦ ﺑﯿﺎﻧﺎت اﻟﻨﻤﻮذج اﻟﺘﻲ ﻗﺎم اﻟﺰاﺋﺮ ﺑﺘﻌﺒﺌﺘﻬﺎ‬‫ﻫﺎم ﺟﺪاﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻨﻤﺎذج ﺑﺸﻜﻞ ﻋﺎم‪ .‬ﻣﻦ أﺟﻞ إﻇﻬﺎر اﻟﻨﻤﻮذج ﺑﺼﻮرة ﻣﺮﺗﺒﺔ وﻣﻨﺴﻘﺔ واﻟﺘﺤﻜﻢ ﺑﻤﻮﻗﻊ اﻟﺤﻘﻮل ﻓﯿﻪ ﻓﻤﻦ‬ ‫اﻷﻓﻀﻞ داﺋﻤﺎً وﺿﻌﻪ داﺧﻞ ﺟﺪول ﻣﻊ ﺟﻌﻞ اﻟﺠﺪول ﺑﻼ ﺣﺪود ‪.‬‬ ‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬‫ﺗﺎﺑﻊ اﻟﻨﻤﺎذج اﻷﺳﺎﺳﯿﻪ‬

‫ﻟﻘﺪ ﻗﻤﻨﺎ ﻓﻲ اﻟﺪرس اﻟﺴﺎﺑﻖ ﺑﻤﻨﺎﻗﺸﺔ اﻟﻮﺳﻮم اﻷﺳﺎﺳﯿﺔ ﻟﻠﻨﻤﺎذج وﺗﻌﻠﻤﻨﺎ ﻛﯿﻔﯿﺔ إدراج اﻟﻨﻤﺎذج ﻓﻲ ﺻﻔﺤﺎت اﻟﻮﯾﺐ‪.‬‬ ‫ﻛﻤﺎ ﻗﻤﻨﺎ ﺑﻤﻨﺎﻗﺸﺔ ﺑﻌﺾ أﺷﻜﺎل إدﺧﺎل اﻟﺒﯿﺎﻧﺎت ﻓﻲ اﻟﻨﻤﻮذج وﻫﻲ ‪ Text, Password, Hidden‬ﻫﻞ ﺗﺬﻛﺮ ﻛﯿﻒ‬ ‫ﻧﻘﻮم ﺑﺘﻌﺮﯾﻔﻬﺎ؟ راﺟﻊ اﻟﺪرس اﻟﺴﺎﺑﻖ إن أردت اﻟﻤﺰﯾﺪ ﻣﻦ اﻟﺘﻮﺿﯿﺢ‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] ‪[ Select Boxes Drop-down | CHECKBOX | RADIO‬‬ ‫أﺳﻮف ﻧﺘﺎﺑﻊ اﻵن ﻣﻊ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻷﺷﻜﺎل اﻟﺨﺎﺻﺔ ﺑﺎﻻﺧﺘﯿﺎر ﻣﻦ ﻣﺘﻌﺪد وﻫﻲ ﺑﺎﻟﻤﻨﺎﺳﺒﺔ ﺛﻼﺛﺔ أﻧﻮاع‪،Radio :‬‬ ‫‪ Checkbox‬و‪Boxes Select down-Drop‬‬ ‫‪RADIO‬‬ ‫ﻧﺒﺪأ ﻣﻊ اﻟﺸﻜﻞ اﻟﻤﺴﻤﻰ ‪ .RADIO‬وﻣﻦ ﻣﺴﻮﻏﺎت اﺳﺘﺨﺪام ﻫﺬا اﻟﺸﻜﻞ أن اﻟﺴﺆال اﻟﻤﻄﺮوح ﯾﻨﺒﻐﻰ أن ﯾﻜﻮن ﻟﻪ‬ ‫إﺟﺎﺑﺔ واﺣﺪة ﻓﻘﻂ‪ ،‬أو ﺑﻌﺒﺎرة أﺧﺮى ﻋﻠﻰ اﻟﺰاﺋﺮ أن ﯾﺨﺘﺎر إﺟﺎﺑﺔ واﺣﺪة ﻓﻘﻂ‪ .‬و ﯾﻜﻮن اﻟﻮﺳﻢ ﺑﻬﺬا اﻟﺸﻜﻞ‬‫>\"‪<input type=\"radio‬‬ ‫وﻛﻤﺜﺎل‪ ،‬ﻟﻨﻔﺮض أﻧﻨﻲ أرﯾﺪ أن أﺳﺄل اﻟﺰاﺋﺮ ﻋﻦ اﻟﻠﻮن اﻟﻤﻔﻀﻞ ﻟﺪﯾﻪ ﻟﻜﻦ ﺑﺪﻻ ﻣﻦ أن ﯾﻜﻮن ﻋﻠﻰ ﺷﻜﻞ ﻗﺎﺋﻤﺔ‬ ‫إﺧﺘﯿﺎر أرﯾﺪه أن ﯾﻜﻮن ﻋﻠﻰ ﺷﻜﻞ ‪ RADIO‬وذﻟﻚ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‬ ‫اﻷﺣﻤﺮ اﻷزرق اﻷﺳﻮد اﻷﺧﻀﺮ‬ ‫ﻓﻜﯿﻒ ﻧﻨﺸﻲء ﻣﺜﻞ ﻫﺬه اﻟﻘﺎﺋﻤﺔ؟ ﻫﺬا ﻫﻮ وﺳﻢ ﻫﺬه اﻟﻘﺎﺋﻤﺔ‬‫>‪<form‬‬‫اﻷﺧﻀﺮ>\"‪<input name=\"color\" type=\"radio\" value=\"Green‬‬‫اﻷﺳﻮد>\"‪<input name=\"color\" type=\"radio\" value=\"black‬‬‫اﻷزرق>\"‪<input name=\"color\" type=\"radio\" value=\"blue‬‬‫اﻷﲪﺮ>\"‪<input name=\"color\" type=\"radio\" value=\"red‬‬‫>‪</form‬‬ ‫ﻧﺤﺘﺎج اﻵن إﻟﻰ ﺗﺴﻤﯿﺔ ﻫﺬه اﻟﻤﺪﺧﻼت‪ ،‬أي أﻧﻨﺎ ﺳﻨﺴﺘﺨﺪم اﻟﺨﺎﺻﯿﺔ ‪ NAME‬ﻣﻌﻬﺎ‪ .‬أﻣﺎ اﻻﺳﻢ اﻟﻤﻌﻄﻰ ﺑﺤﺪ ذاﺗﻪ‬ ‫ﻓﻤﻦ اﻷﻓﻀﻞ أن ﯾﻜﻮن ﻣﺮﺗﺒﻄﺎً ﻧﻮﻋﺎً ﻣﺎ ﺑﻤﻮﺿﻮع اﻟﺴﺆال‪ ،‬ﻟﯿﺲ ﻷن ﻫﺬا ﺿﺮوري ﻟﻠﻨﻤﻮذج ﺑﻞ ﻫﻮ ﺿﺮوري ﻟﻚ‬ ‫ﻛﺸﺨﺺ ﺳﯿﻘﻮم ﺑﺎﺳﺘﻘﺒﺎل اﻟﺒﯿﺎﻧﺎت اﻟﻤﺮﺳﻠﺔ ﻣﻦ ﺧﻼل اﻟﻨﻤﻮذج‪ ،‬وﺑﺎﻟﺘﺎﻟﻲ ﻣﻦ اﻷﻓﻀﻞ أن ﯾﻮﺟﺪ ﻋﻨﻮان ﻣﻌﺒّﺮ‬ ‫ﻟﻠﺒﯿﺎﻧﺎت ﺑﻐﺮض اﻟﺘﻤﯿﯿﺰ‪ .‬وﺑﻤﺎ أﻧﻨﺎ ﻫﻨﺎ ﻧﺘﺤﺪث ﻋﻦ اﻷﻟﻮان ﻓﻠﯿﻜﻦ ﻫﺬا اﻻﺳﻢ ﻫﻮ ‪ Color‬اﻛﻤﺎ ﻗﻤﻨﺎ ﺑﺈﻋﻄﺎء ﻗﯿﻤﺔ‬ ‫ﻟﻜﻞ ﻣﺪﺧﻠﺔ ﻓﻲ ﻫﺬه اﻟﻘﺎﺋﻤﺔ وذﻟﻚ ﺣﺴﺐ ﻣﺎ ﻧﺮاه ﻣﻨﺎﺳﺒًﺎ‪،‬و إﺳﺘﺨﺪاﻣﻨﺎ ﻟﺬﻟﻚ اﻟﺨﺎﺻﯿﺔ ‪ ، VALUE‬ﻟﺬﻟﻚ ﺑﻘﻰ ﻋﻠﯿﻨﺎ‬ ‫ﺗﻌﺮﯾﻒ ﻛﻞ ﺣﻘﻞ ﺑﺎﺳﻢ ﺻﺮﯾﺢ ﯾﻮﺿﺢ ﻣﺤﺘﻮاه ﻟﻠﺰاﺋﺮ و ﻫﻮ اﺳﻤﺎء اﻷﻟﻮان ﻗﺒﻞ اﻟﻮﺳﻢ راﺟﻊ اﻟﻔﺼﻞ اﻟﺴﺎﺑﻖ‬ ‫وﻫﻨﺎك ﺧﺎﺻﯿﺔ ﺗﺘﻌﻠﻖ ﺑﻬﺬا اﻟﻨﻮع ﻣﻦ اﻟﺤﻘﻮل‪ ،‬وﻫﻲ أﻧﻚ إذا أردت أن ﯾﻈﻬﺮ أﺣﺪﻫﺎ وﻗﺪ ﺗﻢ اﺧﺘﯿﺎره ﺑﺸﻜﻞ ﺗﻠﻘﺎﺋﻲ‬ ‫ﻓﻌﻠﯿﻚ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺎﺻﯿﺔ ‪ CHECKED‬إﻟﯿﻪ‪ ،‬ﻣﻊ ﺗﺮك ﻛﻞ اﻟﺤﺮﯾﺔ ﻟﻠﺰاﺋﺮ ﻓﻲ اﺧﺘﯿﺎر ﻣﺎ ﯾﺮﯾﺪه ﻓﯿﻤﺎ ﺑﻌﺪ‪.‬‬‫>‪<form‬‬‫اﻷﺧﻀﺮ>‪<input name=\"color\" type=\"radio\" value=\"Green\" CHECKED‬‬

‫اﻷﺳﻮد>\"‪<input name=\"color\" type=\"radio\" value=\"black‬‬‫اﻷزرق>\"‪<input name=\"color\" type=\"radio\" value=\"blue‬‬‫اﻷﲪﺮ>\"‪<input name=\"color\" type=\"radio\" value=\"red‬‬‫>‪</form‬‬ ‫اﻷﺧﻀﺮ اﻷﺳﻮد اﻷزرق اﻷﺣﻤﺮ‬ ‫وأﺧﯿﺮًا‪ ...‬أود أن أوﺿﺢ ﻟﻚ اﻟﺼﻮرة اﻟﺘﻲ ﯾﺼﻠﻚ ﺑﻬﺎ اﻟﻨﻤﻮذج ﻋﻨﺪ اﺧﺘﯿﺎر أﺣﺪ ﺣﻘﻮﻟﻪ )وﻟﻨﻔﺘﺮض أﻧﻪ اﻟﺨﯿﺎر‬ ‫اﻟﺜﺎﻟﺚ(‪ .‬وﻫﻲ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬ ‫‪Color=blue‬‬ ‫‪CHECKBOX‬‬ ‫ﻧﺄﺗﻲ اﻵن إﻟﻰ اﻟﺸﻜﻞ اﻟﺜﺎﻧﻲ ﻣﻦ أﺷﻜﺎل اﻹﺧﺘﯿﺎر ﻣﻦ ﻣﺘﻌﺪد واﻟﺬي ﯾﺪﻋﻰ ‪ .CHECKBOX‬ﻇﺎﻫﺮﯾًﺎ ﻻ ﯾﺨﺘﻠﻒ‬ ‫ﻫﺬا اﻟﺸﻜﻞ ﻋﻦ اﻟﺸﻜﻞ اﻟﺬي ﺳﺒﻘﻪ‪ ،‬ﻟﻜﻦ ﻋﻤﻠﯿﺎً ﻫﻨﺎك اﺧﺘﻼﻓﺎت ﺟﺬرﯾﺔ ﻣﻦ ﺣﯿﺚ اﻟﻤﻔﻬﻮم واﻟﺘﻌﺮﯾﻒ‪.‬‬‫>\"‪<input type=\"checkbox‬‬ ‫وﻛﻤﺜﺎل‪ ،‬ﻟﻨﻔﺮض أﻧﻨﻲ أرﯾﺪ أن أﺳﺄل اﻟﺰاﺋﺮ ﻋﻦ اﻟﺒﺮاﻣﺞ اﻟﻤﻔﻀﻠﻪ ﻟﺪﯾﻪ ‪:‬‬‫‪Winamp‬‬ ‫‪Photoshop‬‬ ‫‪ACDSee‬‬ ‫‪All‬‬‫ﻗﺒﻞ أن ﻧﺴﺘﻤﺮ ﻗﻢ ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ أﻛﺜﺮ ﻣﻦ ﺣﻘﻞ ﻓﻲ اﻟﻘﺎﺋﻤﺔ اﻟﺴﺎﺑﻘﺔ وأﻧﻈﺮ ﻣﺎذا ﺳﯿﺤﺪث؟ إن ﺑﺎﺳﺘﻄﺎﻋﺘﻚ اﺧﺘﯿﺎر أﻛﺜﺮ‬ ‫ﻣﻦ ﺣﻘﻞ ﻓﻲ ﻧﻔﺲ اﻟﻮﻗﺖ! وﻫﺬا ﻫﻮ اﻟﻔﺮق اﻷول ﺑﯿﻦ ‪ CHECKBOX‬و ‪ RADIO‬ﻓﻔﻲ ‪ RADIO‬ﯾﻤﻜﻦ‬ ‫اﺧﺘﯿﺎر ﺣﻘﻞ واﺣﺪ ﻓﻘﻂ ﻟﯿﺲ أﻛﺜﺮ‪.‬‬ ‫ﻟﻨﻘﻢ اﻵن ﺑﺘﻌﺮﯾﻒ ﻫﺬه اﻟﺤﻘﻮل‪ ،‬وﺗﺴﻤﯿﺘﻬﺎ ﺑﺸﻜﻞ ﻣﺒﺎﺷﺮ وﻣﻦ ﺛﻢ ﺳﻨﻌّﻠﻖ ﻋﻠﯿﻬﺎ‪:‬‬‫‪<input type=\"checkbox\" name=\"ws\" value=\"yes\">Winamp‬‬‫‪<input type=\"checkbox\" name=\"ps\" value=\"yes\">Photoshop‬‬‫‪<input type=\"checkbox\" name=\"acd\" value=\"yes\">ACDSee‬‬‫‪<input type=\"checkbox\" name=\"all\" value=\"yes\">All‬‬‫ﻣﺎذا ﺗﻼﺣﻆ؟ أوﻻً ﻟﻘﺪ أﺳﻨﺪﻧﺎ اﻟﻘﯿﻤﺔ ‪ checkbox‬ﻟﻠﺨﺎﺻﯿﺔ ‪ .TYPE‬ﺛﻢ أﻋﻄﯿﻨﺎ ﻟﻜﻞ ﺣﻘﻞ ﻓﻲ اﻟﻘﺎﺋﻤﺔ إﺳﻤًﺎ ﻣﻤﯿﺰاً‬‫ﻓﻲ اﻟﺨﺎﺻﯿﺔ ‪ NAME‬ﯾﺨﺘﻠﻒ ﻋﻦ ﺑﺎﻗﻲ اﻟﺤﻘﻮل‪ .‬أﻣﺎ اﻟﺨﺎﺻﯿﺔ ‪ VALUE‬ﻓﺄﻋﻄﯿﻨﺎﻫﺎ ﻗﯿﻤﺔ ﻣﻮﺣﺪة ﻟﺠﻤﯿﻊ اﻟﺤﻘﻮل‪.‬‬ ‫وﺑﺎﻟﻄﺒﻊ ﻗﻤﻨﺎ ﻓﻲ اﻟﻨﻬﺎﯾﺔ ﺑﻜﺘﺎﺑﺔ اﻷﺳﻤﺎء اﻟﺘﻌﺮﯾﻔﯿﺔ ﻟﻜﻞ ﺣﻘﻞ‪.‬‬‫ﻫﺎم ﺟﺪاﻓﻲ ‪ RADIO‬ﻧﺴﺘﻄﯿﻊ اﺧﺘﯿﺎر ﺣﻘﻞ واﺣﺪ ﻓﻘﻂ أﻣﺎ ﻓﻲ ‪ CHECKBOX‬ﻓﻨﺨﺘﺎر أﻛﺜﺮ ﻣﻦ ﺣﻘﻞ‪ ،‬ﻟﺬﻟﻚ ﯾﺴﺘﺨﺪم ﻋﺎدة‬ ‫ﻓﻲ اﻟﺤﺎﻻت اﻟﺘﻲ ﯾﺤﺘﻤﻞ أن ﻧﺤﺼﻞ ﻓﯿﻬﺎ ﻋﻠﻰ ﻋﺪة أﺟﻮﺑﺔ ﻟﻨﻔﺲ اﻟﺴﺆال‪ .‬ﻓﻲ ‪ RADIO‬ﺗﻜﻮن أﺳﻤﺎء اﻟﺤﻘﻮل ﻣﻮﺣﺪة‬ ‫واﻟﻘﯿﻢ ﻣﺨﺘﻠﻔﺔ‪ ،‬أﻣﺎ ﻓﻲ ‪ CHECKBOX‬ﻓﺘﻜﻮن اﻷﺳﻤﺎء ﻣﺨﺘﻠﻔﺔ واﻟﻘﯿﻢ ﻣﻮﺣﺪة‬ ‫ﻛﯿﻒ ﺳﺘﺼﻞ اﻟﺒﯿﺎﻧﺎت؟ ﺣﺴﻨﺎً ﻟﻨﻔﺮض أﻧﻪ ﺗﻢ اﺧﺘﯿﺎر اﻟﺤﻘﻠﯿﻦ اﻟﺜﺎﻧﻲ واﻟﺮاﺑﻊ ﻓﺴﻮف ﺗﺼﻠﻚ اﻟﻨﺘﯿﺠﺔ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬

‫‪ps=Yes‬‬ ‫‪all=Yes‬‬ ‫ﻛﻤﺎ ﻧﺴﺘﻄﯿﻊ أﯾﻀﺎً ﺗﻌﻠﯿﻢ ﺑﻌﺾ اﻟﺤﻘﻮل ﺑﺼﻮرة ﺗﻠﻘﺎﺋﯿﺔ ﻛﻤﺎ ﻓﻌﻠﻨﺎ ﻣﻊ ‪ RADIO‬ﺑﺎﺳﺘﺨﺪام ﻧﻔﺲ اﻟﺨﺎﺻﯿﺔ‬ ‫‪CHECKED‬‬‫‪<input type=\"checkbox\" name=\"ws\" value=\"yes\" CHECKED>Winamp‬‬‫‪<input type=\"checkbox\" name=\"ps\" value=\"yes\">Photoshop‬‬‫‪<input type=\"checkbox\" name=\"acd\" value=\"yes\" CHECKED>ACDSee‬‬‫‪<input type=\"checkbox\" name=\"all\" value=\"yes\">All‬‬‫‪Winamp‬‬ ‫‪Photoshop‬‬ ‫‪ACDSee‬‬ ‫‪All‬‬ ‫‪Drop-down Select Boxes‬‬ ‫اﻟﻨﻮع اﻟﺜﺎﻟﺚ ﻣﻦ أﺷﻜﺎل اﻹﺧﺘﯿﺎر ﻣﻦ ﻣﺘﻌﺪد ﻫﻮ ﻗﻮاﺋﻢ اﻻﺧﺘﯿﺎرأو ‪ ،Boxes Select Drop-down‬وﻫﺬا‬ ‫اﻟﻨﻮع ﺳﻮف ﯾﻘﻮدﻧﺎ إﻟﻰ وﺳﻮم ﺟﺪﯾﺪة ﻣﻦ وﺳﻮم اﻟﺘﻌﺮﯾﻒ واﻟﺘﻲ ﺳﺘﺴﺘﺨﺪم ﺑﺪ ًﻻ ﻣﻦ >‪ <INPUT‬وﻫﻲ‬‫>‪<SELECT‬‬ ‫>‪<OPTION‬‬‫>‪</SELECT‬‬ ‫ﺑﺤﯿﺚ أن >‪ <SELECT/> ... <SELECT‬ﺗﺤﺪدان ﺑﺪاﯾﺔ وﻧﻬﺎﯾﺔ اﻟﻘﺎﺋﻤﺔ‪ ،‬واﻟﻮﺳﻢ >‪ <OPTION‬اﻟﺬي‬‫ﯾﻮﺿﻊ داﺋﻤﺎ ﺑﯿﻨﻬﻤﺎ ﯾﺴﺘﺨﺪم ﻟﺘﺤﺪﯾﺪ ﻛﻞ ﻋﻨﺼﺮ ﻣﻦ ﻋﻨﺎﺻﺮ اﻟﻘﺎﺋﻤﺔ‪ .‬ﻟﻨﻌﺪ إﻟﻰ ﻣﺜﺎﻟﻨﺎ اﻟﺴﺎﺑﻖ ﻟﻨﺮى ﻛﯿﻒ ﯾﻤﻜﻦ وﺿﻊ‬ ‫اﻟﺨﯿﺎرات ﻓﻲ ﻗﺎﺋﻤﺔ‬‫>‪<FORM‬‬‫>‪<SELECT‬‬ ‫‪<OPTION> Winamp‬‬ ‫‪<OPTION>Photoshop‬‬ ‫‪<OPTION> ACDSee‬‬ ‫‪<OPTION> All‬‬‫>‪</SELECT‬‬‫>‪</FORM‬‬ ‫وﺑﺬﻟﻚ ﺗﻜﻮن اﻟﻨﺘﯿﺠﺔ ﻫﻲ‪:‬‬ ‫‪Winamp‬‬‫وﻛﺎﻟﻤﻌﺘﺎد ﻻ ﯾﺨﻠﻮ اﻷﻣﺮ ﻣﻦ وﺟﻮد ﺧﺼﺎﺋﺺ ﺗﺤﺪد ﻃﺮﯾﻘﺔ ﻋﻤﻞ ﻫﺬه اﻟﻮﺳﻮم‪ .‬وﻫﻨﺎك ﺧﺼﺎﺋﺺ ﻣﺸﺘﺮﻛﺔ ﻋﺮﻓﻨﺎﻫﺎ‬ ‫ﻓﻲ اﻷﺷﻜﺎل اﻟﺴﺎﺑﻘﺔ ﺳﯿﺘﻢ اﺳﺘﺨﺪاﻣﻬﺎ ﻫﻨﺎ أﯾﻀﺎً ﻛﻤﺎ ﯾﻮﺟﺪ ﺧﺼﺎﺋﺺ ﺟﺪﯾﺪة ﺗﺘﻌﻠﻖ ﻓﻘﻂ ﺑﻬﺬا اﻟﺸﻜﻞ ﻣﻦ ﺣﻘﻮل‬ ‫اﻟﺒﯿﺎﻧﺎت‪ .‬ﻓﺒﺎﻟﻨﺴﺒﺔ ﻟـِ >‪ <SELECT‬ﯾﻮﺟﺪ اﻟﺨﺎﺻﯿﺔ ‪ NAME‬وﻫﻲ ﻛﻤﺎ ﺗﻌﻠﻢ ﺗﺤﺪد اﺳﻢ اﻟﻘﺎﺋﻤﺔ‪ .‬ﻛﻤﺎ ﺗﻮﺟﺪ‬ ‫اﻟﺨﺎﺻﯿﺔ ‪ SIZE‬اﻟﺘﻲ ﺗﺤﺪد ﺣﺠﻢ )أو ﺑﺎﻷﺣﺮى( ارﺗﻔﺎع اﻟﻘﺎﺋﻤﺔ‪ ،‬وﺑﺎﻟﺘﺎﻟﻲ ﻋﺪد اﻟﺒﯿﺎﻧﺎت اﻟﻈﺎﻫﺮة ﻓﯿﻬﺎ‪ .‬وﻫﻲ ﺗﺄﺧﺬ‬ ‫أي ﻗﯿﻤﺔ ﻋﺪدﯾﺔ ﺻﺤﯿﺤﺔ‪.‬‬ ‫>‪<FORM‬‬‫>\"‪<SELECT NAME=\"browser\" SIZE=\"2‬‬ ‫‪<OPTION> Winamp‬‬ ‫‪<OPTION>Photoshop‬‬

‫‪<OPTION> ACDSee‬‬ ‫‪<OPTION> All‬‬‫>‪</SELECT‬‬‫‪</FORM‬‬ ‫‪Winamp‬‬ ‫‪Photoshop‬‬‫وﻃﺎﻟﻤﺎ ﺑﺎﻹﻣﻜﺎن ﻋﺮض اﻟﻘﺎﺋﻤﺔ ﺑﺄي ارﺗﻔﺎع ﻧﺮﯾﺪ‪ ،‬وﻗﺪ ﯾﺼﻞ إﻟﻰ ﺣﺪ ﻋﺮض ﺟﻤﯿﻊ ﺑﯿﺎﻧﺎت اﻟﻘﺎﺋﻤﺔ ﻣﻌًﺎ‪ ،‬ﻓﺈن ﻫﻨﺎك‬ ‫إﻣﻜﺎﻧﯿﺔ أﯾﻀﺎً ﻟﺠﻌﻞ اﺧﺘﯿﺎر اﻟﺒﯿﺎﻧﺎت ﻣﻦ ﻫﺬه اﻟﻘﺎﺋﻤﺔ ﻣﺘﻌﺪداً وﻟﯿﺲ ﻓﻘﻂ ﻗﯿﻤﺔ واﺣﺪة‪ ،‬ﻛﯿﻒ؟؟ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺎﺻﯿﺔ‬ ‫‪ MULTIPLE‬ﻟﻨﻘﻢ اﻵن ﺑﻌﺮض ﺟﻤﯿﻊ اﻟﻘﯿﻢ )ﻟﺪﯾﻨﺎ أرﺑﻌﺔ ﻗﯿﻢ‪ ،‬إذن اﻟﻘﯿﻤﺔ اﻟﻤﻜﺘﻮﺑﺔ ﻣﻊ ‪ SIZE‬ﯾﺠﺐ أن ﺗﻜﻮن‬ ‫‪ ،(٤‬وﻣﻦ ﺛﻢ ﻟﻨﺘﺢ اﻟﻤﺠﺎل أﻣﺎم اﻟﺰاﺋﺮ ﻻﺧﺘﯿﺎر أﻛﺜﺮ ﻣﻦ ﻗﯿﻤﺔ واﺣﺪة ﻓﻲ اﻟﻘﺎﺋﻤﺔ‪.‬‬ ‫>‪<FORM‬‬‫>‪<SELECT NAME=\"browser\" SIZE=\"4\" MULTIPLE‬‬ ‫‪<OPTION> Winamp‬‬ ‫‪<OPTION>Photoshop‬‬ ‫‪<OPTION> ACDSee‬‬ ‫‪<OPTION> All‬‬‫>‪</SELECT‬‬‫‪</FORM‬‬ ‫‪Winamp‬‬ ‫‪Photoshop‬‬ ‫‪ACDSee‬‬ ‫‪All‬‬‫‪.‬ﺑﺼﻮرة ﻣﺘﻮاﺻﻠﺔ أﺛﻨﺎء ﻋﻤﻠﯿﺔ اﻹﺧﺘﯿﺎر ‪ ctrl‬ﻻﺣﻆ أﻧﻪ ﻷداء ﻋﺪة اﺧﺘﯿﺎرات ﯾﺠﺐ أن ﺗﻘﻮم ﺑﺎﻟﻀﻐﻂ ﻋﻠﻰ اﻟﻤﻔﺘﺎح‬ ‫أﻣﺎ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ اﻟﻮﺳﻢ >‪ <OPTION‬ﻓﻬﻲ ‪ VALUE‬واﻟﺘﻲ اﺳﺘﺨﺪﻣﻨﺎﻫﺎ ﻣﻦ ﻗﺒﻞ وﺳﻨﺴﺘﺨﺪﻣﻬﺎ اﻵن‬ ‫ﻹﻋﻄﺎء ﻗﯿﻤﺔ ﻟﻜﻞ ﺣﻘﻞ ﺑﯿﺎﻧﺎت ﻓﻲ اﻟﻘﺎﺋﻤﺔ‪ .‬وﻛﺬﻟﻚ اﻟﺨﺎﺻﯿﺔ ‪ SELECTED‬واﻟﺘﻲ ﻧﻜﺘﺒﻬﺎ ﻣﻊ أي >‪ <OPTION‬ﻧﺮﯾﺪ‬ ‫أن ﯾﻈﻬﺮ وﻗﺪ ﺗﻢ اﺧﺘﯿﺎره ﺑﺼﻮرة ﺗﻠﻘﺎﺋﯿﺔ ‪.‬‬‫>‪<FORM‬‬‫>‪<SELECT NAME=\"browser\" SIZE=\"4\" MULTIPLE‬‬ ‫‪<OPTION VALUE=\"wa\"> Winamp‬‬ ‫‪<OPTION VALUE=\"ps\" SELECTED>Photoshop‬‬ ‫‪<OPTION VALUE=\"acd\"> ACDSee‬‬ ‫‪<OPTION VALUE=\"all\"> All‬‬‫>‪</SELECT‬‬‫>‪</FORM‬‬ ‫‪Winamp‬‬ ‫‪Photoshop‬‬ ‫‪ACDSee‬‬ ‫‪All‬‬ ‫اﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ ﻣﻦ أﺷﻜﺎل ﺣﻘﻮل اﻟﺒﯿﺎﻧﺎت ﯾﺪﻋﻰ ‪TEXTAREA‬‬ ‫وﻫﻮ اﻟﻤﺴﺘﺨﺪم ﻋﺎدة ﻟﻜﺘﺎﺑﺔ اﻟﺘﻌﻠﯿﻘﺎت اﻟﺤﺮة ﻓﻲ اﻟﻨﻤﻮذج وﯾﺘﻢ إدراﺟﻪ ﺑﻜﺘﺎﺑﺔ اﻟﻮﺳﻮم‬ ‫>‪<TEXTAREA> ... </TEXTAREA‬‬

‫ﻫﻞ ﺗﺴﺘﻄﯿﻊ ﺗﺨﻤﯿﻦ اﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻌﻪ؟ ﺑﺎﻟﻄﺒﻊ ﻻ ﺑﺪ ﻣﻦ وﺟﻮد اﻟﺨﺎﺻﯿﺔ ‪ NAME‬ﻹﻋﻄﺎءه اﺳﻢ‬ ‫اﻟﺘﻌﺮﯾﻒ‪ .‬ﻟﻜﻦ ﻻ وﺟﻮد ﻟﻠﺨﺎﺻﯿﺔ ‪ ، VALUE‬وﺑﺎﻟﻤﻘﺎﺑﻞ ﻓﺈن أي ﻧﺺ ﯾﻜﺘﺐ ﺑﯿﻦ اﻟﻮﺳﻤﯿﻦ ﺳﯿﺘﻢ ﻋﺮﺿﻪ داﺧﻞ‬ ‫اﻟﺤﻘﻞ ﺑﺼﻮرة ﺗﻠﻘﺎﺋﯿﺔ‬‫>\"‪<TEXTAREA NAME=\"comments‬‬‫)‪ :‬ﻓﻀﻠﻚ ﺿﻊ ﺗﻌﻠﯿﻘﻚ ﻫﻨﺎ أﻫﻼ ﺑﻚ ﻣﻦ‬‫>‪</TEXTAREA‬‬ ‫ﻫﻼ ﺑﻚ ﻣﻦ ﻓﻀﻠﻚ ﺿ ﻊ ﺗﻌﻠﯿﻘﻚ ﻫﻨ ﺎ ‪(:‬‬‫‪ ROWS‬اﻟﺘﻲ ﺗﺤﺪد اﻟﻌﺮض و ‪COLS‬ﻛﻤﺎ ﺗﻮﺟﺪ ﺧﺼﺎﺋﺺ ﻟﺘﺤﺪﯾﺪ ﻣﺴﺎﺣﺔ ﻫﺬا اﻟﺤﻘﻞ ﻋﺮﺿًﺎ وارﺗﻔﺎﻋًﺎ‪ ،‬وﻫﻲ‬ ‫اﻟﺘﻲ ﺗﺤﺪد اﻹرﺗﻔﺎع‬‫>\"‪<TEXTAREA NAME=\"comments\" COLS=\"30\" ROWS=\"6‬‬‫>‪</TEXTAREA‬‬‫اﻟﺘﻲ ﺗﺤﺪد ﻃﺮﯾﻘﺔ إﻟﺘﻔﺎف اﻟﻨﺺ اﻟﻤﻜﺘﻮب داﺧﻞ اﻟﺤﻘﻞ وﻫﻨﺎك ﺛﻼﺛﺔ ﻗﯿﻢ ‪WRAP‬أﻣﺎ اﻟﺨﺎﺻﯿﺔ اﻷﺧﯿﺮة ﻫﻨﺎ ﻓﻬﻲ‬ ‫ﺗﺄﺧﺬﻫﺎ وﻫﻲ ﻋﻠﻰ اﻟﻨﺤﻮ اﻟﺘﺎﻟﻲ‪:‬‬ ‫‪ : virtual‬اﻟﺘﻲ ﺗﻌﻨﻲ أن اﻟﻨﺺ ﺳﯿﻠﺘﻒ ﻋﻠﻰ ﻋﺪة أﺳﻄﺮ ﻋﻨﺪ ﻛﺘﺎﺑﺘﻪ وﻟﻜﻨﻪ ﺳﯿﺼﻠﻚ ﻋﻨﺪ إرﺳﺎﻟﻪ ﻋﻠﻰ ﺷﻜﻞ‬ ‫ﺳﻄﺮ واﺣﺪ ﻣﺘﺘﺎﺑﻊ )ﺣﺎول اﻟﻜﺘﺎﺑﺔ داﺧﻞ اﻟﺤﻘﻮل وأﻧﻈﺮ ﻛﯿﻔﯿﺔ ﺗﺄﺛﯿﺮ ﻫﺬه اﻟﺨﺎﺻﯿﺔ ﻋﻠﻰ ﻛﻞ ﻣﻨﻬﺎ(‬‫>\"‪<TEXTAREA NAME=\"comments\" COLS=\"30\" ROWS=\"6\" WRAP=\"virtual‬‬‫>‪</TEXTAREA‬‬‫‪ :‬ﺗﻌﻨﻲ أن اﻟﻨﺺ ﺳﯿﻠﺘﻒ ﻋﻠﻰ ﻋﺪة أﺳﻄﺮ وﺳﯿﺼﻠﻚ أﯾﻀﺎً ﻋﻠﻰ ﻫﺬا اﻟﻨﺤﻮ ﻋﻨﺪ إرﺳﺎﻟﻪ ‪physical‬‬‫>\"‪<TEXTAREA NAME=\"comments\" COLS=\"30\" ROWS=\"6\" WRAP=\"physical‬‬‫>‪</TEXTAREA‬‬

‫‪ :‬ﺗﻌﻨﻲ أن اﻟﻨﺺ ﻟﻦ ﯾﻠﺘﻒ ﺑﺼﻮرة ﺗﻠﻘﺎﺋﯿﺔ ﻋﻠﻰ ﻋﺪة أﺳﻄﺮ ﻟﻜﻨﻪ ﻋﻠﻰ أﯾﺔ ﺣﺎل ﺳﯿﺼﻠﻚ ﺑﻨﻔﺲ اﻟﺸﻜﻞ اﻟﺬي ﺗﻢ ‪off‬‬ ‫إدﺧﺎﻟﻪ ﺑﻪ‬‫>\"‪<TEXTAREA NAME=\"comments\" COLS=\"30\" ROWS=\"6\" WRAP=\"off‬‬‫>‪</TEXTAREA‬‬ ‫ﺣﺴﻨﺎً‪ ،‬ﺑﺎﻓﺘﺮاض أﻧﻨﺎ إﻧﺘﻬﯿﻨﺎ ﻣﻦ ﻛﺘﺎﺑﺔ اﻟﺸﯿﻔﺮة اﻟﺨﺎﺻﺔ ﺑﺎﻟﻨﻤﻮذج وﻧﻨﺘﻈﺮ ﻣﻦ أي زاﺋﺮ ﻟﻠﻤﻮﻗﻊ أن ﯾﻤﻸه‪ ،‬واﻟﺴﺆال‬ ‫ﻫﻮ ﻛﯿﻒ ﯾﻤﻜﻦ ﻟﻪ أن ﯾﺮﺳﻠﻪ ﻓﻌﻠﯿﺎً؟ ﻧﻌﻮد اﻵن إﻟﻰ اﻟﻮﺳﻢ >‪ <INPUT‬وﻫﺬه اﻟﻤﺮة ﻣﻊ اﻟﻨﻮع ‪ submit‬واﻟﺘﻲ‬ ‫ﺳﺘﻘﻮم ﺗﻠﻘﺎﺋﯿﺎً ﺑﺈﻧﺸﺎء زر ﺳﯿﻘﻮم ﻋﻨﺪ اﻟﻨﻘﺮ ﻋﻠﯿﻪ ﺑﺈرﺳﺎل اﻟﺒﯿﺎﻧﺎت اﻟﺘﻲ ﺗﻢ ﻣﻠﺆﻫﺎ ﻓﻲ اﻟﻨﻤﻮذج‪.‬‬‫>\"‪<INPUT TYPE=\"submit‬‬ ‫‪Submit Query‬‬‫( ﻇﺎﻫﺮة ﻋﻠﻰ اﻟﺰر وﻫﻲ اﻟﻌﺒﺎرة ‪ Netscape‬ﻓﻲ ‪ Submit Query‬أو ) ‪Submit‬ﻻﺣﻆ أن‬ ‫اﻹﻓﺘﺮاﺿﯿﺔ‪ ،‬ﻓﺈذا أردت ﺗﻐﯿﯿﺮﻫﺎ ﻓﻌﻠﯿﻚ ﺑﺎﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ ‪ VALUE‬ﻟﻬﺬا اﻟﻐﺮض‬‫>\"ﻣﻦ ﻓﻀﻠﻚ أرﺳﻞ ﱄ\"=‪<INPUT TYPE=\"submit\" VALUE‬‬ ‫ﻣﻦ ﻓﻀﻠﻚ أرﺳﻞ ﻟﻲ‬‫ي ﺣﺎﻟﺔ ﻛﺎن زوار ﻣﻮﻗﻌﻚ ﻣﻦ اﻟﻨﻮﻋﯿﺔ اﻟﻤﺘﺮددة ﻣﻦ اﻟﻨﺎس واﻟﺬﯾﻦ ﻗﺪ ﯾﻐﯿﺮون آراﺋﻬﻢ ﻓﻲ آﺧﺮ ﻟﺤﻈﺔ‪ ،‬ﯾﻤﻜﻨﻚ أن‬ ‫ﺗﺘﯿﺢ ﻟﻬﻢ إﻣﻜﺎﻧﯿﺔ ﻣﺴﺢ ﻣﺎ ﻛﺘﺒﻮه ﻓﻲ اﻟﻨﻤﻮذج وإﻟﻐﺎء اﻷﻣﺮ‪ ،‬وذﻟﻚ ﺑﺎﺳﺘﺨﺪام ‪ reset‬ﻛﻨﻮع ‪ TYPE‬ﻟﻠﻮﺳﻢ‬ ‫>‪ <INPUT‬ﺑﻨﻔﺲ ﻃﺮﯾﻘﺔ اﻟﺘﻌﺮﯾﻒ واﻟﺨﺼﺎﺋﺺ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ ‪.submit‬‬‫>\"أﻣﺴﺢ اﳊﻘﻮل\"=‪<INPUT TYPE=\"reset\" VALUE‬‬ ‫أﻣﺴﺢ اﻟﺤﻘ ﻮل‬

‫واﻟﺬي ﯾﻘﻮم ﺑﺈﻧﺸﺎء زر ‪ button‬ﻫﻮ >‪ <INPUT‬اﻟﺸﻜﻞ اﻷﺧﯿﺮ ﻣﻦ أﺷﻜﺎل اﻟﺒﯿﺎﻧﺎت ﻓﻲ اﻟﻨﻤﺎذج واﻟﻤﺪرج ﻣﻊ اﻟﻮﺳﻢ‬ ‫ﺿﻤﻦ اﻟﻨﻤﻮذج‪ ،‬وﻫﻮ ﻣﺮﺗﺒﻂ ﺑﺎﻟﻨﻤﺎذج اﻟﺘﻲ ﺗﺤﺘﻮي ﻋﻠﻰ ﻧﺼﻮص ﺑﺮﻣﺠﯿﺔ )أو ﺑﺮاﻣﺞ ﻣﻜﺘﻤﻠﺔ( ﻣﻦ ﻟﻐﺎت ﻣﺘﻘﺪﻣﺔ‬ ‫ﻣﺜﻞ ‪ JavaScript‬ﻛﻮﻧﻪ ﯾﺴﺘﺨﺪم ﻟﺘﺸﻐﯿﻞ ﻫﺬه اﻟﺒﺮاﻣﺞ وإﻃﻼﻗﻬﺎ‪ .‬وﻃﺒﻌًﺎ ﻫﻨﺎك ﻃﺮق ﻣﻌﯿﻨﺔ ﻟﺮﺑﻄﻬﺎ ﻣﻊ اﻟﺒﺮاﻣﺞ‬ ‫وﻟﯿﺲ ﻫﻨﺎ اﻟﻤﺠﺎل ﻟﻄﺮﺣﻬﺎ‪ .‬ﻟﻜﻦ ﻣﺒﺪﺋﯿًﺎ أﻗﻮل إن ﻃﺮﯾﻘﺔ اﻹدراج واﻟﺘﻌﺮﯾﻒ ﻫﻲ ذاﺗﻬﺎ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻣﻊ ‪reset,‬‬ ‫‪submit.‬‬‫>\"‪ button‬ﻫﺬا ﻣﺜﺎل ﻟﻠﺰر أو\"=‪<INPUT TYPE=\"button\" VALUE‬‬ ‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬ ‫ﺗﻨﺴﯿﻖ اﻟﻨﻤﺎذج‬ ‫ﺳﻨﺘﺤﺪث ﻓﻲ ﻫﺬا اﻟﻔﺼﻞ ﻋﻦ ﻛﯿﻔﯿﻪ ﺗﻨﺴﯿﻖ اﻟﻨﻤﺎذج‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] ‪[ LABEL | ACCESSKEY | LEGEND & FIELDSET | TABINDEX‬‬ ‫‪TABINDEX‬‬ ‫ﯾﺠﺐ أن ﺗﻌﻠﻢ أﻧﻪ ﯾﻤﻜﻨﻚ أن ﺗﻮﺟﻪ زوارك أﻟﻲ أﻣﺎﻛﻦ ﻣﻌﯿﻨﻪ ﺑﺈﺳﺘﺨﺪام اﻟﻤﻔﺘﺎح ‪ ) Tab‬اﻟﻤﻮﺟﻮد ﻓﻮق ﻣﻔﺘﺎح ال‬ ‫‪ (Lock Caps‬ﻓﻲ اﻟﻄﺒﯿﻌﻲ ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﻲ ﻣﻔﺘﺎح ال‪ Tab‬ﯾﻨﻘﻞ ﺑﯿﻦ أﺟﺰاء اﻟﻨﻤﻮذج ﺑﺎﻟﺘﺴﻠﺴﻞ ﻟﻜﻦ ﻣﻊ‬‫اﻟﺨﺎﺻﯿﻪ ‪ TABINDEX‬ﯾﻤﻜﻨﻚ ﻓﻲ اﻟﺘﺤﻜﻢ ﻓﻲ أي ﻣﻦ اﻷﺟﺰاء ﻓﻲ اﻟﻨﻤﻮزج ﺗﻮد أن ﯾﺬﻫﺐ ﻟﻬﺎ اﻟﺰاﺋﺮ اﻷول و‬ ‫إﻟﯿﻚ ﻫﺬا اﻟﻤﺜﺎل ﺿﻌﻚ ﻣﺆﺷﺮ اﻟﻔﺄرة ﻓﻲ أول ﺻﻨﺪوق وأﺿﻐﻂ اﻟﺰر ‪ Tab‬ﻣﺎذا ﺗﻼﺣﻆ‬ ‫‪Box 1‬‬‫‪Box 3‬‬‫‪Box 4‬‬‫‪Box 2‬‬‫و ﺳﺘﺠﺪ اﻟﻤﺴﺘﻌﺮض ﯾﺘﺤﺮك إﻟﻲ اﻟﻮﺻﻼت ‪ ،‬ﺑﺎﻟﻄﺒﻊ ﯾﻤﻜﻨﻚ إﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﻪ ‪Tab‬أﺳﺘﻤﺮ ﻓﻲ ﺿﻐﻂ ﻣﻔﺘﺎح ال‬ ‫‪ TABINDEX‬ﻣﻊ اﻟﻮﺻﻼت وﻟﻜﻦ ﻫﻲ ﻣﻔﯿﺪه أﻛﺜﺮ ﻣﻊ اﻟﻨﻤﺎذج واﻷﺷﻜﺎل وإﻟﯿﻚ اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺬﻟﻚ‬‫>‪<FORM‬‬‫>\"‪Box 1 <INPUT TYPE=\"text\" NAME=\"TAB1\" TABINDEX=\"1‬‬‫>\"‪Box 3 <INPUT TYPE=\"text\" NAME=\"TAB2\" TABINDEX=\"3‬‬‫>\"‪Box 4 <INPUT TYPE=\"text\" NAME=\"TAB3\" TABINDEX=\"4‬‬‫>\"‪Box 2 <INPUT TYPE=\"text\" NAME=\"TAB4\" TABINDEX=\"2‬‬‫>‪</FORM‬‬

‫و ﯾﺘﺠﻪ اﻟﻤﺆﺷﺮ إﻟﻲ اﻟﻤﻜﺎن اﻟﺬي ﯾﻌﺮف ﺑﻘﯿﻤﻪ أﻋﻠﻲ و ﻫﻜﺬا و ﯾﻤﻜﻦ ان ﺗﻌﻄﻲ ﻗﯿﻤﺔ إﻟﻲ أي ﻋﻨﺼﺮ ﻣﻦ ﻋﻨﺎﺻﺮ‬ ‫اﻟﻨﻤﻮذج ‪.‬‬ ‫‪ FIELDSET‬و ‪LEGEND‬‬‫ﻫﺬان اﻟﻮﺳﻤﺎن اﻟﺘﻨﻈﯿﻤﯿﯿﻦ اﻟﺠﺪد ﯾﺴﺎﻋﺪوﻧﻚ ﻋﻠﻲ ﺗﻨﻀﯿﻢ ﺷﻜﻞ اﻟﻨﻤﻮذج دون إﺳﺘﺨﺪام اﻟﺠﺪاول ) اﻟﺘﻲ ﻟﺮﺑﻤﺎ ﺗﻌﻄﻲ‬ ‫ﻣﺸﺎﻛﻞ ‪ ( Netscape‬ﯾﺴﺘﻄﯿﻌﺎن ﻫﺬان اﻟﻮﺳﻤﺎن أن ﯾﻘﺴﻤﻮا اﻟﻌﺪﯾﺪ ﻣﻦ اﻟﻤﺴﺎﺣﺎت ﻛﻤﺎ ﺗﺮى‬‫اﻟﺸﺨﺼﯿﻪاﻻﺳﻢ اﻟﺒﯿﺎﻧﺎت ‪1:‬‬ ‫اﻟﺒﺮﯾﺪ اﻹﻟﯿﻜﺘﺮوﻧﻲ‬ ‫اﻷزرق اﻷﺣﻤﺮ اﻷﺧﻀﺮ‬ ‫‪2:‬اﻷﻟﻮان اﻟﻤﻔﻀﻠﻪ‬ ‫‪3:‬ﻣﻌﻠﻮﻣﺎت اﻹدﺧﺎل‬ ‫‪Reset‬‬ ‫‪Submit‬‬‫ﻣﺎرأﯾﻚ ﻣﻦ اﻟﻮاﺿﺢ أﻧﻬﺎ ﻃﺮﯾﻘﻪ ﺟﯿﺪه ﺟﺪا ﻓﻲ ﺗﺠﻤﯿﻊ ﻋﻨﺎﺻﺮ اﻟﻨﻤﻮذج ﻓﻲ ﻣﺠﻤﻮﻋﺎت ﻛﻤﺎ ﯾﻤﻜﻨﻚ ﺗﺼﻨﯿﻔﻬﻤﺎ ﻛﻞ‬ ‫أﺻﻨﺎف ﻣﺘﺸﺎﺑﻪ ﻣﻦ اﻟﻤﻌﻠﻮﻣﺎت ﻓﻲ ﻣﺠﻤﻮﻋﻪ ﺧﺎص ﺑﻬﺎ‪.‬‬ ‫أﻧﺖ ﻟﺪﯾﻚ وﺳﻤﯿﻦ اﻟﻮﺳﻢ ‪ FIELDSET‬ﯾﻘﻮم ﺑﺈﻧﺸﺎء اﻹﻃﺎر ﺣﻮل اﻟﻨﻤﻮذج و اﻟﻮﺳﻢ ‪ LEGEND‬ﯾﻘﻮم ﺑﻜﺘﺎﺑﻪ‬ ‫اﻟﻜﻠﻤﺎت و ﻫﺬا ﻫﻮ ﻃﺮﯾﻘﻪ ﻛﺘﺎﺑﻪ ﻫﺬا اﻟﻮﺳﻢ‬‫>‪<FIELDSET‬‬‫>‪</B></LEGEND‬اﻟﺸﺨﺼﯿﻪ اﻟﺒﯿﺎﻧﺎت ‪<LEGEND><B>1:‬‬‫>\"‪ <INPUT TYPE=\"text\" NAME=\"NAME‬اﻻﺳﻢ‬‫>\"‪ <INPUT TYPE=\"text\" NAME=\"EMAIL‬اﻟﱪﯾﺪ اﻹﻟﯿﻜﱰوﻧﻲ‬‫>‪</FIELDSET‬‬ ‫ﻣﺎ ﻋﻠﯿﻚ ﻫﻮ ﻓﻘﻂ ﻛﺘﺎﺑﻪ ﺟﻤﯿﻊ اﻟﺒﯿﺎﻧﺎت اﻟﺘﻲ ﺗﺮﯾﺪ ﺗﺠﻤﯿﻌﻬﺎ داﺧﻞ اﻟﻮﺳﻢ ‪ FIELDSET‬و ﺗﻀﯿﻒ وﺳﻢ‬ ‫‪ LEGEND‬ﻓﻲ اﻟﺒﺪاﯾﻪ و ﺗﻘﻮم ﺑﺘﻨﺴﯿﻖ اﻟﻨﺺ ﻛﻤﺎ ﺗﺮﯾﺪ ‪ ،‬ﻛﻤﺎ ﯾﻤﻜﻨﻚ أن ﺗﻠﻮن اﻷﻃﺮ ﺑﺈﺳﺘﺨﺪام ‪ CSS‬و اﻟﺘﻲ‬‫ﺳﻮف ﻧﻘﻮم ﺑﺸﺮﺣﻬﺎ ﻓﻲ اﻟﺘﺤﺪﯾﺜﺎت اﻟﻘﺎدﻣﺔ و ﯾﻤﻜﻨﻚ أﺳﺘﺨﺪام ﺧﺎﺻﯿﻪ ﻣﺤﺎذاة اﻹﻃﺎر إﻟﻲ اﻟﺠﺎﻧﺐ اﻟﺬي ﺗﺮﯾﺪ و ﺗﺄﺧﺬ‬ ‫ﺗﻠﻚ اﻟﻘﯿﻢ‬ ‫‪LEFT, RIGHT, CENTER, BOTTOM‬أو ‪TOP‬‬‫ﯾﺠﺐ أن ﺗﻌﻠﻢ أن وﺳﻢ ‪ FIELDSET‬ﯾﺄﺧﺬ ﺣﺠﻢ اﻟﺸﺎﺷﻪ ﺑﺄﻛﻤﻠﻬﺎ وﻻ ﺗﺴﺘﻄﯿﻊ ﺗﺤﺪﯾﺪ ﻣﺴﺎﺣﻪ ﻣﺤﺪده ﻟﻪ ﻓﻠﺬك ﯾﺠﺐ‬ ‫ﻋﻠﯿﻚ أو ﯾﺴﺘﺤﺴﻦ أن ﺗﻀﻌﻪ ﻓﻲ ﺟﺪول ﺑﺴﯿﻂ ﺣﺘﻲ ﺗﺴﺘﻄﯿﻊ أن ﺗﺴﯿﻄﺮ ﻋﻠﻲ ﺣﺠﻤﻪ‬ ‫‪ACCESSKEY‬‬ ‫ﻫﺬه اﻟﺨﺎﺻﯿﻪ ﺗﻤﻜﻨﻚ ﻣﻦ اﻹﻧﺘﻘﺎل إﻟﻲ ﺟﺰء ﻣﻌﯿﻦ ﻓﻲ اﻟﺼﻔﺤﺔ ﺑﺎﻟﻀﻐﻂ ﻋﻠﻲ ﻣﻔﺘﺎح ﻣﻌﯿﻦ ﻣﻊ اﻟﺰر ‪ Alt‬ﺑﺎﻟﻄﺒﻊ‬ ‫أﻧﺖ ﺗﺮي ﻓﻲ ﺟﻤﯿﻊ ﻧﻮاﻓﺬ اﻟﻮﯾﻨﺪوز واﻟﺒﺮاﻣﺞ اﻟﻌﺎﻣﺔ اﻟﺘﻲ ﺗﺴﺘﻌﻤﻠﻬﺎ ﺧﻂ ﺗﺤﺖ ﺣﺮف ﻣﻦ ﺣﺮوف اﻟﻜﻠﻤﺔ ﻣﺜﻞ‬ ‫‪..... Edit File‬إﻟﺦ و ﻫﺬا ﯾﻌﻄﻲ أﻧﻪ ﯾﻮﺟﺪ ﻃﺮﯾﻘﺔ ﻣﺨﺘﺼﺮة ﺗﺴﺘﻄﯿﻊ أن ﺗﺴﺘﺨﺪم ﻫﺬه اﻟﺨﺎﺻﯿﻪ ﺑﺎﻟﻀﻐﻂ ﻋﻠﻲ‬ ‫ﻣﻔﺘﺎح ‪ Alt+F‬ﻓﻬﺬا ﺳﯿﺠﻌﻠﻚ ﺗﺘﺠﻪ إﻟﻲ ﻗﺎﺋﻤﺔ ﻣﻠﻒ وﻫﻜﺬا ‪ ،‬و أﻧﺖ ﺗﺴﺘﻄﯿﻊ أن ﺗﻀﯿﻒ ﻫﺬه اﻟﺨﺎﺻﯿﻪ إﻟﻲ ﻋﻨﺎﺻﺮ‬ ‫اﻟﺸﻜﻞ اﻟﻤﻬﻤﻪ ﻛﻞ ﻣﺎ ﻋﻠﯿﻚ أن ﺗﻀﻊ ﻫﺬه اﻟﺨﺎﺻﯿﻪ ﺑﺠﻮار اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺎﻟﻨﻤﻮذج أو ﺷﻜﻞ ﻣﻦ أﺷﻜﺎﻟﻪ‬‫\"‪ACCESSKEY=\"X‬‬

‫ﺣﯿﺚ ‪ X‬ﻫﻮ اﻟﺤﺮف اﻟﺬي ﯾﺠﺐ أن ﺗﻀﻐﻂ ﻋﻠﯿﻪ ﻣﻊ ‪ Alt‬ﻟﻜﻲ ﺗﺬﻫﺐ إﻟﻲ اﻟﻤﺠﻤﻮﻋﻪ اﻟﻬﺎﻣﻪ ﻣﺜﻼ ﻧﺤﻦ ﻧﺴﺘﺨﺪﻣﺔ ﻫﻨﺎ‬ ‫ﻓﻲ ﺻﻨﺪوق اﻟﺒﺤﺚ اﻟﺨﺎص ﺑﺎﻟﻤﻮﻗﻊ ﻓﻘﻂ أﺿﻐﻂ ﻋﻠﻲ ‪ Alt+S‬ﺑﺎﻟﻄﺒﻊ ﻛﻞ اﻟﺰوار واﻟﻘﺮاء اﻟﻤﺤﺘﺮﻓﯿﻦ ﯾﻌﺮﻓﻮن أن‬ ‫اﻟﺨﻂ اﻟﻤﻮﺟﻮد ﺗﺤﺖ اﻟﺤﺮف ﻟﻪ إﺧﺘﺼﺎر أو ‪shortcut‬‬ ‫‪LABEL‬‬‫ﻫﺬه اﻟﺨﺎﺻﯿﻪ ﺗﺠﻌﻞ ﻗﺎدر ﻋﻠﻲ اﻟﻀﻐﻂ ﻋﻠﻲ اﻟﻜﻼﻣﺎت اﻟﻤﺠﺎورة ﻟﺸﻜﻞ ﻣﻌﯿﻦ ﻣﻦ أﺷﻜﺎل اﻟﻨﻤﻮذج ﺑﺪﻻ ﻣﻦ أن‬ ‫ﺗﻀﻐﻂ ﻋﻠﯿﻪ ﻹﺧﺘﯿﺎرة ‪ ،‬وﻟﻠﺘﻮﺿﯿﻊ أﻛﺜﺮ إﻟﯿﻚ ﻫﺬا اﻟﻤﺜﺎل‬ ‫أﺿﻐﻂ ﻫﻨﺎ‬‫أﺳﻬﻞ اﻟﯿﺲ ﻛﺬﻟﻚ و إﻟﯿﻚ اﻟﻜﻮد اﻟﺨﺎص ﺑﻬﺎ‬‫>‪<FORM‬‬‫>‪<LABEL FOR=\"LABELEXAMPLE\">Click here</LABEL‬‬‫>\"‪<INPUT TYPE=\"checkbox\" NAME=\"CHECK1\" ID=\"LABELEXAMPLE‬‬‫>‪</FORM‬‬ ‫ﯾﺠﺐ أن ﺗﻀﻊ اﻟﺨﺎﺻﯿﻪ ‪ \"....\"=For‬ﻟﻜﻲ ﺗﻘﻮم ﺑﺘﻌﺮﯾﻒ اﻟﻜﻠﻤﺎت اﻟﺘﻲ ﺳﺘﻜﺘﺐ ﺑﻌﺪﻫﺎ ﺛﻢ ﺗﺤﺪد أي اﻟﺼﻨﺎدﯾﻖ‬ ‫اﻟﺘﻲ ﺳﯿﺘﻢ إﺧﺘﯿﺎرﻫﺎ ﻋﻦ ﻃﺮﯾﻖ ‪ \"....\"=ID‬ﻻ ﺑﺪ وأن ﺗﻜﺘﺐ ﺑﯿﻦ اﻟﻘﻮﺳﯿﻦ\" \" ﻧﻔﺲ اﻻﺳﻢ ﺣﺘﻲ ﯾﺴﺘﻄﯿﻊ ان ﯾﺆﺛﺮ‬ ‫ﻓﯿﻬﺎ ‪.‬‬ ‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬‫ﺻﻮرة ﻟﻠﺰر‪Submit‬‬ ‫ﯾﻤﻜﻨﻚ أن ﺗﻘﻮم ﺑﺘﻐﯿﯿﺮ ﺷﻜﻞ اﻟﺰر ‪ Submit‬اﻟﺮﻣﺎدي إﻟﻲ ﺻﻮرة ﺟﺬاﺑﻪ ﻣﻦ إﺧﺘﯿﺎرك ﻛﻤﺎ ﻓﻲ ﻫﺬا اﻟﺸﻜﻞ‬ ‫ﻣﺎ اﺳﻤﻚ ؟‬ ‫ﻣﺎ ﻫﻲ وﺟﻬﺔ ﻧﻈﺮك؟‬‫ﯾﺠﺐ أن ﺗﻜﻮن ﺗﻌﺮف ﻣﺴﺒﻘﺎ ﻛﯿﻒ ﺗﻘﻮم ﺑﺈﻧﺸﺎء ﻛﻞ ﺟﺰء ﻣﻦ أﺟﺰاء وأﺷﻜﺎل اﻟﻨﻤﻮذج ‪ ،‬وإذا ﻟﻢ ﺗﻜﻦ ﻓﻼﺑﺪ ﻟﻚ وان‬ ‫ﺗﺮاﺟﻊ ﻓﺼﻞ اﻟﻨﻤﺎذج اﻻﺳﺎﺳﯿﻪ ﻓﻨﺤﻦ ﻫﻨﺎ ﻧﺮﻛﺰ ﻓﻘﻂ ﻋﻠﻲ اﻟﺰر ‪ Submit‬و إﻟﯿﻚ اﻟﻜﻮد اﻟﺨﺎص ﺑﺈدراج ﺻﻮرة‬‫\"‪<INPUT TYPE=\"image\" SRC=\"images/submit.gif\" HEIGHT=\"20\" WIDTH=\"60\" BORDER=\"0‬‬‫>\"أدﺧﻞ ﺑﯿﺎﻧﺎﺗﻚ\"=‪ALT‬‬