TeachYourSelf_HTML_AR

‫اﻟﻤﺮﺟﻊ اﻟﻜﺎﻣﻞ ﻓﻲ ‪HTML‬‬ ‫ﻋﻦ ﻣﻮﻗﻊ‬ ‫‪HTML4ARAB‬‬ ‫‪BY‬‬‫‪[email protected]‬‬ ‫اﻟـﺒـﺪاﯾﻪ ﻫﻨﺎ‬ ‫> أﺑﺪأ ﻫﻨﺎ‬ ‫ﻣﺎ ﻫﻲ ال? ‪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‬اﻟﺼﻔﺤﺔ اﻟﻨﺺ اﳌﺘﻤﺮﻛﺰ ﰲ ﻣﻨﺘﺼﻒ>\"‪<P ALIGN=\"CENTER‬‬ ‫ﻗﺎرن ﻫﺬا ﻟﻜﻲ ﺗﻔﻬﻢ اﻟﺼﯿﻐﻪ اﻟﺴﺎﺑﻘﻪ ﻓﺎل ‪ P‬ﻫﻮ ﺑﺪاﯾﻪ اﻟﻮﺳﻢ ‪ ALIGN ،‬ﻫﻮ ﺧﻮاﺻﻪ ‪ CENTER‬ﻫﻲ ﻗﯿﻤﺔ‬ ‫اﻟﺨﺎﺻﯿﺔ و ﺑﺎﻟﻄﺒﻊ >‪ </P‬ﻫﻮ ﻧﻬﺎﯾﻪ اﻟﻮﺳﻢ‪،‬‬ ‫و ﻣﻦ اﻟﻮاﺿﺢ ﻃﺒﻌﺎ أذا ﻛﻨﺎ ﻧﻘﺪر أن ﻧﻀﻊ اﻟﻨﺺ ﻓﻲ اﻟﻤﻨﺘﺼﻒ أذن ﻧﺴﺘﻄﯿﻊ أن ﻧﻀﻊ ﻓﻲ أي ﺟﻬﺔ أﺧﺮي ﺳﻮاء‬ ‫اﻟﯿﺴﺎر أو اﻟﯿﻤﯿﻦ ﻛﻞ ﻣﺎ ﻋﻠﯿﻚ ﻓﻌﻠﻪ ﻫﻮ ﺗﻐﯿﯿﺮ ﻗﯿﻤﺔ اﻟـ ‪ ALIGN‬إﻟﻲ ‪ RIGHT‬أو ‪ . LEFT‬ﻟﻤﺰﯾﺪ ﻣﻦ اﻟﺘﻔﺎﺻﯿﻞ‬ ‫واﻷﻣﺜﻠﻪ أﻗﺮأ ﺗﻨﺴﯿﻖ اﻟﻔﻘﺮات‬ ‫ﺗﻨﺴﯿﻖ اﻟﻨﺺ‬ ‫ﻧﺘﺤﺪث اﻵن ﻋﻦ ﻛﯿﻔﯿﻪ ﺟﻌﻞ اﻟﻨﺺ ﻋﺮﯾﺾ أو ﻣﺎﺋﻞ أو ﺗﺤﺘﻪ ﺧﻂ‬ ‫ﻟﻘﺪ ﻗﻤﺖ ﺑﺸﺮح ﻛﻞ ﻫﺬا ﺑﺎﻟﺘﻔﺼﯿﻞ ﻓﻲ دروس اﻟـ ‪ HTML‬وﻟﻜﻦ ﺳﺮﯾﻌﺎ ﻧﻘﻮل اﻷﻛﻮاد ﻟﻬﺬه اﻟﺘﻨﺴﯿﻘﺎت‬

‫>‪</B‬اﻟﻌﺮﯾﺾ ﻫﺬا ﻟﻠﺨﻂ>‪<B‬‬‫>‪</I‬اﳌﺎﺋﻞ وﻫﺬا ﻟﻠﺨﻂ>‪<I‬‬‫>‪</U‬أﻗﺼﺪه ﻋﻦ ﲢﺘﻪ ﺧﻂ وﻫﺬا ﻣﺎ>‪<U‬‬ ‫و اﻵن أﺧﻮاﻧﺌﻲ اﻷﻋﺰاء ﯾﻜﻮن ﻗﺪ أﻧﺘﻬﯿﻦ ﻣﻦ اﻟﻔﺼﻞ اﻟﺜﺎﻧﻲ ﻣﻦ ﻓﺼﻮﻟﻨﺎ اﻟﺘﻌﻠﯿﻤﯿﻪ‬ ‫وﺗﻜﻮن ﻗﺪ ﺗﻌﻠﻤﺖ ﻛﯿﻔﯿﻪ أﻧﺸﺎء ﺻﻔﺤﺎت و ﺗﻨﺴﯿﻘﻬﻢ وﻟﻜﻦ ﻛﯿﻒ ﯾﻤﻜﻦ اﻟﺘﻨﻘﻞ ﺑﯿﻨﻬﻢ ؟؟؟!!!!! وﻟﻤﻌﺮﻓﺔ اﻹﺟﺎﺑﻪ أذﻫﺐ‬ ‫إﻟﻲ اﻟﻔﺼﻞ اﻟﺘﺎﻟﻲ «‬ ‫اﻟﻮﺻﻼت اﻷﺳﺎﺳﯿﻪ‬‫ﺗﻮﻗﻔﻨﺎ ﻓﻲ «اﻟﻔﺼﻞ اﻟﺴﺎﺑﻖ ﻋﻨﺪ ﻛﯿﻔﯿﻪ اﻹﻧﺘﻘﺎل ﺑﯿﻦ ﺻﻔﺤﺎت اﻟﻤﻮﻗﻊ و ﻓﻲ ﻫﺬا اﻟﻔﺼﻞ ﺳﻨﻘﻮم ﺑﺸﺮح ﻫﺬه اﻟﺠﺰﺋﯿﻪ‪.‬‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬‫] أول وﺻﻠﻪ | وﺻﻠﻪ ﻟﻠﺒﺮﯾﺪ | وﺻﻠﻪ ﻟﺼﻮرة | وﺻﻠﻪ ﻟﻤﻠﻒ [‬ ‫أول وﺻﻠﻪ‪-:‬‬‫ﻛﯿﻒ وﺻﻠﺖ إﻟﻰ ﻫﺬه اﻟﺼﻔﺤﺔ؟! رﺑﻤﺎ ﺗﻌﺘﺒﺮ ﻫﺬا ﺳﺆا ًﻻ ﺳﺨﯿﻔًﺎ‪ ،‬وأن اﻹﺟﺎﺑﺔ ﻋﻠﯿﻪ ﻫﻲ ﻣﻦ اﻟﺒﺪﯾﻬﯿﺎت ‪ ...‬وﻫﺬا‬‫ﺻﺤﯿﺢ! ﻣﻦ اﻟﻤﺆﻛﺪ أﻧﻚ ﻗﻤﺖ ﺑﺎﻹﻧﺘﻘﺎل إﻟﻰ ﻫﻨﺎ ﻣﻦ ﺧﻼل إﺣﺪى ﺻﻔﺤﺎت ﻫﺬا اﻟﻤﻮﻗﻊ‪ ،‬أو ﻣﻦ ﺧﻼل أﺣﺪ ﻣﺤﺮﻛﺎت‬‫اﻟﺒﺤﺚ‪ ،‬أو ﻣﻦ ﺧﻼل أﺣﺪ اﻟﻤﻮاﻗﻊ اﻟﺘﻲ ﻗﻤﺖ ﺑﺰﯾﺎرﺗﻬﺎ ﻣﺆﺧﺮًا ‪ ...‬وﻓﻲ ﻛﻞ اﻷﺣﻮال ﻗﻤﺖ ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ‬ ‫ﻣﺎ‬‫‪ ...Links‬أو اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ ﻫﻲ روح اﻹﻧﺘﺮﻧﺖ‪ .‬ﻋﻠﻲ ﻛﻞ ﺣﺎل ﻟﻦ أﺧﻮض ﻛﺜﯿﺮا ﻓﻲ ﺷﺮح ﻫﺬه اﻟﻮﺻﻼت‬‫ﻓﻠﻘﺪ ﻗﻤﺖ ﺑﺸﺮﺣﻬﺎ ﺗﻔﺼﯿﻠﯿﺎ ﻓﻲ اﻟﺪروس ﻛﻞ ﻣﺎ ﻫﻮ ﻣﻄﻠﻮب ﻣﻨﺎ اﻵن ﻫﻮ ﺗﻌﻠﯿﻤﻚ ﻛﯿﻔﯿﻪ أدراج وﺻﻠﻪ ﺗﺸﻌﺒﯿﻪ ﻓﻲ‬ ‫ﺻﻔﺤﺎﺗﻚ‬‫ﻓﻲ اﻟﺒﺪاﯾﻪ ﻧﺴﺘﺨﺪم ﻫﺬا اﻟﻮﺳﻢ ﻟﺒﺪأ أﻧﺸﺎء اﻟﻮﺻﻠﻪ‬ ‫>‪</A> ... <A‬‬‫وﻫﻮ اﻟﻮﺳﻢ اﻷﺳﺎﺳﻲ ﻹدراج اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ‪ ،‬وﻫﻲ اﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ ‪ .Anchor‬وﻫﻲ ﻻ ﺗﻌﻤﻞ ﻟﻮﺣﺪﻫﺎ ﺑﻞ‬ ‫ﺗﺘﻄﻠﺐ إﺿﺎﻓﺔ ﺧﺼﺎﺋﺺ ﻣﻌﯿﻨﺔ أوﻟﻬﺎ وأﻫﻤﻬﺎ اﻟﺨﺎﺻﯿﺔ‬ ‫‪HREF‬‬‫اﻟﺘﻲ ﻧﺤﺪد ﻣﻦ ﺧﻼﻟﻬﺎ اﻟﻤﻮﻗﻊ اﻟﺬي ﻧﺮﯾﺪ اﻟﺪﻻﻟﺔ ﻋﻠﯿﻪ‪ ،‬وﯾﺠﺐ أن ﯾﻜﺘﺐ ﻋﻨﻮان اﻟﻤﻮﻗﻊ ﻛﺎﻣﻼً و ﻫﻲ إﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ‬ ‫‪. REFerence Hypertext‬‬

‫وﻫﺬه ﻫﻲ اﻟﺼﯿﻐﺔ اﻷﺳﺎﺳﯿﻪ ﻟﻠﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﻪ‬ ‫ﻫﺎم ﺟﺪا‬‫>‪</A‬اﻷوﱃ ﺻﻔﺤﱵ>\"‪<A HREF=\"FirstPage.html‬‬ ‫ﻓﺘﻈﻬﺮ ﻟﻚ اﻟﻮﺻﻠﻪ ﺑﻬﺬا اﻟﺸﻜﻞ‬ ‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬‫و اﻵن إﻟﻲ اﻟﻌﻨﻮان اﻹﻟﯿﻜﺘﺮوﻧﻲ ‪ : E-Mail‬ﻛﯿﻒ ﻧﺪرج وﺻﻠﻪ إﻟﻲ اﻟﻌﻨﻮان اﻟﺒﺮﯾﺪي اﻟﺨﺎص ﺑﻨﺎ ﻓﺎﻟﻮاﻗﻊ اﻹﺟﺎﺑﻪ‬ ‫ﺳﻬﻠﻪ ﺟﺪا ﻓﻬﺬه ﻫﻲ ﺻﯿﻐﺔ اﻟﺒﺮﯾﺪ اﻹﻟﯿﻜﺘﺮوﻧﻲ‬‫>‪</A‬أرﺳﻞ ﱄ>\"‪<A HREF=\"mailto:[email protected]‬‬ ‫ﺗﻈﻬﺮ ﻟﻚ اﻟﻮﺻﻠﻪ ﺑﻬﺬا اﻟﺸﻜﻞ‬‫أرﺳﻞ ﻟﻲ‬ ‫وﺻﻠﻪ ﻟﺼﻮرة ‪ -:‬ﻓﻲ اﻟﺤﻘﯿﻘﻪ أن أدراج وﺻﻠﻪ ﺗﺸﻌﺒﯿﻪ ﺑﺼﻮرة ﻻ ﺗﺨﺘﻠﻒ ﻛﺜﯿﺮا ﻋﻦ اﻟﺴﺎﺑﻖ وﻟﻜﻦ ﺳﻨﻘﻮم ﺑﺸﺮﺣﻬﺎ‬ ‫ﻓﻲ اﻟﻔﺼﻞ اﻟﻘﺎدم«‬ ‫و ﺻﻠﻪ ﻟﻤﻠﻒ ‪ -:‬أدراج وﺻﻠﻪ ﻟﻤﻠﻒ ﻻ ﯾﺨﺘﻠﻒ ﻋﻦ أدراج وﺻﻠﻪ ﻟﺼﻮرة ﺗﻘﺮﯾﺒﺎ وﻟﻜﻦ ﯾﻮﺟﺪ إﺧﺘﻼف ﺑﺴﯿﻂ ﻓﺒﺪﻻ‬ ‫ﻣﻦ أن ﯾﻔﺘﺢ اﻟﻤﺴﺘﻌﺮض اﻟﺼﻮرة ﻓﻲ ﺻﻔﺤﺔ ﺟﺪﯾﺪة ﯾﻘﻮم اﻟﻤﺴﺘﻌﺮض ﺑﺈﻇﻬﺎر ﻟﻚ ﺻﻨﺪوق اﻹﺧﺘﯿﺎرات ﻟﺤﻔﻆ‬ ‫اﻟﻤﻠﻒ أو ﺗﺤﻤﯿﻠﻪ ﻣﻦ ﻋﻠﻲ اﻟﻤﻮﻗﻊ و ﻫﺬه ﻫﻲ اﻟﺼﯿﻐﻪ ‪-:‬‬‫>‪ </A‬ﲪﻞ ﻫﺬه اﳌﻘﻄﻮﻋﺔ>\"‪<A HREF=\"egypt.mid‬‬ ‫ﺗﻈﻬﺮ ﻟﻚ اﻟﻮﺻﻠﻪ ﺑﻬﺬا اﻟﺸﻜﻞ و ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﯿﻬﺎ ﯾﻈﻬﺮ ﻟﻚ ﺻﻨﺪوق اﻹﺧﺘﯿﺎرات‬ ‫ﺣﻤﻞ ﻫﺬه اﻟﻤﻘﻄﻮﻋﻪ‬ ‫أﺳﺎﺳﯿﺎت إدراج اﻟﺼﻮر‬

‫اﻵن أﺻﺒﺢ ﻋﻨﺪك ﺻﻔﺤﺎت ﻣﺮﺑﻮﻃﺔ ﺑﻮﺻﻼت ﺗﺸﻌﺒﯿﻪ و ﻣﻨﺴﻘﻪ إﻟﻲ ﺣﺪ ﻣﺎ وﻟﻜﻦ ﻫﻞ ﻫﺬا ﯾﻘﻨﻌﻚ ؟! أﻧﺎ ﻻ أﻋﺘﻘﺪ‬‫ﻻﺑﺪ ﻣﻦ أﻧﻪ ﯾﻮﺟﺪ ﺷﻲء ﻧﺎﻗﺺ ﻻﺑﺪ واﻧﻨﺎ ﻧﺴﯿﻨﺎ ﺷﻲء ﻣﺎ !!! أه‪ .....‬أﻧﻬﺎ اﻟﺼﻮر أن اﻟﺪارﺳﯿﻦ اﻟﺠﺪد ﯾﻔﻀﻠﻮن ﻣﻞء‬‫ﺻﻔﺤﺎﺗﻬﻢ ﺑﺎﻟﺼﻮر ﻟﻜﻲ ﯾﻀﯿﻔﻮا اﻟﻨﺎﺣﯿﻪ اﻟﺠﻤﺎﻟﯿﻪ ﻟﺼﻔﺤﺎﺗﻬﻢ ‪ ،‬ﻓﻠﻬﺬا ﻻﺑﺪ وان ﺗﻜﻮن ﻣﻨﺘﺒﻪ اﻵن و أذا ﻛﺎن ﻟﺪﯾﻚ أي‬‫إﺳﺘﻔﺴﺎر ﻋﻦ اﻟﺼﻔﺤﺎت اﻟﺴﺎﺑﻘﻪ أذﻫﺐ إﻟﻲ اﻟﺪروس اﻟﻤﺘﻘﺪﻣﺔ ﻓﻔﺒﻬﺎ ﺷﺮح أﻛﺜﺮ وأن ﻟﻢ ﯾﻔﯿﺪك أرﺳﻞ ﻟﻲ وﻻ ﺗﺘﺮدد‪.‬‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬‫] إدراج ﺻﻮرة | ﺻﻮرة ذات وﺻﻠﻪ | اﻟﺨﻮاص اﻷﺳﺎﺳﯿﻪ [‬ ‫إدراج ﺻﻮرة‬‫ﻓﻲ اﻟﺒﺪاﯾﻪ ﻛﺎﻟﻌﺎده ﻧﺘﻌﺮف ﻋﻠﻲ اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺈدراج ﺻﻮرة و ﻫﻮ >‪ <IMG‬وﻫﻮ وﺳﻢ ﻣﻔﺮدو اﻟﻜﻠﻤﺔ إﺧﺘﺼﺎر‬‫ﻟﻜﻠﻤﺔ )‪ .( IMAGe‬ﻟﻜﻦ ﻫﻞ ﯾﻜﻔﻲ ﻫﺬا ﻹدراج ﺻﻮرة؟ ﻛﻼ‪ ،‬ﺑﺎﻟﻄﺒﻊ ﯾﺠﺐ أن ﻧﺤﺪد اﻟﺼﻮرة اﻟﺘﻲ ﻧﺮﯾﺪﻫﺎ‪ .‬ﻟﺬﻟﻚ‬‫ﻧﻀﯿﻒ اﻟﺨﺎﺻﯿﺔ ﻟﻪ ‪ SRC‬ﻟﺘﺤﺪﯾﺪ ﻣﻮﻗﻊ واﺳﻢ اﻟﺼﻮرة واﻟﻜﻠﻤﻪ إﺧﺘﺼﺎر)‪ (SouRCe‬أي اﻟﻤﺼﺪر وﺗﻜﻮن اﻟﺼﯿﻐﺔ‬ ‫ﻛﺎﻻﺗﻲ‪-:‬‬ ‫ﻫﺎم ﺟﺪا‬‫>\"‪<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‬‬ ‫اﻟﻬﻮاﻣﺶ‬ ‫ﯾﻮﺟﺪ ﻧﻮﻋﯿﻦ ﻣﻦ اﻟﻬﻮاﻣﺶ ﻫﻮاﻣﺶ ﺟﺎﻧﺒﯿﻪ وﻫﻮاﻣﺶ أﻓﻘﯿﻪ ‪ ،‬وﻟﻜﻦ اﻟﻤﺴﺘﻌﺮﺿﺎن اﻷﺳﺎﺳﯿﺎن ﯾﺴﺘﺨﺪﻣﺎن ﻛﻮدان‬ ‫ﻣﺨﺘﻠﻘﺎن وﻟﻬﺬا ﻋﻨﺪﻣﺎ ﺗﻘﻮم ﺑﺘﻐﯿﯿﺮ أﺣﺪﻫﻤﺎ ﯾﺠﺐ ﺗﻐﯿﯿﺮ اﻷﺧﺮ ﺑﻨﻔﺲ اﻟﻄﺮﯾﻘﺔ‬‫\"‪ LEFTMARGIN=\"0‬و \"‪TOPMARGIN=\"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>is textThisandmulti colors, multi faces, multi sizes «««‫اﻟﺪرس اﻟﺘﺎﻟﻲ‬‫اﻟﺮﻣﻮز اﻟﺨﺎﺻﺔ‬

‫اﻟﺮﻣﻮز اﻟﺨﺎﺻﺔ ﻫﻨﺎك اﻟﻌﺪﯾﺪ ﻣﻦ ﻫﺬه اﻟﺮﻣﻮز واﻟﺘﻲ ﯾﺠﺐ أن ﺗﻜﺘﺐ ﺑﺼﻮرة ﻣﻌﯿﻨﺔ وﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻮم وﻟﯿﺲ‬‫ﻣﺒﺎﺷﺮة ﺑﺼﻮرﺗﻬﺎ اﻟﻌﺎدﯾﺔ‪ .‬ﺧﺬ ﻣﺜﻼ إﺷﺎرﺗﻲ أﻛﺒﺮ ﻣﻦ وأﺻﻐﺮ ﻣﻦ وإﺷﺎرة اﻻﻗﺘﺒﺎس \"‪ .‬ﻛﻞ ﻫﺬه اﻹﺷﺎرات ﺗﺴﺘﺨﺪم‬ ‫أﺻﻼً ﻣﻊ اﻟﻮﺳﻮم ﻓﻬﻲ ﻣﺤﺠﻮزه ﺿﻤﻦ ﻣﻔﺮدات ﻟﻐﺔ ‪ 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; ¹ º &Agrave; » &Aacute; ¼ &Acirc; ½ &Atilde; ¾ &Auml; ¿ &Aring; &AElig;Capital ‫اﻟــــﺤــﺮوف‬ &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‬اﳋﻂ ﺣﺠﻢ>\"‪<A HREF=\"Fontsize.htm#size‬‬ ‫ﺣﺠﻢ اﻟﺨﻂ‬ ‫اﻟﻔﻘﺮات‬ ‫ﺻﺤﯿﺢ أن اﺳﺘﺨﺪاﻣﻚ ﻟﻸﻟﻮان واﻟﺮﺳﻮﻣﺎت ﻓﻲ اﻟﺼﻔﺤﺔ ﯾﻀﻔﻲ ﻋﻠﯿﻬﺎ ﻧﻮﻋﺎً ﻣﻦ اﻟﺤﯿﻮﯾﺔ‪ ،‬وأن اﻟﺨﻄﻮط ﺗﻌﻄﻲ‬ ‫ﺻﻔﺤﺘﻚ روﻧﻘًﺎ وﺟﻤﺎ ًﻻ‪ .‬ﻟﻜﻨﻚ إن ﻟﻢ ﺗﻬﺘﻢ ﺑﺘﺮﺗﯿﺐ ﺻﻔﺤﺘﻚ أو ﺗﻘﻀﻲ ﺑﻌﺾ اﻟﻮﻗﺖ ﻓﻲ ﺗﻨﺴﯿﻖ ﻫﯿﻜﻠﻬﺎ اﻟﻌﺎم وﺗﻨﻈﯿﻢ‬‫ﻓﻘﺮاﺗﻬﺎ وﻗﻮاﺋﻤﻬﺎ‪ ،‬ﻓﺈﻧﻪ ﻣﻦ اﻟﺼﻌﺐ ﻋﻠﯿﻚ اﻟﺤﺼﻮل ﻋﻠﻰ ﺻﻔﺤﺔ وﯾﺐ ﻧﺎﺟﺤﺔ‪ .‬ﻓﺎﻟﺘﺮﺗﯿﺐ ﻫﻮ اﻟﺨﻄﻮة اﻷوﻟﻰ ﻟﺠﺬب‬ ‫اﻫﺘﻤﺎم اﻟﺰاﺋﺮ أو اﻟﻘﺎرئ ﻟﺼﻔﺤﺘﻚ وﺗﺴﻬﻞ ﻋﻠﯿﻪ ﻓﻬﻢ اﻟﺨﻄﻮط اﻟﻌﺮﯾﻀﺔ ﻟﻠﺼﻔﺤﺔ ‪.‬‬ ‫ﻻ ﺑﺄس ﻣﻦ ﺗﺬﻛﯿﺮك ﺑﻬﺬا اﻟﻮﺳﻢ >‪ <P‬ﯾﻘﻮم ﺑﺈﻧﻬﺎء اﻟﻔﻘﺮة‪ .‬واﻟﻮﺳﻢ >‪ <BR‬ﯾﻨﻬﻲ اﻟﺴﻄﺮ اﻟﺤﺎﻟﻲ وﯾﻨﻘﻞ اﻟﻨﺺ إﻟﻰ‬ ‫ﺳﻄﺮ ﺟﺪﯾﺪ‪ .‬واﻟﻮﺳﻢ ;‪ &nbsp‬ﯾﻘﻮم ﺑﺈﺿﺎﻓﺔ اﻟﻔﺮاﻏﺎت‪ ،‬وﯾﺠﺐ ﺗﻜﺮار ﻛﺘﺎﺑﺘﻪ ﺑﻨﻔﺲ ﻋﺪد اﻟﻔﺮاﻏﺎت اﻟﻤﻄﻠﻮب‪.‬‬ ‫وﻧﺘﺎﺑﻊ ﻓﻲ ﻫﺬا اﻟﺪرس ﻣﻊ ﻫﺬه اﻟﻮﺳﻮم وﻏﯿﺮﻫﺎ ‪.‬‬‫ﻟﻘﺪ ﻗﻠﺖ إن اﻟﻮﺳﻢ >‪ <P‬ﻫﻮ وﺳﻢ ﻣﻔﺮد ﻟﻜﻨﻪ ﯾﺴﺘﺨﺪم أﯾﻀًﺎ ﻛﻮﺳﻢ ﻣﺰدوج >‪ <P> ... </P‬وﻓﻲ ﻫﺬه اﻟﺤﺎﻟﺔ ﯾﻤ ّﻜﻨﻨﺎ‬ ‫ﻣﻦ ﺗﺤﺪﯾﺪ إﺗﺠﺎه اﻟﻔﻘﺮة وإﺗﺠﺎه اﻟﻨﺺ ﻓﯿﻬﺎ ﺣﯿﺚ ﯾﺴﺘﺨﺪم ﻣﻌﻪ اﻟﺨﺼﺎﺋﺺ ‪ALIGN, DIR.‬‬ ‫ﻓﺎﻟﺨﺎﺻﯿﺔ ‪ ALIGN‬ﺗﺤﺪد ﻣﺤﺎذاة اﻟﻔﻘﺮة وﻫﻲ ﺗﺄﺧﺬ اﻟﻘﯿﻢ( ‪ Left, Center, Right‬راﺟﻊ اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ )‬ ‫وأوﺿﺤﻬﺎ ﺑﺎﻷﻣﺜﻠﺔ اﻟﺘﺎﻟﯿﺔ‪:‬‬‫>‪ </P‬ﻫﺬه اﻟﻔﻘﺮة ﻣﻨﺴﻘﻪ إﱄ اﻟﯿﺴﺎر >\"‪<P Align=\"left‬‬‫ﻫﺬه اﻟﻔﻘﺮه ﻣﻨﺴﻘﺔ إﻟﻲ اﻟﯿﺴﺎر‬

‫>‪</P‬اﻟﯿﻤﲔ ﻫﺬه اﻟﻔﻘﺮة ﻣﻨﺴﻘﻪ إﱄ >\"‪<P Align=\"right‬‬ ‫ﻫﺬه اﻟﻔﻘﺮه ﻣﻨﺴﻘﺔ إﻟﻲ اﻟﯿﻤﯿﻦ‬‫>‪</P‬اﳌﻨﺘﺼﻒ ﻫﺬه اﻟﻔﻘﺮة ﻣﻨﺴﻘﻪ إﱄ >\"‪<P Align=\"center‬‬ ‫ﻫﺬه اﻟﻔﻘﺮه ﻣﻨﺴﻘﺔ إﻟﻲ اﻟﻤﻨﺘﺼﻒ‬ ‫ﻛﺬﻟﻚ ﻟﺘﻮﺳﯿﻂ اﻟﻔﻘﺮات أو اﻟﻜﺎﺋﻨﺎت ﺑﺸﻜﻞ ﻋﺎم ﻓﻲ اﻟﺼﻔﺤﺔ ﻧﺴﺘﻄﯿﻊ اﺳﺘﺨﺪام اﻟﻮﺳﻮم‬ ‫>‪<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‬‬ ‫وﺗﻜﻮن اﻟﻨﺘﯿﺠﺔ‪:‬‬ ‫وﻓﻜﺮة ﻫﺬه اﻟﺪروس ﺟﺎءت ﻧﺘﯿﺠﺔ ﻟﻤﺎ ﻟﻤﺴﺘﻪ ﺧﻼل اﺳﺘﺨﺪاﻣﻲ ﻟﺸﺒﻜﺔ اﻹﻧﺘﺮﻧﺖ ﺑﺸﻜﻞ ﻋﺎم‪ ،‬واﻟﺒﺤﺚ ﻋﻦ اﻟﻤﻮاﻗﻊ‬ ‫اﻟﻌﺮﺑﯿﺔ ﻓﯿﻬﺎ ﺑﺸﻜﻞ ﺧﺎص‪ .‬ﻓﻌﻨﺪﻣﺎ ﺑﺪأت ﺑﺘﻌﻠﻢ ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ‪ ،‬ﻟﻢ ﯾﻜﻦ ﻫﻨﺎك ﻣﺸﻜﻠﺔ ﻓﻲ اﻟﺤﺼﻮل ﻋﻠﻰ‬‫اﻟﻤﺼﺎدر أو اﻟﻤﻮاﻗﻊ اﻟﺘﻌﻠﯿﻤﯿﺔ اﻟﺘﻲ أﺣﺘﺎﺟﻬﺎ وﻣﻦ ﺧﻼل اﻹﻧﺘﺮﻧﺖ ﻧﻔﺴﻬﺎ‪ .‬ﻟﻜﻦ اﻟﻤﺸﻜﻠﺔ ﻫﻲ داﺋﻤًﺎ ﻓﻲ اﻟﺤﺼﻮل ﻋﻠﻰ‬ ‫ﺗﻠﻚ اﻟﻤﺼﺎدر ﺑﺎﻟﺼﻮرة اﻟﺘﻲ ﺗﺘﻨﺎﺳﺐ واﺣﺘﯿﺎﺟﺎﺗﻨﺎ ﻛﻤﺴﺘﺨﺪﻣﯿﻦ ﻋﺮب ‪....‬‬ ‫وﺑﺎﻟﻄﺒﻊ ﻟﯿﺲ ﺷﺮﻃﺎً أن ﺗﺴﺘﺨﺪم ﻫﺬا اﻟﻮﺳﻮم ﻣﻊ اﻟﻔﻘﺮات اﻟﻤﻘﺘﺒﺴﺔ ﻓﻘﻂ‪ .‬ﻓﯿﻤﻜﻦ ﻣﺜ ًﻼ وﺿﻌﻬﺎ ﻓﻲ ﺑﺪاﯾﺔ وﻧﻬﺎﯾﺔ ﻛﻞ‬ ‫ﺻﻔﺤﺔ ﻣﻦ ﺻﻔﺤﺎت ﻣﻮﻗﻌﻚ ‪.‬وﺑﺎﻟﺘﺎﻟﻲ ﯾﻈﻬﺮ اﻟﻨﺺ ﺑﻌﯿﺪاً ﻗﻠﯿﻼً ﻋﻦ ﺣﺎﺷﯿﺔ اﻟﺼﻔﺤﺔ ﻓﻬﺬا أﻓﻀﻞ ﻣﻦ أن ﯾﻜﻮن‬ ‫ﻣﻼﺻﻘًﺎ ﻟﻬﺎ وأﺟﻤﻞ ‪.‬‬ ‫واﻵن ﺗﺄﻣﻞ ﻫﺬا اﻟﺸﻜﻞ وﺣﺎول أن ﺗﺴﺘﻨﺘﺞ ﻛﯿﻒ ﻗﻤﺖ ﺑﺈﻋﺪاده‪!...‬؟‬ ‫‪DCBA‬‬ ‫‪HGFE‬‬ ‫‪LKJI‬‬ ‫‪PONM‬‬ ‫‪TSRQ‬‬ ‫رﺑﻤﺎ ﺗﻮﺻﻠﺖ إﻟﻰ أﻧﻲ اﺳﺘﺨﺪﻣﺖ ﻋﺪدًا ﻛﺒﯿﺮاً ﻣﻦ وﺳﻮم اﻟﻔﺮاﻏﺎت ;‪ &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‬‬‫ﺗﻜﻮن §‬ ‫ﺗﻜﻮن ‪o‬‬ ‫‪i.‬‬ ‫‪I.‬‬ ‫‪a. A.‬‬‫ﻋﻠﻲ §‬ ‫ﻋﻠﻲ ‪o‬‬ ‫‪ii.‬‬ ‫‪II.‬‬ ‫‪b. B.‬‬ ‫‪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 You get this ‫ﯾﺠﻌﻞ اﻟﻨﺺ ﻣﺮﻧﺨﻔﺾ‬From <SUP>this</SUP> ‫ﯾﺠﻌﻞ اﻟﻨﺺ ﻣﺮﺗﻔﻊ‬<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> Html4Arabtop, middle ‫ وﻫﻲ ﺗﺄﺧﺬ اﻟﻘﯿﻢ‬،‫ ﻟﺘﺤﺪﯾﺪ اﻟﻤﺤﺎذاة اﻟﻌﻤﻮدﯾﺔ ﻟﻠﻨﺺ اﻟﺬي ﻗﺪ ﯾﺘﻮاﺟﺪ ﻋﻠﻰ ﺟﺎﻧﺒﻲ اﻟﻼﻓﺘﺔ‬:ALIGN .‫ وﻫﻲ اﻹﻓﺘﺮاﺿﯿﺔ أي اﻟﺘﻲ ﺗﻄﺒﻖ ﺗﻠﻘﺎﺋﯿﺎً ﻋﻨﺪ ﻋﺪم إدراج ﻫﺬه اﻟﺨﺎﺻﯿﺔ‬bottom ‫و‬Welcome to<MARQUEE BGCOLOR=\"#99CCFF\" HEIGHT=\"80\" WIDTH=\"40%\">Html4Arab</MARQUEE>Have a good time. Html4Arab Have a good time.Welcome toWelcome to<MARQUEE BGCOLOR=\"#99CCFF\" HEIGHT=\"80\" WIDTH=\"40%\" ALIGN=\"middle\">Html4Arab</MARQUEE>Have a good time. Html4Arab Have a good time.Welcome toWelcome to<MARQUEE BGCOLOR=\"#99CCFF\" HEIGHT=\"80\" WIDTH=\"40%\" ALIGN=\"top\">

‫‪Html4Arab‬‬‫>‪</MARQUEE‬‬‫‪Have a good time.‬‬ ‫‪Html4Arab‬‬ ‫‪Have a good time.‬‬‫‪Welcome to‬‬ ‫‪ :HSPACE‬ﻟﺘﺤﺪﯾﺪ اﻟﻤﺴﺎﻓﺔ اﻟﻔﺎرﻏﺔ اﻟﺘﻲ ﺗﻔﺼﻞ ﺑﯿﻦ اﻟﻼﻓﺘﺔ وﺑﯿﻦ اﻟﻨﺺ اﻟﻤﻮﺟﻮد ﻋﻠﻰ ﺟﺎﻧﺒﯿﻬﺎ‬‫‪Welcome to‬‬‫>\"‪<MARQUEE BGCOLOR=\"#99CCFF\" HEIGHT=\"80\" WIDTH=\"40%\" HSPACE=\"30‬‬‫‪Html4Arab‬‬‫>‪</MARQUEE‬‬‫‪Have a good time.‬‬ ‫‪Html4Arab‬‬ ‫‪Have a good time.‬‬‫‪Welcome to‬‬‫‪ :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‬إﻟﻰ اﻟﺘﺤﻜﻢ ﺑﺤﺠﻢ اﻟﺼﻮر وﻋﺮﺿﻬﺎ ﺑﻨﺴﺐ ﻣﺼﻐﺮة ﺣﺴﺐ ﻣﺎ ﻫﻮ‬ ‫ﻣﻄﻠﻮب؟‬ ‫إن اﺳﺘﺨﺪاﻣﻚ ﻟﻬﺬه اﻟﺨﺼﺎﺋﺺ ﯾﺆدي إﻟﻰ إﻇﻬﺎر اﻟﺼﻮرة ﺑﺤﯿﺚ ﺗﺒﺪو ﻣﺼﻐﺮة‪ ،‬ﻟﻜﻨﻚ ﻓﻌﻠﯿًﺎ ﻗﻤﺖ ﺑﺈﺟﺒﺎر ﻣﺘﺼﻔﺢ‬ ‫اﻟﺰاﺋﺮ ﻋﻠﻰ ﺗﺤﻤﯿﻞ اﻟﺼﻮرة ﺑﺎﻟﺤﺠﻢ واﻷﺑﻌﺎد اﻷﺻﻠﯿﺔ ﺛﻢ ﻋﺮﺿﻬﺎ ﺑﺎﻟﺤﺠﻢ اﻟﻤﺼﻐﺮ أي أﻧﻚ ﻓﻲ اﻟﻨﻬﺎﯾﺔ ﻟﻢ ﺗﺤﻘﻖ‬ ‫اﻟﻐﺎﯾﺔ ﻣﻦ وﺟﻮد ﻫﺬه اﻟﻌﯿﻨﺎت‪.‬‬‫اﻟﻬﺪف اﻷﺳﺎﺳﻲ ‪ -:‬ﻫﻮ ﻋﺮض ﺻﻔﺤﺔ ﻣﻠﯿﺌﻪ ﺑﺎﻟﺼﻮر اﻟﻤﺼﻐﺮة و ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﯿﻬﺎ ﺗﺤﺼﻞ ﻋﻠﯿﻬﺎ ﻣﻜﺒﺮة أو ﻓﻲ‬ ‫ﺣﺠﻤﻬﺎ اﻟﻄﺒﯿﻌﻲ أﺿﻐﻂ ﻋﻠﻲ أي ﻣﻦ اﻟﺼﻮرﺗﯿﻦ اﻟﺘﺎﻟﯿﺘﯿﻦ و ﺳﺘﻌﺮف ﻣﺎ أﻗﺼﺪ‬