‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﶈﺎﺿﺮﺓ ﺍﻷﻭﱃ‬
‫ﻣﻘﺪﻣﺔ ﺇﱃ ﺍﻻﻧﺘﺮﻧﺖ‬
‫ﶈﺔ ﻋﻦ ﺍﻹﻧﺘﺮﻧﺖ‬
‫ﺷﺒﻜﺔ ﺍﻹﻧﺘﺮﻧﺖ ‪ Internet‬ﻫﻲ ﺍﺧﺘﺼﺎﺭ ﻣﻦ ﺍﻻﺣﺮﻑ ﺍﻻﻭﱃ ﻟﻌﺒﺎﺭﺓ‬
‫"‪"International network‬ﻭﺗﻌﲏ ﺍﻟﺸﺒﻜﺔ ﺍﻟﻌﺎﳌﻴﺔ‪،‬‬
‫ﻭﻳﺘﻢ ﺍﻻﺗﺼﺎﻝ ﺑﲔ ﻫﺬﻩ ﺍﳊﻮﺍﺳﻴﺐ ﻭﻧﻘﻞ ﺍﳌﻌﻠﻮﻣﺎﺕ ﻓﻴﻤﺎ ﺑﻴﻨﻬﺎ ﻭﻓﻖ ﻗﻮﺍﻋﺪ ﻭﺃﻧﻈﻤﺔ ﳏﺪﺩﺓ‪ ،‬ﺗﺴﻤﻰ‬
‫ﺑﺮﻭﺗﻮﻛﻮﻻﺕ‪Protocols‬‬
‫ﻣﻠﻜﻴﺔ ﺍﻟﺸﺒﻜﺔ‬
‫ﻻ ﳝﻜﻦ ﻷﻱ ﺷﺨﺺ ﺃﻭ ﺷﺮﻛﺔ )ﺣﻜﻮﻣﻴﺔ ﺃﻭ ﻏﲑ ﺣﻜﻮﻣﻴﺔ( ﺃﻥ ﻳﺪﻋﻲ ﻣﻠﻜﻴﺔ ﺍﻹﻧﺘﺮﻧﺖ‬
‫ﻭﰲ ﺍﻟﻮﻗﺖ ﺫﺍﺗﻪ‪ ،‬ﺗﻘﻮﻡ ﺷﺮﻛﺎﺕ ﺭﺍﺋﺪﺓ ﰲ ﳎﺎﻝ ﺗﻜﻨﻮﻟﻮﺟﻴﺎ ﺍﳌﻌﻠﻮﻣﺎﺕ ﺑﺘﻨﻈﻴﻢ ﺧﺪﻣﺔ ﺍﻻﻧﺘﺮﻧﺖ‬
‫ﺗﺎﺭﻳﺦ ﺍﻻﻧﺘﺮﻧﺖ‬
‫‪ .1‬ﺑﺪﺃﺕ ﺍﻹﻧﺘﺮﻧﺖ ﰲ ﻣﻨﺘﺼﻒ ﺍﻟﺴﺘﻴﻨﻴﺎﺕ ‪.‬‬
‫‪(1969 .2‬ﻡ )ﺭﺑﻄﺖ ﻫﺬﻩ ﺍﻟﺸﺒﻜﺔ‪ ،‬ﻋﺪﺩﺍﹰ ﻣﻦ ﺍﳉﺎﻣﻌﺎﺕ ﺍﻷﻣﺮﻳﻜﻴﺔ ‪.‬‬
‫‪ .3‬ﻭﰲ ﻋﺎﻡ‪ 1972‬ﻡ ﺧﺪﻣﺔ ﺍﻟﱪﻳﺪ ﺍﻻﻟﻜﺘﺮﻭﱐ‪Email.‬‬
‫‪ .4‬ﺩﺧﻮﳍﺎ ﻣﺮﺣﻠﺔ ﺍﻟﻌﺎﳌﻴﺔ‪ ،‬ﰲ ﺃﻭﺍﺋﻞ ﺍﻟﺴﺒﻌﻴﻨﻴﺎﺕ ﺇﺛﺮ ﺭﺑﻄﻬﺎ ﺑﺒﻌﺾ ﺍﳉﺎﻣﻌﺎﺕ‪ ،‬ﻭﻣﺮﺍﻛﺰ ﺍﻷﲝﺎﺙ‪ ،‬ﰲ ﺃﻭﺭﻭﺑﺎ‪،‬‬
‫‪ .5‬ﻭﰲ ﺃﻭﺍﺋﻞ ﺍﻟﺜﻤﺎﻧﻴﻨﺎﺕ‪ ،‬ﲤﻜﻦ ﺍﻟﻨﺎﺱ ﰲ ﲨﻴﻊ ﺃﳓﺎﺀ ﺍﻟﻌﺎﱂ‬
‫‪ .6‬ﻭﰲ ﺑﺪﺍﻳﺔ ﺍﻟﺘﺴﻌﻴﻨﻴﺎﺕ ﺍﺳﺘﺨﺪﻣﺖ ﻭﺍﺟﻬﺔ‪Gopher.‬‬
‫‪ .7‬ﻭﰲ ﺍﻟﺘﺴﻌﻴﻨﺎﺕ ﺃﻳﻀﺎﹰ ﺗﻄﻮﺭﺕ ﺷﺒﻜﺔ ﺍﻹﻧﺘﺮﻧﺖ‪ ،‬ﺑﺸﻜﻞ ﻛﺒﲑ‪ ،‬ﻧﻈﺮﺍﹰ ﻟﻈﻬﻮﺭ ﺃﻭﻝ ﻣﺴﺘﻌﺮﺿﺎﺕ ﺍﻟﻮﻳﺐ‬
‫ﺍﻟﺮﺳﻮﻣﻴﺔ‪.‬‬
‫ﺷﺒﻜﺔ ﺍﻟﻮﻳﺐ ﺍﻟﻌﺎﳌﻴﺔ ‪Word Wide Web‬‬
‫ﺷﺒﻜﺔ ﺍﻟﻮﻳﺐ ﺍﻟﻌﺎﳌﻴﺔ ‪ www‬ﺃﻭ ‪ w3‬ﺃﻭ ﺍﻟﻮﻳﺐ)‪ ، (web‬ﻫﻲ ﳎﻤﻮﻋﺔ ﻫﺎﺋﻠﺔ‪ ،‬ﻣﻦ ﻭﺛﺎﺋﻖ ﺍﻟﻨﺺ ﺍﳌﺘﺮﺍﺑﻂ‬
‫‪ ،Hypertext‬ﻭﲰﻴﺖ ﺑﺎﻟﺸﺒﻜﺔ ﺍﻟﻌﻨﻜﺒﻮﺗﻴﺔ‪،‬‬
‫ﺍﳌﺼﻄﻠﺢ‪HTTP‬‬
‫ﻫﻮ ﺑﺮﻭﺗﻮﻛﻮﻝ ﻧﻘﻞ ﺍﻟﻨﺺ ﺍﳌﺘﺮﺍﺑﻂ‪HyperText Transfer Protocol‬‬

‫‪1‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﳌﺼﻄﻠﺢ‪URL‬‬
‫ﳏﺪﺩ ﻣﻮﻗﻊ ﺍﳌﺼﺪﺭ ‪ Unified Resource Locater‬ﺍﻟﺬﻱ ﳛﺪﺩ ﺍﻟﻌﻨﻮﺍﻥ ﺍﳊﻘﻴﻘﻲ ﳌﻮﻗﻊ‬
‫ﺍﳌﻌﻠﻮﻣﺎﺕ ﺍﳌﻘﺎﺑﻞ ﻟﻠﻌﻨﻮﺍﻥ ﺍﻟﻨﺼﻲ ‪.‬‬
‫ﺍﳌﺼﻄﻠﺢ ‪HTML‬‬
‫ﻟﻐﺔ ﺍﻟﻨﺺ ﺍﻟﺘﺸﻌﱯ ﺍﳌﺘﺮﺍﺑﻂ ‪HyperTextMarkup Language‬‬
‫ﳛﺪﺩ ﻛﻴﻔﻴﺔ ﻋﺮﺽ ﺍﳌﻌﻮﻣﺎﺕ ﰲ ﺻﻔﺤﺎﺕ ﺍﻟﻮﻳﺐ‬
‫ﺧﺪﻣﺎﺕ ﺍﻻﻧﺘﺮﻧﺖ‬
‫ﺍﻟﻮﻳﺐ ‪ Web‬ﻭﺍﻟﱵ ﻳﻌﺘﱪﻫﺎ ﺍﻟﺒﻌﺾ ﺍﳋﺪﻣﺔ ﺍﻟﻮﺣﻴﺪﺓ ﺃﻭ ﻗﺪ ﻻ ﻳﻔﺮﻗﻬﺎ ﻋﻦ ﺍﻻﻧﺘﺮﻧﺖ‪ ،‬ﻭﺗﺒﺎﺩﻝ ﺍﻟﺮﺳﺎﺋﻞ‬
‫‪ ،E-Mail‬ﻭﺍﳊﻮﺍﺭ ‪ Chatting‬ﻭﻣﺆﲤﺮﺍﺕ ﺍﻟﻔﻴﺪﻳﻮ‪ ،Conferencing Video‬ﻭﻧﻘﻞ‬
‫ﺍﳌﻠﻔﺎﺕ‪ ، FTP‬ﺗﺒﺎﺩﻝ ﺍﻷﺧﺒﺎﺭ ‪NNTP‬ﻭﺍﺳﺘﻌﺮﺍﺽ ﺍﳌﻮﻗﻊ ‪ Browsing‬ﻭﺍﻟﺒﺤﺚ‬
‫‪ ،Searching‬ﻭﺍﻟﺘﺮﻓﻴﻪ‪ ، Entertainment‬ﻭﺍﻟﺘﺠﺎﺭﺓ ﺍﻻﻟﻜﺘﺮﻭﻧﻴﺔ ‪، E-commerce‬‬
‫ﻭﺇﺫﺍﻋﺎﺕ ﺍﻻﻧﺘﺮﻧﺖ‪ Internet Radios‬ﻭﻏﲑﻫﺎ ﺍﻟﻜﺜﲑ ‪.‬‬
‫ﺍﻟﱪﻳﺪ ﺍﻹﻟﻜﺘﺮﻭﱐ‪E-mail‬‬
‫ﺍﻟﱪﻳﺪ ﺍﻹﻟﻜﺘﺮﻭﱐ ‪ Electronic Mail‬ﻫﻮ ﻧﻈﺎﻡ ﻟﻠﺘﺮﺍﺳﻞ ﺍﻹﻟﻜﺘﺮﻭﱐ‬
‫ﻧﻘﻞ ﺍﳌﻠﻔﺎﺕ ﻭﺍﻟﱪﺍﻣﺞ )‪FileTransfer Protocol (FTP‬‬
‫ﺣﻴﺚ ﻳﺴﺘﺨﺪﻡ ﺍﻟﱪﺗﻮﻛﻮﻝ ‪ FTP‬ﰲ ﺭﻓﻊ ﺍﳌﻠﻔﺎﺕ ﻣﻦ ﺍﳉﻬﺎﺯ ﺇﱃ ﺍﻟﺸﺒﻜﺔ)‪ ، (Upload‬ﺃﻭ ﲢﻤﻴﻞ‬
‫ﺍﳌﻠﻔﺎﺕ ﻣﻦ ﺍﻟﺸﺒﻜﺔ ﺇﱃ ﺍﳉﻬﺎﺯ ‪(Download).‬‬

‫ﺍﻟﻮﻳﺐ‪Web‬‬
‫• ﻫﻲ ﻃﺮﻳﻘﺔ ﻟﺘﻨﻈﻴﻢ ﺍﳌﻌﻠﻮﻣﺎﺕ‪،‬‬

‫‪2‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﻟﺘﺮﻓﻴﻪ‪Entertainment‬‬
‫• ﳛﺐ ﺍﻟﻨﺎﺱ ﺍﻟﻜﺜﲑ ﻣﻦ ﺍﻟﺘﺴﻠﻴﺔ ﻭﺍﳌﺘﻌﺔ ﻋﻠﻰ ﺍﻻﻧﺘﺮﻧﺖ‪ ،‬ﺇﺫ ﳝﻜﻦ ﻟﻠﻤﺮﺀ ﺍﻟﻠﻌﺐ ﺑﺎﻷﻟﻌﺎﺏ ﺍﳌﻮﺟﻮﺩﺓ ﻋﻠﻰ‬
‫ﺍﻟﺸﺒﻜﺔ‪ ،‬ﻛﻤﺎ ﳝﻜﻨﻪ ﻣﺸﺎﻫﺪﺓ ﺍﳌﺴﺮﺣﻴﺎﺕ ﺍﻹﺫﺍﻋﻴﺔ ﻭﺍﻟﺘﻠﻔﺰﻳﻮﻧﻴﺔ‪ ،‬ﻛﺬﻟﻚ ﳝﻜﻦ ﻣﺸﺎﺭﻛﺔ ﺍﻟﻠﻌﺐ ﻣﻊ‬
‫ﺃﺷﺨﺎﺹ ﻣﻮﺟﻮﺩﻭﻥ ﻋﻠﻰ ﺍﻟﺸﺒﻜﺔ‬
‫ﺇﺫﺍﻋﺎﺕ ﺍﻹﻧﺘﺮﻧﺖ ‪Internet Radio Stations‬‬
‫• ﳝﻜﻨﻚ ﺃﺛﻨﺎﺀ ﺍﻻﺳﺘﻌﺮﺍﺽ ﺃﻥ ﺗﺴﺘﻤﻊ ﺇﱃ ﳏﻄﺎﺕ ﺍﻟﺒﺚ ﻭﺍﻹﺫﺍﻋﺎﺕ ﺍﻟﻌﺎﻣﻠﺔ ﻋﱪ ﺍﻹﻧﺘﺮﻧﺖ‬
‫ﺍﻻﺗﺼﺎﻝ ﺑﺎﻻﻧﺘﺮﻧﺖ‬
‫ﻟﺘﺘﻤﻜﻦ ﻣﻦ ﺍﻻﺗﺼﺎﻝ ﺑﺎﻹﻧﺘﺮﻧﺖ ﳚﺐ ﺃﻥ ﳛﻮﻱ ﺟﻬﺎﺯﻙ ﻋﻠﻰ‪:‬‬
‫‪ .1‬ﺑﺮﺗﻮﻛﻮﻝ ‪TCP/IP‬‬
‫‪Transmission Control Protocol/Internet Protocol .2‬‬
‫‪ .3‬ﺍﻟﺬﻱ ﻳﻘﻮﻡ ﺑﺘﺄﺳﻴﺲ ﺍﻻﺗﺼﺎﻝ ﻭﺿﻤﺎﻥ ﻧﻘﻞ ﺍﳌﻌﻠﻮﻣﺎﺕ ﻣﻦ ﺍﻹﻧﺘﺮﻧﺖ ﺇﱃ ﺟﻬﺎﺯﻙ ﻭﺑﺎﻟﻌﻜﺲ‪.‬‬
‫‪ .4‬ﻭﺣﺪﺓ ﺍﺗﺼﺎﻝ( ﻣﻮﺩﻡ‪Modem).‬‬
‫‪ .5‬ﺧﻂ ﺍﺗﺼﺎﻝ( ﺧﻂ ﻫﺎﺗﻒ ﺃﻭ ﺍﻟﻜﻴﺒﻞ ﺃﻭ ﺍﳋﻄﻮﻁ ﺍﻟﺮﻗﻤﻴﺔ ﺃﻭ ﺍﳋﻄﻮﻁ ﺍﻟﻼﺳﻠﻜﻴﺔ‪...).‬‬
‫‪ .6‬ﻣﺰﻭﺩ ﺧﺪﻣﺔ ﺇﻻﻧﺘﺮﻧﺖ‪ISP (Internet Service Provider).‬‬
‫‪ .7‬ﺑﺮﳎﻴﺎﺕ ﺧﺎﺻﺔ ﺑﺎﻹﻧﺘﺮﻧﺖ( ﺑﺮﻧﺎﻣﺞ ﺍﳌﺘﺼﻔﺢ‪ ،‬ﺑﺮﻧﺎﻣﺞ ﺇﺩﺍﺭﺓ ﺍﻟﱪﻳﺪ ﺍﻹﻟﻜﺘﺮﻭﱐ‪...). ،‬‬
‫ﺍﻟﻌﻨﻮﺍﻥ ﺍﻻﻟﻜﺘﺮﻭﱐ‬
‫ﻟﻜﻞ ﻣﻮﻗﻊ ﻣﻦ ﻣﻮﺍﻗﻊ ﺍﻟﻮﻳﺐ ﻋﻨﻮﺍﻥ ﻓﺮﻳﺪ ﻳ‪‬ﺴﻤ‪‬ﻰ ﺍﻟﻌﻨﻮﺍﻥ ﺍﻹﻟﻜﺘﺮﻭﱐ‪ ،‬ﻭﻫﺬﺍ ﺍﻟﻌﻨﻮﺍﻥ ﻣﻌﲏ ﺑﺘﺤﺪﻳﺪ ﻣﺼﺪﺭ‬
‫ﺍﳌﻮﻗﻊ ﻭﻣﺴﺎﺭﻩ‪ ،‬ﻭﻳ‪‬ﺪﻋﻰ ﺍﻟﻌﻨﻮﺍﻥ ﺍﻹﻟﻜﺘﺮﻭﱐ ﲟﺤﺪ‪‬ﺩ ﻣﻮﻗﻊ ﺍﳌﺼﺪﺭ‬
‫‪(Unified Resource Locator - URL).‬ﻛﻤﺎ ﻭﺭﺩ ﻋﻨﺪ ﺍﳊﺪﻳﺚ ﻋﻦ ﻣﺼﻄﻠﺤﺎﺕ‬
‫ﺍﻻﻧﺘﺮﻧﺖ‬
‫ﺍﻟﻨﻄﺎﻗﺎﺕ‬
‫ﻣﺜﺎﻝ ‪www.google.com.sa‬‬
‫‪www: o‬ﺗﻌﲏ ﺃﻥ ﺍﳌﻮﻗﻊ ﻣﺒﲏ‪ ‬ﻭﻓﻖ ﻣﻌﺎﻳﲑ ﺍﻟﻮﻳﺐ ‪.‬‬
‫‪google: o‬ﻫﻮ ﺍﺳﻢ ﺍﳉﻬﺔ ﺻﺎﺣﺒﺔ ﺍﳌﻮﻗﻊ‪.‬‬
‫‪com: o‬ﺗ‪‬ﺒﻴ‪‬ﻦ ﳎﺎﻝ ﻋﻤﻞ ﺍﳉﻬﺔ ﺻﺎﺣﺒﺔ ﺍﳌﻮﻗﻊ‪ ،‬ﻭﺍﳉﺪﻭﻝ ﺍﻟﺘﺎﱄ ﻳﻘﺪﻡ ﺑﻌﺾ ﻣﻦ ﻫﺬﻩ ﺍﻻﺧﺘﺼﺎﺭﺍﺕ‪:‬‬

‫‪3‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﻻﺧﺘﺼﺎﺭ‬ ‫ﺍﻟﺸﺮﺡ‬
‫‪edu‬‬ ‫ﺗﻌﻠﻴﻤﻲ‬
‫‪gov‬‬ ‫ﺣﻜﻮﻣﻲ‬
‫‪com‬‬ ‫ﲡﺎﺭﻱ‬
‫‪mil‬‬ ‫ﻋﺴﻜﺮﻱ‬
‫‪net‬‬ ‫ﺷﺮﻛﺔ ﺃﻭ ﻣﺆﺳﺴﺔ ﺗﺘﻮﱃ ﳎﻤﻮﻋﺔ ﺃﻭ ﺷﺒﻜﺔ ﺃﻋﻤﺎﻝ‬
‫‪org‬‬ ‫ﻣﻨﻈﻤﺎﺕ‬
‫‪biz‬‬ ‫ﲡﺎﺭﺓ ﺇﻟﻜﺘﺮﻭﻧﻴﺔ‬

‫‪ sa:‬ﻫﻲ ﺍﺧﺘﺼﺎﺭ ﻻﺳﻢ ﺍﻟﺪﻭﻟﺔ ﺍﻟﱵ ﻳﺘﻮﺍﺟﺪ ﻓﻴﻬﺎ ﺟﻬﺎﺯ ﺧﺎﺩﻡ‪ ،‬ﻭﺇﻟﻴﻚ ﺑﻌﺾ ﺍﻻﺧﺘﺼﺎﺭﺍﺕ‪:‬‬

‫ﺍﻻﺧﺘﺼﺎﺭ‬ ‫ﺍﻟﺸﺮﺡ‬
‫‪sa‬‬ ‫ﺍﳌﻤﻠﻜﺔ ﺍﻟﻌﺮﺑﻴﺔ ﺍﻟﺴﻌﻮﺩﻳﺔ‬
‫‪ae‬‬ ‫ﺍﻹﻣﺎﺭﺍﺕ ﺍﻟﻌﺮﺑﻴﺔ ﺍﳌﺘﺤﺪﺓ‬
‫‪sd‬‬ ‫ﺍﻟﺴﻮﺩﺍﻥ‬
‫‪jo‬‬ ‫ﺍﻷﺭﺩﻥ‬
‫‪jp‬‬ ‫ﺍﻟﻴﺎﺑﺎﻥ‬
‫‪au‬‬ ‫ﺃﺳﺘﺮﺍﻟﻴﺎ‬
‫‪uk‬‬ ‫ﺍﳌﻤﻠﻜﺔ ﺍﳌﺘﺤﺪﺓ‬
‫ﺻﻔﺤﺎﺕ ﺍﻟﻮﻳﺐ‬
‫ﻫﻲ ﻧﻮﻉ ﺧﺎﺹ ﻣﻦ ﺍﳌﻠﻔﺎﺕ ﺍﳌﻜﺘﻮﺑﺔ ﺑﻠﻐﺔ‪ ، HTML‬ﻳﺘﻢ ﻭﺿﻌﻬﺎ ﰲ ﻣﻜﺎﻥ ﻳﺘﺴﲎ ﻟﻠﻤﺴﺘﺨﺪﻣﲔ ﺍﻟﺪﺧﻮﻝ‬
‫ﺇﻟﻴﻪ ﻋﱪ ﻧﻈﺎﻡ ﺍﻟﺪﺧﻮﻝ ﳌﻮﺍﻗﻊ ﺍﻟﺸﺒﻜﺔ ‪ HTTP‬ﻭﻗﺮﺍﺀﺓ ﳏﺘﻮﺍﻫﺎ ‪.‬‬
‫ﺃﻧﻮﺍﻉ ﺍﻟﺼﻔﺤﺎﺕ‪.‬‬
‫‪ .1‬ﺻﻔﺤﺎﺕ ﻣﻜﺘﻮﺑﺔ ﺑﻠﻐﺔ)‪HTML. (htm, html‬‬
‫‪ .2‬ﻣﻠﻔﺎﺕ ﺻﻮﺭ)‪. (gif, jpeg, png‬‬
‫‪ .3‬ﻣﻠﻔﺎﺕ ﻭﺳﺎﺋﻂ ﻣﺘﻌﺪﺩﺓ)‪. (ram, mid, wav, swf, avi, mpeg, mpg, mpe‬‬
‫‪ .4‬ﻣﻠﻔﺎﺕ ﻧﺼﻮﺹ ‪. (txt‬ﻣﻜﺘﻮﺑﺔ ﰲ ﺷﻜﻞ )‪ASCII‬‬

‫‪4‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻟﻐﺎﺕ ﺑﺮﳎﺔ ﺍﻹﻧﺘﺮﻧﺖ‬

‫ﻣﻊ ﻇﻬﻮﺭ ﺍﻟﺸﺒﻜﺔ ﺍﻟﻌﺎﳌﻴﺔ‪ ،‬ﻧﺸﺄﺕ ﻟﻐﺎﺕ ﺑﺮﳎﺔ ﻣﻦ ﺃﺟﻞ ﺍﻟﺘﻌﺎﻣﻞ ﻣﻊ ﺻﻔﺤﺎﺕ ﺍﻟﻮﻳﺐ ‘ﻭﺗﻄﻮﺭﺕ ﺑﺸﻜﻞ‬
‫ﻛﺒﲑ‪ ،‬ﻭﺗﻨﻘﺴﻢ ﻫﺬﻩ ﺍﻟﻠﻐﺎﺕ ﺇﱃ ﻗﺴﻤﲔ ‪:‬‬
‫‪ .1‬ﻟﻐﺎﺕ ﺑﺮﳎﺔ ﺟﺎﻧﺐ ﺍﳌﺴﺘﻀﻴﻒ‪Client Side Programming Languages‬‬
‫ﻭﺗ‪‬ﻌﲎ ﻫﺬﻩ ﺍﻟﻠﻐﺎﺕ ﲜﺎﻧﺐ ﺍﳌﺴﺘﻀﻴﻒ( ﺍﳌﺴﺘﺨﺪﻡ ‪)Client Side‬ﻭﺗﻌﻤﻞ ﻋﻦ ﻃﺮﻳﻖ ﺑﺮﻧﺎﻣﺞ‬
‫ﻣﺴﺘﻌﺮﺽ ﺍﻟﻮﻳﺐ‬
‫ﻭﻣﻦ ﺃﻣﺜﻠﺘﻬﺎ‬
‫‪• HTML‬‬
‫‪• Jscript VBScript‬‬
‫‪ .2‬ﻟﻐﺎﺕ ﺑﺮﳎﺔ ﺟﺎﻧﺐ ﺍﳋﺎﺩﻡ ‪Server Side Programming Languages‬‬
‫ﻣﻦ ﺃﺟﻞ ﺍﳊﺼﻮﻝ ﻋﻠﻰ ﺍﳌﻌﻠﻮﻣﺎﺕ ﰲ ﺻﻔﺤﺎﺕ ﻣﺴﺘﻌﺮﺿﺎﺕ ﺍﻟﻮﻳﺐ ﳓﺘﺎﺝ ﺇﱃ ﻟﻐﺎﺕ ﻣﻦ ﺟﺎﻧﺐ ﺍﳋﺎﺩﻡ‬
‫ﻭﻣﻦ ﺍﻣﺜﻠﺘﻬﺎ‬
‫‪• ASP(Active Server Pages).‬‬
‫‪• JSP(Java Server Pages).‬‬
‫‪• PHP(Personal Home Page).‬‬

‫‪5‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﶈﺎﺿﺮﺓ ﺍﻟﺜﺎﻧﻴﺔ‬
‫ﺃﺳﺎﺳﻴﺎﺕ ﻟﻐﺔ ‪HTML‬‬
‫ﻟﻐﺔ ‪HTML‬‬
‫ﻭﻫﻲ ﺍﺧﺘﺼﺎﺭ ﻟـ ‪ Hyper Text Markup Language‬ﻭﺗﻌﲏ ﻟﻐﺔ ﺍﻟﻨﺺ ﺍﻟﺘﺸﻌﱯ ﺍﳌﺘﺮﺍﺑﻂ‬
‫ﺗﺎﺭﻳﺦ ‪HTML‬‬
‫ﺗﻌﺘﱪ ﻟﻐﺔ ﻣﻄﻮﺭﺓ ﻣﻦ ﻟﻐﺔ ﺳﺎﺑﻘﺔ ﺗﻌﺮﻑ ﺑــ ‪ SGML‬ﻭﻫﻲ ﺍﺧﺘﺼﺎﺭ ﻟـ‬
‫‪Standard Generalized Markup Language‬‬
‫ﻭﻗﺪ ﻣﺮﺕ ﻟﻐﺔ ‪ HTML‬ﺑﺎﳌﺮﺍﺣﻞ ﺍﻟﺘﺎﻟﻴﺔ‬
‫‪ :HTML o‬ﱂ ﺗﺴﺘﺨﺪﻡ ﺑﺎﺩﺉ ﺍﻷﻣﺮ ﻋﻠﻰ ﻧﻄﺎﻕ ﻭﺍﺳﻊ ﺇﺫ ﱂ ﻳﺘﻮﻓﺮ ﺇﻻ ﻋﺪﺩﺍﹰ ﻗﻠﻴﻼﹰ ﻣﻦ ﻣﻐﺬﻳﺎﺕ‬
‫ﺍﻹﻧﺘﺮﻧﺖ ﰲ ﺫﻟﻚ ﺍﻟﻮﻗﺖ‪ ،‬ﻭﻟﻜﻨﻬﺎ ﺗﻌﺘﱪ ﺃﺳﺎﺳﺎﹰ ﳌﺎ ﺗﻼﻫﺎ ﻣﻦ ﻧﺴﺦ‪.‬‬
‫‪ :+HTML o‬ﻇﻬﺮﺕ ﰲ ﻋﺎﻡ ‪1993‬ﻡ‪ ،‬ﺗﻄﻮﺭ ﺑﺴﻴﻂ ﻋﻦ ﺍﻟﻨﺴﺨﺔ ﺍﻷﻭﱃ‪.‬‬
‫‪ :HTML2.0 o‬ﻇﻬﺮﺕ ﰲ ﻋﺎﻡ‪1994‬ﻡ‪ ،‬ﻭﺃﺿﻴﻒ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﺼﻮﺭ ﺩﺍﺧﻞ ﺻﻔﺤﺎﺕ‬
‫‪.HTML‬‬
‫‪ :HTML3.0 o‬ﻇﻬﺮﺕ ﰲ ﻋﺎﻡ‪1995‬ﻡ‪ ،‬ﻭﻟﻜﻦ ﱂ ﺗﺴﺘﺨﺪﻡ ﻛﺜﲑﺍﹰ ﻟﻌﺪﻡ ﺗﻮﺍﻓﻘﻬﺎ ﰲ ﺫﻟﻚ ﺍﻟﻮﻗﺖ‬
‫ﻣﻊ ﺑﺮﺍﻣﺞ ﺍﻟﺘﺼﻔﺢ ﺍﳌﻨﺘﺸﺮﺓ ﺣﻴﻨﻬﺎ‪.‬‬
‫‪ :HTML3.2 o‬ﻇﻬﺮﺕ ﻋﺎﻡ‪1996‬ﻡ‪1997-‬ﻡ‪ ،‬ﻭﻓﻴﻬﺎ ﻇﻬﺮ ﺍﺳﺘﺨﺪﺍﻡ ﺍﳉﺪﺍﻭﻝ‪.‬‬
‫‪ :HTML4.0 o‬ﻇﻬﺮﺕ ﰲ ﻋﺎﻡ‪1997‬ﻡ‪1998-‬ﻡ‪ ،‬ﻓﻴﻬﺎ ﺍﺳﺘﺨﺪﻣﺖ ﺍﻹﻃﺎﺭﺍﺕ ﻭﺃﻭﺭﺍﻕ‬
‫ﺍﻷﳕﺎﻁ‪.‬‬
‫‪ :HTML4.01 o‬ﻇﻬﺮﺕ ﰲ ﻋﺎﻡ‪1999‬ﻡ‪ ،‬ﻭﻫﻲ ﺍﻟﻨﺴﺨﺔ ﺍﻷﺣﺪﺙ ﻣﻦ ﻫﺬﻩ ﺍﻟﻠﻐﺔ ﻭﰎ ﻓﻴﻬﺎ ﺣﻞ‬
‫ﺍﻟﻌﺪﻳﺪ ﻣﻦ ﺍﳌﺸﺎﻛﻞ ﺍﻟﱵ ﻇﻬﺮﺕ ﰲ ﺍﻟﻨﺴﺨﺔ ﺍﻟﺴﺎﺑﻘﺔ‪ ،‬ﻛﻤﺎ ﻳﻄﻠﻖ ﻋﻠﻴﻬﺎ ﺍﻟﺒﻌﺾ ‪.HTML5‬‬
‫ﺧﺼﺎﺋﺺ ﻟﻐﺔ ‪HTML‬‬
‫ﻟﻐﺔ ‪ HTML‬ﻟﻴﺴﺖ ﻟﻐﺔ ﺑﺮﳎﺔ ﺑﺎﳌﻌﲎ ﺍﳌﻌﺮﻭﻑ ﻟﻠﻐﺎﺕ ﺍﻟﱪﳎﻴﺔ ﺍﻻﺧﺮﻯ ﺣﻴﺚ ﺍﻥ ﻫﺬﻩ ﺍﻟﻠﻐﺔ ﻻ‬
‫ﲢﺘﺎﺝ ﺍﱃ ﻣﺘﺮﺟﻢ ﻭﻧﺴﺘﻄﻴﻊ ﻛﺘﺎﺑﺔ ﺗﻌﻠﻴﻤﺎ‪‬ﺎ ﰲ ﺃﻱ ﳏﺮﺭ ﻧﺼﻮﺹ ﻣﺜﻞ ﺑﺮﻧﺎﻣﺞ ﺍﻟﺪﻓﺘﺮ ‪Notepad‬‬
‫ﺍﻟﻮﺳﻮﻡ ﺍﻷﺳﺎﺳﻴﺔ ﻟﺼﻔﺤﺔ ﺍﻟﻮﻳﺐ ‪Tags‬‬
‫ﻟﻨﺄﺧﺬ ﺍﻟﻮﺳﻮﻡ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬

‫‪6‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻭﺳﻢ ﺍﻟﻨﻬﺎﻳﺔ‬ ‫ﻭﺳﻢ ﺍﻟﺒﺪﺍﻳﺔ‬

‫>‪</HTML‬‬ ‫>‪<HTML‬‬
‫>‪</HEAD‬‬ ‫>‪<HEAD‬‬
‫>‪</TITLE‬‬ ‫>‪<TITLE‬‬
‫>‪</BODY‬‬ ‫>‪<BODY‬‬
‫ﻣﺎﺫﺍ ﺗﻼﺣﻆ؟ ﺃﻥ ﻛﻞ ﻣﻨﻬﺎ ﻳﺘﺄﻟﻒ ﻣﻦ ﺯﻭﺝ ﻣﻦ ﺍﻟﻮﺳﻮﻡ ﺃﺣﺪﳘﺎ ﻭﺳﻢ ﺍﻟﺒﺪﺍﻳﺔ‪ ،‬ﻭﺍﻵﺧﺮ ﻭﺳﻢ ﺍﻟﻨﻬﺎﻳﺔ‪.‬‬
‫ﻭﻳﺘﻤﻴﺰ ﻭﺳﻢ ﺍﻟﻨﻬﺎﻳﺔ ﺑﻮﺟﻮﺩ ﺍﻟﺮﻣﺰ ‪/‬‬
‫ﺍﻟﻌﻨﺎﺻﺮ ﺍﻷﺳﺎﺳﻴﺔ ﰲ ﻟﻐﺔ ‪HTML‬‬

‫ﺇﺫﻥ ﻓﻤﻠﻒ ‪ Html‬ﻳﺒﺪﺃ ﺩﺍﺋﻤﺎﹰ ﺑﺎﻟﻮﺳﻢ >‪ <HTML‬ﻭﻳﻨﺘﻬﻲ ﺑﺎﻟﻮﺳﻢ >‪.</HTML‬‬

‫ﺃﻣﺎ ﺍﻟﻮﺳﻢ >‪ <HEAD‬ﻓﻴﺤﺪﺩ ﺑﺪﺍﻳﺔ ﺍﳌﻘﻄﻊ ﺍﻟﺬﻱ ﳛﺘﻮﻱ ﻋﻠﻰ ﺍﳌﻌﻠﻮﻣﺎﺕ ﺍﳋﺎﺻﺔ ﺑﺘﻌﺮﻳﻒ ﺍﻟﺼﻔﺤﺔ‪.‬‬
‫ﻛﺎﻟﻌﻨﻮﺍﻥ ﺍﻟﻈﺎﻫﺮ ﻋﻠﻰ ﺷﺮﻳﻂ ﻋﻨﻮﺍﻥ ﺍﳌﺘﺼﻔﺢ‪ .‬ﻭﻫﺬﺍ ﺍﻟﻌﻨﻮﺍﻥ ﺑﺪﻭﺭﻩ ﳛﺘﺎﺝ ﻷﻥ ﻳﻮﺿﻊ ﺑﲔ ﺍﻟﻮﲰﲔ‪:‬‬
‫>‪ </TITLE> … <TITLE‬ﻭﺑﺎﻟﻄﺒﻊ ﳚﺐ ﻛﺘﺎﺑﺔ ﺍﻟﻮﺳﻢ >‪ </HEAD‬ﻟﻜﻲ ﻧﻨﻬﻲ ﻫﺬﺍ‬
‫ﺍﳌﻘﻄﻊ‪.‬‬

‫‪7‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻧﺄﰐ ﺇﱃ ﺍﻟﻮﺳﻢ >‪ <BODY‬ﻭﺍﻟﺬﻱ ﻳﺘﻢ ﻛﺘﺎﺑﺔ ﻧﺼﻮﺹ ﺻﻔﺤﺔ ﺍﻟﻮﻳﺐ ﺿﻤﻨﻪ‪ ،‬ﺑﺎﻹﺿﺎﻓﺔ ﺇﱃ ﺇﺩﺭﺍﺝ‬
‫ﺍﻟﺼﻮﺭ ﻭﺍﳉﺪﺍﻭﻝ ﻭﺑﺎﻗﻲ ﳏﺘﻮﻳﺎﺕ ﺍﻟﺼﻔﺤﺔ‪ .‬ﻭﻫﻮ ﺃﻳﻀﺎﹰ ﳛﺘﺎﺝ ﺇﱃ ﻭﺳﻢ ﺍﻹ‪‬ﺎﺀ >‪</BODY‬‬
‫ﺳﻨﺒﺪﺃ ﺑﺘﻄﺒﻴﻖ ﻫﺬﻩ ﺍﳌﻌﻠﻮﻣﺎﺕ ﺑﺼﻮﺭﺓ ﻋﻤﻠﻴﻪ؟ ﻗﻢ ﺑﻔﺘﺢ ﺑﺮﻧﺎﻣﺞ ﺍﳌﻔﻜﺮﺓ ﻭﺍﻛﺘﺐ ﻣﺎ ﻳﻠﻲ‪:‬‬
‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪This is a Test Web Page‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬
‫>‪<BODY‬‬
‫‪I'm Writing My First Web Page‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬

‫ﻭﺍﻵﻥ ﺳﻨﻘﻮﻡ ﲝﻔﻆ ﻣﺎ ﻛﺘﺒﻨﺎﻩ ﰲ ﻣﻠﻒ ﻭﺑﺄﻱ ﺍﺳﻢ ﳔﺘﺎﺭﻩ‪ .‬ﻭﻻ ﺗﻨﺴﻰ ﺃﻥ ﺍﻻﻣﺘﺪﺍﺩ ﺍﳌﺴﺘﺨﺪﻡ ﰲ ﺃﲰﺎﺀ ﻣﻠﻔﺎﺕ‬
‫‪ HTML‬ﻫﻮ ‪ .htm‬ﺃﻭ ‪ .html‬ﻭﻣﻦ ﺍﻷﻓﻀﻞ ﺃﻥ ﺗﻘﻮﻡ ﺑﺈﻧﺸﺎﺀ ﳎﻠﺪ ﻣﺴﺘﻘﻞ ﻋﻠﻰ ﺍﻟﻘﺮﺹ ﺍﻟﺼﻠﺐ‬
‫ﻟﻜﻲ ﲢﻔﻆ ﺑﻪ ﻣﻠﻔﺎﺗﻚ ﻓﻬﺬﺍ ﻳﺴﻬﻞ ﻋﻠﻴﻚ ﻋﻤﻠﻴﺔ ﺍﺳﺘﺮﺟﺎﻋﻬﺎ ﻟﻠﻌﺮﺽ ﺃﻭ ﺍﻟﺘﺤﺪﻳﺚ‬
‫ﻭﳌﺸﺎﻫﺪﺓ ﻧﺘﻴﺠﺔ ﻣﺎ ﻛﺘﺒﻨﺎﻩ‪ .‬ﻧﻘﻮﻡ ﺑﺘﺸﻐﻴﻞ ﻣﺘﺼﻔﺢ ﺍﻹﻧﺘﺮﻧﺖ ﻭﺍﺧﺘﺮ ﺍﻷﻣﺮ ‪ …Open‬ﻣﻦ ﻗﺎﺋﻤﺔ ‪.File‬‬
‫ﰒ ﺣﺪﺩ ﺍﳌﺴﺎﺭ ﺍﻟﺬﻱ ﻳﻮﺟﺪ ﺑﻪ ﺍﳌﻠﻒ‪.‬‬
‫ﺑﻌﺾ ﺍﳌﻼﺣﻈﺎﺕ ﻋﻨﺪ ﻛﺘﺎﺑﺔ ﺻﻔﺤﺎﺕ ﺍﻟﻮﻳﺐ‬

‫• ﻻ ﻳﻮﺟﺪ ﻓﺮﻕ ﺑﲔ ﻛﺘﺎﺑﺔ ﺍﻟﻮﺳﻮﻡ ﺑﺎﻷﺣﺮﻑ ﺍﻹﳒﻠﻴﺰﻳﺔ ﺍﻟﻜﺒﲑﺓ ‪ UPPERCASE‬ﺃﻭ ﺍﻷﺣﺮﻑ‬

‫ﺍﻟﺼﻐﲑﺓ ‪ .lowercase‬ﻟﺬﻟﻚ ﺗﺴﺘﻄﻴﻊ ﺍﻟﻜﺘﺎﺑﺔ ﺑﺄﻱ ﺷﻜﻞ ﻣﻨﻬﻤﺎ ﺃﻭ ﺣﱴ ﺍﻟﻜﺘﺎﺑﺔ ﺑﻜﻠﻴﻬﻤﺎ‪.‬‬
‫• ﺇﻥ ﺍﳌﺘﺼﻔﺤﺎﺕ ﻻ ﺗﺄﺧﺬ ﺑﻌﲔ ﺍﻻﻋﺘﺒﺎﺭ ﺍﻟﻔﺮﺍﻏﺎﺕ ﺍﻟﺰﺍﺋﺪﺓ ﺃﻭ ﺇﺷﺎﺭﺍﺕ ‪‬ﺎﻳﺔ ﺍﻟﻔﻘﺮﺍﺕ )ﺃﻱ ﻋﻨﺪﻣﺎ ﺗﻘﻮﻡ‬
‫ﺑﻀﻐﻂ ﻣﻔﺘﺎﺡ ‪ (Enter‬ﺍﻟﱵ ﲡﺪﻫﺎ ﻫﺬﻩ ﺍﳌﺘﺼﻔﺤﺎﺕ ﰲ ﻣﻠﻒ ‪ .Html‬ﻭﺑﻌﺒﺎﺭﺓ ﺃﺧﺮﻯ ﻓﺈﻧﻪ‬
‫ﺑﺎﺳﺘﻄﺎﻋﺘﻚ ﻛﺘﺎﺑﺔ ﻣﻠﻔﻚ ﺍﻟﺴﺎﺑﻖ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﱄ‪:‬‬

‫‪8‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 HTML ‫ ﻟﻐﺔ‬-‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‬

<HTML><HEAD><TITLE> This is a Test Web Page

</TITLE></HEAD><BODY>
I'm Writing My First Web Page</BODY></HTML>
:‫ﺃﻭ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﱄ‬
<HTML>
<HEAD>
<TITLE>
This
is a
Test
Web Page
</TITLE>
</HEAD>
<BODY>
I'm
Writing
My First
Web Page
</BODY>
</HTML>

:‫ﺬﺍ ﺍﻟﺸﻜﻞ‬ ‫ﺃﻭ ﺣﱴ‬

<HTML> <HEAD> <TITLE>
This is a Test Web Page
</TITLE>
</HEAD>
<BODY>

9 ‫ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬.‫ﺇﻋﺪﺍﺩ ﺃ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫‪I'm Writing My First Web Page‬‬

‫>‪</BODY‬‬
‫>‪</HTML‬‬
‫ﻭﰲ ﻛﻞ ﺍﳊﺎﻻﺕ ﺳﺘﺤﺼﻞ ﻋﻠﻰ ﻧﻔﺲ ﺍﻟﻨﺘﻴﺠﺔ‬
‫ﻭﺍﻵﻥ ﻗﺪ ﺗﺘﺴﺎﺀﻝ‪ ،‬ﺇ ﻛﻴﻒ ﳝﻜﻦ ﺍﻟﺘﺤﻜﻢ ﲟﻘﺪﺍﺭ ﺍﻟﻨﺺ ﺍﳌﻜﺘﻮﺏ ﰲ ﻛﻞ ﺳﻄﺮ ﻭﻛﻴﻒ ﳝﻜﻦ ﲢﺪﻳﺪ ‪‬ﺎﻳﺔ‬
‫ﺍﻟﻔﻘﺮﺓ ﻭﺑﺪﺍﻳﺔ ﺍﻟﻔﻘﺮﺓ ﺍﻟﱵ ﺗﻠﻴﻬﺎ؟ ﻭﺍﻹﺟﺎﺑﺔ ﻋﻠﻴﻪ ﻫﻲ‪:‬‬
‫ﺳﻮﻑ ﻧﺴﺘﺨﺪﻡ ﺍﻟﻮﺳﻢ >‪ <BR‬ﻟﺘﺤﺪﻳﺪ ﺍﻟﻨﻬﺎﻳﺔ ﻟﻠﺴﻄﺮ‪ .‬ﻭﺍﻟﺒﺪﺀ ﺑﺴﻄﺮ ﺟﺪﻳﺪ )ﻻﺣﻆ ﺃﻥ ﻫﺬﺍ ﺍﻟﻮﺳﻢ‬
‫ﻣﻔﺮﺩ‪ ،‬ﺃﻱ ﻟﻴﺲ ﻟﻪ ﻭﺳﻢ ‪‬ﺎﻳﺔ(‪.‬‬
‫ﻣﻼﺣﻈﺔ‪ :‬ﺑﻌﺾ ﺍﻟﻮﺳﻮﻡ ﻣﻔﺮﺩﺓ ﻭﻟﻴﺲ ﳍﺎ ‪‬ﺎﻳﺔ‬
‫ﻭﻧﻌﻮﺩ ﺇﱃ ﺍﳌﺜﺎﻝ ﺍﻟﺴﺎﺑﻖ‪ ،‬ﻗﻢ ﺑﺘﻌﺪﻳﻞ ﺍﳌﻠﻒ ﻟﻜﻲ ﻳﺼﺒﺢ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﱄ‬
‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪This is a Test Web Page‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬
‫>‪<BODY‬‬
‫>‪<BR> I'm Writing My First <BR‬‬
‫‪Web Page‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬
‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪This is a Test Web Page‬‬
‫>‪</TITLE‬‬
‫>‪</HEAD‬‬
‫>‪<BODY‬‬

‫‪10‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫>‪I'm <P> Writing My <P‬‬

‫‪My First Web Page‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬
‫ﺃﻣﺎ ﺍﻟﻔﺮﺍﻏﺎﺕ ﻓﺘﻌﺘﱪ ﺭﻣﻮﺯﺍﹰ ﺧﺎﺻﺔ ﻟﺬﻟﻚ ﻻ ﻧﺴﺘﻄﻴﻊ ﺍﻟﺘﺤﻜﻢ ‪‬ﺎ ﻭﺑﻌﺪﺩﻫﺎ ﺇﻻ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻢ‬
‫;‪) &nbsp‬ﻭﺍﻷﺣﺮﻑ ﻫﻲ ﺍﺧﺘﺼﺎﺭ ﻟﻠﻌﺒﺎﺭﺓ ‪ .(Non Breakable Space‬ﻭﺇﺫﺍ ﺃﺭﺩﺕ ﺇﺩﺧﺎﻝ‬
‫ﻋﺪﺓ ﻓﺮﺍﻏﺎﺕ ﺑﲔ ﻧﺺ ﻭﺁﺧﺮ ﻣﺎ ﻋﻠﻴﻚ ﺇﻻ ﻛﺘﺎﺑﺔ ﻫﺬﺍ ﺍﻟﻮﺳﻢ ﺑﻨﻔﺲ ﻋﺪﺩ ﺍﻟﻔﺮﺍﻏﺎﺕ ﺍﳌﻄﻠﻮﺏ‪ .‬ﻛﻤﺎ ﳚﺐ‬
‫ﻋﻠﻴﻚ ﺍﻟﺘﻘﻴﺪ ﺑﺎﻷﺣﺮﻑ ﺍﻟﺼﻐﲑﺓ ﻫﻨﺎ‪.‬‬
‫ﺇﺫﻥ ﻟﻨﻌﺪ ﺇﱃ ﺍﳌﻔﻜﺮﺓ ﻭﻧﻜﺘﺐ ﻣﻠﻔﻨﺎ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﱄ‪:‬‬
‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫‪This is a Test Web Page‬‬
‫>‪</TITLE></HEAD‬‬
‫>‪<BODY‬‬
‫;‪Hello, &nbsp; &nbsp; &nbsp‬‬
‫;‪I'm &nbsp; &nbsp; &nbsp;Writing &nbsp; &nbsp‬‬
‫;‪&nbsp; My &nbsp; &nbsp; &nbsp; Ffirst &nbsp; &nbsp‬‬
‫‪&nbsp; Web Page‬‬
‫>‪</BODY‬‬
‫>‪</HTML‬‬

‫‪11‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﶈﺎﺿﺮﺓ ﺍﻟﺜﺎﻟﺜﺔ‬
‫ﺍﻷﻟﻮﺍﻥ ‪Colors‬‬

‫ﺧﺼﺎﺋﺺ ﺍﻟـ ‪BODY‬‬

‫ﺳﻨﻘﻮﻡ ﺑﺎﻟﺘﻌﺮﻑ ﻋﻠﻰ ﺍﳋﺼﺎﺋﺺ ﺍﻟﱵ ﳝﻜﻦ ﺇﺿﺎﻓﺘﻬﺎ ﺇﱃ ﺍﻟﻮﺳﻢ >‪ <BODY‬ﻣﻦ ﺃﺟﻞ ﺍﻟﺘﺤﻜﻢ‬
‫ﺑﺎﻟﺸﻜﻞ ﺍﻟﻌﺎﻡ ﻟﻠﺼﻔﺤﺔ‪ ،‬ﻭﺧﺼﻮﺻﺎ ﻓﻴﻤﺎ ﻳﺘﻌﻠﻖ ﺑﺎﻷﻟﻮﺍﻥ‪.‬‬
‫ﻋﻨﺪﻣﺎ ﻻ ﻧﻘﻮﻡ ﳓﻦ ﺑﺘﺤﺪﻳﺪ ﺇﻋﺪﺍﺩﺍﺕ ﻟﻠﻮﻥ ﺍﳋﻠﻔﻴﺔ ﻭﻟﻮﻥ ﺍﳋﻂ ﻓﺎﻥ ﺍﳌﺴﺘﻌﺮﺽ ﻳﻌﺘﻤﺪ ﺧﻠﻔﻴﺔ ﺭﻣﺎﺩﻳﺔ ﻭﺧﻂ‬
‫ﺻﻐﲑ ﻧﺴﺒﻴﺎﹰ ﻟﻮﻧﻪ ﺃﺳﻮﺩ‬
‫ﻛﻢ ﺫﻛﺮﻧﺎ ﰲ ﺍﶈﺎﺿﺮﺓ ﺍﳌﺎﺿﻴﺔ ﺑﺎﻥ ﳏﺘﻮﻳﺎﺕ ﺍﻟﺼﻔﺤﺔ ﻣﻦ ﺍﻟﻮﺍﻥ ﻭﺻﻮﺭ ﻭﺟﺪﺍﻭﻝ ﺗﻜﺘﺐ ﺿﻤﻦ ﺍﻟﻮﲰﲔ‬
‫‪<BODY> ...</BODY> .‬‬
‫ﻧﻄﻠﻖ ﺍﻟﻮﺳﻮﻡ ﻛﻠﻤﺔ ﺧﺎﺻﻴﺔ )‪ (Attribute‬ﻋﻠﻰ ﺍﻟﺘﻌﺎﺑﲑ ﺍﻟﱵ ﺗﻀﺎﻑ ﺇﱃ‪ ،‬ﻣﻦ ﺃﺟﻞ ﲢﺪﻳﺪ ﺍﻟﻜﻴﻔﻴﺔ‬
‫ﺃﻭ ﺍﻟﺸﻜﻞ ﺍﻟﺬﻱ ﺗﻌﻤﻞ ‪‬ﺎ ﻫﺬﻩ ﺍﻟﻮﺳﻮﻡ‪ .‬ﻭﺑﻌﺒﺎﺭﺓ ﺃﺧﺮﻯ ﻓﺈﻥ ﺍﻟﻮﺳﻢ ﻳﻘﻮﻡ ﺑﺈﺧﺒﺎﺭ ﺍﳌﺘﺼﻔﺢ ﻋﻦ ﺍﻟﻌﻤﻞ‬
‫ﺍﻟﺬﻱ ﳚﺐ ﺍﻟﻘﻴﺎﻡ ﺑﻪ ﺃﻣﺎ ﺍﳋﺎﺻﻴﺔ ﻓﺘﺤﺪﺩ ﺍﻟﻜﻴﻔﻴﺔ ﺍﻟﱵ ﺳﻴﺘﻢ ‪‬ﺎ ﺃﺩﺍﺀ ﻫﺬﺍ ﺍﻟﻌﻤﻞ‪.‬‬
‫ﺍﻧﻈﺮ ﺍﱃ ﺍﻟﺸﻔﺮﺓ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬
‫>"‪<BODY BGCOLOR"=FFFFFF‬‬
‫‪...‬‬
‫>‪</BODY‬‬
‫ﻟﻘﺪ ﻗﻤﻨﺎ ﺑﺈﺿﺎﻓﺔ اﻟﺨﺎﺻﯿﺔ ‪ BGCOLOR‬إﻟﻰ اﻟﻮﺳﻢ >‪ ، <BODY‬وھﻲ ﺗﻘﻮم ﺑﺘﺤﺪﯾﺪ‬
‫ﻟﻮن اﻟﺨﻠﻔﯿﺔ ﻟﻠﺼﻔﺤﺔ‪ .‬أﻣﺎ ‪ FFFFFF‬ﻓﮭﻲ اﻟﻘﯿﻤﺔ اﻟﺘﻲ ﺗﻤﺜﻞ اﻟﻠﻮن اﻟﻤﺨﺘﺎر وھﻮ ھﻨﺎ‬
‫اﻟﻠﻮن اﻷﺑﯿﺾ‪) ،‬ﻻﺣﻆ أﻧﮭﺎ ﻣﻜﺘﻮﺑﺔ ﺑﯿﻦ إﺷﺎرﺗﻲ " " ( وﻟﻮ أردت ﺗﻤﺜﯿﻞ اﻟﻠﻮن اﻷﺳﻮد‬
‫ﻟﻜﺘﺒﺖ اﻟﺮﻣﺰ ‪ .000000‬أو اﻟﺮﻣﺰ ‪ CC6699‬ﻟﻠﻮن اﻷزرق اﻟﻔﺎﺗﺢ‪......‬‬

‫ﺗﻼﺣﻆ أن اﻟﻘﯿﻢ اﻟﺴﺎﺑﻘﺔ ﻣﻜﻮﻧﺔ ﻣﻦ ﺳﺘﺔ رﻣﻮز‪ ،‬وھﻲ ﻣﻜﺘﻮﺑﺔ ﺑﺎﻟﺼﯿﻐﺔ اﻟﺘﺎﻟﯿﺔ‪-:‬‬

‫‪12‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻫﻨﺎﻙ ﺛﻼﺛﺔ ﺃﻟﻮﺍﻥ ﺃﺳﺎﺳﻴﺔ ﻫﻲ ﺍﻷﲪﺮ ﻭﺍﻷﺧﻀﺮ ﻭﺍﻷﺯﺭﻕ‪ ،‬ﻭﻟﻜﻞ ﻣﻨﻬﺎ ﻳﻮﺟﺪ ‪ 256‬ﺩﺭﺟﺔ ﻟﻮﻧﻴﺔ ﻭﻳﻌﱪ ﻋﻦ‬
‫ﻫﺬﻩ ﺍﻟﺪﺭﺟﺎﺕ ﺑﺎﻷﺭﻗﺎﻡ ﻣﻦ ‪ 000‬ﻭﺣﱴ ‪ .255‬ﻭﻣﻦ ﺧﻼﻝ ﻣﺰﺝ ﻫﺬﻩ ﺍﻷﻟﻮﺍﻥ ﺑﺪﺭﺟﺎ‪‬ﺎ ﺍﻟﻠﻮﻧﻴﺔ ﺍﳌﺨﺘﻠﻔﺔ‬
‫ﳓﺼﻞ ﻋﻠﻰ ﺍﻷﻟﻮﺍﻥ ﺍﻷﺧﺮﻯ‪.‬‬
‫ﺇﻥ ﺃﻱ ﻟﻮﻥ ﻫﻮ ﻣﺰﻳﺞ ‪-‬ﻭﺑﻨﺴﺒﺔ ﻣﻌﻴﻨﺔ ﻣﻦ ﺍﻟﺪﺭﺟﺎﺕ‪ -‬ﻣﻦ ﻫﺬﻩ ﺍﻷﻟﻮﺍﻥ ﺍﻟﺜﻼﺛﺔ *‬
‫ﻣﻼﺣﻈﺔ ﻣﻬﻤﺔ‪:‬‬
‫ﺑﻌﺾ ﺍﳌﺘﺼﻔﺤﺎﺕ ﻻ ﺗﺘﻌﺮﻑ ﻋﻠﻰ ﺭﻣﻮﺯ ﺍﻷﻟﻮﺍﻥ ﺇﻻ ﻋﺸﺮﻱ ﺑﻮﺿﻊ ﺇﺷﺎﺭﺓ ‪ #‬ﻗﺒﻞ ﻫﺬﻩ ﺍﻟﺮﻣﻮﺯ‪ ،‬ﻟﺬﻟﻚ‬
‫ﻣﻦ ﺍﻷﻓﻀﻞ ﺍﺳﺘﺨﺪﺍﻣﻬﺎ ﺩﺍﺋﻤﺎﹰ‪.‬‬

‫ﻟﻜﻦ ﻣﻦ ﺃﻱ ﺟﺎﺀﺕ ﺍﻟﺮﻣﻮﺯ ‪ FFFFFF‬ﻭﺍﻟﱵ ﻋﱪﺕ ﻋﻦ ﺍﻟﻠﻮﻥ ﺍﻷﺑﻴﺾ ‪‬ﺎ‪ .‬ﺇ‪‬ﺎ ﺑﺒﺴﺎﻃﺔ ﺃﺭﻗﺎﻡ…‬
‫ﻣﻜﺘﻮﺑﺔ ﺑﺎﻟﻨﻈﺎﻡ ﺍﻟﺴﺪﺍﺳﻲ ﻋﺸﺮﻱ )ﻧﻈﺎﻡ ﻋﺪﺩﻱ ﺃﺳﺎﺳﻪ ﺍﻟﺮﻗﻢ ‪ 16‬ﻭﻳﻌﱪ ﻋﻨﻪ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻷﺭﻗﺎﻡ ﺍﻟﻌﺎﺩﻳﺔ‬
‫ﻣﻦ ‪ 0‬ﺇﱃ ‪ 9‬ﻭﺍﻟﺮﻣﻮﺯ ‪ .( A,B,C,D,E,F‬ﻓﺎﻟﺮﻗﻢ ‪ 255‬ﺑﺎﻟﻨﻈﺎﻡ ﺍﻟﻌﺸﺮﻱ ﺍﻟﻌﺎﺩﻱ ﻳﻜﺎﻓﺌﻪ ﺍﻟﺮﻗﻢ ‪FF‬‬
‫ﺑﺎﻟﻨﻈﺎﻡ ﺍﻟﺴﺪﺍﺳﻲ ﻋﺸﺮﻱ‪.‬‬
‫ﺇﺫﻥ ﻓﺎﻟﺮﻗﻢ ﺍﻟﺴﺪﺍﺳﻲ ﻋﺸﺮﻱ ‪ FF‬ﻋﻠﻰ ﺍﻟﻴﺴﺎﺭ ﳝﺜﻞ ﺍﻟﺪﺭﺟﺔ ‪ 255‬ﻟﻠﻮﻥ ﺍﻷﲪﺮ‪ .‬ﻭﺍﻟﺮﻗﻢ ‪ FF‬ﰲ ﺍﻟﻮﺳﻂ‬
‫ﳝﺜﻞ ﺍﻟﺪﺭﺟﺔ ‪ 255‬ﻣﻦ ﺍﻟﻠﻮﻥ ﺍﻷﺧﻀﺮ‪ .‬ﻭﺍﻟﺮﻗﻢ‪ FF‬ﻋﻠﻰ ﺍﻟﻴﻤﲔ ﳝﺜﻞ ﺍﻟﺪﺭﺟﺔ ‪ 255‬ﻣﻦ ﺍﻟﻠﻮﻥ ﺍﻷﺯﺭﻕ‪.‬‬
‫ﻭﻋﻠﻰ ﻫﺬﺍ ﺍﳌﻨﻮﺍﻝ ﻳﻌﱪ ﻋﻦ ﺍﻟﻠﻮﻥ ﺍﻷﺯﺭﻕ ﺍﻟﻔﺎﺗﺢ ﺑﺎﻟﺮﻗﻢ ﺍﻟﺴﺪﺍﺳﻲ ‪CC 6699 :‬ﺃﻣﺎ ﺍﻟﻠﻮﻥ ﺍﻷﺳﻮﺩ‬
‫ﻓﺮﻗﻤﻪ ﻫﻮ ‪.000000‬‬
‫ﺍﻟﺘﻌﺎﻣﻞ ﻣﻊ ﺍﺳﻢ ﺍﻟﻠﻮﻥ ﺑﺸﻜﻞ ﺻﺮﻳﺢ‬
‫‪Black‬‬ ‫‪Gray‬‬ ‫‪Silver‬‬ ‫‪White‬‬

‫‪Yellow‬‬ ‫‪Lime‬‬ ‫‪Aqua‬‬ ‫‪Fuchsia‬‬

‫‪Red‬‬ ‫‪Green‬‬ ‫‪Blue‬‬ ‫‪Purple‬‬

‫‪Maroon‬‬ ‫‪Olive‬‬ ‫‪Navy‬‬ ‫‪Teal‬‬

‫ﻭﻧﻌﻮﺩ ﺇﱃ ﺍﻟﻮﺳﻮﻡ ﻭ ﺧﺼﺎﺋﺼﻬﺎ ‪...‬‬

‫‪<BODY BGCOLOR"=#FFFFFF "BACKGROUND"=image‬‬

‫>"‪path‬‬
‫‪...‬‬
‫>‪</BODY‬‬

‫‪13‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺗﻘﻮﻡ ﺍﳋﺎﺻﻴﺔ ‪ BACKGROUND‬ﺑﺘﺤﺪﻳﺪ ﺻﻮﺭﺓ ﻛﺨﻠﻔﻴﺔ )ﻭﺭﻕ ﺟﺪﺭﺍﻥ( ﻟﻠﺼﻔﺤﺔ ﺣﻴﺚ‬

‫‪image path‬ﲤﺜﻞ ﺍﳌﺴﺎﺭ ﺍﻟﻜﺎﻣﻞ ﺍﻟﺼﻮﺭﺓ‬
‫ﺑﻌﺾ ﺧﺼﺎﺋﺺ ﺍﻟﻮﺳﻢ ‪BODY‬‬
‫ﺭﲟﺎ ﻻﺣﻈﺖ ﺧﻼﻝ ﺍﺳﺘﺨﺪﺍﻣﻚ ﻟﻺﻧﺘﺮﻧﺖ ﺃﻥ ﻣﻌﻈﻢ ﺍﻟﻮﺻﻼﺕ ﺍﻟﺘﺸﻌﺒﻴﺔ )‪ (Links‬ﺍﻟﱵ ﺗﻨﻘﺮ ﻋﻠﻴﻬﺎ‬
‫ﻟﺘﻨﻘﻠﻚ ﺇﱃ ﺻﻔﺤﺎﺕ ﺃﻭ ﻣﻮﺍﻗﻊ ﺃﺧﺮﻯ ﻋﻠﻰ ﺍﻟﺸﺒﻜﺔ ﻫﻲ ﺩﺍﺋﻤﺎﹰ ﳑﻴﺰﺓ ﺑﺎﻟﻠﻮﻥ ﺍﻷﺯﺭﻕ‪ ،‬ﻭﺃﻥ ﺍﻟﻮﺻﻼﺕ ﺍﻟﱵ‬
‫ﻗﻤﺖ ﺑﺰﻳﺎﺭ‪‬ﺎ ﻓﻌﻼﹰ ﻗﺪ ﲢﻮﻝ ﻟﻮ‪‬ﺎ ﺇﱃ ﺍﻟﻘﺮﻣﺰﻱ‪ .‬ﻫﺬﻩ ﻫﻲ ﺍﻷﻟﻮﺍﻥ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﺍﻟﱵ ﺗﻌﺘﻤﺪﻫﺎ ﺍﳌﺘﺼﻔﺤﺎﺕ‪.‬‬
‫ﻟﻜﻦ ﻗﺪ ﻻ ﻳﻌﺠﺒﻚ ﺫﻟﻚ ﻭﺗﺮﻳﺪ ﺗﻐﻴﲑ ﻫﺬﺍ ﺍﻟﻨﻈﺎﻡ‪.‬‬
‫ﺳﻨﻮﺿﺢ ﺍﳋﺼﺎﺋﺺ ﺍﻟﱵ ﺗﻘﻮﻡ ﺑﺎﻟﺘﺤﻜﻢ ﰲ ﺃﻟﻮﺍﻥ ﺍﻟﻨﺼﻮﺹ ﺑﺎﳉﺪﻭﻝ ﺍﻟﺘﺎﱄ‪:‬‬

‫ﺍﻟﻮﻇﻴﻔﺔ‬ ‫ﺍﳋﺎﺻﻴﺔ‬

‫"‪ TEXT="#rrggbb‬ﲢﺪﻳﺪ ﻟﻮﻥ ﺍﻟﻨﺺ ﺍﻷﺳﺎﺳﻲ ﻟﻠﺼﻔﺤﺔ‬

‫"‪ LINK="#rrggbb‬ﲢﺪﻳﺪ ﻟﻮﻥ ﺍﻟﻮﺻﻼﺕ ﺍﻟﺘﺸﻌﺒﻴﺔ‬

‫ﲢﺪﻳﺪ ﻟﻮﻥ ﺍﻟﻮﺻﻼﺕ ﺍﻟﺘﺸﻌﺒﻴﺔ ﺍﻟﱵ ﲤﺖ‬

‫"‪VLINK="#rrggbb‬‬
‫ﺯﻳﺎﺭ‪‬ﺎ ‪visited links‬‬

‫ﲢﺪﻳﺪ ﻟﻮﻥ ﺍﻟﻮﺻﻠﺔ ﺍﻟﺘﺸﻌﺒﻴﺔ ﺍﻟﻔﻌﺎﻟﺔ ﺃﻱ ﻋﻨﺪﻣﺎ‬

‫"‪ALINK="#rrggbb‬‬
‫ﻳﺘﻢ ﺍﻟﻨﻘﺮ ﻋﻠﻴﻬﺎ ‪active links‬‬

‫‪14‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﶈﺎﺿﺮﺓ ﺍﻟﺮﺍﺑﻌﺔ‬
‫ﺍﻟﺘﻨﺴﻴﻖ ﰲ ﻟﻐﺔ ‪HTML‬‬

‫ﺃﳕﺎﻁ ﺍﳋﻄﻮﻁ ‪Font's Types‬‬

‫ﻳﻮﺟﺪ ﺃﻧﻮﺍﻉ ﻛﺜﲑﺓ ﻣﻦ ﺍﳋﻄﻮﻁ ﺍﻟﱵ ﲤﻜﻨﻨﺎ ﻣﻦ ﺇﺿﺎﻓﺔ ﺍﻟﺘﺄﺛﲑﺍﺕ ﺇﱃ ﺍﻟﻨﺼﻮﺹ)ﺍﻟﻔﻘﺮﺍﺕ‪ ،‬ﻭﺍﻟﻌﻨﺎﻭﻳﻦ(‪.‬‬
‫ﻭﻓﻴﻤﺎ ﻳﻠﻲ ﺍﻟﻮﺳﻮﻡ ﺍﻟﱵ ﺗﻐﲑ ﻣﻦ ﳕﻂ ﺍﳋﻂ ﻣﺜﻞ )ﺍﻟﻐﺎﻣﻖ‪ ،‬ﺍﳌﺎﺋﻞ‪ ،‬ﺍﳌﺴﻄﺮ‪ ،‬ﺍﳌﻨﺨﻔﺾ‪ ،‬ﺍﳌﺮﺗﻔﻊ‪(..،‬ﻭﻏﲑ‬
‫ﺫﻟﻚ‪.‬‬
‫ﺍﻟﺘﻨﺴﻴﻘﺎﺕ ﻭﺍﻟﺘﺄﺛﲑﺍﺕ ﺍﻟﱵ ﳝﻜﻦ ﺇﺿﺎﻓﺘﻬﺎ ﺇﱃ ﺍﻟﻨﺼﻮﺹ‬
‫ﻓﻴﻤﺎ ﻳﻠﻲ ﺍﻟﻮﺳﻮﻡ ﺍﳋﺎﺻﺔ ‪‬ﺎ ﻣﺘﺒﻮﻋﺔ ﲟﺜﺎﻝ ﻭﻧﺘﻴﺠﺘﻪ‪:‬‬
‫‪ .1‬ﺍﳋﻂ ﺍﻟﻐﺎﻣﻖ )ﺍﻷﺳﻮﺩ ﺍﻟﻌﺮﻳﺾ(‪ ،‬ﻭﻧﺴﺘﺨﺪﻡ ﻟﻪ ﺍﻟﻮﺳﻮﻡ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬
‫>‪<B> ... </B‬‬
‫>‪<STRONG> ... </STRONG‬‬

‫‪This is Bold Text‬‬ ‫>‪<B> Bold Text </B‬‬

‫‪This is Strong Text‬‬ ‫>‪<STRONG> Strong Text </STRONG‬‬
‫ﺍﳋﻂ ﺍﳌﺎﺋﻞ ﻭﻧﺴﺘﺨﺪﻡ ﻟﻪ ﺍﻟﻮﺳﻮﻡ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬ ‫‪.2‬‬
‫>‪<I> ... </I‬‬
‫>‪<EM> ... </EM‬‬

‫‪This is Italic Text‬‬ ‫>‪<I> Italic Text </I‬‬

‫>‪This is Emphasized Text <EM> Emphasized Text </EM‬‬

‫‪ .3‬ﺍﳋﻂ ﺍﳌﺴﻄﺮ ‪ Under line‬ﻭﻧﺴﺘﺨﺪﻡ ﻟﻪ ﺍﻟﻮﺳﻮﻡ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬
‫>‪<U> ... </U‬‬
‫>‪This is Underlined Text <U> Underlined Text </U‬‬
‫‪ .4‬ﺍﳋﻂ ﺍﳌﺮﺗﻔﻊ ﻭﻧﺴﺘﺨﺪﻡ ﻟﻪ ﺍﻟﻮﺳﻮﻡ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬
‫>‪<SUP> ... </SUP‬‬
‫‪This is Superscript Text‬‬ ‫>‪<SUP> Superscript Text </SUP‬‬

‫‪15‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 HTML ‫ ﻟﻐﺔ‬-‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‬

:‫ ﺍﳋﻂ ﺍﳌﻨﺨﻔﺾ ﻭﻧﺴﺘﺨﺪﻡ ﻟﻪ ﺍﻟﻮﺳﻮﻡ ﺍﻟﺘﺎﻟﻴﺔ‬.5

<SUB> ... </SUB>
This is Subscript Text <SUB> Subscript Text </SUB>
:‫ ﺍﳋﻂ ﻟﻜﺒﲑ ﻭﻧﺴﺘﺨﺪﻡ ﻟﻪ ﺍﻟﻮﺳﻮﻡ ﺍﻟﺘﺎﻟﻴﺔ‬.6
<BIG> ... </BIG>
This is Big Text <BIG> Big Text </BIG>
:‫ ﺍﳋﻂ ﺍﻟﺼﻐﲑ ﻭﻧﺴﺘﺨﺪﻡ ﻟﻪ ﺍﻟﻮﺳﻮﻡ ﺍﻟﺘﺎﻟﻴﺔ‬.7
<SMALL> ... </SMALL>
This is Small Text <SMALL> Small Text </SMALL>
:‫ ﻧﺺ ﻳﻌﺘﺮﺿﻪ ﺧﻂ ﻭﻧﺴﺘﺨﺪﻡ ﻟﻪ ﺍﻟﻮﺳﻮﻡ ﺍﻟﺘﺎﻟﻴﺔ‬.8
<STRIKE> ... </STRIKE>
<S> ... </S>
</del> <del> ...
This is Striked Text <STRIKE> Striked Text </SRTIKE>
This is Striked Text <S> Striked Text </S>
This is Striked Text < del > Striked Text </ del >
TeleType ‫ ﻧﺺ ﺍﻵﻟﺔ ﺍﻟﻄﺎﺑﻌﺔ‬.9
<TT> ... </TT>
This is TeleType Text <TT> TeleType Text </TT>

‫ﻣﺜﺎﻝ ﳚﻤﻊ ﺑﲔ ﻋﺪﺓ ﺗﻨﺴﻴﻘﺎﺕ‬

<B><I><U>
This is a Bold, Italic and Underlined Text
</U> </I> </B>
‫ﺍﻟﻨﺎﺗﺞ‬
This is a Bold, Italic and Underlined Text

16 ‫ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬.‫ﺇﻋﺪﺍﺩ ﺃ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻋﻨﺪ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻮﻡ ﺍﳌﺘﻌﺪﺩﺓ ﰲ ﻣﻘﻄﻊ ﻭﺍﺣﺪ ﳚﺐ ﻣﺮﺍﻋﺎﺓ ﻋﺪﻡ ﺍﻟﺘﺪﺍﺧﻞ ﺑﻴﻨﻬﺎ!‪ ...‬ﻛﻴﻒ؟ ﺃﻧﻈﺮ ﺇﱃ ﺍﻟﺮﺳﻢ‬
‫ﺍﻟﺘﺎﱄ‪:‬‬

‫ﻭﻧﺺ ﺍﻵﻟﺔ ﺍﻟﻄﺎﺑﻌﺔ ﻳﻌﺮﻑ ﺃﻳﻀﺎﹰ ﺑﺎﻟﻨﺺ ﻣﻮﺣ‪‬ﺪ ﺍﳌﺴﺎﻓﺎﺕ ‪.Monospaced Text‬‬
‫ﻭﻟﺘﻮﺿﻴﺢ ﻫﺬﺍ ﺍﳌﻔﻬﻮﻡ ﺇﻟﻴﻚ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‪:‬‬
‫ﺇﺫﺍ ﺃﺧﺬﻧﺎ ﺍﳊﺮﻓﲔ ‪ m,i‬ﻭﻛﺘﺒﻨﺎ ﻛﻞ ﻣﻨﻬﻤﺎ ﻋﺸﺮ ﻣﺮﺍﺕ ﻣﺘﺘﺎﻟﻴﺔ ﻧﻼﺣﻆ ﺃﻥ ﺍﳌﺴﺎﺣﺔ ﺍﻟﱵ ﺷﻐﻠﻬﺎ ﺍﳊﺮﻑ‬
‫‪ m‬ﻫﻲ ﺃﺿﻌﺎﻑ ﺍﳌﺴﺎﺣﺔ ﺍﻟﱵ ﺷﻐﻠﻬﺎ ﺍﳊﺮﻑ ‪i‬‬
‫‪iiiiiiiiii‬‬
‫‪mmmmmmmmmm‬‬
‫ﺃﻣﺎ ﻋﻨﺪ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻢ >‪ </TT> ... <TT‬ﻓﺈﻥ ﺍﳌﺴﺎﺣﺔ ﺍﻟﱵ ﻳﺸﻐﻠﻬﺎ ﻛﻼ ﺍﳊﺮﻓﲔ ﺗﺼﺒﺢ‬
‫ﻣﻮﺣﺪﺓ‬

‫‪17‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﶈﺎﺿﺮﺓ ﺍﳋﺎﻣﺴﺔ‬
‫ﺍﻟﺘﻨﺴﻴﻖ ﰲ ﻟﻐﺔ ‪HTML‬‬

‫ﺍﳋﻄﻮﻁ ‪Fonts‬‬
‫ﺍﻹﻋﺪﺍﺩﺍﺕ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺨﻂ ﻫﻲ ﺧﻂ ﻋﺎﺩﻱ‪ ،‬ﻧﻮﻋﻪ ‪ Times New Roman‬ﻭﺣﺠﻤﻪ ‪) 3‬ﲟﻘﻴﺎﺱ‬
‫ﻣﺘﺼﻔﺤﺎﺕ ﺍﻹﻧﺘﺮﻧﺖ(‪.‬‬
‫ﺍﻟﻮﺳﻢ ﺍﳋﺎﺹ ﺑﺎﳋﻄﻮﻁ ﻫﻮ‬
‫>‪<FONT> ... </FONT‬‬
‫ﻭﻫﻮ ﻳﻘﻮﻡ ﺑﺎﻟﺘﺤﻜﻢ ﺑﺎﳋﻄﻮﻁ ﻣﻦ ﺣﻴﺚ ﺍﻟﻨﻮﻉ ﻭﺍﻟﻠﻮﻥ ﻭﺍﳊﺠﻢ‪ .‬ﺃﻣﺎ ﺍﳋﺼﺎﺋﺺ ﺍﻟﱵ ﻧﺴﺘﺨﺪﻣﻬﺎ ﻣﻊ ﻫﺬﺍ‬
‫ﺍﻟﻮﺳﻢ‬

‫ﺍﻟﻮﻇﻴﻔﺔ‬ ‫ﺍﳋﺎﺻﻴﺔ‬

‫ﺗﻘﻮﻡ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺑﺘﺤﺪﻳﺪ ﻧﻮﻉ ﺍﳋﻂ ﺍﻟﺬﻱ ﻧﺮﻳﺪﻩ‪ ،‬ﻭﻗﺪ ﻧﻘﻮﻡ ﺑﺘﺤﺪﻳﺪ ﺃﻛﺜﺮ ﻣﻦ ﻧﻮﻉ ﻣﻌﺎﹰ‪ .‬ﻭﰲ‬
‫ﻫﺬﻩ ﺍﳊﺎﻟﺔ ﺇﺫﺍ ﱂ ﻳﺘﻮﺍﺟﺪ ﺍﳋﻂ ﺍﶈﺪﺩ ﺃﻭﻻﹰ ﻋﻠﻰ ﺟﻬﺎﺯ ﺍﻟﺸﺨﺺ ﺍﻟﺬﻱ ﻳﺘﺼﻔﺢ ﺍﳌﻮﻗﻊ ﻳﺘﻢ ﺍﻋﺘﻤﺎﺩ‬
‫ﺍﳋﻂ ﺍﻟﺜﺎﱐ ‪ ...‬ﻭﻫﻜﺬﺍ‬
‫‪<FONT FACE="Traditional Arabic, Arabic Transparent,‬‬ ‫‪Face‬‬
‫>"‪Simplified Arabic‬‬
‫‪... Text ...‬‬
‫>‪</FONT‬‬
‫ﻃﺒﻌﺎﹰ ﻻ ﺗﻨﺲ ﺃﻥ ﺗﺘﺄﻛﺪ ﻣﻦ ﻛﺘﺎﺑﺔ ﺃﲰﺎﺀ ﺍﳋﻄﻮﻁ ﺑﺎﻟﺼﻮﺭﺓ ﺍﻟﺼﺤﻴﺤﺔ ﻫﺠﺎﺋﻴﺎﹰ‪.‬‬
‫ﺃﻣﺎ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﻓﺘﺤﺪﺩ ﻟﻮﻥ ﺍﳋﻂ‪ ،‬ﻭﺫﻟﻚ ﺑﻨﻔﺲ ﻣﺒﺎﺩﺉ ﲢﺪﻳﺪ ﺍﻷﻟﻮﺍﻥ ﺍﻟﱵ ﲢﺪﺛﻨﺎ ﻋﻨﻬﺎ ﰲ‬
‫ﺍﶈﺎﺿﺮﺍﺕ ﺍﳌﺎﺿﻴﺔ‬
‫>"‪<FONT COLOR="#FF0000‬‬ ‫‪Color‬‬
‫‪... Text ...‬‬
‫>‪</FONT‬‬

‫‪18‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻭﻟﺘﺤﺪﻳﺪ ﺣﺠﻢ ﺍﳋﻂ ﻧﺴﺘﺨﺪﻡ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ‪ .‬ﻭﻓﻘﻂ ﻫﻨﺎﻙ ﺳﺒﻌﺔ ﺃﺣﺠﺎﻡ ﻷﻱ ﺧﻂ ﺗﺴﺘﻄﻴﻊ‬
‫ﺍﳌﺘﺼﻔﺤﺎﺕ ﺍﻟﺘﻌﺮﻑ ﻋﻠﻴﻬﺎ‪.‬‬
‫ﻭﻧﻘﻮﻡ ﺑﺘﺤﺪﻳﺪ ﺍﳊﺠﻢ ﺍﳌﻄﻠﻮﺏ ﺑﺄﺳﻠﻮﺑﲔ‪ :‬ﺃﻭﳍﻤﺎ ﺍﳌﺒﺎﺷﺮ‪ .‬ﺣﻴﺚ ﻳﺘﻢ ﻛﺘﺎﺑﺔ ﺭﻗﻢ ﻳﺘﺮﺍﻭﺡ ﻣﺎ ﺑﲔ‬
‫‪ .7-1‬ﺃﻱ ﺃﻧﻨﺎ ﳔﺘﺎﺭ ﺍﳊﺠﻢ ﺍﻟﺬﻱ ﻧﺮﻳﺪﻩ ﻣﺒﺎﺷﺮﺓ‪.‬‬
‫>"‪<FONT SIZE="4‬‬
‫‪... Text ...‬‬
‫>‪</FONT‬‬

‫ﺃﻣﺎ ﺍﻷﺳﻠﻮﺏ ﺍﻟﺜﺎﱐ ﻓﻬﻮ ﺍﻟﻨﺴﱯ‪ :‬ﺣﻴﺚ ﺗﻜﺘﺐ ﺍﻷﺭﻗﺎﻡ ﻣﻦ ‪ 1‬ﺇﱃ ‪ 6‬ﻣﺮﻓﻘﺔ ﺇﻣﺎ ﺑﺈﺷﺎﺭﺓ ‪ +‬ﺃﻭ‬ ‫‪Size‬‬

‫ﺑﺈﺷﺎﺭﺓ ‪.-‬‬
‫>"‪<FONT SIZE="+4‬‬
‫‪... Text ...‬‬
‫>‪</FONT‬‬
‫ﻭﰲ ﻫﺬﻩ ﺍﻟﻄﺮﻳﻘﺔ ﻓﺈﻥ ﺍﻷﺭﻗﺎﻡ ‪ 6-1‬ﲤﺜﻞ ﺩﺭﺟﺎﺕ ﺍﻟﺘﻜﺒﲑ )‪ (+‬ﺃﻭ ﺍﻟﺘﺼﻐﲑ )‪ (-‬ﻟﻠﺨﻂ ﻭﺫﻟﻚ‬
‫ﻧﺴﺒﺔﹰ ﺇﱃ ﺍﳊﺠﻢ ﺍﻻﻓﺘﺮﺍﺿﻲ‪ .‬ﻓﻤﺜﻼ ﺍﻟﺮﻗﻢ ‪ 4+‬ﻳﻌﲏ ﺗﻜﺒﲑ ﺍﳋﻂ ﺃﺭﺑﻊ ﺩﺭﺟﺎﺕ ﻋﻦ ﺍﳊﺠﻢ‬
‫ﺍﻻﻓﺘﺮﺍﺿﻲ ﻭﻫﻮ ‪ ،3‬ﺃﻱ ﺃﻧﻪ ﻳﺼﺒﺢ ﺑﺎﳊﺠﻢ ‪ .7‬ﺑﺎﳌﻘﺎﺑﻞ ﻓﺄﻥ ﺍﻟﺮﻗﻢ ‪ 1-‬ﻳﻌﲏ ﺗﺼﻐﲑ ﺍﳋﻂ ﺩﺭﺟﺔ‬
‫ﻭﺍﺣﺪﺓ ﺃﻱ ﻳﺼﺒﺢ ﺑﺎﳊﺠﻢ ‪.2‬‬

‫ﻻﺣﻆ ﺃﻧﻪ ﺣﱴ ﰲ ﺍﻷﺳﻠﻮﺏ ﺍﻟﻨﺴﱯ ﻻ ﻧﺴﺘﻄﻴﻊ ﺍﳊﺼﻮﻝ ﻋﻠﻰ ﺃﻛﺜﺮ ﻣﻦ ﺳﺒﻌﺔ ﺃﺣﺠﺎﻡ ﻟﻠﺨﻄﻮﻁ‪ .‬ﺣﱴ ﻭﺇﻥ‬
‫ﺣﺎﻭﻟﻨﺎ ﻛﺘﺎﺑﺔ ﺃﺭﻗﺎﻡ ﺃﻛﱪ ﺃﻭ ﺃﺻﻐﺮ ﻣﺜﻞ ‪ 5+‬ﺃﻭ ‪.3-‬‬
‫ﻭﺍﻵﻥ ﺃﻋﺮﻑ ﻣﺎﺫﺍ ﺗﺮﻳﺪ ﺃﻥ ﺗﺴﺄﻝ‪ ،‬ﺳﺘﻘﻮﻝ ﻟﻘﺪ ﺛﺒﺖ ﺣﺠﻢ ﺍﳋﻂ ﻋﻠﻰ ﺣﺪﻩ ﺍﻷﺩﱏ ﻋﻨﺪ ﺍﻟﺪﺭﺟﺔ ‪ 2-‬ﻭﻋﻠﻰ‬
‫ﺣﺪﻩ ﺍﻷﻋﻠﻰ ﻋﻨﺪ ﺍﻟﺪﺭﺟﺔ ‪ .4+‬ﺇﺫﻥ ﻣﺎ ﺍﻟﻔﺎﺋﺪﺓ ﻣﻦ ﻭﺟﻮﺩ ﺍﻟﺪﺭﺟﺎﺕ ﺍﻷﺧﺮﻯ ﺍﻷﻗﻞ ﻣﻦ ‪ 2-‬ﻭﺍﻷﻛﱪ ﻣﻦ‬
‫‪4+‬؟‬
‫ﺣﺴﻨﺎ ﻭﺃﻧﺎ ﺃﺟﻴﺒﻚ ﺑﺴﺆﺍﻝ ﺁﺧﺮ‪ :‬ﻣﺎﺫﺍ ﻟﻮ ﻗﻤﻨﺎ ﺑﺘﻐﻴﲑ ﺍﳊﺠﻢ ﺍﻻﻓﺘﺮﺍﺿﻲ ﻟﻠﺨﻂ ﰲ ﻛﻞ ﺍﻟﺼﻔﺤﺔ ﺇﱃ ‪ 1‬ﺑﺪﻻﹰ‬
‫ﻣﻦ ‪3‬؟ ﺃﻻ ﳓﺘﺎﺝ ﰲ ﻫﺬﻩ ﺍﳊﺎﻟﺔ ﺇﱃ ﺍﻟﺪﺭﺟﺎﺕ ﻣﻦ ‪ 1+‬ﺇﱃ ‪ 6+‬ﻟﺘﻤﺜﻴﻞ ﺍﻷﺣﺠﺎﻡ ﺍﻷﻛﱪ ﻣﻨﻪ؟ ﻭﺇﺫﺍ ﻗﻤﻨﺎ‬
‫ﺑﺘﺤﺪﻳﺪ ‪ 7‬ﻛﺤﺠﻢ ﺍﻓﺘﺮﺍﺿﻲ ﺃﻻ ﳓﺘﺎﺝ ﺇﱃ ﺍﻟﺪﺭﺟﺎﺕ ﻣﻦ ‪ 1-‬ﺇﱃ ‪ 6-‬ﻟﺘﻤﺜﻴﻞ ﺍﻷﺣﺠﺎﻡ ﺍﻷﺻﻐﺮ ﻣﻨﻪ؟ ﺇﺫﻥ‬
‫ﳓﻦ ﳓﺘﺎﺝ ﻓﻌﻼﹰ ﺇﱃ ﻫﺬﻩ ﺍﻟﺪﺭﺟﺎﺕ ﻟﻜﻲ ﻧﻐﻄﻲ ﲨﻴﻊ ﺍﻻﺣﺘﻤﺎﻻﺕ ﺍﻟﻮﺍﺭﺩﺓ‪.‬‬

‫‪19‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺃﻣﺜﻠﺔ ﺗﻮﺿﺢ ﻛﻴﻔﻴﺔ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻢ ‪FONT‬‬

‫>"‪<FONT FACE="arial" SIZE="6" COLOR="#FF0000‬‬
‫‪This font is Arial, Size is 6, Color is Red‬‬
‫>‪</FONT‬‬
‫"‪<FONT FACE="Times New Roman" SIZE="5‬‬
‫>"‪COLOR="#0000FF‬‬
‫‪This font is Times New Roman, Size is 5, Color is Blue‬‬
‫>‪</FONT‬‬
‫‪<font size="7“ color=“red"> C </font> ustomize your font‬‬
‫ﺍﻟﻮﺳﻢ >‪<BASEFONT‬‬
‫ﻭﻇﻴﻔﺘﻪ ﻫﻲ ﲢﺪﻳﺪ ﻧﻮﻉ ﺍﳋﻂ ﻭﺧﺼﺎﺋﺼﻪ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﺼﻔﺤﺔ ﻛﻠﻬﺎ ‪ .‬ﺃﻱ ﺃﻧﻪ ﻳﻘﻮﻡ ﺑﺘﻌﺮﻳﻒ ﻧﻮﻉ ﺍﳋﻂ ﺍﻷﺳﺎﺳﻲ‬
‫ﺍﻟﺬﻱ ﺳﻴﺴﺘﺨﺪﻡ ﰲ ﺍﻟﺼﻔﺤﺔ ﻣﻦ ﺑﺪﺍﻳﺘﻬﺎ ﺇﱃ ‪‬ﺎﻳﺘﻬﺎ ﻭﳛﺪﺩ ﻟﻮﻧﻪ ﻭﺣﺠﻤﻪ‪.‬‬
‫ﻭﻫﻮ ﻭﺳﻢ ﻣﻔﺮﺩ ﻭﻻ ﳛﺘﻮﻱ ﻋﻠﻰ ﻭﺳﻢ ﻟﻠﻨﻬﺎﻳﺔ؟ ﻭﻳﻜﺘﺐ ﻫﺬﺍ ﺍﻟﻮﺳﻢ ﻋﺎﺩﺓ ﰲ ﺃﻭﻝ ﺍﳌﻠﻒ‪ ،‬ﻭﻳﻔﻀﻞ ﻣﺒﺎﺷﺮﺓ‬
‫ﺑﻌﺪ ﻭﺳﻢ >‪ .<BODY‬ﺃﻣﺎ ﺍﳋﺼﺎﺋﺺ ﺍﳌﺴﺘﺨﺪﻣﺔ ﻣﻌﻪ ﻓﻬﻲ ﻧﻔﺲ ﺍﳋﺼﺎﺋﺺ ﺍﳌﺴﺘﺨﺪﻣﺔ ﻣﻊ‬
‫>‪ <FONT‬ﺍﻻﺧﺘﻼﻑ ﻓﻘﻂ ﰲ ﺍﺳﺘﺨﺪﺍﻡ ﺍﳋﺎﺻﻴﺔ )‪ Name‬ﺑﺪﻻﹰ ﻣﻦ ‪.(Face‬‬
‫ﻣﺜﺎﻝ‬
‫>"‪<BASEFONT Name="Arial" COLOR="#FF0000" SIZE="5‬‬
‫ﻭﺑﺪﺭﺍﺳﺔ ﻫﺬﺍ ﺍﳌﺜﺎﻝ ﻧﺴﺘﻨﺘﺞ ﺃﻧﻪ ﻳﻘﻮﻡ ﺑﺘﻌﺪﻳﻞ ﺍﳋﻂ ﺍﻻﻓﺘﺮﺍﺿﻲ ﻟﻠﺼﻔﺤﺔ ﲝﻴﺚ ﻳﺼﺒﺢ ﻧﻮﻋﻪ ‪ Arial‬ﻭﺣﺠﻤﻪ‬
‫‪ 5‬ﻭﻟﻮﻧﻪ ﺃﲪﺮ‪ .‬ﻭﺑﺎﻟﺘﺎﱄ ﻓﺈﻥ ﻛﻞ ﺍﻟﻨﺼﻮﺹ ﺍﳌﻜﺘﻮﺑﺔ ﰲ ﺗﻠﻚ ﺍﻟﺼﻔﺤﺔ ﺳﻴﻄﺒﻖ ﻋﻠﻴﻬﺎ ﻫﺬﺍ ﺍﻟﻨﻤﻂ ﻣﻦ ﺍﳋﻂ‪.‬‬
‫ﻣﺎ ﱂ ﻧﻘﻢ ﻃﺒﻌﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻮﻡ >‪ <Font> ... </Font‬ﻟﺘﻌﺪﻳﻠﻬﺎ ﻭﺍﻟﺘﺤﻜﻢ ﲟﻈﻬﺮﻫﺎ ﻭﺍﻟﱵ ﻫﻲ‬
‫ﺃﻛﺜﺮ ﲢﺪﻳﺪﺍﹰ ﻭﺃﻛﺜﺮ ﻣﺮﻭﻧﺔ ﻣﻦ ﺍﻟﻮﺳﻢ >‪<BASEFONT‬‬
‫ﻣﻼﺣﻈﺔ‪:‬‬
‫ﺍﳋﺎﺻﻴﺔ ‪ Text‬ﺍﻟﱵ ﺗﻜﺘﺐ ﻣﻊ ﺍﻟﻮﺳﻢ >‪ <Body‬ﻟﺘﺤﺪﻳﺪ ﻟﻮﻥ ﻧﺺ ﺍﻟﺼﻔﺤﺔ ﻻ ﻳﻮﺟﺪ ﺗﻌﺎﺭﺽ ﺑﻴﻨﻬﺎ‬
‫ﻭﺧﺎﺻﻴﺔ ‪ Color‬ﰲ ﺍﻟﻮﺳﻢ >‪ <BASEFONT‬ﻓﺄﻧﺖ ﺑﻜﻞ ﺑﺴﺎﻃﺔ ﺗﺴﺘﻄﻴﻊ ﺍﺳﺘﺨﺪﺍﻡ ﺃﻱ ﻣﻨﻬﻤﺎ ﰲ‬
‫ﺻﻔﺤﺘﻚ‪ .‬ﻭﺇﺫﺍ ﺣﺪﺙ ﻭﺍﺳﺘﺨﺪﻣﺖ ﻛﻼﳘﺎ ﻓﺈﻥ ﺍﻟﻠﻮﻥ ﺍﶈﺪﺩ ﻣﻊ ﺍﻟﻮﺳﻢ >‪ <BASEFONT‬ﻫﻮ‬
‫ﺍﻟﺬﻱ ﺳﻴﻄﺒﻘﻪ ﺍﳌﺘﺼﻔﺢ ﻭﻳﻌﺘﻤﺪﻩ‪.‬‬

‫‪20‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻭﺳﻢ ﺍﳌﺴﻄﺮﺓ ﺍﻷﻓﻘﻴﺔ )‪Horizontal Rule(HR‬‬

‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﻩ ﺍﻟﻮﺳﻢ ﻟﺮﺳﻢ ﺧﻂ ﺍﻓﻘﻲ ﻭﻳﺴﺘﺨﺪﻡ ﻋﺎﺩﺓ ﻟﻔﺼﻞ ﺍﻟﻔﻘﺮﺍﺕ ﻭﻫﻮ ﻭﺳﻢ ﻟﻴﺲ ﻟﻪ ‪‬ﺎﻳﺔ ﻭﻳﻜﺘﺐ‬
‫ﺑﺎﻟﺼﻴﻐﺔ ﺍﻟﺘﺎﻟﻴﺔ >‪ <HR‬ﻭﳝﺘﻠﻚ ﻫﺬﻩ ﺍﻟﻮﺳﻢ ﻋﺪﺓ ﺧﺼﺎﺋﺺ ﻣﻨﻬﺎ‬
‫‪ .1‬ﺧﺎﺻﻴﺔ ﺳ‪‬ﻤﻚ ﺍﳋﻂ ‪SIZE‬‬
‫ﻣﺜﻼﹰ‪:‬‬
‫>"‪<HR SIZE="5‬‬
‫>"‪<HR SIZE="10‬‬
‫‪ .2‬ﺧﺎﺻﻴﺔ ﻋﺮﺽ ﺍﳋﻂ ‪WIDTH‬‬
‫ﻭﺍﻟﱵ ﻣﻦ ﺍﳌﻤﻜﻦ ﺃﻥ ﺗﺄﺧﺬ ﻗﻴﻤﺔ ﻣﻄﻠﻘﺔ ﺃﻭ ﻧﺴﺒﻴﺔ‬
‫ﻣﺜﻼﹰ‬
‫ﺍﻟﻌﺮﺽ ﻛﻘﻴﻤﺔ ﻧﺴﺒﻴﺔ‬
‫>"‪<HR WIDTH="80%‬‬
‫ﺍﻟﻌﺮﺽ ﻛﻘﻴﻤﺔ ﻣﻄﻠﻘﺔ‬
‫>"‪<HR WIDTH="400‬‬
‫ﺗﻐﻴﲑ ﺍﳊﺠﻢ ﻭﺍﻟﻌﺮﺽ ﻣﻌﺎﹰ‬
‫>"‪<HR SIZE="5" WIDTH="60%‬‬

‫‪ .3‬ﺧﺎﺻﻴﺔ ﺍﶈﺎﺫﺍﺓ ‪ALIGN‬‬

‫ﻭﺍﻟﱵ ﺗﺄﺧﺬ ﺍﻟﻘﻴﻢ ‪center, left, right‬‬
‫ﻣﺜﻼﹰ‪-:‬‬
‫>"‪<HR WIDTH="80%" ALIGN="center‬‬
‫>"‪<HR WIDTH="400" ALIGN="left‬‬
‫>"‪<HR SIZE="5" WIDTH="60%" ALIGN="right‬‬
‫‪ .4‬ﺍﳋﺎﺻﻴﺔ ‪NOSHADE‬‬
‫ﻛﻤﺎ ﺗﻼﺣﻆ ﻓﺈﻥ ﻫﺬﺍ ﺍﳋﻂ ﻳﻜﺘﺴﺐ ﻣﻈﻬﺮﺍﹰ ﻏﺎﺋﺮﺍﹰ ﺛﻼﺛﻲ ﺍﻷﺑﻌﺎﺩ ﻭﺇﺫﺍ ﺃﺭﺩﺕ ﺧﻄﺎﹰ ﻋﺎﺩﻳﺎﹰ ﻏﲑ ﻏﺎﺋﺮ ﻓﻘﻢ ﺑﺈﺿﺎﻓﺔ‬
‫ﺍﳋﺎﺻﻴﺔ ‪NOSHADE‬‬
‫ﻣﺜﻼﹰ‪-:‬‬
‫>‪<HR SIZE="5" WIDTH="60%" ALIGN="center" NOSHADE‬‬

‫‪21‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫‪ .5‬ﺍﳋﺎﺻﻴﺔ ‪COLOR‬‬
‫ﺗﺴﺘﺨﺪﻡ ﻟﺘﻐﻴﲑ ﻟﻮﻥ ﺍﳋﻂ ﻭﻫﻲ ﺗﻌﻤﻞ ﻓﻘﻂ ﻣﻊ ﻣﺴﺘﻜﺸﻒ ﺍﻻﻧﺘﺮﻧﺖ ‪Internet Explorer‬‬
‫ﻣﺜﻼﹸ‪-:‬‬
‫"‪<HR SIZE="5" WIDTH="60%" ALIGN="center‬‬
‫>‪COLOR="#FF0000" NOSHADE‬‬
‫ﻭﺳﻢ ﲢﺮﻳﻚ ﺍﻟﻨﺺ ‪marquee‬‬
‫‪ marquee‬ﳉﻌﻞ ﺍﻟﻨﺺ ﻣﺘﺤﺮﻛﺎﹰ‬ ‫ﻳﺴﺘﺨﺪﻡ ﺍﻟﻮﺳﻢ‬
‫ﺍﻟﺼﻴﻐﺔ ﺍﻟﻌﺎﻣﺔ ﻟﻪ‬
‫> ‪< marquee >…text…</ marquee‬‬
‫ﻭﻫﻮ ﳝﺘﻠﻚ ﺍﻟﻌﺪﻳﺪ ﻣﻦ ﺍﳋﺼﺎﺋﺺ ﻣﻨﻬﺎ‬
‫‪o‬ﺍﳋﺎﺻﻴﺔ ‪behavior‬‬
‫ﻭﺍﻟﱵ ﺗﺄﺧﺬ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ ‪alternate ,slide, scroll‬‬
‫‪o‬ﺍﳋﺎﺻﻴﺔ‪direction‬‬
‫ﻭﺍﻟﱵ ﺗﺄﺧﺬ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ ‪right , left, up, down‬‬
‫‪o‬ﺍﳋﺎﺻﻴﺔ‪scrolldelay‬‬
‫ﺗﺴﺘﺨﺪﻡ ﻟﺘﺴﺮﻳﻊ ﻣﺮﻭﺭ ﺍﻟﻨﺺ ﲟﻘﺪﺍﺭ ﺍﻟﻘﻴﻤﺔ ﺍﳌﺴﻨﺪﺓ‪.‬‬
‫‪o‬ﺍﳋﺎﺻﻴﺔ‪scrollamount‬‬
‫ﺗﺴﺘﺨﺪﻡ ﻹﺑﻄﺎﺀ ﻣﺮﻭﺭ ﺍﻟﻨﺺ ﲟﻘﺪﺍﺭ ﺍﻟﻔﺘﺮﺓ ﺍﳌﺴﻨﺪﺓ‪.‬‬
‫‪o‬ﺍﳋﺎﺻﻴﺔ‪loop‬‬
‫ﲢﺪﺩ ﻋﺪﺩ ﻣﺮﺍﺕ ﺗﻜﺮﺍﺭ ﺍﳊﺮﻛﺔ‬
‫ﻣﺜﺎﻝ‪-:‬‬
‫ﺍﺿﺎﻓﺔ ﻧﺺ ﻣﺘﺤﺮﻙ ﻣﻊ ﺗﻄﺒﻴﻖ ﺑﻌﺾ ﺧﺼﺎﺋﺺ ﺍﻟﻨﺺ ﺍﳌﺘﺤﺮﻙ ﻣﺜﻞ ﻟﻮﻥ ﺧﻠﻔﻴﺔ ﺍﻟﻨﺺ ﺍﺯﺭﻕ ﻋﺪﺩ ﻣﺮﺍﺕ‬
‫ﺍﻟﺘﻜﺮﺍﺭ ‪ 3‬ﺍﻻﲡﺎﻩ ﻧﺎﺣﻴﺔ ﺍﻟﻴﺴﺎﺭ‬
‫"‪<marquee behavior ="scroll" direction =“left" loop=“3‬‬
‫>"‪bgcolor="#0066CC‬‬
‫‪In The Name Of Allah‬‬
‫>‪</marquee‬‬

‫‪22‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﶈﺎﺿﺮﺓ ﺍﻟﺴﺎﺩﺳﺔ‬
‫ﺍﻟﺼﻮﺭ ‪Images‬‬
‫ﻳﻀﻔﻲ ﺍﺳﺘﺨﺪﺍﻣﻚ ﻟﻠﺼﻮﺭ ﻭﺍﻟﺮﺳﻮﻣﺎﺕ ﰲ ﺻﻔﺤﺔ ﺍﻟﻮﻳﺐ ﺗﺄﺛﲑﺍﹰ ﺟﻴﺪﺍﹰ ﻋﻠﻰ ﻣﻦ ﻳﺘﺼﻔﺤﻮﻥ ﺻﻔﺤﺘﻚ ﻋﻠﻰ‬
‫ﺍﻟﺸﺒﻜﺔ‪ ،‬ﻟﻘﺪ ﺍﻗﺘﺼﺮ ﺣﺪﻳﺜﻨﺎ ﻋﻦ ﺍﻟﺼﻮﺭ ﰲ ﺍﶈﺎﺿﺮﺍﺕ ﺍﳌﺎﺿﻴﺔ ﻋﻠﻰ ﺇﺿﺎﻓﺔ ﺧﻠﻔﻴﺎﺕ ﻟﻠﺼﻔﺤﺎﺕ‬
‫ﺇﻥ ﺍﻟﻮﺳﻢ ﺍﻟﺮﺋﻴﺴﻲ ﺍﳌﺴﺘﺨﺪﻡ ﻟﺘﻌﺮﻳﻒ ﺻﻮﺭﺓ ﻣﺎ ﺩﺍﺧﻞ ﺍﻟﺼﻔﺤﺔ ﻫﻮ >‪ <IMG‬ﻭﻫﻮ ﻭﺳﻢ ﻣﻔﺮﺩ ﻭﺍﳋﺎﺻﻴﺔ‬
‫ﺍﳌﺴﺘﺨﺪﻣﺔ ﻟﺘﺤﺪﻳﺪ ﻣﻮﻗﻊ ﻭﺍﺳﻢ ﺍﻟﺼﻮﺭﺓ ﻫﻲ ‪ .SRC‬ﳝﻜﻦ ﺇﳘﺎﻝ ﺍﳌﺴﺎﺭ ﺇﺫﺍ ﻛﺎﻧﺖ ﺍﻟﺼﻮﺭﺓ ﻣﻮﺟﻮﺩﺓ ﰲ‬
‫ﻧﻔﺲ ﻣﻜﺎﻥ ﺍﻟﺼﻔﺤﺔ ﺍﳌﺴﺘﻌﺮﺿﺔ ‪ ،‬ﳚﺐ ﺃﻥ ﺗﻜﻮﻥ ﺍﻟﺼﻮﺭﺓ ﻣﻦ ﺍﻟﻨﻮﻉ ‪ jpg‬ﺃﻭ ‪ gif‬ﺃﻭ‪png‬‬
‫ﺃﻣﺜﻠﺔ‬
‫>"‪<img src="win.gif‬‬
‫ﺍﻟﺼﻴﻐﺔ ﺃﻋﻼﻩ ﺗﻔﺘﺮﺽ ﺃﻥ ﺍﻟﺼﻮﺭﺓ ﻣﻮﺟﻮﺩﺓ ﰲ ﻧﻔﺲ ﺍﻟﺪﻟﻴﻞ ﺍﻟﻔﺮﻋﻲ ﺃﻭ ﺍ‪‬ﻠﺪ ﺣﻴﺚ ﻳﺘﻮﺍﺟﺪ ﻣﻠﻒ‪HTML‬‬
‫ﺍﻟﺬﻱ ﺗﻌﻤﻞ ﻋﻠﻴﻪ‬
‫>"‪<img src="images/win.gif‬‬
‫ﺍﻟﺼﻴﻐﺔ ﺃﻋﻼﻩ ﺗﻔﺘﺮﺽ ﺃﻥ ﺍﻟﺼﻮﺭﺓ ﻣﻮﺟﻮﺩﺓ ﰲ ﳎﻠﺪ ﻣﺘﻔﺮﻉ ﻋﻦ ﺍ‪‬ﻠﺪ ﺍﳌﻮﺟﻮﺩ ﺑﻪ ﻣﻠﻒ ‪ HTML‬ﻭﻫﻮ‬
‫‪images‬‬
‫>"‪<img src="http://www.images.com/win.gif‬‬
‫ﺍﻟﺼﻴﻐﺔ ﺃﻋﻼﻩ ﺗﻔﺘﺮﺽ ﺃﻥ ﺍﻟﺼﻮﺭﺓ ﻣﻮﺟﻮﺩﺓ ﻋﻠﻰ ﻣﻮﻗﻊ ﺍﻟﻜﺘﺮﻭﱐ‬
‫ﻋﺮﺽ ﻭﺍﺭﺗﻔﺎﻉ ﺍﻟﺼﻮﺭﺓ‪Image Height and Width‬‬
‫ﻛﻞ ﺻﻮﺭﺓ ﳍﺎ ﺍﺭﺗﻔﺎﻉ ﻭﻋﺮﺽ‪ ،‬ﻭﻹﺧﺒﺎﺭ ﺍﳌﺴﺘﻌﺮﺽ ﻋﻦ ﺣﺠﻤﻬﺎ‪ ،‬ﻧﺴﺘﺨﺪﻡ ﺍﳋﺎﺻﻴﺘﲔ ‪ height‬ﻟﻼﺭﺗﻔﺎﻉ‬
‫ﻭ‪ width‬ﻟﻠﻌﺮﺽ‬
‫ﻣﺜﺎﻝ‪-:‬‬
‫>"‪<img src="sunset.jpg" height="50" width="100‬‬
‫ﺍﳋﺎﺻﻴﺔ ‪ALIGN‬‬
‫ﺗﺴﺘﺨﺪﻡ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﻟﺘﺤﺪﻳﺪ ﳏﺎﺫﺍﺓ ﺍﻟﺼﻮﺭﺓ ﻣﻊ ﺍﻟﻨﺺ ﺍﳌﺮﺍﻓﻖ ﳍﺎ ﺃﻭ ﻟﻨﻘﻞ ﺑﻌﺒﺎﺭﺓ ﺃﺧﺮﻯ‪ :‬ﲢﺪﻳﺪ ﻣﻮﻗﻊ‬
‫ﺍﻟﻨﺺ ﺍﻟﺬﻱ ﻳﻠﻴﻬﺎ ﺑﺎﻟﻨﺴﺒﺔ ﳍﺎ ﻭﻫﻲ ﺗﺄﺧﺬ ﺍﻟﻘﻴﻢ‪:‬‬
‫‪MIDDLE, LEFT, RIGHT,BOTTOM, TOP‬‬
‫ﻭﺃﻭﺿﺢ ﻟﻚ ﺗﺄﺛﲑ ﻛﻞ ﻗﻴﻤﺔ ﻛﻤﺎ ﻳﻠﻲ‪:‬‬

‫‪23‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﰲ ﺍﳊﺎﻟﺔ ﺍﻟﻌﺎﺩﻳﺔ ﻭﻋﻨﺪﻣﺎ ﻻ ﻧﻘﻮﻡ ﺑﺘﺤﺪﻳﺪ ﺃﻱ ﳏﺎﺫﺍﺓ ﻓﺈﻥ ﺍﻟﻨﺺ ﺍﻟﺬﻱ ﻳﻠﻲ ﺍﻟﺼﻮﺭﺓ ﻳﻈﻬﺮ ﲟﺤﺎﺫﺍﺓ ﺍﳊﺎﻓﺔ‬
‫ﺍﻟﺴﻔﻠﻰ ﳍﺎ‪ .‬ﺃﻣﺎ ﺑﺎﻗﻲ ﺍﻟﻨﺺ ﻓﻴﻤﺘﺪ ﺃﺳﻔﻠﻬﺎ‪.‬‬
‫ﻭﻫﺬﻩ ﻫﻲ ﺍﳊﺎﻟﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻈﻬﻮﺭ ﺍﻟﺼﻮﺭ ﻭﺍﻟﱵ ﲤﺜﻠﻬﺎ ﺍﻟﻘﻴﻤﺔ ‪BOTTOM‬‬
‫>"‪<IMG SRC="image.jpg" ALIGN="BOTTOM‬‬
‫ﻭﻋﻨﺪ ﲢﺪﻳﺪ ﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﻓﺈﻥ ﺍﻟﺴﻄﺮ ﺍﻷﻭﻝ ﻣﻦ ﺍﻟﻨﺺ ﺍﻟﺬﻱ ﻳﻠﻲ ﺍﻟﺼﻮﺭﺓ ﻳﻘﻊ ﲟﺤﺎﺫﺍﺓ ﺍﳊﺎﻓﺔ ﺍﻟﻌﻠﻴﺎ ﳍﺎ‪ .‬ﺃﻣﺎ‬
‫ﺑﺎﻗﻲ ﺍﻟﻨﺺ ﻓﻴﻤﺘﺪ ﺃﺳﻔﻠﻬﺎ‪.‬‬
‫>"‪<IMG SRC="image.jpg" ALIGN="TOP‬‬
‫ﺃﻣﺎ ﻋﻨﺪ ﲢﺪﻳﺪ ﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﻓﺈﻥ ﺍﻟﺴﻄﺮ ﺍﻷﻭﻝ ﻣﻦ ﺍﻟﻨﺺ ﻳﻘﻊ ﲟﺤﺎﺫﺍﺓ ﻣﻨﺘﺼﻒ ﺍﻟﺼﻮﺭﺓ‪ .‬ﻛﺬﻟﻚ ﻓﺈﻥ ﺑﺎﻗﻲ‬
‫ﺍﻟﻨﺺ ﳝﺘﺪ ﺃﺳﻔﻠﻬﺎ‪.‬‬
‫>"‪<IMG SRC="image.jpg" ALIGN="MIDDLE‬‬
‫ﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﺗﺆﺩﻱ ﺇﱃ ﳏﺎﺫﺍﺓ ﺍﻟﺼﻮﺭﺓ ﺇﱃ ﺃﻗﺼﻰ ﺍﻟﻴﺴﺎﺭ‪ .‬ﻣﻊ ﺍﻟﺘﻔﺎﻑ ﺍﻟﻨﺺ ﺍﻟﺬﻱ ﻳﻠﻴﻬﺎ ﻋﻠﻰ ﺍﳉﻬﺔ ﺍﻟﻴﻤﲎ‬
‫ﻭﻟﻌﺪﺓ ﺃﺳﻄﺮ ﺣﺴﺐ ﺍﺭﺗﻔﺎﻉ ﺍﻟﺼﻮﺭﺓ‪.‬‬
‫>"‪<IMG SRC="image.jpg" ALIGN="LEFT‬‬
‫ﺃﻣﺎ ﻫﺬﻩ ﺍﻟﻘﻴﻤﺔ ﻓﺘﺆﺩﻱ ﺇﱃ ﳏﺎﺫﺍﺓ ﺍﻟﺼﻮﺭﺓ ﺇﱃ ﺃﻗﺼﻰ ﺍﻟﻴﻤﲔ‪ .‬ﻣﻊ ﺍﻟﺘﻔﺎﻑ ﺍﻟﻨﺺ ﺍﻟﺬﻱ ﻳﻠﻴﻬﺎ ﻋﻠﻰ ﺍﳉﻬﺔ‬
‫ﺍﻟﻴﺴﺮﻯ ﻭﻟﻌﺪﺓ ﺃﺳﻄﺮ ﺣﺴﺐ ﺍﺭﺗﻔﺎﻉ ﺍﻟﺼﻮﺭﺓ‪.‬‬
‫>"‪<IMG SRC="image.jpg" ALIGN="RIGHT‬‬
‫ﺍﳋﺎﺻﻴﺔ ‪ VSPACE‬ﺗﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﺍﳌﺴﺎﻓﺔ ﺍﻟﻌﻤﻮﺩﻳﺔ ﺍﻟﻔﺎﺻﻠﺔ ﺑﲔ ﺍﻟﻨﺺ ﻭﺍﳊﺎﻓﺘﲔ ﺍﻟﻌﻠﻴﺎ‬
‫ﻭﺍﻟﺴﻔﻠﻰ ﻟﻠﺼﻮﺭﺓ‪.‬‬
‫ﺍﳋﺎﺻﻴﺔ ‪ HSPACE‬ﺗﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﺍﳌﺴﺎﻓﺔ ﺍﻷﻓﻘﻴﺔ ﺍﻟﻔﺎﺻﻠﺔ ﺑﲔ ﺍﻟﻨﺺ ﻭﺍﳊﺎﻓﺘﲔ ﺍﻟﻴﻤﲎ ﻭﺍﻟﻴﺴﺮﻯ‬
‫ﻟﻠﺼﻮﺭﺓ‪.‬‬
‫ﻣﺜﺎﻝ‪:‬‬
‫"‪<IMG SRC="image.jpg" ALIGN="RIGHT" VSPACE="20‬‬
‫>"‪HSPACE="20‬‬
‫ﺍﳋﺎﺻﻴﺔ ‪BORDER‬‬
‫ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺴﺘﺨﺪﻡ ﻣﻊ ﺍﻟﻮﺳﻢ >‪ <IMG‬ﻭﻭﻇﻴﻔﺘﻬﺎ ﺇﺿﺎﻓﺔ ﺇﻃﺎﺭ ﺣﻮﻝ ﺍﻟﺼﻮﺭ ﻭﺍﻟﺘﺤﻜﻢ ﺑﺴ‪‬ﻤﻜ‪‬ﻪ‪.‬‬
‫ﻭﻳﺘﻢ ﺍﻟﺘﺤﻜﻢ ﺑﺎﻟﺴ‪‬ﻤﻚ ﻣﻦ ﺧﻼﻝ ﺇﺳﻨﺎﺩ ﺭﻗﻢ ﳝﺜﻞ ﺍﻟﺴ‪‬ﻤﻚ ﺑﺎﻟﺒﻜﺴﻞ‪ .‬ﻭﺍﻟﻘﻴﻤﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻟﻪ ﻫﻲ ‪ 0‬ﺃﻱ ﻻ‬
‫ﻳﻮﺟﺪ ﺇﻃﺎﺭ ﺣﻮﻝ ﺍﻟﺼﻮﺭﺓ‪.‬‬
‫ﻣﺜﻼﹰ ﻹﺿﺎﻓﺔ ﺇﻃﺎﺭ ﺳ‪‬ﻤﻜﻪ ‪ 5‬ﺑﻜﺴﻞ ﻧﻜﺘﺐ ﺍﻟﺸﻔﺮﺓ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬
‫>"‪<IMG SRC="image.jpg“ BORDER="5‬‬

‫‪24‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﳋﺎﺻﻴﺔ‪ALT‬‬
‫ﺗﺴﺘﺨﺪﻡ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﻣﻊ ﺍﻟﻮﺳﻢ >‪ <IMG‬ﻭﻓﻴﻬﺎ ﳓﺪﺩ ﻧﺼﺎﹰ ﺑﺪﻳﻼﹰ ﻳﻈﻬﺮ ﻣﻜﺎﻥ ﺍﻟﺼﻮﺭﺓ‪ .‬ﻭﻫﺬﺍ ﺍﻟﻨﺺ‬
‫ﻳﻼﺣﻆ ﺧﺼﻮﺻﺎﹰ ﻋﻨﺪﻣﺎ ﻳﻜﻮﻥ ﺧﻴﺎﺭ "ﺇﻇﻬﺎﺭ ﺍﻟﺼﻮﺭ ﺗﻠﻘﺎﺋﻴﺎﹰ" ﻏﲑ ﻓﻌﺎﻝ ﰲ ﺍﳌﺘﺼﻔﺢ‪ .‬ﻛﻤﺎ ﺗﺴﺘﻄﻴﻊ ﻣﻼﺣﻈﺘﻪ‬
‫ﰲ ﺍﻟﻔﺘﺮﺓ ﺍﻟﱵ ﺗﺴﺒﻖ ﲢﻤﻴﻞ ﺍﻟﺼﻮﺭ ﻭﺧﺎﺻﺔ ﰲ ﺍﳌﻮﺍﻗﻊ ﺑﻄﻴﺌﺔ ﺍﻟﺘﺤﻤﻴﻞ‪.‬‬
‫>" ‪<img src="image1.jpg" alt="welcome to my web site‬‬
‫ﺃﻧﻮﻉ ﺍﻟﺼﻮﺭ ﺍﳌﺴﺘﺨﺪﻣﺔ ﰲ ﺻﻔﺤﺎﺕ ﺍﻟﻮﻳﺐ‪.‬‬
‫‪ .1‬ﺗﻨﺴﻴﻖ ﺭﺳﻮﻣﺎﺕ ﺍﻹﻧﺘﺮﻧﺖ)‪Graphic Internet Format (GIF‬‬
‫‪ .2‬ﺭﺍﺑﻄﺔ ﳎﻤﻮﻋﺔ ﺧﱪﺍﺀ ﺍﻟﺘﺼﻮﻳﺮ)‪Joint Photographic Experts Group (JPEG‬‬
‫‪ .3‬ﺭﺳﻮﻣﺎﺕ ﺍﻟﺸﺒﻜﺔ ﺍﶈﻤﻮﻟﺔ)‪Portable Network Graphics (PNG‬‬
‫‪ .4‬ﻭﻫﻨﺎﻟﻚ ﺗﻨﺴﻴﻘﺎﺕ ﺃﺧﺮﻯ ﻧﺎﺩﺭﺓ ﺍﻻﺳﺘﺨﺪﺍﻡ ﻛﺘﻨﺴﻴﻖ ‪TIFF(Tagged Image File‬‬
‫)‪Format‬ﻭﻏﲑﻫﺎ ﻣﻦ ﺍﻟﺘﻨﺴﻴﻘﺎﺕ ﺍﻷﺧﺮﻯ‪.‬‬

‫‪25‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﶈﺎﺿﺮﺓ ﺍﻟﺴﺎﺑﻌﺔ‬
‫ﺍﻟﺮﻭﺍﺑﻂ ﻭﺍﻹﲝﺎﺭ‬
‫‪Links and Anchors‬‬
‫ﺍﻟﺮﻭﺍﺑﻂ ﻫﻲ ﺍﳋﻴﻮﻁ ﺍﻟﱵ ﺗﺆﻟﻒ ﺣﻠﻘﺎﺕ ﺍﻟﻮﺻﻞ ﺑﲔ ﺍﳌﻼﻳﲔ ﻣﻦ ﻣﻮﺍﻗﻊ ﺍﻟﺸﺒﻜﺔ ﺍﻟﻌﻨﻜﺒﻮﺗﻴﺔ‪.‬ﻓﻌﻨﺪﻣﺎ ﺗﻨﻘﺮ‬
‫ﻋﻠﻰ ﻭﺻﻠﺔ ﻣﺎ ﻓﺘﻨﻘﻠﻚ ﺇﱃ ﺻﻔﺤﺔ ﺃﺧﺮﻯ ﰲ ﻧﻔﺲ ﺍﳌﻮﻗﻊ‪ ...‬ﻭﺗﻨﻘﺮ ﻋﻠﻰ ﻭﺻﻠﺔ ﺃﺧﺮﻯ ﻓﺘﻨﻘﻠﻚ ﻛﻠﻴﺎﹰ ﺇﱃ‬
‫ﺃﺣﺪ ﺍﳌﻮﺍﻗﻊ ﰲ ﺍﳉﺎﻧﺐ ﺍﻵﺧﺮ ﻣﻦ ﺍﻟﻌﺎﱂ‪ ...‬ﻭﺻﻠﺔ ﲡﻌﻠﻚ ﲢﻤ‪‬ﻞ ﻣﻠﻔﺎﹰ ﻭﺃﺧﺮﻯ ﲡﻌﻠﻚ ﺗﺸﻐ‪‬ﻞ ﻣﻘﻄﻌﺎ ﻣﻮﺳﻴﻘﻴﺎﹰ‬
‫ﻭﺛﺎﻟﺜﺔ ﺗﻌﺮﺽ ﻟﻚ ﺻﻮﺭﺓ‪...‬‬
‫ﻭﺍﻟﺴﺆﺍﻝ ﺃﻻﻥ ‪ -:‬ﻛﻴﻔﻴﺔ ﻳﺘﻢ ﺇﺩﺭﺍﺝ ﺍﻟﻮﺻﻼﺕ ﺍﻟﺘﺸﻌﺒﻴﺔ ؟‬
‫ﻫﻨﺎﻙ ﻋﺪﺓ ﺧﻴﺎﺭﺍﺕ ﻟﻼﺭﺗﺒﺎﻃﺎﺕ ﺍﻟﺘﺸﻌﺒﻴﺔ‪ ،‬ﻣﻨﻬﺎ ﺃﻥ ﻳﻜﻮﻥ ﺍﻻﺭﺗﺒﺎﻁ ﳌﻮﻗﻊ ﺁﺧﺮ‪ ،‬ﺃﻭ ﺃﻥ ﻳﻜﻮﻥ ﻟﺼﻔﺤﺔ‬
‫ﺃﺧﺮﻯ ﺩﺍﺧﻞ ﺍﳌﻮﻗﻊ ﻧﻔﺴﻪ‪ ،‬ﻭﻣﻨﻬﺎ ﺃﻥ ﻳﻜﻮﻥ ﳌﻜﺎﻥ ﺁﺧﺮ ﰲ ﻧﻔﺲ ﺍﻟﺼﻔﺤﺔ )ﺇﱃ ﺃﻋﻠﻰ ﺃﻭ ﺃﺳﻔﻞ ﻋﻠﻰ ﺳﺒﻴﻞ‬
‫ﺍﳌﺜﺎﻝ( ﺃﻭ ﺃﻥ ﻳﻜﻮﻥ ﺍﺭﺗﺒﺎﻁ ﻟﻌﻨﻮﺍﻥ ﺑﺮﻳﺪ ﺇﻟﻜﺘﺮﻭﱐ ‪ E-mail‬ﻭﰲ ﲨﻴﻊ ﺍﳊﺎﻻﺕ ﻓﺈﻥ ﺍﳌﺒﺪﺃ ﻭﺍﺣﺪ ﻟﻜﻦ‬
‫ﲣﺘﻠﻒ ﺑﻌﺾ ﺍﻟﺘﻔﺎﺻﻴﻞ‬
‫ﻧﺴﺘﺨﺪﻡ ﺍﻟﻮﺳﻮﻡ‬
‫>‪<A> ... </A‬‬
‫ﻛﻮﺳﻮﻡ ﺃﺳﺎﺳﻴﺔ ﻹﺩﺭﺍﺝ ﺍﻻﺭﺗﺒﺎﻃﺎﺕ ﺍﻟﺘﺸﻌﺒﻴﺔ‪ ،‬ﻭﻫﻲ ﺍﺧﺘﺼﺎﺭ ﻟﻜﻠﻤﺔ ‪ .Anchor‬ﻭﻫﻲ ﻻ ﺗﻌﻤﻞ ﻟﻮﺣﺪﻫﺎ‬
‫ﺑﻞ ﺗﺘﻄﻠﺐ ﺇﺿﺎﻓﺔ ﺧﺼﺎﺋﺺ ﻣﻌﻴﻨﺔ‬
‫ﺍﳋﺎﺻﻴﺔ ‪(Hypertext Reference) HREF‬‬
‫ﻭﻫﻲ ﲢﺪﺩ ﻋﻨﻮﺍﻥ ‪ URL‬ﺍﻟﺬﻱ ﺳﻴﻨﻘﻠﻚ ﺇﻟﻴﻪ ﺍﻟﺮﺍﺑﻂ ‪,‬ﳝﻜﻦ ﻣﻦ ﺧﻼﳍﺎ ﺍﻟﺘﻨﻘﻞ ﻭﺍﻟﻮﺻﻮﻝ ﺇﱃ ﻣﻮﺍﻗﻊ‬
‫ﺃﺧﺮﻯ‪،‬‬
‫ﺍﻟﺸﻜﻞ ﺍﻟﻌﺎﻡ ﻟﻠﺨﺎﺻﻴﺔ ‪: HREF‬‬
‫> " ﻋﻨﻮﺍﻥ ‪ URL‬ﺇﻟﻴﻪ ﺍﻻﻧﺘﻘﺎﻝ ﺍﳌﺮﺍﺩ "=‪<a href‬‬
‫ﺍﻻﺭﺗﺒﺎﻁ ﻧﺺ‬
‫>‪</a‬‬
‫ﻣﻼﺣﻈﺔ‪:‬‬
‫ﳚﺐ ﺃﻥ ﻳﻜﺘﺐ ﻋﻨﻮﺍﻥ ﺍﳌﻮﻗﻊ ﺍﳌﺮﺍﺩ ﺍﻻﻧﺘﻘﺎﻝ ﺍﻟﻴﻪ ﻛﺎﻣﻼﹰ‪.‬‬

‫‪26‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺃﻧﻮﺍﻉ ﺍﻻﺭﺗﺒﺎﻃﺎﺕ‬
‫ﺍﻟﻨﻮﻉ ﺍﻷﻭﻝ ‪ :‬ﺇﺩﺭﺍﺝ ﺍﺭﺗﺒﺎﻁ ﺗﺸﻌﱯ ﻳﺸﲑ ﺇﱃ ﻣﻮﻗﻊ ﺧﺎﺭﺟﻲ‬
‫ﻟﻨﻘﻢ ﺑﺈﺩﺭﺍﺝ ﺍﺭﺗﺒﺎﻁ ﺗﺸﻌﱯ ﻳﺸﲑ ﺇﱃ ﻣﻮﻗﻊ ﺟﺎﻣﻌﺔ ﺍﳌﻠﻚ ﺳﻌﻮﺩ‪ .‬ﻭﻋﻨﻮﺍﻧﻪ‬
‫‪ http://www.ksu.edu.sa‬ﰲ ﻫﺬﻩ ﺍﳊﺎﻟﺔ ﻳﺘﻢ ﻛﺘﺎﺑﺔ ﺍﻟﺸﻔﺮﺓ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﱄ‪:‬‬
‫>" ‪<A HREF=" http://www.ksu.edu.sa‬‬
‫‪King Saud University‬‬
‫>‪</A‬‬
‫ﻭﻳﻈﻬﺮ ﺍﻻﺭﺗﺒﺎﻁ ﻛﻤﺎ ﻳﻠﻲ‪:‬‬
‫‪King Saud University‬‬
‫ﻛﻤﺎ ﳝﻜﻨﻚ ﺇﺩﺭﺍﺝ ﺻﻮﺭﺓ ﺑﺪﻻﹰ ﻋﻦ ﺍﻟﻜﻠﻤﺎﺕ ‪-‬ﻛﻤﺎ ﺗﺸﺎﻫﺪ ﰲ ﺍﻟﻜﺜﲑ ﻣﻦ ﺍﳌﻮﺍﻗﻊ‪ -‬ﻭﻛﻞ ﻣﺎ ﻋﻠﻴﻚ ﻓﻌﻠﻪ‬
‫ﰲ ﻫﺬﻩ ﺍﳊﺎﻟﺔ ﻫﻮ ﻛﺘﺎﺑﺔ ﺍﻟﻮﺳﻢ ﺍﳋﺎﺹ ﺑﺈﺩﺭﺍﺝ ﺍﻟﺼﻮﺭﺓ ﺑﲔ ﺍﻟﻮﲰﲔ >‪ </A> ... <A‬ﺑﺎﻟﺸﻜﻞ‬
‫ﺍﻟﺘﺎﱄ‪:‬‬
‫>"‪<A href="http:\\www.ksu.edu.sa‬‬
‫>"‪<img src=“Image Path‬‬
‫>‪</A‬‬
‫ﻭﺍﻟﺬﻱ ﻳﺆﺩﻱ ﺇﱃ ﻇﻬﻮﺭ ﺍﻟﺼﻮﺭﺓ ﺍﶈﺪﺩﺓ ﰲ ﺍﳌﺴﺎﺭ ﻛﺎﺭﺗﺒﺎﻁ ﺗﺸﻌﱯ ﳌﻮﻗﻊ ﺟﺎﻣﻌﺔ ﺍﳌﻠﻚ ﺳﻌﻮﺩ‬
‫ﺣﻴﺚ ‪ Image Path‬ﲤﺜﻞ ﻣﺴﺎﺭ ﺍﻟﺼﻮﺭﺓ‬
‫ﻭﺑﺸﻜﻞ ﻋﺎﻡ‬
‫ﻓﺈﻥ ﺃﻱ ﺷﻲﺀ ﻳﻮﺿﻊ ﺑﲔ ﺍﻟﻮﲰﲔ >‪ <A> ... </A‬ﺳﻮﻑ ﻳﻜﻮﻥ ﺍﻟﻮﺳﻴﻠﺔ ﺃﻭ ﺍﻟﻌﻨﻮﺍﻥ ﺍﻟﺬﻱ ﻳﻨﻘﻠﻨﺎ ﺇﱃ‬
‫ﺍﳌﻮﻗﻊ ﺍﳌﺸﺎﺭ ﺇﻟﻴﻪ ﰲ ﺍﻻﺭﺗﺒﺎﻁ ﺍﻟﺘﺸﻌﱯ‪ ،‬ﺳﻮﺍﺀً ﻛﺎﻥ ﻫﺬﺍ ﺍﻟﺸﻲﺀ ﻧﺼﺎﹰ ﺃﻭ ﺻﻮﺭﺓ ﺃﻭ ﻛﻼﳘﺎ ﻣﻌﺎﹰ‪.‬‬
‫ﺍﻟﻨﻮﻉ ﺍﻟﺜﺎﱐ‪ :‬ﻫﻮ ﺃﻥ ﻳﺸﲑ ﺍﻻﺭﺗﺒﺎﻁ ﺍﻟﺘﺸﻌﱯ ﺇﱃ ﻣﻠﻒ ﻣﻮﺟﻮﺩ ﰲ ﻧﻔﺲ ﺍﳌﻮﻗﻊ )ﺃﻱ ﻣﻠﻒ ﳏﻠﻲ( ﺳﻮﺍﺀً ﻛﺎﻥ‬
‫ﻣﻠﻒ ‪ HTML‬ﺃﻭ ﺻﻮﺭﺓ ﺃﻭ ﻏﲑ ﺫﻟﻚ‪.‬‬

‫ﰲ ﻫﺬﻩ ﺍﳊﺎﻟﺔ ﻓﺈﻥ ﻣﺎ ﻳﻜﺘﺐ ﻣﻊ ﺍﳋﺎﺻﻴﺔ ‪ HREF‬ﻫﻮ ﺍﺳﻢ ﺍﳌﻠﻒ ﺍﳌﻄﻠﻮﺏ ﺍﻟﻮﺻﻮﻝ ﺇﻟﻴﻪ‪.‬‬
‫‪ -1‬ﺇﻧﺸﺎﺀ ﺍﺭﺗﺒﺎﻁ ﺗﺸﻌﱯ ﻳﻘﻮﺩﻧﺎ ﺇﱃ ﺍﻟﺼﻔﺤﺔ ﺍﻟﺮﺋﻴﺴﻴﺔ ﳌﻮﻗﻊ )ﻣﻠﻒ‪ ( HTML‬ﻧﻔﺮﺽ ﺍﻥ ﻣﻠﻒ‬
‫ﺍﻟﺼﻔﺤﺔ ﺍﻟﺮﺋﻴﺴﻴﺔ ﻫﻮ ‪ index.html‬ﻭﺑﺎﻟﺘﺎﱄ ﻓﺎﻥ ﺍﻟﺸﻔﺮﺓ ﺍﳋﺎﺻﺔ ﺑﺎﻟﻮﺻﻮﻝ ﺍﱄ ﺍﻟﺼﻔﺤﺔ ﺍﻟﺮﺋﻴﺴﺔ‬
‫ﻣﻦ ﺃﻱ ﺻﻔﺤﺔ ﺍﺧﺮﻯ ﺩﺍﺧﻞ ﺍﳌﻮﻗﻊ ﻫﻲ‬
‫>‪<A HREF="index.html">Main Page</A‬‬
‫‪Main Page‬‬

‫‪27‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫‪ -2‬ﺍﺭﺗﺒﺎﻁ ﻳﺸﲑ ﺍﱃ ﺻﻮﺭﺓ‬

‫>"‪<a href="http://faculty.ksu.edu.sa/images/logo.gif‬‬
‫ﺷﻌﺎﺭ ﺍﳉﺎﻣﻌﺔ‬
‫>‪</a‬‬
‫ﺍﻟﻨﻮﻉ ﺍﻟﺜﺎﻟﺚ‪ :‬ﻭﻫﻮ ﺃﻥ ﺗﻘﻮﻡ ﺑﺈﺩﺭﺍﺝ ﺍﺭﺗﺒﺎﻁ ﺗﺸﻌﱯ ﻟﻌﻨﻮﺍﻥ ﺑﺮﻳﺪ ﺇﻟﻜﺘﺮﻭﱐ‪،‬‬
‫ﻳﺆﺩﻱ ﺍﻟﻨﻘﺮ ﻋﻠﻴﻪ ﺇﱃ ﺇﻃﻼﻕ ﺑﺮﻧﺎﻣﺞ ﺍﻟﱪﻳﺪ ﺍﻹﻟﻜﺘﺮﻭﱐ ﻟﻠﺰﺍﺋﺮ ﺑﺸﻜﻞ ﺗﻠﻘﺎﺋﻲ‪ .‬ﻓﺎﻹﺧﺘﻼﻑ ﺍﻟﻮﺣﻴﺪ ﺍﻟﺬﻱ‬
‫ﻳﻄﺮﺃ ﻫﻨﺎ ﻫﻮ ﻛﺘﺎﺑﺔ ﻛﻠﻤﺔ ‪ MAILTO‬ﺑﻌﺪ ﺧﺎﺻﻴﺔ ‪ HREF‬ﻟﻜﻲ ﺗﺪﻝ ﻋﻠﻰ ﺃﻥ ﺍﻟﻌﻨﻮﺍﻥ ﺍﻟﺬﻱ ﻳﻠﻲ‬
‫ﻫﻮ ﻋﻨﻮﺍﻥ ‪ EMAIL‬ﻭﻟﻴﺲ ﺃﻱ ﻋﻨﻮﺍﻥ ﺁﺧﺮ‬
‫>‪<A HREF="MAILTO:[email protected]"> My Email </A‬‬
‫‪My Email‬‬
‫ﺍﳋﺎﺻﻴﺔ ‪target‬‬

‫ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﻘﻮﻡ ﺑﺘﺤﺪﻳﺪ ﺍﳌﻜﺎﻥ ﺍﻟﺬﻱ ﺳﺘﻔﺘﺢ ﻓﻴﻪ ﺍﻟﻨﺎﻓﺬﺓ ﺍﳉﺪﻳﺪﺓ ﻭﺗﺄﺧﺬ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‬

‫‪ _self .1‬ﻓﺘﺢ ﺍﻻﺭﺗﺒﺎﻁ ﰲ ﻧﻔﺲ ﺍﻟﻨﺎﻓﺬﺓ ﺍﳊﺎﻟیﺔ‬

‫‪_blank .2‬ﻓﺘﺢ ﺍﻻﺭﺗﺒﺎﻁ ﰲ ﻧﺎﻓﺬﺓ ﺟﺪیﺪﺓ‬

‫>" ‪<a href="http://www.tcr.edu.sa" target="_self‬‬
‫‪Teachers College‬‬
‫>‪</a‬‬
‫ﺑﺮاﻣﺞ إدارة اﻻرﺗﺒﺎﻃﺎت‬
‫ﻫﻲ ﺑﺮﺍﻣﺞ ﺗﺴﺎﻋﺪ ﰲ ﺍﻟﺘﺄﻛﺪ ﻣﻦ ﻋﻤﻞ ﺍﻻﺭﺗﺒﺎﻃﺎﺕ ﰲ ﺍﳌﻮﻗﻊ‪ ،‬ﲝﻴﺚ ﺗﻘﻮﻡ ﺑﻔﺤﺺ ﲨﻴﻊ‬
‫ﺍﻻﺭﺗﺒﺎﻃﺎﺕ ﰲ ﺍﳌﻮﻗﻊ ﻭﲢﺪﻳﺪ ﺍﻟﱵ ﺗﻌﻤﻞ ﻭﺍﻟﱵ ﻻ ﺗﻌﻤﻞ ﺃﻭ ﻏﲑ ﺻﺎﳊﺔ‪.‬‬
‫ﻣﻦ ﻫﺬﻩ ﺍﻟﱪﺍﻣﺞ‪:‬‬
‫‪Net Mechanic‬‬
‫‪Adobe Go Live‬‬

‫‪28‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﶈﺎﺿﺮﺓ ﺍﻟﺜﺎﻣﻨﺔ‬
‫ﺍﻟﺼﻮﺕ ﻭﺍﻟﻔﻴﺪﻳﻮ‪Voice & Video‬‬
‫ﺗﻀﻤﲔ ﺍﻟﺼﻮﺕ ﻭﺍﻟﻔﻴﺪﻳﻮ ﻟﺼﻔﺤﺎﺕ ﺍﻟﻮﻳﺐ‬
‫•ﳝﻜﻦ ﺇﺿﺎﻓﺔ ﻗﺼﺎﺻﺎﺕ ﺍﻟﺼﻮﺕ ﻭﺍﻟﻔﻴﺪﻳﻮ ﺇﱃ ﺻﻔﺤﺔ ﺍﻟﻮﻳﺐ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﺴﻤﺔ‪ ، embed‬ﻭﺗﻌﺘﱪ ﻫﺬﻩ‬
‫ﺍﻟﻄﺮﻳﻘﺔ ﺍﳌﻌﻴﺎﺭﻳﺔ ﻹﺿﺎﻓﺔ ﺍﻟﺼﻮﺕ ﻭﺍﻟﻔﻴﺪﻳﻮ‪.‬‬
‫•ﺍﳋﺎﺻﻴﺔ ‪ :src‬ﺗﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﻣﻮﻗﻊ ﻭﺍﺳﻢ ﺍﻟﻔﻴﺪﻳﻮ ﺃﻭ ﺍﻟﺼﻮﺕ‪.‬‬
‫> " ‪<embed src="wildlife.wmv‬‬ ‫ﻣﺜﺎﻝ‬
‫ﻣﺜﺎﻝ‪ -:‬ﻳﻮﺿﺢ ﻛﻴﻔﻴﺔ ﺍﺩﺭﺍﺝ ﺍﻟﻔﻴﺪﻳﻮ ﰲ ﺻﻔﺤﺔ ‪html‬‬
‫> ‪<html dir =rtl‬‬
‫>‪<head‬‬
‫>‪</title‬ﺍﻟﺼﻮﺕ ﻭﺍﻟﻔﻴﺪﻳﻮ>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫> " ‪<embed src="wildlife.wmv‬‬
‫>‪</p‬ﺍﻧﻘﺮ ﻓﻮﻕ ﺗﺸﻐﻴﻞ ﻣﻦ ﺃﺟﻞ ﲰﺎﻉ ﺍﻟﺼﻮﺕ‪ ،‬ﻭﻣﻦ ﺃﺟﻞ ﺍﻟﺘﻮﻗﻒ ﺍﻧﻘﺮ ﻓﻮﻕ ﺇﻳﻘﺎﻑ>‪<p‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﺧﺼﺎﺋﺺ ﺍﻟﻮﺳﻢ ‪ Embed‬ﺍﳌﺘﻌﻠﻘﺔ ﺑﻄﺮﻳﻘﺔ ﺍﻟﻌﺮﺽ‬
‫•ﺍﳋﺎﺻﻴﺔ‪width‬‬
‫ﺗﺴﺘﺨﺪﻡ ﻟﻠﺘﺤﻜﻢ ﰲ ﻋﺮﺽ ﻣﺸﻐﻞ ﺍﻟﻔﻴﺪﻳﻮ‬
‫•ﺍﳋﺎﺻﻴﺔ ‪height‬‬
‫ﺗﺴﺘﺨﺪﻡ ﻟﻠﺘﺤﻜﻢ ﰲ ﺍﺭﺗﻔﺎﻉ ﻣﺸﻐﻞ ﺍﻟﻔﻴﺪﻳﻮ‬
‫•ﺍﳋﺎﺻﻴﺔ ‪hidden‬‬
‫ﺗﺴﺘﺨﺪﻡ ﻹﺧﻔﺎﺀ ﻣﺸﻐﻞ ﺍﻟﻔﻴﺪﻳﻮ ﻭﲰﺎﻉ ﺍﻟﺼﻮﺕ ﻓﻘﻂ‬

‫‪29‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻣﺜﺎﻝ‪ -:‬ﻳﻮﺿﺢ ﻛﻴﻔﻴﺔ ﺍﺳﺘﺨﺪﺍﻡ ﺧﺼﺎﺋﺺ ﺍﻟﻌﺮﺽ ﻟﻠﻔﻴﺪﻳﻮ‬

‫> ‪<html dir =rtl‬‬
‫>‪<head‬‬
‫>‪</title‬ﺍﻟﺼﻮﺕ ﻭﺍﻟﻔﻴﺪﻳﻮ>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>" ‪<embed src"=Wildlife.wmv "width"=360 "height"=165‬‬
‫>‪</p‬ﺍﻧﻘﺮ ﻓﻮﻕ ﺗﺸﻐﻴﻞ ﻣﻦ ﺃﺟﻞ ﲰﺎﻉ ﺍﻟﺼﻮﺕ‪ ،‬ﻭﻣﻦ ﺃﺟﻞ ﺍﻟﺘﻮﻗﻒ ﺍﻧﻘﺮ ﻓﻮﻕ ﺇﻳﻘﺎﻑ >‪<p‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫ﺧﺼﺎﺋﺺ ﺍﻟﻮﺳﻢ ‪ Embed‬ﺍﳌﺘﻌﻠﻘﺔ ﺑﻌﻤﻞ ﺍﻟﻔﻴﺪﻳﻮ‬

‫‪ .1‬ﺍﳋﺎﺻﻴﺔ ‪ autostart‬ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺄﺧﺬ ﻗﻴﻤﺘﲔ‬

‫‪ true - a‬ﺗﻌﲏ ﲤﻜﲔ ﺧﺎﺻﻴﺔ ﺍﻟﺘﺸﻐﻴﻞ ﺍﻟﺘﻠﻘﺎﺋﻲ ﻭﻫﻲ ﺍﻟﻮﺿﻊ ﺍﻻﻓﺘﺮﺍﺿﻲ‬
‫‪ false - b‬ﺗﻌﲏ ﺗﻌﻄﻴﻞ ﺧﺎﺻﻴﺔ ﺍﻟﺘﺸﻐﻴﻞ ﺍﻟﺘﻠﻘﺎﺋﻲ‬
‫‪ .2‬ﺍﳋﺎﺻﻴﺔ ‪ loop‬ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﺄﺧﺬ ﻗﻴﻤﺘﲔ‬
‫‪ true - a‬ﺗﻌﲏ ﺗﻜﺮﺍﺭ ﺗﺸﻐﻴﻞ ﺍﻟﻔﻴﺪﻳﻮ‬
‫‪ false -b‬ﻋﺪﻡ ﺗﻜﺮﺍﺭ ﺗﺸﻐﻴﻞ ﺍﻟﻔﻴﺪﻳﻮ ﻭﻫﻲ ﺍﻟﻮﺿﻊ ﺍﻻﻓﺘﺮﺍﺿﻲ‬
‫‪ .3‬ﺍﳋﺎﺻﻴﺔ ‪ volume‬ﺗﺴﺘﺨﺪﻡ ﻟﻠﺘﺤﻜﻢ ﰲ ﺣﺠﻢ ﺍﻟﺼﻮﺕ‬
‫ﻣﺜﺎﻝ‪ -:‬ﻳﻮﺿﺢ ﻛﻴﻔﻴﺔ ﺍﺳﺘﺨﺪﺍﻡ ﺧﺼﺎﺋﺺ ﻋﻤﻞ ﺍﻟﻔﻴﺪﻳﻮ‬
‫> ‪<html dir =rtl‬‬
‫>‪</title‬ﺍﻟﺼﻮﺕ ﻭﺍﻟﻔﻴﺪﻳﻮ>‪<head> <title‬‬
‫>‪</head><body‬‬
‫"‪<embed src=“wildlife.wmv" autostart="true" loop="true‬‬
‫>‪volume="50" /‬‬
‫>‪.</p‬ﻳﺘﻢ ﻗﺮﺍﺀﺓ ﺍﳌﻠﻒ ﺗﻠﻘﺎﺋﻴﺎﹶ ﺩﻭﻥ ﺃﻥ ﻳﺘﻜﺮﺭ ﻭﲝﺠﻢ ﻗﺪﺭﻩ ‪<p>50‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪30‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻣﺜﺎﻝ‪ -:‬ﻳﻮﺿﺢ ﻛﻴﻔﻴﺔ ﺗﻜﺮﺍﺭ ﺗﺸﻐﻴﻞ ﺍﻟﻔﻴﺪﻳﻮ‬

‫> ‪<html dir =rtl‬‬
‫>‪<head‬‬
‫>‪</title‬ﺍﻟﺼﻮﺕ ﻭﺍﻟﻔﻴﺪﻳﻮ>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<embed src=“wildlife.wmv" loop="true"/‬‬
‫ﺳﻴﺘﻢ ﺗﻜﺮﺍﺭ ﺍﻟﻔﻠﻢ ﺑﺎﺳﺘﻤﺮﺍﺭ >‪<pre‬‬
‫>‪ Loop</pre‬ﺑﺴﺒﺐ ﺍﳋﺎﺻﻴﺔ‬
‫>‪</body></html‬‬
‫ﺇﺿﺎﻓﺔ ﺍﻟﻔﻼﺵ‬
‫ﳝﻜﻦ ﺃﻥ ﳓﺪﺩ ﺃﺑﻌﺎﺩ ﺍﻟﻔﻼﺵ ﻛﻘﻴﻤﺔ ﻣﻄﻠﻘﺔ ﺃﻭ ﻧﺴﺒﻴﺔ ﻭﻧﺴﺘﺨﺪﻡ ﺍﻟﺒﻴﻜﺴﻞ ﻛﻮﺣﺪﺓ ﻗﻴﺎﺱ‪.‬‬
‫ﻣﺜﺎﻝ‬
‫>"‪<embed src="nameflash.swf" width="360" height="135‬‬
‫ﻣﺜﺎﻝ‪ -:‬ﻳﻮﺿﺢ ﻛﻴﻔﻴﺔ ﺗﺸﻐﻴﻞ ﺍﻟﻔﻼﺵ‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</title‬ﺍﻟﻔﻼﺵ>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>"‪<embed src="chmcloc.swf" Hight="340" width="220‬‬
‫>‪</body></html‬‬
‫ﺇﺿﺎﻓﺔ ﺍﻟﺼﻮﺕ ﻛﺨﻠﻔﻴﺔ‬
‫ﺗﺴﺘﺨﺪﻡ ﺍﻟﺴﻤﺔ>‪ <bgsound‬ﻹﺿﺎﻓﺔ ﺍﻟﺼﻮﺕ ﻛﺨﻠﻔﻴﺔ ﻭﻳﻌﻤﻞ ﺗﻠﻘﺎﺋﻴﺎﹰ ﻋﻨﺪ ﻓﺘﺢ ﺍﻟﺼﻔﺤﺔ ﺍﳌﺪﺭﺝ‬
‫ﻓﻴﻬﺎ ﻛﺨﻠﻔﻴﺔ ﻛﻤﺎ ﳝﻜﻦ ﺍﻟﺘﺤﻜﻢ ﰲ ﻋﺪﺩ ﻣﺮﺍﺕ ﺗﻜﺮﺍﺭﻩ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﳋﺎﺻﻴﺔ ‪loop‬‬
‫ﻣﺜﻼﹸ ‪:‬‬
‫>"‪<bgsound src="578B.mp3" loop="5‬‬

‫‪31‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺇﺿﺎﻓﺔ ﻣﻠﻔﺎﺕ ﺍﻟﻮﺳﺎﺋﻂ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻢ >‪<object‬‬

‫‪ .1‬ﺍﳋﺎﺻﻴﺔ ‪ data‬ﺗﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﺍﺳﻢ ﻭﻣﻮﻗﻊ ﻣﻠﻒ ﺍﻟﻮﺳﺎﺋﻂ‬
‫‪ .2‬ﺍﳋﺎﺻﻴﺔ ‪ :type‬ﻟﺘﺤﺪﻳﺪ ﻧﻮﻉ ﺍﻟﻮﺳﺎﺋﻂ‬
‫• ﻟﻠﺼﻮﺭ "‪"image/jpeg","image/gif‬‬
‫• ﻟﻠﺼﻮﺕ "‪"audio/wav","audio/basic‬‬
‫•ﻟﻠﻔﻴﺪﻳﻮ‪"video/mpeg","video/quicktime".‬‬
‫‪ .3‬ﺍﳋﺎﺻﻴﺔ ‪:align‬‬

‫ﺗﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﻣﻮﻗﻊ ﺍﻟﻨﺺ ﺍﻟﺬﻱ ﻳﻠﻲ ﻣﻠﻒ ﺍﻟﻮﺳﺎﺋﻂ ﻭﺗﺄﺧﺬ ﺍﻟﻘﻴﻢ ﺍﻟﺘﺎﻟﻴﺔ‬

‫”‪“bottom” | “left” | “middle” | “right” | ”top‬‬

‫‪ .4‬ﺍﳋﺎﺻﻴﺔ ‪ :width‬ﺗﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﺍﻟﻌﺮﺽ‬
‫‪ .5‬ﺍﳋﺎﺻﻴﺔ ‪ :height‬ﺗﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﺍﻻﺭﺗﻔﺎﻉ‬
‫‪ .6‬ﺍﳋﺎﺻﻴﺔ‪ :hspace‬ﺗﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﺍﳌﺴﺎﻓﺔ ﺍﻻﻓﻘﻴﺔ ﺑﲔ ﺍﻟﻨﺺ ﻭﻣﻠﻒ ﺍﻟﻮﺳﺎﺋﻂ ﻣﻦ ﺍﻟﻨﺎﺣﻴﺘﲔ ﺍﻟﻴﻤﲎ‬
‫ﻭﺍﻟﻴﺴﺮﻯ‬
‫‪ .7‬ﺍﳋﺎﺻﻴﺔ ‪ :vspace‬ﺗﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﺍﳌﺴﺎﻓﺔ ﺍﻟﻌﻤﻮﺩﻳﺔ ﺑﲔ ﺍﻟﻨﺺ ﻭﻣﻠﻒ ﺍﻟﻮﺳﺎﺋﻂ ﻣﻦ ﺍﻟﻨﺎﺣﻴﺘﲔ ﺍﻟﻌﻠﻴﺎ‬
‫ﻭﺍﻟﺴﻔﻠﻰ‬
‫ﻣﺜﺎﻝ‪ -:‬ﻳﻮﺿﺢ ﻛﻴﻔﻴﺔ ﺍﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻢ ‪object‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</title‬ﺍﻟﺼﻮﺕ>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫"‪<object data="578B.wma" Height="340‬‬
‫>‪width="220"></object‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪32‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﶈﺎﺿﺮﺓ ﺍﻟﺘﺎﺳﻌﺔ‬
‫ﺍﳉﺪﺍﻭﻝ‪Tables‬‬
‫ﺗﻌﺪ ﺍﳉﺪﺍﻭﻝ ﻣﻦ ﺃﻗﻮﻯ ﺍﻷﺩﻭﺍﺕ ﺍﻟﱵ ﺗﺘﻀﻤﻨﻬﺎ ﻟﻐﺔ ‪ HTML‬ﺣﻴﺚ ﻻ ﳜﻠﻮ ﺍﻱ ﻣﻮﻗﻊ ﰲ ﺍﻹﻧﺘﺮﻧﺖ ﻣﻦ‬
‫ﺍﺳﺘﺨﺪﺍﻣﻬﺎ‪.‬‬
‫ﺑﺪﺍﻳﺔ‪ ،‬ﺇﻟﻴﻚ ﻫﺬﺍ ﺍﻟﻮﺻﻒ ﺍﻟﺒﺴﻴﻂ ﻟﻠﻮﺳﻮﻡ ﺍﻷﺳﺎﺳﻴﺔ ﺍﳋﺎﺻﺔ ﺑﺎﳉﺪﺍﻭﻝ‬
‫ﻭﺳﻮﻡ ﺗﻌﺮﻳﻒ ﺍﳉﺪﻭﻝ‬ ‫>‪<TABLE>...</TABLE‬‬

‫ﻭﺳﻮﻡ ﺗﻌﺮﻳﻒ ﺍﻟﺼﻒ ﰲ ﺍﳉﺪﻭﻝ‪Table Row‬‬ ‫>‪<TR>...</TR‬‬

‫ﻭﺳﻮﻡ ﺗﻌﺮﻳﻒ ﺍﳋﻼﻳﺎ ﰲ ﺍﻟﺼﻒ ‪Table Data‬‬ ‫>‪<TD> Cell Data </TD‬‬
‫ﻭﺗﻌﺮﻳﻒ ﳏﺘﻮﻳﺎﺕ ﻛﻞ ﺧﻠﻴﺔ‬
‫ﻣﺜﺎﻝ‪ -:‬ﺇﻧﺸﺎﺀ ﺟﺪﻭﻝ ﻣﻜﻮﻥ ﻣﻦ ﺛﻼﺛﺔ ﺻﻔﻮﻑ ﻭﻋﻤﻮﺩﻳﻦ‬
‫>‪<TABLE‬‬
‫>‪<TR‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬
‫>‪<TR‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬
‫>‪<TR‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬
‫>‪</TABLE‬‬

‫‪33‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻃﺮﻳﻘﺔ ﺍﻟﺘﻌﺎﻣﻞ ﻣﻊ ﺍﳉﺪﺍﻭﻝ‬

‫ﺗﺘﻢ ﻋﻠﻰ ﺛﻼﺛﺔ ﻣﺴﺘﻮﻳﺎﺕ‪:‬‬
‫‪ -1‬ﻣﺴﺘﻮﻯ ﺍﳉﺪﻭﻝ ﻛﻜﻞ‬
‫‪ -2‬ﻣﺴﺘﻮﻯ ﺍﻟﺼﻔﻮﻑ ﻛﻜﻞ ﺃﻭ ﻛﻞ ﻭﺍﺣﺪ ﻋﻠﻰ ﺣﺪﻩ‬
‫‪ -3‬ﻣﺴﺘﻮﻯ ﺍﳋﻼﻳﺎ ﻛﻜﻞ ﺃﻭ ﻛﻞ ﻭﺍﺣﺪﺓ ﻋﻠﻰ ﺣﺪﻩ‪.‬‬
‫ﻭﻟﻜﻞ ﻣﻦ ﻫﺬﻩ ﺍﳌﺴﺘﻮﻳﺎﺕ ﺧﺼﺎﺋﺼﻪ ﺍﻟﱵ ﻳﻨﻔﺮﺩ ‪‬ﺎ ﻛﻤﺎ ﺃﻥ ﻫﻨﺎﻙ ﺧﺼﺎﺋﺺ ﻣﺸﺘﺮﻛﺔ ﺗﺴﺘﺨﺪﻡ ﻣﻊ ﻛﻞ‬
‫ﺍﻟﻮﺳﻮﻡ‪.‬‬
‫ﺍﳋﺼﺎﺋﺺ ﺍﻟﱵ ﺗﺴﺘﺨﺪﻡ ﻣﻊ ﺍﻟﻮﺳﻮﻡ >‪)<TABLE > ... </TABLE‬ﻋﻠﻰ ﻣﺴﺘﻮﻯ‬
‫ﺍﳉﺪﻭﻝ ﻛﻜﻞ(‬

‫ﺍﻟﻮﻇﻴﻔﺔ‬ ‫ﺍﳋﺎﺻﻴﺔ‬
‫‪ BORDER‬ﺗﻘﻮﻡ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺑﺈﺿﺎﻓﺔ ﺣﺪﻭﺩ ﻟﻠﺠﺪﻭﻝ ﻭﲢﺪﻳﺪ ﲰﺎﻛﺘﻬﺎ‪ ،‬ﻭﺍﻟﻘﻴﻤﺔ‬
‫ﺍﻹﻓﺘﺮﺍﺿﻴﺔ ﳍﺎ ﻫﻲ ﺻﻔﺮ ﺃﻱ ﻻ ﺣﺪﻭﺩ‬
‫>"‪<TABLE BORDER="5‬‬
‫>"‪<TABLE BORDER="0‬‬
‫‪ WIDTH‬ﻧﺴﺘﺨﺪﻡ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﻟﺘﺤﺪﻳﺪ ﻋﺮﺽ ﺍﳉﺪﻭﻝ ﻛﻜﻞ‪ .‬ﻭﻫﻨﺎﻙ ﺃﺳﻠﻮﺑﲔ‬
‫ﻟﺘﺤﺪﻳﺪ ﺍﻟﻌﺮﺽ‪ :‬ﺍﳌﻄﻠﻖ ﻭﺍﻟﻨﺴﱯ ﺃﻱ ﻛﺘﺎﺑﺔ ﺭﻗﻢ ﻧﺴﱯ ﻣﺌﻮﻱ ﳛﺪﺩ ﻋﺮﺽ‬
‫ﺍﳉﺪﻭﻝ ﺣﺴﺐ ﻋﺮﺽ ﻧﺎﻓﺬﺓ ﺍﳌﺘﺼﻔﺢ‪.‬‬
‫>"‪<TABLE WIDTH="600‬‬
‫>"‪<TABLE WIDTH="80%‬‬
‫‪ HEIGHT‬ﻟﺘﺤﺪﻳﺪ ﺍﺭﺗﻔﺎﻉ ﺍﳉﺪﻭﻝ‪ ،‬ﻭﻳﻜﻮﻥ ﲢﺪﻳﺪ ﻫﺬﺍ ﺍﻹﺭﺗﻔﺎﻉ ﻣﻦ ﺧﻼﻝ ﻗﻴﻤﺔ ﻣﻄﻠﻘﺔ‬
‫ﲢﺪﺩ ﺍﻹﺭﺗﻔﺎﻉ ﺑﺎﻟﺒﻴﻜﺴﻞ‪ .‬ﺃﻭ ﻗﻴﻤﺔ ﻧﺴﺒﻴﺔ ﲢﺪﺩ ﺍﺭﺗﻔﺎﻉ ﺍﳉﺪﻭﻝ ﺑﺎﻟﻨﺴﺒﺔ‬
‫ﻹﺭﺗﻔﺎﻉ ﺻﻔﺤﺔ ﺍﳌﺘﺼﻔﺢ‬
‫>"‪<TABLE HEIGHT="500‬‬
‫>"‪<TABLE HEIGHT="100%‬‬
‫‪ CELLSPACING‬ﻟﺘﺤﺪﻳﺪ ﺍﳌﺴﺎﻓﺔ ﺑﲔ ﻛﻞ ﺧﻠﻴﺔ ﻣﻦ ﺧﻼﻳﺎ ﺍﳉﺪﻭﻝ‬
‫>"‪<TABLE CELLSPACING="10‬‬

‫‪34‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫‪ CELLPADDING‬ﻟﺘﺤﺪﻳﺪ ﺍﳌﺴﺎﻓﺔ ﺍﻟﻔﺎﺻﻠﺔ ﺑﲔ ﺍﳊﺪﻭﺩ ﻭﺑﺪﺍﻳﺔ ﺍﻟﻨﺺ ﰲ ﻛﻞ ﺧﻠﻴﺔ‪ .‬ﺃﻭ ﻟﻨﻘﻞ‪:‬‬

‫ﲢﺪﻳﺪ ﺣﺠﻢ ﺍﳍﻮﺍﻣﺶ ﳋﻼﻳﺎ ﺍﳉﺪﻭﻝ‪.‬‬
‫>"‪<TABLE CELLPADDING="10‬‬
‫‪ ALIGN‬ﻟﺘﺤﺪﻳﺪ ﳏﺎﺫﺍﺓ ﺍﳉﺪﻭﻝ ﺃﻓﻘﻴﺎﹰ ﻋﻠﻰ ﺍﻟﺼﻔﺤﺔ ﳝﻴﻨﺎﹰ ﺃﻭ ﻭﺳﻄﺎﹰ ﺃﻭ ﻳﺴﺎﺭﺍﹰ‪ .‬ﻭﻫﻮ‬
‫ﻳﺄﺧﺬ ﺍﻟﻘﻴﻢ ‪left ,center ,right‬‬
‫>"‪<TABLE ALIGN="Left‬‬
‫>"‪<TABLE ALIGN="Right‬‬
‫‪ BGCOLOR‬ﻭﻳﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﻟﻮﻥ ﺍﳋﻠﻔﻴﺔ ﻟﻠﺠﺪﻭﻝ‬
‫>"‪<TABLE BGCOLOR="#00FFFF‬‬

‫ﺍﳋﺼﺎﺋﺺ ﺍﻟﱵ ﺗﺴﺘﺨﺪﻡ ﻣﻊ ﺍﻟﻮﺳﻮﻡ >‪)<TR > ... </TR‬ﻋﻠﻰ ﻣﺴﺘﻮﻯ ﺍﻟﺼﻒ(‬

‫ﺍﻟﻮﻇﻴﻔﺔ‬ ‫ﺍﳋﺎﺻﻴﺔ‬
‫‪ ALIGN‬ﻟﺘﺤﺪﻳﺪ ﳏﺎﺫﺍﺓ ﺍﻟﻨﺺ ﺃﻓﻘﻴﺎﹰ ﺩﺍﺧﻞ ﺍﳋﻼﻳﺎ ﺍﻟﱵ ﻳﺘﻜﻮﻥ ﻣﻨﻬﺎ ﺍﻟﺼﻒ‪ ،‬ﻭﺍﻟﻘﻴﻢ ﺍﶈﺘﻤﻠﺔ ﳍﺎ‬
‫ﻫﻲ ‪ Right, Left, Center‬ﻭﺍﻟﻘﻴﻤﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ ﻫﻲ ‪Left‬‬
‫‪ VALIGN‬ﻟﺘﺤﺪﻳﺪ ﺍﶈﺎﺫﺍﺓ ﺍﻟﻌﻤﻮﺩﻳﺔ ﻟﻠﻨﺺ ﺩﺍﺧﻞ ﺧﻼﻳﺎ ﺍﻟﺼﻒ‪ ،‬ﻭﺫﻟﻚ ﺇﻣﺎ ﻟﻸﻋﻠﻰ ﺃﻭ ﻟﻸﺳﻔﻞ‬
‫ﺃﻭ ﰲ ﺍﳌﻨﺘﺼﻒ‪ .‬ﻭﻗﻴﻤﻬﺎ ﻋﻠﻰ ﺍﻟﺘﻮﺍﱄ ﻫﻲ‪Middle, Bottom, Top :‬‬

‫‪ BGCOLOR‬ﻟﺘﺤﺪﻳﺪ ﻟﻮﻥ ﺍﳋﻠﻔﻴﺔ ﻟﻠﺨﻼﻳﺎ ﺍﻟﱵ ﻳﺘﻜﻮﻥ ﻣﻨﻬﺎ ﺍﻟﺼﻒ‪ .‬ﻭﻫﻨﺎ ﻳﺘﻢ ﲡﺎﻫﻞ ﻟﻮﻥ ﺍﳋﻠﻔﻴﺔ‬
‫ﺍﶈﺪﺩ ﺿﻤﻦ ﻭﺳﻢ >‪ <TABLE‬ﻭﻳﺘﻢ ﺗﻄﺒﻴﻖ ﺍﻟﻠﻮﻥ ﺍﶈﺪﺩ ﻫﻨﺎ‪.‬‬

‫ﻣﺜﺎﻝ ﻳﻮﺿﺢ ﺍﺳﺘﺨﺪﺍﻡ ﺧﺼﺎﺋﺺ ﺍﻟﻮﺳﻮﻡ >‪<TR > ...</TR‬‬

‫>"‪<TABLE BORDER="5" HEIGHT="300‬‬

‫> "‪<TR ALIGN="Left " BGCOLOR="#808080‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬

‫‪35‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫> "‪<TR ALIGN="Right " BGCOLOR="#C0C0C0‬‬

‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬
‫>"‪<TR ALIGN="Center‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR></TABLE‬‬
‫ﺍﳋﺼﺎﺋﺺ ﺍﻟﱵ ﺗﺴﺘﺨﺪﻡ ﻣﻊ ﺍﻟﻮﺳﻮﻡ >‪) <TD> …. </TD‬ﻋﻠﻰ ﻣﺴﺘﻮﻯ ﺍﳋﻠﻴﺔ(‬
‫ﺍﻟﻮﻇﻴﻔﺔ‬ ‫ﺍﳋﺎﺻﻴﺔ‬
‫ﲢﺪﺩ ﳏﺎﺫﺍﺓ ﺍﻟﻨﺺ ﺍﳌﻮﺟﻮﺩ ﰲ ﺍﳋﻠﻴﺔ ﺃﻓﻘﻴﺎﹰ‪ ،‬ﻭﺍﻟﻘﻴﻢ ﺍﳌﺴﺘﺨﺪﻣﺔ ﻫﻲ ‪Left,‬‬ ‫‪ALIGN‬‬
‫‪Center, Right‬‬
‫ﲢﺪﺩ ﺍﶈﺎﺫﺍﺓ ﺍﻟﻌﻤﻮﺩﻳﺔ ﻟﻠﻨﺺ‪ ،‬ﻭﻫﻮ ﻳﺄﺧﺬ ﺍﻟﻘﻴﻢ ‪Top, Middle, Bottom‬‬ ‫‪VALIGN‬‬

‫ﲢﺪﺩ ﻋﺮﺽ ﺍﳋﻠﻴﺔ‪ ،‬ﻭﺫﻟﻚ ﺑﻜﺘﺎﺑﺔ ﺍﻟﻘﻴﻤﺔ ﺍﳌﺒﺎﺷﺮﺓ ﻟﻠﻌﺮﺽ ﺍﳌﻄﻠﻮﺏ ﺑﺎﻟﺒﻜﺴﻞ‪ ،‬ﺃﻭ‬ ‫‪WIDTH‬‬
‫ﺑﻜﺘﺎﺑﺔ ﺭﻗﻢ ﳝﺜﻞ ﺍﻟﻨﺴﺒﺔ ﺍﳌﺌﻮﻳﺔ‪ .‬ﻭﻳﻜﻔﻲ ﲢﺪﻳﺪ ﺍﻟﻌﺮﺽ ﻟﻠﺨﻼﻳﺎ ﰲ ﺃﺣﺪ ﺍﻟﺼﻔﻮﻑ‬
‫ﻟﻜﻲ ﻳﺘﻢ ﺗﻄﺒﻴﻘﻪ ﻋﻠﻰ ﻛﻞ ﺍﳋﻼﻳﺎ ﰲ ﻛﻞ ﺍﻟﺼﻔﻮﻑ‪.‬‬

‫ﲢﺪﺩ ﺍﻹﺭﺗﻔﺎﻉ ﺍﳌﻄﻠﻮﺏ ﻟﻠﺨﻠﻴﺔ ﰲ ﺍﻟﺼﻒ‪ ،‬ﻭﺫﻟﻚ ﺑﺎﻟﻄﺮﻕ ﺍﳌﺒﺎﺷﺮﺓ ﺃﻭ ﺍﻟﻨﺴﺒﻴﺔ‪.‬‬ ‫‪HEIGHT‬‬
‫ﻭﻗﻴﺎﻣﻚ ﺑﺘﺤﺪﻳﺪ ﺍﺭﺗﻔﺎﻉ ﺇﺣﺪﻯ ﺍﳋﻼﻳﺎ ﰲ ﺍﻟﺼﻒ ﻳﺆﺩﻱ ﺇﱃ ﺗﻄﺒﻴﻘﻪ ﻋﻠﻰ ﻛﻞ‬
‫ﺍﳋﻼﻳﺎ ﻓﻴﻪ‪.‬‬
‫ﲢﺪﺩ ﻟﻮﻥ ﺧﻠﻔﻴﺔ ﺍﳋﻠﻴﺔ‬ ‫‪BGCOLOR‬‬
‫ﻳﻘﻮﻡ ﺑﺪﻣﺞ ﺍﳋﻠﻴﺔ ﺍﳊﺎﻟﻴﺔ ﻣﻊ ﺍﻟﻌﺪﺩ ﺍﳌﻄﻠﻮﺏ ﻣﻦ ﺍﳋﻼﻳﺎ ﺍﻟﱵ ﺗﻠﻴﻬﺎ ﺃﻓﻘﻴﺎﹰ‬
‫>"‪<TD COLSPAN="n‬‬ ‫‪COLSPAN‬‬
‫ﺣﻴﺚ ‪ n‬ﻫﻮ ﻋﺪﺩ ﺍﳋﻼﻳﺎ ﺍﻟﱵ ﺳﻴﺘﻢ ﺩﳎﻬﺎ‬
‫ﻳﻘﻮﻡ ﺑﺪﻣﺞ ﺍﳋﻠﻴﺔ ﺍﳊﺎﻟﻴﺔ ﻣﻊ ﺍﻟﻌﺪﺩ ﺍﳌﻄﻠﻮﺏ ﻣﻦ ﺍﳋﻼﻳﺎ ﺍﻟﱵ ﺗﻠﻴﻬﺎ ﻋﻤﻮﺩﻳﺎﹰ )ﺃﻱ‬
‫ﺃﺳﻔﻠﻬﺎ(‪.‬‬
‫‪ROWSPAN‬‬
‫>"‪<TD ROWSPAN="n‬‬
‫ﻭﺑﺎﻟﻄﺒﻊ ‪ n‬ﻫﻮ ﻋﺪﺩ ﺍﳋﻼﻳﺎ ﺍﻟﱵ ﺳﻴﺘﻢ ﺩﳎﻬﺎ‬

‫‪36‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺑﻌﺾ ﺍﳌﻼﺣﻈﺎﺕ ﺍﳌﻬﻤﺔ ﺍﻟﱵ ﺗﺘﻌﻠﻖ ﺑﺎﳉﺪﺍﻭﻝ‬

‫‪ .1‬ﺃﻭﻟﻮﻳﺔ ﺍﻟﺘﻨﻔﻴﺬ ﻟﻠﺨﺼﺎﺋﺺ ﺍﻟﱵ ﺗﺘﻜﺮﺭ ﻣﻊ ﲨﻴﻊ ﺍﻟﻮﺳﻮﻡ‪.‬‬
‫ﺧﺬ ﻣﺜﻼﹰ ﺍﳋﺎﺻﻴﺔ ‪ .BGCOLOR‬ﻛﻴﻒ ﻳﺘﻢ ﺍﻟﺘﻌﺎﻣﻞ ﻣﻌﻬﺎ ﺇﺫﺍ ﻛﺮﺭﺕ ﻣﻊ ﲨﻴﻊ ﺍﻟﻮﺳﻮﻡ؟ ﺑﻜﻞ ﺑﺴﺎﻃﺔ‬
‫ﻳﺘﻢ ﺗﻄﺒﻴﻖ ﺍﻟﻠﻮﻥ ﺍﶈﺪﺩ ﻣﻊ ﻭﺳﻢ ﺍﳋﻠﻴﺔ‪ ،‬ﻓﺈﺫﺍ ﱂ ﻳﻜﻦ ﳏﺪﺩﺍﹰ ﻳﻄﺒﻖ ﺍﻟﻠﻮﻥ ﺍﶈﺪﺩ ﻣﻊ ﻭﺳﻢ ﺍﻟﺼﻒ‪ ،‬ﻓﺈﺫﺍ ﱂ‬
‫ﻳﻮﺟﺪ ﻳﻄﺒﻖ ﺍﻟﻠﻮﻥ ﺍﶈﺪﺩ ﻣﻊ ﻭﺳﻢ ﺍﳉﺪﻭﻝ‪ .‬ﻭﺇﺫﺍ ﱂ ﻳﻜﻦ ﻫﺬﺍ ﳏﺪﺩﺍﹰ ﺑﺪﻭﺭﻩ ﻳﺘﻢ ﺇﻋﺘﻤﺎﺩ ﻟﻮﻥ ﺧﻠﻔﻴﺔ ﺍﻟﺼﻔﺤﺔ‬
‫ﺍﶈﺪﺩ ﰲ ﺍﻟﻮﺳﻢ >‪.<BODY‬‬
‫‪ .2‬ﺍﳋﺼﺎﺋﺺ ‪ WIDTH, HEIGHT‬ﺃﻓﻀﻞ ﻃﺮﻳﻘﺔ ﻟﻠﺘﻌﺎﻣﻞ ﻣﻌﻬﺎ ﻫﻲ ﻗﻴﺎﻣﻚ ﺑﺘﺤﺪﻳﺪ ﺍﻟﻌﺮﺽ ﻭ‬
‫ﺍﻹﺭﺗﻔﺎﻉ ﻟﻠﺠﺪﻭﻝ ﻛﻜﻞ ﻣﻦ ﺧﻼﻝ ﺍﻟﻮﺳﻢ >‪.<TABLE‬‬
‫‪ .3‬ﺇﺫﺍ ﺃﺭﺩﺕ ﺃﻥ ﲢﺘﻮﻱ ﺑﻌﺾ ﺍﻟﺼﻔﻮﻑ ﰲ ﺍﳉﺪﻭﻝ ﻋﻠﻰ ﻋﺪﺩ ﻣﻦ ﺍﳋﻼﻳﺎ ﺃﻗﻞ ﻣﻦ ﺑﺎﻗﻲ ﺍﻟﺼﻔﻮﻑ‪ ،‬ﻓﻼ‬
‫ﻳﻜﻔﻲ ﺃﻥ ﺗﻘﻮﻡ ﲝﺬﻑ ﻭﺳﻮﻡ ﺍﳋﻼﻳﺎ ﻣﻨﻬﺎ‪ .‬ﻛﻢ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‬
‫>"‪<TABLE BORDER="5‬‬
‫>‪<TR‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬
‫>‪<TR‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD> </TR><TR‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR></TABLE‬‬
‫ﻟﻘﺪ ﺑﻘﻲ ﻣﻜﺎﻥ ﺍﳋﻼﻳﺎ ﺍﶈﺬﻭﻓﺔ ﳏﺠﻮﺯﺍﹰ ﻛﻤﺎ ﻟﻮ ﺃ‪‬ﺎ ﱂ ﲢﺬﻑ‪ .‬ﺃﻣﺎ ﺍﳋﻼﻳﺎ ﺍﻟﺒﺎﻗﻴﺔ ﻓﻈﻠﺖ ﳏﺘﻔﻈﺔ ﺑﻨﻔﺲ‬
‫ﺧﺼﺎﺋﺼﻬﺎ‪ ،‬ﺃﻱ ﺃﻧﻨﺎ ﱂ ﻧﺴﺘﻔﺪ ﻣﻦ ﻋﻤﻠﻴﺔ ﺍﳊﺬﻑ‪ .‬ﻭﺍﳊﻘﻴﻘﺔ ﺃﻥ ﺍﻟﻄﺮﻳﻘﺔ ﺍﳌﺜﻠﻰ ﻟﺬﻟﻚ ﻫﻲ ﺃﻥ ﺗﻘﻮﻡ ﺑﺪﻣﺞ‬
‫ﺍﳋﻼﻳﺎ ﻣﻌﺎﹰ ﻭﺫﻟﻚ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﳋﺼﺎﺋﺺ ‪.COLSPAN, ROWSPAN‬‬
‫ﻭﺍﻵﻥ ﻧﻌﻴﺪ ﻛﺘﺎﺑﺔ ﺷﻔﺮﺓ ﺍﳉﺪﻭﻝ ﺍﻟﺴﺎﺑﻖ ﻣﻊ ﺧﺎﺻﻴﱵ ﺍﻟﺪﻣﺞ‬

‫>"‪<TABLE BORDER="5‬‬
‫>‪<TR‬‬
‫>‪<TD COLSPAN="2"> Data </TD‬‬

‫‪37‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫>‪</TR‬‬
‫>‪<TR‬‬
‫>‪<TD> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR><TR‬‬
‫>‪<TD COLSPAN="2"> Data </TD‬‬
‫>‪</TR></TABLE‬‬
‫ﻻﺣﻆ ﺃﻥ ﺍﻟﻌﺪﺩ ‪ 2‬ﻫﻮ ﻋﺪﺩ ﺍﳋﻼﻳﺎ ﺍﻟﱵ ﻗﻤﻨﺎ ﺑﺪﳎﻬﺎ‪ .‬ﻭﻻﺣﻆ ﺃﻳﻀﺎﹰ ﺍﻧﲏ ﱂ ﺃﻗﻢ ﺑﺈﻋﺎﺩﺓ ﻭﺳﻮﻡ ﺍﳋﻼﻳﺎ ﺍﶈﺬﻭﻓﺔ‬
‫ﻷﻧﻨﺎ ﺃﺻﻼﹰ ﻻ ﳓﺘﺎﺝ ﳍﺎ ﺑﻌﺪ ﺃﻥ ﻗﻤﻨﺎ ﺑﺎﻟﺪﻣﺞ‪ .‬ﻭﻛﻘﺎﻋﺪﺓ ﺃﺳﺎﺳﻴﺔ‪ :‬ﻛﻞ ﺧﻠﻴﺔ ﻳﺘﻢ ﺩﳎﻬﺎ ﳚﺐ ﺑﺎﳌﻘﺎﺑﻞ ﺣﺬﻑ‬
‫ﻭﺳﻮﻡ ﺍﻟﺘﻌﺮﻳﻒ ﺍﳋﺎﺻﺔ ‪‬ﺎ‪ .‬ﻣﺎ ﻋﺪﺍ ﺗﻌﺮﻳﻒ ﺍﳋﻠﻴﺔ ﺍﻷﺳﺎﺳﻴﺔ ﺑﺎﻟﻄﺒﻊ‪.‬‬
‫ﻣﺜﺎﻝ ﺁﺧﺮ‪ :‬ﻟﻨﻘﻢ ﺑﺪﻣﺞ ﺍﳋﻼﻳﺎ ﺍﳌﻮﺟﻮﺩﺓ ﰲ ﺍﻟﻌﻤﻮﺩ ﺍﻷﻭﻝ‬
‫>"‪<TABLE BORDER="5‬‬
‫>‪<TR‬‬
‫>‪<TD ROWSPAN="3"> Data </TD‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬
‫>‪<TR‬‬
‫>‪<TD> Data </TD‬‬
‫>‪</TR‬‬
‫>‪<TR‬‬
‫>‪<TD> Data </TD></TR></TABLE‬‬

‫ﺍﻟﻮﺳﻮﻡ ﺍﻷﺧﲑﺓ ﺍﳌﺴﺘﺨﺪﻣﺔ ﰲ ﺍﳉﺪﺍﻭﻝ ﻫﻲ >‪ </CAPTION> ... <CAPTION‬ﻭﻫﻲ‬

‫ﲣﺘﺺ ﺑﺈﺿﺎﻓﺔ ﻋﻨﻮﺍﻥ ﺭﺋﻴﺴﻲ ﻟﻠﺠﺪﻭﻝ ﻛﻜﻞ‪ .‬ﻟﺬﻟﻚ ﻓﻬﻲ ﻋﻨﺪﻣﺎ ﺗﻜﺘﺐ ﻳﺘﻢ ﻭﺿﻌﻬﺎ ﻣﺒﺎﺷﺮﺓ ﺑﻌﺪ ﺍﻟﻮﺳﻢ‬
‫>‪ <TABLE‬ﻭﺑﺼﻮﺭﺓ ﻣﺴﺘﻘﻠﺔ ﻭﻟﻴﺲ ﺿﻤﻦ ﻭﺳﻮﻡ ﺍﻟﺼﻔﻮﻑ ﺃﻭ ﺍﳋﻼﻳﺎ‪.‬‬
‫ﻣﺜﻼﹰ‪:‬‬
‫>"‪<TABLE BORDER="5‬‬
‫>‪<CAPTION> Table Caption </CAPTION‬‬

‫‪38‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﶈﺎﺿﺮﺓ ﺍﻟﺘﺎﺳﻌﺔ‬
‫ﺍﻟﻘﻮﺍﺋﻢ ‪Lists‬‬
‫ﺍﻟﻘﻮﺍﺋﻢ ﻭﺃﻧﻮﺍﻋﻬﺎ‬
‫ﲢﺘﻮﻱ ﻟﻐﺔ ‪ HTML‬ﻋﻠﻰ ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﻟﻮﺳﻮﻡ ﺍﳋﺎﺻﺔ ﺑﺘﻨﻈﻴﻢ ﺍﻟﺒﻴﺎﻧﺎﺕ ﰲ ﻗﻮﺍﺋﻢ ﻭﺑﺎﺳﺘﺨﺪﺍﻡ ﻋﺪﺓ‬
‫ﺧﻴﺎﺭﺍﺕ‪ .‬ﻭﻫﻨﺎﻙ ﻧﻮﻋﲔ ﻣﻦ ﺍﻟﻘﻮﺍﺋﻢ ‪:‬‬
‫ﺍﻟﻘﻮﺍﺋﻢ ﺍﳌﺘﺴﻠﺴﻠﺔ)ﺍﳌﺮﺗﺒﺔ( ‪.Ordered Lists‬‬ ‫•‬
‫ﺍﻟﻘﻮﺍﺋﻢ ﻏﲑ ﺍﳌﺘﺴﻠﺴﻠﺔ)ﻏﲑ ﺍﳌﺮﺗﺒﺔ( ‪Unordered Lists‬‬ ‫•‬
‫ﻋﻨﺪ ﺍﻟﺘﻌﺎﻣﻞ ﻣﻊ ﺍﻟﻘﻮﺍﺋﻢ ﺑﻨﻮﻋﻴﻬﻤﺎ ﳓﺘﺎﺝ ﺇﱃ ﻭﺳﻮﻡ ﺧﺎﺻﺔ ﺑﺘﺤﺪﻳﺪ ﺑﺪﺍﻳﺔ‬
‫ﻭ‪‬ﺎﻳﺔ ﺍﻟﻘﺎﺋﻤﺔ ﻭﻭﺳﻮﻡ ﲢﺪﺩ ﻋﻨﺎﺻﺮ ﻫﺬﻩ ﺍﻟﻘﺎﺋﻤﺔ‪.‬‬
‫>‪<OL> ... </OL‬‬ ‫ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻘﻮﺍﺋﻢ ﺍﳌﺘﺴﻠﺴﻠﺔ )ﺍﳌﺮﺗﺒﺔ( ﻧﺴﺘﺨﺪﻡ ﺍﻟﻮﺳﻮﻡ‬
‫>‪<UL> ... </UL‬‬ ‫ﺃﻣﺎ ﺑﺎﻟﻨﺴﺒﺔ ﻟﻠﻘﻮﺍﺋﻢ ﻏﲑ ﺍﳌﺘﺴﻠﺴﻠﺔ )ﻏﲑ ﺍﳌﺮﺗﺒﺔ( ﻓﻨﺴﺘﺨﺪﻡ‬
‫ﻭﻟﺘﻌﻴﲔ ﻛﻞ ﻋﻨﺼﺮ ﻣﻦ ﻋﻨﺎﺻﺮ ﺍﻟﻘﺎﺋﻤﺔ ﻧﺴﺘﺨﺪﻡ ﺍﻟﻮﺳﻢ >‪ <LI‬ﻭﻫﻮ ﻭﺳﻢ ﻣﻔﺮﺩ ﻳﻜﺘﺐ ﰲ‬
‫ﺑﺪﺍﻳﺔ ﺍﻟﺴﻄﺮ ﺍﳋﺎﺹ ﺑﻜﻞ ﻋﻨﺼﺮ ﰲ ﺍﻟﻘﺎﺋﻤﺔ ‪.List Item‬‬
‫ﻣﺜﺎﻝ ﻋﻠﻲ ﺍﻟﻘﻮﺍﺋﻢ ﺍﳌﺘﺴﻠﺴﻠﺔ‬
‫>‪<OL‬‬
‫ﺍﻟﺮﻳﺎﺽ>‪<LI‬‬
‫ﺍﻟﺪﻣﺎﻡ>‪<LI‬‬
‫ﻣﻜﺔ>‪<LI‬‬
‫ﺟﺪﺓ>‪<LI‬‬
‫>‪</OL‬‬
‫ﻣﺜﺎﻝ ﻋﻠﻲ ﺍﻟﻘﻮﺍﺋﻢ ﻏﲑ ﺍﳌﺘﺴﻠﺴﻠﺔ )ﻏﲑ ﺍﳌﺮﺗﺒﺔ(‬
‫>‪<UL‬‬
‫ﺟﺎﻣﻌﺔ ﺍﳌﻠﻚ ﺳﻌﻮﺩ >‪<LI‬‬
‫ﺟﺎﻣﻌﺔ ﺍﳌﻠﻚ ﺧﺎﻟﺪ >‪<LI‬‬
‫ﺟﺎﻣﻌﺔ ﺍﳌﻠﻚ ﻋﺒﺪ ﺍﻟﻌﺰﻳﺰ >‪<LI‬‬
‫ﺟﺎﻣﻌﺔ ﺍﳌﻠﻚ ﻓﻬﺪ>‪<LI‬‬
‫>‪</UL‬‬

‫‪39‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻭﺍﳋﺎﺻﻴﺔ ﺍﻟﻮﺣﻴﺪﺓ ﺍﻟﱵ ﺗﺴﺘﺨﺪﻡ ﻣﻊ ﻫﺬﻩ ﺍﻟﻮﺳﻮﻡ ﻫﻲ ‪ TYPE‬ﻭﻭﻇﻴﻔﺘﻬﺎ ﲢﺪﻳﺪ ﺷﻜﻞ ﺍﻟﺮﻣﺰ ﺍﻟﻈﺎﻫﺮ‬
‫ﻣﻊ ﻋﻨﺎﺻﺮ ﺍﻟﻘﺎﺋﻤﺔ‪ ،‬ﻭﻋﺎﺩﺓ ﺗﺴﺘﺨﺪﻡ ﻣﻊ ﻭﺳﻮﻡ ﺑﺪﺍﻳﺔ ﺍﻟﻘﻮﺍﺋﻢ >‪ <UL‬ﺃﻭ >‪ <OL‬ﻭﺑﺬﻟﻚ ﳓﺪﺩ ﺭﻣﺰﺍﹰ‬
‫ﻭﺍﺣﺪﺍﹰ ﻟﻜﻞ ﺍﻟﻘﺎﺋﻤﺔ‪ .‬ﻭﻟﻜﻦ ﻧﺴﺘﻄﻴﻊ ﺍﺳﺘﺨﺪﺍﻣﻬﺎ ﺃﻳﻀﺎﹰ ﻣﻊ ﻭﺳﻢ ﺍﻟﻌﻨﺎﺻﺮ >‪ <LI‬ﻹﻋﻄﺎﺀ ﲢﻜﻢ ﺃﻛﱪ ﰲ‬
‫ﻣﻈﻬﺮ ﺍﻟﻘﺎﺋﻤﺔ ﻣﻦ ﺧﻼﻝ ﲢﺪﻳﺪ ﺭﻣﺰ ﳐﺘﻠﻒ ﻟﻜﻞ ﻋﻨﺼﺮ‪.‬‬
‫ﻓﻌﻨﺪ ﻭﺿﻌﻬﺎ ﺿﻤﻦ ﺗﻌﺮﻳﻒ ﺍﻟﻘﻮﺍﺋﻢ ﺍﳌﺘﺴﻠﺴﻠﺔ ﺗﺄﺧﺬ ﺍﻟﻘﻴﻢ‪:‬‬
‫‪ i ,I ,a ,A‬ﺍﻟﱵ ﺗﻐﲑ ﺭﻣﻮﺯ ﺍﻟﺘﺮﻗﻴﻢ ﻣﻦ ﺍﻷﺭﻗﺎﻡ ﺍﻟﻌﺎﺩﻳﺔ ﺍﻻﻓﺘﺮﺍﺿﻴﺔ )ﻭﺍﻟﱵ ﺭﻣﺰﻫﺎ ‪ (1‬ﺇﱃ ﺗﺮﻗﻴﻢ ﺑﺎﺳﺘﺨﺪﺍﻡ‬
‫ﺍﻷﺣﺮﻑ ﺍﻟﻼﺗﻴﻨﻴﺔ ﺍﻟﻜﺒﲑﺓ ﺃﻭ ﺍﻟﺼﻐﲑﺓ‪ ،‬ﺃﻭ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻷﺭﻗﺎﻡ ﺍﻟﺮﻭﻣﺎﻧﻴﺔ ﻛﻤﺎ ﺗﺮﻯ ﰲ ﺍﳉﺪﻭﻝ ﺍﻟﺘﺎﱄ‪:‬‬

‫‪<UL‬‬ ‫‪<UL‬‬ ‫‪<OL‬‬ ‫‪<OL‬‬ ‫‪<OL‬‬ ‫‪<OL‬‬

‫"=‪TYPE="squ TYPE="cir TYPE=" TYPE=" TYPE=" TYPE‬‬
‫>"‪are‬‬ ‫>"‪cle‬‬ ‫>"‪i‬‬ ‫>"‪I‬‬ ‫>"‪a‬‬ ‫>"‪A‬‬
‫‪ ‬ﺗﻜﻮﻥ‬ ‫‪ o‬ﺗﻜﻮﻥ‬ ‫‪.i‬‬ ‫‪.I‬‬ ‫‪.a‬‬ ‫‪.A‬‬
‫‪ ‬ﻋﻠﻲ‬ ‫‪ o‬ﻋﻠﻲ‬ ‫‪.ii‬‬ ‫‪.II‬‬ ‫‪.b‬‬ ‫‪.B‬‬
‫‪.iii‬‬ ‫‪.III‬‬ ‫‪.c‬‬ ‫‪.C‬‬
‫‪ ‬ﺷﻜﻞ‬ ‫‪ o‬ﺷﻜﻞ‬ ‫‪.iv‬‬ ‫‪.IV‬‬ ‫‪.d‬‬ ‫‪.D‬‬
‫‪ ‬ﻣﺮﺑﻊ‬ ‫‪ o‬ﺩﺍﺋﺮﺓ‬ ‫‪.v‬‬ ‫‪.V‬‬ ‫‪.e‬‬ ‫‪.E‬‬
‫ﺗﻐﻴﲑ ﻧﻘﻄﺔ ﺍﻟﺒﺪﺍﻳﺔ ﻟﻠﻘﻮﺍﺋﻢ ﺍﳌﺮﺗﺒﺔ‬
‫ﺇﺫﺍ ﺃﺭﺩﺕ ﺃﻥ ﺗﺒﺪﺃ ﺍﻟﺘﺮﻗﻴﻢ ﺑﺮﻗﻢ ﻏﲑ ﺍﻟﻮﺍﺣﺪ ﻛﻞ ﻣﺎ ﻋﻠﻴﻚ ﻫﻮ ﺃﻥ ﺗﻀﻊ ﺍﳋﺎﺻﻴﺔ‬
‫‪ Start‬ﻛﻤﺎ ﺑﺎﻟﺼﻴﻐﺔ ﺍﻟﺘﺎﻟﻴﻪ ﻭﲢﺪﺩ ﺭﻗﻢ ﺍﻟﺒﺪﺍﻳﺔ ﺍﻟﺬﻱ ﺗﺮﻳﺪﻩ‬
‫>"‪<OL START="5‬‬
‫ﻫﻨﺎﻙ ﻭﺳﻮﻣﺎﹰ ﺃﺧﺮﻯ ﺗﺴﺘﺨﺪﻡ ﻹﻧﺸﺎﺀ ﺍﻟﻘﻮﺍﺋﻢ ﻏﲑ ﺍﳌﺘﺴﻠﺴﻠﺔ‪ ،‬ﻭﺑﻨﻔﺲ ﺍﻟﻄﺮﻳﻘﺔ‬
‫ﺍﳌﺴﺘﺨﺪﻣﺔ ﻣﻊ >‪ <UL>...</UL‬ﻭﻫﻲ ‪-:‬‬
‫>‪<DIR> ... </DIR‬‬
‫>‪<MENU> ... </MENU‬‬
‫ﻗﻮﺍﺋﻢ ﺍﻟﺘﻌﺮﻳﻒ ‪Definition Lists‬‬

‫ﻫﻨﺎﻙ ﻧﻮﻉ ﺧﺎﺹ ﻣﻦ ﺍﻟﻘﻮﺍﺋﻢ ﻳﺪﻋﻰ ﻗﻮﺍﺋﻢ ﺍﻟﺸﺮﺡ ﺃﻭ ﺍﻟﺘﻌﺮﻳﻔﺎﺕ ﻭﻛﻤﺎ ﻳﺪﻝ ﺍﻹﺳﻢ ﺗﺴﺘﺨﺪﻡ ﻋﻨﺪﻣﺎ ﻧﺮﻳﺪ‬
‫ﺇﺩﺭﺍﺝ ﻗﺎﺋﻤﺔ ﻣﻦ ﺍﳌﺼﻄﻠﺤﺎﺕ ﻳﺘﺒﻊ ﻛﻞ ﻭﺍﺣﺪ ﻣﻨﻬﺎ ﺷﺮﺡ ﺃﻭ ﺗﻌﻠﻴﻖ‪ .‬ﻭﻹﻧﺸﺎﺀ ﻫﺬﻩ ﺍﻟﻘﻮﺍﺋﻢ ﳓﺘﺎﺝ ﺇﱃ ﺛﻼﺛﺔ‬
‫ﻭﺳﻮﻡ ﻫﻲ ‪:‬‬

‫‪40‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 HTML ‫ ﻟﻐﺔ‬-‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‬

‫ﺎﻳﺔ ﺍﻟﻘﺎﺋﻤﺔ‬‫< ﻟﺘﻌﺮﻳﻒ ﺑﺪﺍﻳﺔ ﻭ‬DL> ... </DL> -1

.‫ ﻭﻫﻮ ﻭﺳﻢ ﻣﻔﺮﺩ‬،‫< ﻭﻳﻮﺿﻊ ﻗﺒﻞ ﻛﻞ ﻣﺼﻄﻠﺢ ﻟﺘﺤﺪﻳﺪﻩ‬DT> -2
.‫< ﻭﻫﻮ ﻭﺳﻢ ﺍﻟﺸﺮﺡ ﺃﻭ ﺍﻟﺘﻌﻠﻴﻖ ﻭﻫﻮ ﺃﻳﻀﺎ ﻣﻔﺮﺩ‬DD> -3
-: ‫ﻣﺜﺎﻝ‬
<DL>
<DT>HTML <DD>Hyper Text Markup Language
<DT>WWW <DD>World Wide Web
<DT>FTP <DD>File Transport Protocol
</DL>
-: ‫ﻭﺍﻟﻨﺘﻴﺠﺔ ﻫﻲ‬
HTML
Hyper Text Markup Language
WWW
World Wide Web
FTP
File Transport Protocol
( Headings) ‫ﺍﻟﻌﻨﺎﻭﻳﻦ‬
‫ﻣﺴﺘﻮﻳﺎﺕ ﳐﺘﻠﻔﺔ ﻣﻦ ﺍﻟﻌﻨﺎﻭﻳﻦ ﻣﻦ ﺃﻛﱪ‬6 ‫ﻭﺳﻢ ﺍﻟﻌﻨﻮﺍﻥ ﺑﻘﺴﻢ ﺑﻄﺮﻳﻘﺔ ﻣﺘﺘﺎﻟﻴﺔ ﲝﻴﺚ ﻳﻮﺟﺪ‬
<H6> ‫< ﺇﱄ ﺃﺻﻐﺮ ﻣﺴﺘﻮﻱ ﻭﻳﺄﺧﺬ ﺍﻟﻮﺳﻢ‬H1> ‫ﻣﺴﺘﻮﻱ ﻭﻳﺄﺧﺬ ﺍﻟﻮﺳﻢ‬
‫ﻣﺜﺎﻝ‬
‫ﺍﻟـﺘـﺄﺛـﻴـﺮ‬ ‫ﺍﻟـﻮﺳـﻢ‬
Heading 1 <H1>Heading 1</H1>
Heading 2 <H2>Heading 2</H2>
Heading 3 <H3>Heading 3</H3>
Heading 4 <H4>Heading 4</H4>
Heading 5 <H5>Heading 5</H5>
Heading 6 <H6>Heading 6</H6>

41 ‫ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬.‫ﺇﻋﺪﺍﺩ ﺃ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﶈﺎﺿﺮﺓ ﺍﳊﺎﺩﻳﺔ ﻋﺸﺮﺓ‬

‫ﺍﻹﻃﺎﺭﺍﺕ ‪Frames‬‬
‫‪ o‬ﺗﻌﺘﱪ ﺍﻹﻃﺎﺭﺍﺕ ‪ frames‬ﻣﻦ ﺍﻷﺳﺎﻟﻴﺐ ﺍﻟﻘﻮﻳﺔ ﻟﺘﺨﻄﻴﻂ ﺻﻔﺤﺎﺕ ﺍﻟﻮﻳﺐ‪ ،‬ﺣﻴﺚ ﺗﺴﻤﺢ ﺍﻹﻃﺎﺭﺍﺕ‬
‫ﺑﻌﺮﺽ ﺃﻛﺜﺮ ﻣﻦ ﻣﺴﺘﻨﺪ ﰲ ﻧﺎﻓﺬﺓ ﻣﺘﺼﻔﺢ ﻭﺍﺣﺪﺓ ‪.‬‬
‫‪ o‬ﻗﺒﻞ ﺃﻥ ﻧﺒﺪﺃ… ﺳﻨﻘﻮﻡ ﺑﺈﻧﺸﺎﺀ ﺍﺭﺑﻌﺔ ﻣﻠﻔﺎﺕ ﺑﺴﻴﻄﺔ ﻟﻜﻲ ﻧﺴﺘﺨﺪﻣﻬﺎ ﰲ ﺗﻄﺒﻴﻖ ﺍﻷﻣﺜﻠﺔ ﻭﻫﻲ ﻛﻤﺎ ﻳﻠﻲ‬
‫‪frame1.html, frame2.html, frame3.html , frame4.html‬‬
‫‪ o‬ﻭﻧﺒﺪﺃ ﺍﻵﻥ ﺑﺘﻌﺮﻳﻒ ﺍﳌﻠﻒ ﺍﻟﺮﺋﻴﺴﻲ ﺍﻟﺬﻱ ﺳﻴﻀﻢ ﻛﺎﻓﺔ ﺍﻹﻃﺎﺭﺍﺕ ﻭﺍﳌﻠﻔﺎﺕ‪ .‬ﻭﻫﻮ ﻣﻠﻒ ﺫﻭ ﺣﺎﻟﺔ ﺧﺎﺻﺔ‬
‫ﺣﻴﺚ ﻧﻘﻮﻡ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻮﻡ‬
‫>‪<FRAMESET> ... </FRAMESET‬‬
‫>‪<BODY> ... </BODY‬‬ ‫ﺑﺪﻻﹰ ﻣﻦ ﺍﻟﻮﺳﻮﻡ‬

‫))ﺇﺫﻥ ﺍﳌﻠﻒ ﺍﻟﺮﺋﻴﺴﻲ ﻟﻺﻃﺎﺭﺍﺕ ﻻ ﻳﺘﻀﻤﻦ ﺗﻌﺮﻳﻔﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ‪(( BODY‬‬

‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE>Master File</TITLE‬‬
‫>‪</HEAD‬‬

‫>‪<FRAMESET‬‬
‫>‪</FRAMESET‬‬

‫>‪</HTML‬‬

‫ﺧﺼﺎﺋﺺ ﺍﻟﻮﺳﻢ ‪FRAMESET‬‬

‫•ﺍﳋﺎﺻﻴﺔ ‪COLS‬‬
‫ﻭﻫﻲ ﺗﻌﺮ‪‬ﻑ ﻋﺪﺩ ﻭﺃﺣﺠﺎﻡ ﺍﻹﻃﺎﺭﺍﺕ ﺍﻟﻌﻤﻮﺩﻳﺔ ﻟﻠﺼﻔﺤﺔ‪ .‬ﻭﺗ‪‬ﺤﺪﺩ ﺍﻷﺣﺠﺎﻡ ﺑﻄﺮﻳﻘﺘﲔ … ﺍﻟﻄﺮﻳﻘﺔ‬
‫ﺍﳌﺒﺎﺷﺮﺓ ﻭﺍﻟﻄﺮﻳﻘﺔ ﺍﻟﻨﺴﺒﻴﺔ‪...‬ﺃﻭ ﻛﻼﳘﺎ ﻣﻌﺎ‪.‬‬

‫‪42‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺃﻣﺜﻠﺔ ﺗﻮﺿﺢ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ‪:‬‬

‫‪ <FRAMESET‬ﳛﺪﺩ ﺇﻃﺎﺭﻳﻦ ﻋﻤﻮﺩﻳﲔ ﺣﺠﻢ ﻛﻞ ﻣﻨﻬﻤﺎ ‪ %50‬ﻣﻦ‬
‫>"‪ COLS="50%,50%‬ﺣﺠﻢ ﺍﻟﺸﺎﺷﺔ‬
‫>‪</FRAMESET‬‬
‫‪ <FRAMESET‬ﳛﺪﺩ ﺛﻼﺛﺔ ﺇﻃﺎﺭﺍﺕ ﺃﺣﺠﺎﻣﻬﺎ ‪ %20‬ﻭ ‪ %50‬ﻭ‬
‫>"‪ %30 COLS="20%,50%,30%‬ﻋﻠﻰ ﺍﻟﺘﻮﺍﱄ ﻣﻦ ﺣﺠﻢ ﺍﻟﺸﺎﺷﺔ‬
‫>‪</FRAMESET‬‬

‫‪ <FRAMESET‬ﳛﺪﺩ ﺛﻼﺛﺔ ﺇﻃﺎﺭﺍﺕ ﻋﻤﻮﺩﻳﺔ ﺍﻷﻭﻝ ﺣﺠﻤـﻪ ‪200‬‬

‫>"*‪ COLS="200,300,‬ﺑﻴﻜـــﺴﻞ‪ ،‬ﻭﺍﻟﺜـــﺎﱐ ‪ 300‬ﺑﻴﻜـــﺴﻞ‪،‬‬
‫>‪</FRAMESET‬‬
‫ﺃﻣﺎ ﺍﻟﺜﺎﻟﺚ * ﺃﻱ ﺍﻧﻪ ﻏﲑ ﳏﺪﺩ ﲝﺠﻢ ﻣﻌﲔ ﻭﻟﻜﻨـﻪ‬
‫ﺳﻴﻜﻮﻥ ﺑﺎﳊﺠﻢ ﺍﳌﺘﺒﻘﻲ ﻣﻦ ﺍﻟﺸﺎﺷﺔ )ﻃﺎﳌﺎ ﺃﻧﻨـﺎ ﻻ‬
‫ﻧﻌﺮﻑ ﺍﺳﺘﺒﺎﻧﺔ ﺍﻟﺸﺎﺷﺔ ﺍﻟﱵ ﻳﺴﺘﺨﺪﻣﻬﺎ ﺯﺍﺋﺮ ﺍﳌﻮﻗﻊ(‬
‫‪ <FRAMESET‬ﳛﺪﺩ ﺃﺭﺑﻌﺔ ﺇﻃـﺎﺭﺍﺕ ﺣﺠـﻢ ﺍﻷﻭﻝ ﻫـﻮ ‪200‬‬
‫>"‪ COLS="200,*,15%,20%‬ﺑﻴﻜﺴﻞ‪ ،‬ﻭﺍﻟﺜﺎﻟﺚ ‪ %15‬ﻣﻦ ﺣﺠـﻢ ﺍﻟـﺸﺎﺷﺔ‪،‬‬
‫>‪</FRAMESET‬‬
‫ﻭﺍﻟﺮﺍﺑﻊ ‪ %20‬ﻣﻦ ﺣﺠﻢ ﺍﻟـﺸﺎﺷﺔ ﺃﻣـﺎ ﺍﻟﺜـﺎﱐ‬
‫ﻓﺴﻴﻜﻮﻥ ﺣﺠﻤﻪ ﲟﺎ ﺗﺒﻘﻰ ﻣﻦ ﺍﻟﺸﺎﺷﺔ‪.‬‬
‫>"*‪ <FRAMESET COLS="150,*,2‬ﳛﺪﺩ ﺛﻼﺛﺔ ﺇﻃﺎﺭﺍﺕ ﺍﻷﻭﻝ ﺣﺠﻤﻪ ‪150‬‬
‫>‪ </FRAMESET‬ﺑﻴﻜﺴﻞ‪ ....‬ﺃﻣﺎ ﺍﳌﺴﺎﺣﺔ ﺍﳌﺘﺒﻘﻴﺔ ﻓﺘﻘﺴﻢ ﻋﻠﻰ ﺃﺳﺎﺱ‬
‫ﺃﻥ ﺍﻹﻃﺎﺭ ﺍﻟﺜﺎﻟﺚ ﺣﺠﻤﻪ ﻫﻮ ﺿﻌﻔﻲ )*‪ (2‬ﺣﺠﻢ‬
‫ﺍﻹﻃﺎﺭ ﺍﻟﺜﺎﱐ )*(‬

‫•ﺍﳋﺎﺻﻴﺔ ‪ROWS‬‬
‫ﻭﻫﻲ ﲢﺪﺩ ﻋﺪﺩ ﻭﺣﺠﻢ ﺍﻹﻃﺎﺭﺍﺕ ﺍﻷﻓﻘﻴﺔ )ﺍﻟﺼﻔﻮﻑ( ﺩﺍﺧﻞ ﺍﻟﺼﻔﺤﺔ‪ .‬ﻭﺫﻟﻚ ﺑﻨﻔﺲ ﺍﻷﺳﻠﻮﺏ ﺍﳌﺘﺒﻊ‬
‫ﻣﻊ ﺍﻷﻋﻤﺪﺓ‪ ،‬ﺃﻱ ﺇﻣﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻄﺮﻳﻘﺔ ﺍﻟﻨﺴﺒﻴﺔ ﺃﻭ ﺍﳌﻄﻠﻘﺔ‪.‬‬

‫‪43‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺃﻣﺜﻠﺔ ﺗﻮﺿﺢ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ‪:‬‬

‫‪ <FRAMESET‬ﳛﺪﺩ ﺇﻃﺎﺭﻳﻦ ﺃﻓﻘﻴﲔ ﺍﺭﺗﻔﺎﻉ ﻛﻞ ﻣﻨﻬﻤﺎ ‪ %50‬ﻣﻦ‬
‫>"‪ ROWS="50%,50%‬ﺍﺭﺗﻔﺎﻉ ﺍﻟﺸﺎﺷﺔ‬
‫>‪</FRAMESET‬‬
‫‪ <FRAMESET‬ﳛﺪﺩ ﺛﻼﺛﺔ ﺇﻃﺎﺭﺍﺕ ﺃﻓﻘﻴـﺔ ﺍﺭﺗﻔﺎﻋﺎ‪‬ـﺎ ‪ %20‬ﻭ‬
‫>"‪ %50 ROWS="20%,50%,30%‬ﻭ ‪ %30‬ﻋﻠﻰ ﺍﻟﺘﻮﺍﱄ ﻣﻦ ﺍﺭﺗﻔﺎﻉ ﺍﻟﺸﺎﺷﺔ‬
‫>‪</FRAMESET‬‬
‫‪ <FRAMESET‬ﳛﺪﺩ ﺛﻼﺛﺔ ﺇﻃـﺎﺭﺍﺕ ﺃﻓﻘﻴـﺔ ﺍﻷﻭﻝ ﺍﺭﺗﻔﺎﻋـﻪ ‪50‬‬
‫>"*‪ ROWS="50,120,‬ﺑﻴﻜﺴﻞ‪ ،‬ﻭﺍﻟﺜﺎﱐ ‪ 120‬ﺑﻴﻜﺴﻞ‪ ،‬ﻭﺍﻟﺜﺎﻟﺚ ﺳـﻴﻜﻮﻥ‬
‫>‪</FRAMESET‬‬
‫ﺑﺎﻹﺭﺗﻔﺎﻉ ﺍﳌﺘﺒﻘﻲ ﻣﻦ ﺍﻟﺸﺎﺷﺔ‬
‫‪ <FRAMESET‬ﳛﺪﺩ ﺃﺭﺑﻌﺔ ﺇﻃﺎﺭﺍﺕ ﺃﻓﻘﻴﺔ ﺍﺭﺗﻔﺎﻉ ﺍﻷﻭﻝ ﻫـﻮ ‪50‬‬
‫>"‪ ROWS="50,*,15%,20%‬ﺑﻴﻜﺴﻞ‪ ،‬ﻭﺍﻟﺜﺎﻟﺚ ‪ %15‬ﻣﻦ ﺍﺭﺗﻔـﺎﻉ ﺍﻟـﺸﺎﺷﺔ‪،‬‬
‫>‪</FRAMESET‬‬
‫ﻭﺍﻟﺮﺍﺑﻊ ‪ %20‬ﻣﻦ ﺍﺭﺗﻔﺎﻉ ﺍﻟﺸﺎﺷﺔ ﺃﻣـﺎ ﺍﻟﺜـﺎﱐ‬
‫ﻓﺴﻴﻜﻮﻥ ﺍﺭﺗﻔﺎﻋﻪ ﲟﺎ ﺗﺒﻘﻰ ﻣﻦ ﺍﺭﺗﻔﺎﻉ ﺍﻟﺸﺎﺷﺔ‪.‬‬
‫>"*‪ <FRAMESET COLS="*,2‬ﳛﺪﺩ ﺇﻃﺎﺭﻳﻦ ﺍﻟﺜﺎﱐ ﺍﺭﺗﻔﺎﻋﻪ ﺿﻌﻔﻲ ﺍﺭﺗﻔﺎﻉ ﺍﻷﻭﻝ‬
‫>‪</FRAMESET‬‬

‫ﺍﻟﻮﺳﻢ >‪<FRAME‬‬
‫ﻭﻫﻮ ﻭﺳﻢ ﻣﻔﺮﺩ ﺃﻱ ﻟﻴﺲ ﻟﻪ ﻭﺳﻢ ‪‬ﺎﻳﺔ ﲤﺎﻣﺎﹰ ﻣﺜﻞ >‪ .<IMG‬ﻭﻓﻴﻪ ﻧﻘﻮﻡ ﺑﺘﺤﺪﻳﺪ ﻣﺼﺪﺭ ﻭﺧﺼﺎﺋﺺ ﻛﻞ‬
‫ﻣﻠﻒ ﻧﺮﻳﺪ ﺇﻇﻬﺎﺭﻩ ﺩﺍﺧﻞ ﺃﺣﺪ ﺍﻹﻃﺎﺭﺍﺕ‪ .‬ﻭﻳﺘﻢ ﺍﺳﺘﺨﺪﺍﻡ ﻫﺬﺍ ﺍﻟﻮﺳﻢ ﻋﺪﺓ ﻣﺮﺍﺕ ﺑﻨﻔﺲ ﻋﺪﺩ ﺍﻹﻃﺎﺭﺍﺕ‬
‫ﺍﳌﺬﻛﻮﺭﺓ ﺩﺍﺧﻞ >‪ .<FRAMESET‬ﻭﺳﻨﺴﺘﺨﺪﻡ ﺍﳋﺎﺻﻴﺔ ‪ SRC‬ﻟﺘﺤﺪﻳﺪ ﻣﺼﺪﺭ ﺍﳌﻠﻒ‪.‬‬
‫ﺍﻵﻥ ﺳﻨﻘﻮﻡ ﺑﺈﲤﺎﻡ ﺍﻟﺸﻔﺮﺓ ﻟﺒﻌﺾ ﺍﻷﻣﺜﻠﺔ ﺍﳌﺬﻛﻮﺭﺓ ﺃﻋﻼﻩ‪.‬‬
‫ﺍﳌﺜﺎﻝ ﺍﻷﻭﻝ‪:‬‬

‫>"‪<FRAMESET COLS="50%,50%‬‬
‫>"‪<FRAME SRC="frame1.html‬‬
‫>"‪<FRAME SRC="frame2.html‬‬
‫>‪</FRAMESET‬‬

‫‪44‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 HTML ‫ ﻟﻐﺔ‬-‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‬

:‫ﺍﳌﺜﺎﻝ ﺍﻟﺜﺎﱐ‬

<FRAMESET COLS="200,400,*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
</FRAMESET>
:‫ﺍﳌﺜﺎﻝ ﺍﻟﺜﺎﻟﺚ‬
<FRAMESET ROWS="50,*,15%,20%">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
</FRAMESET>

:‫ﺍﳌﺜﺎﻝ ﺍﻟﺮﺍﺑﻊ‬
<FRAMESET COLS="*,2*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
</FRAMESET>

‫ ﻧﺴﺘﻄﻴﻊ ﺇﺩﺭﺍﺝ ﺻﻮﺭﺓ ﻣﺒﺎﺷﺮﺓﹰ ﺩﺍﺧﻞ ﺍﻹﻃﺎﺭ ﻭﺑﺎﺳﺘﺨﺪﺍﻡ‬،‫ﻭﺑﺎﻹﺿﺎﻓﺔ ﺇﱃ ﻣﺎ ﺫﻛﺮ‬

:‫< ﻛﻤﺎ ﺑﺎﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‬IMG SRC> ‫< ﲤﺎﻣﺎﹰ ﻛﻤﺎ ﻧﺪﺭﺟﻬﺎ ﺑﺎﺳﺘﺨﺪﺍﻡ‬FRAME SRC>
<FRAMESET COLS="50%,50%">
<FRAME SRC="frame1.html">
<FRAME SRC=“pc.jpg">
</FRAMESET>

45 ‫ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬.‫ﺇﻋﺪﺍﺩ ﺃ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻛﻴﻔﻴﺔ ﺗﻘﺴﻴﻢ ﺍﻟﺼﻔﺤﺔ ﺇﱃ ﺇﻃﺎﺭﺍﺕ ﺃﻓﻘﻴﺔ ﻭﻋﻤﻮﺩﻳﺔ ﻣﻌﺎﹰ‬

‫ﻧﻮﺿﺢ ﺫﻟﻚ ﻣﻦ ﺧﻼﻝ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‬
‫ﺻﻔﺤﺔ ﻣﻜﻮﻧﺔ ﻣﻦ ﺻﻔﲔ‪ ،‬ﺍﻟﺜﺎﱐ ﻣﻨﻬﻤﺎ ﻣﻘﺴﻢ ﺑﺪﻭﺭﻩ ﺇﱃ ﻋﻤﻮﺩﻳﻦ‬
‫ﲟﺎ ﺃﻥ ﺍﻟﺼﻔﺤﺔ ﲢﺘﻮﻱ ﻋﻠﻰ ﺻﻔﲔ ﻧﻘﻮﻡ ﺑﺘﻌﺮﻳﻔﻬﻤﺎ ﺃﻭﻻﹰ ﺣﺴﺐ ﺍﻹﺭﺗﻔﺎﻋﺎﺕ ﺍﳌﺮﻏﻮﺏ ‪‬ﺎ‪:‬‬
‫>"*‪<FRAMESET ROWS="100,‬‬
‫>"‪<FRAME SRC="frame1.html‬‬
‫>"‪<FRAME SRC="frame2.html‬‬
‫>‪</FRAMESET‬‬

‫ﻟﻜﻦ ﺍﻟﺼﻒ ﺍﻟﺜﺎﱐ ﻣﻘﺴﻢ ﺇﱃ ﻋﻤﻮﺩﻳﻦ ﻭﻫﻨﺎ ﻳﻌﺘﱪ ﲟﻔﻬﻮﻡ ﻟﻐﺔ ‪ HTML‬ﻭﻛﺄﻧﻪ ﺻﻔﺤﺔ ﺇﻃﺎﺭﺍﺕ ﺟﺪﻳﺪﺓ‬
‫ﻟﺬﻟﻚ ﻻ ﳓﺘﺎﺝ ﻟﺘﻌﺮﻳﻔﻪ ﻛﺼﻒ ﻭﺑﺪﻻﹰ ﻣﻦ ﺫﻟﻚ ﻧﻌﺎﻭﺩ ﺍﺳﺘﺨﺪﺍﻡ ﺗﻌﺮﻳﻒ ﺍﻟﺼﻔﺤﺎﺕ! ﺃﻱ‬
‫>‪ <FRAMESET‬ﻣﺮﺓ ﺃﺧﺮﻯ‪.‬‬
‫>"*‪<FRAMESET ROWS="100,‬‬
‫>"‪<FRAME SRC="frame1.html‬‬
‫>‪<FRAMESET‬‬
‫>‪</FRAMESET‬‬
‫>‪</FRAMESET‬‬

‫ﻭﲟﺎ ﺃﻥ ﺍﻟﺼﻒ ﺍﻟﺜﺎﱐ )ﺃﻭ ﻟﻨﻘﻞ ﺍﻹﻃﺎﺭ ﺍﻟﺜﺎﱐ( ﻣﻘﺴﻢ ﺇﱃ ﻋﻤﻮﺩﻳﻦ‪ ،‬ﺇﺫﻥ ﺑﻘﻲ ﻋﻠﻴﻨﺎ ﺇﺿﺎﻓﺔ ﺗﻌﺮﻳﻒ ﳍﺬﻩ‬
‫ﺍﻷﻋﻤﺪﺓ‪ .‬ﻭﺑﺬﻟﻚ ﺗﻜﻮﻥ ﺍﻟﺸﻔﺮﺓ ﺍﻟﻨﻬﺎﺋﻴﺔ ﻛﺎﻟﺘﺎﱄ‪:‬‬
‫>"*‪<FRAMESET ROWS="100,‬‬
‫>"‪<FRAME SRC="frame1.html‬‬
‫>"*‪<FRAMESET COLS="200,‬‬
‫>"‪<FRAME SRC="frame2.html‬‬
‫>"‪<FRAME SRC="frame3.html‬‬
‫>‪</FRAMESET‬‬
‫>‪</FRAMESET‬‬

‫‪46‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺧﺼﺎﺋﺺ ﺇﺿﺎﻓﻴﺔ ﻟﻠﻮﺳﻢ >‪<FRAMESET‬‬

‫•ﺍﳋﺎﺻﻴﺔ ‪FRAMEBORDER‬‬
‫ﻭﻫﻲ ﺗﻘﻮﻡ ﺑﺘﺤﺪﻳﺪ ﻇﻬﻮﺭ ﺃﻭ ﻋﺪﻡ ﻇﻬﻮﺭ ﺍﳊﺪﻭﺩ ﺣﻮﻝ ﺍﻹﻃﺎﺭﺍﺕ ﻭﺗﺄﺧﺬ ﺍﻟﻘﻴﻢ ‪ 1‬ﻟﻠﻈﻬﻮﺭ‪ ،‬ﻭ‪ 0‬ﻟﻌﺪﻡ‬
‫ﺍﻟﻈﻬﻮﺭ‪ .‬ﻭﻫﺬﺍ ﻣﺜﺎﻝ ﻋﻠﻴﻬﺎ‪:‬‬
‫>"‪<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0‬‬
‫>"‪<FRAME SRC="frame1.html‬‬
‫>"‪<FRAME SRC="frame2.html‬‬
‫>"‪<FRAME SRC="frame3.html‬‬
‫>"‪<FRAME SRC="frame4.html‬‬
‫>‪</FRAMESET‬‬

‫•ﺍﳋﺎﺻﻴﺔ ‪BORDER‬‬
‫ﲢﺪﺩ ﲰﻚ ﺍﳊﺪﻭﺩ ﺍﻟﻈﺎﻫﺮﺓ ﺣﻮﻝ ﺍﻹﻃﺎﺭﺍﺕ ﻭﻫﻲ ﺗﺄﺧﺬ ﻗﻴﻤﺎﹰ ﺑﺎﻟﺒﻜﺴﻞ‪.‬‬
‫)"‪(BORDER="n‬‬
‫•ﺍﳋﺎﺻﻴﺔ ‪BORDERCOLOR‬‬
‫)"‪.(BORDERCOLOR="rrggbb‬‬ ‫ﻹﺿﺎﻓﺔ ﻟﻮﻥ ﻟﻠﺤﺪﻭﺩ‬
‫•ﺍﳋﺎﺻﻴﺔ ‪FRAMESPACING‬‬
‫ﻟﺘﺤﺪﻳﺪ ﻣﺴﺎﻓﺎﺕ ﻓﺎﺭﻏﺔ ﺇﺿﺎﻓﻴﺔ ﺣﻮﻝ ﺍﻹﻃﺎﺭﺍﺕ ﻭﺗﺄﺧﺬ ﻗﻴﻤﺎﹰ ﺑﺎﻟﺒﻴﻜﺴﻞ‬
‫)"‪.(FRAMESPACING="n‬‬

‫ﺧﺼﺎﺋﺺ ﺍﻟﻮﺳﻢ >‪<FRAME‬‬

‫•ﺍﳋﺎﺻﻴﺔ ‪MARGINHEIGHT‬‬
‫ﲢﺪﺩ ﻣﻘﺪﺍﺭ ﺍﳌﺴﺎﻓﺔ ﺍﻟﻔﺎﺭﻏﺔ ﺍﳌﺘﺮﻭﻛﺔ ﻟﻠﻬﻮﺍﻣﺶ ﺍﻟﻌﻠﻮﻳﺔ ﻭﺍﻟﺴﻔﻠﻴﺔ ﻟﻺﻃﺎﺭ )ﺑﺎﻟﺒﻴﻜﺴﻞ(‪.‬‬
‫>"‪MARGINHEIGHT="n‬‬
‫•ﺍﳋﺎﺻﻴﺔ ‪MARGINWIDTH‬‬
‫ﲢﺪﺩ ﻣﻘﺪﺍﺭ ﺍﳌﺴﺎﻓﺔ ﺍﻟﻔﺎﺭﻏﺔ ﺍﳌﺘﺮﻭﻛﺔ ﻟﻠﻬﻮﺍﻣﺶ ﺍﻟﻴﻤﲎ ﻭﺍﻟﻴﺴﺮﻯ ﻟﻺﻃﺎﺭ )ﺑﺎﻟﺒﻴﻜﺴﻞ(‪.‬‬
‫“‪MARGINWIDTH="n‬‬

‫‪47‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫•ﺍﳋﺎﺻﻴﺔ ‪SCROLLING‬‬
‫ﲢﺪﺩ ﺇﻣﻜﺎﻧﻴﺔ ﻇﻬﻮﺭ ﺃﻭ ﻋﺪﻡ ﻇﻬﻮﺭ ﺃﺷﺮﻃﺔ ﺍﻟﺘﺼﻔﺢ ﺍﻷﻓﻘﻴﺔ ﻭﺍﻟﻌﻤﻮﺩﻳﺔ ﻋﻠﻰ ﺟﻮﺍﻧﺐ ﺃﻭ ﺃﺳﻔﻞ ﺍﻹﻃﺎﺭ‪.‬‬
‫ﻭﺗﺄﺧﺬ ﺍﻟﻘﻴﻢ ‪ yes‬ﻟﻠﻈﻬﻮﺭ‪ no .‬ﻟﻌﺪﻡ ﺍﻟﻈﻬﻮﺭ‪ .‬ﻭ ‪ auto‬ﺍﻟﱵ ﲢﺪﺩ ﻇﻬﻮﺭ ﺍﻷﺷﺮﻃﺔ ﺃﻭ ﻋﺪﻣﻪ ﺗﻠﻘﺎﺋﻴﺎﹰ‬
‫ﲝﺴﺐ ﺍﳊﺎﺟﺔ ﺇﻟﻴﻬﺎ‪ .‬ﲤﺎﻣﺎﹰ ﻛﻤﺎ ﳛﺪﺙ ﰲ ﻣﻌﻈﻢ ﺗﻄﺒﻴﻘﺎﺕ ‪Windows‬‬
‫"‪SCROLLING="yes‬‬
‫"‪SCROLLING="no‬‬
‫"‪SCROLLING="auto‬‬

‫•ﺍﳋﺎﺻﻴﺔ ‪NORESIZE‬‬
‫ﻋﻨﺪ ﺇﺿﺎﻓﺔ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﻳﺘﻢ ﻣﻨﻊ ﻋﻤﻠﻴﺔ ﺍﻟﺘﺤﻜﻢ ﲝﺠﻢ ﺍﻹﻃﺎﺭ ﺑﺎﻟﺘﺼﻐﲑ ﺃﻭ ﺍﻟﺘﻜﺒﲑ ﻣﻦ ﺧﻼﻝ‬
‫ﺍﻟﺴﺤﺐ ﻭﺍﻹﻓﻼﺕ‪ .‬ﻭﻫﻲ ﻻ ﺗﺄﺧﺬ ﺃﻱ ﻗﻴﻢ‪.‬‬
‫ﺍﻣﺜﻠﺔ ﻋﻞ ﺧﺼﺎﺋﺺ ﺍﻟﻮﺳﻢ >‪<frame‬‬
‫>"‪<FRAMESET COLS="50%,50%‬‬
‫>"‪<FRAME SRC="pc.jpg" MARGINHEIGHT="40‬‬
‫>"‪<FRAME SRC="frame2.html‬‬
‫>‪</FRAMESET‬‬

‫>"‪<FRAMESET COLS="50%,50%‬‬
‫"‪<FRAME SRC ="pc.jpg‬‬
‫>"‪MARGINHEIGHT="40" MARGINWIDTH="30‬‬
‫>"‪<FRAME SRC="frame2.html‬‬
‫>‪</FRAMESET‬‬

‫>"‪<FRAMESET COLS="50%,50%‬‬
‫"‪<FRAME SRC ="pc.jpg" MARGINHEIGHT="40‬‬
‫>"‪MARGINWIDTH="30" SCROLLING="yes‬‬
‫>"‪<FRAME SRC="frame2.html‬‬
‫>‪</FRAMESET‬‬

‫‪48‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫>"‪<FRAMESET COLS="50%,50%‬‬
‫"‪<FRAME SRC ="pc.jpg" MARGINHEIGHT="40‬‬
‫>‪MARGINWIDTH="30" SCROLLING="yes" NORESIZE‬‬
‫>"‪<FRAME SRC="frame2.html‬‬
‫>‪</FRAMESET‬‬
‫ﺍﻟﻮﺳﻢ >‪<NOFRAMES> ... </NOFRAMES‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻫﺬﺍ ﺍﻟﻮﺳﻢ ﻟﺘﻮﻓﲑ ﺑﺪﻳﻞ ﻣﻌﲔ ﻋﻦ ﺻﻔﺤﺔ ﺍﻹﻃﺎﺭﺍﺕ ﰲ ﺣﺎﻟﺔ ﻗﻴﺎﻡ ﺃﺣﺪ ﺍﻟﺰﻭﺍﺭ ﺑﺪﺧﻮﻝ ﺍﳌﻮﻗﻊ‬
‫ﻣﺴﺘﺨﺪﻣﺎﹰ ﻣﺘﺼﻔﺤﺎﹰ ﻻ ﻳﺪﻋﻢ ﺍﻹﻃﺎﺭﺍﺕ ﻣﺜﻞ ﺍﻹﺻﺪﺍﺭﺍﺕ ﺍﻟﻘﺪﳝﺔ ﻟﹻ ‪Netscape, Explorer‬‬
‫ﻓﺈﺫﺍ ﺃﺭﺩﺕ ﺃﻥ ﲤﻨﺢ ﺯﻭﺍﺭ ﻣﻮﻗﻌﻚ ﺍﻟﺬﻳﻦ ﻻ ﻳﺴﺘﺨﺪﻣﻮﻥ ﻣﺘﺼﻔﺤﺎﹰ ﺣﺪﻳﺜﺎﹰ ﻓﺮﺻﺔ ﻣﺸﺎﻫﺪﺓ ﻣﻮﻗﻌﻚ‪ ،‬ﻓﻜﻞ ﻣﺎ‬
‫ﻋﻠﻴﻚ ﻓﻌﻠﻪ ﻫﻮ ﺇﺩﺭﺍﺝ ﻫﺬﺍ ﺍﻟﻮﺳﻢ ﰲ ‪‬ﺎﻳﺔ ﺍﳌﻠﻒ ﺍﻟﺮﺋﻴﺴﻲ ﻟﻺﻃﺎﺭﺍﺕ ﻭﺍﻟﺒﺪﺀ ﺑﻜﺘﺎﺑﺔ ﺻﻔﺤﺘﻚ ﻛﻤﺎ ﻟﻮ‬
‫ﻛﺎﻧﺖ ﺻﻔﺤﺔ ﻭﻳﺐ ﻋﺎﺩﻳﺔ‪.‬‬
‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE>Main File</TITLE‬‬
‫>‪</HEAD‬‬
‫"‪<FRAMESET ROWS="50,*,15%,20%‬‬
‫>"‪FRAMEBORDER="0‬‬
‫>"‪<FRAME SRC="frame1.html‬‬
‫>"‪<FRAME SRC="frame2.html‬‬
‫>"‪<FRAME SRC="frame3.html‬‬
‫>"‪<FRAME SRC="frame4.html‬‬
‫>‪</FRAMESET‬‬
‫>‪<NOFRAMES‬‬
‫>‪<BODY‬‬
‫ﺃﻛﺘﺐ ﺻﻔﺤﺘﻚ ﺑﺎﻟﺼﻮﺭﺓ ﺍﻻﻋﺘﻴﺎﺩﻳﺔ ﻫﻨﺎ‬
‫>‪</BODY‬‬
‫>‪</NOFRAMES‬‬
‫>‪</HTML‬‬

‫‪49‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 HTML ‫ ﻟﻐﺔ‬-‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‬

<frame> ‫ ﻟﻠﻮﺳﻢ‬name ‫ﺍﳋﺎﺻﻴﺔ‬

‫ﺎ ﲢﺪﺩ ﻃﺮﻳﻘﺔ ﺗﻨﺴﻴﻖ ﺍﻟﻌﻤﻞ ﺑﲔ‬‫< ﻷ‬FRAME> ‫ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﺗﻌﺘﱪ ﻣﻦ ﺃﻫﻢ ﺧﺼﺎﺋﺺ ﺍﻟﻮﺳﻢ‬
.‫ﺍﻹﻃﺎﺭﺍﺕ ﻭﺍﻟﺼﻔﺤﺎﺕ ﻭﺃﺳﻠﻮﺏ ﻋﺮﺿﻬﺎ‬
‫ﻗﺒﻞ ﺗﻄﺒﻴﻖ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﻧﺴﺘﻌﺮﺽ ﺷﻔﺮﺍﺕ ﺍﳌﻠﻔﺎﺕ ﺍﻟﺴﺎﺑﻘﺔ ﺍﻟﱴ ﻗﻤﻨﺎ ﺑﺈﻧﺸﺎﺋﻬﺎ ﻭﻫﻲ ﻛﻤﺎ ﻳﻠﻲ‬
masterfile.html ‫• ﺷﻔﺮﺓ ﺍﳌﻠﻒ ﺍﻟﺮﺋﻴﺴﻲ ﺍﻟﺬﻱ ﺃﲰﻴﺘﻪ‬
<html>
<head>
<title>Master File</title></head>
<frameset rows="50%,50%" frameborder="1"
BORDERCOLOR="green" >
<frameset cols="25%,25%" frameborder="1">
<frame src="frame1.html" SCROLLING="yes" >
<frame src="frame2.html">
</frameset>
<frameset cols="25%,25%" frameborder="1">
<frame src="frame3.html" >
<frame src="frame4.html">
</frameset>
</frameset>
</html>
frame1.html ‫•ﺷﻔﺮﺓ ﺍﳌﻠﻒ‬
<html>
<head>
<title>‫<ﺍﻟﻨﺎﻓﺪﺓ ﺍﻟﺮﺋﻴﺴﻴﺔ‬/title>
</head>
<body bgcolor="yellow" text="blue">
<font face="Traditional Arabic" size="6">
<b>

50 ‫ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬.‫ﺇﻋﺪﺍﺩ ﺃ‬

 HTML ‫ ﻟﻐﺔ‬-‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‬

<p align="center">
‫ﺍﻟﻨﺎﻓﺬﺓ ﺍﻟﺮﺋﻴﺴﻴﺔ‬
</p></b></font>
<HR SIZE="5" width="50%"
align="center" color="brown" >
<br></body></html>
frame2.html ‫•ﺷﻔﺮﺓ ﺍﳌﻠﻒ‬
<html>
<head>
</title> ‫<ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‬title>
</head>
<body bgcolor="aqua" text="blue">
<font face="Traditional Arabic" size="6">
<b>
<p align="center">
‫ﻗﺴﻢ ﺍﳊﺎﺳﺐ ﺍﻻﱄ‬--- ‫ﻛﻠﻴﺔ ﺍﳌﻌﻠﻤﲔ‬
</p></b></font>
<HR SIZE="5" width="80%"
align="center" color="brown" >
<br>
<marquee behavior"=scroll "loop"=10 "bgcolor"=blue"
direction"=left "scrollamount"=1">
<font face"=Times New Roman "size"=5 "color"=white">
<b><font color"=black "size"=6">I</b></font>ntroduction to
<b><font color"=black "size"=6">I</b></font>nternet
<b><font color"=black "size"=6"> P</b></font>rogramming
</font></marquee><b><u>
<p align"=right">

51 ‫ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬.‫ﺇﻋﺪﺍﺩ ﺃ‬

 HTML ‫ ﻟﻐﺔ‬-‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‬

.‫ﶈﺔ ﻋﻦ ﺍﻻﻧﺘﺮﻧﺖ‬
<br>
.‫ﻣﻠﻜﻴﺔ ﺍﻟﺸﺒﻜﺔ‬
<br>
.‫ﺗﺎﺭﻳﺦ ﺍﻟﺸﺒﻜﺔ‬
<br>
Word wide Web . ‫ﺷﺒﻜﺔ ﺍﻟﻮﻳﺐ ﺍﻟﻌﺎﳌﻴﺔ‬
</u></b> </p>
</body></html>
frame3.html ‫ﺷﻔﺮﺓ ﺍﳌﻠﻒ‬ •
<html>
<body>
<p align="center">
<b><font size="5" color="blue">
Personal Computer
</b></font><br>
<img src="pc.bmp" border="2">
</p></body></html>
frame4.html ‫ﺷﻴﻔﺮﺓ ﺍﳌﻠﻒ ﺍﻟﺬﻱ ﳛﺘﻮﻱ ﻋﻠﻰ ﺍﻟﻮﺻﻼﺕ ﺍﻟﺘﺸﻌﺒﻴﺔ ﻭﺍﻟﺬﻱ ﺃﲰﻴﺘﻪ‬ •
<html dir="rtl"><body>
<p align="center"><b>
Hyper Links‫ﺍﻻﺭﺗﺒﺎﻃﺎﺕ ﺍﻟﺘﺸﻌﺒﻴﺔ‬
</b></p>
<A HREF="11.html" >
</A>‫ﺍﻟﻨﺺ ﺍﳌﺘﺤﺮﻙ‬
<br>
<A HREF="12.html" >
</A>‫ﺍﻟﻌﻨﺎﻭﻳﻦ‬

52 ‫ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬.‫ﺇﻋﺪﺍﺩ ﺃ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫>‪<br‬‬
‫> "‪<A HREF="13.html‬‬
‫ﺍﻟﺘﻌﺪﺍﺩ ﺍﻟﺮﻗﻤﻲ>‪</A‬‬
‫>‪<br‬‬
‫> "‪<A HREF="14.html‬‬
‫ﺍﻟﺘﻌﺪﺍﺩ ﺍﻟﻨﻘﻄﻲ>‪</A‬‬
‫>‪<br><body><html‬‬
‫•ﻭﺃﻻﻥ ﺗﺒﻘﻰ ﺍﻹﻃﺎﺭ ﺍﻟﺬﻱ ﻧﺮﻳﺪ ﺇﻇﻬﺎﺭ ﺍﳌﻠﻔﺎﺕ ﻓﻴﻪ‪ .‬ﻭﻫﻮ ﺍﻟﺼﻔﺤﺔ ﺍﳌﺴﻤﺎﻩ ‪frame1.html‬‬
‫•ﻭﻫﻨﺎ ﻳﺄﰐ ﺩﻭﺭ ﺍﳋﺎﺻﻴﺔ ‪ NAME‬ﻭﺍﻟﱵ ﻧﻘﻮﻡ ﻣﻦ ﺧﻼﳍﺎ ﺑﺘﻌﻴﲔ ﺍﺳﻢ ﻣﺎ ﻟﻺﻃﺎﺭ ‪-‬ﺃﻱ ﺍﻹﻃﺎﺭ ﺍﻟﺬﻱ‬
‫ﻧﺮﻏﺐ ﺃﻥ ﺗﻈﻬﺮ ﺑﻪ ﺍﳌﻠﻔﺎﺕ ﻋﻨﺪﻣﺎ ﻧﻘﻮﻡ ﺑﺎﻟﻨﻘﺮ ﻋﻠﻰ ﺍﻟﻮﺻﻼﺕ ﺍﻟﺘﺸﻌﺒﻴﺔ‪ -‬ﺣﻴﺚ ﺳﻴﺘﻢ ﻓﻴﻤﺎ ﺑﻌﺪ ﺍﺳﺘﺨﺪﺍﻡ‬
‫ﻫﺬﺍ ﺍﻹﺳﻢ ﻣﻦ ﺃﺟﻞ ﺍﺳﺘﻬﺪﺍﻑ ﻫﺬﺍ ﺍﻹﻃﺎﺭ ﻣﻦ ﻗﺒﻞ ﺍﻟﻮﺻﻼﺕ ﺍﻟﺘﺸﻌﺒﻴﺔ ﰲ ﺍﻹﻃﺎﺭﺍﺕ ﺍﻷﺧﺮﻯ ﺃﻭ ﺣﱴ ﰲ‬
‫ﺍﻟﺼﻔﺤﺎﺕ ﺍﻷﺧﺮﻯ‪.‬‬
‫ﻭ ﺍﻵﻥ ﺣﺎﻥ ﺍﻟﻮﻗﺖ ﻟﺬﻛﺮ ﺧﺎﺻﻴﺔ ﺟﺪﻳﺪﺓ ﻣﻦ ﺧﺼﺎﺋﺺ ﺍﻟﻮﺳﻢ >‪ ) </A> ... <A‬ﻭﻫﻮ ﻭﺳﻢ‬
‫ﺍﻟﻮﺻﻼﺕ ﺍﻟﺘﺸﻌﺒﻴﺔ ﻭ ﻫﻲ ‪.TARGET‬‬
‫•ﺍﳋﺎﺻﻴﺔ ‪ ?NAME‬ﺗﺴﺘﺨﺪﻡ ﻣﻊ ﺍﻟﻮﺳﻢ ﺍﳋﺎﺹ ﺑﺘﻌﺮﻳﻒ ﺍﻹﻃﺎﺭ ﺍﻟﺬﻱ ﺳﺘﻈﻬﺮ ﺑﻪ ﺍﳌﻠﻔﺎﺕ‪ .‬ﻭﺑﺎﻓﺘﺮﺍﺽ‬
‫ﺃﻧﻨﺎ ﻧﺮﻳﺪ ﺗﺴﻤﻴﺔ ﻫﺬﺍ ﺍﻹﻃﺎﺭ ﺑﺎﻻﺳﻢ ‪ .mainwindow‬ﻭﻫﻮ ﺍﺳﻢ ﳛﺪﺩﻩ ﺍﳌﺴﺘﺨﺪﻡ ﺣﺴﺐ ﻣﺎ ﻳﺮﻳﺪ ‪.‬‬

‫ﺇﺫﻥ ﺗﺼﺒﺢ ﺷﻔﺮﺓ ﺍﳌﻠﻒ ﺍﻷﺳﺎﺳﻲ ‪ masterfile.html‬ﻫﻲ‪:‬‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title>Master File</title></head‬‬
‫"‪<frameset rows="50%,50%" frameborder="1‬‬
‫> "‪BORDERCOLOR="green‬‬
‫>"‪<frameset cols="25%,25%" frameborder="1‬‬
‫"‪<frame src="frame1.html" SCROLLING="yes‬‬
‫> "‪NAME="mainwindow‬‬
‫>"‪<frame src="frame2.html‬‬
‫>‪</frameset‬‬

‫‪53‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫>"‪<frameset cols="25%,25%" frameborder="1‬‬

‫> "‪<frame src="frame3.html‬‬
‫>"‪<frame src="frame4.html‬‬
‫>‪</frameset> </frameset></html‬‬

‫ﻭ‪‬ﺬﺍ ﻧﻜﻮﻥ ﻗﺪ ﺍﻧﺘﻬﻴﻨﺎ ﻣﻦ ﺇﻋﺪﺍﺩ ﺍﳌﻠﻒ ﺍﻟﺮﺋﻴﺴﻲ ﻟﻴﻜﻮﻥ ﻣﻠﻒ ﺇﻃﺎﺭﺍﺕ ﻓﻌﺎﻝ‪ .‬ﻭﻧﺴﺘﻄﻴﻊ ﺍﻵﻥ ﺍﺳﺘﻬﺪﺍﻑ‬
‫ﺍﻹﻃﺎﺭ ﻣﻦ ﺃﻱ ﻣﻜﺎﻥ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻹﺳﻢ ﺍﻟﺬﻱ ﻋﺮﻓﻨﺎﻩ ﺑﻪ‪.‬‬
‫ﺍﳌﺮﺣﻠﺔ ﺍﻻﺧﲑﺓ‬
‫ﻫﻲ ﺗﻌﺮﻳﻒ ﺍﻟﻮﺻﻼﺕ ﺍﻟﺘﺸﻌﺒﻴﺔ ﺑﻄﺮﻳﻘﺔ ﲡﻌﻞ ﺍﳌﻠﻔﺎﺕ ﺍﳌﺘﻌﻠﻘﺔ ‪‬ﺬﻩ ﺍﻟﻮﺻﻼﺕ ﺗﻈﻬﺮ ﰲ ﺍﻹﻃﺎﺭ ﺍﶈﺪﺩ‪ .‬ﻭﻫﻨﺎ‬
‫ﻳﺄﰐ ﺩﻭﺭ ﺍﳋﺎﺻﻴﺔ ‪ TARGET‬ﻟﻜﻲ ﺗﻘﻮﻡ ﺑﺄﺩﺍﺀ ﻫﺬﻩ ﺍﻟﻮﻇﻴﻔﺔ‪ .‬ﻭﺳﻮﻑ ﻧﻌﻤﻞ ﺍﻵﻥ ﻋﻠﻰ ﺍﳌﻠﻒ‬
‫ﺍﳌﺴﻤﻰ ‪ .frame4.html‬ﻫﻮ ﺍﳌﻠﻒ ﺍﻟﺬﻱ ﳛﺘﻮﻱ ﻋﻠﻰ ﺍﻟﻮﺻﻼﺕ ﺍﻟﺘﺸﻌﺒﻴﺔ؟! ﻟﻴﺼﺒﺢ ﺑﺎﻟﺸﻜﻞ ﺍﻟﺘﺎﱄ‪:‬‬

‫>"‪<html dir="rtl‬‬
‫>‪<body> <p align="center"> <b‬‬
‫‪ Hyper Links‬ﺍﻻﺭﺗﺒﺎﻃﺎﺕ ﺍﻟﺘﺸﻌﺒﻴﺔ‬
‫>‪</b></p‬‬
‫>"‪<A HREF="11.html" TARGET="mainwindow‬‬
‫>‪</A‬ﺍﻟﻨﺺ ﺍﳌﺘﺤﺮﻙ‬
‫>‪<br‬‬
‫>"‪<A HREF="12.html" TARGET="mainwindow‬‬
‫>‪</A‬ﺍﻟﻌﻨﺎﻭﻳﻦ‬
‫>‪<br‬‬
‫>"‪<A HREF="13.html" TARGET="mainwindow‬‬
‫>‪</A‬ﺍﻟﺘﻌﺪﺍﺩ ﺍﻟﺮﻗﻤﻲ‬
‫>‪<br‬‬
‫>"‪<A HREF="14.html" TARGET="mainwindow‬‬
‫>‪</A‬ﺍﻟﺘﻌﺪﺍﺩ ﺍﻟﻨﻘﻄﻲ‬
‫>‪<br></body></html‬‬

‫‪54‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﶈﺎﺿﺮﺓ ﺍﻟﺜﺎﻧﻴﺔ ﻋﺸﺮﺓ‬

‫ﺍﻟﻨﻤﺎﺫﺝ‪FROMS‬‬

‫ﺍﻟﻨﻤﺎﺫﺝ ﺗﻌﺘﱪ ﻣﻦ ﺍﳌﻮﺍﺿﻴﻊ ﺍﳌﺘﻘﺪﻣﺔ ﰲ ﻟﻐﺔ ‪ HTML‬ﺣﻴﺚ ﺃﻥ ﻣﻌﻈﻢ ﻣﻮﺍﻗﻊ‬

‫ﺍﻟﻮﻳﺐ ﺗﻜﺎﺩ ﻻ ﲣﻠﻮ ﻣﻦ ﻭﺟﻮﺩﻫﺎ‪.‬‬
‫ﻭﺫﻟﻚ ﻟﻌﺪﺓ ﺃﺳﺒﺎﺏ ﻣﻦ ﺃﳘﻬﺎ‬
‫•ﺇﳚﺎﺩ ﺇﻣﻜﺎﻧﻴﺔ ﻟﻠﺘﻔﺎﻋﻞ ﺑﲔ ﺍﳌﻮﻗﻊ ﻭﺻﺎﺣﺒﻪ ﻣﻦ ﺟﻬﺔ ﻭﺍﻟﺰﻭﺍﺭ ﻣﻦ ﺟﻬﺔ ﺃﺧﺮﻯ‬
‫•ﺃﺣﻴﺎﻧﺎ ﻗﺪ ﲢﺘﺎﺝ ﻛﻤﺼﻤﻢ ﳌﻮﻗﻊ ﻭﻳﺐ ﺃﻥ ﺗﻌﺮﻑ ﺁﺭﺍﺀ ﺯﻭﺍﺭ ﻣﻮﻗﻌﻚ ﰲ ﻣﻌﺮﻓﺔ ﺃﺷﻴﺎﺀ ﳏﺪﺩﺓ‬
‫•ﺇﻣﻜﺎﻧﻴﺔ ﺗﻨﻈﻴﻢ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﳌﺪﺧﻠﺔ ﻣﻦ ﺧﻼﳍﺎ ﻭﺳﻬﻮﻟﺔ ﺍﺳﺘﺨﺪﺍﻣﻬﺎ ﻣﻦ ﻗﺒﻞ ﺯﻭﺍﺭ ﺍﳌﻮﻗﻊ‪.‬‬
‫ﻭﻣﻦ ﺃﺑﺮﺯ ﺍﻷﻣﺜﻠﺔ ﻋﻠﻰ ﺍﻟﻨﻤﺎﺫﺝ ﰲ ﻣﻮﺍﻗﻊ ﺍﻟﻮﻳﺐ‬
‫‪‬ﺩﻓﺎﺗﺮ ﺍﻟﺰﻭﺍﺭ ‪.‬‬
‫‪‬ﺻﻔﺤﺎﺕ ﺍﻟﺒﺤﺚ ﻋﻦ ﺍﻟﻜﻠﻤﺎﺕ ﺃﻭ ﺍﻟﻌﺒﺎﺭﺍﺕ ﺩﺍﺧﻞ ﺍﳌﻮﺍﻗﻊ‪.‬‬
‫•ﺗﻜﻤﻦ ﺻﻌﻮﺑﺔ ﺍﻟﻨﻤﺎﺫﺝ ﰲ ﺍﻟﺘﺪﺍﺧﻞ ﺑﻴﻨﻬﺎ ﻭﺑﲔ ﻟﻐﺎﺕ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ ﻣﺜﻞ ‪ JavaScript‬ﳑﺎ ﳚﻌﻠﻬﺎ‬
‫ﲣﺘﻠﻒ ﻋﻦ ﺳﺎﺑﻘﻴﻬﺎ ﻣﻦ ﺍﻟﻮﺳﻮﻡ ﺃﻭ ﺍﻟﻌﻨﺎﺻﺮ ﺍﻷﺧﺮﻯ‪ .‬ﺧﺎﺻﺔ ﺇﺫﺍ ﺍﺣﺘﺠﺖ ﺇﱃ ﺑﻌﺾ ﺍﳌﻘﺎﻃﻊ ﺍﻟﱪﳎﻴﺔ ﻣﻦ‬
‫ﻫﺬﻩ ﺍﻟﻠﻐﺎﺕ ﺿﻤﻦ ﳕﺎﺫﺟﻚ‪.‬‬
‫•ﺍﺩﺭﺍﺝ ﺍﻟﻨﻤﺎﺫﺝ ﰲ ﺻﻔﺤﺎﺕ ﺍﻟﻮﻳﺐ ﻳﺘﻢ ﺑﺎﺳﺘﺨﺪﺍﻡ ﺍﻟﻮﺳﻮﻡ‬
‫>‪<FORM> ... </FORM‬‬
‫ﺣﻴﺚ ﺗﻮﺟﺪ ﺛﻼﺛﺔ ﺧﺼﺎﺋﺺ ﳍﺬﺍ ﺍﻟﻮﺳﻢ ﻫﻲ‬
‫• ﺍﳋﺎﺻﻴﺔ ‪ACTION‬‬
‫ﲢﺪﺩ ﺍﻟﻌﻨﻮﺍﻥ ﺍﻟﺬﻱ ﺳﻴﺘﻢ ﺇﺭﺳﺎﻝ ﺑﻴﺎﻧﺎﺕ ﺍﻟﻨﻤﻮﺫﺝ ﺇﻟﻴﻪ ﻟﺘﺘﻢ ﻣﻌﺎﳉﺘﻬﺎ ﺑﺎﻟﺼﻮﺭﺓ ﺍﳌﻄﻠﻮﺑﺔ‪ .‬ﻭﻋﺎﺩﺓ ﻳﻜﻮﻥ‬
‫ﻫﺬﺍ ﻋﻨﻮﺍﻧﺎﹰ ﻟﱪﻳﺪ ﺇﻟﻜﺘﺮﻭﱐ ‪ Email‬ﺳﻮﻑ ﻳﺘﻢ ﺇﺭﺳﺎﻝ ﺑﻴﺎﻧﺎﺕ ﺍﻟﻨﻤﻮﺫﺝ ﺇﻟﻴﻪ‪ .‬ﺃﻭ ﻗﺪ ﻳﻜﻮﻥ ﻋﻨﻮﺍﻧﺎﹰ‬
‫ﻟﱪﻧﺎﻣﺞ ‪ CGI‬ﻣﻮﺟﻮﺩ ﻋﻠﻰ ﺍﻟﻜﻤﺒﻴﻮﺗﺮ ﺍﳋﺎﺩﻡ ‪ Server‬ﺍﻟﺬﻱ ﺗﺘﻮﺍﺟﺪ ﻋﻠﻴﻪ ﺻﻔﺤﺔ ﺍﻟﻮﻳﺐ ‪.‬‬
‫>"‪<FORM ACTION="mailto:[email protected]‬‬
‫‪...‬‬
‫>‪</FORM‬‬
‫>"‪<FORM ACTION="name_and_address_of_CGI_script‬‬
‫‪...‬‬
‫>‪</FORM‬‬

‫‪55‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫•ﺍﳋﺎﺻﻴﺔ ‪METHOD‬‬
‫ﲢﺪﺩ ﺍﻟﻄﺮﻳﻘﺔ ﺍﻟﱵ ﺳﻴﺘﻢ ‪‬ﺎ ﺍﻟﺘﻌﺎﻣﻞ ﻣﻊ ﺍﻟﻌﻨﻮﺍﻥ ﺍﶈﺪﺩ ﰲ ﺍﳋﺎﺻﻴﺔ ﺍﻟﺴﺎﺑﻘﺔ ‪ .ACTION‬ﻭﻫﻨﺎﻙ‬
‫ﻗﻴﻤﺘﲔ ﳍﺬﻩ ﺍﳋﺎﺻﻴﺔ ﳘﺎ‪:‬‬
‫‪ GET‬ﺗﺴﺘﺨﺪﻡ ﻋﻨﺪﻣﺎ ﺗﻜﻮﻥ ﺍﳌﻌﺎﳉﺔ ﺩﺍﺧﻠﻴﺔ ﺃﻱ ﺗﺘﻢ ﺩﺍﺧﻞ ﺍﳋﺎﺩﻡ ‪ Server‬ﻧﻔﺴﻪ‪ .‬ﻣﺜﻞ ﳕﻮﺫﺝ‬
‫ﺍﻟﺒﺤﺚ ﻋﻦ ﻛﻠﻤﺔ ﰲ ﺍﳌﻮﻗﻊ‪.‬‬
‫‪ Post‬ﺗﺴﺘﺨﺪﻡ ﻋﻨﺪﻣﺎ ﺗﻜﻮﻥ ﻋﻤﻠﻴﺔ ﺍﳌﻌﺎﳉﺔ ﺧﺎﺭﺟﻴﺔ ﻛﺄﻥ ﻳﺘﻢ ﺇﺭﺳﺎﻝ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺇﱃ ﻋﻨﻮﺍﻥ ﺑﺮﻳﺪ‬
‫ﺇﻟﻜﺘﺮﻭﱐ‪.‬‬
‫"‪<FORM ACTION="mailto:[email protected]‬‬
‫>‪METHOD="post"> ... </FORM‬‬
‫"‪<FORM ACTION="name_and_address_of_CGI_script‬‬
‫>‪METHOD="get"> ... </FORM‬‬
‫•ﺍﳋﺎﺻﻴﺔ ‪ENCTYPE‬‬
‫ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﲢﺪﺩ ﻃﺮﻳﻘﺔ ﺍﻟﺘﺮﻣﻴﺰ ﺍﻟﱵ ﺳﻴﺘﻢ ﺇﺭﺳﺎﻝ ﺍﻟﺒﻴﺎﻧﺎﺕ ﻭﻓﻘﺎﹰ ﳍﺎ‪ .‬ﻭﻫﻲ ﺗﺄﺧﺬ ﺍﻟﻘﻴﻤﺘﲔ ﺍﻟﺘﺎﻟﻴﺘﲔ‪:‬‬
‫)ﳚﺐ ﺃﻥ ﺗﻜﺘﺐ ﻫﺬﻩ ﺍﻟﻘﻴﻢ ﻛﻤﺎ ﻫﻲ ﻧﺼﺎﹰ ﻭﺣﺮﻓﺎﹰ(‬
‫‪application/x-www-form-urlencoded‬‬ ‫‪o‬‬

‫‪text/plain‬‬ ‫‪o‬‬

‫ﺍﻟﺪﺍﻓﻊ ﻹﺳﺘﺨﺪﺍﻡ ﺃﻱ ﻣﻦ ﺍﻟﻘﻴﻤﺘﲔ ﻫﻮ ﻃﺒﻴﻌﺔ ﻋﻤﻠﻴﺔ ﺍﳌﻌﺎﳉﺔ ﺍﻟﱵ ﺳﺘﺠﺮﻯ ﻋﻠﻰ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺃﻭ ﻃﺒﻴﻌﺔ‬
‫ﺑﺮﻧﺎﻣﺞ ﺍﻟﱪﻳﺪ ﺍﻹﻟﻜﺘﺮﻭﱐ ﺍﻟﺬﻱ ﺳﺘﺴﺘﻘﺒﻞ ﻫﺬﻩ ﺍﻟﺒﻴﺎﻧﺎﺕ ﻣﻦ ﺧﻼﻟﻪ )ﺇﺫﺍ ﻛﺎﻥ ﻳﺪﻋﻢ ‪ MIME‬ﺃﻡ ﻻ‪،‬‬
‫ﻭﻫﻲ ﺇﺧﺘﺼﺎﺭ ﻟﻠﻌﺒﺎﺭﺓ ‪ Multi-purpose Internet Mail Extentions‬ﻭﻫﻲ ﻣﻦ‬
‫ﺍﳌﻌﺎﻳﲑ ﺍﻟﺴﺎﺋﺪﺓ ﰲ ﺍﻹﻧﺘﺮﻧﺖ ﻭﺍﻟﱵ ﺗﺘﻌﻠﻖ ﺑﻨﻘﻞ ﲨﻴﻊ ﺃﻧﻮﺍﻉ ﺍﻟﺒﻴﺎﻧﺎﺕ ﻣﻦ ﺻﻮﺕ ﻭﺻﻮﺭﺓ ﻭﻟﻴﺲ ﻓﻘﻂ‬
‫ﺍﻟﻨﺼﻮﺹ ﻣﻦ ﺧﻼﻝ ﺍﻟﱪﻳﺪ ﺍﻹﻟﻜﺘﺮﻭﱐ(‪.‬‬
‫ﺃﺷﻜﺎﻝ ﺍﻟﺒﻴﺎﻧﺎﺕ‬
‫ﻧﺴﺘﺨﺪﻡ ﺍﻟﻮﺳﻢ >‪ <INPUT‬ﻟﺘﻌﺮﻳﻔﻬﺎ ﻭﺍﳊﻘﻴﻘﺔ ﺃﻥ ﻫﺬﻩ ﺍﻷﺷﻜﺎﻝ ﻫﻲ‬
‫ﳎﺮﺩ ﺧﺼﺎﺋﺺ ﺃﻭ ﺑﺎﻷﺣﺮﻯ ﻗﻴﻢ ﳋﺼﺎﺋﺺ ﺗﺎﺑﻌﺔ ﳍﺬﺍ ﺍﻟﻮﺳﻢ‪....‬‬
‫ﺣﻘﻮﻝ ﺍﻟﻮﺳﻢ ‪input‬‬
‫•ﺍﳊﻘﻞ ‪type‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻹﺩﺭﺍﺝ ﳎﻤﻮﻋﺔ ﻣﻦ ﺍﻷﺷﻜﺎﻝ ﺣﺴﺐ ﺍﻟﻘﻴﻤﺔ ﺍﳌﺴﺘﺨﺪﻣﺔ ﻣﻊ ﺍﳋﺎﺻﻴﺔ‬
‫ﻭﺍﳉﺪﻭﻝ ﺍﻟﺘﺎﱄ ﻳﻮﺿﺢ ﻛﻞ ﻗﻴﻢ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ‪.‬‬

‫‪56‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﳋﺼﺎﺋﺺ ﺍﳌﺴﺘﺨﺪﻣﺔ ﻣﻊ ﺍﻟﻨﻮﻉ ‪type‬‬

‫• ﺍﳋﺎﺻﻴﺔ ‪NAME‬‬
‫ﺗﺴﺘﺨﺪﻡ ﻟﺘﺴﻤﻴﺔ ﺣﻘﻞ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺣﻴﺚ ﻗﻤﺖ ﺑﺈﻋﻄﺎﺀ ﺍﻹﺳﻢ ‪ address‬ﳍﺬﺍ ﺍﳊﻘﻞ ﰲ ﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ‪.‬‬
‫)ﻟﻚ ﻛﻞ ﺍﳊﺮﻳﺔ ﰲ ﺇﻋﻄﺎﺀ ﺍﻹﺳﻢ ﺍﻟﺬﻱ ﺗﺮﻳﺪﻩ ﻟﻠﺤﻘﻞ(‪ .‬ﻭﺍﳊﻘﻴﻘﺔ ﺃﻥ ﻫﺬﺍ ﺍﻹﺳﻢ ﻳﻌﺮ‪‬ﻑ ﺍﳊﻘﻞ ﰲ ﺩﺍﺧﻞ‬
‫ﺍﻟﻨﻤﻮﺫﺝ ﻧﻔﺴﻪ‪ ،‬ﲝﻴﺚ ﳝﻜﻦ ﺍﺳﺘﺨﺪﺍﻣﻪ ﻓﻴﻤﺎ ﺑﻌﺪ ﻟﻠﺤﺎﺟﺎﺕ ﺍﻟﱪﳎﻴﺔ ﻭﺿﺮﻭﺭﺍﺕ ﺍﳌﻌﺎﳉﺔ ﺇﻥ ﻭﺟﺪﺕ ﻣﻦ‬
‫ﻗﺒﻞ ﺍﻟﱪﺍﻣﺞ ﺍﻟﱵ ﻗﺪ ﺗﻀﻴﻔﻬﺎ ﻛﻤﺼﻤﻢ ﻟﻠﻤﻮﻗﻊ‪ .‬ﻭﺣﱴ ﻋﻨﺪﻣﺎ ﺗﺮﻳﺪ ﺃﻥ ﻳ‪‬ﺮﺳﻞ ﺍﻟﻨﻤﻮﺫﺝ ﺇﻟﻴﻚ ﺑﺎﻟﱪﻳﺪ ﻓﺈﻥ‬
‫ﺣﻘﻮﻟﻪ ﺗﻌﺮ‪‬ﻑ ﺑﺎﻻﺳﻢ ﺍﻟﺬﻱ ﺃﺩﺭﺟﺘﻪ ﳍﺎ ﻣﻦ ﺧﻼﻝ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ‪.‬‬

‫>‪<FORM ...‬‬
‫>"‪<INPUT TYPE="text" NAME="address‬‬
‫>‪</FORM‬‬
‫ﺃﻣﺎ ﺍﻟﻌﺒﺎﺭﺓ ‪Please enter your address‬‬
‫ﻓﻬﻲ ﳎﺮﺩ ﻋﺒﺎﺭﺓ ﺗﻮﺿﻴﺤﻴﺔ ﺃﺿﻔﺘﻬﺎ ﻟﻴﻌﺮﻑ ﺍﻟﺰﺍﺋﺮ ﻣﺎ ﺍﻟﺬﻱ ﳚﺐ ﻋﻠﻴﻪ ﻛﺘﺎﺑﺘﻪ‬
‫ﻭﺗﺴﺘﻄﻴﻊ ﺻﻴﺎﻏﺔ ﻫﺬﻩ ﺍﻟﻌﺒﺎﺭﺓ ﻛﻤﺎ ﺗﺮﻳﺪ‪ .‬ﻓﻔﻲ ﻛﻞ ﺍﻷﺣﻮﺍﻝ ﻟﻴﺲ ﳍﺎ ﻋﻼﻗﺔ ﲜﻮﻫﺮ‬

‫‪57‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﺍﻟﻨﻤﻮﺫﺝ ﻧﻔﺴﻪ ﺑﻌﻜﺲ ﺍﳋﺎﺻﻴﺔ ‪.NAME‬‬

‫>‪<FORM ...‬‬
‫"‪Please enter your address : <INPUT TYPE="text‬‬
‫>"‪NAME="address‬‬
‫>‪</FORM‬‬
‫‪Please enter your address:‬‬
‫•ﺍﳋﺎﺻﻴﺔ ‪value‬‬
‫ﺗﺴﺘﺨﺪﻡ ﻻﺳﻨﺎﺩ ﻗﻴﻤﺔ ﺍﻓﺘﺮﺍﺿﻴﺔ ﻟﻠﺤﻘﻞ ﻭﺫﻟﻚ ﰲ ﺍﳊﺎﻻﺕ ﺍﻟﱵ ﻧﺘﻮﻗﻊ ﻓﻴﻬﺎ ﻛﺘﺎﺑﺔ‬
‫ﻗﻴﻤﺔ ﻣﺘﻜﺮﺭﺓ ﻣﻦ ﻗﺒﻞ ﻣﻌﻈﻢ ﺍﻟﺰﻭﺍﺭ ﻭﺫﻟﻚ ﻟﻠﺘﺴﻬﻴﻞ ﻋﻠﻴﻬﻢ ﻣﻊ ﺗﻮﻓﺮ ﺇﻣﻜﺎﻧﻴﺔ‬
‫ﺣﺬﻓﻬﺎ ﻭﻛﺘﺎﺑﺔ ﻣﺎ ﻧﺮﻳﺪﻩ ﺑﺪﻻﹰ ﻣﻨﻬﺎ‪.‬‬
‫>‪<FORM ...‬‬
‫"‪Please enter your address : <INPUT TYPE="text‬‬
‫>"‪NAME="address" VALUE=" Khartoum, Sudan‬‬
‫>‪</FORM‬‬
‫•ﺍﳋﺎﺻﻴﺔ ‪size‬‬
‫ﺗﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﺣﺠﻢ ﺍﳊﻘﻞ‬
‫>‪<FORM ...‬‬
‫"‪Please enter your address : <INPUT TYPE="text‬‬
‫>"‪NAME="address" VALUE=“Khartoum, Sudan" SIZE="40‬‬
‫>‪</FORM‬‬
‫ﻻ ﻳﻮﺟﺪ ﻟﻠﺨﺎﺻﻴﺔ ‪ size‬ﺃﻱ ﺻﻔﺔ ﲢﻜﻤﻴﺔ ﺑﺎﻟﻨﺴﺒﺔ ﳊﺠﻢ ﺍﳌﺪﺧﻼﺕ ﺍﻟﱵ ﳝﻜﻦ ﻟﻠﺰﺍﺋﺮ ﺃﻥ‬
‫ﻳﻜﺘﺒﻬﺎ ﺩﺍﺧﻞ ﺍﳊﻘﻞ‪ .‬ﻭﺑﻌﺒﺎﺭﺓ ﺃﺧﺮﻯ‪ :‬ﺻﺤﻴﺢ ﺃﻧﻨﺎ ﺣﺪﺩﻧﺎ ﺣﺠﻢ ﺍﳊﻘﻞ ﻟﻜﻦ ﺫﻟﻚ ﻳﺴﺮﻱ‬
‫ﻓﻘﻂ ﻋﻠﻰ ﻣﻈﻬﺮﻩ ﻋﻠﻰ ﺍﻟﺸﺎﺷﺔ‪ .‬ﻭﻻ ﻳﻮﺟﺪ ﻣﺎ ﳝﻨﻊ ﺍﻟﺰﺍﺋﺮ ﻣﻦ ﺍﻟﻜﺘﺎﺑﺔ ﲝﻴﺚ ﻳﺘﺠﺎﻭﺯ ﺍﻟﻨﺺ‬
‫ﺣﺠﻢ ﺍﳊﻘﻞ ﺍﶈﺪﺩ‪.‬‬
‫•ﺍﳋﺎﺻﻴﺔ ‪MAXLENGTH‬‬
‫ﺗﺴﺘﺨﺪﻡ ﻟﻠﺘﺤﻜﻢ ﺑﺎﳊﺪ ﺍﻷﻗﺼﻰ ﻟﻠﻨﺺ ﺍﳌﺪﺧﻞ‪.‬‬

‫‪58‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 HTML ‫ ﻟﻐﺔ‬-‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‬

<FORM ...>
Please enter your address : <INPUT TYPE="text"
NAME="address" VALUE=“Kartoum, Sudan"
SIZE="40" MAXLENGTH="30">
</FORM>
password ‫•ﺍﳊﻘﻞ‬
،‫ ﻣﻦ ﺣﻴﺚ ﺍﳋﺼﺎﺋﺺ ﲤﺎﻣﺎﹰ ﻏﲑ ﺃﻥ ﻣﺪﺧﻼﺗﻪ ﺗﻈﻬﺮ ﻋﻠﻰ ﺷﻜﻞ ****** ﻣﻬﻤﺎ ﻛﺎﻧﺖ‬text ‫ﻳﺸﺒﻪ ﺍﳊﻘﻞ‬
‫ ﻭﻳﺴﺘﺨﺪﻡ ﻋﻨﺪﻣﺎ ﻳﻮﺟﺪ ﺣﺎﺟﺔ ﻹﺩﺧﺎﻝ ﻛﻠﻤﺔ ﺳﺮ ﻣﻦ ﻗﺒﻞ ﺍﻟﺰﺍﺋﺮ ﰲ‬.‫ﻭﻫﻮ ﺍﻟﻔﺮﻕ ﺍﻟﻮﺣﻴﺪ ﺑﻴﻨﻬﻤﺎ‬
‫ﺍﻟﻨﻤﻮﺫﺝ‬
<FORM ...>
Please enter your name :
<INPUT TYPE="text" NAME="the name" VALUE=""
SIZE="40" MAXLENGTH="30">
Please enter your passwod :
<INPUT TYPE="password" NAME="the password" VALUE=""
SIZE="40" MAXLENGTH="30">
</FORM>
hidden ‫•ﺍﳊﻘﻞ‬
.‫ ﻭﻛﻤﺎ ﻧﺴﺘﻨﺘﺞ ﻣﻦ ﺍﲰﻪ ﻓﻬﻮ ﻟﻦ ﻳﻈﻬﺮ ﺿﻤﻦ ﺍﻟﻨﻤﻮﺫﺝ‬.‫ﻭﻫﻮ ﺍﳊﻘﻞ ﺍﳌﺨﻔﻲ‬
‫ﻭﺍﳌﺜﺎﻝ ﺍﻟﺘﺎﱄ ﻳﻮﺿﺢ ﺍﳊﻘﻞ ﺍﳌﺨﻔﻲ‬
<FORM ...>
Please enter your name :
<INPUT TYPE="text" NAME="the name" VALUE=""
SIZE="40" MAXLENGTH="30">

<INPUT TYPE="hidden" NAME="my forms"

VALUE="form1">

59 ‫ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬.‫ﺇﻋﺪﺍﺩ ﺃ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫‪Please enter your passwod :‬‬

‫"‪<INPUT TYPE="password" NAME="the password‬‬
‫>"‪VALUE="" SIZE="40" MAXLENGTH="30‬‬
‫>‪</FORM‬‬

‫ﻫﺬﺍ ﺍﳊﻘﻞ ﻣﺜﻞ ﻋﺪﻣﻪ ﺑﺎﻟﻨﺴﺒﺔ ﳌﻈﻬﺮ ﺍﻟﻨﻤﻮﺫﺝ‪ ،‬ﻭﺃﻥ ﺍﻟﺰﺍﺋﺮ ﻟﻦ ﻳﺘﻌﺎﻣﻞ ﻣﻌﻪ‪.‬‬
‫ﻭﺍﻟﺴﺆﺍﻝ ﻫﻨﺎ‪ :‬ﻣﺎ ﺍﻟﻔﺎﺋﺪﺓ ﻣﻦ ﻭﺟﻮﺩ ﺣﻘﻞ ﳐﻔﻰ؟ ﻭﻟﻜﻲ ﺃﺟﻴﺐ ﻋﻠﻰ ﻫﺬﺍ ﺍﻟﺴﺆﺍﻝ ﺩﻋﲏ ﺃﻃﺮﺡ ﻟﻚ ﻣﺜﺎﻻﹰ ﺃﻭ‬
‫ﺣﺎﻟﺔ ﻗﺪ ﺗﻮﺍﺟﻬﻚ ﻛﻤﺼﻤﻢ ﺻﻔﺤﺎﺕ ﻭﻳﺐ‪...‬‬
‫ﻟﻨﻔﺮﺽ ﺃﻥ ﻟﺪﻳﻚ ﺛﻼﺙ ﺻﻔﺤﺎﺕ ﺗﺘﻀﻤﻦ ﻛﻞ ﻣﻨﻬﺎ ﳕﻮﺫﺟﺎﹰ ﻣﺎ ﻭﺃﻥ ﻫﺬﻩ ﺍﻟﻨﻤﺎﺫﺝ ﻣﺘﺸﺎ‪‬ﺔ‪ .‬ﻭﲢﺘﻮﻱ ﻋﻠﻰ‬
‫ﻧﻔﺲ ﺍﳊﻘﻮﻝ‪ .‬ﻭﻋﻨﺪﻣﺎ‬
‫ﺗﺼﻠﻚ ﺍﻟﺒﻴﺎﻧﺎﺕ ﻛﻴﻒ ﺳﺘﺴﺘﻄﻴﻊ ﲤﻴﻴﺰ ﺃﻱ ﻣﻦ ﻫﺬﻩ ﺍﻟﻨﻤﺎﺫﺝ ﺍﺳﺘﺨﺪﻡ ﻹﺭﺳﺎﻝ ﺍﻟﺒﻴﺎﻧﺎﺕ؟ ﺑﺈﻣﻜﺎﻧﻚ ﺇﺿﺎﻓﺔ ﻫﺬﺍ‬
‫ﺍﳊﻘﻞ‬
‫)ﺍﻟﻮﳘﻲ( ﻭﺇﺳﻨﺎﺩ ﺃﻱ ﺍﺳﻢ ﻭﺃﻱ ﻗﻴﻤﺔ ﻟﻪ ﰲ ﻛﻞ ﳕﻮﺫﺝ‪.‬‬
‫ﰲ ﺍﻟﻨﻤﻮﺫﺝ ﺍﻷﻭﻝ ‪...‬‬
‫>"‪<INPUT TYPE="hidden" NAME="my forms" VALUE="form1‬‬

‫ﰲ ﺍﻟﻨﻤﻮﺫﺝ ﺍﻟﺜﺎﱐ ‪...‬‬

‫"=‪<INPUT TYPE="hidden" NAME="my forms" VALUE‬‬
‫>"‪form2‬‬

‫ﰲ ﺍﻟﻨﻤﻮﺫﺝ ﺍﻟﺜﺎﻟﺚ ‪...‬‬

‫"=‪<INPUT TYPE="hidden" NAME="my forms" VALUE‬‬
‫>"‪form3‬‬
‫ﻭﺑﺬﻟﻚ ﻋﻨﺪﻣﺎ ﺗﺼﻠﻚ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﳌﺮﺳﻠﺔ ﻣﻦ ﻗﺒﻞ ﺃﻱ ﺯﺍﺋﺮ ﺍﺳﺘﺨﺪﻡ ﺃﻱ ﻣﻦ ﺍﻟﻨﻤﺎﺫﺝ ﺍﻟﺜﻼﺛﺔ ﺳﻴﺼﻠﻚ ﺃﻳﻀﺎ‬
‫ﺣﻘﻞ ﺇﺿﺎﰲ ﻗﻤﺖ ﺃﻧﺖ ﻧﻔﺴﻚ ﺑﺘﻌﺒﺌﺘﻪ ﺳﻠﻔﺎﹰ ﻋﻨﺪﻣﺎ ﺻﻤﻤﺖ ﺍﻟﻨﻤﻮﺫﺝ ﻭﺫﻟﻚ ﺑﺄﺣﺪ ﺍﻷﺷﻜﺎﻝ ﺍﻟﺘﺎﻟﻴﺔ‪:‬‬
‫‪my forms=form1‬ﺃﻭ ‪ my forms=form2‬ﺃﻭ‪my forms=form3‬‬

‫‪60‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻣﻼﺣﻈﺔ ﻣﻬﻤﺔ‬
‫ﻣﻦ ﺃﺟﻞ ﺇﻇﻬﺎﺭ ﺍﻟﻨﻤﻮﺫﺝ ﺑﺼﻮﺭﺓ ﻣﺮﺗﺒﺔ ﻭﻣﻨﺴﻘﺔ ﻭﺍﻟﺘﺤﻜﻢ ﲟﻮﻗﻊ ﺍﳊﻘﻮﻝ ﻓﻴﻪ ﻓﻤﻦ ﺍﻷﻓﻀﻞ ﺩﺍﺋﻤﺎﹰ ﻭﺿﻌﻪ‬
‫ﺩﺍﺧﻞ ﺟﺪﻭﻝ ﻣﻊ ﺟﻌﻞ ﺍﳉﺪﻭﻝ ﺑﻼ ﺣﺪﻭﺩ‪.‬‬
‫>‪<FORM ...‬‬
‫>"‪<TABLE BORDER="0‬‬
‫>‪<TR‬‬
‫>‪<TD>Please enter your name : </TD‬‬
‫>‪<TD‬‬
‫""=‪<INPUT TYPE="text" NAME="the name" VALUE‬‬
‫>"‪SIZE="40" MAXLENGTH="30‬‬
‫>‪</TD></TR‬‬
‫>‪<TR‬‬
‫>‪<TD>Please enter your password :</TD‬‬
‫>‪<TD‬‬
‫""=‪<INPUT TYPE="password" NAME="the password" VALUE‬‬
‫>"‪SIZE="40" MAXLENGTH="30‬‬
‫>‪</TD></TR‬‬
‫>‪</TABLE></FORM‬‬
‫ﺍﳊﻘﻮﻝ ﺍﳋﺎﺻﺔ ﺑﺎﻻﺧﺘﻴﺎﺭ ﻣﻦ ﻣﺘﻌﺪﺩ‬
‫ﻭﻫﻲ ﺛﻼﺛﺔ ﺍﻧﻮﺍﻉ‬
‫ﺍﻟﻨﻮﻉ ﺍﻻﻭﻝ ﺯﺭ ﺍﳋﻴﺎﺭ ‪Radio‬‬
‫ﻳﺴﺘﺨﺪﻡ ﰲ ﺣﺎﻟﺔ ﺍﻻﺧﺘﻴﺎﺭ ﻣﻦ ﻣﺘﻌﺪﺩ)ﺧﻴﺎﺭ ﻭﺍﺣﺪ ﻓﻘﻂ(‬
‫ﻣﺜﺎﻝ ‪-:‬‬
‫ﻟﻨﻔﺮﺽ ﺍﻧﻨﺎ ﻧﺮﻳﺪ ﺃﻥ ﻧﺴﺄﻝ ﺍﻟﺰﺍﺋﺮ ﻋﻦ ﺍﺻﺪﺍﺭ ﺍﳌﺘﺼﻔﺢ ﺍﻟﺬﻱ ﻳﺴﺘﺨﺪﻣﻪ ﻣﻦ ﳎﻤﻮﻋﺔ ﺍﳋﻴﺎﺭﺍﺕ ﺍﻟﺘﺎﻟﻴﺔ ‪-:‬‬
‫‪Internet Explorer 5.0‬‬
‫‪Internet Explorer 6.0‬‬
‫‪Internet Explorer 7.0‬‬
‫‪Internet Explorer 8.0‬‬

‫‪61‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻭﺍﻟﺴﺆﺍﻝ ﺍﻻﻥ ﻛﻴﻒ ﻧﻨﺸﺊ ﻫﺬﻩ ﺍﻟﻘﺎﺋﻤﺔ ‪ ....‬ﻳﺘﻢ ﺫﻟﻚ ﻛﻤﺎ ﻳﻠﻲ‬
‫ﺍﳋﻄﻮﺓ ﺍﻻﻭﱃ ‪-:‬‬
‫ﲟﺎ ﺃﻥ ﻫﻨﺎﻙ ﺃﺭﺑﻌﺔ ﻣﺪﺧﻼﺕ‪ ،‬ﺇﺫﻥ ﳓﺘﺎﺝ ﺇﱃ ﺃﺭﺑﻌﺔ ﻭﺳﻮﻡ‬
‫>‪<FORM‬‬
‫>‪<INPUT TYPE="radio"> <BR‬‬
‫>‪<INPUT TYPE="radio"> <BR‬‬
‫>‪<INPUT TYPE="radio"> <BR‬‬
‫>‪<INPUT TYPE="radio"> <BR‬‬
‫>‪</FORM‬‬
‫ﺍﳋﻄﻮﺓ ﺍﻟﺜﺎﻧﻴﺔ ‪- :‬‬
‫ﳓﺘﺎﺝ ﺇﱃ ﺗﺴﻤﻴﺔ ﻫﺬﻩ ﺍﳌﺪﺧﻼﺕ‪ ،‬ﺃﻱ ﺃﻧﻨﺎ ﺳﻨﺴﺘﺨﺪﻡ ﺍﳋﺎﺻﻴﺔ ‪ NAME‬ﻣﻌﻬﺎ‪ .‬ﺃﻣﺎ ﺍﻻﺳﻢ ﺍﳌﻌﻄﻰ‬
‫ﻓﻤﻦ ﺍﻷﻓﻀﻞ ﺃﻥ ﻳﻜﻮﻥ ﻣﺮﺗﺒﻄﺎﹰ ﻧﻮﻋﺎﹰ ﻣﺎ ﲟﻮﺿﻮﻉ ﺍﻟﺴﺆﺍﻝ ﻻﻧﻪ ﺿﺮﻭﺭﻱ ﻟﻠﺸﺨﺺ ﺍﻟﺬﻱ ﻳﻘﻮﻡ ﺑﺎﺳﺘﻘﺒﺎﻝ‬
‫ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﳌﺮﺳﻠﺔ ﻣﻦ ﺧﻼﻝ ﺍﻟﻨﻤﻮﺫﺝ‪ ،‬ﻭﺑﺎﻟﺘﺎﱄ ﻣﻦ ﺍﻷﻓﻀﻞ ﺃﻥ ﻳﻮﺟﺪ ﻋﻨﻮﺍﻥ ﻣﻌﺒ‪‬ﺮ ﻟﻠﺒﻴﺎﻧﺎﺕ ﺑﻐﺮﺽ ﺍﻟﺘﻤﻴﻴﺰ‪.‬‬
‫ﻭﲟﺎ ﺃﻧﻨﺎ ﻫﻨﺎ ﻧﺘﺤﺪﺙ ﻋﻦ ﺍﳌﺘﺼﻔﺤﺎﺕ ﻓﻠﻴﻜﻦ ﻫﺬﺍ ﺍﻻﺳﻢ ﻫﻮ ‪browser‬‬
‫>‪<FORM‬‬
‫>‪<INPUT TYPE="radio" NAME="browser"> <BR‬‬
‫>‪<INPUT TYPE="radio" NAME="browser"> <BR‬‬
‫>‪<INPUT TYPE="radio" NAME="browser"> <BR‬‬
‫>‪<INPUT TYPE="radio" NAME="browser"> <BR‬‬
‫>‪</FORM‬‬
‫ﺍﳋﻄﻮﺓ ﺍﻟﺜﺎﻟﺜﺔ ‪- :‬‬
‫ﺗﻌﺮﻳﻒ ﻛﻞ ﺣﻘﻞ ﺑﺎﺳﻢ ﺻﺮﻳﺢ ﻳﻮﺿﺢ ﳏﺘﻮﺍﻩ‪.‬‬
‫>‪<FORM‬‬
‫‪<INPUT TYPE="radio" NAME="browser" > Internet Explorer‬‬
‫>‪5.0 <BR‬‬
‫‪<INPUT TYPE="radio" NAME="browser" > Internet Explorer‬‬
‫>‪6.0 <BR‬‬
‫‪<INPUT TYPE="radio" NAME="browser" > Internet Explorer‬‬

‫‪62‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫>‪7.0 <BR‬‬
‫‪<INPUT TYPE="radio" NAME="browser" > Internet Explorer‬‬
‫>‪8.0 <BR‬‬
‫>‪</FORM‬‬
‫ﺍﻟﻨﻮﻉ ﺍﻟﺜﺎﱐ ﻣﺮﺑﻊ ﺍﻻﺧﺘﻴﺎﺭ ‪CHECKBOX‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻻﺧﺘﻴﺎﺭ ﺃﻛﺜﺮ ﻣﻦ ﺣﻘﻞ ﰲ ﻧﻔﺲ ﺍﻟﻮﻗﺖ! ﻭﻫﺬﺍ ﻫﻮ ﺍﻟﻔﺮﻕ ﺍﻷﻭﻝ ﺑﲔ ‪CHECKBOX‬‬
‫ﻭ ‪ RADIO‬ﻓﻔﻲ ‪ RADIO‬ﳝﻜﻦ ﺍﺧﺘﻴﺎﺭ ﺣﻘﻞ ﻭﺍﺣﺪ ﻓﻘﻂ ﻟﻴﺲ ﺃﻛﺜﺮ‪.‬‬
‫ﺧﻄﻮﺍﺕ ﺍﻧﺸﺎﺀ ﻣﺮﺑﻊ ﺍﻻﺧﺘﻴﺎﺭ‬
‫]”‪[TYPE="checkbox‬‬ ‫•ﻧﺴﻨﺪ ﺍﻟﻘﻴﻤﺔ ‪ checkbox‬ﻟﻠﺨﺎﺻﻴﺔ ‪TYPE‬‬
‫•ﻧﻌﻄﻲ ﻛﻞ ﺣﻘﻞ ﰲ ﺍﻟﻘﺎﺋﻤﺔ ﺇﲰﺎﹰ ﳑﻴﺰﺍﹰ ﰲ ﺍﳋﺎﺻﻴﺔ ‪ NAME‬ﳜﺘﻠﻒ ﻋﻦ ﺑﺎﻗﻲ ﺍﳊﻘﻮﻝ‪.‬‬
‫•ﻛﺘﺎﺑﺔ ﺍﻷﲰﺎﺀ ﺍﻟﺘﻌﺮﻳﻔﻴﺔ ﻟﻜﻞ ﺣﻘﻞ‪.‬‬
‫ﻣﺜﺎﻝ ‪-:‬‬
‫ﺍﻧﺸﺊ ﻣﺮﺑﻌﺎﺕ ﺍﻻﺧﺘﻴﺎﺭ ﺍﻟﺘﺎﻟﻴﺔ‬
‫ﻣﻦ ﳑﻴﺰﺍﺕ ﺍﳊﺎﺳﺐ‬
‫ﺍﻟﺴﺮﻋﺔ‬
‫ﺍﻟﻐﺒﺎﺀ‬
‫ﻋﺪﻡ ﺍﳌﺮﻭﻧﺔ‬
‫ﺍﻟﺪﻗﺔ‬
‫>‪<FORM‬‬
‫> "‪<INPUT TYPE="checkbox" NAME=“speed‬‬
‫ﺍﻟﺴﺮﻋﺔ‬
‫>‪<BR‬‬
‫> " ‪<INPUT TYPE="checkbox" NAME="thickness‬‬
‫ﺍﻟﻐﺒﺎﺀ‬
‫>‪<BR‬‬
‫> " ‪<INPUT TYPE="checkbox" NAME=“non flexibility‬‬
‫ﻋﺪﻡ ﺍﳌﺮﻭﻧﺔ‬

‫‪63‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫>‪<BR‬‬
‫> " ‪<INPUT TYPE="checkbox" NAME="accuracy‬‬
‫ﺍﻟﺪﻗﺔ‬
‫>‪<BR‬‬
‫>‪</FORM‬‬

‫ﺃﻭﺟﻪ ﺍﻻﺧﺘﻼﻑ ﺑﲔ ﺯﺭ ﺍﳋﻴﺎﺭ ‪ Radio‬ﻭﻣﺮﺑﻊ ﺍﻻﺧﺘﻴﺎﺭ ‪CheckBox‬‬

‫•ﰲ ‪ RADIO‬ﻧﺴﺘﻄﻴﻊ ﺍﺧﺘﻴﺎﺭ ﺣﻘﻞ ﻭﺍﺣﺪ ﻓﻘﻂ ﺃﻣﺎ ﰲ ‪ CHECKBOX‬ﻓﻨﺨﺘﺎﺭ ﺃﻛﺜﺮ ﻣﻦ ﺣﻘﻞ‪.‬‬
‫•ﰲ ‪ RADIO‬ﺗﻜﻮﻥ ﺃﲰﺎﺀ ﺍﳊﻘﻮﻝ ﻣﻮﺣﺪﺓ ﻭﺍﻟﻘﻴﻢ ﳐﺘﻠﻔﺔ‪ ،‬ﺃﻣﺎ ﰲ ‪ CHECKBOX‬ﻓﺘﻜﻮﻥ‬
‫ﺍﻷﲰﺎﺀ ﳐﺘﻠﻔﺔ ﻭﺍﻟﻘﻴﻢ ﻣﻮﺣﺪﺓ‬
‫ﺍﻟﻨﻮﻉ ﺍﻟﺜﺎﻟﺚ ﻗﻮﺍﺋﻢ ﺍﻻﺧﺘﻴﺎﺭ‬

‫ﻫﺬﺍ ﺍﻟﻨﻮﻉ ﻳﻘﻮﺩﻧﺎ ﺇﱃ ﻭﺳﻮﻡ ﺟﺪﻳﺪﺓ ﻣﻦ ﻭﺳﻮﻡ ﺍﻟﺘﻌﺮﻳﻒ ﻭﺍﻟﱵ ﺗﺴﺘﺨﺪﻡ ﺑﺪﻻﹰ ﻣﻦ >‪ <INPUT‬ﻭﻫﻲ‬
‫>‪<SELECT‬‬
‫>‪<OPTION‬‬
‫>‪<OPTION‬‬
‫>‪<OPTION‬‬
‫‪.....‬‬
‫‪.....‬‬
‫>‪</SELECT‬‬
‫ﲝﻴﺚ ﺃﻥ >‪ <SELECT/> ... <SELECT‬ﲢﺪﺩﺍﻥ ﺑﺪﺍﻳﺔ ﻭ‪‬ﺎﻳﺔ ﺍﻟﻘﺎﺋﻤﺔ‪ ،‬ﻭﺍﻟﻮﺳﻢ‬
‫>‪ <OPTION‬ﺍﻟﺬﻱ ﻳﻮﺿﻊ ﺩﺍﺋﻤﺎ ﺑﻴﻨﻬﻤﺎ ﻳﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﻛﻞ ﻋﻨﺼﺮ ﻣﻦ ﻋﻨﺎﺻﺮ ﺍﻟﻘﺎﺋﻤﺔ‪.‬‬
‫ﻫﻨﺎﻙ ﺧﺼﺎﺋﺺ ﻣﺸﺘﺮﻛﺔ ﻋﺮﻓﻨﺎﻫﺎ ﰲ ﺍﻷﺷﻜﺎﻝ ﺍﻟﺴﺎﺑﻘﺔ ﺳﻴﺘﻢ ﺍﺳﺘﺨﺪﺍﻣﻬﺎ ﻫﻨﺎ ﺃﻳﻀﺎﹰ ﻛﻤﺎ ﻳﻮﺟﺪ ﺧﺼﺎﺋﺺ‬
‫ﺟﺪﻳﺪﺓ ﺗﺘﻌﻠﻖ ﻓﻘﻂ ‪‬ﺬﺍ ﺍﻟﺸﻜﻞ ﻣﻦ ﺣﻘﻮﻝ ﺍﻟﺒﻴﺎﻧﺎﺕ‪ .‬ﻓﺒﺎﻟﻨﺴﺒﺔ ﻟﹻ >‪ <SELECT‬ﻳﻮﺟﺪ ﺍﳋﺎﺻﻴﺔ‬
‫‪ NAME‬ﻭﻫﻲ ﲢﺪﺩ ﺍﺳﻢ ﺍﻟﻘﺎﺋﻤﺔ‪ .‬ﻛﻤﺎ ﺗﻮﺟﺪ ﺍﳋﺎﺻﻴﺔ ‪ SIZE‬ﺍﻟﱵ ﲢﺪﺩ ﺍﺭﺗﻔﺎﻉ ﺍﻟﻘﺎﺋﻤﺔ‪ ،‬ﻭﺑﺎﻟﺘﺎﱄ‬
‫ﻋﺪﺩ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﻟﻈﺎﻫﺮﺓ ﻓﻴﻬﺎ‪ .‬ﻭﻫﻲ ﺗﺄﺧﺬ ﺃﻱ ﻗﻴﻤﺔ ﻋﺪﺩﻳﺔ ﺻﺤﻴﺤﺔ‪.‬‬

‫‪64‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 HTML ‫ ﻟﻐﺔ‬-‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‬

-: ‫ﻣﺜﺎﻝ‬
‫ﺍﻧﺸﺊ ﻗﺎﺋﻤﺔ ﺍﻻﺧﺘﻴﺎﺭ ﺍﻟﺘﺎﻟﻴﺔ‬
Computer Department
Mathematics Department
Science Department
English Department

<FORM>
<SELECT NAME="browser" SIZE="2">
<OPTION> Computer Department
<OPTION> Mathematics Department
<OPTION> Science Department
<OPTION> English Department
</SELECT>
</FORM>

‫ﺍﻳﻀﺎﹰ ﻫﻨﺎﻙ ﺇﻣﻜﺎﻧﻴﺔ ﳉﻌﻞ ﺍﺧﺘﻴﺎﺭ ﺍﻟﺒﻴﺎﻧﺎﺕ ﻣﻦ ﻫﺬﻩ ﺍﻟﻘﺎﺋﻤﺔ ﻣﺘﻌﺪﺩﺍﹰ ﻭﻟﻴﺲ ﻓﻘﻂ ﻗﻴﻤﺔ ﻭﺍﺣﺪﺓ ﺑﺈﺿﺎﻓﺔ‬
‫ ﺇﺫﻥ ﺍﻟﻘﻴﻤﺔ ﺍﳌﻜﺘﻮﺑﺔ ﻣﻊ‬،‫ ﻟﻨﻘﻢ ﺍﻵﻥ ﺑﻌﺮﺽ ﲨﻴﻊ ﺍﻟﻘﻴﻢ )ﻟﺪﻳﻨﺎ ﺃﺭﺑﻌﺔ ﻗﻴﻢ‬.MULTIPLE ‫ﺍﳋﺎﺻﻴﺔ‬
.‫ﺎﻝ ﺃﻣﺎﻡ ﺍﻟﺰﺍﺋﺮ ﻻﺧﺘﻴﺎﺭ ﺃﻛﺜﺮ ﻣﻦ ﻗﻴﻤﺔ ﻭﺍﺣﺪﺓ ﰲ ﺍﻟﻘﺎﺋﻤﺔ‬‫ ﻭﻣﻦ ﰒ ﻟﻨﺘﺢ ﺍ‬،(4 ‫ ﳚﺐ ﺃﻥ ﺗﻜﻮﻥ‬SIZE
<FORM>
<SELECT NAME="browser" SIZE="4" MULTIPLE>
<OPTION> Computer Department
<OPTION> Mathematics Department
<OPTION> Science Department
<OPTION> English Department
</SELECT>
</FORM>

65 ‫ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬.‫ﺇﻋﺪﺍﺩ ﺃ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫ﻣﻦ ﺃﺷﻜﺎﻝ ﺣﻘﻮﻝ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﻳﻀﺎﹰ ﻳﺪﻋﻰ ‪TEXTAREA‬‬

‫ﻭﻫﻮ ﺍﳌﺴﺘﺨﺪﻡ ﻋﺎﺩﺓ ﻟﻜﺘﺎﺑﺔ ﺍﻟﺘﻌﻠﻴﻘﺎﺕ ﺍﳊﺮﺓ ﰲ ﺍﻟﻨﻤﻮﺫﺝ ﻭﻳﺘﻢ ﺇﺩﺭﺍﺟﻪ ﺑﻜﺘﺎﺑﺔ ﺍﻟﻮﺳﻮﻡ‬
‫>‪<TEXTAREA> ... </TEXTAREA‬‬
‫ﻣﻦ ﺧﺼﺎﺋﺼﻪ‬
‫ﺍﳋﺎﺻﻴﺔ ‪ NAME‬ﻹﻋﻄﺎﺀﻩ ﺍﺳﻢ ﺍﻟﺘﻌﺮﻳﻒ‪.‬‬
‫ﺣﻴﺚ ﺃﻱ ﻧﺺ ﻳﻜﺘﺐ ﺑﲔ ﺍﻟﻮﲰﲔ ﺳﻴﺘﻢ ﻋﺮﺿﻪ ﺩﺍﺧﻞ ﺍﳊﻘﻞ ﺑﺼﻮﺭﺓ ﺗﻠﻘﺎﺋﻴﺔ‬

‫>"‪<TEXTAREA NAME="comments‬‬
‫)‪Hello, please write your comments here :-‬‬
‫>‪</TEXTAREA‬‬
‫‪Hello, please w rite your comments here :‬‬

‫ﻛﻤﺎ ﺗﻮﺟﺪ ﺧﺼﺎﺋﺺ ﻟﺘﺤﺪﻳﺪ ﻣﺴﺎﺣﺔ ﻫﺬﺍ ﺍﳊﻘﻞ ﻋﺮﺿﺎﹰ ﻭﺍﺭﺗﻔﺎﻋﺎﹰ‪ ،‬ﻭﻫﻲ ‪ COLS‬ﺍﻟﱵ ﲢﺪﺩ ﺍﻟﻌﺮﺽ ﻭ‬
‫‪ ROWS‬ﺍﻟﱵ ﲢﺪﺩ ﺍﻹﺭﺗﻔﺎﻉ‬
‫>"‪<TEXTAREA NAME="comments" COLS="30" ROWS="6‬‬
‫>‪</TEXTAREA‬‬

‫ﺃﻣﺎ ﺍﳋﺎﺻﻴﺔ ﺍﻷﺧﲑﺓ ﻫﻨﺎ ﻓﻬﻲ ‪ WRAP‬ﺍﻟﱵ ﲢﺪﺩ ﻃﺮﻳﻘﺔ ﺇﻟﺘﻔﺎﻑ ﺍﻟﻨﺺ ﺍﳌﻜﺘﻮﺏ ﺩﺍﺧﻞ ﺍﳊﻘﻞ ﻭﻫﻨﺎﻙ‬
‫ﺛﻼﺛﺔ ﻗﻴﻢ ﺗﺄﺧﺬﻫﺎ ﻭﻫﻲ ﻋﻠﻰ ﺍﻟﻨﺤﻮ ﺍﻟﺘﺎﱄ‪:‬‬
‫• ‪ : virtual‬ﺍﻟﱵ ﺗﻌﲏ ﺃﻥ ﺍﻟﻨﺺ ﺳﻴﻠﺘﻒ ﻋﻠﻰ ﻋﺪﺓ ﺃﺳﻄﺮ ﻋﻨﺪ ﻛﺘﺎﺑﺘﻪ ﻭﻟﻜﻨﻪ ﺳﻴﺼﻠﻚ ﻋﻨﺪ ﺇﺭﺳﺎﻟﻪ ﻋﻠﻰ‬
‫ﺷﻜﻞ ﺳﻄﺮ ﻭﺍﺣﺪ ﻣﺘﺘﺎﺑﻊ )ﺣﺎﻭﻝ ﺍﻟﻜﺘﺎﺑﺔ ﺩﺍﺧﻞ ﺍﳊﻘﻮﻝ ﻭﺃﻧﻈﺮ ﻛﻴﻔﻴﺔ ﺗﺄﺛﲑ ﻫﺬﻩ ﺍﳋﺎﺻﻴﺔ ﻋﻠﻰ ﻛﻞ ﻣﻨﻬﺎ(‬

‫‪66‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬

 ‫ﻣﺒﺎﺩﺉ ﺑﺮﳎﺔ ﺍﻻﻧﺘﺮﻧﺖ‪ -‬ﻟﻐﺔ ‪HTML‬‬

‫"‪<TEXTAREA NAME="comments" COLS="30" ROWS="6‬‬

‫>"‪WRAP="virtual‬‬
‫>‪</TEXTAREA‬‬
‫• ‪ : physical‬ﺗﻌﲏ ﺃﻥ ﺍﻟﻨﺺ ﺳﻴﻠﺘﻒ ﻋﻠﻰ ﻋﺪﺓ ﺃﺳﻄﺮ ﻭﺳﻴﺼﻠﻚ ﺃﻳﻀﺎﹰ ﻋﻠﻰ ﻫﺬﺍ ﺍﻟﻨﺤﻮ ﻋﻨﺪ ﺇﺭﺳﺎﻟﻪ‬
‫"‪<TEXTAREA NAME="comments" COLS="30" ROWS="6‬‬
‫>"‪WRAP="physical‬‬
‫>‪</TEXTAREA‬‬
‫‪ : off‬ﺗﻌﲏ ﺃﻥ ﺍﻟﻨﺺ ﻟﻦ ﻳﻠﺘﻒ ﺑﺼﻮﺭﺓ ﺗﻠﻘﺎﺋﻴﺔ ﻋﻠﻰ ﻋﺪﺓ ﺃﺳﻄﺮ ﻟﻜﻨﻪ ﻋﻠﻰ ﺃﻳﺔ ﺣﺎﻝ ﺳﻴﺼﻠﻚ ﺑﻨﻔﺲ‬ ‫•‬
‫ﺍﻟﺸﻜﻞ ﺍﻟﺬﻱ ﰎ ﺇﺩﺧﺎﻟﻪ ﺑﻪ‬
‫"‪<TEXTAREA NAME="comments" COLS="30" ROWS="6‬‬
‫>"‪WRAP="off‬‬
‫>‪</TEXTAREA‬‬
‫ﺍﳊﻘﻞ ‪Submit‬‬
‫ﻳﺴﺘﺨﺪﻡ ﻹﺭﺳﺎﻝ ﺍﻟﺒﻴﺎﻧﺎﺕ ﺍﻟﱵ ﰎ ﻣﻠﺆﻫﺎ ﰲ ﺍﻟﻨﻤﻮﺫﺝ‪.‬‬

‫‪<INPUT TYPE="submit" VALUE="Press here to send the‬‬

‫>"‪form‬‬
‫ﺍﳊﻘﻞ ‪Reset‬‬
‫ﻳﺴﺘﺨﺪﻡ ﳌﺴﺢ ﻣﺎ ﻛﺘﺐ ﰲ ﺍﻟﻨﻤﻮﺫﺝ ﻭﺇﻟﻐﺎﺀ ﺍﻷﻣﺮ ﺑﻨﻔﺲ ﻃﺮﻳﻘﺔ ﺍﻟﺘﻌﺮﻳﻒ ﻭﺍﳋﺼﺎﺋﺺ ﺍﳌﺴﺘﺨﺪﻣﺔ ﻣﻊ‬
‫‪.submit‬‬
‫>"‪<INPUT TYPE="reset" VALUE="Forget about it‬‬

‫ﺍﳊﻘﻞ ‪button‬‬
‫ﻳﻘﻮﻡ ﺑﺈﻧﺸﺎﺀ ﺯﺭ ﺿﻤﻦ ﺍﻟﻨﻤﻮﺫﺝ‪ ،‬ﻭﻫﻮ ﻣﺮﺗﺒﻂ ﺑﺎﻟﻨﻤﺎﺫﺝ ﺍﻟﱵ ﲢﺘﻮﻱ ﻋﻠﻰ ﻧﺼﻮﺹ ﺑﺮﳎﻴﺔ )ﺃﻭ ﺑﺮﺍﻣﺞ‬
‫ﻣﻜﺘﻤﻠﺔ( ﻣﻦ ﻟﻐﺎﺕ ﻣﺘﻘﺪﻣﺔ ﻣﺜﻞ ‪ JavaScript‬ﻛﻮﻧﻪ ﻳﺴﺘﺨﺪﻡ ﻟﺘﺸﻐﻴﻞ ﻫﺬﻩ ﺍﻟﱪﺍﻣﺞ ﻭﺇﻃﻼﻗﻬﺎ‪ .‬ﻭﻃﺒﻌﺎﹰ‬
‫ﻫﻨﺎﻙ ﻃﺮﻕ ﻣﻌﻴﻨﺔ ﻟﺮﺑﻄﻬﺎ ﻣﻊ ﺍﻟﱪﺍﻣﺞ‪ .‬ﻟﻜﻦ ﻣﺒﺪﺋﻴﺎﹰ ﺃﻗﻮﻝ ﺇﻥ ﻃﺮﻳﻘﺔ ﺍﻹﺩﺭﺍﺝ ﻭﺍﻟﺘﻌﺮﻳﻒ ﻫﻲ ﺫﺍ‪‬ﺎ‬
‫ﺍﳌﺴﺘﺨﺪﻣﺔ ﻣﻊ ‪.reset, submit‬‬
‫>"‪<INPUT TYPE="button" VALUE="This is a sample button‬‬

‫‪67‬‬ ‫ﺇﻋﺪﺍﺩ ﺃ‪.‬ﺣﺬﻳﻔﺔ ﻋﺒﺪ ﺍﻟﺮﲪﻦ‬