‫اﻟﻤﺮﺟﻊ اﻟﻜﺎﻣﻞ ﻓﻲ ‪HTML‬‬

‫ﻋﻦ ﻣﻮﻗﻊ‬
‫‪HTML4ARAB‬‬
‫‪BY‬‬
‫‪IsLmicHackers@HotMail.com‬‬

‫اﻟـﺒـﺪاﯾﻪ ﻫﻨﺎ‬
‫> أﺑﺪأ ﻫﻨﺎ‬
‫ﻣﺎ ﻫﻲ ال? ‪HTML‬‬
‫ﻣﺎذا أﺣﺘﺎج ؟‬
‫>دروس ﺳﺮﯾﻌﻪ ﻟﻠﻤﺒﺘﺪﺋﯿﻦ‬
‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬
‫اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ‬
‫اﻟﻮﺻﻼت اﻷﺳﺎﺳﯿﻪ‬
‫أﺳﺎﺳﯿﺎت إدراج اﻟﺼﻮر‬
‫ﺧﻮاص اﻟﺼﻔﺤﺔ‬
‫ﻣﺮﺟﻊ اﻟﻤﺴﺎﺣﺎت اﻟﻤﺠﺎﻧﯿﻪ‬

‫اﻟﺪروس اﻟﻤﺘﺨﺼﺼﻪ‬
‫> اﻟﻨﺺ‬
‫اﻟﻌﻨﺎوﯾﻦ وﺣﺠﻢ اﻟﺨﻄﻮط‬
‫أﺷﻜﺎل وأﻟﻮان اﻟﺨﻄﻮط‬
‫اﻟﺮﻣﻮز اﻟﺨﺎﺻﻪ‬
‫اﻟﻮﺻﻼت‬
‫اﻟﻘﻮاﺋﻢ‬
‫ﻗﺎﺋﻤﺔ ﺑﺠﻤﯿﻊ وﺳﻮم اﻟﻨﺺ‬
‫اﻟﻨﺺ اﻟﻤﺘﺤﺮك‬
 ‫> اﻟﺼﻮر‬
‫اﻟﺼﻮر واﻟﺮﺳﻮﻣﺎت‬
‫أﻧﻮاع اﻟﻤﻠﻔﺎت‬
‫اﻟﺼﻮرة ذات اﻟﺒﯿﻜﺴﻞ اﻟﻮاﺣﺪ‬
‫‪Thumbnails‬‬
‫ﺧﺮاﺋﻂ اﻟﺼﻮر‬
‫اﻟﻮﺳﺎﺋﻂ اﻟﻤﺘﻌﺪدة‬
‫أﺳﻤﺎء اﻷﻟﻮان‬
‫‪216‬ﻛﻮد ﻟﻸﻟﻮان‬
‫ﻣﻜﻌﺐ اﻷﻟﻮان‬
‫> اﻟﺠﺪاول‬
‫أﺳﺎﺳﯿﺎت اﻟﺠﺪاول‬
‫اﻟﺠﺪاول اﻟﻤﺘﻘﺪﻣﻪ ) ﻟﻠﻤﺤﺘﺮﻓﯿﻦ)‬
‫اﻟﺠﺪاول اﻟﻤﺘﺪاﺧﻠﻪ واﻟﻤﺴﺘﺪﯾﺮة ) ﻟﻠﻤﺤﺘﺮﻓﯿﻦ)‬
‫> اﻷﻃﺮ‬
‫أﺳﺎﺳﯿﺎت اﻷﻃﺮ‬
‫اﻷﻃﺮ اﻟﻤﺘﻘﺪﻣﻪ‬
‫ﺗﺎﺑﻊ اﻷﻃﺮ اﻟﻤﺘﻘﺪﻣﺔ‬
‫> اﻟﻨﻤﺎذج‬
‫اﻟﻨﻤﺎذج اﻷﺳﺎﺳﯿﻪ‬
‫ﺗﺎﺑﻊ اﻟﻨﻤﺎذج اﻷﺳﺎﺳﯿﻪ‬
‫ﺗﻨﺴﯿﻖ اﻟﻨﻤﺎذج‬
‫ﺻﻮرة ﻟﻠﺰر‪Submit‬‬

‫ﻣﺎ ﻫﻲ اﻟـ ‪ HTML‬؟‬

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] ﻣﺎ ﻫﻲ اﻟـ ‪ HTML‬؟ | ﻛﯿﻒ ﺗﻌﻤﻞ ؟ | ﻫﻞ ﻻﺑﺪ أن أﻛﻮن ﻣﺘﺼﻞ ﺑﺎﻹﻧﺘﺮﻧﺖ ﻃﻮل اﻟﻮﻗﺖ ؟ |‬
‫ﻫﻞ ﺗﻘﻮم اﻟـ ‪ HTML‬ﺑﻌﻤﻞ ﻛﻞ ﺷﻲء ﻓﻲ ﺻﻔﺤﺎت اﻟﻤﻮﻗﻊ ؟ [‬

‫اﻟﻜﺜﯿﺮ ﻣﻦ اﻟﻨﺎس ﺗﺘﺴﺄل ﻋﻦ اﻷﻧﺘﺮﻧﺖ و ﻋﻦ أﺳﺮارﻫﺎ ﻓﻲ ﻫﺬا اﻟﺒﺤﺚ اﻟﺘﻌﻠﯿﻤﻲ ﺳﻨﻘﻮم ﺑﺎﻟﺸﺮح اﻟﻮاﻓﻲ ﻟﺠﻤﯿﻊ‬
‫اﻟﺪروس اﻟﺨﺎص ﺑﺎﻟﻐﺔ ‪ HTML‬وﻧﺒﺪأ ﺑﺎﻹﺟﺎﺑﻪ ﻋﻠﻲ اﻷﺳﺄﻟﺔ اﻷﻛﺜﺮ ﺗﻜﺮرا و ﺷﯿﻮﻋﺎ ؟!!‪.‬‬
‫ﻣﺎ ﻫﻲ اﻟـ ‪ HTML‬؟‬
‫إﻧﻬﺎ اﻟﻠﻐﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻹﻧﺸﺎء ﺻﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ‪ .‬ﻫﻲ ﻟﯿﺴﺖ ﻟﻐﺔ ﺑﺮﻣﺠﺔ ﺑﺎﻟﻤﻌﻨﻰ واﻟﺸﻜﻞ اﻟﻤﺘﻌﺎرف ﻋﻠﯿﻪ ﻟﻠﻐﺎت‬
‫اﻟﺒﺮﻣﺠﺔ اﻷﺧﺮى ﻛﻠﻐﺔ ‪ . C‬ﻓﻬﻲ ﻣﺜﻼً ﻻ ﺗﺤﺘﻮي ﻋﻠﻰ ﺟﻤﻞ اﻟﺘﺤﻜﻢ واﻟﺪوران‪ ،‬وﻋﻨﺪ اﻟﺤﺎﺟﺔ ﻻﺳﺘﺨﺪام ﻫﺬه اﻟﺠﻤﻞ‬
‫ﯾﺠﺐ ﺗﻀﻤﯿﻦ ﺷﯿﻔﺮات ﻣﻦ ﻟﻐﺎت أﺧﺮى ﻛـ ‪ . Java, JavaScript, CGI‬ﻛﺬﻟﻚ ﻓﻬﻲ ﻻ ﺗﺤﺘﺎج إﻟﻰ ﻣﺘﺮﺟﻢ‬
 ‫ﺧﺎص ﺑﻪ ‪ . Compiler‬وﻫﻲ ﻏﯿﺮ ﻣﺮﺗﺒﻄﺔ ﺑﻨﻈﺎم ﺗﺸﻐﯿﻞ ﻣﻌﯿﻦ‪ ،‬ﻷﻧﻪ ﯾﺘﻢ ﺗﻔﺴﯿﺮﻫﺎ وﺗﻨﻔﯿﺬ ﺗﻌﻠﯿﻤﺎﺗﻬﺎ ﻣﺒﺎﺷﺮة ﻣﻦ‬
‫ﻗﺒﻞ ﻣﺘﺼﻔﺢ اﻹﻧﺘﺮﻧﺖ وﺑﻐﺾ اﻟﻨﻈﺮ ﻋﻦ اﻟﻨﻈﺎم اﻟﻤﺴﺘﺨﺪم‪ .‬ﻟﺬﻟﻚ ﻓﻬﻲ ﻟﻐﺔ ﺑﺴﯿﻄﺔ ﺟﺪاً‪ ،‬وﺳﻬﻠﺔ اﻟﻔﻬﻢ واﻟﺘﻌﻠﻢ وﻻ‬
‫ﺗﺤﺘﺎج ﻟﻠﻌﻤﻞ ﺑﻬﺎ ﺳﻮي ﺟﻠﺴﻪ واﺣﺪة ﻟﻜﻲ ﺗﺘﻌﻠﻢ أﺳﺴﺲ اﻟﻠﻐﻪ وﺗﺴﺘﻄﯿﻊ ﺑﻌﺪﻫﺎ أﻧﺸﺎء ﻣﻮﻗﻊ ﺷﺨﺼﻲ ﻟﻚ ﺑﻜﻞ ﺳﻬﻮﻟﻪ‬
‫‪ ،‬أﯾﻀﺎ ﻻ ﺗﺤﺘﺎج ﻟﻤﻌﺮﻓﺔ ﻣﺴﺒﻘﺔ ﺑﻠﻐﺎت اﻟﺒﺮﻣﺠﺔ واﻟﻬﯿﻜﻠﯿﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻓﯿﻬﺎ‪ .‬ﺑﻞ رﺑﻤﺎ ﻛﻞ ﻣﺎ ﺗﺤﺘﺎﺟﻪ ﻫﻮ اﻟﻘﻠﯿﻞ ﻣﻦ‬
‫اﻟﺘﻔﻜﯿﺮ اﻟﻤﻨﻄﻘﻲ وﺗﺮﺗﯿﺐ اﻷﻓﻜﺎر ‪ .‬و ﺗﻬﺘﻢ ﻣﻨﻈﻤﺔ اﻟـ<< ‪ W3C‬ﺑﺘﺼﻤﯿﻢ وﻧﺸﺮ اﻟﻠﻐﺔ وزﻋﻤﺎﻫﺎ ﻓﻲ أﻧﺤﺎء اﻟﻌﺎﻟﻢ ‪.‬‬
‫)وﻛﻠﻤﺔ ‪ HTML‬إﺧﺘﺼﺎر ﻟـ ‪(Language Markup Text Hyper‬‬
‫و اﻟـ ‪ Hyper Text‬ﻫﻲ اﻟﻄﺮﯾﻘﺔ اﻟﺨﺎﺻﺔ ﺑﺎﻟﺘﺤﺮك ﻋﻠﻲ ﺻﻔﺤﺎت اﻷﻧﺘﺮﻧﺖ ﺑﺎﻟﻀﻐﻂ ﻋﻠﻲ ﻧﺺ ﻣﻌﯿﻦ ﯾﺪﻋﻲ‬
‫)‪ ( Hyperlinks‬و ﻫﻲ وﺳﯿﻠﻪ ﻟﻠﺘﻨﻘﻞ ﻷي ﻣﻜﺎن ﻓﻲ ﺷﺒﻜﺔ اﻹﻧﺘﺮﻧﺖ ﻋﻦ ﻃﺮﯾﻖ اﻟﻀﻐﻂ ﻋﻠﻲ اﻟﻮﺻﻼت )‬
‫اﻹرﺗﺒﺎﻃﺎت اﻟﺘﺸﻌﺒﯿﻪ ( ‪ LINKS‬و ﺗﻌﺘﻤﺪ ﻋﻠﻲ ﻣﺎذا داﺧﻞ اﻷوﺳﻤﺔ )‪ (TAGS‬ﺑﻤﻌﻨﻲ أﻧﻬﺎ ﺗﺤﺘﻮي ﻋﻠﻲ أﻛﻮاد‬
‫ﻛﺄي ﻟﻐﺔ أﺧﺮي ‪.‬‬
‫ﻛﯿﻒ ﺗﻌﻤﻞ ؟‬
‫ﺗﺘﻜﻮن اﻟﻠﻐﻪ ﻣﻦ ﺳﻠﺴﻠﻪ أو ﻣﺠﻤﻮﻋﻪ ﻣﻦ اﻷﻛﻮاد ﺗﻜﺘﺐ ﻓﻲ ﻣﻠﻒ ﻧﺼﻲ ﺛﻢ ﺗﺤﻔﻆ ﺑﺈﻣﺘﺪاد ‪ HTM , HTML‬ﺗﻌﺮض‬
‫ﺑﻮاﺳﻄﺔ ﻣﺴﺘﻌﺮﺿﺎت اﻹﻧﺘﺮﻧﺖ ‪ Internet Explorer‬أو ‪ Netscape Navigator‬و ﻫﺬي اﻟﻤﺴﺘﻌﺮﺿﺎت‬
‫ﺗﺘﺮﺟﻢ اﻷﻛﻮاد إﻟﻲ ﻣﺎﺗﺮاه ﻋﻠﻲ اﻟﺼﻔﺤﺎت و ﻫﺬه اﻷﻛﻮاد ﺗﺒﺪأ ﺑﻤﺎ ﯾﺴﻤﻲ أوﺳﻤﺔ ‪ TAGS‬و ﺗﻜﺘﺐ ﻣﻦ اﻟﯿﺴﺎر إﻟﻲ‬
‫اﻟﯿﻤﯿﻦ ﻛﻤﺎ ﻓﻲ اﻟﺸﻜﻞ ‪-:‬‬

‫ﻓﻌﻠﻰ ﺳﺒﯿﻞ اﻟﻤﺜﺎل اﻟﻮﺳﻢ >‪ <B‬ﯾﺴﺘﺨﺪم ﻟﻜﺘﺎﺑﺔ اﻟﻜﻠﻤﺎت ﺑﺨﻂ أﺳﻮد ﻋﺮﯾﺾ ‪ Bold‬وذﻟﻚ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‪:‬‬

‫>‪</B‬اﻟﻨﺺ>‪<B‬‬

‫وﻫﻨﺎك ﺑﻌﺾ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ اﻟﺘﻲ ﺗﺴﺘﺨﺪم ﺑﺼﻮرة ﻣﻔﺮدة ﻣﺜﻞ وﺳﻢ ﻧﻬﺎﯾﺔ اﻟﺴﻄﺮ >‪ <BR‬أو ﻗﺪ ﺗﺴﺘﺨﺪم ﺑﻜﻠﺘﺎ‬
‫اﻟﺤﺎﻟﺘﯿﻦ ﻣﺜﻞ وﺳﻢ اﻟﻔﻘﺮة >‪.<P‬‬
‫وﺳﻮف ﻧﻨﺎﻗﺶ ﻫﺬه اﻟﻮﺳﻮم وﻏﯿﺮﻫﺎ ﺑﺎﻟﺘﻔﺼﯿﻞ ﻓﻲ اﻟﺪروس اﻟﻘﺎدﻣﺔ أﻧﺸﺎء اﷲ ‪.‬‬

‫ﻫﻞ ﻻﺑﺪ أن أﻛﻮن ﻣﺘﺼﻞ ﺑﺎﻹﻧﺘﺮﻧﺖ ﻃﻮل اﻟﻮﻗﺖ ؟‬

‫ﺑﺎﻟﻄﺒﻊ ﻻ ﻓﺄﻧﺖ ﺗﻘﻮم ﺑﻜﺘﺎﺑﻪ اﻟﺼﻔﺤﺎت و اﻷﻛﻮاد وﺗﻨﺴﻖ ﺟﻤﯿﻊ ﺻﻔﺤﺎت ﻣﻮﻗﻌﻚ ﺑﺪون اﻹﺗﺼﺎل ﺑﺎﻹﻧﺘﺮﻧﺖ وﻟﻜﻦ‬
‫ﺗﺤﺘﺎج ﻟﻺﺗﺼﺎل ﺑﻬﺎ ﻓﻘﻂ ﻋﻨﺪﻣﺎ ﺗﻮد أن ﺗﻨﻘﻞ ﻣﻮﻗﻊ إﻟﻲ اﻹﻧﺘﺮﻧﺖ أو اﻟﺘﻌﺪﯾﻞ ﻓﻲ ﺻﻔﺤﺔ ﻣﻦ اﻟﺼﻔﺤﺎت ﺑﻌﺪ ﻧﻘﻠﻬﺎ إﻟﻲ‬
‫اﻹﻧﺘﺮﻧﺖ ؟‬

‫ﻫﻞ ﺗﻘﻮم اﻟـ ‪ HTML‬ﺑﻌﻤﻞ ﻛﻞ ﺷﻲء ﻓﻲ ﺻﻔﺤﺎت اﻟﻤﻮﻗﻊ ؟‬

‫ﺑﺎﻟﻄﺒﻊ ﺗﻘﻮم اﻟـ ‪ HTML‬ﺑﻌﻤﻞ ﻛﻞ ﺷﻲء وﻟﻜﻦ ﻋﻨﺪﻣﺎ ﯾﺼﺒﺢ ﻣﻮﻗﻊ أﻛﺜﺮ ﺷﻌﺒﯿﻪ و ﯾﻜﻮن ﻟﺪﯾﻚ اﻟﻤﺰﯾﺪ ﻣﻦ زوار‬
‫ﻓﺎﻻﺑﺪ ﻣﻦ اﻹﺳﺘﻌﺎﻧﺔ ﺑﺒﻌﺾ اﻟﻠﻐﺎت اﻟﻤﺴﺎﻋﺪة ﻣﺜﻞ اﻟﺠﺎﻓﺎﺳﻜﺮﯾﺒﺖ ‪ JavaScript‬و اﻟﺘﻲ ﺗﻘﻮم ﺑﻮﺿﻊ ﺑﻌﺾ اﻟﺨﺪع‬
‫و اﻟﻤﺆﺛﺮات و اﻟﺘﺤﺴﯿﻨﺎت ﺑﺎﻟﻤﻮﻗﻊ ‪ ،‬ﻛﺬﻟﻚ ﻣﻦ اﻟﻤﻤﻜﻦ اﻹﺳﺘﻌﺎﻧﺔ ﺑﺎﻟـ ‪ CSS‬ﻟﻤﺰﯾﺪ ﻣﻦ اﻟﺴﺮﻋﺔ ﻓﻲ ﺧﻠﻖ اﻟﺼﻔﺤﺎت‬
‫و ﺗﻨﺴﯿﻘﻬﺎ ‪.‬‬
‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬
 ‫ﻣﺎذا أﺣﺘﺎج ؟‬
‫أذا ﻟﻘﺪ ﻗﺮرت أن ﺗﺘﻌﻠﻢ اﻟـ ‪ ، HTML‬و ﻫﺬا ﻋﻈﯿﻢ أذا ﻣﺎذا أﺣﺘﺎج ﻟﺒﺪأ اﻟﻌﻤﻞ ؟ واﻹﺟﺎﺑﻪ ﻫﻲ ﻻ ﺷﻲء!!!!‬

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] ﻣﺤﺮر ﻧﺼﻮص | ﻣﺴﺘﻌﺮض ﻟﻺﻧﺘﺮﻧﺖ | ﻣﺤﺮر ﺻﻮر [‬
‫ﺑﺎﻟﻔﻌﻞ أﻧﺖ ﻟﺪﯾﻚ ﻛﻞ ﺷﻲء ﻟﻜﺘﺎﺑﺔ وﺑﻨﺎء ﻣﻮﻗﻊ‬
‫ﻧﺼﻮص ﻣﺤﺮر‬
‫ﻓﻼ ﯾﺘﻄﻠﺐ ﻛﺘﺎﺑﺔ ﻣﻠﻒ ‪ HTML‬أﯾﺔ ﺑﺮاﻣﺞ ﺧﺎﺻﺔ ﻓﻬﻲ ﻛﻤﺎ ﻗﻠﻨﺎ ﻟﻐﺔ ﻻ ﺗﺤﺘﻮي ﻋﻠﻰ ﺑﺮﻧﺎﻣﺞ ﻣﺘﺮﺟﻢ‪ .‬ﺑﻞ ﻧﺤﺘﺎج‬
‫ﻓﻘﻂ إﻟﻰ ﺑﺮﻧﺎﻣﺞ ﻟﺘﺤﺮﯾﺮ اﻟﻨﺼﻮص اﻟﺒﺴﯿﻄﺔ وﻣﻌﺎﻟﺠﺘﻬﺎ‪ ،‬وﺑﺮﻧﺎﻣﺞ اﻟﻤﻔﻜﺮة اﻟﻤﻮﺟﻮد ﻓﻲ ‪ Windows‬ﯾﻔﻲ ﺑﻬﺬا‬
‫اﻟﻐﺮض‬

‫‪. NotePad < Accessories < Programs< | PC : | Start‬‬

‫أﻣﺎ ﺑﺎﻟﻨﺴﺒﻪ ﻟﻤﺴﺘﺨﺪﻣﻲ أﺟﻬﺰة ‪ MAC‬ﻓﻠﺪﯾﻬﻢ ﺑﺮﻧﺎﻣﺞ‬

‫‪Simple Text < Applications < Mac hard drive < | MAC : | Apple menu‬‬

‫ﻣﺴﺘﻌﺮض ﻟﻺﻧﺘﺮﻧﺖ‬
‫وﻛﺬﻟﻚ إﻟﻰ أﺣﺪ ﻣﺘﺼﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ ‪ Netscape Navigator‬أو ‪ Explorer MS Internet‬ﻟﻤﻌﺎﯾﻨﺔ‬
‫اﻟﺼﻔﺤﺎت اﻟﺘﻲ ﻧﻘﻮم ﺑﺘﺼﻤﯿﻤﻬﺎ‪ .‬وﻋﻠﯿﻚ ﻓﻘﻂ أن ﻧﻘﻮم ﺑﺤﻔﻆ اﻟﻨﺺ اﻟﻤﻜﺘﻮب ﺑﻤﻠﻒ ﯾﺤﻤﻞ أﺣﺪ اﻹﻣﺘﺪادﯾﻦ اﻟﺘﺎﻟﯿﯿﻦ ‪-:‬‬
‫‪ .html‬أو ‪.htm‬‬
‫واﻟﺠﺪﯾﺮ ذﻛﺮه أﻧﻪ ﯾﻮﺟﺪ اﻟﻌﺪﯾﺪ ﻣﻦ اﻟﺒﺮاﻣﺞ اﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻹﻧﺸﺎء ﺻﻔﺤﺎت ‪ .Html‬دون اﻟﺤﺎﺟﺔ ﻟﻤﻌﺮﻓﺔ ﻫﺬه اﻟﻠﻐﺔ‬
‫ﺣﯿﺚ ﯾﻘﻮم اﻟﻤﺴﺘﺨﺪم ﻣﻦ ﺧﻼﻟﻬﺎ ﺑﻜﺘﺎﺑﺔ اﻟﺼﻔﺤﺎت وﺗﺼﻤﯿﻤﻬﺎ ﺑﻤﺎ ﺗﺤﻮﯾﻪ ﻣﻦ ﻧﺼﻮص ورﺳﻮﻣﺎت وﺟﺪاول ﺛﻢ ﯾﻘﻮم‬
‫اﻟﺒﺮﻧﺎﻣﺞ ﺑﺘﺨﻠﯿﻖ اﻟﻮﺳﻮم اﻟﻤﻨﺎﺳﺒﺔ وﺗﺤﻮﯾﻞ ﻫﺬه اﻟﺼﻔﺤﺎت ﻣﻦ وراء اﻟﻜﻮاﻟﯿﺲ ﺗﻠﻘﺎﺋﯿﺎً وﺣﻔﻈﻬﺎ ﺑﺘﻨﺴﯿﻖ ‪ .html‬أي‬
‫أن دور اﻟﻤﺴﺘﺨﺪم ﯾﻨﺤﺼﺮ ﻓﻲ اﻟﻜﺘﺎﺑﺔ واﻟﺘﺼﻤﯿﻢ ﻓﻘﻂ‪ ،‬دون ﻣﻌﺮﻓﺘﻪ ﻟﻠﺸﯿﻔﺮة اﻟﺘﻲ اﺳﺘﺨﺪﻣﺖ‪ .‬وﺑﺎﻟﺘﺎﻟﻲ ﻋﺪم ﻗﺪرﺗﻪ‬
‫ﻋﻠﻰ اﻟﺘﺤﻜﻢ ﺑﺄي وﺳﻢ أو ﺗﻌﺪﯾﻞ اﻟﺸﯿﻔﺮة ﺣﺴﺐ اﻟﺤﺎﺟﺔ‪ ،‬إﻻ ﻣﻦ ﺧﻼل إﻋﺎدﺗﻪ ﻟﻠﺘﺼﻤﯿﻢ اﻷﺳﺎﺳﻲ ﺛﻢ إﻋﺎدة اﻟﺘﺤﻮﯾﻞ‬
‫واﻟﺤﻔﻆ ﻣﻦ ﻗﺒﻞ اﻟﺒﺮﻧﺎﻣﺞ‪ .‬وﻫﺬه اﻟﻄﺮﯾﻘﺔ ﻋﻠﻰ ﺳﻬﻮﻟﺘﻬﺎ وﺳﺮﻋﺘﻬﺎ ﻧﺴﺒﯿﺎً‪ ،‬إﻻ أﻧﻲ ﻻ أﻧﺼﺢ ﺑﺎﺳﺘﺨﺪاﻣﻬﺎ ﻟﻤﻦ ﯾﺮﯾﺪ‬
‫ﻣﻌﺮﻓﺔ ﻫﺬه اﻟﻠﻐﺔ واﻟﺘﻤﻜﻦ ﻣﻨﻬﺎ‪.‬‬
‫ﻣﺤﺮر ﺻﻮر‬
‫ﻛﻤﺎ أﻧﻚ ﺗﺤﺘﺎج ﻟﻤﺤﺮر ﺻﻮر ‪ ،‬ﻓﺎﻟﻜﺜﯿﺮ ﻣﻦ اﻟﺰاﺋﺮﯾﺖ\ن ﯾﻌﺠﺒﻮن ﺑﺎﻟﻤﻮاﻗﻊ اﻟﺘﻲ ﯾﻜﻮن ﺑﻬﺎ ﺻﻮر ﻓﺎﻟﻤﻮﻗﻊ اﻟﺬي ﻻ‬
‫ﯾﺤﺘﻮي ﻋﻠﻲ ﺻﻮر ﯾﻀﻔﻲ روح ﻣﻦ اﻟﻤﻠﻞ ﻟﻠﺰاﺋﺮ و ﻣﻦ اﻟﻤﻤﻜﻦ أن ﺗﺴﺘﺨﺪم ﺑﺮﻧﺎﻣﺞ « ‪Paint Shop Pro‬‬
‫وﻫﻮ ﺑﺮﻧﺎﻣﺞ ﺟﯿﺪ ﻟﺘﺤﺮﯾﺮ اﻟﺼﻮر ) أﻧﺎ أﺳﺘﺨﺪﻣﻪ (‬
‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬
 ‫دروس ﺳﺮﯾﻌﻪ ﻟﻠﻤﺒﺘﺪﺋﯿﻦ‬

‫ﺳﻮف ﻧﻘﻮم ﺑﺸﺮح ﺳﺮﯾﻊ ﻷﻫﻢ اﻷوﺳﻤﻪ اﻟﺨﺎﺻﻪ ﺑﺎﻟﻠﻐﺔ ال ‪HTML‬و ﻛﯿﻔﯿﻪ ﺑﺪأ ﺻﻔﺤﺔ و ﻛﯿﻔﯿﻪ إرﺳﺎﻟﻬﺎ ﻟﻠﺨﺎدم‬
‫‪(Server) .‬‬

‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬
‫آه إﻧﺸﺎء ﺻﻔﺤﺔ ﻷول ﻣﺮة ﺑﺎﻟﻠﻐﺔ ال‪ HTML‬؟ رﺑﻨﺎ ﯾﻮﻓﻘﻚ ‪ ....‬أﻗﺮأ ﻫﻨﺎ ﻟﻜﻲ ﺗﺠﻌﻞ ﻫﺬا ﺣﻘﯿﻘﻲ‬

‫اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ‬
‫ﻋﻨﺪ إﻧﺘﻬﺎءك ﻣﻦ ﻛﺘﺎﺑﺔ ﻣﻠﻒ ﺑﻠﻐﺔ ال‪ HTML‬رﺑﻤﺎ ﺗﺤﺘﺎج إﻟﻲ ﺗﻨﺴﯿﻘﻪ ﻗﻠﯿﻼ‬

‫اﻟﻮﺻﻼت اﻷﺳﺎﺳﯿﻪ‬
‫ﻋﻨﺪ إﻧﺘﻬﺎءك ﻣﻦ ﻛﺘﺎﺑﺔ ﺻﻔﺤﺎت ﺑﻠﻐﺔ ال‪ HTML‬رﺑﻤﺎ ﺗﺤﺘﺎج إﻟﻲ ﻋﻤﻞ وﺻﻼت ﺑﯿﻨﻬﻢ‬

‫أﺳﺎﺳﯿﺎت إدراج اﻟﺼﻮر‬

‫ﺗﻌﻠﻢ أن ﺗﻀﻊ ﺻﻮر ﻓﻲ ﺻﻔﺤﺎﺗﻚ ﻛﺨﻄﻮة أوﻟﻲ ﻫﻜﺬا ‪....‬‬

‫ﺧﻮاص اﻟﺼﻔﺤﺔ‬
‫ﺣﺘﻰ اﻵن اﻷﻟﻮان اﻟﻮﺣﯿﺪه ﻋﻠﻲ ﺻﻔﺤﺘﻚ ﻛﺎﻧﺖ اﻷﺑﯿﺾ اﻟﺨﻠﻔﯿﻪ اﻷﺳﻮد ﻟﻠﻨﺺ اﻷزرق ﻟﻠﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﻪ اﻟﻦ‬
‫ﺗﺤﺐ أن ﺗﻐﯿﯿﺮﻫﻢ إﻟﻲ ﺷﻲء أﻛﺜﺮ ﺟﻤﺎﻟﻪ وأﻧﺎﻗﻪ؟!!‪.‬‬

‫ﻣﺮﺟﻊ اﻟﻤﺴﺎﺣﺎت اﻟﻤﺠﺎﻧﯿﻪ‬

‫ﻋﻨﺪﻣﺎ ﺗﻨﺘﻬﻲ ﻣﻦ إﻧﺸﺎء ﻣﻮﻗﻌﻚ ﻓﻌﻨﺪﻫﺎ ﺳﺘﺤﺘﺎج إﻟﻲ رﻓﻊ ﻣﻮﻗﻊ أو وﺿﻊ ﻣﻮﻗﻌﻚ ﻋﻠﻲ ﺷﺒﻜﺔ اﻹﻧﺘﺮﻧﺖ ‪ ،‬وﻫﺬا‬
‫ﯾﺘﻀﻤﻦ إرﺳﺎل ﻣﻠﻔﺎﺗﻚ إﻟﻲ اﻟـ‪ Server‬أو اﻟﺨﺎدم ) ﻫﻮ ﺟﻬﺎز ﻣﺘﺼﻞ داﺋﻤﺎ ﺑﺎﻹﻧﺘﺮﻧﺖ ( وﻋﻦ ﻃﺮﯾﻖ اﻟﺴﯿﺮﻓﺮ‬
‫ﯾﺴﺘﻄﯿﻊ أي ﺷﺨﺺ أن ﯾﺪﺧﻞ إﻟﻲ ﻣﻮﻗﻌﻚ و ﯾﺘﺼﻔﺤﻪ ‪.‬‬

‫ﺻﻔﺤﺘﻲ اﻷوﻟﻲ‬
‫ﺣﺴﻨﺎً‪ ،‬ﻟﺪﯾﻚ ﻣﺤﺮر ﻧﺼﻮص ﻣﻤﺘﺎز ﻟﻜﺘﺎﺑﺔ ﻣﻠﻔﺎت ‪ HTML‬وﻟﺪﯾﻚ ﻣﺘﺼﻔﺢ إﻧﺘﺮﻧﺖ ﻟﻤﻌﺎﯾﻨﺘﻬﺎ‪ ،‬وﻟﺪﯾﻚ ﻫﺬه اﻟﺪروس‬
‫اﻟﺘﻲ ﺳﺘﻨﻄﻠﻖ ﻣﻌﻬﺎ إﻟﻰ ﻋﺎﻟﻢ ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎت اﻟﻮﯾﺐ أذن ﻓﺎﻟﻨﺒﺪأ اﻻن»»»‪....‬‬

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] اﻷوﺳﻤﻪ | إﻧﺸﺎء ﺻﻔﺤﺔ | ﻣﻼﺣﻈﺎت [‬

‫اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ ﻟﻠﺼﻔﺤﺔ‬

 ‫أن ﻛﻞ اﻟﺼﻔﺤﺎت ﺗﺒﺪأ ﺑﻬﯿﻜﻞ أﺳﺎﺳﻲ ‪ ،‬و ﻟﻨﺒﺪأ اﻵن ﻟﺘﺘﻌﻠﻢ أول وﺳﻢ )‪. (Tag‬‬
‫ااﻷوﺳﻤﻪ ‪ -:‬اﻷوﺳﻤﻪ ﻫﻲ اﻷﺷﯿﺎء اﻟﺘﻲ ﺑﯿﻦ ﻫﺬﯾﻦ اﻟﻘﻮﺳﯿﻦ >< ﺑﺎﻟﺘﺄﻛﯿﺪ أﻧﺖ ﻟﻢ ﺗﺮي أﻛﻮاد ﺗﺒﺪأ ﺑﻬﺬﯾﻦ اﻟﺸﻜﻠﯿﻦ ﻣﻦ‬
‫ﻗﺒﻞ ﺣﺴﻨﻦ ﻣﻦ ﻗﺎﺋﻤﺔ ‪ View‬أﺧﺘﺎر ‪ ، Source‬أﻧﺖ ﺗﺮي اﻵن اﻟﻨﺺ اﻟﺬي ﺗﻘﺮأه وﻣﺤﺎط ﻓﻲ أﻏﻠﺐ اﻷﺣﻮال ﺑـ‬
‫>< ﻫﺬه اﻷﻛﻮاد ﻫﻲ اﻟﺘﻲ ﺻﻨﻌﺖ ﻫﺬه اﻟﺼﻔﺤﺔ اﻟﺘﻲ أﻣﺎﻣﻚ‬

‫ﻫﺎم ﺟﺪاأﻏﻠﺐ اﻷوﺳﻤﺔ ﺗﺒﺪأ >< ﻣﻦ اﻟﯿﺴﺎر وﺗﻨﺘﻬﻲ >‪</‬ﻓﻲ اﻟﯿﻤﯿﻦ‬

‫ﻓﺎﻟﺘﺸﺎﻫﺪ اﻟﻮﺳﻮم اﻟﺘﺎﻟﯿﺔ‪:‬‬

‫وﺳﻢ اﻟﺒﺪاﯾﺔ وﺳﻢ اﻟﻨﻬﺎﯾﺔ‬

‫>‪</HTML> <HTML‬‬
‫>‪</HEAD> <HEAD‬‬
‫>‪</TITLE> <TITLE‬‬
‫>‪</BODY> <BODY‬‬

‫ﻣﺎذا ﺗﻼﺣﻆ؟ أن ﻛﻞ ﻣﻨﻬﺎ ﯾﺘﺄﻟﻒ ﻣﻦ زوج ﻣﻦ اﻟﻮﺳﻮم أﺣﺪﻫﻤﺎ وﺳﻢ اﻟﺒﺪاﯾﺔ‪ ،‬واﻵﺧﺮ وﺳﻢ اﻟﻨﻬﺎﯾﺔ‪ .‬وﯾﺘﻤﯿﺰ وﺳﻢ‬
‫اﻟﻨﻬﺎﯾﺔ ﺑﻮﺟﻮد اﻟﺮﻣﺰ ‪ . /‬ﺗﺄﻣﻞ اﻟﺮﺳﻢ اﻟﺘﺎﻟﻲ‪ ،‬ﻓﻬﻮ ﯾﻌﻄﻲ ﻓﻜﺮة ﻋﻦ ﺗﺮﻛﯿﺐ ﻣﻠﻒ ‪Html‬‬

‫إذن ﻓﻤﻠﻒ ‪ Html‬ﯾﺒﺪأ داﺋﻤﺎً ﺑﺎﻟﻮﺳﻢ >‪ <HTML‬وﯾﻨﺘﻬﻲ ﺑﺎﻟﻮﺳﻢ >‪ .</HTML‬ﻻ ﺗﻨﺴﻰ ذﻟﻚ !‬

‫أﻣﺎ اﻟﻮﺳﻢ >‪ <HEAD‬ﻓﯿﺤﺪد ﺑﺪاﯾﺔ اﻟﻤﻘﻄﻊ اﻟﺬي ﯾﺤﺘﻮي ﻋﻠﻰ اﻟﻤﻌﻠﻮﻣﺎت اﻟﺨﺎﺻﺔ ﺑﺘﻌﺮﯾﻒ اﻟﺼﻔﺤﺔ‪ .‬ﻛﺎﻟﻌﻨﻮان‬
‫اﻟﻈﺎﻫﺮ ﻋﻠﻰ ﺷﺮﯾﻂ ﻋﻨﻮان اﻟﻤﺘﺼﻔﺢ‪ .‬وﻫﺬا اﻟﻌﻨﻮان ﺑﺪوره ﯾﺤﺘﺎج ﻷن ﯾﻮﺿﻊ ﺑﯿﻦ اﻟﻮﺳﻤﯿﻦ‪… <TITLE> :‬‬
‫>‪ </TITLE‬وﺑﺎﻟﻄﺒﻊ ﯾﺠﺐ ﻛﺘﺎﺑﺔ اﻟﻮﺳﻢ >‪ </HEAD‬ﻟﻜﻲ ﻧﻨﻬﻲ ﻫﺬا اﻟﻤﻘﻄﻊ‪.‬‬
 ‫ﻧﺄﺗﻲ إﻟﻰ اﻟﻮﺳﻢ >‪ <BODY‬واﻟﺬي ﯾﺘﻢ ﻛﺘﺎﺑﺔ ﻧﺼﻮص ﺻﻔﺤﺔ اﻟﻮﯾﺐ ﺿﻤﻨﻪ‪ ،‬ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ إدراج اﻟﺼﻮر‬
‫واﻟﺠﺪاول وﺑﺎﻗﻲ ﻣﺤﺘﻮﯾﺎت اﻟﺼﻔﺤﺔ‪ .‬وﻫﻮ أﯾﻀﺎً ﯾﺤﺘﺎج إﻟﻰ وﺳﻢ اﻹﻧﻬﺎء >‪</BODY‬‬

‫و اﻵن ﻣﺎ رأﯾﻚ ﺑﺈﻧﺸﺎء ﺻﻔﺤﺔ و اﻷن ﻗﻢ ﺑﻔﺘﺢ ﺑﺮﻧﺎﻣﺞ ‪ Notepad‬أو أي ﺑﺮﻧﺎﻣﺞ ﻣﺤﺮر اﻟﻨﺼﻮص‬

‫أﻛﺘﺐ ﻫﺬا‬

‫>‪<HTML‬‬

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

‫>‪<BODY‬‬

‫‪Wow I am Writing My First Page‬‬

‫>‪<BODY/‬‬

‫>‪</HTML‬‬

‫واﻵن ﻗﻢ ﺑﺤﻔﻆ ﻣﺎ ﻛﺘﺒﺘﻪ ﻓﻲ ﻣﻠﻒ وﺑﺄي اﺳﻢ ﺗﺨﺘﺎره‪ .‬وﻻ ﺗﻨﺴﻰ أن اﻻﻣﺘﺪاد اﻟﻤﺴﺘﺨﺪم ﻓﻲ أﺳﻤﺎء ﻣﻠﻔﺎت ‪HTML‬‬
‫ﻫﻮ ‪ htm.‬أو ‪ html.‬ﻣﺜﻼً أﻧﺎ اﺧﺘﺮت اﻻﺳﻢ ‪ FirstPage.htm‬وﻣﻦ اﻷﻓﻀﻞ أن ﺗﻘﻮم ﺑﺈﻧﺸﺎء ﻣﺠﻠﺪ ﻣﺴﺘﻘﻞ‬
‫ﻋﻠﻰ اﻟﻘﺮص اﻟﺼﻠﺐ ﻟﻜﻲ ﺗﺤﻔﻆ ﺑﻪ ﻣﻠﻔﺎﺗﻚ ﻓﻬﺬا ﯾﺴﻬﻞ ﻋﻠﯿﻚ ﻋﻤﻠﯿﺔ اﺳﺘﺮﺟﺎﻋﻬﺎ ﻟﻠﻌﺮض أو اﻟﺘﺤﺪﯾﺚ وﻟﯿﻜﻦ ﻫﺬا‬
‫اﻟﻤﺠﻠﺪ ﻣﺜﻼً ﺑﺎﻻﺳﻢ( ‪ C:\htmlfiles‬أو ﺑﺄي اﺳﻢ ﺗﺨﺘﺎره )وﻟﻜﻦ ﻻﺑﺪ وأن ﯾﻜﻮن اﻷﺳﻢ أﻣﺎ ﺣﺮوف ‪ ،‬أرﻗﺎم ‪ _ ،‬أو‬
‫‪ -‬وﻻ ﯾﺠﻮز أﺳﺘﺨﺪام أي ﻋﻼﻣﺎت أﺧﺮي ﻓﻲ ﻟﺤﻔﻆ اﻟﻤﻠﻒ‪.‬‬

‫ﺣﺎن وﻗﺖ اﻟﻌﺮض‪ ،‬ﻟﻜﻲ ﻧﺸﺎﻫﺪ ﻧﺘﯿﺠﺔ ﻣﺎ ﻛﺘﺒﻨﺎه‪ .‬ﻗﻢ ﺑﺘﺸﻐﯿﻞ ﻣﺘﺼﻔﺢ اﻹﻧﺘﺮﻧﺖ اﻟﺬي ﺗﺴﺘﺨﺪﻣﻪ‪ .‬ﻓﺈذا ﻛﺎن‬
‫‪ Netscape Navigator‬اﺧﺘﺮ اﻷﻣﺮ ‪ …File Open‬ﻣﻦ ﻗﺎﺋﻤﺔ ‪ .File‬أﻣﺎ ﻓﻲ ‪MS Internet‬‬
‫‪ Explorer‬ﻓﺎﺧﺘﺮ اﻷﻣﺮ ‪ …Open‬ﻣﻦ ﻗﺎﺋﻤﺔ ‪ .File‬ﺛﻢ ﺣﺪد اﻟﻤﺴﺎر اﻟﺬي ﯾﻮﺟﺪ ﺑﻪ اﻟﻤﻠﻒ‪ .‬أﻧﺎ ﺷﺨﺼﯿﺎً ﻗﻤﺖ‬
‫ﺑﺘﺤﺪﯾﺪ اﻟﻤﺴﺎر اﻟﺘﺎﻟﻲ‪:‬‬

‫‪C:\htmlfiles\FirstPage.htm‬‬

‫وذﻟﻚ ﻃﺒﻌﺎً ﺣﺴﺐ اﻻﻓﺘﺮاﺿﺎت اﻟﺴﺎﺑﻘﺔ اﻟﺘﻲ اﺗﺒﻌﺘﻬﺎ ﻋﻨﺪ ﺗﺨﺰﯾﻦ اﻟﻤﻠﻒ‪ .‬وﻫﺬا ﻣﺎ ﺣﺼﻠﺖ ﻋﻠﯿﻪ ‪-:‬‬

‫ﺧﻄﺄ!‬
 ‫وﻣﺎذا ﻋﻨﻚ؟ ﻫﻞ ﺣﺼﻠﺖ ﻋﻠﻰ ﻧﻔﺲ اﻟﻨﺘﯿﺠﺔ؟ إذن ﻣﺒﺮوك ‪ J‬ﻟﻘﺪ ﻗﻤﺖ ﺑﺈﻧﺸﺎء أول ﺻﻔﺤﺔ وﯾﺐ ﺧﺎﺻﺔ ﺑﻚ‪.‬‬
‫)وإﻻ‪ ،‬إذا ﻟﻢ ﺗﺤﺼﻞ ﻋﻠﻰ ﻧﻔﺲ اﻟﻨﺘﯿﺠﺔ ﻗﻢ ﺑﺎﻟﻨﻘﺮ ﻫﻨﺎ(‬

‫وﻗﺒﻞ أن ﻧﺴﺘﻤﺮ أرﯾﺪ أن أﻧﺒﻬﻚ إﻟﻰ ﺑﻌﺾ اﻟﻤﻼﺣﻈﺎت ﻋﻨﺪ ﻛﺘﺎﺑﺔ ﺻﻔﺤﺎت اﻟﻮﯾﺐ‪:‬‬

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

‫>‪<HTML><HEAD><TITLE> My first HTML page </TITLE></HEAD><BODY‬‬

‫>‪Wow, I'm writing my first webpage </BODY></HTML‬‬

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

‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪My‬‬
‫‪First‬‬
‫‪HTML‬‬
‫‪Page‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬
‫>‪<BODY‬‬
‫‪Wow,‬‬
‫‪I'm‬‬
‫‪writing‬‬
‫‪my‬‬
‫‪first‬‬
‫‪Page‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬

‫أو ﺣﺘﻰ ﺑﻬﺬا اﻟﺸﻜﻞ‪:‬‬

‫>‪<HTML> <HEAD> <TITLE‬‬

‫‪My first HTML page‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬
‫>‪<BODY‬‬
‫‪Wow, I'm writing my First Page‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬

‫وﻓﻲ ﻛﻞ اﻟﺤﺎﻻت ﺳﺘﺤﺼﻞ ﻋﻠﻰ ﻧﻔﺲ اﻟﻨﺘﯿﺠﺔ‪ .‬وإذا ﻛﻨﺖ ﻣﻦ ﺗﻠﻚ اﻟﻨﻮﻋﯿﺔ ﻣﻦ اﻟﻨﺎس اﻟﺘﻲ ﻻ ﺗﺼﺪق ﻛﻞ ﻣﺎ ﯾﻘﺎل…‬
‫ﺗﺴﺘﻄﯿﻊ أن ﺗﺠﺮب ذﻟﻚ ﺑﻨﻔﺴﻚ!!! ﻫﯿﺎ ﺟﺮب‪.‬‬

‫ﻟﻜﻦ ﻫﺬا ﻻ ﯾﻌﻨﻲ أن اﻟﻔﻘﺮة اﻟﻤﻜﻮﻧﺔ ﻣﺜﻼً ﻣﻦ ﻋﺸﺮة أﺳﻄﺮ ﺳﺘﻤﺘﺪ إﻟﻰ ﻋﺪة أﻣﺘﺎر ﺑﻌﺮض اﻟﺸﺎﺷﺔ‪ .‬ﻛﻼ ﺑﺎﻟﻄﺒﻊ ﻷن‬
‫اﻟﻤﺘﺼﻔﺢ ﺳﯿﻘﻮم ﺑﻌﻤﻞ اﻟﺘﻔﺎف ﺗﻠﻘﺎﺋﻲ ﻟﻬﺎ ﺑﺤﺴﺐ ﻋﺮض اﻟﺸﺎﺷﺔ‪ ،‬ﻣﻬﻤﺎ ﻛﺎن ﻣﻘﺪار ﻫﺬا اﻟﻌﺮض‪.‬‬
 ‫واﻵن ﻗﺪ ﺗﺘﺴﺎءل‪ ،‬إذن ﻛﯿﻒ ﯾﻤﻜﻦ اﻟﺘﺤﻜﻢ ﺑﻤﻘﺪار اﻟﻨﺺ اﻟﻤﻜﺘﻮب ﻓﻲ ﻛﻞ ﺳﻄﺮ وﻛﯿﻒ ﯾﻤﻜﻦ ﺗﺤﺪﯾﺪ ﻧﻬﺎﯾﺔ اﻟﻔﻘﺮة‬
‫وﺑﺪاﯾﺔ اﻟﻔﻘﺮة اﻟﺘﻲ ﺗﻠﯿﻬﺎ؟ ﺳﺆال وﺟﯿﻪ!!! واﻹﺟﺎﺑﺔ ﻋﻠﯿﻪ ﻓﻲ اﻟﻔﺼﻞ اﻟﻘﺎدم«‬

‫اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ‬
‫ﺗﻮﻗﻔﻨﺎ ﻓﻲ «اﻟﻔﺼﻞ اﻟﺴﺎﺑﻖ ﻋﻨﺪ ﻛﯿﻔﯿﻪ اﻟﺘﺤﻜﻢ ﺑﻤﻘﺪار اﻟﻨﺺ اﻟﻤﻜﺘﻮب ﻓﻲ ﻛﻞ ﺳﻄﺮ وﻛﯿﻒ ﯾﻤﻜﻦ ﺗﺤﺪﯾﺪ ﻧﻬﺎﯾﺔ اﻟﻔﻘﺮة‬
‫وﺑﺪاﯾﺔ اﻟﻔﻘﺮة اﻟﺘﻲ ﺗﻠﯿﻬﺎ؟ و ﻓﻲ ﻫﺬا اﻟﻔﺼﻞ ﺳﻨﻘﻮم ﺑﺸﺮح ﻫﺬه اﻟﺠﺰﺋﯿﻪ وأﺳﺲ اﻟﺘﻨﺴﯿﻖ‪.‬‬

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] ﻧﻬﺎﯾﻪ ﺳﻄﺮ | أﺿﺎﻓﺔ ﺳﻄﺮ | اﻟﻔﺮﻏﺎت | اﻟﺨﻮاص | ﺗﻨﺴﯿﻖ اﻟﻨﺺ[‬

‫ﻧﻬﺎﯾﻪ ﺳﻄﺮ وﺑﺪاﯾﻪ ﺳﻄﺮ ﺟﺪﯾﺪ‪:-‬‬

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

‫وﻧﻌﻮد إﻟﻰ اﻟﻤﺜﺎل اﻟﺴﺎﺑﻖ‪ ،‬ﻗﻢ ﺑﺘﻌﺪﯾﻞ اﻟﻤﻠﻒ ﻟﻜﻲ ﯾﺼﺒﺢ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‬

‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪My first HTML page‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬
‫>‪<BODY‬‬
‫‪Wow,‬‬
‫‪<BR> I'm writing my‬‬
‫‪<BR>first page‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬

‫و اﻵن ﻛﯿﻒ أﺿﯿﻒ ﺳﻄﺮ ﺟﺪﯾﺪ ؟‬

‫وﻟﻔﻌﻞ ﻫﺬا ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ </P><P‬اﻟﺬي ﯾﻘﻮم ﺗﻘﺮﯾﺒﺎً ﺑﻨﻔﺲ ﻋﻤﻞ اﻟﻮﺳﻢ اﻟﺴﺎﺑﻖ أي أﻧﻪ ﯾﻨﻬﻲ اﻟﺴﻄﺮ أو اﻟﻔﻘﺮة‬
‫وﯾﺒﺪأ ﺑﺴﻄﺮ ﺟﺪﯾﺪ ﻟﻜﻦ ﻣﻊ إﺿﺎﻓﺔ ﺳﻄﺮ إﺿﺎﻓﻲ ﻓﺎرغ ﺑﯿﻦ اﻟﻔﻘﺮات‪ ) .‬ﯾﻼﺣﻆ ان ﻫﺬا اﻟﻮﺳﻢ ﻟﺪﯾﻪ وﺳﻢ ﻧﻬﺎﯾﻪ ﻟﻜﻦ‬
‫ﻣﻦ اﻟﻤﻤﻜﻦ أﺳﺘﺨﺪاﻣﺔ ﺑﺪون وﺳﻢ اﻟﻨﻬﺎﯾﻪ (‬

‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪My first HTML page‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬
‫>‪<BODY‬‬
‫‪Wow,‬‬

‫‪<P> I'm writing my‬‬

‫‪<P>first page‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬

‫رﻣﻮزاً ﺧﺎﺻﺔ ﻟﺬﻟﻚ ﻻ ﻧﺴﺘﻄﯿﻊ اﻟﺘﺤﻜﻢ ﺑﻬﺎ وﺑﻌﺪدﻫﺎ إﻻ ﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻢ ﺗﻌﺘﺒﺮ ‪ :-‬اﻟﻔﺮﻏﺎت‬
‫‪ ) &nbsp; .‬اﺧﺘﺼﺎر ﻟﻠﻌﺒﺎرة واﻷﺣﺮف ﻫﻲ ‪(Non Breakable Space‬‬
‫اﻟﻔﺮاﻏﺎت اﻟﻤﻄﻠﻮب‪ .‬ﻛﻤﺎ وإذا أردت إدﺧﺎل ﻋﺪة ﻓﺮاﻏﺎت ﺑﯿﻦ ﻧﺺ وآﺧﺮ ﻣﺎ ﻋﻠﯿﻚ إﻻ ﻛﺘﺎﺑﺔ ﻫﺬا اﻟﻮﺳﻢ ﺑﻨﻔﺲ ﻋﺪد‬
‫ﻛﻤﺎ ﻣﻮﺿﺢ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ ﯾﺠﺐ ﻋﻠﯿﻚ اﻟﺘﻘﯿﺪ ﺑﺎﻷﺣﺮف اﻟﺼﻐﯿﺮة ﻫﻨﺎ‬

‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪My first HTML page‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬
‫>‪<BODY‬‬
‫;‪Wow, &nbsp; &nbsp; &nbsp‬‬
‫;‪I'm &nbsp; &nbsp; &nbsp; writing &nbsp; &nbsp‬‬
‫‪&nbsp; my &nbsp; &nbsp; &nbsp; first &nbsp; &nbsp; &nbsp; First page‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬

‫اﻟﺨﻮاص‬

‫و اﻵن ﺳﺄﺷﺮح ﺟﺰء ﻣﺘﻘﺪم ﻗﻠﯿﻼ ‪ -:‬ﻛﯿﻒ ﻧﻘﻮم ﺑﺘﻤﺮﻛﺰ اﻟﻨﺺ أي ﺟﻌﻞ اﻟﻨﺺ ﻓﻲ ﻣﻨﺘﺼﻒ اﻟﺼﻔﺤﺔ ‪ ،‬اﻟﻮﺳﻢ‬
‫اﻷﺳﺎﺳﻲ ﻟﻬﺬه اﻟﺨﺎﺻﯿﻪ ﻫﻮ >‪ <CENTER‬وﻟﻜﻦ ﻫﺬا اﻟﻮﺳﻢ ﻗﺪ ﺗﻢ ﺗﺒﺪﯾﻠﻪ و ﻟﻬﺬا ﻓﺄن أﻓﺼﻞ ﻃﺮﯾﻘﻪ ﻫﻲ أﺳﺘﺨﺪام‬
‫وﺳﻢ ‪ ALIGN‬وﻫﺬا اﻟﻮﺳﻢ ﯾﻌﻄﻲ ﻟﻠﻨﺺ ﺧﻮاص ﻣﻌﯿﻨﻪ داﺧﻞ اﻟﻮﺳﻢ اﻷﺧﺮ ‪ .‬ﻓﺎﻟﻨﻔﺴﺮ أﻛﺜﺮ أن وﺳﻢ ‪ALIGN‬‬
‫ﻟﻮﺣﺪه ﯾﻔﻌﻞ ﺷﻲء وﺑﺈﺿﺎﻓﺘﻪ ﻣﺜﻼ ﻟﻮﺳﻢ >‪ <P‬ﻓﺄن اﻟﻤﺴﺘﻌﺮض ﺳﯿﻘﻮم ﺑﺄداء اﻟﻮﺳﻤﯿﻦ ﻓﻲ ﻧﻔﺲ اﻟﻮﻗﺖ وﻫﺬا ﺷﻲء‬
‫ﻣﻬﻢ ﺟﺪا ﻓﻲ ﻟﻐﺔ ‪ HTML‬وﺗﻜﻮن ﺻﯿﻐﺘﺔ ﻛﺎﻵﺗﻲ ‪-:‬‬

‫ﻫﺎم ﺟﺪا‬

‫>‬ ‫<ﺑﺪاﯾﺔ اﻟﻮﺳﻢ ﺧﻮاﺻﻪ="ﻗﯿﻤﺔ>"ﺿﻊ اﻟﻨﺺ ﻫﻨﺎ< ‪‬ﺎﯾﺔ اﻟﻮﺳﻢ‬

‫* و ﯾﺠﺐ أن ﺗﻌﻠﻢ أن ﻛﻞ اﻷوﺳﻤﺔ ﯾﻤﻜﻦ أن ﺗﺄﺧﺬ ﺑﻌﺾ اﻟﺨﻮاص ﻟﻜﻦ ﯾﻮﺟﺪ ﺧﻮاص ﺗﺄﺧﺬ أوﺳﻤﻪ ﻣﻌﯿﻨﺔ وﺳﻨﻘﻮم‬
‫ﺑﺸﺮح ذﻟﻚ أﻛﺜﺮ ﻓﻲ اﻟﻔﺼﻮل اﻟﻘﺎدﻣﺔ ‪،‬‬
‫و ﻟﻜﻲ ﺗﻀﻊ ﺧﺎﺻﯿﺔ ﺗﻤﺮﻛﺰ اﻟﻨﺺ ﻣﻊ اﻟﻮﺳﻢ >‪ <P‬ﺗﻜﻮن اﻟﺼﯿﻐﻪ ﻫﻜﺬا‪-:‬‬

‫ﻣﻨﺘﺼﻒ>"‪<P ALIGN="CENTER‬‬ ‫>‪</P‬اﻟﺼﻔﺤﺔ اﻟﻨﺺ اﳌﺘﻤﺮﻛﺰ ﰲ‬

‫ﻗﺎرن ﻫﺬا ﻟﻜﻲ ﺗﻔﻬﻢ اﻟﺼﯿﻐﻪ اﻟﺴﺎﺑﻘﻪ ﻓﺎل ‪ P‬ﻫﻮ ﺑﺪاﯾﻪ اﻟﻮﺳﻢ ‪ ALIGN ،‬ﻫﻮ ﺧﻮاﺻﻪ ‪ CENTER‬ﻫﻲ ﻗﯿﻤﺔ‬
‫اﻟﺨﺎﺻﯿﺔ و ﺑﺎﻟﻄﺒﻊ >‪ </P‬ﻫﻮ ﻧﻬﺎﯾﻪ اﻟﻮﺳﻢ‪،‬‬
‫و ﻣﻦ اﻟﻮاﺿﺢ ﻃﺒﻌﺎ أذا ﻛﻨﺎ ﻧﻘﺪر أن ﻧﻀﻊ اﻟﻨﺺ ﻓﻲ اﻟﻤﻨﺘﺼﻒ أذن ﻧﺴﺘﻄﯿﻊ أن ﻧﻀﻊ ﻓﻲ أي ﺟﻬﺔ أﺧﺮي ﺳﻮاء‬
‫اﻟﯿﺴﺎر أو اﻟﯿﻤﯿﻦ ﻛﻞ ﻣﺎ ﻋﻠﯿﻚ ﻓﻌﻠﻪ ﻫﻮ ﺗﻐﯿﯿﺮ ﻗﯿﻤﺔ اﻟـ ‪ ALIGN‬إﻟﻲ ‪ RIGHT‬أو ‪ . LEFT‬ﻟﻤﺰﯾﺪ ﻣﻦ اﻟﺘﻔﺎﺻﯿﻞ‬
‫واﻷﻣﺜﻠﻪ أﻗﺮأ ﺗﻨﺴﯿﻖ اﻟﻔﻘﺮات‬

‫ﺗﻨﺴﯿﻖ اﻟﻨﺺ‬

‫ﻧﺘﺤﺪث اﻵن ﻋﻦ ﻛﯿﻔﯿﻪ ﺟﻌﻞ اﻟﻨﺺ ﻋﺮﯾﺾ أو ﻣﺎﺋﻞ أو ﺗﺤﺘﻪ ﺧﻂ‬

‫ﻟﻘﺪ ﻗﻤﺖ ﺑﺸﺮح ﻛﻞ ﻫﺬا ﺑﺎﻟﺘﻔﺼﯿﻞ ﻓﻲ دروس اﻟـ ‪ HTML‬وﻟﻜﻦ ﺳﺮﯾﻌﺎ ﻧﻘﻮل اﻷﻛﻮاد ﻟﻬﺬه اﻟﺘﻨﺴﯿﻘﺎت‬
‫ﻟﻠﺨﻂ>‪<B‬‬ ‫>‪</B‬اﻟﻌﺮﯾﺾ ﻫﺬا‬

‫ﻟﻠﺨﻂ>‪<I‬‬ ‫>‪</I‬اﳌﺎﺋﻞ وﻫﺬا‬

‫ﻣﺎ>‪<U‬‬ ‫>‪</U‬أﻗﺼﺪه ﻋﻦ ﲢﺘﻪ ﺧﻂ وﻫﺬا‬

‫و اﻵن أﺧﻮاﻧﺌﻲ اﻷﻋﺰاء ﯾﻜﻮن ﻗﺪ أﻧﺘﻬﯿﻦ ﻣﻦ اﻟﻔﺼﻞ اﻟﺜﺎﻧﻲ ﻣﻦ ﻓﺼﻮﻟﻨﺎ اﻟﺘﻌﻠﯿﻤﯿﻪ‬

‫وﺗﻜﻮن ﻗﺪ ﺗﻌﻠﻤﺖ ﻛﯿﻔﯿﻪ أﻧﺸﺎء ﺻﻔﺤﺎت و ﺗﻨﺴﯿﻘﻬﻢ وﻟﻜﻦ ﻛﯿﻒ ﯾﻤﻜﻦ اﻟﺘﻨﻘﻞ ﺑﯿﻨﻬﻢ ؟؟؟!!!!! وﻟﻤﻌﺮﻓﺔ اﻹﺟﺎﺑﻪ أذﻫﺐ‬
‫إﻟﻲ اﻟﻔﺼﻞ اﻟﺘﺎﻟﻲ «‬

‫اﻟﻮﺻﻼت اﻷﺳﺎﺳﯿﻪ‬
‫ﺗﻮﻗﻔﻨﺎ ﻓﻲ «اﻟﻔﺼﻞ اﻟﺴﺎﺑﻖ ﻋﻨﺪ ﻛﯿﻔﯿﻪ اﻹﻧﺘﻘﺎل ﺑﯿﻦ ﺻﻔﺤﺎت اﻟﻤﻮﻗﻊ و ﻓﻲ ﻫﺬا اﻟﻔﺼﻞ ﺳﻨﻘﻮم ﺑﺸﺮح ﻫﺬه اﻟﺠﺰﺋﯿﻪ‪.‬‬

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] أول وﺻﻠﻪ | وﺻﻠﻪ ﻟﻠﺒﺮﯾﺪ | وﺻﻠﻪ ﻟﺼﻮرة | وﺻﻠﻪ ﻟﻤﻠﻒ [‬

‫أول وﺻﻠﻪ‪-:‬‬
‫ﻛﯿﻒ وﺻﻠﺖ إﻟﻰ ﻫﺬه اﻟﺼﻔﺤﺔ؟ ! رﺑﻤﺎ ﺗﻌﺘﺒﺮ ﻫﺬا ﺳﺆاﻻً ﺳﺨﯿﻔﺎً‪ ،‬وأن اﻹﺟﺎﺑﺔ ﻋﻠﯿﻪ ﻫﻲ ﻣﻦ اﻟﺒﺪﯾﻬﯿﺎت ‪ ...‬وﻫﺬا‬
‫ﺻﺤﯿﺢ ! ﻣﻦ اﻟﻤﺆﻛﺪ أﻧﻚ ﻗﻤﺖ ﺑﺎﻹﻧﺘﻘﺎل إﻟﻰ ﻫﻨﺎ ﻣﻦ ﺧﻼل إﺣﺪى ﺻﻔﺤﺎت ﻫﺬا اﻟﻤﻮﻗﻊ‪ ،‬أو ﻣﻦ ﺧﻼل أﺣﺪ ﻣﺤﺮﻛﺎت‬
‫اﻟﺒﺤﺚ‪ ،‬أو ﻣﻦ ﺧﻼل أﺣﺪ اﻟﻤﻮاﻗﻊ اﻟﺘﻲ ﻗﻤﺖ ﺑﺰﯾﺎرﺗﻬﺎ ﻣﺆﺧﺮاً ‪ ...‬وﻓﻲ ﻛﻞ اﻷﺣﻮال ﻗﻤﺖ ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ‬
‫ﻣﺎ‬
‫‪ ...Links‬أو اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ ﻫﻲ روح اﻹﻧﺘﺮﻧﺖ‪ .‬ﻋﻠﻲ ﻛﻞ ﺣﺎل ﻟﻦ أﺧﻮض ﻛﺜﯿﺮا ﻓﻲ ﺷﺮح ﻫﺬه اﻟﻮﺻﻼت‬
‫ﻓﻠﻘﺪ ﻗﻤﺖ ﺑﺸﺮﺣﻬﺎ ﺗﻔﺼﯿﻠﯿﺎ ﻓﻲ اﻟﺪروس ﻛﻞ ﻣﺎ ﻫﻮ ﻣﻄﻠﻮب ﻣﻨﺎ اﻵن ﻫﻮ ﺗﻌﻠﯿﻤﻚ ﻛﯿﻔﯿﻪ أدراج وﺻﻠﻪ ﺗﺸﻌﺒﯿﻪ ﻓﻲ‬
‫ﺻﻔﺤﺎﺗﻚ‬
‫ﻓﻲ اﻟﺒﺪاﯾﻪ ﻧﺴﺘﺨﺪم ﻫﺬا اﻟﻮﺳﻢ ﻟﺒﺪأ أﻧﺸﺎء اﻟﻮﺻﻠﻪ‬

‫>‪</A> ... <A‬‬

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

‫‪HREF‬‬

‫اﻟﺘﻲ ﻧﺤﺪد ﻣﻦ ﺧﻼﻟﻬﺎ اﻟﻤﻮﻗﻊ اﻟﺬي ﻧﺮﯾﺪ اﻟﺪﻻﻟﺔ ﻋﻠﯿﻪ‪ ،‬وﯾﺠﺐ أن ﯾﻜﺘﺐ ﻋﻨﻮان اﻟﻤﻮﻗﻊ ﻛﺎﻣﻼً و ﻫﻲ إﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ‬
‫‪. REFerence Hypertext‬‬
 ‫وﻫﺬه ﻫﻲ اﻟﺼﯿﻐﺔ اﻷﺳﺎﺳﯿﻪ ﻟﻠﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﻪ‬

‫ﻫﺎم ﺟﺪا‬

‫ﺻﻔﺤﱵ>"‪<A HREF="FirstPage.html‬‬ ‫>‪</A‬اﻷوﱃ‬

‫ﻓﺘﻈﻬﺮ ﻟﻚ اﻟﻮﺻﻠﻪ ﺑﻬﺬا اﻟﺸﻜﻞ‬

‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬

‫و اﻵن إﻟﻲ اﻟﻌﻨﻮان اﻹﻟﯿﻜﺘﺮوﻧﻲ ‪ : E-Mail‬ﻛﯿﻒ ﻧﺪرج وﺻﻠﻪ إﻟﻲ اﻟﻌﻨﻮان اﻟﺒﺮﯾﺪي اﻟﺨﺎص ﺑﻨﺎ ﻓﺎﻟﻮاﻗﻊ اﻹﺟﺎﺑﻪ‬
‫ﺳﻬﻠﻪ ﺟﺪا ﻓﻬﺬه ﻫﻲ ﺻﯿﻐﺔ اﻟﺒﺮﯾﺪ اﻹﻟﯿﻜﺘﺮوﻧﻲ‬

‫ﱄ>"‪<A HREF="mailto:d4a@f2s.com‬‬ ‫>‪</A‬أرﺳﻞ‬

‫ﺗﻈﻬﺮ ﻟﻚ اﻟﻮﺻﻠﻪ ﺑﻬﺬا اﻟﺸﻜﻞ‬

‫أرﺳﻞ ﻟﻲ‬

‫وﺻﻠﻪ ﻟﺼﻮرة ‪ -:‬ﻓﻲ اﻟﺤﻘﯿﻘﻪ أن أدراج وﺻﻠﻪ ﺗﺸﻌﺒﯿﻪ ﺑﺼﻮرة ﻻ ﺗﺨﺘﻠﻒ ﻛﺜﯿﺮا ﻋﻦ اﻟﺴﺎﺑﻖ وﻟﻜﻦ ﺳﻨﻘﻮم ﺑﺸﺮﺣﻬﺎ‬
‫ﻓﻲ اﻟﻔﺼﻞ اﻟﻘﺎدم«‬

‫و ﺻﻠﻪ ﻟﻤﻠﻒ ‪ -:‬أدراج وﺻﻠﻪ ﻟﻤﻠﻒ ﻻ ﯾﺨﺘﻠﻒ ﻋﻦ أدراج وﺻﻠﻪ ﻟﺼﻮرة ﺗﻘﺮﯾﺒﺎ وﻟﻜﻦ ﯾﻮﺟﺪ إﺧﺘﻼف ﺑﺴﯿﻂ ﻓﺒﺪﻻ‬
‫ﻣﻦ أن ﯾﻔﺘﺢ اﻟﻤﺴﺘﻌﺮض اﻟﺼﻮرة ﻓﻲ ﺻﻔﺤﺔ ﺟﺪﯾﺪة ﯾﻘﻮم اﻟﻤﺴﺘﻌﺮض ﺑﺈﻇﻬﺎر ﻟﻚ ﺻﻨﺪوق اﻹﺧﺘﯿﺎرات ﻟﺤﻔﻆ‬
‫اﻟﻤﻠﻒ أو ﺗﺤﻤﯿﻠﻪ ﻣﻦ ﻋﻠﻲ اﻟﻤﻮﻗﻊ و ﻫﺬه ﻫﻲ اﻟﺼﯿﻐﻪ ‪-:‬‬

‫اﳌﻘﻄﻮﻋﺔ>"‪<A HREF="egypt.mid‬‬ ‫>‪ </A‬ﲪﻞ ﻫﺬه‬

‫ﺗﻈﻬﺮ ﻟﻚ اﻟﻮﺻﻠﻪ ﺑﻬﺬا اﻟﺸﻜﻞ و ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﯿﻬﺎ ﯾﻈﻬﺮ ﻟﻚ ﺻﻨﺪوق اﻹﺧﺘﯿﺎرات‬

‫ﺣﻤﻞ ﻫﺬه اﻟﻤﻘﻄﻮﻋﻪ‬

‫أﺳﺎﺳﯿﺎت إدراج اﻟﺼﻮر‬

 ‫اﻵن أﺻﺒﺢ ﻋﻨﺪك ﺻﻔﺤﺎت ﻣﺮﺑﻮﻃﺔ ﺑﻮﺻﻼت ﺗﺸﻌﺒﯿﻪ و ﻣﻨﺴﻘﻪ إﻟﻲ ﺣﺪ ﻣﺎ وﻟﻜﻦ ﻫﻞ ﻫﺬا ﯾﻘﻨﻌﻚ ؟ ! أﻧﺎ ﻻ أﻋﺘﻘﺪ‬
‫ﻻﺑﺪ ﻣﻦ أﻧﻪ ﯾﻮﺟﺪ ﺷﻲء ﻧﺎﻗﺺ ﻻﺑﺪ واﻧﻨﺎ ﻧﺴﯿﻨﺎ ﺷﻲء ﻣﺎ !!! أه‪ .....‬أﻧﻬﺎ اﻟﺼﻮر أن اﻟﺪارﺳﯿﻦ اﻟﺠﺪد ﯾﻔﻀﻠﻮن ﻣﻞء‬
‫ﺻﻔﺤﺎﺗﻬﻢ ﺑﺎﻟﺼﻮر ﻟﻜﻲ ﯾﻀﯿﻔﻮا اﻟﻨﺎﺣﯿﻪ اﻟﺠﻤﺎﻟﯿﻪ ﻟﺼﻔﺤﺎﺗﻬﻢ ‪ ،‬ﻓﻠﻬﺬا ﻻﺑﺪ وان ﺗﻜﻮن ﻣﻨﺘﺒﻪ اﻵن و أذا ﻛﺎن ﻟﺪﯾﻚ أي‬
‫إﺳﺘﻔﺴﺎر ﻋﻦ اﻟﺼﻔﺤﺎت اﻟﺴﺎﺑﻘﻪ أذﻫﺐ إﻟﻲ اﻟﺪروس اﻟﻤﺘﻘﺪﻣﺔ ﻓﻔﺒﻬﺎ ﺷﺮح أﻛﺜﺮ وأن ﻟﻢ ﯾﻔﯿﺪك أرﺳﻞ ﻟﻲ وﻻ ﺗﺘﺮدد‪.‬‬

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] إدراج ﺻﻮرة | ﺻﻮرة ذات وﺻﻠﻪ | اﻟﺨﻮاص اﻷﺳﺎﺳﯿﻪ [‬
‫إدراج ﺻﻮرة‬
‫ﻓﻲ اﻟﺒﺪاﯾﻪ ﻛﺎﻟﻌﺎده ﻧﺘﻌﺮف ﻋﻠﻲ اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺈدراج ﺻﻮرة و ﻫﻮ >‪ <IMG‬وﻫﻮ وﺳﻢ ﻣﻔﺮدو اﻟﻜﻠﻤﺔ إﺧﺘﺼﺎر‬
‫ﻟﻜﻠﻤﺔ )‪ .( IMAGe‬ﻟﻜﻦ ﻫﻞ ﯾﻜﻔﻲ ﻫﺬا ﻹدراج ﺻﻮرة؟ ﻛﻼ‪ ،‬ﺑﺎﻟﻄﺒﻊ ﯾﺠﺐ أن ﻧﺤﺪد اﻟﺼﻮرة اﻟﺘﻲ ﻧﺮﯾﺪﻫﺎ‪ .‬ﻟﺬﻟﻚ‬
‫ﻟﺘﺤﺪﯾﺪ ﻣﻮﻗﻊ واﺳﻢ اﻟﺼﻮرة واﻟﻜﻠﻤﻪ إﺧﺘﺼﺎر )‪ (SouRCe‬أي اﻟﻤﺼﺪر وﺗﻜﻮن اﻟﺼﯿﻐﺔ‬ ‫ﻧﻀﯿﻒ اﻟﺨﺎﺻﯿﺔ ﻟﻪ ‪SRC‬‬
‫ﻛﺎﻻﺗﻲ‪-:‬‬

‫ﻫﺎم ﺟﺪا‬

‫>"‪<IMG SRC="go.gif‬‬

‫و ﻟﻘﺪ أﺧﺘﺮت اﻟﺼﻮرة ذات اﻷﺳﻢ ‪ go‬و اﻟﺘﻲ إﻣﺘﺪادﻫﺎ ‪ ) gif‬ﻻﺑﺪ و أن ﺗﺘﺄﻛﺪ أن ﻧﻮع اﻟﻤﻠﻔﺎت ﺻﺤﯿﺢ ( و ﺗﻈﻬﺮ‬
‫ﺑﻬﺬا اﻟﺸﻜﻞ‬

‫إدراج ﺻﻮرة ذات وﺻﻠﻪ‪-:‬‬

‫ﺑﺎﻟﻄﺒﻊ ﺗﺴﺘﻄﯿﻊ أن ﺗﺪرج ﺻﻮرة ذات وﺻﻠﻪ ﺗﺸﻌﺒﯿﻪ إﻟﻲ ﺻﻔﺤﺔ أﺧﺮي أو ﺣﺘﻲ إﻟﻲ ﻣﻠﻒ و ﺗﻜﻮن اﻟﺼﯿﻐﺔ‬
‫ﻛﺎﻻﺗﻲ‪-:‬‬

‫>‪<A HREF="FirstPage.htm"><IMG SRC="go.gif"></A‬‬

‫وﺗﻈﻬﺮ ﺑﻬﺬا اﻟﺸﻜﻞ‬

‫و ﺗﻼﺣﻆ أن اﻟﺼﻮرة ﻻﺗﺒﺪو ﻣﺜﻞ اﻟﺼﻮرة اﻟﺴﺎﺑﻘﻪ ﺗﻤﺎم !!‪.‬وﻫﺬا ﻻن اﻟﻤﺴﺘﻌﺮض أﺣﺎط اﻟﺼﻮرة ﺑﺈﻃﺎر‬
‫)‪ ( BORDER‬ﻟﯿﻈﻬﺮ أن ﻫﺬه اﻟﺼﻮرة ذات وﺻﻠﻪ ﺗﺸﻌﺒﯿﻪ إﻟﻲ ﺻﻔﺤﺔ أﺧﺮي او ﻣﻠﻒ ‪ .‬ﺑﺎﻟﻄﺒﻊ ﻫﺬه اﻟﻄﺮﯾﻘﻪ‬
‫ﻟﯿﺴﺖ داﺋﻤﺎ ﺗﻼﻗﻲ ﺗﺮﺣﯿﺐ ﻓﻠﻬﺬا ﻣﻦ اﻟﻤﻤﻜﻦ أن ﺗﺘﺨﻠﺺ ﻣﻦ ﻫﺬا اﻹﻃﺎر ﺑﺄن ﺗﻀﻊ ﻫﺬه اﻟﺨﺎﺻﯿﻪ داﺧﻞ ﻛﻮد أو‬
‫ﺷﻔﺮة إدراج اﻟﺼﻮرة "‪ border="٠‬وﻓﻲ أﻏﻠﺐ اﻷﺣﻮال ﺗﻜﻮن ﻗﯿﻤﺔ اﻹﻃﺎر ب ‪ ٢‬و ﺗﺴﺘﻄﯿﻊ أن ﺗﻘﻠﻞ أو‬
‫ﺗﺰﯾﺪﻫﺎ ﻛﻤﺎ ﺗﺤﺐ و ﺑﺎﻟﻄﺒﻊ ﺗﺴﺘﻄﯿﻊ أن ﺗﻀﻊ إﻃﺎر ﻟﻠﺼﻮرة اﻟﺘﻲ ﻻ ﺗﺤﺘﻮي ﻋﻠﻲ وﺻﻠﻪ ﻛﻤﺎ ﻓﻲ اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ‬

‫>"‪<img border="6" src="go.gif‬‬

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

‫‪BOTTOM‬‬

‫(ﻣﺜﻞ ﻫﺬه( وﻋﻨﺪﻣﺎ ﻻ ﻧﻘﻮم ﺑﺘﺤﺪﯾﺪ أي ﻣﺤﺎذاة ﻓﺈن‬ ‫ﻓﻲ اﻟﺤﺎﻟﺔ اﻟﻌﺎدﯾﺔ‬
‫اﻟﻨﺺ اﻟﺬي ﯾﻠﻲ اﻟﺼﻮرة ﯾﻈﻬﺮ ﺑﻤﺤﺎذاة اﻟﺤﺎﻓﺔ اﻟﺴﻔﻠﻰ ﻟﻬﺎ‪ .‬وﻫﺬه ﻫﻲ اﻟﺤﺎﻟﺔ اﻹﻓﺘﺮاﺿﯿﺔ ﻟﻈﻬﻮر اﻟﺼﻮر واﻟﺘﻲ‬
‫ﺗﻤﺜﻠﻬﺎ اﻟﻘﯿﻤﺔ‬

‫>"‪<IMG SRC="image.jpg" ALIGN="BOTTOM‬‬

‫‪TOP‬‬

‫وﻋﻨﺪ ﺗﺤﺪﯾﺪ ﻫﺬه اﻟﻘﯿﻤﺔ ﻓﺈن اﻟﺴﻄﺮ اﻷول ﻣﻦ اﻟﻨﺺ اﻟﺬي ﯾﻠﻲ اﻟﺼﻮرة‬
‫ﯾﻘﻊ ﺑﻤﺤﺎذاة اﻟﺤﺎﻓﺔ اﻟﻌﻠﯿﺎ ﻟﻬﺎ‪ .‬أﻣﺎ ﺑﺎﻗﻲ اﻟﻨﺺ ﻓﯿﻤﺘﺪ أﺳﻔﻠﻬﺎ ‪.‬‬

‫>"‪<IMG SRC="image.jpg" ALIGN="TOP‬‬

‫‪MIDDLE‬‬

‫أﻣﺎ ﻋﻨﺪ ﺗﺤﺪﯾﺪ ﻫﺬه اﻟﻘﯿﻤﺔ ﻓﺈن اﻟﺴﻄﺮ اﻷول ﻣﻦ اﻟﻨﺺ ﯾﻘﻊ ﺑﻤﺤﺎذاة‬
‫ﻣﻨﺘﺼﻒ اﻟﺼﻮرة‪ .‬ﻛﺬﻟﻚ ﻓﺈن ﺑﺎﻗﻲ اﻟﻨﺺ ﯾﻤﺘﺪ أﺳﻔﻠﻬﺎ ‪.‬‬

‫>"‪<IMG SRC="image.jpg" ALIGN="MIDDLE‬‬

‫‪LEFT‬‬
 ‫ﻫﺬه اﻟﻘﯿﻤﺔ ﺗﺆدي إﻟﻰ ﻣﺤﺎذاة اﻟﺼﻮرة إﻟﻰ أﻗﺼﻰ اﻟﯿﺴﺎر‪ .‬ﻣﻊ اﻟﺘﻔﺎف‬
‫اﻟﻨﺺ اﻟﺬي ﯾﻠﯿﻬﺎ ﻋﻠﻰ اﻟﺠﻬﺔ اﻟﯿﻤﻨﻰ وﻟﻌﺪة أﺳﻄﺮ ﺣﺴﺐ ارﺗﻔﺎع اﻟﺼﻮرة‪.‬‬

‫>"‪<IMG SRC="image.jpg" ALIGN="LEFT‬‬

‫‪RIGHT‬‬

‫أﻣﺎ ﻫﺬه اﻟﻘﯿﻤﺔ ﻓﺘﺆدي إﻟﻰ ﻣﺤﺎذاة اﻟﺼﻮرة إﻟﻰ أﻗﺼﻰ اﻟﯿﻤﯿﻦ‪ .‬ﻣﻊ اﻟﺘﻔﺎف‬
‫اﻟﻨﺺ اﻟﺬي ﯾﻠﯿﻬﺎ ﻋﻠﻰ اﻟﺠﻬﺔ اﻟﯿﺴﺮى وﻟﻌﺪة أﺳﻄﺮ ﺣﺴﺐ ارﺗﻔﺎع‬
‫اﻟﺼﻮرة ‪.‬‬

‫>"‪<IMG SRC="image.jpg" ALIGN="RIGHT‬‬

‫ﻟﻤﺰﯾﺪ ﻣﻦ اﻟﻤﻌﻠﻮﻣﺎت واﻟﻘﯿﻢ أﻗﺮأ اﻟﺪروس اﻟﺨﺎﺻﻪ ﺑﺎﻟﺼﻮر‬

‫واﻵن إﻟﻲ اﻟﻔﺼﻞ اﻟﺘﺎﻟﻲ ‪ -:‬أﻟﻮان اﻟﻮﺻﻼت و اﻟﺨﻠﻔﯿﻪ‬

‫ﺧﻮاص اﻟﺼﻔﺤﺔ‬
‫ﻫﺎي اﻵن ﻧﺴﺘﻄﯿﻊ أن ﻧﻘﻮل أﻧﻚ ﻟﺪﯾﻚ ﻗﺪر ﻗﻠﯿﻞ ﻣﻦ اﻟﻌﺒﻘﺮﯾﻪ ﻓﻲ اﻟـ ‪ ، HTML‬أﻧﺖ ﺗﺘﻤﻨﻲ أن ﯾﻜﻮن ﻣﻮﻗﻌﻚ ذو‬
‫ﺷﻜﻞ ﻣﻘﺒﻮل وﻫﺬا ﯾﻌﻨﻲ أﺳﺘﺨﺪم ﺟﯿﺪ ﻷﻟﻮان وﺗﺼﻤﯿﻢ ﺟﺬاب !!! ‪ ،‬ﻓﺤﺘﻰ اﻵن اﻷﻟﻮان اﻟﻮﺣﯿﺪه ﻋﻠﻲ ﺻﻔﺤﺘﻚ ﻛﺎﻧﺖ‬
‫اﻷﺑﯿﺾ اﻟﺨﻠﻔﯿﻪ اﻷﺳﻮد ﻟﻠﻨﺺ اﻷزرق ﻟﻠﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﻪ اﻟﻦ ﺗﺤﺐ أن ﺗﻐﯿﯿﺮﻫﻢ إﻟﻲ ﺷﻲء أﻛﺜﺮ ﺟﻤﺎﻟﻪ وأﻧﺎﻗﻪ؟‪!!.‬‬

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫[وﺳﻢ اﻟﺠﺴﻢ‪ | Body Tag‬ﻟﻮن اﻟﺨﻠﻔﯿﻪ | اﻟﻨﺺ | اﻟﻮﺻﻠﻪ | اﻟﻮﺻﻠﻪ اﻟﻤﺰارة | اﻟﻮﺻﻠﻪ اﻟﻨﺸﻄﻪ | ﺻﻮرة اﻟﺨﻠﻔﯿﻪ‬
‫|اﻟﻬﻮاﻣﺶ | ﻛﻠﻤﺔ ﻋﻠﻲ إﺧﺘﯿﺎر اﻷﻟﻮان]‬

‫وﺳﻢ اﻟﺠﺴﻢ ‪Body Tag‬‬

‫اﻷن أﻧﺖ ﻟﺪﯾﻚ ﻣﻌﺮﻓﺔ وﻗﺪرة ﻋﻠﻲ إﺳﺘﻌﻤﺎل ﺧﻮاص اﻷوﺳﻤﻪ ‪ ،‬وﻫﺬا ﯾﺒﺸﺮ ﺑﺒﺪاﯾﻪ ﺟﯿﺪه ‪.‬‬
‫ﺗﺘﺬﻛﺮ ﺑﺎﻟﻄﺒﻊ وﺳﻢ اﻟـ‪ BODY‬اﻟﻤﻮﺟﻮد ﻓﻲ ﺻﻔﺤﺘﻲ اﻷوﻟﻲ ﺣﯿﺚ ﻛﻞ ﺷﻲء ﯾﻜﻮن ﻣﺮئ ﻓﻲ ﺻﻔﺤﺘﻚ ﻻﺑﺪ وان‬
‫ﯾﻜﻮن ﺑﺪاﺧﻞ ﻫﺬا اﻟﻮﺳﻢ ‪ ،‬و ﻫﺬا اﻟﻮﺳﻢ ﻣﺎ ﺳﻮف ﻧﺘﺪﺣﺪث ﻋﻨﻪ ﻓﻲ ﻫﺬا اﻟﻔﺼﻞ ‪ .‬ﻫﻨﺎك ﺳﺒﻌﺔ ﺧﻮاص ﺗﻀﺎف إﻟﻲ‬
‫ﻫﺬا اﻟﻮﺳﻢ ﻛﻞ ﻣﻨﻬﺎ ﺗﺘﺤﻜﻢ ﻓﻲ ﻣﻈﻬﺮ وﺗﺼﻤﯿﻢ ﺻﻔﺤﺘﻚ ‪-:‬‬
 ‫ﻟﻮن اﻟﺨﻠﻔﯿﻪ‬
‫ون ﺳﺘﺨﺪم ﻟﺘﻐﯿﯿﺮ ﻟﻮن اﻟﺨﻠﻔﯿﻪ اﻟﺨﺎﺻﯿﻪ ‪ BGCOLOR‬و‪ BG‬إﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ ‪ BackGround‬و ﻻﺑﺪ أن ﺗﻀﻊ‬
‫اﻟﻘﯿﻤﺔ أي اﻟﻠﻮن ﺑﻜﻮد اﻟـ ‪ HEX‬ﻣﺜﻞ ﺑﺎﻗﻲ اﻷﻟﻮان !! وﻟﻜﻦ أراك ﺗﺘﺴﺎﺋﻞ ﻣﺎ ﻫﻮ ﻛﻮد اﻟـ ‪ HEX‬؟!!! ﺳﺆال ﺟﯿﺪ‬
‫وﻟﻜﻦ ﻫﺬا ﻣﻌﻨﺎه أﻧﻚ ﻻﺑﺪ وأن ﺗﻘﺮأ ﺗﻌﺮﯾﻒ ﻫﺬا اﻟﻜﻮد ‪ ،‬أذا وددت أن ﺗﺮي ﻗﺎﺋﻤﺔ ﺑﺄﻛﻮاد ‪ ٢١٦‬ﻟﻮن ﻣﺨﺘﻠﻔﯿﻦ أﻟﻘﻲ‬
‫ﻧﻈﺮه ﻋﻠﻲ ﻫﺬا اﻟﻤﺨﻄﻂ أﻣﺎ ﺑﺎﻟﻨﺴﺒﻪ ﻟﻠﻜﻮد ﯾﻜﻮن ﺑﻬﺬا اﻟﺸﻜﻞ‬

‫"‪BGCOLOR="#FFFFFF‬‬

‫ﻣﻼﺣﻈﺔ ‪ -:‬ﻫﺬا اﻟﻜﻮد ﻟﻠﻮن اﻷﺑﯿﺾ ﻓﺄذا وددت أن ﺗﻜﻮن ﺧﻠﯿﻔﯿﻪ ﺻﻔﺤﺘﻚ ﺑﻬﺬا اﻟﻠﻮن ﻻﺑﺪ ﻣﻦ ﻛﺘﺎﺑﻪ ﻫﺬا اﻟﻜﻮد ‪،‬‬
‫ﻫﺬا ﺑﺎﻟﺮﻏﻢ ﻣﻦ أن اﻟﻠﻮن اﻷﺑﯿﺾ ﻫﻮ اﻟﻠﻮن اﻷﺳﺎﺳﻲ ﻟﻠﺼﻔﺤﺎت وﻟﻜﻦ ﺑﻌﺾ اﻟﻤﺴﺘﻌﺮﺿﺎت ﯾﻜﻮن اﻟﻠﻮن اﻷﺳﺎﺳﻲ‬
‫ﻟﻬﺎ ﻫﻮ اﻟﺮﻣﺎدي‬
‫اﻟﻨﺺ‬
‫ﻻ ﯾﺨﺘﻠﻒ ﻛﺜﯿﺮا ﻛﻮد اﻟﻨﺺ ﻋﻦ ﻛﻮد اﻟﺨﻠﻔﯿﻪ ﻟﻜﻦ ﻧﻨﺼﺢ داﺋﻤﺎ ﺑﺘﺮك ﻟﻮن اﻟﺨﻠﻔﯿﻪ ﻋﻠﻲ اﻟﻠﻮن اﻷﺳﺎﺳﻲ وﻫﻮ اﻷﺳﻮد‬
‫ﺣﯿﺚ أﻧﻪ اﻷﺳﻬﻞ ﻓﻲ اﻟﻘﺮاءه و إﻟﯿﻚ اﻟﻜﻮد‬

‫"‪TEXT="#000000‬‬

‫اﻟﻮﺻﻠﻪ‬
‫ﺑﺎﻟﻄﺒﻊ ﺗﻈﻬﺮ ﻟﻚ ﻛﻞ اﻟﻮﺻﻼت ﺑﺎﻟﻠﻮن اﻷزرق ‪ ،‬ﻟﻜﻦ ﯾﻤﻜﻨﻚ أن ﺗﻐﯿﺮ ﻫﺬا إﻟﻲ أي ﻟﻮن ﯾﺤﻠﻮ ﻟﻚ و ﻫﺬا ﻫﻮ اﻟﻜﻮد‬

‫"‪LINK="#FF00FF‬‬

‫اﻟﻮﺻﻠﻪ اﻟﻤﺰارة‬
‫ﻋﻨﺪﻣﺎ ﺗﻀﻐﻂ ﻋﻠﻲ أي وﺻﻠﻪ ﺛﻢ ﺗﻌﻮد ﻣﺮة أﺧﺮي ﻟﻠﺼﻔﺤﺔ اﻟﺘﻲ ﺿﻐﻂ ﻓﯿﻬﺎ ﻋﻠﻲ ﺗﻠﻚ اﻟﻮﺻﻠﻪ ﻓﺄﻧﻚ ﺗﻼﺣﻆ ﺗﻐﯿﺮ‬
‫ﺗﻠﻚ اﻟﻮﺻﻠﻪ إﻟﻲ اﻟﻠﻮن اﻟﺒﻨﻔﺴﺠﻲ و ﺑﺎﻟﻄﺒﻊ ﺗﺴﺘﻄﯿﻊ أن ﺗﻐﯿﯿﺮ ﻫﺬا اﻟﻠﻮن و إﻟﯿﻚ اﻟﻜﻮد‬

‫"‪VLINK="#660066‬‬

‫اﻟﻮﺻﻠﻪ اﻟﻨﺸﻄﻪ‬
‫ﻻ أﻋﺮف ﻫﻞ ﻗﺎﺑﻠﺖ ﻣﺜﻞ ﻫﺬا أم ﻻ وﻟﻜﻦ ﺑﺈﺧﺘﺼﺎر ﻋﻨﺪﻣﺎ ﺗﻘﻮم ﺑﺎﻟﻀﻐﻂ ﻋﻠﻲ وﺻﻠﻪ ﺛﻢ ﺗﺪﺧﻞ اﻟﺼﻔﺤﺔ وﺗﺠﺪ ﺑﻬﺎ‬
‫ﻧﻔﺲ اﻟﻠﻮﺻﻠﻪ ﻟﻜﻦ ﻟﻮﻧﻬﺎ ﻗﺪ ﺗﺤﻮل إﻟﻲ اﻟﻠﻮن اﻷﺳﻮد ﻣﺜﻼ وﻻ ﺗﺴﺘﻄﯿﻊ أن ﺗﻀﻐﻂ ﻋﻠﯿﻬﺎ ﻣﺮة أﺧﺮي ﻋﻨﺪﻫﺎ ﺗﻜﻮن‬
‫ﻫﺬه اﻟﻮﺻﻠﻪ ﻫﻲ اﻟﻮﺻﻠﻪ اﻟﻨﺸﻄﺔ أي اﻟﺼﻔﺤﺔ اﻵن ﻫﻲ اﻟﺼﻔﺤﺔ اﻟﻌﺎﻣﻠﺔ ﻟﻬﺬه اﻟﻮﺻﻠﻪ و ﻫﺬا ﻫﻮ اﻟﻜﻮد‬

‫"‪ALINK="#FF0000‬‬

‫ﺻﻮرة اﻟﺨﻠﻔﯿﻪ‬
 ‫ﺗﺮﯾﺪ أن ﺗﻀﻊ ﺻﻮرة ﻓﻲ اﻟﺨﻠﻔﯿﻪ !!! ﻓﻜﺮة ﺟﯿﺪة ﺧﺬ ﻫﺬه اﻟﺨﺎﺻﯿﻪ و أﺳﺘﺨﺪﻣﻬﺎ ﻟﻌﻤﻞ اﻟﺼﻮرة ﻛﺎﺧﻠﻔﯿﻪ و ﺿﻊ‬
‫اﻟﻘﯿﻤﺔ ﻛﻤﺎ ﺗﻔﻌﻞ ﻓﻲ إدراج اﻟﺼﻮرة ‪ ) ، SRC‬إذا ﻛﻨﺖ ﻻ ﺗﺪري ﻛﯿﻒ أﻗﺮأ اﻟﺒﺤﺚ اﻟﺪرس اﻟﺨﺎص ﺑﺎﻟﺼﻮر( ‪.‬‬
‫ﯾﻤﻜﻨﻚ أﯾﻀﺎ أن ﺗﺴﺘﺨﺪم ﺻﻮرة ﻣﻦ ﻣﻮﻗﻊ أﺧﺮ ﻋﻦ ﻃﺮﯾﻖ وﺿﻊ اﻟﻮﺻﻠﻪ اﻟﺨﺎﺻﺔ ﺑﻪ ﻟﺪﯾﻚ ‪ ،‬ﺗﺴﺘﻄﯿﻊ أن ﺗﺴﺘﺨﺪم‬
‫ﻣﺜﻼ ﻫﺬه اﻟﺼﻮرة اﻟﺨﺎص ﺑﻤﻮﻗﻌﻨﺎ ‪ Downloads Free‬ﻓﻘﻂ ﺿﻊ ﻫﺬا اﻟﻜﻮد‬

‫"‪BACKGROUND="http://www.geocities.com/asdh4/images/bak.jpg‬‬

‫ﯾﺠﺐ أن ﺗﻌﺮف أن أي ﺻﻮرة ﺳﻮف ﺗﺨﺘﺎره ﺳﺘﻘﻮم ﺑﺘﻜﺮار ﻧﻔﺴﻬﺎ ﻓﻲ ﻣﻞء اﻟﻤﺴﺘﻌﺮض وﻟﻬﺬا ﯾﺠﺐ أن ﺗﺨﺘﺎر‬
‫ﺗﻜﻤﻞ ﻧﻔﺴﻬﺎ ﺑﻤﻌﻨﻲ أن ﺗﻜﻮن اﻟﺼﻮرة ﻟﻮﺣﺪﻫﺎ ﻻ ﺗﺸﻜﻞ ﺷﻲء وﻟﻜﻦ ﻋﻨﺪ ﺗﻜﺮاراﻫﺎ ﺗﻜﻮن ﻣﻨﻈﺮ ﺟﯿﺪ‪،‬‬
‫و ﯾﻮﺟﺪ أﯾﻀﺎ ﺧﺎﺻﯿﻪ ﺗﺠﻌﻞ اﻟﺼﻮرة ﻛﻌﻼﻣﺔ ﻣﺎﺋﯿﻪ ‪ Watermark‬ﺑﻤﻌﻦ أن ﺗﻜﻮن اﻟﺼﻮرة ﺛﺎﺑﺘﺔ وﻻ ﯾﺤﺪث ﻟﻬﺎ‬
‫‪ Scroll‬و ﻟﻬﺬه اﻟﺨﺎﺻﯿﺔ ﺿﻊ ﻫﺬا اﻟﻜﻮد داﺧﻞ ‪Body‬‬

‫"‪BGPROPERTIES="FIXED‬‬

‫اﻟﻬﻮاﻣﺶ‬
‫ﯾﻮﺟﺪ ﻧﻮﻋﯿﻦ ﻣﻦ اﻟﻬﻮاﻣﺶ ﻫﻮاﻣﺶ ﺟﺎﻧﺒﯿﻪ وﻫﻮاﻣﺶ أﻓﻘﯿﻪ ‪ ،‬وﻟﻜﻦ اﻟﻤﺴﺘﻌﺮﺿﺎن اﻷﺳﺎﺳﯿﺎن ﯾﺴﺘﺨﺪﻣﺎن ﻛﻮدان‬
‫ﻣﺨﺘﻠﻘﺎن وﻟﻬﺬا ﻋﻨﺪﻣﺎ ﺗﻘﻮم ﺑﺘﻐﯿﯿﺮ أﺣﺪﻫﻤﺎ ﯾﺠﺐ ﺗﻐﯿﯿﺮ اﻷﺧﺮ ﺑﻨﻔﺲ اﻟﻄﺮﯾﻘﺔ‬

‫"‪TOPMARGIN="0‬‬ ‫"‪ LEFTMARGIN="0‬و‬ ‫و ﻫﺬه ﻫﻲ اﻟﺼﯿﻐﺔ ﻟﻠـ ‪Internet Explorer‬‬

‫"‪ MARGINWIDTH="0‬و "‪MARGINHEIGHT="0‬‬ ‫و ﻫﺬه ﻫﻲ اﻟﺼﯿﻐﺔ ﻟﻠـ ‪Netscape‬‬

‫ﻋﻠﻲ اﻟﺮﻏﻢ ﻣﻦ أن أﻛﻮاد اﻟﻤﺴﺘﻌﺮﺿﺎن ﻣﺨﺘﻠﻔﺎن إﻻ أن وﺣﺪات اﻟﻘﯿﺎس واﺣﺪه وﻫﻲ اﻟﺒﯿﻜﺴﻞ و ﻟﻬﺬا إذا أرﺗﺪ أن‬
‫ﯾﻜﻮن اﻟﻤﻘﯿﺎس ﺛﺎﺑﺖ ﻓﻲ ﻛﻼﻣﻦ اﻟﻤﺴﺘﻌﺮﺿﺎن ﻓﻘﻂ أﺧﺘﺎر ﻧﻔﺲ اﻟﻘﯿﻤﺔ ‪.‬‬
‫أرﻧﻲ اﻟﻜﻮد ﻛﺎﻣﻼ‬
‫واﻵن اﻟﻮﺳﻢ اﻟﻜﺎﻣﻞ ﻟﻠـ‪ Body‬ﯾﻜﻮن ﻣﺜﻞ ﻫﺬا اﻟﺸﻜﻞ ﻣﺜﻼ‬
‫اﻟﻮﺳﻢ اﻟﻜﺎﻣﻞ‬

‫"‪<BODY BGCOLOR="#FFFFFF" BACKGROUND="bubbles.gif" TEXT="#000000‬‬

‫"‪LINK="#3399FF" VLINK="#9966FF" ALINK="#000000" BGPROPERTIES="FIXED‬‬
‫>"‪TOPMARGIN="0" MARGINHEIGHT="0‬‬

‫ﻛﻠﻤﺔ ﻋﻠﻲ إﺧﺘﯿﺎر اﻷﻟﻮان‬

‫ﯾﺠﺐ ﻋﻠﯿﻚ أن ﺗﺨﺘﺎر أﻟﻮان ﺟﺬاب ﻣﺘﻨﺎﺳﻘﻪ ﻣﻊ ﺑﻌﻀﻬﺎ اﻟﺒﻌﺾ و أن ﺗﺒﻌﺪ ﺗﻤﺎﻣﺎ ﻋﻦ اﻷﻟﻮان اﻟﻔﺎﻗﻌﺔ ﻓﺨﺘﺎر اﻷﻟﻮان‬
‫اﻟﻬﺎدﺋﻪ و اﻟﻤﺨﻤﻠﯿﻪ ﻓﺎﻟﻤﻮاﻗﻊ اﻟﻤﻨﺘﺸﺮه واﻟﻤﺸﻬﻮر ﺗﺨﺘﺎر أﻟﻮان ﺑﺴﯿﻂ ﻛﻲ ﺗﺠﻌﻞ اﻟﺰاﺋﺮ أﻛﺜﺮ راﺣﺔ ﻋﻨﺪ دﺧﻮﻟﻪ‬
‫ﻟﻤﻮﻗﻊ ‪ ،‬ﻛﻤﺎ ﺗﺠﻨﺐ ﻋﻨﺪ أﺧﺘﯿﺎرك ﻟﻠﺼﻮرة اﻟﺨﻠﻔﯿﻪ أن ﺗﺨﺘﺎر ﺧﻠﻔﯿﻪ ذات أﻟﻮان ﺑﺎﻫﺘﻪ وﻟﻜﻦ ﺟﻤﯿﻠﻪ ﺣﺘﻲ ﯾﺘﺴﻨﻲ‬
‫ﻟﻠﻘﺎرء رؤﯾﻪ اﻟﻨﺺ و ﻻﺗﺨﺘﺎر ﻟﻮن ﻟﻠﻨﺺ ﻗﺮﯾﺐ ﻣﻦ ﻟﻮن اﻟﺨﻠﻔﯿﻪ أو ﻟﻮن ﺻﻮرة اﻟﺨﻠﻔﯿﻪ ﻓﻬﺬا ﯾﺰﯾﺪ ﺻﻌﻮﺑﻪ ﻋﻠﻲ‬
‫اﻟﻘﺎريء ﻣﻦ رؤﯾﻪ اﻟﻨﺺ ﺑﻮﺿﻮح ﻓﺎﻟﻨﺺ ﺳﯿﺨﺘﻔﻲ ﻣﻊ ﻟﻮن اﻟﺨﻠﻔﯿﻪ اﻟﻘﺮﯾﺐ ﻣﻦ ﻟﻮﻧﻪ ‪.‬‬
‫ﺣﺎول ﻋﺪم إﺳﺘﺨﺪام ﺻﻮر ﻟﻠﺨﻠﻔﯿﻪ ﻣﺮﻋﺒﻪ أو أﻟﻮان ﺳﺎﺧﻨﺔ ﻣﺜﻞ اﻷﺣﻤﺮ ﻣﺜﻼ ﺣﺘﻲ ﻻ ﯾﺤﺪث إرﺗﻄﺎم ﺑﺼﺮي ﻟﻠﺰاﺋﺮ‬
‫ﺑﺄﻟﻮان ﻣﻮﻗﻊ إﻟﻘﻲ ﻧﻈﺮه ﻋﻠﻲ ﻫﺬا اﻟﻤﻮﻗﻊ ﻟﻜﻲ ﺗﻔﻬﻢ ﻣﺎذا أﻗﺼﺪ « ‪mathmos.com‬‬

‫و اﻵن ﺗﺮﯾﺪ ﻣﺴﺎﺣﺔ ﻣﺠﺎﻧﯿﻪ ﻟﻮﺿﻊ ﻣﻮﻗﻊ ﻋﻠﻲ اﻹﻧﺘﺮﻧﺖ أﺿﻐﻂ ﻫﻨﺎ« ﻣﻮاﻗﻊ اﻹﺳﺘﻀﺎﻓﺔ اﻟﻤﺠﺎﻧﯿﻪ‬

‫ﻣﺮﺟﻊ اﻟﻤﺴﺎﺣﺎت اﻟﻤﺠﺎﻧﯿﺔ‬

‫ﻋﻨﺪﻣﺎ ﺗﻨﺘﻬﻲ ﻣﻦ إﻧﺸﺎء ﻣﻮﻗﻌﻚ ﻓﻌﻨﺪﻫﺎ ﺳﺘﺤﺘﺎج إﻟﻲ رﻓﻊ ﻣﻮﻗﻊ أو وﺿﻊ ﻣﻮﻗﻌﻚ ﻋﻠﻲ ﺷﺒﻜﺔ اﻹﻧﺘﺮﻧﺖ ‪ ،‬وﻫﺬا‬
‫ﯾﺘﻀﻤﻦ إرﺳﺎل ﻣﻠﻔﺎﺗﻚ إﻟﻲ اﻟـ ‪Server‬أو اﻟﺨﺎدم ) ﻫﻮ ﺟﻬﺎز ﻣﺘﺼﻞ داﺋﻤﺎ ﺑﺎﻹﻧﺘﺮﻧﺖ ( وﻋﻦ ﻃﺮﯾﻖ اﻟﺴﯿﺮﻓﺮ‬
‫ﯾﺴﺘﻄﯿﻊ أي ﺷﺨﺺ أن ﯾﺪﺧﻞ إﻟﻲ ﻣﻮﻗﻌﻚ و ﯾﺘﺼﻔﺤﻪ ‪.‬‬
‫ااﻟﻤﻜﺎن اﻟﺬي ﺗﻀﻊ ﺑﻪ ﻣﻮﻗﻌﻚ ﯾﺴﻤﻲ ‪ ، WebSpace‬و ﯾﻮﺟﺪ اﻟﻜﺜﯿﺮ ﻣﻦ اﻟﺸﺮﻛﺎت اﻟﺘﻲ ﺗﻌﻄﻲ ﻣﺴﺎﺣﺎت ﻣﺠﺎﻧﯿﻪ‬
‫وﻟﻜﻦ ﺑﺸﺮوط ﻣﻌﯿﻨﻪ‬

‫اﻟﻌﻨﻮان‬ ‫اﻹﺳﻢ‬
‫‪»» www.freeservers.com‬‬ ‫‪FreeServers‬‬
‫‪»» www.xoom.com‬‬ ‫‪Xoom‬‬
‫‪»» www.geocities.com‬‬ ‫‪Geocities‬‬
‫‪»» www.homestead.com‬‬ ‫‪Homestead‬‬
‫‪»» www.tripod.com‬‬ ‫‪Tripod‬‬
‫‪»» www.crosswinds.net‬‬ ‫‪CrossWinds‬‬

‫إﺧﺘﯿﺎرك ﻟﻠﺸﺮﻛﺔ اﻟﻤﺴﺘﻀﯿﻒ ﻟﻤﻮﻗﻊ ﻫﻮ ﻗﺮار ﻫﺎم ﺟﺪا ‪ .‬ﻣﻦ ﺣﯿﺚ ﻫﻞ ﺗﻮاﻓﻖ اﻟﺸﺮﻛﺔ اﻟﻤﺴﺘﻀﯿﻔﻪ أن ﺗﻀﻊ‬
‫إﻋﻼﻧﺎت ﻓﻲ ﻣﻮﻗﻌﻚ أم ﻻ ؟ وﺗﺤﺘﺎج إﯾﻀﺎ دﻓﺘﺮ زوار وﻋﺪاد ﻟﻠﺰاﺋﺮﯾﻦ و إﺣﺼﺎﺋﯿﺎت ﻋﻦ اﻟﻤﻮﻗﻊ ؟ ﻛﻞ ﻫﺬه‬
‫اﻟﻤﻤﯿﺰات و أﻛﺜﺮ ﻣﻨﻬﺎ ﻣﻮﺟﻮدﯾﻦ ﺑﺎﻟﻔﻌﻞ ﻓﻲ اﻟﻘﺎﺋﻤﺔ اﻟﺘﻲ ﺗﻢ ﻋﺮﺿﻬﺎ أﻋﻠﻲ ﻓﻬﺬه اﻟﻘﺎﺋﻤﺔ ﺗﺸﻤﻞ ﻋﻠﻲ أﺷﻬﺮ وأﻓﻀﻞ‬
‫اﻟﻤﻮاﻗﻊ اﻟﺘﻲ ﺗﺴﺘﻀﯿﻒ وﺗﻌﻄﻲ اﻟﻤﺴﺎﺣﺎت اﻟﻤﺠﺎﻧﯿﻪ ‪ ،‬و اﻟﻘﺮار ﻟﻚ أﻧﺖ ﻣﻦ ﺣﯿﺚ ﻣﻤﯿﺰات ﻛﻞ ﺷﺮﻛﺔ ﻓﯿﻮﺟﺪ‬
‫ﺷﺮﻛﺎت ﺗﻌﻄﻲ ﻣﺴﺎﺣﺔ ‪ ٢٠‬ﻣﯿﺠﺎ ﺑﯿﺖ ﻓﻘﻂ و أﺧﺮي ‪ ١٥‬وأﺧﺮي ‪ ٥٠‬ﻣﯿﺠﺎ ﺑﯿﺖ و أﻧﺖ ﻟﺪﯾﻚ اﻟﻘﺮار و اﻹﺧﺘﯿﺎر‬
‫وأﻓﻀﻞ ﻃﺮﯾﻘﻪ ﻟﻜﻲ ﺗﻌﺮف أﯾﻬﻢ أﻓﻀﻞ ﻟﻚ أن ﺗﺠﺮﺑﻬﻢ ☺‬

‫ﺑﻤﺠﺮد ﺣﺼﻮﻟﻚ ﻋﻠﻲ ﻣﺴﺎﺣﺔ ﻣﺠﺎﺑﯿﻪ واﻹﺷﺘﺮاك ﻓﻲ ﺷﺮﻛﺔ ﻣﻦ اﻟﺸﺮﻛﺎت و اﻟﺤﺼﻮل ﻋﻞ اﻹﺳﻢ اﻟﻤﻤﯿﺰ ﻟﻚ ‪،‬‬
‫ﻋﺘﺪﻫﺎ ﺳﺘﺤﺘﺎج إﻟﻲ أن ﯾﻜﻮن ﻣﻮﻗﻊ ﻋﻠﻲ اﻹﻧﺘﺮﻧﺖ وﻟﺬﻟﻚ ﯾﺠﺐ ﻋﻠﯿﻚ ﻧﻘﻞ ﻣﻠﻔﺎت إﻟﻲ اﻟﺴﯿﺮﻓﺮ أو اﻟﺨﺎدم وﻟﻬﺬا ﻻﺑﺪ‬
‫ﻣﻦ إﺳﺘﻌﻤﺎل أي ﺑﺮﻧﺎﻣﺞ ﻣﻦ ﺑﺮاﻣﺞ ‪ FTP‬أو أي ﻃﺮﯾﻘﻪ أﺧﺮي ﻟﻨﻘﻞ اﻟﻤﻠﻔﺎت إﻟﻲ اﻹﻧﺘﺮﻧﺖ وﻋﻨﺪ ﺣﺼﻮﻟﻚ ﻋﻠﻲ‬
‫ﺑﺮﻧﺎﻣﺞ ‪ FTP‬ﺳﺘﺤﺘﺎج إﻟﻲ ﻛﺘﺎﺑﻪ ‪ Name User‬اﻹﺳﻢ اﻟﻤﺸﺘﺮك ﺑﻪ و ﻛﻠﻤﺔ اﻟﻤﺮور اﻟﺨﺎص ﺑﻚ ﻟﻨﻘﻞ ﻣﻮﻗﻌﻚ‬
‫إﻟﻲ اﻟﺴﯿﺮﻓﺮ ) اﻟﺨﺎدم ( وﻋﻨﺪ إﻛﺘﻤﺎل ﻧﻘﻞ اﻟﻤﻠﻔﺎت ﯾﺠﺐ أن ﯾﻜﻮن ﻣﻮﻗﻌﻚ ﻣﺘﺎح اﻵن ﻋﻠﻲ ﺷﺒﻜﺔ اﻹﻧﺘﺮﻧﺖ‬
 ‫ﻣﻼﺣﻈﺔ‪ -:‬ﯾﺠﺐ أن ﺗﺴﻤﻲ أول ﺻﻔﺤﺔ )‪ index.htm‬أو ‪ ( index.html‬ﺣﺘﻲ ﯾﺘﻌﺮف اﻟﻤﺴﺘﻌﺮض ﻋﻠﻲ‬
‫أي ﻣﻦ اﻟﺼﻔﺤﺎت ﺳﯿﺘﻢ ﻋﺮﺿﻬﺎ أوﻻ ‪.‬‬

‫اﻟﻨﺼﻮص‬

‫إن أﺳﻬﻞ ﺷﻲء ﻫﻮ أن ﺗﻜﺘﺐ ﻓﻲ ﻣﻮﻗﻌﻚ و اﻟﺰوار ﺳﯿﻘﺮأوﻧﻪ ‪ ،‬ﻟﻜﻦ ﺑﺪون ﺑﻌﺾ اﻟﺘﻌﺪﯾﻼت واﻟﺘﻨﺴﯿﻘﺎت ﺳﯿﻜﻮن‬
‫ﻧﺼﻚ ﻗﺒﯿﺢ و ﻏﯿﺮ ﺻﺎﻟﺢ ﻟﻠﻘﺮأه ‪ .‬ﺷﻜﺮاااااااااا ‪ ،‬ﺗﻨﺴﯿﻖ اﻟﻨﺺ ﻫﻮ أﺳﻬﻞ ﺟﺰء ﻓﻲ ﻟﻐﺔ ال ‪ ،HTML‬ﻟﻜﻦ ﻫﻨﺎك‬
‫ﻧﺺ ﯾﻨﺴﻖ وﻧﺺ ﯾﻜﻮن ﺟﺬاب ‪ .‬أﻗﺮأ اﻵن‬

‫اﻟﻌﻨﺎوﯾﻦ وﺣﺠﻢ اﻟﺨﻄﻮط‬

‫أﻧﺖ ﺗﺴﺘﻄﯿﻊ أن ﺗﻐﯿﺮ ﺣﺠﻢ اﻟﺨﻂ و ﻫﺬا ﺳﯿﺴﺎﻋﺪك ﻛﺜﯿﺮا ﻓﻲ ﺗﻨﺴﯿﻖ ﺻﻔﺤﺘﻚ‬

‫أﺷﻜﺎل وأﻟﻮان اﻟﺨﻄﻮط‬

‫ﻫﻞ ﺗﺮﯾﺪ ﻧﺺ ﻋﺪﯾﺪ اﻷﻟﻮان و ﻣﺨﺘﻠﻒ اﻷﺷﻜﺎل ﻋﻠﻲ ﺻﻔﺤﺘﻚ؟ ﺣﻘﺎ؟!!‬

‫اﻟﺮﻣﻮز اﻟﺨﺎﺻﻪ‬
‫ﺧﺎص ﺟﺪا ﺗﺮﯾﺪ أن ﺗﻜﺘﺐ رﻣﺰ ﻏﯿﺮ ﻣﻮﺟﻮد ﻋﻠﻲ ﻟﻮﺣﺔ اﻟﻤﻔﺎﺗﯿﺢ ؟ ﺗﺮﯾﺪ إﺳﺘﻌﻤﺎل اﻟﺮﻣﺰ اﻟﺴﺤﺮي ؟‬

‫اﻟﻮﺻﻼت‬
‫اﻟﻮﺻﻼت ؟؟؟ ﺗﻌﻨﻲ اﻷﻧﺘﻘﺎل واﻟﻘﻔﺰ ﺑﯿﻦ ﻣﻘﺎﻃﻊ ﺻﻔﺤﺎﺗﻚ وﺻﻔﺤﺎﺗﻚ اﻵﺧﺮي ‪ ،‬أﻧﻬﻢ ﻓﻲ ﻏﺎﯾﻪ اﻟﺴﻬﻮﻟﻪ ﻟﻜﻲ ﺗﻘﻮم‬
‫ﺑﺬﻟﻚ‪....‬‬

‫اﻟﻘﻮاﺋﻢ‬
‫ﺗﻌﻠﻢ ﻛﯿﻒ ﺗﻀﻊ ﻧﺼﻚ ﻓﻲ ﻧﻘﻂ ﻣﺮﺗﺼﻪ ‪ ،‬ﻣﺮﻗﻤﻪ وﻗﻮاﺋﻢ ﻣﻌﺮﻓﺔ !!!‬

‫ﻗﺎﺋﻤﺔ ﺑﺠﻤﯿﻊ وﺳﻮم اﻟﻨﺺ‬

‫ﯾﻮﺟﺪ ﻫﻨﺎ أﻛﺜﺮ ﻣﻦ ‪ ٤٠‬وﺳﻢ ﺗﺴﺘﻄﯿﻊ إﺳﺘﺨﺪاﻣﻬﻢ ﻓﻲ ﺗﻨﺴﯿﻖ ﻧﺼﻚ ‪ .‬وإﻟﯿﻚ اﻟﻘﺎﺋﻤﺔ‬

‫اﻟﻨﺺ اﻟﻤﺘﺤﺮك‬
‫إﺳﺘﻌﻤﻞ ال‪ Internet Explorer‬ﻟﻜﻲ ﺗﺠﻌﻞ ﻧﺼﻚ ﯾﺘﺤﺮك ﻓﻲ اﻟﺸﺎﺷﻪ ؟!!!!‬

‫اﻟﻌﻨﺎوﯾﻦ وﺣﺠﻢ اﻟﺨﻄﻮط‬

 ‫أﻫﻼ وﺳﻬﻼ ﺑﻚ ﻓﻲ أول درس ﻣﻦ اﻟﺪروس اﻟﻤﺘﺨﺼﺼﻪ ﻟﺘﻌﻠﯿﻢ ﻟﻐﺔ اﻟـ( ‪HTML‬إذا ﻛﻨﺖ ﺗﺮﯾﺪ ﻣﺮﺟﻊ ﺳﺮﯾﻊ‬
‫أﺿﻐﻂ ﻫﻨﺎ)‬

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] اﻟﻌﻨﺎوﯾﻦ | ﺣﺠﻢ اﻟﺨﻂ [‬

‫ﺳﻮف ﻧﺘﺎﺑﻊ ﻓﻲ ﻫﺬا اﻟﺪرس اﻟﺘﻌﺮف ﻋﻠﻰ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺎﻟﺨﻄﻮط ‪ ،‬ﺳﻮف ﺗﻼﺣﻆ ﻓﻲ ﻫﺬا اﻟﺪرس واﻟﺪروس‬
‫اﻟﻼﺣﻘﺔ أن ﻫﻨﺎك أﻛﺜﺮ ﻣﻦ ﻃﺮﯾﻘﺔ ﻷداء ﻧﻔﺲ اﻟﻌﻤﻞ‪ ،‬أو إﻋﻄﺎء ﻧﻔﺲ اﻟﺨﺼﺎﺋﺺ ﻟﺼﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ‪ .‬وﺑﺎﻟﻤﻘﺎﺑﻞ ﻗﺪ‬
‫ﯾﺒﺪو ﻟﻚ أن ﺑﻌﺾ اﻟﻮﺳﻮم واﻟﺨﺼﺎﺋﺺ ﻣﺘﺸﺎﺑﻬﺔ ﻓﻲ ﺗﺄﺛﯿﺮﻫﺎ‪ ،‬ﻟﻜﻦ ﺑﺎﻟﻘﻠﯿﻞ ﻣﻦ اﻟﺘﺪﻗﯿﻖ واﻟﺘﺠﺮﺑﺔ ﺳﺘﻜﺘﺸﻒ أن ﻟﻜﻞ‬
‫وﺳﻢ ﺧﺼﻮﺻﯿﺘﻪ‪.‬‬
‫اﻟﻌﻨﺎوﯾﻦ )‪-: ( Headings‬‬
‫ﻓﻲ اﻟﺒﺪاﯾﻪ ﻧﻮد أن ﻧﻘﻮل أن وﺳﻢ اﻟﻌﻨﻮان ﻗﺪ ﻗﺴﻢ ﺑﻄﺮﯾﻘﺔ ﻣﺘﺘﺎﻟﯿﻪ ﺑﺤﯿﺚ ﯾﻮﺟﺪ ‪٦‬ﻣﺴﺘﻮﯾﺎت ﻣﺨﺘﻠﻔﺔ ﻣﻦ اﻟﻌﻨﺎوﯾﻦ ﻣﻦ‬
‫أﻛﺒﺮ ﻣﺴﺘﻮي وﯾﺄﺧﺬ اﻟﻮﺳﻢ >‪ <H1‬إﻟﻲ أﺻﻐﺮ ﻣﺴﺘﻮي وﯾﺄﺧﺬ اﻟﻮﺳﻢ >‪ <H6‬دﻋﻨﺎ ﻧﺮﯾﻚ ﻣﺜﺎل اﻵن‬

‫اﻟـﺘـﺄﺛـﯿـﺮ‬ ‫اﻟـﻮﺳـﻢ‬

‫‪Heading 1‬‬ ‫>‪<H1>Heading 1</H1‬‬

‫‪Heading 2‬‬ ‫>‪<H2>Heading 2</H2‬‬

‫‪Heading 3‬‬ ‫>‪<H3>Heading 3</H3‬‬

‫‪Heading 4‬‬ ‫>‪<H4>Heading 4</H4‬‬
‫‪Heading 5‬‬ ‫>‪<H5>Heading 5</H5‬‬
‫‪Heading 6‬‬ ‫>‪<H6>Heading 6</H6‬‬
‫ﻛﻞ ﻣﺎﻋﻠﯿﻚ ﻓﻌﻠﻪ ﻫﻮ أن ﺗﻀﻊ اﻟﻨﺺ داﺧﻞ اﻟﻮﺳﻢ ﻛﻤﺎ ﺗﺮي ﻓﻲ اﻟﻮﺳﻮم اﻟﺴﺎﺑﻘﻪ وﻛﻤﺎ ﺗﺮي اﻟﻨﺺ ﺳﯿﻈﺮ واﺿﺢ‬
‫وﻛﺒﯿﺮ وﻟﻜﻦ ﯾﺠﺐ أن ﺗﻼﺣﻆ ان اﻟﻌﻨﻮان داﺋﻤﺎ ﯾﻜﻮن ﻣﻨﻔﺼﻞ ﻋﻦ اﻟﻨﺺ اﻷﺳﺎﺳﻲ ﺑﻤﻌﻨﻲ أﻧﻪ ﯾﻜﻮن ﻓﻲ اﻟﺒﺪاﯾﻪ أو‬
‫رأس اﻟﻔﻘﺮة ‪ ،‬ﯾﺠﺐ ﻋﻠﯿﻚ أن ﺗﻐﯿﯿﺮ ﺣﺠﻢ اﻟﺨﻂ وﻟﯿﺲ اﻟﻌﻨﻮان وﻫﻨﺎ ﻧﺄﺗﻲ إﻟﻲ ﺗﻐﯿﯿﺮ ﺣﺠﻢ اﻟﺨﻄﻮط‪.‬‬

‫>‪<FONT/> ... <FONT‬‬ ‫وﻟﻜﻦ ﻗﺒﻞ أن ﻧﺒﺪأ أن ﻧﺘﺤﺪث ﻋﻦ ﺣﺠﻢ اﻟﺨﻄﻮط ﻻﺑﺪ وان ﺗﻌﺮف ﻫﺬا اﻟﻮﺳﻢ‬
‫وﻫﻮ اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺎﻟﺨﻄﻮط ﻫﻮ ﯾﻘﻮم ﺑﺎﻟﺘﺤﻜﻢ ﺑﺎﻟﺨﻄﻮط ﻣﻦ ﺣﯿﺚ اﻟﻨﻮع واﻟﻠﻮن واﻟﺤﺠﻢ‪ .‬أﻣﺎ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ‬
‫ﻧﺴﺘﺨﺪﻣﻬﺎ ﻣﻊ ﻫﺬا اﻟﻮﺳﻢ واﻟﻮﺳﻮم اﻷﺧﺮى ﺳﻨﻘﻮم ﺑﺸﺮﺣﻬﺎ ﺑﺎﻟﺘﺘﺎﺑﻊ‬

‫ﺣﺠﻢ اﻟﺨﻂ‪FONT SIZE‬‬

‫وﻟﺘﺤﺪﯾﺪ ﺣﺠﻢ اﻟﺨﻂ ﻧﺴﺘﺨﺪم ﻫﺬه اﻟﺨﺎﺻﯿﺔ ‪ font size .‬و ﻫﻨﺎك ﺳﺒﻌﺔ أﺣﺠﺎم ﻷي ﺧﻂ ﺗﺴﺘﻄﯿﻊ اﻟﻤﺘﺼﻔﺤﺎت‬
‫اﻟﺘﻌﺮف ﻋﻠﯿﻬﺎ‪.‬‬
‫وﻧﻘﻮم ﺑﺘﺤﺪﯾﺪ اﻟﺤﺠﻢ اﻟﻤﻄﻠﻮب ﺑﺄﺳﻠﻮﺑﯿﻦ‪ :‬أوﻟﻬﻤﺎ اﻟﻤﺒﺎﺷﺮ‪ .‬ﺣﯿﺚ ﯾﺘﻢ ﻛﺘﺎﺑﺔ رﻗﻢ ﯾﺘﺮاوح ﻣﺎ ﺑﯿﻦ ‪ .٧-١‬أي أﻧﻨﺎ ﻧﺨﺘﺎر‬
‫اﻟﺤﺠﻢ اﻟﺬي ﻧﺮﯾﺪه ﻣﺒﺎﺷﺮة ‪.‬‬

‫>"‪<FONT SIZE="X‬‬
‫‪ ............‬اﻟﻨﺺ ﯾﻜﺘﺐ ﻫﻨﺎ‪.......‬‬
‫>‪</FONT‬‬
 ‫ﻛﻞ ﻣﺎﻋﻠﯿﻚ ﻓﻌﻠﻪ ﻫﻮ ﺗﻐﯿﯿﺮ اﻟﻘﯿﻤﺔ ‪ X‬إﻟﻲ رﻗﻢ ﻣﻦ ‪ ٧ -١‬وإﻟﯿﻚ ﻧﻤﺎذج ﺑﺄﺣﺠﺎم اﻟﺨﻄﻮط‪:-‬‬
‫ﺧﻂ ﺑﺤﺠﻢ ‪١‬‬
‫ﺧﻂ ﺑﺤﺠﻢ ‪٢‬‬
‫ﺧﻂ ﺑﺤﺠﻢ‪3‬‬
‫ﺧﻂ ﺑﺤﺠﻢ ‪٤‬‬
‫ﺧﻂ ﺑﺤﺠﻢ‪5‬‬
‫ﺧﻂ ﺑﺤﺠﻢ ‪٦‬‬
‫ﺧﻂ ﺑﺤﺠﻢ‪7‬‬
‫ﻣﻠﺤﻮﻇﻪ ﺣﺠﻢ اﻟﺨﻂ اﻹﻓﺘﺮاﺿﻲ ﻫﻮ ‪٣‬‬

‫أﻣﺎ اﻷﺳﻠﻮب اﻟﺜﺎﻧﻲ ﻓﻬﻮ اﻟﻨﺴﺒﻲ‪ :‬ﺣﯿﺚ ﺗﻜﺘﺐ اﻷرﻗﺎم ﻣﻦ ‪ ١‬إﻟﻰ ‪ ٦‬ﻣﺮﻓﻘﺔ إﻣﺎ ﺑﺈﺷﺎرة )‪ (+‬ﻣﻮﺟﺒﻪ أو ﺑﺈﺷﺎرة )‪(-‬‬
‫ﺳﺎﻟﺒﻪ ‪.‬‬

‫>"‪<FONT SIZE="X‬‬
‫‪ ............‬اﻟﻨﺺ ﯾﻜﺘﺐ ﻫﻨﺎ‪.......‬‬
‫>‪</FONT‬‬

‫وﻓﻲ ﻫﺬه اﻟﻄﺮﯾﻘﺔ ﻓﺈن اﻷرﻗﺎم ‪ ٦-١‬ﺗﻤﺜﻞ درﺟﺎت اﻟﺘﻜﺒﯿﺮ )‪ (+‬أو اﻟﺘﺼﻐﯿﺮ )‪ (-‬ﻟﻠﺨﻂ وذﻟﻚ ﻧﺴﺒﺔً إﻟﻰ اﻟﺤﺠﻢ‬
‫اﻻﻓﺘﺮاﺿﻲ‪ .‬ﻓﻤﺜﻼ اﻟﺮﻗﻢ ‪ ٤+‬ﯾﻌﻨﻲ ﺗﻜﺒﯿﺮ اﻟﺨﻂ أرﺑﻊ درﺟﺎت ﻋﻦ اﻟﺤﺠﻢ اﻻﻓﺘﺮاﺿﻲ وﻫﻮ ‪ ،٣‬أي أﻧﻪ ﯾﺼﺒﺢ‬
‫ﺑﺎﻟﺤﺠﻢ ‪ .٧‬ﺑﺎﻟﻤﻘﺎﺑﻞ ﻓﺄن اﻟﺮﻗﻢ ‪ ١-‬ﯾﻌﻨﻲ ﺗﺼﻐﯿﺮ اﻟﺨﻂ درﺟﺔ واﺣﺪة أي ﯾﺼﺒﺢ ﺑﺎﻟﺤﺠﻢ ‪. ٢‬‬
‫وﻟﺘﻮﺿﯿﺢ ﻫﺬا اﻷﺳﻠﻮب‪ ،‬إﻟﯿﻚ ﻫﺬه اﻟﻨﻤﺎذج‪:‬‬
‫ﺧﻂ ﺑﺤﺠﻢ ‪٣-‬‬
‫ﺧﻂ ﺑﺤﺠﻢ‪-2‬‬
‫ﺧﻂ ﺑﺤﺠﻢ ‪١-‬‬
‫ﺧﻂ ﺑﺤﺠﻢ‪±0‬‬
‫ﺧﻂ ﺑﺤﺠﻢ ‪١+‬‬
‫ﺧﻂ ﺑﺤﺠﻢ ‪٢+‬‬
‫ﺧﻂ ﺑﺤﺠﻢ ‪٣+‬‬
‫ﺧﻂ ﺑﺤﺠﻢ‪+4‬‬
‫ﺧﻂ ﺑﺤﺠﻢ ‪٥+‬‬
‫ﻻﺣﻆ أﻧﻪ ﺣﺘﻰ ﻓﻲ اﻷﺳﻠﻮب اﻟﻨﺴﺒﻲ ﻻ ﻧﺴﺘﻄﯿﻊ اﻟﺤﺼﻮل ﻋﻠﻰ أﻛﺜﺮ ﻣﻦ ﺳﺒﻌﺔ أﺣﺠﺎم ﻟﻠﺨﻄﻮط‪ .‬ﺣﺘﻰ وإن ﺣﺎوﻟﻨﺎ‬
‫ﻛﺘﺎﺑﺔ أرﻗﺎم أﻛﺒﺮ أو أﺻﻐﺮ ﻛﻤﺎ ﻓﻌﻠﺖ ﻫﻨﺎ ﺑﻜﺘﺎﺑﺔ اﻟﺤﺠﻢ ‪ ٣-‬أو ‪+5‬‬

‫ﻫﺎم ﺟﺪا‬

‫ﻻﺑﺪ وان ﺗﺒﻌﺪ ﻛﻞ اﻟﺒﻌﺪ ﻋﻦ اﳋﻂ اﻟﺼﻐﲑ ﺟﺪا ﻓﻤﻦ اﻟﺼﻌﺐ ﻗﺮاءﺗﻪ و‬
‫اﳋﻂ اﻟﻜﺒﲑ ﳝﻠﺊ ﺻﻔﺤﺘﻚ وﻟﺬﻟﻚ ﻻﺑﺪ وان ﲣﺘﺎر اﳋﻂ اﳌﻌﺘﺪل‬
 ‫ﺗﺎﺑﻊ اﻟﺪروس »ﺗﻐﯿﯿﺮ أﻟﻮان وأﺷﻜﺎل اﻟﺨﻄﻮط‬

‫أﺷﻜﺎل وأﻟﻮان اﻟﺨﻄﻮط‬

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] ‪ | Face‬ﺗﻐﯿﯿﺮ ﻟﻮن اﻟﺨﻂ | أﻣﺜﻠﻪ [‬

‫اﻟﻜﺜﯿﺮ ﻣﻦ اﻟﻨﺎس ﯾﺘﺴﺎﺋﻠﻮن ﻋﻦ ﻛﯿﻔﯿﻪ ﺗﻐﯿﯿﺮ اﻟﺨﻄﻮط أو ﺑﺈﺳﺘﻌﻤﺎل ﺧﻄﻮط ﻣﺨﺘﻠﻔﻪ ﻓﻲ اﻟﻨﺺ اﻟﺨﺎص ﺑﻔﻘﺮة ﻣﻌﯿﻨﻪ ؟‬
‫وﻟﻺﺟﺎﺑﻪ ﻋﻠﻲ ﻫﺬا اﻟﺴﺆال ﺗﺎﺑﻊ ﻫﺬا اﻟﺪرس ‪-:‬‬
‫ﺧﺎﺻﯿﻪ ‪FACE‬‬
‫ﺗﻘﻮم ﻫﺬه اﻟﺨﺎﺻﯿﺔ ﺑﺘﺤﺪﯾﺪ ﻧﻮع اﻟﺨﻂ اﻟﺬي ﻧﺮﯾﺪه‪ ،‬و اﻟﺨﻂ اﻹﻓﺘﺮاﺿﻲ ﻓﻲ ﺟﻤﯿﻊ اﻟﻤﺴﺘﻌﺮﺿﺎت ﻫﻮ‬
‫‪12pt Black Times New Roman‬‬
‫و ﻫﻮ ﺧﻂ ﻓﻌﻼ ﺟﺬاب وروﻣﺎﻧﺴﻲ ﻓﻲ اﻟﺤﺮوف اﻹﻧﺠﻠﯿﺰﯾﻪ وﺻﻤﻢ ﻟﺠﻌﻞ اﻟﻘﺮاءه ﺳﻬﻞ ﻟﻜﻦ ﻟﯿﺲ ﻟﻠﺨﻄﻮط اﻟﻌﺮﺑﯿﻪ‬
‫وﻟﺬﻟﻚ ﻓﺄﻧﺖ ﺗﺤﺘﺎج إﻟﻲ أﺧﺘﯿﺎر أﻧﻮاع ﺧﻄﻮط أﻓﻀﻞ ﻟﻠﻐﻪ اﻟﻌﺮﺑﯿﻪ و ﻟﻘﺪ أﺳﺘﻌﻤﻠﺖ ﻧﻮع اﻟﺨﻂ ‪ Arial‬وﻫﻮ ﻣﻦ أﻛﺜﺮ‬
‫اﻟﺨﻄﻮط أﻧﺘﺸﺎرا ﻋﻠﻲ اﻹﻧﺘﺮﻧﺖ ﺣﯿﺚ أن ﻫﺬا اﻟﺨﻂ ﻣﺘﻮاﺟﺪ ﺗﻘﺮﯾﺒﺎ ﻓﻲ أﻏﻠﺐ أﺟﻬﺰة اﻟﺤﺎﺳﺒﺎت ﻓﻲ ﻛﻞ أﻧﺤﺎء اﻟﻌﺎﻟﻢ‬
‫‪ ،‬وإﻟﯿﻚ اﻟﺼﯿﻐﻪ اﻟﺨﺎﺻﻪ ﺑﻬﺬه اﻟﺨﺎﺻﯿﻪ‬

‫>‪<FONT FACE="Arial">text</FONT‬‬

‫وﻗﺪ ﻧﻘﻮم ﺑﺘﺤﺪﯾﺪ أﻛﺜﺮ ﻣﻦ ﻧﻮع ﻣﻌﺎً‪ .‬وﻓﻲ ﻫﺬه اﻟﺤﺎﻟﺔ إذا ﻟﻢ ﯾﺘﻮاﺟﺪ اﻟﺨﻂ اﻟﻤﺤﺪد أوﻻً ﻋﻠﻰ ﺟﻬﺎز اﻟﺸﺨﺺ اﻟﺬي‬
‫ﯾﺘﺼﻔﺢ اﻟﻤﻮﻗﻊ ﯾﺘﻢ إﻋﺘﻤﺎد اﻟﺨﻂ اﻟﺜﺎﻧﻲ ‪ ...‬وﻫﻜﺬا‬

‫>"‪<FONT FACE="Traditional Arabic, Arabic Transparent, Simplified Arabic‬‬

‫‪ ............‬اﻟﻨﺺ ﯾﻜﺘﺐ ﻫﻨﺎ‪.......‬‬
‫>‪</FONT‬‬

‫ﻃﺒﻌﺎً ﻻ ﺗﻨﺲ أن ﺗﺘﺄﻛﺪ ﻣﻦ ﻛﺘﺎﺑﺔ أﺳﻤﺎء اﻟﺨﻄﻮط ﺑﺎﻟﺼﻮرة اﻟﺼﺤﯿﺤﺔ ﻫﺠﺎﺋﯿﺎً‬

‫وﻫﺬه ﻫﻲ ﻗﺎﺋﻤﺔ ﺑﺄﺳﻤﺎء أﺷﻬﺮ و أﻛﺜﺮ اﻟﺨﻄﻮط إﻧﺘﺸﺎراً‬

‫•‬ ‫‪Arial, Helvetica, sans-serif‬‬

‫•‬ ‫‪Verdana, Geneva, sans-serif‬‬

‫•‬ ‫‪Times New Roman, Times, serif‬‬

‫•‬ ‫‪Garamond, Palatino, serif‬‬

‫•‬ ‫‪Courier New, Courier, monospace‬‬

‫ﺗﻐﯿﯿﺮ ﻟﻮن اﻟﺨﻂ‬

 ‫ وذﻟﻚ ﺑﻨﻔﺲ ﻣﺒﺎدئ ﺗﺤﺪﯾﺪ اﻷﻟﻮان اﻟﺘﻲ ﺗﺤﺪﺛﻨﺎ ﻓﻲ درس ﺧﻮاص اﻟﺼﻔﺤﺔ‬،‫ﻫﺬه اﻟﺨﺎﺻﯿﺔ ﺗﺤﺪد ﻟﻮن اﻟﺨﻂ‬

<FONT COLOR="#FF0000">‫<اﻟﻨﺺ‬/FONT>

‫ أرﻗﺎم‬٦ ‫ ﻛﻮد واﻟﺬي ﯾﺘﻜﻮن ﻣﻦ‬HEX ‫ ﺗﻌﺮف ﻋﻦ ﻃﺮﯾﻖ اﻟـ‬HTML ‫ﯾﺠﺐ أن ﺗﻌﺮف أن اﻷﻟﻮان ﻓﻲ ﺻﻔﺤﺎت اﻟـ‬
‫ ﻟﻜﻲ ﺗﺮي اﻟﻤﺮﺟﻊ اﻟﻜﺎﻣﻞ ﻟﻬﺬه اﻷﻛﻮاد وﺗﺨﺘﺎر اﻟﻠﻮن‬RGB ‫ﻫﺬه اﻷرﻗﺎم ﺗﻤﺜﻞ اﻷﺣﻤﺮ و اﻷﺧﻀﺮ و اﻷزرق‬
‫ و اﻟﻤﺴﺘﻌﺮﺿﺎت اﻟﺠﺪﯾﺪة ﺗﻤﻨﺤﻚ ﻣﯿﺰة أن ﺗﻜﺘﺐ أﺳﻢ‬، HEX ‫اﻟﻤﻔﻀﻞ ﻟﻚ أﻧﻈﺮ ﻟﻲ ﻫﺬ اﻟﻤﺨﻄﻂ أﻛﻮاد أﻟﻮان اﻟـ‬
‫اﻟﻠﻮن اﻟﺬي ﺗﺮﯾﺪه وﻟﻜﻦ ﻷﻟﻮان ﻣﺤﺪده و ﻟﺘﺮي ﻣﺨﻄﻂ ﻟﻬﺬه اﻷﻟﻮان إﻟﻘﻲ ﻧﻈﺮه ﻋﻠﻲ ﻫﺬا اﻟﻤﺨﻄﻂ‬
‫وﻫﺬا أﻣﺜﻠﻪ ﻋﻠﻲ اﻷﻟﻮان و أﺷﻜﺎل اﻟﺨﻄﻮط و أﺣﺠﺎﻣﻬﺎ‬

<FONT FACE="Impact" SIZE="6" COLOR="#000000">C </FONT>

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

‫وﺗﻜﻮن اﻟﻨﺘﯿﺠﻪ ﻫﻜﺬا‬

COLORS
‫ﻣﺎذا ﻟﻮ أردﻧﺎ ﺗﻐﯿﯿﺮ ﺷﻜﻞ اﻟﺨﻂ ﻣﻊ ﺗﻐﯿﯿﺮ اﻟﻠﻮن ﻣﻊ ﺗﻐﯿﯿﺮ اﻟﺤﺠﻢ ﻣﻦ ﻫﺬا اﻟﻤﺜﺎل ﺳﺘﺮي ﺟﻤﯿﻊ أﺣﻮال اﻟﺨﻄﻮط ﻓﻲ‬
-: ‫ﺳﻄﺮ واﺣﺪ‬

<FONT FACE="Arial" SIZE="5" COLOR="#00FF00"> This </FONT>

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

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

«««‫اﻟﺪرس اﻟﺘﺎﻟﻲ‬

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

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] اﻟﺮﻣﻮز | اﻟﺤﺮوف [‬

‫اﻟــــﺮﻣـﺰ‬ ‫اﻟــﻜـﻮد‬
‫اﻟــــﺮﻣــــﻮز‬
‫‘‬ ‫;‪&lsquo‬‬
‫’‬ ‫;‪&rsquo‬‬
‫‚‬ ‫;‪&sbquo‬‬
‫“‬ ‫;‪&ldquo‬‬
‫”‬ ‫;‪&rdquo‬‬
‫„‬ ‫;‪&bdquo‬‬
‫†‬ ‫;‪&dagger‬‬
‫‡‬ ‫;‪&Dagger‬‬
‫‪‰‬‬ ‫;‪&permil‬‬
‫‹‬ ‫;‪&lsaquo‬‬
‫›‬ ‫;‪&rsaquo‬‬
‫♠‬ ‫;‪&spades‬‬
‫♣‬ ‫;‪&clubs‬‬
‫♥‬ ‫;‪&hearts‬‬
‫♦‬ ‫;‪&diams‬‬
‫‾‬ ‫;‪&oline‬‬
‫←‬ ‫;‪&larr‬‬
‫↑‬ ‫;‪&uarr‬‬
‫→‬ ‫;‪&rarr‬‬
‫↓‬ ‫;‪&darr‬‬
‫™‬ ‫;‪&trade‬‬
‫&‬ ‫;‪&amp‬‬
‫<‬ ‫;‪&lt‬‬
‫>‬ ‫;‪&gt‬‬
‫"‬ ‫;‪&quot‬‬
‫×‬ ‫;‪&times‬‬
‫÷‬ ‫;‪&divide‬‬
‫–‬ ‫;‪&ndash‬‬
‫—‬ ‫;‪&mdash‬‬
‫;‪&nbsp‬‬
 ¡ &iexcl;
¢ &cent;
£ &pound;
¤ &curren;
¥ &yen;
€ &euro;
¦ &brvbar;
§ &sect;
&#127;
¨ &uml;
© &copy;
ª &ordf;
« &laquo;
¬ &not;
® &reg;
¯ &macr;
° &deg;
± &plusmn;
² &sup2;
³ &sup3;
´ &acute;
µ &micro;
¶ &para;
· &middot;
¸ &cedil;
¹ &sup1;
º &ordm;
» &raquo;
¼ &frac14;
½ &frac12;
¾ &frac34;
¿ &iquest;
Capital ‫اﻟــــﺤــﺮوف‬
À &Agrave;
Á &Aacute;
 &Acirc;
à &Atilde;
Ä &Auml;
Å &Aring;
Æ &AElig;
Ç &Ccedil;
È &Egrave;
É &Eacute;
Ê &Ecirc;
Ë &Euml;
Ì &Igrave;
Í &Iacute;
Î &Icirc;
Ï &Iuml;
Ð &ET;
Ñ &Ntilde;
Ò &Ograve;
Ó &Oacute;
Ô &Ocirc;
Õ &Otilde;
Ö &Ouml;
Ø &Oslash;
Ù &Ugrave;
Ú &Uacute;
Û &Ucirc;
Ü &Uuml;
Ý &Yacute;
Þ &THORN;
Small ‫اﻟﺤﺮوف‬
ß &szlig;
à &agrave;
á &aacute;
â &acirc;
ã &atilde;
ä &auml;
å &aring;
æ &aelig;
ç &ccedil;
è &egrave;
é &eacute;
ê &ecirc;
ë &euml;
ì &igrave;
í &iacute;
î &icirc;
ï &iuml;
ð &et;
ñ &ntilde;
ò &ograve;
ó &oacute;
ô &ocirc;
õ &otilde;
ö &ouml;
 ‫‪ø‬‬ ‫;‪&oslas‬‬
‫‪ù‬‬ ‫;‪&ugrave‬‬
‫‪ú‬‬ ‫;‪&uacute‬‬
‫‪û‬‬ ‫;‪&ucirc‬‬
‫‪ü‬‬ ‫;‪&uuml‬‬
‫‪ý‬‬ ‫;‪&yacute‬‬
‫‪þ‬‬ ‫;‪&torn‬‬
‫‪ÿ‬‬ ‫;‪&yuml‬‬

‫و ﺗﻨﺘﻬﻲ ﺑـ &واﻵن ﻣﺎذا ﺗﻼﺣﻆ ﻓﻲ ﻫﺬه اﻷﻛﻮاد أﻧﻬﺎ ﺗﺒﺪأ ﺑـ‬

‫;‬
‫ﺗﺤﺬﯾﺮ ﻫﺎم ﺟﺪا‬

‫ﰲ ﺑﻌﺾ اﻷﺣﻮال ﺗﻜﺘﺐ اﻟﻜﻮد ﺻﺤﯿﺢ وﻻ ﺗﺮي اﻟﺮﻣﺰ ﯾﻈﻬﺮ ﰲ ﺻﻔﺤﺘﻚ‬

‫وﻫﺬا ﯾﺮﺟﻊ إﱄ أﻧﻪ ﯾﻮﺟﺪ ﺧﻄﻮط ﻻ ﺗﺸﻤﻞ ﻋﻠﻲ أﻛﻮاد اﻟﺮﻣﻮز ﻓﻠﻬﺬا‬
‫ﻻﺑﺪ وان ﺗﻐﯿﲑ اﳋﻂ إﱄ ﺧﻂ ﯾﺸﻤﻞ ﻋﻠﻲ اﻟﺮﻣﻮز أو ﺗﺴﺘﺨﺪم اﳋﻂ اﻟﻌﺎم‬
‫و ﻫﻮ ‪Arial‬‬

‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬

‫ﺗﻨﺴﯿﻖ اﻟﻔﻘﺮات و اﻟﻮﺻﻼت‬

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] اﻟﻮﺻﻼت | اﻟﻔﻘﺮات | اﻟﺨﺎﺻﯿﻪ ‪ | DIR‬اﻹﻗﺘﺒﺎس[‬

‫اﻟﻮﺻﻼت ‪Links‬‬
‫ﺑﺎﻟﻨﺴﺒﻪ ﻻﻧﺸﺎء وﺻﻠﻪ ﻟﻨﺺ ﻣﻌﯿﻦ أو ﻋﻠﻲ ﻧﺺ ﻣﻌﯿﻦ راﺟﻊ درس اﻟﻮﺻﻠﻪ اﻷﺳﺎﺳﯿﻪ أﻣﺎ اﻵن ﻓﺴﻨﺘﺤﺪث ﻋﻠﻲ ﻧﻮع‬
‫أﺧﺮ ﻣﻦ اﻟﻮﺻﻼت و ﻫﻲ أن ﻧﻘﻮم ﺑﺎﻹﺷﺎرة إﻟﻰ ﻣﻜﺎن آﺧﺮ داﺧﻞ ﻧﻔﺲ اﻟﺼﻔﺤﺔ‪ ،‬إﻟﻰ أوﻟﻬﺎ ﻣﺜﻼً أو إﻟﻰ آﺧﺮﻫﺎ أو‬
‫أي ﻣﻜﺎن آﺧﺮ ﻧﺮﯾﺪه ﻛﻤﺎ ﻫﻮ اﻟﺤﺎل ﻓﻲ ﻓﻬﺮس ﺻﻔﺤﺎت ﻫﺬا اﻟﻤﻮﻗﻊ ‪.‬‬
‫ﻃﺒﻌﺎً ﻣﻬﻤﺎ ﺑﻠﻐﺖ درﺟﺔ اﻟﺬﻛﺎء واﻷﻟﻤﻌﯿﺔ اﻟﺘﻲ ﯾﺘﺼﻒ ﺑﻬﺎ اﻟﻜﻤﺒﯿﻮﺗﺮ وﻣﺘﺼﻔﺢ اﻹﻧﺘﺮﻧﺖ‪ ،‬ﻓﻬﻤﺎ ﻻ ﯾﺴﺘﻄﯿﻌﺎن ﻣﻌﺮﻓﺔ‬
‫ﻣﺎ ﯾﺪور ﺑﻔﻜﺮك وﺑﺎﻟﺘﺎﻟﻲ ﻻ ﯾﺴﺘﻄﯿﻌﺎن ﻣﻌﺮﻓﺔ اﻟﻤﻜﺎن اﻟﻤﻮﺟﻮد ﻓﻲ ﻧﻔﺲ اﻟﺼﻔﺤﺔ واﻟﺬي ﺗﺮﯾﺪ ﻧﻘﻞ زاﺋﺮك إﻟﯿﻪ ﻣﻦ‬
‫ﺧﻼل اﻟﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ‪ .‬ﻟﺬﻟﻚ ﯾﺠﺐ أن ﺗﻘﻮم أﻧﺖ ﺑﺘﺤﺪﯾﺪه‪.‬‬
‫واﻟﻤﺒﺪأ ﻫﻨﺎ ﻫﻮ أن ﺗﻘﻮم ﺑﺘﻌﺮﯾﻒ أو ﺗﺴﻤﯿﺔ ﻫﺬا اﻟﻤﻜﺎن ﺑﺈﺳﻢ ﻣﻌﯿﻦ ﺳﻮف ﺗﻘﻮم ﻻﺣﻘﺎ ﺑﺎﺳﺘﺨﺪاﻣﻪ ﻓﻲ اﻟﻮﺻﻠﺔ‬
‫اﻟﺘﺸﻌﺒﯿﺔ‪ .‬وﻓﻲ ﻫﺬه اﻟﺤﺎﻟﺔ ﯾﺘﺤﺘﻢ ﻋﻠﯿﻚ اﺳﺘﺨﺪام اﻟﺨﺎﺻﯿﺔ اﻟﺜﺎﻧﯿﺔ ﻟﻠﻮﺳﻢ >‪ <A‬وﻫﻲ ‪NAME‬‬
‫ﻟﻨﻘﻢ ﻣﻌﺎً ﺑﺈدراج وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ داﺧﻞ ﻫﺬه اﻟﺼﻔﺤﺔ ﺗﻘﻮم ﺑﻨﻘﻞ اﻟﺰاﺋﺮ ﻣﻦ ﻣﻜﺎن وﺟﻮد ﻫﺬه اﻟﻮﺻﻠﺔ إﻟﻰ اﻟﻔﻘﺮةاﻷوﻟﻲ‬
‫ﻣﻦ ﻫﺬه اﻟﺼﻔﺤﺔ و اﻟﺘﻲ ﺑﺪأﻧﺎ ﻓﯿﻬﺎ اﻟﺤﺪﯾﺚ ﻋﻦ اﻟﻮﺻﻼت‬
‫>‪</A> ... <A‬‬ ‫أول ﻣﺎ ﯾﺠﺐ ﻓﻌﻠﻪ ﻫﻮ اﻟﺬﻫﺎب إﻟﻰ ﻫﺬه اﻟﻔﻘﺮة واﺧﺘﯿﺎر أول ﻛﻠﻤﺔ ﻓﯿﻬﺎ ﺛﻢ وﺿﻌﻬﺎ داﺧﻞ اﻟﻮﺳﻮم‬
‫>‪<A>LINKS</A‬‬

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

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

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

‫اﻟﺨﻄﻮة اﻟﺜﺎﻟﺜﺔ ﻫﻲ إدراج اﻟﻮﺻﻠﺔ اﻟﺘﺸﻌﺒﯿﺔ ﻟﻬﺬه اﻟﻔﻘﺮة‪ .‬وﺗﻜﻮن ﺷﯿﻔﺮة اﻟﻮﺻﻮل إﻟﻰ ﻫﺬه اﻟﻔﻘﺮة ﻫﻲ ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬

‫>‪<A HREF="#attrib1">1st Paragraph</A‬‬

‫‪1st Paragraph‬‬

‫ﻻﺣﻆ أﻧﻨﺎ ﻟﻢ ﻧﻜﺘﻒ ﺑﺬﻛﺮ اﺳﻢ اﻟﻔﻘﺮة ﻟﻮﺣﺪﻫﺎ ﺑﻞ ﯾﺠﺐ أن ﺗﻘﺮن ﺑﺎﺳﻢ اﻟﻤﻠﻒ اﻷب اﻟﺬي ﯾﺘﻀﻤﻨﻬﺎ ﻣﻦ ﺧﻼل إﺷﺎرة‬
‫‪#‬ﻛﻤﺎ ﯾﺠﺐ أن ﺗﻌﻠﻢ أﻧﻪ أذا أرﺗﺪ أن ﺗﻀﻊ وﺻﻠﻪ ﺗﺸﯿﺮ إﻟﻲ ﻣﻜﺎن ﻣﻌﯿﻦ ﻓﻲ ﺻﻔﺤﺔ أﺧﺮي ﯾﺠﺐ أن ﺗﻜﺘﺐ أﺳﻢ‬
‫اﻟﺼﻔﺤﺔ ﻗﺒﻞ ﻫﺬه اﻟﻌﻼﻣﺔ و ﯾﻜﻮن اﻟﺼﯿﻐﻪ ﺑﻬﺬا اﻟﺸﻜﻞ‪:-‬‬

‫ﺣﺠﻢ>"‪<A HREF="Fontsize.htm#size‬‬ ‫>‪</A‬اﳋﻂ‬

‫ﺣﺠﻢ اﻟﺨﻂ‬

‫اﻟﻔﻘﺮات‬

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

‫ﻻ ﺑﺄس ﻣﻦ ﺗﺬﻛﯿﺮك ﺑﻬﺬا اﻟﻮﺳﻢ >‪ <P‬ﯾﻘﻮم ﺑﺈﻧﻬﺎء اﻟﻔﻘﺮة‪ .‬واﻟﻮﺳﻢ >‪ <BR‬ﯾﻨﻬﻲ اﻟﺴﻄﺮ اﻟﺤﺎﻟﻲ وﯾﻨﻘﻞ اﻟﻨﺺ إﻟﻰ‬
‫ﺳﻄﺮ ﺟﺪﯾﺪ‪ .‬واﻟﻮﺳﻢ ;‪ &nbsp‬ﯾﻘﻮم ﺑﺈﺿﺎﻓﺔ اﻟﻔﺮاﻏﺎت‪ ،‬وﯾﺠﺐ ﺗﻜﺮار ﻛﺘﺎﺑﺘﻪ ﺑﻨﻔﺲ ﻋﺪد اﻟﻔﺮاﻏﺎت اﻟﻤﻄﻠﻮب‪.‬‬
‫وﻧﺘﺎﺑﻊ ﻓﻲ ﻫﺬا اﻟﺪرس ﻣﻊ ﻫﺬه اﻟﻮﺳﻮم وﻏﯿﺮﻫﺎ ‪.‬‬

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

‫ﻓﺎﻟﺨﺎﺻﯿﺔ ‪ ALIGN‬ﺗﺤﺪد ﻣﺤﺎذاة اﻟﻔﻘﺮة وﻫﻲ ﺗﺄﺧﺬ اﻟﻘﯿﻢ( ‪ Left, Center, Right‬راﺟﻊ اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ )‬
‫وأوﺿﺤﻬﺎ ﺑﺎﻷﻣﺜﻠﺔ اﻟﺘﺎﻟﯿﺔ‪:‬‬

‫>"‪<P Align="left‬‬ ‫>‪ </P‬ﻫﺬه اﻟﻔﻘﺮة ﻣﻨﺴﻘﻪ إﱄ اﻟﯿﺴﺎر‬

‫ﻫﺬه اﻟﻔﻘﺮه ﻣﻨﺴﻘﺔ إﻟﻲ اﻟﯿﺴﺎر‬

‫>"‪<P Align="right‬‬ ‫>‪</P‬اﻟﯿﻤﲔ ﻫﺬه اﻟﻔﻘﺮة ﻣﻨﺴﻘﻪ إﱄ‬

‫ﻫﺬه اﻟﻔﻘﺮه ﻣﻨﺴﻘﺔ إﻟﻲ اﻟﯿﻤﯿﻦ‬

‫>"‪<P Align="center‬‬ ‫>‪</P‬اﳌﻨﺘﺼﻒ ﻫﺬه اﻟﻔﻘﺮة ﻣﻨﺴﻘﻪ إﱄ‬

‫ﻫﺬه اﻟﻔﻘﺮه ﻣﻨﺴﻘﺔ إﻟﻲ اﻟﻤﻨﺘﺼﻒ‬

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

‫>‪<CENTER/> ... <CENTER‬‬

‫>‪<CENTER> This is a centered text </CENTER‬‬

‫ﻫﺬا اﻟﻨﺺ ﻣﻨﺴﻘﺔ إﻟﻲ اﻟﻤﻨﺘﺼﻒ‬

‫‪DIR‬‬ ‫أﻣﺎ اﻟﺨﺎﺻﯿﺔ‬

‫واﻟﺘﻲ ﻧﺴﺘﺨﺪﻣﻬﺎ أﯾﻀﺎً ﻣﻊ >‪ <P‬ﻓﺘﻘﻮم ﺑﺘﺤﺪﯾﺪ إﺗﺠﺎه ﻗﺮاءة اﻟﻨﺺ وﺗﺄﺧﺬ اﻟﻘﯿﻢ‬
‫‪LTR‬إﺗﺠﺎه اﻟﻨﺺ ﻣﻦ اﻟﯿﺴﺎر إﻟﻰ اﻟﯿﻤﯿﻦ )‪(Left To Right‬‬
‫‪RTL‬إﺗﺠﺎه اﻟﻨﺺ ﻣﻦ اﻟﯿﻤﯿﻦ إﻟﻰ اﻟﯿﺴﺎر )‪(Right To Left‬‬
‫(ﺗﺬﻛﺮ ﻫﺬه اﻟﺨﺎﺻﯿﺔ ﺟﯿﺪاً ﻓﻬﻲ ﻣﻬﻤﺔ ﻋﻨﺪ ﻛﺘﺎﺑﺔ ﺻﻔﺤﺎت ﺑﺎﻟﻠﻐﺔ اﻟﻌﺮﺑﯿﺔ )‬

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

‫>‪<BLOCKQUOTE> ... </BLOCKQUOTE‬أي وﺳﻮم اﻟﻔﻘﺮات اﻟﻤﻘﺘﺒﺴﺔ‪ .‬ووﻇﯿﻔﺘﻬﺎ ﺗﻤﯿﯿﺰ اﻟﻔﻘﺮة ﻣﻦ ﺧﻼل‬
‫إدراج ﻣﺴﺎﻓﺔ إﺿﺎﻓﯿﺔ ﻋﻠﻰ اﻟﻬﺎﻣﺸﯿﻦ اﻷﯾﻤﻦ واﻷﯾﺴﺮ ﻟﻬﺎ‪ .‬أﻧﻈﺮ إﻟﻰ اﻟﻔﻘﺮة اﻟﺘﺎﻟﯿﺔ اﻟﺘﻲ ﻗﻤﺖ )ﺑﺎﻗﺘﺒﺎﺳﻬﺎ( ﻣﻦ إﺣﺪى‬
‫ﺻﻔﺤﺎت أﺣﺪ اﻟﻤﻮاﻗﻊ‪ .‬وﻣﻦ ﺛﻢ وﺿﻌﺘﻬﺎ ﺿﻤﻦ >‪<BLOCKQUOTE> ... </BLOCKQUOTE‬‬

‫وﻓﻜﺮة ﻫﺬه اﻟﺪروس ﺟﺎءت ﻧﺘﯿﺠﺔ ﻟﻤﺎ ﻟﻤﺴﺘﻪ ﺧﻼل اﺳﺘﺨﺪاﻣﻲ ﻟﺸﺒﻜﺔ اﻹﻧﺘﺮﻧﺖ ﺑﺸﻜﻞ ﻋﺎم‪ ،‬واﻟﺒﺤﺚ ﻋﻦ اﻟﻤﻮاﻗﻊ‬
‫اﻟﻌﺮﺑﯿﺔ ﻓﯿﻬﺎ ﺑﺸﻜﻞ ﺧﺎص‪ .‬ﻓﻌﻨﺪﻣﺎ ﺑﺪأت ﺑﺘﻌﻠﻢ ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ‪ ،‬ﻟﻢ ﯾﻜﻦ ﻫﻨﺎك ﻣﺸﻜﻠﺔ ﻓﻲ اﻟﺤﺼﻮل ﻋﻠﻰ‬
‫اﻟﻤﺼﺎدر أو اﻟﻤﻮاﻗﻊ اﻟﺘﻌﻠﯿﻤﯿﺔ اﻟﺘﻲ أﺣﺘﺎﺟﻬﺎ وﻣﻦ ﺧﻼل اﻹﻧﺘﺮﻧﺖ ﻧﻔﺴﻬﺎ‪ .‬ﻟﻜﻦ اﻟﻤﺸﻜﻠﺔ ﻫﻲ داﺋﻤﺎً ﻓﻲ اﻟﺤﺼﻮل ﻋﻠﻰ‬
‫ﺗﻠﻚ اﻟﻤﺼﺎدر ﺑﺎﻟﺼﻮرة اﻟﺘﻲ ﺗﺘﻨﺎﺳﺐ واﺣﺘﯿﺎﺟﺎﺗﻨﺎ ﻛﻤﺴﺘﺨﺪﻣﯿﻦ ﻋﺮب‪....‬‬

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

‫>‪<BLOCKQUOTE‬‬
‫>‪<BLOCKQUOTE‬‬

‫ﻫﺬه اﻟﺪروس ﺟﺎءت ﻧﺘﯿﺠﺔ ﳌﺎ ﳌﺴﺘﻪ ﺧﻼل اﺳﺘﺨﺪاﻣﻲ ﻟﺸﺒﻜﺔ وﻓﻜﺮة‬

‫اﳌﻮاﻗﻊ اﻟﻌﺮﺑﯿﺔ ﻓﯿﻬﺎ ﺑﺸﻜﻞ ﺧﺎص‪ .‬اﻹﻧﱰﻧﺖ ﺑﺸﻜﻞ ﻋﺎم‪ ،‬واﻟﺒﺤﺚ ﻋﻦ‬
‫ﻫﻨﺎك ﻣﺸﻜﻠﺔ ﰲ ﻓﻌﻨﺪﻣﺎ ﺑﺪأت ﺑﺘﻌﻠﻢ ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎت اﻹﻧﱰﻧﺖ‪ ،‬ﱂ ﯾﻜﻦ‬
‫اﳊﺼﻮل ﻋﻠﻰ اﳌﺼﺎدر أو اﳌﻮاﻗﻊ اﻟﺘﻌﻠﯿﻤﯿﺔ اﻟﱵ أﺣﺘﺎﺟﻬﺎ وﻣﻦ ﺧﻼل‬
‫ً ﰲ اﳊﺼﻮل ﻋﻠﻰ ﺗﻠﻚ اﳌﺼﺎدر‬
‫اﻹﻧﱰﻧﺖ ﻧﻔﺴﻬﺎ‪ .‬ﻟﻜﻦ اﳌﺸﻜﻠﺔ ﻫﻲ داﺋﻤﺎ‬
‫اﻟﱵ‬ ‫ﺑﺎﻟﺼﻮرة‬ ‫ﻋﺮب‬ ‫ﻛﻤﺴﺘﺨﺪﻣﲔ‬ ‫واﺣﺘﯿﺎﺟﺎﺗﻨﺎ‬ ‫ﺗﺘﻨﺎﺳﺐ‬ ‫‪....‬‬
‫>‪</BLOCKQUOTE‬‬
‫>‪</BLOCKQUOTE‬‬

‫وﺗﻜﻮن اﻟﻨﺘﯿﺠﺔ‪:‬‬

‫وﻓﻜﺮة ﻫﺬه اﻟﺪروس ﺟﺎءت ﻧﺘﯿﺠﺔ ﻟﻤﺎ ﻟﻤﺴﺘﻪ ﺧﻼل اﺳﺘﺨﺪاﻣﻲ ﻟﺸﺒﻜﺔ اﻹﻧﺘﺮﻧﺖ ﺑﺸﻜﻞ ﻋﺎم‪ ،‬واﻟﺒﺤﺚ ﻋﻦ اﻟﻤﻮاﻗﻊ‬
‫اﻟﻌﺮﺑﯿﺔ ﻓﯿﻬﺎ ﺑﺸﻜﻞ ﺧﺎص‪ .‬ﻓﻌﻨﺪﻣﺎ ﺑﺪأت ﺑﺘﻌﻠﻢ ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ‪ ،‬ﻟﻢ ﯾﻜﻦ ﻫﻨﺎك ﻣﺸﻜﻠﺔ ﻓﻲ اﻟﺤﺼﻮل ﻋﻠﻰ‬
‫اﻟﻤﺼﺎدر أو اﻟﻤﻮاﻗﻊ اﻟﺘﻌﻠﯿﻤﯿﺔ اﻟﺘﻲ أﺣﺘﺎﺟﻬﺎ وﻣﻦ ﺧﻼل اﻹﻧﺘﺮﻧﺖ ﻧﻔﺴﻬﺎ‪ .‬ﻟﻜﻦ اﻟﻤﺸﻜﻠﺔ ﻫﻲ داﺋﻤﺎً ﻓﻲ اﻟﺤﺼﻮل ﻋﻠﻰ‬
‫ﺗﻠﻚ اﻟﻤﺼﺎدر ﺑﺎﻟﺼﻮرة اﻟﺘﻲ ﺗﺘﻨﺎﺳﺐ واﺣﺘﯿﺎﺟﺎﺗﻨﺎ ﻛﻤﺴﺘﺨﺪﻣﯿﻦ ﻋﺮب ‪....‬‬

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

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

‫‪D‬‬ ‫‪C‬‬ ‫‪B‬‬ ‫‪A‬‬

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

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

‫>‪<PRE> ... </PRE‬‬

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

‫‪ABCDEFGHIJKLMNOPQRST‬‬

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

‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬

‫اﻟﻘﻮاﺋﻢ‬
‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] اﻟﻘﻮاﺋﻢ وأﻧﻮاﻋﻬﺎ | ﺗﻐﯿﯿﺮ ﻧﻘﻄﺔ اﻟﺒﺪأ | ﻗﻮاﺋﻢ اﻟﺸﺮح [‬
 ‫اﻟﻘﻮاﺋﻢ وأﻧﻮاﻋﻬﺎ‬

‫ﺗﺤﺘﻮي ﻟﻐﺔ ‪ HTML‬ﻋﻠﻰ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺘﻨﻈﯿﻢ اﻟﺒﯿﺎﻧﺎت ﻓﻲ ﻗﻮاﺋﻢ وﺑﺎﺳﺘﺨﺪام ﻋﺪة ﺧﯿﺎرات‪.‬‬
‫وﻫﻨﺎك ﻧﻮﻋﯿﻦ ﻣﻦ اﻟﻘﻮاﺋﻢ‪:‬‬

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

‫وﺛﺎﻧﯿﻬﻤﺎ اﻟﻘﻮاﺋﻢ ﻏﯿﺮ اﻟﻤﺘﺴﻠﺴﻠﺔ ‪Lists Unordered‬‬ ‫•‬

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

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

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

‫>‪<UL> ... </UL‬‬

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

‫واﻟﯿﻚ اﻟﻤﺜﺎل اﻟﺘﺎﻟﻲ ﻋﻠﻲ اﻟﻘﻮاﺋﻢ اﻟﻤﺘﺴﻠﺴﻠﻪ‬

‫>‪<OL‬‬
‫اﻟﻘﺎﻫﺮة>‪<LI‬‬
‫اﻹﺳﻜﻨﺪرﯾﻪ>‪<LI‬‬
‫أﺳﻮان>‪<LI‬‬
‫اﻷﻗﺼﺮ>‪<LI‬‬
‫اﻹﲰﺎﻋﯿﻠﯿﻪ>‪<LI‬‬
‫اﻟﺴﻮﯾﺲ>‪<LI‬‬
‫>‪</OL‬‬

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

‫اﻟﻘﺎﻫﺮة‬ ‫‪.١‬‬
‫اﻹﺳﻜﻨﺪرﯾﻪ‬ ‫‪.٢‬‬
‫أﺳﻮان‬ ‫‪.٣‬‬
‫اﻷﻗﺼﺮ‬ ‫‪.٤‬‬
‫اﻹﺳﻤﺎﻋﯿﻠﯿﻪ‬ ‫‪.٥‬‬
‫اﻟﺴﻮﯾﺲ‬ ‫‪.٦‬‬

‫وﻫﺬا ﻣﺜﺎل ﻋﻠﻲ اﻟﻘﻮاﺋﻢ ﻏﯿﺮ اﻟﻤﺘﺴﻠﺴﻠﻪ‬

‫>‪<UL‬‬
‫اﻟﻘﺎﻫﺮة ﺟﺎﻣﻌﺔ>‪<LI‬‬
‫ﺟﺎﻣﻌﺔ اﻹﺳﻜﻨﺪرﯾﻪ>‪<LI‬‬
‫ﴰﺲ ﺟﺎﻣﻌﺔ ﻋﲔ>‪<LI‬‬
 ‫اﻟﺰﻗﺎزﯾﻖ>‪<LI‬‬ ‫ﺟﺎﻣﻌﺔ‬
‫>‪</UL‬‬

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

‫ﺟﺎﻣﻌﺔ اﻟﻘﺎﻫﺮة‬ ‫•‬

‫ﺟﺎﻣﻌﺔ اﻹﺳﻜﻨﺪرﯾﻪ‬ ‫•‬
‫ﺟﺎﻣﻌﺔ ﻋﯿﻦ ﺷﻤﺲ‬ ‫•‬
‫ﺟﺎﻣﻌﺔ اﻟﺰﻗﺎزﯾﻖ‬ ‫•‬

‫واﻟﺨﺎﺻﯿﺔ اﻟﻮﺣﯿﺪة اﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻣﻊ ﻫﺬه اﻟﻮﺳﻮم ﻫﻲ ‪ TYPE‬ووﻇﯿﻔﺘﻬﺎ ﺗﺤﺪﯾﺪ ﺷﻜﻞ اﻟﺮﻣﺰ اﻟﻈﺎﻫﺮ ﻣﻊ ﺑﻨﻮد‬
‫اﻟﻘﺎﺋﻤﺔ‪ ،‬وﻋﺎدة ﺗﺴﺘﺨﺪم ﻣﻊ وﺳﻮم ﺑﺪاﯾﺔ اﻟﻘﻮاﺋﻢ >‪ <UL‬أو >‪ <OL‬وﺑﺬﻟﻚ ﻧﺤﺪد رﻣﺰاً واﺣﺪاً ﻟﻜﻞ اﻟﻘﺎﺋﻤﺔ‪ .‬وﻟﻜﻦ‬
‫ﻧﺴﺘﻄﯿﻊ اﺳﺘﺨﺪاﻣﻬﺎ أﯾﻀﺎً ﻣﻊ وﺳﻢ اﻟﺒﻨﻮد >‪ <LI‬ﻹﻋﻄﺎء ﺗﺤﻜﻢ أﻛﺒﺮ ﻓﻲ ﻣﻈﻬﺮ اﻟﻘﺎﺋﻤﺔ ﻣﻦ ﺧﻼل ﺗﺤﺪﯾﺪ رﻣﺰ‬
‫ﻣﺨﺘﻠﻒ ﻟﻜﻞ ﺑﻨﺪ‪.‬‬

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

‫‪<UL‬‬
‫>"‪<UL TYPE="circle"> <OL TYPE="i"> <OL TYPE="I"> <OL TYPE="a"> <OL TYPE="A‬‬
‫>"‪TYPE="square‬‬

‫‪i.‬‬ ‫‪I.‬‬ ‫‪a.‬‬ ‫‪A.‬‬

‫§‬ ‫ﺗﻜﻮن‬ ‫‪o‬‬ ‫ﺗﻜﻮن‬
‫‪ii.‬‬ ‫‪II.‬‬ ‫‪b.‬‬ ‫‪B.‬‬
‫§‬ ‫ﻋﻠﻲ‬ ‫‪o‬‬ ‫ﻋﻠﻲ‬
‫‪iii.‬‬ ‫‪III.‬‬ ‫‪c.‬‬ ‫‪C.‬‬
‫§‬ ‫ﺷﻜﻞ‬ ‫‪o‬‬ ‫ﺷﻜﻞ‬
‫‪iv.‬‬ ‫‪IV.‬‬ ‫‪d.‬‬ ‫‪D.‬‬
‫§‬ ‫ﻣﺮﺑﻊ‬ ‫‪o‬‬ ‫داﺋﺮه‬
‫‪v.‬‬ ‫‪V.‬‬ ‫‪e.‬‬ ‫‪E.‬‬

‫أﻧﺖ ﺗﺮى أن اﻟﺮﻣﺰ اﻟﻤﻮﺟﻮد ﻋﻨﺪ ﻛﻞ ﺑﻨﺪ ﻓﻲ اﻟﻘﺎﺋﻤﺔ ﻫﻮ ﻋﺒﺎرة ﻋﻦ ﻧﻘﻄﺔ ﺳﻮداء ﯾﻄﻠﻖ ﻋﻠﯿﻬﺎ اﺳﻢ ‪ Disc‬وﻫﻲ‬
‫اﻟﻤﻌﺮﻓﺔ ﺿﻤﻨﺎً ﻓﻲ ﺧﺎﺻﯿﺔ ‪ .TYPE‬ﻟﻜﻦ ﻫﻨﺎك رﻣﻮز أﺧﺮى ﯾﻤﻜﻦ إﻇﻬﺎرﻫﺎ وﻫﻲ اﻟﻤﺮﺑﻊ ‪ ،square‬واﻟﺪاﺋﺮة‬
‫اﻟﻤﻔﺮﻏﺔ ‪circle‬‬

‫ﺗﻐﯿﯿﺮ ﻧﻘﻄﺔ اﻟﺒﺪأ‬

‫ﺑﻔﺮض أﻧﻚ ﺗﺮﯾﺪ أن ﺗﺒﺪأ اﻟﺘﺮﻗﯿﻢ ﺑﺮﻗﻢ ﻏﯿﺮ اﻟﻮاﺣﺪ ﻛﻞ ﻣﺎ ﻋﻠﯿﻚ ﻫﻮ أن ﺗﻀﻊ ﻫﺬه اﻟﺨﺎﺻﯿﻪ ﻛﻤﺎ ﺑﺎﻟﺼﯿﻐﺔ اﻟﺘﺎﻟﯿﻪ‬
‫وﺗﺤﺪد رﻗﻢ اﻟﺒﺪأ اﻟﺬي ﺗﺮﯾﺪه‬

‫>"‪<OL START="5‬‬

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

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

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

‫ﻗﻮاﺋﻢ اﻟﺸﺮح ‪Definition Lists‬‬

 ‫ﻫﻨﺎك ﻧﻮع ﺧﺎص ﻣﻦ اﻟﻘﻮاﺋﻢ ﯾﺪﻋﻰ ﻗﻮاﺋﻢ اﻟﺸﺮح أو اﻟﺘﻌﺮﯾﻔﺎت وﻛﻤﺎ ﯾﺪل اﻹﺳﻢ ﺗﺴﺘﺨﺪم ﻋﻨﺪﻣﺎ ﻧﺮﯾﺪ إدراج ﻗﺎﺋﻤﺔ‬
‫ﻣﻦ اﻟﻤﺼﻄﻠﺤﺎت ﯾﺘﺒﻊ ﻛﻞ واﺣﺪ ﻣﻨﻬﺎ ﺷﺮح أو ﺗﻌﻠﯿﻖ‪ .‬وﻧﺤﺘﺎج ﻹﻧﺸﺎء ﻫﺬه اﻟﻘﻮاﺋﻢ إﻟﻰ ﺛﻼﺛﺔ وﺳﻮم‪:‬‬
‫اﻷول >‪ </DL> ... <DL‬ﻟﺘﻌﺮﯾﻒ ﺑﺪاﯾﺔ وﻧﻬﺎﯾﺔ اﻟﻘﺎﺋﻤﺔ‪.‬‬
‫واﻟﺜﺎﻧﻲ >‪ <DT‬وﯾﻮﺿﻊ ﻗﺒﻞ ﻛﻞ ﻣﺼﻄﻠﺢ ﻟﺘﺤﺪﯾﺪه‪ ،‬وﻫﻮ وﺳﻢ ﻣﻔﺮد‪.‬‬
‫أﻣﺎ اﻟﺜﺎﻟﺚ ﻓﻬﻮ >‪ <DD‬وﻫﻮ وﺳﻢ اﻟﺸﺮح أو اﻟﺘﻌﻠﯿﻖ وﻫﻮ أﯾﻀﺎ ﻣﻔﺮد‪ .‬وﻟﻨﻘﻢ اﻵن ﺑﻜﺘﺎﺑﺔ ﺷﯿﻔﺮة اﻟﻘﺎﺋﻤﺔ اﻟﺴﺎﺑﻘﺔ‬

‫>‪<DL‬‬
‫‪<DT>HTML <DD>Hyper Text Markup Language‬‬
‫‪<DT>WWW <DD>World Wide Web‬‬
‫‪<DT>FTP <DD>File Transport Protocol‬‬
‫‪<DT>GIF <DD>Graphical Interchange Format‬‬
‫‪<DT>JPG, JPEG <DD>Joint Photographic Experts Group‬‬
‫>‪</DL‬‬

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

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

‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬

‫ﺑﺠﻤﯿﻊ وﺳﻮم اﻟﻨﺺ ﻗﺎﺋﻤﺔ‬

‫ﺑﺎﻟﻄﺒﻊ ﻗﺪ ﻗﻤﻨﺎ ﺑﺸﺮح أﻫﻢ اﻟﻮﺳﻮم و اﻷﻛﻮاد اﻟﺨﺎﺻﻪ ﺑﺘﻨﺴﯿﻖ اﻟﻨﺺ ﻓﻲ اﻟﺪروس اﻟﺴﺎﺑﻘﻪ وﻟﻜﻦ ﻫﺬه اﻟﻘﺎﺋﻤﺔ ﺑﻬﺎ ﻛﻞ‬
‫اﻷﻛﻮاد اﻟﺘﻲ ﺗﻢ ﺷﺮﺣﻬﺎ واﻟﺘﻲ ﻟﻢ ﯾﺘﻢ ﺷﺮﺣﻬﺎ ﯾﻮﺟﺪ ﺑﻬﺬا اﻟﻘﺎﺋﻤﺔ أﻛﻮاد ﺗﻌﻄﻲ ﻧﺘﺎﺋﺞ ﻣﺘﺸﺎﺑﻬﺔ و أﺧﺮي ﺟﺪﯾﺪه‬
‫ﻟﻺﺻﺪار اﻟﺮاﺑﻊ ﻓﻲ ﻟﻐﺔ ‪ HTML‬و ﻟﻬﺬا ﻓﻤﻦ اﻟﻤﻤﻜﻦ أن ﻻ ﺗﺮي ﺗﺄﺛﯿﺮﻫﺎ إﻻ إذا ﻛﺎن ﻣﺴﺘﻌﺮﺿﻚ ﯾﺪﻋﻢ ﻫﺬه‬
‫اﻟﻮﺳﻮم وﻣﻦ ﻫﺬه اﻟﻘﺎﺋﻤﺔ ﺳﺘﺮي اﻟﻮﺳﻮم وﺗﺄﺛﯿﺮه وﻫﻞ ﻫﻮ ﻣﺪﻋﻢ ﻣﻦ ﻗﺒﻞ اﻟـ‪ HTML‬أﻣﺎ ﻻ ‪.‬‬

‫اﻟـﻮﺳــﻮم‬ ‫اﻟـﻨـﺘـﯿـﺠـﺔ‬
‫>‪<ABBR>From this</ABBR‬‬ ‫‪You get this‬‬

‫اﻟﻮﺳﻢ ﻣﺆﺷﺮ ﻟﯿﻌﻄﻲ ﻣﻌﻨﻲ ﻛﺎﻣﻞ ﻋﻨﺪﻣﺎ ﺗﻘﻒ ﺑﺎﻟﻔﺄرة ﻋﻠﻲ اﻟﻜﻠﻤﺔ اﻟﻤﺤﺎﻃﺔ ﺑﻬﺬا‬
‫ﻟﯿﺲ ﻣﺪﻋﻢ ﺑﺎﻟﻜﺎﻣﻞ ‪[HTML4] -‬‬
 <ACRONYM>From this</ACRONYM> You get this

‫ﯾﻌﻤﻞ ﻣﺜﻞ اﻟﻮﺳﻢ اﻟﺴﺎﺑﻖ ﺗﻤﺎﻣﺎ اﻹﺧﺘﻼف ﻓﻘﻂ ﻓﻲ ﻃﺮﯾﻘﺔ ﻋﺮض اﻟﻤﻌﻨﻲ‬
[HTML4] - ‫ﻟﯿﺲ ﻣﺪﻋﻢ ﺑﺎﻟﻜﺎﻣﻞ‬

<ADDRESS>From this</ADDRESS> You get this

‫ﺗﻀﻊ ﻫﺬا ﺣﻮل اﻟﻌﻨﺎوﯾﻦ‬

<B>From this</B> You get this

<BASEFONT COLOR="green"> You get this
<BDO DIR="RTL">From this</BDO> You get this

‫ﻫﺬا اﻟﻮﺳﻢ ﯾﺠﻌﻞ اﻟﻨﺺ ﯾﻜﺘﺐ ﻣﻦ اﻟﯿﻤﯿﻦ إﻟﻲ اﻟﺸﻤﺎل واﻟﻌﻜﺲ‬

[HTML4] - ‫ﻟﯿﺲ ﻣﺪﻋﻢ ﺑﺎﻟﻜﺎﻣﻞ‬

<BIG>From this</BIG> You get this

<BLINK>From this</BLINK> You get this

‫ ﻓﻘﻂ‬Netscape ‫ﯾﺠﻌﻞ اﻟﻨﺺ ﯾﻮﻣﺾ ) ﯾﻈﻬﺮ وﯾﺨﺘﻔﻲ ( ﻟﻜﻦ ﻟﻤﺴﺘﺨﺪﻣﻲ‬

[Netscape]

<BLOCKQUOTE>From this</BLOCKQUOTE> You get this

<CITE>From this</CITE> You get this
<COMMENT>From this</COMMENT>

‫ﯾﺠﻌﻞ اﻟﻨﺺ ﻏﯿﺮ ﻣﺮئ وﯾﺴﺘﻌﻤﻞ ﻟﻮﺿﻊ اﻟﺘﻌﻠﯿﻘﺎت‬

‫!< و ﻣﻦ اﻟﻤﻤﻜﻦ إﺳﺘﺨﺪام ﻫﺬا‬-- ‫ اﻟﻨﺺ‬-->‫أﯾﻀﺎ‬

<DEL>From this</DEL>

[HTML4]

<DFN>From this</DFN> You get this

[HTML4] - ‫ﺑﺎﻟﻜﺎﻣﻞ ﻟﯿﺲ ﻣﺪﻋﻢ‬

<DIV>From this</DIV> You get this

‫ ﻟﻌﻤﻞ اﻟﻄﺒﻘﺎت‬stylesheet ‫ﯾﻨﺴﻖ ﺻﻔﺤﺎت ﻛﺄﻗﺴﺎم ﻣﺨﺘﻠﻔﺔ ﯾﺴﺘﺨﺪم ﺑﺼﻔﺔ أﺳﺎﺳﯿﻪ ﺑﺎﻷﺳﺘﯿﻞ ﺷﯿﺘﺲ‬
[HTML4]

<EM>From this</EM> You get this

.‫ﯾﺨﻠﻖ ﺗﺄﻛﯿﺪ ﻋﻠﻰ اﻟﻨّﺺ اﻟﻤﺨﺘﺎر‬

 ‫>‪<FONT COLOR="orange">From this</FONT‬‬ ‫‪You get this‬‬

‫ﺣﺠﻤﻪو وﺷﻜﻠﻪ ﻟﻮن اﻟﺨﻂ ﻫﺬا ﻫﻮ اﻟﻮﺳﻢ اﻷﺳﺎﺳﻲ ﻟﺘﻐﯿﯿﺮ‬

‫>‪<H4>From this</H4‬‬ ‫‪You get this‬‬

‫ﯾﻘﻮم ﺑﺘﻨﺴﯿﻖ اﻟﻌﻨﺎوﯾﻦ وﻫﺬا اﻟﻮﺳﻢ ﺑﻪ ‪ ٦‬ﻣﺴﺘﻮﯾﺎت ﻣﻦ ‪ H1‬إﻟﻲ ‪H6‬‬

‫>‪<I>From this</I‬‬ ‫‪You get this‬‬

‫ﻫﺬا ﻟﻠﺨﻂ اﻟﻤﺎﺋﻞ‬

‫>‪<INS>From this</INS‬‬ ‫‪You get this‬‬

‫‪ DEL‬ﯾﺴﺎﻧﺪ ﻫﺬا اﻟﻮﺳﻢ ﻧﺼﻮص أﺧﺮي أي أﻧﻚ ﻣﻦ اﻟﻤﻤﻜﻦ إﺳﺘﺨﺪاﻣﻪ ﻣﻊ اﻟﻮﺳﻢ‬

‫]‪[HTML4‬‬

‫>‪<KBD>From this</KBD‬‬ ‫‪You get this‬‬

‫ﯾﻈﻬﺮ اﻟﻨﺺ ﻛﺎﻟﻨﺺ اﻟﻤﺪﺧﻞ ﻋﻦ ﻃﺮﯾﻖ ﻟﻮﺣﺔ اﻟﻤﻔﺎﺗﯿﺢ‬

‫>‪<LISTING>From this</LISTING‬‬ ‫‪You get this‬‬

‫ﻫﺬا اﻟﻮﺳﻢ أﺻﺒﺢ ﻗﺪﯾﻢ وﻟﻘﺪ أﺳﺘﻌﻤﻞ ﺑﺪﻻ ﻣﻨﻪ اﻟﻮﺳﻢ ‪ PRE‬ﻓﻲ اﻹﺻﺪار اﻟﺮاﺑﻊ ]‪[HTML4‬‬

‫>‪<MULTICOL>From this</MULTICOL‬‬ ‫‪You get this‬‬

‫ﯾﺴﺘﺨﺪم ﻓﻲ اﻟﻜﺘﺎﺑﻪ ﻓﻲ أﻋﻤﺪه ﻣﺘﻌﺪده ﻻ ﺗﺴﺘﺨﺪﻣﻪ‬

‫]‪[Netscape‬‬

‫>‪<NOBR>From this</NOBR‬‬ ‫‪You get this‬‬

‫ﻣﻦ اﻟﻘﻮاﻋﺪ اﻹﻓﺘﺮاﺿﯿﺔ ﻟﻠﻤﺘﺼﻔﺤﺎت أن اﻷﺳﻄﺮ ﻓﻲ ﻛﻞ ﻓﻘﺮة ﺗﻠﺘﻒ وﺗﻨﻘﺴﻢ ﺑﺼﻮرة ﺗﻠﻘﺎﺋﯿﺔ ﺣﺴﺐ إﺳﺘﺒﺎﻧﺔ اﻟﺸﺎﺷﺔ‬
‫وﻋﺮض ﻧﺎﻓﺬة اﻟﻤﺘﺼﻔﺢ‪ .‬ﻟﻜﻦ ﻟﻨﻘﻞ أﻧﻨﺎ ﻧﺮﯾﺪ ﻣﻦ أﺣﺪ اﻷﺳﻄﺮ أن ﻻ ﯾﻨﻘﺴﻢ ﻣﻬﻤﺎ ﻛﺎن ﻣﻘﺪار اﻹﺳﺘﺒﺎﻧﺔ وﻋﺮض‬
‫اﻟﻨﺎﻓﺬة ﻓﻨﺴﺘﻌﻤﻞ ﻟﻪ ﻫﺬا اﻟﻮﺳﻢ)ﻣﺜﺎل ﻋﻠﻲ ذﻟﻚ( وإذا أردﻧﺎ أن ﻧﻌﻤﻞ وﻗﻔﻪ ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪.<WBR‬‬

‫‪<PLAINTEXT>From this‬‬ ‫‪You get this‬‬

‫ﻫﺬا اﻟﻮﺳﻢ أﯾﻀﺎ ﻣﻦ اﻟﻮﺳﻮم اﻟﻘﺪﯾﻢ وﯾﻔﻀﻞ إﺳﺘﻌﻤﺎل اﻟﻮﺳﻢ ‪ PRE‬ﺑﺪﻻ ﻣﻨﻪ‬

‫>‪<PRE>From this</PRE‬‬ ‫‪You get this‬‬

‫ﻫﺬا اﻟﻮﺳﻢ ﯾﻘﻮم ﺑﺈﺿﺎﻓﺔ ﻣﺴﺎﻓﺎت ﺑﯿﻦ اﻟﻜﻠﻤﺎت وﻫﻮ ﻣﻦ اﻟﻮﺳﻮم اﻟﺠﺪﯾﺪه‬
‫]‪[HTML4‬‬

‫>‪<Q>From this</Q‬‬ ‫‪You get this‬‬

 <BLOCKQUOTE> ‫ﻫﺬا اﻟﻮﺳﻢ ﺑﺪﻻ ﻣﻦ اﻟﻮﺳﻢ‬
[HTML4] - ‫ﻟﯿﺲ ﻣﺪﻋﻢ ﺑﺎﻟﻜﺎﻣﻞ‬

<S>From this</S> You get this

‫ﻧﺺ ﯾﻌﺘﺮﺿﻪ ﺧﻂ‬

[HTML4]

<SAMP>From this</SAMP> You get this

‫ﺗﺴﺘﺨﺪم ﻋﻨﺪ إﻋﻄﺎء اﻷﻣﺜﻠﻪ‬

<SMALL>From this</SMALL> You get this

‫ﺣﺠﻢ اﻟﺨﻂ ﺗﺼﻐﯿﺮ‬

<SPAN>From this</SPAN> You get this

<SPAN> ‫< وﻟﻜﻦ اﻟﻮﺳﻢ‬DIV> ‫ و ﯾﻌﺘﺒﺮ ﻣﺜﻞ اﻟﻮﺳﻢ‬stylesheets ‫وﺳﻢ ﺟﺪﯾﺪ ﯾﺴﺘﺨﺪم ﻓﻲ اﻹرﺗﺒﺎﻃﺎت ﻣﻊ‬
‫< ﻓﯿﻮﺛﺮ ﻋﻠﻲ اﻟﻤﻘﻄﻊ اﻷﻓﻘﻲ ﻛﻠﻪ‬DIV> ‫ﯾﻮﺛﺮ ﻋﻠﻲ اﻟﻨﺺ ﻓﻘﻂ أﻣﺎ‬
[HTML4]

<STRONG>From this</STRONG> You get this

‫ﯾﺠﻌﻞ اﻟﻨﺺ ﻏﻠﯿﻆ‬

From <SUB>this</SUB> You get this

‫ﯾﺠﻌﻞ اﻟﻨﺺ ﻣﺮﻧﺨﻔﺾ‬

From <SUP>this</SUP> You get this

‫ﯾﺠﻌﻞ اﻟﻨﺺ ﻣﺮﺗﻔﻊ‬

<TT>From this</TT> You get this

.Monospaced Text ‫ وﻫﺬا اﻟﻨﺺ ﯾﻌﺮف أﯾﻀﺎً ﺑﺎﻟﻨﺺ ﻣﻮﺣَﺪ اﻟﻤﺴﺎﻓﺎت‬TeleType ‫ﻧﺺ اﻵﻟﺔ اﻟﻄﺎﺑﻌﺔ‬

<U>From this</U> You get this

‫ﻧﻤﻮذج ﻟﻠﺨﻂ اﻟﻤﺴﻄﺮ‬

[HTML4]

<VAR>From this</VAR> You get this

‫ﯾﺴﺎﻧﺪ اﻟﻤﺘﻐﯿﯿﺮات ﻫﺬا ﻛﻞ ﻣﺎ ﻓﻲ اﻷﻣﺮ‬

<XMP>From this</XMP> You get this

 ‫>‪<PRE‬‬ ‫ﻫﺬا اﻟﻮﺳﻢ ﻗﺪﯾﻢ وﻟﻘﺪ ﺗﻢ إﺳﺘﻌﻤﺎل ﺑﺪﻻ ﻣﻦ وﺳﻢ‬

‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬

‫اﻟﻨﺺ اﻟﻤﺘﺤﺮك‬
‫‪.‬‬

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫| ‪[ BGCOLOR | HEIGHT | WIDTH | ALIGN | HSPACE | VSPACE | BEHAVIOR | DIRECTION‬‬
‫] أﺧﯿﺮه ﻣﻼﺣﻈﺔ | ‪LOOP | SCROLLAMOUNT | SCROLLDELAY‬‬

‫ﻻﺑﺪ وان ﺗﻌﺮف أن اﻟﻨﺺ اﻟﻤﺘﺤﺮك وﺳﻢ ﺧﺎص ‪MS Explorer‬ﻓﻘﻂ وﻻ ﯾﻌﻤﻞ ﻣﻊ أي ﻣﺴﺘﻌﺮض أﺧﺮ‬

‫ﻣﺎرأﯾﻚ ﺑﻬﺬا اﻟﻨﺺ أﻧﻪ ﯾﻄﯿﺮ‬

‫ﻣﺎ رأﯾﻚ ﺑﻬﺬا اﻟﻨﺺ اﻟﻄﺎﺋﺮ أﻣﺎﻣﻚ ﻋﻠﻰ اﻟﺸﺎﺷﺔ؟ ﺟﻤﯿﻞ‪ ..‬أﻟﯿﺲ ﻛﺬﻟﻚ؟ ﻫﺬه اﻟﻼﻓﺘﺔ ﻫﻲ إﺣﺪى اﻟﻤﺆﺛﺮات اﻟﺨﺎﺻﺔ‬
‫اﻟﺘﻲ ﯾﻤﻜﻦ إﺣﺪاﺛﻬﺎ ﻓﻲ ‪ MS Explorer.‬ﺑﻮاﺳﻄﺔ ﻫﺬه اﻟﻮﺳﻮم‪ .‬وﺑﻜﻞ ﺑﺴﺎﻃﺔ ﻫﺬه ﻫﻲ اﻟﺼﯿﻐﺔ اﻟﺨﺎﺻﺔ ﺑﺬﻟﻚ‬

‫>‪<MARQUEE‬‬
‫ﻣﺎرأﯾﻚ ﲠﺬا اﻟﻨﺺ أﻧﻪ ﯾﻄﲑ‬
‫>‪</MARQUEE‬‬

‫ﺑﺎﻟﻄﺒﻊ ﻻ ﯾﻤﻜﻦ أن ﺗﻤﺮ اﻷﻣﻮر ﻫﻨﺎ ﺑﺒﺴﺎﻃﺔ ﻓﻼ ﺑﺪ ﻣﻦ وﺟﻮد ﺧﺼﺎﺋﺺ ﻟﻬﺬه اﻟﻮﺳﻮم‪ ،‬واﻟﺤﻘﯿﻘﺔ أن ﻫﻨﺎك إﺣﺪى‬
‫ﻋﺸﺮة ﺧﺎﺻﯿﺔ ﻧﺴﺘﺨﺪﻣﻬﺎ )ﻋﺪد ﻟﯿﺲ ﺑﺎﻟﻘﻠﯿﻞ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻮﺳﻮم ﺧﺎﺻﺔ ﺗﻌﻤﻞ ﻣﻊ ﻣﺴﺘﻌﺮﺿﺎت ﻣﻌﯿﻨﻪ (‪ .‬ﻟﻜﻨﻬﺎ ﻋﻠﻰ أﯾﺔ‬
‫ﺣﺎل ﻟﯿﺴﺖ ﺻﻌﺒﺔ اﻟﺘﻄﺒﯿﻖ وﻫﺬه ﻫﻲ اﻟﺨﺼﺎﺋﺺ أﺳﺮدﻫﺎ ﻟﻚ ﻣﻊ اﻷﻣﺜﻠﺔ و ﻧﺘﺎﺋﺠﻬﺎ ﺗﺤﺘﻬﺎ ‪:‬‬

‫‪BGCOLOR:‬ﻟﺘﺤﺪﯾﺪ ﻟﻮن اﻟﺨﻠﻔﯿﺔ ﺣﯿﺚ ﯾﻌﻄﯿﻚ أﻣﻜﺎﻧﯿﻪ وﺿﻊ أﻟﻮان ﻟﻠﺨﻠﻔﯿﻪ ﺳﻮاء ﺑﺎل ‪Hex‬ﻛﻮد أو أﺳﻤﺎء‬
‫اﻷﻟﻮان‬

‫>"‪<MARQUEE BGCOLOR="#99CCFF‬‬
‫‪Html4Arab‬‬
‫>‪</MARQUEE‬‬

‫‪Html4Arab‬‬

‫‪ :HEIGHT‬ﻟﺘﺤﺪﯾﺪ إرﺗﻔﺎع اﻟﻼﻓﺘﺔ‪ ،‬وﻫﻲ إﻣﺎ أن ﺗﺄﺧﺬ ﻗﯿﻤﺔ ﺛﺎﺑﺘﺔ أو ﻗﯿﻤﺔ ﻧﺴﺒﯿﺔ ﺣﺴﺐ إرﺗﻔﺎع ﻧﺎﻓﺬة اﻟﻤﺘﺼﻔﺢ‪.‬‬

‫>"‪<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80‬‬

‫‪Html4Arab‬‬
‫>‪</MARQUEE‬‬
Html4Arab

‫ وﻫﻨﺎ أﯾﻀﺎً إﻣﺎ أن ﺗﺄﺧﺬ ﻗﯿﻤﺔ ﺛﺎﺑﺘﺔ أو ﻧﺴﺒﯿﺔ‬،‫ ﻟﺘﺤﺪﯾﺪ ﻋﺮض اﻟﻼﻓﺘﺔ‬:WIDTH

<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%">

Html4Arab
</MARQUEE>

Html4Arab

top, middle ‫ وﻫﻲ ﺗﺄﺧﺬ اﻟﻘﯿﻢ‬،‫ ﻟﺘﺤﺪﯾﺪ اﻟﻤﺤﺎذاة اﻟﻌﻤﻮدﯾﺔ ﻟﻠﻨﺺ اﻟﺬي ﻗﺪ ﯾﺘﻮاﺟﺪ ﻋﻠﻰ ﺟﺎﻧﺒﻲ اﻟﻼﻓﺘﺔ‬:ALIGN
.‫ وﻫﻲ اﻹﻓﺘﺮاﺿﯿﺔ أي اﻟﺘﻲ ﺗﻄﺒﻖ ﺗﻠﻘﺎﺋﯿﺎً ﻋﻨﺪ ﻋﺪم إدراج ﻫﺬه اﻟﺨﺎﺻﯿﺔ‬bottom ‫و‬

Welcome to
<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%">
Html4Arab
</MARQUEE>
Have a good time.

Html4Arab
Welcome to Have a good time.

Welcome to
<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%" ALIGN="middle">
Html4Arab
</MARQUEE>
Have a good time.

Html4Arab
Welcome to Have a good time.

Welcome to
<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%" ALIGN="top">
‫‪Html4Arab‬‬
‫>‪</MARQUEE‬‬
‫‪Have a good time.‬‬

‫‪Html4Arab‬‬
‫‪Welcome to‬‬ ‫‪Have a good time.‬‬

‫‪ :HSPACE‬ﻟﺘﺤﺪﯾﺪ اﻟﻤﺴﺎﻓﺔ اﻟﻔﺎرﻏﺔ اﻟﺘﻲ ﺗﻔﺼﻞ ﺑﯿﻦ اﻟﻼﻓﺘﺔ وﺑﯿﻦ اﻟﻨﺺ اﻟﻤﻮﺟﻮد ﻋﻠﻰ ﺟﺎﻧﺒﯿﻬﺎ‬

‫‪Welcome to‬‬
‫>"‪<MARQUEE BGCOLOR="#99CCFF" HEIGHT="80" WIDTH="40%" HSPACE="30‬‬
‫‪Html4Arab‬‬
‫>‪</MARQUEE‬‬
‫‪Have a good time.‬‬

‫‪Html4Arab‬‬
‫‪Welcome to‬‬ ‫‪Have a good time.‬‬

‫‪ :VSPACE‬ﺗﻌﻤﻞ ﻣﺜﻞ اﻟﺨﺎﺻﯿﺔ اﻟﺴﺎﺑﻘﺔ ﻟﻜﻨﻬﺎ ﺗﺤﺪد اﻟﻤﺴﺎﻓﺔ اﻟﻔﺎرﻏﺔ ﻋﻤﻮدﯾﺎً ﻣﻦ اﻷﻋﻠﻰ واﻷﺳﻔﻞ‬

‫ﺣﺘﻰ اﻵن ﻛﺎﻧﺖ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﻧﺎﻗﺸﻨﺎﻫﺎ ﻣﺠﺮد ﺧﺼﺎﺋﺺ ﻣﻈﻬﺮﯾﺔ ﺗﺘﻌﻠﻖ ﺑﺸﻜﻞ وﻣﻈﻬﺮ اﻟﻼﻓﺘﺔ دون ﺗﻐﯿﯿﺮ‬
‫ﻃﺮﯾﻘﺔ ﻋﻤﻠﻬﺎ‪ .‬واﻵن ﻧﺄﺗﻲ إﻟﻰ اﻟﺨﺼﺎﺋﺺ اﻟﻔﻨﯿﺔ‪:‬‬

‫‪ BEHAVIOR‬ﺗﺤﺪد ﺳﻠﻮك اﻟﻨﺺ اﻟﻤﻮﺟﻮد ﻓﻲ اﻟﻼﻓﺘﺔ وﻃﺮﯾﻘﺔ ﻋﻤﻠﻪ وﻫﻨﺎك ﺛﻼﺛﺔ ﻗﯿﻢ )أو ﺑﺎﻷﺣﺮى( ﺛﻼﺛﺔ‬
‫أﺳﺎﻟﯿﺐ ﻟﺤﺮﻛﺔ اﻟﻨﺺ وﻫﻲ اﻟﺘﺎﻟﯿﺔ‪:‬‬

‫‪ scroll‬ﯾﺘﺤﺮك ﺑﻨﻔﺲ اﻹﺗﺠﺎه ﻣﻦ ﺟﺎﻧﺐ إﻟﻰ آﺧﺮ وﺑﺼﻮرة ﻣﺴﺘﻤﺮة وﻫﻲ اﻟﻘﯿﻤﺔ اﻹﻓﺘﺮاﺿﯿﺔ‪ ،‬ﻟﺬﻟﻚ ﻻ‬ ‫•‬
‫ﯾﻬﻢ إن ﻛﺘﺒﺖ أم ﻻ‪.‬‬
‫‪ slide‬ﯾﺘﺤﺮك اﻟﻨﺺ ﻣﺮة واﺣﺪة ﻣﻦ ﺟﺎﻧﺐ إﻟﻰ اﻟﺠﺎﻧﺐ اﻵﺧﺮ وﯾﺘﻮﻗﻒ ﻋﻨﺪه‪.‬‬ ‫•‬

‫>"‪<MARQUEE BGCOLOR="#99CCFF" WIDTH="80%" BEHAVIOR="slide‬‬

‫‪Html4Arab‬‬
‫>‪</MARQUEE‬‬

‫‪Html4Arab‬‬
‫ﻣﻦ اﻟﻤﺤﺘﻤﻞ أن ﯾﻜﻮن اﻟﻨﺺ ﻓﻲ اﻟﻤﺜﺎل أﻋﻼه ﻣﺘﻮﻗﻔﺎً ﺑﻌﺪ أن ﯾﻜﻮن ﻗﺪ أﻛﻤﻞ ﺗﺤﺮﻛﻪ‪ ،‬ﻟﺬﻟﻚ ﻗﻢ ﺑﺎﻟﻨﻘﺮ‬
‫ﻋﻠﻰ زر ‪ Refresh‬اﻟﻤﻮﺟﻮد ﻓﻲ ﻣﺘﺼﻔﺤﻚ ﻹﻋﺎدة ﺗﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ وﺗﺤﺮﯾﻚ اﻟﻨﺺ ﻣﺮة أﺧﺮى‬

‫‪ alternate‬ﯾﺘﺄرﺟﺢ اﻟﻨﺺ ﺟﯿﺌﺔ وذﻫﺎﺑﺎً ﻣﻦ ﺟﺎﻧﺐ إﻟﻰ آﺧﺮ‪.‬‬ ‫•‬

 ‫>"‪<MARQUEE BGCOLOR="#99CCFF" WIDTH="80%" BEHAVIOR="alternate‬‬
‫‪Html4Arab‬‬
‫>‪</MARQUEE‬‬

‫‪Html4Arab‬‬

‫‪ DIRECTION‬ﺗﺤﺪد إﺗﺠﺎه ﺳﯿﺮ اﻟﻨﺺ وذﻟﻚ ﻣﻦ ﺧﻼل اﻟﻘﯿﻢ ‪ left‬اﻟﺘﻲ ﺗﺤﺮﻛﻪ إﻟﻰ اﻟﯿﺴﺎر )وﻫﻲ اﻹﻓﺘﺮاﺿﯿﺔ(‬
‫و ‪ right‬اﻟﺘﻲ ﺗﺤﺮﻛﻪ إﻟﻰ اﻟﯿﻤﯿﻦ‪.‬‬

‫>"‪<MARQUEE BGCOLOR="#99CCFF" WIDTH="80%" DIRECTION="right‬‬

‫‪Html4Arab‬‬
‫>‪</MARQUEE‬‬

‫‪Html4Arab‬‬

‫‪ LOOP‬ﺗﺤﺪد ﻋﺪد اﻟﻤﺮات اﻟﺘﻲ ﺳﯿﺘﺤﺮك ﻓﯿﻬﺎ اﻟﻨﺺ داﺧﻞ اﻟﻼﻓﺘﺔ‪ .‬ﻓﺈذا أردت أن ﺗﺴﺘﻤﺮ اﻟﺤﺮﻛﺔ إﻟﻰ ﻣﺎ ﻻ ﻧﻬﺎﯾﺔ‬
‫ﻓﻀﻊ اﻟﻘﯿﻤﺔ ‪ ١-‬أو ‪ infinite‬وﺑﺨﻼف ذﻟﻚ ﺿﻊ ﻋﺪد اﻟﻤﺮات اﻟﺘﻲ ﺗﺮﯾﺪﻫﺎ‪ .‬واﻟﺸﯿﻔﺮة اﻟﺘﺎﻟﯿﺔ ﺗﺤﺪد ﻋﺪد ﻣﺮات‬
‫اﻟﺤﺮﻛﺔ ﺑﺨﻤﺲ‪) .‬إذا وﺟﺪت اﻟﻨﺺ ﺳﺎﻛﻨﺎً أو ﻟﻢ ﺗﺠﺪ ﻧﺼﺎً ﻋﻠﻰ اﻹﻃﻼق ﻓﻬﺬا ﯾﻌﻨﻲ أﻧﻪ ﻗﺪ اﺳﺘﻨﻔﺬ ﺣﺮﻛﺎﺗﻪ اﻟﺨﻤﺲ‬
‫ﻟﺬﻟﻚ ﺗﺤﺘﺎج ﻟﻠﻨﻘﺮ ﻋﻠﻰ ‪ Refresh‬ﻹﻋﺎدة ﺗﺸﻐﯿﻠﻪ(‬

‫>"‪<MARQUEE BGCOLOR="#99CCFF" WIDTH="80%" DIRECTION="right" LOOP="3‬‬

‫‪Html4Arab‬‬
‫>‪</MARQUEE‬‬

‫‪Html4Arab‬‬

‫ﺑﻘﻲ ﻟﺪﯾﻨﺎ اﻵن ﺧﺎﺻﯿﺘﯿﻦ ﺗﻘﻮﻣﺎن ﺑﺘﺤﺪﯾﺪ ﺳﺮﻋﺔ ﺗﺤﺮك اﻟﻨﺺ ﻓﻲ اﻟﻼﻓﺘﺔ وﻗﺒﻞ أن ﻧﻨﺎﻗﺸﻬﻤﺎ دﻋﻨﻲ أروي ﻟﻚ ﻫﺬه‬
‫اﻟﻘﺼﺔ‪:‬‬

‫ﻓﻲ ﻏﺎﺑﺮ اﻷزﻣﺎن‪ ،‬ﺣﺪﺛﻨﺎ أﺳﺘﺎذ اﻟﻔﯿﺰﯾﺎء ﯾﺎ ﺳﺎدة ﯾﺎ ﻛﺮام‪ ،‬أن اﻷﻓﻼم اﻟﻤﺘﺤﺮﻛﺔ ﻣﺎ ﻫﻲ إﻻ ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻟﺼﻮر‬
‫اﻟﺜﺎﺑﺘﺔ أو اﻟﻠﻘﻄﺎت اﻟﺘﻲ ﯾﺘﻢ ﻋﺮﺿﻬﺎ ﺑﺼﻮرة ﻣﺘﻌﺎﻗﺒﺔ ﺧﻼل ﻓﺘﺮة زﻣﻨﯿﺔ ﻣﻌﯿﻨﺔ‪ ،‬ﻣﻤﺎ ﯾﻌﻄﻲ اﻹﻧﻄﺒﺎع ﺑﻮﺟﻮد‬
‫اﻟﺤﺮﻛﺔ‪ .‬وﺳﺮﻋﺔ ﻋﺮض اﻟﻠﻘﻄﺎت وﺗﻌﺎﻗﺒﻬﺎ ﻫﻮ ﻣﺎ ﯾﺤﺪد ﺳﺮﻋﺔ اﻟﺤﺮﻛﺔ ﻟﻠﻔﯿﻠﻢ‪ .‬ﻓﻤﺜﻼً ﻣﺸﻬﺪ اﻟﺴﯿﺎرة اﻟﻤﺴﺮﻋﺔ ﻫﻮ‬
‫ﻣﺠﺮد ﻣﺠﻤﻮﻋﺔ ﻣﻦ اﻟﺼﻮر اﻟﺜﺎﺑﺘﺔ ﻟﻬﺬه اﻟﺴﯿﺎرة ﻓﻲ ﻣﻮاﻗﻊ ﻣﺨﺘﻠﻔﺔ ﻋﻠﻰ اﻟﺸﺎﺷﺔ‪ .‬وﺑﻤﺎ أن ﻻﻓﺘﺎﺗﻨﺎ ﻫﻲ ﺷﻜﻞ ﻣﻦ‬
‫أﺷﻜﺎل اﻷﻓﻼم اﻟﻤﺘﺤﺮﻛﺔ ﻓﺈن ﻫﺬا اﻟﻤﺒﺪأ ﯾﺴﺮي ﻋﻠﯿﻬﺎ أﯾﻀﺎً‪ ...‬إﻟﻰ ﻫﻨﺎ واﻧﺘﻬﺖ اﻟﻘﺼﺔ !‬

‫واﻵن إﻟﯿﻚ اﻟﺨﺼﺎﺋﺺ‪:‬‬

‫‪ :SCROLLAMOUNT‬ﻫﺬه اﻟﺨﺎﺻﯿﺔ ﺗﺤﺪد اﻟﻤﺴﺎﻓﺔ ﺑﯿﻦ ﻛﻞ ﻟﻘﻄﺔ وأﺧﺮى ﻟﻠﻨﺺ وﻫﻲ ﺗﺄﺧﺬ ﻗﯿﻤﺎً ﻋﺪدﯾﺔ‬
‫ﺻﺤﯿﺤﺔ ﺗﺤﺪد اﻟﻤﺴﺎﻓﺔ اﻟﻤﻘﻄﻮﻋﺔ ﺑﺎﻟﺒﯿﻜﺴﻞ )أﻋﺮف أﻧﻬﺎ ﺻﻌﺒﺔ ﻗﻠﯿﻼً ﻟﻜﻦ ﻻ ﺑﺄس ﺳﺄوﺿﺤﻬﺎ ﺑﺎﻷﻣﺜﻠﺔ(‪.‬‬

‫>‪<MARQUEE SCROLLAMOUNT="1"> HTML </MARQUEE‬‬

‫‪HTML‬‬

‫>‪<MARQUEE SCROLLAMOUNT="50"> HTML </MARQUEE‬‬

‫‪HTML‬‬

‫>‪<MARQUEE SCROLLAMOUNT="100"> HTML </MARQUEE‬‬

‫‪HTML‬‬

‫>‪<MARQUEE SCROLLAMOUNT="200"> HTML </MARQUEE‬‬

‫‪HTML‬‬

‫ﻓﻲ اﻟﺤﺎﻟﺔ اﻷوﻟﻰ ﻓﺈن اﻟﻤﺴﺎﻓﺔ اﻟﺘﻲ ﺗﻘﻄﻌﻬﺎ ﻛﻠﻤﺔ ‪ HTML‬ﻓﻲ ﻛﻞ ﺣﺮﻛﺔ ﻟﻬﺎ ﻫﻲ ‪ ١‬ﺑﯿﻜﺴﻞ‪ .‬أﻣﺎ ﻓﻲ اﻟﻤﺜﺎل اﻟﺜﺎﻧﻲ‬
‫ﻓﺎﻟﻤﺴﺎﻓﺔ ﻫﻲ ‪ ٥٠‬ﺑﯿﻜﺴﻞ أي أن اﻟﻜﻠﻤﺔ ﺗﻘﻔﺰ ‪ ٥٠‬ﺑﯿﻜﺴﻞ ﻓﻲ ﻛﻞ ﺧﻄﻮة )أو ﻟﻘﻄﺔ( ﺑﻤﺎ ﯾﺴﺎوي ‪ ٥٠‬ﺿﻌﻔﺎً ﻋﻦ اﻟﻤﺜﺎل‬
‫اﻟﺴﺎﺑﻖ وﻫﺬا ﻣﺎ ﯾﻌﻄﻲ اﻹﻧﻄﺒﺎع ﺑﺎﻟﺴﺮﻋﺔ‪ ،‬وﻫﻜﺬا اﻷﻣﺮ ﻟﻠﻤﺜﺎﻟﯿﻦ اﻟﻼﺣﻘﯿﻦ وﻫﻤﺎ ‪ ١٠٠‬و ‪ ٢٠٠‬ﺑﯿﻜﺴﻞ ﻋﻠﻰ‬
‫اﻟﺘﻮاﻟﻲ‪.‬‬

‫‪ :SCROLLDELAY‬ﻟﻜﻲ ﻧﺤﺪد اﻟﺰﻣﻦ اﻟﺬي ﯾﺴﺘﻐﺮﻗﻪ اﻟﻨﺺ ﻓﻲ اﻟﻘﻔﺰ ﺑﯿﻦ ﻛﻞ ﺧﻄﻮة وأﺧﺮى ﻧﺴﺘﺨﺪم ﻫﺬه‬
‫اﻟﺨﺎﺻﯿﺔ‪ ،‬واﻟﻘﯿﻤﺔ اﻟﻤﻌﻄﺎه ﻣﻊ ﻫﺬه اﻟﺨﺎﺻﯿﺔ ﺗﻤﺜﻞ اﻟﺰﻣﻦ ﺑﺎﻟﻤﯿﻠﻲ ﺛﺎﻧﯿﺔ )‪ ٠٫٠٠١‬ﻣﻦ اﻟﺜﺎﻧﯿﺔ(‬
‫ﺳﻮف أﺳﺘﺨﺪم ﻧﻔﺲ اﻷﻣﺜﻠﺔ اﻟﺴﺎﺑﻘﺔ ﻣﻊ ﻫﺬه اﻟﺨﺎﺻﯿﺔ ﻟﻨﻘﺎرن ﺑﯿﻦ اﻟﻨﺘﺎﺋﺞ ﻓﻲ اﻟﺤﺎﻟﺘﯿﻦ‪:‬‬

‫>‪<MARQUEE SCROLLAMOUNT="1" SCROLLDELAY="500"> HTML </MARQUEE‬‬

‫‪HTML‬‬
‫>‪<MARQUEE SCROLLAMOUNT="50" SCROLLDELAY="500"> HTML </MARQUEE‬‬

‫‪HTML‬‬
‫>‪<MARQUEE SCROLLAMOUNT="100" SCROLLDELAY="500"> HTML </MARQUEE‬‬

‫‪HTML‬‬
‫>‪<MARQUEE SCROLLAMOUNT="200" SCROLLDELAY="500"> HTML </MARQUEE‬‬

‫‪HTML‬‬
 ‫ﻟﻘﺪ أﺳﻨﺪت اﻟﻘﯿﻤﺔ ‪ ٥٠٠‬ﻟﻬﺬه اﻟﺨﺎﺻﯿﺔ ﻓﻲ ﺟﻤﯿﻊ اﻷﻣﺜﻠﺔ وﻫﻲ ﺗﻌﻨﻲ أن ﻫﻨﺎك ﻓﺘﺮة ﻧﺼﻒ ﺛﺎﻧﯿﺔ )ﺑﺎﻟﺘﻤﺎم واﻟﻜﻤﺎل(‬
‫ﺗﻔﺼﻞ ﺑﯿﻦ ﻛﻞ ﺧﻄﻮة وأﺧﺮى ﻟﻠﻜﻠﻤﺔ‪ .‬وأﻋﺘﻘﺪ أن ﻣﺎ ﺗﺮاه اﻵن ﯾﻮﺿﺢ ﻟﻚ ﻣﺒﺪأ ﻋﻤﻞ اﻟﺨﺎﺻﯿﺔ اﻟﺴﺎﺑﻘﺔ أﯾﻀﺎً‪.‬‬
‫وﺑﺎﻟﻤﻨﺎﺳﺒﺔ‪ ،‬ﻗﺪ ﺗﻀﻄﺮ ﻟﻺﻧﺘﻈﺎر دﻫﺮاً ﻛﺎﻣﻼً ﻟﻜﻲ ﺗﺮى اﻟﻨﺺ ﻓﻲ اﻟﻤﺜﺎل اﻷول‪.‬‬

‫ﻣﺎ رأﯾﻚ اﻵن ﻟﻮ ﻧﻠﻐﻲ اﻟﺨﺎﺻﯿﺔ ‪ SCROLLAMOUNT‬ﻟﻨﺮى ﻛﯿﻒ ﺗﻌﻤﻞ ‪ SCROLLDELAY‬ﻟﻮﺣﺪﻫﺎ‬

‫>‪<MARQUEE SCROLLDELAY="500"> HTML </MARQUEE‬‬

‫‪HTML‬‬

‫ﻣﻼﺣﻈﺔ أﺧﯿﺮه‬
‫أن اﻟﻨﺺ اﻟﺬي ﺗﻀﻊ ﻓﻲ وﺳﻢ ‪ Marquee‬ﻟﯿﺲ ﻧﺺ ﺛﺎﺑﺖ ﻻ ﺗﺴﻄﯿﻊ أن ﺗﻐﯿﯿﺮ ﻓﻲ ﺧﻮاﺻﻪ ﻟﻜﻦ ﺗﺴﺘﻄﯿﻊ أن‬
‫ﺗﺠﻌﻠﻪ وﺻﻠﻪ ﺗﺸﻌﺒﯿﻪ و أن ﺗﺪرج داﺧﻠﻪ ﺻﻮرة أﯾﻀﺎ ﻛﻤﺎ ﻫﻮ اﻟﺤﺎل ﻓﻲ اﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‬

‫أﺿﻐﻂ ﻋﻠﻲ أي وﺻﻠﻪ ﻟﻺﻧﺘﻘﺎل إﻟﻲ اﻟﺼﻔﺤﺔ‬

‫اﻟﺼﻮر‬

‫اﻟﺼﻮر ﺗﺴﺘﻄﯿﻊ اﻟﺼﻮر ان ﺗﻀﯿﻒ ﺷﻜﻞ ﺟﻤﺎﻟﻲ ﻋﻠﻲ ﺻﻔﺤﺎﺗﻚ و ﻫﻨﺎ ﯾﻈﻬﺮ ﻓﻦ اﻟﺮﺳﻢ ﻟﺪﯾﻚ ‪ (:‬و ﻣﺨﻄﻂ أﻟﻮاﻧﻚ‬
‫ﺳﯿﻀﻔﻲ ذﻟﻚ ﻟﻤﺴﻪ ﺟﻤﺎﻟﯿﻪ ﻓﻲ ﻣﻮﻗﻌﻚ‬

‫اﻟﺼﻮر واﻟﺮﺳﻮﻣﺎت‬
‫ﻛﯿﻔﯿﻪ ﻣﻌﺎﻟﺠﻪ ﺣﺠﻢ اﻟﺼﻮرة و إﺿﺎﻓﺔ اﻟﻬﻮاﻣﺶ و ﻣﻌﺮﻓﺔ اﻟﻮﺳﻢ ‪ ALT‬اﻟﻬﺎم ﺟﺪا‬

‫أﻧﻮاع اﻟﻤﻠﻔﺎت‬
‫‪ PNG،JPG ،GIF‬أي ﻣﻦ ﻫﺬه اﻟﺼﻮر ﺳﺘﺴﺘﻌﻤﻠﻬﺎ ﺳﺆال ﻫﺎم ﺟﺪا ﻋﻨﺪ ﺑﺪﺋﻚ اﻟﺘﻌﺎﻣﻞ ﻣﻊ اﻟﺼﻮر و ﺑﻌﺾ‬
‫اﻟﺨﺪع ﻟﻠﻤﺤﺘﺮﻓﯿﻦ وﻛﯿﻔﯿﻪ إﺳﺘﺨﺪاﻣﻬﺎ و ﻣﺎ ﻫﻲ ﻓﺎﺋﺪﺗﻬﺎ‬

‫اﻟﺼﻮرة ذات اﻟﺒﯿﻜﺴﻞ اﻟﻮاﺣﺪ‬

‫أﺳﺘﻌﻤﻞ ﻫﺬه اﻟﺼﻮر ﺑﺤﺮص ﺷﺪﯾﺪ ‪ ،‬ﻛﯿﻔﯿﻪ إﺳﺘﻌﻤﺎل اﻟﺼﻮر اﻟﺸﻔﺎﻓﻪ ‪ ،‬ﻗﻢ ﺑﻌﻤﻞ ﺗﺄﺛﯿﺮ ﻣﺰدوج ﻣﻔﯿﺪ‬

‫‪Thumbnails‬‬
 ‫ﺗﻌﻠّﻢ ﻛﯿﻒ ﺗﺠﻌﻞ ﺻﻮر ﺻﻐﯿﺮة ﺗﻜﻮن وﺻﻠﻪ إﻟﻰ اﻟﺼﻮر اﻷﻛﺒﺮ‪،‬أﻓﻌﻠﻬﺎ اﻵن‪.‬‬

‫ﺧﺮاﺋﻂ اﻟﺼﻮر‬
‫ﻛﯿﻔﯿﻪ ﺗﺨﻄﯿﻂ اﻟﺼﻮرة اﻟﻮاﺣﺪه ﻟﻜﻲ ﺗﺮﺑﻂ ﺑﺎﻟﻌﺪﯾﺪ ﻣﻦ اﻷﻣﺎﻛﻦ اﻟﻤﺨﺘﻠﻔﺔ‬

‫اﻟﻮﺳﺎﺋﻂ اﻟﻤﺘﻌﺪدة‬
‫ﺑﻮاﺳﻄﻪ ﺑﻌﺾ اﻟﻮﺳﻮم اﻟﺒﺴﯿﻄﻪ ﯾﻤﻜﻦ أن ﺗﻀﻊ وﺳﺎﺋﻂ ﻣﺘﻌﺪده ﻣﺜﻞ اﻷﺻﻮات واﻟﻔﯿﺪﯾﻮ و ﺣﺘﻲ اﻟﻔﻼﺷﺎت ﻓﻲ‬
‫ﺻﻔﺤﺎﺗﻚ‬

‫أﺳﻤﺎء اﻷﻟﻮان‬
‫اأﺳﻤﺎء اﻷﻟﻮان اﻟﻤﺴﺘﻌﻤﻠﻪ ﻣﻊ اﻟﻤﺘﺼﻔﺤﺎت‬

‫‪٢١٦‬ﻛﻮد ﻟﻸﻟﻮان‬
‫‪ ٢١٦‬ﻛﻮد ﻣﺨﺘﻠﻒ ﻟﻸﻟﻮان ‪ HEX‬ﻛﻮد أﯾﻀﺎ ﺗﺴﺘﻌﻤﻠﻬﺎ اﻟﻤﺘﺼﻔﺤﺎت ) ﻟﻠﻤﺤﺘﺮﻓﯿﻦ ﻓﻘﻂ(‬

‫ﻣﻜﻌﺐ اﻷﻟﻮان‬
‫أدﺧﻞ ﻟﻜﻲ ﺗﺠﺪ اﻟﻠﻮن اﻟﺬي ﺗﻔﻀﻠﻪ‬

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

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] اﻟﻌﺮض واﻹرﺗﻔﺎع | ﻓﻮاﺋﺪه | ‪ | ALT‬اﻟﻬﻮاﻣﺶ [‬

‫ﻓﻲ اﻟﺒﺪاﯾﻪ ﯾﺠﺐ أن ﺗﺮاﺟﻊ ﻛﯿﻔﯿﻪ إدراج ﺻﻮرة ﻣﻦ أﺳﺎﺳﯿﺎت إدراج اﻟﺼﻮر‬
‫اﻟﻌﺮض واﻹرﺗﻔﺎع‬
‫إن اﻷﺑﻌﺎد اﻷﺳﺎﺳﯿﺔ ﻷي ﺻﻮرة ﯾﻤﺜﻞ أﻣﺮ ﻫﺎم ﺟﺪا ﻹدراج ﺻﻮرة ﻓﻲ ﺻﻔﺤﺘﻚ وﻟﻜﻦ ﻫﻞ ﻧﺴﺘﻄﯿﻊ أن ﻧﺘﺤﻜﻢ أﯾﻀﺎً‬
‫ﻓﻲ إﻇﻬﺎر اﻟﺼﻮرة ﺑﺎﻟﺤﺠﻢ اﻟﺬي ﻧﺮﯾﺪه؟!!! و اﻹﺟﺎﺑﻪ ﻧﻌﻢ ‪ .‬ﻛﯿﻒ؟ ﻣﻦ ﺧﻼل ﻫﺬا اﻟﻮﺳﻢ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺼﺎﺋﺺ‬
‫‪ WIDTH ،HEIGHT‬ﻣﺘﺒﻮﻋﺔ ﺑﺄرﻗﺎم ﺗﻤﺜﻞ اﻹرﺗﻔﺎع واﻟﻌﺮض اﻟﻤﻄﻠﻮﺑﯿﻦ‪ .‬وﯾﻜﻮن اﻟﻮﺳﻢ ﺑﻬﺬا اﻟﺸﻜﻞ‬

‫>"‪<IMG SRC="l.gif" HEIGHT="3" WIDTH="500‬‬

‫وﻟﻠﺘﻮﺿﯿﺢ إﻟﯿﻚ ﻫﺬا اﻟﻤﺜﺎل‬

‫>"‪<img src="images/a.gif" width="200" height="94‬‬

 ‫ﻻﺣﻆ اﻟﻔﺮق إذا ﻗﻤﻨﺎ ﺑﺘﻐﯿﯿﺮ اﻹرﺗﻔﺎع و اﻟﻄﻮل‬

‫>"‪<img src="images/a.gif" width="400" height="200‬‬

‫ﻣﺎ ﻫﻲ اﻟﻔﻮاﺋﺪ اﻟﺘﻲ ﺗﻌﻮد ﻣﻦ ﻛﺘﺎﺑﻪ اﻹرﺗﻔﺎع و اﻟﻌﺮض اﻟﺼﺤﯿﺢ‬

‫ﯾﻤﻨﻊ ﻓﻮﺿﻲ اﻟﺘﺤﻤﯿﻞ اﻟﺨﺎﻃﺊ ﻟﺼﻔﺤﺘﻚ‬ ‫•‬

‫ﺻﻔﺤﺘﻚ ﺗﺒﺪو ﻓﻲ اﻟﺘﺤﻤﯿﻞ أﺳﺮع وﻛﻞ ﺷﻲء ﻓﻲ اﻟﻤﻜﺎن اﻟﺼﺤﯿﺢ‬ ‫•‬

‫إذا ﻟﻢ ﯾﺴﺘﻄﯿﻊ اﻟﺰاﺋﺮ روﺋﯿﺔ اﻟﺼﻮرة ﻓﺴﯿﻈﻬﺮ ﻟﻪ إﻃﺎر ﺑﺤﺠﻤﻬﺎ اﻟﺼﺤﯿﺢ‬ ‫•‬

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

‫‪<IMG SRC="bearbig.gif" ALT="A lovely bear‬‬ ‫>"دب ﲨﯿﻞ‬

‫ﻫﻮاﻣﺶ اﻟﺼﻮرة ‪margins Image‬‬

‫ﻟﺘﺤﺪﯾﺪ اﻟﻤﺴﺎﻓﺔ اﻟﻔﺎﺻﻠﺔ ﺑﯿﻦ اﻟﺼﻮرة وﺑﯿﻦ اﻟﻨﺺ اﻟﺬي ﯾﺠﺎورﻫﺎ‪ .‬ﻧﺴﺘﺨﺪم ﻟﺬﻟﻚ اﻟﺨﺼﺎﺋﺺ اﻟﺘﺎﻟﯿﺔ‪:‬‬
 ‫‪ :VSPACE‬ﻟﺘﺤﺪﯾﺪ اﻟﻤﺴﺎﻓﺔ اﻟﻌﻤﻮدﯾﺔ اﻟﻔﺎﺻﻠﺔ ﺑﯿﻦ اﻟﻨﺺ واﻟﺤﺎﻓﺘﯿﻦ اﻟﻌﻠﯿﺎ واﻟﺴﻔﻠﻰ ﻟﻠﺼﻮرة‪.‬‬
‫‪ :HSPACE‬ﻟﺘﺤﺪﯾﺪ اﻟﻤﺴﺎﻓﺔ اﻷﻓﻘﯿﺔ اﻟﻔﺎﺻﻠﺔ ﺑﯿﻦ اﻟﻨﺺ واﻟﺤﺎﻓﺘﯿﻦ اﻟﯿﻤﻨﻰ واﻟﯿﺴﺮى ﻟﻠﺼﻮرة‪.‬‬
‫وﺗﻜﻮن ﺻﯿﻐﺔ اﻟﻮﺳﻢ ﺑﻬﺬا اﻟﺸﻜﻞ‬

‫>"‪<IMG SRC="go.gif" HSPACE="10" VSPACE="10‬‬

‫وإﻟﯿﻚ ﻫﺬا اﻟﻤﺜﺎل ﺗﺮي اﻵن اﻟﺼﻮرة اﻟﺘﻲ ﻓﻲ ﯾﻤﯿﻦ اﻟﻜﻼم ﻓﺎﻟﺸﻔﺮة اﻟﺘﻲ ﻣﻮﺟﻮدة‬
‫ﺑﺄﻋﻠﻲ أدرﺟﺖ اﻟﺼﻮرة اﻟﻤﺴﻤﺎه ‪ go.gif‬ﻣﻊ ﻣﺤﺎذاﺗﻬﺎ ﻟﯿﻤﯿﻦ اﻟﺼﻔﺤﺔ وإﺿﺎﻓﺔ‬
‫ﻣﺴﺎﻓﺔ ﻓﺎرﻏﺔ ﻣﻘﺪارﻫﺎ ‪ ١٠‬ﺑﯿﻜﺴﻞ ﻋﻠﻰ اﻟﺠﻬﺎت اﻷرﺑﻌﺔ ﻛﻤﺎ ﺗﺮى‪) .‬إذا ﻟﻢ ﺗﻜﻦ‬
‫ﺗﻌﺮف ﻣﺎ ﻫﻮ اﻟﺒﯿﻜﺴﻞ ﺳﺄﺷﺮﺣﺔ ﻟﻚ ﻓﻲ اﻟﺪرس اﻟﻘﺎدم إﻧﺸﺎء اﷲ)‬

‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬

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

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] ‪[JPEG | GIF | PNG | PIXEL‬‬

‫ﻫﻞ ﺣﺎوﻟﺖ أن ﺗﺘﻌﺮف ﻋﻠﻰ أﻧﻮاع اﻟﻤﻠﻔﺎت اﻟﺮﺳﻮﻣﯿﺔ اﻟﺘﻲ ﺗﻘﻮم ﺑﺘﺤﻤﯿﻠﻬﺎ ﺧﻼل ﺗﺼﻔﺤﻚ ﻟﻤﻮاﻗﻊ اﻹﻧﺘﺮﻧﺖ؟‬
‫ﯾﺰﺧﺮ ﻋﺎﻟﻢ اﻟﻜﻤﺒﯿﻮﺗﺮ ﺑﺎﻟﻌﺸﺮات ﻣﻦ أﻧﻮاع اﻟﻤﻠﻔﺎت اﻟﺮﺳﻮﻣﯿﺔ وﺗﻨﺴﯿﻘﺎت اﻟﺼﻮر‪ .‬وﻛﻞ ﻣﻨﻬﺎ ﯾﺨﺘﻠﻒ ﻋﻦ ﻏﯿﺮه ﻣﻦ‬
‫ﻋﺪة ﻧﻮاح‪ ،‬أذﻛﺮ ﻟﻚ ﻣﻨﻬﺎ‪ :‬اﻟﺪﻗﺔ‪ ،‬وﻋﺪد اﻷﻟﻮان اﻟﺘﻲ ﯾﺴﺘﻮﻋﺒﻬﺎ‪ ،‬واﻟﺤﺠﻢ اﻟﺘﺨﺰﯾﻨﻲ ﻟﻠﻤﻠﻒ‪ .‬ﻟﻜﻦ ﻫﻨﺎك ﻧﻮﻋﯿﻦ ﻓﻘﻂ‬
‫ﻣﻦ ﻫﺬه اﻟﻤﻠﻔﺎت ﯾﺘﻢ ﺗﺪاوﻟﻬﻤﺎ ﺣﺎﻟﯿﺎً ﻓﻲ اﻹﻧﺘﺮﻧﺖ وﻫﻤﺎ‪ JPEG:‬و ‪GIF‬‬
‫‪JPEG ،JPG‬‬
‫إﺧﺘﺼﺎر‪ .Joint Photographic Experts Group‬وﯾﺪﻋﻢ ﻫﺬا اﻟﺘﻨﺴﯿﻖ ﺻﻮراً ﺑﻌﯿﺎر ‪ ٢٤‬ﺑﺖ )أي‬
‫‪ ١٦٫٧‬ﻣﻠﯿﻮن ﻟﻮن(‪ .‬وﻣﯿﺰة ﻫﺬا اﻟﺘﻨﺴﯿﻖ ﺗﺘﻤﺜﻞ ﻓﻲ إﻣﻜﺎﻧﯿﺔ ﺿﻐﻂ اﻟﺼﻮر ﺑﻨﺴﺐ ﻣﺨﺘﻠﻔﺔ ﻋﻨﺪ ﺗﺨﺰﯾﻨﻬﺎ وﺑﺎﻟﺘﺎﻟﻲ‬
‫اﻟﺤﺼﻮل ﻋﻠﻰ ﺻﻮر ﺻﻐﯿﺮة اﻟﺤﺠﻢ ﻧﺴﺒﯿﺎً‪).‬أﻋﻨﻲ ﻫﻨﺎ ﺣﺠﻢ اﻟﺘﺨﺰﯾﻦ ﺑﺎﻟﻜﯿﻠﻮﺑﺎﯾﺘﺎت وﻟﯿﺲ أﺑﻌﺎد اﻟﺼﻮرة(‪ .‬ﻟﻜﻦ‬
‫ﺑﺎﻟﻤﻘﺎﺑﻞ ﻛﻠﻤﺎ إزدادت ﻧﺴﺒﺔ اﻟﻀﻐﻂ وﺻﻐﺮ ﺣﺠﻢ اﻟﻤﻠﻒ ﻛﺎن ذﻟﻚ ﻋﻠﻰ ﺣﺴﺎب اﻟﺠﻮدة واﻟﻮﺿﻮح‪ .‬و إﻟﯿﻚ ﻫﺬا‬
‫اﻟﻤﺜﺎل اﻟﺘﻮﺿﯿﺤﻲ‬
 ‫‪GIF‬‬
‫إﺧﺘﺼﺎر ‪ Graphical Interchange Format‬وأﻗﺼﻰ ﻋﺪد ﻟﻸﻟﻮان ﻓﻲ ﻫﺬا اﻟﺘﻨﺴﯿﻖ ﻫﻮ ‪ ٢٦٥‬ﻟﻮن‪.‬‬
‫وﻣﻊ ذﻟﻚ ﻓﺈن أﺣﺠﺎم اﻟﺼﻮر اﻟﻤﺨﺰﻧﺔ ﺑﻪ ﻛﺒﯿﺮ ﻧﺴﺒﯿﺎً ﻣﻘﺎرﻧﺔ ﺑﺘﻨﺴﯿﻖ ‪ .JPG‬ﻟﻜﻦ ﻫﻨﺎك ﻣﺰاﯾﺎ راﺋﻌﺔ ﯾﻨﻔﺮد ﺑﻬﺎ‬
‫ﺗﻨﺴﯿﻖ ‪ GIF‬ﻣﻤﺎ ﯾﺴﺘﺪﻋﻲ اﺳﺘﺨﺪاﻣﻪ ﻓﻲ ﺻﻔﺤﺎت اﻟﻮﯾﺐ‪ ،‬أوﻟﻬﺎ اﻟﻘﺪرة ﻋﻠﻰ ﺗﺨﺰﯾﻦ ﺻﻮر ﺑﺨﻠﻔﯿﺎت ﺷﻔﺎﻓﺔ‬
‫‪ Transparent Images‬وﺛﺎﻧﯿﻬﺎ اﻟﺼﻮر اﻟﻤﺘﺤﺮﻛﺔ ‪Gifs Animated‬‬
‫وﺗﺠﺪ ﻣﻌﻠﻮﻣﺎت واﻓﯿﺔ ودروﺳﺎً ﻣﻔﺼﻠﺔ ﺣﻮل ﻫﺬه اﻟﻤﻮاﺿﯿﻊ ﺿﻤﻦ دروس « ‪ .Paint Shop Pro‬وإﻟﯿﻚ ﻫﺬا‬
‫اﻟﻤﺜﺎل‬

‫‪http://www.yourhtmlsource.comBig Thanks For‬‬

‫واﻵن ﻗﺪ ﺗﺴﺄل‪ ،‬أي ﻣﻦ ﻫﺬﯾﻦ اﻟﺘﻨﺴﯿﻘﯿﻦ أﺳﺘﺨﺪم ﻓﻲ ﺻﻔﺤﺎﺗﻲ؟! ﻻ ﯾﻮﺟﺪ ﺟﻮاب ﻗﻄﻌﻲ ﻟﻬﺬا اﻟﺴﺆال ﻟﻜﻦ إﻟﯿﻚ‬
‫ﻫﺎﺗﯿﻦ اﻟﻤﻌﺎدﻟﺘﯿﻦ‪:‬‬
‫‪ =JPG‬اﻟﺼﻮر اﻟﺤﻘﯿﻘﯿﺔ ذات اﻟﻌﺪد اﻟﻜﺒﯿﺮ ﻣﻦ اﻷﻟﻮان‪ ،‬وذات اﻷﺑﻌﺎد اﻟﻜﺒﯿﺮة‬
‫‪ =GIF‬اﻟﺼﻮر ﻗﻠﯿﻠﺔ اﻷﻟﻮان وﺻﻐﯿﺮة اﻷﺑﻌﺎد ﻣﺜﻞ اﻷزرار‪.‬‬
‫وﻟﻬﺬا أﺳﺘﺨﺪم ‪ JPEG‬ﻟﻠﺼﻮر اﻟﻜﺒﯿﺮة أﻣﺎ ال‪ GIF‬ﻓﺈﺳﺘﺨﺪﻣﻬﺎ ﻟﺒﺎﻗﻲ اﻷﺷﯿﺎء‬

‫‪PNG‬‬
 ‫إﺧﺘﺼﺎر ‪ Portable Network Graphics‬وﻫﻮ ﻧﻮع ﺟﯿﺪ إﺑﺘﻜﺮ ﺧﺼﯿﺼﺎ ﻣﻦ أﺟﻞ اﻟﻤﻮاﻗﻊ ‪ Web‬ﻟﯿﻬﯿﻤﻦ‬
‫ﻋﻠﻲ اﻟﻨﻮﻋﯿﻦ اﻟﺴﺎﺑﻘﯿﻦ ﻓﻠﺪﯾﻪ أﻓﻀﻞ ﻣﻤﯿﺰات اﻟﻨﻮﻋﯿﻦ اﻟﺴﺎﺑﻘﯿﻦ و أﻗﻞ ﻋﯿﻮب ﻋﻨﻬﻢ أﯾﻀﺎ ﻓﻤﻤﯿﺰاﺗﻪ ‪ -:‬ﻫﻲ اﻟﺸﻔﺎﻓﯿﻪ‬
‫‪ Transparent‬و أﻟﻮان ذات درﺟﺔ وﺿﻮح ﻋﺎﻟﯿﻪ و ﻗﻨﻮات أﻟﻔﺎ )ﻻ أﻋﺮف ﻣﺎ ﻫﻲ( وأﻓﻀﻞ ﻣﻦ ﺿﻐﻂ‬
‫ال‪ JPEG‬وﺗﺴﺘﻄﯿﻊ أن ﺗﻀﻊ ﻣﻌﻬﺎ اﻟﻤﻌﻠﻮﻣﺎت اﻟﺨﺎﺻﻪ ﺑﻚ ﺣﺘﻲ ﻻ ﺗﺴﺮق اﻟﺼﻮر اﻟﺨﺎص ﺑﻚ ﻣﻦ ﻗﺒﻞ اﻟﻐﯿﺮ ‪،‬‬
‫ﻛﻞ ﺷﻲء ﺟﯿﺪ ﺑﻞ ﻓﻮق اﻟﺠﯿﺪ وﻟﻜﻦ ﻫﻨﺎك ﻣﺸﻜﻠﻪ واﺣﺪه ﺣﺘﻰ ﻫﺬه اﻟﻠﺤﻈﻪ ﻫﻲ أن ﻫﺬا اﻟﻨﻮع ﯾﺪﻋﻢ ﻣﻦ ﻗﺒﻞ اﻟـ ‪IE5‬‬
‫و ﻻ ﯾﺪﻋﻤﻪ اﻟـ ‪ Netscape4‬وﻟﻦ ﯾﻌﻤﻞ ﻫﺬا اﻟﻨﻮع ﻣﻊ اﻟﻤﺴﺘﻌﺮﺿﺎت اﻟﻘﺪﯾﻤﺔ وﻟﻜﻦ ﻓﻲ اﻹﺻﺪارات اﻟﻘﺎدﻣﺔ ﻟﻠـ‬
‫‪ IE6‬و اﻟـ ‪ Netscape7‬ﺳﻨﺠﺪ ﺳﯿﻞ ﻣﻦ ﺻﻮر ﻣﻦ ﻫﺬا اﻟﻨﻮع ‪PNG‬‬

‫ﺗﻌﺮﯾﻒ اﻟـ ‪Pixel‬‬

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

‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬

‫اﻟﺼﻮرة ذات اﻟﺒﯿﻜﺴﻞ اﻟﻮاﺣﺪ‬

‫ﻓﻲ اﻟﺒﺪاﯾﻪ ﻧﺴﺄﻟﻚ ﺳﺆال ﻫﻞ ﺗﺮي ﻫﺬا اﻟﺨﻂ اﻷزرق ﺑﺄﻋﻠﻲ أﻧﻪ ﯾﺒﺪوا ﻛﺎ ﻣﺴﻄﺮة أﻓﻘﯿﻪ أو وﺳﻢ >‪ <HR‬أﻟﯿﺲ ﻛﺬﻟﻚ‬
‫؟ ﻃﺒﻌﺎ ﻻ ﻓﻬﺬا اﻟﺨﻂ ﯾﺴﻤﻲ اﻟﺼﻮرة ذات اﻟﺒﯿﻜﺴﻞ اﻟﻮﺣﯿﺪ و ﻗﺒﻞ أن ﻧﺘﻌﺮف ﻋﻠﻲ ﻣﻌﻨﻲ ﻫﺬا اﻟﻜﻼم ﻧﺮﯾﺪ أن ﻧﻌﺮﻓﻚ‬
‫ﺑﻮﺳﻢ>‪<HR‬‬

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] >‪ | <HR‬اﻟﺼﻮرة ذات اﻟﺒﯿﻜﺴﻞ اﻟﻮاﺣﺪ | ﻟﻤﺎذا؟ | اﻟﺼﻮرة اﻟﺨﻔﯿﻪ [‬

‫>‪ <HR‬اﻟﻤﺴﻄﺮة اﻷﻓﻘﯿﻪ‬

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

‫>‪<HR‬‬

‫ﻓﯿﻄﻬﺮ ﻟﻚ ﻫﺬا اﻟﺨﻂ‬

‫ﻟﻜﻦ ﻫﺬا ﻟﯿﺲ ﻛﻞ ﺷﻲء‪ .‬ﻷﻧﻚ ﺗﺴﺘﻄﯿﻊ ﺗﺤﺪﯾﺪ ﺳُﻤﻚ ﻫﺬا اﻟﺨﻂ إذا أﺿﻔﺖ ﻟﻪ اﻟﺨﺎﺻﯿﺔ ‪ SIZE‬وأﺗﺒﻌﺘﻬﺎ ﺑﺮﻗﻢ ﯾﻤﺜﻞ‬
‫ﻫﺬا اﻟﺴُﻤﻚ ﻣﺜﻼً و إﻟﯿﻚ اﻷﻣﺜﻠﻪ وﺧﻠﻔﻬﺎ اﻟﻨﺘﺎﺋﺞ‪:‬‬
‫>"‪<HR SIZE="5‬‬

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

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

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

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

‫>"‪<HR WIDTH="400‬‬

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

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

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

‫>"‪<HR WIDTH="400" ALIGN="left‬‬

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

‫وﻛﻤﺎ ﺗﻼﺣﻆ ﻓﺈن ﻫﺬا اﻟﺨﻂ ﯾﻜﺘﺴﺐ ﻣﻈﻬﺮاً ﻏﺎﺋﺮاً ﺛﻼﺛﻲ اﻷﺑﻌﺎد وإذا أردت ﺧﻄﺎً ﻋﺎدﯾﺎً ﻏﯿﺮ ﻏﺎﺋﺮ ﻓﻘﻢ ﺑﺈﺿﺎﻓﺔ‬
‫اﻟﺨﺎﺻﯿﺔ ‪) NOSHADE‬أي ﺑﺪون ﻇﻞ(‬
‫>‪<HR SIZE="5" WIDTH="60%" ALIGN="center" NOSHADE‬‬

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

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

‫و اﻵن ﻧﺮﺟﻊ إﻟﻲ ﻣﻮﺿﻌﻨﺎ اﻟﺼﻮرة ذات اﻟﺒﯿﻜﺴﻞ اﻟﻮاﺣﺪ ‪Image Single Pixel‬‬
‫ﻟﻘﺪ ﺳﺄﻟﺘﻚ ﻋﻦ اﻟﺨﻂ اﻷزرق اﻟﻤﻮﺟﻮد ﻓﻲ أول اﻟﺼﻔﺤﺔ ﻓﻲ اﻟﺤﻘﯿﻘﻪ ﻫﺬا ﻟﯿﺲ ﺧﻄﺎ أو اﻟﻮﺳﻢ >‪ <HR‬أﻧﻪ اﻟﺼﻮرة‬
‫ﻣﻦ ﺑﯿﻜﺴﻞ واﺣﺪ !!!! ﻟﻜﻦ ﻛﯿﻒ أﺳﺘﻄﯿﻊ أن أﺻﻨﻊ ﻣﺜﻞ ﻫﺬه اﻟﺼﻮرة ﻓﻲ ﻫﺬه اﻟﺤﺎﻟﻪ ﯾﻠﺰﻣﻚ ﺑﺮﻧﺎﻣﺞ رﺳﻮﻣﺎت ﻛﺎ «‬

‫‪ Paint Shop Pro‬ﻛﻞ ﻣﺎ ﻋﻠﯿﻚ ﻓﻌﻠﻪ ﻫﻮ أن ﺗﻨﺸﺄ ﺻﻮرة ﺟﺪﯾﺪ ﺑﻌﺮض وأرﺗﻔﺎع ‪ ١‬ﺑﯿﻜﺴﻞ ﺑﺄي ﻟﻮن ﻟﻠﺨﻠﻔﯿﻪ‬
‫ﺗﻔﻀﻠﻪ و ﻋﻨﺪ اﻷﻧﺘﻬﺎء ﻣﻦ اﻟﺼﻮرة ﺿﻌﻬﺎ ﻓﻲ ﺻﻔﺤﺘﻚ ﺑﻨﻔﺲ وﺳﻢ اﻟﺼﻮرة ﻋﻨﺪﻫﺎ ﺳﺘﻈﻬﺮ ﻟﻚ ﻛﻬﺬه ﻟﻜﻦ ﯾﺠﺐ‬
‫أن ﺗﻘﻮم ﺑﺒﻌﺾ اﻟﺘﻐﯿﯿﺮات ﻓﻲ ﺧﻮاص اﻹرﺗﻔﺎع و اﻟﻌﺮض و ﻋﻨﺪﻫﺎ ﺗﺴﺘﻄﯿﻊ أن ﺗﺴﺘﺨﺪم اﻟﺼﻮرة ﻛﺎ ﺧﻂ ﯾﻔﺼﻞ‬
‫ﺻﻔﺤﺎﺗﻚ أﯾﻀﺎ ﻛﺎﻵﺗﻲ‬

‫ﻛﻼﻣﻦ اﻟﺼﻮرﺗﯿﻦ اﻟﺴﺎﺑﻘﺘﯿﻦ ﺻﻮرة واﺣﺪه ﻓﻘﻂ ﻗﻤﻨﺎ ﺑﺎﻟﺘﻐﯿﯿﺮ ﻓﻲ اﻟﻌﺮض واﻹرﺗﻔﺎع وإﻟﯿﻚ اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺎﻟﺨﻂ‬
‫اﻟﻌﺮﯾﺾ‬

‫>"‪<IMG SRC="HR.gif" WIDTH="350" HEIGHT="10" ALT="---‬‬

‫ﻟﻤﺎذا؟‬
‫أﻋﺮف أﻧﻚ ﺗﺘﺴﺎﺋﻞ اﻵن ﻟﻤﺎذا أﻗﻮم ﺑﺈﺳﺘﻌﻤﻞ اﻟﺼﻮرة وﻟﺪي >‪ <HR‬؟ ﺑﺎﻟﻔﻌﻞ ﺳﺆال ﺟﯿﺪ ﻟﻜﻦ دﻋﻨﺎ ﻧﺘﺄﻣﻞ ﻗﻠﯿﻼ أن‬
‫اﻟﺼﻮرة ذات اﻟﺒﯿﻜﺴﻞ اﻟﻮاﺣﺪ ﺗﻜﻮن ﻣﺴﺎﺣﺘﻬﺎ ﺗﻘﺮﯾﺒﺎ ﺑﺎﻟﺒﯿﺖ أي ﻻ ﯾﺘﻌﺪي ‪ KB ١‬ﻛﯿﻠﻮﺑﺎﯾﺖ ﻓﻤﺜﻼ اﻟﺼﻮرة اﻟﺘﻲ‬
‫ﺑﺄﻋﻠﻲ ﻣﺴﺎﺣﺘﻬﺎ ‪ KB ٠٫٠٤٣‬ﻓﻲ ﺗﻜﻮن أﺳﺮع ﺑﻜﺜﯿﺮ ﻓﻲ ﺗﺤﻤﯿﻞ اﻟﺼﻔﺤﺔ ﻟﺪي اﻟﺰاﺋﺮ و ﻟﻜﻦ ﺑﻔﺮض أذا ﻗﻠﻨﺎ أن‬
‫>‪ <HR‬ﯾﻌﻤﻞ أﯾﻀﺎ ﻓﻲ اﻟﺼﻔﺤﺔ ﺳﺮﯾﻌﺎ ﻓﻨﻘﻮل أن اﻟـ >‪ <HR‬ﻻ ﯾﻌﻤﻞ ﻣﻊ ‪ Netscape‬و ﺳﯿﻌﻮد إﻟﻲ اﻟﻠﻮن‬
‫اﻟﺮﻣﺎدي اﻷﺳﺎﺳﻲ ﻓﻠﻬﺬا ﻟﻜﻲ ﺗﻘﻮم ﺑﺈﻧﺸﺎء ﺧﻂ ﻣﻠﻮن ﻣﻦ اﻟﻤﺴﺘﺤﺴﻦ إﺳﺘﻌﻤﺎل اﻟﺼﻮرة ذات اﻟﺒﯿﻜﺴﻞ اﻟﻮاﺣﺪ‬

‫اﻟﺼﻮرة اﻟﺨﻔﯿﻪ ؟!!‬

‫ﻷﻧﺸﺎء ﺻﻮرة ﺷﻔﺎﻓﻪ أﻣﺮ ﺳﻬﻞ و ﯾﻜﻮن ﺟﯿﺪ ﻓﻲ ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎﺗﻚ ﺣﯿﺚ أﻧﻚ ﺗﺴﺘﻄﯿﻊ أن ﺗﻨﺸﺄ ﻣﺜﻞ ﻫﺬه اﻟﺼﻮرة‬
‫ﺑﺤﯿﺚ أن ﺗﻜﻮن ﺻﻮرة ذات ﺑﯿﻜﺴﻞ واﺣﺪ ‪ ،‬و ﺗﺴﺘﺨﺪم ﻟﻮﺿﻊ ﻓﺮﻏﺎت‬
‫ﻓﻲ اﻟﺼﻔﺤﺔ دون أن ﺗﻀﺮ ﺑﺎﻟﺸﻜﻞ اﻟﻌﺎم‬
‫ﻓﺮﺿﺎ إذا أردﻧﺎ إﻧﺸﺎء ﻣﺴﺎﺣﺔ ﻓﺎرﻏﻪ ﻋﻠﻲ إﺣﺪي ﺟﺎﻧﺒﻲ اﻟﺼﻔﺤﺔ ذات‬
‫ﻋﺮض ‪ ٢٠٠‬وإرﺗﻔﺎع ‪ ١٠٠‬إﻧﻈﺮ إﻟﻲ اﻟﺠﻬﺔ اﻟﯿﻤﻨﻲ ﻣﻦ اﻟﺼﻔﺤﺔ ﺳﺘﺮي‬
 ‫ﻣﺎ أﻗﺼﺪ و ﻟﻬﺬا ﻻ ﯾﻮﺟﺪ ﻣﺸﻜﻠﺔ ﻣﻦ إﺳﺘﺨﺪام ﺻﻮرة ﺷﻔﺎﻓﻪ ذات ﺑﯿﻜﺴﻞ واﺣﺪ ) ﻛﻤﺎ ﯾﻤﻜﻦ أن ﺗﺠﻌﻞ ﺟﺰء ﻣﻦ‬
‫ﺧﻠﻔﯿﺘﻚ ذو وﺻﻠﻪ إﻟﻲ ﻣﻜﺎن أﺧﺮ ﻛﻤﺎ ﺗﺮي إﺿﻐﻂ ﻋﻠﻲ اﻟﺠﺎﻧﺐ اﻷﯾﻤﻦ ﻟﺘﺮي ﺑﻨﻔﺴﻚ‬

‫ﻣﻦ اﻟﻤﻤﻜﻦ وﺿﻊ ‪ BORDER‬ﻟﻠﺼﻮرة وﻟﯿﻜﻦ "‪ "٢‬ﺣﺘﻲ ﺗﺴﺘﻄﯿﻊ أن ﺗﺮي ﺣﺪودﻫﺎ و ﯾﺠﺐ ﻋﻠﯿﻚ اﻟﺘﺄﻛﺪ ﻣﻦ‬
‫أﻧﻚ ﻗﺪ ﻗﻤﺖ ﺑﺤﻔﻆ اﻟﺼﻮرة ‪ ) GIF‬راﺟﻊ أﻧﻮاع اﻟﺼﻮر واﻟﻤﻠﻔﺎت (‬

‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬

‫‪Thumbnails‬‬
‫ﻫﻞ ﺳﺒﻖ ﻟﻚ وأن ﺳﻤﻌﺖ ﺑﻤﺼﻄﻠﺢ ‪ Thumbnail‬ﺿﻤﻦ ﻣﺼﻄﻠﺤﺎت اﻹﻧﺘﺮﻧﺖ؟ ﺣﺴﻨﺎً‪ ،‬ﻻ ﺗﻠﺘﻔﺖ إﻟﻰ اﻟﺘﺮﺟﻤﺔ‬
‫اﻟﺤﺮﻓﯿﺔ ﻟﻬﺬه اﻟﻜﻠﻤﺔ‪ ،‬واﻟﺘﻲ ﺗﻌﻨﻲ "ﻇﻔﺮ اﻹﺑﻬﺎم"‪ .‬ﻓﺎﻟﻤﻘﺼﻮد ﺣﻘﯿﻘﺔً ﺑﻬﺎ ﻫﻲ ﺗﻠﻚ اﻟﺼﻮرة اﻟﺼﻐﯿﺮة ﺟﺪاً اﻟﺘﻲ ﺗﻘﻮم‬
‫ﺑﺎﻟﻨﻘﺮ ﻋﻠﯿﻬﺎ ﻓﺘﺆدي إﻟﻰ ﻋﺮض ﺻﻮرة ﺑﺤﺠﻢ أﻛﺒﺮ‪ .‬ﻟﺬﻟﻚ ﻗﺪ ﯾﻜﻮن اﻟﻤﺼﻄﻠﺢ اﻷﻧﺴﺐ ﻟﻮﺻﻔﻬﺎ ﻫﻮ "اﻟﻌﯿّﻨﺔ"‪.‬‬
‫)وإذا ﻛﻨﺖ ﻗﺪ زرت أﺣﺪ اﻟﻤﻮاﻗﻊ اﻹﺧﺒﺎرﯾﺔ ﻟﺮأﯾﺖ ﻛﯿﻒ ﯾﺘﻢ ﻋﺮض ﻋﯿﻨﺎت وﺻﻮر ﻣﺼﻐﺮة ﻟﻠﻘﻄﺎت اﻷﺣﺪاث‬
‫وﻋﻨﺪ اﻟﻨﻘﺮ ﻋﻠﻰ اﻟﻌﯿﻨﺔ ﺗﻈﻬﺮ اﻟﺼﻮرة اﻷﺻﻠﯿﺔ‪ .‬إذن أﻧﺖ ﻟﺴﺖ ﻣﺠﺒﺮاً ﻋﻠﻰ اﻹﻧﺘﻈﺎر ﻟﻮﻗﺖ ﻃﻮﯾﻞ ﻟﺤﯿﻦ ﻇﻬﻮر‬
‫ﺻﻮرة ذات ﺣﺠﻢ ﻛﺒﯿﺮ ﻟﻠﻘﻄﺔ ﻟﺴﺖ ﻣﻌﻨﯿﺎً ﺑﻬﺎ(‪.‬‬

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

‫أﻋﺮف ﻣﺎذا ﺳﺘﺴﺄل اﻵن‪ ،‬ﺳﺘﻘﻮل أﻟﻢ ﻧﺘﻌﻠﻢ ﻗﺒﻞ ﻗﻠﯿﻞ ﻛﯿﻔﯿﺔ ﻋﺮض اﻟﺼﻮر ﻣﻊ اﻟﺘﺤﻜﻢ ﺑﺄﺑﻌﺎدﻫﺎ؟ أﻻ ﯾﺆدي اﺳﺘﺨﺪام‬
‫اﻟﺨﺼﺎﺋﺺ ‪ WIDTH, HEIGHT‬إﻟﻰ اﻟﺘﺤﻜﻢ ﺑﺤﺠﻢ اﻟﺼﻮر وﻋﺮﺿﻬﺎ ﺑﻨﺴﺐ ﻣﺼﻐﺮة ﺣﺴﺐ ﻣﺎ ﻫﻮ‬
‫ﻣﻄﻠﻮب؟‬
‫إن اﺳﺘﺨﺪاﻣﻚ ﻟﻬﺬه اﻟﺨﺼﺎﺋﺺ ﯾﺆدي إﻟﻰ إﻇﻬﺎر اﻟﺼﻮرة ﺑﺤﯿﺚ ﺗﺒﺪو ﻣﺼﻐﺮة‪ ،‬ﻟﻜﻨﻚ ﻓﻌﻠﯿﺎً ﻗﻤﺖ ﺑﺈﺟﺒﺎر ﻣﺘﺼﻔﺢ‬
‫اﻟﺰاﺋﺮ ﻋﻠﻰ ﺗﺤﻤﯿﻞ اﻟﺼﻮرة ﺑﺎﻟﺤﺠﻢ واﻷﺑﻌﺎد اﻷﺻﻠﯿﺔ ﺛﻢ ﻋﺮﺿﻬﺎ ﺑﺎﻟﺤﺠﻢ اﻟﻤﺼﻐﺮ أي أﻧﻚ ﻓﻲ اﻟﻨﻬﺎﯾﺔ ﻟﻢ ﺗﺤﻘﻖ‬
‫اﻟﻐﺎﯾﺔ ﻣﻦ وﺟﻮد ﻫﺬه اﻟﻌﯿﻨﺎت‪.‬‬
‫اﻟﻬﺪف اﻷﺳﺎﺳﻲ ‪ -:‬ﻫﻮ ﻋﺮض ﺻﻔﺤﺔ ﻣﻠﯿﺌﻪ ﺑﺎﻟﺼﻮر اﻟﻤﺼﻐﺮة و ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﯿﻬﺎ ﺗﺤﺼﻞ ﻋﻠﯿﻬﺎ ﻣﻜﺒﺮة أو ﻓﻲ‬
‫ﺣﺠﻤﻬﺎ اﻟﻄﺒﯿﻌﻲ أﺿﻐﻂ ﻋﻠﻲ أي ﻣﻦ اﻟﺼﻮرﺗﯿﻦ اﻟﺘﺎﻟﯿﺘﯿﻦ و ﺳﺘﻌﺮف ﻣﺎ أﻗﺼﺪ‬
 ‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬

‫ﺧﺮاﺋﻂ اﻟﺼﻮر‬
‫ﺳﯿﺨﺼﺺ ﻫﺬا اﻟﺪرس ﻟﻤﻨﺎﻗﺸﺔ واﺣﺪاً ﻣﻦ اﻟﻤﻮاﺿﯿﻊ اﻟﻤﺘﻘﺪﻣﺔ ﻧﻮﻋﺎً ﻣﺎ واﻟﻤﻤﺘﻌﺔ ﻓﻲ ﻟﻐﺔ ‪ 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‬‬

‫‪LOOP‬‬ ‫إذن ﻫﻨﺎك اﻟﺨﺎﺻﯿﺔ ‪ SRC‬واﻟﺘﻲ ﺗﺴﺘﺨﺪم ﻛﻤﺎ ﺗﺮى ﻟﺘﺤﺪﯾﺪ اﺳﻢ اﻟﻤﻠﻒ اﻟﻤﺪرج ‪.‬ﻛﻤﺎ ﯾﻮﺟﺪ أﯾﻀﺎً اﻟﺨﺎﺻﯿﺔ‬
‫اﻟﻘﯿﻤﺔ‪-‬‬
‫اﻟﺘﻲ ﺗﺤﺪد ﻋﺪد ﻣﺮات ﺗﻜﺮار ﻋﺰف اﻟﻤﻘﻄﻮﻋﺔ أي أﻧﻬﺎ ﺗﺄﺧﺬ أرﻗﺎﻣﺎً ﺻﺤﯿﺤﺔ ﻋﺎدة‪ .‬أﻣﺎ ﻟﻮ ﻗﻤﺖ ﺑﺈﻋﻄﺎءﻫﺎ‬
‫‪1‬أو اﻟﻘﯿﻤﺔ ‪ infinite‬ﻓﻬﺬا ﺳﻮف ﯾﺆدي إﻟﻰ ﺗﻜﺮار ﻋﺰف اﻟﻤﻘﻄﻮﻋﺔ إﻟﻰ ﻣﺎ ﻻ ﻧﻬﺎﯾﺔ )ﻻ ﺗﺨﻒ‪ ،‬ﻓﻬﺬا ﻻ ﯾﻌﻨﻲ أن‬
‫اﻟﻌﺰف ﺳﯿﺴﺘﻤﺮ ﺑﻌﺪ أن ﺗﻘﻮم ﺑﺈﻃﻔﺎء ﺟﻬﺎزك( ﻓﻘﻂ ﺳﻮف ﺗﺴﻤﻌﻬﺎ ﻃﺎﻟﻤﺎ أﻧﻚ ﻣﻮﺟﻮد ﻓﻲ اﻟﺼﻔﺤﺔ وﺳﯿﺘﻮﻗﻒ ﺑﻤﺠﺮد‬
‫اﻧﺘﻘﺎﻟﻚ ﻟﺼﻔﺤﺔ أﺧﺮى أو ﺧﺮوﺟﻚ ﻣﻦ اﻟﺒﺮﻧﺎﻣﺞ ‪.‬‬

‫>"‪<BGSOUND SRC="yankee.mid" LOOP="infinite‬‬

‫>"‪<BGSOUND SRC="yankee.mid" LOOP="3‬‬

‫أﻣﺎ ﻓﻲ ﺣﺎﻟﺔ أردت إدراج وﺻﻼت ﺗﺸﻌﺒﯿﺔ ﻟﻤﻠﻔﺎت ﺻﻮﺗﯿﺔ ﻓﻲ ﻣﻮﻗﻌﻚ ﺑﺤﯿﺚ ﯾﻤﻜﻦ ﻟﻠﺰاﺋﺮ أن ﯾﺤﻤّﻠﻬﺎ أو أن ﯾﻨﻘﺮ‬
‫ﻋﻠﯿﻬﺎ إذا أراد ﺳﻤﺎﻋﻬﺎ‪ ،‬ﻓﺬﻟﻚ ﯾﺘﻢ ﺑﺎﻟﻄﺮﯾﻘﺔ اﻹﻋﺘﯿﺎدﯾﺔ ﻹدراج اﻟﻮﺻﻼت واﻟﺘﻲ ﺗﻌﻠﻤﻨﺎﻫﺎ ﻓﻲ اﻟﺪرس اﻟﻮﺻﻼت‬
‫اﻷﺳﺎﺳﯿﻪ أي ﻛﻤﺎ ﯾﻠﻲ‪:‬‬

‫اﳌﻘﻄﻮﻋﺔ>"‪<A HREF="yankee.mid‬‬ ‫>‪ </A‬ﲪﻞ ﻫﺬه‬

‫ﺗﻈﻬﺮ ﻟﻚ اﻟﻮﺻﻠﻪ ﺑﻬﺬا اﻟﺸﻜﻞ و ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﯿﻬﺎ ﯾﻈﻬﺮ ﻟﻚ ﺻﻨﺪوق اﻹﺧﺘﯿﺎرات‬

‫ﺣﻤﻞ ﻫﺬه اﻟﻤﻘﻄﻮﻋﻪ‬

‫وﻫﻲ ‪-‬ﻛﻤﺎ ﺗﻌﻠﻢ‪ -‬ﻃﺮﯾﻘﺔ ﻋﺎﻣﺔ ﻟﯿﺲ ﻟﻬﺎ ﻋﻼﻗﺔ ﺑﻨﻮع اﻟﻤﺘﺼﻔﺢ اﻟﻤﺴﺘﺨﺪم‬

‫إدراج وﺳﺎﺋﻂ أﺧﺮى‬

‫ﻣﻦ اﻟﻤﻌﺮوف أن اﻟﻤﺴﺘﻌﺮﺿﺎت ﻟﻦ ﺗﺴﺘﻄﯿﻊ أن ﺗﻌﺮض ﺟﻤﯿﻊ اﻟﻮﺳﺎﺋﻂ اﻟﻤﺘﻌﺪده اﻟﺘﻲ ﺗﻘﻮم ﺑﻮﺿﻌﻬﺎ ﻓﻲ ﺻﻔﺤﺎﺗﻚ‬
‫وﻟﻜﻦ ﺑﺈﺳﺘﺨﺪام ال ‪ 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 #7FFFD4
Blanchedalmond 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 #FFD700
Honeydew Greenyellow Green
#F0FFF0 #ADFF2F #008000
Indigo Indianred Hotpink
#4B0082 #CD5C5C #FF69B4
Lavender Khaki Ivory
#E6E6FA #F0E68C #FFFFF0
Lemonchiffon Lawngreen Lavenderblush
#FFFACD #7CFC00 #FFF0F5
Lightcyan Lightcoral Lightblue
#E0FFFF #F08080 #ADD8E6
Lightgrey Lightgreen Lightgoldenrodyellow
#D3D3D3 #90EE90 #FAFAD2
Lightseagreen Lightsalmon Lightpink
#20B2AA #FFA07A #FFB6C1
Lightsteelblue Lightslategray Lightskyblue
#B0C4DE #778899 #87CEFA
Limegreen Lime Lightyellow
#32CD32 #00FF00 #FFFFE0
Maroon Magenta Linen
#800000 #FF00FF #FAF0E6
Mediumorchid Mediumblue Mediumauqamarine
#BA55D3 #0000CD #66CDAA
Mediumslateblue Mediumseagreen Mediumpurple
#7B68EE #3CB371 #9370D8
Mediumvioletred Mediumturquoise Mediumspringgreen
#C71585 #48D1CC #00FA9A
Mistyrose Mintcream Midnightblue
#FFE4E1 #F5FFFA #191970
Navy Navajowhite Moccasin
#000080 #FFDEAD #FFE4B5
Olivedrab Olive Oldlace
#688E23 #808000 #FDF5E6
Orchid Orangered Orange
#DA70D6 #FF4500 #FFA500
Paleturquoise Palegreen Palegoldenrod
#AFEEEE #98FB98 #EEE8AA
Peachpuff Papayawhip Palevioletred
#FFDAB9 #FFEFD5 #D87093
Plum Pink Peru
#DDA0DD #FFC0CB #CD853F
Red Purple Powderblue
#FF0000 #800080 #B0E0E6
Saddlebrown Royalblue Rosybrown
#8B4513 #4169E1 #BC8F8F
Seagreen Sandybrown Salmon
#2E8B57 #F4A460 #FA8072
Silver 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‬‬
‫‪ 1</TD><TD>٢‬ﺧﻠﯿﻪ>‪<TR><TD‬‬ ‫>‪</TD></TR‬ﺧﻠﯿﻪ‬
‫‪ 3</TD><TD>٤‬ﺧﻠﯿﻪ>‪<TR><TD‬‬ ‫>‪</TD></TR‬ﺧﻠﯿﻪ‬
‫>‪</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‬وﻻ ﺑﺄس ﻣﻦ ﺗﺬﻛﯿﺮك أن ﻋﺪد‬
‫اﻟﺼﻔﻮف ﻓﻲ اﻟﺠﺪول ﯾﺘﺤﺪد ﺑﻌﺪد ﻫﺬه اﻟﻮﺳﻮم‪ .‬أﻣﺎ أﻫﻢ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ ﺗﻀﺎف ﻟﻬﺬا اﻟﻮﺳﻢ ﻓﻬﻲ ‪:‬‬

‫‪Right,‬‬ ‫‪ALIGN‬ﻟﺘﺤﺪﯾﺪ ﻣﺤﺎذاة اﻟﻨﺺ أﻓﻘﯿﺎً داﺧﻞ اﻟﺨﻼﯾﺎ اﻟﺘﻲ ﯾﺘﻜﻮن ﻣﻨﻬﺎ اﻟﺼﻒ‪ ،‬واﻟﻘﯿﻢ اﻟﻤﺤﺘﻤﻠﺔ ﻟﻬﺎ ﻫﻲ‬
‫‪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 colspan="3‬‬ ‫>‪ </td‬وﺳﻌﺎ‬
‫>‪</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‬و ﻟﻢ ﻧﻘﻢ ﺑﺈﻧﻬﺎء وﺳﻢ اﻟﺠﺪول اﻷول ﺑﻌﺪ ﺛﻢ ﻗﻤﻨﺎ ﺑﺘﺤﺪﯾﺪ ﺧﻼﯾﺎ اﻟﺠﺪول اﻵﺧﺮ و إﻏﻼق اﻟﻮﺳﻢ‬
‫و ﺑﻌﺪﻫﺎ ﻗﻤﻨﺎ ﺑﺈﻏﻼق اﻟﺨﻼﯾﺎ ﻟﻠﺠﺪول اﻟﺮﺋﯿﺴﻲ ﺛﻢ ﻗﻤﻨﺎ ﺑﺈﻏﻼﻗﻪ ‪.‬‬

‫رﺑﻤﺎ ﺗﻜﻮن ﺗﻌﺒﺖ ﻣﻦ اﻟﻌﻤﻞ ﺑﺎﻟﺠﺪاول ﺣﯿﺚ ان ﻛﻞ ﺷﻲء ﻣﺴﺘﻘﯿﻢ ﺣﺘﻰ اﻟﺤﻮاف واﻟﺰواﯾﺎ وﻟﻜﻦ ﻣﺎ رأﯾﻚ أن ﻧﻌﻄﻲ‬
‫ﻟﻬﺎ ﺷﻜﻞ ﺟﺪﯾﺪ و ﺟﯿﺪ ﻣﺜﻼ ﻣﺎرأﯾﻚ أن ﻧﺠﻌﻞ ﺣﻮاف و زواﯾﺎ اﻟﺠﺪول ﻣﺴﺘﺪﯾﺮة ؟ إﻧﻬﺎ ﻓﻜﺮة راﺋﻌﻪ وﺳﻬﻠﻪ ﻻ ﺗﺤﺘﺎج‬
‫ﻣﻨﻚ إﻻ ﺑﻌﺾ ﻓﻨﻮن اﻟﺮﺳﻢ اﻟﺒﯿﺎﻧﻲ ﻓﻘﻂ واﻟﺠﺪاول ‪ ،‬اﻵن ﺳﺄﺷﺮح ﻟﻚ ﻣﺎذا أﻗﺼﺪ ﻋﻠﻲ ﻫﺬا اﻟﻤﺜﺎل‬
 ‫‪o‬‬ ‫‪o‬‬

‫ﻣﺤﺘﻮﯾﺎت اﻟﺨﻠﯿﻪ اﻷﺳﺎﺳﯿﻪ‬

‫‪o‬‬ ‫‪o‬‬

‫‪o‬‬ ‫‪o‬‬

‫ﻣﺤﺘﻮﯾﺎت اﻟﺨﻠﯿﻪ اﻷﺳﺎﺳﯿﻪ‬

‫‪o‬‬ ‫‪o‬‬
‫ﻫﺬا ﻫﻮ اﻟﺠﺪول اﻟﺬي ﺳﻨﺠﻌﻞ زواﯾﺎ ﻣﺴﺘﺪﯾﺮة ﻓﻲ اﻟﺒﺪاﯾﻪ ﯾﺠﺐ ان ﺗﻜﻮن اﻟﺰواﯾﻪ ﺧﻼﯾﺎ ﻣﺴﺘﻘﻠﻪ ﺑﺬاﺗﻬﺎ وﻻ ﺷﻲء‬
‫ﺑﺪاﺧﻠﻬﺎ و ﻟﻘﺪ وﺿﻌﺖ ﻓﻲ ﻛﻞ زاوﯾﻪ ﻣﻦ اﻟﺰواﯾﻪ "‪ "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:someone@domain.com"> ... </FORM‬‬

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

‫‪METHOD‬‬

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

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

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

‫‪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=asdh4@yahoo.com‬‬
 ‫(اﻟﻜﻠﻤﺎت ‪ Name, Address, Email‬ﻫﻲ أﺳﻤﺎء اﻟﺤﻘﻮل ﻓﻲ اﻟﻨﻤﻮذج وﻧﻘﻮم ﻧﺤﻦ ﺑﺘﻌﺮﯾﻔﻬﺎ أﺛﻨﺎء ﻋﻤﻠﯿﺔ‬
‫ﺗﺼﻤﯿﻢ اﻟﻨﻤﻮذج أﻣﺎ اﻟﻨﺼﻮص اﻟﻈﺎﻫﺮة ﺑﻌﺪ إﺷﺎرة اﻟﻤﺴﺎواة ﻓﻬﻲ اﻟﺒﯿﺎﻧﺎت اﻟﻤﺪﺧﻠﺔ‪ ،‬وﺳﻮف ﻧﺘﺤﺪث ﻋﻦ ﺗﻌﺮﯾﻒ‬
‫أﺳﻤﺎء اﻟﺤﻘﻮل ﺑﻌﺪ ﻗﻠﯿﻞ )‬

‫أﻣﺎ ﻋﻨﺪ اﺳﺘﺨﺪام ‪ application/x-www-form-urlencoded‬ﻓﺴﺘﺼﻞ اﻟﺒﯿﺎﻧﺎت ﺑﺎﻟﺸﻜﻞ‪:‬‬

‫‪NAME=Ahmed+Salah&Address=Cairo+,+Egypt&Email=asdh4@yahoo.com‬‬

‫وﻟﻚ أن ﺗﺨﯿﻞ ﻣﺒﻠﻎ اﻟﺼﻌﻮﺑﺔ ﻓﻲ ﺗﺤﻠﯿﻠﻬﺎ إذا اﺣﺘﻮت ﻋﻠﻰ ﻋﺸﺮات اﻟﺤﻘﻮل ‪.‬ﻟﺬﻟﻚ ﺗﺘﻮﻓﺮ ﺑﺮاﻣﺞ ﺧﺎﺻﺔ ﺗﻌﺮف ﺑِـ‬
‫‪Formaters‬ﺗﻘﻮم ﺑﺈﻋﺎدة ﺗﺮﺗﯿﺐ اﻟﺒﯿﺎﻧﺎت اﻟﻤﺮﺳﻠﺔ ﻣﻦ ﺧﻼل اﻟﻨﻤﺎذج ﺑﺸﻜﻞ ﻣﻔﻬﻮم ﺑﺤﯿﺚ ﺗﺼﺒﺢ ﻛﻤﺎ ﻟﻮ ﻛﺎﻧﺖ‬
‫ﻣﺮﺳﻠﺔ ﺑﺘﺮﻣﯿﺰ ‪ text/plain‬وإﻟﯿﻚ أﺣﺪﻫﺎ وﻫﻮ ﺑﺮﻧﺎﻣﺞ ﻣﺠﺎﻧﻲ ﯾﺪﻋﻰ ‪ UrlCook.‬ﻟﻜﻦ ﻻ ﺗﻌﺘﻘﺪ أن اﻟﻄﺮﯾﻘﺔ‬
‫اﻷوﻟﻰ ﻫﻲ اﻷﻓﻀﻞ داﺋﻤﺎً ﻓﺬﻟﻚ ﯾﻌﺘﻤﺪ ﻛﻤﺎ ﻗﻠﻨﺎ ﻋﻠﻰ ﻃﺮﯾﻘﺔ اﻟﻤﻌﺎﻟﺠﺔ واﻟﻨﻘﻞ ﺑﺎﻟﺒﺮﯾﺪ‪ .‬ﻟﺬﻟﻚ ﻻ ﺿﯿﺮ ﻣﻦ أن ﺗﺠﺮب‬
‫اﻟﻄﺮﯾﻘﺘﯿﻦ ﻟﺘﻌﺮف أﯾﻬﻤﺎ أﻧﺴﺐ ﻟﻚ ‪.‬‬

‫إذن ﺧﻼﺻﺔ اﻟﻘﻮل‪ :‬ﻗﺪ ﺗﻜﻮن أﻓﻀﻞ ﺻﯿﻐﺔ ﻟﺘﻌﺮﯾﻒ اﻟﻨﻤﻮذج ﻓﻲ ﺣﺎﻟﺔ أردت اﺳﺘﻘﺒﺎل اﻟﺒﯿﺎﻧﺎت ﻣﻦ ﻣﻮﻗﻌﻚ إﻟﻰ‬
‫ﻋﻨﻮان ﺑﺮﯾﺪك اﻹﻟﻜﺘﺮوﻧﻲ ﻫﻲ ‪:‬‬

‫‪<FORM ACTION="mailto:email@domain.com" 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.‬‬

‫أو"=‪<INPUT TYPE="button" VALUE‬‬ ‫>"‪ button‬ﻫﺬا ﻣﺜﺎل ﻟﻠﺰر‬

‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬

‫ﺗﻨﺴﯿﻖ اﻟﻨﻤﺎذج‬
‫ﺳﻨﺘﺤﺪث ﻓﻲ ﻫﺬا اﻟﻔﺼﻞ ﻋﻦ ﻛﯿﻔﯿﻪ ﺗﻨﺴﯿﻖ اﻟﻨﻤﺎذج‬

‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬
‫] ‪[ 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‬و اﻟﺘﻲ‬
‫ﺳﻮف ﻧﻘﻮم ﺑﺸﺮﺣﻬﺎ ﻓﻲ اﻟﺘﺤﺪﯾﺜﺎت اﻟﻘﺎدﻣﺔ و ﯾﻤﻜﻨﻚ أﺳﺘﺨﺪام ﺧﺎﺻﯿﻪ ﻣﺤﺎذاة اﻹﻃﺎر إﻟﻲ اﻟﺠﺎﻧﺐ اﻟﺬي ﺗﺮﯾﺪ و ﺗﺄﺧﺬ‬
‫ﺗﻠﻚ اﻟﻘﯿﻢ‬
‫‪TOP‬‬‫‪LEFT, RIGHT, CENTER, BOTTOM‬أو‬
‫ﯾﺠﺐ أن ﺗﻌﻠﻢ أن وﺳﻢ ‪ 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‬‬
 ‫إﻧﻬﺎ ﻧﻔﺲ اﻟﺼﯿﻐﺔ اﻟﺘﻲ ﻗﻤﻨﺎ ﺑﻜﺘﺎﺑﺘﻬﺎ ﻹﻧﺸﺎء زر ‪ Submit‬و ﻟﻜﻦ ﻣﻊ ﺗﻐﯿﯿﺮ ‪ "TYPE="submit‬ﺑﺎل‬
‫‪ "TYPE="image‬ﻛﻤﺎ ان اﻟﺨﺼﺎﺋﺺ ‪ HEIGHT ،BORDER ،ALT ،SRC‬و ‪ WIDTH‬ﻛﻠﻬﺎ ﻗﺪ‬
‫ﻧﺎﻗﺸﻨﺎﻫﺎ ﻓﻲ ﻗﺴﻢ اﻟﺨﺎص ﺑﺎﻟﺼﻮر‬
‫ﯾﺠﺐ أن ﺗﺘﺄﻛﺪ ﺑﻌﺪ إﺳﺘﻌﻤﺎل ﻛﻞ ﻫﺬه اﻟﺨﺼﺎﺋﺺ أن اﻟﻨﻤﻮذج ﯾﻌﻤﻞ ﺑﺸﻜﻞ ﺻﺤﯿﺢ ‪ ،‬واﻟﺨﺎﺻﯿﻪ ‪ ALT‬ﻫﻨﺎ ﻣﻬﻤﻪ‬
‫ﺟﺪا ﺣﺘﻲ ﺗﺠﻌﻞ اﻟﻘﺎرء أو اﻟﺰاﺋﺮ ﯾﻌﺮف أﯾﻦ ﯾﺪﺧﻞ اﻟﺒﯿﺎﻧﺎت وذﻟﻚ ﻻﻧﻪ ﻓﻲ ﺑﻌﺾ اﻷﺣﯿﺎن ﻻ ﺗﺤﻤﻞ اﻟﺼﻮرة‬
‫ﻓﯿﻌﺮف أن ﻫﻨﺎ ﯾﻮﺟﺪ وﺻﻠﻪ أو زر ﻹدﺧﺎل اﻟﺒﯿﺎﻧﺎت ‪.‬‬