SlideShare ist ein Scribd-Unternehmen logo

Teach yourself html_ar

•
•
Faculty of Science , portsaid Univeristy
Faculty of Science , portsaid Univeristy
Bildung
1 von 101
Downloaden Sie, um offline zu lesen
‫اﻟﻤﺮﺟﻊ اﻟﻜﺎﻣﻞ ﻓﻲ ‪HTML‬‬ ‫ﻋﻦ ﻣﻮﻗﻊ‬ ‫‪HTML4ARAB‬‬ ‫‪BY‬‬ ‫‪IsLmicHackers@HotMail.com‬‬ ‫اﻟـﺒـﺪاﯾﻪ ﻫﻨﺎ‬ ‫> أﺑﺪأ ﻫﻨﺎ‬ ‫ﻣﺎ ﻫﻲ ال? ‪HTML‬‬ ‫ﻣﺎذا أﺣﺘﺎج ؟‬ ‫>دروس ﺳﺮﯾﻌﻪ ﻟﻠﻤﺒﺘﺪﺋﯿﻦ‬ ‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬ ‫اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ‬ ‫اﻟﻮﺻﻼت اﻷﺳﺎﺳﯿﻪ‬ ‫أﺳﺎﺳﯿﺎت إدراج اﻟﺼﻮر‬ ‫ﺧﻮاص اﻟﺼﻔﺤﺔ‬ ‫ﻣﺮﺟﻊ اﻟﻤﺴﺎﺣﺎت اﻟﻤﺠﺎﻧﯿﻪ‬ ‫اﻟﺪروس اﻟﻤﺘﺨﺼﺼﻪ‬ ‫> اﻟﻨﺺ‬ ‫اﻟﻌﻨﺎوﯾﻦ وﺣﺠﻢ اﻟﺨﻄﻮط‬ ‫أﺷﻜﺎل وأﻟﻮان اﻟﺨﻄﻮط‬ ‫اﻟﺮﻣﻮز اﻟﺨﺎﺻﻪ‬ ‫اﻟﻮﺻﻼت‬ ‫اﻟﻘﻮاﺋﻢ‬ ‫ﻗﺎﺋﻤﺔ ﺑﺠﻤﯿﻊ وﺳﻮم اﻟﻨﺺ‬ ‫اﻟﻨﺺ اﻟﻤﺘﺤﺮك‬
‫> اﻟﺼﻮر‬ ‫اﻟﺼﻮر واﻟﺮﺳﻮﻣﺎت‬ ‫أﻧﻮاع اﻟﻤﻠﻔﺎت‬ ‫اﻟﺼﻮرة ذات اﻟﺒﯿﻜﺴﻞ اﻟﻮاﺣﺪ‬ ‫‪Thumbnails‬‬ ‫ﺧﺮاﺋﻂ اﻟﺼﻮر‬ ‫اﻟﻮﺳﺎﺋﻂ اﻟﻤﺘﻌﺪدة‬ ‫أﺳﻤﺎء اﻷﻟﻮان‬ ‫612ﻛﻮد ﻟﻸﻟﻮان‬ ‫ﻣﻜﻌﺐ اﻷﻟﻮان‬ ‫> اﻟﺠﺪاول‬ ‫أﺳﺎﺳﯿﺎت اﻟﺠﺪاول‬ ‫اﻟﺠﺪاول اﻟﻤﺘﻘﺪﻣﻪ ) ﻟﻠﻤﺤﺘﺮﻓﯿﻦ)‬ ‫اﻟﺠﺪاول اﻟﻤﺘﺪاﺧﻠﻪ واﻟﻤﺴﺘﺪﯾﺮة ) ﻟﻠﻤﺤﺘﺮﻓﯿﻦ)‬ ‫> اﻷﻃﺮ‬ ‫أﺳﺎﺳﯿﺎت اﻷﻃﺮ‬ ‫اﻷﻃﺮ اﻟﻤﺘﻘﺪﻣﻪ‬ ‫ﺗﺎﺑﻊ اﻷﻃﺮ اﻟﻤﺘﻘﺪﻣﺔ‬ ‫> اﻟﻨﻤﺎذج‬ ‫اﻟﻨﻤﺎذج اﻷﺳﺎﺳﯿﻪ‬ ‫ﺗﺎﺑﻊ اﻟﻨﻤﺎذج اﻷﺳﺎﺳﯿﻪ‬ ‫ﺗﻨﺴﯿﻖ اﻟﻨﻤﺎذج‬ ‫ﺻﻮرة ﻟﻠﺰر‪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:htmlfilesFirstPage.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‬‬ ‫ﻣﻼﺣﻈﺔ :- ﻫﺬا اﻟﻜﻮد ﻟﻠﻮن اﻷﺑﯿﺾ ﻓﺄذا وددت أن ﺗﻜﻮن ﺧﻠﯿﻔﯿﻪ ﺻﻔﺤﺘﻚ ﺑﻬﺬا اﻟﻠﻮن ﻻﺑﺪ ﻣﻦ ﻛﺘﺎﺑﻪ ﻫﺬا اﻟﻜﻮد ،‬ ‫ﻫﺬا ﺑﺎﻟﺮﻏﻢ ﻣﻦ أن اﻟﻠﻮن اﻷﺑﯿﺾ ﻫﻮ اﻟﻠﻮن اﻷﺳﺎﺳﻲ ﻟﻠﺼﻔﺤﺎت وﻟﻜﻦ ﺑﻌﺾ اﻟﻤﺴﺘﻌﺮﺿﺎت ﯾﻜﻮن اﻟﻠﻮن اﻷﺳﺎﺳﻲ‬ ‫ﻟﻬﺎ ﻫﻮ اﻟﺮﻣﺎدي‬ ‫اﻟﻨﺺ‬ ‫ﻻ ﯾﺨﺘﻠﻒ ﻛﺜﯿﺮا ﻛﻮد اﻟﻨﺺ ﻋﻦ ﻛﻮد اﻟﺨﻠﻔﯿﻪ ﻟﻜﻦ ﻧﻨﺼﺢ داﺋﻤﺎ ﺑﺘﺮك ﻟﻮن اﻟﺨﻠﻔﯿﻪ ﻋﻠﻲ اﻟﻠﻮن اﻷﺳﺎﺳﻲ وﻫﻮ اﻷﺳﻮد‬ ‫ﺣﯿﺚ أﻧﻪ اﻷﺳﻬﻞ ﻓﻲ اﻟﻘﺮاءه و إﻟﯿﻚ اﻟﻜﻮد‬ ‫"000000#"=‪TEXT‬‬ ‫اﻟﻮﺻﻠﻪ‬ ‫ﺑﺎﻟﻄﺒﻊ ﺗﻈﻬﺮ ﻟﻚ ﻛﻞ اﻟﻮﺻﻼت ﺑﺎﻟﻠﻮن اﻷزرق ، ﻟﻜﻦ ﯾﻤﻜﻨﻚ أن ﺗﻐﯿﺮ ﻫﺬا إﻟﻲ أي ﻟﻮن ﯾﺤﻠﻮ ﻟﻚ و ﻫﺬا ﻫﻮ اﻟﻜﻮد‬ ‫"‪LINK="#FF00FF‬‬ ‫اﻟﻮﺻﻠﻪ اﻟﻤﺰارة‬ ‫ﻋﻨﺪﻣﺎ ﺗﻀﻐﻂ ﻋﻠﻲ أي وﺻﻠﻪ ﺛﻢ ﺗﻌﻮد ﻣﺮة أﺧﺮي ﻟﻠﺼﻔﺤﺔ اﻟﺘﻲ ﺿﻐﻂ ﻓﯿﻬﺎ ﻋﻠﻲ ﺗﻠﻚ اﻟﻮﺻﻠﻪ ﻓﺄﻧﻚ ﺗﻼﺣﻆ ﺗﻐﯿﺮ‬ ‫ﺗﻠﻚ اﻟﻮﺻﻠﻪ إﻟﻲ اﻟﻠﻮن اﻟﺒﻨﻔﺴﺠﻲ و ﺑﺎﻟﻄﺒﻊ ﺗﺴﺘﻄﯿﻊ أن ﺗﻐﯿﯿﺮ ﻫﺬا اﻟﻠﻮن و إﻟﯿﻚ اﻟﻜﻮد‬ ‫"660066#"=‪VLINK‬‬ ‫اﻟﻮﺻﻠﻪ اﻟﻨﺸﻄﻪ‬ ‫ﻻ أﻋﺮف ﻫﻞ ﻗﺎﺑﻠﺖ ﻣﺜﻞ ﻫﺬا أم ﻻ وﻟﻜﻦ ﺑﺈﺧﺘﺼﺎر ﻋﻨﺪﻣﺎ ﺗﻘﻮم ﺑﺎﻟﻀﻐﻂ ﻋﻠﻲ وﺻﻠﻪ ﺛﻢ ﺗﺪﺧﻞ اﻟﺼﻔﺤﺔ وﺗﺠﺪ ﺑﻬﺎ‬ ‫ﻧﻔﺲ اﻟﻠﻮﺻﻠﻪ ﻟﻜﻦ ﻟﻮﻧﻬﺎ ﻗﺪ ﺗﺤﻮل إﻟﻲ اﻟﻠﻮن اﻷﺳﻮد ﻣﺜﻼ وﻻ ﺗﺴﺘﻄﯿﻊ أن ﺗﻀﻐﻂ ﻋﻠﯿﻬﺎ ﻣﺮة أﺧﺮي ﻋﻨﺪﻫﺎ ﺗﻜﻮن‬ ‫ﻫﺬه اﻟﻮﺻﻠﻪ ﻫﻲ اﻟﻮﺻﻠﻪ اﻟﻨﺸﻄﺔ أي اﻟﺼﻔﺤﺔ اﻵن ﻫﻲ اﻟﺼﻔﺤﺔ اﻟﻌﺎﻣﻠﺔ ﻟﻬﺬه اﻟﻮﺻﻠﻪ و ﻫﺬا ﻫﻮ اﻟﻜﻮد‬ ‫"0000‪ALINK="#FF‬‬ ‫ﺻﻮرة اﻟﺨﻠﻔﯿﻪ‬
‫ﺗﺮﯾﺪ أن ﺗﻀﻊ ﺻﻮرة ﻓﻲ اﻟﺨﻠﻔﯿﻪ !!! ﻓﻜﺮة ﺟﯿﺪة ﺧﺬ ﻫﺬه اﻟﺨﺎﺻﯿﻪ و أﺳﺘﺨﺪﻣﻬﺎ ﻟﻌﻤﻞ اﻟﺼﻮرة ﻛﺎﺧﻠﻔﯿﻪ و ﺿﻊ‬ ‫اﻟﻘﯿﻤﺔ ﻛﻤﺎ ﺗﻔﻌﻞ ﻓﻲ إدراج اﻟﺼﻮرة ‪ ) ، SRC‬إذا ﻛﻨﺖ ﻻ ﺗﺪري ﻛﯿﻒ أﻗﺮأ اﻟﺒﺤﺚ اﻟﺪرس اﻟﺨﺎص ﺑﺎﻟﺼﻮر( .‬ ‫ﯾﻤﻜﻨﻚ أﯾﻀﺎ أن ﺗﺴﺘﺨﺪم ﺻﻮرة ﻣﻦ ﻣﻮﻗﻊ أﺧﺮ ﻋﻦ ﻃﺮﯾﻖ وﺿﻊ اﻟﻮﺻﻠﻪ اﻟﺨﺎﺻﺔ ﺑﻪ ﻟﺪﯾﻚ ، ﺗﺴﺘﻄﯿﻊ أن ﺗﺴﺘﺨﺪم‬ ‫ﻣﺜﻼ ﻫﺬه اﻟﺼﻮرة اﻟﺨﺎص ﺑﻤﻮﻗﻌﻨﺎ ‪ Downloads Free‬ﻓﻘﻂ ﺿﻊ ﻫﺬا اﻟﻜﻮد‬ ‫"‪BACKGROUND="http://www.geocities.com/asdh4/images/bak.jpg‬‬ ‫ﯾﺠﺐ أن ﺗﻌﺮف أن أي ﺻﻮرة ﺳﻮف ﺗﺨﺘﺎره ﺳﺘﻘﻮم ﺑﺘﻜﺮار ﻧﻔﺴﻬﺎ ﻓﻲ ﻣﻞء اﻟﻤﺴﺘﻌﺮض وﻟﻬﺬا ﯾﺠﺐ أن ﺗﺨﺘﺎر‬ ‫ﺗﻜﻤﻞ ﻧﻔﺴﻬﺎ ﺑﻤﻌﻨﻲ أن ﺗﻜﻮن اﻟﺼﻮرة ﻟﻮﺣﺪﻫﺎ ﻻ ﺗﺸﻜﻞ ﺷﻲء وﻟﻜﻦ ﻋﻨﺪ ﺗﻜﺮاراﻫﺎ ﺗﻜﻮن ﻣﻨﻈﺮ ﺟﯿﺪ،‬ ‫و ﯾﻮﺟﺪ أﯾﻀﺎ ﺧﺎﺻﯿﻪ ﺗﺠﻌﻞ اﻟﺼﻮرة ﻛﻌﻼﻣﺔ ﻣﺎﺋﯿﻪ ‪ Watermark‬ﺑﻤﻌﻦ أن ﺗﻜﻮن اﻟﺼﻮرة ﺛﺎﺑﺘﺔ وﻻ ﯾﺤﺪث ﻟﻬﺎ‬ ‫‪ Scroll‬و ﻟﻬﺬه اﻟﺨﺎﺻﯿﺔ ﺿﻊ ﻫﺬا اﻟﻜﻮد داﺧﻞ ‪Body‬‬ ‫"‪BGPROPERTIES="FIXED‬‬ ‫اﻟﻬﻮاﻣﺶ‬ ‫ﯾﻮﺟﺪ ﻧﻮﻋﯿﻦ ﻣﻦ اﻟﻬﻮاﻣﺶ ﻫﻮاﻣﺶ ﺟﺎﻧﺒﯿﻪ وﻫﻮاﻣﺶ أﻓﻘﯿﻪ ، وﻟﻜﻦ اﻟﻤﺴﺘﻌﺮﺿﺎن اﻷﺳﺎﺳﯿﺎن ﯾﺴﺘﺨﺪﻣﺎن ﻛﻮدان‬ ‫ﻣﺨﺘﻠﻘﺎن وﻟﻬﺬا ﻋﻨﺪﻣﺎ ﺗﻘﻮم ﺑﺘﻐﯿﯿﺮ أﺣﺪﻫﻤﺎ ﯾﺠﺐ ﺗﻐﯿﯿﺮ اﻷﺧﺮ ﺑﻨﻔﺲ اﻟﻄﺮﯾﻘﺔ‬ ‫"0"=‪TOPMARGIN‬‬ ‫"0"=‪ LEFTMARGIN‬و‬ ‫و ﻫﺬه ﻫﻲ اﻟﺼﯿﻐﺔ ﻟﻠـ ‪Internet Explorer‬‬ ‫"0"=‪ MARGINWIDTH‬و "0"=‪MARGINHEIGHT‬‬ ‫و ﻫﺬه ﻫﻲ اﻟﺼﯿﻐﺔ ﻟﻠـ ‪Netscape‬‬ ‫ﻋﻠﻲ اﻟﺮﻏﻢ ﻣﻦ أن أﻛﻮاد اﻟﻤﺴﺘﻌﺮﺿﺎن ﻣﺨﺘﻠﻔﺎن إﻻ أن وﺣﺪات اﻟﻘﯿﺎس واﺣﺪه وﻫﻲ اﻟﺒﯿﻜﺴﻞ و ﻟﻬﺬا إذا أرﺗﺪ أن‬ ‫ﯾﻜﻮن اﻟﻤﻘﯿﺎس ﺛﺎﺑﺖ ﻓﻲ ﻛﻼﻣﻦ اﻟﻤﺴﺘﻌﺮﺿﺎن ﻓﻘﻂ أﺧﺘﺎر ﻧﻔﺲ اﻟﻘﯿﻤﺔ .‬ ‫أرﻧﻲ اﻟﻜﻮد ﻛﺎﻣﻼ‬ ‫واﻵن اﻟﻮﺳﻢ اﻟﻜﺎﻣﻞ ﻟﻠـ‪ Body‬ﯾﻜﻮن ﻣﺜﻞ ﻫﺬا اﻟﺸﻜﻞ ﻣﺜﻼ‬ ‫اﻟﻮﺳﻢ اﻟﻜﺎﻣﻞ‬ ‫"000000#"=‪<BODY BGCOLOR="#FFFFFF" BACKGROUND="bubbles.gif" TEXT‬‬ ‫"‪LINK="#3399FF" VLINK="#9966FF" ALINK="#000000" BGPROPERTIES="FIXED‬‬ ‫>"0"=‪TOPMARGIN="0" MARGINHEIGHT‬‬ ‫ﻛﻠﻤﺔ ﻋﻠﻲ إﺧﺘﯿﺎر اﻷﻟﻮان‬ ‫ﯾﺠﺐ ﻋﻠﯿﻚ أن ﺗﺨﺘﺎر أﻟﻮان ﺟﺬاب ﻣﺘﻨﺎﺳﻘﻪ ﻣﻊ ﺑﻌﻀﻬﺎ اﻟﺒﻌﺾ و أن ﺗﺒﻌﺪ ﺗﻤﺎﻣﺎ ﻋﻦ اﻷﻟﻮان اﻟﻔﺎﻗﻌﺔ ﻓﺨﺘﺎر اﻷﻟﻮان‬ ‫اﻟﻬﺎدﺋﻪ و اﻟﻤﺨﻤﻠﯿﻪ ﻓﺎﻟﻤﻮاﻗﻊ اﻟﻤﻨﺘﺸﺮه واﻟﻤﺸﻬﻮر ﺗﺨﺘﺎر أﻟﻮان ﺑﺴﯿﻂ ﻛﻲ ﺗﺠﻌﻞ اﻟﺰاﺋﺮ أﻛﺜﺮ راﺣﺔ ﻋﻨﺪ دﺧﻮﻟﻪ‬ ‫ﻟﻤﻮﻗﻊ ، ﻛﻤﺎ ﺗﺠﻨﺐ ﻋﻨﺪ أﺧﺘﯿﺎرك ﻟﻠﺼﻮرة اﻟﺨﻠﻔﯿﻪ أن ﺗﺨﺘﺎر ﺧﻠﻔﯿﻪ ذات أﻟﻮان ﺑﺎﻫﺘﻪ وﻟﻜﻦ ﺟﻤﯿﻠﻪ ﺣﺘﻲ ﯾﺘﺴﻨﻲ‬ ‫ﻟﻠﻘﺎرء رؤﯾﻪ اﻟﻨﺺ و ﻻﺗﺨﺘﺎر ﻟﻮن ﻟﻠﻨﺺ ﻗﺮﯾﺐ ﻣﻦ ﻟﻮن اﻟﺨﻠﻔﯿﻪ أو ﻟﻮن ﺻﻮرة اﻟﺨﻠﻔﯿﻪ ﻓﻬﺬا ﯾﺰﯾﺪ ﺻﻌﻮﺑﻪ ﻋﻠﻲ‬ ‫اﻟﻘﺎريء ﻣﻦ رؤﯾﻪ اﻟﻨﺺ ﺑﻮﺿﻮح ﻓﺎﻟﻨﺺ ﺳﯿﺨﺘﻔﻲ ﻣﻊ ﻟﻮن اﻟﺨﻠﻔﯿﻪ اﻟﻘﺮﯾﺐ ﻣﻦ ﻟﻮﻧﻪ .‬
‫ﺣﺎول ﻋﺪم إﺳﺘﺨﺪام ﺻﻮر ﻟﻠﺨﻠﻔﯿﻪ ﻣﺮﻋﺒﻪ أو أﻟﻮان ﺳﺎﺧﻨﺔ ﻣﺜﻞ اﻷﺣﻤﺮ ﻣﺜﻼ ﺣﺘﻲ ﻻ ﯾﺤﺪث إرﺗﻄﺎم ﺑﺼﺮي ﻟﻠﺰاﺋﺮ‬ ‫ﺑﺄﻟﻮان ﻣﻮﻗﻊ إﻟﻘﻲ ﻧﻈﺮه ﻋﻠﻲ ﻫﺬا اﻟﻤﻮﻗﻊ ﻟﻜﻲ ﺗﻔﻬﻢ ﻣﺎذا أﻗﺼﺪ « ‪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‬‬ ‫ﻓﻲ اﻟﺒﺪاﯾﻪ ﻧﻮد أن ﻧﻘﻮل أن وﺳﻢ اﻟﻌﻨﻮان ﻗﺪ ﻗﺴﻢ ﺑﻄﺮﯾﻘﺔ ﻣﺘﺘﺎﻟﯿﻪ ﺑﺤﯿﺚ ﯾﻮﺟﺪ ٦ﻣﺴﺘﻮﯾﺎت ﻣﺨﺘﻠﻔﺔ ﻣﻦ اﻟﻌﻨﺎوﯾﻦ ﻣﻦ‬ ‫أﻛﺒﺮ ﻣﺴﺘﻮي وﯾﺄﺧﺬ اﻟﻮﺳﻢ >1‪ <H‬إﻟﻲ أﺻﻐﺮ ﻣﺴﺘﻮي وﯾﺄﺧﺬ اﻟﻮﺳﻢ >6‪ <H‬دﻋﻨﺎ ﻧﺮﯾﻚ ﻣﺜﺎل اﻵن‬ ‫اﻟـﺘـﺄﺛـﯿـﺮ‬ ‫اﻟـﻮﺳـﻢ‬ ‫1 ‪Heading‬‬ ‫>1‪<H1>Heading 1</H‬‬ ‫2 ‪Heading‬‬ ‫>2‪<H2>Heading 2</H‬‬ ‫3 ‪Heading‬‬ ‫>3‪<H3>Heading 3</H‬‬ ‫4 ‪Heading‬‬ ‫>4‪<H4>Heading 4</H‬‬ ‫5 ‪Heading‬‬ ‫>5‪<H5>Heading 5</H‬‬ ‫6 ‪Heading‬‬ ‫>6‪<H6>Heading 6</H‬‬ ‫ﻛﻞ ﻣﺎﻋﻠﯿﻚ ﻓﻌﻠﻪ ﻫﻮ أن ﺗﻀﻊ اﻟﻨﺺ داﺧﻞ اﻟﻮﺳﻢ ﻛﻤﺎ ﺗﺮي ﻓﻲ اﻟﻮﺳﻮم اﻟﺴﺎﺑﻘﻪ وﻛﻤﺎ ﺗﺮي اﻟﻨﺺ ﺳﯿﻈﺮ واﺿﺢ‬ ‫وﻛﺒﯿﺮ وﻟﻜﻦ ﯾﺠﺐ أن ﺗﻼﺣﻆ ان اﻟﻌﻨﻮان داﺋﻤﺎ ﯾﻜﻮن ﻣﻨﻔﺼﻞ ﻋﻦ اﻟﻨﺺ اﻷﺳﺎﺳﻲ ﺑﻤﻌﻨﻲ أﻧﻪ ﯾﻜﻮن ﻓﻲ اﻟﺒﺪاﯾﻪ أو‬ ‫رأس اﻟﻔﻘﺮة ، ﯾﺠﺐ ﻋﻠﯿﻚ أن ﺗﻐﯿﯿﺮ ﺣﺠﻢ اﻟﺨﻂ وﻟﯿﺲ اﻟﻌﻨﻮان وﻫﻨﺎ ﻧﺄﺗﻲ إﻟﻲ ﺗﻐﯿﯿﺮ ﺣﺠﻢ اﻟﺨﻄﻮط.‬ ‫>‪<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;
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar
Teach yourself html_ar

Empfohlen

GUI
GUI GUI
GUI Faculty of Science , portsaid Univeristy
 
Algorithms python arraylistmatrix
Algorithms python arraylistmatrixAlgorithms python arraylistmatrix
Algorithms python arraylistmatrixFaculty of Science , portsaid Univeristy
 
Library Management System
Library Management SystemLibrary Management System
Library Management SystemFaculty of Science , portsaid Univeristy
 
Library Management System
Library Management SystemLibrary Management System
Library Management SystemAditya Shah
 
Library mangement system project srs documentation.doc
Library mangement system project srs documentation.docLibrary mangement system project srs documentation.doc
Library mangement system project srs documentation.docjimmykhan
 
compiler vs interpreter
compiler vs interpretercompiler vs interpreter
compiler vs interpreterFaculty of Science , portsaid Univeristy
 
الحسن بن الهيثم
الحسن بن الهيثمالحسن بن الهيثم
الحسن بن الهيثمFaculty of Science , portsaid Univeristy
 
الحسن بن الهيثم
الحسن بن الهيثمالحسن بن الهيثم
الحسن بن الهيثمFaculty of Science , portsaid Univeristy
 

Empfohlen

GUI
GUI GUI
GUI Faculty of Science , portsaid Univeristy
 
Algorithms python arraylistmatrix
Algorithms python arraylistmatrixAlgorithms python arraylistmatrix
Algorithms python arraylistmatrixFaculty of Science , portsaid Univeristy
 
Library Management System
Library Management SystemLibrary Management System
Library Management SystemFaculty of Science , portsaid Univeristy
 
Library Management System
Library Management SystemLibrary Management System
Library Management SystemAditya Shah
 
Library mangement system project srs documentation.doc
Library mangement system project srs documentation.docLibrary mangement system project srs documentation.doc
Library mangement system project srs documentation.docjimmykhan
 
compiler vs interpreter
compiler vs interpretercompiler vs interpreter
compiler vs interpreterFaculty of Science , portsaid Univeristy
 
الحسن بن الهيثم
الحسن بن الهيثمالحسن بن الهيثم
الحسن بن الهيثمFaculty of Science , portsaid Univeristy
 
الحسن بن الهيثم
الحسن بن الهيثمالحسن بن الهيثم
الحسن بن الهيثمFaculty of Science , portsaid Univeristy
 
الصف الثاني الاعدادي -علوم -الموجات .pptx
الصف الثاني الاعدادي -علوم -الموجات .pptxالصف الثاني الاعدادي -علوم -الموجات .pptx
الصف الثاني الاعدادي -علوم -الموجات .pptxv2mt8mtspw
 
درس المنادي للصف الاول الثانوي اعداد إسراء محمد
درس المنادي للصف الاول الثانوي اعداد إسراء محمددرس المنادي للصف الاول الثانوي اعداد إسراء محمد
درس المنادي للصف الاول الثانوي اعداد إسراء محمدجامعة جنوب الوادي
 
عرض تقديمي لعملية الجمع للاطفال ورياض الاطفال
عرض تقديمي لعملية الجمع للاطفال ورياض الاطفالعرض تقديمي لعملية الجمع للاطفال ورياض الاطفال
عرض تقديمي لعملية الجمع للاطفال ورياض الاطفالshamsFCAI
 
محمد احمد سيد احمد محمد سباق عمر يوسف عبدالكريم
محمد احمد سيد احمد محمد سباق عمر يوسف عبدالكريممحمد احمد سيد احمد محمد سباق عمر يوسف عبدالكريم
محمد احمد سيد احمد محمد سباق عمر يوسف عبدالكريمelqadymuhammad
 
السرقات الشعرية إعداد غادة محمد عبد الراضي
السرقات الشعرية إعداد غادة محمد عبد الراضيالسرقات الشعرية إعداد غادة محمد عبد الراضي
السرقات الشعرية إعداد غادة محمد عبد الراضيsalwaahmedbedier
 
1 علم الخلية الم.pdf............................................................
1 علم الخلية الم.pdf............................................................1 علم الخلية الم.pdf............................................................
1 علم الخلية الم.pdf............................................................hakim hassan
 
.. مهارات ادارة الوقت و مهارات تنظيم الوقت.ppt
.. مهارات ادارة الوقت و مهارات تنظيم الوقت.ppt.. مهارات ادارة الوقت و مهارات تنظيم الوقت.ppt
.. مهارات ادارة الوقت و مهارات تنظيم الوقت.pptMarwaElsheikh6
 
سلسلة في التجويد للدورات التمهيدية والمتوسطة والمتقدمة.pdf
سلسلة في التجويد للدورات التمهيدية والمتوسطة والمتقدمة.pdfسلسلة في التجويد للدورات التمهيدية والمتوسطة والمتقدمة.pdf
سلسلة في التجويد للدورات التمهيدية والمتوسطة والمتقدمة.pdfbassamshammah
 
الوعي المعلوماتي لدى العاملين في المكتبات و مراكز المعلومات
الوعي المعلوماتي لدى العاملين في المكتبات و مراكز المعلوماتالوعي المعلوماتي لدى العاملين في المكتبات و مراكز المعلومات
الوعي المعلوماتي لدى العاملين في المكتبات و مراكز المعلوماتMohamadAljaafari
 
أسامه رجب علي أحمد (عرض تقديمي عن الجمل التي لها محل من الاعراب والتي ليس لها...
أسامه رجب علي أحمد (عرض تقديمي عن الجمل التي لها محل من الاعراب والتي ليس لها...أسامه رجب علي أحمد (عرض تقديمي عن الجمل التي لها محل من الاعراب والتي ليس لها...
أسامه رجب علي أحمد (عرض تقديمي عن الجمل التي لها محل من الاعراب والتي ليس لها...Osama ragab Ali
 
شكل الحرف وطريقة الرسم DOC-20240322-WA0012..pdf
شكل الحرف وطريقة الرسم DOC-20240322-WA0012..pdfشكل الحرف وطريقة الرسم DOC-20240322-WA0012..pdf
شكل الحرف وطريقة الرسم DOC-20240322-WA0012..pdfshimaahussein2003
 
دمشق تاريخ معطر بالياسمين - ماهر أسعد بكر
دمشق تاريخ معطر بالياسمين - ماهر أسعد بكردمشق تاريخ معطر بالياسمين - ماهر أسعد بكر
دمشق تاريخ معطر بالياسمين - ماهر أسعد بكرMaher Asaad Baker
 
الصف الثاني الاعدادي - العلوم -الموجات.pdf
الصف الثاني الاعدادي - العلوم -الموجات.pdfالصف الثاني الاعدادي - العلوم -الموجات.pdf
الصف الثاني الاعدادي - العلوم -الموجات.pdfv2mt8mtspw
 
by modar saleh في التصوير التلفزيوني أحجام اللقطات .ppt
by modar saleh في التصوير التلفزيوني أحجام اللقطات .pptby modar saleh في التصوير التلفزيوني أحجام اللقطات .ppt
by modar saleh في التصوير التلفزيوني أحجام اللقطات .pptmodarsaleh3
 
_BIMarabia 45.مجلة بيم ارابيا نمذجة معلومات اليناء
_BIMarabia 45.مجلة بيم ارابيا نمذجة معلومات اليناء_BIMarabia 45.مجلة بيم ارابيا نمذجة معلومات اليناء
_BIMarabia 45.مجلة بيم ارابيا نمذجة معلومات اليناءOmarSelim27
 
"الدعامة الأساسية التي يقوم عليها التقويم الذاتي
"الدعامة الأساسية التي يقوم عليها التقويم الذاتي"الدعامة الأساسية التي يقوم عليها التقويم الذاتي
"الدعامة الأساسية التي يقوم عليها التقويم الذاتيNajlaaAlshareef1
 
عرض تقديمي دور مجتمعات التعليم في تحسين جودة الحياة الجامعية .pdf
عرض تقديمي دور مجتمعات التعليم في تحسين جودة الحياة الجامعية .pdfعرض تقديمي دور مجتمعات التعليم في تحسين جودة الحياة الجامعية .pdf
عرض تقديمي دور مجتمعات التعليم في تحسين جودة الحياة الجامعية .pdfr6jmq4dqcb
 
عرض تقديمي تكليف رقم (1).الرسوم التعليمية
عرض تقديمي تكليف رقم (1).الرسوم التعليميةعرض تقديمي تكليف رقم (1).الرسوم التعليمية
عرض تقديمي تكليف رقم (1).الرسوم التعليميةfsaied902
 
إعادة الإعمار-- غزة فلسطين سوريا العراق
إعادة الإعمار-- غزة فلسطين سوريا العراقإعادة الإعمار-- غزة فلسطين سوريا العراق
إعادة الإعمار-- غزة فلسطين سوريا العراقOmarSelim27
 
عرض تقديمي عن اسم المفعول.امل عرفات محمد العربي جامعة جنوب الوادي تربيه عام ...
عرض تقديمي عن اسم المفعول.امل عرفات محمد العربي جامعة جنوب الوادي تربيه عام ...عرض تقديمي عن اسم المفعول.امل عرفات محمد العربي جامعة جنوب الوادي تربيه عام ...
عرض تقديمي عن اسم المفعول.امل عرفات محمد العربي جامعة جنوب الوادي تربيه عام ...أمل عرفات محمد العربي . جامعة جنوب الوادي -كلية تربيه عام الفرقة الثالثة قسم اللغه العربيه
 
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 

Weitere ähnliche Inhalte

Kürzlich hochgeladen

الصف الثاني الاعدادي -علوم -الموجات .pptx
الصف الثاني الاعدادي -علوم -الموجات .pptxالصف الثاني الاعدادي -علوم -الموجات .pptx
الصف الثاني الاعدادي -علوم -الموجات .pptxv2mt8mtspw
 
درس المنادي للصف الاول الثانوي اعداد إسراء محمد
درس المنادي للصف الاول الثانوي اعداد إسراء محمددرس المنادي للصف الاول الثانوي اعداد إسراء محمد
درس المنادي للصف الاول الثانوي اعداد إسراء محمدجامعة جنوب الوادي
 
عرض تقديمي لعملية الجمع للاطفال ورياض الاطفال
عرض تقديمي لعملية الجمع للاطفال ورياض الاطفالعرض تقديمي لعملية الجمع للاطفال ورياض الاطفال
عرض تقديمي لعملية الجمع للاطفال ورياض الاطفالshamsFCAI
 
محمد احمد سيد احمد محمد سباق عمر يوسف عبدالكريم
محمد احمد سيد احمد محمد سباق عمر يوسف عبدالكريممحمد احمد سيد احمد محمد سباق عمر يوسف عبدالكريم
محمد احمد سيد احمد محمد سباق عمر يوسف عبدالكريمelqadymuhammad
 
السرقات الشعرية إعداد غادة محمد عبد الراضي
السرقات الشعرية إعداد غادة محمد عبد الراضيالسرقات الشعرية إعداد غادة محمد عبد الراضي
السرقات الشعرية إعداد غادة محمد عبد الراضيsalwaahmedbedier
 
1 علم الخلية الم.pdf............................................................
1 علم الخلية الم.pdf............................................................1 علم الخلية الم.pdf............................................................
1 علم الخلية الم.pdf............................................................hakim hassan
 
.. مهارات ادارة الوقت و مهارات تنظيم الوقت.ppt
.. مهارات ادارة الوقت و مهارات تنظيم الوقت.ppt.. مهارات ادارة الوقت و مهارات تنظيم الوقت.ppt
.. مهارات ادارة الوقت و مهارات تنظيم الوقت.pptMarwaElsheikh6
 
سلسلة في التجويد للدورات التمهيدية والمتوسطة والمتقدمة.pdf
سلسلة في التجويد للدورات التمهيدية والمتوسطة والمتقدمة.pdfسلسلة في التجويد للدورات التمهيدية والمتوسطة والمتقدمة.pdf
سلسلة في التجويد للدورات التمهيدية والمتوسطة والمتقدمة.pdfbassamshammah
 
الوعي المعلوماتي لدى العاملين في المكتبات و مراكز المعلومات
الوعي المعلوماتي لدى العاملين في المكتبات و مراكز المعلوماتالوعي المعلوماتي لدى العاملين في المكتبات و مراكز المعلومات
الوعي المعلوماتي لدى العاملين في المكتبات و مراكز المعلوماتMohamadAljaafari
 
أسامه رجب علي أحمد (عرض تقديمي عن الجمل التي لها محل من الاعراب والتي ليس لها...
أسامه رجب علي أحمد (عرض تقديمي عن الجمل التي لها محل من الاعراب والتي ليس لها...أسامه رجب علي أحمد (عرض تقديمي عن الجمل التي لها محل من الاعراب والتي ليس لها...
أسامه رجب علي أحمد (عرض تقديمي عن الجمل التي لها محل من الاعراب والتي ليس لها...Osama ragab Ali
 
شكل الحرف وطريقة الرسم DOC-20240322-WA0012..pdf
شكل الحرف وطريقة الرسم DOC-20240322-WA0012..pdfشكل الحرف وطريقة الرسم DOC-20240322-WA0012..pdf
شكل الحرف وطريقة الرسم DOC-20240322-WA0012..pdfshimaahussein2003
 
دمشق تاريخ معطر بالياسمين - ماهر أسعد بكر
دمشق تاريخ معطر بالياسمين - ماهر أسعد بكردمشق تاريخ معطر بالياسمين - ماهر أسعد بكر
دمشق تاريخ معطر بالياسمين - ماهر أسعد بكرMaher Asaad Baker
 
الصف الثاني الاعدادي - العلوم -الموجات.pdf
الصف الثاني الاعدادي - العلوم -الموجات.pdfالصف الثاني الاعدادي - العلوم -الموجات.pdf
الصف الثاني الاعدادي - العلوم -الموجات.pdfv2mt8mtspw
 
by modar saleh في التصوير التلفزيوني أحجام اللقطات .ppt
by modar saleh في التصوير التلفزيوني أحجام اللقطات .pptby modar saleh في التصوير التلفزيوني أحجام اللقطات .ppt
by modar saleh في التصوير التلفزيوني أحجام اللقطات .pptmodarsaleh3
 
_BIMarabia 45.مجلة بيم ارابيا نمذجة معلومات اليناء
_BIMarabia 45.مجلة بيم ارابيا نمذجة معلومات اليناء_BIMarabia 45.مجلة بيم ارابيا نمذجة معلومات اليناء
_BIMarabia 45.مجلة بيم ارابيا نمذجة معلومات اليناءOmarSelim27
 
"الدعامة الأساسية التي يقوم عليها التقويم الذاتي
"الدعامة الأساسية التي يقوم عليها التقويم الذاتي"الدعامة الأساسية التي يقوم عليها التقويم الذاتي
"الدعامة الأساسية التي يقوم عليها التقويم الذاتيNajlaaAlshareef1
 
عرض تقديمي دور مجتمعات التعليم في تحسين جودة الحياة الجامعية .pdf
عرض تقديمي دور مجتمعات التعليم في تحسين جودة الحياة الجامعية .pdfعرض تقديمي دور مجتمعات التعليم في تحسين جودة الحياة الجامعية .pdf
عرض تقديمي دور مجتمعات التعليم في تحسين جودة الحياة الجامعية .pdfr6jmq4dqcb
 
عرض تقديمي تكليف رقم (1).الرسوم التعليمية
عرض تقديمي تكليف رقم (1).الرسوم التعليميةعرض تقديمي تكليف رقم (1).الرسوم التعليمية
عرض تقديمي تكليف رقم (1).الرسوم التعليميةfsaied902
 
إعادة الإعمار-- غزة فلسطين سوريا العراق
إعادة الإعمار-- غزة فلسطين سوريا العراقإعادة الإعمار-- غزة فلسطين سوريا العراق
إعادة الإعمار-- غزة فلسطين سوريا العراقOmarSelim27
 

Kürzlich hochgeladen (20)

الصف الثاني الاعدادي -علوم -الموجات .pptx
الصف الثاني الاعدادي -علوم -الموجات .pptxالصف الثاني الاعدادي -علوم -الموجات .pptx
الصف الثاني الاعدادي -علوم -الموجات .pptx
 
درس المنادي للصف الاول الثانوي اعداد إسراء محمد
درس المنادي للصف الاول الثانوي اعداد إسراء محمددرس المنادي للصف الاول الثانوي اعداد إسراء محمد
درس المنادي للصف الاول الثانوي اعداد إسراء محمد
 
عرض تقديمي لعملية الجمع للاطفال ورياض الاطفال
عرض تقديمي لعملية الجمع للاطفال ورياض الاطفالعرض تقديمي لعملية الجمع للاطفال ورياض الاطفال
عرض تقديمي لعملية الجمع للاطفال ورياض الاطفال
 
محمد احمد سيد احمد محمد سباق عمر يوسف عبدالكريم
محمد احمد سيد احمد محمد سباق عمر يوسف عبدالكريممحمد احمد سيد احمد محمد سباق عمر يوسف عبدالكريم
محمد احمد سيد احمد محمد سباق عمر يوسف عبدالكريم
 
السرقات الشعرية إعداد غادة محمد عبد الراضي
السرقات الشعرية إعداد غادة محمد عبد الراضيالسرقات الشعرية إعداد غادة محمد عبد الراضي
السرقات الشعرية إعداد غادة محمد عبد الراضي
 
1 علم الخلية الم.pdf............................................................
1 علم الخلية الم.pdf............................................................1 علم الخلية الم.pdf............................................................
1 علم الخلية الم.pdf............................................................
 
.. مهارات ادارة الوقت و مهارات تنظيم الوقت.ppt
.. مهارات ادارة الوقت و مهارات تنظيم الوقت.ppt.. مهارات ادارة الوقت و مهارات تنظيم الوقت.ppt
.. مهارات ادارة الوقت و مهارات تنظيم الوقت.ppt
 
سلسلة في التجويد للدورات التمهيدية والمتوسطة والمتقدمة.pdf
سلسلة في التجويد للدورات التمهيدية والمتوسطة والمتقدمة.pdfسلسلة في التجويد للدورات التمهيدية والمتوسطة والمتقدمة.pdf
سلسلة في التجويد للدورات التمهيدية والمتوسطة والمتقدمة.pdf
 
الوعي المعلوماتي لدى العاملين في المكتبات و مراكز المعلومات
الوعي المعلوماتي لدى العاملين في المكتبات و مراكز المعلوماتالوعي المعلوماتي لدى العاملين في المكتبات و مراكز المعلومات
الوعي المعلوماتي لدى العاملين في المكتبات و مراكز المعلومات
 
أسامه رجب علي أحمد (عرض تقديمي عن الجمل التي لها محل من الاعراب والتي ليس لها...
أسامه رجب علي أحمد (عرض تقديمي عن الجمل التي لها محل من الاعراب والتي ليس لها...أسامه رجب علي أحمد (عرض تقديمي عن الجمل التي لها محل من الاعراب والتي ليس لها...
أسامه رجب علي أحمد (عرض تقديمي عن الجمل التي لها محل من الاعراب والتي ليس لها...
 
شكل الحرف وطريقة الرسم DOC-20240322-WA0012..pdf
شكل الحرف وطريقة الرسم DOC-20240322-WA0012..pdfشكل الحرف وطريقة الرسم DOC-20240322-WA0012..pdf
شكل الحرف وطريقة الرسم DOC-20240322-WA0012..pdf
 
دمشق تاريخ معطر بالياسمين - ماهر أسعد بكر
دمشق تاريخ معطر بالياسمين - ماهر أسعد بكردمشق تاريخ معطر بالياسمين - ماهر أسعد بكر
دمشق تاريخ معطر بالياسمين - ماهر أسعد بكر
 
الصف الثاني الاعدادي - العلوم -الموجات.pdf
الصف الثاني الاعدادي - العلوم -الموجات.pdfالصف الثاني الاعدادي - العلوم -الموجات.pdf
الصف الثاني الاعدادي - العلوم -الموجات.pdf
 
by modar saleh في التصوير التلفزيوني أحجام اللقطات .ppt
by modar saleh في التصوير التلفزيوني أحجام اللقطات .pptby modar saleh في التصوير التلفزيوني أحجام اللقطات .ppt
by modar saleh في التصوير التلفزيوني أحجام اللقطات .ppt
 
_BIMarabia 45.مجلة بيم ارابيا نمذجة معلومات اليناء
_BIMarabia 45.مجلة بيم ارابيا نمذجة معلومات اليناء_BIMarabia 45.مجلة بيم ارابيا نمذجة معلومات اليناء
_BIMarabia 45.مجلة بيم ارابيا نمذجة معلومات اليناء
 
"الدعامة الأساسية التي يقوم عليها التقويم الذاتي
"الدعامة الأساسية التي يقوم عليها التقويم الذاتي"الدعامة الأساسية التي يقوم عليها التقويم الذاتي
"الدعامة الأساسية التي يقوم عليها التقويم الذاتي
 
عرض تقديمي دور مجتمعات التعليم في تحسين جودة الحياة الجامعية .pdf
عرض تقديمي دور مجتمعات التعليم في تحسين جودة الحياة الجامعية .pdfعرض تقديمي دور مجتمعات التعليم في تحسين جودة الحياة الجامعية .pdf
عرض تقديمي دور مجتمعات التعليم في تحسين جودة الحياة الجامعية .pdf
 
عرض تقديمي تكليف رقم (1).الرسوم التعليمية
عرض تقديمي تكليف رقم (1).الرسوم التعليميةعرض تقديمي تكليف رقم (1).الرسوم التعليمية
عرض تقديمي تكليف رقم (1).الرسوم التعليمية
 
إعادة الإعمار-- غزة فلسطين سوريا العراق
إعادة الإعمار-- غزة فلسطين سوريا العراقإعادة الإعمار-- غزة فلسطين سوريا العراق
إعادة الإعمار-- غزة فلسطين سوريا العراق
 
عرض تقديمي عن اسم المفعول.امل عرفات محمد العربي جامعة جنوب الوادي تربيه عام ...
عرض تقديمي عن اسم المفعول.امل عرفات محمد العربي جامعة جنوب الوادي تربيه عام ...عرض تقديمي عن اسم المفعول.امل عرفات محمد العربي جامعة جنوب الوادي تربيه عام ...
عرض تقديمي عن اسم المفعول.امل عرفات محمد العربي جامعة جنوب الوادي تربيه عام ...
 

Empfohlen

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity - Best PracticesTime Management & Productivity - Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

Empfohlen (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity - Best PracticesTime Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Teach yourself html_ar

  • 1. ‫اﻟﻤﺮﺟﻊ اﻟﻜﺎﻣﻞ ﻓﻲ ‪HTML‬‬ ‫ﻋﻦ ﻣﻮﻗﻊ‬ ‫‪HTML4ARAB‬‬ ‫‪BY‬‬ ‫‪IsLmicHackers@HotMail.com‬‬ ‫اﻟـﺒـﺪاﯾﻪ ﻫﻨﺎ‬ ‫> أﺑﺪأ ﻫﻨﺎ‬ ‫ﻣﺎ ﻫﻲ ال? ‪HTML‬‬ ‫ﻣﺎذا أﺣﺘﺎج ؟‬ ‫>دروس ﺳﺮﯾﻌﻪ ﻟﻠﻤﺒﺘﺪﺋﯿﻦ‬ ‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬ ‫اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ‬ ‫اﻟﻮﺻﻼت اﻷﺳﺎﺳﯿﻪ‬ ‫أﺳﺎﺳﯿﺎت إدراج اﻟﺼﻮر‬ ‫ﺧﻮاص اﻟﺼﻔﺤﺔ‬ ‫ﻣﺮﺟﻊ اﻟﻤﺴﺎﺣﺎت اﻟﻤﺠﺎﻧﯿﻪ‬ ‫اﻟﺪروس اﻟﻤﺘﺨﺼﺼﻪ‬ ‫> اﻟﻨﺺ‬ ‫اﻟﻌﻨﺎوﯾﻦ وﺣﺠﻢ اﻟﺨﻄﻮط‬ ‫أﺷﻜﺎل وأﻟﻮان اﻟﺨﻄﻮط‬ ‫اﻟﺮﻣﻮز اﻟﺨﺎﺻﻪ‬ ‫اﻟﻮﺻﻼت‬ ‫اﻟﻘﻮاﺋﻢ‬ ‫ﻗﺎﺋﻤﺔ ﺑﺠﻤﯿﻊ وﺳﻮم اﻟﻨﺺ‬ ‫اﻟﻨﺺ اﻟﻤﺘﺤﺮك‬
  • 2. ‫> اﻟﺼﻮر‬ ‫اﻟﺼﻮر واﻟﺮﺳﻮﻣﺎت‬ ‫أﻧﻮاع اﻟﻤﻠﻔﺎت‬ ‫اﻟﺼﻮرة ذات اﻟﺒﯿﻜﺴﻞ اﻟﻮاﺣﺪ‬ ‫‪Thumbnails‬‬ ‫ﺧﺮاﺋﻂ اﻟﺼﻮر‬ ‫اﻟﻮﺳﺎﺋﻂ اﻟﻤﺘﻌﺪدة‬ ‫أﺳﻤﺎء اﻷﻟﻮان‬ ‫612ﻛﻮد ﻟﻸﻟﻮان‬ ‫ﻣﻜﻌﺐ اﻷﻟﻮان‬ ‫> اﻟﺠﺪاول‬ ‫أﺳﺎﺳﯿﺎت اﻟﺠﺪاول‬ ‫اﻟﺠﺪاول اﻟﻤﺘﻘﺪﻣﻪ ) ﻟﻠﻤﺤﺘﺮﻓﯿﻦ)‬ ‫اﻟﺠﺪاول اﻟﻤﺘﺪاﺧﻠﻪ واﻟﻤﺴﺘﺪﯾﺮة ) ﻟﻠﻤﺤﺘﺮﻓﯿﻦ)‬ ‫> اﻷﻃﺮ‬ ‫أﺳﺎﺳﯿﺎت اﻷﻃﺮ‬ ‫اﻷﻃﺮ اﻟﻤﺘﻘﺪﻣﻪ‬ ‫ﺗﺎﺑﻊ اﻷﻃﺮ اﻟﻤﺘﻘﺪﻣﺔ‬ ‫> اﻟﻨﻤﺎذج‬ ‫اﻟﻨﻤﺎذج اﻷﺳﺎﺳﯿﻪ‬ ‫ﺗﺎﺑﻊ اﻟﻨﻤﺎذج اﻷﺳﺎﺳﯿﻪ‬ ‫ﺗﻨﺴﯿﻖ اﻟﻨﻤﺎذج‬ ‫ﺻﻮرة ﻟﻠﺰر‪Submit‬‬ ‫ﻣﺎ ﻫﻲ اﻟـ ‪ HTML‬؟‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] ﻣﺎ ﻫﻲ اﻟـ ‪ HTML‬؟ | ﻛﯿﻒ ﺗﻌﻤﻞ ؟ | ﻫﻞ ﻻﺑﺪ أن أﻛﻮن ﻣﺘﺼﻞ ﺑﺎﻹﻧﺘﺮﻧﺖ ﻃﻮل اﻟﻮﻗﺖ ؟ |‬ ‫ﻫﻞ ﺗﻘﻮم اﻟـ ‪ HTML‬ﺑﻌﻤﻞ ﻛﻞ ﺷﻲء ﻓﻲ ﺻﻔﺤﺎت اﻟﻤﻮﻗﻊ ؟ [‬ ‫اﻟﻜﺜﯿﺮ ﻣﻦ اﻟﻨﺎس ﺗﺘﺴﺄل ﻋﻦ اﻷﻧﺘﺮﻧﺖ و ﻋﻦ أﺳﺮارﻫﺎ ﻓﻲ ﻫﺬا اﻟﺒﺤﺚ اﻟﺘﻌﻠﯿﻤﻲ ﺳﻨﻘﻮم ﺑﺎﻟﺸﺮح اﻟﻮاﻓﻲ ﻟﺠﻤﯿﻊ‬ ‫اﻟﺪروس اﻟﺨﺎص ﺑﺎﻟﻐﺔ ‪ HTML‬وﻧﺒﺪأ ﺑﺎﻹﺟﺎﺑﻪ ﻋﻠﻲ اﻷﺳﺄﻟﺔ اﻷﻛﺜﺮ ﺗﻜﺮرا و ﺷﯿﻮﻋﺎ ؟!!.‬ ‫ﻣﺎ ﻫﻲ اﻟـ ‪ HTML‬؟‬ ‫إﻧﻬﺎ اﻟﻠﻐﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻹﻧﺸﺎء ﺻﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ. ﻫﻲ ﻟﯿﺴﺖ ﻟﻐﺔ ﺑﺮﻣﺠﺔ ﺑﺎﻟﻤﻌﻨﻰ واﻟﺸﻜﻞ اﻟﻤﺘﻌﺎرف ﻋﻠﯿﻪ ﻟﻠﻐﺎت‬ ‫اﻟﺒﺮﻣﺠﺔ اﻷﺧﺮى ﻛﻠﻐﺔ ‪ . C‬ﻓﻬﻲ ﻣﺜ ً ﻻ ﺗﺤﺘﻮي ﻋﻠﻰ ﺟﻤﻞ اﻟﺘﺤﻜﻢ واﻟﺪوران، وﻋﻨﺪ اﻟﺤﺎﺟﺔ ﻻﺳﺘﺨﺪام ﻫﺬه اﻟﺠﻤﻞ‬ ‫ﻼ‬ ‫ﯾﺠﺐ ﺗﻀﻤﯿﻦ ﺷﯿﻔﺮات ﻣﻦ ﻟﻐﺎت أﺧﺮى ﻛـ ‪ . Java, JavaScript, CGI‬ﻛﺬﻟﻚ ﻓﻬﻲ ﻻ ﺗﺤﺘﺎج إﻟﻰ ﻣﺘﺮﺟﻢ‬
  • 3. ‫ﺧﺎص ﺑﻪ ‪ . 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‬ﻟﻤﺰﯾﺪ ﻣﻦ اﻟﺴﺮﻋﺔ ﻓﻲ ﺧﻠﻖ اﻟﺼﻔﺤﺎت‬ ‫و ﺗﻨﺴﯿﻘﻬﺎ .‬ ‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬
  • 4. ‫ﻣﺎذا أﺣﺘﺎج ؟‬ ‫أذا ﻟﻘﺪ ﻗﺮرت أن ﺗﺘﻌﻠﻢ اﻟـ ‪ ، 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‬‬ ‫وﻫﻮ ﺑﺮﻧﺎﻣﺞ ﺟﯿﺪ ﻟﺘﺤﺮﯾﺮ اﻟﺼﻮر ) أﻧﺎ أﺳﺘﺨﺪﻣﻪ (‬ ‫اﻟﺪرس اﻟﺘﺎﻟﻲ«««‬
  • 5. ‫دروس ﺳﺮﯾﻌﻪ ﻟﻠﻤﺒﺘﺪﺋﯿﻦ‬ ‫ﺳﻮف ﻧﻘﻮم ﺑﺸﺮح ﺳﺮﯾﻊ ﻷﻫﻢ اﻷوﺳﻤﻪ اﻟﺨﺎﺻﻪ ﺑﺎﻟﻠﻐﺔ ال ‪HTML‬و ﻛﯿﻔﯿﻪ ﺑﺪأ ﺻﻔﺤﺔ و ﻛﯿﻔﯿﻪ إرﺳﺎﻟﻬﺎ ﻟﻠﺨﺎدم‬ ‫. )‪(Server‬‬ ‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬ ‫آه إﻧﺸﺎء ﺻﻔﺤﺔ ﻷول ﻣﺮة ﺑﺎﻟﻠﻐﺔ ال‪ HTML‬؟ رﺑﻨﺎ ﯾﻮﻓﻘﻚ .... أﻗﺮأ ﻫﻨﺎ ﻟﻜﻲ ﺗﺠﻌﻞ ﻫﺬا ﺣﻘﯿﻘﻲ‬ ‫اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ‬ ‫ﻋﻨﺪ إﻧﺘﻬﺎءك ﻣﻦ ﻛﺘﺎﺑﺔ ﻣﻠﻒ ﺑﻠﻐﺔ ال‪ HTML‬رﺑﻤﺎ ﺗﺤﺘﺎج إﻟﻲ ﺗﻨﺴﯿﻘﻪ ﻗﻠﯿﻼ‬ ‫اﻟﻮﺻﻼت اﻷﺳﺎﺳﯿﻪ‬ ‫ﻋﻨﺪ إﻧﺘﻬﺎءك ﻣﻦ ﻛﺘﺎﺑﺔ ﺻﻔﺤﺎت ﺑﻠﻐﺔ ال‪ HTML‬رﺑﻤﺎ ﺗﺤﺘﺎج إﻟﻲ ﻋﻤﻞ وﺻﻼت ﺑﯿﻨﻬﻢ‬ ‫أﺳﺎﺳﯿﺎت إدراج اﻟﺼﻮر‬ ‫ﺗﻌﻠﻢ أن ﺗﻀﻊ ﺻﻮر ﻓﻲ ﺻﻔﺤﺎﺗﻚ ﻛﺨﻄﻮة أوﻟﻲ ﻫﻜﺬا ....‬ ‫ﺧﻮاص اﻟﺼﻔﺤﺔ‬ ‫ﺣﺘﻰ اﻵن اﻷﻟﻮان اﻟﻮﺣﯿﺪه ﻋﻠﻲ ﺻﻔﺤﺘﻚ ﻛﺎﻧﺖ اﻷﺑﯿﺾ اﻟﺨﻠﻔﯿﻪ اﻷﺳﻮد ﻟﻠﻨﺺ اﻷزرق ﻟﻠﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﻪ اﻟﻦ‬ ‫ﺗﺤﺐ أن ﺗﻐﯿﯿﺮﻫﻢ إﻟﻲ ﺷﻲء أﻛﺜﺮ ﺟﻤﺎﻟﻪ وأﻧﺎﻗﻪ؟!!.‬ ‫ﻣﺮﺟﻊ اﻟﻤﺴﺎﺣﺎت اﻟﻤﺠﺎﻧﯿﻪ‬ ‫ﻋﻨﺪﻣﺎ ﺗﻨﺘﻬﻲ ﻣﻦ إﻧﺸﺎء ﻣﻮﻗﻌﻚ ﻓﻌﻨﺪﻫﺎ ﺳﺘﺤﺘﺎج إﻟﻲ رﻓﻊ ﻣﻮﻗﻊ أو وﺿﻊ ﻣﻮﻗﻌﻚ ﻋﻠﻲ ﺷﺒﻜﺔ اﻹﻧﺘﺮﻧﺖ ، وﻫﺬا‬ ‫ﯾﺘﻀﻤﻦ إرﺳﺎل ﻣﻠﻔﺎﺗﻚ إﻟﻲ اﻟـ‪ Server‬أو اﻟﺨﺎدم ) ﻫﻮ ﺟﻬﺎز ﻣﺘﺼﻞ داﺋﻤﺎ ﺑﺎﻹﻧﺘﺮﻧﺖ ( وﻋﻦ ﻃﺮﯾﻖ اﻟﺴﯿﺮﻓﺮ‬ ‫ﯾﺴﺘﻄﯿﻊ أي ﺷﺨﺺ أن ﯾﺪﺧﻞ إﻟﻲ ﻣﻮﻗﻌﻚ و ﯾﺘﺼﻔﺤﻪ .‬ ‫ﺻﻔﺤﺘﻲ اﻷوﻟﻲ‬ ‫ﺣﺴﻨً، ﻟﺪﯾﻚ ﻣﺤﺮر ﻧﺼﻮص ﻣﻤﺘﺎز ﻟﻜﺘﺎﺑﺔ ﻣﻠﻔﺎت ‪ HTML‬وﻟﺪﯾﻚ ﻣﺘﺼﻔﺢ إﻧﺘﺮﻧﺖ ﻟﻤﻌﺎﯾﻨﺘﻬﺎ، وﻟﺪﯾﻚ ﻫﺬه اﻟﺪروس‬ ‫ﺎ‬ ‫اﻟﺘﻲ ﺳﺘﻨﻄﻠﻖ ﻣﻌﻬﺎ إﻟﻰ ﻋﺎﻟﻢ ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎت اﻟﻮﯾﺐ أذن ﻓﺎﻟﻨﺒﺪأ اﻻن»»»....‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] اﻷوﺳﻤﻪ | إﻧﺸﺎء ﺻﻔﺤﺔ | ﻣﻼﺣﻈﺎت [‬ ‫اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ ﻟﻠﺼﻔﺤﺔ‬
  • 6. ‫أن ﻛﻞ اﻟﺼﻔﺤﺎت ﺗﺒﺪأ ﺑﻬﯿﻜﻞ أﺳﺎﺳﻲ ، و ﻟﻨﺒﺪأ اﻵن ﻟﺘﺘﻌﻠﻢ أول وﺳﻢ )‪. (Tag‬‬ ‫ااﻷوﺳﻤﻪ :- اﻷوﺳﻤﻪ ﻫﻲ اﻷﺷﯿﺎء اﻟﺘﻲ ﺑﯿﻦ ﻫﺬﯾﻦ اﻟﻘﻮﺳﯿﻦ >< ﺑﺎﻟﺘﺄﻛﯿﺪ أﻧﺖ ﻟﻢ ﺗﺮي أﻛﻮاد ﺗﺒﺪأ ﺑﻬﺬﯾﻦ اﻟﺸﻜﻠﯿﻦ ﻣﻦ‬ ‫ﻗﺒﻞ ﺣﺴﻨﻦ ﻣﻦ ﻗﺎﺋﻤﺔ ‪ View‬أﺧﺘﺎر ‪ ، Source‬أﻧﺖ ﺗﺮي اﻵن اﻟﻨﺺ اﻟﺬي ﺗﻘﺮأه وﻣﺤﺎط ﻓﻲ أﻏﻠﺐ اﻷﺣﻮال ﺑـ‬ ‫>< ﻫﺬه اﻷﻛﻮاد ﻫﻲ اﻟﺘﻲ ﺻﻨﻌﺖ ﻫﺬه اﻟﺼﻔﺤﺔ اﻟﺘﻲ أﻣﺎﻣﻚ‬ ‫ﻫﺎم ﺟﺪاأﻏﻠﺐ اﻷوﺳﻤﺔ ﺗﺒﺪأ >< ﻣﻦ اﻟﯿﺴﺎر وﺗﻨﺘﻬﻲ >/<ﻓﻲ اﻟﯿﻤﯿﻦ‬ ‫ﻓﺎﻟﺘﺸﺎﻫﺪ اﻟﻮﺳﻮم اﻟﺘﺎﻟﯿﺔ:‬ ‫وﺳﻢ اﻟﺒﺪاﯾﺔ وﺳﻢ اﻟﻨﻬﺎﯾﺔ‬ ‫>‪</HTML> <HTML‬‬ ‫>‪</HEAD> <HEAD‬‬ ‫>‪</TITLE> <TITLE‬‬ ‫>‪</BODY> <BODY‬‬ ‫ﻣﺎذا ﺗﻼﺣﻆ؟ أن ﻛﻞ ﻣﻨﻬﺎ ﯾﺘﺄﻟﻒ ﻣﻦ زوج ﻣﻦ اﻟﻮﺳﻮم أﺣﺪﻫﻤﺎ وﺳﻢ اﻟﺒﺪاﯾﺔ، واﻵﺧﺮ وﺳﻢ اﻟﻨﻬﺎﯾﺔ. وﯾﺘﻤﯿﺰ وﺳﻢ‬ ‫اﻟﻨﻬﺎﯾﺔ ﺑﻮﺟﻮد اﻟﺮﻣﺰ / . ﺗﺄﻣﻞ اﻟﺮﺳﻢ اﻟﺘﺎﻟﻲ، ﻓﻬﻮ ﯾﻌﻄﻲ ﻓﻜﺮة ﻋﻦ ﺗﺮﻛﯿﺐ ﻣﻠﻒ ‪Html‬‬ ‫إذن ﻓﻤﻠﻒ ‪ Html‬ﯾﺒﺪأ داﺋﻤً ﺑﺎﻟﻮﺳﻢ >‪ <HTML‬وﯾﻨﺘﻬﻲ ﺑﺎﻟﻮﺳﻢ >‪ .</HTML‬ﻻ ﺗﻨﺴﻰ ذﻟﻚ !‬ ‫ﺎ‬ ‫أﻣﺎ اﻟﻮﺳﻢ >‪ <HEAD‬ﻓﯿﺤﺪد ﺑﺪاﯾﺔ اﻟﻤﻘﻄﻊ اﻟﺬي ﯾﺤﺘﻮي ﻋﻠﻰ اﻟﻤﻌﻠﻮﻣﺎت اﻟﺨﺎﺻﺔ ﺑﺘﻌﺮﯾﻒ اﻟﺼﻔﺤﺔ. ﻛﺎﻟﻌﻨﻮان‬ ‫اﻟﻈﺎﻫﺮ ﻋﻠﻰ ﺷﺮﯾﻂ ﻋﻨﻮان اﻟﻤﺘﺼﻔﺢ. وﻫﺬا اﻟﻌﻨﻮان ﺑﺪوره ﯾﺤﺘﺎج ﻷن ﯾﻮﺿﻊ ﺑﯿﻦ اﻟﻮﺳﻤﯿﻦ: >‪… <TITLE‬‬ ‫>‪ </TITLE‬وﺑﺎﻟﻄﺒﻊ ﯾﺠﺐ ﻛﺘﺎﺑﺔ اﻟﻮﺳﻢ >‪ </HEAD‬ﻟﻜﻲ ﻧﻨﻬﻲ ﻫﺬا اﻟﻤﻘﻄﻊ.‬
  • 7. ‫ﻧﺄﺗﻲ إﻟﻰ اﻟﻮﺳﻢ >‪ <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:htmlfilesFirstPage.htm‬‬ ‫وذﻟﻚ ﻃﺒﻌً ﺣﺴﺐ اﻻﻓﺘﺮاﺿﺎت اﻟﺴﺎﺑﻘﺔ اﻟﺘﻲ اﺗﺒﻌﺘﻬﺎ ﻋﻨﺪ ﺗﺨﺰﯾﻦ اﻟﻤﻠﻒ. وﻫﺬا ﻣﺎ ﺣﺼﻠﺖ ﻋﻠﯿﻪ :-‬ ‫ﺎ‬ ‫ﺧﻄﺄ!‬
  • 8. ‫وﻣﺎذا ﻋﻨﻚ؟ ﻫﻞ ﺣﺼﻠﺖ ﻋﻠﻰ ﻧﻔﺲ اﻟﻨﺘﯿﺠﺔ؟ إذن ﻣﺒﺮوك ‪ 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‬‬ ‫وﻓﻲ ﻛﻞ اﻟﺤﺎﻻت ﺳﺘﺤﺼﻞ ﻋﻠﻰ ﻧﻔﺲ اﻟﻨﺘﯿﺠﺔ. وإذا ﻛﻨﺖ ﻣﻦ ﺗﻠﻚ اﻟﻨﻮﻋﯿﺔ ﻣﻦ اﻟﻨﺎس اﻟﺘﻲ ﻻ ﺗﺼﺪق ﻛﻞ ﻣﺎ ﯾﻘﺎل…‬ ‫ﺗﺴﺘﻄﯿﻊ أن ﺗﺠﺮب ذﻟﻚ ﺑﻨﻔﺴﻚ!!! ﻫﯿﺎ ﺟﺮب.‬ ‫ﻟﻜﻦ ﻫﺬا ﻻ ﯾﻌﻨﻲ أن اﻟﻔﻘﺮة اﻟﻤﻜﻮﻧﺔ ﻣﺜ ً ﻣﻦ ﻋﺸﺮة أﺳﻄﺮ ﺳﺘﻤﺘﺪ إﻟﻰ ﻋﺪة أﻣﺘﺎر ﺑﻌﺮض اﻟﺸﺎﺷﺔ. ﻛﻼ ﺑﺎﻟﻄﺒﻊ ﻷن‬ ‫ﻼ‬ ‫اﻟﻤﺘﺼﻔﺢ ﺳﯿﻘﻮم ﺑﻌﻤﻞ اﻟﺘﻔﺎف ﺗﻠﻘﺎﺋﻲ ﻟﻬﺎ ﺑﺤﺴﺐ ﻋﺮض اﻟﺸﺎﺷﺔ، ﻣﻬﻤﺎ ﻛﺎن ﻣﻘﺪار ﻫﺬا اﻟﻌﺮض.‬
  • 9. ‫واﻵن ﻗﺪ ﺗﺘﺴﺎءل، إذن ﻛﯿﻒ ﯾﻤﻜﻦ اﻟﺘﺤﻜﻢ ﺑﻤﻘﺪار اﻟﻨﺺ اﻟﻤﻜﺘﻮب ﻓﻲ ﻛﻞ ﺳﻄﺮ وﻛﯿﻒ ﯾﻤﻜﻦ ﺗﺤﺪﯾﺪ ﻧﻬﺎﯾﺔ اﻟﻔﻘﺮة‬ ‫وﺑﺪاﯾﺔ اﻟﻔﻘﺮة اﻟﺘﻲ ﺗﻠﯿﻬﺎ؟ ﺳﺆال وﺟﯿﻪ!!! واﻹﺟﺎﺑﺔ ﻋﻠﯿﻪ ﻓﻲ اﻟﻔﺼﻞ اﻟﻘﺎدم«‬ ‫اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ‬ ‫ﺗﻮﻗﻔﻨﺎ ﻓﻲ «اﻟﻔﺼﻞ اﻟﺴﺎﺑﻖ ﻋﻨﺪ ﻛﯿﻔﯿﻪ اﻟﺘﺤﻜﻢ ﺑﻤﻘﺪار اﻟﻨﺺ اﻟﻤﻜﺘﻮب ﻓﻲ ﻛﻞ ﺳﻄﺮ وﻛﯿﻒ ﯾﻤﻜﻦ ﺗﺤﺪﯾﺪ ﻧﻬﺎﯾﺔ اﻟﻔﻘﺮة‬ ‫وﺑﺪاﯾﺔ اﻟﻔﻘﺮة اﻟﺘﻲ ﺗﻠﯿﻬﺎ؟ و ﻓﻲ ﻫﺬا اﻟﻔﺼﻞ ﺳﻨﻘﻮم ﺑﺸﺮح ﻫﺬه اﻟﺠﺰﺋﯿﻪ وأﺳﺲ اﻟﺘﻨﺴﯿﻖ.‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] ﻧﻬﺎﯾﻪ ﺳﻄﺮ | أﺿﺎﻓﺔ ﺳﻄﺮ | اﻟﻔﺮﻏﺎت | اﻟﺨﻮاص | ﺗﻨﺴﯿﻖ اﻟﻨﺺ[‬ ‫ﻧﻬﺎﯾﻪ ﺳﻄﺮ وﺑﺪاﯾﻪ ﺳﻄﺮ ﺟﺪﯾﺪ-:‬ ‫وﺳﻮف ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <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‬‬
  • 10. ‫>‪</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‬وﻟﻜﻦ ﺳﺮﯾﻌﺎ ﻧﻘﻮل اﻷﻛﻮاد ﻟﻬﺬه اﻟﺘﻨﺴﯿﻘﺎت‬
  • 11. ‫ﻟﻠﺨﻂ>‪<B‬‬ ‫>‪</B‬اﻟﻌﺮﯾﺾ ﻫﺬا‬ ‫ﻟﻠﺨﻂ>‪<I‬‬ ‫>‪</I‬اﳌﺎﺋﻞ وﻫﺬا‬ ‫ﻣﺎ>‪<U‬‬ ‫>‪</U‬أﻗﺼﺪه ﻋﻦ ﲢﺘﻪ ﺧﻂ وﻫﺬا‬ ‫و اﻵن أﺧﻮاﻧﺌﻲ اﻷﻋﺰاء ﯾﻜﻮن ﻗﺪ أﻧﺘﻬﯿﻦ ﻣﻦ اﻟﻔﺼﻞ اﻟﺜﺎﻧﻲ ﻣﻦ ﻓﺼﻮﻟﻨﺎ اﻟﺘﻌﻠﯿﻤﯿﻪ‬ ‫وﺗﻜﻮن ﻗﺪ ﺗﻌﻠﻤﺖ ﻛﯿﻔﯿﻪ أﻧﺸﺎء ﺻﻔﺤﺎت و ﺗﻨﺴﯿﻘﻬﻢ وﻟﻜﻦ ﻛﯿﻒ ﯾﻤﻜﻦ اﻟﺘﻨﻘﻞ ﺑﯿﻨﻬﻢ ؟؟؟!!!!! وﻟﻤﻌﺮﻓﺔ اﻹﺟﺎﺑﻪ أذﻫﺐ‬ ‫إﻟﻲ اﻟﻔﺼﻞ اﻟﺘﺎﻟﻲ «‬ ‫اﻟﻮﺻﻼت اﻷﺳﺎﺳﯿﻪ‬ ‫ﺗﻮﻗﻔﻨﺎ ﻓﻲ «اﻟﻔﺼﻞ اﻟﺴﺎﺑﻖ ﻋﻨﺪ ﻛﯿﻔﯿﻪ اﻹﻧﺘﻘﺎل ﺑﯿﻦ ﺻﻔﺤﺎت اﻟﻤﻮﻗﻊ و ﻓﻲ ﻫﺬا اﻟﻔﺼﻞ ﺳﻨﻘﻮم ﺑﺸﺮح ﻫﺬه اﻟﺠﺰﺋﯿﻪ.‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] أول وﺻﻠﻪ | وﺻﻠﻪ ﻟﻠﺒﺮﯾﺪ | وﺻﻠﻪ ﻟﺼﻮرة | وﺻﻠﻪ ﻟﻤﻠﻒ [‬ ‫أول وﺻﻠﻪ:-‬ ‫ﻛﯿﻒ وﺻﻠﺖ إﻟﻰ ﻫﺬه اﻟﺼﻔﺤﺔ؟ ! رﺑﻤﺎ ﺗﻌﺘﺒﺮ ﻫﺬا ﺳﺆا ً ﺳﺨﯿﻔً، وأن اﻹﺟﺎﺑﺔ ﻋﻠﯿﻪ ﻫﻲ ﻣﻦ اﻟﺒﺪﯾﻬﯿﺎت ... وﻫﺬا‬ ‫ﺎ‬ ‫ﻻ‬ ‫ﺻﺤﯿﺢ ! ﻣﻦ اﻟﻤﺆﻛﺪ أﻧﻚ ﻗﻤﺖ ﺑﺎﻹﻧﺘﻘﺎل إﻟﻰ ﻫﻨﺎ ﻣﻦ ﺧﻼل إﺣﺪى ﺻﻔﺤﺎت ﻫﺬا اﻟﻤﻮﻗﻊ، أو ﻣﻦ ﺧﻼل أﺣﺪ ﻣﺤﺮﻛﺎت‬ ‫اﻟﺒﺤﺚ، أو ﻣﻦ ﺧﻼل أﺣﺪ اﻟﻤﻮاﻗﻊ اﻟﺘﻲ ﻗﻤﺖ ﺑﺰﯾﺎرﺗﻬﺎ ﻣﺆﺧﺮً ... وﻓﻲ ﻛﻞ اﻷﺣﻮال ﻗﻤﺖ ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ‬ ‫ا‬ ‫ﻣﺎ‬ ‫‪ ...Links‬أو اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ ﻫﻲ روح اﻹﻧﺘﺮﻧﺖ. ﻋﻠﻲ ﻛﻞ ﺣﺎل ﻟﻦ أﺧﻮض ﻛﺜﯿﺮا ﻓﻲ ﺷﺮح ﻫﺬه اﻟﻮﺻﻼت‬ ‫ﻓﻠﻘﺪ ﻗﻤﺖ ﺑﺸﺮﺣﻬﺎ ﺗﻔﺼﯿﻠﯿﺎ ﻓﻲ اﻟﺪروس ﻛﻞ ﻣﺎ ﻫﻮ ﻣﻄﻠﻮب ﻣﻨﺎ اﻵن ﻫﻮ ﺗﻌﻠﯿﻤﻚ ﻛﯿﻔﯿﻪ أدراج وﺻﻠﻪ ﺗﺸﻌﺒﯿﻪ ﻓﻲ‬ ‫ﺻﻔﺤﺎﺗﻚ‬ ‫ﻓﻲ اﻟﺒﺪاﯾﻪ ﻧﺴﺘﺨﺪم ﻫﺬا اﻟﻮﺳﻢ ﻟﺒﺪأ أﻧﺸﺎء اﻟﻮﺻﻠﻪ‬ ‫>‪</A> ... <A‬‬ ‫وﻫﻮ اﻟﻮﺳﻢ اﻷﺳﺎﺳﻲ ﻹدراج اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ، وﻫﻲ اﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ ‪ .Anchor‬وﻫﻲ ﻻ ﺗﻌﻤﻞ ﻟﻮﺣﺪﻫﺎ ﺑﻞ‬ ‫ﺗﺘﻄﻠﺐ إﺿﺎﻓﺔ ﺧﺼﺎﺋﺺ ﻣﻌﯿﻨﺔ أوﻟﻬﺎ وأﻫﻤﻬﺎ اﻟﺨﺎﺻﯿﺔ‬ ‫‪HREF‬‬ ‫اﻟﺘﻲ ﻧﺤﺪد ﻣﻦ ﺧﻼﻟﻬﺎ اﻟﻤﻮﻗﻊ اﻟﺬي ﻧﺮﯾﺪ اﻟﺪﻻﻟﺔ ﻋﻠﯿﻪ، وﯾﺠﺐ أن ﯾﻜﺘﺐ ﻋﻨﻮان اﻟﻤﻮﻗﻊ ﻛﺎﻣ ً و ﻫﻲ إﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ‬ ‫ﻼ‬ ‫‪. REFerence Hypertext‬‬
  • 12. ‫وﻫﺬه ﻫﻲ اﻟﺼﯿﻐﺔ اﻷﺳﺎﺳﯿﻪ ﻟﻠﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﻪ‬ ‫ﻫﺎم ﺟﺪا‬ ‫ﺻﻔﺤﱵ>"‪<A HREF="FirstPage.html‬‬ ‫>‪</A‬اﻷوﱃ‬ ‫ﻓﺘﻈﻬﺮ ﻟﻚ اﻟﻮﺻﻠﻪ ﺑﻬﺬا اﻟﺸﻜﻞ‬ ‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬ ‫و اﻵن إﻟﻲ اﻟﻌﻨﻮان اﻹﻟﯿﻜﺘﺮوﻧﻲ ‪ : E-Mail‬ﻛﯿﻒ ﻧﺪرج وﺻﻠﻪ إﻟﻲ اﻟﻌﻨﻮان اﻟﺒﺮﯾﺪي اﻟﺨﺎص ﺑﻨﺎ ﻓﺎﻟﻮاﻗﻊ اﻹﺟﺎﺑﻪ‬ ‫ﺳﻬﻠﻪ ﺟﺪا ﻓﻬﺬه ﻫﻲ ﺻﯿﻐﺔ اﻟﺒﺮﯾﺪ اﻹﻟﯿﻜﺘﺮوﻧﻲ‬ ‫ﱄ>"‪<A HREF="mailto:d4a@f2s.com‬‬ ‫>‪</A‬أرﺳﻞ‬ ‫ﺗﻈﻬﺮ ﻟﻚ اﻟﻮﺻﻠﻪ ﺑﻬﺬا اﻟﺸﻜﻞ‬ ‫أرﺳﻞ ﻟﻲ‬ ‫وﺻﻠﻪ ﻟﺼﻮرة :- ﻓﻲ اﻟﺤﻘﯿﻘﻪ أن أدراج وﺻﻠﻪ ﺗﺸﻌﺒﯿﻪ ﺑﺼﻮرة ﻻ ﺗﺨﺘﻠﻒ ﻛﺜﯿﺮا ﻋﻦ اﻟﺴﺎﺑﻖ وﻟﻜﻦ ﺳﻨﻘﻮم ﺑﺸﺮﺣﻬﺎ‬ ‫ﻓﻲ اﻟﻔﺼﻞ اﻟﻘﺎدم«‬ ‫و ﺻﻠﻪ ﻟﻤﻠﻒ :- أدراج وﺻﻠﻪ ﻟﻤﻠﻒ ﻻ ﯾﺨﺘﻠﻒ ﻋﻦ أدراج وﺻﻠﻪ ﻟﺼﻮرة ﺗﻘﺮﯾﺒﺎ وﻟﻜﻦ ﯾﻮﺟﺪ إﺧﺘﻼف ﺑﺴﯿﻂ ﻓﺒﺪﻻ‬ ‫ﻣﻦ أن ﯾﻔﺘﺢ اﻟﻤﺴﺘﻌﺮض اﻟﺼﻮرة ﻓﻲ ﺻﻔﺤﺔ ﺟﺪﯾﺪة ﯾﻘﻮم اﻟﻤﺴﺘﻌﺮض ﺑﺈﻇﻬﺎر ﻟﻚ ﺻﻨﺪوق اﻹﺧﺘﯿﺎرات ﻟﺤﻔﻆ‬ ‫اﻟﻤﻠﻒ أو ﺗﺤﻤﯿﻠﻪ ﻣﻦ ﻋﻠﻲ اﻟﻤﻮﻗﻊ و ﻫﺬه ﻫﻲ اﻟﺼﯿﻐﻪ :-‬ ‫اﳌﻘﻄﻮﻋﺔ>"‪<A HREF="egypt.mid‬‬ ‫>‪ </A‬ﲪﻞ ﻫﺬه‬ ‫ﺗﻈﻬﺮ ﻟﻚ اﻟﻮﺻﻠﻪ ﺑﻬﺬا اﻟﺸﻜﻞ و ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﯿﻬﺎ ﯾﻈﻬﺮ ﻟﻚ ﺻﻨﺪوق اﻹﺧﺘﯿﺎرات‬ ‫ﺣﻤﻞ ﻫﺬه اﻟﻤﻘﻄﻮﻋﻪ‬ ‫أﺳﺎﺳﯿﺎت إدراج اﻟﺼﻮر‬
  • 13. ‫اﻵن أﺻﺒﺢ ﻋﻨﺪك ﺻﻔﺤﺎت ﻣﺮﺑﻮﻃﺔ ﺑﻮﺻﻼت ﺗﺸﻌﺒﯿﻪ و ﻣﻨﺴﻘﻪ إﻟﻲ ﺣﺪ ﻣﺎ وﻟﻜﻦ ﻫﻞ ﻫﺬا ﯾﻘﻨﻌﻚ ؟ ! أﻧﺎ ﻻ أﻋﺘﻘﺪ‬ ‫ﻻﺑﺪ ﻣﻦ أﻧﻪ ﯾﻮﺟﺪ ﺷﻲء ﻧﺎﻗﺺ ﻻﺑﺪ واﻧﻨﺎ ﻧﺴﯿﻨﺎ ﺷﻲء ﻣﺎ !!! أه..... أﻧﻬﺎ اﻟﺼﻮر أن اﻟﺪارﺳﯿﻦ اﻟﺠﺪد ﯾﻔﻀﻠﻮن ﻣﻞء‬ ‫ﺻﻔﺤﺎﺗﻬﻢ ﺑﺎﻟﺼﻮر ﻟﻜﻲ ﯾﻀﯿﻔﻮا اﻟﻨﺎﺣﯿﻪ اﻟﺠﻤﺎﻟﯿﻪ ﻟﺼﻔﺤﺎﺗﻬﻢ ، ﻓﻠﻬﺬا ﻻﺑﺪ وان ﺗﻜﻮن ﻣﻨﺘﺒﻪ اﻵن و أذا ﻛﺎن ﻟﺪﯾﻚ أي‬ ‫إﺳﺘﻔﺴﺎر ﻋﻦ اﻟﺼﻔﺤﺎت اﻟﺴﺎﺑﻘﻪ أذﻫﺐ إﻟﻲ اﻟﺪروس اﻟﻤﺘﻘﺪﻣﺔ ﻓﻔﺒﻬﺎ ﺷﺮح أﻛﺜﺮ وأن ﻟﻢ ﯾﻔﯿﺪك أرﺳﻞ ﻟﻲ وﻻ ﺗﺘﺮدد.‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] إدراج ﺻﻮرة | ﺻﻮرة ذات وﺻﻠﻪ | اﻟﺨﻮاص اﻷﺳﺎﺳﯿﻪ [‬ ‫إدراج ﺻﻮرة‬ ‫ﻓﻲ اﻟﺒﺪاﯾﻪ ﻛﺎﻟﻌﺎده ﻧﺘﻌﺮف ﻋﻠﻲ اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺈدراج ﺻﻮرة و ﻫﻮ >‪ <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‬‬
  • 14. ‫اﻟﺨﻮاص اﻷﺳﺎﺳﯿﻪ ﻟﻠﺼﻮرة:-‬ ‫ﻋﻨﺪﻣﺎ ﻧﻘﻮم ﺑﺈدراج ﺻﻮرة ﺿﻤﻦ ﻓﻘﺮة ﻓﺈن ﻣﻮﻗﻊ ﻇﻬﻮرﻫﺎ ﯾﺘﺤﺪد ﺑﺎﻟﻄﺒﻊ ﺣﺴﺐ ﺗﺮﺗﯿﺐ ورودﻫﺎ ﻓﻲ اﻟﻔﻘﺮة، ﻣﺜﻠﻬﺎ‬ ‫ﻣﺜﻞ أي ﻛﻠﻤﺔ أو ﻋﺒﺎرة أﺧﺮى. وﻧﺴﺘﺨﺪم اﻟﺨﺎﺻﯿﺔ ‪ 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‬‬
  • 15. ‫ﻫﺬه اﻟﻘﯿﻤﺔ ﺗﺆدي إﻟﻰ ﻣﺤﺎذاة اﻟﺼﻮرة إﻟﻰ أﻗﺼﻰ اﻟﯿﺴﺎر. ﻣﻊ اﻟﺘﻔﺎف‬ ‫اﻟﻨﺺ اﻟﺬي ﯾﻠﯿﻬﺎ ﻋﻠﻰ اﻟﺠﻬﺔ اﻟﯿﻤﻨﻰ وﻟﻌﺪة أﺳﻄﺮ ﺣﺴﺐ ارﺗﻔﺎع اﻟﺼﻮرة.‬ ‫>"‪<IMG SRC="image.jpg" ALIGN="LEFT‬‬ ‫‪RIGHT‬‬ ‫أﻣﺎ ﻫﺬه اﻟﻘﯿﻤﺔ ﻓﺘﺆدي إﻟﻰ ﻣﺤﺎذاة اﻟﺼﻮرة إﻟﻰ أﻗﺼﻰ اﻟﯿﻤﯿﻦ. ﻣﻊ اﻟﺘﻔﺎف‬ ‫اﻟﻨﺺ اﻟﺬي ﯾﻠﯿﻬﺎ ﻋﻠﻰ اﻟﺠﻬﺔ اﻟﯿﺴﺮى وﻟﻌﺪة أﺳﻄﺮ ﺣﺴﺐ ارﺗﻔﺎع‬ ‫اﻟﺼﻮرة .‬ ‫>"‪<IMG SRC="image.jpg" ALIGN="RIGHT‬‬ ‫ﻟﻤﺰﯾﺪ ﻣﻦ اﻟﻤﻌﻠﻮﻣﺎت واﻟﻘﯿﻢ أﻗﺮأ اﻟﺪروس اﻟﺨﺎﺻﻪ ﺑﺎﻟﺼﻮر‬ ‫واﻵن إﻟﻲ اﻟﻔﺼﻞ اﻟﺘﺎﻟﻲ :- أﻟﻮان اﻟﻮﺻﻼت و اﻟﺨﻠﻔﯿﻪ‬ ‫ﺧﻮاص اﻟﺼﻔﺤﺔ‬ ‫ﻫﺎي اﻵن ﻧﺴﺘﻄﯿﻊ أن ﻧﻘﻮل أﻧﻚ ﻟﺪﯾﻚ ﻗﺪر ﻗﻠﯿﻞ ﻣﻦ اﻟﻌﺒﻘﺮﯾﻪ ﻓﻲ اﻟـ ‪ ، HTML‬أﻧﺖ ﺗﺘﻤﻨﻲ أن ﯾﻜﻮن ﻣﻮﻗﻌﻚ ذو‬ ‫ﺷﻜﻞ ﻣﻘﺒﻮل وﻫﺬا ﯾﻌﻨﻲ أﺳﺘﺨﺪم ﺟﯿﺪ ﻷﻟﻮان وﺗﺼﻤﯿﻢ ﺟﺬاب !!! ، ﻓﺤﺘﻰ اﻵن اﻷﻟﻮان اﻟﻮﺣﯿﺪه ﻋﻠﻲ ﺻﻔﺤﺘﻚ ﻛﺎﻧﺖ‬ ‫اﻷﺑﯿﺾ اﻟﺨﻠﻔﯿﻪ اﻷﺳﻮد ﻟﻠﻨﺺ اﻷزرق ﻟﻠﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﻪ اﻟﻦ ﺗﺤﺐ أن ﺗﻐﯿﯿﺮﻫﻢ إﻟﻲ ﺷﻲء أﻛﺜﺮ ﺟﻤﺎﻟﻪ وأﻧﺎﻗﻪ؟.!!‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫[وﺳﻢ اﻟﺠﺴﻢ‪ | Body Tag‬ﻟﻮن اﻟﺨﻠﻔﯿﻪ | اﻟﻨﺺ | اﻟﻮﺻﻠﻪ | اﻟﻮﺻﻠﻪ اﻟﻤﺰارة | اﻟﻮﺻﻠﻪ اﻟﻨﺸﻄﻪ | ﺻﻮرة اﻟﺨﻠﻔﯿﻪ‬ ‫|اﻟﻬﻮاﻣﺶ | ﻛﻠﻤﺔ ﻋﻠﻲ إﺧﺘﯿﺎر اﻷﻟﻮان]‬ ‫وﺳﻢ اﻟﺠﺴﻢ ‪Body Tag‬‬ ‫اﻷن أﻧﺖ ﻟﺪﯾﻚ ﻣﻌﺮﻓﺔ وﻗﺪرة ﻋﻠﻲ إﺳﺘﻌﻤﺎل ﺧﻮاص اﻷوﺳﻤﻪ ، وﻫﺬا ﯾﺒﺸﺮ ﺑﺒﺪاﯾﻪ ﺟﯿﺪه .‬ ‫ﺗﺘﺬﻛﺮ ﺑﺎﻟﻄﺒﻊ وﺳﻢ اﻟـ‪ BODY‬اﻟﻤﻮﺟﻮد ﻓﻲ ﺻﻔﺤﺘﻲ اﻷوﻟﻲ ﺣﯿﺚ ﻛﻞ ﺷﻲء ﯾﻜﻮن ﻣﺮئ ﻓﻲ ﺻﻔﺤﺘﻚ ﻻﺑﺪ وان‬ ‫ﯾﻜﻮن ﺑﺪاﺧﻞ ﻫﺬا اﻟﻮﺳﻢ ، و ﻫﺬا اﻟﻮﺳﻢ ﻣﺎ ﺳﻮف ﻧﺘﺪﺣﺪث ﻋﻨﻪ ﻓﻲ ﻫﺬا اﻟﻔﺼﻞ . ﻫﻨﺎك ﺳﺒﻌﺔ ﺧﻮاص ﺗﻀﺎف إﻟﻲ‬ ‫ﻫﺬا اﻟﻮﺳﻢ ﻛﻞ ﻣﻨﻬﺎ ﺗﺘﺤﻜﻢ ﻓﻲ ﻣﻈﻬﺮ وﺗﺼﻤﯿﻢ ﺻﻔﺤﺘﻚ :-‬
  • 16. ‫ﻟﻮن اﻟﺨﻠﻔﯿﻪ‬ ‫ون ﺳﺘﺨﺪم ﻟﺘﻐﯿﯿﺮ ﻟﻮن اﻟﺨﻠﻔﯿﻪ اﻟﺨﺎﺻﯿﻪ ‪ BGCOLOR‬و‪ BG‬إﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ ‪ BackGround‬و ﻻﺑﺪ أن ﺗﻀﻊ‬ ‫اﻟﻘﯿﻤﺔ أي اﻟﻠﻮن ﺑﻜﻮد اﻟـ ‪ HEX‬ﻣﺜﻞ ﺑﺎﻗﻲ اﻷﻟﻮان !! وﻟﻜﻦ أراك ﺗﺘﺴﺎﺋﻞ ﻣﺎ ﻫﻮ ﻛﻮد اﻟـ ‪ HEX‬؟!!! ﺳﺆال ﺟﯿﺪ‬ ‫وﻟﻜﻦ ﻫﺬا ﻣﻌﻨﺎه أﻧﻚ ﻻﺑﺪ وأن ﺗﻘﺮأ ﺗﻌﺮﯾﻒ ﻫﺬا اﻟﻜﻮد ، أذا وددت أن ﺗﺮي ﻗﺎﺋﻤﺔ ﺑﺄﻛﻮاد ٦١٢ ﻟﻮن ﻣﺨﺘﻠﻔﯿﻦ أﻟﻘﻲ‬ ‫ﻧﻈﺮه ﻋﻠﻲ ﻫﺬا اﻟﻤﺨﻄﻂ أﻣﺎ ﺑﺎﻟﻨﺴﺒﻪ ﻟﻠﻜﻮد ﯾﻜﻮن ﺑﻬﺬا اﻟﺸﻜﻞ‬ ‫"‪BGCOLOR="#FFFFFF‬‬ ‫ﻣﻼﺣﻈﺔ :- ﻫﺬا اﻟﻜﻮد ﻟﻠﻮن اﻷﺑﯿﺾ ﻓﺄذا وددت أن ﺗﻜﻮن ﺧﻠﯿﻔﯿﻪ ﺻﻔﺤﺘﻚ ﺑﻬﺬا اﻟﻠﻮن ﻻﺑﺪ ﻣﻦ ﻛﺘﺎﺑﻪ ﻫﺬا اﻟﻜﻮد ،‬ ‫ﻫﺬا ﺑﺎﻟﺮﻏﻢ ﻣﻦ أن اﻟﻠﻮن اﻷﺑﯿﺾ ﻫﻮ اﻟﻠﻮن اﻷﺳﺎﺳﻲ ﻟﻠﺼﻔﺤﺎت وﻟﻜﻦ ﺑﻌﺾ اﻟﻤﺴﺘﻌﺮﺿﺎت ﯾﻜﻮن اﻟﻠﻮن اﻷﺳﺎﺳﻲ‬ ‫ﻟﻬﺎ ﻫﻮ اﻟﺮﻣﺎدي‬ ‫اﻟﻨﺺ‬ ‫ﻻ ﯾﺨﺘﻠﻒ ﻛﺜﯿﺮا ﻛﻮد اﻟﻨﺺ ﻋﻦ ﻛﻮد اﻟﺨﻠﻔﯿﻪ ﻟﻜﻦ ﻧﻨﺼﺢ داﺋﻤﺎ ﺑﺘﺮك ﻟﻮن اﻟﺨﻠﻔﯿﻪ ﻋﻠﻲ اﻟﻠﻮن اﻷﺳﺎﺳﻲ وﻫﻮ اﻷﺳﻮد‬ ‫ﺣﯿﺚ أﻧﻪ اﻷﺳﻬﻞ ﻓﻲ اﻟﻘﺮاءه و إﻟﯿﻚ اﻟﻜﻮد‬ ‫"000000#"=‪TEXT‬‬ ‫اﻟﻮﺻﻠﻪ‬ ‫ﺑﺎﻟﻄﺒﻊ ﺗﻈﻬﺮ ﻟﻚ ﻛﻞ اﻟﻮﺻﻼت ﺑﺎﻟﻠﻮن اﻷزرق ، ﻟﻜﻦ ﯾﻤﻜﻨﻚ أن ﺗﻐﯿﺮ ﻫﺬا إﻟﻲ أي ﻟﻮن ﯾﺤﻠﻮ ﻟﻚ و ﻫﺬا ﻫﻮ اﻟﻜﻮد‬ ‫"‪LINK="#FF00FF‬‬ ‫اﻟﻮﺻﻠﻪ اﻟﻤﺰارة‬ ‫ﻋﻨﺪﻣﺎ ﺗﻀﻐﻂ ﻋﻠﻲ أي وﺻﻠﻪ ﺛﻢ ﺗﻌﻮد ﻣﺮة أﺧﺮي ﻟﻠﺼﻔﺤﺔ اﻟﺘﻲ ﺿﻐﻂ ﻓﯿﻬﺎ ﻋﻠﻲ ﺗﻠﻚ اﻟﻮﺻﻠﻪ ﻓﺄﻧﻚ ﺗﻼﺣﻆ ﺗﻐﯿﺮ‬ ‫ﺗﻠﻚ اﻟﻮﺻﻠﻪ إﻟﻲ اﻟﻠﻮن اﻟﺒﻨﻔﺴﺠﻲ و ﺑﺎﻟﻄﺒﻊ ﺗﺴﺘﻄﯿﻊ أن ﺗﻐﯿﯿﺮ ﻫﺬا اﻟﻠﻮن و إﻟﯿﻚ اﻟﻜﻮد‬ ‫"660066#"=‪VLINK‬‬ ‫اﻟﻮﺻﻠﻪ اﻟﻨﺸﻄﻪ‬ ‫ﻻ أﻋﺮف ﻫﻞ ﻗﺎﺑﻠﺖ ﻣﺜﻞ ﻫﺬا أم ﻻ وﻟﻜﻦ ﺑﺈﺧﺘﺼﺎر ﻋﻨﺪﻣﺎ ﺗﻘﻮم ﺑﺎﻟﻀﻐﻂ ﻋﻠﻲ وﺻﻠﻪ ﺛﻢ ﺗﺪﺧﻞ اﻟﺼﻔﺤﺔ وﺗﺠﺪ ﺑﻬﺎ‬ ‫ﻧﻔﺲ اﻟﻠﻮﺻﻠﻪ ﻟﻜﻦ ﻟﻮﻧﻬﺎ ﻗﺪ ﺗﺤﻮل إﻟﻲ اﻟﻠﻮن اﻷﺳﻮد ﻣﺜﻼ وﻻ ﺗﺴﺘﻄﯿﻊ أن ﺗﻀﻐﻂ ﻋﻠﯿﻬﺎ ﻣﺮة أﺧﺮي ﻋﻨﺪﻫﺎ ﺗﻜﻮن‬ ‫ﻫﺬه اﻟﻮﺻﻠﻪ ﻫﻲ اﻟﻮﺻﻠﻪ اﻟﻨﺸﻄﺔ أي اﻟﺼﻔﺤﺔ اﻵن ﻫﻲ اﻟﺼﻔﺤﺔ اﻟﻌﺎﻣﻠﺔ ﻟﻬﺬه اﻟﻮﺻﻠﻪ و ﻫﺬا ﻫﻮ اﻟﻜﻮد‬ ‫"0000‪ALINK="#FF‬‬ ‫ﺻﻮرة اﻟﺨﻠﻔﯿﻪ‬
  • 17. ‫ﺗﺮﯾﺪ أن ﺗﻀﻊ ﺻﻮرة ﻓﻲ اﻟﺨﻠﻔﯿﻪ !!! ﻓﻜﺮة ﺟﯿﺪة ﺧﺬ ﻫﺬه اﻟﺨﺎﺻﯿﻪ و أﺳﺘﺨﺪﻣﻬﺎ ﻟﻌﻤﻞ اﻟﺼﻮرة ﻛﺎﺧﻠﻔﯿﻪ و ﺿﻊ‬ ‫اﻟﻘﯿﻤﺔ ﻛﻤﺎ ﺗﻔﻌﻞ ﻓﻲ إدراج اﻟﺼﻮرة ‪ ) ، SRC‬إذا ﻛﻨﺖ ﻻ ﺗﺪري ﻛﯿﻒ أﻗﺮأ اﻟﺒﺤﺚ اﻟﺪرس اﻟﺨﺎص ﺑﺎﻟﺼﻮر( .‬ ‫ﯾﻤﻜﻨﻚ أﯾﻀﺎ أن ﺗﺴﺘﺨﺪم ﺻﻮرة ﻣﻦ ﻣﻮﻗﻊ أﺧﺮ ﻋﻦ ﻃﺮﯾﻖ وﺿﻊ اﻟﻮﺻﻠﻪ اﻟﺨﺎﺻﺔ ﺑﻪ ﻟﺪﯾﻚ ، ﺗﺴﺘﻄﯿﻊ أن ﺗﺴﺘﺨﺪم‬ ‫ﻣﺜﻼ ﻫﺬه اﻟﺼﻮرة اﻟﺨﺎص ﺑﻤﻮﻗﻌﻨﺎ ‪ Downloads Free‬ﻓﻘﻂ ﺿﻊ ﻫﺬا اﻟﻜﻮد‬ ‫"‪BACKGROUND="http://www.geocities.com/asdh4/images/bak.jpg‬‬ ‫ﯾﺠﺐ أن ﺗﻌﺮف أن أي ﺻﻮرة ﺳﻮف ﺗﺨﺘﺎره ﺳﺘﻘﻮم ﺑﺘﻜﺮار ﻧﻔﺴﻬﺎ ﻓﻲ ﻣﻞء اﻟﻤﺴﺘﻌﺮض وﻟﻬﺬا ﯾﺠﺐ أن ﺗﺨﺘﺎر‬ ‫ﺗﻜﻤﻞ ﻧﻔﺴﻬﺎ ﺑﻤﻌﻨﻲ أن ﺗﻜﻮن اﻟﺼﻮرة ﻟﻮﺣﺪﻫﺎ ﻻ ﺗﺸﻜﻞ ﺷﻲء وﻟﻜﻦ ﻋﻨﺪ ﺗﻜﺮاراﻫﺎ ﺗﻜﻮن ﻣﻨﻈﺮ ﺟﯿﺪ،‬ ‫و ﯾﻮﺟﺪ أﯾﻀﺎ ﺧﺎﺻﯿﻪ ﺗﺠﻌﻞ اﻟﺼﻮرة ﻛﻌﻼﻣﺔ ﻣﺎﺋﯿﻪ ‪ Watermark‬ﺑﻤﻌﻦ أن ﺗﻜﻮن اﻟﺼﻮرة ﺛﺎﺑﺘﺔ وﻻ ﯾﺤﺪث ﻟﻬﺎ‬ ‫‪ Scroll‬و ﻟﻬﺬه اﻟﺨﺎﺻﯿﺔ ﺿﻊ ﻫﺬا اﻟﻜﻮد داﺧﻞ ‪Body‬‬ ‫"‪BGPROPERTIES="FIXED‬‬ ‫اﻟﻬﻮاﻣﺶ‬ ‫ﯾﻮﺟﺪ ﻧﻮﻋﯿﻦ ﻣﻦ اﻟﻬﻮاﻣﺶ ﻫﻮاﻣﺶ ﺟﺎﻧﺒﯿﻪ وﻫﻮاﻣﺶ أﻓﻘﯿﻪ ، وﻟﻜﻦ اﻟﻤﺴﺘﻌﺮﺿﺎن اﻷﺳﺎﺳﯿﺎن ﯾﺴﺘﺨﺪﻣﺎن ﻛﻮدان‬ ‫ﻣﺨﺘﻠﻘﺎن وﻟﻬﺬا ﻋﻨﺪﻣﺎ ﺗﻘﻮم ﺑﺘﻐﯿﯿﺮ أﺣﺪﻫﻤﺎ ﯾﺠﺐ ﺗﻐﯿﯿﺮ اﻷﺧﺮ ﺑﻨﻔﺲ اﻟﻄﺮﯾﻘﺔ‬ ‫"0"=‪TOPMARGIN‬‬ ‫"0"=‪ LEFTMARGIN‬و‬ ‫و ﻫﺬه ﻫﻲ اﻟﺼﯿﻐﺔ ﻟﻠـ ‪Internet Explorer‬‬ ‫"0"=‪ MARGINWIDTH‬و "0"=‪MARGINHEIGHT‬‬ ‫و ﻫﺬه ﻫﻲ اﻟﺼﯿﻐﺔ ﻟﻠـ ‪Netscape‬‬ ‫ﻋﻠﻲ اﻟﺮﻏﻢ ﻣﻦ أن أﻛﻮاد اﻟﻤﺴﺘﻌﺮﺿﺎن ﻣﺨﺘﻠﻔﺎن إﻻ أن وﺣﺪات اﻟﻘﯿﺎس واﺣﺪه وﻫﻲ اﻟﺒﯿﻜﺴﻞ و ﻟﻬﺬا إذا أرﺗﺪ أن‬ ‫ﯾﻜﻮن اﻟﻤﻘﯿﺎس ﺛﺎﺑﺖ ﻓﻲ ﻛﻼﻣﻦ اﻟﻤﺴﺘﻌﺮﺿﺎن ﻓﻘﻂ أﺧﺘﺎر ﻧﻔﺲ اﻟﻘﯿﻤﺔ .‬ ‫أرﻧﻲ اﻟﻜﻮد ﻛﺎﻣﻼ‬ ‫واﻵن اﻟﻮﺳﻢ اﻟﻜﺎﻣﻞ ﻟﻠـ‪ Body‬ﯾﻜﻮن ﻣﺜﻞ ﻫﺬا اﻟﺸﻜﻞ ﻣﺜﻼ‬ ‫اﻟﻮﺳﻢ اﻟﻜﺎﻣﻞ‬ ‫"000000#"=‪<BODY BGCOLOR="#FFFFFF" BACKGROUND="bubbles.gif" TEXT‬‬ ‫"‪LINK="#3399FF" VLINK="#9966FF" ALINK="#000000" BGPROPERTIES="FIXED‬‬ ‫>"0"=‪TOPMARGIN="0" MARGINHEIGHT‬‬ ‫ﻛﻠﻤﺔ ﻋﻠﻲ إﺧﺘﯿﺎر اﻷﻟﻮان‬ ‫ﯾﺠﺐ ﻋﻠﯿﻚ أن ﺗﺨﺘﺎر أﻟﻮان ﺟﺬاب ﻣﺘﻨﺎﺳﻘﻪ ﻣﻊ ﺑﻌﻀﻬﺎ اﻟﺒﻌﺾ و أن ﺗﺒﻌﺪ ﺗﻤﺎﻣﺎ ﻋﻦ اﻷﻟﻮان اﻟﻔﺎﻗﻌﺔ ﻓﺨﺘﺎر اﻷﻟﻮان‬ ‫اﻟﻬﺎدﺋﻪ و اﻟﻤﺨﻤﻠﯿﻪ ﻓﺎﻟﻤﻮاﻗﻊ اﻟﻤﻨﺘﺸﺮه واﻟﻤﺸﻬﻮر ﺗﺨﺘﺎر أﻟﻮان ﺑﺴﯿﻂ ﻛﻲ ﺗﺠﻌﻞ اﻟﺰاﺋﺮ أﻛﺜﺮ راﺣﺔ ﻋﻨﺪ دﺧﻮﻟﻪ‬ ‫ﻟﻤﻮﻗﻊ ، ﻛﻤﺎ ﺗﺠﻨﺐ ﻋﻨﺪ أﺧﺘﯿﺎرك ﻟﻠﺼﻮرة اﻟﺨﻠﻔﯿﻪ أن ﺗﺨﺘﺎر ﺧﻠﻔﯿﻪ ذات أﻟﻮان ﺑﺎﻫﺘﻪ وﻟﻜﻦ ﺟﻤﯿﻠﻪ ﺣﺘﻲ ﯾﺘﺴﻨﻲ‬ ‫ﻟﻠﻘﺎرء رؤﯾﻪ اﻟﻨﺺ و ﻻﺗﺨﺘﺎر ﻟﻮن ﻟﻠﻨﺺ ﻗﺮﯾﺐ ﻣﻦ ﻟﻮن اﻟﺨﻠﻔﯿﻪ أو ﻟﻮن ﺻﻮرة اﻟﺨﻠﻔﯿﻪ ﻓﻬﺬا ﯾﺰﯾﺪ ﺻﻌﻮﺑﻪ ﻋﻠﻲ‬ ‫اﻟﻘﺎريء ﻣﻦ رؤﯾﻪ اﻟﻨﺺ ﺑﻮﺿﻮح ﻓﺎﻟﻨﺺ ﺳﯿﺨﺘﻔﻲ ﻣﻊ ﻟﻮن اﻟﺨﻠﻔﯿﻪ اﻟﻘﺮﯾﺐ ﻣﻦ ﻟﻮﻧﻪ .‬
  • 18. ‫ﺣﺎول ﻋﺪم إﺳﺘﺨﺪام ﺻﻮر ﻟﻠﺨﻠﻔﯿﻪ ﻣﺮﻋﺒﻪ أو أﻟﻮان ﺳﺎﺧﻨﺔ ﻣﺜﻞ اﻷﺣﻤﺮ ﻣﺜﻼ ﺣﺘﻲ ﻻ ﯾﺤﺪث إرﺗﻄﺎم ﺑﺼﺮي ﻟﻠﺰاﺋﺮ‬ ‫ﺑﺄﻟﻮان ﻣﻮﻗﻊ إﻟﻘﻲ ﻧﻈﺮه ﻋﻠﻲ ﻫﺬا اﻟﻤﻮﻗﻊ ﻟﻜﻲ ﺗﻔﻬﻢ ﻣﺎذا أﻗﺼﺪ « ‪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‬اﻹﺳﻢ اﻟﻤﺸﺘﺮك ﺑﻪ و ﻛﻠﻤﺔ اﻟﻤﺮور اﻟﺨﺎص ﺑﻚ ﻟﻨﻘﻞ ﻣﻮﻗﻌﻚ‬ ‫إﻟﻲ اﻟﺴﯿﺮﻓﺮ ) اﻟﺨﺎدم ( وﻋﻨﺪ إﻛﺘﻤﺎل ﻧﻘﻞ اﻟﻤﻠﻔﺎت ﯾﺠﺐ أن ﯾﻜﻮن ﻣﻮﻗﻌﻚ ﻣﺘﺎح اﻵن ﻋﻠﻲ ﺷﺒﻜﺔ اﻹﻧﺘﺮﻧﺖ‬
  • 19. ‫ﻣﻼﺣﻈﺔ:- ﯾﺠﺐ أن ﺗﺴﻤﻲ أول ﺻﻔﺤﺔ )‪ index.htm‬أو ‪ ( index.html‬ﺣﺘﻲ ﯾﺘﻌﺮف اﻟﻤﺴﺘﻌﺮض ﻋﻠﻲ‬ ‫أي ﻣﻦ اﻟﺼﻔﺤﺎت ﺳﯿﺘﻢ ﻋﺮﺿﻬﺎ أوﻻ .‬ ‫اﻟﻨﺼﻮص‬ ‫إن أﺳﻬﻞ ﺷﻲء ﻫﻮ أن ﺗﻜﺘﺐ ﻓﻲ ﻣﻮﻗﻌﻚ و اﻟﺰوار ﺳﯿﻘﺮأوﻧﻪ ، ﻟﻜﻦ ﺑﺪون ﺑﻌﺾ اﻟﺘﻌﺪﯾﻼت واﻟﺘﻨﺴﯿﻘﺎت ﺳﯿﻜﻮن‬ ‫ﻧﺼﻚ ﻗﺒﯿﺢ و ﻏﯿﺮ ﺻﺎﻟﺢ ﻟﻠﻘﺮأه . ﺷﻜﺮاااااااااا ، ﺗﻨﺴﯿﻖ اﻟﻨﺺ ﻫﻮ أﺳﻬﻞ ﺟﺰء ﻓﻲ ﻟﻐﺔ ال ‪ ،HTML‬ﻟﻜﻦ ﻫﻨﺎك‬ ‫ﻧﺺ ﯾﻨﺴﻖ وﻧﺺ ﯾﻜﻮن ﺟﺬاب . أﻗﺮأ اﻵن‬ ‫اﻟﻌﻨﺎوﯾﻦ وﺣﺠﻢ اﻟﺨﻄﻮط‬ ‫أﻧﺖ ﺗﺴﺘﻄﯿﻊ أن ﺗﻐﯿﺮ ﺣﺠﻢ اﻟﺨﻂ و ﻫﺬا ﺳﯿﺴﺎﻋﺪك ﻛﺜﯿﺮا ﻓﻲ ﺗﻨﺴﯿﻖ ﺻﻔﺤﺘﻚ‬ ‫أﺷﻜﺎل وأﻟﻮان اﻟﺨﻄﻮط‬ ‫ﻫﻞ ﺗﺮﯾﺪ ﻧﺺ ﻋﺪﯾﺪ اﻷﻟﻮان و ﻣﺨﺘﻠﻒ اﻷﺷﻜﺎل ﻋﻠﻲ ﺻﻔﺤﺘﻚ؟ ﺣﻘﺎ؟!!‬ ‫اﻟﺮﻣﻮز اﻟﺨﺎﺻﻪ‬ ‫ﺧﺎص ﺟﺪا ﺗﺮﯾﺪ أن ﺗﻜﺘﺐ رﻣﺰ ﻏﯿﺮ ﻣﻮﺟﻮد ﻋﻠﻲ ﻟﻮﺣﺔ اﻟﻤﻔﺎﺗﯿﺢ ؟ ﺗﺮﯾﺪ إﺳﺘﻌﻤﺎل اﻟﺮﻣﺰ اﻟﺴﺤﺮي ؟‬ ‫اﻟﻮﺻﻼت‬ ‫اﻟﻮﺻﻼت ؟؟؟ ﺗﻌﻨﻲ اﻷﻧﺘﻘﺎل واﻟﻘﻔﺰ ﺑﯿﻦ ﻣﻘﺎﻃﻊ ﺻﻔﺤﺎﺗﻚ وﺻﻔﺤﺎﺗﻚ اﻵﺧﺮي ، أﻧﻬﻢ ﻓﻲ ﻏﺎﯾﻪ اﻟﺴﻬﻮﻟﻪ ﻟﻜﻲ ﺗﻘﻮم‬ ‫ﺑﺬﻟﻚ....‬ ‫اﻟﻘﻮاﺋﻢ‬ ‫ﺗﻌﻠﻢ ﻛﯿﻒ ﺗﻀﻊ ﻧﺼﻚ ﻓﻲ ﻧﻘﻂ ﻣﺮﺗﺼﻪ ، ﻣﺮﻗﻤﻪ وﻗﻮاﺋﻢ ﻣﻌﺮﻓﺔ !!!‬ ‫ﻗﺎﺋﻤﺔ ﺑﺠﻤﯿﻊ وﺳﻮم اﻟﻨﺺ‬ ‫ﯾﻮﺟﺪ ﻫﻨﺎ أﻛﺜﺮ ﻣﻦ ٠٤ وﺳﻢ ﺗﺴﺘﻄﯿﻊ إﺳﺘﺨﺪاﻣﻬﻢ ﻓﻲ ﺗﻨﺴﯿﻖ ﻧﺼﻚ . وإﻟﯿﻚ اﻟﻘﺎﺋﻤﺔ‬ ‫اﻟﻨﺺ اﻟﻤﺘﺤﺮك‬ ‫إﺳﺘﻌﻤﻞ ال‪ Internet Explorer‬ﻟﻜﻲ ﺗﺠﻌﻞ ﻧﺼﻚ ﯾﺘﺤﺮك ﻓﻲ اﻟﺸﺎﺷﻪ ؟!!!!‬ ‫اﻟﻌﻨﺎوﯾﻦ وﺣﺠﻢ اﻟﺨﻄﻮط‬
  • 20. ‫أﻫﻼ وﺳﻬﻼ ﺑﻚ ﻓﻲ أول درس ﻣﻦ اﻟﺪروس اﻟﻤﺘﺨﺼﺼﻪ ﻟﺘﻌﻠﯿﻢ ﻟﻐﺔ اﻟـ( ‪HTML‬إذا ﻛﻨﺖ ﺗﺮﯾﺪ ﻣﺮﺟﻊ ﺳﺮﯾﻊ‬ ‫أﺿﻐﻂ ﻫﻨﺎ)‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] اﻟﻌﻨﺎوﯾﻦ | ﺣﺠﻢ اﻟﺨﻂ [‬ ‫ﺳﻮف ﻧﺘﺎﺑﻊ ﻓﻲ ﻫﺬا اﻟﺪرس اﻟﺘﻌﺮف ﻋﻠﻰ اﻟﻮﺳﻮم اﻟﺨﺎﺻﺔ ﺑﺎﻟﺨﻄﻮط ، ﺳﻮف ﺗﻼﺣﻆ ﻓﻲ ﻫﺬا اﻟﺪرس واﻟﺪروس‬ ‫اﻟﻼﺣﻘﺔ أن ﻫﻨﺎك أﻛﺜﺮ ﻣﻦ ﻃﺮﯾﻘﺔ ﻷداء ﻧﻔﺲ اﻟﻌﻤﻞ، أو إﻋﻄﺎء ﻧﻔﺲ اﻟﺨﺼﺎﺋﺺ ﻟﺼﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ. وﺑﺎﻟﻤﻘﺎﺑﻞ ﻗﺪ‬ ‫ﯾﺒﺪو ﻟﻚ أن ﺑﻌﺾ اﻟﻮﺳﻮم واﻟﺨﺼﺎﺋﺺ ﻣﺘﺸﺎﺑﻬﺔ ﻓﻲ ﺗﺄﺛﯿﺮﻫﺎ، ﻟﻜﻦ ﺑﺎﻟﻘﻠﯿﻞ ﻣﻦ اﻟﺘﺪﻗﯿﻖ واﻟﺘﺠﺮﺑﺔ ﺳﺘﻜﺘﺸﻒ أن ﻟﻜﻞ‬ ‫وﺳﻢ ﺧﺼﻮﺻﯿﺘﻪ.‬ ‫اﻟﻌﻨﺎوﯾﻦ )‪-: ( Headings‬‬ ‫ﻓﻲ اﻟﺒﺪاﯾﻪ ﻧﻮد أن ﻧﻘﻮل أن وﺳﻢ اﻟﻌﻨﻮان ﻗﺪ ﻗﺴﻢ ﺑﻄﺮﯾﻘﺔ ﻣﺘﺘﺎﻟﯿﻪ ﺑﺤﯿﺚ ﯾﻮﺟﺪ ٦ﻣﺴﺘﻮﯾﺎت ﻣﺨﺘﻠﻔﺔ ﻣﻦ اﻟﻌﻨﺎوﯾﻦ ﻣﻦ‬ ‫أﻛﺒﺮ ﻣﺴﺘﻮي وﯾﺄﺧﺬ اﻟﻮﺳﻢ >1‪ <H‬إﻟﻲ أﺻﻐﺮ ﻣﺴﺘﻮي وﯾﺄﺧﺬ اﻟﻮﺳﻢ >6‪ <H‬دﻋﻨﺎ ﻧﺮﯾﻚ ﻣﺜﺎل اﻵن‬ ‫اﻟـﺘـﺄﺛـﯿـﺮ‬ ‫اﻟـﻮﺳـﻢ‬ ‫1 ‪Heading‬‬ ‫>1‪<H1>Heading 1</H‬‬ ‫2 ‪Heading‬‬ ‫>2‪<H2>Heading 2</H‬‬ ‫3 ‪Heading‬‬ ‫>3‪<H3>Heading 3</H‬‬ ‫4 ‪Heading‬‬ ‫>4‪<H4>Heading 4</H‬‬ ‫5 ‪Heading‬‬ ‫>5‪<H5>Heading 5</H‬‬ ‫6 ‪Heading‬‬ ‫>6‪<H6>Heading 6</H‬‬ ‫ﻛﻞ ﻣﺎﻋﻠﯿﻚ ﻓﻌﻠﻪ ﻫﻮ أن ﺗﻀﻊ اﻟﻨﺺ داﺧﻞ اﻟﻮﺳﻢ ﻛﻤﺎ ﺗﺮي ﻓﻲ اﻟﻮﺳﻮم اﻟﺴﺎﺑﻘﻪ وﻛﻤﺎ ﺗﺮي اﻟﻨﺺ ﺳﯿﻈﺮ واﺿﺢ‬ ‫وﻛﺒﯿﺮ وﻟﻜﻦ ﯾﺠﺐ أن ﺗﻼﺣﻆ ان اﻟﻌﻨﻮان داﺋﻤﺎ ﯾﻜﻮن ﻣﻨﻔﺼﻞ ﻋﻦ اﻟﻨﺺ اﻷﺳﺎﺳﻲ ﺑﻤﻌﻨﻲ أﻧﻪ ﯾﻜﻮن ﻓﻲ اﻟﺒﺪاﯾﻪ أو‬ ‫رأس اﻟﻔﻘﺮة ، ﯾﺠﺐ ﻋﻠﯿﻚ أن ﺗﻐﯿﯿﺮ ﺣﺠﻢ اﻟﺨﻂ وﻟﯿﺲ اﻟﻌﻨﻮان وﻫﻨﺎ ﻧﺄﺗﻲ إﻟﻲ ﺗﻐﯿﯿﺮ ﺣﺠﻢ اﻟﺨﻄﻮط.‬ ‫>‪<FONT/> ... <FONT‬‬ ‫وﻟﻜﻦ ﻗﺒﻞ أن ﻧﺒﺪأ أن ﻧﺘﺤﺪث ﻋﻦ ﺣﺠﻢ اﻟﺨﻄﻮط ﻻﺑﺪ وان ﺗﻌﺮف ﻫﺬا اﻟﻮﺳﻢ‬ ‫وﻫﻮ اﻟﻮﺳﻢ اﻟﺨﺎص ﺑﺎﻟﺨﻄﻮط ﻫﻮ ﯾﻘﻮم ﺑﺎﻟﺘﺤﻜﻢ ﺑﺎﻟﺨﻄﻮط ﻣﻦ ﺣﯿﺚ اﻟﻨﻮع واﻟﻠﻮن واﻟﺤﺠﻢ. أﻣﺎ اﻟﺨﺼﺎﺋﺺ اﻟﺘﻲ‬ ‫ﻧﺴﺘﺨﺪﻣﻬﺎ ﻣﻊ ﻫﺬا اﻟﻮﺳﻢ واﻟﻮﺳﻮم اﻷﺧﺮى ﺳﻨﻘﻮم ﺑﺸﺮﺣﻬﺎ ﺑﺎﻟﺘﺘﺎﺑﻊ‬ ‫ﺣﺠﻢ اﻟﺨﻂ‪FONT SIZE‬‬ ‫وﻟﺘﺤﺪﯾﺪ ﺣﺠﻢ اﻟﺨﻂ ﻧﺴﺘﺨﺪم ﻫﺬه اﻟﺨﺎﺻﯿﺔ . ‪ font size‬و ﻫﻨﺎك ﺳﺒﻌﺔ أﺣﺠﺎم ﻷي ﺧﻂ ﺗﺴﺘﻄﯿﻊ اﻟﻤﺘﺼﻔﺤﺎت‬ ‫اﻟﺘﻌﺮف ﻋﻠﯿﻬﺎ.‬ ‫وﻧﻘﻮم ﺑﺘﺤﺪﯾﺪ اﻟﺤﺠﻢ اﻟﻤﻄﻠﻮب ﺑﺄﺳﻠﻮﺑﯿﻦ: أوﻟﻬﻤﺎ اﻟﻤﺒﺎﺷﺮ. ﺣﯿﺚ ﯾﺘﻢ ﻛﺘﺎﺑﺔ رﻗﻢ ﯾﺘﺮاوح ﻣﺎ ﺑﯿﻦ ١-٧. أي أﻧﻨﺎ ﻧﺨﺘﺎر‬ ‫اﻟﺤﺠﻢ اﻟﺬي ﻧﺮﯾﺪه ﻣﺒﺎﺷﺮة .‬ ‫>"‪<FONT SIZE="X‬‬ ‫............ اﻟﻨﺺ ﯾﻜﺘﺐ ﻫﻨﺎ.......‬ ‫>‪</FONT‬‬
  • 21. ‫ﻛﻞ ﻣﺎﻋﻠﯿﻚ ﻓﻌﻠﻪ ﻫﻮ ﺗﻐﯿﯿﺮ اﻟﻘﯿﻤﺔ ‪ X‬إﻟﻲ رﻗﻢ ﻣﻦ ١- ٧ وإﻟﯿﻚ ﻧﻤﺎذج ﺑﺄﺣﺠﺎم اﻟﺨﻄﻮط-:‬ ‫ﺧﻂ ﺑﺤﺠﻢ ١‬ ‫ﺧﻂ ﺑﺤﺠﻢ ٢‬ ‫ﺧﻂ ﺑﺤﺠﻢ3‬ ‫ﺧﻂ ﺑﺤﺠﻢ ٤‬ ‫ﺧﻂ ﺑﺤﺠﻢ5‬ ‫ﺧﻂ ﺑﺤﺠﻢ ٦‬ ‫ﺧﻂ ﺑﺤﺠﻢ7‬ ‫ﻣﻠﺤﻮﻇﻪ ﺣﺠﻢ اﻟﺨﻂ اﻹﻓﺘﺮاﺿﻲ ﻫﻮ ٣‬ ‫أﻣﺎ اﻷﺳﻠﻮب اﻟﺜﺎﻧﻲ ﻓﻬﻮ اﻟﻨﺴﺒﻲ: ﺣﯿﺚ ﺗﻜﺘﺐ اﻷرﻗﺎم ﻣﻦ ١ إﻟﻰ ٦ ﻣﺮﻓﻘﺔ إﻣﺎ ﺑﺈﺷﺎرة )+( ﻣﻮﺟﺒﻪ أو ﺑﺈﺷﺎرة )-(‬ ‫ﺳﺎﻟﺒﻪ .‬ ‫>"‪<FONT SIZE="X‬‬ ‫............ اﻟﻨﺺ ﯾﻜﺘﺐ ﻫﻨﺎ.......‬ ‫>‪</FONT‬‬ ‫وﻓﻲ ﻫﺬه اﻟﻄﺮﯾﻘﺔ ﻓﺈن اﻷرﻗﺎم ١-٦ ﺗﻤﺜﻞ درﺟﺎت اﻟﺘﻜﺒﯿﺮ )+( أو اﻟﺘﺼﻐﯿﺮ )-( ﻟﻠﺨﻂ وذﻟﻚ ﻧﺴﺒ ً إﻟﻰ اﻟﺤﺠﻢ‬ ‫ﺔ‬ ‫اﻻﻓﺘﺮاﺿﻲ. ﻓﻤﺜﻼ اﻟﺮﻗﻢ +٤ ﯾﻌﻨﻲ ﺗﻜﺒﯿﺮ اﻟﺨﻂ أرﺑﻊ درﺟﺎت ﻋﻦ اﻟﺤﺠﻢ اﻻﻓﺘﺮاﺿﻲ وﻫﻮ ٣، أي أﻧﻪ ﯾﺼﺒﺢ‬ ‫ﺑﺎﻟﺤﺠﻢ ٧. ﺑﺎﻟﻤﻘﺎﺑﻞ ﻓﺄن اﻟﺮﻗﻢ -١ ﯾﻌﻨﻲ ﺗﺼﻐﯿﺮ اﻟﺨﻂ درﺟﺔ واﺣﺪة أي ﯾﺼﺒﺢ ﺑﺎﻟﺤﺠﻢ ٢ .‬ ‫وﻟﺘﻮﺿﯿﺢ ﻫﺬا اﻷﺳﻠﻮب، إﻟﯿﻚ ﻫﺬه اﻟﻨﻤﺎذج:‬ ‫ﺧﻂ ﺑﺤﺠﻢ -٣‬ ‫ﺧﻂ ﺑﺤﺠﻢ2-‬ ‫ﺧﻂ ﺑﺤﺠﻢ -١‬ ‫ﺧﻂ ﺑﺤﺠﻢ0±‬ ‫ﺧﻂ ﺑﺤﺠﻢ +١‬ ‫ﺧﻂ ﺑﺤﺠﻢ +٢‬ ‫ﺧﻂ ﺑﺤﺠﻢ +٣‬ ‫ﺧﻂ ﺑﺤﺠﻢ4+‬ ‫ﺧﻂ ﺑﺤﺠﻢ +٥‬ ‫ﻻﺣﻆ أﻧﻪ ﺣﺘﻰ ﻓﻲ اﻷﺳﻠﻮب اﻟﻨﺴﺒﻲ ﻻ ﻧﺴﺘﻄﯿﻊ اﻟﺤﺼﻮل ﻋﻠﻰ أﻛﺜﺮ ﻣﻦ ﺳﺒﻌﺔ أﺣﺠﺎم ﻟﻠﺨﻄﻮط. ﺣﺘﻰ وإن ﺣﺎوﻟﻨﺎ‬ ‫ﻛﺘﺎﺑﺔ أرﻗﺎم أﻛﺒﺮ أو أﺻﻐﺮ ﻛﻤﺎ ﻓﻌﻠﺖ ﻫﻨﺎ ﺑﻜﺘﺎﺑﺔ اﻟﺤﺠﻢ -٣ أو 5+‬ ‫ﻫﺎم ﺟﺪا‬ ‫ﻻﺑﺪ وان ﺗﺒﻌﺪ ﻛﻞ اﻟﺒﻌﺪ ﻋﻦ اﳋﻂ اﻟﺼﻐﲑ ﺟﺪا ﻓﻤﻦ اﻟﺼﻌﺐ ﻗﺮاءﺗﻪ و‬ ‫اﳋﻂ اﻟﻜﺒﲑ ﳝﻠﺊ ﺻﻔﺤﺘﻚ وﻟﺬﻟﻚ ﻻﺑﺪ وان ﲣﺘﺎر اﳋﻂ اﳌﻌﺘﺪل‬
  • 22. ‫ﺗﺎﺑﻊ اﻟﺪروس »ﺗﻐﯿﯿﺮ أﻟﻮان وأﺷﻜﺎل اﻟﺨﻄﻮط‬ ‫أﺷﻜﺎل وأﻟﻮان اﻟﺨﻄﻮط‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] ‪ | 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‬‬ ‫ﺗﻐﯿﯿﺮ ﻟﻮن اﻟﺨﻂ‬
  • 23. ‫ﻫﺬه اﻟﺨﺎﺻﯿﺔ ﺗﺤﺪد ﻟﻮن اﻟﺨﻂ، وذﻟﻚ ﺑﻨﻔﺲ ﻣﺒﺎدئ ﺗﺤﺪﯾﺪ اﻷﻟﻮان اﻟﺘﻲ ﺗﺤﺪﺛﻨﺎ ﻓﻲ درس ﺧﻮاص اﻟﺼﻔﺤﺔ‬ <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 «««‫اﻟﺪرس اﻟﺘﺎﻟﻲ‬ ‫اﻟﺮﻣﻮز اﻟﺨﺎﺻﺔ‬
  • 24. ‫اﻟﺮﻣﻮز اﻟﺨﺎﺻﺔ ﻫﻨﺎك اﻟﻌﺪﯾﺪ ﻣﻦ ﻫﺬه اﻟﺮﻣﻮز واﻟﺘﻲ ﯾﺠﺐ أن ﺗﻜﺘﺐ ﺑﺼﻮرة ﻣﻌﯿﻨﺔ وﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻮم وﻟﯿﺲ‬ ‫ﻣﺒﺎﺷﺮة ﺑﺼﻮرﺗﻬﺎ اﻟﻌﺎدﯾﺔ. ﺧﺬ ﻣﺜﻼ إﺷﺎرﺗﻲ أﻛﺒﺮ ﻣﻦ وأﺻﻐﺮ ﻣﻦ وإﺷﺎرة اﻻﻗﺘﺒﺎس ". ﻛﻞ ﻫﺬه اﻹﺷﺎرات ﺗﺴﺘﺨﺪم‬ ‫أﺻ ً ﻣﻊ اﻟﻮﺳﻮم ﻓﻬﻲ ﻣﺤﺠﻮزه ﺿﻤﻦ ﻣﻔﺮدات ﻟﻐﺔ ‪ 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‬‬
  • 25. ¡ &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;
  • 26. Ë &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;