‫ﺑﺴﻢ اﷲ اﻟﺮﺣﻤﻦ اﻟﺮﺣﻴﻢ‬

‫ﺍﳌﺤﺘﻮﻳﺎﺕ‪:‬‬
‫ﺍﻟﻌﻨﻮﺍﻥ‬ ‫ﺍﻟﺼﻔﺤﺔ‬
‫ﻣﺎﻫﻲ ﻟﻐﺔ ‪ HTML‬؟‬ ‫‪2‬‬
‫ﻣﺜﺎﻝ ﺗﻄﺒﻴﻘﻲ‬ ‫‪3‬‬
‫ﻣﻠﺨﺺ ﻷﻫﻢ ﺍﻟﺸﻔﺮﺍﺕ ﺍﳌﺴﺘﺨﺪﻣﺔ ﻓﻲ ﻟﻐﺔ ‪HTML‬‬ ‫‪14‬‬
‫ﺍﻟﺘﻌﻠﻴﻘﺎﺕ ﻭﺍﳌﻼﺣﻈﺎﺕ‬ ‫‪15‬‬
‫ﻋﻴﻮﺏ ﻟﻐﺔ ‪HTML‬‬ ‫‪16‬‬
‫ﻣﻘﺪﻣﺔ ﻋﻦ ﻟﻐﺔ ‪XML‬‬ ‫‪16‬‬

‫‪http://aouM150.wordpress.com‬‬ ‫ﺍﻟﺼﻔﺤﺔ ‪ 1‬ﻣﻦ ‪17‬‬ ‫إﻋﺪاد‪ :‬اﳌﻌﺘﺼﻢ‬

 ‫‪ -1‬ﻣﺎﻫﻲ ﻟﻐﺔ ‪ HTML‬؟‬
‫‪ HTML‬ﻫﻲ ﺍﺧﺘﺼﺎﺭ ﳉﻤﻠﺔ ‪ ، HyperText Markup Language‬ﻭﻫﻲ ﻟﻐﺔ ﻭﺷﻔﺮﺍﺕ ﺑﺮﻣﺠﻴﺔ ﻳﺘﻢ ﻛﺘﺎﺑﺘﻬﺎ ﻳﺪﻭﻳﺎً ﺃﻭ ﻋﻦ‬
‫ﻃﺮﻳﻖ ﺑﺮﺍﻣﺞ ﻣﺘﺨﺼﺼﺔ ‪ ،‬ﻭﻣﻦ ﺛﻢ ﻳﺘﻢ ﺗﺮﺟﻤﺔ ﻫﺬﻩ ﺍﻷﻛﻮﺍﺩ ﻭﺍﻟﺸﻔﺮﺍﺕ ﻋﻦ ﻃﺮﻳﻖ ﻣﺘﺼﻔﺤﺎﺕ ﺍﻻﻧﺘﺮﻧﺖ )ﻣﺜﻞ ﺍﻧﺘﺮﻧﺖ ﺍﻛﺴﺒﻠﻮﺭﺭ‬
‫ﻭﻓﺎﻳﺮﻓﻮﻛﺲ ﻭﻏﻴﺮﻫﺎ( ﻭﲢﻮﻳﻠﻬﺎ ﺇﻟﻰ ﺻﻔﺤﺎﺕ ﺍﻧﺘﺮﻧﺖ ﻣﻨﺴﻘﺔ ﻭﻣﺮﺗﺒﺔ ﻋﻠﻰ ﺣﺴﺐ ﺍﺧﺘﻴﺎﺭ ﻭﺭﻏﺒﺔ ﻣﺼﻤﱢﻢ ﺍﻟﺼﻔﺤﺔ‪.‬‬

‫ﻳﺘﻢ ﻛﺘﺎﺑﺔ ﺷﻔﺮﺍﺕ ﻭﺃﻛﻮﺍﺩ ﻫﺬﻩ ﺍﻟﻠﻐﺔ ﺑﺈﺣﺪﻯ ﺍﻟﻄﺮﻳﻘﺘﲔ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫‪: WYSIWYG -1‬‬

‫ﻫﻲ ﺍﺧﺘﺼﺎﺭ ﻟـ ‪ What You See Is What You Get‬ﻭﻣﻌﻨﺎﻫﺎ ﻣﺎﺗﺸﺎﻫﺪﻩ ﻫﻮ ﻣﺎﺳﺘﺤﺼﻞ ﻋﻠﻴﻪ‪ .‬ﻭﻫﻲ ﻋﺒﺎﺭﺓ ﻋﻦ ﺍﺳﺘﺨﺪﺍﻡ‬
‫ﺑﺮﺍﻣﺞ ﻣﺘﺨﺼﺼﺔ ﻓﻲ ﻛﺘﺎﺑﺔ ﻫﺬﻩ ﺍﻟﻠﻐﺔ )ﻣﺜﻞ ﻓﺮﻭﻧﺖ ﺑﻴﺞ ﻭﻣﺤﺮﺭ ﺍﻟﻨﺼﻮﺹ ﻭﻭﺭﺩ ﻭ ﺩﺭﱘ ﻭﻳﻔﺮ ﻭﻏﻴﺮﻫﺎ( ﻟﺘﻘﻮﻡ ﺑﻌﻤﻞ ﺻﻔﺤﺔ ﺍﻧﺘﺮﻧﺖ‬
‫ﻼ ﺃﻥ ﻧﻜﺘﺐ ﻛﻠﻤﺔ ﺑﻠﻮﻥ ﻣﻌﲔ ‪ ،‬ﻛﻞ ﻣﺎﻋﻠﻴﻨﺎ‬
‫ﺑﺪﻭﻥ ﺍﳊﺎﺟﺔ ﳌﻌﺮﻓﺔ ﻭﻛﺘﺎﺑﺔ ﺍﻟﺸﻔﺮﺍﺕ ﺍﻟﺒﺮﻣﺠﻴﺔ ﺍﳋﺎﺻﺔ ﺑﻬﺬﻩ ﺍﻟﻠﻐﺔ‪ ،‬ﲟﻌﻨﻰ ﺃﻧﻪ ﺇﺫﺍ ﺃﺭﺩﻧﺎ ﻣﺜ ً‬
‫ﻫﻮ ﻛﺘﺎﺑﺔ ﺍﻟﻜﻠﻤﺔ ﺛﻢ ﻧﻘﻮﻡ ﺑﺘﻈﻠﻴﻠﻬﺎ ﻓﻲ ﺍﻟﺒﺮﻧﺎﻣﺞ ﻭﻣﻦ ﺛﻢ ﻧﺬﻫﺐ ﺇﻟﻰ ﻗﺎﺋﻤﺔ ﺍﻷﻟﻮﺍﻥ ﻟﻨﺨﺘﺎﺭ ﺍﻟﻠﻮﻥ ﺍﻟﺬﻱ ﻧﺮﻳﺪﻩ‪ ،‬ﻭﻫﻜﺬﺍ ﻟﺒﺎﻗﻲ ﻋﻤﻠﻴﺎﺕ‬
‫ﺍﻟﺘﻨﺴﻴﻖ ﺍﳌﺨﺘﻠﻔﺔ‪ ،‬ﻭﺍﻟﺒﺮﻧﺎﻣﺞ ﺳﻴﻘﻮﻡ ﺑﺎﻟﻨﻴﺎﺑﺔ ﻋﻨﺎ ﺑﺘﺤﻮﻳﻞ ﻣﺎﻋﻤﻠﻨﺎﻩ ﺇﻟﻰ ﺃﻛﻮﺍﺩ ﻭﺷﻔﺮﺍﺕ ‪.HTML‬‬
‫ﺑﺮﻧﺎﻣﺞ ﻣﺎﻳﻜﺮﻭﺳﻮﻓﺖ ﻭﻭﺭﺩ ﻫﻮ ﺃﻭﺿﺢ ﻣﺜﺎﻝ ﻋﻠﻰ ﻣﺜﻞ ﻫﺬﻩ ﺍﻟﺒﺮﺍﻣﺞ ‪ ،‬ﺣﻴﺚ ﳝﻜﻨﻨﺎ ﻋﻦ ﻃﺮﻳﻘﻪ ﻋﻤﻞ ﺻﻔﺤﺔ ﺍﻧﺘﺮﻧﺖ ﺑﺎﻟﺘﻨﺴﻴﻖ ﺍﻟﺬﻱ‬
‫ﻧﺮﻳﺪﻩ – ﻭﻛﺄﻧﻨﺎ ﻧﻨﺴﻖ ﻣﺴﺘﻨﺪ ﻧﺼﻲ ﻋﺎﺩﻱ – ﻭﺑﻌﺪﻫﺎ ﻧﻘﻮﻡ ﺑﺤﻔﻆ ﺍﳌﻠﻒ ﻋﻠﻰ ﺷﻜﻞ ﺻﻔﺤﺔ ﻭﻳﺐ ‪ ،‬ﻭﺳﻨﺠﺪ ﺍﳌﻠﻒ ﺍﻟﻨﺎﰋ ﻳﺤﻤﻞ ﺍﻣﺘﺪﺍﺩ‬
‫‪ html‬ﻭﻫﻮ ﺍﻻﻣﺘﺪﺍﺩ ﺍﳋﺎﺹ ﺑﺼﻔﺤﺎﺕ ﺍﻻﻧﺘﺮﻧﺖ ﺍﻟﺘﻲ ﻧﺴﺘﻄﻴﻊ ﻓﺘﺤﻬﺎ ﻭﻣﺸﺎﻫﺪﺗﻬﺎ ﺑﻮﺍﺳﻄﺔ ﺍﳌﺘﺼﻔﺢ‪.‬‬
‫ﻳﻔﻀﻞ ﺍﺳﺘﻌﻤﺎﻝ ﻫﺬﺍ ﺍﻟﻨﻮﻉ ﻟﻐﻴﺮ ﺍﳌﺤﺘﺮﻓﲔ ﻓﻲ ﻣﺠﺎﻝ ﻋﻤﻞ ﺻﻔﺤﺎﺕ ﺍﻻﻧﺘﺮﻧﺖ ﺃﻭ ﳌﻦ ﻻﻳﺮﻳﺪ ﺗﻌﻠﻤﻬﺎ ﻷﻧﻬﺎ ﻟﻴﺴﺖ ﻋﻠﻰ ﻋﻼﻗﺔ ﻣﻊ‬
‫ﺗﺨﺼﺼﻪ ﺃﻭ ﻣﺠﺎﻝ ﻋﻤﻠﻪ‪ .‬ﻭﳝﻴﺰ ﻫﺬﺍ ﺍﻟﻨﻮﻉ ﺑﺄﻧﻪ ﻳﺴﻤﺢ ﻟﻨﺎ ﺑﺮﺅﻳﺔ ﻋﻤﻠﻨﺎ ﻣﺒﺎﺷﺮﺓ ﻓﻲ ﺍﻟﺒﺮﻧﺎﻣﺞ‪ ،‬ﻭﺃﻳﻀﺎً ﻻﻳﺘﻄﻠﺐ ﻣﻌﺮﻓﺔ ﺷﻔﺮﺍﺕ ﺍﻟﻠﻐﺔ‬
‫ﺍﻟﺒﺮﻣﺠﻴﺔ‪.‬‬

‫‪: Explicit Markup -2‬‬

‫ﻫﺬﻩ ﻫﻲ ﺍﻟﻄﺮﻳﻘﺔ ﺍﻷﺳﺎﺳﻴﺔ ﻟﻜﺘﺎﺑﺔ ﻫﺬﻩ ﺍﻟﻠﻐﺔ‪ ،‬ﻭﻫﻲ ﻋﺒﺎﺭﺓ ﻋﻦ ﻛﺘﺎﺑﺔ ﻛﻞ ﺷﻔﺮﺓ ﻭﻛﻞ ﺣﺮﻑ ﻳﺘﻌﻠﻖ ﺑﺼﻔﺤﺔ ﺍﻻﻧﺘﺮﻧﺖ ﺍﳌﺮﺍﺩ ﻋﻤﻠﻬﺎ‬
‫ﺍﺑﺘﺪﺍﺀً ﻣﻦ ﺍﻟﺼﻔﺮ ﻭﻧﻬﺎﻳﺔ ﺑﺤﻔﻆ ﺍﻟﺼﻔﺤﺔ ﻭﺭﺅﻳﺘﻬﺎ ﻋﻦ ﻃﺮﻳﻖ ﻣﺘﺼﻔﺤﺎﺕ ﺍﻻﻧﺘﺮﻧﺖ ﻭﻣﻦ ﺛﻢ ﺍﻟﺘﻌﺪﻳﻞ ﻋﻠﻰ ﺍﻟﺸﻔﺮﺍﺕ ﺇﻥ ﻛﺎﻥ ﺫﻟﻚ ﻻﺯﻣﺎً‪.‬‬
‫ﻫﺬﻩ ﺍﻟﻄﺮﻳﻘﺔ ﻫﻲ ﺍﻟﺘﻲ ﺳﻨﺴﺘﻌﻤﻠﻬﺎ ﺑﺎﻟﻄﺒﻊ ﻓﻲ ﺷﺮﺣﻨﺎ ﻟﻬﺬﻩ ﺍﻟﻠﻐﺔ ﻷﻥ ﺍﻷﺧﺮﻯ ﻻﲢﺘﺎﺝ ﺇﻟﻰ ﺷﺮﺡ ﻭﻻﻳﻮﺟﺪ ﻓﻴﻬﺎ ﺷﻔﺮﺍﺕ ﺃﻭ ﺷﻲﺀ‬
‫ﻳﺼﻌﺐ ﻋﻠﻰ ﺍﻟﻨﺎﺱ ﻓﻬﻤﻪ‪.‬‬
‫ﻳﺘﻢ ﻛﺘﺎﺑﺔ ﺍﻟﺸﻔﺮﺍﺕ ﻋﻦ ﻃﺮﻳﻖ ﻋﺪﺓ ﺑﺮﺍﻣﺞ ﻭﺃﺷﻬﺮﻫﺎ ﻭﺃﺑﺴﻄﻬﺎ ﺑﺮﻧﺎﻣﺞ ‪ Notepad‬ﺃﻭ ﻣﺤﺮﺭ ﺍﻟﻨﺼﻮﺹ ﺍﻟﻌﺎﺩﻱ ﻓﻲ ﺍﻟﻮﻳﻨﺪﻭﺯ ‪،‬‬
‫ﻭﺑﺮﻧﺎﻣﺞ ‪ TextEdit‬ﻓﻲ ﺍﳌﺎﻛﻨﺘﻮﺵ ‪ ،‬ﻧﻔﺘﺢ ﻣﻠﻒ ﺟﺪﻳﺪ ﻭﻧﻜﺘﺐ ﺍﻟﺸﻔﺮﺍﺕ ﻭﺍﻷﻛﻮﺍﺩ ﺍﻟﺒﺮﻣﺠﻴﺔ ﻓﻴﻪ ‪ ،‬ﻭﻣﻦ ﺛﻢ ﻧﻌﻤﻞ ﺣﻔﻆ ﺍﳌﻠﻒ ﺑﺎﺳﻢ ‪،‬‬
‫ﻭﻧﻀﻊ ﺃﻱ ﺍﺳﻢ ﻧﺮﻳﺪﻩ ﺑﺸﺮﻁ ﺃﻥ ﻳﺤﺘﻮﻱ ﻋﻠﻰ ﺍﻣﺘﺪﺍﺩ ‪ .html‬ﺣﺘﻰ ﻧﺴﺘﻄﻴﻊ ﺭﺅﻳﺔ ﻣﺎﻗﻤﻨﺎ ﺑﻌﻤﻠﻪ ﺑﻮﺍﺳﻄﺔ ﻣﺘﺼﻔﺢ ﺍﻻﻧﺘﺮﻧﺖ‪.‬‬
‫ﻣﻴﺰﺓ ﻫﺬﺍ ﺍﻟﻨﻮﻉ ﺑﺄﻧﻪ ﻳﺴﻤﺢ ﻟﻨﺎ ﺑﺎﻟﺘﺤﻜﻢ ﺑﺸﻜﻞ ﺃﻛﺒﺮ ﻓﻲ ﺍﻟﺘﺼﻤﻴﻢ ﻣﻦ ﺍﻟﻄﺮﻳﻘﺔ ﺍﻷﺧﺮﻯ‪ ،‬ﻷﻥ ﺑﻌﺾ ﺍﻟﺒﺮﺍﻣﺞ ﻻﺗﻮﻓﺮ ﻟﻨﺎ ﺑﻌﺾ‬
‫ﺍﳋﺼﺎﺋﺺ ﺃﻭ ﺍﻷﻭﺍﻣﺮ ﺍﳌﺘﻘﺪﻣﺔ ﺃﻭ ﺍﻟﻐﻴﺮ ﻣﺸﻬﻮﺭﺓ‪ ،‬ﻭﻋﻴﺒﻪ ﻫﻮ ﺃﻥ ﺭﺅﻳﺔ ﺍﻟﻨﺘﻴﺠﺔ ﲢﺘﺎﺝ ﻟﻌﺪﺓ ﺧﻄﻮﺍﺕ )ﺣﻔﻆ ﺍﳌﻠﻒ ﺛﻢ ﻓﺘﺤﻪ ﲟﺘﺼﻔﺢ‬
‫ﺍﻧﺘﺮﻧﺖ( ﻋﻠﻰ ﻋﻜﺲ ﺍﻟﻄﺮﻳﻘﺔ ﺍﻷﻭﻟﻰ‪.‬‬

‫‪http://aouM150.wordpress.com‬‬ ‫ﺍﻟﺼﻔﺤﺔ ‪ 2‬ﻣﻦ ‪17‬‬ ‫إﻋﺪاد‪ :‬اﳌﻌﺘﺼﻢ‬

 ‫‪ -2‬ﻣﺜﺎﻝ ﺗﻄﺒﻴﻘﻲ ‪:‬‬
‫ﺍﻟﺼﻮﺭﺓ ﺍﻟﺘﺎﻟﻴﺔ ﺃﺗﺖ ﻟﻨﺎ ﻓﻲ ﺍﻟﻮﺍﺟﺐ ﺍﻟﺜﺎﻧﻲ ﻟﺴﻨﺔ ‪ 2008/2009‬ﻭﺳﺄﺳﺘﺨﺪﻣﻬﺎ ﻛﻤﺜﺎﻝ ﻭﺳﺄﺿﻴﻒ ﻋﻠﻴﻬﺎ ﺷﻌﺎﺭ ﻣﻨﺘﺪﻳﺎﺕ ﻃﻼﺏ‬
‫ﻼ ﳉﻤﻴﻊ ﺍﻟﺸﻔﺮﺍﺕ ﺍﻷﺳﺎﺳﻴﺔ ﻟﻌﻤﻞ ﺻﻔﺤﺔ ﺍﻧﺘﺮﻧﺖ‪.‬‬
‫ﺍﳉﺎﻣﻌﺔ ﺍﻟﻌﺮﺑﻴﺔ ﺍﳌﻔﺘﻮﺣﺔ ﻓﻲ ﺍﻷﻋﻠﻰ ﺣﺘﻰ ﻳﺼﺒﺢ ﺍﳌﺜﺎﻝ ﺷﺎﻣ ً‬

‫ﻃﺒﻌﺎً ﻫﺬﻩ ﺍﻟﺼﻮﺭﺓ ﻫﻲ ﻟﺼﻔﺤﺔ ﺍﻧﺘﺮﻧﺖ ﻭﻟﻜﻦ ﻗﻤﺖ ﺑﻘﺺ ﺍﻷﺟﺰﺍﺀ ﺍﻟﺰﺍﺋﺪﺓ ﺣﺘﻰ ﺗﻜﻮﻥ ﻭﺍﺿﺤﺔ ﻟﻨﺎ‪ ،‬ﺍﳌﻄﻠﻮﺏ ﻫﻮ ﻛﺘﺎﺑﺔ ﺷﻔﺮﺍﺕ ﺑﺮﻣﺠﻴﺔ‬
‫ﻟﻌﻤﻞ ﻣﺜﻞ ﻫﺬﻩ ﺍﻟﺼﻔﺤﺔ ‪..‬‬

‫ﺃﻭﻻً‪ :‬ﺃﻱ ﺻﻔﺤﺔ ﺍﻧﺘﺮﻧﺖ ﻣﻬﻤﺎ ﻛﺎﻥ ﺣﺠﻤﻬﺎ ﻭﻣﻬﻤﺎ ﻛﺎﻥ ﻧﻮﻋﻬﺎ ﻳﺠﺐ ﺃﻥ ﲢﺘﻮﻱ ﻋﻠﻰ ﺍﻷﻛﻮﺍﺩ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪ </title‬ﻋﻨﻮﺍﻥ ﺍﻟﺼﻔﺤﺔ >‪<title‬‬
‫>‪</head‬‬
‫>‪ </body‬ﻣﺤﺘﻮﻯ ﺍﻟﺼﻔﺤﺔ >‪<body‬‬
‫>‪</html‬‬

‫>‪ <html‬ﻳﺪﻝ ﻋﻠﻰ ﺃﻥ ﺻﻔﺤﺔ ﺍﻻﻧﺘﺮﻧﺖ ﺗﺒﺪﺃ ﻣﻦ ﻫﻨﺎ‪.‬‬

‫‪http://aouM150.wordpress.com‬‬ ‫ﺍﻟﺼﻔﺤﺔ ‪ 3‬ﻣﻦ ‪17‬‬ ‫إﻋﺪاد‪ :‬اﳌﻌﺘﺼﻢ‬

‫>‪ <head‬ﻳﺤﺘﻮﻱ ﻋﻠﻰ ﺷﻔﺮﺓ ﻋﻨﻮﺍﻥ ﺍﻟﺼﻔﺤﺔ ﻭﺷﻔﺮﺍﺕ ﺃﺧﺮﻯ ﻣﺘﻘﺪﻣﺔ ﻟﺴﻨﺎ ﻣﻄﺎﻟﺒﻮﻥ ﲟﻌﺮﻓﺘﻬﺎ ﺣﺎﻟﻴﺎً ﻣﺜﻞ ﺷﻔﺮﺍﺕ ﻟﻐﺔ ‪ XML‬ﻭﻟﻐﺔ‬
‫ﺍﳉﺎﻓﺎﺳﻜﺮﺑﺖ‪.‬‬
‫>‪ <title‬ﻳﺤﺘﻮﻱ ﻋﻠﻰ ﻋﻨﻮﺍﻥ ﺍﻟﺼﻔﺤﺔ ﺍﻟﺬﻱ ﻧﺮﻳﺪﻩ ﺃﻥ ﻳﻈﻬﺮ ﻓﻲ ﺃﻋﻠﻰ ﺍﳌﺘﺼﻔﺢ ﻛﺎﺳﻢ ﻭﻋﻨﻮﺍﻥ ﻟﻠﺼﻔﺤﺔ‪.‬‬
‫>‪ </title‬ﻫﻮ ﺷﻔﺮﺓ ﺍﻹﻏﻼﻕ ﻟﺸﻔﺮﺓ ﺍﻟﻌﻨﻮﺍﻥ ﻭﺍﻟﺬﻱ ﻳﺨﺒﺮﻧﺎ ﺑﺄﻧﻬﺎ ﺷﻔﺮﺓ ﻧﻬﺎﻳﺔ ﺃﻭ ﺇﻏﻼﻕ ﻫﻮ ﺭﻣﺰ ‪ /‬ﺍﳌﻮﺟﻮﺩ ﻗﺒﻞ ﺍﻟﻜﻠﻤﺔ‪.‬‬
‫ﻭﺃﺣﺐ ﺃﻥ ﺃﺫﻛﺮ ﻫﻨﺎ ﺑﺄﻥ ﺃﻱ ﺷﻔﺮﺓ ﺃﻭ ﻭﺳﻢ ﻳﺠﺐ ﻋﻠﻴﻨﺎ ﺇﻏﻼﻗﻬﺎ ﺑﻌﺪ ﺍﻧﺘﻬﺎﺅﻧﺎ ﻣﻨﻬﺎ ﻣﺜﻠﻤﺎ ﻋﻤﻠﻨﺎ ﻫﻨﺎ ﻓﻲ ﺇﻏﻼﻕ ﺷﻔﺮﺓ ﺍﻟﻌﻨﻮﺍﻥ ﺑﻌﺪ‬
‫ﻛﺘﺎﺑﺔ ﺍﻟﻌﻨﻮﺍﻥ ﺍﻟﺬﻱ ﻧﺮﻳﺪﻩ‪.‬‬
‫>‪ </head‬ﺇﻏﻼﻕ ﻟﻠﺸﻔﺮﺓ ﺍﻟﺴﺎﺑﻘﺔ ﻷﻧﻨﺎ ﻟﻢ ﻧﻌﺪ ﻧﺮﻳﺪ ﺇﺿﺎﻓﺔ ﺷﻲﺀ ﻓﻲ ﺩﺍﺧﻠﻬﺎ‪.‬‬
‫>‪ <body‬ﺑﻌﺪ ﻫﺬﻩ ﺍﻟﺸﻔﺮﺓ ﺳﻨﻀﻊ ﻛﻞ ﺷﻔﺮﺍﺕ ﻭﻣﺤﺘﻮﻳﺎﺕ ﺻﻔﺤﺔ ﺍﻻﻧﺘﺮﻧﺖ ﺍﻟﺘﻲ ﻧﺮﻳﺪ ﻋﻤﻠﻬﺎ‪.‬‬
‫>‪ </body‬ﻫﺬﻩ ﺍﻟﺸﻔﺮﺓ ﺗﺪﻝ ﻋﻠﻰ ﺃﻥ ﻣﺤﺘﻮﻯ ﺍﻟﺼﻔﺤﺔ ﺍﻟﺘﻲ ﺻﻤﻤﻨﺎﻫﺎ ﺍﻧﺘﻬﻰ ﻫﻨﺎ‪.‬‬
‫>‪ </html‬ﻳﺪﻝ ﻋﻠﻰ ﺃﻥ ﻣﻠﻒ ﺻﻔﺤﺔ ﺍﻻﻧﺘﺮﻧﺖ ﻳﻨﺘﻬﻲ ﻫﻨﺎ‪.‬‬

‫ﺑﻌﺾ ﺍﳌﻼﺣﻈﺎﺕ ﺍﻟﻬﺎﻣﺔ‪:‬‬

‫ﺍﻷﻛﻮﺍﺩ ﻭﺍﻟﺸﻔﺮﺍﺕ ﻳﺠﺐ ﺃﻥ ﻧﻜﺘﺒﻬﺎ ﻛﻠﻬﺎ ﺇﳑﺎ ﺑﺄﺣﺮﻑ ﻛﺒﻴﺮﺓ ﻣﺜﻞ >‪ <HTML‬ﺃﻭ ﻛﻠﻬﺎ ﺑﺄﺣﺮﻑ ﺻﻐﻴﺮﺓ ﻣﺜﻞ >‬ ‫●‬

‫‪ ، <html‬ﻭﻳﺠﺐ ﺍﻟﺜﺒﺎﺕ ﻋﻠﻰ ﻫﺬﺍ ﺍﻟﺸﻲﺀ ﻓﻲ ﺟﻤﻴﻊ ﺃﻛﻮﺍﺩ ﺍﳌﻠﻒ‪ .‬ﻭﻳﻔﻀﻞ ﺍﻟﺘﻌﻮﱡﺩ ﻋﻠﻰ ﺍﻟﻜﺘﺎﺑﺔ ﺑﺎﻷﺣﺮﻑ ﺍﻟﺼﻐﻴﺮﺓ‬
‫ﺩﺍﺋﻤﺎً‪.‬‬

‫ﻳﺠﺐ ﻋﻠﻴﻨﺎ ﺍﳌﺤﺎﻓﻈﺔ ﻋﻠﻰ ﺗﺮﺗﻴﺐ ﺍﻟﺸﻔﺮﺍﺕ ﺍﻟﺒﺮﻣﺠﻴﺔ ﺍﳌﺨﺘﻠﻄﺔ ﺃﻭ ﺍﳌﺘﺪﺍﺧﻠﺔ ﻣﻊ ﺑﻌﺾ‪ ،‬ﻛﻤﺜﺎﻝ‪:‬‬ ‫●‬

‫>‪<p> <center> Hello! </p> </center‬‬ ‫●‬

‫ﺍﻟﻄﺮﻳﻘﺔ ﻫﺬﻩ ﺧﺎﻃﺌﺔ ﻭﺳﻴﺘﻢ ﺇﻧﻘﺎﺹ ﺩﺭﺟﺎﺕ ﻣﻨﻚ ﺇﺫﺍ ﻗﻤﺖ ﺑﻌﻤﻠﻬﺎ‪ ،‬ﺍﳌﻔﺘﺮﺽ ﺃﻥ ﻧﻜﺘﺒﻬﺎ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﻟﻲ‪:‬‬
‫>‪<p> <center> Hello! </center> </p‬‬ ‫●‬

‫ﻗﺎﻋﺪﺓ‪ :‬ﺁﺧﺮ ﺷﻔﺮﺓ ﻧﻜﺘﺒﻬﺎ ﻫﻲ ﺃﻭﻝ ﺷﻔﺮﺓ ﻧﻐﻠﻘﻬﺎ‪.‬‬

‫ﺯﺭ ﺇﺩﺧﺎﻝ ﺃﻭ ﺇﻧﺘﺮ ﻻﻳﻮﺟﺪ ﻟﻪ ﺃﻱ ﺗﺄﺛﻴﺮ ﻋﻠﻰ ﺍﻟﻨﺘﻴﺠﺔ ﺍﻟﻨﻬﺎﺋﻴﺔ ﻟﻸﻛﻮﺍﺩ ﺍﻟﺒﺮﻣﺠﻴﺔ‪ ،‬ﻳﻌﻨﻲ ﻟﻮﻛﺘﺒﻨﺎ ﺍﻟﺸﻔﺮﺍﺕ ﻭﺍﳌﺤﺘﻮﻯ ﻛﻠﻪ‬ ‫●‬

‫ﺑﺪﻭﻥ ﺃﻥ ﻧﻀﻐﻂ ﺯﺭ ﺇﻧﺘﺮ ﻟﺘﺼﺒﺢ ﺟﻤﻴﻊ ﺍﻟﺸﻔﺮﺍﺕ ﻭﺍﻷﻛﻮﺍﺩ ﻣﻮﺟﻮﺩﺓ ﻓﻲ ﺳﻄﺮ ﻭﺍﺣﺪ ‪ ،‬ﺃﻭ ﻗﻤﻨﺎ ﺑﺎﻟﻀﻐﻂ ﻋﻠﻰ ﺯﺭ ﺇﻧﺘﺮ‬
‫ﻟﺘﺼﺒﺢ ﺍﻟﺸﻔﺮﺍﺕ ﻣﻮﺯﻋﺔ ﻋﻠﻰ ﻋﺪﺓ ﺃﺳﻄﺮ ‪ ،‬ﺍﻟﻨﺘﻴﺠﺔ ﺳﺘﻜﻮﻥ ﻧﻔﺴﻬﺎ ﻟﻠﻄﺮﻳﻘﺘﲔ‪.‬‬

‫ﺍﺳﺘﻌﻤﺎﻝ ﺯﺭ ﺍﳌﺴﺎﻓﺔ ﺳﻴﺘﻢ ﺍﺣﺘﺴﺎﺑﻪ ﻣﺮﺓ ﻭﺍﺣﺪﺓ ﻓﻘﻂ ﺳﻮﺍﺀ ﺿﻐﻄﻨﺎ ﻋﻠﻴﻪ ﻣﺮﺓ ﻭﺍﺣﺪﺓ ﺃﻭ ﺧﻤﺲ ﻣﺮﺍﺕ‪ ،‬ﺍﻟﻨﺘﻴﺠﺔ‬ ‫●‬

‫ﻭﺍﺣﺪﺓ‪.‬‬

‫ﺍﻷﻭﺍﻣﺮ ﺍﻟﺒﺮﻣﺠﻴﺔ ﻳﺘﻢ ﺗﻨﻔﻴﺬﻫﺎ ﺑﺎﻟﺘﺴﻠﺴﻞ ‪ ،‬ﺍﺑﺘﺪﺍﺀً ﻣﻦ ﺃﻭﻝ ﺃﻣﺮ ﻣﻮﺟﻮﺩ ﻓﻲ ﺍﻷﻋﻠﻰ ‪ ،‬ﻭﺍﻧﺘﻬﺎﺀً ﺑﺂﺧﺮ ﺃﻣﺮ ﻣﻮﺟﻮﺩ ﻓﻲ‬ ‫●‬

‫ﺍﻷﺳﻔﻞ‪.‬‬

‫‪http://aouM150.wordpress.com‬‬ ‫ﺍﻟﺼﻔﺤﺔ ‪ 4‬ﻣﻦ ‪17‬‬ ‫إﻋﺪاد‪ :‬اﳌﻌﺘﺼﻢ‬

‫ﻃﻴﺐ ﺍﻵﻥ ﻧﻌﻮﺩ ﻟﻠﻤﺜﺎﻝ‪ ،‬ﺍﻵﻥ ﻋﺮﻓﻨﺎ ﺍﻟﺸﻔﺮﺍﺕ ﺍﻟﺮﺋﻴﺴﻴﺔ ﻷﻱ ﺻﻔﺤﺔ ﺍﻧﺘﺮﻧﺖ ﻭﻋﺮﻓﻨﺎ ﺃﻳﻦ ﻳﺠﺐ ﻋﻠﻴﻨﺎ ﺃﻥ ﻧﻜﺘﺐ ﺍﻷﻛﻮﺍﺩ ﻭﺍﻟﺸﻔﺮﺍﺕ ﻟﺒﻨﺎﺀ‬
‫ﺻﻔﺤﺔ ﺍﻧﺘﺮﻧﺖ ‪ ،‬ﻟﺬﻟﻚ ﻧﻌﻮﺩ ﻟﻠﻤﺜﺎﻝ ﻟﻨﺒﺪﺀ ﻓﻲ ﺗﻄﺒﻴﻘﻪ‪ .‬ﺳﻨﺒﺪﺃ ﺑﺘﻄﺒﻴﻖ ﺍﳌﺜﺎﻝ ﻣﻦ ﺍﻷﻋﻠﻰ ﻟﻸﺳﻔﻞ ‪ ،‬ﻭﺃﻭﻝ ﺷﻲﺀ ﻣﻮﺟﻮﺩ ﻓﻲ ﺍﻷﻋﻠﻰ ﻫﻮ‬
‫ﺻﻮﺭﺓ ﻟﺸﻌﺎﺭ ﻣﻨﺘﺪﻳﺎﺕ ﻃﻼﺏ ﺍﳉﺎﻣﻌﺔ ﺍﻟﻌﺮﺑﻴﺔ ﺍﳌﻔﺘﻮﺣﺔ ﻓﻲ ﻭﺳﻂ ﺍﻟﺼﻔﺤﺔ ‪..‬‬
‫ﺍﻟﺸﻔﺮﺓ ﺍﳋﺎﺻﺔ ﺑﻌﺮﺽ ﺍﻟﺼﻮﺭ ﻫﻲ‪:‬‬
‫>"‪<img src="...‬‬
‫ﻣﻜﺎﻥ ﺍﻟﻨﻘﻂ ﻧﻀﻊ ﺭﺍﺑﻂ ﺍﻟﺼﻮﺭﺓ ﺍﻟﺘﻲ ﻧﺮﻳﺪ ﻋﺮﺿﻬﺎ‪ ،‬ﻭﻫﻨﺎ ﻳﺠﺐ ﺃﻥ ﻧﺬﻛﺮ ﺑﺄﻧﻪ ﺗﻮﺟﺪ ﺣﺎﻟﺘﲔ ﻟﻌﺮﺽ ﺍﻟﺼﻮﺭ‪:‬‬
‫ﺍﻷﻭﻟﻰ‪ :‬ﻭﻫﻲ ﺇﺫﺍ ﻛﺎﻧﺖ ﺍﻟﺼﻮﺭﺓ ﻣﻮﺟﻮﺩﺓ ﻓﻲ ﺻﻔﺤﺔ ﺍﻧﺘﺮﻧﺖ ﺃﺧﺮﻯ ﻭﻧﺮﻳﺪ ﺃﻥ ﻧﻌﺮﺿﻬﺎ ﻓﻲ ﺻﻔﺤﺘﻨﺎ – ﻭﻫﺬﻩ ﺍﻟﻄﺮﻳﻘﺔ ﻣﻜﺮﻭﻫﻪ ﻷﻧﻬﺎ‬
‫ﺗﻘﻮﻡ ﺑﺴﺮﻗﺔ ﲢﻤﻴﻞ ﺍﻟﺒﻴﺎﻧﺎﺕ ﻣﻦ ﺍﳌﻮﻗﻊ ﺍﻵﺧﺮ ﻭﺗﻘﻮﻡ ﺑﺘﻀﻠﻴﻞ ﺑﺮﺍﻣﺞ ﺣﺴﺎﺏ ﻋﺪﺩ ﺍﻟﺰﻭﺍﺭ ﻭﻏﻴﺮﻫﺎ – ﻭﻓﻲ ﻫﺬﻩ ﺍﳊﺎﻟﺔ ﻧﻘﻮﻡ ﺑﻮﺿﻊ‬
‫ﻼ ﻓﻲ ﻣﻜﺎﻥ ﺍﻟﻨﻘﺎﻁ ﻭﻓﻲ ﺣﺎﻟﺘﻨﺎ ﻫﺬﻩ ﻟﻦ ﻧﺴﺘﺨﺪﻡ ﻫﺬﻩ ﺍﻟﻄﺮﻳﻘﺔ ﻷﻥ ﺍﻟﺼﻮﺭﺓ ﺳﺘﻜﻮﻥ ﻣﺤﻠﻴﺔ ﻭﻟﻴﺴﺖ ﻣﻦ ﺭﺍﺑﻂ‬
‫ﺭﺍﺑﻂ ﺍﻟﺼﻮﺭﺓ ﻛﺎﻣ ً‬
‫ﺧﺎﺭﺟﻲ‪.‬‬
‫ﺍﻟﺜﺎﻧﻴﺔ‪ :‬ﺇﺫﺍ ﻛﺎﻧﺖ ﺍﻟﺼﻮﺭﺓ ﻣﻮﺟﻮﺩﺓ ﻟﺪﻳﻨﺎ ﻓﻲ ﺍﳊﺎﺳﺐ ﺃﻭ ﻓﻲ ﺍﻟﺴﻴﺮﻓﺮ ﺍﻟﺬﻱ ﺳﻨﺮﻓﻊ ﻋﻠﻴﻪ ﺻﻔﺤﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ ،‬ﻭﻃﺮﻳﻘﺘﻬﺎ ﻳﺠﺐ ﺃﻥ ﻧﻀﻊ‬
‫ﻼ ﻟﻮ ﻛﺎﻥ ﻣﻠﻒ ﺻﻔﺤﺔ ﺍﻻﻧﺘﺮﻧﺖ ﺍﻟﺬﻱ ﻧﻘﻮﻡ ﺑﺘﺼﻤﻴﻤﻪ ﻣﻮﺟﻮﺩ ﻓﻲ‬
‫ﺍﻟﺼﻮﺭﺓ ﻓﻲ ﻧﻔﺲ ﺍﳌﺠﻠﺪ ﺍﻟﺬﻱ ﺗﻮﺟﺪ ﻓﻴﻪ ﺻﻔﺤﺔ ﺍﻻﻧﺘﺮﻧﺖ ‪ ،‬ﻣﺜ ِ‬
‫ﺳﻄﺢ ﺍﳌﻜﺘﺐ ﻳﺠﺐ ﺃﻥ ﻧﻀﻊ ﺍﻟﺼﻮﺭﺓ ﻓﻲ ﺳﻄﺢ ﺍﳌﻜﺘﺐ ﺃﻳﻀﺎً ‪ ،‬ﻭﻟﻮ ﻛﺎﻥ ﺍﳌﻠﻒ ﻣﻮﺟﻮﺩ ﻓﻲ ﺍﳌﺴﺘﻨﺪﺍﺕ ﻳﺠﺐ ﺃﻥ ﻧﻀﻊ ﺍﻟﺼﻮﺭﺓ ﻣﻌﻪ ﻓﻲ‬
‫ﺍﳌﺴﺘﻨﺪﺍﺕ‪.‬‬

‫ﺍﻵﻥ ﺑﻌﺪ ﻣﺎﻭﺿﻌﻨﺎ ﺍﻟﺼﻮﺭﺓ ﻭﺍﳌﻠﻒ ﻓﻲ ﻧﻔﺲ ﺍﳌﺠﻠﺪ ﻧﺄﺧﺬ ﺍﺳﻢ ﺍﻟﺼﻮﺭﺓ ﻣﻊ ﺍﻣﺘﺪﺍﺩﻫﺎ ﻭﻧﻀﻌﻬﺎ ﻣﻜﺎﻥ ﺍﻟﻨﻘﻂ ﺍﳊﻤﺮﺍﺀ ‪ ،‬ﺍﻟﺼﻮﺭﺓ ﻓﻲ‬
‫ﺣﺎﻟﺘﻨﺎ ﻫﺬﻩ ﺍﺳﻤﻬﺎ ‪ .aoua.jpg‬ﻟﺬﻟﻚ ﻧﻌﻴﺪ ﻛﺘﺎﺑﺔ ﺷﻔﺮﺓ ﻋﺮﺽ ﺍﻟﺼﻮﺭﺓ ﻟﺘﺼﺒﺢ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﻟﻲ‪:‬‬
‫>"‪<img src="aoua.jpg‬‬

‫ﻃﻴﺐ ﺍﻵﻥ ﻋﺮﻓﻨﺎ ﻛﻴﻒ ﻧﻌﺮﺽ ﺍﻟﺼﻮﺭﺓ ‪ ،‬ﻭﻟﻜﻦ ﺗﺒﻘﺎ ﺃﻥ ﳒﻌﻠﻬﺎ ﺗﻈﻬﺮ ﻓﻲ ﻭﺳﻂ ﺍﻟﺼﻔﺤﺔ ‪..‬‬
‫ﺍﻟﺸﻔﺮﺓ ﺍﳋﺎﺻﺔ ﺑﺎﻟﺘﻮﺳﻴﻂ ﻫﻲ >‪. <center‬‬
‫ﻟﺬﻟﻚ ﻧﻀﻴﻔﻬﺎ ﻣﻊ ﺷﻔﺮﺓ ﺇﻏﻼﻗﻬﺎ ﻋﻠﻰ ﺷﻔﺮﺓ ﻋﺮﺽ ﺍﻟﺼﻮﺭﺓ ﺍﻟﺴﺎﺑﻘﺔ ‪ ،‬ﻟﺘﺼﺒﺢ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﻟﻲ‪:‬‬
‫>‪<center> <img src="aoua.jpg"> </center‬‬

‫ﻃﺒﻌﺎً ﻫﺬﻩ ﺍﻟﺸﻔﺮﺓ ﻧﻜﺘﺒﻬﺎ ﻓﻲ ﻣﻜﺎﻥ ﺍﳌﺤﺘﻮﻯ ﺍﻟﺬﻱ ﺣﺪﺩﺗﻪ ﻓﻲ ﺍﻟﺸﻔﺮﺍﺕ ﺍﻷﺳﺎﺳﻴﺔ ‪ ،‬ﻟﻴﺼﺒﺢ ﻋﻤﻠﻨﺎ ﺣﺘﻰ ﺍﻵﻥ ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>My first web page!</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<center> <img src="aoua.jpg"> </center‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ﺍﻵﻥ ﺍﻧﺘﻬﻴﻨﺎ ﻣﻦ ﺃﻭﻝ ﺧﻄﻮﺓ ﻓﻲ ﺍﻟﺼﻔﺤﺔ‪ ،‬ﺍﳋﻄﻮﺓ ﺍﻟﻘﺎﺩﻣﺔ ﻫﻲ ﻛﺘﺎﺑﺔ ﻋﻨﻮﺍﻥ ﺍﻟﻘﻄﻌﺔ ‪Luke Howard‬‬

‫‪http://aouM150.wordpress.com‬‬ ‫ﺍﻟﺼﻔﺤﺔ ‪ 5‬ﻣﻦ ‪17‬‬ ‫إﻋﺪاد‪ :‬اﳌﻌﺘﺼﻢ‬

 ‫ﺍﻟﻌﻨﺎﻭﻳﻦ ﺗﻮﺟﺪ ﻟﻬﺎ ﺳﺖ ﻣﻘﺎﺳﺎﺕ ﺃﻭ ﺃﺣﺠﺎﻡ ‪ ،‬ﻭﺗﻜﺘﺐ ﺷﻔﺮﺗﻬﺎ ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬

‫>‪</h1‬ﻋﻨﻮﺍﻥ ﻛﺒﻴﺮ ﺟﺪﺍً>‪<h1‬‬

‫>‪</h2‬ﻋﻨﻮﺍﻥ ﻛﺒﻴﺮ>‪<h2‬‬
‫>‪</h3‬ﻋﻨﻮﺍﻥ ﻣﺘﻮﺳﻂ>‪<h3‬‬
‫>‪</h4‬ﻋﻨﻮﺍﻥ ﺃﺻﻐﺮ>‪<h4‬‬
‫>‪</h5‬ﻋﻨﻮﺍﻥ ﺻﻐﻴﺮ>‪<h5‬‬
‫>‪</h6‬ﻋﻨﻮﺍﻥ ﺻﻐﻴﺮ ﺟﺪﺍ>‪<h6‬‬

‫ﻛﻠﻤﺎ ﻛﺒﺮ ﺍﻟﺮﻗﻢ ﻛﻠﻤﺎ ﺻﻐﺮ ﺣﺠﻢ ﺍﻟﻌﻨﻮﺍﻥ ‪..‬‬

‫ﻓﻲ ﺣﺎﻟﺘﻨﺎ ﻫﺬﻩ ﺍﻟﻌﻨﻮﺍﻥ ﻛﺒﻴﺮ ﺟﺪﺍً ‪ ،‬ﻭﻟﺬﻟﻚ ﺳﻨﺴﺘﻌﻤﻞ ﺍﻟﺸﻔﺮﺓ ﺍﳋﺎﺻﺔ ﺑﻪ ﻟﺘﺼﺒﺢ ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬
‫>‪<h1>Luke Howard</h1‬‬

‫ﻭﻓﻲ ﻫﺬﻩ ﺍﳊﺎﻟﺔ ﺍﻟﻌﻨﻮﺍﻥ ﻣﺘﻮﺍﺟﺪ ﻋﻠﻰ ﺍﳉﻬﺔ ﺍﻟﻴﺴﺮﻯ ﻟﺬﻟﻚ ﻻﻧﺤﺘﺎﺝ ﺇﻟﻰ ﺷﻔﺮﺓ ﻟﺘﺤﺪﻳﺪ ﺍﳌﻜﺎﻥ ﻷﻥ ﺍﳌﻜﺎﻥ ﺍﻻﻓﺘﺮﺍﺿﻲ ﻫﻮ ﺍﻟﻴﺴﺎﺭ‪.‬‬
‫ﺍﻟﺸﻔﺮﺓ ﺍﻟﺴﺎﺑﻘﺔ ﻧﻀﻴﻔﻬﺎ ﺑﻌﺪ ﺷﻔﺮﺓ ﻋﺮﺽ ﺍﻟﺼﻮﺭﺓ‪ ،‬ﻷﻧﻨﺎ ﻟﻮ ﻭﺿﻌﻨﺎﻩ ﻗﺒﻠﻬﺎ ﺳﻴﻈﻬﺮ ﺍﻟﻌﻨﻮﺍﻥ ﻗﺒﻞ ﺍﻟﺼﻮﺭﺓ ﻭﻧﺤﻦ ﻻﻧﺮﻳﺪ ﺫﻟﻚ‪.‬‬
‫ﺳﻴﺼﺒﺢ ﻣﺎﻗﻤﻨﺎ ﺑﻌﻤﻠﻪ ﺣﺘﻰ ﺍﻵﻥ ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>My first web page!</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<center> <img src="aoua.jpg"> </center‬‬
‫>‪<h1>Luke Howard</h1‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫ﺍﻵﻥ ﻧﻨﺘﻘﻞ ﻟﻠﺨﻄﻮﺓ ﺍﻟﺘﺎﻟﻴﺔ ﻭﻫﻲ ﻛﺘﺎﺑﺔ ﺍﻟﻘﻄﻌﺔ ﺍﻟﻨﺼﻴﺔ ﺍﻟﺘﺎﻟﻴﺔ ﻭﺗﻨﺴﻴﻘﻬﺎ ﺣﺘﻰ ﺗﺼﺒﺢ ﻣﺸﺎﺑﻬﺔ ﻟﻠﺼﻮﺭﺓ ﺍﻟﺘﻲ ﻟﺪﻳﻨﺎ‪:‬‬
‫‪Luke Howard (1773-1864) was a British manufacturing chemist who was fascinated by‬‬
‫‪weather phenomena. He provided the basis of the system of classifying clouds which we‬‬
‫‪still use today, over 200 years later.‬‬

‫‪Howard gave three "modifications" of clouds‬‬

‫)‪* Cumulus (from the Latin for heap‬‬

‫)‪* Stratus (from the Latin for a layer‬‬
‫)‪* Cirrus (from the Latin for a curl‬‬

‫‪http://aouM150.wordpress.com‬‬ ‫ﺍﻟﺼﻔﺤﺔ ‪ 6‬ﻣﻦ ‪17‬‬ ‫إﻋﺪاد‪ :‬اﳌﻌﺘﺼﻢ‬

‫‪To these he added Nimbus, from the Latin for rain, to denote a rain or snow cloud.‬‬

‫‪Howard's scheme was first published in a paper he gave to the Askesian Society in 1802.‬‬

‫ﺗﻮﺟﺪ ﺃﻛﺜﺮ ﻣﻦ ﻃﺮﻳﻘﺔ ﻟﻜﺘﺎﺑﺔ ﺃﻱ ﺷﻔﺮﺓ ﺑﺮﻣﺠﻴﺔ ‪ ،‬ﻭﺫﻟﻚ ﻳﻌﺘﻤﺪ ﻋﻠﻰ ﻓﻜﺮ ﺍﳌﺒﺮﻣﺞ ﻭﺭﺅﻳﺘﻪ ﻟﻠﻤﺸﺮﻭﻉ ‪..‬‬
‫ﺳﺄﺷﺮﺡ ﻃﺮﻳﻘﺘﲔ ﺃﺭﻯ ﺑﺄﻧﻬﻢ ﺍﻷﻓﻀﻞ ﻟﻠﻤﺒﺘﺪﺋﲔ ﻟﺘﻄﺒﻴﻖ ﻫﺬﺍ ﺍﳌﺜﺎﻝ ﺣﺘﻰ ﻳﺴﺘﻮﻋﺒﻮﺍ ﺍﻟﻠﻐﺔ ﺃﻛﺜﺮ ﺇﻥ ﺷﺎﺀ ﺍﷲ‪:‬‬

‫ﺍﻟﻄﺮﻳﻘﺔ ﺍﻷﻭﻟﻰ‪:‬‬
‫ﺳﻨﻌﺘﺒﺮ ﺃﻥ ﺍﻟﻘﻄﻌﺔ ﺍﻟﻨﺼﻴﺔ ﲢﺘﻮﻱ ﻋﻠﻰ ﺧﻤﺲ ﺃﺟﺰﺍﺀ ﺗﻔﺼﻞ ﺑﻴﻨﻬﻢ ﺍﻟﺴﻄﻮﺭ ﺍﻟﻔﺎﺭﻏﺔ‪ ،‬ﲟﻌﻨﻰ ﺃﻥ ﻟﺪﻳﻨﺎ ﺃﺭﺑﻊ ﺃﺟﺰﺍﺀ ﻧﺼﻴﺔ ﻭﺟﺰﺀ‬
‫ﻳﺤﺘﻮﻱ ﻋﻠﻰ ﻗﺎﺋﻤﺔ‪.‬‬
‫ﺳﻨﻀﻊ ﻛﻞ ﺟﺰﺀ ﻧﺼﻲ ﺑﲔ ﺍﻟﺸﻔﺮﺍﺕ ﺍﻟﺪﺍﻟﺔ ﻋﻠﻰ ﻭﺟﻮﺩ ﻧﺺ ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬
‫>‪ </p‬ﺍﻟﻨﺺ ﺳﻴﻜﻮﻥ ﻫﻨﺎ >‪<p‬‬

‫ﺍﻟﻔﺎﺋﺪﺓ ﻣﻦ ﻭﺿﻊ ﻛﻞ ﺟﺰﺀ ﺑﲔ ﻋﻼﻣﺎﺕ ﺧﺎﺻﺔ ﺑﻪ ﻫﻮ ﺃﻥ ﺍﻟﻌﻼﻣﺎﺕ ﻫﺬﻩ ﺳﺘﻘﻮﻡ ﺑﻮﺿﻊ ﺳﻄﺮ ﻓﺎﺻﻞ ﻓﻴﻤﺎ ﺑﻴﻨﻬﺎ‪ ،‬ﻳﻌﻨﻲ ﻟﻮ ﻭﺿﻌﻨﺎ ﻣﺜﻼً‬
‫ﺃﻭﻝ ﺟﺰﺋﲔ ﻧﺼﻴﺔ ﻓﻲ ﻧﻔﺲ ﺍﻟﺸﻔﺮﺍﺕ ﻟﻦ ﻳﻜﻮﻥ ﺑﻴﻨﻬﻢ ﺳﻄﺮ ﻓﺎﺻﻞ‪.‬‬
‫ﻟﺬﻟﻚ ﺳﻴﺼﺒﺢ ﻋﻤﻠﻨﺎ ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬

‫‪<p>Luke Howard (1773-1864) was a British manufacturing chemist who was fascinated by‬‬
‫‪weather phenomena. He provided the basis of the system of classifying clouds which we‬‬
‫>‪still use today, over 200 years later.</p‬‬

‫>‪<p>Howard gave three "modifications" of clouds</p‬‬

‫)‪Cumulus (from the Latin for heap‬‬

‫)‪Stratus (from the Latin for a layer‬‬
‫)‪Cirrus (from the Latin for a curl‬‬

‫‪<p>To these he added Nimbus, from the Latin for rain, to denote a rain or snow‬‬
‫>‪cloud.</p‬‬

‫‪<p>Howard's scheme was first published in a paper he gave to the Askesian Society in‬‬
‫>‪1802. </p‬‬

‫ﻃﻴﺐ ﺍﻵﻥ ﻭﺿﻌﻨﺎ ﺍﻷﺟﺰﺍﺀ ﺍﻟﻨﺼﻴﺔ ﻓﻲ ﺷﻔﺮﺍﺗﻬﺎ ﻭﺗﺒﻘّﻰ ﻟﺪﻳﻨﺎ ﺍﻟﻘﺎﺋﻤﺔ‪ ،‬ﺍﻟﻘﻮﺍﺋﻢ ﻓﻲ ﻫﺬﻩ ﺍﻟﻠﻐﺔ ﺗﻨﻘﺴﻢ ﻟﻘﺴﻤﲔ; ﻗﻮﺍﺋﻢ ﻣﺮﺗﺒﺔ )ﺃﻭ ﻣﺮﻗﻤﺔ(‬
‫ﻭﻗﻮﺍﺋﻢ ﻋﺸﻮﺍﺋﻴﺔ )ﺃﻭ ﻏﻴﺮ ﻣﺮﺗﺒﺔ(‪:‬‬

‫‪http://aouM150.wordpress.com‬‬ ‫ﺍﻟﺼﻔﺤﺔ ‪ 7‬ﻣﻦ ‪17‬‬ ‫إﻋﺪاد‪ :‬اﳌﻌﺘﺼﻢ‬

 . Ordered List ‫ ﻭﻫﻲ ﺍﺧﺘﺼﺎﺭ ﻟـ‬، <ol> ‫ ﺍﻟﻘﻮﺍﺋﻢ ﺍﳌﺮﺗﺒﺔ ﺷﻔﺮﺗﻬﺎ ﻫﻲ‬.1
. Unordered List ‫ ﻭﻫﻲ ﺍﺧﺘﺼﺎﺭ ﻟـ‬، <ul> ‫ﺍﻟﻘﻮﺍﺋﻢ ﺍﻟﻐﻴﺮ ﻣﺮﺗﺒﺔ ﺷﻔﺮﺗﻬﺎ‬ ●

:‫ ﻟﺬﻟﻚ ﻧﻀﻊ ﺍﻟﺸﻔﺮﺍﺕ ﺣﻮﻝ ﺍﻟﻘﺎﺋﻤﺔ ﺍﳌﻮﺟﻮﺩﺓ ﻟﺪﻳﻨﺎ‬، ‫ﻓﻲ ﺣﺎﻟﺘﻨﺎ ﻫﺬﻩ ﻧﺮﻳﺪ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﻘﻮﺍﺋﻢ ﺍﻟﻐﻴﺮ ﻣﺮﺗﺒﺔ‬

<ul>
Cumulus (from the Latin for heap)
Stratus (from the Latin for a layer)
Cirrus (from the Latin for a curl)
</ul>
‫ ﺣﺘﻰ ﳝﻴﺰ ﺍﻟﺒﺮﻧﺎﻣﺞ ﻛﻢ ﻋﻨﺼﺮ‬، <li> ‫ ﻷﻧﻪ ﻳﺠﺐ ﻋﻠﻴﻨﺎ ﲢﺪﻳﺪ ﻛﻞ ﻋﻨﺼﺮ ﻓﻲ ﺍﻟﻘﺎﺋﻤﺔ ﺑﺸﻔﺮﺓ‬، ‫ﻣﺎ ﻗﻤﻨﺎ ﺑﻪ ﻻﻳﻜﻔﻲ ﻟﻌﺮﺽ ﺍﻟﻘﻮﺍﺋﻢ‬
:‫ ﻟﺬﻟﻚ ﺳﻨﻘﻮﻡ ﺑﻮﺿﻊ ﺷﻔﺮﺓ ﻋﻨﺎﺻﺮ ﺍﻟﻘﺎﺋﻤﺔ ﻋﻠﻰ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻟﺜﻼﺛﺔ ﺍﳌﻮﺟﻮﺩﺓ ﻟﺪﻳﻨﺎ ﻟﺘﺼﺒﺢ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﻟﻲ‬، ‫ﻳﻮﺟﺪ ﻓﻲ ﻫﺬﻩ ﺍﻟﻘﺎﺋﻤﺔ‬

<ul>
<li>Cumulus (from the Latin for heap)</li>
<li>Stratus (from the Latin for a layer)</li>
<li>Cirrus (from the Latin for a curl)</li>
</ul>

:‫ﺍﺫﺍ ﺟﻤﻌﻨﺎ ﻣﺎﻗﻤﻨﺎ ﺑﻪ ﺣﺘﻰ ﺍﻵﻥ ﺳﻨﺤﺼﻞ ﻋﻠﻰ ﺍﻟﺘﺎﻟﻲ‬

<html>
<head>
<title>My first web page!</title>
</head>
<body>
<center> <img src="aoua.jpg"> </center>
<h1>Luke Howard</h1>
<p>Luke Howard (1773-1864) was a British manufacturing chemist who was
fascinated by weather phenomena. He provided the basis of the system of classifying
clouds which we still use today, over 200 years later.</p>

<p>Howard gave three "modifications" of clouds</p>

<ul>
<li>Cumulus (from the Latin for heap)</li>
<li>Stratus (from the Latin for a layer)</li>
<li>Cirrus (from the Latin for a curl)</li>
</ul>

<p>To these he added Nimbus, from the Latin for rain, to denote a rain or
snow cloud.</p>

<p>Howard's scheme was first published in a paper he gave to the Askesian

Society in 1802. </p>
</body>
</html>

http://aouM150.wordpress.com 17 ‫ ﻣﻦ‬8 ‫ﺍﻟﺼﻔﺤﺔ‬ ‫ اﳌﻌﺘﺼﻢ‬:‫إﻋﺪاد‬

 ‫ﺍﻟﻄﺮﻳﻘﺔ ﺍﻟﺜﺎﻧﻴﺔ‪:‬‬
‫ﻫﻲ ﺃﻥ ﻧﻀﻊ ﻛﻞ ﺍﻟﻜﻼﻡ ﺍﳌﻮﺟﻮﺩ ﻓﻲ ﺍﻟﺼﻮﺭﺓ ﻓﻲ ﺩﺍﺧﻞ ﺷﻔﺮﺓ >‪ <p‬ﻭﺍﺣﺪﺓ‪ ،‬ﻭﻋﻨﺪ ﺍﻟﺮﻏﺒﺔ ﻓﻲ ﻧﺰﻭﻝ ﺳﻄﺮ ﻧﺴﺘﻌﻤﻞ ﺷﻔﺮﺓ >‪، <br‬‬
‫ﻫﺬﻩ ﺍﻟﺸﻔﺮﺓ ﻣﻬﻤﺘﻬﺎ ﻫﻲ ﻣﺜﻞ ﺃﻣﺮ ﺇﻧﺘﺮ ﻓﻲ ﺑﺮﻧﺎﻣﺞ ﲢﺮﻳﺮ ﺍﻟﻨﺼﻮﺹ ‪ ،‬ﻳﻌﻨﻲ ﺳﺘﺠﻌﻞ ﺍﻟﻨﺺ ﻳﻨﺰﻝ ﻟﺴﻄﺮ ﺟﺪﻳﺪ‪.‬‬

‫ﻟﻮ ﻗﻤﻨﺎ ﺍﻵﻥ ﺑﺤﻔﻆ ﺍﳌﻠﻒ ﻭﺛﻢ ﻓﺘﺤﻨﺎﻩ ﲟﺘﺼﻔﺢ ﺍﻧﺘﺮﻧﺖ ﺳﻨﺤﺼﻞ ﻋﻠﻰ ﺍﻟﻨﺘﻴﺠﺔ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫ﺍﻵﻥ ﺗﻘﺮﻳﺒﺎً ﻗﻄﻌﻨﺎ ﺛﻠﺜﻲ ﺍﳌﺸﻮﺍﺭ ﻭﺗﺒﻘﺎ ﺍﻟﺜﻠﺚ‪ .‬ﺗﺒﻘﻰ ﺃﻥ ﻧﻘﻮﻡ ﺑﺎﻟﻌﻤﻠﻴﺎﺕ ﺍﻟﺘﻨﺴﻴﻘﻴﺔ ﺍﻟﺘﺎﻟﻴﺔ ﺣﺘﻰ ﳒﻌﻞ ﻋﻤﻠﻨﺎ ﻳﺘﻄﺎﺑﻖ ﻣﻊ ﺍﻟﺼﻮﺭﺓ‬
‫ﺍﻷﻭﻟﻰ‪:‬‬
‫ﺗﻐﻴﻴﺮ ﻧﻮﻉ ﺍﳋﻂ ﻟـ ‪ Luke Howard‬ﺍﳌﻮﺟﻮﺩﺓ ﻓﻲ ﺍﻟﻘﻄﻌﺔ ﺍﻷﻭﻟﻰ ﻟﺘﻜﻮﻥ ﺑﺎﳋﻂ ﺍﻟﺴﻤﻴﻚ‪.‬‬ ‫‪.1‬‬
‫ﺗﻐﻴﻴﺮ ﻧﻮﻉ ﺧﻂ ﺍﻷﺭﻗﺎﻡ )‪ (1773 – 1864‬ﺍﳌﻮﺟﻮﺩﺓ ﻓﻲ ﺍﻟﻘﻄﻌﺔ ﺍﻷﻭﻟﻰ ﻟﺘﺼﺒﺢ ﺑﺎﳋﻂ ﺍﳌﺎﺋﻞ‪.‬‬ ‫‪.2‬‬
‫ﺗﻐﻴﻴﺮ ﻧﻮﻉ ﺍﳋﻂ ﻟﻜﻠﻤﺔ ‪ modifications‬ﺍﳌﻮﺟﻮﺩﺓ ﻓﻲ ﺍﻟﻘﻄﻌﺔ ﺍﻟﺜﺎﻧﻴﺔ ﻟﺘﺼﺒﺢ ﺑﺎﳋﻂ ﺍﻟﺴﻤﻴﻚ‪.‬‬ ‫‪.3‬‬
‫ﺇﺿﺎﻓﺔ ﺭﺍﺑﻂ ﻟﺼﻔﺤﺔ ﺍﻧﺘﺮﻧﺖ ﺃﺧﺮﻯ ﻋﻠﻰ ﻛﻠﻤﺎﺕ ‪ Askesian Society‬ﺍﳌﻮﺟﻮﺩﺓ ﻓﻲ ﺍﻟﻘﻄﻌﺔ ﺍﻷﺧﻴﺮﺓ‪.‬‬ ‫‪.4‬‬

‫ﻧﺒﺪﺃ ﺑﺎﻟﻌﻤﻠﻴﺔ ﺍﻷﻭﻟﻰ‪ ،‬ﻭﳉﻌﻞ ﻧﻮﻉ ﺍﳋﻂ ﻳﻜﻮﻥ ﺑﺎﳋﻂ ﺍﻟﺴﻤﻴﻚ ﻧﺴﺘﻌﻤﻞ ﺍﻟﺸﻔﺮﺓ >‪ <b‬ﺍﺧﺘﺼﺎﺭﺍً ﻟﻜﻠﻤﺔ ‪.bold‬‬
‫ﻟﺬﻟﻚ ﻧﻀﻴﻔﻬﺎ ﻋﻠﻰ ﺍﻟﻜﻠﻤﺎﺕ ﻟﺘﺼﺒﺢ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﻟﻲ‪:‬‬

‫‪http://aouM150.wordpress.com‬‬ ‫ﺍﻟﺼﻔﺤﺔ ‪ 9‬ﻣﻦ ‪17‬‬ ‫إﻋﺪاد‪ :‬اﳌﻌﺘﺼﻢ‬

 ‫>‪<b>Luke Howard</b‬‬
‫ﻃﺒﻌﺎً ﺍﻟﻜﻠﻤﺘﲔ ﻣﻮﺟﻮﺩﻳﻦ ﻓﻲ ﻣﻜﺎﻧﻬﻢ ﺑﲔ ﺷﻔﺮﺗﻬﻢ ﺍﻷﺳﺎﺳﻴﺔ >‪ ، <p‬ﻭﺃﺿﻔﻨﺎ ﻗﺒﻠﻬﻢ ﻭﺑﻌﺪﻫﻢ ﺷﻔﺮﺍﺕ ﳉﻌﻞ ﺍﳋﻂ ﺳﻤﻴﻚ‪.‬‬

‫ﺍﻟﻌﻤﻠﻴﺔ ﺍﻟﺜﺎﻧﻴﺔ ﺑﻨﻔﺲ ﺍﻟﻄﺮﻳﻘﺔ‪ ،‬ﻭﺷﻔﺮﺓ ﺗﻐﻴﻴﺮ ﺍﳋﻂ ﻟﻴﺼﺒﺢ ﻣﺎﺋﻞ ﻫﻲ >‪ <i‬ﺍﺧﺘﺼﺎﺭﺍً ﻟﻜﻠﻤﺔ ‪.italic‬‬
‫ﻧﻀﻴﻔﻬﺎ ﻋﻠﻰ ﺍﻷﺭﻗﺎﻡ ﻟﺘﺼﺒﺢ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﻟﻲ‪:‬‬
‫>‪<i> (1773–1864) </i‬‬

‫ﺍﻟﻌﻤﻠﻴﺔ ﺍﻟﺜﺎﻟﺜﺔ ﻫﻲ ﻧﻔﺲ ﺍﻷﻭﻟﻰ‪ ،‬ﻓﻴﺼﺒﺢ ﻟﺪﻳﻨﺎ‪:‬‬

‫>‪<b>modifications</b‬‬

‫ﺍﻟﻌﻤﻠﻴﺔ ﺍﻟﺮﺍﺑﻌﺔ ﻫﻲ ﺷﺒﻴﻬﻪ ﺟﺪﺍً ﺑﻌﻤﻠﻴﺔ ﻋﺮﺽ ﺻﻮﺭﺓ ﻓﻲ ﺍﻟﺼﻔﺤﺔ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﺮﻭﺍﺑﻂ ﺍﳌﺤﻠﻴﺔ ﻭﺍﳋﺎﺭﺟﻴﺔ ﻟﺬﻟﻚ ﻟﻦ ﺃﻋﻴﺪ ﺷﺮﺡ ﻫﺬﻩ‬
‫ﺍﻟﻨﻘﻄﺔ‪ ،‬ﻭﻟﻮﺿﻊ ﺭﺍﺑﻂ ﻋﻠﻰ ﻛﻼﻡ ﻣﻌﲔ ﻓﻲ ﺍﻟﺼﻔﺤﺔ ﻧﺴﺘﺨﺪﻡ ﺍﻟﺸﻔﺮﺓ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬
‫>‪ </a‬ﺍﻟﻜﻼﻡ ﺍﻟﺬﻱ ﻧﺮﻏﺐ ﺃﻥ ﻧﻀﻊ ﻋﻠﻴﻪ ﺭﺍﺑﻄﺎً ﻟﺼﻔﺤﺔ ﺍﻧﺘﺮﻧﺖ ﺃﺧﺮﻯ >"‪<a href="...‬‬

‫ﻣﻜﺎﻥ ﺍﻟﻨﻘﻂ ﺍﳊﻤﺮﺍﺀ ﻧﻀﻊ ﺍﻟﺮﺍﺑﻂ ﺍﻟﺬﻱ ﻧﺮﻳﺪ )ﺑﲔ ﻋﻼﻣﺎﺕ ﺍﻟﺘﻨﺼﻴﺺ( ‪ ،‬ﻭﻓﻲ ﻣﻜﺎﻥ ﺍﻟﻜﺘﺎﺑﺔ ﺍﳌﻠﻮﻧﺔ ﺑﺎﻷﺣﻤﺮ ﻳﻜﻮﻥ ﺍﻟﻜﻼﻡ ﺍﻟﺬﻱ ﻧﺮﻳﺪ‬
‫ﺃﻥ ﻧﻀﻴﻒ ﺇﻟﻴﻪ ﺭﺍﺑﻂ ﻟﺼﻔﺤﺔ ﺍﻧﺘﺮﻧﺖ ﺃﺧﺮﻯ‪ ،‬ﻭﺳﻨﻌﺘﺒﺮ ﻓﻲ ﺣﺎﻟﺘﻨﺎ ﻫﺬﻩ ﺑﺄﻥ ﺍﻟﺮﺍﺑﻂ ﺍﻟﺬﻱ ﺳﻨﺘﺴﺘﺨﺪﻣﻪ ﺭﺍﺑﻂ ﻣﺤﻠﻲ ﻣﻮﺟﻮﺩ ﻓﻲ ﻧﻔﺲ‬
‫ﺍﳌﺠﻠﺪ ﺍﻟﺬﻱ ﺗﻮﺟﺪ ﻓﻴﻪ ﺍﻟﺼﻔﺤﺔ ﺍﻟﺘﻲ ﻧﻘﻮﻡ ﺑﺘﺼﻤﻴﻤﻬﺎ ﺣﺎﻟﻴﺎً ﺑﺎﺳﻢ ‪ ، Askesian.html‬ﻟﺬﻟﻚ ﺳﺘﺼﺒﺢ ﻟﺪﻳﻨﺎ ﺍﻟﺸﻔﺮﺓ ﺍﻵﺗﻴﺔ‪:‬‬

‫>‪<a href="Askesian.html">Askesian Society</a‬‬

‫ﺍﻵﻥ ﺍﻧﺘﻬﻴﻨﺎ ﻣﻦ ﺗﻨﺴﻴﻖ ﺍﻟﻨﺺ‪ ،‬ﻭﺍﻟﻨﺘﻴﺠﺔ ﺍﻟﻜﺎﻣﻠﺔ ﳌﺎ ﻗﻤﻨﺎ ﺑﻪ ﻫﻲ‪:‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title> My first web page! </title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<center> <img src="aoua.jpg"> </center‬‬
‫>‪<h1>Luke Howard</h1‬‬
‫‪<p><b>Luke Howard</b> <i>(1773-1864)</i> was a British‬‬
‫‪manufacturing chemist who was fascinated by weather phenomena. He provided the basis‬‬
‫>‪of the system of classifying clouds which we still use today, over 200 years later.</p‬‬

‫>‪<p>Howard gave three "<b>modifications</b>" of clouds</p‬‬

‫‪http://aouM150.wordpress.com‬‬ ‫ﺍﻟﺼﻔﺤﺔ ‪ 10‬ﻣﻦ ‪17‬‬ ‫إﻋﺪاد‪ :‬اﳌﻌﺘﺼﻢ‬

 <ul>
<li>Cumulus (from the Latin for heap)</li>
<li>Stratus (from the Latin for a layer)</li>
<li>Cirrus (from the Latin for a curl)</li>
</ul>

<p>To these he added Nimbus, from the Latin for rain, to denote a rain or
snow cloud.</p>

<p>Howard's scheme was first published in a paper he gave to the <a

href="Askesian.html">Askesian Society</a> in 1802. </p>
</body>
</html>
‫ ﻭﺛﻢ ﻗﻤﻨﺎ ﺑﻔﺘﺢ ﺍﳌﻠﻒ ﻋﻦ ﻃﺮﻳﻖ ﻣﺘﺼﻔﺢ ﺍﻻﻧﺘﺮﻧﺖ‬، ‫ ﻋﻠﻰ ﺳﺒﻴﻞ ﺍﳌﺜﺎﻝ‬first_web_page.html ‫ﻭﻟﻮ ﻗﻤﻨﺎ ﺍﻵﻥ ﺑﺤﻔﻆ ﺍﳌﻠﻒ ﺑﺎﺳﻢ‬
:‫ﺳﻨﺤﺼﻞ ﻋﻠﻰ ﻫﺬﻩ ﺍﻟﻨﺘﻴﺠﺔ‬

http://aouM150.wordpress.com 17 ‫ ﻣﻦ‬11 ‫ﺍﻟﺼﻔﺤﺔ‬ ‫ اﳌﻌﺘﺼﻢ‬:‫إﻋﺪاد‬

 .‫ ﻭﺑﻬﺬﺍ ﻧﻜﻮﻥ ﺍﻧﺘﻬﻴﻨﺎ ﻣﻦ ﻋﻤﻞ ﺃﻭﻝ ﺻﻔﺤﺔ ﺍﻧﺘﺮﻧﺖ ﻓﻲ ﻣﺴﻴﺮﺗﻨﺎ‬،‫ﻭﻫﻲ ﻧﻔﺲ ﺍﻟﻨﺘﻴﺠﺔ ﺍﳌﻄﻠﻮﺏ ﲢﻘﻴﻘﻬﺎ ﻓﻲ ﺳﺆﺍﻝ ﺍﻟﻮﺍﺟﺐ‬
:‫ﺃﺣﺐ ﺃﻥ ﺃﺫﻛﺮ ﻫﻨﺎ ﺑﺄﻥ ﺗﻨﺴﻴﻖ ﻛﺘﺎﺑﺔ ﺍﻟﺸﻔﺮﺍﺕ ﻷﻱ ﻟﻐﺔ ﺑﺮﻣﺠﺔ ﺷﻲﺀ ﺿﺮﻭﺭﻱ ﺟﺪﺍً ﻟﺴﺒﺒﲔ‬
.(‫ ﻷﻧﻬﺎ ﲡﻌﻞ ﻗﺮﺍﺀﺓ ﺍﻟﺸﻔﺮﺍﺕ ﺃﺳﻬﻞ ﺑﻜﺜﻴﺮ ﳌﻦ ﺃﺭﺍﺩ ﺍﻻﻃﻼﻉ ﻋﻠﻴﻬﺎ )ﻛﺎﳌﺪﺭﺱ‬.1
.‫ ﻷﻧﻬﺎ ﺗﺴﻬﻞ ﻋﻠﻴﻨﺎ ﺗﺼﺤﻴﺢ ﺍﻷﺧﻄﺎﺀ ﺇﺫﺍ ﺣﺪﺛﺖ ﺃﻭ ﺗﻄﻮﻳﺮ ﺍﻟﺸﻔﺮﺍﺕ ﻓﻴﻤﺎ ﺑﻌﺪ‬.2

:‫ ﺍﻧﻈﺮ ﻟﻬﺬﻩ ﺍﻷﻛﻮﺍﺩ‬، ‫ﻋﻠﻰ ﺳﺒﻴﻞ ﺍﳌﺜﺎﻝ‬

<html><head><title> My first web page! </title></head><body><center>
<img src="aoua.jpg"> </center><h1>Luke Howard</h1><p><b>Luke
Howard</b> <i>(1773-1864)</i> was a British manufacturing chemist who was
fascinated by weather phenomena. He provided the basis of the system of classifying
clouds which we still use today, over 200 years later.</p><p>Howard gave three
"<b>modifications</b>" of clouds</p><ul><li>Cumulus (from the Latin for
heap)</li><li>Stratus (from the Latin for a layer)</li><li>Cirrus (from the Latin for a
curl)</li></ul><p>To these he added Nimbus, from the Latin for rain, to denote a rain
or snow cloud.</p><p>Howard's scheme was first published in a paper he gave to the <a
href="Askesian.html">Askesian Society</a> in 1802. </p></body></html>

:‫ﻭﺍﻧﻈﺮ ﻟﻬﺬﻩ ﺍﻷﻛﻮﺍﺩ‬

<html>
<head>
<title> My first web page! </title>
</head>
<body>
<center> <img src="aoua.jpg"> </center>
<h1>Luke Howard</h1>
<p><b>Luke Howard</b> <i>(1773-1864)</i> was a British
manufacturing chemist who was fascinated by weather phenomena. He provided the basis
of the system of classifying clouds which we still use today, over 200 years later.</p>

<p>Howard gave three "<b>modifications</b>" of clouds</p>

<ul>
<li>Cumulus (from the Latin for heap)</li>
<li>Stratus (from the Latin for a layer)</li>
<li>Cirrus (from the Latin for a curl)</li>
</ul>

<p>To these he added Nimbus, from the Latin for rain, to denote a rain or
snow cloud.</p>

<p>Howard's scheme was first published in a paper he gave to the <a

href="Askesian.html">Askesian Society</a> in 1802. </p>
</body>
</html>

http://aouM150.wordpress.com 17 ‫ ﻣﻦ‬12 ‫ﺍﻟﺼﻔﺤﺔ‬ ‫ اﳌﻌﺘﺼﻢ‬:‫إﻋﺪاد‬

 ‫ﺃﻱ ﺍﻻﺛﻨﲔ ﺃﺭﻳﺢ ﻟﻠﻌﲔ ﻭﺃﺳﻬﻞ ﻟﻠﻘﺮﺍﺀﺓ ﻭﺍﻟﻔﻬﻢ؟‬
‫ﺑﺎﻟﺘﺄﻛﻴﺪ ﺍﻟﺜﺎﻧﻲ ﻷﻧﻪ ﻣﻨﺴﻖ ﺑﺸﻜﻞ ﻭﺍﺿﺢ ‪ ،‬ﻣﻊ ﺍﻟﻌﻠﻢ ﺑﺄﻥ ﻛﻞ ﺍﻟﺸﻔﺮﺗﲔ ﺳﻴﻌﺮﺿﻮﻥ ﻧﻔﺲ ﺍﻟﻨﺘﻴﺠﺔ ﺑﺎﻟﻀﺒﻂ! ﻷﻧﻲ ﻛﻤﺎ ﺫﻛﺮﺕ ﺳﺎﺑﻘﺎً‪:‬‬
‫ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺯﺭ ﺇﻧﺘﺮ ﺃﻭ ﻣﺴﺎﻓﺔ ﺃﻭ ﺣﺘﻰ ﺍﺳﺘﺨﺪﺍﻡ ﺯﺭ ‪ tabs‬ﻻ ﻳﺆﺛﺮ ﻋﻠﻰ ﺍﻟﻨﺘﻴﺠﺔ ﺍﻟﻨﻬﺎﺋﻴﺔ ﻟﻠﻌﻤﻞ‪.‬‬
‫ﻭﻟﻠﺘﻨﺴﻴﻖ ﺃﻧﺼﺢ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺯﺭ ‪ Tabs‬ﻟﺰﻳﺎﺩﺓ ﻭﺍﻧﻘﺎﺹ ﺍﳌﺤﺎﺫﺍﺓ ﺑﲔ ﺍﻟﺸﻔﺮﺍﺕ ﻭﺍﳉﻬﺔ ﺍﻟﻴﺴﺮﻯ ﺑﺪ ًﻻ ﻣﻦ ﺯﺭ ﺍﳌﺴﺎﻓﺔ‪.‬‬

‫‪http://aouM150.wordpress.com‬‬ ‫ﺍﻟﺼﻔﺤﺔ ‪ 13‬ﻣﻦ ‪17‬‬ ‫إﻋﺪاد‪ :‬اﳌﻌﺘﺼﻢ‬

 ‫‪ -3‬ﻣﻠﺨﺺ ﻷﻫﻢ ﺍﻟﺸﻔﺮﺍﺕ ﺍﳌﺴﺘﺨﺪﻣﺔ ﻓﻲ ﻟﻐﺔ ‪HTML‬‬
‫ﺍﺳﻢ ﺍﻟﻜﻮﺩ‬ ‫ﺍﻟﻜﻮﺩ‬ ‫ﺍﺳﺘﺨﺪﺍﻣﻪ‬ ‫ﻛﻮﺩ ﺍﻹﻏﻼﻕ‬
‫‪Header 1‬‬ ‫>‪<h1‬‬ ‫ﻋﻨﻮﺍﻥ ﻛﺒﻴﺮ ﺟﺪﺍ‬ ‫>‪</h1‬‬
‫‪Header 2‬‬ ‫>‪<h2‬‬ ‫ﻋﻨﻮﺍﻥ ﻛﺒﻴﺮ‬ ‫>‪</h2‬‬
‫‪Header 3‬‬ ‫>‪<h3‬‬ ‫ﻋﻨﻮﺍﻥ ﻣﺘﻮﺳﻂ‬ ‫>‪</h3‬‬
‫‪Header 4‬‬ ‫>‪<h4‬‬ ‫ﻋﻨﻮﺍﻥ ﻣﺘﻮﺳﻂ ﺃﺻﻐﺮ ﻣﻦ ﺍﻟﺴﺎﺑﻖ‬ ‫>‪</h4‬‬
‫‪Header 5‬‬ ‫>‪<h5‬‬ ‫ﻋﻨﻮﺍﻥ ﺻﻐﻴﺮ‬ ‫>‪</h5‬‬
‫‪Header 6‬‬ ‫>‪<h6‬‬ ‫ﻋﻨﻮﺍﻥ ﺻﻐﻴﺮ ﺟﺪﺍً‬ ‫>‪</h6‬‬
‫‪Paragraph‬‬ ‫>‪<p‬‬ ‫ﻟﻌﺮﺽ ﺍﻟﻘﻄﻊ ﺍﻟﻨﺼﻴﱠﺔ‬ ‫>‪</p‬‬
‫‪Bold‬‬ ‫>‪<b‬‬ ‫ﳉﻌﻞ ﺍﳋﻂ ﺳﻤﻴﻚ‬ ‫>‪</b‬‬
‫‪Italic‬‬ ‫>‪<i‬‬ ‫‪like this‬ﳉﻌﻞ ﺍﳋﻂ ﻣﺎﺋﻞ‬ ‫>‪</i‬‬
‫‪Ordered List‬‬ ‫>‪<ol‬‬ ‫ﻟﻌﻤﻞ ﻗﻮﺍﺋﻢ ﻣﺮﺗﺒﺔ ﻭﻣﺮﻗﻤﺔ‬ ‫>‪</ol‬‬
‫‪Unordered List‬‬ ‫>‪<ul‬‬ ‫ﻟﻌﻤﻞ ﻗﻮﺍﺋﻢ ﻏﻴﺮ ﻣﺮﺗﺒﺔ‬ ‫>‪</ul‬‬
‫‪List Item‬‬ ‫>‪<li‬‬ ‫ﻟﺘﺤﺪﻳﺪ ﻛﻞ ﻋﻨﺼﺮ ﻓﻲ ﺍﻟﻘﺎﺋﻤﺔ‬ ‫>‪</li‬‬
‫‪Image Source‬‬ ‫>"‪<img src="picture.jpg‬‬ ‫ﻟﻌﺮﺽ ﺻﻮﺭﺓ ﻓﻲ ﺍﻟﺼﻔﺤﺔ‬ ‫ﻻﻳﻮﺟﺪ‬
‫‪HyperText‬‬ ‫ﻟﻮﺿﻊ ﺭﺍﺑﻂ ﻋﻠﻰ ﻛﻼﻡ ﻣﺤﺪﺩ‪ ،‬ﻧﻜﺘﺐ ﺍﻟﻜﻼﻡ‬
‫>"‪<a href="webpage.html‬‬ ‫>‪</a‬‬
‫‪Reference‬‬ ‫ﺑﲔ ﺷﻔﺮﺗﻲ ﺍﻟﺒﺪﺍﻳﺔ ﻭﺍﻟﻨﻬﺎﻳﺔ‬
‫ﻟﻮﺿﻊ ﻋﻼﻣﺔ ﻋﻠﻰ ﺃﺣﺪ ﺍﻟﻜﻠﻤﺎﺕ ﻓﻲ‬
‫‪Name‬‬ ‫>"‪<a name="...‬‬ ‫>‪</a‬‬
‫ﺍﻟﺼﻔﺤﺔ‬
‫‪HyperText‬‬
‫>"‪<a href="#...‬‬ ‫ﻟﻼﻧﺘﻘﺎﻝ ﺇﻟﻰ ﻋﻼﻣﺔ ﻓﻲ ﻧﻔﺲ ﺍﻟﺼﻔﺤﺔ‬ ‫>‪</a‬‬
‫‪Reference‬‬
‫‪Center‬‬ ‫>‪<center‬‬ ‫ﻟﺘﻮﺳﻴﻂ ﺍﻟﻨﺺ ﺃﻭ ﺍﻟﺼﻮﺭﺓ ﺃﻭ ﻏﻴﺮﻩ‬ ‫>‪</center‬‬
‫ﻟﺘﻮﺟﻴﻪ ﺍﻟﻨﺺ ﺃﻭ ﺍﻟﺼﻮﺭﺓ ﺇﻟﻰ ﳝﲔ‬
‫‪Right‬‬ ‫>‪<right‬‬ ‫>‪</right‬‬
‫ﺍﻟﺼﻔﺤﺔ‬
‫ﻟﺘﻮﺟﻴﻪ ﺍﻟﻨﺺ ﺃﻭ ﺍﻟﺼﻮﺭﺓ ﺇﻟﻰ ﻳﺴﺎﺭ‬
‫‪Left‬‬ ‫>‪<left‬‬ ‫>‪</left‬‬
‫ﺍﻟﺼﻔﺤﺔ‬
‫ﻟﻠﻨﺰﻭﻝ ﻓﻲ ﺍﻟﺼﻔﺤﺔ ﲟﻘﺪﺍﺭ ﺳﻄﺮ‪ ،‬ﻣﺜﻞ‬
‫‪Break‬‬ ‫>‪<br‬‬ ‫ﻋﻤﻞ ﺯﺭ ﺍﻹﺩﺧﺎﻝ ﺃﻭ ﺇﻧﺘﺮ ﻓﻲ ﺑﺮﺍﻣﺞ ﲢﺮﻳﺮ‬ ‫ﻻ ﻳﻮﺟﺪ‬
‫ﺍﻟﻨﺼﻮﺹ‬

‫ﺍﻟﺸﻔﺮﺗﲔ ﺍﳌﻠﻮﻧﺘﲔ ﺑﺎﻷﺧﻀﺮ ﻣﺮﺗﺒﻄﺘﲔ ﺑﺒﻌﺾ ﻭﺳﺄﺫﻛﺮ ﻃﺮﻳﻘﺔ ﻋﻤﻠﻬﻢ ﺑﺎﺧﺘﺼﺎﺭ‪..‬‬

‫ﻓﻲ ﺑﻌﺾ ﺻﻔﺤﺎﺕ ﺍﻻﻧﺘﺮﻧﺖ ‪ ،‬ﺗﻜﻮﻥ ﺍﻟﺼﻔﺤﺔ ﻃﻮﻳﻠﺔ ﺟﺪﺍً ﻭﲢﺘﻮﻱ ﻋﻠﻰ ﻋﺪﺓ ﻋﻨﺎﻭﻳﻦ ﻭﻧﻘﺎﻁ‪ ،‬ﻟﻠﺘﺴﻬﻴﻞ ﻋﻠﻰ ﺍﻟﻘﺎﺭﺉ ﻳﻔﻀﻞ ﻭﺿﻊ ﻗﺎﺋﻤﺔ‬
‫ﺑﺎﳌﺤﺘﻮﻳﺎﺕ ﻓﻲ ﺃﻋﻠﻰ ﺍﻟﺼﻔﺤﺔ ﻭﻓﻲ ﺣﺎﻟﺔ ﺍﻟﻀﻐﻂ ﻋﻠﻰ ﺃﺣﺪ ﺍﻟﻌﻨﺎﻭﻳﻦ ﺍﳌﻮﺟﻮﺩﺓ ﻓﻲ ﺍﻟﻘﺎﺋﻤﺔ ﺳﻴﻨﺰﻝ ﺍﳌﺘﺼﻔﺢ ﻣﺒﺎﺷﺮﺓ ﺇﻟﻰ ﺍﻟﻌﻨﻮﺍﻥ ﺍﻟﺬﻱ‬

‫‪http://aouM150.wordpress.com‬‬ ‫ﺍﻟﺼﻔﺤﺔ ‪ 14‬ﻣﻦ ‪17‬‬ ‫إﻋﺪاد‪ :‬اﳌﻌﺘﺼﻢ‬

 ‫ﺿﻐﻄﻨﺎ ﻋﻠﻴﻪ‪ .‬ﻟﺮﺅﻳﺔ ﻣﺜﺎﻝ ﻣﺒﺎﺷﺮ ﻋﻠﻰ ﻫﺬﻩ ﺍﻟﻄﺮﻳﻘﺔ ﺯﻭﺭﻭﺍ ﻫﺬﺍ ﺍﻟﺮﺍﺑﻂ‪:‬‬
‫‪http://aoum150.wordpress.com/2009/08/08/javascript_lesson‬‬
‫ﻟﻮ ﺃﺧﺬﻧﺎ ﻋﻨﻮﺍﻥ ﺍﳌﻘﺪﻣﺔ ﻛﻤﺜﺎﻝ ‪ ،‬ﻓﺄﻧﺎ ﺫﻫﺒﺖ ﺇﻟﻰ ﻋﻨﻮﺍﻥ "ﺍﳌﻘﺪﻣﺔ" – ﻭﻟﻴﺴﺖ ﺍﻟﻜﻠﻤﺔ ﺍﳌﻮﺟﻮﺩﺓ ﻓﻲ ﻗﺎﺋﻤﺔ ﺍﳌﺤﺘﻮﻳﺎﺕ – ﻭﻭﺿﻌﺖ ﻋﻠﻴﻬﺎ‬
‫ﻋﻼﻣﺔ ﺑﺎﺳﻢ ‪ ، introduction‬ﻓﺄﺻﺒﺢ ﺍﻟﻜﻮﺩ ﺍﳋﺎﺹ ﺑﻬﺎ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ‪:‬‬
‫>‪</a‬ﺍﳌﻘﺪﻣﺔ>"‪<a name="introduction‬‬
‫ﺍﻵﻥ ﺍﻧﺘﻬﻴﺖ ﻣﻦ ﺍﳋﻄﻮﺓ ﺍﻷﻭﻟﻰ ﻭﻫﻲ ﻭﺿﻊ ﻋﻼﻣﺔ ﻓﻲ ﺍﳌﻜﺎﻥ ﺍﻟﺬﻱ ﺃﺭﻳﺪ ﺃﻥ ﺃﻧﺘﻘﻞ ﺇﻟﻴﻪ‪ .‬ﺍﳋﻄﻮﺓ ﺍﻟﺘﺎﻟﻴﺔ ﻫﻲ ﺍﻟﺬﻫﺎﺏ ﻟﻜﻠﻤﺔ "ﺍﳌﻘﺪﻣﺔ"‬
‫ﺍﳌﻮﺟﻮﺩﺓ ﻓﻲ ﻗﺎﺋﻤﺔ ﺍﳌﺤﺘﻮﻳﺎﺕ ‪ ،‬ﻭﻣﻦ ﺛﻢ ﺃﺿﻊ ﻋﻠﻴﻬﺎ ﺭﺍﺑﻂ ﻳﻨﺘﻘﻞ ﺇﻟﻰ ﺍﳌﻜﺎﻥ ﺍﻟﺬﻱ ﻭﺿﻌﺖ ﻓﻴﻪ ﺍﻟﻌﻼﻣﺔ ﻗﺒﻞ ﻗﻠﻴﻞ ‪ ،‬ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ‪:‬‬
‫>‪</a‬ﺍﳌﻘﺪﻣﺔ>"‪<a href="#introduction‬‬
‫ﻃﺒﻌﺎً ﺍﻟﺮﺍﺑﻂ ﺃﻭ ﺍﻟﻜﻠﻤﺔ ﺍﳌﻮﺟﻮﺩﺓ ﺑﻌﺪ ﻋﻼﻣﺔ ‪ ، #‬ﻳﺠﺐ ﺃﻥ ﺗﻜﻮﻥ ﻧﻔﺲ ﺍﺳﻢ ﺍﻟﻌﻼﻣﺔ ﺍﻟﺘﻲ ﻭﺿﻌﻨﺎﻫﺎ ﺑﺎﻟﻀﺒﻂ‪.‬‬
‫ﻼ ﻋﻼﻣﺔ ﻓﻲ ﺑﺪﺍﻳﺔ ﺍﻟﺼﻔﺤﺔ ‪ ،‬ﺣﺘﻰ ﻧﺴﺘﻄﻴﻊ ﺃﻥ ﻧﻀﻴﻒ ﻓﻲ ﺃﺳﻔﻞ ﺍﻟﺼﻔﺤﺔ ﺭﺍﺑﻂ ﻟﻠﻌﻮﺩﺓ ﺇﻟﻰ ﺃﻋﻠﻰ ﺍﻟﺼﻔﺤﺔ ﺇﺫﺍ‬
‫ﻭﳝﻜﻨﻨﺎ ﺃﻥ ﻧﻀﻊ ﻣﺜ ً‬
‫ﻛﺎﻧﺖ ﺍﻟﺼﻔﺤﺔ ﻃﻮﻳﻠﺔ‪ .‬ﻭﻫﻜﺬﺍ ﻟﺒﻘﻴﺔ ﺍﳊﺎﻻﺕ‪.‬‬

‫ﻧﺼﻴﺤﺔ‪:‬‬
‫ﻓﻲ ﺍﻟﻌﻼﻣﺎﺕ ﻭﺃﺳﻤﺎﺀ ﺻﻔﺤﺎﺕ ‪ HTML‬ﻻﺗﺴﺘﻌﻤﻠﻮﺍ ﺍﳌﺴﺎﻓﺎﺕ ﻗﺪﺭ ﺍﻹﻣﻜﺎﻥ ‪ ،‬ﻭﺍﺳﺘﻌﻤﻠﻮﺍ ﺑﺪ ًﻻ ﻣﻨﻬﺎ – ‪ dashes‬ﺃﻭ _‬
‫‪.underscores‬‬

‫‪ -4‬ﺍﻟﺘﻌﻠﻴﻘﺎﺕ ﻭﺍﳌﻼﺣﻈﺎﺕ ‪:‬‬

‫ﺍﻟﺘﻌﻠﻴﻘﺎﺕ ﻫﻲ ﺷﻲﺀ ﺃﺳﺎﺳﻲ ﻓﻲ ﺃﻱ ﻟﻐﺔ ﺑﺮﻣﺠﺔ ﻷﻥ ﻟﻬﺎ ﻓﻮﺍﺋﺪ ﻛﺜﻴﺮﺓ ‪ ،‬ﻣﻨﻬﺎ ﺃﻧﻬﺎ ﺗﻮﺿﱢﺢ ﻟﻨﺎ ﺍﻟﻔﺎﺋﺪﺓ ﻭﺍﻟﻐﺮﺽ ﻣﻦ ﻛﺘﺎﺑﺔ ﺃﻣﺮ ﻣﻌﲔ‬
‫ﻭﺑﺎﻟﺘﺎﻟﻲ ﻳﺴﺘﻄﻴﻊ ﻣﻦ ﻳﻘﺮﺃ ﺍﻷﻣﺮ ﺃﻥ ﻳﻌﺮﻑ ﺳﺒﺒﻪ ﻭﻳﻔﻬﻤﻪ ﺑﺴﻬﻮﻟﺔ ‪ ،‬ﻭﺃﻳﻀﺎً ﻳﺴﺎﻋﺪ ﺍﳌﺒﺮﻣﺞ ﺍﻟﺬﻱ ﻛﺘﺐ ﺍﻷﻣﺮ ﺍﻟﺒﺮﻣﺠﻲ ‪ -‬ﺇﺫﺍ ﻋﺎﺩ‬
‫ﻟﻼﻃﻼﻉ ﻋﻠﻴﻪ ﻟﻴﺼﺤﺢ ﺑﻌﺾ ﺍﻷﺧﻄﺎﺀ ﺑﻌﺪ ﻣﺮﻭﺭ ﻓﺘﺮﺓ ﺯﻣﻨﻴﺔ ﻃﻮﻳﻠﺔ ‪ -‬ﻓﻲ ﺗﺬﻛﺮ ﺳﺒﺐ ﻛﺘﺎﺑﺘﻪ ﻭﺍﻟﻔﺎﺋﺪﺓ ﻣﻨﻪ ‪ ،‬ﻭﺑﺎﻟﺘﺎﻟﻲ ﻳﺴﺘﻄﻴﻊ ﺍﻟﺘﻌﺪﻳﻞ‬
‫ﻭﺗﺼﺤﻴﺢ ﺍﻷﺧﻄﺎﺀ ﺑﺴﺮﻋﺔ ﻭ ﺳﻬﻮﻟﺔ‪ .‬ﻭﻃﺒﻌﺎً ﺍﻟﺘﻌﻠﻴﻘﺎﺕ ﻻﺗﻈﻬﺮ ﺃﺑﺪﺍً ﻓﻲ ﺍﳌﺘﺼﻔﺤﺎﺕ ‪ ،‬ﻭﻓﺎﺋﺪﺗﻬﺎ ﺍﻟﺮﺋﻴﺴﻴﺔ ﻫﻲ ﻟﻠﻤﺒﺮﻣﺞ ﻧﻔﺴﻪ ﻭﺑﻘﻴﺔ‬
‫ﺍﳌﺒﺮﻣﺠﲔ ﺍﻟﺬﻱ ﺳﻴﻘﺮﺃﻭﻥ ﺍﻟﻜﻮﺩ ﺍﻟﺒﺮﻣﺠﻲ‪.‬‬

‫ﺍﻟﺘﻌﻠﻴﻘﺎﺕ ﻓﻲ ﻫﺬﻩ ﺍﻟﻠﻐﺔ ﻧﻜﺘﺒﻬﺎ ﺑﺎﻟﻄﺮﻳﻘﺔ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫>‪ --‬ﻫﺬﺍ ﺍﻟﻜﻼﻡ ﻟﻦ ﻳﻈﻬﺮ ﻓﻲ ﺍﳌﺘﺼﻔﺢ ﻭﺳﻴﻌﺘﺒﺮ ﺗﻌﻠﻴﻖ ﺃﻭ ﻣﻼﺣﻈﺔ ‪<!--‬‬

‫‪http://aouM150.wordpress.com‬‬ ‫ﺍﻟﺼﻔﺤﺔ ‪ 15‬ﻣﻦ ‪17‬‬ ‫إﻋﺪاد‪ :‬اﳌﻌﺘﺼﻢ‬

 ‫‪ -5‬ﻋﻴﻮﺏ ﻟﻐﺔ ‪: HTML‬‬
‫ﻳﺘﻀﺢ ﻟﻨﺎ ﳑﺎ ﺳﺒﻖ ﺑﺄﻥ ﻛﻞ ﻣﺎﺗﻘﻮﻡ ﺑﻪ ﻫﺬﻩ ﺍﻟﻠﻐﺔ ﻫﻮ ﻣﺠﺮﺩ ﺗﻨﺴﻴﻖ ﻭﲢﺮﻳﺮ ﺻﻔﺤﺎﺕ ﺍﻻﻧﺘﺮﻧﺖ ﻭﺭﺑﻄﻬﺎ ﻣﻊ ﺑﻌﺾ ﻭﻋﺮﺽ ﺍﻟﺼﻮﺭ‪.‬‬
‫ﺍﻵﻥ ﻋﺪﺩ ﻣﻮﺍﻗﻊ ﺍﻻﻧﺘﺮﻧﺖ ﻻﳝﻜﻦ ﺇﺣﺼﺎﺅﻩ ‪ ،‬ﻭﺍﳊﺎﺟﺔ ﻟﺘﺤﺴﲔ ﻧﺘﺎﺋﺞ ﺍﻟﺒﺤﺚ ﻟﺪﻯ ﻣﺤﺮﻛﺎﺕ ﺍﻟﺒﺤﺚ ﺃﺻﺒﺤﺖ ﺷﻲﺀ ﺿﺮﻭﺭﻱ ﺟﺪﺍً ﺣﺘﻰ‬
‫ﻧﺴﺘﻄﻴﻊ ﺃﻥ ﻧﺤﺼﻞ ﻋﻠﻰ ﺍﳌﻌﻠﻮﻣﺔ ﺍﻟﺘﻲ ﻧﺮﻳﺪﻫﺎ ﻭﺧﺼﻮﺻﺎً ﻓﻲ ﺍﳌﻮﺍﻗﻊ ﺍﳌﺎﻟﻴﺔ ﻭﻣﻮﺍﻗﻊ ﺍﻟﺘﺴﻮﻕ ﺍﻹﻟﻜﺘﺮﻭﻧﻲ‪ .‬ﻫﺬﻩ ﺍﻟﻠﻐﺔ ﻟﻸﺳﻒ ﻻﳝﻜﻨﻬﺎ‬
‫ﻭﺻﻒ ﺃﻭ ﻣﻌﺮﻓﺔ ﺍﳌﻌﻠﻮﻣﺎﺕ ﺍﻟﺘﻲ ﲢﺘﻮﻳﻬﺎ ﺑﲔ ﺻﻔﺤﺎﺗﻬﺎ ‪ ،‬ﻓﻠﻮ ﻛﺎﻧﺖ ﺗﺴﺘﻄﻴﻊ ﻣﻌﺮﻓﺔ ﻣﺤﺘﻮﻳﺎﺗﻬﺎ ﺃﻭ ﻭﺻﻔﻬﺎ ﻷﺻﺒﺤﺖ ﻣﻬﻤﺔ ﻣﺤﺮﻛﺎﺕ‬
‫ﺍﻟﺒﺤﺚ ﺃﺳﻬﻞ ﻭﺃﻛﺜﺮ ﺩﻗﺔ ﻭﻓﻌﺎﻟﻴﺔ‪.‬‬

‫‪ -6‬ﻣﻘﺪﻣﺔ ﻋﻦ ﻟﻐﺔ ‪: XML‬‬

‫ﻛﻠﻤﺔ ‪ XML‬ﻫﻲ ﺍﺧﺘﺼﺎﺭ ﻟـ ‪ ، eXtensible Markup Language‬ﻭﻫﻲ ﻟﻐﺔ ﰎ ﺍﺑﺘﻜﺎﺭﻫﺎ ﻟﺘﺴﺎﻋﺪ ﻋﻠﻰ ﺗﺨﻄﻲ ﻋﻴﻮﺏ ﻟﻐﺔ‬
‫‪ .HTML‬ﻓﻬﺬﻩ ﺍﻟﻠﻐﺔ ﻗﺎﺩﺭﺓ ﻋﻠﻰ ﻣﻌﺮﻓﺔ ﻣﺤﺘﻮﻳﺎﺕ ﺻﻔﺤﺎﺕ ﺍﻻﻧﺘﺮﻧﺖ ‪ ،‬ﻭﺑﺎﻟﺘﺎﻟﻲ ﺗﺴﺘﻄﻴﻊ ﺃﻥ ﺗﻌﻄﻲ ﻣﺤﺮﻛﺎﺕ ﺍﻟﺒﺤﺚ ﻭﺍﳌﺘﺼﻔﺤﺎﺕ‬
‫ﻣﻌﻠﻮﻣﺎﺕ ﻛﺎﻓﻴﺔ ﻋﻦ ﺻﻔﺤﺎﺕ ﺍﻻﻧﺘﺮﻧﺖ‪.‬‬
‫ﻼ ﻟﻮ ﻛﺎﻥ ﻟﺪﻳﻨﺎ ﻣﻮﻗﻊ ﻟﺒﻴﻊ ﺍﻟﻜﺘﺐ ‪ ،‬ﻃﺒﻌﺎً ﻛﻞ ﻛﺘﺎﺏ ﺳﻴﺤﺘﻮﻱ ﻋﻠﻰ ﻣﻌﻠﻮﻣﺎﺕ ﻛﺜﻴﺮﺓ ﻣﺜﻞ‪ :‬ﺍﺳﻢ ﺍﻟﻜﺘﺎﺏ ‪ ،‬ﺍﺳﻢ ﺍﻟﻜﺎﺗﺐ ‪ ،‬ﺳﻌﺮ ﺍﻟﻜﺘﺎﺏ‬
‫ﻓﻤﺜ ً‬
‫‪ ،‬ﺩﺍﺭ ﺍﻟﻨﺸﺮ ‪ ،‬ﺗﺎﺭﻳﺦ ﺍﻟﻄﺒﻌﺔ ‪ ،‬ﻋﺪﺩ ﺍﻟﺼﻔﺤﺎﺕ ‪ ،‬ﻭﻏﻴﺮﻫﺎ‪ .‬ﻟﻮ ﺍﺳﺘﻌﻤﻠﻨﺎ ﻟﻐﺔ ‪ HTML‬ﻟﻮﺣﺪﻫﺎ ﻓﻲ ﺗﺼﻤﻴﻢ ﻫﺬﺍ ﺍﳌﻮﻗﻊ ‪ ،‬ﻓﺈﻥ ﻣﺤﺮﻛﺎﺕ‬
‫ﺍﻟﺒﺤﺚ ﻟﻦ ﺗﺴﺘﻄﻴﻊ ﺃﻥ ﲤﻴﺰ ﺑﲔ ﺍﺳﻢ ﺍﻟﻜﺘﺎﺏ ﻭﺑﲔ ﺍﺳﻢ ﺍﳌﺆﻟﻒ ﻋﻠﻰ ﺳﺒﻴﻞ ﺍﳌﺜﺎﻝ ‪ ،‬ﺃﻭ ﺑﲔ ﺳﻌﺮ ﺍﻟﻜﺘﺎﺏ ﻭﺑﲔ ﻋﺪﺩ ﺻﻔﺤﺎﺗﻪ‪ .‬ﻟﻜﻦ ﻋﻦ‬
‫ﻃﺮﻳﻖ ﻟﻐﺔ ‪ XML‬ﺃﺻﺒﺢ ﺑﺈﻣﻜﺎﻥ ﺍﳌﺘﺼﻔﺢ ﻭﻣﺤﺮﻛﺎﺕ ﺍﻟﺒﺤﺚ ﺍﻟﺘﻤﻴﻴﺰ ﺑﲔ ﺃﺳﻌﺎﺭ ﺍﻟﻜﺘﺐ ﻭﺑﲔ ﻋﺪﺩ ﺻﻔﺤﺎﺗﻬﺎ ﻭﺍﻷﺭﻗﺎﻡ ﺍﻷﺧﺮﻯ ﺍﻟﺘﻲ‬
‫ﺗﺘﻌﻠﻖ ﺑﻬﺎ ‪ ،‬ﻭﺑﺎﻟﺘﺎﻟﻲ ﺃﺻﺒﺤﺖ ﻧﺘﺎﺋﺞ ﺍﻟﺒﺤﺚ ﺣﺎﻟﻴﺎً ﺃﻛﺜﺮ ﺩﻗﺔ ﻭﻓﻌﺎﻟﻴﺔ ‪ ،‬ﺣﻴﺚ ﺃﺻﺒﺤﺖ ﻗﺎﺩﺭﺓ ﻋﻠﻰ ﻭﺿﻊ ﻣﻘﺎﺭﻧﺔ ﺑﲔ ﺍﻷﺳﻌﺎﺭ ﻭﺧﻴﺎﺭﺍﺕ‬
‫ﻟﺘﺮﺗﻴﺐ ﺍﻟﻜﺘﺐ ﺣﺴﺐ ﺣﺪﺍﺛﺘﻬﺎ ﻭﻏﻴﺮﻫﺎ ﻣﻦ ﺍﳌﻴﺰﺍﺕ ﺍﻷﺧﺮﻯ‪.‬‬

‫ﻫﺬﻩ ﺍﻟﻠﻐﺔ ﻇﻬﺮﺕ ﺑﺴﺒﺐ ﺯﻳﺎﺩﺓ ﺃﻋﺪﺍﺩ ﺍﳌﻮﺍﻗﻊ ﺍﳌﺎﻟﻴﺔ ﻭﻣﻮﺍﻗﻊ ﺍﻟﺘﺴﻮﻕ ﺍﻹﻟﻜﺘﺮﻭﻧﻲ ‪ ،‬ﻭﺍﳊﺎﺟﺔ ﺇﻟﻰ ﺗﻌﺮﻳﻒ ﺍﳌﻌﻠﻮﻣﺎﺕ ﺍﻟﺘﻲ ﲢﺘﻮﻳﻬﺎ ﻓﻲ‬
‫ﺻﻔﺤﺎﺗﻬﺎ ﺇﻟﻰ ﺍﳌﺘﺼﻔﺤﺎﺕ ﻭﻣﺤﺮﻛﺎﺕ ﺍﻟﺒﺤﺚ ‪ ،‬ﺣﺘﻰ ﻳﺼﺒﺢ ﺍﻟﺘﻌﺎﻣﻞ ﻣﻊ ﻣﺜﻞ ﻫﺬﻩ ﺍﳌﻮﺍﻗﻊ ﺃﻛﺜﺮ ﺩﻗﺔ ﻭﻓﻌﺎﻟﻴﺔ ﻭﺳﻬﻮﻟﺔ‪.‬‬
‫ﻟﻐﺔ ‪ XML‬ﻣﻜﻤﻠﺔ ﻟﻠﻐﺔ ‪ HTML‬ﻭﻻ ﺗﺴﺘﻄﻴﻊ ﺍﻻﺳﺘﻐﻨﺎﺀ ﻋﻨﻬﺎ ‪ ،‬ﻷﻥ ﺷﻔﺮﺍﺗﻬﺎ ﻭﺃﻛﻮﺍﺩﻫﺎ ﺗﻜﻮﻥ ﻣﻦ ﺿﻤﻦ ﺷﻔﺮﺍﺕ ‪ HTML‬ﺍﻷﺳﺎﺳﻴﺔ‪.‬‬

‫ﻟﻠﻤﻌﻠﻮﻣﻴﺔ‪ ،‬ﺍﳌﻨﻬﺞ ﺫﻛﺮ ﺑﺄﻧﻨﺎ ﻏﻴﺮ ﻣﻄﺎﻟﺒﲔ ﺑﺘﻌﻠﻢ ﺗﻔﺎﺻﻴﻞ ﻫﺬﻩ ﺍﻟﻠﻐﺔ‪:‬‬
‫”‪“You are not expected to learn the details of XML.‬‬
‫‪Source: M150, Unit 4, Section 6, Page 54‬‬

‫‪http://aouM150.wordpress.com‬‬ ‫ﺍﻟﺼﻔﺤﺔ ‪ 16‬ﻣﻦ ‪17‬‬ ‫إﻋﺪاد‪ :‬اﳌﻌﺘﺼﻢ‬

 ‫ﰎﱠ ﺑﺤﻤﺪ اﷲ‬
‫ﺃﲤﻨﱠﻰ ﺃﻥ ﺃﻛﻮﻥ ﻭﻓﱢـﻘﺖ ﻓﻲ ﺷـﺮﺡ ﻫـﺬﻩ ﺍﻟﻠﻐـﺔ ﺍﳉـﻤﻴـﻠـﺔ ﺑـﺒـﺴـﺎﻃـﺔ ﻭﺳﻬـﻮﻟـﺔ‪.‬‬
‫ﻓﻲ ﺣﺎﻝ ﻭﺟﻮﺩ ﺃﺧﻄﺎﺀ ﺇﻣﻼﺋﻴﺔ ﺃﻭ ﻗﻮﺍﻋﺪﻳﺔ ﺃﻭ ﻓﻲ ﺍﻟﺸﺮﺡ ﺃﲤﻨﻰ ﺃﻥ ﺗﻌﺬﺭﻭﻧﻲ ﻭﺗﺒﻠﻐﻮﻧﻲ ﻋﻨﻬﺎ ﺣﺘﻰ ﺃﻗﻮﻡ ﺑﺘﺼﺤﻴﺤﻬﺎ‪.‬‬

‫أﺧﻮﻛﻢ اﳌﻌﺘﺼﻢ‬

‫‪http://aouM150.wordpress.com‬‬ ‫ﺍﻟﺼﻔﺤﺔ ‪ 17‬ﻣﻦ ‪17‬‬ ‫إﻋﺪاد‪ :‬اﳌﻌﺘﺼﻢ‬