Teach yourself html_ar

848 views

Published on

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
848
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Teach yourself html_ar

  1. 1. ‫اﻟﻤﺮﺟﻊ اﻟﻜﺎﻣﻞ ﻓﻲ ‪HTML‬‬ ‫ﻋﻦ ﻣﻮﻗﻊ‬ ‫‪HTML4ARAB‬‬ ‫‪BY‬‬‫‪IsLmicHackers@HotMail.com‬‬ ‫اﻟـﺒـﺪاﯾﻪ ﻫﻨﺎ‬ ‫> أﺑﺪأ ﻫﻨﺎ‬ ‫ﻣﺎ ﻫﻲ ال? ‪HTML‬‬ ‫ﻣﺎذا أﺣﺘﺎج ؟‬ ‫>دروس ﺳﺮﯾﻌﻪ ﻟﻠﻤﺒﺘﺪﺋﯿﻦ‬ ‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬ ‫اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ‬ ‫اﻟﻮﺻﻼت اﻷﺳﺎﺳﯿﻪ‬ ‫أﺳﺎﺳﯿﺎت إدراج اﻟﺼﻮر‬ ‫ﺧﻮاص اﻟﺼﻔﺤﺔ‬ ‫ﻣﺮﺟﻊ اﻟﻤﺴﺎﺣﺎت اﻟﻤﺠﺎﻧﯿﻪ‬ ‫اﻟﺪروس اﻟﻤﺘﺨﺼﺼﻪ‬ ‫> اﻟﻨﺺ‬ ‫اﻟﻌﻨﺎوﯾﻦ وﺣﺠﻢ اﻟﺨﻄﻮط‬ ‫أﺷﻜﺎل وأﻟﻮان اﻟﺨﻄﻮط‬ ‫اﻟﺮﻣﻮز اﻟﺨﺎﺻﻪ‬ ‫اﻟﻮﺻﻼت‬ ‫اﻟﻘﻮاﺋﻢ‬ ‫ﻗﺎﺋﻤﺔ ﺑﺠﻤﯿﻊ وﺳﻮم اﻟﻨﺺ‬ ‫اﻟﻨﺺ اﻟﻤﺘﺤﺮك‬
  2. 2. ‫> اﻟﺼﻮر‬ ‫اﻟﺼﻮر واﻟﺮﺳﻮﻣﺎت‬ ‫أﻧﻮاع اﻟﻤﻠﻔﺎت‬ ‫اﻟﺼﻮرة ذات اﻟﺒﯿﻜﺴﻞ اﻟﻮاﺣﺪ‬ ‫‪Thumbnails‬‬ ‫ﺧﺮاﺋﻂ اﻟﺼﻮر‬ ‫اﻟﻮﺳﺎﺋﻂ اﻟﻤﺘﻌﺪدة‬ ‫أﺳﻤﺎء اﻷﻟﻮان‬ ‫612ﻛﻮد ﻟﻸﻟﻮان‬ ‫ﻣﻜﻌﺐ اﻷﻟﻮان‬ ‫> اﻟﺠﺪاول‬ ‫أﺳﺎﺳﯿﺎت اﻟﺠﺪاول‬ ‫اﻟﺠﺪاول اﻟﻤﺘﻘﺪﻣﻪ ) ﻟﻠﻤﺤﺘﺮﻓﯿﻦ)‬ ‫اﻟﺠﺪاول اﻟﻤﺘﺪاﺧﻠﻪ واﻟﻤﺴﺘﺪﯾﺮة ) ﻟﻠﻤﺤﺘﺮﻓﯿﻦ)‬ ‫> اﻷﻃﺮ‬ ‫أﺳﺎﺳﯿﺎت اﻷﻃﺮ‬ ‫اﻷﻃﺮ اﻟﻤﺘﻘﺪﻣﻪ‬ ‫ﺗﺎﺑﻊ اﻷﻃﺮ اﻟﻤﺘﻘﺪﻣﺔ‬ ‫> اﻟﻨﻤﺎذج‬ ‫اﻟﻨﻤﺎذج اﻷﺳﺎﺳﯿﻪ‬ ‫ﺗﺎﺑﻊ اﻟﻨﻤﺎذج اﻷﺳﺎﺳﯿﻪ‬ ‫ﺗﻨﺴﯿﻖ اﻟﻨﻤﺎذج‬ ‫ﺻﻮرة ﻟﻠﺰر‪Submit‬‬ ‫ﻣﺎ ﻫﻲ اﻟـ ‪ HTML‬؟‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] ﻣﺎ ﻫﻲ اﻟـ ‪ HTML‬؟ | ﻛﯿﻒ ﺗﻌﻤﻞ ؟ | ﻫﻞ ﻻﺑﺪ أن أﻛﻮن ﻣﺘﺼﻞ ﺑﺎﻹﻧﺘﺮﻧﺖ ﻃﻮل اﻟﻮﻗﺖ ؟ |‬ ‫ﻫﻞ ﺗﻘﻮم اﻟـ ‪ HTML‬ﺑﻌﻤﻞ ﻛﻞ ﺷﻲء ﻓﻲ ﺻﻔﺤﺎت اﻟﻤﻮﻗﻊ ؟ [‬ ‫اﻟﻜﺜﯿﺮ ﻣﻦ اﻟﻨﺎس ﺗﺘﺴﺄل ﻋﻦ اﻷﻧﺘﺮﻧﺖ و ﻋﻦ أﺳﺮارﻫﺎ ﻓﻲ ﻫﺬا اﻟﺒﺤﺚ اﻟﺘﻌﻠﯿﻤﻲ ﺳﻨﻘﻮم ﺑﺎﻟﺸﺮح اﻟﻮاﻓﻲ ﻟﺠﻤﯿﻊ‬ ‫اﻟﺪروس اﻟﺨﺎص ﺑﺎﻟﻐﺔ ‪ HTML‬وﻧﺒﺪأ ﺑﺎﻹﺟﺎﺑﻪ ﻋﻠﻲ اﻷﺳﺄﻟﺔ اﻷﻛﺜﺮ ﺗﻜﺮرا و ﺷﯿﻮﻋﺎ ؟!!.‬ ‫ﻣﺎ ﻫﻲ اﻟـ ‪ HTML‬؟‬ ‫إﻧﻬﺎ اﻟﻠﻐﺔ اﻟﻤﺴﺘﺨﺪﻣﺔ ﻹﻧﺸﺎء ﺻﻔﺤﺎت اﻹﻧﺘﺮﻧﺖ. ﻫﻲ ﻟﯿﺴﺖ ﻟﻐﺔ ﺑﺮﻣﺠﺔ ﺑﺎﻟﻤﻌﻨﻰ واﻟﺸﻜﻞ اﻟﻤﺘﻌﺎرف ﻋﻠﯿﻪ ﻟﻠﻐﺎت‬‫اﻟﺒﺮﻣﺠﺔ اﻷﺧﺮى ﻛﻠﻐﺔ ‪ . C‬ﻓﻬﻲ ﻣﺜ ً ﻻ ﺗﺤﺘﻮي ﻋﻠﻰ ﺟﻤﻞ اﻟﺘﺤﻜﻢ واﻟﺪوران، وﻋﻨﺪ اﻟﺤﺎﺟﺔ ﻻﺳﺘﺨﺪام ﻫﺬه اﻟﺠﻤﻞ‬ ‫ﻼ‬ ‫ﯾﺠﺐ ﺗﻀﻤﯿﻦ ﺷﯿﻔﺮات ﻣﻦ ﻟﻐﺎت أﺧﺮى ﻛـ ‪ . Java, JavaScript, CGI‬ﻛﺬﻟﻚ ﻓﻬﻲ ﻻ ﺗﺤﺘﺎج إﻟﻰ ﻣﺘﺮﺟﻢ‬
  3. 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. 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. 5. ‫دروس ﺳﺮﯾﻌﻪ ﻟﻠﻤﺒﺘﺪﺋﯿﻦ‬ ‫ﺳﻮف ﻧﻘﻮم ﺑﺸﺮح ﺳﺮﯾﻊ ﻷﻫﻢ اﻷوﺳﻤﻪ اﻟﺨﺎﺻﻪ ﺑﺎﻟﻠﻐﺔ ال ‪HTML‬و ﻛﯿﻔﯿﻪ ﺑﺪأ ﺻﻔﺤﺔ و ﻛﯿﻔﯿﻪ إرﺳﺎﻟﻬﺎ ﻟﻠﺨﺎدم‬ ‫. )‪(Server‬‬ ‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬ ‫آه إﻧﺸﺎء ﺻﻔﺤﺔ ﻷول ﻣﺮة ﺑﺎﻟﻠﻐﺔ ال‪ HTML‬؟ رﺑﻨﺎ ﯾﻮﻓﻘﻚ .... أﻗﺮأ ﻫﻨﺎ ﻟﻜﻲ ﺗﺠﻌﻞ ﻫﺬا ﺣﻘﯿﻘﻲ‬ ‫اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ‬ ‫ﻋﻨﺪ إﻧﺘﻬﺎءك ﻣﻦ ﻛﺘﺎﺑﺔ ﻣﻠﻒ ﺑﻠﻐﺔ ال‪ HTML‬رﺑﻤﺎ ﺗﺤﺘﺎج إﻟﻲ ﺗﻨﺴﯿﻘﻪ ﻗﻠﯿﻼ‬ ‫اﻟﻮﺻﻼت اﻷﺳﺎﺳﯿﻪ‬ ‫ﻋﻨﺪ إﻧﺘﻬﺎءك ﻣﻦ ﻛﺘﺎﺑﺔ ﺻﻔﺤﺎت ﺑﻠﻐﺔ ال‪ HTML‬رﺑﻤﺎ ﺗﺤﺘﺎج إﻟﻲ ﻋﻤﻞ وﺻﻼت ﺑﯿﻨﻬﻢ‬ ‫أﺳﺎﺳﯿﺎت إدراج اﻟﺼﻮر‬ ‫ﺗﻌﻠﻢ أن ﺗﻀﻊ ﺻﻮر ﻓﻲ ﺻﻔﺤﺎﺗﻚ ﻛﺨﻄﻮة أوﻟﻲ ﻫﻜﺬا ....‬ ‫ﺧﻮاص اﻟﺼﻔﺤﺔ‬ ‫ﺣﺘﻰ اﻵن اﻷﻟﻮان اﻟﻮﺣﯿﺪه ﻋﻠﻲ ﺻﻔﺤﺘﻚ ﻛﺎﻧﺖ اﻷﺑﯿﺾ اﻟﺨﻠﻔﯿﻪ اﻷﺳﻮد ﻟﻠﻨﺺ اﻷزرق ﻟﻠﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﻪ اﻟﻦ‬ ‫ﺗﺤﺐ أن ﺗﻐﯿﯿﺮﻫﻢ إﻟﻲ ﺷﻲء أﻛﺜﺮ ﺟﻤﺎﻟﻪ وأﻧﺎﻗﻪ؟!!.‬ ‫ﻣﺮﺟﻊ اﻟﻤﺴﺎﺣﺎت اﻟﻤﺠﺎﻧﯿﻪ‬ ‫ﻋﻨﺪﻣﺎ ﺗﻨﺘﻬﻲ ﻣﻦ إﻧﺸﺎء ﻣﻮﻗﻌﻚ ﻓﻌﻨﺪﻫﺎ ﺳﺘﺤﺘﺎج إﻟﻲ رﻓﻊ ﻣﻮﻗﻊ أو وﺿﻊ ﻣﻮﻗﻌﻚ ﻋﻠﻲ ﺷﺒﻜﺔ اﻹﻧﺘﺮﻧﺖ ، وﻫﺬا‬ ‫ﯾﺘﻀﻤﻦ إرﺳﺎل ﻣﻠﻔﺎﺗﻚ إﻟﻲ اﻟـ‪ Server‬أو اﻟﺨﺎدم ) ﻫﻮ ﺟﻬﺎز ﻣﺘﺼﻞ داﺋﻤﺎ ﺑﺎﻹﻧﺘﺮﻧﺖ ( وﻋﻦ ﻃﺮﯾﻖ اﻟﺴﯿﺮﻓﺮ‬ ‫ﯾﺴﺘﻄﯿﻊ أي ﺷﺨﺺ أن ﯾﺪﺧﻞ إﻟﻲ ﻣﻮﻗﻌﻚ و ﯾﺘﺼﻔﺤﻪ .‬ ‫ﺻﻔﺤﺘﻲ اﻷوﻟﻲ‬‫ﺣﺴﻨً، ﻟﺪﯾﻚ ﻣﺤﺮر ﻧﺼﻮص ﻣﻤﺘﺎز ﻟﻜﺘﺎﺑﺔ ﻣﻠﻔﺎت ‪ HTML‬وﻟﺪﯾﻚ ﻣﺘﺼﻔﺢ إﻧﺘﺮﻧﺖ ﻟﻤﻌﺎﯾﻨﺘﻬﺎ، وﻟﺪﯾﻚ ﻫﺬه اﻟﺪروس‬ ‫ﺎ‬ ‫اﻟﺘﻲ ﺳﺘﻨﻄﻠﻖ ﻣﻌﻬﺎ إﻟﻰ ﻋﺎﻟﻢ ﺗﺼﻤﯿﻢ ﺻﻔﺤﺎت اﻟﻮﯾﺐ أذن ﻓﺎﻟﻨﺒﺪأ اﻻن»»»....‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] اﻷوﺳﻤﻪ | إﻧﺸﺎء ﺻﻔﺤﺔ | ﻣﻼﺣﻈﺎت [‬ ‫اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ ﻟﻠﺼﻔﺤﺔ‬
  6. 6. ‫أن ﻛﻞ اﻟﺼﻔﺤﺎت ﺗﺒﺪأ ﺑﻬﯿﻜﻞ أﺳﺎﺳﻲ ، و ﻟﻨﺒﺪأ اﻵن ﻟﺘﺘﻌﻠﻢ أول وﺳﻢ )‪. (Tag‬‬‫ااﻷوﺳﻤﻪ :- اﻷوﺳﻤﻪ ﻫﻲ اﻷﺷﯿﺎء اﻟﺘﻲ ﺑﯿﻦ ﻫﺬﯾﻦ اﻟﻘﻮﺳﯿﻦ >< ﺑﺎﻟﺘﺄﻛﯿﺪ أﻧﺖ ﻟﻢ ﺗﺮي أﻛﻮاد ﺗﺒﺪأ ﺑﻬﺬﯾﻦ اﻟﺸﻜﻠﯿﻦ ﻣﻦ‬ ‫ﻗﺒﻞ ﺣﺴﻨﻦ ﻣﻦ ﻗﺎﺋﻤﺔ ‪ View‬أﺧﺘﺎر ‪ ، Source‬أﻧﺖ ﺗﺮي اﻵن اﻟﻨﺺ اﻟﺬي ﺗﻘﺮأه وﻣﺤﺎط ﻓﻲ أﻏﻠﺐ اﻷﺣﻮال ﺑـ‬ ‫>< ﻫﺬه اﻷﻛﻮاد ﻫﻲ اﻟﺘﻲ ﺻﻨﻌﺖ ﻫﺬه اﻟﺼﻔﺤﺔ اﻟﺘﻲ أﻣﺎﻣﻚ‬ ‫ﻫﺎم ﺟﺪاأﻏﻠﺐ اﻷوﺳﻤﺔ ﺗﺒﺪأ >< ﻣﻦ اﻟﯿﺴﺎر وﺗﻨﺘﻬﻲ >/<ﻓﻲ اﻟﯿﻤﯿﻦ‬ ‫ﻓﺎﻟﺘﺸﺎﻫﺪ اﻟﻮﺳﻮم اﻟﺘﺎﻟﯿﺔ:‬ ‫وﺳﻢ اﻟﺒﺪاﯾﺔ وﺳﻢ اﻟﻨﻬﺎﯾﺔ‬ ‫>‪</HTML> <HTML‬‬ ‫>‪</HEAD> <HEAD‬‬ ‫>‪</TITLE> <TITLE‬‬ ‫>‪</BODY> <BODY‬‬ ‫ﻣﺎذا ﺗﻼﺣﻆ؟ أن ﻛﻞ ﻣﻨﻬﺎ ﯾﺘﺄﻟﻒ ﻣﻦ زوج ﻣﻦ اﻟﻮﺳﻮم أﺣﺪﻫﻤﺎ وﺳﻢ اﻟﺒﺪاﯾﺔ، واﻵﺧﺮ وﺳﻢ اﻟﻨﻬﺎﯾﺔ. وﯾﺘﻤﯿﺰ وﺳﻢ‬ ‫اﻟﻨﻬﺎﯾﺔ ﺑﻮﺟﻮد اﻟﺮﻣﺰ / . ﺗﺄﻣﻞ اﻟﺮﺳﻢ اﻟﺘﺎﻟﻲ، ﻓﻬﻮ ﯾﻌﻄﻲ ﻓﻜﺮة ﻋﻦ ﺗﺮﻛﯿﺐ ﻣﻠﻒ ‪Html‬‬ ‫إذن ﻓﻤﻠﻒ ‪ Html‬ﯾﺒﺪأ داﺋﻤً ﺑﺎﻟﻮﺳﻢ >‪ <HTML‬وﯾﻨﺘﻬﻲ ﺑﺎﻟﻮﺳﻢ >‪ .</HTML‬ﻻ ﺗﻨﺴﻰ ذﻟﻚ !‬ ‫ﺎ‬ ‫أﻣﺎ اﻟﻮﺳﻢ >‪ <HEAD‬ﻓﯿﺤﺪد ﺑﺪاﯾﺔ اﻟﻤﻘﻄﻊ اﻟﺬي ﯾﺤﺘﻮي ﻋﻠﻰ اﻟﻤﻌﻠﻮﻣﺎت اﻟﺨﺎﺻﺔ ﺑﺘﻌﺮﯾﻒ اﻟﺼﻔﺤﺔ. ﻛﺎﻟﻌﻨﻮان‬ ‫اﻟﻈﺎﻫﺮ ﻋﻠﻰ ﺷﺮﯾﻂ ﻋﻨﻮان اﻟﻤﺘﺼﻔﺢ. وﻫﺬا اﻟﻌﻨﻮان ﺑﺪوره ﯾﺤﺘﺎج ﻷن ﯾﻮﺿﻊ ﺑﯿﻦ اﻟﻮﺳﻤﯿﻦ: >‪… <TITLE‬‬ ‫>‪ </TITLE‬وﺑﺎﻟﻄﺒﻊ ﯾﺠﺐ ﻛﺘﺎﺑﺔ اﻟﻮﺳﻢ >‪ </HEAD‬ﻟﻜﻲ ﻧﻨﻬﻲ ﻫﺬا اﻟﻤﻘﻄﻊ.‬
  7. 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. 8. ‫وﻣﺎذا ﻋﻨﻚ؟ ﻫﻞ ﺣﺼﻠﺖ ﻋﻠﻰ ﻧﻔﺲ اﻟﻨﺘﯿﺠﺔ؟ إذن ﻣﺒﺮوك ‪ J‬ﻟﻘﺪ ﻗﻤﺖ ﺑﺈﻧﺸﺎء أول ﺻﻔﺤﺔ وﯾﺐ ﺧﺎﺻﺔ ﺑﻚ.‬ ‫)وإﻻ، إذا ﻟﻢ ﺗﺤﺼﻞ ﻋﻠﻰ ﻧﻔﺲ اﻟﻨﺘﯿﺠﺔ ﻗﻢ ﺑﺎﻟﻨﻘﺮ ﻫﻨﺎ(‬ ‫وﻗﺒﻞ أن ﻧﺴﺘﻤﺮ أرﯾﺪ أن أﻧﺒﻬﻚ إﻟﻰ ﺑﻌﺾ اﻟﻤﻼﺣﻈﺎت ﻋﻨﺪ ﻛﺘﺎﺑﺔ ﺻﻔﺤﺎت اﻟﻮﯾﺐ:‬ ‫ﻻ ﯾﻮﺟﺪ ﻓﺮق ﺑﯿﻦ ﻛﺘﺎﺑﺔ اﻟﻮﺳﻮم ﺑﺎﻷﺣﺮف اﻹﻧﺠﻠﯿﺰﯾﺔ اﻟﻜﺒﯿﺮة ‪ UPPERCASE‬أو اﻷﺣﺮف‬ ‫•‬ ‫اﻟﺼﻐﯿﺮة ‪ .lowercase‬ﻟﺬﻟﻚ ﺗﺴﺘﻄﯿﻊ اﻟﻜﺘﺎﺑﺔ ﺑﺄي ﺷﻜﻞ ﻣﻨﻬﻤﺎ أو ﺣﺘﻰ اﻟﻜﺘﺎﺑﺔ ﺑﻜﻠﯿﻬﻤﺎ.‬ ‫إن اﻟﻤﺘﺼﻔﺤﺎت ﻻ ﺗﺄﺧﺬ ﺑﻌﯿﻦ اﻻﻋﺘﺒﺎر اﻟﻔﺮاﻏﺎت اﻟﺰاﺋﺪة أو إﺷﺎرات ﻧﻬﺎﯾﺔ اﻟﻔﻘﺮات )أي ﻋﻨﺪﻣﺎ ﺗﻘﻮم‬ ‫•‬‫ﺑﻀﻐﻂ ﻣﻔﺘﺎح ‪ (Enter‬اﻟﺘﻲ ﺗﺠﺪﻫﺎ ﻫﺬه اﻟﻤﺘﺼﻔﺤﺎت ﻓﻲ ﻣﻠﻒ ‪ .Html‬وﺑﻌﺒﺎرة أﺧﺮى ﻓﺈن ﺑﺎﺳﺘﻄﺎﻋﺘﻚ‬ ‫ﻛﺘﺎﺑﺔ ﻣﻠﻔﻚ اﻟﺴﺎﺑﻖ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ:‬‫>‪<HTML><HEAD><TITLE> My first HTML page </TITLE></HEAD><BODY‬‬‫>‪Wow, Im writing my first webpage </BODY></HTML‬‬ ‫أو ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ:‬‫>‪<HTML‬‬‫>‪<HEAD‬‬‫>‪<TITLE‬‬‫‪My‬‬‫‪First‬‬‫‪HTML‬‬‫‪Page‬‬‫>‪</TITLE‬‬‫>‪</HEAD‬‬‫>‪<BODY‬‬‫,‪Wow‬‬‫‪Im‬‬‫‪writing‬‬‫‪my‬‬‫‪first‬‬‫‪Page‬‬‫>‪</BODY‬‬‫>‪</HTML‬‬ ‫أو ﺣﺘﻰ ﺑﻬﺬا اﻟﺸﻜﻞ:‬‫>‪<HTML> <HEAD> <TITLE‬‬‫‪My first HTML page‬‬‫>‪</TITLE‬‬‫>‪</HEAD‬‬‫>‪<BODY‬‬‫‪Wow, Im writing my First Page‬‬‫>‪</BODY‬‬‫>‪</HTML‬‬‫وﻓﻲ ﻛﻞ اﻟﺤﺎﻻت ﺳﺘﺤﺼﻞ ﻋﻠﻰ ﻧﻔﺲ اﻟﻨﺘﯿﺠﺔ. وإذا ﻛﻨﺖ ﻣﻦ ﺗﻠﻚ اﻟﻨﻮﻋﯿﺔ ﻣﻦ اﻟﻨﺎس اﻟﺘﻲ ﻻ ﺗﺼﺪق ﻛﻞ ﻣﺎ ﯾﻘﺎل…‬ ‫ﺗﺴﺘﻄﯿﻊ أن ﺗﺠﺮب ذﻟﻚ ﺑﻨﻔﺴﻚ!!! ﻫﯿﺎ ﺟﺮب.‬ ‫ﻟﻜﻦ ﻫﺬا ﻻ ﯾﻌﻨﻲ أن اﻟﻔﻘﺮة اﻟﻤﻜﻮﻧﺔ ﻣﺜ ً ﻣﻦ ﻋﺸﺮة أﺳﻄﺮ ﺳﺘﻤﺘﺪ إﻟﻰ ﻋﺪة أﻣﺘﺎر ﺑﻌﺮض اﻟﺸﺎﺷﺔ. ﻛﻼ ﺑﺎﻟﻄﺒﻊ ﻷن‬ ‫ﻼ‬ ‫اﻟﻤﺘﺼﻔﺢ ﺳﯿﻘﻮم ﺑﻌﻤﻞ اﻟﺘﻔﺎف ﺗﻠﻘﺎﺋﻲ ﻟﻬﺎ ﺑﺤﺴﺐ ﻋﺮض اﻟﺸﺎﺷﺔ، ﻣﻬﻤﺎ ﻛﺎن ﻣﻘﺪار ﻫﺬا اﻟﻌﺮض.‬
  9. 9. ‫واﻵن ﻗﺪ ﺗﺘﺴﺎءل، إذن ﻛﯿﻒ ﯾﻤﻜﻦ اﻟﺘﺤﻜﻢ ﺑﻤﻘﺪار اﻟﻨﺺ اﻟﻤﻜﺘﻮب ﻓﻲ ﻛﻞ ﺳﻄﺮ وﻛﯿﻒ ﯾﻤﻜﻦ ﺗﺤﺪﯾﺪ ﻧﻬﺎﯾﺔ اﻟﻔﻘﺮة‬ ‫وﺑﺪاﯾﺔ اﻟﻔﻘﺮة اﻟﺘﻲ ﺗﻠﯿﻬﺎ؟ ﺳﺆال وﺟﯿﻪ!!! واﻹﺟﺎﺑﺔ ﻋﻠﯿﻪ ﻓﻲ اﻟﻔﺼﻞ اﻟﻘﺎدم«‬ ‫اﻟﺘﻨﺴﯿﻖ اﻷﺳﺎﺳﻲ‬‫ﺗﻮﻗﻔﻨﺎ ﻓﻲ «اﻟﻔﺼﻞ اﻟﺴﺎﺑﻖ ﻋﻨﺪ ﻛﯿﻔﯿﻪ اﻟﺘﺤﻜﻢ ﺑﻤﻘﺪار اﻟﻨﺺ اﻟﻤﻜﺘﻮب ﻓﻲ ﻛﻞ ﺳﻄﺮ وﻛﯿﻒ ﯾﻤﻜﻦ ﺗﺤﺪﯾﺪ ﻧﻬﺎﯾﺔ اﻟﻔﻘﺮة‬ ‫وﺑﺪاﯾﺔ اﻟﻔﻘﺮة اﻟﺘﻲ ﺗﻠﯿﻬﺎ؟ و ﻓﻲ ﻫﺬا اﻟﻔﺼﻞ ﺳﻨﻘﻮم ﺑﺸﺮح ﻫﺬه اﻟﺠﺰﺋﯿﻪ وأﺳﺲ اﻟﺘﻨﺴﯿﻖ.‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] ﻧﻬﺎﯾﻪ ﺳﻄﺮ | أﺿﺎﻓﺔ ﺳﻄﺮ | اﻟﻔﺮﻏﺎت | اﻟﺨﻮاص | ﺗﻨﺴﯿﻖ اﻟﻨﺺ[‬ ‫ﻧﻬﺎﯾﻪ ﺳﻄﺮ وﺑﺪاﯾﻪ ﺳﻄﺮ ﺟﺪﯾﺪ-:‬‫وﺳﻮف ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ <BR‬ﻟﺘﺤﺪﯾﺪ اﻟﻨﻬﺎﯾﺔ ﻟﻠﺴﻄﺮ. واﻟﺒﺪء ﺑﺴﻄﺮ ﺟﺪﯾﺪ )ﻻﺣﻆ أن ﻫﺬا اﻟﻮﺳﻢ ﻣﻔﺮد، أي ﻟﯿﺲ ﻟﻪ‬ ‫وﺳﻢ ﻧﻬﺎﯾﺔ .)‬ ‫وﻧﻌﻮد إﻟﻰ اﻟﻤﺜﺎل اﻟﺴﺎﺑﻖ، ﻗﻢ ﺑﺘﻌﺪﯾﻞ اﻟﻤﻠﻒ ﻟﻜﻲ ﯾﺼﺒﺢ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ‬‫>‪<HTML‬‬‫>‪<HEAD‬‬‫>‪<TITLE‬‬‫‪My first HTML page‬‬‫>‪</TITLE‬‬‫>‪</HEAD‬‬‫>‪<BODY‬‬‫,‪Wow‬‬‫‪<BR> Im writing my‬‬‫‪<BR>first page‬‬‫>‪</BODY‬‬‫>‪</HTML‬‬ ‫و اﻵن ﻛﯿﻒ أﺿﯿﻒ ﺳﻄﺮ ﺟﺪﯾﺪ ؟‬ ‫وﻟﻔﻌﻞ ﻫﺬا ﻧﺴﺘﺨﺪم اﻟﻮﺳﻢ >‪ </P><P‬اﻟﺬي ﯾﻘﻮم ﺗﻘﺮﯾﺒً ﺑﻨﻔﺲ ﻋﻤﻞ اﻟﻮﺳﻢ اﻟﺴﺎﺑﻖ أي أﻧﻪ ﯾﻨﻬﻲ اﻟﺴﻄﺮ أو اﻟﻔﻘﺮة‬ ‫ﺎ‬ ‫وﯾﺒﺪأ ﺑﺴﻄﺮ ﺟﺪﯾﺪ ﻟﻜﻦ ﻣﻊ إﺿﺎﻓﺔ ﺳﻄﺮ إﺿﺎﻓﻲ ﻓﺎرغ ﺑﯿﻦ اﻟﻔﻘﺮات. ) ﯾﻼﺣﻆ ان ﻫﺬا اﻟﻮﺳﻢ ﻟﺪﯾﻪ وﺳﻢ ﻧﻬﺎﯾﻪ ﻟﻜﻦ‬ ‫ﻣﻦ اﻟﻤﻤﻜﻦ أﺳﺘﺨﺪاﻣﺔ ﺑﺪون وﺳﻢ اﻟﻨﻬﺎﯾﻪ (‬‫>‪<HTML‬‬‫>‪<HEAD‬‬‫>‪<TITLE‬‬‫‪My first HTML page‬‬‫>‪</TITLE‬‬‫>‪</HEAD‬‬‫>‪<BODY‬‬‫,‪Wow‬‬‫‪<P> Im writing my‬‬‫‪<P>first page‬‬
  10. 10. ‫>‪</BODY‬‬‫>‪</HTML‬‬ ‫رﻣﻮزً ﺧﺎﺻﺔ ﻟﺬﻟﻚ ﻻ ﻧﺴﺘﻄﯿﻊ اﻟﺘﺤﻜﻢ ﺑﻬﺎ وﺑﻌﺪدﻫﺎ إﻻ ﺑﺎﺳﺘﺨﺪام اﻟﻮﺳﻢ ﺗﻌﺘﺒﺮ -: اﻟﻔﺮﻏﺎت‬ ‫ا‬ ‫. ;‪ ) &nbsp‬اﺧﺘﺼﺎر ﻟﻠﻌﺒﺎرة واﻷﺣﺮف ﻫﻲ ‪(Non Breakable Space‬‬‫اﻟﻔﺮاﻏﺎت اﻟﻤﻄﻠﻮب. ﻛﻤﺎ وإذا أردت إدﺧﺎل ﻋﺪة ﻓﺮاﻏﺎت ﺑﯿﻦ ﻧﺺ وآﺧﺮ ﻣﺎ ﻋﻠﯿﻚ إﻻ ﻛﺘﺎﺑﺔ ﻫﺬا اﻟﻮﺳﻢ ﺑﻨﻔﺲ ﻋﺪد‬ ‫ﻛﻤﺎ ﻣﻮﺿﺢ ﺑﺎﻟﺸﻜﻞ اﻟﺘﺎﻟﻲ ﯾﺠﺐ ﻋﻠﯿﻚ اﻟﺘﻘﯿﺪ ﺑﺎﻷﺣﺮف اﻟﺼﻐﯿﺮة ﻫﻨﺎ‬‫>‪<HTML‬‬‫>‪<HEAD‬‬‫>‪<TITLE‬‬‫‪My first HTML page‬‬‫>‪</TITLE‬‬‫>‪</HEAD‬‬‫>‪<BODY‬‬‫;‪Wow, &nbsp; &nbsp; &nbsp‬‬‫;‪Im &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. 11. ‫ﻟﻠﺨﻂ>‪<B‬‬ ‫>‪</B‬اﻟﻌﺮﯾﺾ ﻫﺬا‬‫ﻟﻠﺨﻂ>‪<I‬‬ ‫>‪</I‬اﳌﺎﺋﻞ وﻫﺬا‬‫ﻣﺎ>‪<U‬‬ ‫>‪</U‬أﻗﺼﺪه ﻋﻦ ﲢﺘﻪ ﺧﻂ وﻫﺬا‬ ‫و اﻵن أﺧﻮاﻧﺌﻲ اﻷﻋﺰاء ﯾﻜﻮن ﻗﺪ أﻧﺘﻬﯿﻦ ﻣﻦ اﻟﻔﺼﻞ اﻟﺜﺎﻧﻲ ﻣﻦ ﻓﺼﻮﻟﻨﺎ اﻟﺘﻌﻠﯿﻤﯿﻪ‬ ‫وﺗﻜﻮن ﻗﺪ ﺗﻌﻠﻤﺖ ﻛﯿﻔﯿﻪ أﻧﺸﺎء ﺻﻔﺤﺎت و ﺗﻨﺴﯿﻘﻬﻢ وﻟﻜﻦ ﻛﯿﻒ ﯾﻤﻜﻦ اﻟﺘﻨﻘﻞ ﺑﯿﻨﻬﻢ ؟؟؟!!!!! وﻟﻤﻌﺮﻓﺔ اﻹﺟﺎﺑﻪ أذﻫﺐ‬ ‫إﻟﻲ اﻟﻔﺼﻞ اﻟﺘﺎﻟﻲ «‬ ‫اﻟﻮﺻﻼت اﻷﺳﺎﺳﯿﻪ‬ ‫ﺗﻮﻗﻔﻨﺎ ﻓﻲ «اﻟﻔﺼﻞ اﻟﺴﺎﺑﻖ ﻋﻨﺪ ﻛﯿﻔﯿﻪ اﻹﻧﺘﻘﺎل ﺑﯿﻦ ﺻﻔﺤﺎت اﻟﻤﻮﻗﻊ و ﻓﻲ ﻫﺬا اﻟﻔﺼﻞ ﺳﻨﻘﻮم ﺑﺸﺮح ﻫﺬه اﻟﺠﺰﺋﯿﻪ.‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬ ‫] أول وﺻﻠﻪ | وﺻﻠﻪ ﻟﻠﺒﺮﯾﺪ | وﺻﻠﻪ ﻟﺼﻮرة | وﺻﻠﻪ ﻟﻤﻠﻒ [‬ ‫أول وﺻﻠﻪ:-‬ ‫ﻛﯿﻒ وﺻﻠﺖ إﻟﻰ ﻫﺬه اﻟﺼﻔﺤﺔ؟ ! رﺑﻤﺎ ﺗﻌﺘﺒﺮ ﻫﺬا ﺳﺆا ً ﺳﺨﯿﻔً، وأن اﻹﺟﺎﺑﺔ ﻋﻠﯿﻪ ﻫﻲ ﻣﻦ اﻟﺒﺪﯾﻬﯿﺎت ... وﻫﺬا‬ ‫ﺎ‬ ‫ﻻ‬‫ﺻﺤﯿﺢ ! ﻣﻦ اﻟﻤﺆﻛﺪ أﻧﻚ ﻗﻤﺖ ﺑﺎﻹﻧﺘﻘﺎل إﻟﻰ ﻫﻨﺎ ﻣﻦ ﺧﻼل إﺣﺪى ﺻﻔﺤﺎت ﻫﺬا اﻟﻤﻮﻗﻊ، أو ﻣﻦ ﺧﻼل أﺣﺪ ﻣﺤﺮﻛﺎت‬‫اﻟﺒﺤﺚ، أو ﻣﻦ ﺧﻼل أﺣﺪ اﻟﻤﻮاﻗﻊ اﻟﺘﻲ ﻗﻤﺖ ﺑﺰﯾﺎرﺗﻬﺎ ﻣﺆﺧﺮً ... وﻓﻲ ﻛﻞ اﻷﺣﻮال ﻗﻤﺖ ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ وﺻﻠﺔ ﺗﺸﻌﺒﯿﺔ‬ ‫ا‬ ‫ﻣﺎ‬ ‫‪ ...Links‬أو اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ ﻫﻲ روح اﻹﻧﺘﺮﻧﺖ. ﻋﻠﻲ ﻛﻞ ﺣﺎل ﻟﻦ أﺧﻮض ﻛﺜﯿﺮا ﻓﻲ ﺷﺮح ﻫﺬه اﻟﻮﺻﻼت‬ ‫ﻓﻠﻘﺪ ﻗﻤﺖ ﺑﺸﺮﺣﻬﺎ ﺗﻔﺼﯿﻠﯿﺎ ﻓﻲ اﻟﺪروس ﻛﻞ ﻣﺎ ﻫﻮ ﻣﻄﻠﻮب ﻣﻨﺎ اﻵن ﻫﻮ ﺗﻌﻠﯿﻤﻚ ﻛﯿﻔﯿﻪ أدراج وﺻﻠﻪ ﺗﺸﻌﺒﯿﻪ ﻓﻲ‬ ‫ﺻﻔﺤﺎﺗﻚ‬ ‫ﻓﻲ اﻟﺒﺪاﯾﻪ ﻧﺴﺘﺨﺪم ﻫﺬا اﻟﻮﺳﻢ ﻟﺒﺪأ أﻧﺸﺎء اﻟﻮﺻﻠﻪ‬ ‫>‪</A> ... <A‬‬ ‫وﻫﻮ اﻟﻮﺳﻢ اﻷﺳﺎﺳﻲ ﻹدراج اﻟﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﺔ، وﻫﻲ اﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ ‪ .Anchor‬وﻫﻲ ﻻ ﺗﻌﻤﻞ ﻟﻮﺣﺪﻫﺎ ﺑﻞ‬ ‫ﺗﺘﻄﻠﺐ إﺿﺎﻓﺔ ﺧﺼﺎﺋﺺ ﻣﻌﯿﻨﺔ أوﻟﻬﺎ وأﻫﻤﻬﺎ اﻟﺨﺎﺻﯿﺔ‬ ‫‪HREF‬‬ ‫اﻟﺘﻲ ﻧﺤﺪد ﻣﻦ ﺧﻼﻟﻬﺎ اﻟﻤﻮﻗﻊ اﻟﺬي ﻧﺮﯾﺪ اﻟﺪﻻﻟﺔ ﻋﻠﯿﻪ، وﯾﺠﺐ أن ﯾﻜﺘﺐ ﻋﻨﻮان اﻟﻤﻮﻗﻊ ﻛﺎﻣ ً و ﻫﻲ إﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ‬ ‫ﻼ‬ ‫‪. REFerence Hypertext‬‬
  12. 12. ‫وﻫﺬه ﻫﻲ اﻟﺼﯿﻐﺔ اﻷﺳﺎﺳﯿﻪ ﻟﻠﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﻪ‬ ‫ﻫﺎم ﺟﺪا‬ ‫ﺻﻔﺤﱵ>"‪<A HREF="FirstPage.html‬‬ ‫>‪</A‬اﻷوﱃ‬ ‫ﻓﺘﻈﻬﺮ ﻟﻚ اﻟﻮﺻﻠﻪ ﺑﻬﺬا اﻟﺸﻜﻞ‬ ‫ﺻﻔﺤﺘﻲ اﻷوﻟﻰ‬ ‫و اﻵن إﻟﻲ اﻟﻌﻨﻮان اﻹﻟﯿﻜﺘﺮوﻧﻲ ‪ : E-Mail‬ﻛﯿﻒ ﻧﺪرج وﺻﻠﻪ إﻟﻲ اﻟﻌﻨﻮان اﻟﺒﺮﯾﺪي اﻟﺨﺎص ﺑﻨﺎ ﻓﺎﻟﻮاﻗﻊ اﻹﺟﺎﺑﻪ‬ ‫ﺳﻬﻠﻪ ﺟﺪا ﻓﻬﺬه ﻫﻲ ﺻﯿﻐﺔ اﻟﺒﺮﯾﺪ اﻹﻟﯿﻜﺘﺮوﻧﻲ‬‫ﱄ>"‪<A HREF="mailto:d4a@f2s.com‬‬ ‫>‪</A‬أرﺳﻞ‬ ‫ﺗﻈﻬﺮ ﻟﻚ اﻟﻮﺻﻠﻪ ﺑﻬﺬا اﻟﺸﻜﻞ‬ ‫أرﺳﻞ ﻟﻲ‬ ‫وﺻﻠﻪ ﻟﺼﻮرة :- ﻓﻲ اﻟﺤﻘﯿﻘﻪ أن أدراج وﺻﻠﻪ ﺗﺸﻌﺒﯿﻪ ﺑﺼﻮرة ﻻ ﺗﺨﺘﻠﻒ ﻛﺜﯿﺮا ﻋﻦ اﻟﺴﺎﺑﻖ وﻟﻜﻦ ﺳﻨﻘﻮم ﺑﺸﺮﺣﻬﺎ‬ ‫ﻓﻲ اﻟﻔﺼﻞ اﻟﻘﺎدم«‬ ‫و ﺻﻠﻪ ﻟﻤﻠﻒ :- أدراج وﺻﻠﻪ ﻟﻤﻠﻒ ﻻ ﯾﺨﺘﻠﻒ ﻋﻦ أدراج وﺻﻠﻪ ﻟﺼﻮرة ﺗﻘﺮﯾﺒﺎ وﻟﻜﻦ ﯾﻮﺟﺪ إﺧﺘﻼف ﺑﺴﯿﻂ ﻓﺒﺪﻻ‬ ‫ﻣﻦ أن ﯾﻔﺘﺢ اﻟﻤﺴﺘﻌﺮض اﻟﺼﻮرة ﻓﻲ ﺻﻔﺤﺔ ﺟﺪﯾﺪة ﯾﻘﻮم اﻟﻤﺴﺘﻌﺮض ﺑﺈﻇﻬﺎر ﻟﻚ ﺻﻨﺪوق اﻹﺧﺘﯿﺎرات ﻟﺤﻔﻆ‬ ‫اﻟﻤﻠﻒ أو ﺗﺤﻤﯿﻠﻪ ﻣﻦ ﻋﻠﻲ اﻟﻤﻮﻗﻊ و ﻫﺬه ﻫﻲ اﻟﺼﯿﻐﻪ :-‬‫اﳌﻘﻄﻮﻋﺔ>"‪<A HREF="egypt.mid‬‬ ‫>‪ </A‬ﲪﻞ ﻫﺬه‬ ‫ﺗﻈﻬﺮ ﻟﻚ اﻟﻮﺻﻠﻪ ﺑﻬﺬا اﻟﺸﻜﻞ و ﻋﻨﺪ اﻟﻀﻐﻂ ﻋﻠﯿﻬﺎ ﯾﻈﻬﺮ ﻟﻚ ﺻﻨﺪوق اﻹﺧﺘﯿﺎرات‬ ‫ﺣﻤﻞ ﻫﺬه اﻟﻤﻘﻄﻮﻋﻪ‬ ‫أﺳﺎﺳﯿﺎت إدراج اﻟﺼﻮر‬
  13. 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. 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. 15. ‫ﻫﺬه اﻟﻘﯿﻤﺔ ﺗﺆدي إﻟﻰ ﻣﺤﺎذاة اﻟﺼﻮرة إﻟﻰ أﻗﺼﻰ اﻟﯿﺴﺎر. ﻣﻊ اﻟﺘﻔﺎف‬ ‫اﻟﻨﺺ اﻟﺬي ﯾﻠﯿﻬﺎ ﻋﻠﻰ اﻟﺠﻬﺔ اﻟﯿﻤﻨﻰ وﻟﻌﺪة أﺳﻄﺮ ﺣﺴﺐ ارﺗﻔﺎع اﻟﺼﻮرة.‬‫>"‪<IMG SRC="image.jpg" ALIGN="LEFT‬‬ ‫‪RIGHT‬‬ ‫أﻣﺎ ﻫﺬه اﻟﻘﯿﻤﺔ ﻓﺘﺆدي إﻟﻰ ﻣﺤﺎذاة اﻟﺼﻮرة إﻟﻰ أﻗﺼﻰ اﻟﯿﻤﯿﻦ. ﻣﻊ اﻟﺘﻔﺎف‬ ‫اﻟﻨﺺ اﻟﺬي ﯾﻠﯿﻬﺎ ﻋﻠﻰ اﻟﺠﻬﺔ اﻟﯿﺴﺮى وﻟﻌﺪة أﺳﻄﺮ ﺣﺴﺐ ارﺗﻔﺎع‬ ‫اﻟﺼﻮرة .‬‫>"‪<IMG SRC="image.jpg" ALIGN="RIGHT‬‬ ‫ﻟﻤﺰﯾﺪ ﻣﻦ اﻟﻤﻌﻠﻮﻣﺎت واﻟﻘﯿﻢ أﻗﺮأ اﻟﺪروس اﻟﺨﺎﺻﻪ ﺑﺎﻟﺼﻮر‬ ‫واﻵن إﻟﻲ اﻟﻔﺼﻞ اﻟﺘﺎﻟﻲ :- أﻟﻮان اﻟﻮﺻﻼت و اﻟﺨﻠﻔﯿﻪ‬ ‫ﺧﻮاص اﻟﺼﻔﺤﺔ‬ ‫ﻫﺎي اﻵن ﻧﺴﺘﻄﯿﻊ أن ﻧﻘﻮل أﻧﻚ ﻟﺪﯾﻚ ﻗﺪر ﻗﻠﯿﻞ ﻣﻦ اﻟﻌﺒﻘﺮﯾﻪ ﻓﻲ اﻟـ ‪ ، HTML‬أﻧﺖ ﺗﺘﻤﻨﻲ أن ﯾﻜﻮن ﻣﻮﻗﻌﻚ ذو‬ ‫ﺷﻜﻞ ﻣﻘﺒﻮل وﻫﺬا ﯾﻌﻨﻲ أﺳﺘﺨﺪم ﺟﯿﺪ ﻷﻟﻮان وﺗﺼﻤﯿﻢ ﺟﺬاب !!! ، ﻓﺤﺘﻰ اﻵن اﻷﻟﻮان اﻟﻮﺣﯿﺪه ﻋﻠﻲ ﺻﻔﺤﺘﻚ ﻛﺎﻧﺖ‬‫اﻷﺑﯿﺾ اﻟﺨﻠﻔﯿﻪ اﻷﺳﻮد ﻟﻠﻨﺺ اﻷزرق ﻟﻠﻮﺻﻼت اﻟﺘﺸﻌﺒﯿﻪ اﻟﻦ ﺗﺤﺐ أن ﺗﻐﯿﯿﺮﻫﻢ إﻟﻲ ﺷﻲء أﻛﺜﺮ ﺟﻤﺎﻟﻪ وأﻧﺎﻗﻪ؟.!!‬ ‫ﻓﻬﺮس اﻟﺼﻔﺤﺔ‬‫[وﺳﻢ اﻟﺠﺴﻢ‪ | Body Tag‬ﻟﻮن اﻟﺨﻠﻔﯿﻪ | اﻟﻨﺺ | اﻟﻮﺻﻠﻪ | اﻟﻮﺻﻠﻪ اﻟﻤﺰارة | اﻟﻮﺻﻠﻪ اﻟﻨﺸﻄﻪ | ﺻﻮرة اﻟﺨﻠﻔﯿﻪ‬ ‫|اﻟﻬﻮاﻣﺶ | ﻛﻠﻤﺔ ﻋﻠﻲ إﺧﺘﯿﺎر اﻷﻟﻮان]‬ ‫وﺳﻢ اﻟﺠﺴﻢ ‪Body Tag‬‬ ‫اﻷن أﻧﺖ ﻟﺪﯾﻚ ﻣﻌﺮﻓﺔ وﻗﺪرة ﻋﻠﻲ إﺳﺘﻌﻤﺎل ﺧﻮاص اﻷوﺳﻤﻪ ، وﻫﺬا ﯾﺒﺸﺮ ﺑﺒﺪاﯾﻪ ﺟﯿﺪه .‬ ‫ﺗﺘﺬﻛﺮ ﺑﺎﻟﻄﺒﻊ وﺳﻢ اﻟـ‪ BODY‬اﻟﻤﻮﺟﻮد ﻓﻲ ﺻﻔﺤﺘﻲ اﻷوﻟﻲ ﺣﯿﺚ ﻛﻞ ﺷﻲء ﯾﻜﻮن ﻣﺮئ ﻓﻲ ﺻﻔﺤﺘﻚ ﻻﺑﺪ وان‬ ‫ﯾﻜﻮن ﺑﺪاﺧﻞ ﻫﺬا اﻟﻮﺳﻢ ، و ﻫﺬا اﻟﻮﺳﻢ ﻣﺎ ﺳﻮف ﻧﺘﺪﺣﺪث ﻋﻨﻪ ﻓﻲ ﻫﺬا اﻟﻔﺼﻞ . ﻫﻨﺎك ﺳﺒﻌﺔ ﺧﻮاص ﺗﻀﺎف إﻟﻲ‬ ‫ﻫﺬا اﻟﻮﺳﻢ ﻛﻞ ﻣﻨﻬﺎ ﺗﺘﺤﻜﻢ ﻓﻲ ﻣﻈﻬﺮ وﺗﺼﻤﯿﻢ ﺻﻔﺤﺘﻚ :-‬
  16. 16. ‫ﻟﻮن اﻟﺨﻠﻔﯿﻪ‬ ‫ون ﺳﺘﺨﺪم ﻟﺘﻐﯿﯿﺮ ﻟﻮن اﻟﺨﻠﻔﯿﻪ اﻟﺨﺎﺻﯿﻪ ‪ BGCOLOR‬و‪ BG‬إﺧﺘﺼﺎر ﻟﻜﻠﻤﺔ ‪ BackGround‬و ﻻﺑﺪ أن ﺗﻀﻊ‬ ‫اﻟﻘﯿﻤﺔ أي اﻟﻠﻮن ﺑﻜﻮد اﻟـ ‪ HEX‬ﻣﺜﻞ ﺑﺎﻗﻲ اﻷﻟﻮان !! وﻟﻜﻦ أراك ﺗﺘﺴﺎﺋﻞ ﻣﺎ ﻫﻮ ﻛﻮد اﻟـ ‪ HEX‬؟!!! ﺳﺆال ﺟﯿﺪ‬ ‫وﻟﻜﻦ ﻫﺬا ﻣﻌﻨﺎه أﻧﻚ ﻻﺑﺪ وأن ﺗﻘﺮأ ﺗﻌﺮﯾﻒ ﻫﺬا اﻟﻜﻮد ، أذا وددت أن ﺗﺮي ﻗﺎﺋﻤﺔ ﺑﺄﻛﻮاد ٦١٢ ﻟﻮن ﻣﺨﺘﻠﻔﯿﻦ أﻟﻘﻲ‬ ‫ﻧﻈﺮه ﻋﻠﻲ ﻫﺬا اﻟﻤﺨﻄﻂ أﻣﺎ ﺑﺎﻟﻨﺴﺒﻪ ﻟﻠﻜﻮد ﯾﻜﻮن ﺑﻬﺬا اﻟﺸﻜﻞ‬ ‫"‪BGCOLOR="#FFFFFF‬‬ ‫ﻣﻼﺣﻈﺔ :- ﻫﺬا اﻟﻜﻮد ﻟﻠﻮن اﻷﺑﯿﺾ ﻓﺄذا وددت أن ﺗﻜﻮن ﺧﻠﯿﻔﯿﻪ ﺻﻔﺤﺘﻚ ﺑﻬﺬا اﻟﻠﻮن ﻻﺑﺪ ﻣﻦ ﻛﺘﺎﺑﻪ ﻫﺬا اﻟﻜﻮد ،‬‫ﻫﺬا ﺑﺎﻟﺮﻏﻢ ﻣﻦ أن اﻟﻠﻮن اﻷﺑﯿﺾ ﻫﻮ اﻟﻠﻮن اﻷﺳﺎﺳﻲ ﻟﻠﺼﻔﺤﺎت وﻟﻜﻦ ﺑﻌﺾ اﻟﻤﺴﺘﻌﺮﺿﺎت ﯾﻜﻮن اﻟﻠﻮن اﻷﺳﺎﺳﻲ‬ ‫ﻟﻬﺎ ﻫﻮ اﻟﺮﻣﺎدي‬ ‫اﻟﻨﺺ‬‫ﻻ ﯾﺨﺘﻠﻒ ﻛﺜﯿﺮا ﻛﻮد اﻟﻨﺺ ﻋﻦ ﻛﻮد اﻟﺨﻠﻔﯿﻪ ﻟﻜﻦ ﻧﻨﺼﺢ داﺋﻤﺎ ﺑﺘﺮك ﻟﻮن اﻟﺨﻠﻔﯿﻪ ﻋﻠﻲ اﻟﻠﻮن اﻷﺳﺎﺳﻲ وﻫﻮ اﻷﺳﻮد‬ ‫ﺣﯿﺚ أﻧﻪ اﻷﺳﻬﻞ ﻓﻲ اﻟﻘﺮاءه و إﻟﯿﻚ اﻟﻜﻮد‬ ‫"000000#"=‪TEXT‬‬ ‫اﻟﻮﺻﻠﻪ‬ ‫ﺑﺎﻟﻄﺒﻊ ﺗﻈﻬﺮ ﻟﻚ ﻛﻞ اﻟﻮﺻﻼت ﺑﺎﻟﻠﻮن اﻷزرق ، ﻟﻜﻦ ﯾﻤﻜﻨﻚ أن ﺗﻐﯿﺮ ﻫﺬا إﻟﻲ أي ﻟﻮن ﯾﺤﻠﻮ ﻟﻚ و ﻫﺬا ﻫﻮ اﻟﻜﻮد‬ ‫"‪LINK="#FF00FF‬‬ ‫اﻟﻮﺻﻠﻪ اﻟﻤﺰارة‬ ‫ﻋﻨﺪﻣﺎ ﺗﻀﻐﻂ ﻋﻠﻲ أي وﺻﻠﻪ ﺛﻢ ﺗﻌﻮد ﻣﺮة أﺧﺮي ﻟﻠﺼﻔﺤﺔ اﻟﺘﻲ ﺿﻐﻂ ﻓﯿﻬﺎ ﻋﻠﻲ ﺗﻠﻚ اﻟﻮﺻﻠﻪ ﻓﺄﻧﻚ ﺗﻼﺣﻆ ﺗﻐﯿﺮ‬ ‫ﺗﻠﻚ اﻟﻮﺻﻠﻪ إﻟﻲ اﻟﻠﻮن اﻟﺒﻨﻔﺴﺠﻲ و ﺑﺎﻟﻄﺒﻊ ﺗﺴﺘﻄﯿﻊ أن ﺗﻐﯿﯿﺮ ﻫﺬا اﻟﻠﻮن و إﻟﯿﻚ اﻟﻜﻮد‬ ‫"660066#"=‪VLINK‬‬ ‫اﻟﻮﺻﻠﻪ اﻟﻨﺸﻄﻪ‬ ‫ﻻ أﻋﺮف ﻫﻞ ﻗﺎﺑﻠﺖ ﻣﺜﻞ ﻫﺬا أم ﻻ وﻟﻜﻦ ﺑﺈﺧﺘﺼﺎر ﻋﻨﺪﻣﺎ ﺗﻘﻮم ﺑﺎﻟﻀﻐﻂ ﻋﻠﻲ وﺻﻠﻪ ﺛﻢ ﺗﺪﺧﻞ اﻟﺼﻔﺤﺔ وﺗﺠﺪ ﺑﻬﺎ‬ ‫ﻧﻔﺲ اﻟﻠﻮﺻﻠﻪ ﻟﻜﻦ ﻟﻮﻧﻬﺎ ﻗﺪ ﺗﺤﻮل إﻟﻲ اﻟﻠﻮن اﻷﺳﻮد ﻣﺜﻼ وﻻ ﺗﺴﺘﻄﯿﻊ أن ﺗﻀﻐﻂ ﻋﻠﯿﻬﺎ ﻣﺮة أﺧﺮي ﻋﻨﺪﻫﺎ ﺗﻜﻮن‬ ‫ﻫﺬه اﻟﻮﺻﻠﻪ ﻫﻲ اﻟﻮﺻﻠﻪ اﻟﻨﺸﻄﺔ أي اﻟﺼﻔﺤﺔ اﻵن ﻫﻲ اﻟﺼﻔﺤﺔ اﻟﻌﺎﻣﻠﺔ ﻟﻬﺬه اﻟﻮﺻﻠﻪ و ﻫﺬا ﻫﻮ اﻟﻜﻮد‬ ‫"0000‪ALINK="#FF‬‬ ‫ﺻﻮرة اﻟﺨﻠﻔﯿﻪ‬
  17. 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. 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. 19. ‫ﻣﻼﺣﻈﺔ:- ﯾﺠﺐ أن ﺗﺴﻤﻲ أول ﺻﻔﺤﺔ )‪ index.htm‬أو ‪ ( index.html‬ﺣﺘﻲ ﯾﺘﻌﺮف اﻟﻤﺴﺘﻌﺮض ﻋﻠﻲ‬ ‫أي ﻣﻦ اﻟﺼﻔﺤﺎت ﺳﯿﺘﻢ ﻋﺮﺿﻬﺎ أوﻻ .‬ ‫اﻟﻨﺼﻮص‬ ‫إن أﺳﻬﻞ ﺷﻲء ﻫﻮ أن ﺗﻜﺘﺐ ﻓﻲ ﻣﻮﻗﻌﻚ و اﻟﺰوار ﺳﯿﻘﺮأوﻧﻪ ، ﻟﻜﻦ ﺑﺪون ﺑﻌﺾ اﻟﺘﻌﺪﯾﻼت واﻟﺘﻨﺴﯿﻘﺎت ﺳﯿﻜﻮن‬ ‫ﻧﺼﻚ ﻗﺒﯿﺢ و ﻏﯿﺮ ﺻﺎﻟﺢ ﻟﻠﻘﺮأه . ﺷﻜﺮاااااااااا ، ﺗﻨﺴﯿﻖ اﻟﻨﺺ ﻫﻮ أﺳﻬﻞ ﺟﺰء ﻓﻲ ﻟﻐﺔ ال ‪ ،HTML‬ﻟﻜﻦ ﻫﻨﺎك‬ ‫ﻧﺺ ﯾﻨﺴﻖ وﻧﺺ ﯾﻜﻮن ﺟﺬاب . أﻗﺮأ اﻵن‬ ‫اﻟﻌﻨﺎوﯾﻦ وﺣﺠﻢ اﻟﺨﻄﻮط‬ ‫أﻧﺖ ﺗﺴﺘﻄﯿﻊ أن ﺗﻐﯿﺮ ﺣﺠﻢ اﻟﺨﻂ و ﻫﺬا ﺳﯿﺴﺎﻋﺪك ﻛﺜﯿﺮا ﻓﻲ ﺗﻨﺴﯿﻖ ﺻﻔﺤﺘﻚ‬ ‫أﺷﻜﺎل وأﻟﻮان اﻟﺨﻄﻮط‬ ‫ﻫﻞ ﺗﺮﯾﺪ ﻧﺺ ﻋﺪﯾﺪ اﻷﻟﻮان و ﻣﺨﺘﻠﻒ اﻷﺷﻜﺎل ﻋﻠﻲ ﺻﻔﺤﺘﻚ؟ ﺣﻘﺎ؟!!‬ ‫اﻟﺮﻣﻮز اﻟﺨﺎﺻﻪ‬ ‫ﺧﺎص ﺟﺪا ﺗﺮﯾﺪ أن ﺗﻜﺘﺐ رﻣﺰ ﻏﯿﺮ ﻣﻮﺟﻮد ﻋﻠﻲ ﻟﻮﺣﺔ اﻟﻤﻔﺎﺗﯿﺢ ؟ ﺗﺮﯾﺪ إﺳﺘﻌﻤﺎل اﻟﺮﻣﺰ اﻟﺴﺤﺮي ؟‬ ‫اﻟﻮﺻﻼت‬‫اﻟﻮﺻﻼت ؟؟؟ ﺗﻌﻨﻲ اﻷﻧﺘﻘﺎل واﻟﻘﻔﺰ ﺑﯿﻦ ﻣﻘﺎﻃﻊ ﺻﻔﺤﺎﺗﻚ وﺻﻔﺤﺎﺗﻚ اﻵﺧﺮي ، أﻧﻬﻢ ﻓﻲ ﻏﺎﯾﻪ اﻟﺴﻬﻮﻟﻪ ﻟﻜﻲ ﺗﻘﻮم‬ ‫ﺑﺬﻟﻚ....‬ ‫اﻟﻘﻮاﺋﻢ‬ ‫ﺗﻌﻠﻢ ﻛﯿﻒ ﺗﻀﻊ ﻧﺼﻚ ﻓﻲ ﻧﻘﻂ ﻣﺮﺗﺼﻪ ، ﻣﺮﻗﻤﻪ وﻗﻮاﺋﻢ ﻣﻌﺮﻓﺔ !!!‬ ‫ﻗﺎﺋﻤﺔ ﺑﺠﻤﯿﻊ وﺳﻮم اﻟﻨﺺ‬ ‫ﯾﻮﺟﺪ ﻫﻨﺎ أﻛﺜﺮ ﻣﻦ ٠٤ وﺳﻢ ﺗﺴﺘﻄﯿﻊ إﺳﺘﺨﺪاﻣﻬﻢ ﻓﻲ ﺗﻨﺴﯿﻖ ﻧﺼﻚ . وإﻟﯿﻚ اﻟﻘﺎﺋﻤﺔ‬ ‫اﻟﻨﺺ اﻟﻤﺘﺤﺮك‬ ‫إﺳﺘﻌﻤﻞ ال‪ Internet Explorer‬ﻟﻜﻲ ﺗﺠﻌﻞ ﻧﺼﻚ ﯾﺘﺤﺮك ﻓﻲ اﻟﺸﺎﺷﻪ ؟!!!!‬ ‫اﻟﻌﻨﺎوﯾﻦ وﺣﺠﻢ اﻟﺨﻄﻮط‬
  20. 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. 21. ‫ﻛﻞ ﻣﺎﻋﻠﯿﻚ ﻓﻌﻠﻪ ﻫﻮ ﺗﻐﯿﯿﺮ اﻟﻘﯿﻤﺔ ‪ X‬إﻟﻲ رﻗﻢ ﻣﻦ ١- ٧ وإﻟﯿﻚ ﻧﻤﺎذج ﺑﺄﺣﺠﺎم اﻟﺨﻄﻮط-:‬ ‫ﺧﻂ ﺑﺤﺠﻢ ١‬ ‫ﺧﻂ ﺑﺤﺠﻢ ٢‬ ‫ﺧﻂ ﺑﺤﺠﻢ3‬ ‫ﺧﻂ ﺑﺤﺠﻢ ٤‬ ‫ﺧﻂ ﺑﺤﺠﻢ5‬ ‫ﺧﻂ ﺑﺤﺠﻢ ٦‬ ‫ﺧﻂ ﺑﺤﺠﻢ7‬ ‫ﻣﻠﺤﻮﻇﻪ ﺣﺠﻢ اﻟﺨﻂ اﻹﻓﺘﺮاﺿﻲ ﻫﻮ ٣‬ ‫أﻣﺎ اﻷﺳﻠﻮب اﻟﺜﺎﻧﻲ ﻓﻬﻮ اﻟﻨﺴﺒﻲ: ﺣﯿﺚ ﺗﻜﺘﺐ اﻷرﻗﺎم ﻣﻦ ١ إﻟﻰ ٦ ﻣﺮﻓﻘﺔ إﻣﺎ ﺑﺈﺷﺎرة )+( ﻣﻮﺟﺒﻪ أو ﺑﺈﺷﺎرة )-(‬ ‫ﺳﺎﻟﺒﻪ .‬ ‫>"‪<FONT SIZE="X‬‬ ‫............ اﻟﻨﺺ ﯾﻜﺘﺐ ﻫﻨﺎ.......‬ ‫>‪</FONT‬‬ ‫وﻓﻲ ﻫﺬه اﻟﻄﺮﯾﻘﺔ ﻓﺈن اﻷرﻗﺎم ١-٦ ﺗﻤﺜﻞ درﺟﺎت اﻟﺘﻜﺒﯿﺮ )+( أو اﻟﺘﺼﻐﯿﺮ )-( ﻟﻠﺨﻂ وذﻟﻚ ﻧﺴﺒ ً إﻟﻰ اﻟﺤﺠﻢ‬ ‫ﺔ‬ ‫اﻻﻓﺘﺮاﺿﻲ. ﻓﻤﺜﻼ اﻟﺮﻗﻢ +٤ ﯾﻌﻨﻲ ﺗﻜﺒﯿﺮ اﻟﺨﻂ أرﺑﻊ درﺟﺎت ﻋﻦ اﻟﺤﺠﻢ اﻻﻓﺘﺮاﺿﻲ وﻫﻮ ٣، أي أﻧﻪ ﯾﺼﺒﺢ‬ ‫ﺑﺎﻟﺤﺠﻢ ٧. ﺑﺎﻟﻤﻘﺎﺑﻞ ﻓﺄن اﻟﺮﻗﻢ -١ ﯾﻌﻨﻲ ﺗﺼﻐﯿﺮ اﻟﺨﻂ درﺟﺔ واﺣﺪة أي ﯾﺼﺒﺢ ﺑﺎﻟﺤﺠﻢ ٢ .‬ ‫وﻟﺘﻮﺿﯿﺢ ﻫﺬا اﻷﺳﻠﻮب، إﻟﯿﻚ ﻫﺬه اﻟﻨﻤﺎذج:‬ ‫ﺧﻂ ﺑﺤﺠﻢ -٣‬ ‫ﺧﻂ ﺑﺤﺠﻢ2-‬ ‫ﺧﻂ ﺑﺤﺠﻢ -١‬ ‫ﺧﻂ ﺑﺤﺠﻢ0±‬ ‫ﺧﻂ ﺑﺤﺠﻢ +١‬ ‫ﺧﻂ ﺑﺤﺠﻢ +٢‬ ‫ﺧﻂ ﺑﺤﺠﻢ +٣‬ ‫ﺧﻂ ﺑﺤﺠﻢ4+‬ ‫ﺧﻂ ﺑﺤﺠﻢ +٥‬‫ﻻﺣﻆ أﻧﻪ ﺣﺘﻰ ﻓﻲ اﻷﺳﻠﻮب اﻟﻨﺴﺒﻲ ﻻ ﻧﺴﺘﻄﯿﻊ اﻟﺤﺼﻮل ﻋﻠﻰ أﻛﺜﺮ ﻣﻦ ﺳﺒﻌﺔ أﺣﺠﺎم ﻟﻠﺨﻄﻮط. ﺣﺘﻰ وإن ﺣﺎوﻟﻨﺎ‬ ‫ﻛﺘﺎﺑﺔ أرﻗﺎم أﻛﺒﺮ أو أﺻﻐﺮ ﻛﻤﺎ ﻓﻌﻠﺖ ﻫﻨﺎ ﺑﻜﺘﺎﺑﺔ اﻟﺤﺠﻢ -٣ أو 5+‬ ‫ﻫﺎم ﺟﺪا‬‫ﻻﺑﺪ وان ﺗﺒﻌﺪ ﻛﻞ اﻟﺒﻌﺪ ﻋﻦ اﳋﻂ اﻟﺼﻐﲑ ﺟﺪا ﻓﻤﻦ اﻟﺼﻌﺐ ﻗﺮاءﺗﻪ و‬ ‫اﳋﻂ اﻟﻜﺒﲑ ﳝﻠﺊ ﺻﻔﺤﺘﻚ وﻟﺬﻟﻚ ﻻﺑﺪ وان ﲣﺘﺎر اﳋﻂ اﳌﻌﺘﺪل‬
  22. 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. 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. 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. 25. ¡ &iexcl; ¢ &cent; £ &pound; ¤ &curren; ¥ &yen; € &euro; ¦ &brvbar; § &sect;  ¨ &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. 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;

×