38c18558860b1a37f228833a4e1ee0a3.ppt
- Количество слайдов: 69
کﺎﺭگﺎﻩ آﻤﻮﺯﺷی ﺗﻮﺳﻌﻪ ﻭﺏ ﺑﺨﺶ ﺍﻭﻝ - HTML ﻧﺴﺨﻪ 1 ﺍﺭﺍﺋﻪ: ﻋﺒﺎﺱ ﻧﺎﺩﺭی ﺍﻧﺠﻤﻦ ﻋﻠﻤی ﺩﺍﻧﺸﺠﻮیی ﻣﻬﻨﺪﺳی کﺎﻣپیﻮﺗﺮ ﺩﺍﻧﺸگﺎﻩ ﺷﻬیﺪ ﺑﻬﺸﺘی
ﻋﻨﺎﻭیﻦ ﻣﻄﺮﺣی • ﻭﺏ چیﺴﺖ؟ – – – 2 Web پﺮﻭﺗکﻞ HTTP کﺎﻭﺷگﺮ ﻭﺏ پﺮﻭﺗکﻞ HTTPS پﺮﻭﺗکﻞ FTP پﺮﻭﺗکﻞ ﻫﺎی ﺩیگﺮ ﻭﺏ • HTML چیﺴﺖ؟
ﻭﺏ چیﺴﺖ؟
ﻭﺏ چیﺴﺖ؟ • • • • ﺗﻮﺭ گﺴﺘﺮﺩﻩ ﺟﻬﺎﻧی ) (World Wide Web ﻣﺠﻤﻮﻋﻪ ﺍﺑﺮﻣﺘﻦ ﻫﺎی ﻣﺘﺼﻞ ﺑﻪ ﻫﻢ ﺍﺯ ﻃﺮیﻖ ﺍیﻨﺘﺮﻧﺖ ﺍﺳﺖ. ﺍﺳﻨﺎﺩ ﻭﺏ )ﺍﺑﺮﻣﺘﻦ( ﺗﻮﺳﻂ کﺎﻭﺷگﺮ ﻭﺏ ) (Web Browser ﻗﺎﺑﻞ ﻣﻄﺎﻟﻌﻪ ﻫﺴﺘﻨﺪ. ﺍﺳﺘﺎﻧﺪﺍﺭﺩﺗﺮیﻦ ﺳﻨﺪ ﻭﺏ، HTML یﺎ ) Hyper. Text Markup Language ﺯﺑﺎﻥ ﻣﺸﺨﺺ ﺍﺑﺮﻣﺘﻨی( ﺗﻘﺮیﺒﺎ ﺗﻤﺎﻡ ﻭﺏ ﺭﺍ ﺗﺸکیﻞ ﺩﺍﺩﻩ ﺍﺳﺖ. ﻭﺏ ﺩﺭ ﺳﺎﻝ 0891 ﺍﺑﺪﺍﻉ ﺷﺪ. ﺍﺳﻨﺎﺩ ﻭﺏ ﺍﺯ ﻃﺮیﻖ ﺍﺑﺮﺍﺗﺼﺎﻝ ) (Hyperlink ﺑﻪ یکﺪیگﺮ ﻣﺘﺼﻞ ﻫﺴﺘﻨﺪ. ﺍﺳﺘﺎﻧﺪﺍﺭﺩﻫﺎی ﻭﺏ ﺍﺯ ﻃﺮﻑ ) World Wide Web Consortium (W 3 C ﻭ Internet ) Engineering Task Force (IETF ﻭﺿﻊ ﻣی ﺷﻮﻧﺪ. ﻣﺎیکﺮﻭﺳﺎﻓﺖ ﺩﺭ ﻋﺮﺻﻪ ﻭﺏ ﺍﺯ ﺍﺳﺘﺎﻧﺪﺍﺭﺩﻫﺎ پیﺮﻭی ﻧﻤی کﻨﺪ ﻭ ﺍﺳﺘﺎﻧﺪﺍﺭﺩﻫﺎی ﺧﻮﺩ ﺭﺍ ﻭﺿﻊ ﻧﻤﻮﺩﻩ ﺍﺳﺖ.
2 Web • ﺧﺎﺻیﺖ ﺍﺻﻠی ﻭﺏ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺑﻮﺩﻥ ﺷکﻞ ﻇﺎﻫﺮی ﻭ ﺳﺎﺩگی ﺩﺳﺘﺮﺳی ﺑﻪ آﻦ ﺑﻮﺩ. • ﺑﻪ ﺩﻟیﻞ کﻤﺒﻮﺩﻫﺎ ﻭ ﻋﺪﻡ پﻮیﺎیی ﻭﺏ، ﻭﺏ 2 ﺩﺭ ﺳﺎﻝ 4002 ﺷکﻞ گﺮﻓﺖ. ”ﻭﺏ 2 ﺍﻧﻘﻼﺑی ﺗﺠﺎﺭی ﺩﺭﺻﻨﻌﺖ کﺎﻣپیﻮﺗﺮ ﺍﺳﺖ کﻪ ﺑﻪ ﻭﺳیﻠﻪ ﺍﺗکﺎ ﺑﻪ ﺍیﻨﺘﺮﻧﺖ ﺑﻪ ﻋﻨﻮﺍﻥ ﺳکﻮی ﺗﺠﺎﺭﺕ ﺷکﻞ گﺮﻓﺘﻪ ﺍﺳﺖ. “ • • ﺩﺭ ﻭﺍﻗﻊ ﺗکﻨﻮﻟﻮژی ﻭﺏ 2 ﺗﻔﺎﻭﺗی ﺑﺎ ﻭﺏ ﻧﺪﺍﺭﺩ، ﺑﻠکﻪ ﻭﺏ 2 ﺑﺪیﻦ ﻣﻌﻨﺎﺳﺖ کﻪ ﻧﺮﻡ ﺍﻓﺰﺍﺭﻫﺎ ﻭ کﺎﺭﺑﺮﺩﻫﺎی ﻣﺨﺘﻠﻒ ﻫﻤگی ﺑﺮ ﺭﻭی ﻭﺏ ﺍﺗکﺎ کﻨﻨﺪ ﻭ ﺑﻪ ﻭﺳیﻠﻪ ﻭﺏ ﺗﻮﺳﻌﻪ یﺎﺑﻨﺪ. ﺑﺎ ﺗﻮﺳﻌﻪ ﻭﺏ 2 ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗکﻨﻮﻟﻮژی ﻫﺎی ﺧﺎﺹ ﺑﺎ ﻫﺪﻑ پﻮیﺎ ﺳﺎﺯی ﺻﻔﺤﺎﺕ ﺭﻭﻧﻖ گﺮﻓﺖ ﻭ ﺩﺭیچﻪ ﺟﺪیﺪی ﺑﻪ ﺭﻭی ﻭﺏ ﺑﺎﺯ ﺷﺪ. ﺩﺭ ﻭﺏ 2، ﺷﺮکﺘﻬﺎ ﺧﺪﻣﺎﺕ ﻭ ﻣﺤﺼﻮﻻﺕ ﺧﻮﺩ ﺭﺍ ﺑﺮ ﺭﻭی ﻭﺏ ﻭ ﺑﺮﺍی ﻭﺏ ﺍﺭﺍﺋﻪ ﻣی ﺩﻫﻨﺪ. ﻭﺏ 2 ﺗﺎ ﺟﺎیی پیﺶ ﺭﻓﺖ کﻪ ﺳیﺴﺘﻢ ﻋﺎﻣﻞ ﻫﺎی ﺗﺤﺖ ﻭﺏ پﺪیﺪ آﻤﺪﻧﺪ.
پﺮﻭﺗکﻞ HTTP • • • پﺮﻭﺗکﻞ ﺍﺻﻠی ﻭﺏ پﺮﻭﺗکﻞ HTTP یﺎ Hyper. Text Transfer Protocol ﺍﺳﺖ. HTTP یک پﺮﻭﺗکﻞ ﺗﻘﺎﺿﺎ-پﺎﺳﺨی ) (Request-Responce ﺍﺳﺖ. ﺩﺭ ﺍیﻦ پﺮﻭﺗکﻞ کﻼیﻨﺖ، یک ﺩﺭﺧﻮﺍﺳﺖ ﺑﻪ ﺳﺮﻭﺭ ﻓﺮﺳﺘﺎﺩﻩ ﻭ ﺳﺮﻭﺭ ﺩﺭﺧﻮﺍﺳﺖ ﻭی ﺭﺍ پﺎﺳﺦ ﻣی گﻮیﺪ. پﺲ ﺍﺯ ﺍیﻦ ﺗﺮﺍکﻨﺶ، ﺍﺗﺼﺎﻝ ﻣﺎﺑیﻦ ﻃﺮﻓیﻦ ﻣﻨﻘﻄﻊ ﻣی گﺮﺩﺩ. HTTP یک پﺮﻭﺗکﻞ ﺑﺪﻭﻥ ﻭﺿﻌیﺖ ) (Stateless ﺍﺳﺖ، ﺑﺪیﻦ ﻣﻌﻨی کﻪ ﺳﺮﻭﺭ ﺍﺯ ﻭﺿﻌیﺖ ﻓﻌﻠی کﻼیﻨﺖ ﺧﺒﺮی ﻧﺪﺍﺭﺩ ﻭ ﺗﻨﻬﺎ ﺗﻘﺎﺿﺎی ﻭی ﺭﺍ ﺩﺭیﺎﻓﺖ ﻣی کﻨﺪ. ﺗﻘﺎﺿﺎ ﺍﻧﻮﺍﻉ ﻣﺨﺘﻠﻔی ﺩﺍﺭﺍﺳﺖ. ﻣﻌﻤﻮﻝ ﺗﺮیﻦ ﺍﻧﻮﻉ ﺗﻘﺎﺿﺎ، POST ﻭ GET ﺍﺳﺖ. پﺎﺳﺦ ﺳﺮﻭﺭ ﺑﻪ ﺗﻘﺎﺿﺎ ﻣی ﺗﻮﺍﻧﺪ ﺍﻃﻼﻋﺎﺕ، ،HTML ﻓﺎیﻞ ﻫﺎی ﺗکﻤیﻠی )ﻣﺎﻧﻨﺪ ﺗﺼﺎﻭیﺮ( ﻭ یﺎ ﺍﻧﻮﺍﻉ ﺩیگﺮ ﺩﺍﺩﻩ ﺑﺎﺷﺪ. ﺩﺭ ﺻﻮﺭﺗی کﻪ پﺎﺳﺦ ﺳﺮﻭﺭ HTML ﺑﺎﺷﺪ، یک ﺻﻔﺤﻪ ﻭﺏ ﺑﺮﺍی کﺎﺭﺑﺮ ﻓﺮﺳﺘﺎﺩﻩ ﻣی ﺷﻮﺩ.
کﺎﻭﺷگﺮ ﻭﺏ • • • کﺎﻭﺷگﺮ ﻭﺏ )یﺎ (Web Browser ﻧﺮﻡ ﺍﻓﺰﺍﺭیﺴﺖ کﻪ ﻣی ﺗﻮﺍﻧﺪ ﺗﺤﺖ پﺮﻭﺗکﻞ ﻫﺎی ﻭﺏ ﺑﺎ ﺍیﻨﺘﺮﻧﺖ کﺎﺭ کﻨﺪ. کﺎﻭﺷگﺮ ﻭﺏ ﺧﻮﺍﺳﺘﻪ کﺎﺭﺑﺮ ﺭﺍ ﺩﺭ ﻗﺎﻟﺐ ﺩﺭﺧﻮﺍﺳﺘﻬﺎی HTTP ﺑﺮﺍی ﺳﺮﻭﺭ ﺍﺭﺳﺎﻝ ﻣی کﻨﺪ ﻭ ﻧﺘﺎیﺞ ﺳﺮﻭﺭ ﺭﺍ ﻧﻤﺎیﺶ ﻣی ﺩﻫﺪ. کﺎﻭﺷگﺮ ﻭﺏ ﻋﻼﻭﻩ ﺑﺮ ﻗﺎﺑﻠیﺖ ﻗﺎﻟﺐ ﺑﻨﺪی ﻭ ﻧﻤﺎیﺶ ﺍﺳﻨﺎﺩ ،HTML ﺗﻮﺍﻧﺎیی ﺩﺭیﺎﻓﺖ ﺗﻤﺎﻡ ﻓﺎیﻠﻬﺎی ﺗکﻤیﻠی کﻪ ﺩﺭ ﺳﻨﺪ HTML ﺍﺳﺘﻔﺎﺩﻩ ﺷﺪﻩ ﺍﻧﺪ ﺭﺍ ﺑﻪ ﺻﻮﺭﺕ ﺧﻮﺩکﺎﺭ ﺩﺍﺭﺍﺳﺖ. کﺎﻭﺷگﺮﻫﺎی ﺍﻣﺮﻭﺯﻩ ﻭﺏ ﻋﻼﻭﻩ ﺑﺮ ﺗﻮﺍﻧﺎیی ﻫﺎی ﺍﺻﻠی ﺑﺎﻻ، ﻗﺎﺑﻠیﺖ ﻫﺎی ﺑیﺸﻤﺎﺭ ﺩیگﺮی ﻧیﺰ ﺩﺍﺭﺍ ﻫﺴﺘﻨﺪ. کﺎﻭﺷگﺮﻫﺎی ﻣﻌﺮﻭﻑ ﺭﺍ ﻣی ﺗﻮﺍﻥ Internet Explorer ﻣﺎیکﺮﻭﺳﺎﻓﺖ کﻪ ﺍﺯ ﻧیﻤی ﺍﺯ ﺍﺳﺘﺎﻧﺪﺍﺭﺩﻫﺎی ﻭﺏ ﺗﺒﻌیﺖ ﻧﻤی کﻨﺪ، Firefox ﻣﻮﺯیﻼ کﻪ ﻗﺪﺭﺗﻤﻨﺪﺗﺮیﻦ کﺎﻭﺷگﺮ ﺣﺮﻓﻪ ﺍی ﺩﺍﻧﺴﺘﻪ ﻣی ﺷﻮﺩ ﻭ ﺍﺧیﺮﺍ Google Chrome کﻪ ﺑﺮﺍی ﺍﻫﺪﺍﻑ ﻭﺏ 2 ﻃﺮﺍﺣی ﺷﺪﻩ ﺍﺳﺖ، ﺩﺍﻧﺴﺖ.
پﺮﻭﺗکﻞ HTTPS • • پﺮﻭﺗکﻞ HTTP ﺑﻪ ﺻﻮﺭﺕ ﺗﻤﺎﻡ ﻣﺘﻦ ﻭ ﻣﺴﺘﻘیﻢ کﺎﺭ ﻣیکﻨﺪ. ﺍﺯ ﺍیﻦ ﺭﻭ ﺍﺣﺘیﺎﺟﺎﺕ ﺍﻣﻨیﺘی ﺭﺍ ﺑﺮآﻮﺭﺩﻩ ﻧﻤی ﺳﺎﺯﺩ. ﺑﺮﺍی ﻣﺜﺎﻝ ﺗﻌﺎﻣﻼﺕ ﺑﺎﻧکی کﻪ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ HTTP ﺍﻧﺠﺎﻡ ﺷﻮﻧﺪ، کﺎﻣﻼ ﻗﺎﺑﻞ ﺩیﺪ ﺑﺮﺍی ﻫﻤگﺎﻥ ﺧﻮﺍﻫﻨﺪ ﺑﻮﺩ. ﺑﺮﺍی ﺟﺒﺮﺍﻥ ﺍیﻦ کﻤﺒﻮﺩﻫﺎ، پﺮﻭﺗکﻞ HTTPS یﺎ Secure HTTP ﺍﺑﺪﺍﻉ ﺷﺪ. ﺍیﻦ پﺮﻭﺗکﻞ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ پﺮﻭﺗکﻞ ﺍﻣﻨیﺘی ( Secure Sockets Layer ) SSL ﻭ یﺎ ) TLS (Transport Layer Security ﺗﺒﺎﺩﻻﺕ ﺳﺮﻭﺭ ﻭ کﻼیﻨﺖ ﺭﺍ ﺍﻣﻦ ﻣی ﺳﺎﺯﺩ. ﺍﺯ ﺍیﻦ پﺮﻭﺗکﻞ ﺩﺭ ﺗﻤﺎﻣی ﻭﺏ ﻫﺎیی کﻪ ﺑﻪ ﺍﻣﻨیﺖ ﺍﺣﺘیﺎﺝ ﺍﺳﺖ ﺍﺳﺘﻔﺎﺩﻩ ﻣی گﺮﺩﺩ. ﺑﺮﺍی کﺎﺭکﺮﺩ ﺩﺭﺳﺖ ،HTTPS ﻻﺯﻡ ﺍﺳﺖ کﻪ ﺳﺮﻭﺭ ﺧﻮﺩ ﺭﺍ ﺑﺎ یک گﻮﺍﻫیﻨﺎﻣﻪ ﺩیﺠیﺘﺎﻝ ) (Digital Certificate ﺍﻫﺮﺍﺯ ﻫﻮیﺖ کﻨﺪ. ﺑﺮﺍی ﺗﻬیﻪ یک گﻮﺍﻫیﻨﺎﻣﻪ ﺩیﺠیﺘﺎﻝ، ﻻﺯﻡ ﺍﺳﺖ ﺗﺎ ﺑﻪ ﻣﺮﺍکﺰ ﺍﻋﻄﺎی گﻮﺍﻫی ﻫﺰیﻨﻪ ﺍی ﻣﻌﺎﺩﻝ 001 ﻫﺰﺍﺭ ﺗﻮﻣﺎﻥ ﺑﺮﺍی ﻫﺮ ﺳﺎﻝ پﺮﺩﺍﺧﺖ. ﺑﻪ ﺩﻟیﻞ ﻫﺰیﻨﻪ ﺑﺎﻻ ﻭ ﻗﺪیﻤی ﺑﻮﺩﻥ ﺍکﺜﺮ پیﺎﺩﻩ ﺳﺎﺯی ﻫﺎی ،HTTPS ﺍیﻦ پﺮﻭﺗکﻞ ﻧﻘﺎﻁ ﺍﻣﻨیﺘی ﺑﺴیﺎﺭی ﺭﺍ ﺑﺮﺍی ﻭﺏ ﺑﺎﺯ گﺬﺍﺭﺩﻩ ﺍﺳﺖ.
پﺮﻭﺗکﻞ FTP • FTP یﺎ File Transfer Protocol یک ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﻧﺴﺒﺘﺎ ﻗﺪیﻤیﺴﺖ کﻪ ﺑﺮﺍی ﺗﺒﺎﺩﻝ ﻓﺎیﻞ ﺩﺭ ﻭﺏ ﺍﺳﺘﻔﺎﺩﻩ ﻣی ﺷﻮﺩ. ﺍﻣﺮﻭﺯﻩ ﻓﺎیﻞ ﺭﺍ ﻣی ﺗﻮﺍﻥ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ HTTP ﺑﻪ ﺳﺎﺩگی FTP ﻣﻨﺘﻘﻞ کﺮﺩ. • ﺩﺭ ﻭﺍﻗﻊ FTP ﺭﺍﻩ ﺩیگﺮی ﺩﺳﺘﺮﺳی ﺑﻪ ﺩﺍﺩﻩ ﻫﺎی ﻣﻮﺟﻮﺩ ﺑﺮ ﺭﻭی ﺳﺮﻭﺭﻫﺎی ﻭﺏ ﺍﺳﺖ، کﻪ ﻣﻌﻤﻮﻻ ﺩﺭ ﺩﻭ کﺎﺭﺑﺮﺩ ﺍﺳﺘﻔﺎﺩﻩ ﻣی ﺷﻮﺩ: – ﺩﺭیﺎﻓﺖ ﻓﺎیﻠﻬﺎی ﺑﺴیﺎﺭ ﺑﺰﺭگ ﺍﺯ ﺍیﻨﺘﺮﻧﺖ – ﻗﺮﺍﺭﺩﺍﺩﻥ ﻓﺎیﻠﻬﺎ ﻭ ﺍﺳﻨﺎﺩ ﺑﺮ ﺭﻭی ﻭﺏ ﺗﻮﺳﻂ ﻧگﻬﺪﺍﺭﻧﺪﻩ یﺎ ﺳﺎﺯﻧﺪﻩ آﻦ • ﺍﺯ آﻨﺠﺎیی کﻪ FTP ﻓﻘﻂ ﺑﺮﺍی ﺗﻌﺎﻣﻞ ﻓﺎیﻞ ﺍیﺠﺎﺩ ﺷﺪﻩ ﺍﺳﺖ، ﻫیچ ﺳﻨﺪ ﺩﺍﺭﺍی ﻧﻤﻮﺩ ﻇﺎﻫﺮی )ﻣﺎﻧﻨﺪ HTML ﺑﺮﺍی (HTTP ﻧﺪﺍﺭﺩ.
پﺮﻭﺗکﻞ ﻫﺎی ﺩیگﺮ ﻭﺏ • پﺮﻭﺗکﻞ ﻫﺎی ﻓﺮﺍﻭﺍﻥ ﺩیگﺮی ﺩﺭ ﻭﺏ ﻭﺟﻮﺩ ﺩﺍﺭﻧﺪ کﻪ ﺗﻌﺪﺍﺩ ﺑﺴیﺎﺭ ﺯیﺎﺩی ﺍﺯ آﻨﻬﺎ ﺑﺮﺍی ﺗﺒﺎﺩﻝ ﺩﺍﺩﻩ ﻫﺎی ﺻﻮﺗی ﻭ ﺗﺼﻮیﺮی ﺑﻪ کﺎﺭ ﻣی ﺭﻭﻧﺪ. ﺑﺮﺍی کﺎﺭکﺮﺩ ﺑﺎ ﻫﺮ پﺮﻭﺗکﻞ، ﻧﺮﻡ ﺍﻓﺰﺍﺭ ﻣﺨﺼﻮﺹ آﻦ پﺮﻭﺗکﻞ ﺍﺣﺘیﺎﺝ ﺍﺳﺖ. • ﺑﺎ ﺭﻭی کﺎﺭ آﻤﺪﻥ ﻭﺏ 2 ﻭ ﺗکﻨﻮﻟﻮژی ﻫﺎی ﺟﺪیﺪ آﻦ، ﻧیﺎﺯ ﺑﻪ پﺮﻭﺗکﻞ ﻫﺎی ﺩیگﺮ ﺗﻘﺮیﺒﺎ ﻣﺮﺗﻔﻊ ﺷﺪﻩ ﺍﺳﺖ. ﺑﻪ ﻫﻤیﻦ ﺩﻟیﻞ آﻨﻬﺎ ﺗﻘﺮیﺒﺎ کﺎﺭﺑﺮﺩﻫﺎی ﻣﺘﻌﺪﺩ ﺧﻮﺩ ﺭﺍ ﺍﺯ ﺩﺳﺖ ﺩﺍﺩﻩ ﻭ ﻓﺮﺍﻣﻮﺵ ﺷﺪﻩ ﺍﻧﺪ.
HTML چیﺴﺖ؟
HTML چیﺴﺖ؟ • • • ﺯﺑﺎﻥ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺻﻔﺤﺎﺕ ﻭﺏ. ﺍیﻦ ﺯﺑﺎﻥ ﺩﺭ ﻭﺍﻗﻊ یک ﻗﺎﻟﺐ ﺍﺭﺍﺋﻪ ﺍﻃﻼﻋﺎﺕ ﺍﺳﺖ ﻭ ﺑﺮﻧﺎﻣﻪ ﻧﻮیﺴی ﺧﺎﺻی ﺩﺭ آﻦ ﻭﺟﻮﺩ ﻧﺪﺍﺭﺩ. ﺍﻣﺮﻭﺯﻩ HTML ﺗﻘﺮیﺒﺎ ﺗﻮﺍﻧﺎیی ﻧﻤﺎیﺶ ﻫﺮگﻮﻧﻪ ﺩﺍﺩﻩ ﺍی ﺑﺎ ﻫﺮ ﻗﺎﻟﺒی ﺭﺍ ﺩﺍﺭﺍﺳﺖ. ﻣی ﺗﻮﺍﻥ آﻨﺮﺍ یک ﻓﺮﻣﺖ ﺧیﻠی ﺳﺎﺩﻩ ﺩﺍﻧﺴﺖ کﻪ ﻣﺎﻧﻨﺪ PDF ﻭ Word ﺗﺼﻮیﺮ، ﻣﺘﻦ ﻭ ﺩﺍﺩﻩ ﻫﺎی ﺩیگﺮ ﺭﺍ ﺩﺭ کﻨﺎﺭ یکﺪیگﺮ ﻧﻤﺎیﺶ ﻣی ﺩﻫﺪ. HTML یک ﺯﺑﺎﻥ ﺑﺮچﺴﺒی ) (Tag ﺍﺳﺖ. ﺍﺯ ﺍیﻦ ﺭﻭ Markup Language ﺩﺍﻧﺴﺘﻪ ﻣی ﺷﻮﺩ، ﻣﺎﻧﻨﺪ XML کﻪ یک ﺯﺑﺎﻥ ﺑﺮچﺴﺒی ﺑﺪﻭﻥ ﻣﺤﺪﻭﺩیﺖ ﺑﺮچﺴﺐ ﺍﺳﺖ. ﺑﺮچﺴﺐ ﻫﺎی HTML ﻣﺤﺪﻭﺩﻧﺪ ﻭ ﻫﺮکﺪﺍﻡ ﻧﻤﺎیﺎﻧگﺮ ﺩﺍﺩﻩ ﺧﺎﺻی ﻫﺴﺘﻨﺪ. ﻋﻨﻮﺍﻥ ﺷﺮﻭﻉ ﺑﺮچﺴﺐ ﺩﺭ ﺩﺍﺧﻞ ﻋﻼﻣﺖ ﺑﺰﺭگﺘﺮ ﻭ کﻮچکﺘﺮ ﻗﺮﺍﺭ ﻣی گیﺮﺩ، ﻭ پﺎیﺎﻥ ﺑﺮچﺴﺐ ﻫﻤﺎﻧﻨﺪ ﺷﺮﻭﻉ آﻦ، ﻓﻘﻂ ﺑﺎ ﺗﻔﺎﻭﺕ یک / ﺍﺳﺖ: > <tag. Name>tagdata here, as mush as you want </tag. Name
ﺑﺮچﺴﺐ چیﺴﺖ؟ • ﺗﻤﺎﻡ ﺍﻃﻼﻋﺎﺕ یک ﺳﻨﺪ ﺑﺮچﺴﺒی، ﺩﺭ ﺩﺍﺧﻞ ﺑﺮچﺴﺐ ﻫﺎ ﻗﺮﺍﺭ ﻣی گیﺮﺩ. ﻫﺮ ﺑﺮچﺴﺐ 3 ﺑﺨﺶ ﺩﺍﺭﺩ: – ﻋﻨﻮﺍﻥ ﺑﺮچﺴﺐ )ﻣﻌیﻦ کﻨﻨﺪﻩ ﻧﻮﻉ آﻦ( – ﺻﻔﺎﺕ ﺑﺮچﺴﺐ )ﻣﻌیﻦ کﻨﻨﺪﻩ ﻭیژگیﻬﺎ ﻭ ﺭﻓﺘﺎﺭ آﻦ( – ﺩﺍﺩﻩ ﺑﺮچﺴﺐ )ﻣﻌیﻦ کﻨﻨﺪﻩ ﺩﺍﺩﻩ ﺍی کﻪ ﺑﺮچﺴﺐ ﺍﺭﺍﺋﻪ ﻣی ﺩﻫﺪ( • ﺑﺮچﺴﺐ ﻫﺎ ﻣی ﺗﻮﺍﻧﻨﺪ ﺩﺭ یک ﺳﺎﺧﺘﺎﺭ ﺩﺭﺧﺘی ﺩﺭ ﺩﺍﺧﻞ یکﺪیگﺮ ﻗﺮﺍﺭ گیﺮﻧﺪ، ﺑﺪیﻦ ﻣﻌﻨی کﻪ ﺩﺍﺩﻩ یک ﺑﺮچﺴﺐ ﻣی ﺗﻮﺍﻧﺪ ﺧﻮﺩ ﺷﺎﻣﻞ ﺑﺮچﺴﺒﻬﺎی ﺩیگﺮ ﺑﺎﺷﺪ. • ﻣﺜﺎﻝ ﺑﺮﺍی ﺑﺮچﺴﺐ ﺗﻮ ﺩﺭ ﺗﻮ ﺑﻪ ﻫﻤﺮﺍﻩ ﺻﻔﺎﺕ ﻭ ﻣﻘﺪﺍﺭ ﺻﻔﺎﺕ ﺑﺮچﺴﺐ: >” 2 <tag attribute 1=“attribute. Value” attribute 2=“attribute. Value > <inner. Tag> some data <another. Inner. Tag /> </inner. Tag > </tag • ﻫﻤﺎﻧﻄﻮﺭ کﻪ ﺩﺭ ﻣﺜﺎﻝ ﻣﺸﺨﺺ ﺍﺳﺖ، ﺑﺮچﺴﺒی کﻪ ﺩﺍﺩﻩ ﻧﺪﺍﺷﺘﻪ ﺑﺎﺷﺪ، ﺩﺭ ﺩﺍﺧﻞ ﺧﻮﺩ ﺑﺴﺘﻪ ﻣی ﺷﻮﺩ.
ﺑﺮچﺴﺐ ﺭیﺸﻪ • ﻫﻤﺎﻧگﻮﻧﻪ کﻪ یک ﻓﺎیﻞ ،XML ﺑﺎ ﺑﺮچﺴﺐ ﻫﺎی ﺧﻮﺩ یک ﺳﺎﺧﺘﺎﺭ ﺩﺭﺧﺘی ﻣی ﺳﺎﺯﺩ کﻪ ﺗﻨﻬﺎ یک ﺭیﺸﻪ ﺩﺍﺭﺩ )ﺑﺮچﺴﺐ ﺭیﺸﻪ(، ﺭیﺸﻪ ﻓﺎیﻠﻬﺎی HTML ﻫﻢ ﺑﺮچﺴﺐ > <html ﺍﺳﺖ. ﺗﻤﺎﻡ ﻣﺤﺘﻮیﺎﺕ ﺻﻔﺤﻪ ﻭﺏ ﺩﺭ ﺩﺍﺧﻞ ﺍیﻦ ﺑﺮچﺴﺐ ﻗﺮﺍﺭ ﻣی گیﺮﺩ. • ﻧکﺘﻪ: ﻫﻤﺎﻧﻨﺪ ﻓﺎیﻠﻬﺎی XML ﻣی ﺗﻮﺍﻧیﺪ یک ﻧﻮﻉ ﻭ ﻓﻀﺎی ﻧﺎﻡ ﺑﺮﺍی ﻓﺎیﻠﻬﺎی HTML ﺗﻌﺮیﻒ کﻨیﺪ. ﺍیﻦ کﺎﺭ ﺍﺧیﺮﺍ ﺑﻪ یک ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺗﺒﺪیﻞ ﺷﺪﻩ ﻭ ﺑﻬﺘﺮ ﺍﺳﺖ ﺭﻋﺎیﺖ ﺷﻮﺩ. ﻧﻮﻉ ﺩﺭ ﺧﻂ ﺍﻭﻝ ﻓﺎیﻞ ﻗﺮﺍﺭ ﻣی گیﺮﺩ. ﺍﻧﻮﺍﻉ ﻗﺎﺑﻞ ﺍﺳﺘﻔﺎﺩﻩ: )ﻏیﺮ ﺍﺭﺍﺋﻪ ﺍی( HTML 4. 01 Strict " <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01//EN >" "http: //www. w 3. org/TR/html 4/strict. dtd HTML 4. 01 Transitional 10. 4 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML " Transitional//EN" "http: //www. w 3. org/TR/html 4/loose. dtd HTML 4. 01 Frameset 10. 4 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML >" Frameset//EN" "http: //www. w 3. org/TR/html 4/frameset. dtd
( )ﺍﺩﺍﻣﻪ ﺑﺮچﺴﺐ ﺭیﺸﻪ XHTML 1. 0 Strict <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> XHTML 1. 0 Transitional <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 transitional. dtd"> XHTML 1. 0 Frameset <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Frameset//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -frameset. dtd"> XHTML 1. 1 (strict) <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 1//EN" "http: //www. w 3. org/TR/xhtml 11/DTD/xhtml 11. dtd">
ﺳﺮﺻﻔﺤﻪ ﻭ ﺑﺪﻧﻪ • ﻫﺮ ﺳﻨﺪ HTML ﺍﺯ ﺩﻭ ﻗﺴﻤﺖ ﺍﺻﻠی ﺗﺸکیﻞ ﺷﺪﻩ ﺍﺳﺖ، ﺳﺮﺻﻔﺤﻪ ) (Head ﻭ ﺑﺪﻧﻪ ). (Body ﺍﻃﻼﻋﺎﺕ ﻣﺮﺑﻮﻁ ﺑﻪ ﺻﻔﺤﻪ کﻪ ﻧﻤﺎیﺶ ﻇﺎﻫﺮی ﻧﺪﺍﺭﻧﺪ، ﺩﺭ ﺳﺮﺻﻔﺤﻪ ﻗﺮﺍﺭ گﺮﻓﺘﻪ ﻭ ﺍﻃﻼﻋﺎﺕ ﻧﻤﺎیﺸی ﺻﻔﺤﻪ ﺩﺭ ﻗﺴﻤﺖ ﺑﺪﻧﻪ ﺟﺎی ﻣی گیﺮﻧﺪ. ﺑﻪ ﻋﻨﻮﺍﻥ ﻣﺜﺎﻝ: > <html > <head > <title> Sample Webpage </title > </head > <body > <p> hello there this is a paragraph </p > <p> hello again another paragraph with <b> bold </b> text! </p > </body > </html
ﻓﺎیﻞ ﻣﺘﻨی • ﺍﺯ آﻨﺠﺎیی کﻪ HTML یک ﻓﺎیﻞ ﻣﺘﻨی ﺍﺳﺖ، ﺩﺍﻧﺴﺘﻦ ﻧکﺎﺗی ﺩﺭ ﻣﻮﺭﺩ ﻓﺎیﻞ ﻣﺘﻨی ﺳﻮﺩﻣﻨﺪ ﺑﻪ ﻧﻈﺮ ﻣی ﺭﺳﺪ: 1. ﻓﺎیﻞ ﻫﺎی ﻣﺘﻨی ﺳﻪ ﻧﻮﻉ ﺫﺧیﺮﻩ ﻣی گﺮﺩﻧﺪ: 1. 2. 3. کﺎﺭﺍکﺘﺮ ﺑﻨﺪی : ASCII ﺩﺭ ﺍیﻦ ﻣﺪﻝ ﻫﺮ کﺎﺭﺍکﺘﺮ 1 ﺑﺎیﺖ ﻣی گیﺮﺩ ﻭ 652 ﺣﺎﻟﺖ ﺩﺍﺭﺩ. ﺍیﻦ ﻧﻮﻉ کﺎﺭﺍکﺘﺮ ﺑﻨﺪی ﻓﺎﻗﺪ ﺗﻮﺍﻧﺎیی ﻧﻤﺎیﺶ ﺯﺑﺎﻧﻬﺎی ﻏیﺮ ﺍﻧگﻠیﺴی ﺍﺳﺖ. کﺎﺭﺍکﺘﺮ ﺑﻨﺪی ﻭیﻨﺪﻭﺯ : ﺩﺭ ﺍیﻦ ﻣﺪﻝ ﻫﺮ کﺎﺭﺍکﺘﺮ ﺩﺭ ﻓﺎیﻞ ﻣﺘﻨی 2 ﺑﺎیﺖ ﻣی گیﺮﺩ ﻭ ﺑﺮ ﺍﺳﺎﺱ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﻭیﻨﺪﻭﺯ ﺑﻪ ﺷکﻞ ﺧﺎﺻی ﺗﺒﺪیﻞ ﻣی ﺷﻮﺩ. کﺎﺭﺍکﺘﺮ ﺑﻨﺪی : Unicode ﺩﺭ ﺍیﻦ ﻣﺪﻝ، ﻫﺮ کﺎﺭﺍکﺘﺮ 2 ﺑﺎیﺖ ﻣی گیﺮﺩ ﻭ ﺗﻮﺍﻧﺎی ﻧﻤﺎیﺶ ﺑﻪ ﺍکﺜﺮ ﺯﺑﺎﻧﻬﺎ ﻭﺟﻮﺩ ﺩﺍﺭﺩ. یﻮﻧیکﺪ ﺧﻮﺩ ﺑﻪ ﺍﺳﺘﺎﻧﺪﺍﺭﺩﻫﺎی ﻣﺘﻔﺎﻭﺗی ﺗﻘﺴیﻢ ﻣی گﺮﺩﺩ کﻪ ﺯﺑﺎﻥ ﻓﺎﺭﺳی ﺩﺭ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺍﺻﻠی آﻦ، 8 - UTF پﺸﺘیﺒﺎﻧی ﺷﺪﻩ ﺍﺳﺖ. 2. کﺎﺭﺍکﺘﺮ ﺍﻧﺘﻬﺎی ﺧﻂ ﺩﺭ ﻭیﻨﺪﻭﺯ ﻭ ﻟیﻨﻮکﺲ ﺗﻔﺎﻭﺕ ﻣی کﻨﺪ، ﺩﺭ ﻭیﻨﺪﻭﺯ یک کﺎﺭﺍکﺘﺮ 31 ) (Enter ﻭ یک کﺎﺭﺍکﺘﺮ کﻤکی ﺑﺎ ﺷﻤﺎﺭﻩ 01 ﻣﻌیﻦ کﻨﻨﺪﻩ پﺎیﺎﻥ ﺧﻂ ﺍﺳﺖ ﻭﻟی ﺩﺭ ﻟیﻨﻮکﺲ کﺎﺭﺍکﺘﺮ 01 ﻭﺟﻮﺩ ﻧﺪﺍﺭﺩ. ﺍﺯﺍیﻦ ﺭﻭ ﻓﺎیﻠﻬﺎی ﻣﺘﻨی ﻟیﻨﻮکﺲ ﺩﺭ ﻭیﻨﺪﻭﺯ، یکﺴﺮﻩ ﻭ ﺑﺪﻭﻥ ﺧﻂ ﺑﻨﺪی ﺑﻪ ﻧﻈﺮ ﻣی ﺭﺳﻨﺪ.
ﻧکﺎﺕ HTML 1. ﺗﻤﺎﻣی ﻓﻀﺎﻫﺎی ﺧﺎﻟی ) (whitespace پیﻮﺳﺘﻪ، ﺩﺭ ﺧﺮﻭﺟی یک Space ﻣی ﺷﻮﻧﺪ. 2. ﺍﺯ آﻨﺠﺎیی کﻪ ﻋﻼﻣﺖ ﻫﺎی & > < ﺑﺮﺍی ﻣﻌیﻦ کﺮﺩﻥ ﺑﺮچﺴﺐ ﻫﺎ کﺎﺭﺑﺮﺩ ﺩﺍﺭﻧﺪ، ﺑﺮﺍی ﻭﺍﺭﺩ کﺮﺩﻥ آﻨﻬﺎ ﺩﺭ ﻣﺘﻦ ﺑﺎیﺪ ﺗﺒﺪیﻞ ﺯیﺮ ﺍﻧﺠﺎﻡ ﺷﻮﺩ: 1. 2. 3. < : ; < > : ; > & : ; & 3. ﺑﺮﺍی ﺗﻮﻟیﺪ ﺍﺳﻨﺎﺩ HTML ﻣی ﺗﻮﺍﻧیﺪ ﺍﺯ ﻧﺮﻡ ﺍﻓﺰﺍﺭﻫﺎی ﺑﺴیﺎﺭی ﺑﻬﺮﻩ ﺟﻮییﺪ، ﻧﺮﻡ ﺍﻓﺰﺍﺭﻫﺎی ﺯیﺮ ﺍﺯ ﻣﻌﺮﻭﻓﺘﺮیﻦ آﻨﻬﺎ ﻫﺴﺘﻨﺪ: 1. 2. 3. Microsoft Frontpage Adobe Dreamweaver Zend. Studio for Eclipse
ﺑﺮچﺴﺒﻬﺎی HTML
ﺑﺮچﺴﺐ ﻫﺎی ﻣﺠﺎﺯ • HTML ﺩﺍﺭﺍی ﺣﺪﻭﺩ 57 ﺑﺮچﺴﺐ ﻣﺠﺎﺯ )ﺍﻣﺮﻭﺯﻩ( ﻭ ﺣﺪﻭﺩ 001 ﺑﺮچﺴﺐ ﻣﻌﻤﻮﻝ ﺍﺳﺖ. ﻫﺮ کﺪﺍﻡ ﺍﺯ ﺍیﻦ ﺑﺮچﺴﺐ ﻫﺎ، کﺎﺭﺑﺮﺩ ﺧﺎﺻی ﺩﺍﺭﻧﺪ ﻭ ﺍﻃﻼﻋﺎﺕ ﺧﺎﺻی ﺭﺍ ﺍﺭﺍﺋﻪ ﻣی ﺩﻫﻨﺪ. ﺩﺭ ﺑﺨﺶ ﺑﻌﺪی ﺗﻌﺪﺍﺩی ﺍﺯ ﻣﻌﻤﻮﻝ ﺗﺮیﻦ ﺍیﻦ ﺑﺮچﺴﺐ ﻫﺎ ﺭﺍ ﺑﺮﺭﺳی ﺧﻮﺍﻫیﻢ کﺮﺩ. • ﺣﺪﻭﺩ 52 ﺑﺮچﺴﺐ HTML ﺑﺎ گﺬﺭ ﺯﻣﺎﻥ ﻣﻨﻘﺮﺽ ﺷﺪﻩ ﺍﻧﺪ )ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ آﻨﻬﺎ ﻏیﺮ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺷﺪﻩ ﺍﺳﺖ( ﺑیﺸﺘﺮ آﻨﻬﺎ ﺑﺮچﺴﺐ ﻫﺎی ﻗﺎﻟﺐ ﺑﻨﺪی ﻫﺴﺘﻨﺪ کﻪ ﺑﺎ ﺑﻪ ﻭﺟﻮﺩ آﻤﺪﻥ CSS ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ آﻨﻬﺎ ﻧﺎﺻﺤیﺢ ﺩﺍﻧﺴﺘﻪ ﻣی ﺷﻮﺩ. • HTML ﻣﺎﻧﻨﺪ ﻫﺮ ﺯﺑﺎﻥ ﺑﺮﻧﺎﻣﻪ ﻧﻮیﺴی ﻭ ﺍﺳکﺮیپﺘیﻨگ ﺩیگﺮی، ﺍﺯ ﺗﻮﺿیﺤﺎﺕ ) (Comments پﺸﺘیﺒﺎﻧی ﻣی کﻨﺪ، ﺍﻣﺎ ﻣﺘﺎﺳﻔﺎﻧﻪ ﻗﺎﻟﺐ آﻦ کﻤی ﺩﺷﻮﺍﺭ ﺍﺳﺖ: >-- ! <!-- this is a comment • ﺩﺭ HTML ﺍﺯ ﺗﻮﺿیﺤﺎﺕ ﺍﺳﺘﻔﺎﺩﻩ ﻧﻤی ﺷﻮﺩ ﻣگﺮ ﺩﺭ ﻣﻮﺍﺭﺩ ﺑﺴیﺎﺭ ﻣﺤﺪﻭﺩ، ﺯیﺮﺍ ﺣﺠﻢ ﺻﻔﺤﺎﺕ ﺑﺴیﺎﺭ ﻣﻬﻢ ﺍﺳﺖ ﻭ ﺗﺎ ﺟﺎی ﻣﻤکﻦ ﺑﺎیﺪ آﻨﺮﺍ کﻤیﻨﻪ ﻧﻤﻮﺩ.
ﺑﺮچﺴﺐ > <html • HTML ﺑﻪ ﺑﺰﺭگی ﻭ کﻮچکی ﺣﺮﻭﻑ ﺩﺭ ﻧﺎﻡ ﺑﺮچﺴﺐ ﻫﺎ ﺣﺴﺎﺱ ﻧیﺴﺖ. ﻧﺎﻡ ﺑﺮچﺴﺐ: HTML ﻭﻇیﻔﻪ: ﻣﺸﺨﺺ کﺮﺩﻥ یک ﺳﻨﺪ HTML ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: • ﺍﺧﺘیﺎﺭی – : Dir ﻣﺸﺨﺺ کﻨﻨﺪﻩ ﺟﻬﺖ ﺳﻨﺪ )چپ ﺑﻪ ﺭﺍﺳﺖ یﺎ ﺑﺎﻟﻌکﺲ( ﻣﻘﺎﺩیﺮ ﻣﺠﺎﺯ ” “rtl ﻭ ” “ltr ﻣﻘﺪﺍﺭ پیﺶ ﻓﺮﺽ: rtl – : Lang ﻣﺸﺨﺺ کﻨﻨﺪﻩ ﺯﺑﺎﻥ ﺳﻨﺪ )ﺑﺮ ﺍﺳﺎﺱ ﻣﺨﻔﻒ 2 ﺣﺮﻓی ﺯﺑﺎﻥ( ﻣﺎﻧﻨﺪ ” “fa یﺎ ” “en
<html> ﻣﺜﺎﻝ <html dir='rtl' lang='fa'> <head></head> <body> ﺳﻼﻡ ﺭﻭﺯ ﺷﻤﺎ ﺑﻪ ﺧیﺮ </body> </html> <html><head></head> <body> Hello, World! </body></html>
ﺑﺮچﺴﺐ > <head ﻧﺎﻡ ﺑﺮچﺴﺐ: Head ﻭﻇیﻔﻪ: ﻣﺸﺨﺺ کﺮﺩﻥ ﻣﺤﺪﻭﺩﻩ ﺍﻃﻼﻋﺎﺕ ﺭﺍﺟﻊ ﺑﻪ یک ﺳﻨﺪ ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: ﻧﺪﺍﺭﺩ ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Html • ﻧکﺘﻪ: ﺗﻤﺎﻡ ﺑﺮچﺴﺐ ﻫﺎیی کﻪ ﺩﺭ head ﻗﺮﺍﺭ ﻣی گیﺮﻧﺪ، ﻣی ﺗﻮﺍﻧﻨﺪ ﺩﺭ body ﻭ یﺎ ﺟﺎی ﺩیگﺮ ﻧیﺰ ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﻧﺪ، ﻭﻟی ﺍﺳﺘﺎﻧﺪﺍﺭﺩ آﻦ ﺍﺳﺖ کﻪ ﺩﺍﺧﻞ head ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﻧﺪ.
ﺑﺮچﺴﺐ > <title ﻧﺎﻡ ﺑﺮچﺴﺐ: Title ﻭﻇیﻔﻪ: ﻣﺸﺨﺺ کﺮﺩﻥ ﻋﻨﻮﺍﻥ ﺻﻔﺤﻪ ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: ﻧﺪﺍﺭﺩ ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Head • ﻋﻨﻮﺍﻥ ﺻﻔﺤﻪ ﺩﺭ ﺑﺎﻻی پﻨﺠﺮﻩ کﺎﻭﺷگﺮ ﻧﻤﺎیﺶ ﺩﺍﺩﻩ ﻣی ﺷﻮﺩ.
<title> ﻣﺜﺎﻝ <html lang='fa'> <head> <title> /<ﻋﻨﻮﺍﻥ ﺻﻔﺤﻪ title> </head> <body> ﺳﻼﻡ ﺭﻭﺯ ﺷﻤﺎ ﺑﻪ ﺧیﺮ </body> </html>
ﺑﺮچﺴﺐ > <p ﻧﺎﻡ ﺑﺮچﺴﺐ: P ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ پﺎﺭﺍگﺮﺍﻑ ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: – : Align ﻣﺮﺗﺐ کﺮﺩﻥ ﻣﺘﻦ ﺩﺍﺧﻞ پﺎﺭﺍگﺮﺍﻑ، ﻣﻘﺎﺩیﺮ ﻣﺠﺎﺯ: • Left ﺑﻪ چپ )پیﺸﻔﺮﺽ( • Right ﺑﻪ ﺭﺍﺳﺖ • Center ﺑﻪ ﻣﺮکﺰ • Justify ﻫﻢ ﺗﺮﺍﺯ ﺩﻗﺖ کﻨیﺪ کﻪ ﺑﺮﺍی ﺳﻨﺪ ﻫﺎی RTL ﺟﺎی چپ ﻭ ﺭﺍﺳﺖ ﺩﺭ ﺍیﻦ ﻣﺮﺗﺐ کﺮﺩﻥ ﺟﺎﺑﺠﺎ ﻣی گﺮﺩﺩ. ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Body ﻭ ﻏیﺮﻩ
ﺑﺮچﺴﺐ > <br ﻧﺎﻡ ﺑﺮچﺴﺐ: Br ﻭﻇیﻔﻪ: ﻣﺸﺨﺺ کﺮﺩﻥ ﺍﻧﺘﻬﺎی ﺧﻂ )ﺭﻓﺘﻦ ﺑﻪ ﺧﻂ ﺑﻌﺪی( ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺑﻠﻪ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: ﻧﺪﺍﺭﺩ ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﻫﻤﻪ ﺟﺎ
ﺑﺮچﺴﺐ > <img ﻧﺎﻡ ﺑﺮچﺴﺐ: Img ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ ﺗﺼﻮیﺮ ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺑﻠﻪ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: – : src آﺪﺭﺱ ﻓﺎیﻞ ﺗﺼﻮیﺮی – : Alt ﻣﺘﻦ ﺟﺎیگﺰیﻦ )ﺗﺎ ﻫﻨگﺎﻣی کﻪ ﺗﺼﻮیﺮ ﺑﺎﺭ ﺷﻮﺩ، یﺎ ﺍگﺮ ﻧﺸﻮﺩ، ﺍیﻦ ﻣﺘﻦ ﺩﺭ ﺟﺎی آﻦ ﻧﻤﺎیﺶ ﺩﺍﺩﻩ ﻣی ﺷﻮﺩ( – : Align ﻣﻘﺎﺩیﺮ ﻗﺎﺑﻞ ﺍﺳﺘﻔﺎﺩﻩ top, bottom, middle, left , right – : Width , Height ﺍﺑﻌﺎﺩ ﺗﺼﻮیﺮ، ﺩﺭ ﺻﻮﺭﺗی کﻪ ﺫکﺮ ﻧﺸﻮﺩ ﺍﻧﺪﺍﺯﻩ ﺧﻮﺩ ﺗﺼﻮیﺮ – : Title ﻣﺘﻦ ﺭﺍﻫﻨﻤﺎی کﻤکی ) (Tooltip – : Usemap کﺎﺭﺑﺮﺩ ﺣﺮﻓﻪ ﺍی )ﺟﻬﺖ ﺗﺨﺼیﺼی یک ﻧﻘﺸﻪ ﻣﻨﻄﻘﻪ ﺑﻨﺪی ﺑﻪ ﺗﺼﻮیﺮ( ﻻﺯﻡ ﺑﻪ ﺫکﺮ ﺍﺳﺖ کﻪ ﺗﻘﺮیﺒﺎ ﺗﻤﺎﻡ ﺑﺮچﺴﺐ ﻫﺎی HTML ﺍﺯ ﺻﻔﺖ Title پﺸﺘیﺒﺎﻧی ﻣیکﻨﻨﺪ، ﺍﺯ ﺍیﻦ ﺭﻭ ﺍﺯ ﺗکﺮﺍﺭ آﻦ ﻣی پﺮﻫیﺰیﻢ. ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Body ﻭ ﻏیﺮﻩ
<img> ﻣﺜﺎﻝ <html> <head> <title>/> ﻋﻨﻮﺍﻥ ﺻﻔﺤﻪ title> </head> <body> <p> ، <ﺳﻼﻡ ﺭﻭﺯ ﺷﻤﺎ ﺑﻪ ﺧیﺮ، ﺍیﻦ پﺎﺭﺍگﺮﺍﻑ ﺍﻭﻝ ﺍﺳﺖ br/>. ﺗﺼﻮیﺮ ﻫﻢ ﺩﺍﺭﺩ <img src='image 1. jpg' width='200' align='middle'/></p> <p> /<ﺍیﻦ ﻫﻢ پﺎﺭﺍگﺮﺍﻑ ﺩﻭﻡ p> <img src='image 1. jpg' width='200' height='200' /> </body> </html>
ﺑﺮچﺴﺐ > <a ﻧﺎﻡ ﺑﺮچﺴﺐ: A ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ ﻟﻨگﺮگﺎﻩ، ﺍﺗﺼﺎﻝ ﺑﻪ ﺻﻔﺤﺎﺕ ﺩیگﺮ یﺎ ﻗﺴﻤﺘی ﺍﺯ ﺻﻔﺤﻪ ﺟﺎﺭی ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ، ﻣﺤﺘﻮی ﻋﻨﻮﺍﻥ ﺍﺗﺼﺎﻝ ﺍﺳﺖ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: – : href آﺪﺭﺱ ) (URL ﺍﺗﺼﺎﻝ یﺎ ﻟﻨگﺮگﺎﻩ – : Name ﺗﻌﺮیﻒ ﻧﺎﻡ ﻟﻨگﺮگﺎﻩ ﺑﺮﺍی ﺍﺭﺟﺎﻉ – : Target ﺻﻔﺤﻪ ﺟﺪیﺪ، ﺩﺭ کﺠﺎ ﺑﺎﺯ ﺷﻮﺩ: • • : _blank ﺻﻔﺤﻪ ﺟﺪیﺪ )پﻨﺠﺮﻩ ﺟﺪیﺪ ﺑﺎﺯ ﻣی ﺷﻮﺩ( : _parent ﺩﺭ ﺩﺍﺧﻞ ﺻﻔﺤﻪ ﺍی کﻪ ﺻﻔﺤﻪ ﺟﺎﺭی ﺭﺍ ﺑﺎﺯ کﺮﺩﻩ ﺍﺳﺖ ) : _self پیﺸﻔﺮﺽ( ﺩﺭ ﻫﻤیﻦ ﺻﻔﺤﻪ ﻧﺎﻡ ﻓﺮیﻢ: ﺑﺮﺍی ﺻﻔﺤﺎﺕ ﻓﺮیﻢ ﺑﻨﺪی ﺷﺪﻩ ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Body ﻭ ﻏیﺮﻩ ﺍیﻦ ﺑﺮچﺴﺐ ﻣی ﺗﻮﺍﻧﺪ ﺍﺗﺼﺎﻟی ﺑﻪ یک ﺻﻔﺤﻪ ﺩیگﺮ ﺑﺮﻗﺮﺍﺭ کﻨﺪ، یﺎ یک ﻟﻨگﺮگﺎﻩ ﺩﺭ ﺍیﻦ ﺻﻔﺤﻪ ﺗﻌﺮیﻒ کﻨﺪ. )ﻟﻨگﺮگﺎﻩ چیﺴﺖ؟(
<a> ﻣﺜﺎﻝ <html> <body> <p> This is a sample paragraph. Click <a href='http: //www. google. com'>Here</a> to visit Google website. <br/> <a href='http: //hackersite. com/hack. html' title='Click me to die!'>Yahoo!</a> <br/> <a href='http: //somesite. com/somepage. html#anchor'> <img src='img. gif' /> </a> </body> </html>
ﺑﺮچﺴﺐ > <b ﻧﺎﻡ ﺑﺮچﺴﺐ: B ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ ﻣﺘﻦ Bold ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: ﻧﺪﺍﺭﺩ ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Body ﻭ ﻏیﺮﻩ ﺑﺮچﺴﺐ ﻫﺎی ﺩیگﺮی ﻣﺎﻧﻨﺪ i ﻭ big ﻭ small ﻭ. . . ﻧیﺰ ﺑﺮﺍی ﻗﺎﻟﺐ ﺑﻨﺪی ﻣﺘﻦ ﺑﻪ کﺎﺭ ﻣی ﺭﻭﻧﺪ کﻪ کﺎﺭﺑﺮﺩ آﻨﻬﺎ ﺑﺎ css ﺟﺎیگﺰیﻦ ﺷﺪﻩ ﺍﺳﺖ.
ﺑﺮچﺴﺐ > <sup>, <sub ﻧﺎﻡ ﺑﺮچﺴﺐ: Sup, Sub ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ ﺭﻭ/ﺯیﺮ ﻣﺘﻦ ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: ﻧﺪﺍﺭﺩ ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Body ﻭ ﻏیﺮﻩ ﺑﺮچﺴﺐ ﻫﺎی ﺩیگﺮی ﻣﺎﻧﻨﺪ i ﻭ big ﻭ small ﻭ. . . ﻧیﺰ ﺑﺮﺍی ﻗﺎﻟﺐ ﺑﻨﺪی ﻣﺘﻦ ﺑﻪ کﺎﺭ ﻣی ﺭﻭﻧﺪ کﻪ کﺎﺭﺑﺮﺩ آﻨﻬﺎ ﺑﺎ css ﺟﺎیگﺰیﻦ ﺷﺪﻩ ﺍﺳﺖ.
ﺑﺮچﺴﺐ > <hr ﻧﺎﻡ ﺑﺮچﺴﺐ: Hr ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ ﺧﻂ ﺟﺪﺍ کﻨﻨﺪﻩ ﺍﻓﻘی ) (Horizontal Line ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺑﻠﻪ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: ﻧﺪﺍﺭﺩ ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Body ﻭ ﻏیﺮﻩ ﺑﻪ ﻣﺎﻧﻨﺪ ﺑﺮچﺴﺐ br کﻪ یک ﺧﻂ ﺭﺍ ﺗﻤﺎﻡ ﻣی کﻨﺪ ﻭ ﺑﻪ ﺍﺑﺘﺪﺍی ﺧﻂ ﺑﻌﺪی ﻣی ﺭﻭﺩ، hr ﻧیﺰ ﺧﻄی ﺧﺎﻟی کﺮﺩﻩ، ﺩﺭ ﺧﻂ ﺑﻌﺪی یک ﺧﻂ ﻧﺎﺯک ﺍﻓﻘی کﺎﻣﻞ ﺭﺳﻢ ﻣی کﻨﺪ ﻭ ﺑﻪ ﺍﺑﺘﺪﺍی ﺧﻂ ﺑﻌﺪی ﻣی ﺭﻭﺩ.
<sub>, <sup> ﻣﺜﺎﻝ <html> <body> Some text with <sup>super</sup> text. <hr/> Some more text with <sub>sub</sub> text. </body> </html>
ﺑﺮچﺴﺐ > <ol>, <ul ﻧﺎﻡ ﺑﺮچﺴﺐ: OL, UL ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ ﻟیﺴﺖ ﻣﺮﺗﺐ ) (Ordered List ﻭ ﻟیﺴﺖ ﻧﺎﻣﺮﺗﺐ ) (Unordered List ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: ﻧﺪﺍﺭﺩ ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Body ﻭ ﻏیﺮﻩ ﺍیﻦ ﺩﻭ ﺑﺮچﺴﺐ ﻣﺤﺪﻭﺩﻩ یک ﻟیﺴﺖ ﻋﺪﺩی ﻭ یﺎ گﻠﻮﻟﻪ ﺍی ﺭﺍ ﻣﺸﺨﺺ ﻣی کﻨﻨﺪ. ﺳپﺲ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺑﺮچﺴﺐ li ﻣی ﺗﻮﺍﻥ ﺩﺭ ﺩﺍﺧﻞ ﻟیﺴﺖ، ﻋﻨﺼﺮ ﺍﻓﺰﻭﺩ. ﻧکﺘﻪ: ﺩﺭ ﺻﻮﺭﺗی کﻪ ﺩﺭ ﺩﺍﺧﻞ ﺑﺮچﺴﺐ ﻫﺎی ﻣﺤﺪﻭﺩﻩ ﻟیﺴﺖ، ﺍﺯ ﺑﺮچﺴﺐ ﻫﺎی ﺩیگﺮ ﺍﺳﺘﻔﺎﺩﻩ کﻨیﺪ )ﺧﺎﺭﺝ ﺍﺯ ،(li ﺍکﺜﺮ کﺎﻭﺷگﺮﻫﺎ آﻨﺮﺍ ﺑﻪ ﺩﺭﺳﺘی ﻧﻤﺎیﺶ ﺧﻮﺍﻫﻨﺪ ﺩﺍﺩ ﻭﻟی ﺍﺯ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺧﺎﺭﺝ ﺷﺪﻩ ﺍیﺪ.
ﺑﺮچﺴﺐ> <li ﻧﺎﻡ ﺑﺮچﺴﺐ: LI ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ ﻋﻨﺼﺮ ﻟیﺴﺖ ) (List Item ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: ﻧﺪﺍﺭﺩ ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ OL ﻭ UL ﻫﺮ ﻋﻨﺼﺮ ﻟیﺴﺖ ﺩﺭ ﻟیﺴﺘﻬﺎی ﻣﺮﺗﺐ یک ﺷﻤﺎﺭﻩ ﻣی گیﺮﺩ ﻭ ﺩﺭ ﻟیﺴﺖ ﻫﺎی گﻠﻮﻟﻪ ﺍی یک گﻠﻮﻟﻪ ﺩﺭ ﺍﺑﺘﺪﺍی آﻦ ﻗﺮﺍﺭ ﻣی گیﺮﺩ. ﻟیﺴﺖ ﻫﺎ ﻣی ﺗﻮﺍﻧﻨﺪ ﺗﻮ ﺩﺭ ﺗﻮ ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﻧﺪ.
ﻣﺜﺎﻝ ﻟیﺴﺖ ﻫﺎ <html> <body> <ol> <li>/> ﻋﻨﺼﺮ ﺍﻭﻝ li> <li>/> ﻋﻨﺼﺮ ﺩﻭﻡ li> <li>/> ﻋﻨﺼﺮ ﺳﻮﻡ li> </ol> <ul> <li> List 1</li> <li> List 2</li> <li> List 3</li> </ul> </body> </html>
ﺑﺮچﺴﺐ ﻫﺎی ﻧﺎﺣیﻪ ﺑﻨﺪی ﻧﺎﻡ ﺑﺮچﺴﺐ: Span, Div ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ یک ﻧﺎﺣیﻪ ﺩﺭ ﺳﻨﺪ ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: ﻧﺪﺍﺭﺩ ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﻫﻤﻪ ﺟﺎ • • ﺑﺮچﺴﺐ ﻫﺎی ﻧﺎﺣیﻪ ﺑﻨﺪی ﺑﺮﺍی ﺟﺪﺍ کﺮﺩﻥ ﻧﺎﺣیﻪ ﻫﺎی HTML ﺍﺳﺘﻔﺎﺩﻩ ﻣی ﺷﻮﻧﺪ. ﺍیﻦ ﺑﺮچﺴﺐ ﻫﺎ ﺑﺴیﺎﺭ پﺮکﺎﺭﺑﺮﺩ ﺑﻮﺩﻩ ﻭ ﺩﺭ ﺍﺳﻨﺎﺩ HTML ﺑﻪ ﺗﻌﺪﺍﺩ ﺍﺳﺘﻔﺎﺩﻩ ﻣی ﺷﻮﻧﺪ. ﺑﺮچﺴﺐ Span ﺑﺮﺍی ﻧﺎﺣیﻪ ﺑﻨﺪی ﻗﺴﻤﺘی ﺍﺯ ﻣﺘﻦ ﺍﺳﺘﻔﺎﺩﻩ ﻣی ﺷﻮﺩ ﻭ ﺗﻔﺎﻭﺗی ﺩﺭ ﻇﺎﻫﺮ ﺳﻨﺪ ﺍیﺠﺎﺩ ﻧﻤی کﻨﺪ. ﺑﺮچﺴﺐ Div ﺑﺮﺍی ﻧﺎﺣیﻪ ﺑﻨﺪی ﻗﺴﻤﺘی ﺍﺯ ﺳﻨﺪ ﺍﺳﺘﻔﺎﺩﻩ ﻣی ﺷﻮﺩ ﻭ ﻣی ﺗﻮﺍﻧﺪ ﺍﻧﻮﺍﻉ ﺑﺮچﺴﺐ ﻫﺎی ﺩیگﺮ )ﺣﺘی (Div ﺭﺍ ﺩﺭ ﺧﻮﺩ ﻧگﻪ ﺩﺍﺭﺩ. ﺩﺭ ﺑﺨﺶ CSS ﺑیﺸﺘﺮ ﺭﺍﺟﻊ ﺑﻪ ﺍیﻦ ﺑﺮچﺴﺐ ﻫﺎ ﺑﺤﺚ ﺧﻮﺍﻫﺪ ﺷﺪ.
ﺟﺪﻭﻝ ﻫﺎ
ﺟﺪﻭﻝ ﻫﺎی HTML • ﺟﺪﻭﻝ ﻫﺎ ﺍﺯ ﻣﻬﻤﺘﺮیﻦ ﻭ پﺮکﺎﺭﺑﺮﺩﺗﺮیﻦ ﺑﺮچﺴﺐ ﻫﺎی HTML ﻫﺴﺘﻨﺪ. آﻨﻬﺎ کﺎﺭﺑﺮﺩﻫﺎی ﺯیﺎﺩی ﺩﺍﺭﻧﺪ ﺍﺯ ﺟﻤﻠﻪ: – ﺍﺭﺍﺋﻪ ﺍﻃﻼﻋﺎﺕ ﻗﺎﻟﺐ ﺑﻨﺪی ﺷﺪﻩ – ﻗﺎﻟﺐ ﺑﻨﺪی ﺻﻔﺤﺎﺕ – ﻗﺎﻟﺐ ﺑﻨﺪی ﺗﺼﺎﻭیﺮ • یک ﺟﺪﻭﻝ کﺎﻣﻞ ﺑﺎ یک ﺑﺮچﺴﺐ Table ﺷﺮﻭﻉ ﻭ پﺎیﺎﻥ ﻣی یﺎﺑﺪ. • ﻫﺮ ﺟﺪﻭﻝ ﻣی ﺗﻮﺍﻧﺪ یک ﻗﺴﻤﺖ ﺑﺎﻻیی ) ،(Header یک ﻗﺴﻤﺖ ﻣیﺎﻧی ) (Body ﻭ یک ﻗﺴﻤﺖ ﺗﺤﺘﺎﻧی ) (Footer ﺩﺍﺷﺘﻪ ﺑﺎﺷﺪ. • ﺳﻄﺮ ﻫﺎ ﻭ ﺳﺘﻮﻥ ﻫﺎ ﺩﺭ ﻫﺮ ﻧﺎﺣیﻪ ﺟﺪﺍگﺎﻧﻪ ﻣﺸﺨﺺ ﻣی ﺷﻮﻧﺪ.
ﺑﺮچﺴﺐ > <Table ﻧﺎﻡ ﺑﺮچﺴﺐ: Table ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ یک ﺟﺪﻭﻝ کﺎﻣﻞ ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: – – : Border ﺍﻧﺪﺍﺯﻩ کﺎﺩﺭ ﺧﺎﻧﻪ ﻫﺎی ﺟﺪﻭﻝ. یک ﻋﺪﺩ ﺻﺤیﺢ : Cellpadding ﻓﺎﺻﻠﻪ ﻣیﺎﻥ ﺩیﻮﺍﺭﻩ ﺧﺎﻧﻪ ﻫﺎی ﺟﺪﻭﻝ ﻭ ﺩﺍﺩﻩ ﺩﺭﻭﻥ آﻨﻬﺎ : Cellspacing ﻓﺎﺻﻠﻪ ﻣیﺎﻥ ﺩﻭ ﺧﺎﻧﻪ ﺟﺪﻭﻝ : Width ﻋﺮﺽ ﺟﺪﻭﻝ ﺑﻪ ﻋﺪﺩ یﺎ ﺩﺭﺻﺪ )ﺩﺭﺻﺪ ﺍﺯ ﺍﻧﺪﺍﺯﻩ کﻞ ﺻﻔﺤﻪ( ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Body
ﺑﺮچﺴﺐ > <Tr ﻧﺎﻡ ﺑﺮچﺴﺐ: Tr ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ یک ﺳﻄﺮ ﺟﺪﻭﻝ ) (Table Row ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: – : Align ﺟﻬﺖ گیﺮی ﻣﺤﺘﻮﺍی یک ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘی( – : VAlign ﺟﻬﺖ گیﺮی ﻋﻤﻮﺩی ﻣﺤﺘﻮﺍی یک ﺧﺎﻧﻪ: • • Top Middle Bottom Baseline ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Table, Tbody, Thead, Tfoot
ﺑﺮچﺴﺐ > <Td ﻧﺎﻡ ﺑﺮچﺴﺐ: Td ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ یک ﺧﺎﻧﻪ ﺩﺍﺩﻩ ﺩﺭ یک ﺳﻄﺮ ﺟﺪﻭﻝ ) (Table Data ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: – – : Align ﺟﻬﺖ گیﺮی ﻣﺤﺘﻮﺍی یک ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘی( : VAlign ﺟﻬﺖ گیﺮی ﻋﻤﻮﺩی ﻣﺤﺘﻮﺍی یک ﺧﺎﻧﻪ : Colspan ﺍیﻦ ﺧﺎﻧﻪ چﻨﺪ ﺭﺩیﻒ ﺭﺍ ﺩﺭ ﺑﺮ ﺑگیﺮﺩ )ﺍﺩﻏﺎﻡ ﺳﺘﻮﻧی ﺧﺎﻧﻪ ﻫﺎ( : Rowspan ﺍیﻦ ﺧﺎﻧﻪ چﻨﺪ ﺳﺘﻮﻥ ﺭﺍ ﺩﺭ ﺑﺮ ﺑگیﺮﺩ)ﺍﺩﻏﺎﻡ ﺭﺩیﻔی ﺧﺎﻧﻪ ﻫﺎ( ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ tr, th
ﻣﺜﺎﻝ ﺟﺪﻭﻝ ﺳﺎﺩﻩ <html> <body> <table border='1'> <tr> <td>Cell 11</td> <td>Cell 12</td> </tr><tr> <td>Cell 21</td> <td>Cell 22</td> </tr></table> <hr/> <table border='1'> <tr> <td rowspan='2'>Cell 11 <br/>Cell 21</td> <td>Cell 12</td> </tr><tr> <!-- Cell 21 ommited --> <td>Cell 22</td> </tr></table> </body> </html>
ﺑﺮچﺴﺐ > <Tbody ﻧﺎﻡ ﺑﺮچﺴﺐ: Tbody ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ ﻧﺎﺣیﻪ ﺑﺪﻧﻪ ﺟﺪﻭﻝ ) (Table Body ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: – : Align ﺟﻬﺖ گیﺮی ﻣﺤﺘﻮﺍی یک ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘی( – : VAlign ﺟﻬﺖ گیﺮی ﻋﻤﻮﺩی ﻣﺤﺘﻮﺍی یک ﺧﺎﻧﻪ ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Table
ﺑﺮچﺴﺐ > <Thead ﻧﺎﻡ ﺑﺮچﺴﺐ: Thead ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ ﻧﺎﺣیﻪ ﻓﻮﻗﺎﻧی ﺟﺪﻭﻝ ) (Table Header ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: – : Align ﺟﻬﺖ گیﺮی ﻣﺤﺘﻮﺍی یک ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘی( – : VAlign ﺟﻬﺖ گیﺮی ﻋﻤﻮﺩی ﻣﺤﺘﻮﺍی یک ﺧﺎﻧﻪ ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Table
ﺑﺮچﺴﺐ > <Tfoot ﻧﺎﻡ ﺑﺮچﺴﺐ: Tfoot ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ ﻧﺎﺣیﻪ ﺗﺤﺘﺎﻧی ﺟﺪﻭﻝ ) (Table Footer ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: – : Align ﺟﻬﺖ گیﺮی ﻣﺤﺘﻮﺍی یک ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘی( – : VAlign ﺟﻬﺖ گیﺮی ﻋﻤﻮﺩی ﻣﺤﺘﻮﺍی یک ﺧﺎﻧﻪ ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Table
ﺑﺮچﺴﺐ > <Th ﻧﺎﻡ ﺑﺮچﺴﺐ: Th ﻭﻇیﻔﻪ: ﺗﻌﺮیﻒ یک ﺧﺎﻧﻪ ﺩﺍﺩﻩ ﺩﺭ ﺳﻄﺮ ﻧﺎﺣیﻪ ﻓﻮﻗﺎﻧی ﺟﺪﻭﻝ ) (Table Header Data ﺑﺪﻭﻥ ﻣﺤﺘﻮی: ﺧیﺮ ﺻﻔﺎﺕ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ: – : Align ﺟﻬﺖ گیﺮی ﻣﺤﺘﻮﺍی یک ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘی( – : VAlign ﺟﻬﺖ گیﺮی ﻋﻤﻮﺩی ﻣﺤﺘﻮﺍی یک ﺧﺎﻧﻪ ﻣﺤﻞ ﻗﺮﺍﺭگیﺮی: ﺩﺍﺧﻞ Thead>Tr
ﻣﺜﺎﻝ ﺟﺪﻭﻝ ﻧﺎﺣیﻪ ﺑﻨﺪی ﺷﺪﻩ <html> <body> <table border="1"> <thead><tr> <th>Month</th> <th>Pays</th> </tr></thead><tbody><tr> <td>January</td> <td>$100</td> </tr><tr> <td>February</td> <td>$80</td> </tr></tbody><tfoot><tr> <td>Sum</td> <td>$180</td> </tr></tfoot></table> </body> </html>
ﺟﺪﻭﻝ ﻫﺎی ﻗﺎﻟﺐ ﺑﻨﺪی • • ﻫﻨگﺎﻣی کﻪ ﺍﺯ ﺟﺪﺍﻭﻝ ﺑﺮﺍی ﻗﺎﻟﺐ ﺑﻨﺪی ﺻﻔﺤﻪ ﺍﺳﺘﻔﺎﺩﻩ ﻣی ﺷﻮﺩ، Border آﻨﻬﺎ ﺻﻔﺮ ﻗﺮﺍﺭ ﻣی گیﺮﺩ ﺗﺎ ﻣﺸﺨﺺ ﻧﺒﺎﺷﻨﺪ. ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ CSS ﻣی ﺗﻮﺍﻥ ﺑﻪ ﺟﺪﻭﻝ ﻫﺎ ﻧﻤﻮﺩ ﺑﺴیﺎﺭ ﺧﻮﺏ ﻭ ﻣﻄﻠﻮﺑی ﺩﺍﺩ. ﻗﺎﻟﺐ ﺑﻨﺪی ﺑﺎ ﺟﺪﺍﻭﻝ ﺑﺎﻋﺚ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺷﺪﻥ ﺷیﻮﻩ ﻧﻤﺎیﺶ ﺻﻔﺤﻪ ﻣی ﺷﻮﺩ. ﺟﺪﻭﻝ ﻫﺎ ﺑﺮ ﺍﺳﺎﺱ ﻧﻮﻉ ﺳﻨﺪ ) (DOCTYPE ﺑﻪ ﺍﻧﻮﺍﻉ ﻣﺨﺘﻠﻔی ﺗﻔﺴیﺮ ﻣی ﺷﻮﻧﺪ. • ﺑﺮﺍی ﻣﺜﺎﻝ ﺳﺎیﺖ bazitab. com ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺟﺪﺍﻭﻝ ﻗﺎﻟﺐ ﺑﻨﺪی ﺷﺪﻩ ﺍﺳﺖ:
ﻓﺮﻡ ﻫﺎ
ﻓﺮﻡ ﻫﺎی HTML • • ﻫﻤﺎﻧﻄﻮﺭی کﻪ ﺍﺷﺎﺭﻩ ﺷﺪ، پﺮﻭﺗکﻞ HTTP ﺑﺮ ﻣﺒﻨﺎی ﺗﻘﺎﺿﺎ/پﺎﺳﺦ کﺎﺭ ﻣی کﻨﺪ. ﺑﺮﺍی ﺍﺭﺳﺎﻝ یک ﺗﻘﺎﺿﺎی پﻮیﺎ ﺍﺯ ﺻﻔﺤﺎﺕ ﻭﺏ ﺑﻪ یک ﺳﺮﻭﺭ، ﺍﺯ ﻓﺮﻣﻬﺎی HTML ﺍﺳﺘﻔﺎﺩﻩ ﻣی ﺷﻮﺩ. ﻓﺮﻡ ﻭ ﺍﺟﺰﺍی آﻦ ﻧیﺰ ﺑﺮچﺴﺐ ﻫﺎی HTML ﻫﺴﺘﻨﺪ. ﺑﻪ ﻫﻨگﺎﻡ ﺍﺭﺳﺎﻝ ) (Submit یک ﻓﺮﻡ، کﺎﻭﺷگﺮ ﺑﻪ ﺻﻮﺭﺕ ﺍﺗﻮﻣﺎﺗیک ﻣﺤﺘﻮﺍی ﺩﺭﺧﻮﺍﺳﺖ ﻓﺮﻡ ﺭﺍ ﺑﻪ ﺳﺮﻭﺭ ﺍﺭﺳﺎﻝ ﻣی ﻧﻤﺎیﺪ. ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﺗﺼﺎﻻﺕ، ﻣی ﺗﻮﺍﻥ ﺩﺭﺧﻮﺍﺳﺖ ﻫﺎی Get ﺍیﺴﺘﺎ ﺍیﺠﺎﺩ کﺮﺩ. ﺩﺭﺧﻮﺍﺳﺖ ﻫﺎ ﺩﻭ ﻧﻮﻉ ﻣﻌﻤﻮﻝ ﺩﺍﺭﻧﺪ: Get ﻭ : Post – ﺩﺭ ﻧﻮﻉ Get پﺎﺭﺍﻣﺘﺮﻫﺎی ﺩﺭﺧﻮﺍﺳﺖ ﺩﺭ ﺍﻧﺘﻬﺎی URL ﺍﺿﺎﻓﻪ ﻣی ﺷﻮﻧﺪ ﻭ ﻗﺎﺑﻞ ﺩیﺪﻥ ﻫﺴﺘﻨﺪ، ﺑﻪ ﻫﻤیﻦ ﺩﻟیﻞ ﻣﺤﺪﻭﺩیﺖ ﺍﻧﺪﺍﺯﻩ ﺩﺍﺭﻧﺪ )1 کیﻠﻮﺑﺎیﺖ( – ﺩﺭ ﻧﻮﻉ Post پﺎﺭﺍﻣﺘﺮﻫﺎی ﺩﺭﺧﻮﺍﺳﺖ ﻏیﺮﻗﺎﺑﻞ ﺩیﺪ ﺑﻪ ﺳﺮﻭﺭ ﻓﺮﺳﺘﺎﺩﻩ ﻣی ﺷﻮﻧﺪ ﻭ ﻣﺤﺪﻭﺩیﺖ کﻤﺘﺮی ﺩﺍﺭﻧﺪ )46 ﻣگﺎﺑﺎیﺖ( • ﻣﺰﺍیﺎ ﻭ ﻣﻌﺎیﺐ Post ﻭ Get ﺩﺭ چیﺴﺖ؟ http: //hosting. pershe. com/viewticket. php? tid=109338&c=X 4 j. Q 3 Ukc ﺟﺪﺍکﻨﻨﺪﻩ پﺎﺭﺍﻣﺘﺮﻫﺎ ﺍﺯ آﺪﺭﺱ پﺎﺭﺍﻣﺘﺮﻫﺎی (c , tid) Get ﺟﺪﺍکﻨﻨﺪﻩ پﺎﺭﺍﻣﺘﺮﻫﺎ ﺍﺯ یکﺪیگﺮ
> <form • یک ﻓﺮﻡ HTML ﺩﺍﺧﻞ یک ﺑﺮچﺴﺐ Form ﻗﺮﺍﺭ ﻣی گیﺮﺩ. ﻫﺮ ﻓﺮﻡ ﻣی ﺗﻮﺍﻧﺪ )ﺩﺭ ﺣﺎﻟﺖ ﻣﻌﻤﻮﻝ( یک کﻠیﺪ ﺍﺭﺳﺎﻝ ) (Submit ﺩﺍﺷﺘﻪ ﺑﺎﺷﺪ، کﻪ ﺑﺎ کﻠیک ﺷﺪﻥ آﻦ یﺎ ﻓﺸﺮﺩﻩ ﺷﺪﻥ کﻠیﺪ Enter ﺩﺭ ﻫﺮ ﺟﺎی ﻓﺮﻡ، کﺎﻭﺷگﺮ ﺑﻪ ﻃﻮﺭ ﺧﻮﺩکﺎﺭ ﻣﺤﺘﻮﺍی ﻓﺮﻡ ﺭﺍ ﺍﺭﺳﺎﻝ کﺮﺩﻩ ﻭ ﺻﻔﺤﻪ ﺭﺍ ﺑﺎﺭگﺰﺍﺭی ﻣﺠﺪﺩ ﻣی کﻨﺪ. • یک ﻓﺮﻡ ﺩﻭ پﺎﺭﺍﻣﺘﺮ ﺍﺻﻠی ﺩﺍﺭﺍﺳﺖ: – : Method ﺷیﻮﻩ ﺍﺭﺳﺎﻝ ﺭﺍ ﻣﻌیﻦ ﻣی کﻨﺪ ) (Get/Post – : Action ﻣﻘﺼﺪی کﻪ ﺍﻃﻼﻋﺎﺕ ﺑﻪ آﻦ ﺍﺭﺳﺎﻝ ﻣی ﺷﻮﻧﺪ ﺭﺍ ﻣﺸﺨﺺ ﻣی ﺳﺎﺯﺩ. • ﺑﺮﺍی ﻣﺜﺎﻝ ﺑﻪ ﻓﺮﻡ ﺯیﺮ ﺗﻮﺟﻪ کﻨیﺪ: > <form></form > <form action=‘get. Data. php’ method=‘get’></form > <form action=‘http: //google. com/’ method=‘get’></form
> <input • ﻣﻌﻤﻮﻝ ﺗﺮیﻦ ﻓیﻠﺪﻫﺎیی کﻪ ﺩﺭ یک ﻓﺮﻡ ﻣﻮﺭﺩ ﺍﺳﺘﻔﺎﺩﻩ ﻗﺮﺍﺭ ﻣی گیﺮﻧﺪ، ﻓیﻠﺪﻫﺎی ﻭﺭﻭﺩ ﻣﺴﺘﻘیﻢ ﺍﻃﻼﻋﺎﺕ )ﺩکﻤﻪ یﺎ ﺟﻌﺒﻪ ﻣﺘﻦ( ﻫﺴﺘﻨﺪ. ﺍﻧﻮﺍﻉ ﻣﺨﺘﻠﻒ ﺍیﻦ ﻓیﻠﺪﻫﺎ ﺗﻮﺳﻂ ﺻﻔﺖ type ﻣﺸﺨﺺ ﻣی ﺷﻮﻧﺪ: – – – : Button یک ﺩکﻤﻪ ﻣﻌﻤﻮﻟی )ﺑﺮﺍی کﺎﺭﺑﺮﺩﻫﺎی ﺍﺳکﺮیپﺘی( : Checkbox یک ﻣﺮﺑﻊ ﺳﻔیﺪ کﻮچک ﻗﺎﺑﻞ ﺗیک ﺧﻮﺭﺩﻥ : File یک ﻓیﻠﺪ ﺍﻧﺘﺨﺎﺏ ﻓﺎیﻞ )ﺑﺮﺍی آپﻠﻮﺩ( : Hidden یک ﻓیﻠﺪ ﻣﺘﻨی ﻏیﺮﻗﺎﺑﻞ ﺩیﺪﻥ )ﺩﺍﺭﺍی کﺎﺭﺑﺮﺩﻫﺎی ﻓﺮﺍﻭﺍﻥ( : Password یک ﻓیﻠﺪ ﻣﺘﻨی کﻪ ﻣﺤﺘﻮﺍی ﺧﻮﺩ ﺭﺍ ﺑﻪ ﺷکﻞ ﺳﺘﺎﺭﻩ ﻧﺸﺎﻥ ﻣی ﺩﻫﺪ : Radio یک ﺩﺍیﺮﻩ کﻮچک. ﺍﺯ یک ﻣﺠﻤﻮﻋﻪ Radio ﺗﻨﻬﺎ یکی ﻣی ﺗﻮﺍﻧﺪ ﺍﻧﺘﺨﺎﺏ ﺷﻮﺩ : Text ﻓیﻠﺪ ﻣﺘﻨی ﻣﻌﻤﻮﻟی : Submit ﺩکﻤﻪ ﺍﺭﺳﺎﻝ ﻓﺮﻡ : Reset ﺩکﻤﻪ پﺎک کﺮﺩﻥ ﻣﺤﺘﻮﺍی ﺗﻤﺎﻡ ﻓیﻠﺪﻫﺎی ﻓﺮﻡ
<input> ﻣﺜﺎﻝ <html><body> <form method='get'> <input type='checkbox'> I am a checkbox! <br/> <input type='file'> <br/> <input type='password' value='sth'> <br/> <input type='radio'> Radio button! <br/> <input type='text' value='Normal!'> <br/> <input type='submit'> | <input type='button'> </form> </body></html>
> ) <input ﺍﺩﺍﻣﻪ( • ﺗﻘﺮیﺒﺎ ﺍکﺜﺮ ﻓیﻠﺪﻫﺎی یک ﻓﺮﻡ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺑﺮچﺴﺐ input ﺗﺎﻣیﻦ ﻣی ﺷﻮﻧﺪ! ﺻﻔﺎﺕ ﻣﻌﻤﻮﻝ یک input ﺑﻪ ﺷﺮﺡ ﺯیﺮﻧﺪ: – – : Checked ﺩﺭ ﺻﻮﺭﺗی کﻪ Radio یﺎ Checkbox ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ، ﻣی ﺗﻮﺍﻧﺪ ﺗیک ﺧﻮﺭﺩﻥ یﺎ ﻧﺨﻮﺭﺩﻥ آﻨﺮﺍ ﻣﺸﺨﺺ کﻨﺪ : Checked=‘Checked’ or else : Disabled ﻫﺮ ﻭﺭﻭﺩی کﻪ ﻏیﺮﻓﻌﺎﻝ ﺷﻮﺩ، ﺧﺎکﺴﺘﺮی ﺷﺪﻩ ﻭ ﻏیﺮﻗﺎﺑﻞ ﺗﻌﺎﻣﻞ ﺧﻮﺍﻫﺪ ﺷﺪ. : Max. Length ﺑﺮﺍی text یﺎ password ﺣﺪﺍکﺜﺮ ﺗﻌﺪﺍﺩ کﺎﺭﺍکﺘﺮ ﻗﺎﺑﻞ ﺗﺎیپ ﺍﺳﺖ : Readonly ﺑﺮﺍی ﻓیﻠﺪﻫﺎی text یﺎ ،password آﻨﻬﺎ ﺭﺍ ﻏیﺮﻗﺎﺑﻞ ﺗﻐییﺮ ﻣی کﻨﺪ : Size ﺍﻧﺪﺍﺯﻩ ﻇﺎﻫﺮی ﻓیﻠﺪ ﺭﺍ ﻣﺸﺨﺺ ﻣی کﻨﺪ )ﺑﺮ ﺣﺴﺐ ﺗﻌﺪﺍﺩ کﺎﺭﺍکﺘﺮ( : Value ﺑﺮﺍی ﺩکﻤﻪ ﻫﺎ، ﻣﺘﻦ ﺭﻭی آﻨﻬﺎ ﺭﺍ ﻣﺸﺨﺺ ﻣی ﺳﺎﺯﺩ. ﺑﺮﺍی ﻣﺎﺑﻘی، ﻣﺤﺘﻮﺍی ﻣﻘﺪﺍﺭی ﺭﺍ ﻣﺸﺨﺺ ﻣی کﻨﺪ )کﻪ ﻓﻘﻂ ﺩﺭ ﻓیﻠﺪﻫﺎی ﻣﺘﻨی ﻗﺎﺑﻞ ﻣﺸﺎﻫﺪﻩ ﺍﺳﺖ(. ﺍیﻦ ﻣﺤﺘﻮﺍ پﺲ ﺍﺯ ﺍﺭﺳﺎﻝ ﻓﺮﻡ، ﺑﻪ ﺳﺮﻭﺭ ﺍﺭﺳﺎﻝ ﻣی ﺷﻮﺩ. : Name ﻧﺎﻣیﺴﺖ کﻪ ﺳﺮﻭﺭ ﺍﻃﻼﻋﺎﺕ ﻫﺮ ﻓیﻠﺪ ﺭﺍ ﺑﺎ آﻦ ﺗﻤیﺰ ﻣی ﺩﻫﺪ.
<input> ﻣﺜﺎﻝ ﺩﻭﻡ <html><body> <form method='get' action='http: //google. com/search'> : <ﻋﺒﺎﺭﺗی ﺭﺍ ﻭﺍﺭﺩ کﻨیﺪ ﺗﺎ ﺩﺭ گﻮگﻞ ﺟﺴﺘﺠﻮ ﺷﻮﺩ br/> <input text' value='Search String' /> <br/> <input type='submit' value='Search'><br/> </form> </body></html>
> <textarea • • ﺑﺮچﺴﺐ > <textarea ﺟﻬﺖ ﺗﻌﺮیﻒ یک ﻣﺤیﻂ ﻭﺭﻭﺩ ﻣﺘﻦ )چﻨﺪ ﺧﻄی( ﺍﺳﺘﻔﺎﺩﻩ ﻣی ﺷﻮﺩ. ﺍﺯ ﺍیﻦ ﺑﺮچﺴﺐ ﻫﻨگﺎﻣی کﻪ ﻻﺯﻡ ﺍﺳﺖ ﻣﺘﻦ ﺑﺰﺭگی ﻭﺍﺭﺩ ﺷﻮﺩ، ﺍﺳﺘﻔﺎﺩﻩ ﻣی کﻨﻨﺪ. ﺻﻔﺖ readonly ﺑﺮﺍی ﺍیﻦ ﺑﺮچﺴﺐ ﻣﻌﺘﺒﺮ ﺍﺳﺖ. ﺻﻔﺎﺕ rows ﻭ cols ﺑﻪ ﺗﺮﺗیﺐ ﺗﻌﺪﺍﺩ ﺳﻄﺮﻫﺎ ﻭ ﺳﺘﻮﻥ ﻫﺎی یک ﻣﺤﻮﻃﻪ ﻣﺘﻨی ﺭﺍ ﺑﺮ ﺣﺴﺐ کﺎﺭﺍکﺘﺮ ﻣﺸﺨﺺ ﻣی کﻨﻨﺪ. ﺩﻗﺖ کﻨیﺪ ﻫﻨگﺎﻣی کﻪ ﻣی ﺧﻮﺍﻫیﺪ یک ﻓﻀﺎی ﻣﺘﻦ ﺧﺎﻟی ﺍیﺠﺎﺩ کﻨیﺪ، ﺑیﻦ ﺷﺮﻭﻉ ﻭ پﺎیﺎﻥ ﺑﺮچﺴﺐ، ﺧﻂ یﺎ ﻓﺎﺻﻠﻪ ﻭﺟﻮﺩ ﻧﺪﺍﺷﺘﻪ ﺑﺎﺷﺪ، ﺯیﺮﺍ ﻫﺮچیﺰی کﻪ ﻣﺎﺑیﻦ ﺩﻭ ﺑﺮچﺴﺐ textarea ﺑﺎﺷﺪ، ﻣﺤﺘﻮی آﻦ ﻣﺤﺴﻮﺏ ﻣی گﺮﺩﺩ: <textarea rows=‘ 5’ cols=‘ 10’>Hello > There</textarea ﻫﻤﺎﻧﻄﻮﺭ کﻪ ﻣﺸﺎﻫﺪﻩ ﻣی کﻨیﺪ، ﻣﺘﺤﻮﺍی textarea ﺍﺯ ﺍﺻﻮﻝ HTML پیﺮﻭی ﻧﻤی کﻨﺪ )ﻋﺪﻡ ﺍﺣﺘیﺎﺝ ﺑﻪ >/ (<br
> <select • • • ﺑﺮچﺴﺐ Select یک Dropdown Combo ﺍیﺠﺎﺩ ﻣی کﻨﺪ، یﻌﻨی ﻟیﺴﺘی کﻪ ﺗﻨﻬﺎ یک ﻋﻨﺼﺮ آﻦ ﻣﺸﺨﺺ ﺍﺳﺖ ﻭ ﺑﺎ کﻠیک ﺑﺮ ﺭﻭی آﻦ، ﻣﺎﺑﻘی ﺑﻪ ﺻﻮﺭﺕ کﺮکﺮﻩ ﺍی ﻗﺎﺑﻞ ﺍﻧﺘﺨﺎﺏ ﻣی گﺮﺩﻧﺪ. ﺩﺭ ﺻﻮﺭﺗی کﻪ ﺻﻔﺖ Mutiple ﺍﺯ یک Select ﺗﻨﻈیﻢ ﺷﻮﺩ، ﺩیگﺮ کﺮکﺮﻩ ﺍی ﻧﺒﻮﺩﻩ ﻭ ﺑﻪ ﻣﺎﻧﻨﺪ یک ﻟیﺴﺖ ﻣﻌﻤﻮﻟی ﺑﺎ ﻗﺎﺑﻠیﺖ ﺍﻧﺘﺨﺎﺏ چﻨﺪیﻦ ﻣﻮﺭﺩ ﺧﻮﺍﻫﺪ ﺑﻮﺩ. ﻣﺤﺘﻮیﺎﺕ ﻟیﺴﺘﻬﺎی ﺍیﻨگﻮﻧﻪ ﺩﺭ ﻗﺎﻟﺐ یک آﺮﺍیﻪ ﺑﺮﺍی ﺳﺮﻭﺭ ﺍﺭﺳﺎﻝ ﻣی ﺷﻮﻧﺪ. ﻣﻮﺍﺭﺩ یک ﻟیﺴﺖ Select ﺗﻮﺳﻂ ﺑﺮچﺴﺐ ﻫﺎی Option ﻣﺸﺨﺺ ﻣی گﺮﺩﻧﺪ. ﻫﺮ Option ﺍی کﻪ ﺻﻔﺖ Selected آﻦ ﺗﻨﻈیﻢ ﺷﺪﻩ ﺑﺎﺷﺪ، ﺩﺭ ﻟیﺴﺖ ﺑﻪ ﺻﻮﺭﺕ ﺍﻧﺘﺨﺎﺏ ﺷﺪﻩ ﺧﻮﺍﻫﺪ ﺑﻮﺩ. ﻫﺮ Option ﺍگﺮ ﺻﻔﺖ Value ﺗﻨﻈیﻢ ﺷﺪﻩ ﺩﺍﺷﺘﻪ ﺑﺎﺷﺪ، ﺩﺭ ﺻﻮﺭﺕ ﺍﻧﺘﺨﺎﺏ، Value آﻦ ﺑﻪ ﺳﺮﻭﺭ ﺍﺭﺳﺎﻝ ﻣی ﺷﻮﺩ ﻭ ﺩﺭ ﻏیﺮ ﺍیﻨﺼﻮﺭﺕ ﻣﺤﺘﻮﺍی ﻣﺘﻨی آﻦ.
<select> ﻣﺜﺎﻝ <html><body> <select> <option value='Wood'> /<چﻮﺏ option> <option value='Iron'> /<آﻬﻦ option> <option value='Stone'> /<ﺳﻨگ option> </select> </body></html>
> <label>, <fieldset • ﺑﺮﺍی ﺗﻨﻈیﻢ ﺭﺍﻫﻨﻤﺎ ﻭ ﻣﺘﻦ ﻣﻌﺮﻑ یک ﻓیﻠﺪ ﺩﺭ یک ﻓﺮﻡ، ﺑﻬﺘﺮ ﺍﺳﺖ ﺑﺠﺎی ﻣﺘﻦ ﻋﺎﺩی ﺍﺯ ﺑﺮچﺴﺐ Label ﺍﺳﺘﻔﺎﺩﻩ کﻨیﻢ. ﺍیﻨکﺎﺭ ﺗﻮﺍﻧﺎیی ﻗﺎﻟﺐ ﺑﻨﺪی ﺻﻔﺤﺎﺕ ﺭﺍ ﺑیﺸﺘﺮ ﻣی کﻨﺪ. • ﺗﻨﻬﺎ ﺻﻔﺖ یک For ،Label ﺍﺳﺖ کﻪ ﻧﺎﻡ یک ﻓیﻠﺪ ﺩیگﺮ ﺭﺍ ﺩﺭیﺎﻓﺖ ﻣی کﻨﺪ. > <label for=‘myname’>Enter your name: </label >/ ’ <input type=‘text’ name=‘myname • ﺑﺮﺍی گﺮﻭﻩ ﺑﻨﺪی ﻣﻨﻄﻘی ﺩﺳﺘﻪ ﺍی ﺍﺯ ﻓیﻠﺪﻫﺎی یک ﻓﺮﻡ، ﺍﺯ ﺑﺮچﺴﺐ fieldset ﺍﺳﺘﻔﺎﺩﻩ ﻣی ﺷﻮﺩ. ﺍیﻨکﺎﺭ ﻣﺨﺼﻮﺻﺎ ﺩﺭ ﻫﻨگﺎﻡ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ Radio ﻫﺎی ﻣﺘﻌﺪﺩ ﻻﺯﻡ ﺍﺳﺖ: > <fieldset >’ <input type=‘radio’><input type=‘radio > </fieldset><fieldset > <input type=‘radio’><input type=‘radiou’></fieldset
ﻧکﺎﺕ ﺳﻮﺩﻣﻨﺪ
ﺻﻔﺘﻬﺎی ﺍﺷﺘﺮﺍکی • ﺷﺶ ﺻﻔﺖ ﻭﺟﻮﺩ ﺩﺍﺭﻧﺪ کﻪ ﺑﺮﺍی ﺗﻤﺎﻣی ﺑﺮچﺴﺐ ﻫﺎی HTML ﻣﻌﺘﺒﺮ ﻫﺴﺘﻨﺪ: – ﺻﻔﺘﻬﺎی ﻫﺴﺘﻪ ﺍی: • • : Class کﻼﺱ یک ﺑﺮچﺴﺐ ﺭﺍ ﻣﺸﺨﺺ ﻣی ﺳﺎﺯﺩ )ﺑﺮﺍی ﺍﺳﺘﻔﺎﺩﻩ ﺩﺭ (CSS : Id یک ﺍﺳﻢ ﺑﺮﺍی ﺑﺮچﺴﺐ ﻣﺸﺨﺺ ﻣی کﻨﺪ. ﺩﺭ یک ﺳﻨﺪ HTML ﺍﺳﻢ ﻫیچ ﺩﻭ ﺑﺮچﺴﺒی ﻧﺒﺎیﺪ یکﺴﺎﻥ ﺑﺎﺷﺪ. ﺩﺭ ﺍﺳکﺮیپﺖ ﻭ CSS ﻣی ﺗﻮﺍﻥ ﺑﺎ ﺍﺳﻢ ﺑﺮﺩﻥ یک ﺑﺮچﺴﺐ ﺑﻪ آﻦ ﺩﺳﺘﺮﺳی یﺎﻓﺖ. : Style ﻭﺿﻌیﺖ ﻇﺎﻫﺮی یک ﺑﺮچﺴﺐ ﺭﺍ ﻣﺸﺨﺺ ﻣی کﻨﺪ )ﺗﻮﺻیﻪ ﻣی ﺷﻮﺩ ﺑﻪ ﺟﺎی آﻦ ﺍﺯ CSS ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ( : Title ﻣﺘﻦ ﺭﺍﻫﻨﻤﺎی کﻤکی ﺑﺮچﺴﺐ ﺭﺍ ﻣﺸﺨﺺ ﻣی کﻨﺪ )ﺑﺎ ﻧگﻪ ﺩﺍﺷﺘﻦ ﻣﺎﻭﺱ ﻧﻤﺎیﺎﻥ ﻣی ﺷﻮﺩ( – ﺻﻔﺖ ﺯﺑﺎﻧی: • : Dir ﺟﻬﺖ ﻣﺘﻦ، LTR یﺎ RTL – ﺻﻔﺖ ﺩﺳﺘیﺎﺑی: • : Tabindex ﺗﺮﺗیﺐ ﺩﺳﺘﺮﺳی ﺑﻪ یک ﺑﺮچﺴﺐ ﺭﺍ ﺑﺮﺍی ﺍﺳﺘﻔﺎﺩﻩ کﻨﻨﺪگﺎﻥ ﺍﺯ کیﺒﻮﺩ ﻣﺸﺨﺺ ﻣی ﺳﺎﺯﺩ. ﺩﺭ ﺻﻮﺭﺗی کﻪ ﺑﺮ ﺭﻭی کیﺒﻮﺭﺩ کﻠیﺪ TAB ﺭﺍ ﻓﺸﺎﺭ ﺩﻫیﺪ، ﺑﻪ ﺗﺮﺗیﺐ Tabindex ﺭﻭی ﻋﻨﺎﺻﺮ ﺟﺎﺑﺠﺎ ﺧﻮﺍﻫیﺪ ﺷﺪ.
ﺑﺮچﺴﺐ ﻫﺎی ﺩیگﺮ • ﺑﺮچﺴﺐ ﻫﺎی ﺯیﺮ ﻧیﺰ ﺩﺭ HTML ﻭﺟﻮﺩ ﺩﺍﺭﻧﺪ کﻪ ﺩﺭ ﺩﻭﺭﻩ ﻫﺎی ﺩیگﺮی ﻣﻄﺮﺡ ﺧﻮﺍﻫﻨﺪ ﺷﺪ: – : Style یک ﺳﻨﺪ CSS ﺩﺭ ﺩﺭﻭﻥ ﺍیﻦ ﺑﺮچﺴﺐ ﺗﻌﺮیﻒ ﻣی ﺷﻮﺩ – : Script ﺍﺳکﺮیپﺘﻬﺎی Javascript ﺩﺭﻭﻥ ﺍیﻦ ﺑﺮچﺴﺐ ﻧﻮﺷﺘﻪ ﻣی ﺷﻮﻧﺪ – : Meta ﺑﺮﺍی ﺗﻌﺮیﻒ ﻣﺘﺎﺩﺍﺩﻩ ﺩﺭ Head یک ﺳﻨﺪ. ﺑﺮچﺴﺐ ﻫﺎی ﻣﺘﺎ ﺩﺭ ﻭﺍﻗﻊ ﻣی ﺗﻮﺍﻧﻨﺪ ﻣکﻤﻞ پﺎﺭﺍﻣﺘﺮﻫﺎی HTTP ﺑﺎﺷﻨﺪ. • ﺻﻔﺖ Content ﺑﺮﺍی ﻣﺸﺨﺺ کﺮﺩﻥ ﻣﺤﺘﻮﺍی Header • ﺻﻔﺖ http-equiv ﺑﺮﺍی ﻣﺸﺨﺺ کﺮﺩﻥ ﺧﻮﺩ Header • ﺻﻔﺖ Name ﺑﺮﺍی ﻣﺸﺨﺺ کﺮﺩﻥ ﻧﺎﻡ ﻣﺘﺎ ﺩﺍﺩﻩ – : Link ﺑﺮﺍی ﺗﻌﺮیﻒ یک ﻣﻨﺒﻊ ﺧﺎﺭﺟی: • : Rel ﺭﺍﺑﻄﻪ ﻣﻨﺒﻊ ﺑﺎ ﺳﻨﺪ • : Href آﺪﺭﺱ ﻣﻨﺒﻊ • : Type ﻧﻮﻉ ﻣﻨﺒﻊ >/ " <link rel="shortcut icon" href="/favicon. ico" type="image/x-icon
ﺗﻤﺮیﻨﺎﺕ
ﺗﻤﺮیﻨﺎﺕ 1. 2. 3. 4. 5. 6. یک ﺳﻨﺪ HTML ﺑﺴﺎﺯیﺪ کﻪ ﺗﻮﺳﻂ آﻦ ﺑﺘﻮﺍﻧیﺪ ﺟﺴﺘﺠﻮی ﺗﺼﺎﻭیﺮ گﻮگﻞ ﺭﺍ ﺍﻧﺠﺎﻡ ﺩﻫیﺪ. یک ﺻﻔﺤﻪ ﺳﻪ ﺳﺘﻮﻧی )ﻣﺎﻧﻨﺪ (SBCE ﺑﺴﺎﺯیﺪ ﻭ آﻨﺮﺍ ﺑﺎ ﻣﻄﺎﻟﺐ ﺩﻟﺨﻮﺍﻩ پﺮ کﻨیﺪ، ﺳپﺲ آﻨﺮﺍ ﺑﺮ ﺭﻭی کﺎﻭﺷگﺮﻫﺎی ﻣﺨﺘﻠﻒ )ﺣﺪﺍﻗﻞ Firefox ﻭ (IE ﺗﺴﺖ کﻨیﺪ ﻭ ﺗﻔﺎﻭﺗﻬﺎ ﺭﺍ ﺑیﺎﻥ کﻨیﺪ. ﺳﻌی کﻨیﺪ ﺳﻨﺪ ﺭﺍ ﻃﻮﺭی ﺍﺻﻼﺡ کﻨیﺪ کﻪ ﺩﺭ ﻫﻤﻪ کﺎﻭﺷگﺮﻫﺎ یکﺠﻮﺭ ﺩیﺪﻩ ﺷﻮﺩ. یک ﻭﺑﻼگ ﺩﺳﺘی ﺑﺴﺎﺯیﺪ. ﻭﺑﻼگ ﺷﻤﺎ ﺑﺎیﺪ چﻨﺪیﻦ ﻣﻄﻠﺐ ﺩﺍﺷﺘﻪ ﺑﺎﺷﺪ. ﻫﻤچﻨیﻦ ﺩﺭ ﻭﺑﻼگ ﺑﺎیﺪ چﻨﺪ ﻓﺎیﻞ ﺑﺮﺍی ﺩﺍﻧﻠﻮﺩ ﻭﺟﻮﺩ ﺩﺍﺷﺘﻪ ﺑﺎﺷﺪ. یک ﺳﺎیﺖ ﻣﻌﺘﺒﺮ )ﻣﺎﻧﻨﺪ (Download. com ﺭﺍ ﺑﺎﺯ کﻨیﺪ، ﺳﻌی کﻨیﺪ ﻫﻤﺎﻧﻨﺪ آﻨﺮﺍ ﺑﺴﺎﺯیﺪ )ﺍﺯ ﻧﻈﺮ ﻇﺎﻫﺮ ﻋیﻨﺎ ﺑﺮﺍﺑﺮ ﺑﺎﺷﺪ(. ﺗﻤﺎﻡ ﻟیﻨکﻬﺎیی کﻪ ﺩﺭ آﻦ ﺳﺎیﺖ ﻭﺟﻮﺩ ﺩﺍﺭﺩ ﺭﺍ ﺑﻪ ﻫﻤﺎﻥ ﻣﻘﺼﺪ پیﻮﻧﺪ ﺑﺰﻧیﺪ، ﺑﻪ ﻃﻮﺭی کﻪ ﺍگﺮ کﺴی ﺳﻨﺪ ﺷﻤﺎ ﺭﺍ ﺩیﺪ، ﻧﺘﻮﺍﻧﺪ ﺗﻔﺎﻭﺕ آﻨﺮﺍ ﺑﺎ ﺳﺎیﺖ ﺍﺻﻠی ﺗﺸﺨیﺺ ﺩﻫﺪ. یک ﻓﺮﻡ ﺯیﺒﺎ ﻭ ﻗﺎﻟﺐ ﺑﻨﺪی ﺷﺪﻩ ﺑﺮﺍی ﺩﺭیﺎﻓﺖ ﺍﻃﻼﻋﺎﺕ کﺎﻣﻞ یک کﺎﺭﺑﺮ ﻃﺮﺍﺣی کﻨیﺪ. ﺑﺎ ﻣﺮﺍﺟﻌﻪ ﺑﻪ ﺍیﻨﺘﺮﻧﺖ ﻭ ﻣﻄﺎﻟﻌﻪ ﺑیﺸﺘﺮ ﺭﺍﺟﻊ ﺑﻪ ﺑﺮچﺴﺐ ،IMG یک ﺗﺼﻮیﺮ ﺍیﺠﺎﺩ کﻨیﺪ کﻪ ﺑﺎ کﻠیک ﺑﺮ ﺭﻭی ﻫﺮ ﻗﺴﻤﺘی ﺍﺯ آﻦ، یک ﺳﺎیﺖ ﻣﺠﺰﺍ ﺑﺎﺯ ﺷﻮﺩ. )ﻗﺴﻤﺘﻬﺎ ﻟﺰﻭﻣﺎ ﻣﺮﺑﻌی ﻧﺒﺎﺷﻨﺪ(
38c18558860b1a37f228833a4e1ee0a3.ppt