HTML Css W3schools
Uploaded by
Hani JahanHTML Css W3schools
Uploaded by
Hani JahanLearn HTML and CSS with w3schools 2012
ﻣﻘﺪﻣﻪ ﺍﻱ ﺑﺮ HTML
ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﺎ ﻭﻳﮋﮔﻴﻬﺎﻱ ﻓﺎﻳﻠﻬﺎﻱ HTMLﻳﺎ ﺍﭼﺘﻤﻞ ﻭ ﻧﺤﻮﻩ ﺍﻳﺠﺎﺩ ﻳﻚ ﻓﺎﻳﻞ ﺳﺎﺩﻩ ﻭ ﻧﻤﺎﻳﺶ ﺁﻥ ﺩﺭ ﺻﻔﺤﻪ ﻣﺮﻭﺭﮔﺮﺗﺎﻥ ﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ.
)ﻳﺎﺩﺁﻭﺭﻱ :ﻣﺮﻭﺭﮔﺮ ،ﺑﺮﻭﺯﺭ ﻭ Browserﻫﻤﮕﻲ ﻳﻜﻲ ﻫﺴﺘﻨﺪ ﻭ ﺑﻪ ﻧﺮﻡ ﺍﻓﺰﺍﺭﻱ ﺍﻃﻼﻕ ﻣﻴﺸﻮﺩ ﻛﻪ ﺑﻪ ﻧﻤﺎﻳﺶ ﺻﻔﺤﺎﺕ HTMLﺑﺮﺩﺍﺧﺘﻪ ﻭ ﻭﺍﺳﻄﻪ
ﻛﺎﺭﺑﺮ ﺑﺎ ﺩﻧﻴﺎﻱ ﺍﻳﻨﺘﺮﻧﺖ ﺍﺳﺖ(.
ﻳﻚ ﻓﺎﻳﻞ HTMLﭼﻴﺴﺖ؟
HTMLﺭﺍ "ﺍچ ﺗﻲ ﺍﻡ ﺍﻝ" ﻭ ﻳﺎ ﺍﭼﺘﻤﻞ ﺑﺨﻮﺍﻧﻴﺪ. •
HTMLﺑﺮﮔﺮﻓﺘﻪ ﺍﺯ ﺣﺮﻭﻑ ﺍﻭﻝ Language Markup Text Hyper •
ﻣﻴﺒﺎﺷﺪ.
ﻳﻚ ﻓﺎﻳﻞ HTMLﻓﺎﻳﻠﻲ ﺍﺯ ﻧﻮﻉ textﻣﻴﺒﺎﺷﺪ ﻛﻪ ﻣﺘﺸﻜﻞ ﺍﺯ markup tagﻫﺎ ﻣﻴﺒﺎﺷﺪ. •
ﻣﺮﻭﺭﮔﺮ ﻳﺎ Browserﺍﺯ ﺭﻭﻱ markup tagﻫﺎ ﻣﻲ ﻓﻬﻤﺪ ﻛﻪ ﭼﮕﻮﻧﻪ ﺑﺎﻳﺪ ﺻﻔﺤﻪ ﺭﺍ ﻧﻤﺎﻳﺶ ﺑﺪﻫﺪ. •
ﻳﻚ ﻓﺎﻳﻞ HTMLﺑﺎﻳﺪ ﺩﺍﺭﺍﻱ ﺍﻧﺸﻌﺎﺏ htmﻭ ﻳﺎ htmlﺑﺎﺷﺪ. •
ﻳﻚ ﻓﺎﻳﻞ HTMLﻓﺎﻳﻠﻲ ﺍﺯ ﻧﻮﻉ ﻣﺘﻦ ﻭ textﻣﻴﺒﺎﺷﺪ ﻛﻪ ﺑﺎ ﻫﺮ ﻭﻳﺮﺍﻳﺸﮕﺮ ﻭ ﺍﺩﻳﺘﻮﺭﻱ ﺳﺎﺩﻩ ﺍﻱ ﻗﺎﺑﻞ ﺍﻳﺠﺎﺩ ﺍﺳﺖ. •
ﻭﻇﻴﻔﻪ ﺍﺻﻠﻲ ﺗﮓ ﻫﺎﻱ ﺍﭼﺘﻤﻞ ) ( markup tagsﺑﻴﺎﻥ ﭼﮕﻮﻧﮕﻲ ﻧﻤﺎﻳﺶ ﺍﻃﻼﻋﺎﺕ ﻣﻴﺒﺎﺷﺪ. •
ﻣﻴﺨﻮﺍﻫﻴﺪ ﻛﻪ ﻳﻚ ﻓﺎﻳﻞ ﺍﭼﺘﻤﻞ ﺑﺴﺎﺯﻳﺪ؟
ﺍﮔﺮ ﺍﺯ ﻭﻳﻨﺪﻭﺯ ﻣﺎﻳﻜﺮﻭﺳﺎﻓﺖ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻴﺪ Notepad ،ﺭﺍ ﺑﺎﺯ ﻛﺮﺩﻩ ) Macﻛﺎﺭﻫﺎ ﺍﺯ SimplaeTextﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻨﺪ ( .ﻭ ﻣﺘﻦ ﺯﻳﺮ ﺭﺍ ﺩﺭ ﺁﻥ ﺗﺎﻳﭗ
ﻛﻨﻴﺪ:
><html
><head
><title>Title of page</title
></head
><body
>This is my first html page. <b>This text is bold</b
></body
></html
ﺳﭙﺲ ﻓﺎﻳﻞ ﺭﺍ ﺑﺎ ﻧﺎﻡ ﻣﺜﻼ test.htmlﺩﺭ ﺩﺭﺍﻳﻮ \:cﺫﺧﻴﺮﻩ ﻛﻨﻴﺪ.
1 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﺑﺮﺍﻱ ﺩﻳﺪﻥ ﻓﺎﻳﻞ ﺍﭼﺘﻤﻞ ﺑﺎﻻ ﺩﺭ ﻣﺮﻭﺭﮔﺮ ﻳﺎ Browerﺗﺎﻥ ) ﻣﻌﻤﻮﻻ ﺍﻳﻨﺘﺮﻧﺖ ﺍﻛﺴﭙﻠﻮﺭﺭ ﻭ ﻳﺎ ( Firefoxﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﺍﺯ ﺭﻭﻱ ﻣﻨﻮﻱ
File/Open fileﻓﺎﻳﻞ ﺑﺎﻻ ﺭﺍ ﺍﺯ ﺭﻭﻱ ﻣﺤﻞ ﺫﺧﻴﺮﻩ ﺷﺪﻩ ﺑﺨﻮﺍﻧﻴﺪ ) .ﺑﻪ ﺁﺩﺭﺱ ﻓﺎﻳﻞ ﺩﺭ ﻗﺴﻤﺖ Addressﺗﻮﺟﻪ ﻛﻨﻴﺪ ،ﻣﺜﻼ (c:\test.html
ﻳﻜﻲ ﺍﺯ ﻣﻬﻤﺘﺮﻳﻦ ﻭﻇﺎﻳﻒ ﻣﺮﻭﺭﮔﺮﻫﺎ ﻧﻤﺎﻳﺶ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﻣﻴﺒﺎﺷﺪ ،ﭼﻪ ﺍﻳﻦ ﺻﻔﺤﺎﺕ ﺭﻭﻱ ﻛﺎﻣﭙﻴﻮﺗﺮ ﺷﻤﺎ ﺫﺧﻴﺮﻩ ﺷﺪﻩ ﺑﺎﺷﻨﺪ ﻭ ﻳﺎ ﺍﻳﻨﻜﻪ ﺭﻭﻱ
ﺳﺮﻭﺭﻱ ﺩﻳﮕﺮ ﺍﺯ ﺍﻳﻨﺘﺮﻧﺖ ﺧﻮﺍﻧﺪﻩ ﺷﻮﻧﺪ .ﺑﺎ ﻛﻠﻴﻚ ﺭﻭﻱ ﺍﻳﻦ ﻟﻴﻨﻚ ﻓﺎﻳﻠﻲ ﺷﺒﻴﻪ ﻓﺎﻳﻞ ﺫﺧﻴﺮﻩ ﺷﺪﻩ ﺗﻮﺳﻂ ﺷﻤﺎ ﺍﺯ ﺭﻭﻱ ﻭﺏ ﺳﺮﻭﺭ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮﺗﺎﻥ
ﺧﻮﺍﻧﺪﻩ ﺷﺪﻩ ﻭ ﺳﭙﺲ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ!!! ) ﺑﻪ ﺁﺩﺭﺱ ﻓﺎﻳﻞ ﺩﺭ ﻗﺴﻤﺖ Addressﺗﻮﺟﻪ ﻛﻨﻴﺪ ،ﻣﺜﻼ
( http://www.khaterat.com/html/dars/test.html
ﺗﻮﺿﻴﺢ ﻣﺜﺎﻝ ﺑﺎﻻ
ﺍﻭﻟﻴﻦ ﺗﮓ ﻣﺜﺎﻝ ﺑﺎﻻ ﺗﮓ > <htmlﻣﻴﺒﺎﺷﺪ .ﺍﺯ ﺭﻭﻱ ﺍﻳﻦ ﺗﮓ ،ﻣﺮﻭﺭﮔﺮ ﻧﻮﻉ ﻣﺘﻦ ﻳﻌﻨﻲ ﺍﭼﺘﻤﻞ ﺑﻮﺩﻧﺶ ﺭﺍ ﻳﺎﻓﺘﻪ ﻭ ﺍﺯ ﺭﻭﻱ > </htmlﺍﻧﺘﻬﺎﻱ ﻣﺘﻦ
ﺍﭼﺘﻤﻞ ﺭﺍ ﻣﻴﺒﺎﺑﺪ.
ﻣﺘﻦ ﺑﻴﻦ ﺗﮓ > <headﻭ ﺗﮓ > </headﺍﻃﻼﻋﺎﺕ ﺷﻨﺎﺳﻨﺎﻣﻪ ﺍﻱ ﻳﺎ " "Header informationﻣﺘﻦ ﺍﭼﺘﻤﻞ ﺑﻮﺩﻩ ﻭ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﻧﺨﻮﺍﻫﻨﺪ
ﺷﺪ .ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﺑﺎ ﻛﻤﻚ ﺗﮕﻬﺎﻱ > <titleﻭ > </titleﺗﻴﺘﺮ ﻭ ﻳﺎ Titleﺻﻔﺤﻪ ﻛﻪ ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﻋﺒﺎﺭﺕ " "Title of pageﻣﻴﺒﺎﺷﺪ ﺩﺭ
ﺑﺎﻻﻱ ﻣﺮﻭﺭﮔﺮ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ.
ﻣﺘﻦ ﺑﻴﻦ ﺗﮓ > <bodyﻭ ﺍﻧﺘﻬﺎﻱ ﺁﻥ ﻳﻌﻨﻲ ﺗﮓ > </bodyﺗﻨﻬﺎ ﺍﻃﻼﻋﺎﺗﻲ ﺍﺳﺖ ﻛﻪ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﻨﺪ ﺷﺪ.
ﻣﺘﻦ ﺑﻴﻦ ﺗﮓ > <bﻭ ﺍﻧﺘﻬﺎﻱ ﺁﻥ ﻳﻌﻨﻲ ﺗﮓ > </bﺑﺼﻮﺭﺕ Boldﻭ ﻳﺎ ﺗﻮﭘﺮ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﻨﺪ ﺷﺪ.
ﻧﺎﻡ ﻓﺎﻳﻞ test.htmlﺑﻮﺩﻩ ،ﺩﺭ ﺷﺎﺧﻪ darsﻗﺮﺍﺭ ﮔﺮﻓﺘﻪ ﻭ ﺭﻭﻱ ﻭﺏ ﺳﺮﻭﺭﻱ ﻛﻪ ﻣﻴﺰﺑﺎﻥ ﺳﺎﻳﺖ khaterat.comﺍﺳﺖ ﻗﺮﺍﺭ ﺩﺍﺭﺩ.
ﺍﻧﺸﻌﺎﺏ ﻓﺎﻳﻞ htmﻳﺎ html؟
ﺍﻏﻠﺐ ﻣﺮﻭﺭﮔﺮﻫﺎ ﻫﺮ ﺩﻭ ﻧﻮﻉ ﺍﻧﺸﻌﺎﺏ ﺭﺍ ﺑﻪ ﺧﻮﺑﻲ ﻣﻴﺸﻨﺎﺳﻨﺪ ﻭﻟﻲ ﺗﺮﺟﻴﺤﺎ ﺑﻪ ﻫﻨﮕﺎﻡ ﺫﺧﻴﺮﻩ ﻓﺎﻳﻠﻬﺎﻱ ﺍﭼﺘﻤﻞ ﺍﺯ htmlﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ ).ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ
ﺍﻧﺸﻌﺎﺑﻬﺎﻱ ﺳﻪ ﺣﺮﻓﻲ ﻣﺎﻧﻨﺪ htmﻣﺮﺑﻮﻁ ﺑﻪ ﻗﺪﻳﻢ ﻭ ﺳﻴﺴﺘﻢ ﻋﺎﻣﻠﻬﺎﺋﻲ ﭼﻮﻥ DOSﺑﻮﺩﻧﺪ(.
ﻧﻜﺘﻪ ﺍﻱ ﺩﺭ ﻣﻮﺭﺩ ﺍﺩﻳﺘﻮﺭﻫﺎﻱ ﺍﭼﺘﻤﻞ ) ( HTML Editors
ﺑﺎ ﻭﺟﻮﺩﻳﻜﻪ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﺩﻳﺘﻮﺭﻫﺎﻱ ﺍﺧﺘﺼﺎﺻﻲ ﺍﭼﺘﻤﻞ ﻣﺎﻧﻨﺪ FrontPageﻭ ﻳﺎ Claris Home Pageﺍﻣﻜﺎﻥ ﻧﻮﺷﺘﻦ ﻭ ﻃﺮﺍﺣﻲ ﺻﻔﺤﺎﺕ
ﺍﭼﺘﻤﻞ ﺑﺼﻮﺭﺕ WYSIWYGﻳﺎ " "Get You What Is See You Whatﻭﺟﻮﺩ ﺩﺍﺭﺩ ﺍﻣﺎ ﺗﻮﺻﻴﻪ ﻣﻴﺸﻮﺩ ﻛﻪ ﺍﺯ ﺍﺩﻳﺘﻮﺭﻫﺎﻱ ﻣﻌﻤﻮﻟﻲ
ﻣﺘﻦ ﺑﺮﺍﻱ ﺗﻬﻴﻪ ﺻﻔﺤﺎﺕ ﺧﻮﺩ ﺍﺳﺘﻔﺎﺩﻩ ﻛﺮﺩﻩ ،ﻋﻤﻠﻜﺮﺩ ﺗﮕﻬﺎ ﺭﺍ ﺷﻨﺎﺧﺘﻪ ﻭ ﻫﻴﭽﮕﺎﻩ ﺑﺪﻭﻥ ﺍﻳﻨﻜﻪ ﺑﺪﺍﻧﻴﺪ ﻛﺎﺭﺑﺮﺩ ﻳﻚ ﺗﮓ ﭼﻴﺴﺖ ﺁﻧﺮﺍ ﺑﻜﺎﺭ ﻧﺒﺮﻳﺪ) .ﺍﺩﻳﺘﻮﺭﻫﺎ
2 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻫﻤﺎﻥ ﺑﺮﺩﺍﺷﮕﺮﻫﺎﻱ ﻣﺘﻦ ﻫﺴﺘﻨﺪ(.
ﺑﻴﺸﺘﺮﻳﻦ ﺳﻮﺍﻻﺕ ﭘﺮﺳﻴﺪﻩ ﺷﺪﻩ ) : ( FAQ
ﻓﺎﻳﻠﻢ ﺭﺍ ﺩﺭﺳﺖ ﻛﺮﺩﻡ ﻭﻟﻲ ﻫﻨﻮﺯ ﻧﻤﻴﺘﻮﺍﻧﻢ ﺁﻧﺮﺍ ﺩﺭ ﺻﻔﺤﻪ ﻣﺮﻭﺭﮔﺮﻡ ﺑﺒﻴﻨﻢ ،ﻣﺸﻜﻞ ﻛﺠﺎﺳﺖ؟
ﻣﻄﻤﺌﻦ ﺷﻮﻳﺪ ﻛﻪ ﻓﺎﻳﻞ ﺭﺍ ﺑﺎ ﺍﻧﺸﻌﺎﺏ ﺩﺭﺳﺖ ) htmﻳﺎ ( htmlﺫﺧﻴﺮﻩ ﻛﺮﺩﻩ ﺍﻳﺪ .ﺩﺭ ﺿﻤﻦ ﻣﻄﻤﺌﻦ ﺷﻮﻳﺪ ﻛﻪ ﻫﻤﺎﻥ ﻓﺎﻳﻞ ﺭﺍ Openﻛﺮﺩﻩ ﺍﻳﺪ ).ﻧﺎﻡ ﻭ
ﻣﺴﻴﺮ ﻓﺎﻳﻞ ﺭﺍ ﺩﺭ ﻗﺴﻤﺖ Addressﻣﺮﻭﺭﮔﺮﺗﺎﻥ ﭼﻚ ﻛﻨﻴﺪ(.
ﻫﺮ ﺑﺎﺭ ﭘﺲ ﺍﺯ ﺗﻐﻴﻴﺮ ﻭ ﺍﺩﻳﺖ ﻣﺜﺎﻟﻬﺎ ﻧﺴﺨﻪ ﺍﻭﻟﻴﻪ ﺭﺍ ﺩﺭ ﺻﻔﺤﻪ ﻣﺮﻭﺭﮔﺮﻡ ﻣﻴﺒﻴﻨﻢ ﻭ ﺗﻐﻴﻴﺮﺍﺕ ﺩﺍﺩﻩ ﺷﺪﻩ ﻣﺸﺎﻫﺪﻩ ﻧﻤﻴﺸﻮﺩ،
ﻣﺸﻜﻞ ﻛﺠﺎﺳﺖ؟
ﺑﻪ ﺧﺎﻃﺮ ﺑﺎﻻ ﺑﺮﺩﻥ ﺳﺮﻋﺖ ،ﻫﻤﻴﺸﻪ ﻣﺮﻭﺭﮔﺮﻫﺎ ﺍﺯ ﻧﺴﺨﻪ ﻫﺎﻱ ﻣﻮﺟﻮﺩ ﺩﺭ Cacheﻳﺎ ﺣﺎﻓﻈﻪ ﻣﻮﻗﺖ ﺧﻮﺩ ﺑﺮﺍﻱ ﺧﻮﺍﻧﺪﻥ ﺻﻔﺤﺎﺕ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻨﺪ.ﺑﺮﺍﻱ
ﻭﺍﺩﺍﺭ ﻛﺮﺩﻥ ﻣﺮﻭﺭﮔﺮ ﺑﻪ ﺧﻮﺍﻧﺪﻥ ﺍﺻﻞ ﺻﻔﺤﻪ ﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﺩﺭ ﻣﺮﻭﺭﮔﺮﺗﺎﻥ Refresh/Reloadﻛﻨﻴﺪ .ﺩﺭ ﺍﻳﻨﺘﺮﻧﺖ ﺍﻛﺴﭙﻠﻮﺭﺭ ﻛﻠﻴﺪ F5ﻳﺎ
View/Refreshﻭ ﺩﺭ ﻓﺎﻳﺮﻓﺎﻛﺲ Ctrl+Rﻳﺎ View/Reloadﺍﻳﻨﻜﺎﺭ ﺭﺍ ﺍﻧﺠﺎﻡ ﺧﻮﺍﻫﻨﺪ ﺩﺍﺩ.
ﺁﻳﺎ ﻣﻴﺘﻮﺍﻧﻢ ﺍﺯ ﻫﺮ ﺩﻭ ﻣﺮﻭﺭﮔﺮ Internet Explorerﻭ Firefoxﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻢ؟
ﺑﻠﻪ ،ﻓﻘﻂ ﺍﮔﺮ ﺍﺯ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﻳﻮﻧﻴﻜﺪ ﺑﺮﺍﻱ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻴﺪ ،ﺑﺮﺍﻱ ﺩﻳﺪﻥ ﺩﺭﺳﺖ ﺻﻔﺤﺎﺕ ﻓﺎﺭﺳﻲ ﺑﺎﻳﺪ ﺍﺯ ﻧﺴﺨﻪ Internet 5
Explorerﻭ ﺑﻪ ﺑﺎﻻ ﻭ ﺩﺭ ﻣﻮﺭﺩ Firefoxﺍﺯ ﻧﺴﺨﻪ 1.0ﻭ ﺑﻪ ﺑﺎﻻ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ.
ﻛﺠﺎ ﻣﻴﺘﻮﺍﻧﻢ ﺁﺧﺮﻳﻦ ﻧﺴﺨﻪ ﺍﺯ ﻣﺮﻭﺭﮔﺮﻫﺎﻱ Internet Explorerﻭ Firefoxﺭﺍ ﺩﺍﻭﻧﻠﻮﺩ ﻛﻨﻢ؟
Internet Explorerﺍﻳﻨﺠﺎﺳﺖ ﻭ Firefoxﺍﻳﻨﺠﺎ.
ﻓﺎﻳﻬﺎﻱ HTMLﺍﻡ ﺭﺍ ﭼﮕﻮﻧﻪ ﺑﻪ ﺭﻭﻱ ﺍﻳﻨﺘﺮﻧﺖ ﻣﻨﺘﻘﻞ ﻛﻨﻢ؟
ﺑﺎﻳﺪ ﺍﺯ ﻧﺮﻡ ﺍﻓﺰﺍﺭﻫﺎﻱ FTPﻛﻪ ﻭﻇﻴﻔﻪ ﺍﻧﺘﻘﺎﻝ ﻓﺎﻳﻠﻬﺎ ﺩﺭ ﺍﻳﻨﺘﺮﻧﺖ ﺭﺍ ﺩﺍﺭﻧﺪ ﻛﻤﻚ ﺑﮕﻴﺮﻳﺪ.
WWW & HTML
ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﺎ ﻣﻔﺎﻫﻴﻢ ﻭﺏ ،ﺍﻳﻨﺘﺮﻧﺖ ،ﻣﺮﻭﺭﮔﺮﻫﺎ ﻭ ﺍﺳﺘﺎﻧﺪﺍﺭﺩﻫﺎﻱ ﻭﺏ ﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ.
ﻣﻨﻈﻮﺭ ﺍﺯ ﻭﺏ ﭼﻴﺴﺖ؟
ﻭﺏ ﺷﺒﻜﻪ ﺍﻱ ﺍﺳﺖ ﻣﺘﺸﻜﻞ ﺍﺯ ﺗﻤﺎﻣﻲ ﻛﺎﻣﭙﻴﻮﺗﺮﻫﺎﻱ ﺩﻧﻴﺎ ،ﺷﺒﻜﻪ ﺍﻱ ﺍﺯ ﺷﺒﻜﻪ ﻫﺎ.
ﺍﻳﻨﺘﺮﻧﺖ ،ﻭﺏ web ،WWW ،ﻳﺎ Web Wide Worldﻫﻤﮕﻲ ﻳﻚ ﭼﻴﺰﻧﺪ.
ﺗﻤﺎﻣﻲ ﻛﺎﻣﭙﻴﻮﺗﺮﻫﺎﻱ ﻭﺏ ﻣﻴﺘﻮﺍﻧﻨﺪ ﺑﺎ ﻫﻢ ﺍﺭﺗﺒﺎﻁ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻨﺪ.
ﻛﺎﻣﭙﻴﻮﺗﺮﻫﺎﻱ ﻣﻮﺟﻮﺩ ﺩﺭ ﻭﺏ ﺑﺎ ﻛﻤﻚ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺍﺭﺗﺒﺎﻃﻲ ﻳﺎ ﭘﺮﻭﺗﻮﻛﻞ HTTPﺑﺎ ﻫﻢ ﺍﺭﺗﺒﺎﻁ ﺑﺮﻗﺮﺍﺭ ﻣﻴﻜﻨﻨﺪ .
3 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻧﺤﻮﻩ ﻛﺎﺭﻛﺮﺩ ﻭﺏ ﭼﮕﻮﻧﻪ ﺍﺳﺖ؟
ﺍﻃﻼﻋﺎﺕ ﺻﻔﺤﺎﺕ ﻭﺏ ﺩﺍﺧﻞ ﻓﺎﻳﻠﻬﺎﺋﻲ ﺑﻪ ﻧﺎﻡ Web Pagesﻭ ﻳﺎ ﻣﺘﻦ ﻫﺎﻱ ﻭﺏ ) (HTML documentsﻗﺮﺍﺭ ﺩﺍﺭﻧﺪ.
ﺍﻳﻦ ﻓﺎﻳﻠﻬﺎ ﻳﺎ ﺻﻔﺤﺎﺕ ﺭﻭﻱ Web Serverﻳﺎ ﻛﺎﻣﭙﻴﻮﺗﺮﻫﺎﻱ ﺳﺮﻭﻳﺲ ﺩﻫﻨﺪﻩ ﻭﺏ ﺫﺧﻴﺮﻩ ﺷﺪﻩ ﺍﻧﺪ.
ﺑﺮﺍﻱ ﺩﻳﺪﻥ ﺻﻔﺤﺎﺕ ﻭﺏ ﺍﺯ ﻧﺮﻡ ﺍﻓﺰﺍﺭﻱ ﺑﻪ ﻧﺎﻡ ﻣﺮﻭﺭﮔﺮ ﻭ ﻳﺎ Web Browserﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﺸﻮﺩ.
ﺳﺮﻭﺭﻫﺎﻱ ﻭﺏ ﻳﺎ Web Serversﻛﺎﻣﺒﻴﻮﺗﺮﻫﺎﻱ ﻫﺴﺘﻨﺪ ﻛﻪ ﺑﺎ ﻛﻤﻚ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺍﺭﺗﺒﺎﻃﻲ HTTPﺑﻪ ﺗﺒﺎﺩﻝ ﺍﻃﻼﻋﺎﺕ ﺑﺎ ﻣﺮﻭﺭﮔﺮﻫﺎ
) (web Clientsﻣﻴﺒﺮﺩﺍﺯﻧﺪ. .
ﻣﺮﻭﺭﮔﺮﻫﺎﻱ ﻭﺏ ﺭﺍ Web browsersﻳﺎ web Clientsﻫﻢ ﻣﻴﻨﺎﻣﻨﺪ .
ﺩﻭ ﻣﺮﻭﺭﮔﺮ Internet Explorerﻭ Firefoxﺟﺰﻭ ﻣﻌﺮﻭﻓﺘﺮﻳﻦ ﻣﺮﻭﺭﮔﺮﻫﺎ ﺣﺴﺎﺏ ﻣﻴﺸﻮﻧﺪ.
ﻣﺮﻭﺭﮔﺮ Internet Explorerﻣﺘﻌﻠﻖ ﺑﻪ ﺷﺮﻛﺖ ﻣﺎﻳﻜﺮﻭﺳﺎﻓﺖ ﻭ ﻣﺮﻭﺭﮔﺮ Firefoxﻣﺘﻌﻠﻖ ﺑﻪ ﺷﺮﻛﺖ Mozillaﻣﻴﺒﺎﺷﺪ.
ﻣﺮﻭﺭﮔﺮ ّ Firefoxﺩﺍﺭﺍﻱ ﺍﻣﻨﻴﺖ ﺑﻴﺸﺘﺮﻱ ﺑﻮﻩ ﻭ ﺑﺼﻮﺭﺕ open Sourceﻣﻴﺒﺎﺷﺪ ﻭ ﻧﺴﺒﺖ ﺑﻪ Internet Explorerﺑﺮﺗﺮ
ﻣﺤﺴﻮﺏ ﻣﻴﺸﻮﺩ.
ﻣﺮﻭﺭﮔﺮ Internet Explorerﮔﺎﻫﻲ ﻣﺨﺘﺼﺮﺍ IEﻧﺎﻣﻴﺪﻩ ﻣﻴﺸﻮﺩ.
ﺍﺳﺎﻣﻲ ﺑﻌﻀﻲ ﺍﺯ ﻣﺮﻭﺭﮔﺮﻫﺎﻱ ﺩﻳﮕﺮ ﺑﻪ ﻗﺮﺍﺭ ﺭﻭﺑﺮﻭ ﺍﺳﺖMosaic, Netscape Navigator, Opera, Mozilla, :
)Safari(Mac computers
ﺍﻣﻴﺪﻭﺍﺭﻡ ﻛﻪ ﺷﻤﺎ ﻃﺮﺍﺡ ﻭ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺲ ﺍﻭﻟﻴﻦ ﻣﺮﻭﺭﮔﺮ ﺗﻤﺎﻣﺂ ﻓﺎﺭﺳﻲ ﺑﺎﺷﻴﺪ!
ﻣﺮﻭﺭﮔﺮﻫﺎ ﭼﮕﻮﻧﻪ ﺑﻪ ﺧﻮﺍﻧﺪﻥ ﺻﻔﺤﺎﺕ ﻭﺏ ﻣﻴﭙﺮﺩﺍﺯﻧﺪ؟
ﻳﻚ ﻣﺮﻭﺭﮔﺮ ﺑﺎ ﻛﻤﻚ ﻳﻚ Requestﺩﺭﺧﻮﺍﺳﺘﻲ ﺑﺮﺍﻱ ﺧﻮﺍﻧﺪﻥ ﻳﻚ ﺻﻔﺤﻪ ﺍﺯ ﻭﺏ ﺳﺮﻭﺭ ﻣﻴﻜﻨﺪ.
ﺍﻳﻦ Requestﻳﺎ ﺩﺭﺧﻮﺍﺳﺖ ﺑﺮ ﺍﺳﺎﺱ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺍﺭﺗﺒﺎﻃﻲ ﻳﺎ ﭘﺮﻭﺗﻮﻛﻞ HTTPﺑﻮﺩﻩ ﻭ ﺷﺎﻣﻞ ﺁﺩﺭﺱ ﺻﻔﺤﻪ ﻣﻮﺭﺩ ﻧﻈﺮ ﻣﻴﺒﺎﺷﺪ.
ﺁﺩﺭﺱ ﻳﻚ ﺻﻔﺤﻪ ﻭﺏ ﭼﻴﺰﻱ ﺷﺒﻴﻪ http://www.khaterat.com/www/htmlwww.phpﺍﺳﺖ.
ﺑﺨﺶ http://ﻧﻮﻉ ﭘﺮﻭﺗﻮﻛﻞ ﻭ ﻳﺎ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺍﺭﺗﺒﺎﻃﻲ ﺭﺍ ﺗﻌﻴﻴﻦ ﻣﻴﻜﻨﺪ www.khaterat.com ،ﻧﺎﻡ ﺩﻭﻣﻴﻦ ﻳﺎ Domainﺍﺳﺖ ﻭ
/www/htmlwww.phpﻣﺴﻴﺮ ﻭ ﻧﺎﻡ ﺻﻔﺤﻪ ﺍﻱ ﺍﺳﺖ ﻛﻪ ﺑﺎﻳﺪ ﺧﻮﺍﻧﺪﻩ ﺷﻮﺩ.
ﻣﺮﻭﺭﮔﺮﻫﺎ ﭼﮕﻮﻧﻪ ﺻﻔﺤﺎﺕ ﻭﺏ ﺭﺍ ﻧﻤﺎﻳﺶ ﻣﻴﺪﻫﻨﺪ؟
ﭼﮕﻮﻧﮕﻲ ﻧﻤﺎﻳﺶ ﻳﻚ ﺻﻔﺤﻪ ﻭﺏ ﺑﺼﻮﺭﺕ ﻣﺴﺘﺘﺮ ﺩﺭ ﺁﻥ ﻭﺟﻮﺩ ﺩﺍﺭﺩ).ﺍﮔﺮ ﺷﻤﺎ ﻣﻨﻈﻮﺭﻡ ﺭﺍ ﻓﻬﻤﻴﺪﻳﺪ ﻣﻦ ﺭﺍ ﻫﻢ ﺧﺒﺮﺩﺍﺭ ﻛﻨﻴﺪ!(
ﻣﺮﻭﺭﮔﺮﻫﺎ ﺍﺯ ﺭﻭﻱ ﺩﺳﺘﻮﺭﺍﻟﻌﻤﻠﻬﺎﻱ ﺩﺍﺧﻞ ﺻﻔﺤﺎﺕ ﻭﺏ ﻭ ﺑﺎ ﻛﻤﻚ ﺗﮓ ﻫﺎ ﺑﻪ ﻧﻤﺎﻳﺶ ﺻﻔﺤﺎﺕ ﻣﻴﭙﺮﺩﺍﺯﻧﺪ.
ﻭﻇﻴﻔﻪ ﺍﺻﻠﻲ ﺗﮓ ﻫﺎﻱ ﺍﭼﺘﻤﻞ ) ( HTML tagsﺑﻴﺎﻥ ﻧﺤﻮﻩ ﭼﻴﺪﻥ ﻭ ﻗﺮﺍﺭﮔﺮﻓﺘﻦ ﺍﻃﻼﻋﺎﺕ ﺍﺳﺖ ﻭ ﻇﺎﻫﺮ ﻧﻤﺎﻳﺶ ﺑﺎ CSSﻣﻴﺒﺎﺷﺪ.
ﻳﻚ ﺗﮓ ﺍﭼﺘﻤﻞ ﭼﻴﺰﻱ ﺷﺒﻴﻪ > <p/> abc <pﺍﺳﺖ.
4 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﭼﻪ ﻛﺴﺎﻧﻲ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﻫﺎﻱ ﻭﺏ ﺭﺍ ﺗﻌﻴﻴﻦ ﻣﻴﻜﻨﺪ؟
ﺗﻌﻴﻴﻦ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﻫﺎﻱ ﻭﺏ ﺭﺑﻄﻲ ﺑﻪ ﺷﺮﻛﺘﻬﺎﻱ ﻣﺎﻳﻜﺮﻭﺳﺎﻓﺖ ﻭ ﻳﺎ Mozillaﻧﺪﺍﺭﺩ.
World Wide Web Consortiumﻳﺎ W3Cﻣﺘﻮﻟﻲ ﺑﻴﻦ ﺍﻟﻤﻠﻠﻲ ﺗﻌﻴﻴﻦ ﺍﺳﺘﺎﻧﺪﺍﺭﺩﻫﺎﻱ ﻭﺏ ﺍﺳﺖ.
HTML, CSS and XMLﺍﺯ ﻣﻬﻤﺘﺮﻳﻦ ﺍﺳﺘﺎﻧﺪﺍﺭﺩﻫﺎﻱ ﺗﺼﻮﻳﺐ ﺷﺪﻩ ﻭﺏ ﻣﻴﺒﺎﺷﻨﺪ.
ﺑﺮﺍﻱ ﺩﻳﺪﻥ ﻓﻬﺮﺳﺖ ﺗﻤﺎﻣﻲ ﺍﺳﺘﺎﻧﺪﺍﺭﻫﺎﻱ ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﺗﻮﺳﻂ W3Cﺑﻪ ﺍﻳﻦ ﺻﻔﺤﻪ ﺍﺯ ﺩﺍﻳﺮﺍﻟﻤﻌﺎﺭﻑ WIKIﻣﺮﺍﺟﻌﻪ ﻛﻨﻴﺪW3C :
ﻋﻨﺎﺻﺮ ) ( Elements
ﻳﻚ ﻓﺎﻳﻞ ﺍﭼﺘﻤﻞ ﻣﺘﻨﻲ ﺍﺯ ﻧﻮﻉ textﺍﺳﺖ ﻛﻪ ﺍﺯ ﻋﻨﺎﺻﺮ ﻳﺎ elementﻫﺎ ﺗﺸﻜﻴﻞ ﺷﺪﻩ ﻭ ﺑﺮﺍﻱ ﺍﻳﺠﺎﺩ ﻋﻨﺎﺻﺮ ﺍﺯ ﺗﮓ ﻫﺎ ﻳﺎ tagsﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﺸﻮﺩ .ﺩﺭ
ﺍﻳﻦ ﻓﺼﻞ ﺑﺎ ﻋﻨﺎﺻﺮ ﻭ ﺗﮓ ﻫﺎ ﺍﭼﺘﻤﻞ ﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ.
ﺗﮓ ﻫﺎﻱ ﺍﭼﺘﻤﻞ )(HTML Tags
ﺑﺎ ﻛﻤﻚ ﺗﮓ ﻫﺎﻱ ﺍﭼﺘﻤﻞ ﻋﻨﺎﺻﺮ ﻳﺎ Elementsﺳﺎﺧﺘﻪ ﻣﻴﺸﻮﻧﺪ. •
ﺩﺭ ﺯﺑﺎﻥ ﺍﭼﺘﻤﻞ ﺣﺪﻭﺩ 80ﻋﻨﺼﺮ ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﺍﺳﺖ. •
ﺗﮓ ﻫﺎﻱ ﺍﭼﺘﻤﻞ ﺑﻮﺳﻴﻠﻪ ﺩﻭ ﻧﻮﻳﺴﻪ ) < (charﻭ > ﺳﺎﺧﺘﻪ ﻣﻴﺸﻮﻧﺪ. •
ﺗﮓ ﻫﺎﻱ ﺍﭼﺘﻤﻞ ﻣﻌﻤﻮﻻ ﺑﺼﻮﺭﺕ ﺯﻭﺝ ﻇﺎﻫﺮ ﻣﻴﺸﻮﻧﺪ ،ﻣﺎﻧﻨﺪ ><b/>test<b •
ﺗﮓ ﺍﻭﻝ ﺩﺭ ﻳﻚ ﺯﻭﺝ ﺗﮓ ﻣﺜﻼ > <bﺗﮓ ﺷﺮﻭﻉ ﻭ ﺗﮓ ﺩﻭﻡ ﻣﺜﻼ > </bﺗﮓ ﭘﺎﻳﺎﻧﻲ ﻧﺎﻡ ﺩﺍﺭﺩ. •
ﻣﺘﻦ ﺑﻴﻦ ﺗﮓ ﺍﻭﻝ ﻭ ﺗﮓ ﺩﻭﻡ ﺩﺭ ﻳﻚ ﺯﻭﺝ ﺗﮓ ﻣﺤﺘﻮﺍﻱ ﻋﻨﺼﺮ ﻳﺎ element contentﻧﺎﻣﻴﺪﻩ ﻣﻴﺸﻮﺩ ،ﻣﺜﻼ ""test •
ﺗﮓ ﻫﺎﻱ ﺍﭼﺘﻤﻞ ﺭﺍ ﻣﻴﺘﻮﺍﻧﻴﺪ ﺑﻮﺳﻴﻠﻪ ﺣﺮﻭﻑ ﻻﺗﻴﻦ ﻛﻮﭼﻚ ) (lower caseﻭ ﻳﺎ ﺑﺰﺭگ ) (upper caseﺑﻨﻮﻳﺴﻴﺪ ﻭ case •
sensitiveﻧﻴﺴﺘﻨﺪ .ﺑﺮﺍﻱ ﻣﺜﺎﻝ ﺩﻭ ﺗﮓ > <bﻭ > <Bﻣﻌﺎﺩﻝ ﻫﻢ ﻫﺴﺘﻨﺪ ﻭﻟﻲ ﺷﺪﻳﺪﺍ ﺗﻮﺻﻴﻪ ﻣﻴﺸﻮﺩ ﻛﻪ ﺑﻪ ﺧﺎﻃﺮ ﺳﺎﺯﮔﺎﺭﻱ ﺑﺎ
XHTMLﺍﺯ ﺣﺮﻭﻑ ﻛﻮﭼﻚ ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ.
ﻋﻨﺎﺻﺮ ﺍﭼﺘﻤﻞ )(HTML Elements
ﻣﺜﺎﻝ ﺑﺨﺶ ﻣﻘﺪﻣﻪ ﺭﺍ ﺩﺭ ﻧﻈﺮ ﺑﮕﻴﺮﻳﺪ:
><html
><head
><title>Title of page</title
></head
><body
>This is my first html page. <b>This text is bold</b
></body
5 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
></html
*** ﻧﻤﻮﻧﻪ ﺍﻱ ﺍﺯ ﻳﻚ ﻋﻨﺼﺮ ﺍﭼﺘﻤﻞ:
><b>This text is bold</b
ﻋﻨﺼﺮ ﺍﭼﺘﻤﻞ ﺑﺎﻻ ﺑﺎ ﺗﮓ > <bﺷﺮﻭﻉ ﺷﺪﻩ ﻭ ﺑﺎ ﺗﮓ > </bﭘﺎﻳﺎﻥ ﻣﻲ ﻳﺎﺑﺪ .ﻣﺤﺘﻮﺍﻱ ﺍﻳﻦ ﻋﻨﺼﺮ ﻋﺒﺎﺭﺕ " "This text is boldﺍﺳﺖ .ﻻﺯﻡ ﺑﻪ
ﺫﻛﺮ ﺍﺳﺖ ﻛﻪ ﻛﺎﺭﺑﺮﺩ ﺗﮓ > <bﻧﻤﺎﻳﺶ ﺗﻮﭘﺮ ﻳﺎ boldﻣﺘﻮﻥ ﺍﺳﺖ.
*** ﻣﺜﺎﻝ ﺩﻭﻡ ﺍﺯ ﻳﻚ ﻋﻨﺼﺮ ﺍﭼﺘﻤﻞ :
><body
>This is my first homepage. <b>This text is bold</b
></body
ﻋﻨﺼﺮ ﺍﭼﺘﻤﻞ ﺑﺎﻻ ﺑﺎ ﺗﮓ > <bodyﺷﺮﻭﻉ ﺷﺪﻩ ﻭ ﺑﺎ ﺗﮓ > </bodyﭘﺎﻳﺎﻥ ﻣﻲ ﻳﺎﺑﺪ .ﻫﻤﺎﻧﻄﻮﺭ ﻛﻪ ﻣﻴﺒﻴﻨﻴﺪ ﮔﺎﻫﻲ ﻳﻚ ﻋﻨﺼﺮ ﺣﺎﻭﻱ ﻳﻚ ﻳﺎ ﭼﻨﺪ
ﺗﮓ ﺩﻳﮕﺮ ﻣﻴﺒﺎﺷﺪ.ﻭﻇﻴﻔﻪ ﺗﮓ > <bodyﺗﻌﻴﻴﻦ ﺑﺪﻧﻪ ﺍﺻﻠﻲ ﻳﺎ bodyﻳﻚ ﻣﺘﻦ ﺍﭼﺘﻤﻞ ﺍﺳﺖ.ﻻﺯﻡ ﺑﻪ ﻳﺎﺩﺁﻭﺭﻱ ﺍﺳﺖ ﻛﻪ ﺗﻨﻬﺎ ﺍﻃﻼﻋﺎﺕ ﺑﺨﺶ
> <bodyﻳﻚ ﻓﺎﻳﻞ ﺍﭼﺘﻤﻞ ﺩﺭ ﺻﻔﺤﻪ ﻣﺮﻭﺭﮔﺮ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ.
ﺷﻨﺎﺳﻪ ﻫﺎﻱ ﻳﻚ ﺗﮓ )(Tag Attributes
ﺗﮓ ﻫﺎ ﻣﻴﺘﻮﺍﻧﻨﺪ ﺣﺎﻭﻱ ﺍﻃﻼﻋﺎﺕ ﺍﺿﺎﻓﻲ ﺩﻳﮕﺮ ﺑﺎﺷﻨﺪ ،ﺑﻪ ﺍﻳﻦ ﺍﻃﻼﻋﺎﺕ ﺷﻨﺎﺳﻪ ﻳﺎ Attributeﻣﻴﮕﻮﻳﻨﺪ ﻭ ﻭﻇﻴﻔﻪ ﺁﻧﻬﺎ ﺑﻴﺎﻥ ﺩﻳﮕﺮ ﺍﻃﻼﻋﺎﺕ ﻳﻚ
ﻋﻨﺼﺮ ﻳﺎ Elementﻣﻴﺒﺎﺷﺪ .ﻣﺜﻼ ﺩﺭ ﻣﻮﺭﺩ ﺗﮓ > <bodyﺷﻨﺎﺳﻪ ﺍﻱ ﺑﻪ ﻧﺎﻡ bgcolorﻭﺟﻮﺩ ﺩﺍﺭﺩ ﻛﻪ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﻣﺘﻦ ) (backgroundﺭﺍ
ﺗﻌﻴﻴﻦ ﻣﻴﻜﻨﺪ ﺑﺮﺍﻱ ﻧﻤﻮﻧﻪ ﺍﮔﺮ ﻣﻴﺨﻮﺍﻫﻴﺪ ﻛﻪ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻠﺘﺎﻥ ﺳﻴﺎﻩ ﺑﺎﺷﺪ ﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﺑﻪ ﺷﻜﻞ ﺯﻳﺮ ﻋﻤﻞ ﻛﻨﻴﺪ :
>"<body bgcolor="black
ﺩﺭ ﻣﺜﺎﻝ ﺯﻳﺮ ﺗﮓ > <tableﺩﺍﺭﺍﻱ ﭼﻬﺎﺭ ﺷﻨﺎﺳﻪ ﻣﺨﺘﻠﻒ ﺑﺎ ﻧﺎﻣﻬﺎﻱ align ،height ،widthﻭ borderﻭ ﻣﻘﺎﺩﻳﺮ 100 ،60 ،centerﻭ 0
ﻣﻴﺒﺎﺷﺪ.
> "<table border="0" width="100" height="60" align="center
...
></table
ﺷﻨﺎﺳﻪ ﻫﺎ ﺑﻪ ﺻﻮﺭﺕ ﻛﻠﻲ "ﻣﻘﺪﺍﺭ=ﻧﺎﻡ" ﻳﺎ " "name=valueﻧﻮﺷﺘﻪ ﻣﻴﺸﻮﻧﺪ ﻭ ﻫﻤﻴﺸﻪ ﺑﻪ ﺗﮓ ﺷﺮﻭﻉ ﻳﻚ ﻋﻨﺼﺮ ﻳﺎ Elementﺍﺿﺎﻓﻪ ﻣﻴﺸﻮﻧﺪ ﻭ
ﻧﻬﺎﻳﺘﺎ ﺍﮔﺮ ﺩﺭ ﻳﻚ ﻋﻨﺼﺮ ﻳﺎ Elementﺷﻨﺎﺳﻪ ﻫﺎ ﻗﻴﺪ ﻧﺸﻮﻧﺪ ﺍﺯ ﻣﻘﺎﺩﻳﺮ ﻗﺮﺍﺭﺩﺍﺩﻱ ﻳﺎ defaultﺁﻧﻬﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ ﻣﺜﻼ ﺩﺭ ﺗﮓ bodyﺍﮔﺮ
ﺷﻨﺎﺳﻪ bgcolorﻧﻮﺷﺘﻪ ﻧﺸﻮﺩ ﺍﺯ ﺭﻧﮓ ﺳﻔﻴﺪ ﺑﺮﺍﻱ ﺯﻣﻴﻨﻪ ﺻﻔﺤﻪ ﺍﺳﺘﻔﺎﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ.
ﻣﻘﺪﺍﺭ ﻳﻚ ﺷﻨﺎﺳﻪ ﺭﺍ ﻣﻴﺘﻮﺍﻧﻴﺪ ﺩﺍﺧﻞ ﻧﻮﻳﺴﻪ ﻫﺎﻱ " ﻭ ﻳﺎ ' ﺑﻨﻮﻳﺴﻴﺪ ﻭ ﺍﺧﺘﻴﺎﺭ ﺩﺳﺖ ﺷﻤﺎ ﺍﺳﺖ ﻓﻘﻂ ﺩﺭ ﻣﻮﺍﺭﺩﻱ ﻛﻪ ﻣﻘﺪﺍﺭ ﻳﻚ ﺷﻨﺎﺳﻪ ﺷﺎﻣﻞ ﻧﻮﻳﺴﻪ "
ﻫﻢ ﻣﻴﺸﻮﺩ ﺑﺎﻳﺪ ﺍﺯ ﻧﻮﻳﺴﻪ ' ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ.
ﺗﮓ ﻫﺎﻱ ﺍﺻﻠﻲ ) ( Basic Tags
ﺗﮓ ﻫﺎ ) ( Tagsﺍﺟﺰﺍ ﺗﺸﻜﻴﻞ ﺩﻫﻨﺪﻩ ﻋﻨﺎﺻﺮ ﻳﺎ elementsﻫﺎﻱ ﺍﭼﺘﻤﻞ ﻫﺴﺘﻨﺪ ﻭ ﺩﺭ ﺍﻳﻦ ﻓﺼﻞ ﺑﺎ ﻋﻨﺎﺻﺮ ﻭ ﺗﮓ ﻫﺎﻱ ﭘﺎﻳﻪ ﻭ ﻣﻬﻢ:
><p> , <-- comment --!> , <h6> .... <h1> , <br> , <hr
6 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ .ﻳﻜﻲ ﺍﺯ ﺑﻬﺘﺮﻳﻦ ﺭﻭﺵ ﻫﺎﻱ ﻳﺎﺩﮔﻴﺮﻱ ﺗﮓ ﻫﺎﻱ ﺍﭼﺘﻤﻞ ﺩﻳﺪﻥ ﻣﺜﺎﻟﻬﺎ ﻭ ﺗﻐﻴﻴﺮ ﺁﻧﻬﺎ ﻣﻴﺒﺎﺷﺪ ﻭ ﺑﺎ ﻛﻤﻚ ﺍﺩﻳﺘﻮﺭ ﺍﺧﺘﺼﺎﺻﻲ ﻣﺎ ﻭ ﺑﺎ
ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﻣﻜﺎﻧﺎﺕ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ ﺁﻥ ﺑﻪ ﺻﻮﺭﺕ ﺁﻧﻼﻳﻦ ﻣﻴﺘﻮﺍﻧﻴﺪ ﺑﻪ ﻣﻄﺎﻟﻌﻪ ﻭ ﻳﺎﺩﮔﻴﺮﻱ ﻣﺜﺎﻟﻬﺎ ﭘﺮﺩﺍﺧﺘﻪ ،ﻛﺪﻫﺎﻱ ﺍﭼﺘﻤﻞ ﺭﺍ ﺗﻐﻴﻴﺮ ﺩﺍﺩﻩ ﻭ ﺑﺎ ﻛﻠﻴﻚ ﺭﻭﻱ
ﺩﻛﻤﻪ "ﻧﻤﺎﻳﺶ ﻧﺘﺎﻳﺞ" ﺑﻪ ﻣﺸﺎﻫﺪﻩ ﻧﺘﺎﻳﺞ ﺑﭙﺮﺩﺍﺯﻳﺪ.
ﻣﺜﺎﻟﻬﺎ :
ﻣﺜﺎﻟﻲ ﺳﺎﺩﻩ ﺍﺯ ﻳﻚ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ
ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﺑﺴﻴﺎﺭ ﺳﺎﺩﻩ ﻋﺒﺎﺭﺕ ﻣﻌﺮﻭﻑ "! "Hello Worldﺩﺭ ﺻﻔﺤﻪ ﻣﺮﻭﺭ ﮔﺮ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺷﺪﻩ ﻭ ﺩﺭ ﻭﺍﻗﻊ ﻣﺤﺘﻮﺍﻱ ﻋﻨﺼﺮ bodyﺗﻤﺎﻣﺎ
ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ.
ﭘﺎﺭﺍﮔﺮﺍﻓﻬﺎﻱ ﺳﺎﺩﻩ:
ﭼﮕﻮﻧﮕﻲ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﺑﺎ ﻛﻤﻚ ﺗﮓ > <pﻭ ﺑﺼﻮﺭﺕ ﭘﺎﺭﺍﮔﺮﺍﻓﻲ
ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﻓﺎﺭﺳﻲ:
ﭼﮕﻮﻧﮕﻲ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﻓﺎﺭﺳﻲ .ﺑﺮﺍﻱ ﺟﺰﺋﻴﺎﺕ ﺑﻴﺸﺘﺮ ﺑﻪ ﻓﺼﻞ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ ﻣﺮﺍﺟﻌﻪ ﻛﻨﻴﺪ.
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ:
ﺳﺮ ﺗﻴﺘﺮﻫﺎ )(Headings
ﺳﺮ ﺗﻴﺘﺮﻫﺎ ﺑﺎ ﻛﻤﻚ ﺗﮓ ﻫﺎﻱ > <h1ﺗﺎ > <h6ﺗﻌﺮﻳﻒ ﻣﻴﺸﻮﻧﺪ <h1> .ﻣﻌﺮﻑ ﺑﺰﺭﮔﺘﺮﻳﻦ ﺳﺮ ﺗﻴﺘﺮ ﻭ > <h6ﻣﻌﺮﻑ ﻛﻮﭼﻜﺘﺮﻳﻦ ﺳﺮ ﺗﻴﺘﺮ ﺍﺳﺖ.
ﻣﺮﻭﺭﮔﺮ ﺑﻪ ﻫﻨﮕﺎﻡ ﻧﻤﺎﻳﺶ ﻳﻚ ﺳﺮ ﺗﻴﺘﺮ ﺑﺼﻮﺭﺕ ﺍﺗﻮﻣﺎﺗﻴﻚ ﻳﻚ ﺳﻄﺮ ﺧﺎﻟﻲ ﻗﺒﻞ ﻭ ﺑﻌﺪ ﺍﺯ ﻫﺮ ﺳﺮ ﺗﻴﺘﺮ ﺍﺿﺎﻓﻪ ﺧﻮﺍﻫﺪ ﻛﺮﺩ.
<h1>This is a >heading</h1
<h2>This is a >heading</h2
<h3>This is a >heading</h3
<h4>This is a >heading</h4
<h5>This is a >heading</h5
<h6>This is a >heading</h6
ﻣﺜﺎﻝ ﺑﺎﻻ ﺩﺭ ﺻﻔﺤﻪ ﻣﺮﻭﺭﮔﺮ ﺑﺪﻳﻦ ﺷﻜﻞ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ.
ﭘﺎﺭﺍﮔﺮﺍﻓﻬﺎ )(Paragraphs
ﭘﺎﺭﺍﮔﺮﺍﻓﻬﺎ ﺑﺎ ﻛﻤﻚ ﺗﮓ > <pﻣﻌﺮﻓﻲ ﻣﻴﺸﻮﻧﺪ .ﻣﺮﻭﺭﮔﺮﻫﺎ ﺑﻪ ﻫﻨﮕﺎﻡ ﻧﻤﺎﻳﺶ ﻳﻚ ﭘﺎﺭﺍﮔﺮﺍﻑ ﺑﺼﻮﺭﺕ ﺍﺗﻮﻣﺎﺗﻴﻚ ﻳﻚ ﺳﻄﺮ ﺧﺎﻟﻲ ﻗﺒﻞ ﻭ ﺑﻌﺪ ﺍﺯ ﺁﻥ
ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﻨﺪ ﺩﺍﺩ.
><p>This is a paragraph</p
><p>This is another paragraph</p
ﻣﺜﺎﻝ ﺑﺎﻻ ﺩﺭ ﺻﻔﺤﻪ ﻣﺮﻭﺭﮔﺮ ﺑﺪﻳﻦ ﺷﻜﻞ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ.
7 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﺳﻄﺮ ﺟﺪﻳﺪ )(Line Breaks
ﺑﺮﺍﻱ ﺭﻓﺘﻦ ﺳﺮ ﺳﻄﺮ ﺟﺪﻳﺪ ﺍﺯ ﺗﮓ > <brﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﺸﻮﺩ .ﺩﺭ ﺍﻳﻨﺤﺎﻟﺖ ﻳﻚ ﭘﺎﺭﺍﮔﺮﺍﻑ ﺟﺪﻳﺪ ﺍﻳﺠﺎﺩ ﻧﻤﻴﺸﻮﺩ .ﺗﮓ > <brﺍﺯ ﻧﻮﻉ ﺗﮓ ﻫﺎﻱ ﺧﺎﻟﻲ ﺑﻮﺩﻩ
ﻭ ﺩﺍﺭﺍﻱ ﺗﮓ ﺍﻧﺘﻬﺎﺋﻲ )ﻣﺜﻼ > ( </brﻧﻤﻴﺒﺎﺷﺪ.
><p>This <br> is a para<br>graph with line breaks</p
ﻣﺜﺎﻝ ﺑﺎﻻ ﺩﺭ ﺻﻔﺤﻪ ﻣﺮﻭﺭﮔﺮ ﺑﺪﻳﻦ ﺷﻜﻞ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ.
ﻛﺎﻣﻨﺖ ﻫﺎ ﺩﺭ ﺍﭼﺘﻤﻞ )(Comments
ﺑﺮﺍﻱ ﻧﻮﺷﺘﻦ ﺷﺮﺡ ﻭ ﺗﻮﺿﻴﺤﺎﺕ ﺩﺭ ﻣﻮﺭﺩ ﻛﺪﻫﺎﻱ ﺍﭼﺘﻤﻞ ﺑﺎﻳﺪ ﺍﺯ ﺗﮓ ﺧﺎﺻﻲ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ .ﺑﺮﺍﻱ ﺍﻳﻨﻜﺎﺭ ﺑﺎﻳﺪ ﻣﺘﻦ ﻭ ﺷﺮﺣﺘﺎﻥ ﺭﺍ ﺩﺭﻭﻥ ﻋﻼﺋﻢ > --ﻭ
<!--ﻗﺮﺍﺭ ﺩﻫﻴﺪ .ﻣﺮﻭﺭﮔﺮ ﺗﮓ ﻫﺎﻱ commentﺭﺍ ﺩﺭ ﻧﻈﺮ ﻧﮕﺮﻓﺘﻪ ﻭ ﻣﺤﺘﻮﻱ ﺁﻧﻬﺎ ﺭﺍ ﻧﻤﺎﻳﺶ ﻧﺨﻮﺍﻫﺪ ﺩﺍﺩ ﻭ ﻓﻘﻂ ﺷﺮﺡ ﻭ ﺗﻮﺿﻴﺤﺎﺕ ﺑﺮﺍﻱ ﺑﺮﻧﺎﻣﻪ
ﻧﻮﻳﺲ ﻭ ﺩﻳﮕﺮ ﺍﻓﺮﺍﺩﻱ ﻛﻪ ﺍﺣﺘﻤﺎﻻ ﺩﺭ ﺁﻳﻨﺪﻩ ﺑﺎ ﻛﺪ ﺍﭼﺘﻤﻞ ﻛﺎﺭ ﺧﻮﺍﻫﻨﺪ ﻛﺮﺩ ﻣﻔﻴﺪ ﺧﻮﺍﻫﺪ ﺑﻮﺩ) .ﺑﻪ ﻣﺤﻞ ﻧﻮﻳﺴﻪ "!" ﺗﻮﺟﻪ ﻛﻨﻴﺪ! ﻓﻘﻂ ﻳﻜﻲ ﻭ ﺁﻧﻬﻢ ﺩﺭ
ﺍﺑﺘﺪﺍ(
><!-- This is a comment --
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ commentsﻭ ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺁﻥ
ﭼﻨﺪ ﻧﻜﺘﻪ ﻛﺎﺭﺑﺮﺩﻱ:
ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺑﺪﻟﻴﻞ ﻭﺟﻮﺩ ﻣﺮﻭﺭﮔﺮﻫﺎﻱ ﻣﺘﻔﺎﻭﺕ )ﺍﻛﺴﭙﻠﻮﺭﺭ ،ﻧﺖ ﺍﺳﻜﻴﭗ ،ﻓﺎﻳﺮﻓﺎﻛﺲ ،ﺻﻔﺮﻱ (...،ﻭ ﺑﻪ ﺩﻟﻴﻞ ﺗﻔﺎﻭﺕ ﺩﻗﺖ ﻧﻤﺎﻳﺶ ﺻﻔﺤﻪ
ﻧﻤﺎﻳﺶ ﻛﺎﻣﭙﻴﻮﺗﺮﻫﺎ ،ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺑﺎ ﺍﻧﺪﻛﻲ ﺗﻔﺎﻭﺕ ﺩﺭ ﺣﺎﻟﺘﻬﺎﻱ ﻣﺨﺘﻠﻒ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﻣﻴﺸﻮﻧﺪ ﻭ ﻫﻤﻴﺸﻪ ﺳﻌﻲ ﻛﻨﻴﺪ ﻛﻪ ﺻﻔﺤﺎﺗﺘﺎﻥ ﺭﺍ ﻧﻪ ﺗﻨﻬﺎ ﺑﺎ
ﺍﻛﺴﭙﻠﻮﺭﺭ ﻛﻪ ﻣﻌﺮﻭﻓﺘﺮﻳﻦ ﻣﺮﻭﺭﮔﺮ ﺍﺳﺖ ﺑﻠﻜﻪ ﺑﺎ ﻓﺎﻳﺮﻓﺎﻛﺲ ﻭ ﻧﺖ ﺍﺳﻜﻴﭗ ﻭ ﺣﺘﻲ ﻣﺮﻭﺭﮔﺮﻫﺎﻱ ﻛﺎﻣﭙﻴﻮﺗﺮﻫﺎﻱ ﻣﻜﻴﻨﺘﺎﺵ ﭼﻚ ﻛﺮﺩﻩ ﻭ ﻫﻤﭽﻨﻴﻦ ﺩﺭ ﺩﻗﺖ
ﻫﺎﻱ ﻧﻤﺎﻳﺶ x600800ﻭ X7681024ﺁﻥ ﺭﺍ ﺍﻣﺘﺤﺎﻥ ﻛﻨﻴﺪ.
ﺍﺯ ﻧﻈﺮ ﻓﺎﺻﻠﻪ ﻭ ﺳﻄﺮ ﺑﻨﺪﻱ ،ﻣﺘﻨﻲ ﻛﻪ ﺩﺭ ﺻﻔﺤﻪ ﺍﺩﻳﺘﻮﺭﺗﺎﻥ ﺗﺎﻳﭗ ﻣﻴﻜﻨﻴﺪ ﺑﺎ ﭼﻴﺰﻱ ﻛﻪ ﻣﺮﻭﺭﮔﺮ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﺪ ﺩﺍﺩ ﻣﺘﻔﺎﻭﺕ ﺧﻮﺍﻫﺪ ﺑﻮﺩ.ﻫﻤﻴﺸﻪ ﺑﻪ ﻳﺎﺩ
ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﻓﺎﺻﻠﻪ ﻫﺎﻱ ﺍﺿﺎﻓﻲ ) (spaceﻭ ﺧﻄﻬﺎﻱ ﺧﺎﻟﻲ ﻣﺘﻦ ﺩﺭ ﺻﻔﺤﻪ ﺍﺩﻳﺘﻮﺭ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ ﺩﺭ ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻧﺸﺪﻩ ﻭ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﻧﺨﻮﺍﻫﺪ
ﺷﺪ.
ﺑﺮﺍﻱ ﻧﻤﺎﻳﺶ ﺑﻴﺶ ﺍﺯ ﻳﻚ ﻓﺎﺻﻠﻪ ﺧﺎﻟﻲ ﺑﺎﻳﺪ ﺍﺯ ﻧﻮﻳﺴﻪ ﻫﺎ ﻳﺎ ﺗﺮﻛﻴﺐ ﻛﺎﺭﺍﻛﺘﺮﻱ ﺧﺎﺻﻲ ) (None Breaking Spaceﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ .ﺩﺭ ﺑﺨﺶ )
( Entitiesﻧﻬﺎﺩﻫﺎ ﺑﻪ ﺍﻳﻦ ﻣﻄﻠﺐ ﺑﻴﺸﺘﺮ ﭘﺮﺩﺍﺧﺘﻪ ﺧﻮﺍﻫﺪ ﺷﺪ.
ﻓﺎﺻﻠﻪ ﻫﺎﻱ ﺍﺿﺎﻓﻲ ﺑﻴﻦ ﻛﻠﻤﺎﺕ ﺩﺭ ﻳﻚ ﻣﺘﻦ ﺍﭼﺘﻤﻞ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮﻫﺎ ﺩﻳﺪﻩ ﻧﺨﻮﺍﻫﺪ ﺷﺪ ﻭ ﺩﺭ ﻧﻤﺎﻳﺶ ﻫﻤﻴﺸﻪ ﺗﺒﺪﻳﻞ ﺑﻪ ﺗﻨﻬﺎ ﻳﻚ ﻓﺎﺻﻠﻪ )(space
ﺧﻮﺍﻫﺪ ﺷﺪ .ﺩﺭ ﺿﻤﻦ ﻳﻚ ﺧﻂ ﺧﺎﻟﻲ ﺩﺭ ﻣﺘﻦ ﺍﺩﻳﺘﻮﺭ ﺑﺼﻮﺭﺕ ﻳﻚ ﻓﺎﺻﻠﻪ ﻳﺎ spaceﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ.
ﺑﺮﺍﻱ ﺍﻳﺠﺎﺩ ﻳﻚ ﺳﻄﺮ ﺟﺪﻳﺪ ﻫﻴﭽﮕﺎﻩ ﺍﺯ ﻳﻚ ﺗﮓ > <pﺧﺎﻟﻲ ﺍﺳﺘﻔﺎﺩﻩ ﻧﻜﻨﻴﺪ ﻭ ﺑﻪ ﺟﺎﻱ ﺁﻥ ﺍﺯ ﺗﮓ > <brﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ..
8 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻣﺮﻭﺭﮔﺮﻫﺎ ﺑﻪ ﻫﻨﮕﺎﻡ ﻧﻤﺎﻳﺶ ﺑﻌﻀﻲ ﻋﻨﺎﺻﺮ ﺑﺼﻮﺭﺕ ﺍﺗﻮﻣﺎﺗﻴﻚ ﻳﻚ ﺳﻄﺮ ﺧﺎﻟﻲ ﻗﺒﻞ ﻭ ﺑﻌﺪ ﺍﺯ ﺁﻥ ﻋﻨﺼﺮ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﻨﺪ ﺩﺍﺩ .ﺑﺮﺍﻱ ﻧﻤﻮﻧﻪ ﺍﻳﻦ ﮔﺮﻭﻩ ﺍﺯ
ﻋﻨﺼﺮﻫﺎ ﻣﻴﺘﻮﺍﻥ ﺍﺯ ﭘﺎﺭﺍﮔﺮﺍﻑ )> (<pﻭ ﺳﺮﺗﻴﺘﺮﻫﺎ )> (<..hﻧﺎﻡ ﺑﺮﺩ ،ﺑﺎ ﻛﻤﻚ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﻣﻴﺘﻮﺍﻧﻴﺪ ﺍﻳﻦ ﭘﻴﺶ ﻓﺮﺿﻬﺎ ﺭﺍ ﺗﻐﻴﻴﺮ ﺩﻫﻴﺪ.
ﺗﮓ > <hrﻳﺎ Roler Horizontalﺳﺒﺐ ﻧﻤﺎﻳﺶ ﻳﻚ ﺧﻂ ﺍﻓﻘﻲ ﺧﻮﺍﻫﺪ ﺷﺪ ﻭ ﺩﺭ ﻭﺍﻗﻊ ﺑﺨﺶ ﻫﺎﻱ ﻣﺨﺘﻠﻒ ﻣﻄﺎﻟﺐ ﺍﻳﻦ ﺻﻔﺤﺎﺕ ﺑﺎ ﻛﻤﻚ ﺍﻳﻦ
ﺗﮓ ﺍﺯ ﻫﻢ ﺟﺪﺍ ﺷﺪﻩ ﺍﻧﺪ.
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ:
ﺑﺎﺯ ﻫﻢ ﻣﺜﺎﻝ ﭘﺎﺭﺍﮔﺮﺍﻓﻬﺎ
ﺍﻳﻦ ﻣﺜﺎﻝ ﺑﻌﻀﻲ ﺍﺯ ﻣﻘﺎﺩﻳﺮ ﻗﺮﺍﺭﺩﺍﺩﻱ ﻋﻨﺎﺻﺮ ﭘﺎﺭﺍﮔﺮﺍﻑ ﺭﺍ ﺷﺮﺡ ﻣﻴﺪﻫﺪ.
ﺗﺮﺍﺯﺑﻨﺪﻱ ﭘﺎﺭﺍﮔﺮﺍﻑ ﻫﺎ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺗﺮﺍﺯ ﺑﻨﺪﻱ ﻳﻚ ﭘﺎﺭﺍﮔﺮﺍﻑ ﺭﺍ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ ﻳﺎ attributeﺍﻱ ﺑﻪ ﻧﺎﻡ alignﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ .ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﭘﺎﺭﺍﮔﺮﺍﻑ ﺩﺭ ﻭﺳﻂ ﻧﺎﺣﻴﻪ
ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ.
) "( align="center
ﺭﻓﺘﻦ ﺳﺮ ﺳﻄﺮ ﺟﺪﻳﺪ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﮓ > <brﺭﺍ ﺩﺭ ﻳﻚ ﻣﺘﻦ ﺍﭼﺘﻤﻞ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ.
ﺳﺮ ﺗﻴﺘﺮﻫﺎ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﮕﻬﺎﻱ > <h6> .... <h1ﺭﺍ ﺩﺭ ﻳﻚ ﻣﺘﻦ ﺍﭼﺘﻤﻞ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ.
ﺗﺮﺍﺯﺑﻨﺪﻱ ﺳﺮ ﺗﻴﺘﺮﻫﺎ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺗﺮﺍﺯ ﺑﻨﺪﻱ ﻳﻚ ﺳﺮ ﺗﻴﺘﺮ ﺭﺍ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ ﻳﺎ attributeﺍﻱ ﺑﻪ ﻧﺎﻡ alignﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ .ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﺳﺮ ﺗﻴﺘﺮ ﺩﺭ ﻭﺳﻂ ﻧﺎﺣﻴﻪ
ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ.
) "( align="center
ﻧﻤﺎﻳﺶ ﺧﻄﻮﻁ ﺍﻓﻘﻲ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﻧﻤﺎﻳﺶ ﺧﻄﻮﻁ ﺍﻓﻘﻲ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﮓ > <brﻣﻴﺒﺎﺷﺪ.
ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ comment
ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ commentﺩﺭ ﻛﺪﻫﺎﻱ ﺍﭼﺘﻤﻞ ﺭﺍ ﻧﻤﺎﻳﺶ ﻣﻴﺪﻫﺪ.
ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﺻﻔﺤﻪ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﺻﻔﺤﻪ ﺭﺍ ﺑﺎ ﻛﻤﻚ ﻳﻜﻲ ﺍﺯ ﺷﻨﺎﺳﻪ ﻫﺎﻱ ) ( attributeﻋﻨﺼﺮ bodyﺑﻪ ﻧﺎﻡ bgcolorﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ.
)(Background Color
) "( bgcolor ="blue
9 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﺗﮕﻬﺎﻱ ﺍﺻﻠﻲ
ﺩﺭ ﺟﺪﻭﻝ ﺯﻳﺮ ﻋﻨﺎﺻﺮ ﻣﻌﺮﻓﻲ ﺷﺪﻩ ﺩﺭ ﺍﻳﻦ ﻓﺼﻞ ﺑﻪ ﻫﻤﺮﺍﻩ ﻟﻴﻨﻜﻬﺎﻱ ﻣﺮﺑﻮﻃﻪ ﺟﻬﺖ ﻣﻄﺎﻟﻌﻪ ﺑﻴﺸﺘﺮ ﺁﻭﺭﺩﻩ ﺷﺪﻩ ﺍﺳﺖ .ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺑﺮﺍﻱ ﻫﺮ
ﻋﻨﺼﺮ ﻓﻬﺮﺳﺘﻲ ﺍﺯ ﺷﻨﺎﺳﻪ ﻫﺎ ﻳﺎ Attributesﻣﻮﺟﻮﺩ ﺍﺳﺖ ﻭ ﻫﻤﭽﻨﻴﻦ ﺑﻪ ﺷﻨﺎﺳﻪ ﻫﺎﻱ ﻛﻨﺎﺭﮔﺬﺍﺷﺘﻪ ﺷﺪﻩ ) (Deprecatedﺩﺭ ﻧﺴﺨﻪ ﻫﺎﻱ ﺁﻳﻨﺪﻩ
ﺍﭼﺘﻤﻞ ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻭ ﺳﻌﻲ ﻛﻨﻴﺪ ﻛﻪ ﺍﺯ ﺁﻧﻬﺎ ﺍﺳﺘﻔﺎﺩﻩ ﻧﻜﻨﻴﺪ.
:
Start Tag Purpose ﻛﺎﺭﺑﺮﺩ
><html Defines a html document ﻧﺸﺎﻥ ﺷﺮﻭﻉ ﻣﺘﻦ ﺍﭼﺘﻤﻞ
><body Defines the document's body ﺗﻌﻴﻴﻦ ﺑﺪﻧﻪ ﻭ ﻗﺴﻤﺖ ﺍﺻﻠﻲ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ
><h1>-<h6 Defines heading 1 to heading 6 ﺗﻌﺮﻳﻒ ﺳﺮ ﺗﻴﺘﺮﻫﺎﻱ h1ﺗﺎ h6
><p Defines a paragraph ﺗﻌﺮﻳﻒ ﭘﺎﺭﺍﮔﺮﺍﻑ
><br Inserts a single line break ﺭﻓﺘﻦ ﺳﺮ ﺧﻂ ﺟﺪﻳﺪ
><hr Defines a horizontal rule ﻧﻤﺎﻳﺶ ﺧﻂ ﺍﻓﻘﻲ
><!-- Defines a comment in the HTML source code ﻧﻮﺷﺘﻦ ﺷﺮﺡ ﻭ comment
ﻣﺮﺟﻊ - HTML 4.01 Specification :ﻓﻬﺮﺳﺖ ﻋﻨﺎﺻﺮ -ﻓﻬﺮﺳﺖ ﺷﻨﺎﺳﻪ ﻫﺎ
ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ
ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﺎ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ ،ﻓﺎﺭﺳﻲ ﺳﺎﺯﻱ ﻭ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﻳﻮﻧﻴﻜﺪ ﻭ ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﺩﻳﺘﻮﺭ ﺁﻧﻼﻳﻦ ﻭ ﻓﺎﺭﺳﻲ ﺍﻳﻦ ﺳﺎﻳﺖ ﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ .ﻫﻤﭽﻨﻴﻦ
ﻣﺘﺎﺗﮓ http-equivﻭ ﺷﻨﺎﺳﻪ dirﻧﻴﺰ ﻣﻌﺮﻓﻲ ﺧﻮﺍﻫﺪ ﺷﺪ.
ﺩﺭﺱ ﻗﺒﻠﻲ ،ﺩﺭﺱ ﺑﻌﺪﻱ
ﺳﺆﺍﻻﺕ ﻣﺮﺑﻮﻁ ﺑﻪ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ ﺭﺍ ﻣﻴﺘﻮﺍﻥ ﺑﻪ ﺳﻪ ﮔﺮﻭﻩ ﻋﻤﺪﻩ ﺗﻘﺴﻴﻢ ﻛﺮﺩ:
-ﭼﮕﻮﻧﻪ ﻓﺎﺭﺳﻲ ﺑﻨﻮﻳﺴﻢ ؟
-ﭼﮕﻮﻧﻪ ﻓﺎﺭﺳﻲ ﺑﺨﻮﺍﻧﻢ؟
-ﭼﮕﻮﻧﻪ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﻓﺎﺭﺳﻲ ﺭﺍ ﻧﻤﺎﻳﺶ ﺩﻫﻢ؟
ﺩﺭ ﻣﻮﺭﺩ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ ﻭ ﻓﺎﺭﺳﻲ ﺧﻮﺍﻧﻲ ﺍﮔﺮ ﺍﺯ ﺍﺩﻳﺘﻮﺭ ﺁﻧﻼﻳﻦ ﻣﺎ ﺩﺭ ﺑﺨﺶ ﻣﺜﺎﻟﻬﺎ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻴﺪ ﻧﻴﺎﺯﻱ ﺑﻪ ﻓﺎﺭﺳﻲ ﺳﺎﺯﻱ ﻧﺪﺍﺭﻳﺪ ﻭ ﺑﺎ ﻛﻤﻚ ﺍﺩﻳﺘﻮﺭ
ﻣﺰﺑﻮﺭ ﺑﺎﻳﺪ ﺑﻪ ﺭﺍﺣﺘﻲ ﻗﺎﺩﺭ ﺑﻪ ﺗﺎﻳﭗ ﻓﺎﺭﺳﻲ ﻭ ﻻﺗﻴﻦ ﺑﺎﺷﻴﺪ.ﺍﮔﺮ ﻣﻴﺨﻮﺍﻫﻴﺪ ﻛﻪ ﺩﺭ ﻫﺮ ﺣﺎﻝ ﻛﺎﻣﭙﻴﻮﺗﺮﺗﺎﻥ ﺭﺍ ﻓﺎﺭﺳﻲ ﻛﻨﻴﺪ ،ﻣﻄﺎﻟﻌﻪ ﺻﻔﺤﺎﺕ ﺯﻳﺮ ﺭﺍﻫﻨﻤﺎﻱ
ﺑﺴﻴﺎﺭ ﺧﻮﺑﻲ ﺑﺮﺍﻱ ﻓﺎﺭﺳﻲ ﺳﺎﺯﻱ ﻣﻴﺒﺎﺷﻨﺪ:
10 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
* ﺭﺍﻫﻨﻤﺎﻱ ﻓﺎﺭﺳﻲ ﺳﺎﺯﻱ ﻭﻳﻨﺪﻭﺯ
* ﻗﻠﻢ ﻭ ﺻﻔﺤﻪﻛﻠﻴﺪ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ
* unicode.org
* ﭘﺮﻭﺯﻩ ﻓﺎﺭﺳﻲ ﻭﺏ
* ﻭﺑﻼگ ﻓﺎﺭﺳﻲ FAQ
ﻳﻮﻧﻲﻛﺪ ﭼﻴﺴﺖ؟
ﺑﻪ ﻃﻮﺭ ﺧﻼﺻﻪ ﻭ ﺑﺎ ﺻﺮﻑ ﻧﻈﺮ ﺍﺯ ﺑﻌﻀﻲ ﺍﺯ ﭘﻴﭽﻴﺪﮔﻴﻬﺎ ﻣﻲﺷﻮﺩ ﮔﻔﺖ ﻳﻮﻧﻲﻛﺪ ﻣﺠﻤﻮﻋﻪﺍﻱ ﺑﺴﻴﺎﺭ ﺑﺰﺭگ ﺍﺯ ﻧﻮﻳﺴﻪ )(characterﻫﺎﻱ ﻣﺨﺘﻠﻒ ﺍﺳﺖ.
ﺍﻳﻦ ﻣﺠﻤﻮﻋﻪ ﺗﻘﺮﻳﺒﺎً ﺗﻤﺎﻡ ﻧﻮﻳﺴﻪﻫﺎﻱ ﻣﻮﺭﺩ ﺍﺳﺘﻔﺎﺩﻩ ﺩﺭ ﻛﺎﻣﭙﻴﻮﺗﺮ ﺩﺭ ﺟﻬﺎﻥ ﺭﺍ ﺩﺭ ﺧﻮﺩ ﺩﺍﺭﺩ .ﺍﺯ ﺣﺮﻑ ﺳﻴﻦ ﺍﻟﻔﺒﺎﻱ ﻓﺎﺭﺳﻲ ﮔﺮﻓﺘﻪ ﺗﺎ ﺣﺮﻭﻑ ﺍﻟﻔﺒﺎﻱ ﭼﻴﻨﻲ
ﺷﻤﺎﺭﻩ ﻳﻜﺘﺎ
ٴ ﻭ ﺍﻧﻮﺍﻉ ﻭ ﺍﻗﺴﺎﻡ ﻋﻼﻣﺖﻫﺎ ﻭ ﺣﺘﻲ ﺧﻂ ﻣﻴﺨﻲ ﻓﺎﺭﺳﻲ ﺑﺎﺳﺘﺎﻥ .ﻣﻬﻤﺘﺮﻳﻦ ﺧﺎﺻﻴﺖ ﻳﻮﻧﻲﻛﺪ ﺍﻳﻦ ﺍﺳﺖ ﻛﻪ ﺑﻪ ﻫﺮ ﻛﺪﺍﻡ ﺍﺯ ﺍﻳﻦ ﻧﻮﻳﺴﻪﻫﺎ ﻳﻚ
ﺍﺧﺘﺼﺎﺹ ﻣﻲﺩﻫﺪ ﻛﻪ ﺑﻪ ﺁﻥ ﻛﺪ ﻳﻮﻧﻲﻛﺪ ﺁﻥ ﻧﻮﻳﺴﻪ ﻣﻲﮔﻮﻳﻨﺪ .ﻛﺪ ﻳﻮﻧﻲﻛﺪ ﻱ ﻓﺎﺭﺳﻲ U+06CCﺍﺳﺖ ﺩﺭ ﺣﺎﻟﻲ ﻛﻪ ﻛﺪ ﻳﻮﻧﻲﻛﺪ ﻱ ﻋﺮﺑﻲ
U+064Aﺍﺳﺖ .ﻭﻗﺘﻲ ﻳﻚ ﭘﺮﻭﻧﺪﻩ ﺫﺧﻴﺮﻩ ﻣﻲﺷﻮﺩ ﺍﻳﻦ ﻛﺪﻫﺎ ﻫﺴﺘﻨﺪ ﻛﻪ ﺫﺧﻴﺮﻩ ﻣﻲﺷﻮﻧﺪ ﻧﻪ ﺷﻜﻞ ﻧﻮﻳﺴﻪﻫﺎ .ﺑﻨﺎﺑﺮ ﺍﻳﻦ ﺗﺄﺛﻴﺮ ﺍﻳﻦ ﻣﺴﺄﻟﻪ ﺍﻳﻦ ﺍﺳﺖ
ﻛﻪ ﺍﮔﺮ ﭘﺮﻭﻧﺪﻩﺍﻱ ﺑﺎ ﻗﺎﻟﺐ ﻳﻮﻧﻲﻛﺪ ﺫﺧﻴﺮﻩ ﺷﻮﺩ ﻭ ﺩﺭ ﻫﺮ ﻛﺠﺎﻱ ﺩﻳﮕﺮ ﺩﻧﻴﺎ ﻛﻪ ﺍﺯ ﻳﻮﻧﻲﻛﺪ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻲﻛﻨﺪ ﺑﺎﺯ ﺷﻮﺩ ،ﻫﻤﺎﻥ ﻧﻮﻳﺴﻪﻫﺎ ﺩﺭﻭﻧﺶ ﻗﺮﺍﺭ
ﺧﻮﺍﻫﻨﺪ ﺩﺍﺷﺖ.
ﺩﻭ ﻧﻜﺘﻪ ﺑﺴﻴﺎﺭ ﻣﻬﻢ ﺩﺭ ﻣﻮﺭﺩ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ:
•ﺭﻭﺵ ﻛﺪﮔﺰﺍﺭﻱ UTF-8
ﺍﻛﻴﺪﺍ ﺗﻮﺻﻴﻪ ﻣﻴﺸﻮﺩ ﻛﻪ ﺑﺮﺍﻱ ﺗﺎﻳﭗ ﻭ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﻓﺎﺭﺳﻲ ﺍﺯ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﻳﻮﻧﻴﻜﺪ ﻭ ﺭﻭﺵ ﻛﺪﮔﺰﺍﺭﻱ UTF-8ﺍﺳﻨﻔﺎﺩﻩ ﺷﻮﺩ ﻭ ﺍﻳﻦ ﺭﻭﺷﻲ ﺍﺳﺖ ﻛﻪ
ﻣﻄﺎﻟﺐ ﺍﻳﻦ ﺳﺎﻳﺖ ﻭ ﺍﺩﻳﺘﻮﺭ ﺁﻧﻼﻳﻨﺶ ﺍﺯ ﺁﻥ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﺪ .ﻧﻜﺘﻪ ﻣﻬﻢ ﺩﺭ ﻧﻤﺎﻳﺶ ﺻﺤﻴﺢ ﻣﺘﻮﻥ ﻓﺎﺭﺳﻲ ﺗﻌﻴﻴﻦ ﻧﻮﻉ ﻛﺪﮔﺰﺍﺭﻱ ﻳﺎ encoingﺻﻔﺤﺎﺕ
ﻓﺎﺭﺳﻲ ﺍﺳﺖ ﻛﻪ ﺑﺮﺍﻱ ﺍﻳﻨﻜﺎﺭ ﺑﺎﻳﺪ ﺍﺯ ﻣﺘﺎﺗﮓ ﺧﺎﺻﻲ ﺑﻪ ﻧﺎﻡ http-equivﺩﺭ ﺑﺨﺶ headﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺑﻪ ﺷﻜﻞ ﺯﻳﺮ ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ:
>"<meta http-equiv="Content-Type" content="text/html; charset=utf-8
ﺩﺭ ﺍﻳﻨﺼﻮﺭﺕ ﻣﺮﻭﺭﮔﺮ ﻳﺎ Browserﻗﺒﻞ ﺍﺯ ﻧﻤﺎﻳﺶ ﺻﻔﺤﻪ ﺍﺯ ﺭﻭﻱ ﻣﺘﺎﺗﮓ ﻓﻮﻕ ﻧﻮﻉ ﻛﺪﮔﺰﺍﺭﻱ ) (Encodingﺭﺍ ﺗﺸﺨﻴﺺ ﺩﺍﺩﻩ ﻭ ﺩﻳﮕﺮ ﻣﺜﻼ
ﻧﻴﺎﺯﻱ ﺑﻪ ﺗﻌﻴﻴﻦ ﺩﺳﺘﻲ )ﺩﺭﺍﻛﺴﭙﻠﻮﺭﻭﺭ ( View/Encoing/Unicode / UTF-8 : 5ﻧﻮﻉ Encoingﺗﻮﺳﻂ ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﻩ ﺳﺎﻳﺖ ﻧﺨﻮﺍﻫﺪ
ﺑﻮﺩ.
•ﺷﻨﺎﺳﻪ ﻳﺎ attributeﻱ ﺑﻪ ﻧﺎﻡ dir
ﺳﻤﺖ ﻭ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﻻﺗﻴﻦ ﺑﻪ ﺻﻮﺭﺕ ﭘﻴﺶ ﻓﺮﺽ ﻭ defaultﺍﺯ ﭼﭗ ﺑﻪ ﺭﺍﺳﺖ )ltrﻳﺎ (Right To Leftﻣﻴﺒﺎﺷﺪ .ﺩﺭ ﻣﻮﺭﺩ ﻣﺘﻮﻥ ﻭ
ﺟﻤﻼﺕ ﻓﺎﺭﺳﻲ ﺑﺎﻳﺪ ﺑﺎ ﻛﻤﻚ ﺭﻭﺷﻲ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﭘﻴﺶ ﻓﺮﺽ ﺭﺍ ﺑﻪ "ﺭﺍﺳﺖ ﺑﻪ ﭼﭗ" ﺗﻐﻴﻴﺮ ﺩﻫﻴﺪ .ﺷﻨﺎﺳﻪ ﻳﺎ attributeﻱ ﺑﻪ ﻧﺎﻡ dirﻳﺎ ﻫﻤﺎﻥ
directionﺍﻳﻦ ﻛﺎﺭ ﺭﺍ ﺑﺮﺍﻱ ﺷﻤﺎ ﺍﻧﺠﺎﻡ ﻣﻴﺪﻫﺪ .ﺍﻳﻦ ﺷﻨﺎﺳﻪ ﺩﺍﺭﺍﻱ ﺩﻭ ﻣﻘﺪﺍﺭ ﻣﻤﻜﻦ ﻣﻴﺒﺎﺷﺪ :
ﭼﭗ ﺑﻪ ﺭﺍﺳﺖ dir="ltr" , Left-to-right text. -
ﺭﺍﺳﺖ ﺑﻪ ﭼﭗ dir="rtl" , Right-to-left text. -
11 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻣﺜﻼ ﺑﺮﺍﻱ ﻧﻤﺎﻳﺶ ﺟﻤﻠﻪ ﻓﺎﺭﺳﻲ "ﺳﻼﻡ ﺑﻪ ﺩﻧﻴﺎﻱ ﻭﺏ!" ﺑﺎ ﻛﻤﻚ ﻋﻨﺎﺻﺮ pﻳﺎ divﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﺑﻪ ﻳﻜﻲ ﺍﺯ ﺷﻜﻠﻬﺎﻱ ﺯﻳﺮ ﻋﻤﻞ ﺷﻮﺩ:
> </pﺳﻼﻡ ﺑﻪ ﺩﻧﻴﺎﻱ ﻭﺏ >"<p dir="rtl
> </divﺳﻼﻡ ﺑﻪ ﺩﻧﻴﺎﻱ ﻭﺏ >"<div dir="rtl
ﺩﺭ ﺑﺴﻴﺎﺭﻱ ﺍﺯ ﻋﻨﺎﺻﺮ ﻭ ﺗﮓ ﻫﺎﻱ ﺍﭼﺘﻤﻞ ﺍﻣﻜﺎﻥ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ dirﻣﻴﺴﺮ ﺑﻮﺩﻩ ﻭ ﺑﻪ ﻋﻨﻮﺍﻥ ﻧﻤﻮﻧﻪ ﻣﻴﺘﻮﺍﻥ ﺍﺯ ﻋﻨﺎﺻﺮ ﺯﻳﺮ ﻧﺎﻡ ﺑﺮﺩ:
<p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> ,
<span> , ...
ﻣﺜﺎﻟﻬﺎﻱ ﺯﻳﺮ ﻧﺤﻮﻩ ﺗﺮﺍﺯﺑﻨﺪﻱ ﻣﺘﻮﻥ ﻓﺎﺭﺳﻲ ﺭﺍ ﺑﻪ ﻧﻤﺎﻳﺶ ﻣﻴﮕﺬﺍﺭﻧﺪ ﻭ ﺑﺮﺍﻱ ﻣﻄﺎﻟﻌﻪ ﺑﻴﺸﺘﺮ ﺩﺭ ﻣﻮﺭﺩ ﺗﺮﺍﺯﺑﻨﺪﻱ ﻣﺘﻮﻥ "ﺭﺍﺳﺖ ﺑﻪ ﭼﭗ" ﺑﻪ ﺍﻳﻦ ﺻﻔﺤﻪ
ﻣﺮﺍﺟﻌﻪ ﻛﻨﻴﺪ) .ﻋﻨﺎﺻﺮ Span ،BDOﻭ ﺷﻨﺎﺳﻪ langﻫﻢ ﺑﺮﺍﻱ ﻣﻄﺎﻟﻌﻪ ﻣﻔﻴﺪ ﻣﻴﺒﺎﺷﻨﺪ(.
ﻣﺜﺎﻟﻬﺎﻱ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ:
ﻣﺜﺎﻝ : 1ﺳﻼﻡ ...
ﺑﻪ ﺑﺨﺶ headﻭ ﺗﮓ divﺗﻮﺟﻪ ﻛﻨﻴﺪ .ﻣﺘﺎ ﺗﮓ http-equivﻧﻮﻉ ﻛﺪﮔﺰﺍﺭﻱ ﺭﺍ ﺗﻌﻴﻴﻦ ﻣﻴﻜﻨﺪ ﻭ ﺩﺭ ﺍﻳﻨﺠﺎ ﺑﺎ ﻛﻤﻚ ﺗﮓ divﺳﻤﺖ ﻭ ﺟﻬﺖ
ﻧﻮﺷﺘﻦ ﻣﻄﺎﻟﺐ )ﺍﺯ ﺭﺍﺳﺖ ﺑﻪ ﭼﭗ ﻳﺎ ﺑﻠﻌﻜﺲ( ﺗﻌﻴﻴﻦ ﻣﻴﮕﺮﺩﺩ dir .ﺑﻪ ﻣﻌﻨﺎﻱ directionﻭ ﺟﻬﺖ ﺑﻮﺩﻩ ﻭ rtlﻣﺨﻔﻒ to left rightﻭ ltrﻣﻌﺎﺩﻝ
left to rightﻣﻴﺒﺎﺷﺪ.
ﻣﺜﺎﻝ : 2ﻣﺘﻦ ﻫﺎ ﻭ ﭘﺎﺭﺍﮔﺮﺍﻑ ﺑﻨﺪﻱ
ﺑﻪ ﻋﻨﺎﺻﺮ divﻭ pﺗﻮﺟﻪ ﻛﻨﻴﺪ .ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ dirﺟﻬﺖ ﻧﻮﺷﺘﻦ ﻣﻄﺎﻟﺐ )ﺍﺯ ﺭﺍﺳﺖ ﺑﻪ ﭼﭗ ﻳﺎ ﺑﻠﻌﻜﺲ( ﺗﻌﻴﻴﻦ ﻣﻴﮕﺮﺩﺩ.
ﻣﺜﺎﻝ : 3ﻣﺘﻮﻥ ﻓﺎﺭﺳﻲ ﻭ ﻻﺗﻴﻦ ﺩﺭ ﻛﻨﺎﺭ ﻫﻢ
ﻣﺜﺎﻟﻲ ﻛﺎﻣﻠﺘﺮ ﺑﺎ ﺭﺍﻫﻨﻤﺎﻱ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﻋﻨﺼﺮ divﻭ ﺷﻨﺎﺳﻪ dirﺁﻥ
ﻣﺜﺎﻝ : 4ﺷﻨﺎﺳﻪ dirﺩﺭ ﻋﻨﺼﺮ html
ﺍﮔﺮ ﺷﻨﺎﺳﻪ dirﺭﺍ ﺩﺭ ﻋﻨﺼﺮ htmlﺑﻜﺎﺭ ﺑﺒﺮﻳﺪ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﺗﻤﺎﻣﻲ ﻣﺘﻮﻥ ﺍﺯ ﺭﺍﺳﺖ ﺑﻪ ﭼﭗ ﺷﺪﻩ ﻭ ﺑﺮﺍﻱ ﻧﻮﺷﺘﻦ ﺍﺯ ﭼﭗ ﺑﻪ ﺭﺍﺳﺖ ﺑﺎﻳﺪ ﺑﻪ ﺻﻮﺭﺕ
ﻣﻮﺭﺩﻱ ﺷﻨﺎﺳﻪ " dir="ltrﺭﺍ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ .ﻫﻤﭽﻨﻴﻦ ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﻣﺎﺳﻤﺎﺳﻚ! Scrool downﻣﺮﻭﺭﮔﺮ ﺩﺭ ﺳﻤﺖ ﭼﭗ ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ
ﺧﻮﺍﻫﺪ ﺷﺪ .ﺩﺭ ﺻﻮﺭﺕ ﺍﺳﺘﻔﺎﺩﻩ ﺷﻨﺎﺳﻪ dirﺩﺭ ﻋﻨﺼﺮ bodyﻣﺎﺳﻤﺎﺳﻚ ﻫﻤﺎﻥ ﺳﻤﺖ ﺭﺍﺳﺖ ﺧﻮﺍﻫﺪ ﻣﺎﻧﺪ.
ﻣﺜﺎﻝ : 5ﻣﺜﺎﻝ ﻛﺎﻣﻞ
ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺷﻨﺎﺳﻪ dirﺩﺭ ﻋﻨﺼﺮﻫﺎﻱ ﻣﺨﺘﻠﻒ
ﻣﺜﺎﻝ ... : 6ﻓﻘﻂ ﺗﺼﻮﺭ ﻛﻦ...
ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ dirﺩﺭ ﺟﺪﺍﻭﻝ
12 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻓﺮﻣﺖ ﺩﻫﻲ ) ( Formatting
ﮔﺮﻭﻫﻲ ﺍﺯ ﺗﮓ ﻫﺎﻱ ﺍﭼﺘﻤﻞ ﺑﻪ ﻓﺮﻣﺖ ﺩﻫﻲ ﻭ ﺗﻌﻴﻴﻦ ﺷﻜﻞ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ) ﻣﺜﻼ ﺿﺨﻴﻢ ﻳﺎ boldﺑﻮﺩﻥ ،ﻣﻮﺭﺏ ﻳﺎ ﺍﻳﺘﺎﻟﻴﻚ ﺑﻮﺩﻥ ( ﻣﻴﭙﺮﺩﺍﺯﻧﺪ).ﺑﻪ ﻳﺎﺩ
ﺩﺍﺷﺘﻪ ﺑﺎﺷﺪ ﻛﻪ ﺩﺭ ﻧﺴﺨﻪ 4ﺍﭼﺘﻤﻞ ﺍﻳﻦ ﺧﻮﺍﺹ ﺑﻪ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﻣﺤﻮﻝ ﺷﺪﻩ ﺍﺳﺖ (.ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﺎ ﺍﻳﻦ ﮔﺮﻭﻩ ﺍﺯ ﺗﮕﻬﺎﻱ formatingﺁﺷﻨﺎ
ﺧﻮﺍﻫﻴﺪ ﺷﺪ:
<b> , <big> , <code> , <del> , <em> , <i> , <ins> , <kbd> , <pre> , <s> , <samp> , <small> ,
><strike> , <strong> , <sub> , <sup> , <tt> , <u> , <var
ﻣﺜﺎﻟﻬﺎﻱ ﺷﻜﻞ ﺩﻫﻲ ﻣﺘﻮﻥ )(Text Formatting
ﺩﺭ ﻣﺜﺎﻟﻬﺎﻱ ﺯﻳﺮ ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﻋﻨﺎﺻﺮ ﻭ ﺗﮕﻬﺎﻱ ﺷﻜﻞ ﺩﻫﻲ ﻣﺘﻮﻥ ﺷﺮﺡ ﺩﺍﺩﻩ ﺷﺪﻩ ﺍﻧﺪ:
ﺷﻜﻞ ﺩﻫﻲ ﻣﺘﻮﻥ
ﺷﻜﻠﻬﺎﻱ ﻣﺨﺘﻠﻒ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﺑﺎ ﻛﻤﻚ ﻋﻨﺎﺻﺮ b , strong , big , em , i , small , sub , sup
ﻣﺘﻮﻥ ﺍﺯ ﻗﺒﻞ ﺷﻜﻞ ﺩﻫﻲ ﺷﺪﻩ
ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﺍﺯ ﻗﺒﻞ ﺷﻜﻞ ﺩﺍﺩﻩ ﺷﺪﻩ ﺑﺎ ﻛﻤﻚ ﻋﻨﺼﺮ preﻳﺎ pre Formatted
ﺑﺮﺍﻱ ﻧﻤﺎﻳﺶ ﺍﺷﻌﺎﺭ ﻓﺎﺭﺳﻲ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﻋﻨﺼﺮ preﺑﻬﺘﺮﻳﻦ ﺍﻧﺘﺨﺎﺏ ﻣﻴﺒﺎﺷﺪ.
ﻋﻨﺎﺻﺮ ﺩﻳﮕﺮ ﺷﻜﻞ ﺩﻫﻲ ﻣﺘﻦ
ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ underline ،deletedﻭ ...ﺑﺎ ﻛﻤﻚ ﻋﻨﺎﺻﺮ code , kbd , tt , samp , var , del , ins
ﻧﺤﻮﻩ ﺩﻳﺪﻥ ﺳﻮﺭﺱ ﻛﺪﻫﺎﻱ ﺍﭼﺘﻤﻞ )(HTML Source
ﺍﮔﺮ ﻣﻴﺨﻮﺍﻫﻴﺪ ﻛﻪ ﺳﻮﺭﺱ ﻳﺎ ﺍﺻﻞ ﻛﺪﻫﺎﻱ ﺍﭼﺘﻤﻞ ﺻﻔﺤﺎﺕ ﻭﺏ ﺭﺍ ﺑﺒﻴﻨﻴﺪ ﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﺩﺭ ﻣﻨﻮﻱ Viewﻣﺮﻭﺭﮔﺮﺗﺎﻥ ﺣﺎﻟﺖ Source o
ﻳﺎ Page Sourceﺭﺍ ﺍﻧﺘﺨﺎﺏ ﻛﺮﺩﻩ ﻭ ﻣﺮﻭﺭﮔﺮ ﻛﺪ ﺍﭼﺘﻤﻞ ﺭﺍ ﺩﺭﻭﻥ ﺍﺩﻳﺘﻮﺭﻱ ﺑﺎﺯ ﻛﺮﺩﻩ ﻭ ﻗﺎﺑﻞ ﺫﺧﻴﺮﻩ ﺗﻮﺳﻂ ﺷﻤﺎ ﺑﺮﺍﻱ ﺍﺳﺘﻔﺎﺩﻩ ﻫﺎﻱ
ﺑﻌﺪﻱ ﻣﻴﺒﺎﺷﺪ.
ﺍﮔﺮ ﺻﻔﺤﻪ ﻣﻮﺭﺩ ﻧﻈﺮ ﺍﺯ ﻣﺠﻤﻮﻋﻪ ﻓﺮﻳﻤﻬﺎ ) (Framesetﺍﺳﺘﻔﺎﺩﻩ ﻛﺮﺩﻩ ﺑﺎﺷﺪ ﺑﺮﺍﻱ ﺩﻳﺪﻥ ﺳﻮﺭﺱ ﻛﺪ ﺍﺻﻠﻲ ﻓﺮﻳﻤﻬﺎ ﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﺍﺑﺘﺪﺍ ﺑﺎ o
ﻛﻤﻚ ﺭﻭﺵ ﺑﺎﻻ ﺑﻪ ﻣﺸﺎﻫﺪﻩ ﺳﻮﺭﺱ ﻛﺪﻫﺎﻱ ﺍﭼﺘﻤﻞ ﭘﺮﺩﺍﺧﺘﻪ )ﻻﺯﻡ ﺑﻪ ﺗﻮﺿﻴﺢ ﺍﺳﺖ ﻛﻪ ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﻓﻘﻂ ﺗﻌﺎﺭﻳﻒ ﻛﻠﻲ ﻓﺮﻳﻤﻬﺎ ﻗﺮﺍﺭ
ﺩﺍﺭﻧﺪ (.ﻭ ﺳﭙﺲ ﺑﺮﺍﻱ ﺩﻳﺪﻥ ﻛﺪ ﺍﭼﺘﻤﻞ ﺍﺧﺘﺼﺎﺻﻲ ﻫﺮ ﺻﻔﺤﻪ ﺑﺎﻳﺪ ﭘﺲ ﺍﺯ " "Right Clickﺭﻭﻱ ﻫﺮ ﺻﻔﺤﻪ ""View Source
ﻛﺮﺩﻩ ﻭ ﻛﺪ ﺍﭼﺘﻤﻞ ﻫﺮ ﻓﺮﻳﻢ ﺭﺍ ﺟﺪﺍﮔﺎﻧﻪ ﺑﺒﻴﻨﻴﺪ.
ﺍﮔﺮ ﻃﺮﺍﺡ ﺳﺎﻳﺖ ﺑﺎ ﻛﻤﻚ Java Scriptﻣﺎﻧﻊ ﺩﻳﺪﻥ ﺳﻮﺭﺱ ﺗﻮﺳﻂ ﺷﻤﺎ ﻣﻴﺸﻮﺩ ،ﺍﺑﺘﺪﺍ ﺩﺭ ﻣﻨﻮﻱ Tools/Internet o
Options.../Security/Custom Levelﻣﺮﻭﺭﮔﺮﻫﺎﻱ ﺍﻛﺴﭙﻠﻮﺭﺭ ﺍﻣﻜﺎﻧﺎﺕ ﺟﺎﻭﺍﺳﻜﺮﻳﭙﺖ ﻣﺮﻭﺭﮔﺮ ﺭﺍ ﻏﻴﺮ ﻓﻌﺎﻝ ﻛﺮﺩﻩ )(disable
ﻭ ﺳﭙﺲ ﻣﺮﺍﺣﻞ ﺑﺎﻻ ﺭﺍ ﺗﻜﺮﺍﺭ ﻛﻨﻴﺪ!!!
13 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﭼﻨﺪ ﻧﻜﺘﻪ ﻛﺎﺭﺑﺮﺩﻱ:
ﺩﺭ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ Underlineﺩﻗﺖ ﻛﻨﻴﺪ ﭼﻮﻥ ﺩﺭ ﺍﻛﺜﺮ ﻣﺮﻭﺭﮔﺮﻫﺎ ،ﭘﻴﻮﻧﺪﻫﺎ ﺑﺎ ﺍﻳﻦ ﺧﻄﻮﻁ ﺯﻳﺮﻱ ﻧﺸﺎﻥ ﺩﺍﺩﻩ ﻣﻲ ﺷﻮﻧﺪ ﻭ ﺍﻳﻦ ﻣﺴﺎﻟﻪ ﻣﻴﺘﻮﺍﻧﺪ .I
ﻛﺎﺭﺑﺮﺍﻥ ﺭﺍ ﺩﭼﺎﺭ ﺍﺷﺘﺒﺎﻩ ﻛﻨﺪ .
ﺑﻪ ﻛﺎﺭﮔﻴﺮﻱ ﺗﮕﻬﺎﻱ EMﻭ STRONGﻛﻪ ﺟﺎﻳﮕﺰﻳﻦ ﺗﮕﻬﺎﻱ Iﻭ Bﻫﺴﺘﻨﺪ ،ﺍﻳﻦ ﺍﻃﻤﻴﻨﺎﻥ ﺭﺍ ﻣﻲ ﺩﻫﺪ ﻛﻪ ﺻﻔﺤﻪ ﺷﻤﺎ ﺗﻮﺳﻂ ﻫﻤﻪ .II
ﻣﺮﻭﺭﮔﺮﻫﺎ ﺑﺼﻮﺭﺕ ﺻﺤﻴﺢ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ .
ﺑﻪ ﺗﺮﺗﻴﺐ ﺑﺴﺘﻪ ﺷﺪﻥ ﺗﮕﻬﺎﻱ ﭘﺎﻳﺎﻧﻲ ﺩﺭ ﻣﺜﺎﻝ ﺯﻳﺮ ﺩﻗﺖ ﻛﻨﻴﺪ ،ﻫﻤﺎﻥ ﮔﻮﻧﻪ ﻛﻪ ﻣﺸﺎﻫﺪﻩ ﻣﻲ ﻛﻨﻴﺪ ﻋﻨﺼﺮ STRONGﺑﻌﺪ ﺍﺯ ﻋﻨﺼﺮ U .III
ﺷﺮﻭﻉ ﺷﺪﻩ ﺍﺳﺖ ،ﺑﻪ ﻫﻤﻴﻦ ﺧﺎﻃﺮ ﺗﮓ ﺧﺎﺗﻤﻪ ﺩﻫﻨﺪﻩ ﺁﻥ ﻗﺒﻞ ﺍﺯ ﺗﮓ ﺧﺎﺗﻤﻪ ﺩﻫﻨﺪﻩ Uﻗﺮﺍﺭ ﻣﻲ ﮔﻴﺮﺩ.
><U>version <STRONG>2.0</STRONG></U
ﺗﮕﻬﺎﻱ ﻓﺮﻣﺖ ﺩﻫﻲ ﻣﺘﻮﻥ
Start Tag Purpose ﻛﺎﺭﺑﺮﺩ
><b Defines bold text ﻧﻤﺎﻳﺶ ﺗﻮﭘﺮ
><big Defines big text ﻧﻤﺎﻳﺶ ﺩﺭ ﺍﻧﺪﺍﺯﻩ ﺑﺰﺭگ
><em Defines emphasized text ﻧﻤﺎﻳﺶ ﺑﺼﻮﺭﺕ ﺗﺎﻛﻴﺪ ﺷﺪﻩ
><i Defines italic text ﻧﻤﺎﻳﺶ ﺍﻳﺘﺎﻟﻴﻚ ﻳﺎ ﻛﺞ
><small Defines small text ﻧﻤﺎﻳﺶ ﺩﺭ ﺍﻧﺪﺍﺯﻩ ﻛﻮﭼﻚ
><strong Defines strong text ﻧﻤﺎﻳﺶ ﻗﻮﻱ ﻳﺎ ﻫﻤﺎﻥ Bold
><sub Defines subscripted text ﻧﻤﺎﻳﺶ ﭘﺎﻳﻴﻦ ﺗﺮ ﺍﺯ ﺧﻂ ﺍﻓﻘﻲ
><sup Defines superscripted text ﻧﻤﺎﻳﺶ ﺑﺎﻻﺗﺮ ﺍﺯ ﺧﻂ ﺍﻓﻘﻲ
><ins Defines inserted text ﻧﻤﺎﻳﺶ ﺑﻪ ﺻﻮﺭﺕ ﺧﻂ ﺯﻳﺮ
><del Defines deleted text ﻧﻤﺎﻳﺶ ﺑﻪ ﺻﻮﺭﺕ ﺧﻂ ﺧﻮﺭﺩﻩ
><s Deprecated. Use <del> instead ﺍﺯ ﺭﺩﻩ ﺧﺎﺭﺝ
><strike Deprecated. Use <del> instead ﺍﺯ ﺭﺩﻩ ﺧﺎﺭﺝ
><u Deprecated. Use styles instead ﺍﺯ ﺭﺩﻩ ﺧﺎﺭﺝ
Start Tag Purpose ﻛﺎﺭﺑﺮﺩ
><code Defines computer code text ﻧﻤﺎﻳﺶ ﻛﺪﻫﺎﻱ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ
><kbd Defines keyboard text ﻧﻤﺎﻳﺶ ﻣﺘﻦ ﺑﺼﻮﺭﺕ ﺻﻔﺤﻪ ﻛﻠﻴﺪﻱ
><samp Defines sample computer code ﻧﻤﺎﻳﺶ ﻛﺪﻫﺎﻱ ﻧﻤﻮﻧﻪ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ
><tt Defines teletype text ﻧﻤﺎﻳﺶ ﺗﻠﻪ ﺗﺎﻳﭗ
14 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
><var Defines a variable ﻧﻤﺎﻳﺶ ﻣﺘﻐﻴﻴﺮﻫﺎ
><pre Defines preformatted text ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﺍﺯ ﻗﺒﻞ ﻓﺮﻣﺖ ﺷﺪﻩ
ﻣﺮﺟﻊ - HTML 4.01 Specification :ﻓﻬﺮﺳﺖ ﻋﻨﺎﺻﺮ -ﻓﻬﺮﺳﺖ ﺷﻨﺎﺳﻪ ﻫﺎ
Character Entities
ﺩﺭ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺍﭼﺘﻤﻞ ﮔﺮﻭﻫﻲ ﺍﺯ ﻧﻮﻳﺴﻪ ﻫﺎ ) (Characterﺩﺍﺭﺍﻱ ﻣﻌﻨﻲ ﺧﺎﺻﻲ ﺑﻮﺩﻩ ) ﻣﺜﻼ ﻧﻮﻳﺴﻪ < ﺷﺮﻭﻉ ﻳﻚ ﺗﮓ ﻭ ﻧﻮﻳﺴﻪ > ﺍﻧﺘﻬﺎﻱ ﻳﻚ ﺗﮓ ﺭﺍ
ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ ( .ﻭ ﺑﺮﺍﻱ ﻧﻤﺎﻳﺶ ﺁﻧﻬﺎ ﺩﺭ ﺻﻔﺤﺎﺗﺘﺎﻥ ﻣﺴﺘﻘﻴﻤﺎ ﻗﺎﺑﻞ ﻣﺼﺮﻑ ﻧﻤﻴﺒﺎﺷﻨﺪ .ﺩﺭ ﺍﻳﻦ ﻓﺼﻞ ﺑﺎ ﻓﻬﺮﺳﺖ ﺍﻳﻦ ﻧﻮﻳﺴﻪ ﻫﺎ ﺁﺷﻨﺎ ﺷﺪﻩ ﻭ ﻧﺤﻮﻩ ﺩﺭﺝ
ﺁﻧﻬﺎ ﺭﺍ ﺑﺎ ﻛﻤﻚ Character Entitiesﻓﺮﺍ ﺧﻮﺍﻫﻴﺪ ﮔﺮﻓﺖ.
ﺩﺭﺱ ﻗﺒﻠﻲ ،ﺩﺭﺱ ﺑﻌﺪﻱ
Character Entities
ﺩﺭ ﺍﭼﺘﻤﻞ ﺑﻌﻀﻲ ﺍﺯ ﻧﻮﻳﺴﻪ ﻫﺎ ﺩﺍﺭﺍﻱ ﻣﻌﻨﻲ ﺧﺎﺻﻲ ﺑﻮﺩﻩ ﻭ ﺑﺮﺍﻱ ﻧﻤﺎﻳﺶ ﺁﻧﻬﺎ ﺩﺭ ﺻﻔﺤﺎﺗﺘﺎﻥ ﺑﺎﻳﺪ ﺍﺯ ﺑﺮﺍﺑﺮﻫﺎﻱ ﺧﺎﺻﻲ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ .ﻳﻚ character
entitiesﺍﺯ ﺳﻪ ﻗﺴﻤﺖ ﺗﺸﻜﻴﻞ ﻣﻴﺸﻮﺩ:
-1ﻧﻮﻳﺴﻪ (&) ampersand
-2ﻧﺎﻡ entityﻳﺎ ﻧﻮﻳﺴﻪ #ﻭ ﺳﭙﺲ ﺷﻤﺎﺭﻩ ﻋﺪﺩﻱ entity
- 3ﻭ ﻧﻬﺎﻳﺘﺎ ﻧﻮﻳﺴﻪ (;) semicolon
ﺑﺮﺍﻱ ﻣﺜﺎﻝ ﺑﺮﺍﻱ ﻧﻤﺎﻳﺶ ﻧﻮﻳﺴﻪ < ﺩﻭ ﺭﻭﺵ ﻭﺟﻮﺩ ﺩﺍﺭﺩ ،ﻣﻴﺘﻮﺍﻧﻴﺪ ﺍﺯ ; <ﻳﺎ ﺍﺯ ; <ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ .ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ltﻧﺎﻡ entityﻭ 60ﺷﻤﺎﺭﻩ
ﻋﺪﺩﻱ ﺁﻥ ﻣﻴﺒﺎﺷﺪ.
ﻣﺰﻳﺖ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﻧﺎﻡ entityﺩﺭ ﻣﻘﺎﺑﻞ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻤﺎﺭﻩ ﻋﺪﺩﻱ ﺁﻥ ﺳﻬﻮﻟﺖ ﻳﺎﺩﺁﻭﺭﻱ ﺁﻥ ﺍﺯ ﺭﻭﻱ ﻧﺎﻣﺶ ﻣﻴﺒﺎﺷﺪ ﻭ ﻋﻴﺐ ﺁﻥ ﺍﻳﻦ ﺍﺳﺖ ﻛﻪ ﺗﻤﺎﻣﻲ
ﻣﺮﻭﺭﮔﺮﻫﺎ ﻧﺎﻡ ﮔﺬﺍﺭﻳﻬﺎﻱ ﻣﻮﺟﻮﺩ ﺑﺮﺍﻱ Entityﻫﺎ ﺭﺍ ﻗﺒﻮﻝ ﻧﺪﺍﺭﻧﺪ ﻭﻟﻲ ﺩﺭ ﻋﻮﺽ ﻫﻤﮕﻲ ﺷﻤﺎﺭﻩ ﻫﺎﻱ ﻋﺪﺩﻱ entityﻫﺎ ﺭﺍ ﺑﺨﻮﺑﻲ ﻣﻴﺸﻨﺎﺳﻨﺪ .ﺗﻮﺟﻪ
ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ entityﻫﺎ ﺑﻪ ﻛﻮﭼﻚ ﻭ ﺑﺰﺭﮔﻲ ﺣﺮﻭﻑ ﺣﺴﺎﺱ ﻫﺴﺘﻨﺪ ﻭ ﺩﺭ ﻭﺍﻗﻊ Case Sensitiveﻣﻴﺒﺎﺷﻨﺪ.
ﭘﺮ ﻛﺎﺭﺑﺮﺩﺗﺮﻳﻦ character entityﻫﺎ ﺩﺭ ﺍﭼﺘﻤﻞ ،ﻧﻮﻳﺴﻪ ﻓﺎﺻﻠﻪ ﻳﺎ Spaceﻳﺎ Blankﻣﻴﺒﺎﺷﺪ ﻭ ﻧﺎﻡ ﺭﺳﻤﻲ ﺁﻥ non-breaking space
ﻣﻴﺒﺎﺷﺪ .ﻫﻤﺎﻧﻄﻮﺭ ﻛﻪ ﻣﻴﺪﺍﻧﻴﺪ ﻣﺮﻭﺭﮔﺮﻫﺎ ﻓﺎﺻﻠﻪ ﻫﺎﻱ ﺍﺿﺎﻓﻲ ﺩﺭ ﻣﺘﻦ ﺭﺍ ﺩﺭ ﻧﻈﺮ ﻧﮕﺮﻓﺘﻪ ) (truncate spacesﻭ ﻣﺜﻼ ﺍﺯ 10ﻧﻮﻳﺴﻪ ﻓﺎﺻﻠﻪ 9 ،ﺗﺎﻱ
ﺁﻧﺮﺍ ﻧﺎﺩﻳﺪﻩ ﻣﻴﮕﻴﺮﻧﺪ ﻭ ﺑﺮﺍﻱ ﻧﻤﺎﻳﺶ ﻓﺎﺻﻠﻪ ﻫﺎﻱ ﺍﺿﺎﻓﻲ ﺑﺎﻳﺪ ﺍﺯ ;  ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ.
ﻓﻬﺮﺳﺖ ﭘﺮﻛﺎﺭﺑﺮﺩﺗﺮﻳﻦ Character Entitiesﻫﺎ
)ﻧﻤﺎﻳﺶ( Result )ﺷﺮﺡ( Description )ﻧﺎﻡ( Entity Name )ﺷﻤﺎﺭﻩ ﻋﺪﺩﻱ( Entity Number
non-breaking space ;  ; 
< less than ;< ;<
15 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
> greater than ;> ;>
& ampersand ;& ;&
" quotation mark ;" ;"
' apostrophe ;'
ﭼﻨﺪ Character Entitieﺑﺎ ﻛﺎﺭﺑﺮﺩﻫﺎﻱ ﻛﻤﺘﺮ
Result Description Entity Name Entity Number
¢ cent ;¢ ;¢
£ pound ;£ ;£
¥ yen ;¥ ;¥
§ section ;§ ;§
© copyright ;© ;©
® registered trademark ;® ;®
× multiplication ;× ;×
÷ division ;÷ ;÷
ﺑﺮﺍﻱ ﺩﻳﺪﻥ ﻓﻬﺮﺳﺖ ﻛﻞ Character entityﻫﺎ ﺩﺭ ﺍﭼﺘﻤﻞ 4ﺳﺮﻱ ﺑﻪ ﺍﻳﻦ ﺻﻔﺤﻪ ﺑﺰﻧﻴﺪ.
ﭘﻴﻮﻧﺪﻫﺎﻱ ﺍﭼﺘﻤﻞ ) ( HTML Links
ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﺎ ﭘﻴﻮﻧﺪﻫﺎ ) ، ( Linksﺗﮓ ﻫﺎﻱ ﻣﺮﺑﻮﻃﻪ ﻣﺨﺼﻮﺻﺎ ﺗﮓ Anchorﻳﺎ Aﻭ ﻧﺤﻮﻩ ﺑﻪ ﻛﺎﺭ ﮔﻴﺮﻱ ﺁﻧﻬﺎ ﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ ،ﺑﻪ ﻳﺎﺩ ﺩﺍﺷﺘﻪ
ﺑﺎﺷﻴﺪ ﻛﻪ ﺑﺎ ﻛﻤﻚ ﭘﻴﻮﻧﺪﻫﺎ ﺍﺳﺖ ﻛﻪ ﺻﻔﺤﺎﺕ ﻭﺏ ﺑﻪ ﻫﻢ ﻣﺮﺗﺒﻂ ﻣﻴﺸﻮﻧﺪ ﻭ ﻫﻤﺎﻧﻨﺪ ﺗﺎﺭﻱ ﻧﺎﻣﺮﺋﻲ ﺍﻃﻼﻋﺎﺕ ﻭ ﺻﻔﺤﺎﺕ ﻭﺏ ﺭﺍ ﺑﻪ ﻫﻢ ﮔﺮﻩ ﻣﻴﺰﻧﻨﺪ.
ﻫﻤﭽﻨﻴﻦ ﺷﻨﺎﺳﻪ ﻫﺎﻱ ﺑﺴﻴﺎﺭ ﻣﻬﻢ target، hrefﻭ nameﺗﺸﺮﻳﺢ ﺧﻮﺍﻫﻨﺪ ﺷﺪ.
ﺩﺭﺱ ﻗﺒﻠﻲ ،ﺩﺭﺱ ﺑﻌﺪﻱ
ﺩﺭ ﻣﺤﻴﻂ ﻭﺏ ،ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺑﺎ ﻛﻤﻚ ﭘﻴﻮﻧﺪﻫﺎ ﺑﻪ ﻳﻜﺪﻳﮕﺮ ﻣﺘﺼﻞ ) (Linkﻣﻴﺸﻮﻧﺪ .ﺍﺻﻄﻼﺡ ﺍﺑﺮﻣﺘﻦ ) (Hyper Textﺩﺭ ﻣﻘﺎﺑﻞ ﻣﺘﻦ ﺧﻄﻲ
) (Linearﻗﺮﺍﺭ ﺩﺍﺭﺩ .ﺩﺭ ﻳﻚ ﻣﺘﻦ ﻣﻌﻤﻮﻟﻲ ﺧﻮﺍﻧﺪﻥ ﺑﻪ ﺷﻜﻞ ﺧﻄﻲ ﻭ ﺍﺯ ﺍﺑﺘﺪﺍ ﺑﻪ ﺍﻧﺘﻬﺎ ﻣﻴﺒﺎﺷﺪ ﻭ ﺩﺭ ﻣﻘﺎﺑﻞ ﺩﺭ ﻳﻚ ﻣﺘﻦ ﻣﺨﺘﻠﻂ ) (Hyperﺑﺎ ﻛﻤﻚ
ﭘﻴﻮﻧﺪﻫﺎ ﻣﻴﺘﻮﺍﻥ ﺍﺯ ﻳﻚ ﻣﺘﻦ ﺑﻪ ﻫﺮ ﺻﻔﺤﻪ ﺩﻳﮕﺮ ﺩﺭ ﻭﺏ ﻣﺘﺼﻞ ﺷﺪ .ﺍﻳﻦ ﻛﺎﺭ ﺑﺎ ﻛﻤﻚ ﻋﻨﺼﺮﻱ ﻣﻌﻠﻮﻡ ﺍﻟﺤﺎﻝ! ﺑﻪ ﻧﺎﻡ Aﻳﺎ Anchorﻣﻴﺴﺮ ﻣﻴﮕﺮﺩﺩ.
ﻣﺜﺎﻟﻬﺎ
ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪﻫﺎ ﺑﺎ ﻛﻤﻚ ﻣﺘﻦ
ﺍﻳﻦ ﻣﺜﺎﻝ ﭼﮕﻮﻧﮕﻲ ﺍﻳﺠﺎﺩ ﻳﻚ ﭘﻴﻮﻧﺪ ،ﻟﻴﻨﻚ ﻳﺎ Linkﺭﺍ ﺩﺭ ﻳﻚ ﻣﺘﻦ ﺍﭼﺘﻤﻞ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ.
ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪﻫﺎ ﺑﺎ ﻛﻤﻚ ﺗﺼﺎﻭﻳﺮ
ﺍﻳﻦ ﻣﺜﺎﻝ ﭼﮕﻮﻧﮕﻲ ﺍﻳﺠﺎﺩ ﻳﻚ ﭘﻴﻮﻧﺪ ،ﻟﻴﻨﻚ ﻳﺎ Linkﺭﺍ ﺑﺎ ﻛﻤﻚ ﻳﻚ ﺗﺼﻮﻳﺮ ) (imageﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ.
16 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ
ﺗﮓ Anchorﻭ ﺷﻨﺎﺳﻪ href
ﺑﺮﺍﻱ ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪ ﺑﻪ ﺻﻔﺤﺎﺕ ﺩﻳﮕﺮ ﺍﺯ ﺗﮓ > <aﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﺸﻮﺩ .ﭘﻴﻮﻧﺪﻫﺎ ﻣﻴﺘﻮﺍﻧﻨﺪ ﺑﻪ ﺑﺨﺶ ﺩﻳﮕﺮﻱ ﺍﺯ ﻫﻤﺎﻥ ﺻﻔﺤﻪ ،ﺻﻔﺤﺎﺕ ﺩﻳﮕﺮ ﻭﺏ ،ﺗﺼﺎﻭﻳﺮ،
ﻓﺎﻳﻠﻬﺎﻱ ﺻﻮﺗﻲ ﻳﺎ ﺣﺘﻲ ﻓﻴﻠﻢ ﻫﺎ ﻭ ...ﺍﺷﺎﺭﻩ ﻛﻨﻨﺪ).ﺩﺭ ﻭﺍﻗﻊ ﺑﻪ ﻫﺮ ﺁﺩﺭﺱ ﺍﻳﻨﺘﺮﻧﺘﻲ(
ﻓﺮﻡ ﻛﻠﻲ ﻳﻚ ﭘﻴﻮﻧﺪ ﺑﻪ ﻗﺮﺍﺭ ﺯﻳﺮ ﺍﺳﺖ:
><a href="url">Some Text</a
ﺩﺭ ﻣﺜﺎﻝ ﺑﺎﻻ ﺗﮓ > <aﺑﺮﺍﻱ ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪﻱ ﺑﻪ ﺻﻔﺤﻪ ﺍﻱ ﺩﻳﮕﺮ ﻛﻪ ﺁﺩﺭﺱ ﺍﻳﻨﺘﺮﻧﺘﻲ ﺁﻥ urlﻣﻴﺒﺎﺷﺪ ﺑﻜﺎﺭ ﺭﻓﺘﻪ ﺍﺳﺖ .ﺑﺮﺍﻱ ﺗﻌﻴﻴﻦ ﻣﻘﺼﺪ ﻭ ﻳﺎ ﺁﺩﺭﺱ
ﺻﻔﺤﻪ ﺟﺪﻳﺪ ﺍﺯ ﺷﻨﺎﺳﻪ ﺍﻱ ﺑﻪ ﻧﺎﻡ hrefﻛﻪ ﻫﻤﺎﻥ reference hyerlinkﻣﻴﺒﺎﺷﺪ ،ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﺸﻮﺩ ﻭ ﻣﻘﺪﺍﺭ ﺍﻳﻦ ﺷﻨﺎﺳﻪ ﺩﺭ ﻭﺍﻗﻊ ﻫﻤﺎﻥ ﺁﺩﺭﺱ
ﺍﻳﻨﺘﺮﻧﺘﻲ ﺻﻔﺤﻪ ﻣﻘﺼﺪ ﺍﺳﺖ .ﺑﺨﺶ ﻗﺎﺑﻞ ﺭﻭﻳﺖ ﭘﻴﻮﻧﺪ ﻭ ﺩﺭ ﻭﺍﻗﻊ ﻣﺘــﻨــﻲ )ﻭ ﻳﺎ ﺗﺼﻮﻳﺮﻱ ( ﻛﻪ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ ﻭ ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﻩ
ﺭﻭﻱ ﺁﻥ ﻛﻠﻴﻚ ﺧﻮﺍﻫﺪ ﻛﺮﺩ ﻣﻴﺎﻥ ﺗﮕﻬﺎﻱ > <aﻭ > </aﻗﺮﺍﺭ ﺩﺍﺩﻩ ﻣﻴﺸﻮﺩ ﻭ ﻫﺮ ﭼﻨﺪ ﻛﻪ ﺩﺭ ﻣﺜﺎﻝ ﺑﺎﻻ ﺍﻳﻦ ﺑﺨﺶ ﻣﺘﻦ " "Some Textﺍﺳﺖ
ﻭﻟﻲ ﻣﻴﺘﻮﺍﻧﺪ ﺣﺘﻲ ﻳﻚ ﺗﺼﻮﻳﺮ ﺑﺎﺷﺪ.
ﺑﺮﺍﻱ ﻧﻤﻮﻧﻪ ﻛﺪ ﺍﭼﺘﻤﻞ ﺯﻳﺮ ﭘﻴﻮﻧﺪﻱ ﺑﻪ ﺳﺎﻳﺖ google.comﺍﻳﺠﺎﺩ ﺧﻮﺍﻫﺪ ﻛﺮﺩ:
><a href="http://www.google.com/">Visit Google Site</a
ﻭ ﻣﺮﻭﺭﮔﺮ ﭘﻴﻮﻧﺪ ﺑﺎﻻ ﺭﺍ ﺑﻪ ﺷﻜﻞ ﺯﻳﺮ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﻭ ﺩﺭ ﺍﺛﺮ ﻛﻠﻴﻚ ﺭﻭﻱ ﭘﻴﻮﻧﺪ ﺗﻮﺳﻂ ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﻩ ،ﻣﺮﻭﺭﮔﺮ ﺑﻪ ﺳﺎﻳﺖ Googleﺧﻮﺍﻫﺪ ﺭﻓﺖ.
Visit Google Site
ﺷﻨﺎﺳﻪ targetﺩﺭ ﭘﻴﻮﻧﺪﻫﺎ:
ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ targetﺍﻣﻜﺎﻥ ﺗﻌﻴﻴﻦ ﻣﻘﺼﺪ ﭘﻴﻮﻧﺪ ﺟﺪﻳﺪ ﻓﺮﺍﻫﻢ ﻣﻴﺸﻮﺩ .ﺩﺭ ﻣﺜﺎﻝ ﺑﺎﻻ ﭘﺲ ﺍﺯ ﻛﻠﻴﻚ ﺭﻭﻱ ﭘﻴﻮﻧﺪ ،ﻣﺮﻭﺭﮔﺮ ﺳﺎﻳﺖ google.comﺭﺍ
ﺑﺎﺯ ﻛﺮﺩﻩ ﻭ ﺟﺎﻳﮕﺰﻳﻦ ﺳﺎﻳﺖ ﻓﻌﻠﻲ ﺧﻮﺍﻫﺪ ﺷﺪ .ﺍﮔﺮ ﻣﻴﺨﻮﺍﻫﻴﺪ ﻛﻪ ﻣﺮﻭﺭﮔﺮ ﭘﻴﻮﻧﺪ ﺭﺍ ﺩﺭ ﭘﻨﺠﺮﻩ ﺍﻱ ﺟﺪﻳﺪ ﺑﺎﺯ ﻛﻨﺪ ﺑﺎﻳﺪ ﺍﺯ ﺷﻨﺎﺳﻪ targetﻭ ﻣﻘﺪﺍﺭ
" "_blankﺑﺮﺍﻱ ﺁﻥ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ .ﻣﺜﺎﻝ ﺯﻳﺮ ﺳﺒﺐ ﺑﺎﺯ ﺷﺪﻥ ﺳﺎﻳﺖ google.comﺩﺭ ﭘﻨﺠﺮﻩ ﺟﺪﻳﺪﻱ ﺧﻮﺍﻫﺪ ﺷﺪ:
><a href="http://www.google.com/" target="_blank">Visit Google Site</a
ﺧﻮﺩﺗﺎﻥ ﺁﺯﻣﺎﻳﺶ ﻛﻨﻴﺪ Visit Google Site :
ﺷﻨﺎﺳﻪ : Name
17 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ nameﻣﻴﺘﻮﺍﻧﻴﺪ ﭘﻴﻮﻧﺪﻫﺎ ﺭﺍ ﻧﺎﻡ ﮔﺬﺍﺭﻱ ﻛﻨﻴﺪ .ﭘﻴﻮﻧﺪﻫﺎﻱ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ ﺍﻣﻜﺎﻥ ﺣﺮﻛﺖ ﻣﻴﺎﻥ ﻗﺴﻤﺘﻬﺎﻱ ﻣﺨﺘﻠﻒ ﻳﻚ ﺻﻔﺤﻪ ﻳﺎ
pageﺭﺍ ﻓﺮﺍﻫﻢ ﻣﻴﻜﻨﻨﺪ ،ﻣﺨﺼﻮﺻﺎ ﻭﻗﺘﻲ ﻛﻪ ﻣﺤﺘﻮﺍﻱ ﻳﻚ ﺻﻔﺤﻪ ﺯﻳﺎﺩ ﺑﻮﺩﻩ ﻭ ﻣﺮﻭﺭﮔﺮﻓﻘﻂ ﻗﺎﺩﺭ ﺑﻪ ﻧﻤﺎﻳﺶ ﺑﺨﺸﻲ ﺍﺯ ﻣﺤﺘﻮﺍﻱ ﺻﻔﺤﻪ ﻣﻴﺒﺎﺷﺪ .ﺩﺭ
ﺍﻳﻨﺼﻮﺭﺕ ﻣﺜﻼ ﺑﺮﺍﻱ ﺭﻓﺘﻦ ﺑﻪ ﺁﺧﺮ ﻳﻚ ﻣﺘﻦ ﺩﻳﮕﺮ ﻧﻴﺎﺯﻱ ﺑﻪ Scrool downﻛﺮﺩﻥ ﺗﻤﺎﻣﻲ ﺻﻔﺤﻪ ﻧﻴﺴﺖ ﻭ ﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﻩ ﺭﻭﻱ
ﭘﻴﻮﻧﺪﻱ ﻛﻪ ﺑﻪ ﺁﺧﺮ ﺻﻔﺤﻪ ﺍﺷﺎﺭﻩ ﻣﻴﻜﻨﺪ ﻛﻠﻴﻚ ﻛﻨﺪ.
ﻣﺜﺎﻝ :ﺑﺮﻭ ﺑﺎﻻﻱ ﺻﻔﺤﻪ!
ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﭘﻴﻮﻧﺪﻫﺎﻱ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ ﺷﺎﻣﻞ ﺩﻭ ﻣﺮﺣﻠﻪ ﺍﺳﺖ:
-1ﺍﻳﺠﺎﺩ ﻳﻚ ﭘﻴﻮﻧﺪ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ )ﺍﻳﻦ ﻗﺴﻤﺖ ﺑﻪ ﻋﻨﻮﺍﻥ ﻟﻨﮕﺮ ﻛﺎﺭ ﺧﻮﺍﻫﺪ ﻛﺮﺩ: (.
ﻓﺮﻡ ﻛﻠﻲ ﻳﻚ ﭘﻴﻮﻧﺪ ﻧﺎﻡ ﮔﺬﺍﺭﻱ ﺷﺪﻩ ﺑﻪ ﻗﺮﺍﺭ ﺯﻳﺮ ﺍﺳﺖ:
><a name="label">Text to be displayed</a
ﻭﻇﻴﻔﻪ ﺷﻨﺎﺳﻪ nameﺗﻌﻴﻴﻦ ﻧﺎﻡ ﺑﺮﺍﻱ ﭘﻴﻮﻧﺪ ﺍﺳﺖ ﻭ ﻣﻘﺪﺍﺭ ﺁﻥ ﻫﻤﺎﻥ ﻧﺎﻡ ﭘﻴﻮﻧﺪ ﻣﻴﺒﺎﺷﺪ .ﻧﺎﻡ ﭘﻴﻮﻧﺪ ﻫﻢ ﻫﺮ ﻧﺎﻡ ﻻﺗﻴﻨﻲ ﻣﻴﺘﻮﺍﻧﺪ ﺑﺎﺷﺪ .ﺩﺭ ﻓﺮﻡ ﻛﻠﻲ ﺑﺎﻻ،
ﻧﺎﻡ ﭘﻴﻮﻧﺪ labelﻭ ﻣﺘﻨﻲ ﻛﻪ ﺑﻌﻨﻮﺍﻥ ﭘﻴﻮﻧﺪ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﻣﻴﺸﻮﺩ ﻋﺒﺎﺭﺕ " "displayed Text to beﺧﻮﺍﻫﺪ ﺑﻮﺩ .ﻣﺜﺎﻝ ﺯﻳﺮ ﺑﻪ ﺍﻳﺠﺎﺩ ﻳﻚ ﭘﻴﻮﻧﺪ
ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ ﺑﺎ ﻧﺎﻡ topﻣﻴﭙﺮﺩﺍﺯﺩ:
><a name="top">Here is top of my page!</a
-2ﺍﻳﺠﺎﺩ ﻳﻚ ﭘﻴﻮﻧﺪ ﺑﻪ ﭘﻴﻮﻧﺪ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ ﺩﻳﮕﺮ:
ﺑﺮﺍﻱ ﺩﺍﺩﻥ ﻟﻴﻨﻚ ﺑﻪ ﭘﻴﻮﻧﺪﻱ ﻧﺎﻡ ﮔﺬﺍﺭﻱ ﺷﺪﻩ ،ﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﭘﻴﻮﻧﺪﻱ ﻣﻌﻤﻮﻟﻲ ﺍﻳﺠﺎﺩ ﻛﺮﺩﻩ ﻭ ﺩﺭ ﻗﺴﻤﺖ hrefﺁﻥ ﺍﺑﺘﺪﺍ urlﻣﻘﺼﺪ ﻭ ﺳﭙﺲ ﻧﻮﻳﺴﻪ
#ﻭ ﺩﺭ ﻧﻬﺎﻳﺖ ﻧﺎﻡ ﭘﻴﻮﻧﺪ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ ﺭﺍ ﺩﺭﺝ ﻛﻨﻴﺪ .ﻣﺜﺎﻝ ﺯﻳﺮ ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪﻱ ﺍﺳﺖ ﻛﻪ ﺑﻪ ﻟﻴﻨﻚ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ ﺍﻱ ﺑﻪ ﻧﺎﻡ topﺍﺷﺎﺭﻩ ﻣﻴﻜﻨﺪ:
><a href="http://www.khaterat.com/www/index.cgi#top"> Goto Top! </a
ﺩﺭ ﺍﺛﺮ ﻛﻠﻴﻚ ﺭﻭﻱ ﭘﻴﻮﻧﺪ ﺑﺎﻻ ﻣﺮﻭﺭﮔﺮ ﻣﺴﺘﻘﻴﻤﺎ ﺑﻪ ﺍﺑﺘﺪﺍﻱ ﺑﺨﺶ topﺻﻔﺤﻪ http://www.khaterat.com/www/index.cgiﺧﻮﺍﻫﺪ
ﺭﻓﺖ.
ﺍﮔﺮ ﻣﻘﺼﺪ ﭘﻴﻮﻧﺪ ﺩﺭ ﻫﻤﺎﻥ ﺻﻔﺤﻪ ﻗﺮﺍﺭ ﺩﺍﺭﺩ ﻧﻴﺎﺯﻱ ﺑﻪ ﻗﻴﺪ urlﻧﻴﺴﺖ ﻭ ﻓﻘﻂ ﻧﻮﻳﺴﻪ #ﻭ ﺳﭙﺲ ﻧﺎﻡ ﭘﻴﻮﻧﺪ ﻛﺎﻓﻲ ﺍﺳﺖ:
><a href="#top"> Goto Top! </a
ﭼﻨﺪ ﻧﻜﺘﻪ ﻛﺎﺭﺑﺮﺩﻱ ﺩﺭ ﻣﻮﺭﺩ ﭘﻴﻮﻧﺪﻫﺎ:
* ﻳﻜﻲ ﺍﺯ ﻛﺎﺭﺑﺮﺩﻫﺎﻱ ﺭﺍﻳﺞ ﭘﻴﻮﻧﺪﻫﺎﻱ ﻧﺎﻡ ﮔﺬﺍﺭﻱ ﺷﺪﻩ ﺩﺭ ﺻﻔﺤﺎﺕ ﻭ ﻣﺘﻮﻧﻲ ﻣﻴﺒﺎﺷﺪ ﻛﻪ ﻓﻬﺮﺳﺖ ﻭ ﻳﺎ ﻟﻴﺴﺘﻲ ﺍﺯ ﺍﻗﻼﻡ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺷﺪﻩ ﺍﺳﺖ ،ﻣﺎﻧﻨﺪ
ﺑﺨﺶ ﺳﺮﻓﺼﻞ ﻣﻄﺎﻟﺐ ،ﻓﻬﺮﺳﺖ FAQﻭ ﻳﺎ ...ﺩﺭ ﻫﻤﻴﻦ ﺻﻔﺤﻪ ﺩﺭ ﺩﻭ ﻣﻮﺭﺩ ﺍﺯ ﭘﻴﻮﻧﺪﻫﺎﻱ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺷﺪﻩ ﺍﺳﺖ ،ﺁﻳﺎ ﻣﻴﺘﻮﺍﻧﻴﺪ ﺁﻧﻬﺎ ﺭﺍ
ﺑﻴﺎﺑﻴﺪ؟!
* ﺍﮔﺮ ﻣﺮﻭﺭﮔﺮ ﻧﺘﻮﺍﻧﺪ ﻳﻚ ﭘﻴﻮﻧﺪ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ ﺭﺍ ﺑﻴﺎﺑﺪ ﺍﺑﺘﺪﺍﻱ ﺻﻔﺤﻪ ﻣﻘﺼﺪ ﺭﺍ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﺪ ﺩﺍﺩ.
18 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ
ﺑﺎﺯ ﻛﺮﺩﻥ ﭘﻴﻮﻧﺪ ﺩﺭ ﭘﻨﺠﺮﻩ ﺍﻱ ﺟﺪﻳﺪ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪﻫﺎﺋﻲ ﻛﻪ ﺩﺭ ﭘﻨﺠﺮﻩ ﺍﻱ ﺟﺪﻳﺪ ﺑﺎﺯ ﻣﻴﺸﻮﻧﺪ ﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ .ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﮔﺎﻥ ﺳﺎﻳﺘﺘﺎﻥ ﺭﺍ ﺍﺯ ﺩﺳﺖ ﻧﺨﻮﺍﻫﻴﺪ ﺩﺍﺩ.
ﺍﺭﺟﺎﻉ ﺑﻪ ﻗﺴﻤﺖ ﺩﻳﮕﺮﻱ ﺍﺯ ﺻﻔﺤﻪ
ﺑﺎ ﻛﻤﻚ ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺗﻌﺮﻳﻒ ﭘﻴﻮﻧﺪﻫﺎﻱ ﻧﺎﻡ ﮔﺬﺍﺭﻱ ﺷﺪﻩ ﺭﺍ ﻓﺮﺍﮔﺮﻓﺘﻪ ﻭ ﭼﮕﻮﻧﮕﻲ ﺍﺭﺟﺎﻉ ﺑﻪ ﻗﺴﻤﺘﻬﺎﻱ ﻣﺨﺘﻠﻒ ﻳﻚ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﺭﺍ ﻓﺮﺍ ﺧﻮﺍﻫﻴﺪ
ﮔﺮﻓﺖ.
ﺭﻫﺎﺋﻲ ﺍﺯ ﺷﺮ ﻓﺮﻳﻢ ﻫﺎ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻛﺎﺭﺑﺮﺩ ﺷﻨﺎﺳﻪ targetﻭ ﻣﻘﺪﺍﺭ _topﻭ ﻧﺤﻮﻩ ﺭﻫﺎﺋﻲ ﺍﺯ ﻓﺮﻳﻢ ﻫﺎ ﺭﺍ ﺷﺮﺡ ﺧﻮﺍﻫﺪ ﺩﺍﺩ.
ﻧﺤﻮﻩ ﺍﻳﺠﺎﺩ ﻳﻚ ﭘﻴﻮﻧﺪ mailto
ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺍﻳﺠﺎﺩ ﻳﻚ ﭘﻴﻮﻧﺪ ﺍﺯ ﻧﻮﻉ mailtoﺑﺮﺍﻱ ﺑﺎﺯ ﻛﺮﺩﻥ ﺑﺮﻧﺎﻣﻪ ﻣﺪﻳﺮﻳﺖ ﺍﻳﻤﻴﻞ ﻫﺎ ﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ .ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﺍﮔﺮ ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﻩ ﺳﺎﻳﺖ
ﺑﺮﻧﺎﻣﻪ ﻫﺎﻱ ﻣﺮﺑﻮﻁ ﺑﻪ ﺍﺭﺳﺎﻝ ﻭ ﻣﺪﻳﺮﻳﺖ ﺍﻳﻤﻴﻞ ﻫﺎ ﺭﺍ ﻧﺼﺐ ﻛﺮﺩﻩ ﺑﺎﺷﺪ ﻣﻴﺘﻮﺍﻧﺪ ﺑﻪ ﺍﺭﺳﺎﻝ ﺍﻳﻤﻴﻞ ﺑﭙﺮﺩﺍﺯﺩ.
ﻣﺜﺎﻟﻲ ﻛﺎﻣﻠﺘﺮ ﺩﺭ ﻣﻮﺭﺩ mailto
ﻣﺜﺎﻝ ﺍﺯ ﺍﺭﺳﺎﻝ ﺍﻳﻤﻴﻞ ﺑﺎ ﺍﻣﻜﺎﻥ ﺗﻌﻴﻴﻦ ﻣﻘﺎﺩﻳﺮ subject ،bcc ،ccﻭ body
Start Tag Purpose ﻛﺎﺭﺑﺮﺩ ﻋﻨﺼﺮ Anchor
><a Defines an anchor ﺗﻌﺮﻳﻒ ﻳﻚ ﭘﻴﻮﻧﺪ ﻳﺎ Anchorﺩﺭ ﻳﻚ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ
Target Attributes ﻛﺎﺭﺑﺮﺩ ﺣﺎﻟﺘﻬﺎﻱ ﻣﺨﺘﻠﻒ ﺷﻨﺎﺳﻪ target
"target="_blank ﻣﺮﻭﺭﮔﺮ ﭘﻴﻮﻧﺪ ﺭﺍ ﺩﺭ ﻳﻚ ﭘﻨﺠﺮﻩ ﺟﺪﻳﺪ ﺑﺎﺯ ﻣﻴﻜﻨﺪ.
"target="_self ﻣﺮﻭﺭﮔﺮ ﭘﻴﻮﻧﺪ ﺭﺍ ﻫﻤﺎﻥ ﭘﻨﺠﺮﻩ ﺑﺎﺯ ﻣﻴﻜﻨﺪ) .ﺣﺎﻟﺖ ﭘﻴﺶ ﻓﺮﺽ ﻳﺎ (default
"target="_parent ﻣﺮﻭﺭﮔﺮ ﭘﻴﻮﻧﺪ ﺭﺍ ﻓﺮﻳﻢ parentﺑﺎﺯ ﻣﻴﻜﻨﺪ) .ﻛﺎﺭﺑﺮﺩ ﺩﺭ ﻣﺒﺤﺚ ﻓﺮﻳﻤﻬﺎ(
"target="_top ﻣﺮﻭﺭﮔﺮ ﭘﻴﻮﻧﺪ ﺭﺍ ﺩﺭ ﻓﺮﻳﻢ ﻣﺎﺩﺭ ﻭ ﺍﺻﻠﻲ ﺑﺎﺯ ﻣﻴﻜﻨﺪ).ﺭﻭﺷﻲ ﺧﻮﺏ ﺑﺮﺍﻱ ﻧﺠﺎﺕ ﺍﺯ ﺷﺮ ﻓﺮﻳﻤﻬﺎ (
ﺑﺮﺍﻱ ﻣﻄﺎﻟﻌﻪ ﺑﻴﺸﺘﺮ ﺩﺭ ﻣﻮﺭﺩ ﺷﻨﺎﺳﻪ targetﺳﺮﻱ ﺑﻪ ﺍﻳﻦ ﺻﻔﺤﻪ ﺑﺰﻧﻴﺪ.
ﺟﺪﺍﻭﻝ ) (Tables
ﻧﻤﺎﻳﺶ ﻭ ﭼﻴﺪﻥ ﺍﻃﻼﻋﺎﺗﻲ ﻛﻪ ﺑﺼﻮﺭﺕ ﺳﻄﺮﻱ ﻭ ﺳﺘﻮﻧﻲ ﻫﺴﺘﻨﺪ ﻣﺎﻧﻨﺪ ﺟﺪﻭﻟﻲ ﺍﺯ ﺍﻋﺪﺍﺩ ﻭ ﺁﻣﺎﺭ ﺗﻨﻬﺎ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﮓ ﻫﺎﻱ ;<p> <br>  
ﺑﺴﻴﺎﺭ ﻣﺸﻜﻞ ﻣﻴﺒﺎﺷﺪ ﻭ ﺑﻪ ﻫﻤﻴﻦ ﺩﻟﻴﻞ ﺯﺑﺎﻥ ﺍﭼﺘﻤﻞ ﺗﮕﻬﺎﻱ ﺧﺎﺻﻲ ﺭﺍ ﺑﺮﺍﻱ ﺳﺎﺧﺘﻦ ﺍﻃﻼﻋﺎﺗﻲ ﻛﻪ ﺫﺍﺗﺎ ﺟﺪﻭﻟﻲ )ﺳﻄﺮﻱ ﻭ ﺳﺘﻮﻧﻲ( ﻫﺴﺘﻨﺪ ﺩﺭ ﻧﻈﺮ
ﮔﺮﻓﺘﻪ ﺍﺳﺖ .ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﺎ ﺍﻟﻤﺎﻥ ﺟﺪﻭﻝ ) ، ( Tableﺳﻠﻮﻟﻬﺎ ﻳﺎ ﺧﺎﻧﻪ ﻫﺎ ،ﻣﺮﺯ ﻭ borderﺩﺭ ﺟﺪﺍﻭﻝ ﻭ ﺗﮓ ﻫﺎﻱ ﻣﺮﺑﻮﻃﻪ ﻣﺨﺼﻮﺻﺎ ﺗﮕﻬﺎﻱ
19 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
TD , TR ،TABLEﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ .ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺟﺪﺍﻭﻝ ﻳﻜﻲ ﺍﺯ ﻣﻬﻤﺘﺮﻳﻦ ﺍﻟﻤﺎﻧﻬﺎﻱ ﭼﻴﺪﻣﺎﻥ ﻭ layoutﻣﻴﺒﺎﺷﻨﺪ.
ﻣﺜﺎﻟﻬﺎ:
ﺟﺪﺍﻭﻝ ،ﺁﺭﺍﻳﻪ ﻫﺎ
ﻣﺜﺎﻝ ﺳﺎﺩﻩ ﺍﻱ ﺑﺮﺍﻱ ﺍﻳﺠﺎﺩ ﺟﺪﺍﻭﻝ
ﻣﺮﺯ ﺟﺪﺍﻭﻝ
ﻧﻘﺶ ﺷﻨﺎﺳﻪ borderﺩﺭ ﺗﻌﻴﻴﻦ ﻣﺮﺯ ﺟﺪﺍﻭﻝ
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ
ﺟﺪﻭﻟﻬﺎ
ﺑﺮﺍﻱ ﺗﻌﺮﻳﻒ ﺟﺪﺍﻭﻝ ﺍﺯ ﺗﮓ > <tableﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﺸﻮﺩ .ﻳﻚ ﺟﺪﻭﻝ ﺍﺯ ﻳﻚ ﻳﺎ ﭼﻨﺪ ﺳﻄﺮ ﻛﻪ ﺑﺎ ﻛﻤﻚ ﺗﮓ > <trﺗﻌﺮﻳﻒ ﻣﻴﺸﻮﻧﺪ ،ﺗﺸﻜﻴﻞ ﻣﻴﺸﻮﺩ.
ﻫﺮ ﺭﺩﻳﻒ ﻳﺎ rowﺍﺯ ﻳﻚ ﻳﺎ ﭼﻨﺪ ﺳﻠﻮﻝ ،ﺧﺎﻧﻪ ﻳﺎ cellﺗﺸﻜﻴﻞ ﮔﺮﺩﻳﺪﻩ ﻛﻪ ﺑﺎ ﻛﻤﻚ ﺗﮓ > <tdﺍﻳﺠﺎﺩ ﻣﻴﺸﻮﻧﺪ .ﻧﺎﻡ ﻫﺎﻱ tdﻭ trﺑﻪ ﺗﺮﺗﻴﺐ ﺧﻼﺻﻪ
ﺷﺪﻩ row tableﻭ data tableﻣﻴﺒﺎﺷﻨﺪ.
ﻣﺤﺘﻮﻱ ﻳﻚ ﺳﻠﻮﻝ ﻣﻴﺘﻮﺍﻧﺪ ﻣﺘﻦ ،ﺗﺼﻮﻳﺮ ،ﻓﻬﺮﺳﺘﻬﺎ ،ﺟﺪﺍﻭﻝ ﺩﻳﮕﺮ ،ﭘﺎﺭﺍﮔﺮﺍﻓﻬﺎ ﻭ ...ﺑﺎﺷﺪ.
ﻣﺜﺎﻝ ﺯﻳﺮ ﺟﺪﻭﻟﻲ ﺍﺳﺖ ﺑﺎ ﺩﻭ ﺳﻄﺮ ﻭ ﺳﻪ ﺳﺘﻮﻥ :
ﻛﺪ ﺍﭼﺘﻤﻞ ﺟﺪﻭﻟﻲ ﺑﺎ ﺩﻭ ﺳﻄﺮ ﻭ ﺳﻪ ﺳﺘﻮﻥ ﻧﻤﺎﻳﺶ ﺟﺪﻭﻝ ﺭﻭﺑﺮﻭ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ
>"<table border="1" dir="rtl
><tr
></tdﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ <td>1
></tdﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ <td>2
></tdﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ <td>3 ﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ 1ﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ 2ﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ 3
></tr
><tr ﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ 1ﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ 2ﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ 3
></tdﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ <td>1
></tdﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ <td>2
></tdﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ <td>3
></tr
20 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
></table
ﺟﺪﻭﻟﻬﺎ ﻭ ﺷﻨﺎﺳﻪ borderﻭ : dir
•ﺩﺭ ﻣﺜﺎﻝ ﺑﺎﻻ ﺷﻨﺎﺳﻪ borderﻣﺮﺯ ﺟﺪﻭﻝ ﺭﺍ ﻣﺸﺨﺺ ﻣﻴﻜﻨﺪ ،ﻣﻘﺪﺍﺭ 1ﻣﺮﺯﻱ ﺑﺎ ﺿﺨﺎﻣﺖ ﻳﻚ ﭘﻴﻜﺴﻞ ﺭﺍ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﺪ ﺩﺍﺩ ﻭ ﻣﻘﺪﺍﺭ ﺻﻔﺮ ﺟﺪﻭﻝ ﺭﺍ ﺑﺪﻭﻥ ﻣﺮﺯ
ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﺪ ﺩﺍﺩ .ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺣﺎﻟﺖ ﭘﻴﺶ ﻓﺮﺽ ﻳﻌﻨﻲ ﺟﺪﻭﻟﻲ ﺑﺪﻭﻥ ﺷﻨﺎﺳﻪ ، borderﺟﺪﺍﻭﻝ ﺑﺪﻭﻥ ﻣﺮﺯ ﺭﺍ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﺪ ﺩﺍﺩ.
•ﺩﺭ ﻣﺜﺎﻝ ﺑﺎﻻ ﺷﻨﺎﺳﻪ dirﻳﺎ directionﻭ ﻣﻘﺪﺍﺭ rtlﺑﺮﺍﻱ ﺁﻥ ،ﺳﺒﺐ ﺗﻌﻴﻴﻦ ﻧﻤﺎﻳﺶ ﺟﻬﺖ ﻣﺘﻮﻥ ﺍﺯ ﺭﺍﺳﺖ ﺑﻪ ﭼﭗ ﺧﻮﺍﻫﺪ ﺷﺪ ﻭ ﭼﻮ ﻥ ﺩﺭ ﺩﺍﺧﻞ ﺗﻚ table
ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﺍﺳﺖ ﺍﻳﻦ ﺧﺎﺻﻴﺖ ﺑﻪ ﺗﻤﺎﻣﻲ ﺳﻠﻮﻟﻬﺎﻱ ﺟﺪﻭﻝ ﻣﻨﺘﻘﻞ ﺧﻮﺍﻫﺪ ﺷﺪ.
•ﺍﮔﺮ ﺟﺪﻭﻝ ﺣﺎﻭﻱ ﻣﺘﻮﻥ ﻻﺗﻴﻦ ﺍﺳﺖ ﻧﻴﺎﺯﻱ ﺑﻪ ﻗﻴﺪ dir=ltrﻧﻴﺴﺖ ﻭ ﺑﻪ ﺻﻮﺭﺕ ﭘﻴﺶ ﻓﺮﺽ ﺍﻃﻼﻋﺎﺕ ﺍﺯ ﭼﭗ ﺑﻪ ﺭﺍﺳﺖ ﭼﻴﺪﻩ ﺧﻮﺍﻫﻨﺪ ﺷﺪ.
•ﺳﺎﺩﻩ ﺗﺮﻳﻦ ﺟﺪﻭﻝ ﻣﻤﻜﻦ ﺩﺭ ﺍﭼﺘﻤﻞ ،ﺟﺪﻭﻟﻲ ﺍﺳﺖ ﺑﺎ ﻳﻚ ﺳﻄﺮ ﻭ ﻳﻚ ﺳﺘﻮﻥ! )>(<table/><tr/><td/>Hi<td><tr><table
ﺳﺮﺳﺘﻮﻥ ﺩﺭ ﺟﺪﺍﻭﻝ )(Headings
ﺳﺮﺳﺘﻮﻧﻬﺎ ﺩﺭ ﺟﺪﺍﻭﻝ ﺑﺎ ﻛﻤﻚ ﺗﮓ > <thﺗﻌﺮﻳﻒ ﻣﻴﺸﻮﻧﺪ .ﻣﺜﺎﻝ ﺯﻳﺮ ﻧﺤﻮﻩ ﺗﻌﺮﻳﻒ ﺳﺮﺳﺘﻮﻧﻬﺎ ﺭﺍ ﺩﺭ ﺟﺪﺍﻭﻝ ﻧﻤﺎﻳﺶ ﻣﻴﺪﻫﺪ:
ﻛﺪ ﺍﭼﺘﻤﻞ ﺟﺪﻭﻟﻲ ﺑﺎ ﺳﻪ ﺳﻄﺮ ﻭ ﺳﻪ ﺳﺘﻮﻥ ﻧﻤﺎﻳﺶ ﺟﺪﻭﻝ ﺭﻭﺑﺮﻭ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ
>"<table border="1" dir="rtl
><tr
></thﺳﺮﺳﺘﻮﻥ ﺍ><th
></thﺳﺮﺳﺘﻮﻥ <th>2
></thﺳﺮﺳﺘﻮﻥ <th>3
ﺳﺮﺳﺘﻮﻥ 3 ﺳﺮﺳﺘﻮﻥ 2 ﺳﺮﺳﺘﻮﻥ ﺍ
></tr
><tr ﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ 1ﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ 2ﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ 3
></tdﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ <td>1
></tdﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ <td>2
></tdﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ <td>3 ﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ 1ﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ 2ﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ 3
></tr
><tr
></tdﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ <td>1
></tdﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ <td>2
></tdﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ <td>3
21 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
></tr
></table
ﻫﻤﺎﻧﻄﻮﺭﻳﻜﻪ ﻣﺸﺎﻫﺪﻩ ﻣﻴﻜﻨﻴﺪ ﺳﺮ ﺳﺘﻮﻧﻬﺎ ﻣﺎﻧﻨﺪ ﺳﻠﻮﻟﻬﺎﻱ ﻣﻌﻤﻮﻟﻲ ﺟﺪﺍﻭﻝ ﺗﻌﺮﻳﻒ ﻣﻴﺸﻮﻧﺪ ﻭ ﻓﻘﻂ ﺑﻪ ﺟﺎﻱ tdﺍﺯ thﺍﺳﺘﻔﺎﺩﻩ ﺷﺪﻩ ﻭ ﻟﻲ ﺩﺭ ﻧﻤﺎﻳﺶ
ﻣﺤﺘﻮﺍﻱ ﺳﺮ ﺳﺘﻮﻧﻬﺎ boldﻳﺎ ﺗﻮﭘﺮ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﻨﺪ ﺷﺪ.
ﺧﺎﻧﻪ ﻫﺎﻱ ﺧﺎﻟﻲ ﺩﺭ ﺟﺪﺍﻭﻝ )(Empty Cells
ﺍﮔﺮ ﻣﺤﺘﻮﺍﻱ ﺧﺎﻧﻪ ﺍﻱ ﺍﺯ ﻳﻚ ﺟﺪﻭﻝ ﺧﺎﻟﻲ ﺑﺎﺷﺪ ﭼﻪ ﭼﻴﺰﻱ ﺑﺎﻳﺪ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺷﻮﺩ؟ ﺑﺴﺘﻪ ﺑﻪ ﻣﺮﻭﺭﮔﺮﻱ ﻛﻪ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻴﺪ ﻧﺘﻴﺠﻪ ﻧﻤﺎﻳﺶ ﻣﺘﻔﺎﻭﺕ
ﺍﺳﺖ ﻭ ﻣﺜﻼ ﺩﺭ ﻣﺜﺎﻝ ﺯﻳﺮ ﺧﺎﻧﻪ ﺧﺎﻟﻲ ﺟﺪﻭﻝ ﺑﺪﻭﻥ ﻣﺮﺯ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ:
ﻛﺪ ﺍﭼﺘﻤﻞ ﺟﺪﻭﻟﻲ ﺑﺎ ﺩﻭ ﺳﻄﺮ ﻭ ﺩﻭ ﺳﺘﻮﻥ ﻧﻤﺎﻳﺶ ﺟﺪﻭﻝ ﺭﻭﺑﺮﻭ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ
>"<table border="1" dir="rtl
><tr
></tdﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ <td>1
></tdﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ <td>2 ﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ 1ﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ 2
></tr
><tr ﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ 1
></tdﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ <td>1
><td></td
></tr
></table
ﺩﺭ ﺍﻳﻨﮕﻮﻧﻪ ﻣﻮﺍﺭﺩ ﺑﺮﺍﻱ ﺭﻓﻊ ﻣﺸﻜﻞ ﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﺍﺯ ); non-breaking space ( ﻳﺎ ﻫﻤﺎﻥ ﻧﻮﻳﺴﻪ ﻭ ﻛﺎﺭﺍﻛﺘﺮ ﻗﺎﺻﻠﻪ ﻭ ﺑﻼﻧﻚ
ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ ﻭ ﺩﺭ ﻣﻮﺭﺩ ﻣﺜﺎﻝ ﺫﻛﺮ ﺷﺪﻩ ﻣﺮﻭﺭﮔﺮ ﺟﺪﻭﻝ ﺭﺍ ﺑﻪ ﺷﻜﻞ ﺯﻳﺮ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﺪ ﺩﺍﺩ:
ﻛﺪ ﺍﭼﺘﻤﻞ ﺟﺪﻭﻟﻲ ﺑﺎ ﺩﻭ ﺳﻄﺮ ﻭ ﺩﻭ ﺳﺘﻮﻥ ﻧﻤﺎﻳﺶ ﺟﺪﻭﻝ ﺭﻭﺑﺮﻭ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ
>"<table border="1" dir="rtl
><tr
></tdﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ <td>1
></tdﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ <td>2
ﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ 1ﺭﺩﻳﻒ ،1ﺳﻠﻮﻝ 2
></tr
><tr ﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ 1
></tdﺭﺩﻳﻒ ،2ﺳﻠﻮﻝ <td>1
><td> </td
></tr
></table
22 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺍﻳﻨﺒﺎﺭ ﻣﺮﺯﻫﺎﻱ ﺧﺎﻧﻪ ﺧﺎﻟﻲ ﺟﺪﻭﻝ ﺑﺪﺭﺳﺘﻲ ﺗﺮﺳﻴﻢ ﮔﺮﺩﻳﺪﻩ ﺍﻧﺪ.
ﭼﻨﺪ ﻧﻜﺘﻪ ﺍﺳﺎﺳﻲ ﺩﺭ ﻣﻮﺭﺩ ﺟﺪﺍﻭﻝ:
• ﺩﺭ ﺟﺪﺍﻭﻝ ،ﺭﺩﻳﻔﻬﺎ ،ﺧﺎﻧﻪ ﻫﺎ ﻭ ﺳﺮ ﺳﺘﻮﻧﻬﺎ ﺍﺯ ﺗﻌﺪﺍﺩ ﺯﻳﺎﺩﻱ ﺍﺯ ﺷﻨﺎﺳﻪ ﻫﺎ ﻣﻴﺘﻮﺍﻧﻴﺪ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ ﻛﻪ ﺷﺮﺡ ﻫﻤﮕﻲ ﺁﻧﻬﺎ ﺍﺯ ﺣﻮﺻﻠﻪ ﺍﻳﻦ ﺩﻭﺭﻩ ﻣﻘﺪﻣﺎﺗﻲ ﺧﺎﺭﺝ ﺍﺳﺖ ﻭ
ﺗﻮﺻﻴﻪ ﻣﻴﺸﻮﺩ ﻛﻪ ﺍﺯ ﻣﺜﺎﻟﻬﺎﻱ ﺯﻳﺮ ﻭ ﺟﺪﻭﻝ ﻭﺍﻗﻊ ﺩﺭ ﺍﻧﺘﻬﺎﻱ ﺍﻳﻦ ﺻﻔﺤﻪ ﺑﺮﺍﻱ ﻣﻄﺎﻟﻌﻪ ﻫﺮ ﭼﻪ ﺑﻴﺸﺘﺮ ﺩﺭ ﻣﻮﺭﺩ ﺟﺰﺋﻴﺎﺕ ﺷﻨﺎﺳﻪ ﻫﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ.
•ﺷﻨﺎﺳﻪ dirﻗﺎﺑﻞ ﺍﺳﺘﻔﺎﺩﻩ ﺩﺭ ﺑﺴﻴﺎﺭﻱ ﺍﺯ ﺗﮕﻬﺎ ) ﻣﺜﻼ ( th ، td ،tr ،tableﻣﻴﺒﺎﺷﺪ .ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ dirﻭ ﻣﻘﺪﺍﺭ rtlﺑﺮﺍﻱ ﺁﻥ ،ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ
ﻓﺎﺭﺳﻲ ﺍﺯ "ﺭﺍﺳﺖ ﺑﻪ ﭼﭗ" ﺗﻌﻴﻴﻦ ﻣﻴﮕﺮﺩﺩ .ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﻣﻘﺪﺍﺭ ﺷﻨﺎﺳﻪ dirﺑﻪ ﺻﻮﺭﺕ ﻣﻮﺭﻭﺛﻲ ﺍﺯ tableﺑﻪ trﻭ thﻭ ﺍﺯ trﻭ thﺑﻪ tdﺧﻮﺍﻫﺪ
ﺭﺳﻴﺪ.ﻣﺜﻼ ﺑﺮﺍﻱ ﺗﻌﻴﻴﻦ ﻣﻘﺪﺍﺭ rtlﺑﺮﺍﻱ ﺗﻤﺎﻣﻲ ﺧﺎﻧﻪ ﻫﺎﻱ ﻳﻚ ﺟﺪﻭﻝ ﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﻓﻘﻂ ﺷﻨﺎﺳﻪ ﻣﺰﺑﻮﺭ ﺭﺍ ﺩﺭ ﺗﮓ tableﻗﻴﺪ ﻛﻨﻴﺪ ﻭ ﻧﻴﺎﺯﻱ ﺑﻪ ﻗﻴﺪ ﺁﻥ ﺩﺭ ﺗﻤﺎﻣﻲ
ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﻭﻝ ﻧﻴﺴﺖ .ﺍﻟﺒﺘﻪ ﻣﻴﺘﻮﺍﻧﻴﺪ ﻛﻪ ﺩﺭ ﻣﻮﺭﺩ ﻳﻚ ﺭﺩﻳﻒ ﺧﺎﺹ ﻭ ﻳﺎ ﻳﻚ ﺧﺎﻧﻪ ﺧﺎﺹ ﺷﻨﺎﺳﻪ dirﺭﺍ ﻣﻮﺭﺩﻱ ﺗﻌﻴﻴﻦ ﻛﻨﻴﺪ.
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ
ﻣﺮﺯ ﺩﺭ ﺟﺪﺍﻭﻝ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻛﺎﺭﺑﺮﺩ ﺷﻨﺎﺳﻪ borderﺭﺍ ﺩﺭ ﻧﻤﺎﻳﺶ ﺟﺪﺍﻭﻝ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ.
ﺗﻌﻴﻴﻦ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻦ ﺩﺭ ﺧﺎﻧﻪ ﻫﺎﻱ ﻳﻚ ﺟﺪﻭﻝ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻛﺎﺭﺑﺮﺩ ﺷﻨﺎﺳﻪ dirﺍﺳﺖ ﺩﺭ ﺗﻌﻴﻴﻦ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻦ ﺩﺭ ﺧﺎﻧﻪ ﻫﺎﻱ ﻳﻚ ﺟﺪﻭﻝ.
ﻋﻨﻮﺍﻥ ﺟﺪﺍﻭﻝ ﻭ ﺗﮓ caption
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺗﮓ captionﺩﺭ ﺗﻌﺮﻳﻒ ﺟﺪﺍﻭﻝ
ﺗﻮﺳﻌﻪ ﺳﻄﺮﻱ ﻳﺎ ﺳﺘﻮﻧﻲ ﺩﺭ ﺟﺪﺍﻭﻝ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺷﻨﺎﺳﻪ ﻫﺎﻱ colspanﻭ rowspanﻭ ﺍﺩﻏﺎﻡ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ ﺑﻪ ﺻﻮﺭﺕ ﺳﻄﺮﻱ ﻳﺎ ﺳﺘﻮﻧﻲ
ﺟﺪﻭﻟﻲ ﺑﺎ ﻣﺤﺘﻮﻳﺎﺕ ﻣﺨﺘﻠﻒ
ﻣﺤﺘﻮﻱ ﻳﻚ ﺧﺎﻧﻪ ﺟﺪﻭﻝ ﺗﻘﺮﻳﺒﺎ ﻣﻴﺘﻮﺍﻧﺪ ﻫﺮ ﻋﻨﺼﺮ ﺍﭼﺘﻤﻠﻲ ﺑﺎﺷﺪ.
ﻓﺎﺻﻠﻪ ﮔﺬﺍﺭﻱ ﺑﻴﻦ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺍﻳﺠﺎﺩ ﻓﺎﺻﻠﻪ ﺑﻴﻦ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﻭﻝ ﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ(cellspacing).
23 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻻﻳﻪ ﮔﺬﺍﺭﻱ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﻭﻝ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺍﻳﺠﺎﺩ ﻓﺎﺻﻠﻪ ﺧﺎﻟﻲ ﺑﻴﻦ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﻭﻝ ﻭ ﻣﺮﺯ ﺁﻧﻬﺎ ﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ(cellpadding).
ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﻳﺎ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﻛﻞ ﻳﻚ ﺟﺪﻭﻝ
ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﻳﺎ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﺳﺮﺍﺳﺮﻱ ﺟﺪﺍﻭﻝ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ ﻫﺎﻱ bgcolorﻭ background
ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﻳﺎ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﻳﻚ ﻳﺎ ﭼﻨﺪ ﺧﺎﻧﻪ ﺍﺯ ﺟﺪﻭﻝ
ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﻳﺎ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﺩﺭ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ ﻫﺎﻱ bgcolorﻭ background
ﺗﺮﺍﺯ ﺑﻨﺪﻱ ﻣﺤﺘﻮﺍ ﺩﺭ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺗﺮﺍﺯﺑﻨﺪﻱ ﻣﺤﺘﻮﺍﻱ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ " "alignﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ.
ﺷﻨﺎﺳﻪ frameﺩﺭ ﺟﺪﺍﻭﻝ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻛﺎﺭﺑﺮﺩ ﺷﻨﺎﺳﻪ " "frameﺩﺭ ﺍﻟﻤﺎﻥ tableﺟﻬﺖ ﺗﻌﻴﻴﻦ ﺷﻜﻞ ﻣﺮﺯ ﺟﺪﺍﻭﻝ.
ﺗﺮﺍﺯ ﺑﻨﺪﻱ ﻣﺤﺘﻮﺍ ﺩﺭ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺗﺮﺍﺯﺑﻨﺪﻱ ﻣﺤﺘﻮﺍﻱ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ " "alignﻭ " "valignﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ.
...ﻓﻘﻂ ﺗﺼﻮﺭ ﻛﻦ...
ﻣﺜﺎﻟﻲ ﻛﺎﻣﻠﺘﺮ ﻭ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ dirﺩﺭ ﺟﺪﺍﻭﻝ
ﺗﮕﻬﺎﻱ ﺟﺪﺍﻭﻝ
0B
Start Tag Purpose ﻛﺎﺭﺑﺮﺩ
><table Defines a table ﺗﻌﺮﻳﻒ ﺟﺪﻭﻝ
><th Defines a table header ﺗﻌﺮﻳﻒ ﺳﺮﺳﺘﻮﻥ ﺩﺭ ﺟﺪﺍﻭﻝ
><tr Defines a table row ﺗﻌﺮﻳﻒ ﺭﺩﻳﻒ ﻫﺎ ﺩﺭ ﺟﺪﺍﻭﻝ
><td Defines a table cell ﺗﻌﺮﻳﻒ ﺳﻠﻮﻝ ﻳﺎ ﺧﺎﻧﻪ ﻫﺎﻱ ﻳﻚ ﺟﺪﻭﻝ
><caption Defines a table caption ﺗﻌﺮﻳﻒ ﻋﻨﻮﺍﻥ ﺟﺪﻭﻝ
24 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻓﺮﻳﻤﻬﺎ ) ( Frames
ﺑﺎ ﻛﻤﻚ ﻓﺮﻳﻤﻬﺎ ﻗﺎﺩﺭ ﺑﻪ ﻧﻤﺎﻳﺶ ﻫﻤﺰﻣﺎﻥ ﺑﻴﺶ ﺍﺯ ﻳﻚ ﺻﻔﺤﻪ ﻭﺏ ﺩﺭ ﭘﻨﺠﺮﻩ ﻣﺮﻭﺭﮔﺮ ﺧﻮﺍﻫﻴﺪ ﺷﺪ .ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﺎ ﻣﻔﺎﻫﻴﻢ ﻓﺮﻳﻢ ) ( Frameﻭ ﺗﮓ
ﻫﺎﻱ ﻣﺮﺑﻮﻃﻪ ﻣﺨﺼﻮﺻﺎ ﺗﮕﻬﺎﻱ Frameﻭ Framesetﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ.
ﻣﺜﺎﻟﻬﺎ:
ﻣﺠﻤﻮﻋﻪ ﻓﺮﻳﻤﻬﺎﻱ ﻋﻤﻮﺩﻱ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺍﻳﺠﺎﺩ ﻣﺠﻤﻮﻋﻪ ﻓﺮﻳﻤﻬﺎﻱ ﻋﻤﻮﺩﻱ ﺗﻮﺳﻂ ﺗﮓ ﻫﺎﻱ framesetﻭ frame
ﻣﺠﻤﻮﻋﻪ ﻓﺮﻳﻤﻬﺎﻱ ﺍﻓﻘﻲ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺍﻳﺠﺎﺩ ﻣﺠﻤﻮﻋﻪ ﻓﺮﻳﻤﻬﺎﻱ ﺍﻓﻘﻲ ﺗﻮﺳﻂ ﺗﮓ ﻫﺎﻱ framesetﻭ frame
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ
ﻓﺮﻳﻤﻬﺎ )(Frames
ﺑﺎ ﻛﻤﻚ ﻓﺮﻳﻤﻬﺎ ﻗﺎﺩﺭ ﺑﻪ ﻧﻤﺎﻳﺶ ﻫﻤﺰﻣﺎﻥ ﺑﻴﺶ ﺍﺯ ﻳﻚ ﺻﻔﺤﻪ ﻭﺏ ﺩﺭ ﭘﻨﺠﺮﻩ ﻣﺮﻭﺭﮔﺮ ﺧﻮﺍﻫﻴﺪ ﺷﺪ .ﻫﺮ ﺻﻔﺤﻪ ﻳﺎ ﺩﺭﻳﭽﻪ ،ﻓﺮﻳﻢ ) (frameﻧﺎﻣﻴﺪﻩ ﺷﺪﻩ
ﻭ ﻓﺮﻳﻤﻬﺎ ﻛﺎﻣﻼ ﻣﺴﺘﻘﻞ ﺍﺯ ﻫﻢ ﻣﻴﺒﺎﺷﻨﺪ .ﻣﺤﺘﻮﺍﻱ ﻫﺮ ﻓﺮﻳﻢ ﻫﻢ ﻣﻴﺘﻮﺍﻧﺪ ﻫﺮ ﺻﻔﺤﻪ ﻳﺎ ﻭﺏ ﺳﺎﻳﺘﻲ ﺑﺎﺷﺪ .ﻫﺮ ﭼﻨﺪ ﻛﻪ ﻓﺮﻳﻤﻬﺎ ﻃﺮﺍﺣﻲ ﺳﺎﻳﺘﻬﺎﻱ ﻛﻮﭼﻚ
ﻭ ﻣﺘﻮﺳﻂ ﺭﺍ ﺑﺴﻴﺎﺭ ﺁﺳﺎﻥ ﻣﻴﻜﻨﻨﺪ ﻭﻟﻲ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺁﻧﻬﺎ ﺩﺭ ﻛﺎﺭﻫﺎﻱ ﺣﺮﻓﻪ ﺍﻱ ﺗﻮﺻﻴﻪ ﻧﻤﻴﺸﻮﺩ).ﺑﻪ ﺟﺰ ﺩﺭ ﻣﻮﺍﺭﺩ ﺧﺎﺹ(
ﻣﻌﺎﻳﺐ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﻓﺮﻳﻤﻬﺎ:
ﻣﻮﺗﻮﺭﻫﺎﻱ ﺟﺴﺘﺠﻮ ﺑﺎ ﺻﻔﺤﺎﺕ ﻃﺮﺍﺣﻲ ﺷﺪﻩ ﺑﺎ ﻓﺮﻳﻤﻬﺎ ﻣﺸﻜﻞ ﺩﺍﺭﻧﺪ. •
ﭼﺎپ ﻭ printﺻﻔﺤﺎﺗﻲ ﻛﻪ ﺍﺯ ﻓﺮﻳﻤﻬﺎ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻨﺪ ﻣﺸﻜﻞ ﺍﺳﺖ. •
ﺻﻔﺤﺎﺗﻲ ﻛﻪ ﺍﺯ ﻓﺮﻳﻤﻬﺎ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻨﺪ ﻣﻌﻤﻮﻻ ﻣﺒﺘﺪﻱ ﺑﻮﺩﻥ ﻃﺮﺍﺡ ﺳﺎﻳﺖ ﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ!! •
ﺍﮔﺮ ﻣﻴﺨﻮﺍﻫﻴﺪ ﺻﻔﺤﺎﺕ ﻧﺴﺒﺘﺎ ﺩﻳﻨﺎﻣﻴﻚ ﺳﺎﺧﺘﻪ ﻭ ﺑﺎ ﻫﻴﭻ ﺯﺑﺎﻥ ﺍﺳﻜﺮﻳﭙﺘﻲ ﻣﺎﻧﻨﺪ PHPﻳﺎ ASPﺁﺷﻨﺎﺋﻲ ﻧﺪﺍﺭﻳﺪ ﻓﺮﻳﻤﻬﺎ ﻛﻤﻚ ﺧﻮﺑﻲ ﺧﻮﺍﻫﻨﺪ ﺑﻮﺩ.
ﻫﻤﭽﻨﻴﻦ ﻓﺮﻳﻤﻬﺎ ﺑﺮﺍﻱ ﺳﺎﺧﺘﻦ ﺳﺮﻳﻊ ﻗﺴﻤﺘﻬﺎﺋﻲ ﺍﺯ ﺳﺎﻳﺖ ﻛﻪ ﻋﻤﻮﻡ ﺑﻪ ﺁﻥ ﺩﺳﺘﺮﺳﻲ ﻧﺪﺍﺭﻧﺪ ﻣﺎﻧﻨﺪ ﻗﺴﻤﺖ ﻣﺪﻳﺮﻳﺖ ) (Adminﻣﻨﺎﺳﺐ ﺑﻪ ﻧﻈﺮ
ﻣﻴﺮﺳﻨﺪ.
ﺗﮓ ﻓﺮﻳﻢ ﺳﺖ )(Frameset
framesetﻳﻌﻨﻲ ﻳﻚ Setﺍﺯ frameﻫﺎ ﻳﺎ ﻣﺠﻤﻮﻋﻪ ﺍﻱ ﺍﺯ ﭼﻬﺎﺭ ﭼﻮﺑﻬﺎ •
ﺗﮓ ﺍﺻﻠﻲ > <framesetﺑﻪ ﺗﻌﺮﻳﻒ ﻓﺮﻳﻤﻬﺎ ﻭ ﺗﻘﺴﻴﻢ ﺑﻨﺪﻱ ﭘﻨﺠﺮﻩ ﻣﺮﻭﺭﮔﺮ ﻣﻴﭙﺮﺩﺍﺯﺩ. •
25 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻫﺮ ﺗﮓ > <framesetﻣﺠﻤﻮﻋﻪ ﺍﻱ ﺍﺯ ﺭﺩﻳﻔﻬﺎ ﻳﺎ ﺳﺘﻮﻧﻬﺎ ﺭﺍ ﺗﻌﺮﻳﻒ ﻣﻴﻜﻨﺪ. •
ﺩﺍﺧﻞ ﻫﺮ ﻓﺮﻳﻢ ﻣﻴﺘﻮﺍﻧﺪ framesetﺩﻳﮕﺮﻱ ﻗﺮﺍﺭ ﺩﻫﻴﺪ. •
ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ ﻫﺎﻱ rowsﻭ colsﺍﺑﻌﺎﺩ ﻭ ﻧﺴﺒﺖ ﻫﺮ ﻓﺮﻳﻢ ﺗﻌﻴﻴﻦ ﻣﻴﮕﺮﺩﺩ. •
ﺗﮓ > <framesetﺩﺭﻭﻥ ﺗﮕﻬﺎﻱ > <htmlﻭ > </htmlﻗﺮﺍﺭ ﻣﻴﮕﻴﺮﺩ).ﻧﻴﺎﺯﻱ ﺑﻪ ﻗﻴﺪ ﺗﮓ bodyﻫﻨﮕﺎﻡ ﻣﻌﺮﻓﻲ ﻳﻚ •
framesetﻧﻴﺴﺖ(.
ﺗﮓ ﻓﺮﻳﻢ )(Frame
ﻛﺎﺭﺑﺮﺩ ﺍﺻﻠﻲ ﺗﮓ > <frameﺗﻌﻴﻴﻦ sourceﻳﺎ ﻧﺎﻡ ﺻﻔﺤﻪ ﺍﻱ ﺍﺳﺖ ﻛﻪ ﺑﺎﻳﺪ ﺩﺭ ﻓﺮﻳﻢ ﻫﺎ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺷﻮﺩ. •
ﻣﺜﺎﻝ ﺯﻳﺮ ﻣﺠﻤﻮﻋﻪ ﺍﻱ ﺍﺯ ﻓﺮﻳﻤﻬﺎ ﺭﺍ ﻛﻪ ﺷﺎﻣﻞ ﺩﻭ ﻓﺮﻳﻢ ﻋﻤﻮﺩﻱ ﻣﻴﺒﺎﺷﻨﺪ ﻣﻌﺮﻓﻲ ﻣﻴﻜﻨﺪ .ﺍﺯ ﺳﻤﺖ ﭼﭗ ﻓﺮﻳﻢ ﺍﻭﻝ 75ﺩﺭﺻﺪ ﻭ ﻓﺮﻳﻢ ﺩﻭﻡ 25ﺩﺭﺻﺪ ﺍﺯ
ﻋﺮﺽ ﭘﻨﺠﺮﻩ ﻣﺮﻭﺭﮔﺮ ﺭﺍ ﺑﻪ ﺧﻮﺩ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﻨﺪ ﺩﺍﺩ .ﺩﺭ ﺍﺩﺍﻣﻪ ﺗﻌﺮﻳﻒ ﻣﺤﺘﻮﻳﺎﺕ ﻫﺮ ﻓﺮﻳﻢ ،ﺩﺭﻭﻥ ﻓﺮﻳﻢ ﺍﻭﻝ ﻓﺎﻳﻞ " "frame_left.htmlﻭ ﺩﺭﻭﻥ
ﻓﺮﻳﻢ ﺩﻭﻡ ﻓﺎﻳﻞ " "frame_right.htmlﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ .ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺗﻤﺎﻣﻲ ﺳﻪ ﻓﺎﻳﻞ ﺍﭼﺘﻤﻞ ﻣﺮﺑﻮﻁ ﺑﻪ ﺍﻳﻦ ﻣﺜﺎﻝ ﺩﺭ ﻳﻚ
ﺩﺍﻳﺮﻛﺘﻮﺭﻱ ﻗﺮﺍﺭ ﺩﺍﺭﻧﺪ.
><html
>"<frameset cols="75%,25%
>"<frame src="frame_left.html
>"<frame src="frame_right.html
></frameset
></html
ﺑﺮﺍﻱ ﻧﻤﺎﻳﺶ ﻣﺜﺎﻝ ﺑﺎﻻ ﺑﻪ ﺳﻪ ﻓﺎﻳﻞ ﻧﻴﺎﺯ ﺩﺍﺭﻳﺪ frame_right.html،frame_left.html ،ﻭ ﻓﺎﻳﻞ ﻛﺪ ﺍﭼﺘﻤﻞ ﺑﺎﻻ.
ﺷﻨﺎﺳﻪ ﻫﺎﻱ colsﻭ rowsﺩﺭ ﺗﮓ frameset
ﻛﺎﺭﻛﺮﺩ ﻣﻘﺪﺍﺭ ﺷﻨﺎﺳﻪ ﺷﻨﺎﺳﻪ
ﺗﻌﻴﻴﻦ ﺗﻌﺪﺍﺩ ﻭ ﺍﻧﺪﺍﺯﻩ ﺳﺘﻮﻧﻬﺎ ﺩﺭ ﻓﺮﻳﻢ ﺳﺖ ﻋﺮﺽ ﭘﻨﺠﺮﻩ ﺑﺮ ﺍﺳﺎﺱ ﭘﻴﻜﺴﻞ ،ﺩﺭﺻﺪ ﻳﺎ ﻋﻼﻣﺖ* cols
ﺗﻌﻴﻴﻦ ﺗﻌﺪﺍﺩ ﻭ ﺍﻧﺪﺍﺯﻩ ﺭﺩﻳﻔﻬﺎ ﺩﺭ ﻓﺮﻳﻢ ﺳﺖ ﻋﺮﺽ ﭘﻨﺠﺮﻩ ﺑﺮ ﺍﺳﺎﺱ ﭘﻴﻜﺴﻞ ،ﺩﺭﺻﺪ ﻳﺎ ﻋﻼﻣﺖ* rows
ﻣﺜﺎﻟﻬﺎﻱ ﺯﻳﺮ ﺭﺍ ﺩﺭ ﻧﻈﺮ ﺑﮕﻴﺮﻳﺪ:
ﻣﺜﺎﻝ 1 ﻣﺜﺎﻝ 2
><html ><html
>"<frameset cols="*,200 >"<frameset cols="25%,50%,25%
>"<frame src="frame_2.html >"<frame src="frame_3.html
>"<frame src="frame_1.html >"<frame src="frame_2.html
26 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
></frameset >"<frame src="frame_1.html
></html ></frameset
></html
ﻧﻤﺎﻳﺶ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ ﻧﻤﺎﻳﺶ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ
ﺩﺭ ﻣﺜﺎﻝ ﻳﻚ ﻋﺮﺽ ﻓﺮﻳﻢ ﺍﻭﻝ ﺍﺯ ﺳﻤﺖ ﺭﺍﺳﺖ 200ﭘﻴﻜﺴﻞ ﺗﻌﻴﻴﻦ ﺷﺪﻩ ﻭ ﺑﻘﻴﻪ ﻋﺮﺽ ﭘﻨﺠﺮﻩ ﻛﻪ ﺑﺎ ﻋﻼﻣﺖ * ﻣﺸﺨﺺ ﻣﻴﺸﻮﺩ ﺑﻪ ﻓﺮﻳﻢ ﺩﻭﻡ
ﺍﺧﺘﺼﺎﺹ ﺧﻮﺍﻫﺪ ﻳﺎﻓﺖ.
ﺩﺭ ﻣﺜﺎﻝ ﺩﻭﻡ ﻋﺮﺽ ﭘﻨﺠﺮﻩ ﺑﺎ ﻣﻘﺎﺩﻳﺮ ﺩﺭﺻﺪﻱ ﺑﻪ ﻓﺮﻳﻤﻬﺎ ﺍﺧﺘﺼﺎﺹ ﻳﺎﻓﺘﻪ ﺍﺳﺖ.
ﺩﺭ ﻣﻮﺭﺩ ﺷﻨﺎﺳﻪ rowsﺩﻗﻴﻘﺎ ﻗﺮﺍﺭﺩﺍﺩﻫﺎﻱ ﺑﺎﻻ ﺑﺮﻗﺮﺍﺭﻧﺪ.
ﻧﻜﺎﺕ ﻛﺎﺭﺑﺮﺩﻱ:
* ﺍﮔﺮ ﻓﺮﻳﻤﻬﺎﻱ ﻃﺮﺍﺣﻲ ﺷﺪﻩ ﻣﺮﺯﻫﺎﻱ ﻗﺎﺑﻞ ﻣﺸﺎﻫﺪﻩ ﺩﺍﺭﻧﺪ ﺗﻮﺳﻂ ﻛﺎﺭﺑﺮ ﻗﺎﺑﻞ ﺗﻐﻴﻴﺮ ﺍﻧﺪﺍﺯﻩ ) (resizeﺧﻮﺍﻫﻨﺪ ﺑﻮﺩ ﻭ ﺑﺮﺍﻱ ﺟﻠﻮﮔﻴﺮﻱ ﺍﺯ ﺗﻐﻴﻴﺮ ﺍﻧﺪﺍﺯﻩ
ﻓﺮﻳﻤﻬﺎ ﺗﻮﺳﻂ ﻛﺎﺭﺑﺮ ﺑﺎﻳﺪ ﺍﺯ ﺷﻨﺎﺳﻪ ﺍﻱ ﺑﻪ ﻧﺎﻡ noresizeﺩﺭ ﺩﺍﺧﻞ ﺗﮓ > <frameﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ .ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ noresizeﻧﻤﻴﺘﻮﺍﻧﻴﺪ ﻛﻪ ﻓﺮﻳﻤﻬﺎ
ﺭﺍ ﺗﻐﻴﻴﺮ ﺍﻧﺪﺍﺯﻩ ﺑﺪﻫﻴﺪ.
* ﺍﮔﺮ ﻣﻴﺨﻮﺍﻫﻴﺪ ﻛﻪ ﻓﺮﻳﻤﻬﺎ scrollﻧﺸﻮﻧﺪ )ﺣﺮﻛﺖ ﻣﻴﺎﻥ ﻣﺤﺘﻮﻳﺎﺕ ﺻﻔﺤﻪ ﺗﻮﺳﻂ ﻣﺎﻭﺱ( ﺑﺎﻳﺪ ﺩﺭ ﺗﮓ frameﻣﻘﺪﺍﺭ ﺷﻨﺎﺳﻪ scrollingﺭﺍ ﺑﺮﺍﺑﺮ
" "noﻗﺮﺍﺭ ﺩﻫﻴﺪ) .ﻣﻘﺎﺩﻳﺮ ﻣﻤﻜﻦ " " ""no ،yesﻭ " "autoﻣﻴﺒﺎﺷﻨﺪ (.ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ scrollingﺻﻔﺤﺎﺕ ﻗﺎﺑﻞ scrollﻧﻴﺴﺘﻨﺪ.
* ﺍﮔﺮ ﻣﻴﺨﻮﺍﻫﻴﺪ ﻛﻪ ﻣﺮﺯ ﺑﻴﻦ ﻓﺮﻳﻤﻬﺎ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﻧﺸﻮﻧﺪ ﺑﺎﻳﺪ ﺩﺭ ﺗﮓ frameﻣﻘﺪﺍﺭ ﺷﻨﺎﺳﻪ frameborderﺭﺍ ﺑﺮﺍﺑﺮ " "0ﻗﺮﺍﺭ ﺩﻫﻴﺪ) .ﻣﺜﺎﻝ
( frameborder
* ﺩﺭﺻﺪ ﺑﺴﻴﺎﺭ ﻛﻤﻲ ﺍﺯ ﻣﺮﻭﺭﮔﺮﻫﺎ ﺍﺯ ﺗﮕﻬﺎﻱ ﻣﺮﺑﻮﻁ ﺑﻪ frameﻭ framesetﭘﺸﺘﻴﺒﺎﻧﻲ ﻧﻤﻴﻜﻨﻨﺪ .ﺑﺮﺍﻱ ﺍﻳﻦ ﻣﻮﺍﺭﺩ ﺑﺎﻳﺪ ﺍﺯ ﺗﮓ ><noframes
ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﺻﻔﺤﻪ ﺟﺎﻳﮕﺰﻳﻦ ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ.
* ﺑﻌﻀﻲ ﺍﺯ ﻣﺮﻭﺭﮔﺮﻫﺎ ﺑﻪ ﺍﻭﻟﻴﻦ ﻧﻮﻳﺴﻪ ﻭ ﺷﺮﻭﻉ ﺗﻌﺮﻳﻒ ﻳﻚ ﻓﺎﻳﻞ framesetﺣﺴﺎﺱ ﻫﺴﺘﻨﺪ ،ﻣﻄﻤﺌﻦ ﺑﺎﺷﻴﺪ ﻛﻪ ﻫﻴﭻ ﻛﺎﺭﺍﻛﺘﺮ ﺍﺿﺎﻓﻲ ﻣﺎﻧﻨﺪ
spaceﻳﺎ new linkﻗﺒﻞ ﺍﺯ tag framesetﺩﺭ ﺍﺑﺘﺪﺍﻱ ﺻﻔﺤﻪ ﻭﺟﻮﺩ ﻧﺪﺍﺭﺩ.
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ
ﻣﺠﻤﻮﻋﻪ ﻓﺮﻳﻤﻬﺎﻱ ﻣﺮﻛﺐ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺍﻳﺠﺎﺩ ﻣﺠﻤﻮﻋﻪ ﺍﻱ ﻣﺮﻛﺐ ﺍﺯ ﻓﺮﻳﻤﻬﺎﻱ ﻋﻤﻮﺩﻱ ﻭ ﺍﻓﻘﻲ
ﻣﺜﺎﻟﻲ ﻛﺎﺭﺑﺮﺩﻱ ﺩﺭ ﻣﻮﺭﺩ ﻓﺮﻳﻤﻬﺎ
ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﻛﺎﺭﺑﺮﺩﻱ ﺑﺎ ﻛﻤﻚ ﺳﻪ ﻓﺮﻳﻢ ﺍﻣﻜﺎﻥ ﻧﻤﺎﻳﺶ ﺻﻔﺤﺎﺕ ﻣﺨﺘﻠﻒ ﺑﻪ ﺁﺳﺎﻧﻲ ﻓﺮﺍﻫﻢ ﻣﻴﺸﻮﺩ .ﻓﺮﻳﻢ ﺍﻓﻘﻲ ﻭ ﺑﺎﻻﺋﻲ ﺳﺮﺗﻴﺘﺮ ﻭ ﻧﺎﻡ ﺍﺻﻠﻲ ﺳﺎﻳﺖ ﺭﺍ
ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﺪ ﺩﺍﺩ ﻭ ﻓﺮﻳﻢ ﺳﻤﺖ ﺭﺍﺳﺖ ﻟﻴﻨﻜﻬﺎﻱ ﻣﻬﻢ ﺻﻔﺤﻪ ﺭﺍ ﺩﺭ ﺑﺮ ﮔﺮﻓﺘﻪ ﻭ ﺍﻣﻜﺎﻥ navigationﺭﺍ ﻓﺮﺍﻫﻢ ﻣﻴﺴﺎﺯﺩ ﻭ ﻧﻬﺎﻳﺘﺎ ﻓﺮﻳﻢ ﺍﺻﻠﻲ ﻭ
27 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﺳﻤﺖ ﭼﭗ ﺻﻔﺤﺎﺕ ﻣﺨﺘﻠﻒ ﺳﺎﻳﺖ ﺭﺍ ﺑﻪ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﺪ ﮔﺬﺍﺷﺖ .ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺑﺮﺍﻱ ﺍﻳﻦ ﻣﺜﺎﻝ ﺣﺪﺍﻗﻞ ﺑﻪ ﻳﻚ ﻓﺎﻳﻞ ﺑﺮﺍﻱ ﻣﻌﺮﻓﻲ ﻣﺠﻤﻮﻋﺎ
ﻓﺮﻳﻤﻬﺎ) (framesetﻭ ﺳﻪ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﺑﺮﺍﻱ ﻓﺮﻳﻤﻬﺎﻱ ﺑﺎﻻﺋﻲ ،ﺳﻤﺖ ﭼﭗ ﻭ ﺭﺍﺳﺖ ﺍﺣﺘﻴﺎﺝ ﺧﻮﺍﻫﺪ ﺑﻮﺩ.
ﻓﺮﻳﻤﻬﺎﻱ ﺷﻨﺎﻭﺭ ﻭ ﻳﺎ ﺩﺭﺟﺎ )(Inline frame
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻓﺮﻳﻤﻬﺎﻱ ﺷﻨﺎﻭﺭ ﻭ ﺩﺭﺟﺎ ) ،(iframeﻓﺮﻳﻤﻲ ﺩﺭﻭﻥ ﻳﻚ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ
ﻣﺜﺎﻟﻲ ﻛﺎﺭﺑﺮﺩﻱ ﺩﺭ ﻣﻮﺭﺩ ﻓﺮﻳﻤﻬﺎﻱ ﺩﺭﺟﺎ )(Inline frame
ﻣﺜﺎﻟﻲ ﻛﺎﺭﺑﺮﺩﻱ ﺩﺭ ﻣﻮﺭﺩ ﻓﺮﻳﻤﻬﺎﻱ ﺷﻨﺎﻭﺭ ﻭ ﺩﺭﺟﺎ ) (iframeﺑﺎ ﻛﻤﻚ 7ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﻣﺨﺘﻠﻒ
ﺷﻮﺧﻲ ﺑﺎ ﻓﺮﻳﻢ ﻫﺎﻱ ﺷﻨﺎﻭﺭ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﻤﺎﻳﺶ ﺩﺭﺍﻳﻮ ﻟﻮﻛﺎﻝ )ﻣﺜﻼ \ c:ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﮔﺎﻥ ﺳﺎﻳﺖ ﺑﻪ ﺁﻧﻬﺎ
ﻓﺮﻳﻤﻬﺎ ﻭ ﭘﻴﻮﻧﺪﻫﺎﻱ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ
ﻣﺜﺎﻟﻲ ﻛﺎﻣﻞ ﺩﺭ ﻣﻮﺭﺩ ﻓﺮﻳﻤﻬﺎ ﻭ ﭘﻴﻮﻧﺪﻫﺎﻱ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ ﻭ ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺁﻧﻬﺎ ﺩﺭ ﻃﺮﺍﺣﻲ ﺳﺎﻳﺘﻲ ﺳﺎﺩﻩ ﻣﺘﺸﻜﻞ ﺍﺯ ﭼﻬﺎﺭ ﻓﺎﻳﻞ ﺍﭼﺘﻤﻞ
ﻓﺮﻳﻤﻬﺎ ﻭ ﭘﻴﻮﻧﺪﻫﺎﻱ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ ﻛﺎﻣﻞ
ﻫﻤﺎﻥ ﻣﺜﺎﻝ ﺑﺎﻻ ﺩﺭ ﺻﻔﺤﻪ ﻛﺎﻣﻞ ﻣﺮﻭﺭﮔﺮ ﺑﺎ ﺷﻨﺎﺳﻪ ﻫﺎﻱ ﻛﺎﻣﻞ ﺩﺭ ﺗﮓ frame
ﺗﮓ ﻫﺎﻱ ﻓﺮﻳﻢ
Start Tag Purpose ﻛﺎﺭﺑﺮﺩ
<frameset> Defines a set of frames ﺗﻌﺮﻳﻒ ﻣﺠﻤﻮﻋﻪ ﺍﻱ ﺍﺯ ﻓﺮﻳﻢ ﻫﺎ
)<frame> Defines a sub window (a frame ﺗﻌﺮﻳﻒ ﻳﻚ ﻓﺮﻳﻢ
Defines a noframe section for browsers that do ﺗﻌﺮﻳﻒ ﺟﺎﻳﮕﺰﻳﻦ ﺑﺮﺍﻱ ﻣﺮﻭﺭﮔﺮﻫﺎﺋﻲ ﻛﻪ ﺍﺯ ﻓﺮﻳﻢ ﻫﺎ
><noframes
not handle frames ﭘﺸﺘﻴﺒﺎﻧﻲ ﻧﻤﻴﻜﻨﻨﺪ.
><iframe )Defines an inline sub window (frame ﺗﻌﺮﻳﻒ ﻓﺮﻳﻢ ﻫﺎﻱ ﺩﺭﺟﺎ )(inline
ﻓﻬﺮﺳﺘﻬﺎ ) ( Lists
ﺍﻳﻦ ﺩﺭﺱ ﺷﻤﺎ ﺭﺍ ﺑﺎ ﻧﺤﻮﻩ ﻧﻤﺎﻳﺶ ﺍﻧﻮﺍﻉ ﻓﻬﺮﺳﺘﻬﺎ ﺷﺎﻣﻞ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻣﺮﺗﺐ ) ، (orderedﻧﺎﻣﺮﺗﺐ ) (unorderedﻭ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻌﺮﻳﻔﻲ
) (definition listsﻭ ﺗﮓ ﻫﺎﻱ ﻣﺮﺑﻮﻃﻪ ﻳﻌﻨﻲ dt ،dl ،ul ،ol ،liﻭ ddﺁﺷﻨﺎ ﺧﻮﺍﻫﺪ ﻛﺮﺩ.
ﻣﺜﺎﻟﻬﺎ:
ﻓﻬﺮﺳﺘﻬﺎﻱ ﻧﺎﻣﺮﺗﺐ
ﻣﺜﺎﻟﻲ ﺑﺴﻴﺎﺭ ﺳﺎﺩﻩ ﺩﺭ ﻣﻮﺭﺩ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻧﺎﻣﺮﺗﺐ
28 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻓﻬﺮﺳﺘﻬﺎﻱ ﻣﺮﺗﺐ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻣﺮﺗﺐ ﻭ ﻧﺤﻮﻩ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﻓﺎﺭﺳﻲ
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ
ﻓﻬﺮﺳﺘﻬﺎﻱ ﻧﺎﻣﺮﺗﺐ)(unordered list
ﻓﻬﺮﺳﺘﻬﺎﺋﻲ ﻫﺴﺘﻨﺪ ﺍﺯ ﻳﻚ ﻳﺎ ﭼﻨﺪ ﻗﻠﻢ ﺍﻃﻼﻋﺎﺕ ﻛﻪ ﻣﻌﻤﻮﻻ ﺑﺎ ﺩﺍﻳﺮﻩ ﺍﻱ ﻛﻮﭼﻚ ﻭ ﺳﻴﺎﻩ ﺭﻧﮓ ﺩﺭ ﺷﺮﻭﻉ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﻣﻴﺸﻮﻧﺪ .ﻳﻚ ﻓﻬﺮﺳﺖ ﺍﺯ ﻧﻮﻉ
ﻧﺎﻣﺮﺗﺐ ﺑﺎ ﺗﮓ > <ulﺷﺮﻭﻉ ﺷﺪﻩ ﻭ ﻫﺮ ﺭﻗﻢ ﺍﻃﻼﻋﺎﺕ ﺑﺎ ﺗﮓ > <liﻣﺸﺨﺺ ﻣﻴﮕﺮﺩﺩ.
ﻧﻤﺎﻳﺶ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ HTML code
• Red ><ul
><li>Red</li
• Blue ><li>Blue</li
• Green ><li>Green</li
></ul
ﻗﻬﻮﻩ • > "<ul dir="rtl
ﺷﻴﺮ
></liﻗﻬﻮﻩ><li
•
></liﺷﻴﺮ><li
ﭼﺎﻱ • ></liﭼﺎﻱ><li
></ul
ﺩﺍﺧﻞ ﺗﮕﻬﺎﻱ > <liﻣﻴﺘﻮﺍﻧﻴﺪ ﺍﺯ ﭘﺎﺭﺍﮔﺮﺍﻓﻬﺎ ،ﺗﮕﻬﺎﻱ ، brﺗﺼﺎﻭﻳﺮ ﻭ ﺣﺘﻲ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺩﻳﮕﺮ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ .ﺑﻪ ﺷﻨﺎﺳﻪ dirﺩﺭ ﻣﺜﺎﻝ ﺑﺎﻻ ﺗﻮﺟﻪ ﻛﻨﻴﺪ،
ﺍﻣﻜﺎﻥ ﺗﻌﻴﻴﻦ ﺳﻤﺖ ﻭ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﺩﺭ ﺗﻤﺎﻣﻲ ﺗﮕﻬﺎﻱ ﻣﺮﺑﻮﻁ ﺑﻪ ﻓﻬﺮﺳﺘﻬﺎ ﻣﻤﻜﻦ ﻣﻴﺒﺎﺷﺪ.
ﻓﻬﺮﺳﺘﻬﺎﻱ ﻣﺮﺗﺐ)(ordered list
ﺍﻳﻦ ﻧﻮﻉ ﻓﻬﺮﺳﺖ ﺑﺴﻴﺎﺭ ﺷﺒﻴﻪ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻧﺎﻣﺮﺗﺐ ﺑﻮﺩﻩ ﻭ ﻓﻘﻂ ﻣﺮﻭﺭﮔﺮ ﺑﻪ ﻫﻨﮕﺎﻡ ﻧﻤﺎﻳﺶ ﺍﻗﻼﻡ ﺍﻃﻼﻋﺎﺗﻲ ﺍﺯ ﺍﻋﺪﺍﺩ ﺑﻪ ﺟﺎﻱ ﺩﺍﻳﺮﻩ ﻫﺎﻱ ﻛﻮﭼﻚ ﺳﻴﺎﻩ
ﺭﻧﮓ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﺪ .ﻳﻚ ﻓﻬﺮﺳﺖ ﺍﺯ ﻧﻮﻉ ﻣﺮﺗﺐ ﺑﺎ ﺗﮓ > <olﺷﺮﻭﻉ ﺷﺪﻩ ﻭ ﻫﻤﺎﻧﻨﺪ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻧﺎﻣﺮﺗﺐ ﻫﺮ ﺭﻗﻢ ﺍﻃﻼﻋﺎﺕ ﺑﺎ ﺗﮓ > <liﻣﺸﺨﺺ
ﻣﻴﮕﺮﺩﺩ.
ﻧﻤﺎﻳﺶ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ HTML code
1. Red ><ol
><li>Red</li
2. Blue
><li>Blue</li
3. Green ><li>Green</li
></ol
29 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
.1ﻗﻬﻮﻩ > "<ol dir="rtl
.2ﺷﻴﺮ
></liﻗﻬﻮﻩ><li
></liﺷﻴﺮ><li
.3ﭼﺎﻱ ></liﭼﺎﻱ><li
></ol
ﺩﺍﺧﻞ ﺗﮕﻬﺎﻱ > <liﻣﻴﺘﻮﺍﻧﻴﺪ ﺍﺯ ﭘﺎﺭﺍﮔﺮﺍﻓﻬﺎ ،ﺗﮕﻬﺎﻱ ، brﺗﺼﺎﻭﻳﺮ ﻭ ﺣﺘﻲ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺩﻳﮕﺮ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ .ﺑﻪ ﺷﻨﺎﺳﻪ dirﺩﺭ ﻣﺜﺎﻝ ﺑﺎﻻ ﺗﻮﺟﻪ ﻛﻨﻴﺪ،
ﺍﻣﻜﺎﻥ ﺗﻌﻴﻴﻦ ﺳﻤﺖ ﻭ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﺩﺭ ﺗﻤﺎﻣﻲ ﺗﮕﻬﺎﻱ ﻣﺮﺑﻮﻁ ﺑﻪ ﻓﻬﺮﺳﺘﻬﺎ ﻣﻤﻜﻦ ﻣﻴﺒﺎﺷﺪ.
ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻌﺮﻳﻔﻲ)(definition list
ﻓﻬﺮﺳﺖ ﺗﻌﺮﻳﻔﻲ ﻓﻬﺮﺳﺘﻲ ﺍﺳﺖ ﺍﺯ ﺍﺻﻄﻼﺡ ﻫﺎ ﻭ ﺗﺸﺮﻳﺢ ﻭ ﺗﻮﺻﻴﻒ ﺁﻧﻬﺎ.
ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻌﺮﻳﻔﻲ ﺑﺎ > <dlﺷﺮﻭﻉ ﺷﺪﻩ ﻭ ﻫﺮ ﺫﻭﺝ ﺍﺻﻄﻼﺡ ﻭ ﺗﻌﺮﻳﻒ ﻣﺮﺑﻮﻁ ﺑﻪ ﺁﻥ ﺑﺎ ﺗﮕﻬﺎﻱ > <dtﻭ > <ddﺗﻌﺮﻳﻒ ﻣﻴﺸﻮﻧﺪ.
ﻧﻤﺎﻳﺶ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ HTML code
><dl
HTTP ><dt>HTTP</dt
Hypertext Transfer Protocol ><dd>Hypertext Transfer Protocol</dd
FTP ><dt>FTP</dt
File Transfer Protocol ><dd>File Transfer Protocol</dd
IP ><dt>IP</dt
><dd>Internet Protocol</dd
Internet Protocol ></dl
ﻣﻘﺪﻣﻪ > "<dl dir="rtl
></dtﻣﻘﺪﻣﻪ> <dt
ﺧﻼﺻﻪ ﺍﻱ ﺍﺯ ﻣﻘﺪﻣﻪ ></ddﺧﻼﺻﻪ ﺍﻱ ﺍﺯ ﻣﻘﺪﻣﻪ><dd
ﻓﺼﻞ 1 ></dtﻓﺼﻞ <dt>2
ﺧﻼﺻﻪ ﺍﻱ ﺍﺯ ﻓﺼﻞ 1 ></ddﺧﻼﺻﻪ ﺍﻱ ﺍﺯ ﻓﺼﻞ <dd>1
ﻓﺼﻞ 2 ></dtﻓﺼﻞ <dt>2
></ddﺧﻼﺻﻪ ﺍﻱ ﺍﺯ ﻓﺼﻞ <dd>2
ﺧﻼﺻﻪ ﺍﻱ ﺍﺯ ﻓﺼﻞ 2 ></dl
ﺩﺍﺧﻞ ﺗﮕﻬﺎﻱ ﺗﺸﺮﻳﺢ ﻳﻌﻨﻲ > <ddﻣﻴﺘﻮﺍﻧﻴﺪ ﺍﺯ ﭘﺎﺭﺍﮔﺮﺍﻓﻬﺎ ،ﺗﮕﻬﺎﻱ ، brﺗﺼﺎﻭﻳﺮ ﻭ ﺣﺘﻲ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺩﻳﮕﺮ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ .ﺑﻪ ﺷﻨﺎﺳﻪ dirﺩﺭ ﻣﺜﺎﻝ ﺑﺎﻻ
ﺗﻮﺟﻪ ﻛﻨﻴﺪ ،ﺍﻣﻜﺎﻥ ﺗﻌﻴﻴﻦ ﺳﻤﺖ ﻭ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﺩﺭ ﺗﻤﺎﻣﻲ ﺗﮕﻬﺎﻱ ﻣﺮﺑﻮﻁ ﺑﻪ ﻓﻬﺮﺳﺘﻬﺎ ﻣﻤﻜﻦ ﻣﻴﺒﺎﺷﺪ.
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ
ﺍﻧﻮﺍﻉ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻣﺮﺗﺐ
30 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻣﺮﺗﺐ ﺑﻪ ﻫﻤﺮﺍﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ typeﺟﻬﺖ ﺗﻌﻴﻴﻦ ﻧﻮﻉ ﻧﻤﺎﻳﺶ ﻓﻬﺮﺳﺖ
ﺍﻧﻮﺍﻉ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻧﺎﻣﺮﺗﺐ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻧﺎﻣﺮﺗﺐ ﺑﻪ ﻫﻤﺮﺍﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ typeﺟﻬﺖ ﺗﻌﻴﻴﻦ ﻧﻮﻉ ﻧﻤﺎﻳﺶ ﻓﻬﺮﺳﺖ
ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻮﺩﺭﺗﻮ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﺮﻛﻴﺒﻲ .ﺍﻋﻀﺎﻱ ﻓﻬﺮﺳﺖ ﻣﻴﺘﻮﺍﻧﻨﺪ ﺍﺯ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺩﻳﮕﺮ ﺗﺸﻜﻴﻞ ﺷﻮﻧﺪ.
ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻌﺮﻳﻔﻲ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻌﺮﻳﻔﻲ ﺑﻪ ﻫﻤﺮﺍﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ dir
ﺗﮕﻬﺎﻱ ﻓﻬﺮﺳﺖ
Start Tag Purpose ﻛﺎﺭﺑﺮﺩ
><ol Defines an ordered list ﺗﻌﺮﻳﻒ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻣﺮﺗﺐ
><ul Defines an unordered list ﺗﻌﺮﻳﻒ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻧﺎﻣﺮﺗﺐ
><li Defines a list item ﺗﻌﺮﻳﻒ ﻳﻚ ﺁﻳﺘﻢ ﻭ ﻗﻠﻢ ﺍﺯ ﻳﻚ ﻓﻬﺮﺳﺖ
><dl Defines a definition list ﺗﻌﺮﻳﻒ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻌﺮﻳﻔﻲ
><dt Defines a definition term ﺗﻌﺮﻳﻒ ﺍﺻﻄﻼﺡ ﺩﺭ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻌﺮﻳﻔﻲ
><dd Defines a definition description ﺗﻌﺮﻳﻒ ﻣﻌﻨﻲ ﻭ ﺷﺮﺡ ﺍﺻﻄﻼﺡ ﺩﺭ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻌﺮﻳﻔﻲ
ﻓﺮﻣﻬﺎ ) ( Forms
ﺍﺯ ﻃﺮﻳﻖ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﻋﻨﺼﺮ > <formﻭ ﭼﻨﺪ ﺗﮓ ﻣﺮﺗﺒﻂ ﻗﺎﺩﺭ ﺑﻪ ﺩﺭﻳﺎﻓﺖ ﺍﻃﻼﻋﺎﺕ ﺍﺯ ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﮔﺎﻥ ﺻﻔﺤﺎﺗﺘﺎﻥ ﻭ ﻳﺎ ﺗﺒﺎﺩﻝ ﺍﻃﻼﻋﺎﺕ ﺑﻴﻦ ﺻﻔﺤﺎﺕ
ﻣﺨﺘﻠﻒ ﺧﻮﺍﻫﻴﺪ ﺷﺪ .ﺑﺎ ﻛﻤﻚ ﺍﻳﻦ ﮔﺮﻭﻩ ﺍﺯ ﺗﮓ ﻫﺎ ﻗﺎﺩﺭ ﺑﻪ ﻧﻤﺎﻳﺶ ﺑﺎﻛﺴﻬﺎﻱ ﻭﺭﻭﺩ ﺍﻃﻼﻋﺎﺕ ﻣﺘﻦ ) ، (text fieldsﭼﻚ ﺑﺎﻛﺴﻬﺎ )check-
، (boxesﺭﺍﺩﻳﻮ ﺑﺎﺗﻮﻧﻬﺎ ) (radio-buttonsﻭ ...ﺷﺪﻩ ﻭ ﻫﻤﭽﻨﻴﻦ ﺍﻣﻜﺎﻥ ﮔﺬﺍﺷﺘﻦ ﺩﻛﻤﻪ ﻫﺎﻱ ﺍﺭﺳﺎﻝ ) (button submitﻭ ﻳﺎ resetﺭﺍ
ﺧﻮﺍﻫﻴﺪ ﺩﺍﺷﺖ .ﺍﻳﻦ ﻓﺼﻞ ﺑﺎ ﺷﺮﺡ ﺗﮓ ﻫﺎﻱ formﻭ inputﻭ ...ﺑﻪ ﭼﮕﻮﻧﮕﻲ ﺍﻳﺠﺎﺩ ﺍﺭﺗﺒﺎﻁ ﺑﺎ ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﮔﺎﻥ ﻭ ﮔﺮﻓﺘﻦ ﺍﻃﻼﻋﺎﺕ ﺍﺯ ﺁﻧﻬﺎ ﺑﺼﻮﺭﺕ
ﻻﺗﻴﻦ ﻭ ﻳﺎ ﻓﺎﺭﺳﻲ ﺧﻮﺍﻫﺪ ﭘﺮﺩﺍﺧﺖ.
ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺑﺮﺍﻱ ﭘﺮﺩﺍﺯﺵ ﺍﻃﻼﻋﺎﺕ ﺩﺭﻳﺎﻓﺘﻲ ﺍﺯ ﻛﺎﺭﺑﺮ ﺑﺎﻳﺪ ﺑﺎ ﻳﻜﻲ ﺍﺯ ﺯﺑﺎﻧﻬﺎﻱ cgiﺍﺯ ﻗﺒﻴﻞ JSP ،CFM ،PHP ،perl ،ASPﻳﺎ
Javaﺁﺷﻨﺎﺋﻲ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ .ﻣﺜﺎﻟﻬﺎﻱ cgiﻣﺪﺭﺳﻪ ﻭﺏ ﺍﺯ ﺭﺑﺎﻥ ﺍﺳﻜﺮﻳﭙﺖ Perlﻳﺎ PHPﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻨﺪ.
ﺩﺭﺱ ﻗﺒﻠﻲ ،ﺩﺭﺱ ﺑﻌﺪﻱ
ﻣﺜﺎﻟﻬﺎ:
31 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻭﺭﻭﺩﻳﻬﺎﻱ ﻣﺘﻦ ﻳﺎ Text fields
ﻣﺜﺎﻟﻲ ﺳﺎﺩﻩ ﺩﺭ ﻣﻮﺭﺩ ﺍﻳﺠﺎﺩ text fieldﻫﺎ .ﺑﺎ ﻛﻤﻚ text fieldﻫﺎ ﻛﺎﺭﺑﺮﺍﻥ ﻗﺎﺩﺭ ﺑﻪ ﻭﺍﺭﺩ ﻛﺮﺩﻥ ﻭ ﺗﺎﻳﭗ ﺍﻃﻼﻋﺎﺕ ﻣﺘﻨﻲ ﺧﻮﺍﻫﻨﺪ ﺷﺪ.
ﻭﺭﻭﺩﻳﻬﺎﻱ ﺭﻣﺰ ﻋﺒﻮﺭ ﻳﺎ Password fields
ﻣﺜﺎﻟﻲ ﺳﺎﺩﻩ ﺩﺭ ﻣﻮﺭﺩ ﺍﻳﺠﺎﺩ password fieldﻫﺎ .ﺑﺎ ﻛﻤﻚ password fieldﻫﺎ ﻛﺎﺭﺑﺮﺍﻥ ﻗﺎﺩﺭ ﺑﻪ ﻭﺭﻭﺩ ﺭﻣﺰ ﻋﺒﻮﺭ ﻳﺎ ﭘﺴﻮﺭﺩ ﺧﻮﺍﻫﻨﺪ ﺷﺪ،
ﻣﺮﻭﺭﮔﺮﻫﺎ ﺑﺮﺍﻱ ﺍﻣﻨﻴﺖ ﺍﻃﻼﻋﺎﺕ ﺭﻣﺮﺯﻫﺎﻱ ﻋﺒﻮﺭ ﺭﺍ ﺭﻣﺰﮔﺬﺍﺭﻱ ﻣﻴﻜﻨﻨﺪ ﻭ ﻣﻌﻤﻮﻻ ﺍﺯ '*' ﺑﺮﺍﻱ ﻧﻤﺎﻳﺶ ﺍﻃﻼﻋﺎﺕ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻨﺪ.
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ
ﻓﺮﻣﻬﺎ )(Forms
ﺗﻤﺎﻣﻲ ﻋﻨﺎﺻﺮ ﻭ ﺗﮕﻬﺎﺋﻲ ﻛﻪ ﺗﺎﻛﻨﻮﻥ ﺩﻳﺪﻩ ﺍﻳﺪ ﻓﻘﻂ ﺑﻪ ﻧﻤﺎﻳﺶ ﺍﻃﻼﻋﺎﺕ ﭘﺮﺩﺍﺧﺘﻪ ﺍﻧﺪ ﻭ ﻫﻴﭽﻜﺪﺍﻡ ﺑﻪ ﮔﺮﻓﺘﻦ ﻭ ﺍﺧﺬ ﺍﻃﻼﻋﺎﺕ ﺍﺯ ﻛﺎﺭﺑﺮ ﻧﭙﺮﺩﺍﺧﺘﻪ ﺍﻧﺪ.
ﻓﺮﻣﻬﺎ ﻛﻪ ﺑﺎ ﺗﮓ > <formﻣﻌﺮﻓﻲ ﻣﻴﺸﻮﻧﺪ ،ﻃﺮﺍﺡ ﺳﺎﻳﺖ ﺭﺍ ﻗﺎﺩﺭ ﺑﻪ ﺟﻤﻊ ﺁﻭﺭﻱ ﻭ ﺍﺧﺬ ﺍﻃﻼﻋﺎﺕ ﺍﺯ ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﻩ ﺳﺎﻳﺖ ﺧﻮﺍﻫﻨﺪ ﻛﺮﺩ .ﻋﻨﺼﺮ ﻓﺮﻡ ﻭ
ﮔﺮﻭﻫﻲ ﺍﺯ ﻋﻨﺎﺻﺮ ﻭ ﺗﮕﻬﺎﻱ ﺩﺭﻭﻥ ﺁﻥ ﺑﻪ ﺩﺭﻳﺎﻓﺖ ﻭ ﺍﺭﺳﺎﻝ ﺍﻃﻼﻋﺎﺕ ﺑﻪ ﺳﻤﺖ ﻭﺏ ﺳﺮﻭﺭ ﻛﻤﻚ ﺧﻮﺍﻫﻨﺪ ﭘﺮﺩﺍﺧﺖ ) .ﺗﻤﺎﻣﻲ ﺗﮕﻬﺎﻱ ﻣﺮﺑﻮﻁ ﺑﻪ ﻓﺮﻣﻬﺎ
ﺩﺭﻭﻥ ﺗﮕﻬﺎﻱ > <formﻭ > </formﻗﺮﺍﺭ ﻣﻴﮕﻴﺮﻧﺪ( .
ﺩﺭﻭﻥ ﺗﮓ ﻓﺮﻡ ﮔﺮﻭﻩ ﺯﻳﺎﺩﻱ ﺍﺯ ﻋﻨﺎﺻﺮ ﻭ ﺗﮕﻬﺎﻱ ﻣﺨﺘﻠﻒ ﻗﺎﺑﻞ ﺍﺳﺘﻔﺎﺩﻩ ﻫﺴﺘﻨﺪ ﺍﺯ ﻗﺒﻴﻞ ﻋﻨﺎﺻﺮ ﻭﺭﻭﺩ ﻣﺘﻦ ﻳﻚ ﺳﻄﺮﻱ) ،(text fieldsﻋﻨﺎﺻﺮ ﻭﺭﻭﺩ
ﻣﺘﻨﻬﺎﻱ ﭼﻨﺪ ﺳﻄﺮﻱ ) ،(Textareaﻣﻨﻮﻫﺎﻱ drop-downﻭ radio buttonsﻭ ﻣﻨﻮﻫﺎﻱ drop-downﻭ ﻏﻴﺮﻩ.
ﺗﮓ Input
ﺑﻪ ﻋﻨﻮﺍﻥ ﭘﺮ ﻣﺼﺮﻑ ﺗﺮﻳﻦ ﺗﮓ ﻣﺮﺑﻮﻁ ﺑﻪ ﻭﺭﻭﺩ ﺍﻃﻼﻋﺎﺕ ﺑﺎﻳﺪ ﺍﺯ ﺗﮓ > <inputﻧﺎﻡ ﺑﺮﺩ .ﺩﺭ ﺍﻳﻦ ﺗﮓ ﺷﻨﺎﺳﻪ ﺍﻱ ﺑﻪ ﻧﺎﻡ typeﺑﻪ ﺗﻌﻴﻴﻦ ﻧﻮﻉ
ﺍﻃﻼﻋﺎﺕ ﻭﺭﻭﺩﻱ ﺍﺧﺘﺼﺎﺹ ﺩﺍﺭﺩ .ﻣﻘﺎﺩﻳﺮ ﻣﻤﻜﻦ ﺑﺮﺍﻱ ﺍﻳﻦ ﺷﻨﺎﺳﻪ ﺑﻪ ﻗﺮﺍﺭ ﺯﻳﺮﻧﺪ:
text , checkbox , radio , password , hidden , submit , reset , button , file , image
ﺩﺭ ﺍﺩﺍﻣﻪ ﺑﻪ ﺷﺮﺡ ﺑﻌﻀﻲ ﺍﺯ typeﻫﺎﻱ ﻛﺎﺭﺑﺮﺩﻱ ﺧﻮﺍﻫﻴﻢ ﭘﺮﺩﺍﺧﺖ:
ﻭﺭﻭﺩﻳﻬﺎﻱ ﻣﺘﻦ )(Text Fields
ﺍﮔﺮ ﻣﻴﺨﻮﺍﻫﻴﺪ ﻛﻪ ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﻩ ﺍﻃﻼﻋﺎﺗﻲ ﺍﺯ ﻗﺒﻴﻞ ﻣﺘﻦ ،ﺍﻋﺪﺍﺩ ﻭ ...ﺭﺍ ﻭﺍﺭﺩ ﻛﻨﺪ ﺍﺯ ﺷﻨﺎﺳﻪ ﺍﻱ ﺑﺎ ﻣﻘﺪﺍﺭ " "textﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﺸﻮﺩ.
ﻧﻤﺎﻳﺶ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ ﻛﺪ ﺍﭼﺘﻤﻞ
><form
First name: First name:
>"<input type="text" name="firstname
32 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
><br
Last name: Last name:
>"<input type="text" name="lastname
></form
> "<form dir="rtl
:ﻧـــــــــــــــﺎﻡ
:ﻧـــــــــــــــﺎﻡ >"<input type="text" name="firstname
><br
:ﻧﺎﻡ ﺧﺎﻧﻮﺍﺩﮔﻲ :ﻧﺎﻡ ﺧﺎﻧﻮﺍﺩﮔﻲ
>"<input type="text" name="lastname
></form
ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺗﮓ > <formﭼﻴﺰﻱ ﺭﺍ ﺑﻪ ﻧﻤﺎﻳﺶ ﻧﺨﻮﺍﻫﺪ ﮔﺬﺍﺷﺖ ﺑﻠﻜﻪ ﺗﮕﻬﺎﻱ ﺩﺭﻭﻥ ﺁﻥ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﻨﺪ ﺷﺪ .ﺩﺭ ﻣﺜﺎﻝ
ﻓﺎﺭﺳﻲ ﺑﺎﻻ ﺑﻪ ﺷﻨﺎﺳﻪ dirﻭ ﻣﻘﺪﺍﺭ rtlﺁﻥ ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ.ﻻﺯﻡ ﺑﻪ ﻳﺎﺩﺁﻭﺭﻱ ﺍﺳﺖ ﻛﻪ ﺍﻏﻠﺐ ﻣﺮﻭﺭﮔﺮﻫﺎ ﺩﺭ ﺣﺎﻟﺖ ﭘﻴﺶ ﻓﺮﺽ ﺑﺮﺍﻱ ﻭﺭﻭﺩﻳﻬﺎﻱ ﻣﺘﻦ
ﺍﻧﺪﺍﺯﻩ 20ﻛﺎﺭﺍﻛﺘﺮ ﺭﺍ ﺩﺭ ﻧﻈﺮ ﻣﻴﮕﻴﺮﻧﺪ ﻭ ﺍﮔﺮ ﻣﻴﺨﻮﺍﻫﻴﺪ ﻛﻪ ﺍﻧﺪﺍﺯﻩ ﭘﻴﺶ ﻓﺮﺽ ﻭﺭﻭﺩﻳﻬﺎﻱ ﻣﺘﻦ ﺭﺍ ﺗﻐﻴﻴﺮ ﺩﻫﻴﺪ ﺑﺎﻳﺪ ﺍﺯ ﺷﻨﺎﺳﻪ ﺍﻱ ﺑﻪ ﻧﺎﻡ sizeﺍﺳﺘﻔﺎﺩﻩ
ﻛﻨﻴﺪ.
ﻭﺭﻭﺩﻳﻬﺎﻱ Radio Buttons
ﺍﮔﺮ ﻣﻴﺨﻮﺍﻫﻴﺪ ﻛﻪ ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﻩ ﻓﻘﻂ ﻳﻚ ﮔﺰﻳﻨﻪ ﺭﺍ ﺍﺯ ﺑﻴﻦ ﭼﻨﺪ ﮔﺰﻳﻨﻪ ﻣﺤﺪﻭﺩ ﺍﻧﺘﺨﺎﺏ ﻛﻨﺪ ،ﺍﺯ ﻣﻘﺪﺍﺭ " "radioﺑﺮﺍﻱ ﺷﻨﺎﺳﻪ typeﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ:
ﻧﻤﺎﻳﺶ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ ﻛﺪ ﺍﭼﺘﻤﻞ
><form
Male "<input type="radio name="sex" value="male"> Male
><br
Female "<input type="radio name="sex" value="female"> Female
></form
>"<form dir="rtl
ﻣﺮﺩ "<input type="radio ﻣﺮﺩ >"name="sex" value="male
><br
ﺯﻥ "<input type="radio ﺯﻥ >"name="sex" value="female
></form
ﻫﻤﺎﻧﻄﻮﺭ ﻛﻪ ﻣﺸﺎﻫﺪﻩ ﻣﻴﺸﻮﺩ ﻓﻘﻂ ﺍﻣﻜﺎﻥ ﻳﻜﻲ ﺍﺯ ﮔﺰﻳﻨﻪ ﻫﺎ ﺑﺮﺍﻱ ﻛﺎﺭﺑﺮ ﻣﻴﺴﺮ ﺍﺳﺖ.
ﻭﺭﻭﺩﻳﻬﺎﻱ Checkboxes
ﺍﮔﺮ ﻣﻴﺨﻮﺍﻫﻴﺪ ﻛﻪ ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﻩ ﻳﻚ ﻳﺎ ﭼﻨﺪ ﮔﺰﻳﻨﻪ ﺭﺍ ﺍﺯ ﺑﻴﻦ ﭼﻨﺪﻳﻦ ﮔﺰﻳﻨﻪ ﻣﺤﺪﻭﺩ ﺍﻧﺘﺨﺎﺏ ﻛﻨﺪ ،ﺍﺯ ﻣﻘﺪﺍﺭ " "checkboxﺑﺮﺍﻱ ﺷﻨﺎﺳﻪ type
ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ:
ﻧﻤﺎﻳﺶ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ ﻛﺪ ﺍﭼﺘﻤﻞ
><form
I have a bike >"<input type="checkbox" name="bike
I have a bike
33 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
><br
I have a car >"<input type="checkbox" name="car
I have a car
></form
>"<form dir="rtl
>"<input type="checkbox" name="bike
ﺩﻭﭼﺮﺧﻪ ﺩﺍﺭﻡ ﺩﻭﭼﺮﺧﻪ ﺩﺍﺭﻡ
><br
ﻣﺎﺷﻴﻦ ﺩﺍﺭﻡ >"<input type="checkbox" name="car
ﻣﺎﺷﻴﻦ ﺩﺍﺭﻡ
></form
ﺷﻨﺎﺳﻪ Actionﻭ ﺩﻛﻤﻪ Submitﺩﺭ ﻓﺮﻣﻬﺎ ) (Submit Button & Form's Action Attribute
ﺩﺭ ﻓﺮﻣﻬﺎ ﺑﺮﺍﻱ ﺍﺭﺳﺎﻝ ﺍﻃﻼﻋﺎﺕ ﻛﺴﺐ ﺷﺪﻩ ﺍﺯ ﺩﻛﻤﻪ ﺍﻱ ﺑﻪ ﻧﺎﻡ ﺍﺭﺳﺎﻝ ﻳﺎ Button Submitﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﺸﻮﺩ ﻭ ﺩﺭ ﺍﺛﺮ ﻛﻠﻴﻚ ﻛﺎﺭﺑﺮ ﺑﺮﻭﻱ ﺍﻳﻦ
ﺩﻛﻤﻪ " ، "Submitﺍﻃﻼﻋﺎﺕ ﺩﺭﻭﻥ ﻓﺮﻡ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ ﺑﻪ ﺻﻔﺤﻪ ﺍﻱ ﻛﻪ ﺷﻤﺎ ﺗﻌﻴﻴﻦ ﻣﻴﻜﻨﻴﺪ ﺍﺭﺳﺎﻝ ﺧﻮﺍﻫﻨﺪ ﺷﺪ .ﺑﺮﺍﻱ ﺗﻌﻴﻴﻦ ﻣﻘﺼﺪ ﺍﺭﺳﺎﻝ
ﺍﻃﻼﻋﺎﺕ ﺑﺎﻳﺪ ﺩﺭﻭﻥ ﺗﮓ formﺍﺯ ﺷﻨﺎﺳﻪ ﺍﻱ ﺑﻪ ﻧﺎﻡ actionﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ .ﻣﻘﺪﺍﺭ ﺷﻨﺎﺳﻪ actionﺁﺩﺭﺱ ﻳﺎ urlﺻﻔﺤﻪ ﺍﻱ ﺍﺳﺖ ﻛﻪ ﺑﻪ ﺩﺭﻳﺎﻓﺖ
ﻭ ﺳﭙﺲ ﭘﺮﺩﺍﺯﺵ ﺍﻃﻼﻋﺎﺕ ﺩﺭﻳﺎﻓﺘﻲ ﺧﻮﺍﻫﺪ ﭘﺮﺩﺍﺧﺖ .ﻣﻌﻤﻮﻻ ﻓﺎﻳﻠﻬﺎﻱ ﺑﺨﺶ actionﺑﺮﻧﺎﻣﻪ ﻫﺎ ﻭ ﺍﺳﻜﺮﻳﭙﺖ ﻫﺎﺋﻲ ﻧﻮﺷﺘﻪ ﺷﺪﻩ ﺑﺎ ﺭﺑﺎﻧﻬﺎﻱ cgiﻣﺎﻧﻨﺪ
PHP ، Perl ،ASPﻭ ...ﺑﻮﺩﻩ ﻭ ﻭﻇﻴﻔﻪ ﺁﻧﻬﺎ ﺩﺭﻳﺎﻓﺖ ﺍﻃﻼﻋﺎﺕ ﻓﺮﻣﻬﺎ ﻭ ﺳﭙﺲ ﭘﺮﺩﺍﺯﺵ ﺁﻧﻬﺎ ﻣﻴﺒﺎﺷﺪ.
ﺗﻌﻴﻴﻦ ﻣﻘﺪﺍﺭ " "submitﺑﺮﺍﻱ ﺷﻨﺎﺳﻪ typeﺳﺒﺐ ﻧﻤﺎﻳﺶ ﺩﻛﻤﻪ Submitﻳﺎ ﺍﺭﺳﺎﻝ ﺧﻮﺍﻫﺪ ﮔﺮﺩﻳﺪ.
ﻧﻤﺎﻳﺶ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ ﻛﺪ ﺍﭼﺘﻤﻞ
>"<form name="input" action="form_action.php
Username:
Username: >"<input type="text" name="user
>"<input type="submit" value="Submit
></form
>"<form name="input" action="form_action.php" dir="rtl
ﻧﺎﻡ ﻛﺎﺭﺑﺮ
ﻧﺎﻡ ﻛﺎﺭﺑﺮ >"<input type="text" name="user
>"<input type="submit" value="Submit
></form
ﺩﺭ ﻣﺜﺎﻝ ﺑﺎﻻ ﺩﺭ ﺑﺎﻛﺲ ﻭﺭﻭﺩﻱ ﻣﺘﻦ ،ﻛﻠﻤﻪ ﺍﻱ ﺭﺍ ﻭﺍﺭﺩ ﻛﺮﺩﻩ ﻭ ﺩﻛﻤﻪ ﺍﺭﺳﺎﻝ ﺭﺍ ﻛﻠﻴﻚ ﻛﻨﻴﺪ .ﻣﺮﻭﺭﮔﺮ ﺑﻪ ﻣﺤﺾ ﻛﻠﻴﻚ ﺩﻛﻤﻪ ﺍﺭﺳﺎﻝ ،ﺍﻃﻼﻋﺎﺕ ﺩﺭﻭﻥ
ﻓﺮﻡ ﺭﺍ ﻛﻪ ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﻣﺘﻨﻲ ﺳﺎﺩﻩ ﺍﺳﺖ ﺑﻪ ﺳﻤﺖ ﺁﺩﺭﺳﻲ ) (URLﻛﻪ ﺩﺭ ﺷﻨﺎﺳﻪ actionﺗﻌﻴﻴﻦ ﺷﺪﻩ ﺍﺳﺖ ﺍﺭﺳﺎﻝ ﻛﺮﺩﻩ ﻭ ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﺑﺮﻧﺎﻣﻪ ﺍﻱ
ﺑﻪ ﺯﺑﺎﻥ PHPﺑﺎ ﻧﺎﻡ form_action.phpﺩﺭ ﺳﻤﺖ ﺳﺮﻭﺭ ﺑﻪ ﺩﺭﻳﺎﻓﺖ ﻭ ﭘﺮﺩﺍﺯﺵ ﺍﻃﻼﻋﺎﺕ ﺩﺭﻳﺎﻓﺘﻲ ﺧﻮﺍﻫﺪ ﭘﺮﺩﺍﺧﺖ.
ﺑﻪ ﻳﺎﺩ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺁﺩﺭﺱ ﻗﻴﺪ ﺷﺪﻩ ﺩﺭ ﺑﺨﺶ actionﻣﻴﺘﻮﺍﻧﺪ ﺁﺩﺭﺱ ﺍﺳﻜﺮﻳﭙﺘﻲ ﺩﺭ ﻫﺎﻣﺎﻥ ﺳﺎﻳﺖ ﻭ ﻳﺎ ﺳﺎﻳﺖ ﺩﻳﮕﺮﻱ ﺑﺎﺷﺪ ،ﻫﻤﭽﻨﻴﻦ ﻣﻴﺘﻮﺍﻧﺪ
ﺁﺩﺭﺳﻲ ﻧﺴﺒﻲ ﻳﺎ ﻣﻄﻠﻖ ﺑﺎﺷﺪ.
34 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻭﺭﻭﺩ ﻣﺘﻦ ﻓﺎﺭﺳﻲ ﺩﺭ ﻋﻨﺎﺻﺮﻱ ﻣﺎﻧﻨﺪ Text fieldﻳﺎ :Text area
ﻫﻤﺎﻧﻄﻮﺭ ﻛﻪ ﺩﺭ ﻣﺜﺎﻟﻬﺎﻱ ﺑﺎﻻ ﻣﺸﺎﻫﺪﻩ ﻛﺮﺩﻳﺪ ﺩﺭ ﻣﻮﺭﺩ ﺍﻟﻤﺎﻧﻬﺎﻱ Text fieldﻭ Textareaﻣﺎﻧﻨﺪ ﺑﺴﻴﺎﺭﻱ ﺩﻳﮕﺮ ﺍﺯ ﺍﻟﻤﺎﻧﻬﺎ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ dir
ﻣﻴﺘﻮﺍﻥ ﺳﻤﺖ ﻭ ﺟﻬﺖ ﻭﺭﻭﺩ ﺍﻃﻼﻋﺎﺕ ﺭﺍ "ﺍﺯ ﺭﺍﺳﺖ ﺑﻪ ﭼﭗ" ﺗﻌﻴﻴﻦ ﻛﻨﻴﺪ .ﻭﻟﻲ ﺍﮔﺮ ﻛﺎﺭﺑﺮﻱ ﻭﻳﻨﺪﻭﺯ ﻓﺎﺭﺳﻲ ﻧﺪﺍﺷﺘﻪ ﺑﺎﺷﺪ ،ﺍﺯ ﻛﺎﻣﭙﻴﻮﺗﺮﻫﺎﻱ ﻣﻜﻴﻨﺘﺎﺵ
ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﺪ ﻭ ﻳﺎ ﺳﻴﺴﺘﻤﺶ ﺭﺍ ﻓﺎﺭﺳﻲ ﻧﻜﺮﺩﻩ ﺑﺎﺷﺪ ﻗﺎﺩﺭ ﺑﻪ ﻭﺭﻭﺩ ﺍﻃﻼﻋﺎﺕ ﺑﻪ ﺯﺑﺎﻥ ﻓﺎﺭﺳﻲ ﻧﺨﻮﺍﻫﺪ ﺑﻮﺩ ﻭ ﻧﻮﻳﺴﻪ ﻫﺎﻱ ﺗﺎﻳﭗ ﺷﺪﻩ ﻻﺗﻴﻦ ﺧﻮﺍﻫﻨﺪ ﺑﻮﺩ!،
ﺩﺭ ﺍﻳﻨﮕﻮﻧﻪ ﻣﻮﺍﺭﺩ ﭼﻪ ﺑﺎﻳﺪ ﻛﺮﺩ؟
ﻣﻌﻤﻮﻻ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﺎﻥ ﻭﺏ ﺑﺮﺍﻱ ﻓﺮﺍﻫﻢ ﺳﺎﺧﺘﻦ ﺍﻣﻜﺎﻥ ﻭﺭﻭﺩ ﻣﺘﻦ ﻓﺎﺭﺳﻲ ﺍﺯ ﻳﻜﻲ ﺍﺯ ﺩﻭ ﺭﻭﺵ ﺯﻳﺮ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻨﺪ:
•ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﭘﻠﺘﻬﺎﻱ ﺟﺎﻭﺍ ﻳﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﻓﻠﺶ
•ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺯﺑﺎﻥ ﺟﺎﻭﺍ ﺍﺳﻜﺮﻳﭙﺖ
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ
ﺣﺎﻟﺘﻬﺎﻱ ﻣﺨﺘﻠﻒ ﻭﺭﻭﺩﻱ Input
ﺩﺭ ﺗﮓ inputﻭ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ typeﻭ ﻣﻘﺎﺩﻳﺮ ﻣﺨﺘﻠﻒ ﺑﺮﺍﻱ ﺁﻥ ﻣﻴﺘﻮﺍﻥ ﺍﻧﻮﺍﻉ ﻣﺨﺘﻠﻒ ﺍﻃﻼﻋﺎﺕ ﺭﺍ ﺍﺯ ﻭﺑﮕﺮﺩ ﮔﺮﻓﺖ.
Checkboxes
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺗﻌﺮﻳﻒ ﻓﺮﻣﻲ ﻣﺘﺸﻜﻞ ﺍﺯ Checkboxﻫﺎ
Radiobuttons
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺗﻌﺮﻳﻒ ﻓﺮﻣﻲ ﻣﺘﺸﻜﻞ ﺍﺯ Radio buttonﻫﺎ
ﻓﻬﺮﺳﺖ ﻛﺮﻛﺮﻩ ﺍﻱ ﺳﺎﺩﻩ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺗﻌﺮﻳﻒ ﻓﺮﻣﻲ ﻣﺘﺸﻜﻞ ﺍﺯ drop down boxﻫﺎ ﻳﺎ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻛﺮﻛﺮﻩ ﺍﻱ
ﻓﻬﺮﺳﺖ ﻛﺮﻛﺮﻩ ﺍﻱ ﺩﻳﮕﺮ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺗﻌﺮﻳﻒ ﻓﺮﻣﻲ ﻣﺘﺸﻜﻞ ﺍﺯ drop down boxﻫﺎ ﺑﺎ ﺗﻌﻴﻴﻦ ﭘﻴﺶ ﮔﺰﻳﻨﻪ
Textarea
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺗﻌﺮﻳﻒ ﻓﺮﻣﻲ ﻣﺘﺸﻜﻞ ﺍﺯ ، Textareaﻧﺎﺣﻴﻪ ﺍﻱ ﺑﺮﺍﻱ ﻭﺭﻭﺩ ﺑﻴﺶ ﺍﺯ ﻳﻚ ﺳﻄﺮ ﻣﺘﻦ
ﺗﻌﺮﻳﻒ ﻓﺮﻣﻲ ﺑﺎ ﻛﻤﻚ ﺩﻛﻤﻪ ﻳﺎ button
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺗﻌﺮﻳﻒ ﻓﺮﻣﻲ ﺑﺎ ﻛﻤﻚ ﺩﻛﻤﻪ ﻳﺎ button
ﺗﺮﺳﻴﻢ ﻣﺮﺯ ﺩﺭ ﺍﻃﺮﺍﻑ ﻓﺮﻡ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺗﻌﺮﻳﻒ ﻓﺮﻣﻲ ﺩﻟﺨﻮﺍﻩ ﻭ ﺗﺮﺳﻴﻢ ﻣﺮﺯﻱ ﺑﺪﻭﺭ ﺁﻥ ﺑﻪ ﻫﻤﺮﺍﻩ ﺗﻌﻴﻴﻦ ﻋﻨﻮﺍﻧﻲ ﺑﺮﺍﻱ ﻓﺮﻡ ﺑﺎ ﻛﻤﻚ ﻋﻨﺼﺮ Fieldset
ﺍﺭﺳﺎﻝ ﺍﻳﻤﻴﻞ ﺑﺎ ﻛﻤﻚ ﻓﺮﻣﻬﺎ
35 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺍﺭﺳﺎﻝ ﺍﻳﻤﻴﻞ ﺑﺎ ﻛﻤﻚ ﻓﺮﻣﻬﺎ
ﺳﺎﺧﺘﻦ ﻓﻬﺮﺳﺘﻲ ﺍﺯ ﺳﺎﻳﺘﻬﺎﻱ ﻣﻮﺭﺩ ﻋﻼﻗﻪ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﮓ ﻓﺮﻡ ﻭ ﻣﻨﻮﻫﺎﻱ ﻛﺮﻛﺮﻩ ﺍﻱ ﻭ ﻛﻤﻲ ﺟﺎﻭﺍ ﺍﺳﻜﺮﻳﭙﺖ ﺑﺮﺍﻱ ﺳﺎﺧﺖ ﻓﻬﺮﺳﺘﻲ ﺍﺯ ﺳﺎﻳﺘﻬﺎ
ﺗﮕﻬﺎﻱ ﻓﺮﻡ
Start Tag Purpose ﻛﺎﺭﺑﺮﺩ
><form Defines a form for user input ﺗﻌﺮﻳﻒ ﻓﺮﻡ ﻭﺭﻭﺩ ﺍﻃﻼﻋﺎﺕ
><input Defines an input field ﺗﻌﺮﻳﻒ ﻭﺭﻭﺩﻱ ﺍﺯ ﻧﻮﻉ Input
><textarea
Defines a text-area (a multi-line text input ﺗﻌﺮﻳﻒ ﻭﺭﻭﺩﻱ ﻣﺘﻦ ﭼﻨﺪ ﺳﻄﺮﻱ ﻳﺎ text-area
)control
><label Defines a label to a control ﺗﻌﺮﻳﻒ ﺑﺮﭼﺴﺐ ﻳﺎ label
<fieldset> Defines a fieldset ﺗﻌﺮﻳﻒ fieldset
<legend> Defines a caption for a fieldset ﺗﻌﺮﻳﻒ ﻋﻨﻮﺍﻥ ﺑﺮﺍﻱ fieldsetﻫﺎ
)<select> Defines a selectable list (a drop-down box ﺗﻌﺮﻳﻒ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺍﻧﺘﺨﺎﺑﻲ ﻳﺎ drop-down box
<optgroup>Defines an option group ﺗﻌﺮﻳﻒ option groupﻫﺎ
<option> Defines an option in the drop-down box ﺗﻌﺮﻳﻒ ﮔﺰﻳﻨﻪ ﺍﻱ ﺍﺯ drop-down boxﻫﺎ
ﺗﻌﺮﻳﻒ ﺩﻛﻤﻪ ﻓﺸﺎﺭﻱ ،ﻣﺘﻔﺎﻭﺕ ﺑﺎ buttonﺗﮓ
><button Defines a push button
input
ﺗﺼﺎﻭﻳﺮ ) ( Images
ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﺎ ﺗﮓ ، imgﺷﻨﺎﺳﻪ srcﻭ ، altﺗﮕﻬﺎﻱ Mapﻭ Areaﻭ ﭼﮕﻮﻧﮕﻲ ﻧﻤﺎﻳﺶ ﺗﺼﺎﻭﻳﺮ ﻭ ﻫﻤﭽﻨﻴﻦ ﺗﻨﻈﻴﻢ ﻣﺤﻞ ﺁﻧﻬﺎ ﺩﺭ ﺳﻨﺪﻫﺎﻱ
ﺍﭼﺘﻤﻞ ﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ.
ﻣﺜﺎﻟﻬﺎ:
ﺩﺭﺝ ﺗﺼﻮﻳﺮ
ﻧﺤﻮﻩ ﺍﺿﺎﻓﻪ ﻛﺮﺩﻥ ﺗﺼﻮﻳﺮ ﺑﻪ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺑﺎ ﻛﻤﻚ ﺗﮓ img
ﺩﺭﺝ ﺗﺼﻮﻳﺮﻱ ﻭﺍﻗﻊ ﺩﺭ ﻓﻀﺎﻱ ﺁﺩﺭﺳﻲ ﺩﻳﮕﺮ
ﺩﺭﺝ ﺗﺼﻮﻳﺮﻱ ﻭﺍﻗﻊ ﺩﺭ ﺩﺍﻳﺮﻛﺘﻮﺭﻳﻲ ﻏﻴﺮ ﺍﺯ ﺁﺩﺭ ﺱ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﻭ ﻳﺎ ﺗﺼﻮﻳﺮﻱ ﻭﺍﻗﻊ ﺩﺭ ﻓﻀﺎﻱ ﺁﺩﺭﺳﻲ ﺩﻳﮕﺮ ﺳﺎﻳﺘﻬﺎ
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ
36 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﺗﮓ imgﻭ ﺷﻨﺎﺳﻪ srcﻳﺎ source
ﺩﺭ ﺯﺑﺎﻥ ﺍﭼﺘﻤﻞ ﺗﺼﺎﻭﻳﺮ ﺭﺍ ﺑﺎ ﻛﻤﻚ ﺗﮓ > <imgﺗﻌﺮﻳﻒ ﻣﻴﻜﻨﻨﺪ .ﺗﮓ > <imgﺍﺯ ﻧﻮﻉ ﺗﮕﻬﺎﻱ ﺧﺎﻟﻲ ﺍﺳﺖ ،ﺑﺪﻳﻦ ﻣﻌﻨﺎ ﻛﻪ ﻓﻘﻂ ﺩﺍﺭﺍﻱ ﻳﻚ ﻳﺎ ﭼﻨﺪ
ﺷﻨﺎﺳﻪ ﻭ attributeﺑﻮﺩﻩ ﻭ ﺩﺍﺭﺍﻱ ﺗﮓ ﺍﻧﺘﻬﺎﺋﻲ ﻳﺎ > </imgﻧﻴﺴﺖ.
ﻣﻬﻤﺘﺮﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺮﺍﻱ ﺩﺭﺝ ﻭ ﺗﻌﺮﻳﻒ ﻳﻚ ﺗﺼﻮﻳﺮ srcﻳﺎ sourceﻧﺎﻡ ﺩﺍﺭﺩ ﻭ ﻣﻘﺪﺍﺭ ﺍﻳﻦ ﺷﻨﺎﺳﻪ ﺁﺩﺭﺱ ﻳﺎ URLﺗﺼﻮﻳﺮ ﻣﻴﺒﺎﺷﺪ .ﺗﺼﺎﻭﻳﺮﻱ ﻛﻪ
ﻣﺮﻭﺭﮔﺮ ﺩﺭ ﻳﻚ ﺻﻔﺤﻪ ﻭﺏ ﻧﻤﺎﻳﺶ ﻣﻴﺪﻫﺪ ﻣﻴﺘﻮﺍﻧﻨﺪ ﺩﺭ ﻫﻤﺎﻥ ﺩﺍﻳﺮﻛﺘﻮﺭﻱ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ،ﺩﺭ ﺩﻳﮕﺮ ﺩﺍﻳﺮﻛﺘﻮﺭﻳﻬﺎﻱ ﻫﻤﺎﻥ ﺳﺎﻳﺖ ﻭ ﻳﺎ ﺩﺭ ﻓﻀﺎﻱ ﺑﻴﻜﺮﺍﻥ
ﻭﺏ ﻗﺮﺍﺭ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻨﺪ.
ﺷﻜﻞ ﺳﺎﺩﻩ ﺩﺭﺝ ﻳﻚ ﺗﺼﻮﻳﺮ:
>"<img src="url
ﻣﻘﺪﺍﺭ urlﺁﺩﺭﺱ ﺍﻳﻨﺘﺮﻧﺘﻲ ﺗﺼﻮﻳﺮ ﻣﻴﺒﺎﺷﺪ ﻭ ﻣﺜﻼ ﺍﮔﺮ ﺗﺼﻮﻳﺮﻱ ﻛﻪ ﻗﺮﺍﺭ ﺍﺳﺖ ﻛﻪ ﺩﺭ ﺻﻔﺤﻪ ﺩﺭﺝ ﺷﻮﺩ ﺩﺭ ﻫﻤﺎﻥ ﺩﺍﻳﺮﻛﺘﻮﺭﻱ ﻗﺮﺍﺭ ﺩﺍﺭﺩ ﻭ ﻧﺎﻣﺶ
، test.jpgﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﺑﻪ ﺟﺎﻱ urlﻓﻘﻂ ﻧﺎﻡ ﺗﺼﻮﻳﺮ ﻳﻌﻨﻲ test.jpgﺭﺍ ﺑﻨﻮﻳﺴﻴﺪ ﻭ ﺍﮔﺮ ﺗﺼﻮﻳﺮ ﺩﺭ ﺳﺎﻳﺘﻲ ﺩﻳﻜﺮ ﻗﺮﺍﺭ ﺩﺍﺭﺩ urlﻛﺎﻣﻞ ﺁﻧﺮﺍ
ﺑﻨﻮﻳﺴﻴﺪ .ﻣﺜﻼ ﺗﺼﻮﻳﺮ ﻟﻮﮔﻮ ﺳﺎﻳﺖ google.comﺩﺍﺭﺍﻱ urlﻱ ﺑﺮﺍﺑﺮ http://www.google.com/images/logo.gifﺍﺳﺖ.ﺩﺭ ﺍﻳﻦ
urlﻧﺎﻡ ﺗﺼﻮﻳﺮ logo.gifﺑﻮﺩﻩ ،ﺩﺭ ﺩﺍﻳﺮﻛﺘﻮﺭﻱ imagesﻗﺮﺍﺭ ﺩﺍﺷﺘﻪ ﻭ ﺭﻭﻱ ﻭﺏ ﺳﺎﻳﺖ google.comﻗﺮﺍﺭ ﺩﺍﺭﺩ.
ﺷﻨﺎﺳﻪ ﻫﺎﻱ widthﻭ heightﺩﺭ ﺗﮓ img
ﻛﺎﺭﺑﺮﺩ ﺷﻨﺎﺳﻪ ﻫﺎﻱ widthﻭ heightﺗﻌﻴﻴﻦ ﻋﺮﺽ ﻭ ﺍﺭﺗﻔﺎﻉ ﻧﻤﺎﻳﺶ ﺗﺼﻮﻳﺮ ﺍﺳﺖ .ﺍﮔﺮ ﺍﺯ ﺍﻳﻦ ﺷﻨﺎﺳﻪ ﻫﺎ ﺍﺳﺘﻔﺎﺩﻩ ﻧﻜﻨﻴﺪ ،ﻣﺮﻭﺭﮔﺮ ﺍﺑﺘﺪﺍ ﺗﺼﻮﻳﺮ ﺭﺍ ﻟﻮﺩ
ﻛﺮﺩﻩ ﻭ ﺳﭙﺲ ﻃﻮﻝ ﻭ ﻋﺮﺽ ﺁﻧﺮﺍ ﻳﺎﻓﺘﻪ ﻭ ﺩﺭ ﻧﻬﺎﻳﺖ ﻧﻤﺎﻳﺶ ﻣﻴﺪﻫﺪ .ﺑﺎ ﻧﻮﺷﺘﻦ ﻣﻘﺎﺩﻳﺮﻱ ﻏﻴﺮ ﺍﺯ ﻣﻘﺎﺩﻳﺮ ﻭﺍﻗﻌﻲ ﻃﻮﻝ ﻭ ﻋﺮﺽ ﺗﺼﻮﻳﺮ ﻣﻴﺘﻮﺍﻧﻴﺪ ﺑﻪ ﺗﻐﻴﻴﺮ
ﺷﻜﻞ ﻭ ﺍﺑﻌﺎﺩ ﺁﻥ ﺑﭙﺮﺩﺍﺯﻳﺪ ﻭ ﺁﻧﺮﺍ ﻣﺜﻼ ﻛﻮﭼﻜﺘﺮ ،ﺑﺰﺭﮔﺘﺮ ﻭ ﻳﺎ ﻛﺸﻴﺪﻩ ﺗﺮ ﻧﻤﺎﻳﺶ ﺩﻫﻴﺪ .ﻣﺜﺎﻝ ﺯﻳﺮ ﻧﺤﻮﻩ ﺩﺭﺝ ﺗﺼﻮﻳﺮﻱ ﺭﺍ ﺑﺎ ﻗﻴﺪ ﺍﺑﻌﺎﺩ ﺁﻥ ﺷﺮﺡ ﻣﻴﺪﻫﺪ:
> "<img src="http://www.google.com/images/logo.gif" width="276" height="110
ﺗﻮﺻﻴﻪ ﻣﻴﺸﻮﺩ ﻛﻪ ﺣﺘﻤﺎ ﺍﺑﻌﺎﺩ ﺗﺼﻮﻳﺮ ﺭﺍ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ ﻫﺎﻱ widthﻭ heightﻗﻴﺪ ﻛﻨﻴﺪ ،ﺍﻳﻨﻜﺎﺭ ﺳﺒﺐ ﻛﻤﻚ ﺑﻪ ﻣﺮﻭﺭﮔﺮ ﺩﺭ ﺗﺴﺮﻳﻊ ﺷﺮﻭﻉ ﻧﻤﺎﻳﺶ
ﺻﻔﺤﻪ ﺧﻮﺍﻫﺪ ﺷﺪ).ﺩﺭ ﻭﺍﻗﻊ ﺑﺎ ﻗﻴﺪ ﺍﺑﻌﺎﺩ ﺗﺼﻮﻳﺮ ،ﻣﺮﻭﺭﮔﺮ ﻗﺒﻞ ﺍﺯ ﻟﻮﺩ ﺗﺼﻮﻳﺮ ﻣﻴﺪﺍﻧﺪ ﻛﻪ ﭼﻪ ﻣﻘﺪﺍﺭ ﺍﺯ ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ ﺑﺎﻳﺪ ﺑﻪ ﺗﺼﻮﻳﺮ ﻣﺰﺑﻮﺭ ﺍﺧﺘﺼﺎﺹ ﺩﺍﺩﻩ
ﺷﻮﺩ ﻭ ﻗﺒﻞ ﺍﺯ ﻟﻮﺫ ﺷﺪﻥ ﺗﻤﺎﻣﻲ ﺗﺼﺎﻭﻳﺮ ﻣﺮﻭﺭﮔﺮ ﺷﺮﻭﻉ ﺑﻪ ﻧﻤﺎﻳﺶ ﻗﺎﻟﺐ ﻭ ﭼﺎﺭﭼﻮﺏ ﻛﻠﻲ ﺻﻔﺤﻪ ﺧﻮﺍﻫﺪ ﻛﺮﺩ(.
ﺷﻨﺎﺳﻪ Altﻳﺎ " "alternate textﻳﺎ ﻣﺘﻦ ﺟﺎﻳﮕﺰﻳﻦ
ﺍﮔﺮ ﻣﺮﻭﺭﮔﺮ ﺑﻪ ﻫﺮ ﺩﻟﻴﻠﻲ ﻧﺘﻮﺍﻧﺪ ﻛﻪ ﻳﻚ ﺗﺼﻮﻳﺮ ﺭﺍ ﻧﻤﺎﻳﺶ ﺩﻫﺪ ﻭ ﻳﺎ ﻣﺮﻭﺭﮔﺮ ﺍﺯ ﻧﻮﻉ ﻣﺮﻭﺭﮔﺮﻫﺎﺋﻲ ﺑﺎﺷﺪ ﻛﻪ ﻓﻘﻂ ﻣﺘﻦ ﺭﺍ ﻧﻤﺎﻳﺶ ﻣﻴﺪﻫﻨﺪ ،ﻣﺘﻦ ﻭ text
37 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻱ ﻛﻪ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ altﺗﻌﻴﻴﻦ ﺷﺪﻩ ﺍﺳﺖ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ .ﻫﻤﭽﻨﻴﻦ ﺩﺭ ﺍﻏﻠﺐ ﻣﺮﻭﺭﮔﺮﻫﺎ ﺑﺎ ﻗﺮﺍﺭﮔﺮﻓﺘﻦ ﻣﺎﻭﺱ ﺑﺮﻭﻱ ﻳﻚ ﺗﺼﻮﻳﺮ ،ﻣﺘﻦ
ﺗﻌﻴﻴﻦ ﺷﺪﻩ ﺗﻮﺳﻂ ﺷﻨﺎﺳﻪ altﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ .ﺑﺎ ﻛﻤﻚ altﺍﻃﻼﻋﺎﺕ ﺍﺿﺎﻓﻲ ﻣﺮﺑﻮﻁ ﺑﻪ ﺗﺼﻮﻳﺮ ﻗﺎﺑﻞ ﻧﻤﺎﻳﺶ ﻣﻴﺒﺎﺷﺪ.ﻣﺜﺎﻝ ﺯﻳﺮ ﻧﺤﻮﻩ ﺩﺭﺝ
ﺗﺼﻮﻳﺮﻱ ﺭﺍ ﺑﺎ ﻗﻴﺪ ﻣﺘﻦ ﺟﺎﻳﮕﺰﻳﻦ ﺁﻥ ﺷﺮﺡ ﻣﻴﺪﻫﺪ:
> "!<img src="images/madresehweb_88_31.jpg" alt="The web school
ﻭﺑﻼﮔﻬﺎ ﻭ ﺍﺿﺎﻓﻪ ﻛﺮﺩﻥ ﺗﺼﺎﻭﻳﺮ:
ﺍﮔﺮ ﻭﺑﻼﮔﻲ ﺩﺍﺷﺘﻪ ﻭ ﻣﻴﺨﻮﺍﻫﻴﺪ ﻛﻪ ﺗﺼﻮﻳﺮﻱ ﺑﻪ ﺁﻥ ﺍﺿﺎﻓﻪ ﻛﻨﻴﺪ ﺩﻭ ﺣﺎﻟﺖ ﻣﺨﺘﻠﻒ ﻣﻤﻜﻦ ﺍﺳﺖ ﻛﻪ ﭘﻴﺶ ﺁﻳﺪ:
•ﺍﻟﻒ( ﺗﺼﻮﻳﺮ ﺭﻭﻱ ﺳﺎﻳﺘﻲ ﺩﻳﮕﺮ ﻗﺮﺍﺭ ﺩﺍﺷﺘﻪ ﻭ ﺷﻤﺎ ﻫﻢ ﻣﻴﺨﻮﺍﻫﻴﺪ ﺍﺯ ﺁﻥ ﺗﺼﻮﻳﺮ ﻛﻪ ﺩﺭ ﺳﺎﻳﺘﻲ ﺩﻳﮕﺮ ﻗﺮﺍﺭ ﺩﺍﺭﺩ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ .ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﺍﺯ ﺁﺩﺭﺱ
ﻣﺴﺘﻘﻴﻢ ﺗﺼﻮﻳﺮ ﺩﺭ ﺷﻨﺎﺳﻪ srcﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ ،ﻣﺎﻧﻨﺪ :
>< width=258 height=78 "img src="http://www.google.ca/images/hp0.gif
ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﺗﺼﻮﻳﺮ ﺭﻭﻱ ﺳﺎﻳﺖ google.caﻗﺮﺍﺭ ﺩﺍﺷﺘﻪ ﻭ ﻟﺰﻭﻣﻲ ﺑﻪ ﺫﺧﻴﺮﻩ ﺁﻥ ﺗﻮﺳﻂ ﺷﻤﺎ ﻧﻴﺴﺖ.
•ﺏ( ﺗﺼﻮﻳﺮ ﺭﻭﻱ ﻫﺎﺭﺩ ﻛﺎﻣﻴﻴﻮﺗﺮ ﺷﻤﺎ ﺍﺳﺖ ﻭ ﻫﻨﻮﺯ ﺑﺮﻭﻱ ﻭﺏ ﻣﻨﺘﻘﻞ ﻧﺸﺪﻩ ﺍﺳﺖ .ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﭼﻮﻥ ﺑﻌﻀﻲ ﺳﻴﺴﺘﻢ ﻫﺎﻱ ﻭﺑﻼگ ﺍﻣﻜﺎﻥ ﺫﺧﻴﺮﻩ
ﺗﺼﺎﻭﻳﺮ ﺭﺍ ﺑﻪ ﺷﻤﺎ ﻧﻤﻲ ﺩﻫﻨﺪ ﺑﺎﻳﺪ ﺍﺑﺘﺪﺍ ﺗﺼﻮﻳﺮﺗﺎﻥ ﺭﺍ ﺑﺎ ﻛﻤﻚ FTPﻳﺎ ﺭﻭﺷﻬﺎﻱ ﺩﻳﮕﺮ ﺑﻪ ﺭﻭﻱ ﺳﺎﻳﺖ ﻳﺎ ﻫﺮ ﻭﺏ ﺳﺮﻭﺭ ﺩﻳﮕﺮﻱ ﻣﻨﺘﻘﻞ ﻛﻨﻴﺪ.
ﺷﺮﻛﺘﻬﺎﻱ ﻣﺨﺘﻠﻔﻲ ﻓﻀﺎﻱ ﻣﺠﺎﻧﻲ ﺑﺮﺍﻱ ﺳﺎﺧﺖ ﺻﻔﺤﺎﺕ ﻭﺏ ﻭ ﺫﺧﻴﺮﻩ ﺍﻃﻼﻋﺎﺕ ﻭ ﺗﺼﺎﻭﻳﺮ ﺩﺭ ﺍﺧﺘﻴﺎﺭ ﺷﻤﺎ ﻗﺮﺍﺭ ﻣﻴﺪﻫﻨﺪ ﻭ ﺩﺭ ﻳﻜﻲ ﺍﺯ ﺳﺆﺍﻟﻬﺎﻱ ﺍﻳﻦ
FAQﻓﻬﺮﺳﺖ ﺍﻳﻦ ﺷﺮﻛﺘﻬﺎ ﺭﺍ ﻣﻴﺘﻮﺍﻧﻴﺪ ﺑﺒﻴﻨﻴﺪ .ﺑﻨﺎﺑﺮﺍﻳﻦ ﺍﺑﺘﺪﺍ ﻓﻀﺎﺋﻲ ﺩﺭ ﻭﺏ ﺗﻬﻴﻪ ﻛﺮﺩﻩ ،ﺳﭙﺲ ﺗﺼﻮﻳﺮﺗﺎﻥ ﺭﺍ Uploadﻛﺮﺩﻩ )ﺑﺎ ﻛﻤﻚ FTPﻳﺎ
ﺭﻭﺷﻬﺎﺱ ﺩﻳﮕﺮ ( ﻭ ﺳﭙﺲ ﺩﺭ ﺷﻨﺎﺳﻪ srcﺍﺯ ﺗﮓ imgﺁﺩﺭﺱ ﺟﺪﻳﺪ ﺗﺼﻮﻳﺮ ﺭﺍ ﻗﻴﺪ ﻛﻨﻴﺪ.
ﭼﻨﺪ ﻧﻜﺘﻪ ﻣﻬﻢ:
ﺍﮔﺮ ﺩﺭ ﻳﻚ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﺍﺯ 10ﺗﺼﻮﻳﺮ ﺍﺳﺘﻔﺎﺩﻩ ﺷﺪﻩ ﺑﺎﺷﺪ ،ﻣﺮﻭﺭﮔﺮ ﺑﺎﻳﺪ 11ﻓﺎﻳﻞ ﺭﺍ ﻟﻮﺩ ﻛﻨﺪ ).ﺧﻮﺩ ﺻﻔﺤﻪ ﺑﻪ ﻋﻼﻭﻩ 10ﺗﺼﻮﻳﺮ( •
ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﺼﺎﻭﻳﺮ ،ﺳﺮﻋﺖ ﻟﻮﺩ ﺷﺪﻥ ﺻﻔﺤﺎﺕ ﺭﺍ ﭘﺎﻳﻴﻦ ﻣﻲ ﺁﻭﺭﺩ.ﺑﺎ ﺍﺣﺘﻴﺎﻁ ﺍﺯ ﺗﺼﺎﻭﻳﺮ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ ﻭ ﺑﻪ ﺍﻧﺪﺍﺯﻩ ﻭ ﺣﺠﻢ ﺗﺼﻮﻳﺮ ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ •
ﺑﺎﺷﻴﺪ.
ﻟﻮﺩ ﺗﺼﻮﻳﺮﻱ ﺑﺎ ﺣﺠﻢ 50ﻛﻴﻠﻮﺑﺎﻳﺖ ﺑﺮﺍﻱ ﻛﺴﻲ ﻛﻪ ﺍﺯ ﻣﻮﺩﻣﻲ ﺑﺎ ﺳﺮﻋﺖ kbps28ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﺪ ﺣﺪﺍﻗﻞ 15ﺛﺎﻧﻴﻪ ﻃﻮﻝ ﺧﻮﺍﻫﺪ ﻛﺸﻴﺪ. •
ﺑﺮﺍﻱ ﺩﻳﺪﻥ ﻣﺸﺨﺼﺎﺕ ﺗﺼﺎﻭﻳﺮ ﺩﺭ ﻭﺏ ﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﺭﻭﻱ ﺗﺼﻮﻳﺮ Right clickﻛﺮﺫﻩ ﻭ ﺳﭙﺲ ﺩﺭ ﺑﺨﺶ properities •
ﺁﺩﺭﺱ،ﺍﺑﻌﺎﺩ ﻭ ﻇﺮﻓﻴﺖ ﺗﺼﻮﻳﺮ ﺭﺍ ﺑﺒﻴﻨﻴﺪ.
ﺑﺮﺍﻱ ﺫﺧﻴﺮﻩ ﺗﺼﺎﻭﻳﺮ ﺩﺭ ﻭﺏ ﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﺭﻭﻱ ﺗﺼﻮﻳﺮ Right clickﻛﺮﺫﻩ ﻭ ﺳﭙﺲ ﺩﺭ ﺑﺨﺶ " "Save picture asﺁﻧﺮﺍ ﺫﺧﻴﺮﻩ •
ﻛﻨﻴﺪ.
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ
ﺗﺼﺎﻭﻳﺮ ﺯﻣﻴﻨﻪ
38 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺗﻌﻴﻴﻦ ﺗﺼﺎﻭﻳﺮ ﺯﻣﻴﻨﻪ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ backgroundﺩﺭ ﺗﮓ body
ﺗﺮﺍﺯﺑﻨﺪﻱ ﺗﺼﺎﻭﻳﺮ
ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺗﺮﺍﺯﺑﻨﺪﻱ ﺗﺼﺎﻭﻳﺮ ﺩﺭ ﻛﻨﺎﺭ ﻣﺘﻮﻥ ﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ.
ﺗﺼﺎﻭﻳﺮ ﺷﻨﺎﻭﺭ ﺩﺭ ﻣﺘﻦ
ﺁﺯﺍﺩ ﮔﺬﺍﺷﺘﻦ ﺗﺼﻮﻳﺮ ﺩﺭ ﺳﻤﺖ ﭼﭗ ﻳﺎ ﺭﺍﺳﺖ
ﻧﻤﺎﻳﺶ ﺗﺼﺎﻭﻳﺮ ﺩﺭ ﺍﺑﻌﺎﺩ ﻣﺨﺘﻠﻒ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ ﻫﺎﻱ widthﻭ heightﻭ ﻧﻤﺎﻳﺶ ﺗﺼﺎﻭﻳﺮ ﺩﺭ ﺍﺑﻌﺎﺩ ﻣﺨﺘﻠﻒ
ﻧﻤﺎﻳﺶ ﻣﺘﻦ ﺟﺎﻳﮕﺰﻳﻦ ﺑﺮﺍﻱ ﺗﺼﺎﻭﻳﺮ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ alt
ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﺼﺎﻭﻳﺮ ﻫﻨﮕﺎﻡ ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪ ﻫﺎ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﺼﺎﻭﻳﺮ ﻫﻨﮕﺎﻡ ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪ ﻫﺎ
ﺍﻳﺠﺎﺩ image mapﻫﺎ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺍﻳﺠﺎﺩ . image mapﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﻫﺮ ﺑﺨﺶ ﺍﺯ ﻧﻮﺍﺣﻲ ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﻗﺎﺑﻞ ﻛﻠﻴﻚ ﺑﻮﺩﻩ ﻭ ﺑﻪ ﭘﻴﻮﻧﺪﻱ ﺍﺧﺘﺼﺎﺻﻲ ﺍﺷﺎﺭﻩ ﻣﻴﻜﻨﺪ.
ﺑﺮﺍﻧﺎﻣﻪ ﺍﻱ ﺧﻮﺏ ﻭ ﻣﺘﻦ ﺑﺎﺯ ﺑﺮﺍﻱ FTPﺭﺍ ﻣﻴﺘﻮﺍﻧﻴﺪ ﺍﻳﻨﺠﺎ ﺩﺍﻭﻧﻠﻮﺩ ﻛﻨﻴﺪ:
Filezilla
ﺗﮓ ﻫﺎﻱ ﺗﺼﺎﻭﻳﺮ
Start Tag Purpose ﻛﺎﺭﺑﺮﺩ
><img Defines an image ﺩﺭﺝ ﺗﺼﻮﻳﺮ
><map Defines an image map ﺗﻌﺮﻳﻒ Image mapﻳﺎ ؟؟؟
><area Defines an area inside an image map ﺗﻌﺮﻳﻒ ﻧﺎﺣﻴﻪ ﺍﻱ ﺩﺭ ﺩﺍﺧﻞ Image map
ﻣﺮﺟﻊ - HTML 4.01 Specification :ﻓﻬﺮﺳﺖ ﻋﻨﺎﺻﺮ -ﻓﻬﺮﺳﺖ ﺷﻨﺎﺳﻪ ﻫﺎ
ﭘﺲ ﺯﻣﻴﻨﻪ ) ( Background
ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﺎ ﭼﮕﻮﻧﮕﻲ ﺗﻌﻴﻴﻦ ﺗﺼﺎﻭﻳﺮ ﻭ ﺭﻧﮓ ﭘﺲ ﺯﻣﻴﻨﻪ ) (Backgroundﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ .ﺭﻧﮓ ﻭ ﻳﺎ ﺗﺼﻮﻳﺮ ﭘﺲ ﺯﻣﻴﻨﻪ ﻋﺎﻣﻞ ﺑﺴﻴﺎﺭ ﻣﻬﻤﻲ
ﺩﺭ ﻃﺮﺍﺣﻲ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺑﻮﺩﻩ ﻭ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺭﻧﮓ ﻭ ﻳﺎ ﺗﺼﻮﻳﺮ ﻣﻨﺎﺳﺐ ﻧﻘﺸﻲ ﺗﻌﻴﻴﻦ ﻛﻨﻨﺪﻩ ﺩﺭ ﺧﻮﺍﻧﺎ ﺑﻮﺩﻥ ﺻﻔﺤﺎﺕ ﺩﺍﺭﺩ.
39 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻣﺜﺎﻟﻬﺎ:
ﺭﻧﮓ ﻣﺘﻦ ﻭ ﺯﻣﻴﻨﻪ ﻣﺘﻨﺎﺳﺐ
ﺍﻧﺘﺨﺎﺏ ﺭﻧﮓ ﻣﻨﺎﺳﺐ ﻣﺘﻮﻥ ﻭ ﭘﺲ ﺯﻣﻴﻨﻪ ﺑﻪ ﺧﻮﺍﻧﺎ ﺑﻮﺩﻥ ﻣﺘﻦ ﻛﻤﻚ ﺯﻳﺎﺩﻱ ﺧﻮﺍﻫﺪ ﻛﺮﺩ.
ﺭﻧﮓ ﻣﺘﻦ ﻭ ﺯﻣﻴﻨﻪ ﻧﺎﻣﺘﻨﺎﺳﺐ
ﻣﺜﺎﻟﻲ ﺍﺯ ﺍﻧﺘﺨﺎﺏ ﻧﺎﻣﻨﺎﺳﺐ ﺭﻧﮓ ﻣﺘﻦ ﻭ ﭘﺲ ﺯﻣﻴﻨﻪ
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ
ﺭﻧﮓ ﻭ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﺩﺭ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ:
ﺗﮓ > <bodyﺩﺍﺭﺍﻱ ﺩﻭ ﺷﻨﺎﺳﻪ ﻣﻬﻢ ﺑﺮﺍﻱ ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﻭ ﺗﺼﻮﻳﺮ ﭘﺲ ﺯﻣﻴﻨﻪ ﻣﻴﺒﺎﺷﺪ .ﭘﺲ ﺯﻣﻴﻨﻪ ﻳﻚ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ،ﺭﻧﮓ ﻭ ﻳﺎ ﻳﻚ ﺗﺼﻮﻳﺮ ﻣﻴﺘﻮﺍﻧﺪ
ﺑﺎﺷﺪ.
ﺷﻨﺎﺳﻪ bgcolorﺑﺮﺍﻱ ﺭﻧﮓ ﭘﺲ ﺯﻣﻴﻨﻪ )(color background
ﺷﻨﺎﺳﻪ bgcolorﺭﻧﮓ ﭘﺲ ﺯﻣﻴﻨﻪ ﺭﺍ ﺗﻌﻴﻴﻦ ﻣﻴﻜﻨﺪ .ﻣﻘﺪﺍﺭ ﺭﻧﮓ ﭘﺲ ﺯﻣﻴﻨﻪ ﻣﻴﺘﻮﺍﻧﺪ ﻧﺎﻡ ﺭﻧﮓ )ﻣﺜﻞ redﻳﺎ ، ( blueﻣﻘﺪﺍﺭ ﺁﻥ ﺑﺮ ﺍﺳﺎﺱ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ
RGBﻭ ﻳﺎ ﺣﺘﻲ ﻣﻘﺪﺍﺭ ﻫﮕﺰﺍﺩﺳﻴﻤﺎﻝ ) (Hexadecimalﺑﺎﺷﺪ.
>"<body bgcolor="#000000
>")<body bgcolor="rgb(0,0,0
>"<body bgcolor="black
ﺩﺭ ﺗﻤﺎﻣﻲ ﻣﺜﺎﻟﻬﺎﻱ ﺑﺎﻻ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ bgcolorﺭﻧﮓ ﺯﻣﻴﻨﻪ ﺻﻔﺤﻪ "ﺳﻴﺎﻩ" ﺗﻌﻴﻴﻦ ﻣﻴﺸﻮﺩ.
ﺷﻨﺎﺳﻪ Backgroundﺑﺮﺍﻱ ﺗﺼﻮﻳﺮ ﭘﺲ ﺯﻣﻴﻨﻪ:
ﺑﺮﺍﻱ ﺗﻌﻴﻴﻦ ﺗﺼﻮﻳﺮﻱ ﻛﻪ ﺑﻪ ﻋﻨﻮﺍﻥ ﭘﺲ ﺯﻣﻴﻨﻪ ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﻣﻴﺸﻮﺩ ﺍﺯ ﺷﻨﺎﺳﻪ backgroundﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﺸﻮﺩ.ﻣﻘﺪﺍﺭ ﺍﻳﻦ ﺷﻨﺎﺳﻪ URLﻳﺎ
ﺁﺩﺭ ﺱ ﺗﺼﻮﻳﺮ ) (imageﻣﻴﺒﺎﺷﺪ.ﺍﮔﺮ ﺍﺑﻌﺎﺩ ﺗﺼﻮﻳﺮ ﻛﻮﭼﻜﺘﺮ ﺍﺯ ﺍﺑﻌﺎﺩ ﭘﻨﺠﺮﻩ ﺍﺻﻠﻲ ﻣﺮﻭﺭﮔﺮ ﺑﺎﺷﺪ ،ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﺗﻜﺜﻴﺮ ﺧﻮﺍﻫﺪ ﺷﺪ ﺗﺎ ﺣﺪﻱ ﻛﻪ ﺗﻤﺎﻡ
ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ ﺍﺯ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﭘﻮﺷﺎﻧﺪﻩ ﺷﻮﺩ.
>"<body background="bg.gif
>"<body background="http://www.khaterat.com/images/bg.gif
ﺩﺭ ﻣﺜﺎﻝ ﺍﻭﻝ ﺍﺯ ﺁﺩﺭﺱ ﺩﻫﻲ ﻧﺴﺒﻲ ) (relativeﺑﺮﺍﻱ ﺗﻌﻴﻴﻦ URLﻳﺎ ﺁﺩﺭﺱ ﺗﺼﻮﻳﺮ ﺍﺳﺘﻔﺎﺩﻩ ﺷﺪﻩ ﻭ ﺩﺭ ﻭﺍﻗﻊ ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﻓﺎﻳﻞ ﺍﭼﺘﻤﻞ ﻭ ﺗﺼﻮﻳﺮ
40 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
bg.gifﺑﺎﻳﺪ ﺩﺭ ﻳﻚ ﺩﺍﻳﺮﻛﺘﻮﺭﻱ ﻗﺮﺍﺭ ﮔﻴﺮﻧﺪ .ﺩﺭ ﻣﻘﺎﺑﻞ ﻣﺜﺎﻝ ﺩﻭﻡ ﺍﺯ ﺁﺩﺭﺱ ﺩﻫﻲ ﻣﻄﻠﻖ ) (absoluteﺑﺮﺍﻱ ﺗﻌﻴﻴﻦ ﺁﺩﺭﺱ ﺗﺼﻮﻳﺮ ﺍﺳﺘﻔﺎﺩﻩ ﺷﺪﻩ ﺍﺳﺖ
ﻭ ﻫﻤﺎﻧﻄﻮﺭ ﻛﻪ ﻣﻴﺪﺍﻧﻴﺪ ﺁﺩﺭﺱ ﺗﺼﻮﻳﺮ ﺩﺭ ﻫﺮ ﻧﻘﻄﻪ ﺍﺯ ﻓﻀﺎﻱ ﻭﺏ ﻭ ﺭﻭﻱ ﻫﺮ ﻭﺏ ﺳﺮﻭﺭﻱ ﻣﻴﺘﻮﺍﻧﺪ ﺑﺎﺷﺪ.
ﻧﻜﺎﺕ ﻣﻬﻢ :ﺍﮔﺮ ﺍﺯ ﺗﺼﺎﻭﻳﺮ ﭘﺲ ﺯﻣﻴﻨﻪ ﺩﺭ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻴﺪ ﺑﻪ ﻧﻜﺎﺕ ﺯﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ :
ﻫﺮﺗﺼﻮﻳﺮﻱ ﺑﺎ ﻓﺮﻣﺖ png, bmp, gifﻭ ﻳﺎ jpgﻗﺎﺑﻞ ﺍﺳﺘﻔﺎﺩﻩ ﺑﻪ ﻋﻨﻮﺍﻥ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﻣﻴﺒﺎﺷﺪ. •
ﺗﻮﺻﻴﻪ ﻣﻴﺸﻮﺩ ﺍﺯ ﺗﺼﺎﻭﻳﺮ ﺑﺰﺭﮔﺘﺮ ﺍﺯ ﺩﻩ ﻛﻴﻠﻮﺑﺎﻳﺖ ﺑﻪ ﻋﻨﻮﺍﻥ ﺗﺼﻮﻳﺮ ﭘﺲ ﺯﻣﻴﻨﻪ ﺍﺳﺘﻔﺎﺩﻩ ﻧﻜﻨﻴﺪ ،ﺩﺭ ﻏﻴﺮ ﺍﻳﻦ ﺻﻮﺭﺕ ﺳﺮﻋﺖ loadﺻﻔﺤﻪ ﺑﺸﺪﺕ ﭘﺎﻳﻴﻦ •
ﺧﻮﺍﻫﺪ ﺁﻣﺪ.
ﺍﺯ ﺗﺼﺎﻭﻳﺮ ﺯﻣﻴﻨﻪ ﻫﻤﺎﻫﻨﮓ ﺑﺎ ﺩﻳﮕﺮﺕ ﺻﺎﻭﻳﺮ ﻭ ﻣﺘﻮﻥ ﺻﻔﺤﻪ ﺻﻔﺤﻪ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ. •
ﺩﺭ ﺭﺯﻭﻟﻮﺷﻨﻬﺎﻱ ﻣﺨﺘﻠﻒ ﺑﻪ ﺩﻳﺪﻥ ﻭ ﺁﺯﻣﺎﻳﺶ ﺗﺼﺎﻭﻳﺮ ﭘﺲ ﺯﻣﻴﻨﻪ ﺑﭙﺮﺩﺍﺯﻳﺪ. •
ﭘﺮ ﻣﺼﺮﻑ ﺗﺮﻳﻦ ﺭﻧﮕﻬﺎﻱ ﺯﻣﻴﻨﻪ ﻭﺏ ﺳﺎﻳﺘﻬﺎ ،ﺭﻧﮕﻬﺎﻱ ﺳﻔﻴﺪ ،ﺳﻴﺎﻩ ﻭ ﺧﺎﻛﺴﺘﺮﻱ ﻣﻴﺒﺎﺷﻨﺪ. •
ﺍﻏﻠﺐ ﺳﺎﻳﺘﻬﺎﻱ ﻭﺏ ﺍﺯ ﺗﺼﺎﻭﻳﺮ ﭘﺲ ﺯﻣﻴﻨﻪ ﺍﺳﺘﻔﺎﺩﻩ ﻧﻤﻲ ﻛﻨﻨﺪ! ﻣﺜﻼ ﻫﻤﻴﻦ ﺳﺎﻳﺖ!!! •
ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ ﻫﺎﻱ bgcolorﻭ backgroundﻣﺮﺑﻮﻁ ﺑﻪ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﻗﺪﻳﻤﻲ ﺍﭼﺘﻤﻞ ﻣﻴﺒﺎﺷﺪ. •
ﻧﻜﺘﻪ ﻣﻬﻢ ﺩﺭ ﺳﺎﺯﮔﺎﺭﻱ ﺑﺎ ﻧﺴﺨﻪ ﻫﺎﻱ ﺟﺪﻳﺪ ﺍﭼﺘﻤﻞ ﻭ XHTML
ﺷﻨﺎﺳﻪ ﻫﺎﻱ bgcolorﻭ backgroundﺩﺭ ﺗﮓ > <bodyﺩﺭ ﻧﺴﺨﻪ 4ﺍﭼﺘﻤﻞ ﻭ XHTMLﭘﺸﺘﻴﺒﺎﻧﻲ ﻧﻤﻴﺸﻮﻧﺪ ﻭ ﺩﺭ ﻭﺍﻗﻊ ﺍﺯ ﺭﺩﻩ ﺧﺎﺭﺝ
ﻣﺤﺴﻮﺏ ﻣﻴﺸﻮﻧﺪ .ﺩﺭ ﻋﻮﺽ ﻛﻨﺴﺮﺳﻴﻮﻡ W3Cﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ Style Sheetﻫﺎ ﺭﺍ ﺗﻮﺻﻴﻪ ﻣﻴﻜﻨﺪ ﻭ ﺩﺭ ﻭﺍﻗﻊ ﺩﺭ ﻧﺴﺨﻪ 4ﺍﭼﺘﻤﻞ ﻭ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺟﺪﻳﺪ
XHTMLﺗﻤﺎﻣﻲ ﺍﻃﻼﻋﺎﺕ ﻣﺮﺑﻮﻁ ﺑﻪ ﻧﻤﺎﻳﺶ ﻳﺎ presentationﻭ layoutﺑﺎﻳﺪ ﺩﺭ style sheetﻫﺎ ﻗﺮﺍﺭ ﮔﻴﺮﻧﺪ.
ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ 1B
ﺍﺳﺘﻔﺎﺩﻩ ﻣﻨﺎﺳﺐ ﺍﺯ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ 1
ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﺑﺪﻟﻴﻞ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﺼﻮﻳﺮ ﻣﻨﺎﺳﺐ ﺑﺮﺍﻱ ﺯﻣﻴﻨﻪ ،ﻧﻮﺷﺘﻪ ﻫﺎﻱ ﺻﻔﺤﻪ ﻛﺎﻣﻼ ﺧﻮﺍﻧﺎ ﻫﺴﺘﻨﺪ.
ﺍﺳﺘﻔﺎﺩﻩ ﻣﻨﺎﺳﺐ ﺍﺯ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ 2
ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﺩﺭ ﺍﺛﺮ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﺼﻮﻳﺮ ﻣﻨﺎﺳﺐ ﺑﺮﺍﻱ ﺯﻣﻴﻨﻪ ،ﻧﻮﺷﺘﻪ ﻫﺎﻱ ﺻﻔﺤﻪ ﻛﺎﻣﻼ ﺧﻮﺍﻧﺎ ﻫﺴﺘﻨﺪ.
ﺍﺳﺘﻔﺎﺩﻩ ﻧﺎﻣﻨﺎﺳﺐ ﺍﺯ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ
ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﻮﺷﺘﻪ ﻫﺎﻱ ﺻﻔﺤﻪ ﺧﻮﺍﻧﺎ ﻧﻴﺴﺘﻨﺪ.
ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﺑﺎ ﺁﺩﺭﺱ ﻣﻄﻠﻖ
ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﺁﺩﺭﺱ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﺑﺼﻮﺭﺕ ﻣﻄﻠﻖ ﻭ ﻛﺎﻣﻞ ﺁﻭﺭﺩﻩ ﺷﺪﻩ ﺍﺳﺖ.
ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﺑﺎ Style Sheetﻫﺎ
41 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﭼﮕﻮﻧﮕﻲ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ Style Sheetﻫﺎ ﺑﺮﺍﻱ ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﺁﻭﺭﺩﻩ ﺷﺪﻩ ﺍﺳﺖ.
ﻗﻠﻢ ﻫﺎ ) ( HTML Fonts
ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﻳﺎﺩ ﺧﻮﺍﻫﻴﺪ ﮔﺮﻓﺖ ﻛﻪ ﭼﮕﻮﻧﻪ ﻧﻮﻉ ﻗﻠﻢ ،ﺍﻧﺪﺍﺯﻩ ﻭ ﺭﻧﮓ ﻧﻮﺷﺘﻪ ﻫﺎ ﺩﺭ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺗﻌﻴﻴﻦ ﻣﻴﺸﻮﻧﺪ.
ﺑﺎ ﻭﺟﻮﺩﻳﻜﻪ ﻫﻨﻮﺯ ﺑﻌﻀﻲ ﺍﺯ ﺍﭼﺘﻤﻞ ﻛﺎﺭﺍﻥ ﺍﺯ ﺗﮓ > <fontﺑﺮﺍﻱ ﺗﻌﻴﻴﻦ ﻧﺎﻡ ﻭ ﻧﻮﻉ ﻗﻠﻢ ،ﺭﻧﮓ ﻭ ﺍﻧﺪﺍﺯﻩ ﻣﺘﻮﻥ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻨﺪ ﻭﻟﻲ ﺩﺭ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺟﺪﻳﺪ
ﺍﭼﺘﻤﻞ )ﻧﺴﺨﻪ (4ﻭ ﻫﻤﭽﻨﻴﻦ XHTMLﺍﺯ ﺗﮓ > <fontﭘﺸﺘﻴﺒﺎﻧﻲ ﻧﻤﻴﺸﻮﺩ ﻭ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ Style Sheetﻫﺎ ﺑﻪ ﻋﻨﻮﺍﻥ ﺟﺎﻳﮕﺰﻳﻦ ﻣﻌﺮﻓﻲ ﺷﺪﻩ
ﺍﺳﺖ.
ﺗﮓ ><font
ﺩﺭ ﻧﺴﺨﻪ ﻫﺎﻱ 3.2ﻭ ﻗﺒﻠﻲ ﺗﺮ ﺯﺑﺎﻥ ﺍﭼﺘﻤﻞ ﺍﺯ ﺗﮓ > <fontﺑﺮﺍﻱ ﺗﻌﻴﻴﻦ ﻧﺎﻡ ﻗﻠﻢ ،ﺭﻧﮓ ﻭ ﺍﻧﺪﺍﺯﻩ ﻣﺘﻮﻥ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﺸﻮﺩ .ﺩﺭ ﺍﻳﻦ ﺗﮓ ﺷﻨﺎﺳﻪ face
ﻧﺎﻡ ﻗﻠﻢ ،ﺷﻨﺎﺳﻪ sizeﺍﻧﺪﺍﺭﻩ ﻗﻠﻢ ﻭ ﺷﻨﺎﺳﻪ colorﻣﻌﺮﻑ ﺭﻧﮓ ﻣﺘﻦ ﺧﻮﺍﻫﺪ ﺑﻮﺩ .ﻣﺜﺎﻟﻬﺎﻱ ﺯﻳﺮ ﻛﺎﺭﺑﺮﺩ ﺗﮓ > <fontﺧﺪﺍﺑﻴﺎﻣﺮﺯ ﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﻨﺪ:
ﻛﺪ ﺍﭼﺘﻤﻞ ﻧﻤﺎﻳﺶ ﻛﺪ ﺭﻭﺑﺮﻭ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ
><p
>"<font size="2" face="Verdana
This is a paragraph. This is a paragraph.
></font
></p
>"<p dir="rtl
>"<font size="1" face="Times" color="#FF9900
FF9900ﻭ ﺍﻧﺪﺍﺯﻩ 1ﻭ ﺭﻧﮓ Timesﻣﺘﻨﻲ ﺑﺎ ﻗﻠﻢ ﻣﺘﻨﻲ ﺑﺎ ﻗﻠﻢ Timesﻭ ﺍﻧﺪﺍﺯﻩ 1ﻭ ﺭﻧﮓ FF9900
></font
></p
>"<p dir="rtl
>"<font size="2" face="Tahoma" color="red
ﻭ ﺍﻧﺪﺍﺯﻩ 2ﻭ ﺭﻧﮓ ﻗﺮﻣﺰ Tahomaﺍﻳﻦ ﻣﺘﻨﻲ ﺑﺎ ﻗﻠﻢ ﻣﺘﻨﻲ ﺑﺎ ﻗﻠﻢ Tahomaﻭ ﺍﻧﺪﺍﺯﻩ 2ﻭ ﺭﻧﮓ ﻗﺮﻣﺰ
></font
></p
ﺷﻨﺎﺳﻪ ﻫﺎﻱ ﺗﮓ ><font
Attribute Example ﻛﺎﺭﺑﺮﺩ
"size="number "size="2 ﺗﻌﻴﻴﻦ ﺍﻧﺪﺍﺯﻩ ﻗﻠﻢ
"size="+number "size="+1 ﺍﻓﺰﺍﻳﺶ ﺍﻧﺪﺍﺯﻩ ﻗﻠﻢ
"size="-number "size="-1 ﻛﺎﻫﺶ ﺍﻧﺪﺍﺯﻩ ﻗﻠﻢ
"face="face-name "face="Times ﺗﻌﻴﻴﻦ ﻧﺎﻡ ﻗﻠﻢ
"color="color-value "color="#eeff00 ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﻗﻠﻢ
"color="color-name "color="red ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﻗﻠﻢ
42 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
*** ﺑﻴﺎﻥ ﻣﺨﺘﺼﺮ ﻋﻤﻠﻜﺮﺩ ﺗﮓ > <fontﺩﺭ ﺍﻳﻦ ﺩﺭﻭﺱ ﻓﻘﻂ ﺟﻬﺖ ﺍﻃﻼﻉ ﺑﻮﺩﻩ ﻭ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺁﻧﻬﺎ ﺩﺭ ﻃﺮﺍﺣﻲ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺗﻮﺻﻴﻪ ﻧﻤﻴﺸﻮﺩ.
ﺩﻳﮕﺮ ﺍﺯ ﺗﮓ > <fontﺍﺳﺘﻔﺎﺩﻩ ﻧﻜﻨﻴﺪ!
ﺗﮓ > <fontﺍﺯ ﺭﺩﻩ ﺧﺎﺭﺝ ﻣﺤﺴﻮﺏ ﻣﻴﺸﻮﺩ ﻭ ﻛﻨﺴﺮﺳﻴﻮﻡ ﺟﻬﺎﻧﻲ ﺗﻌﻴﻴﻦ ﺍﺳﺘﺎﻧﺪﺍﺭﺩﻫﺎﻱ ﻭﺏ ) World Wide Web Consortium,
(W3Cﺍﻳﻦ ﺗﮓ ﺭﺍ ﺍﺯ ﻣﺠﻤﻮﻋﻪ ﺗﮕﻬﺎﻱ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺍﭼﺘﻤﻞ ﻛﻨﺎﺭ ﮔﺬﺍﺷﺘﻪ ﺍﺳﺖ ﻭ ﺍﻛﻴﺪﺍ ﺗﻮﺻﻴﻪ ﻣﻴﺸﻮﺩ ﻛﻪ ﺍﺯ Style Sheetﻫﺎ ﺑﺮﺍﻱ ﺗﻌﺮﻳﻒ ﻫﺮ ﮔﻮﻧﻪ
ﺧﻮﺍﺹ ﻧﻤﺎﻳﺸﻲ ﻭ ﺁﺭﺍﻳﺸﻲ ) (Presentation & layoutﺍﻟﻤﺎﻧﻬﺎ ﺩﺭ ﺍﭼﺘﻤﻞ ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ.
ﺭﻭﺵ ﺻﺤﻴﺢ ﺗﻌﻴﻴﻦ ﻧﺎﻡ ﻗﻠﻢ ،ﺍﻧﺪﺍﺯﻩ ﻭ ﺭﻧﮓ ﻣﺘﻮﻥ ﺑﺎ ﻛﻤﻚ Style Sheetﻫﺎ:
ﻫﺮ ﭼﻨﺪ ﻛﻪ ﺳﺎﻟﻬﺎ ﺍﺳﺖ ﻛﻪ ﻣﺒﺤﺚ ﻭ ﻛﻼﺳﻬﺎﻱ ﺩﺭﺱ Style Sheetﻫﺎ ﺩﺭ "ﻣﺪﺭﺳﻪ ﻭﺏ" ﺩﺭ ﺩﺳﺖ ﺗﻬﻴﻪ ﺑﻮﺩﻩ ﻭ ﺍﻣﻴﺪﻭﺍﺭﻳﻢ ﻛﻪ ﺑﺰﻭﺩﻱ ﺍﺭﺍﺋﻪ ﺷﻮﻧﺪ!
ﻭﻟﻲ ﺗﺎ ﻗﺒﻞ ﺍﺯ ﺁﻥ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ ﺍﻱ ﺑﻪ ﻧﺎﻡ styleﺩﺭ ﺑﺴﻴﺎﺭﻱ ﺍﺯ ﺍﻟﻤﺎﻧﻬﺎ ﻛﺎﺭ ﮔﺸﺎ ﺧﻮﺍﻫﺪ ﺑﻮﺩ .ﻣﺜﺎﻟﻬﺎﻱ ﺳﺎﺩﻩ ﺯﻳﺮ ﻧﺤﻮﻩ ﺗﻌﻴﻴﻦ ﻧﺎﻡ ﻗﻠﻢ ،ﺍﻧﺪﺍﺯﻩ ﻭ
ﺭﻧﮓ ﻣﺘﻮﻥ ﺭﺍ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ styleﺑﻪ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﻨﺪ ﮔﺬﺍﺷﺖ:
ﺗﻌﻴﻴﻦ ﻧﺎﻡ ﻗﻠﻢ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺗﻌﻴﻴﻦ ﻧﺎﻡ ﻗﻠﻢ ﺩﺭ ﻳﻚ ﺍﺳﺘﻴﻞ ﺩﺭﺟﺎ )(inline
ﺗﻌﻴﻴﻦ ﺍﻧﺪﺍﺯﻩ ﻗﻠﻢ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺗﻌﻴﻴﻦ ﺍﻧﺪﺍﺯﻩ ﻗﻠﻢ ﺩﺭ ﻳﻚ ﺍﺳﺘﻴﻞ ﺩﺭﺟﺎ )(inline
ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﻗﻠﻢ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﻗﻠﻢ ﺩﺭ ﻳﻚ ﺍﺳﺘﻴﻞ ﺩﺭﺟﺎ )(inline
ﺗﻌﻴﻴﻦ ﻧﺎﻡ ،ﺍﻧﺪﺍﺯﻩ ﻭ ﺭﻧﮓ ﻗﻠﻢ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺗﻌﻴﻴﻦ ﻧﺎﻡ ،ﺍﻧﺪﺍﺯﻩ ﻭ ﺭﻧﮓ ﻗﻠﻢ ﺩﺭ ﻳﻚ ﺍﺳﺘﻴﻞ ﺩﺭﺟﺎ )(inline
ﻣﺜﺎﻝ ﻛﺎﺭﺑﺮﺩﻱ ﺩﺭ ﻣﻮﺭﺩ Style Sheetﻫﺎ
ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺗﻌﺮﻳﻒ ﺍﺳﺘﻴﻠﻬﺎﻱ ﻣﺨﺘﻠﻒ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﺩﺭ ﺟﺪﺍﻭﻝ
ﺗﮓ ><span
ﺗﮓ > <spanﺳﺒﺐ ﺗﻌﺮﻳﻒ ﻣﺤﺪﻭﺩﻩ ﻭ ﮔﺴﺘﺮﻩ ﺍﻱ ﻣﺸﺨﺺ ﻣﻴﺸﻮﺩ .ﺗﻤﺎﻣﻲ ﺍﻟﻤﺎﻥ ﻫﺎﺋﻲ ﻛﻪ ﺩﺭﻭﻥ ﺗﮕﻬﺎﻱ > <spanﻭ > </spanﻗﺮﺍﺭ ﺧﻮﺍﻫﻨﺪ
43 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
.(dir)( ﻭ ﻳﺎ ﺳﻤﺖ ﻭ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥStyle) ﺧﻮﺍﺻﻲ ﺍﺯ ﻗﺒﻴﻞ ﺍﺳﺘﻴﻞ،ﮔﺮﻓﺖ ﺧﻮﺍﺹ ﺁﻧﺮﺍ ﺑﻪ ﺍﺭﺙ ﺧﻮﺍﻫﻨﺪ ﺑﺮﺩ
.< ﺍﺿﺎﻓﻪ ﻧﻤﻲ ﻛﻨﻨﺪspan> < ﻣﺮﻭﺭﮔﺮﻫﺎ ﻫﻴﭻ ﺳﻄﺮ ﺟﺪﻳﺪﻱ ﺑﻪ ﺍﻭﻝ ﻳﺎ ﺁﺧﺮ ﺍﻟﻤﺎﻥdiv> < ﻭp> ﺑﺮ ﺧﻼﻑ ﺗﮓ ﻫﺎﻱ
:ﻣﺜﺎﻝ
ﻛﺪ ﺍﭼﺘﻤﻞ ﻧﻤﺎﻳﺶ ﻛﺪ ﺭﻭﺑﺮﻭ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ
<p>Some text <span style="color:#0000AF;">another text</span> Some text another text
again text...</p> again text...
id, class, title, style, dir, lang span ﺷﻨﺎﺳﻪ ﻫﺎﻱ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺍﻟﻤﺎﻥ
: ﻫﺎStyle sheet ﻭspan ﻣﺜﺎﻟﻬﺎﺋﻲ ﺍﺯ ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﻟﻤﺎﻥ
ﺭﻭﺵ ﻗﺪﻳﻤﻲ ﺭﻭﺵ ﺻﺤﻴﺢ
<font color="#FF00FF">Hello!</font> <span style="color:#FF00FF">Hello!</span>
<font
<span style="color:rgb(255,0,255)">Hello!</span>
color="rgb(255,0,255)">Hello!</font>
<font style="color:Fuchsia">Hello!</font> <span style="color:Fuchsia">Hello!</span>
<font color="#FF00FF" <span style="color:#FF00FF;font-
size="3">Hello!</font> size:100%">Hello!</span>
<div> ﺗﮓ
< ﻗﺮﺍﺭ ﺧﻮﺍﻫﻨﺪ ﮔﺮﻓﺖ/div> < ﻭdiv> ﺗﻤﺎﻣﻲ ﺍﻟﻤﺎﻥ ﻫﺎﺋﻲ ﻛﻪ ﺩﺭﻭﻥ ﺗﮕﻬﺎﻱ.< ﺳﺒﺐ ﺗﻌﺮﻳﻒ ﻣﺤﺪﻭﺩﻩ ﻭ ﮔﺴﺘﺮﻩ ﺍﻱ ﻣﺸﺨﺺ ﻣﻴﺸﻮﺩdiv> ﺗﮓ
.(dir)( ﻭ ﻳﺎ ﺳﻤﺖ ﻭ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥStyle) ﺧﻮﺍﺻﻲ ﺍﺯ ﻗﺒﻴﻞ ﺍﺳﺘﻴﻞ،ﺧﻮﺍﺹ ﺁﻧﺮﺍ ﺑﻪ ﺍﺭﺙ ﺧﻮﺍﻫﻨﺪ ﺑﺮﺩ
.< ﺍﺿﺎﻓﻪ ﻣﻲ ﻛﻨﻨﺪdiv> < ﻣﺮﻭﺭﮔﺮﻫﺎ ﻳﻚ ﺳﻄﺮ ﺟﺪﻳﺪ ﺑﻪ ﺍﻭﻝ ﻭ ﺁﺧﺮ ﺍﻟﻤﺎﻥspan> ﺑﺮ ﺧﻼﻑ ﺗﮓ
:ﻣﺜﺎﻝ
ﻧﻤﺎﻳﺶ ﻛﺪ ﺭﻭﺑﺮﻭ ﺗﻮﺳﻂ
ﻛﺪ ﺍﭼﺘﻤﻞ
ﻣﺮﻭﺭﮔﺮ
Some text
<p>Some text <div style="color:#0000AF;">another text</div> again
text...</p> another text
again text...
id, class, title, style, dir, lang div ﺷﻨﺎﺳﻪ ﻫﺎﻱ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺍﻟﻤﺎﻥ
ﺗﻌﻴﻴﻦ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ
ﻭ ﺍﻋﻤﺎﻝ "ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ" ﺑﻪ ﺑﺨﺸﻲ ﺍﺯ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞdiv ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﮓ
Start Tag Purpose ﻛﺎﺭﺑﺮﺩ
<div> Defines a division/section in a document ﺗﻌﺮﻳﻒ ﺑﺨﺶ ﻭ ﻧﺎﺣﻴﻪ ﺍﻱ ﺍﺯ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ
44 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
><span Defines a section in a document ﺗﻌﺮﻳﻒ ﺑﺨﺶ ﻭ ﻧﺎﺣﻴﻪ ﺍﻱ ﺍﺯ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ
ﻣﺮﺟﻊ - HTML 4.01 Specification :ﻓﻬﺮﺳﺖ ﻋﻨﺎﺻﺮ -ﻓﻬﺮﺳﺖ ﺷﻨﺎﺳﻪ ﻫﺎ
ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ) ( Style Sheets
ﺩﺭ ﻧﺴﺨﻪ ﺟﺪﻳﺪ) (4/0ﺍﭼﺘﻤﻞ ﺍﻣﻜﺎﻥ ﺟﺪﺍﺳﺎﺯﻱ ﻛﺎﻣﻞ ﻓﺮﻣﺖ ﺩﻫﻲ ﺍﺯ ﺳﺎﺧﺘﺎﺭ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﻓﺮﺍﻫﻢ ﺷﺪﻩ ﺍﺳﺖ .ﺩﺭ ﺍﻳﻦ ﻧﺴﺨﻪ ﺗﻮﺻﻴﻪ ﻣﻴﺸﻮﺩ ﻛﻪ
ﺗﻤﺎﻣﻲ ﺍﻃﻼﻋﺎﺕ ﻣﺮﺑﻮﻁ ﺑﻪ ﻧﻤﺎﻳﺶ ﻭ ﺗﺮﺍﺯﺑﻨﺪﻱ ﺑﻪ ﻓﺎﻳﻠﻬﺎﺋﻲ ﻣﺠﺰﺍ ﺍﺯ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﻣﻨﺘﻘﻞ ﺷﻮﻧﺪ .ﺑﺨﺸﻲ ﺍﺯ ﺻﻘﺤﺎﺕ ﺍﭼﺘﻤﻞ ﻛﻪ ﻣﺮﺑﻮﻁ ﺑﻪ ﻧﻤﺎﻳﺶ،
ﺗﺮﺍﺯﺑﻨﺪﻱ ﻭ ﻓﺮﻣﺖ ﺩﻫﻲ ﺍﺳﺖ ،ﺍﺳﺘﺎﻳﻞ ﺷﻴﺖ ﻳﺎ " "Style Sheetﻧﺎﻣﻴﺪ ﺷﺪﻩ ﻭ ﻣﻌﻤﻮﻻ ﺑﻪ ﺻﻮﺭﺕ ﻓﺎﻳﻠﻲ ﻣﺠﺰﺍ ﺩﺭﻭﻥ ﺑﺨﺶ > <headﺻﻔﺤﺎﺕ
ﺍﭼﺘﻤﻞ ﻣﻌﺮﻓﻲ ﻣﻴﮕﺮﺩﻧﺪ .ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﻪ ﺻﻮﺭﺕ ﺑﺴﻴﺎﺭ ﺧﻼﺻﻪ ﺑﺎ ﺭﻭﺷﻬﺎﻱ ﻣﺨﺘﻠﻒ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺩﺭ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ.
ﺩﺭﺱ ﻗﺒﻠﻲ ،ﻣﺜﺎﻟﻬﺎﻱ ﺍﭼﺘﻤﻞ
ﻣﺜﺎﻟﻬﺎ
ﺍﺳﺘﻴﻠﻬﺎ ﺩﺭ ﺍﭼﺘﻤﻞ
ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺗﻌﺮﻳﻒ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺩﺭﻭﻥ ﺑﺨﺶ > <headﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺷﺮﺡ ﺩﺍﺩﻩ ﺷﺪﻩ ﺍﺳﺖ(Internal Style Sheet) .
ﭘﻴﻮﻧﺪﻱ ﺑﺪﻭﻥ ﺧﻂ ﺍﻓﻘﻲ ﺯﻳﺮﻱ
ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪﻱ ﺑﺪﻭﻥ "ﺧﻂ ﺍﻓﻘﻲ ﺯﻳﺮﻱ" ﺷﺮﺡ ﺩﺍﺩﻩ ﺷﺪﻩ ﺍﺳﺖ(Inline Styles) .
ﺍﺗﺼﺎﻝ ﺑﻪ ﻓﺎﻳﻠﻬﺎﻱ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺖ ﺧﺎﺭﺟﻲ
ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﮓ > <linkﺟﻬﺖ ﺍﺗﺼﺎﻝ ﺑﻪ ﻓﺎﻳﻠﻬﺎﻱ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺖ ﺧﺎﺭﺟﻲ ﺷﺮﺡ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ(External Style Sheet) .
ﭼﮕﻮﻧﮕﻲ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ:
ﻣﺮﻭﺭﮔﺮﻫﺎ ﺍﺯ ﺭﻭﻱ ﺍﺳﺘﻴﻠﻬﺎﻱ ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﺗﻮﺳﻂ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺑﻪ ﻓﺮﻣﺖ ﺩﻫﻲ ﻭ ﻧﻤﺎﻳﺶ ﺍﻃﻼﻋﺎﺕ ﺩﺭﻭﻥ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﻣﻴﭙﺮﺩﺍﺯﻧﺪ .ﺗﻌﺮﻳﻒ ﻭ ﺍﺳﺘﻔﺎﺩﻩ
ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﻫﺎ ﺩﺭ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺑﻪ ﺳﻪ ﺭﻭﺵ ﻣﺨﺘﻠﻒ ﻣﻤﻜﻦ ﻣﻴﺒﺎﺷﺪ:
(1ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎﻱ ﺧﺎﺭﺟﻲ ): (external style sheet
ﺩﺭ ﺍﻳﻦ ﺭﻭﺵ ﺗﻤﺎﻣﻲ ﺍﺳﺘﻴﻠﻬﺎ ﻭ ﺗﻌﺎﺭﻳﻒ ﻧﻤﺎﻳﺸﻲ ﺩﺭﻭﻥ ﻓﺎﻳﻠﻲ ﺟﺪﺍﮔﺎﻧﻪ ﻗﺮﺍﺭ ﮔﺮﻓﺘﻪ ﻭ ﺑﺴﻴﺎﺭ ﻣﻨﺎﺳﺐ ﺣﺎﻟﺘﻬﺎﺋﻲ ﺍﺳﺖ ﻛﻪ ﻗﺮﺍﺭ ﺍﺳﺖ ﻛﻪ ﺍﺳﺘﺎﻳﻠﻲ ﺑﻪ ﺑﻴﺶ ﺍﺯ
ﻳﻚ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﺍﻋﻤﺎﻝ ﺷﻮﺩ .ﻣﺰﻳﺖ ﺍﻳﻦ ﺭﻭﺵ ﺳﻬﻮﻟﺖ ﺩﺭ ﺗﻐﻴﻴﺮ ﻇﺎﻫﺮ ﺻﻔﺤﺎﺕ ﻳﻚ ﻭﺏ ﺳﺎﻳﺖ ﻣﻴﺒﺎﺷﺪ ﻭ ﺑﺮﺍﻱ ﻳﻚ ﺗﻐﻴﻴﺮ ﻛﻠﻲ ﺩﺭ ﺳﺎﻳﺖ ﻛﺎﻓﻲ
ﺍﺳﺖ ﻛﻪ ﻓﺎﻳﻞ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺖ ﻛﻞ ﺳﺎﻳﺖ ﻛﻪ ﻣﻌﻤﻮﻻ ﻳﻚ ﻓﺎﻳﻞ ﻭﺍﺣﺪ ﺍﺳﺖ ﺗﻐﻴﻴﺮ ﺩﺍﺩﻩ ﺷﻮﺩ) .ﺑﺎﻳﺪ ﺗﻮﺟﻪ ﺩﺍﺷﺖ ﻛﻪ ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﺗﻤﺎﻣﻲ ﺻﻔﺤﺎﺕ ﺳﺎﻳﺖ
ﺑﺎﻳﺪ ﺑﻪ ﻳﻚ ﻓﺎﻳﻞ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺖ ﻭﺍﺣﺪ ﻟﻴﻨﻚ ﺷﺪﻩ ﺑﺎﺷﻨﺪ (.ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎﻱ ﺧﺎﺭﺟﻲ ﺗﻮﺳﻂ ﺗﮓ > <linkﻛﻪ ﺩﺭﻭﻥ ﺑﺨﺶ headﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ
ﻗﺮﺍﺭ ﻣﻴﮕﻴﺮﺩ ،ﻣﻌﺮﻓﻲ ﻣﻴﺸﻮﻧﺪ.
ﺩﺭ ﻣﺜﺎﻝ ﺯﻳﺮ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ hrefﺍﺯ ﺗﮓ linkﻧﺎﻡ ﻭ ﺩﺭ ﺣﺎﻟﺖ ﻛﻠﻲ urlﻓﺎﻳﻞ ﺩﺭ ﺑﺮﮔﻴﺮﻧﺪﻩ ﺍﺳﺘﺎﻳﻠﻬﺎﻱ ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﺗﻌﻴﻴﻦ ﻣﻴﮕﺮﺩﺩ:
45 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
><head
>"<link rel="stylesheet" type="text/css" href="mystyle.css
></head
(2ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎﻱ ﺩﺍﺧﻠﻲ ): (Internal Style Sheet
ﻛﺎﺭﺑﺮﺩ ﺍﻳﻦ ﺭﻭﺵ ﺩﺭ ﺣﺎﻟﺘﻬﺎﺋﻲ ﺍﺳﺖ ﻛﻪ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﻧﻴﺎﺯﻣﻨﺪ ﺗﻌﺮﻳﻒ ﺍﺳﺘﺎﻳﻠﻲ ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮﺩ ﻭ ﻣﺠﺰﺍ ﺑﻮﺩﻩ ﻭ ﺍﺳﺘﺎﻳﻞ ﻃﺮﺍﺣﻲ ﺷﺪﻩ ﻓﻘﻂ ﺑﺪﺭﺩ ﺁﻥ
ﺻﻔﺤﻪ ﺧﻮﺍﻫﺪ ﺧﻮﺭﺩ .ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﺑﺎﻳﺪ ﻛﺪﻫﺎﻱ ﺣﺎﻭﻱ ﺗﻌﺮﻳﻒ ﺍﺳﺘﺎﻳﻞ ﺩﺭﻭﻥ ﺗﮓ ﻫﺎﻱ > <styleﻭ > </styleﻗﺮﺍﺭ ﮔﺮﻓﺘﻪ ﻭ ﻣﻌﻤﻮﻻ ﻧﺘﻴﺠﻪ ﺩﺭﻭﻥ
ﺑﺨﺶ headﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﮔﺬﺍﺷﺘﻪ ﻣﻴﺸﻮﺩ .ﻣﺜﺎﻝ:
><head
>"<style type="text/css
}body {background-color: red
}p {margin-left: 20px
></style
></head
(3ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎﻱ ﺩﺭﺟﺎ ): (Inline Styles
ﻛﺎﺭﺑﺮﺩ ﺍﻳﻦ ﺭﻭﺵ ﺩﺭ ﻣﻮﺍﺭﺩﻱ ﺍﺳﺖ ﻛﻪ ﺑﺎﻳﺪ ﺑﺮﺍﻱ ﻳﻚ ﺍﻟﻤﺎﻥ )ﻳﺎ ﮔﺮﻭﻫﻲ( ﺧﺎﺹ ﺍﺳﺘﺎﻳﻠﻲ ﺍﻋﻤﺎﻝ ﺷﻮﺩ .ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﺑﺎﻳﺪ ﺍﺯ ﺷﻨﺎﺳﻪ ﺍﻱ ﺑﻪ ﻧﺎﻡ style
ﻛﻪ ﺗﻘﺮﻳﺒﺎ ﺩﺭ ﺗﻤﺎﻣﻲ ﺗﮕﻬﺎ ﻗﺎﺑﻞ ﺍﻋﻤﺎﻝ ﺍﺳﺖ ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ .ﻣﺜﺎﻝ:
>"<p style="color: red; margin-left: 20px
This is a paragraph
></p
ﺗﮓ ﻫﺎﻱ ﺍﺳﺘﺎﻳﻞ
Start Tag Purpose ﻛﺎﺭﺑﺮﺩ
><style Defines a style in a document ﺗﻌﺮﻳﻒ ﺍﺳﺘﻴﻠﻬﺎ ﺩﺭﻭﻥ ﻳﻚ ﺳﻨﺪ
><link
Defines the relationship between two linked ﺗﻌﻴﻴﻦ ﻭ ﺗﻌﺮﻳﻒ ﻓﺎﻳﻞ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺖ ﺧﺎﺭﺟﻲ
documents
ﻛﻨﺎﺭ ﮔﺬﺍﺷﺘﻪ ﺷﺪﻩ.ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺍﺳﺘﻔﺎﺩﻩ
><font Deprecated. Use styles instead
ﺷﻮﺩ.
ﻛﻨﺎﺭ ﮔﺬﺍﺷﺘﻪ ﺷﺪﻩ.ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺍﺳﺘﻔﺎﺩﻩ
<basefont>Deprecated. Use styles instead
ﺷﻮﺩ.
ﻛﻨﺎﺭ ﮔﺬﺍﺷﺘﻪ ﺷﺪﻩ.ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺍﺳﺘﻔﺎﺩﻩ
<center> Deprecated. Use styles instead
ﺷﻮﺩ.
ﻣﺮﺟﻊ - HTML 4.01 Specification :ﻓﻬﺮﺳﺖ ﻋﻨﺎﺻﺮ -ﻓﻬﺮﺳﺖ ﺷﻨﺎﺳﻪ ﻫﺎ
46 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﺗﻐﻴﻴﺮﺍﺕ ﺩﺭ ﻧﺴﺨﻪ ﺟﺪﻳﺪ ﺍﭼﺘﻤﻞ ): (4/0
ﻫﺪﻑ ﺍﻭﻟﻴﻪ ﺍﺯ ﻃﺮﺍﺣﻲ ﺯﺑﺎﻥ ﺍﭼﺘﻤﻞ ﺍﻳﺠﺎﺩ ﺯﺑﺎﻧﻲ ﺑﺮﺍﻱ ﺗﻌﺮﻳﻒ ﺍﻃﻼﻋﺎﺕ ﻣﺤﺾ ﺑﺪﻭﻥ ﺩﺭ ﺑﺮﺩﺍﺷﺘﻦ ﺟﺰﺋﻴﺎﺕ ﻣﺮﺑﻮﻁ ﺑﻪ ﻇﺎﻫﺮ ﻭ ﻧﻤﺎﻳﺶ ﺑﻮﺩ ﻭﻟﻲ ﺑﺎ ﺍﻳﺠﺎﺩ
ﻧﺴﺨﻪ 3/2ﺯﺑﺎﻥ ﺍﭼﺘﻤﻞ ﻭ ﺍﺿﺎﻓﻪ ﺷﺪﻥ ﺗﮕﻬﺎﻱ ﻓﺮﻣﺖ ﺩﻫﻲ ﻣﺎﻧﻨﺪ > <fontﻭ ﻳﺎ ﺷﻨﺎﺳﻪ ﻫﺎﺋﻲ ﻣﺎﻧﻨﺪ colorﻭ Alignﻣﺤﺘﻮﺍ ﻭ ﻧﻤﺎﻳﺶ ﺩﺭ
ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺍﺩﻏﺎﻡ ﮔﺮﺩﻳﺪﻩ ﻭ ﻫﻤﻴﻦ ﺍﻣﺮ ﺳﺒﺐ ﺑﺮﻭﺯ ﻣﺸﻜﻼﺕ ﻋﺪﻳﺪﻩ ﺍﻱ ﺑﺮﺍﻱ ﻃﺮﺍﺣﺎﻥ ﻭ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﺎﻥ ﻭﺏ ﮔﺮﺩﻳﺪ .ﺑﺮﺍﻱ ﺭﻓﻊ ﺍﻳﻦ ﻣﺸﻜﻞ ﺩﺭ
ﻧﺴﺨﻪ 4/0ﺍﭼﺘﻤﻞ ﺗﻮﺻﻴﻪ ﺑﺮ ﺟﺪﺍﺳﺎﺯﻱ ﻛﺎﻣﻞ ﺍﻳﻦ ﺩﻭ ﮔﺮﻭﻩ ﺍﺯ ﺍﻃﻼﻋﺎﺕ ﺑﻮﺩﻩ ﻭ ﺩﺭ ﻧﺴﺨﻪ ﻫﺎﻱ ﺁﻳﻨﺪﻩ ﺍﭼﺘﻤﻞ ﺍﻳﻦ ﺟﺪﺍﺳﺎﺯﻱ ﺍﺟﺒﺎﺭﻱ ﺧﻮﺍﻫﺪ ﮔﺮﺩﻳﺪ ﻭ
ﺗﻮﺻﻴﻪ ﻣﺪﺭﺳﻪ ﻭﺏ ﻧﻴﺰ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺑﺮﺍﻱ ﻫﺮ ﻧﻮﻉ ﺗﻌﺮﻳﻒ ﻓﺮﻣﺖ ﻭ ﺗﺮﺍﺯﺑﻨﺪﻱ ﻣﻴﺒﺎﺷﺪ .ﺑﺮﺍﻱ ﻣﺜﺎﻝ ﺩﺭ ﻛﺪ ﺍﭼﺘﻤﻞ ﺯﻳﺮ ﻛﻪ ﺑﺮ ﺍﺳﺎﺱ ﻧﺴﺨﻪ
3/2ﺍﭼﺘﻤﻞ ﻣﻴﺒﺎﺷﺪ ،ﺳﺎﺧﺘﺎﺭ ﻭ ﻣﺤﺘﻮﺍ )ﺗﮕﻲ ﺍﺯ ﻧﻮﻉ ﭘﺎﺭﺍﮔﺮﺍﻑ ﺑﺎ ﻣﺤﺘﻮﺍﻱ " ("This is a paragraphﺑﺎ ﺍﻃﻼﻋﺎﺕ ﻧﻤﺎﻳﺶ ﻳﻌﻨﻲ ﺭﻧﮓ ﻭ
ﺗﺮﺍﺯﺑﻨﺪﻱ )ﺭﻧﻚ ﻗﺮﻣﺰ ﻣﺘﻦ ﻭ ﺗﺮﺍﺯﺑﻨﺪﻱ ﺩﺭ ﻭﺳﻂ ﺻﻔﺤﻪ( ﻫﻤﺰﻣﺎﻥ ﻭ ﺩﺭ ﻛﻨﺎﺭ ﻫﻢ ﺁﻭﺭﺩﻩ ﺷﺪﻩ ﺍﻧﺪ ﻭ ﺍﻳﻦ ﺍﺩﻏﺎﻡ ﺍﻣﻜﺎﻥ ﺗﻐﻴﻴﺮ ﻭ ﺗﻮﺳﻌﻪ ﻛﺪ ﺭﺍ ﺑﺴﻴﺎﺭ ﻣﺤﺪﻭﺩ
ﺧﻮﺍﻫﺪ ﻛﺮﺩ:
><p align="center"><font color="red">This is a paragraph</font></p
ﻛﺪ ﻣﻌﺎﺩﻝ ﻣﺜﺎﻝ ﻓﻮﻕ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﺷﺮﺡ ﺩﺍﺩﻩ ﺷﺪﻩ ﺍﺳﺖ).ﻫﺮ ﭼﻨﺪ ﻛﻪ ﺍﻳﻦ ﻣﺜﺎﻝ ﺍﺯ ﺗﻤﺎﻣﻲ ﺍﻣﻜﺎﻧﺎﺕ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﻭ ﺍﻳﺠﺎﺩ
ﻓﺎﻳﻠﻲ ﻛﺎﻣﻼ ﻣﺴﺘﻘﻞ ﺑﺮﺍﻱ ﺗﻌﺮﻳﻒ ﺍﺳﺘﺎﻳﻞ ﺍﺳﺘﻔﺎﺩﻩ ﻧﻜﺮﺩﻩ ﺍﺳﺖ(.
ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ) ( Style Sheets
ﺩﺭ ﻧﺴﺨﻪ ﺟﺪﻳﺪ) (4/0ﺍﭼﺘﻤﻞ ﺍﻣﻜﺎﻥ ﺟﺪﺍﺳﺎﺯﻱ ﻛﺎﻣﻞ ﻓﺮﻣﺖ ﺩﻫﻲ ﺍﺯ ﺳﺎﺧﺘﺎﺭ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﻓﺮﺍﻫﻢ ﺷﺪﻩ ﺍﺳﺖ .ﺩﺭ ﺍﻳﻦ ﻧﺴﺨﻪ ﺗﻮﺻﻴﻪ ﻣﻴﺸﻮﺩ ﻛﻪ
ﺗﻤﺎﻣﻲ ﺍﻃﻼﻋﺎﺕ ﻣﺮﺑﻮﻁ ﺑﻪ ﻧﻤﺎﻳﺶ ﻭ ﺗﺮﺍﺯﺑﻨﺪﻱ ﺑﻪ ﻓﺎﻳﻠﻬﺎﺋﻲ ﻣﺠﺰﺍ ﺍﺯ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﻣﻨﺘﻘﻞ ﺷﻮﻧﺪ .ﺑﺨﺸﻲ ﺍﺯ ﺻﻘﺤﺎﺕ ﺍﭼﺘﻤﻞ ﻛﻪ ﻣﺮﺑﻮﻁ ﺑﻪ ﻧﻤﺎﻳﺶ،
ﺗﺮﺍﺯﺑﻨﺪﻱ ﻭ ﻓﺮﻣﺖ ﺩﻫﻲ ﺍﺳﺖ ،ﺍﺳﺘﺎﻳﻞ ﺷﻴﺖ ﻳﺎ " "Style Sheetﻧﺎﻣﻴﺪ ﺷﺪﻩ ﻭ ﻣﻌﻤﻮﻻ ﺑﻪ ﺻﻮﺭﺕ ﻓﺎﻳﻠﻲ ﻣﺠﺰﺍ ﺩﺭﻭﻥ ﺑﺨﺶ > <headﺻﻔﺤﺎﺕ
ﺍﭼﺘﻤﻞ ﻣﻌﺮﻓﻲ ﻣﻴﮕﺮﺩﻧﺪ .ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﻪ ﺻﻮﺭﺕ ﺑﺴﻴﺎﺭ ﺧﻼﺻﻪ ﺑﺎ ﺭﻭﺷﻬﺎﻱ ﻣﺨﺘﻠﻒ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺩﺭ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ.
ﻣﺜﺎﻟﻬﺎ
ﺍﺳﺘﻴﻠﻬﺎ ﺩﺭ ﺍﭼﺘﻤﻞ
ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺗﻌﺮﻳﻒ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺩﺭﻭﻥ ﺑﺨﺶ > <headﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺷﺮﺡ ﺩﺍﺩﻩ ﺷﺪﻩ ﺍﺳﺖ(Internal Style Sheet) .
ﭘﻴﻮﻧﺪﻱ ﺑﺪﻭﻥ ﺧﻂ ﺍﻓﻘﻲ ﺯﻳﺮﻱ
ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪﻱ ﺑﺪﻭﻥ "ﺧﻂ ﺍﻓﻘﻲ ﺯﻳﺮﻱ" ﺷﺮﺡ ﺩﺍﺩﻩ ﺷﺪﻩ ﺍﺳﺖ(Inline Styles) .
ﺍﺗﺼﺎﻝ ﺑﻪ ﻓﺎﻳﻠﻬﺎﻱ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺖ ﺧﺎﺭﺟﻲ
ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﮓ > <linkﺟﻬﺖ ﺍﺗﺼﺎﻝ ﺑﻪ ﻓﺎﻳﻠﻬﺎﻱ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺖ ﺧﺎﺭﺟﻲ ﺷﺮﺡ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ(External Style Sheet) .
ﭼﮕﻮﻧﮕﻲ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ:
47 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻣﺮﻭﺭﮔﺮﻫﺎ ﺍﺯ ﺭﻭﻱ ﺍﺳﺘﻴﻠﻬﺎﻱ ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﺗﻮﺳﻂ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺑﻪ ﻓﺮﻣﺖ ﺩﻫﻲ ﻭ ﻧﻤﺎﻳﺶ ﺍﻃﻼﻋﺎﺕ ﺩﺭﻭﻥ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﻣﻴﭙﺮﺩﺍﺯﻧﺪ .ﺗﻌﺮﻳﻒ ﻭ ﺍﺳﺘﻔﺎﺩﻩ
ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﻫﺎ ﺩﺭ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺑﻪ ﺳﻪ ﺭﻭﺵ ﻣﺨﺘﻠﻒ ﻣﻤﻜﻦ ﻣﻴﺒﺎﺷﺪ:
(1ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎﻱ ﺧﺎﺭﺟﻲ ): (external style sheet
ﺩﺭ ﺍﻳﻦ ﺭﻭﺵ ﺗﻤﺎﻣﻲ ﺍﺳﺘﻴﻠﻬﺎ ﻭ ﺗﻌﺎﺭﻳﻒ ﻧﻤﺎﻳﺸﻲ ﺩﺭﻭﻥ ﻓﺎﻳﻠﻲ ﺟﺪﺍﮔﺎﻧﻪ ﻗﺮﺍﺭ ﮔﺮﻓﺘﻪ ﻭ ﺑﺴﻴﺎﺭ ﻣﻨﺎﺳﺐ ﺣﺎﻟﺘﻬﺎﺋﻲ ﺍﺳﺖ ﻛﻪ ﻗﺮﺍﺭ ﺍﺳﺖ ﻛﻪ ﺍﺳﺘﺎﻳﻠﻲ ﺑﻪ ﺑﻴﺶ ﺍﺯ
ﻳﻚ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﺍﻋﻤﺎﻝ ﺷﻮﺩ .ﻣﺰﻳﺖ ﺍﻳﻦ ﺭﻭﺵ ﺳﻬﻮﻟﺖ ﺩﺭ ﺗﻐﻴﻴﺮ ﻇﺎﻫﺮ ﺻﻔﺤﺎﺕ ﻳﻚ ﻭﺏ ﺳﺎﻳﺖ ﻣﻴﺒﺎﺷﺪ ﻭ ﺑﺮﺍﻱ ﻳﻚ ﺗﻐﻴﻴﺮ ﻛﻠﻲ ﺩﺭ ﺳﺎﻳﺖ ﻛﺎﻓﻲ
ﺍﺳﺖ ﻛﻪ ﻓﺎﻳﻞ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺖ ﻛﻞ ﺳﺎﻳﺖ ﻛﻪ ﻣﻌﻤﻮﻻ ﻳﻚ ﻓﺎﻳﻞ ﻭﺍﺣﺪ ﺍﺳﺖ ﺗﻐﻴﻴﺮ ﺩﺍﺩﻩ ﺷﻮﺩ) .ﺑﺎﻳﺪ ﺗﻮﺟﻪ ﺩﺍﺷﺖ ﻛﻪ ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﺗﻤﺎﻣﻲ ﺻﻔﺤﺎﺕ ﺳﺎﻳﺖ
ﺑﺎﻳﺪ ﺑﻪ ﻳﻚ ﻓﺎﻳﻞ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺖ ﻭﺍﺣﺪ ﻟﻴﻨﻚ ﺷﺪﻩ ﺑﺎﺷﻨﺪ (.ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎﻱ ﺧﺎﺭﺟﻲ ﺗﻮﺳﻂ ﺗﮓ > <linkﻛﻪ ﺩﺭﻭﻥ ﺑﺨﺶ headﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ
ﻗﺮﺍﺭ ﻣﻴﮕﻴﺮﺩ ،ﻣﻌﺮﻓﻲ ﻣﻴﺸﻮﻧﺪ.
ﺩﺭ ﻣﺜﺎﻝ ﺯﻳﺮ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ hrefﺍﺯ ﺗﮓ linkﻧﺎﻡ ﻭ ﺩﺭ ﺣﺎﻟﺖ ﻛﻠﻲ urlﻓﺎﻳﻞ ﺩﺭ ﺑﺮﮔﻴﺮﻧﺪﻩ ﺍﺳﺘﺎﻳﻠﻬﺎﻱ ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﺗﻌﻴﻴﻦ ﻣﻴﮕﺮﺩﺩ:
><head
>"<link rel="stylesheet" type="text/css" href="mystyle.css
></head
(2ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎﻱ ﺩﺍﺧﻠﻲ ): (Internal Style Sheet
ﻛﺎﺭﺑﺮﺩ ﺍﻳﻦ ﺭﻭﺵ ﺩﺭ ﺣﺎﻟﺘﻬﺎﺋﻲ ﺍﺳﺖ ﻛﻪ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﻧﻴﺎﺯﻣﻨﺪ ﺗﻌﺮﻳﻒ ﺍﺳﺘﺎﻳﻠﻲ ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮﺩ ﻭ ﻣﺠﺰﺍ ﺑﻮﺩﻩ ﻭ ﺍﺳﺘﺎﻳﻞ ﻃﺮﺍﺣﻲ ﺷﺪﻩ ﻓﻘﻂ ﺑﺪﺭﺩ ﺁﻥ
ﺻﻔﺤﻪ ﺧﻮﺍﻫﺪ ﺧﻮﺭﺩ .ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﺑﺎﻳﺪ ﻛﺪﻫﺎﻱ ﺣﺎﻭﻱ ﺗﻌﺮﻳﻒ ﺍﺳﺘﺎﻳﻞ ﺩﺭﻭﻥ ﺗﮓ ﻫﺎﻱ > <styleﻭ > </styleﻗﺮﺍﺭ ﮔﺮﻓﺘﻪ ﻭ ﻣﻌﻤﻮﻻ ﻧﺘﻴﺠﻪ ﺩﺭﻭﻥ
ﺑﺨﺶ headﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﮔﺬﺍﺷﺘﻪ ﻣﻴﺸﻮﺩ .ﻣﺜﺎﻝ:
><head
>"<style type="text/css
}body {background-color: red
}p {margin-left: 20px
></style
></head
(3ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎﻱ ﺩﺭﺟﺎ ): (Inline Styles
ﻛﺎﺭﺑﺮﺩ ﺍﻳﻦ ﺭﻭﺵ ﺩﺭ ﻣﻮﺍﺭﺩﻱ ﺍﺳﺖ ﻛﻪ ﺑﺎﻳﺪ ﺑﺮﺍﻱ ﻳﻚ ﺍﻟﻤﺎﻥ )ﻳﺎ ﮔﺮﻭﻫﻲ( ﺧﺎﺹ ﺍﺳﺘﺎﻳﻠﻲ ﺍﻋﻤﺎﻝ ﺷﻮﺩ .ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﺑﺎﻳﺪ ﺍﺯ ﺷﻨﺎﺳﻪ ﺍﻱ ﺑﻪ ﻧﺎﻡ style
ﻛﻪ ﺗﻘﺮﻳﺒﺎ ﺩﺭ ﺗﻤﺎﻣﻲ ﺗﮕﻬﺎ ﻗﺎﺑﻞ ﺍﻋﻤﺎﻝ ﺍﺳﺖ ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ .ﻣﺜﺎﻝ:
>"<p style="color: red; margin-left: 20px
This is a paragraph
></p
ﺗﮓ ﻫﺎﻱ ﺍﺳﺘﺎﻳﻞ
Start Tag Purpose ﻛﺎﺭﺑﺮﺩ
48 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
><style Defines a style in a document ﺗﻌﺮﻳﻒ ﺍﺳﺘﻴﻠﻬﺎ ﺩﺭﻭﻥ ﻳﻚ ﺳﻨﺪ
><link
Defines the relationship between two linked ﺗﻌﻴﻴﻦ ﻭ ﺗﻌﺮﻳﻒ ﻓﺎﻳﻞ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺖ ﺧﺎﺭﺟﻲ
documents
ﻛﻨﺎﺭ ﮔﺬﺍﺷﺘﻪ ﺷﺪﻩ.ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺍﺳﺘﻔﺎﺩﻩ
><font Deprecated. Use styles instead
ﺷﻮﺩ.
ﻛﻨﺎﺭ ﮔﺬﺍﺷﺘﻪ ﺷﺪﻩ.ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺍﺳﺘﻔﺎﺩﻩ
<basefont>Deprecated. Use styles instead
ﺷﻮﺩ.
ﻛﻨﺎﺭ ﮔﺬﺍﺷﺘﻪ ﺷﺪﻩ.ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺍﺳﺘﻔﺎﺩﻩ
<center> Deprecated. Use styles instead
ﺷﻮﺩ.
ﻣﺮﺟﻊ - HTML 4.01 Specification :ﻓﻬﺮﺳﺖ ﻋﻨﺎﺻﺮ -ﻓﻬﺮﺳﺖ ﺷﻨﺎﺳﻪ ﻫﺎ
ﺗﻐﻴﻴﺮﺍﺕ ﺩﺭ ﻧﺴﺨﻪ ﺟﺪﻳﺪ ﺍﭼﺘﻤﻞ ): (4/0
ﻫﺪﻑ ﺍﻭﻟﻴﻪ ﺍﺯ ﻃﺮﺍﺣﻲ ﺯﺑﺎﻥ ﺍﭼﺘﻤﻞ ﺍﻳﺠﺎﺩ ﺯﺑﺎﻧﻲ ﺑﺮﺍﻱ ﺗﻌﺮﻳﻒ ﺍﻃﻼﻋﺎﺕ ﻣﺤﺾ ﺑﺪﻭﻥ ﺩﺭ ﺑﺮﺩﺍﺷﺘﻦ ﺟﺰﺋﻴﺎﺕ ﻣﺮﺑﻮﻁ ﺑﻪ ﻇﺎﻫﺮ ﻭ ﻧﻤﺎﻳﺶ ﺑﻮﺩ ﻭﻟﻲ ﺑﺎ ﺍﻳﺠﺎﺩ
ﻧﺴﺨﻪ 3/2ﺯﺑﺎﻥ ﺍﭼﺘﻤﻞ ﻭ ﺍﺿﺎﻓﻪ ﺷﺪﻥ ﺗﮕﻬﺎﻱ ﻓﺮﻣﺖ ﺩﻫﻲ ﻣﺎﻧﻨﺪ > <fontﻭ ﻳﺎ ﺷﻨﺎﺳﻪ ﻫﺎﺋﻲ ﻣﺎﻧﻨﺪ colorﻭ Alignﻣﺤﺘﻮﺍ ﻭ ﻧﻤﺎﻳﺶ ﺩﺭ
ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺍﺩﻏﺎﻡ ﮔﺮﺩﻳﺪﻩ ﻭ ﻫﻤﻴﻦ ﺍﻣﺮ ﺳﺒﺐ ﺑﺮﻭﺯ ﻣﺸﻜﻼﺕ ﻋﺪﻳﺪﻩ ﺍﻱ ﺑﺮﺍﻱ ﻃﺮﺍﺣﺎﻥ ﻭ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﺎﻥ ﻭﺏ ﮔﺮﺩﻳﺪ .ﺑﺮﺍﻱ ﺭﻓﻊ ﺍﻳﻦ ﻣﺸﻜﻞ ﺩﺭ
ﻧﺴﺨﻪ 4/0ﺍﭼﺘﻤﻞ ﺗﻮﺻﻴﻪ ﺑﺮ ﺟﺪﺍﺳﺎﺯﻱ ﻛﺎﻣﻞ ﺍﻳﻦ ﺩﻭ ﮔﺮﻭﻩ ﺍﺯ ﺍﻃﻼﻋﺎﺕ ﺑﻮﺩﻩ ﻭ ﺩﺭ ﻧﺴﺨﻪ ﻫﺎﻱ ﺁﻳﻨﺪﻩ ﺍﭼﺘﻤﻞ ﺍﻳﻦ ﺟﺪﺍﺳﺎﺯﻱ ﺍﺟﺒﺎﺭﻱ ﺧﻮﺍﻫﺪ ﮔﺮﺩﻳﺪ ﻭ
ﺗﻮﺻﻴﻪ ﻣﺪﺭﺳﻪ ﻭﺏ ﻧﻴﺰ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺑﺮﺍﻱ ﻫﺮ ﻧﻮﻉ ﺗﻌﺮﻳﻒ ﻓﺮﻣﺖ ﻭ ﺗﺮﺍﺯﺑﻨﺪﻱ ﻣﻴﺒﺎﺷﺪ .ﺑﺮﺍﻱ ﻣﺜﺎﻝ ﺩﺭ ﻛﺪ ﺍﭼﺘﻤﻞ ﺯﻳﺮ ﻛﻪ ﺑﺮ ﺍﺳﺎﺱ ﻧﺴﺨﻪ
3/2ﺍﭼﺘﻤﻞ ﻣﻴﺒﺎﺷﺪ ،ﺳﺎﺧﺘﺎﺭ ﻭ ﻣﺤﺘﻮﺍ )ﺗﮕﻲ ﺍﺯ ﻧﻮﻉ ﭘﺎﺭﺍﮔﺮﺍﻑ ﺑﺎ ﻣﺤﺘﻮﺍﻱ " ("This is a paragraphﺑﺎ ﺍﻃﻼﻋﺎﺕ ﻧﻤﺎﻳﺶ ﻳﻌﻨﻲ ﺭﻧﮓ ﻭ
ﺗﺮﺍﺯﺑﻨﺪﻱ )ﺭﻧﻚ ﻗﺮﻣﺰ ﻣﺘﻦ ﻭ ﺗﺮﺍﺯﺑﻨﺪﻱ ﺩﺭ ﻭﺳﻂ ﺻﻔﺤﻪ( ﻫﻤﺰﻣﺎﻥ ﻭ ﺩﺭ ﻛﻨﺎﺭ ﻫﻢ ﺁﻭﺭﺩﻩ ﺷﺪﻩ ﺍﻧﺪ ﻭ ﺍﻳﻦ ﺍﺩﻏﺎﻡ ﺍﻣﻜﺎﻥ ﺗﻐﻴﻴﺮ ﻭ ﺗﻮﺳﻌﻪ ﻛﺪ ﺭﺍ ﺑﺴﻴﺎﺭ ﻣﺤﺪﻭﺩ
ﺧﻮﺍﻫﺪ ﻛﺮﺩ:
><p align="center"><font color="red">This is a paragraph</font></p
ﻛﺪ ﻣﻌﺎﺩﻝ ﻣﺜﺎﻝ ﻓﻮﻕ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﺷﺮﺡ ﺩﺍﺩﻩ ﺷﺪﻩ ﺍﺳﺖ).ﻫﺮ ﭼﻨﺪ ﻛﻪ ﺍﻳﻦ ﻣﺜﺎﻝ ﺍﺯ ﺗﻤﺎﻣﻲ ﺍﻣﻜﺎﻧﺎﺕ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﻭ ﺍﻳﺠﺎﺩ
ﻓﺎﻳﻠﻲ ﻛﺎﻣﻼ ﻣﺴﺘﻘﻞ ﺑﺮﺍﻱ ﺗﻌﺮﻳﻒ ﺍﺳﺘﺎﻳﻞ ﺍﺳﺘﻔﺎﺩﻩ ﻧﻜﺮﺩﻩ ﺍﺳﺖ(.
ﺗﮕﻬﺎﻱ ﺍﺻﻠﻲ )(Basic Tags
><html></html ﺍﻳﺠﺎﺩ ﺳﻨﺪﻱ ﺍﭼﺘﻤﻞ
><head></head ﺍﻳﺠﺎﺩ ﺍﻃﻼﻋﺎﺕ ﺷﻨﺎﺳﻨﺎﻣﻪ ﺍﻱ ﺳﻨﺪ ﻣﺎﻧﻨﺪ ﻋﻨﻮﺍﻥ ﻭ ...
><body></body ﺍﻳﺠﺎﺩ ﺑﺪﻧﻪ ﻭ ﻗﺴﻤﺖ ﻗﺎﺑﻞ ﻣﺸﺎﻫﺪﻩ ﺳﻨﺪ ﺍﭼﺘﻤﻞ
ﺗﮕﻬﺎﻱ ﻧﺎﺣﻴﻪ Header
><title></title ﺗﻌﻴﻴﻦ ﻋﻨﻮﺍﻥ ﺳﻨﺪ
49 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﺷﻨﺎﺳﻪ ﻫﺎﻱ ﻣﻬﻢ ﺗﮓ body
>?=<body bgcolor ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﺑﺮ ﺍﺳﺎﺱ ﻧﺎﻡ ﺭﻧﮓ ﻳﺎ ﻣﻌﺎﺩﻝ ﻫﮕﺰ
>?=<body text ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﻧﻮﺷﺘﻪ ﺑﺮ ﺍﺳﺎﺱ ﻧﺎﻡ ﺭﻧﮓ ﻳﺎ ﻣﻌﺎﺩﻝ ﻫﮕﺰ
>?=<body link ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﭘﻴﻮﻧﺪﻫﺎ ﺑﺮ ﺍﺳﺎﺱ ﻧﺎﻡ ﺭﻧﮓ ﻳﺎ ﻣﻌﺎﺩﻝ ﻫﮕﺰ
>?=<body vlink ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﭘﻴﻮﻧﺪﻫﺎﻱ ﺑﺎﺯﺩﻳﺪﺷﺪﻩ ﺑﺮ ﺍﺳﺎﺱ ﻧﺎﻡ ﺭﻧﮓ
>?=<body alink ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﭘﻴﻮﻧﺪ ﻓﻌﺎﻝ ﺑﺮ ﺍﺳﺎﺱ ﻧﺎﻡ ﺭﻧﮓ ﻳﺎ ﻣﻌﺎﺩﻝ ﻫﮕﺰ
ﺗﮕﻬﺎﻱ ﻣﺘﻦ ﻭ ﻧﻮﺷﺘﻪ
><pre></pre ﻧﻤﺎﻳﺶ ﻣﺘﻦ ﻫﺎﻱ ﺍﺯ ﻗﺒﻞ ﻓﺮﻣﺖ ﺷﺪﻩ )(preformatted
><hl></hl ﺍﻳﺠﺎﺩ ﺑﺰﺭﮔﺘﺮﻳﻦ ﺳﺮ ﺗﻴﺘﺮ
><h6></h6 ﺍﻳﺠﺎﺩ ﻛﻮﭼﻜﺘﺮﻳﻦ ﺳﺮ ﺗﻴﺘﺮ
><b></b ﺍﻳﺠﺎﺩ ﻣﺘﻦ ﺗﻮﭘﺮ
><i></i ﺍﻳﺠﺎﺩ ﻣﺘﻦ ﻣﻮﺭﺏ ﻭ ﺍﻳﺘﺎﻟﻴﻚ
><tt></tt ﺍﻳﺠﺎﺩ ﻣﺘﻦ ﺍﺯ ﻧﻮﻉ ﺗﻠﻪ ﺗﺎﻳﭙﻲ
><cite></cite ﺍﻳﺠﺎﺩ citationﻣﻌﻤﻮﻻ ﺍﻳﺘﺎﻟﻴﻚ
><em></em ﻧﻤﺎﻳﺶ ﺗﺎﻛﻴﺪ ﺷﺪﻩ ﻣﺘﻦ )ﺗﻮﭘﺮ ﻳﺎ ﻣﻮﺭﺏ(
><strong></strong ﻧﻤﺎﻳﺶ ﺗﺎﻛﻴﺪ ﺷﺪﻩ ﻣﺘﻦ )ﺗﻮﭘﺮ ﻳﺎ ﻣﻮﺭﺏ(
><font size=?></font ﺗﻌﻴﻴﻦ ﺍﻧﺪﺍﺯﻩ ﻗﻠﻢ ﺍﺯ 1ﺗﺎ 7
><font color=?></font ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﻗﻠﻢ ﺑﺮ ﺍﺳﺎﺱ ﻧﺎﻡ ﺭﻧﮓ ﻳﺎ ﻣﻘﺪﺍﺭ ﻫﮕﺰ ﺁﻥ
ﭘﻴﻮﻧﺪﻫﺎ
><a href="URL"></a ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪ
><a href="mailto:EMAIL"></a ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪﻱ ﺍﺯ ﻧﻮﻉ mailto
><a name="NAME"></a ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪﻱ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ ﺩﺭ ﻳﻚ ﺳﻨﺪ
><a href="#NAME"></a ﺍﺭﺟﺎﻉ ﺑﻪ ﻳﻚ ﭘﻴﻮﻧﺪ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ
ﻓﺮﻣﺖ ﺩﻫﻲ
><p></p ﺍﻳﺠﺎﺩ ﭘﺎﺭﺍﮔﺮﺍﻓﻲ ﺟﺪﻳﺪ
>?=<p align ﺗﺮﺍﺯﺑﻨﺪﻱ ﭘﺎﺭﺍﮔﺮﺍﻑ ﺩﺭ ﺳﻤﺖ left, right, or center
><br ﺭﻓﺘﻦ ﺳﺮ ﺳﻄﺮ ﺟﺪﻳﺪ
><blockquote> </blockquote ﻋﻨﻮﺍﻥ ﺳﺎﺯﻱ ﻣﺘﻦ
><dl></dl ﺍﻳﺠﺎﺩ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻌﺮﻳﻔﻲ
><dt ﺍﻳﺠﺎﺩ ﻋﻨﺼﺮﻱ ﺍﺯ ﻳﻚ ﻓﻬﺮﺳﺖ ﺗﻌﺮﻳﻔﻲ
><dd ﺍﻳﺠﺎﺩ ﺷﺮﺡ ﻭ ﺗﻮﺻﻴﻒ ﻳﻚ ﻋﻨﺼﺮ ﻓﻬﺮﺳﺖ ﺗﻌﺮﻳﻔﻲ
50 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
><ol></ol ﺍﻳﺠﺎﺩ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻣﺮﺗﺐ
><li></li ﺍﻳﺠﺎﺩ ﻳﻚ ﻗﻠﻢ ﺍﻃﻼﻋﺎﺗﻲ ﺍﺯ ﻳﻚ ﻓﻬﺮﺳﺖ
><ul></ul ﺍﻳﺠﺎﺩ ﻓﻬﺮﺳﺘﻲ ﻧﺎﻣﺮﺗﺐ
>?=<div align ﺗﮕﻲ ﺑﺮﺍﻱ ﻓﺮﻣﺖ ﺩﻫﻲ ﺑﻠﻮﻛﻲ ﺑﺰﺭگ ﺍﺯ ﻛﺪﻫﺎﻱ ﺍﭼﺘﻤﻞ
ﺍﻟﻤﺎﻧﻬﺎﻱ ﮔﺮﺍﻓﻴﻜﻲ
>"<img src="name ﺍﻳﺠﺎﺩ ﻳﻚ ﺗﺼﻮﻳﺮ
>?=<img src="name" align ﺗﺮﺍﺯ ﺑﻨﺪﻱ ﺗﺼﻮﻳﺮ ) left, right, center; bottom, top,
(middle
>?=<img src="name" border ﺗﻌﻴﻴﻦ ﺿﺨﺎﻣﺖ ﻣﺮﺯ ﻳﻚ ﺗﺼﻮﻳﺮ
><hr ﺩﺭﺝ ﺧﻄﻲ ﺍﻓﻘﻲ
>?=<hr size ﺗﻌﻴﻴﻦ ﺍﺭﺗﻔﺎﻉ ﺧﻂ ﺍﻓﻘﻲ
>?=<hr width ﺗﻌﻴﻴﻦ ﻋﺮﺽ ﺧﻂ ﺑﺮ ﺍﺳﺎﺱ ﻣﻘﺪﺍﺭ ﻭﺍﻗﻌﻲ ﻳﺎ ﺩﺭﺻﺪﻱ
><hr noshade ﺍﻳﺠﺎﺩ ﺧﻄﻲ ﺍﻓﻘﻲ ﺑﺪﻭﻥ ﺳﺎﻳﻪ
ﺟﺪﺍﻭﻝ
><table></table ﺍﻳﺠﺎﺩ ﺟﺪﻭﻝ
><tr></tr ﺍﻳﺠﺎﺩ ﺭﺩﻳﻒ ﺩﺭ ﺟﺪﺍﻭﻝ
><td></td ﺍﻳﺠﺎﺩ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ
><th></th ﺍﻳﺠﺎﺩ ﻋﻨﻮﺍﻥ ﺳﺘﻮﻧﻬﺎﻱ ﻳﻚ ﺟﺪﻭﻝ
ﺷﻨﺎﺳﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ
><table border=# ﺗﻌﻴﻴﻦ ﻣﻘﺪﺍﺭ ﺿﺨﺎﻣﺖ ﻣﺮﺯﻫﺎﻱ ﻳﻚ ﺟﺪﻭﻝ
><table cellspacing=# ﺗﻌﻴﻴﻦ ﻓﺎﺻﻠﻪ ﺑﻴﻦ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﻭﻝ
><table cellpadding=# ﺗﻌﻴﻴﻦ ﻓﺎﺻﻠﻪ ﺑﻴﻦ ﻣﺤﺘﻮﺍﻱ ﻳﻚ ﺧﺎﻧﻪ ﻭ ﻣﺮﺯﻫﺎﻱ ﺁﻥ
><table width=# or % ﺗﻌﻴﻴﻦ ﻋﺮﺽ ﺟﺪﻭﻝ ﺑﺮ ﺍﺳﺎﺱ ﭘﻴﻜﺴﻞ ﻭ ﻳﺎ ﺩﺭﺻﺪﻱ
>?=<tr align=?> or <td align ﺗﻌﻴﻴﻦ ﺗﺮﺍﺯﺑﻨﺪﻱ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﻭﻝ )(left, center, right
>?=<tr valign=?> or <td valign ﺗﺮﺍﺯﺑﻨﺪﻱ ﻋﻤﻮﺩﻱ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﻭﻝ )(top, middle, bottom
><td colspan=# ﺗﻌﻴﻴﻦ ﺗﻌﺪﺍﺩ ﺳﺘﻮﻥ ﻫﺎﺋﻲ ﻛﻪ ﺑﺎﻳﺪ ﻳﻜﻲ ﺷﻮﻧﺪ.
><td rowspan=# ﺗﻌﻴﻴﻦ ﺗﻌﺪﺍﺩ ﺳﻄﺮ ﻫﺎﺋﻲ ﻛﻪ ﺑﺎﻳﺪ ﻳﻜﻲ ﺷﻮﻧﺪ.
><td nowrap ﺑﺎﻋﺚ ﺟﻠﻮﮔﻴﺮﻱ ﺍﺯ ﺷﻜﺴﺘﻪ ﺷﺪﻥ ﻣﺘﻦ ﺩﺭ ﺧﺎﻧﻪ ﺟﺪﻭﻝ ﻣﻴﺸﻮﺩ.
ﻓﺮﻳﻤﻬﺎ
><frameset></frameset ﺗﻌﺮﻳﻒ ﻭ ﺍﻳﺠﺎﺩ ﻣﺠﻤﻮﻋﻪ ﺍﻱ ﺍﺯ ﻓﺮﻳﻤﻬﺎ
>"<frameset rows="value,value ﺷﻨﺎﺳﻪ ﺍﻱ ﺑﺮﺍﻱ ﺗﻌﺮﻳﻒ ﺭﺩﻳﻔﻬﺎﻱ ﻳﻚ ﻣﺠﻤﻮﻋﻪ ﻓﺮﻳﻢ ﺑﺮ ﺍﺳﺎﺱ ﺍﻧﺪﺍﺯﻩ
51 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻭﺍﻗﻌﻲ ﺑﺮ ﺣﺴﺐ ﭘﻴﻜﺴﻞ ﻭ ﻳﺎ ﺍﺑﻌﺎﺩ ﺩﺭﺻﺪﻱ
>"<frameset cols="value,value ﺷﻨﺎﺳﻪ ﺍﻱ ﺑﺮﺍﻱ ﺗﻌﺮﻳﻒ ﺳﺘﻮﻧﻬﺎ ﻳﻚ ﻣﺠﻤﻮﻋﻪ ﻓﺮﻳﻢ ﺑﺮ ﺍﺳﺎﺱ ﺍﻧﺪﺍﺯﻩ
ﻭﺍﻗﻌﻲ ﺑﺮ ﺣﺴﺐ ﭘﻴﻜﺴﻞ ﻭ ﻳﺎ ﺍﺑﻌﺎﺩ ﺩﺭﺻﺪﻱ
><frame ﺗﻌﺮﻳﻒ ﻓﺮﻳﻤﻲ ﺍﺯ ﻣﺠﻤﻮﻋﻪ ﻓﺮﻳﻤﻬﺎ
><noframes></noframes ﺗﻌﻴﻴﻦ ﻣﺘﻨﻲ ﻛﻪ ﺑﺎﻳﺪ ﺩﺭ ﺻﻮﺭﺕ ﻋﺪﻡ ﭘﺸﺘﻴﺒﺎﻧﻲ ﻣﺮﻭﺭﮔﺮ ﺍﺯ ﻓﺮﻳﻤﻬﺎ ﺑﺎﻳﺪ
ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺷﻮﺩ.
ﺷﻨﺎﺳﻪ ﻫﺎﻱ ﻓﺮﻳﻤﻬﺎ
>"<frame src="URL ﺗﻌﻴﻴﻦ ﺳﻨﺪ ﺍﭼﺘﻤﻞ ﺩﺍﺧﻞ ﻓﺮﻳﻢ
>"<frame name="name ﺗﻌﻴﻴﻦ ﻧﺎﻡ ﺑﺮﺍﻱ ﻳﻚ ﻓﺮﻳﻢ
><frame marginwidth=# ﺗﻌﻴﻴﻦ ﻋﺮﺽ ﺣﺎﺷﻴﻪ ﺭﺍﺳﺖ ﻭ ﭼﭗ ﻓﺮﻳﻢ
><frame marginheight=# ﺗﻌﺮﻳﻒ ﻃﻮﻝ ﺣﺎﺷﻴﻪ ﺑﺎﻻ ﻭ ﭘﺎﻳﻴﻦ ﻓﺮﻳﻢ ﺑﺮ ﺍﺳﺎﺱ ﭘﻴﻜﺴﻞ
><frame scrolling=VALUE ﺗﻌﻴﻴﻦ ﺍﻳﻨﻜﻪ ﻓﺮﻳﻤﻲ ﺍﺯ Scroll barﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﺪ ﻳﺎ ﻧﻪ .ﻣﻘﺎﺩﻳﺮ
ﻣﻤﻜﻦ no ،yes :ﻭ ) autoﺣﺎﻟﺖ ﭘﻴﺶ ﻓﺮﺽ(
><frame noresize ﺳﺒﺐ ﺟﻠﻮﮔﻴﺮﻱ ﺍﺯ ﺗﻐﻴﻴﺮ ﺍﻧﺪﺍﺯﻩ ﻳﻚ ﻓﺮﻳﻢ ﻣﻴﺸﻮﺩ.
ﻓﺮﻣﻬﺎ
><form></form ﺍﻳﺠﺎﺩ ﻳﻚ ﻓﺮﻡ
"<select multiple name="NAME ﺍﻳﺠﺎﺩ ﻳﻚ ﻣﻨﻮﻱ ﻛﺮﻛﺮﻩ ﺍﻱ ﻭ ﺗﻌﻴﻴﻦ ﺗﻌﺪﺍﺩ ﺍﻗﻼﻣﻲ ﻛﻪ ﻗﺒﻞ ﺍﺯ
>size=?></select scrollingﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﻨﺪ ﺷﺪ.
><option ﺗﻌﻴﻴﻦ ﻫﺮ ﻳﻚ ﺍﺯ ﺍﻗﻼﻡ ﻣﻨﻮ ﻛﺮﻛﺮﻩ ﺍﻱ
><select name="NAME"></select ﺍﻳﺠﺎﺩ ﻣﻨﻮﻱ ﻛﺮﻛﺮﻩ ﺍﻱ
><option ﺗﻌﻴﻴﻦ ﻫﺮ ﻳﻚ ﺍﺯ ﺍﻗﻼﻡ ﻣﻨﻮ ﻛﺮﻛﺮﻩ ﺍﻱ
<textarea name="NAME" cols=40 ﺍﻳﺠﺎﺩ ﺍﻟﻤﺎﻧﻲ ﺑﺮﺍﻱ ﻭﺭﻭﺩ ﻣﺘﻦ ﺩﺭ ﺑﻴﺶ ﺍﺯ ﻳﻚ ﺧﻂ ﺑﺎ ﺗﻌﻴﻴﻦ ﺗﻌﺪﺍﺩ
>rows=8></textarea ﺳﻄﺮ ﻭ ﺳﺘﻮﻥ ﻧﺎﺣﻴﻪ
>"<input type="checkbox" name="NAME ﺍﻳﺠﺎﺩ ﭼﻚ ﺑﺎﻛﺴﻲ ﺑﺎ ﺗﻌﻴﻴﻦ ﻣﺘﻦ ﻭ ﻋﻨﻮﺍﻥ ﺁﻥ
"<input type="radio" name="NAME ﺍﻳﺠﺎﺩ ﺭﺍﺩﻳﻮ ﺑﺎﺗﻦ ﺑﺎ ﺗﻌﻴﻴﻦ ﻣﺘﻦ ﻭ ﻋﻨﻮﺍﻥ ﺁﻥ
>"value="x
><input type=text name="foo" size=20 ﺍﻳﺠﺎﺩ ﺍﻟﻤﺎﻧﻲ ﺑﺮﺍﻱ ﻭﺭﻭﺩ ﻣﺘﻦ ﺑﺎ ﺣﺪﺍﻛﺜﺮ ﻳﻚ ﺳﻄﺮ ﺑﻪ ﻫﻤﺮﺍﻩ ﺗﻌﻴﻴﻦ
ﺍﺑﻌﺎﺩ ﺑﺮ ﺍﺳﺎﺱ ﻧﻮﻳﺴﻪ
>"<input type="submit" value="NAME ﺍﻳﺠﺎﺩ ﺩﻛﻤﻪ ﺍﻱ ﺍﺯ ﻧﻮﻉ ﺍﺭﺳﺎﻝ ﻭ Submit
<input type="image" border=0 ﺍﻳﺠﺎﺩ ﺩﻛﻤﻪ ﺍﻱ ﺍﺯ ﻧﻮﻉ ﺍﺭﺳﺎﻝ ﺑﺎ ﻛﻤﻚ ﻳﻚ ﺗﺼﻮﻳﺮ
>"name="NAME" src="name.gif
>"<input type="reset ﺍﻳﺠﺎﺩ ﺩﻛﻤﻪ ﺧﻼﺻﻲ !! ﻳﺎ Reset
52 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
ﻣﺮﺍﺟﻊ ﻭ ﺭﻓﺮﻧﺴﻬﺎ
ﻓﺮﻫﻨﮓ ﻟﻐﺖ ﻭﺍژﻩ ﻫﺎﻱ ﻓﻨﻲ ﺩﺭ ﻭﺏ
Anchor ﭘﻴﻮﻧﺪ ،ﻟﻴﻨﻚ) ،ﻟﻨﮕﺮ ﻛﺸﺘﻲ(
Attribute ﺷﻨﺎﺳﻪ ،ﻧﺸﺎﻥ ،ﺻﻔﺖ
Browser, user agent ﻣﺮﻭﺭﮔﺮ ،ﺷﺒﻜﻪ ﻧﻮﺭﺩ ،ﺑﺮﻭﺯﺭ
Caption ﻋﻨﻮﺍﻥ ،ﺳﺮﻟﻮﺣﻪ
Character ﻧﻮﻳﺴﻪ ،ﻛﺎﺭﺍﻛﺘﺮ ،ﺩﺧﺸﻪ
Client ﺳﺮﻭﻳﺲ ﮔﻴﺮﻧﺪﻩ ،ﻣﺸﺘﺮﻱ ،ﺍﺭﺑﺎﺏ ﺭﺟﻮﻉ
DHTML ﺍﭼﺘﻤﻞ ﺩﻳﻨﺎﻣﻴﻚFAQ ،
Division, Div ﺑﺨﺶ ،ﻗﺴﻤﺖ ،ﺩﺳﺘﻪ ﺑﻨﺪﻱ
Download ﮔﺮﻓﺘﻦ ﺍﻃﻼﻋﺎﺕ ﺍﺯ ﻭﺏ ﺳﺮﻭﺭ
Document ﺳﻨﺪ ،ﻣﺘﻨﻲ ﺍﭼﺘﻤﻞ
Edit ﻭﻳﺮﺍﻳﺶ
Element ﺍﻟﻤﺎﻥ ،ﻋﻨﺼﺮ
Explorer ﺟﺴﺘﺠﻮﮔﺮ ،ﻣﻜﺘﺸﻒ
Extention ﺍﻧﺸﻌﺎﺏ ﻓﺎﻳﻞ
FAQ ﺑﻴﺸﺘﺮﻳﻦ ﺳﺆﺍﻻﺕ ﭘﺮﺳﻴﺪﻩ ﺷﺪﻩ ﺩﺭ ﻣﻮﺭﺩ ﻳﻚ ﻣﻮﺿﻮﻉ
Font ﻗﻠﻢ ،ﺧﺎﻧﻮﺍﺩﻩ ﺣﺮﻭﻑ
Format ﻗﺎﻟﺐ ،ﻓﺮﻣﺖ
Frame ﻗﺎﺏ ،ﭼﻬﺎﺭﭼﻮﺏ
Frameset ﻣﺠﻤﻮﻋﻪ ﺍﻱ ﺍﺯ ﻓﺮﻳﻤﻬﺎ
FTP ﺍﺳﺘﺎﻧﺪﺍﺭﺩﻱ ﺑﺮﺍﻱ ﻣﺒﺎﺩﻟﻪ ﻓﺎﻳﻞ )(Protocol Transfer File
href ﺁﺩﺭﺱ ﻣﺘﻦ ﻣﺨﺘﻠﻂ )(reference hyerlink
IP Protocol Internet
JavaScript ﺟﺎﻭﺍ ﺍﺳﻜﺮﻳﭙﺖ ،ﺯﺑﺎﻧﻲ ﺑﺮﺍﻱ ﺍﺳﻜﺮﻳﭙﺖ ﻧﻮﻳﺴﻲ
HTTP ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺗﺒﺎﺩﻝ ﺍﺑﺮ ﻣﺘﻦ ﻫﺎ )(Protocol Transfer Hypertext
Hyper text ﺍﺑﺮ ﻣﺘﻦ ،ﻣﺘﻦ ﻣﺨﺘﻠﻂ
List ﻓﻬﺮﺳﺖ
53 Teaching by : H.shoja
www.hshoja.ir
Learn HTML and CSS with w3schools 2012
Link ﭘﻴﻮﻧﺪ ،ﻟﻴﻨﻚ
Online ﺁﻧﻼﻳﻦ ،ﺳﺮﺧﻂ
Padding ﻻﻳﻪ ﮔﺬﺍﺭﻱ ،ﻟﻔﺎﻓﻪ
Page, Web page ﺻﻔﺤﻪ ،ﻣﺘﻦ
Publish ﺍﻧﺘﺸﺎﺭ ،ﺑﺮﺩﻥ ﺍﻃﻼﻋﺎﺕ ﺭﻭﻱ ﻭﺏ ﺳﺮﻭﺭ
Protocol ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺍﺭﺗﺒﺎﻃﻲ ،ﻓﻬﺮﺳﺖ ﭘﺮﻭﺗﻮﻛﻠﻬﺎﻱ ﻣﻬﻢ ﺩﺭ ﺍﻳﻨﺘﺮﻧﺖ
Robot ﻧﺮﻡ ﺍﻓﺰﺍﺭﻱ ﺧﻮﺩﻛﺎﺭ ﺩﺭ ﻭﺏ
Site. Web site ﭘﺎﻳﮕﺎﻩ ،ﺳﺎﻳﺖ
Script ﺍﺳﻜﺮﻳﭙﺖ ،ﺩﺳﺘﺨﻂ ،ﻣﺘﻦ ﻧﻤﺎﻳﺸﻨﺎﻣﻪ
Spacing ﻓﺎﺻﻠﻪ ﮔﺬﺍﺭﻱ ،ﻓﺎﺻﻠﻪ
Span ﻣﺤﺪﻭﺩﻩ ،ﮔﺴﺘﺮﻩ ،ﻭﺟﺐ
Target ﻫﺪﻑ ﻭ ﻣﻘﺼﺪ
Table ﺟﺪﻭﻝ ،ﺁﺭﺍﻳﻪ
Tag ﺗﮓ ،ﺑﺮﭼﺴﺐ
TCP/IP ﻧﻮﻋﻲ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺍﺭﺗﺒﺎﻃﻲ )(Transmission Control Protocol/Internet Protocol
Unicode ﺍﺳﺘﺎﻧﺪﺍﺭﻱ ﺑﺮﺍﻱ ﻣﺤﻴﻂ ﻫﺎﻱ ﭼﻨﺪ ﺯﺑﺎﻧﻪ
Upload ﺑﺮﺩﻥ ﺍﻃﻼﻋﺎﺕ ﺭﻭﻱ ﻭﺏ ﺳﺮﻭﺭ ،ﻣﻌﻤﻮﻻ ﺑﺎ ﻛﻤﻚ ﻧﺮﻡ ﺍﻓﺰﺍﺭﻫﺎﻱ FTPﺍﻧﺠﺎﻡ ﻣﻴﭙﺬﻳﺮﺩ.
URL ﺁﺩﺭﺱ ﺍﻳﻨﺘﺮﻧﺘﻲ ،ﺧﻼﺻﻪ ﺷﺪﻩ Locator Resource Uniform
User, Surfer ﻛﺎﺭﺑﺮ ،ﻭﺑﮕﺮﺩ ،ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﻩ
Weblog ﻭﺏ ﻧﻮﻳﺴﻲ ،ﺗﺎﺭﻧﮕﺎﺭﻱ
Webmaster ﻣﺪﻳﺮﻳﺖ ﺳﺎﻳﺖ
Web Server ﺳﺮﻭﻳﺲ ﺩﻫﻨﺪﻩ ﻭﺏ ،ﻧﺮﻡ ﺍﻓﺰﺍﺭﻱ ﻛﻪ ﻭﻇﻴﻔﻪ ﺍﺻﻠﻴﺶ ﺩﺍﺩﻥ ﺳﺮﻭﻳﺲ ﺑﻪ ﺩﺭﺧﻮﺍﺳﺘﻬﺎﻱ ﺩﺭﻳﺎﻓﺖ ﺷﺪﻩ ﺍﺯ ﻭﺏ ﻣﻴﺒﺎﺷﺪ.
Web, WWW ﻭﺏ ،ﺗﺎﺭ ﻋﻨﻜﺒﻮﺕ ﺟﻬﺎﻧﻲ ،ﺧﻼﺻﻪ ﺷﺪﻩ Web Wide World
ﻣﻨﺒﻊ ﺍﺻﻠﻲ w3school.com :
ﺑﺮﮔﺮﻓﺘﻪ ﺷﺪﻩ ﺍﺯ ﺳﺎﻳﺖ khaterat.com
54 Teaching by : H.shoja
www.hshoja.ir
You might also like
- SQL Basics: Accessing and Manipulating DatabasesNo ratings yetSQL Basics: Accessing and Manipulating Databases8 pages
- HTML Tutorials - I-Tech Software Education100% (1)HTML Tutorials - I-Tech Software Education50 pages
- Mirpur University of Science and Technology: Deparment Software Engineering100% (2)Mirpur University of Science and Technology: Deparment Software Engineering11 pages
- Salary - SQL Interview Queries Examples For Fresher and Exprinced Set-4 Interview Questions PDFNo ratings yetSalary - SQL Interview Queries Examples For Fresher and Exprinced Set-4 Interview Questions PDF8 pages
- Inline CSS:: CSS: Cascading Style SheetNo ratings yetInline CSS:: CSS: Cascading Style Sheet44 pages
- Full Stack Developer JAVA Job Oriented Program SEEDNo ratings yetFull Stack Developer JAVA Job Oriented Program SEED5 pages
- Resume New Resume NewResume NewResume NewResume NewResume NewNo ratings yetResume New Resume NewResume NewResume NewResume NewResume New3 pages
- Access Tutorial 2 Building A Database and Defining Table RelationshipsNo ratings yetAccess Tutorial 2 Building A Database and Defining Table Relationships14 pages
- Java Course Content Updated - WinPath ITNo ratings yetJava Course Content Updated - WinPath IT5 pages
- Views, Stored Procedures, Functions, and Triggers: Download Mysql From This Link: InstallNo ratings yetViews, Stored Procedures, Functions, and Triggers: Download Mysql From This Link: Install11 pages
- HTML Quiz Questions and Answers - QualityPoint TechnologiesNo ratings yetHTML Quiz Questions and Answers - QualityPoint Technologies15 pages
- Es Unit - 5 Embedded System DevelopmentNo ratings yetEs Unit - 5 Embedded System Development32 pages
- 2018 - 07 - 06 Aust - Dietmar - Oracle Apex 18.1 - The Golden NuggetsNo ratings yet2018 - 07 - 06 Aust - Dietmar - Oracle Apex 18.1 - The Golden Nuggets107 pages
- JKJSFDKJJKRGFDFJJFJVK, NJDGNJJHJTFXDXFJGJKNXGFKNJBFJ: ContentsNo ratings yetJKJSFDKJJKRGFDFJJFJVK, NJDGNJJHJTFXDXFJGJKNXGFKNJBFJ: Contents1 page
- Roberts Rules: Meeting Procedures GuideNo ratings yetRoberts Rules: Meeting Procedures Guide31 pages
- Summative Test For English 10 - W5 and 6No ratings yetSummative Test For English 10 - W5 and 62 pages
- 1 Hurford-ExclusiveInclusiveDisjunction-1974No ratings yet1 Hurford-ExclusiveInclusiveDisjunction-19744 pages
- Multimodal - M RS Scene Classification VLMs and Dual-Cross Attention NetworksNo ratings yetMultimodal - M RS Scene Classification VLMs and Dual-Cross Attention Networks14 pages