HTML Css W3schools

‫‪Learn 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‬‬
‫ﺑﺮﺍﻱ ﺩﻳﺪﻥ ﻓﺎﻳﻞ ﺍﭼﺘﻤﻞ ﺑﺎﻻ ﺩﺭ ﻣﺮﻭﺭﮔﺮ ﻳﺎ ‪ 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‬ﻭﺟﻮﺩ ﺩﺍﺭﺩ ﺍﻣﺎ ﺗﻮﺻﻴﻪ ﻣﻴﺸﻮﺩ ﻛﻪ ﺍﺯ ﺍﺩﻳﺘﻮﺭﻫﺎﻱ ﻣﻌﻤﻮﻟﻲ‬
‫ﻣﺘﻦ ﺑﺮﺍﻱ ﺗﻬﻴﻪ ﺻﻔﺤﺎﺕ ﺧﻮﺩ ﺍﺳﺘﻔﺎﺩﻩ ﻛﺮﺩﻩ‪ ،‬ﻋﻤﻠﻜﺮﺩ ﺗﮕﻬﺎ ﺭﺍ ﺷﻨﺎﺧﺘﻪ ﻭ ﻫﻴﭽﮕﺎﻩ ﺑﺪﻭﻥ ﺍﻳﻨﻜﻪ ﺑﺪﺍﻧﻴﺪ ﻛﺎﺭﺑﺮﺩ ﻳﻚ ﺗﮓ ﭼﻴﺴﺖ ﺁﻧﺮﺍ ﺑﻜﺎﺭ ﻧﺒﺮﻳﺪ‪) .‬ﺍﺩﻳﺘﻮﺭﻫﺎ‬

‫ﻫﻤﺎﻥ ﺑﺮﺩﺍﺷﮕﺮﻫﺎﻱ ﻣﺘﻦ ﻫﺴﺘﻨﺪ‪(.‬‬
‫ﺑﻴﺸﺘﺮﻳﻦ ﺳﻮﺍﻻﺕ ﭘﺮﺳﻴﺪﻩ ﺷﺪﻩ ) ‪: ( 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‬ﺑﺎ ﻫﻢ ﺍﺭﺗﺒﺎﻁ ﺑﺮﻗﺮﺍﺭ ﻣﻴﻜﻨﻨﺪ ‪.‬‬ ‫‪‬‬

‫ﻧﺤﻮﻩ ﻛﺎﺭﻛﺮﺩ ﻭﺏ ﭼﮕﻮﻧﻪ ﺍﺳﺖ؟‬
‫ﺍﻃﻼﻋﺎﺕ ﺻﻔﺤﺎﺕ ﻭﺏ ﺩﺍﺧﻞ ﻓﺎﻳﻠﻬﺎﺋﻲ ﺑﻪ ﻧﺎﻡ ‪ 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‬ﺍﺳﺖ‪.‬‬ ‫‪‬‬

‫ﭼﻪ ﻛﺴﺎﻧﻲ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﻫﺎﻱ ﻭﺏ ﺭﺍ ﺗﻌﻴﻴﻦ ﻣﻴﻜﻨﺪ؟‬
‫ﺗﻌﻴﻴﻦ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﻫﺎﻱ ﻭﺏ ﺭﺑﻄﻲ ﺑﻪ ﺷﺮﻛﺘﻬﺎﻱ ﻣﺎﻳﻜﺮﻭﺳﺎﻓﺖ ﻭ ﻳﺎ ‪ 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‬‬

‫>‪</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‬‬

‫ﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ ‪ .‬ﻳﻜﻲ ﺍﺯ ﺑﻬﺘﺮﻳﻦ ﺭﻭﺵ ﻫﺎﻱ ﻳﺎﺩﮔﻴﺮﻱ ﺗﮓ ﻫﺎﻱ ﺍﭼﺘﻤﻞ ﺩﻳﺪﻥ ﻣﺜﺎﻟﻬﺎ ﻭ ﺗﻐﻴﻴﺮ ﺁﻧﻬﺎ ﻣﻴﺒﺎﺷﺪ ﻭ ﺑﺎ ﻛﻤﻚ ﺍﺩﻳﺘﻮﺭ ﺍﺧﺘﺼﺎﺻﻲ ﻣﺎ ﻭ ﺑﺎ‬
‫ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﻣﻜﺎﻧﺎﺕ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ ﺁﻥ ﺑﻪ ﺻﻮﺭﺕ ﺁﻧﻼﻳﻦ ﻣﻴﺘﻮﺍﻧﻴﺪ ﺑﻪ ﻣﻄﺎﻟﻌﻪ ﻭ ﻳﺎﺩﮔﻴﺮﻱ ﻣﺜﺎﻟﻬﺎ ﭘﺮﺩﺍﺧﺘﻪ‪ ،‬ﻛﺪﻫﺎﻱ ﺍﭼﺘﻤﻞ ﺭﺍ ﺗﻐﻴﻴﺮ ﺩﺍﺩﻩ ﻭ ﺑﺎ ﻛﻠﻴﻚ ﺭﻭﻱ‬
‫ﺩﻛﻤﻪ "ﻧﻤﺎﻳﺶ ﻧﺘﺎﻳﺞ" ﺑﻪ ﻣﺸﺎﻫﺪﻩ ﻧﺘﺎﻳﺞ ﺑﭙﺮﺩﺍﺯﻳﺪ‪.‬‬
‫ﻣﺜﺎﻟﻬﺎ ‪:‬‬
‫ﻣﺜﺎﻟﻲ ﺳﺎﺩﻩ ﺍﺯ ﻳﻚ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ‬

‫ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﺑﺴﻴﺎﺭ ﺳﺎﺩﻩ ﻋﺒﺎﺭﺕ ﻣﻌﺮﻭﻑ "!‪ "Hello World‬ﺩﺭ ﺻﻔﺤﻪ ﻣﺮﻭﺭ ﮔﺮ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺷﺪﻩ ﻭ ﺩﺭ ﻭﺍﻗﻊ ﻣﺤﺘﻮﺍﻱ ﻋﻨﺼﺮ ‪ body‬ﺗﻤﺎﻣﺎ‬
‫ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ‪.‬‬
‫ﭘﺎﺭﺍﮔﺮﺍﻓﻬﺎﻱ ﺳﺎﺩﻩ‪:‬‬
‫ﭼﮕﻮﻧﮕﻲ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﺑﺎ ﻛﻤﻚ ﺗﮓ >‪ <p‬ﻭ ﺑﺼﻮﺭﺕ ﭘﺎﺭﺍﮔﺮﺍﻓﻲ‬
‫ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﻓﺎﺭﺳﻲ‪:‬‬

‫ﭼﮕﻮﻧﮕﻲ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﻓﺎﺭﺳﻲ‪ .‬ﺑﺮﺍﻱ ﺟﺰﺋﻴﺎﺕ ﺑﻴﺸﺘﺮ ﺑﻪ ﻓﺼﻞ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ ﻣﺮﺍﺟﻌﻪ ﻛﻨﻴﺪ‪.‬‬
‫ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ‪:‬‬
‫ﺳﺮ ﺗﻴﺘﺮﻫﺎ )‪(Headings‬‬

‫ﺳﺮ ﺗﻴﺘﺮﻫﺎ ﺑﺎ ﻛﻤﻚ ﺗﮓ ﻫﺎﻱ >‪ <h1‬ﺗﺎ >‪ <h6‬ﺗﻌﺮﻳﻒ ﻣﻴﺸﻮﻧﺪ‪ <h1> .‬ﻣﻌﺮﻑ ﺑﺰﺭﮔﺘﺮﻳﻦ ﺳﺮ ﺗﻴﺘﺮ ﻭ >‪ <h6‬ﻣﻌﺮﻑ ﻛﻮﭼﻜﺘﺮﻳﻦ ﺳﺮ ﺗﻴﺘﺮ ﺍﺳﺖ‪.‬‬
‫ﻣﺮﻭﺭﮔﺮ ﺑﻪ ﻫﻨﮕﺎﻡ ﻧﻤﺎﻳﺶ ﻳﻚ ﺳﺮ ﺗﻴﺘﺮ ﺑﺼﻮﺭﺕ ﺍﺗﻮﻣﺎﺗﻴﻚ ﻳﻚ ﺳﻄﺮ ﺧﺎﻟﻲ ﻗﺒﻞ ﻭ ﺑﻌﺪ ﺍﺯ ﻫﺮ ﺳﺮ ﺗﻴﺘﺮ ﺍﺿﺎﻓﻪ ﺧﻮﺍﻫﺪ ﻛﺮﺩ‪.‬‬
‫‪<h1>This‬‬ ‫‪is‬‬ ‫‪a‬‬ ‫>‪heading</h1‬‬
‫ﻣﺜﺎﻝ ﺑﺎﻻ ﺩﺭ ﺻﻔﺤﻪ ﻣﺮﻭﺭﮔﺮ ﺑﺪﻳﻦ ﺷﻜﻞ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ‪.‬‬
‫ﭘﺎﺭﺍﮔﺮﺍﻓﻬﺎ )‪(Paragraphs‬‬
‫ﭘﺎﺭﺍﮔﺮﺍﻓﻬﺎ ﺑﺎ ﻛﻤﻚ ﺗﮓ >‪ <p‬ﻣﻌﺮﻓﻲ ﻣﻴﺸﻮﻧﺪ‪ .‬ﻣﺮﻭﺭﮔﺮﻫﺎ ﺑﻪ ﻫﻨﮕﺎﻡ ﻧﻤﺎﻳﺶ ﻳﻚ ﭘﺎﺭﺍﮔﺮﺍﻑ ﺑﺼﻮﺭﺕ ﺍﺗﻮﻣﺎﺗﻴﻚ ﻳﻚ ﺳﻄﺮ ﺧﺎﻟﻲ ﻗﺒﻞ ﻭ ﺑﻌﺪ ﺍﺯ ﺁﻥ‬
‫ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﻨﺪ ﺩﺍﺩ‪.‬‬
‫>‪<p>This is a paragraph</p‬‬
‫>‪<p>This is another paragraph</p‬‬

‫ﺳﻄﺮ ﺟﺪﻳﺪ )‪(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‬ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ‪..‬‬

‫ﻣﺮﻭﺭﮔﺮﻫﺎ ﺑﻪ ﻫﻨﮕﺎﻡ ﻧﻤﺎﻳﺶ ﺑﻌﻀﻲ ﻋﻨﺎﺻﺮ ﺑﺼﻮﺭﺕ ﺍﺗﻮﻣﺎﺗﻴﻚ ﻳﻚ ﺳﻄﺮ ﺧﺎﻟﻲ ﻗﺒﻞ ﻭ ﺑﻌﺪ ﺍﺯ ﺁﻥ ﻋﻨﺼﺮ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﻨﺪ ﺩﺍﺩ‪ .‬ﺑﺮﺍﻱ ﻧﻤﻮﻧﻪ ﺍﻳﻦ ﮔﺮﻭﻩ ﺍﺯ‬
‫ﻋﻨﺼﺮﻫﺎ ﻣﻴﺘﻮﺍﻥ ﺍﺯ ﭘﺎﺭﺍﮔﺮﺍﻑ )>‪ (<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‬‬

‫ﺗﮕﻬﺎﻱ ﺍﺻﻠﻲ‬
‫ﺩﺭ ﺟﺪﻭﻝ ﺯﻳﺮ ﻋﻨﺎﺻﺮ ﻣﻌﺮﻓﻲ ﺷﺪﻩ ﺩﺭ ﺍﻳﻦ ﻓﺼﻞ ﺑﻪ ﻫﻤﺮﺍﻩ ﻟﻴﻨﻜﻬﺎﻱ ﻣﺮﺑﻮﻃﻪ ﺟﻬﺖ ﻣﻄﺎﻟﻌﻪ ﺑﻴﺸﺘﺮ ﺁﻭﺭﺩﻩ ﺷﺪﻩ ﺍﺳﺖ‪ .‬ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺑﺮﺍﻱ ﻫﺮ‬
‫ﻋﻨﺼﺮ ﻓﻬﺮﺳﺘﻲ ﺍﺯ ﺷﻨﺎﺳﻪ ﻫﺎ ﻳﺎ ‪ 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‬ﻧﻴﺰ ﻣﻌﺮﻓﻲ ﺧﻮﺍﻫﺪ ﺷﺪ‪.‬‬
‫ﺩﺭﺱ ﻗﺒﻠﻲ‪ ،‬ﺩﺭﺱ ﺑﻌﺪﻱ‬
‫ﺳﺆﺍﻻﺕ ﻣﺮﺑﻮﻁ ﺑﻪ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ ﺭﺍ ﻣﻴﺘﻮﺍﻥ ﺑﻪ ﺳﻪ ﮔﺮﻭﻩ ﻋﻤﺪﻩ ﺗﻘﺴﻴﻢ ﻛﺮﺩ‪:‬‬

‫‪ -‬ﭼﮕﻮﻧﻪ ﻓﺎﺭﺳﻲ ﺑﻨﻮﻳﺴﻢ ؟‬
‫‪ -‬ﭼﮕﻮﻧﻪ ﻓﺎﺭﺳﻲ ﺑﺨﻮﺍﻧﻢ؟‬
‫‪ -‬ﭼﮕﻮﻧﻪ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﻓﺎﺭﺳﻲ ﺭﺍ ﻧﻤﺎﻳﺶ ﺩﻫﻢ؟‬
‫ﺩﺭ ﻣﻮﺭﺩ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ ﻭ ﻓﺎﺭﺳﻲ ﺧﻮﺍﻧﻲ ﺍﮔﺮ ﺍﺯ ﺍﺩﻳﺘﻮﺭ ﺁﻧﻼﻳﻦ ﻣﺎ ﺩﺭ ﺑﺨﺶ ﻣﺜﺎﻟﻬﺎ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻴﺪ ﻧﻴﺎﺯﻱ ﺑﻪ ﻓﺎﺭﺳﻲ ﺳﺎﺯﻱ ﻧﺪﺍﺭﻳﺪ ﻭ ﺑﺎ ﻛﻤﻚ ﺍﺩﻳﺘﻮﺭ‬
‫ﻣﺰﺑﻮﺭ ﺑﺎﻳﺪ ﺑﻪ ﺭﺍﺣﺘﻲ ﻗﺎﺩﺭ ﺑﻪ ﺗﺎﻳﭗ ﻓﺎﺭﺳﻲ ﻭ ﻻﺗﻴﻦ ﺑﺎﺷﻴﺪ‪.‬ﺍﮔﺮ ﻣﻴﺨﻮﺍﻫﻴﺪ ﻛﻪ ﺩﺭ ﻫﺮ ﺣﺎﻝ ﻛﺎﻣﭙﻴﻮﺗﺮﺗﺎﻥ ﺭﺍ ﻓﺎﺭﺳﻲ ﻛﻨﻴﺪ‪ ،‬ﻣﻄﺎﻟﻌﻪ ﺻﻔﺤﺎﺕ ﺯﻳﺮ ﺭﺍﻫﻨﻤﺎﻱ‬
‫ﺑﺴﻴﺎﺭ ﺧﻮﺑﻲ ﺑﺮﺍﻱ ﻓﺎﺭﺳﻲ ﺳﺎﺯﻱ ﻣﻴﺒﺎﺷﻨﺪ‪:‬‬

‫* ﺭﺍﻫﻨﻤﺎﻱ ﻓﺎﺭﺳﻲ ﺳﺎﺯﻱ ﻭﻳﻨﺪﻭﺯ‬

‫* ﻗﻠﻢ ﻭ ﺻﻔﺤﻪﻛﻠﻴﺪ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ‬
‫* ‪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. -‬‬

‫ﻣﺜﻼ ﺑﺮﺍﻱ ﻧﻤﺎﻳﺶ ﺟﻤﻠﻪ ﻓﺎﺭﺳﻲ "ﺳﻼﻡ ﺑﻪ ﺩﻧﻴﺎﻱ ﻭﺏ!" ﺑﺎ ﻛﻤﻚ ﻋﻨﺎﺻﺮ ‪ 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‬ﺩﺭ ﺟﺪﺍﻭﻝ‬

‫ﻓﺮﻣﺖ ﺩﻫﻲ ) ‪( 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‬‬
‫ﻭ ﺳﭙﺲ ﻣﺮﺍﺣﻞ ﺑﺎﻻ ﺭﺍ ﺗﻜﺮﺍﺭ ﻛﻨﻴﺪ!!!‬

‫ﭼﻨﺪ ﻧﻜﺘﻪ ﻛﺎﺭﺑﺮﺩﻱ‪:‬‬
‫ﺩﺭ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ‪ Underline‬ﺩﻗﺖ ﻛﻨﻴﺪ ﭼﻮﻥ ﺩﺭ ﺍﻛﺜﺮ ﻣﺮﻭﺭﮔﺮﻫﺎ‪ ،‬ﭘﻴﻮﻧﺪﻫﺎ ﺑﺎ ﺍﻳﻦ ﺧﻄﻮﻁ ﺯﻳﺮﻱ ﻧﺸﺎﻥ ﺩﺍﺩﻩ ﻣﻲ ﺷﻮﻧﺪ ﻭ ﺍﻳﻦ ﻣﺴﺎﻟﻪ ﻣﻴﺘﻮﺍﻧﺪ‬ ‫‪.I‬‬
‫ﻛﺎﺭﺑﺮﺍﻥ ﺭﺍ ﺩﭼﺎﺭ ﺍﺷﺘﺒﺎﻩ ﻛﻨﺪ ‪.‬‬
‫ﺑﻪ ﻛﺎﺭﮔﻴﺮﻱ ﺗﮕﻬﺎﻱ ‪ EM‬ﻭ ‪ STRONG‬ﻛﻪ ﺟﺎﻳﮕﺰﻳﻦ ﺗﮕﻬﺎﻱ ‪ I‬ﻭ ‪ B‬ﻫﺴﺘﻨﺪ ‪ ،‬ﺍﻳﻦ ﺍﻃﻤﻴﻨﺎﻥ ﺭﺍ ﻣﻲ ﺩﻫﺪ ﻛﻪ ﺻﻔﺤﻪ ﺷﻤﺎ ﺗﻮﺳﻂ ﻫﻤﻪ‬ ‫‪.II‬‬
‫ﻣﺮﻭﺭﮔﺮﻫﺎ ﺑﺼﻮﺭﺕ ﺻﺤﻴﺢ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ ‪.‬‬
‫ﺑﻪ ﺗﺮﺗﻴﺐ ﺑﺴﺘﻪ ﺷﺪﻥ ﺗﮕﻬﺎﻱ ﭘﺎﻳﺎﻧﻲ ﺩﺭ ﻣﺜﺎﻝ ﺯﻳﺮ ﺩﻗﺖ ﻛﻨﻴﺪ‪ ،‬ﻫﻤﺎﻥ ﮔﻮﻧﻪ ﻛﻪ ﻣﺸﺎﻫﺪﻩ ﻣﻲ ﻛﻨﻴﺪ ﻋﻨﺼﺮ ‪ STRONG‬ﺑﻌﺪ ﺍﺯ ﻋﻨﺼﺮ ‪U‬‬ ‫‪.III‬‬
‫ﺷﺮﻭﻉ ﺷﺪﻩ ﺍﺳﺖ ‪ ،‬ﺑﻪ ﻫﻤﻴﻦ ﺧﺎﻃﺮ ﺗﮓ ﺧﺎﺗﻤﻪ ﺩﻫﻨﺪﻩ ﺁﻥ ﻗﺒﻞ ﺍﺯ ﺗﮓ ﺧﺎﺗﻤﻪ ﺩﻫﻨﺪﻩ ‪ U‬ﻗﺮﺍﺭ ﻣﻲ ﮔﻴﺮﺩ‪.‬‬
‫>‪<U>version <STRONG>2.0</STRONG></U‬‬
‫ﺗﮕﻬﺎﻱ ﻓﺮﻣﺖ ﺩﻫﻲ ﻣﺘﻮﻥ‬

‫>‪<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‬‬ ‫ﺍﺯ ﺭﺩﻩ ﺧﺎﺭﺝ‬
‫>‪<code‬‬ ‫‪Defines computer code text‬‬ ‫ﻧﻤﺎﻳﺶ ﻛﺪﻫﺎﻱ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ‬
‫>‪<kbd‬‬ ‫‪Defines keyboard text‬‬ ‫ﻧﻤﺎﻳﺶ ﻣﺘﻦ ﺑﺼﻮﺭﺕ ﺻﻔﺤﻪ ﻛﻠﻴﺪﻱ‬
‫>‪<samp‬‬ ‫‪Defines sample computer code‬‬ ‫ﻧﻤﺎﻳﺶ ﻛﺪﻫﺎﻱ ﻧﻤﻮﻧﻪ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ‬
‫>‪<tt‬‬ ‫‪Defines teletype text‬‬ ‫ﻧﻤﺎﻳﺶ ﺗﻠﻪ ﺗﺎﻳﭗ‬

‫>‪<var‬‬ ‫‪Defines a variable‬‬ ‫ﻧﻤﺎﻳﺶ ﻣﺘﻐﻴﻴﺮﻫﺎ‬

‫>‪<pre‬‬ ‫‪Defines preformatted text‬‬ ‫ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﺍﺯ ﻗﺒﻞ ﻓﺮﻣﺖ ﺷﺪﻩ‬

‫‪Character Entities‬‬
‫ﺩﺭ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺍﭼﺘﻤﻞ ﮔﺮﻭﻫﻲ ﺍﺯ ﻧﻮﻳﺴﻪ ﻫﺎ )‪ (Character‬ﺩﺍﺭﺍﻱ ﻣﻌﻨﻲ ﺧﺎﺻﻲ ﺑﻮﺩﻩ ) ﻣﺜﻼ ﻧﻮﻳﺴﻪ < ﺷﺮﻭﻉ ﻳﻚ ﺗﮓ ﻭ ﻧﻮﻳﺴﻪ > ﺍﻧﺘﻬﺎﻱ ﻳﻚ ﺗﮓ ﺭﺍ‬
‫ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ‪ ( .‬ﻭ ﺑﺮﺍﻱ ﻧﻤﺎﻳﺶ ﺁﻧﻬﺎ ﺩﺭ ﺻﻔﺤﺎﺗﺘﺎﻥ ﻣﺴﺘﻘﻴﻤﺎ ﻗﺎﺑﻞ ﻣﺼﺮﻑ ﻧﻤﻴﺒﺎﺷﻨﺪ‪ .‬ﺩﺭ ﺍﻳﻦ ﻓﺼﻞ ﺑﺎ ﻓﻬﺮﺳﺖ ﺍﻳﻦ ﻧﻮﻳﺴﻪ ﻫﺎ ﺁﺷﻨﺎ ﺷﺪﻩ ﻭ ﻧﺤﻮﻩ ﺩﺭﺝ‬
‫ﺁﻧﻬﺎ ﺭﺍ ﺑﺎ ﻛﻤﻚ ‪ Character Entities‬ﻓﺮﺍ ﺧﻮﺍﻫﻴﺪ ﮔﺮﻓﺖ‪.‬‬
‫‪Character Entities‬‬
‫ﺩﺭ ﺍﭼﺘﻤﻞ ﺑﻌﻀﻲ ﺍﺯ ﻧﻮﻳﺴﻪ ﻫﺎ ﺩﺍﺭﺍﻱ ﻣﻌﻨﻲ ﺧﺎﺻﻲ ﺑﻮﺩﻩ ﻭ ﺑﺮﺍﻱ ﻧﻤﺎﻳﺶ ﺁﻧﻬﺎ ﺩﺭ ﺻﻔﺤﺎﺗﺘﺎﻥ ﺑﺎﻳﺪ ﺍﺯ ﺑﺮﺍﺑﺮﻫﺎﻱ ﺧﺎﺻﻲ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ‪ .‬ﻳﻚ ‪character‬‬
‫‪ entities‬ﺍﺯ ﺳﻪ ﻗﺴﻤﺖ ﺗﺸﻜﻴﻞ ﻣﻴﺸﻮﺩ‪:‬‬
‫‪ -1‬ﻧﻮﻳﺴﻪ ‪(&) ampersand‬‬

‫‪ -2‬ﻧﺎﻡ ‪ entity‬ﻳﺎ ﻧﻮﻳﺴﻪ ‪ #‬ﻭ ﺳﭙﺲ ﺷﻤﺎﺭﻩ ﻋﺪﺩﻱ ‪entity‬‬
‫‪ - 3‬ﻭ ﻧﻬﺎﻳﺘﺎ ﻧﻮﻳﺴﻪ ‪(;) semicolon‬‬
‫ﺑﺮﺍﻱ ﻣﺜﺎﻝ ﺑﺮﺍﻱ ﻧﻤﺎﻳﺶ ﻧﻮﻳﺴﻪ < ﺩﻭ ﺭﻭﺵ ﻭﺟﻮﺩ ﺩﺍﺭﺩ‪ ،‬ﻣﻴﺘﻮﺍﻧﻴﺪ ﺍﺯ ;‪ &lt‬ﻳﺎ ﺍﺯ ;‪ &#60‬ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ‪ .‬ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ‪ lt‬ﻧﺎﻡ ‪ entity‬ﻭ ‪ 60‬ﺷﻤﺎﺭﻩ‬
‫ﻋﺪﺩﻱ ﺁﻥ ﻣﻴﺒﺎﺷﺪ‪.‬‬
‫ﻣﺰﻳﺖ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﻧﺎﻡ ‪ entity‬ﺩﺭ ﻣﻘﺎﺑﻞ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻤﺎﺭﻩ ﻋﺪﺩﻱ ﺁﻥ ﺳﻬﻮﻟﺖ ﻳﺎﺩﺁﻭﺭﻱ ﺁﻥ ﺍﺯ ﺭﻭﻱ ﻧﺎﻣﺶ ﻣﻴﺒﺎﺷﺪ ﻭ ﻋﻴﺐ ﺁﻥ ﺍﻳﻦ ﺍﺳﺖ ﻛﻪ ﺗﻤﺎﻣﻲ‬
‫ﻣﺮﻭﺭﮔﺮﻫﺎ ﻧﺎﻡ ﮔﺬﺍﺭﻳﻬﺎﻱ ﻣﻮﺟﻮﺩ ﺑﺮﺍﻱ ‪ Entity‬ﻫﺎ ﺭﺍ ﻗﺒﻮﻝ ﻧﺪﺍﺭﻧﺪ ﻭﻟﻲ ﺩﺭ ﻋﻮﺽ ﻫﻤﮕﻲ ﺷﻤﺎﺭﻩ ﻫﺎﻱ ﻋﺪﺩﻱ ‪ entity‬ﻫﺎ ﺭﺍ ﺑﺨﻮﺑﻲ ﻣﻴﺸﻨﺎﺳﻨﺪ‪ .‬ﺗﻮﺟﻪ‬
‫ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ‪ entity‬ﻫﺎ ﺑﻪ ﻛﻮﭼﻚ ﻭ ﺑﺰﺭﮔﻲ ﺣﺮﻭﻑ ﺣﺴﺎﺱ ﻫﺴﺘﻨﺪ ﻭ ﺩﺭ ﻭﺍﻗﻊ ‪ Case Sensitive‬ﻣﻴﺒﺎﺷﻨﺪ‪.‬‬
‫ﭘﺮ ﻛﺎﺭﺑﺮﺩﺗﺮﻳﻦ ‪ character entity‬ﻫﺎ ﺩﺭ ﺍﭼﺘﻤﻞ‪ ،‬ﻧﻮﻳﺴﻪ ﻓﺎﺻﻠﻪ ﻳﺎ ‪ Space‬ﻳﺎ ‪ Blank‬ﻣﻴﺒﺎﺷﺪ ﻭ ﻧﺎﻡ ﺭﺳﻤﻲ ﺁﻥ ‪non-breaking space‬‬
‫ﻣﻴﺒﺎﺷﺪ‪ .‬ﻫﻤﺎﻧﻄﻮﺭ ﻛﻪ ﻣﻴﺪﺍﻧﻴﺪ ﻣﺮﻭﺭﮔﺮﻫﺎ ﻓﺎﺻﻠﻪ ﻫﺎﻱ ﺍﺿﺎﻓﻲ ﺩﺭ ﻣﺘﻦ ﺭﺍ ﺩﺭ ﻧﻈﺮ ﻧﮕﺮﻓﺘﻪ )‪ (truncate spaces‬ﻭ ﻣﺜﻼ ﺍﺯ ‪ 10‬ﻧﻮﻳﺴﻪ ﻓﺎﺻﻠﻪ‪ 9 ،‬ﺗﺎﻱ‬
‫ﺁﻧﺮﺍ ﻧﺎﺩﻳﺪﻩ ﻣﻴﮕﻴﺮﻧﺪ ﻭ ﺑﺮﺍﻱ ﻧﻤﺎﻳﺶ ﻓﺎﺻﻠﻪ ﻫﺎﻱ ﺍﺿﺎﻓﻲ ﺑﺎﻳﺪ ﺍﺯ ;‪ &nbsp‬ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ‪.‬‬
‫ﻓﻬﺮﺳﺖ ﭘﺮﻛﺎﺭﺑﺮﺩﺗﺮﻳﻦ ‪ Character Entities‬ﻫﺎ‬
‫)ﻧﻤﺎﻳﺶ( ‪Result‬‬ ‫)ﺷﺮﺡ( ‪Description‬‬ ‫)ﻧﺎﻡ( ‪Entity Name‬‬ ‫)ﺷﻤﺎﺭﻩ ﻋﺪﺩﻱ( ‪Entity Number‬‬
‫‪non-breaking space‬‬ ‫;‪&nbsp‬‬ ‫;‪&#160‬‬
‫<‬ ‫‪less than‬‬ ‫;‪&lt‬‬ ‫;‪&#60‬‬

‫>‬ ‫‪greater than‬‬ ‫;‪&gt‬‬ ‫;‪&#62‬‬

‫&‬ ‫‪ampersand‬‬ ‫;‪&amp‬‬ ‫;‪&#38‬‬
‫"‬ ‫‪quotation mark‬‬ ‫;‪&quot‬‬ ‫;‪&#34‬‬
‫'‬ ‫‪apostrophe‬‬ ‫;‪&#39‬‬
‫ﭼﻨﺪ ‪ Character Entitie‬ﺑﺎ ﻛﺎﺭﺑﺮﺩﻫﺎﻱ ﻛﻤﺘﺮ‬
‫‪Result‬‬ ‫‪Description‬‬ ‫‪Entity Name‬‬ ‫‪Entity Number‬‬

‫‪¢‬‬ ‫‪cent‬‬ ‫;‪&cent‬‬ ‫;‪&#162‬‬
‫‪£‬‬ ‫‪pound‬‬ ‫;‪&pound‬‬ ‫;‪&#163‬‬
‫‪¥‬‬ ‫‪yen‬‬ ‫;‪&yen‬‬ ‫;‪&#165‬‬
‫§‬ ‫‪section‬‬ ‫;‪&sect‬‬ ‫;‪&#167‬‬
‫©‬ ‫‪copyright‬‬ ‫;‪&copy‬‬ ‫;‪&#169‬‬
‫®‬ ‫‪registered trademark‬‬ ‫;‪&reg‬‬ ‫;‪&#174‬‬
‫×‬ ‫‪multiplication‬‬ ‫;‪&times‬‬ ‫;‪&#215‬‬
‫÷‬ ‫‪division‬‬ ‫;‪&divide‬‬ ‫;‪&#247‬‬
‫ﺑﺮﺍﻱ ﺩﻳﺪﻥ ﻓﻬﺮﺳﺖ ﻛﻞ ‪ Character entity‬ﻫﺎ ﺩﺭ ﺍﭼﺘﻤﻞ ‪ 4‬ﺳﺮﻱ ﺑﻪ ﺍﻳﻦ ﺻﻔﺤﻪ ﺑﺰﻧﻴﺪ‪.‬‬
‫ﭘﻴﻮﻧﺪﻫﺎﻱ ﺍﭼﺘﻤﻞ ) ‪( HTML Links‬‬
‫ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﺎ ﭘﻴﻮﻧﺪﻫﺎ ) ‪ ، ( Links‬ﺗﮓ ﻫﺎﻱ ﻣﺮﺑﻮﻃﻪ ﻣﺨﺼﻮﺻﺎ ﺗﮓ ‪ Anchor‬ﻳﺎ ‪ A‬ﻭ ﻧﺤﻮﻩ ﺑﻪ ﻛﺎﺭ ﮔﻴﺮﻱ ﺁﻧﻬﺎ ﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ‪ ،‬ﺑﻪ ﻳﺎﺩ ﺩﺍﺷﺘﻪ‬
‫ﺑﺎﺷﻴﺪ ﻛﻪ ﺑﺎ ﻛﻤﻚ ﭘﻴﻮﻧﺪﻫﺎ ﺍﺳﺖ ﻛﻪ ﺻﻔﺤﺎﺕ ﻭﺏ ﺑﻪ ﻫﻢ ﻣﺮﺗﺒﻂ ﻣﻴﺸﻮﻧﺪ ﻭ ﻫﻤﺎﻧﻨﺪ ﺗﺎﺭﻱ ﻧﺎﻣﺮﺋﻲ ﺍﻃﻼﻋﺎﺕ ﻭ ﺻﻔﺤﺎﺕ ﻭﺏ ﺭﺍ ﺑﻪ ﻫﻢ ﮔﺮﻩ ﻣﻴﺰﻧﻨﺪ‪.‬‬
‫ﻫﻤﭽﻨﻴﻦ ﺷﻨﺎﺳﻪ ﻫﺎﻱ ﺑﺴﻴﺎﺭ ﻣﻬﻢ ‪ target، href‬ﻭ ‪ name‬ﺗﺸﺮﻳﺢ ﺧﻮﺍﻫﻨﺪ ﺷﺪ‪.‬‬
‫ﺩﺭ ﻣﺤﻴﻂ ﻭﺏ‪ ،‬ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺑﺎ ﻛﻤﻚ ﭘﻴﻮﻧﺪﻫﺎ ﺑﻪ ﻳﻜﺪﻳﮕﺮ ﻣﺘﺼﻞ )‪ (Link‬ﻣﻴﺸﻮﻧﺪ‪ .‬ﺍﺻﻄﻼﺡ ﺍﺑﺮﻣﺘﻦ )‪ (Hyper Text‬ﺩﺭ ﻣﻘﺎﺑﻞ ﻣﺘﻦ ﺧﻄﻲ‬
‫)‪ (Linear‬ﻗﺮﺍﺭ ﺩﺍﺭﺩ‪ .‬ﺩﺭ ﻳﻚ ﻣﺘﻦ ﻣﻌﻤﻮﻟﻲ ﺧﻮﺍﻧﺪﻥ ﺑﻪ ﺷﻜﻞ ﺧﻄﻲ ﻭ ﺍﺯ ﺍﺑﺘﺪﺍ ﺑﻪ ﺍﻧﺘﻬﺎ ﻣﻴﺒﺎﺷﺪ ﻭ ﺩﺭ ﻣﻘﺎﺑﻞ ﺩﺭ ﻳﻚ ﻣﺘﻦ ﻣﺨﺘﻠﻂ )‪ (Hyper‬ﺑﺎ ﻛﻤﻚ‬
‫ﭘﻴﻮﻧﺪﻫﺎ ﻣﻴﺘﻮﺍﻥ ﺍﺯ ﻳﻚ ﻣﺘﻦ ﺑﻪ ﻫﺮ ﺻﻔﺤﻪ ﺩﻳﮕﺮ ﺩﺭ ﻭﺏ ﻣﺘﺼﻞ ﺷﺪ‪ .‬ﺍﻳﻦ ﻛﺎﺭ ﺑﺎ ﻛﻤﻚ ﻋﻨﺼﺮﻱ ﻣﻌﻠﻮﻡ ﺍﻟﺤﺎﻝ! ﺑﻪ ﻧﺎﻡ ‪ A‬ﻳﺎ ‪ Anchor‬ﻣﻴﺴﺮ ﻣﻴﮕﺮﺩﺩ‪.‬‬
‫ﻣﺜﺎﻟﻬﺎ‬
‫ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪﻫﺎ ﺑﺎ ﻛﻤﻚ ﻣﺘﻦ‬

‫ﺍﻳﻦ ﻣﺜﺎﻝ ﭼﮕﻮﻧﮕﻲ ﺍﻳﺠﺎﺩ ﻳﻚ ﭘﻴﻮﻧﺪ‪ ،‬ﻟﻴﻨﻚ ﻳﺎ ‪ Link‬ﺭﺍ ﺩﺭ ﻳﻚ ﻣﺘﻦ ﺍﭼﺘﻤﻞ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ‪.‬‬
‫ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪﻫﺎ ﺑﺎ ﻛﻤﻚ ﺗﺼﺎﻭﻳﺮ‬

‫ﺍﻳﻦ ﻣﺜﺎﻝ ﭼﮕﻮﻧﮕﻲ ﺍﻳﺠﺎﺩ ﻳﻚ ﭘﻴﻮﻧﺪ‪ ،‬ﻟﻴﻨﻚ ﻳﺎ ‪ Link‬ﺭﺍ ﺑﺎ ﻛﻤﻚ ﻳﻚ ﺗﺼﻮﻳﺮ )‪ (image‬ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ‪.‬‬

‫ﻣﺜﺎﻟﻬﺎﻱ ﺑﻴﺸﺘﺮ‬
‫ﺗﮓ ‪ 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‬‬

‫ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ ‪ 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‬ﻭ ﻳﺎ ‪ ...‬ﺩﺭ ﻫﻤﻴﻦ ﺻﻔﺤﻪ ﺩﺭ ﺩﻭ ﻣﻮﺭﺩ ﺍﺯ ﭘﻴﻮﻧﺪﻫﺎﻱ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺷﺪﻩ ﺍﺳﺖ‪ ،‬ﺁﻳﺎ ﻣﻴﺘﻮﺍﻧﻴﺪ ﺁﻧﻬﺎ ﺭﺍ‬
‫ﺑﻴﺎﺑﻴﺪ؟!‬
‫* ﺍﮔﺮ ﻣﺮﻭﺭﮔﺮ ﻧﺘﻮﺍﻧﺪ ﻳﻚ ﭘﻴﻮﻧﺪ ﻧﺎﻣﮕﺬﺍﺭﻱ ﺷﺪﻩ ﺭﺍ ﺑﻴﺎﺑﺪ ﺍﺑﺘﺪﺍﻱ ﺻﻔﺤﻪ ﻣﻘﺼﺪ ﺭﺍ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﺪ ﺩﺍﺩ‪.‬‬

‫ﺑﺎﺯ ﻛﺮﺩﻥ ﭘﻴﻮﻧﺪ ﺩﺭ ﭘﻨﺠﺮﻩ ﺍﻱ ﺟﺪﻳﺪ‬

‫ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪﻫﺎﺋﻲ ﻛﻪ ﺩﺭ ﭘﻨﺠﺮﻩ ﺍﻱ ﺟﺪﻳﺪ ﺑﺎﺯ ﻣﻴﺸﻮﻧﺪ ﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ‪ .‬ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﺑﺎﺯﺩﻳﺪﻛﻨﻨﺪﮔﺎﻥ ﺳﺎﻳﺘﺘﺎﻥ ﺭﺍ ﺍﺯ ﺩﺳﺖ ﻧﺨﻮﺍﻫﻴﺪ ﺩﺍﺩ‪.‬‬
‫ﺍﺭﺟﺎﻉ ﺑﻪ ﻗﺴﻤﺖ ﺩﻳﮕﺮﻱ ﺍﺯ ﺻﻔﺤﻪ‬

‫ﺑﺎ ﻛﻤﻚ ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺗﻌﺮﻳﻒ ﭘﻴﻮﻧﺪﻫﺎﻱ ﻧﺎﻡ ﮔﺬﺍﺭﻱ ﺷﺪﻩ ﺭﺍ ﻓﺮﺍﮔﺮﻓﺘﻪ ﻭ ﭼﮕﻮﻧﮕﻲ ﺍﺭﺟﺎﻉ ﺑﻪ ﻗﺴﻤﺘﻬﺎﻱ ﻣﺨﺘﻠﻒ ﻳﻚ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﺭﺍ ﻓﺮﺍ ﺧﻮﺍﻫﻴﺪ‬
‫ﮔﺮﻓﺖ‪.‬‬
‫ﺭﻫﺎﺋﻲ ﺍﺯ ﺷﺮ ﻓﺮﻳﻢ ﻫﺎ‬

‫ﺍﻳﻦ ﻣﺜﺎﻝ ﻛﺎﺭﺑﺮﺩ ﺷﻨﺎﺳﻪ ‪ 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> &nbsp‬‬
‫ﺑﺴﻴﺎﺭ ﻣﺸﻜﻞ ﻣﻴﺒﺎﺷﺪ ﻭ ﺑﻪ ﻫﻤﻴﻦ ﺩﻟﻴﻞ ﺯﺑﺎﻥ ﺍﭼﺘﻤﻞ ﺗﮕﻬﺎﻱ ﺧﺎﺻﻲ ﺭﺍ ﺑﺮﺍﻱ ﺳﺎﺧﺘﻦ ﺍﻃﻼﻋﺎﺗﻲ ﻛﻪ ﺫﺍﺗﺎ ﺟﺪﻭﻟﻲ )ﺳﻄﺮﻱ ﻭ ﺳﺘﻮﻧﻲ( ﻫﺴﺘﻨﺪ ﺩﺭ ﻧﻈﺮ‬
‫ﮔﺮﻓﺘﻪ ﺍﺳﺖ‪ .‬ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﺎ ﺍﻟﻤﺎﻥ ﺟﺪﻭﻝ ) ‪ ، ( Table‬ﺳﻠﻮﻟﻬﺎ ﻳﺎ ﺧﺎﻧﻪ ﻫﺎ‪ ،‬ﻣﺮﺯ ﻭ ‪ border‬ﺩﺭ ﺟﺪﺍﻭﻝ ﻭ ﺗﮓ ﻫﺎﻱ ﻣﺮﺑﻮﻃﻪ ﻣﺨﺼﻮﺻﺎ ﺗﮕﻬﺎﻱ‬

‫‪ 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‬‬

‫ﺟﺪﻭﻟﻬﺎ ﻭ ﺷﻨﺎﺳﻪ ‪ border‬ﻭ ‪: dir‬‬
‫•ﺩﺭ ﻣﺜﺎﻝ ﺑﺎﻻ ﺷﻨﺎﺳﻪ ‪ border‬ﻣﺮﺯ ﺟﺪﻭﻝ ﺭﺍ ﻣﺸﺨﺺ ﻣﻴﻜﻨﺪ‪ ،‬ﻣﻘﺪﺍﺭ ‪ 1‬ﻣﺮﺯﻱ ﺑﺎ ﺿﺨﺎﻣﺖ ﻳﻚ ﭘﻴﻜﺴﻞ ﺭﺍ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﺪ ﺩﺍﺩ ﻭ ﻣﻘﺪﺍﺭ ﺻﻔﺮ ﺟﺪﻭﻝ ﺭﺍ ﺑﺪﻭﻥ ﻣﺮﺯ‬
‫ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﺪ ﺩﺍﺩ‪ .‬ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺣﺎﻟﺖ ﭘﻴﺶ ﻓﺮﺽ ﻳﻌﻨﻲ ﺟﺪﻭﻟﻲ ﺑﺪﻭﻥ ﺷﻨﺎﺳﻪ ‪ ، border‬ﺟﺪﺍﻭﻝ ﺑﺪﻭﻥ ﻣﺮﺯ ﺭﺍ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﺪ ﺩﺍﺩ‪.‬‬
‫•ﺩﺭ ﻣﺜﺎﻝ ﺑﺎﻻ ﺷﻨﺎﺳﻪ ‪ dir‬ﻳﺎ ‪ direction‬ﻭ ﻣﻘﺪﺍﺭ ‪ rtl‬ﺑﺮﺍﻱ ﺁﻥ‪ ،‬ﺳﺒﺐ ﺗﻌﻴﻴﻦ ﻧﻤﺎﻳﺶ ﺟﻬﺖ ﻣﺘﻮﻥ ﺍﺯ ﺭﺍﺳﺖ ﺑﻪ ﭼﭗ ﺧﻮﺍﻫﺪ ﺷﺪ ﻭ ﭼﻮ ﻥ ﺩﺭ ﺩﺍﺧﻞ ﺗﻚ ‪table‬‬
‫ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﺍﺳﺖ ﺍﻳﻦ ﺧﺎﺻﻴﺖ ﺑﻪ ﺗﻤﺎﻣﻲ ﺳﻠﻮﻟﻬﺎﻱ ﺟﺪﻭﻝ ﻣﻨﺘﻘﻞ ﺧﻮﺍﻫﺪ ﺷﺪ‪.‬‬
‫•ﺍﮔﺮ ﺟﺪﻭﻝ ﺣﺎﻭﻱ ﻣﺘﻮﻥ ﻻﺗﻴﻦ ﺍﺳﺖ ﻧﻴﺎﺯﻱ ﺑﻪ ﻗﻴﺪ ‪ dir=ltr‬ﻧﻴﺴﺖ ﻭ ﺑﻪ ﺻﻮﺭﺕ ﭘﻴﺶ ﻓﺮﺽ ﺍﻃﻼﻋﺎﺕ ﺍﺯ ﭼﭗ ﺑﻪ ﺭﺍﺳﺖ ﭼﻴﺪﻩ ﺧﻮﺍﻫﻨﺪ ﺷﺪ‪.‬‬
‫•ﺳﺎﺩﻩ ﺗﺮﻳﻦ ﺟﺪﻭﻝ ﻣﻤﻜﻦ ﺩﺭ ﺍﭼﺘﻤﻞ‪ ،‬ﺟﺪﻭﻟﻲ ﺍﺳﺖ ﺑﺎ ﻳﻚ ﺳﻄﺮ ﻭ ﻳﻚ ﺳﺘﻮﻥ! )>‪(<table/><tr/><td/>Hi<td><tr><table‬‬
‫ﺳﺮﺳﺘﻮﻥ ﺩﺭ ﺟﺪﺍﻭﻝ )‪(Headings‬‬
‫ﺳﺮﺳﺘﻮﻧﻬﺎ ﺩﺭ ﺟﺪﺍﻭﻝ ﺑﺎ ﻛﻤﻚ ﺗﮓ >‪ <th‬ﺗﻌﺮﻳﻒ ﻣﻴﺸﻮﻧﺪ‪ .‬ﻣﺜﺎﻝ ﺯﻳﺮ ﻧﺤﻮﻩ ﺗﻌﺮﻳﻒ ﺳﺮﺳﺘﻮﻧﻬﺎ ﺭﺍ ﺩﺭ ﺟﺪﺍﻭﻝ ﻧﻤﺎﻳﺶ ﻣﻴﺪﻫﺪ‪:‬‬
‫ﻛﺪ ﺍﭼﺘﻤﻞ ﺟﺪﻭﻟﻲ ﺑﺎ ﺳﻪ ﺳﻄﺮ ﻭ ﺳﻪ ﺳﺘﻮﻥ‬ ‫ﻧﻤﺎﻳﺶ ﺟﺪﻭﻝ ﺭﻭﺑﺮﻭ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ‬
‫>‪<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‬‬

‫>‪</tr‬‬
‫ﻫﻤﺎﻧﻄﻮﺭﻳﻜﻪ ﻣﺸﺎﻫﺪﻩ ﻣﻴﻜﻨﻴﺪ ﺳﺮ ﺳﺘﻮﻧﻬﺎ ﻣﺎﻧﻨﺪ ﺳﻠﻮﻟﻬﺎﻱ ﻣﻌﻤﻮﻟﻲ ﺟﺪﺍﻭﻝ ﺗﻌﺮﻳﻒ ﻣﻴﺸﻮﻧﺪ ﻭ ﻓﻘﻂ ﺑﻪ ﺟﺎﻱ ‪ td‬ﺍﺯ ‪ th‬ﺍﺳﺘﻔﺎﺩﻩ ﺷﺪﻩ ﻭ ﻟﻲ ﺩﺭ ﻧﻤﺎﻳﺶ‬
‫ﻣﺤﺘﻮﺍﻱ ﺳﺮ ﺳﺘﻮﻧﻬﺎ ‪ bold‬ﻳﺎ ﺗﻮﭘﺮ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﻨﺪ ﺷﺪ‪.‬‬
‫ﺧﺎﻧﻪ ﻫﺎﻱ ﺧﺎﻟﻲ ﺩﺭ ﺟﺪﺍﻭﻝ )‪(Empty Cells‬‬
‫ﺍﮔﺮ ﻣﺤﺘﻮﺍﻱ ﺧﺎﻧﻪ ﺍﻱ ﺍﺯ ﻳﻚ ﺟﺪﻭﻝ ﺧﺎﻟﻲ ﺑﺎﺷﺪ ﭼﻪ ﭼﻴﺰﻱ ﺑﺎﻳﺪ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺷﻮﺩ؟ ﺑﺴﺘﻪ ﺑﻪ ﻣﺮﻭﺭﮔﺮﻱ ﻛﻪ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻴﺪ ﻧﺘﻴﺠﻪ ﻧﻤﺎﻳﺶ ﻣﺘﻔﺎﻭﺕ‬
‫ﺍﺳﺖ ﻭ ﻣﺜﻼ ﺩﺭ ﻣﺜﺎﻝ ﺯﻳﺮ ﺧﺎﻧﻪ ﺧﺎﻟﻲ ﺟﺪﻭﻝ ﺑﺪﻭﻥ ﻣﺮﺯ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﺧﻮﺍﻫﺪ ﺷﺪ‪:‬‬
‫ﻛﺪ ﺍﭼﺘﻤﻞ ﺟﺪﻭﻟﻲ ﺑﺎ ﺩﻭ ﺳﻄﺮ ﻭ ﺩﻭ ﺳﺘﻮﻥ‬ ‫ﻧﻤﺎﻳﺶ ﺟﺪﻭﻝ ﺭﻭﺑﺮﻭ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ‬

‫>‪<tr‬‬
‫>‪</td‬ﺭﺩﻳﻒ ‪ ،1‬ﺳﻠﻮﻝ ‪<td>1‬‬
‫>‪</td‬ﺭﺩﻳﻒ ‪ ،1‬ﺳﻠﻮﻝ ‪<td>2‬‬ ‫ﺭﺩﻳﻒ ‪ ،1‬ﺳﻠﻮﻝ ‪ 1‬ﺭﺩﻳﻒ ‪ ،1‬ﺳﻠﻮﻝ ‪2‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬ ‫ﺭﺩﻳﻒ ‪ ،2‬ﺳﻠﻮﻝ ‪1‬‬
‫>‪</td‬ﺭﺩﻳﻒ ‪ ،2‬ﺳﻠﻮﻝ ‪<td>1‬‬
‫>‪<td></td‬‬
‫>‪</tr‬‬
‫ﺩﺭ ﺍﻳﻨﮕﻮﻧﻪ ﻣﻮﺍﺭﺩ ﺑﺮﺍﻱ ﺭﻓﻊ ﻣﺸﻜﻞ ﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﺍﺯ );‪ non-breaking space (&nbsp‬ﻳﺎ ﻫﻤﺎﻥ ﻧﻮﻳﺴﻪ ﻭ ﻛﺎﺭﺍﻛﺘﺮ ﻗﺎﺻﻠﻪ ﻭ ﺑﻼﻧﻚ‬
‫ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ ﻭ ﺩﺭ ﻣﻮﺭﺩ ﻣﺜﺎﻝ ﺫﻛﺮ ﺷﺪﻩ ﻣﺮﻭﺭﮔﺮ ﺟﺪﻭﻝ ﺭﺍ ﺑﻪ ﺷﻜﻞ ﺯﻳﺮ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﺪ ﺩﺍﺩ‪:‬‬
‫ﻛﺪ ﺍﭼﺘﻤﻞ ﺟﺪﻭﻟﻲ ﺑﺎ ﺩﻭ ﺳﻄﺮ ﻭ ﺩﻭ ﺳﺘﻮﻥ‬ ‫ﻧﻤﺎﻳﺶ ﺟﺪﻭﻝ ﺭﻭﺑﺮﻭ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ‬

‫>‪<tr‬‬
‫>‪</td‬ﺭﺩﻳﻒ ‪ ،1‬ﺳﻠﻮﻝ ‪<td>1‬‬
‫>‪</td‬ﺭﺩﻳﻒ ‪ ،1‬ﺳﻠﻮﻝ ‪<td>2‬‬
‫ﺭﺩﻳﻒ ‪ ،1‬ﺳﻠﻮﻝ ‪ 1‬ﺭﺩﻳﻒ ‪ ،1‬ﺳﻠﻮﻝ ‪2‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬ ‫ﺭﺩﻳﻒ ‪ ،2‬ﺳﻠﻮﻝ ‪1‬‬
‫>‪</td‬ﺭﺩﻳﻒ ‪ ،2‬ﺳﻠﻮﻝ ‪<td>1‬‬
‫>‪<td> </td‬‬
‫>‪</tr‬‬

‫ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺍﻳﻨﺒﺎﺭ ﻣﺮﺯﻫﺎﻱ ﺧﺎﻧﻪ ﺧﺎﻟﻲ ﺟﺪﻭﻝ ﺑﺪﺭﺳﺘﻲ ﺗﺮﺳﻴﻢ ﮔﺮﺩﻳﺪﻩ ﺍﻧﺪ‪.‬‬
‫ﭼﻨﺪ ﻧﻜﺘﻪ ﺍﺳﺎﺳﻲ ﺩﺭ ﻣﻮﺭﺩ ﺟﺪﺍﻭﻝ‪:‬‬
‫• ﺩﺭ ﺟﺪﺍﻭﻝ‪ ،‬ﺭﺩﻳﻔﻬﺎ‪ ،‬ﺧﺎﻧﻪ ﻫﺎ ﻭ ﺳﺮ ﺳﺘﻮﻧﻬﺎ ﺍﺯ ﺗﻌﺪﺍﺩ ﺯﻳﺎﺩﻱ ﺍﺯ ﺷﻨﺎﺳﻪ ﻫﺎ ﻣﻴﺘﻮﺍﻧﻴﺪ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ ﻛﻪ ﺷﺮﺡ ﻫﻤﮕﻲ ﺁﻧﻬﺎ ﺍﺯ ﺣﻮﺻﻠﻪ ﺍﻳﻦ ﺩﻭﺭﻩ ﻣﻘﺪﻣﺎﺗﻲ ﺧﺎﺭﺝ ﺍﺳﺖ ﻭ‬
‫ﺗﻮﺻﻴﻪ ﻣﻴﺸﻮﺩ ﻛﻪ ﺍﺯ ﻣﺜﺎﻟﻬﺎﻱ ﺯﻳﺮ ﻭ ﺟﺪﻭﻝ ﻭﺍﻗﻊ ﺩﺭ ﺍﻧﺘﻬﺎﻱ ﺍﻳﻦ ﺻﻔﺤﻪ ﺑﺮﺍﻱ ﻣﻄﺎﻟﻌﻪ ﻫﺮ ﭼﻪ ﺑﻴﺸﺘﺮ ﺩﺭ ﻣﻮﺭﺩ ﺟﺰﺋﻴﺎﺕ ﺷﻨﺎﺳﻪ ﻫﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺷﻮﺩ‪.‬‬
‫•ﺷﻨﺎﺳﻪ ‪ dir‬ﻗﺎﺑﻞ ﺍﺳﺘﻔﺎﺩﻩ ﺩﺭ ﺑﺴﻴﺎﺭﻱ ﺍﺯ ﺗﮕﻬﺎ ) ﻣﺜﻼ ‪ ( th ، td ،tr ،table‬ﻣﻴﺒﺎﺷﺪ‪ .‬ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ ‪ dir‬ﻭ ﻣﻘﺪﺍﺭ ‪ rtl‬ﺑﺮﺍﻱ ﺁﻥ‪ ،‬ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ‬
‫ﻓﺎﺭﺳﻲ ﺍﺯ "ﺭﺍﺳﺖ ﺑﻪ ﭼﭗ" ﺗﻌﻴﻴﻦ ﻣﻴﮕﺮﺩﺩ‪ .‬ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﻣﻘﺪﺍﺭ ﺷﻨﺎﺳﻪ ‪ dir‬ﺑﻪ ﺻﻮﺭﺕ ﻣﻮﺭﻭﺛﻲ ﺍﺯ ‪ table‬ﺑﻪ ‪ tr‬ﻭ ‪ th‬ﻭ ﺍﺯ ‪ tr‬ﻭ ‪ th‬ﺑﻪ ‪ td‬ﺧﻮﺍﻫﺪ‬
‫ﺭﺳﻴﺪ‪.‬ﻣﺜﻼ ﺑﺮﺍﻱ ﺗﻌﻴﻴﻦ ﻣﻘﺪﺍﺭ ‪ rtl‬ﺑﺮﺍﻱ ﺗﻤﺎﻣﻲ ﺧﺎﻧﻪ ﻫﺎﻱ ﻳﻚ ﺟﺪﻭﻝ ﻛﺎﻓﻲ ﺍﺳﺖ ﻛﻪ ﻓﻘﻂ ﺷﻨﺎﺳﻪ ﻣﺰﺑﻮﺭ ﺭﺍ ﺩﺭ ﺗﮓ ‪ table‬ﻗﻴﺪ ﻛﻨﻴﺪ ﻭ ﻧﻴﺎﺯﻱ ﺑﻪ ﻗﻴﺪ ﺁﻥ ﺩﺭ ﺗﻤﺎﻣﻲ‬
‫ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﻭﻝ ﻧﻴﺴﺖ‪ .‬ﺍﻟﺒﺘﻪ ﻣﻴﺘﻮﺍﻧﻴﺪ ﻛﻪ ﺩﺭ ﻣﻮﺭﺩ ﻳﻚ ﺭﺩﻳﻒ ﺧﺎﺹ ﻭ ﻳﺎ ﻳﻚ ﺧﺎﻧﻪ ﺧﺎﺹ ﺷﻨﺎﺳﻪ ‪ dir‬ﺭﺍ ﻣﻮﺭﺩﻱ ﺗﻌﻴﻴﻦ ﻛﻨﻴﺪ‪.‬‬
‫ﻣﺮﺯ ﺩﺭ ﺟﺪﺍﻭﻝ‬
‫ﺍﻳﻦ ﻣﺜﺎﻝ ﻛﺎﺭﺑﺮﺩ ﺷﻨﺎﺳﻪ ‪ border‬ﺭﺍ ﺩﺭ ﻧﻤﺎﻳﺶ ﺟﺪﺍﻭﻝ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ‪.‬‬
‫ﺗﻌﻴﻴﻦ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻦ ﺩﺭ ﺧﺎﻧﻪ ﻫﺎﻱ ﻳﻚ ﺟﺪﻭﻝ‬

‫ﺍﻳﻦ ﻣﺜﺎﻝ ﻛﺎﺭﺑﺮﺩ ﺷﻨﺎﺳﻪ ‪ dir‬ﺍﺳﺖ ﺩﺭ ﺗﻌﻴﻴﻦ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻦ ﺩﺭ ﺧﺎﻧﻪ ﻫﺎﻱ ﻳﻚ ﺟﺪﻭﻝ‪.‬‬
‫ﻋﻨﻮﺍﻥ ﺟﺪﺍﻭﻝ ﻭ ﺗﮓ ‪caption‬‬

‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺗﮓ ‪ caption‬ﺩﺭ ﺗﻌﺮﻳﻒ ﺟﺪﺍﻭﻝ‬
‫ﺗﻮﺳﻌﻪ ﺳﻄﺮﻱ ﻳﺎ ﺳﺘﻮﻧﻲ ﺩﺭ ﺟﺪﺍﻭﻝ‬

‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺷﻨﺎﺳﻪ ﻫﺎﻱ ‪ colspan‬ﻭ ‪ rowspan‬ﻭ ﺍﺩﻏﺎﻡ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ ﺑﻪ ﺻﻮﺭﺕ ﺳﻄﺮﻱ ﻳﺎ ﺳﺘﻮﻧﻲ‬
‫ﺟﺪﻭﻟﻲ ﺑﺎ ﻣﺤﺘﻮﻳﺎﺕ ﻣﺨﺘﻠﻒ‬

‫ﻣﺤﺘﻮﻱ ﻳﻚ ﺧﺎﻧﻪ ﺟﺪﻭﻝ ﺗﻘﺮﻳﺒﺎ ﻣﻴﺘﻮﺍﻧﺪ ﻫﺮ ﻋﻨﺼﺮ ﺍﭼﺘﻤﻠﻲ ﺑﺎﺷﺪ‪.‬‬
‫ﻓﺎﺻﻠﻪ ﮔﺬﺍﺭﻱ ﺑﻴﻦ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ‬

‫ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺍﻳﺠﺎﺩ ﻓﺎﺻﻠﻪ ﺑﻴﻦ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﻭﻝ ﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ‪(cellspacing).‬‬

‫ﻻﻳﻪ ﮔﺬﺍﺭﻱ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﻭﻝ‬

‫ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺍﻳﺠﺎﺩ ﻓﺎﺻﻠﻪ ﺧﺎﻟﻲ ﺑﻴﻦ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﻭﻝ ﻭ ﻣﺮﺯ ﺁﻧﻬﺎ ﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ‪(cellpadding).‬‬
‫ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﻳﺎ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﻛﻞ ﻳﻚ ﺟﺪﻭﻝ‬

‫ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﻳﺎ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﺳﺮﺍﺳﺮﻱ ﺟﺪﺍﻭﻝ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ ﻫﺎﻱ ‪ bgcolor‬ﻭ ‪background‬‬
‫ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﻳﺎ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﻳﻚ ﻳﺎ ﭼﻨﺪ ﺧﺎﻧﻪ ﺍﺯ ﺟﺪﻭﻝ‬

‫ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﻳﺎ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﺩﺭ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ ﻫﺎﻱ ‪ bgcolor‬ﻭ ‪background‬‬
‫ﺗﺮﺍﺯ ﺑﻨﺪﻱ ﻣﺤﺘﻮﺍ ﺩﺭ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ‬

‫ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺗﺮﺍﺯﺑﻨﺪﻱ ﻣﺤﺘﻮﺍﻱ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ "‪ "align‬ﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ‪.‬‬
‫ﺷﻨﺎﺳﻪ ‪ frame‬ﺩﺭ ﺟﺪﺍﻭﻝ‬

‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻛﺎﺭﺑﺮﺩ ﺷﻨﺎﺳﻪ "‪ "frame‬ﺩﺭ ﺍﻟﻤﺎﻥ ‪ table‬ﺟﻬﺖ ﺗﻌﻴﻴﻦ ﺷﻜﻞ ﻣﺮﺯ ﺟﺪﺍﻭﻝ‪.‬‬
‫ﺗﺮﺍﺯ ﺑﻨﺪﻱ ﻣﺤﺘﻮﺍ ﺩﺭ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ‬

‫ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺗﺮﺍﺯﺑﻨﺪﻱ ﻣﺤﺘﻮﺍﻱ ﺧﺎﻧﻪ ﻫﺎﻱ ﺟﺪﺍﻭﻝ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ "‪ "align‬ﻭ "‪ "valign‬ﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ‪.‬‬
‫‪ ...‬ﻓﻘﻂ ﺗﺼﻮﺭ ﻛﻦ‪...‬‬

‫ﻣﺜﺎﻟﻲ ﻛﺎﻣﻠﺘﺮ ﻭ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ ‪ dir‬ﺩﺭ ﺟﺪﺍﻭﻝ‬
‫ﺗﮕﻬﺎﻱ ﺟﺪﺍﻭﻝ‬
‫‪0B‬‬
‫>‪<table‬‬ ‫‪Defines a table‬‬ ‫ﺗﻌﺮﻳﻒ ﺟﺪﻭﻝ‬
‫>‪<th‬‬ ‫‪Defines a table header‬‬ ‫ﺗﻌﺮﻳﻒ ﺳﺮﺳﺘﻮﻥ ﺩﺭ ﺟﺪﺍﻭﻝ‬
‫>‪<tr‬‬ ‫‪Defines a table row‬‬ ‫ﺗﻌﺮﻳﻒ ﺭﺩﻳﻒ ﻫﺎ ﺩﺭ ﺟﺪﺍﻭﻝ‬
‫>‪<td‬‬ ‫‪Defines a table cell‬‬ ‫ﺗﻌﺮﻳﻒ ﺳﻠﻮﻝ ﻳﺎ ﺧﺎﻧﻪ ﻫﺎﻱ ﻳﻚ ﺟﺪﻭﻝ‬
‫>‪<caption‬‬ ‫‪Defines a table caption‬‬ ‫ﺗﻌﺮﻳﻒ ﻋﻨﻮﺍﻥ ﺟﺪﻭﻝ‬

‫ﻓﺮﻳﻤﻬﺎ ) ‪( Frames‬‬
‫ﺑﺎ ﻛﻤﻚ ﻓﺮﻳﻤﻬﺎ ﻗﺎﺩﺭ ﺑﻪ ﻧﻤﺎﻳﺶ ﻫﻤﺰﻣﺎﻥ ﺑﻴﺶ ﺍﺯ ﻳﻚ ﺻﻔﺤﻪ ﻭﺏ ﺩﺭ ﭘﻨﺠﺮﻩ ﻣﺮﻭﺭﮔﺮ ﺧﻮﺍﻫﻴﺪ ﺷﺪ‪ .‬ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﺎ ﻣﻔﺎﻫﻴﻢ ﻓﺮﻳﻢ ) ‪ ( Frame‬ﻭ ﺗﮓ‬
‫ﻫﺎﻱ ﻣﺮﺑﻮﻃﻪ ﻣﺨﺼﻮﺻﺎ ﺗﮕﻬﺎﻱ ‪ Frame‬ﻭ ‪ Frameset‬ﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ‪.‬‬
‫ﻣﺠﻤﻮﻋﻪ ﻓﺮﻳﻤﻬﺎﻱ ﻋﻤﻮﺩﻱ‬

‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺍﻳﺠﺎﺩ ﻣﺠﻤﻮﻋﻪ ﻓﺮﻳﻤﻬﺎﻱ ﻋﻤﻮﺩﻱ ﺗﻮﺳﻂ ﺗﮓ ﻫﺎﻱ ‪ frameset‬ﻭ ‪frame‬‬
‫ﻣﺠﻤﻮﻋﻪ ﻓﺮﻳﻤﻬﺎﻱ ﺍﻓﻘﻲ‬

‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺍﻳﺠﺎﺩ ﻣﺠﻤﻮﻋﻪ ﻓﺮﻳﻤﻬﺎﻱ ﺍﻓﻘﻲ ﺗﻮﺳﻂ ﺗﮓ ﻫﺎﻱ ‪ frameset‬ﻭ ‪frame‬‬
‫ﻓﺮﻳﻤﻬﺎ )‪(Frames‬‬
‫ﺑﺎ ﻛﻤﻚ ﻓﺮﻳﻤﻬﺎ ﻗﺎﺩﺭ ﺑﻪ ﻧﻤﺎﻳﺶ ﻫﻤﺰﻣﺎﻥ ﺑﻴﺶ ﺍﺯ ﻳﻚ ﺻﻔﺤﻪ ﻭﺏ ﺩﺭ ﭘﻨﺠﺮﻩ ﻣﺮﻭﺭﮔﺮ ﺧﻮﺍﻫﻴﺪ ﺷﺪ‪ .‬ﻫﺮ ﺻﻔﺤﻪ ﻳﺎ ﺩﺭﻳﭽﻪ‪ ،‬ﻓﺮﻳﻢ )‪ (frame‬ﻧﺎﻣﻴﺪﻩ ﺷﺪﻩ‬
‫ﻭ ﻓﺮﻳﻤﻬﺎ ﻛﺎﻣﻼ ﻣﺴﺘﻘﻞ ﺍﺯ ﻫﻢ ﻣﻴﺒﺎﺷﻨﺪ‪ .‬ﻣﺤﺘﻮﺍﻱ ﻫﺮ ﻓﺮﻳﻢ ﻫﻢ ﻣﻴﺘﻮﺍﻧﺪ ﻫﺮ ﺻﻔﺤﻪ ﻳﺎ ﻭﺏ ﺳﺎﻳﺘﻲ ﺑﺎﺷﺪ‪ .‬ﻫﺮ ﭼﻨﺪ ﻛﻪ ﻓﺮﻳﻤﻬﺎ ﻃﺮﺍﺣﻲ ﺳﺎﻳﺘﻬﺎﻱ ﻛﻮﭼﻚ‬
‫ﻭ ﻣﺘﻮﺳﻂ ﺭﺍ ﺑﺴﻴﺎﺭ ﺁﺳﺎﻥ ﻣﻴﻜﻨﻨﺪ ﻭﻟﻲ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺁﻧﻬﺎ ﺩﺭ ﻛﺎﺭﻫﺎﻱ ﺣﺮﻓﻪ ﺍﻱ ﺗﻮﺻﻴﻪ ﻧﻤﻴﺸﻮﺩ‪).‬ﺑﻪ ﺟﺰ ﺩﺭ ﻣﻮﺍﺭﺩ ﺧﺎﺹ(‬
‫ﻣﻌﺎﻳﺐ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﻓﺮﻳﻤﻬﺎ‪:‬‬
‫ﻣﻮﺗﻮﺭﻫﺎﻱ ﺟﺴﺘﺠﻮ ﺑﺎ ﺻﻔﺤﺎﺕ ﻃﺮﺍﺣﻲ ﺷﺪﻩ ﺑﺎ ﻓﺮﻳﻤﻬﺎ ﻣﺸﻜﻞ ﺩﺍﺭﻧﺪ‪.‬‬ ‫•‬

‫ﭼﺎپ ﻭ ‪ print‬ﺻﻔﺤﺎﺗﻲ ﻛﻪ ﺍﺯ ﻓﺮﻳﻤﻬﺎ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻨﺪ ﻣﺸﻜﻞ ﺍﺳﺖ‪.‬‬ ‫•‬
‫ﺻﻔﺤﺎﺗﻲ ﻛﻪ ﺍﺯ ﻓﺮﻳﻤﻬﺎ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻨﺪ ﻣﻌﻤﻮﻻ ﻣﺒﺘﺪﻱ ﺑﻮﺩﻥ ﻃﺮﺍﺡ ﺳﺎﻳﺖ ﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ!!‬ ‫•‬
‫ﺍﮔﺮ ﻣﻴﺨﻮﺍﻫﻴﺪ ﺻﻔﺤﺎﺕ ﻧﺴﺒﺘﺎ ﺩﻳﻨﺎﻣﻴﻚ ﺳﺎﺧﺘﻪ ﻭ ﺑﺎ ﻫﻴﭻ ﺯﺑﺎﻥ ﺍﺳﻜﺮﻳﭙﺘﻲ ﻣﺎﻧﻨﺪ ‪ PHP‬ﻳﺎ ‪ ASP‬ﺁﺷﻨﺎﺋﻲ ﻧﺪﺍﺭﻳﺪ ﻓﺮﻳﻤﻬﺎ ﻛﻤﻚ ﺧﻮﺑﻲ ﺧﻮﺍﻫﻨﺪ ﺑﻮﺩ‪.‬‬
‫ﻫﻤﭽﻨﻴﻦ ﻓﺮﻳﻤﻬﺎ ﺑﺮﺍﻱ ﺳﺎﺧﺘﻦ ﺳﺮﻳﻊ ﻗﺴﻤﺘﻬﺎﺋﻲ ﺍﺯ ﺳﺎﻳﺖ ﻛﻪ ﻋﻤﻮﻡ ﺑﻪ ﺁﻥ ﺩﺳﺘﺮﺳﻲ ﻧﺪﺍﺭﻧﺪ ﻣﺎﻧﻨﺪ ﻗﺴﻤﺖ ﻣﺪﻳﺮﻳﺖ )‪ (Admin‬ﻣﻨﺎﺳﺐ ﺑﻪ ﻧﻈﺮ‬
‫ﻣﻴﺮﺳﻨﺪ‪.‬‬
‫ﺗﮓ ﻓﺮﻳﻢ ﺳﺖ )‪(Frameset‬‬
‫‪ frameset‬ﻳﻌﻨﻲ ﻳﻚ ‪ Set‬ﺍﺯ ‪ frame‬ﻫﺎ ﻳﺎ ﻣﺠﻤﻮﻋﻪ ﺍﻱ ﺍﺯ ﭼﻬﺎﺭ ﭼﻮﺑﻬﺎ‬ ‫•‬

‫ﺗﮓ ﺍﺻﻠﻲ >‪ <frameset‬ﺑﻪ ﺗﻌﺮﻳﻒ ﻓﺮﻳﻤﻬﺎ ﻭ ﺗﻘﺴﻴﻢ ﺑﻨﺪﻱ ﭘﻨﺠﺮﻩ ﻣﺮﻭﺭﮔﺮ ﻣﻴﭙﺮﺩﺍﺯﺩ‪.‬‬ ‫•‬

‫ﻫﺮ ﺗﮓ >‪ <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‬‬

‫>‪</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‬ﺭﺍ ﻓﺮﺍﻫﻢ ﻣﻴﺴﺎﺯﺩ ﻭ ﻧﻬﺎﻳﺘﺎ ﻓﺮﻳﻢ ﺍﺻﻠﻲ ﻭ‬

‫ﺳﻤﺖ ﭼﭗ ﺻﻔﺤﺎﺕ ﻣﺨﺘﻠﻒ ﺳﺎﻳﺖ ﺭﺍ ﺑﻪ ﻧﻤﺎﻳﺶ ﺧﻮﺍﻫﺪ ﮔﺬﺍﺷﺖ‪ .‬ﺗﻮﺟﻪ ﺩﺍﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺑﺮﺍﻱ ﺍﻳﻦ ﻣﺜﺎﻝ ﺣﺪﺍﻗﻞ ﺑﻪ ﻳﻚ ﻓﺎﻳﻞ ﺑﺮﺍﻱ ﻣﻌﺮﻓﻲ ﻣﺠﻤﻮﻋﺎ‬
‫ﻓﺮﻳﻤﻬﺎ)‪ (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‬ﺁﺷﻨﺎ ﺧﻮﺍﻫﺪ ﻛﺮﺩ‪.‬‬
‫ﻓﻬﺮﺳﺘﻬﺎﻱ ﻧﺎﻣﺮﺗﺐ‬
‫ﻣﺜﺎﻟﻲ ﺑﺴﻴﺎﺭ ﺳﺎﺩﻩ ﺩﺭ ﻣﻮﺭﺩ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻧﺎﻣﺮﺗﺐ‬

‫ﻓﻬﺮﺳﺘﻬﺎﻱ ﻣﺮﺗﺐ‬
‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻣﺮﺗﺐ ﻭ ﻧﺤﻮﻩ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﻓﺎﺭﺳﻲ‬
‫ﻓﻬﺮﺳﺘﻬﺎﻱ ﻧﺎﻣﺮﺗﺐ)‪(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‬ﻣﺸﺨﺺ‬
‫ﻣﻴﮕﺮﺩﺩ‪.‬‬

‫‪1. Red‬‬ ‫>‪<ol‬‬
‫>‪<li>Red</li‬‬
‫‪2. Blue‬‬
‫>‪<li>Blue</li‬‬
‫‪3. Green‬‬ ‫>‪<li>Green</li‬‬
‫>‪</ol‬‬

‫‪ .1‬ﻗﻬﻮﻩ‬ ‫> "‪<ol dir="rtl‬‬

‫‪ .2‬ﺷﻴﺮ‬
‫>‪</li‬ﻗﻬﻮﻩ>‪<li‬‬
‫>‪</li‬ﺷﻴﺮ>‪<li‬‬
‫‪ .3‬ﭼﺎﻱ‬ ‫>‪</li‬ﭼﺎﻱ>‪<li‬‬
‫>‪</ol‬‬
‫ﺩﺍﺧﻞ ﺗﮕﻬﺎﻱ >‪ <li‬ﻣﻴﺘﻮﺍﻧﻴﺪ ﺍﺯ ﭘﺎﺭﺍﮔﺮﺍﻓﻬﺎ‪ ،‬ﺗﮕﻬﺎﻱ ‪ ، br‬ﺗﺼﺎﻭﻳﺮ ﻭ ﺣﺘﻲ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺩﻳﮕﺮ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ‪ .‬ﺑﻪ ﺷﻨﺎﺳﻪ ‪ dir‬ﺩﺭ ﻣﺜﺎﻝ ﺑﺎﻻ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪،‬‬
‫ﺍﻣﻜﺎﻥ ﺗﻌﻴﻴﻦ ﺳﻤﺖ ﻭ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﺩﺭ ﺗﻤﺎﻣﻲ ﺗﮕﻬﺎﻱ ﻣﺮﺑﻮﻁ ﺑﻪ ﻓﻬﺮﺳﺘﻬﺎ ﻣﻤﻜﻦ ﻣﻴﺒﺎﺷﺪ‪.‬‬
‫ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻌﺮﻳﻔﻲ)‪(definition list‬‬
‫ﻓﻬﺮﺳﺖ ﺗﻌﺮﻳﻔﻲ ﻓﻬﺮﺳﺘﻲ ﺍﺳﺖ ﺍﺯ ﺍﺻﻄﻼﺡ ﻫﺎ ﻭ ﺗﺸﺮﻳﺢ ﻭ ﺗﻮﺻﻴﻒ ﺁﻧﻬﺎ‪.‬‬
‫ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻌﺮﻳﻔﻲ ﺑﺎ >‪ <dl‬ﺷﺮﻭﻉ ﺷﺪﻩ ﻭ ﻫﺮ ﺫﻭﺝ ﺍﺻﻄﻼﺡ ﻭ ﺗﻌﺮﻳﻒ ﻣﺮﺑﻮﻁ ﺑﻪ ﺁﻥ ﺑﺎ ﺗﮕﻬﺎﻱ >‪ <dt‬ﻭ >‪ <dd‬ﺗﻌﺮﻳﻒ ﻣﻴﺸﻮﻧﺪ‪.‬‬

‫>‪<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‬ﺩﺭ ﻣﺜﺎﻝ ﺑﺎﻻ‬
‫ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪ ،‬ﺍﻣﻜﺎﻥ ﺗﻌﻴﻴﻦ ﺳﻤﺖ ﻭ ﺟﻬﺖ ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﺩﺭ ﺗﻤﺎﻣﻲ ﺗﮕﻬﺎﻱ ﻣﺮﺑﻮﻁ ﺑﻪ ﻓﻬﺮﺳﺘﻬﺎ ﻣﻤﻜﻦ ﻣﻴﺒﺎﺷﺪ‪.‬‬
‫ﺍﻧﻮﺍﻉ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻣﺮﺗﺐ‬

‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻣﺮﺗﺐ ﺑﻪ ﻫﻤﺮﺍﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ ‪ type‬ﺟﻬﺖ ﺗﻌﻴﻴﻦ ﻧﻮﻉ ﻧﻤﺎﻳﺶ ﻓﻬﺮﺳﺖ‬
‫ﺍﻧﻮﺍﻉ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻧﺎﻣﺮﺗﺐ‬

‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻓﻬﺮﺳﺘﻬﺎﻱ ﻧﺎﻣﺮﺗﺐ ﺑﻪ ﻫﻤﺮﺍﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ ‪ type‬ﺟﻬﺖ ﺗﻌﻴﻴﻦ ﻧﻮﻉ ﻧﻤﺎﻳﺶ ﻓﻬﺮﺳﺖ‬
‫ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻮﺩﺭﺗﻮ‬
‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﺮﻛﻴﺒﻲ‪ .‬ﺍﻋﻀﺎﻱ ﻓﻬﺮﺳﺖ ﻣﻴﺘﻮﺍﻧﻨﺪ ﺍﺯ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺩﻳﮕﺮ ﺗﺸﻜﻴﻞ ﺷﻮﻧﺪ‪.‬‬
‫ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻌﺮﻳﻔﻲ‬
‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻓﻬﺮﺳﺘﻬﺎﻱ ﺗﻌﺮﻳﻔﻲ ﺑﻪ ﻫﻤﺮﺍﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ ‪dir‬‬
‫ﺗﮕﻬﺎﻱ ﻓﻬﺮﺳﺖ‬

‫>‪<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‬ﺍﺳﺘﻔﺎﺩﻩ ﻣﻴﻜﻨﻨﺪ‪.‬‬

‫ﻭﺭﻭﺩﻳﻬﺎﻱ ﻣﺘﻦ ﻳﺎ ‪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‬‬

‫>‪<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‬‬

‫>‪<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‬ﻣﻴﺘﻮﺍﻧﺪ ﺁﺩﺭﺱ ﺍﺳﻜﺮﻳﭙﺘﻲ ﺩﺭ ﻫﺎﻣﺎﻥ ﺳﺎﻳﺖ ﻭ ﻳﺎ ﺳﺎﻳﺖ ﺩﻳﮕﺮﻱ ﺑﺎﺷﺪ‪ ،‬ﻫﻤﭽﻨﻴﻦ ﻣﻴﺘﻮﺍﻧﺪ‬
‫ﺁﺩﺭﺳﻲ ﻧﺴﺒﻲ ﻳﺎ ﻣﻄﻠﻖ ﺑﺎﺷﺪ‪.‬‬

‫ﻭﺭﻭﺩ ﻣﺘﻦ ﻓﺎﺭﺳﻲ ﺩﺭ ﻋﻨﺎﺻﺮﻱ ﻣﺎﻧﻨﺪ ‪ 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‬‬
‫ﺍﺭﺳﺎﻝ ﺍﻳﻤﻴﻞ ﺑﺎ ﻛﻤﻚ ﻓﺮﻣﻬﺎ‬

‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺍﺭﺳﺎﻝ ﺍﻳﻤﻴﻞ ﺑﺎ ﻛﻤﻚ ﻓﺮﻣﻬﺎ‬
‫ﺳﺎﺧﺘﻦ ﻓﻬﺮﺳﺘﻲ ﺍﺯ ﺳﺎﻳﺘﻬﺎﻱ ﻣﻮﺭﺩ ﻋﻼﻗﻪ‬

‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﮓ ﻓﺮﻡ ﻭ ﻣﻨﻮﻫﺎﻱ ﻛﺮﻛﺮﻩ ﺍﻱ ﻭ ﻛﻤﻲ ﺟﺎﻭﺍ ﺍﺳﻜﺮﻳﭙﺖ ﺑﺮﺍﻱ ﺳﺎﺧﺖ ﻓﻬﺮﺳﺘﻲ ﺍﺯ ﺳﺎﻳﺘﻬﺎ‬
‫ﺗﮕﻬﺎﻱ ﻓﺮﻡ‬

‫>‪<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‬‬
‫ﺩﺭﺝ ﺗﺼﻮﻳﺮﻱ ﻭﺍﻗﻊ ﺩﺭ ﻓﻀﺎﻱ ﺁﺩﺭﺳﻲ ﺩﻳﮕﺮ‬

‫ﺩﺭﺝ ﺗﺼﻮﻳﺮﻱ ﻭﺍﻗﻊ ﺩﺭ ﺩﺍﻳﺮﻛﺘﻮﺭﻳﻲ ﻏﻴﺮ ﺍﺯ ﺁﺩﺭ ﺱ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﻭ ﻳﺎ ﺗﺼﻮﻳﺮﻱ ﻭﺍﻗﻊ ﺩﺭ ﻓﻀﺎﻱ ﺁﺩﺭﺳﻲ ﺩﻳﮕﺮ ﺳﺎﻳﺘﻬﺎ‬

‫ﺗﮓ ‪ 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‬‬

‫ﻱ ﻛﻪ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ ‪ 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‬ﺁﻧﺮﺍ ﺫﺧﻴﺮﻩ‬ ‫•‬
‫ﻛﻨﻴﺪ‪.‬‬
‫ﺗﺼﺎﻭﻳﺮ ﺯﻣﻴﻨﻪ‬

‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺗﻌﻴﻴﻦ ﺗﺼﺎﻭﻳﺮ ﺯﻣﻴﻨﻪ ﺑﺎ ﻛﻤﻚ ﺷﻨﺎﺳﻪ ‪ background‬ﺩﺭ ﺗﮓ ‪body‬‬
‫ﺗﺮﺍﺯﺑﻨﺪﻱ ﺗﺼﺎﻭﻳﺮ‬
‫ﺍﻳﻦ ﻣﺜﺎﻝ ﻧﺤﻮﻩ ﺗﺮﺍﺯﺑﻨﺪﻱ ﺗﺼﺎﻭﻳﺮ ﺩﺭ ﻛﻨﺎﺭ ﻣﺘﻮﻥ ﺭﺍ ﻧﺸﺎﻥ ﻣﻴﺪﻫﺪ‪.‬‬
‫ﺗﺼﺎﻭﻳﺮ ﺷﻨﺎﻭﺭ ﺩﺭ ﻣﺘﻦ‬

‫ﺁﺯﺍﺩ ﮔﺬﺍﺷﺘﻦ ﺗﺼﻮﻳﺮ ﺩﺭ ﺳﻤﺖ ﭼﭗ ﻳﺎ ﺭﺍﺳﺖ‬
‫ﻧﻤﺎﻳﺶ ﺗﺼﺎﻭﻳﺮ ﺩﺭ ﺍﺑﻌﺎﺩ ﻣﺨﺘﻠﻒ‬

‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ ﻫﺎﻱ ‪ width‬ﻭ ‪ height‬ﻭ ﻧﻤﺎﻳﺶ ﺗﺼﺎﻭﻳﺮ ﺩﺭ ﺍﺑﻌﺎﺩ ﻣﺨﺘﻠﻒ‬
‫ﻧﻤﺎﻳﺶ ﻣﺘﻦ ﺟﺎﻳﮕﺰﻳﻦ ﺑﺮﺍﻱ ﺗﺼﺎﻭﻳﺮ‬

‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ ‪alt‬‬
‫ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﺼﺎﻭﻳﺮ ﻫﻨﮕﺎﻡ ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪ ﻫﺎ‬

‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﻧﺤﻮﻩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﺼﺎﻭﻳﺮ ﻫﻨﮕﺎﻡ ﺍﻳﺠﺎﺩ ﭘﻴﻮﻧﺪ ﻫﺎ‬
‫ﺍﻳﺠﺎﺩ ‪ image map‬ﻫﺎ‬

‫ﻣﺜﺎﻟﻲ ﺩﺭ ﻣﻮﺭﺩ ﺍﻳﺠﺎﺩ ‪ . image map‬ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﻫﺮ ﺑﺨﺶ ﺍﺯ ﻧﻮﺍﺣﻲ ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﻗﺎﺑﻞ ﻛﻠﻴﻚ ﺑﻮﺩﻩ ﻭ ﺑﻪ ﭘﻴﻮﻧﺪﻱ ﺍﺧﺘﺼﺎﺻﻲ ﺍﺷﺎﺭﻩ ﻣﻴﻜﻨﺪ‪.‬‬
‫ﺑﺮﺍﻧﺎﻣﻪ ﺍﻱ ﺧﻮﺏ ﻭ ﻣﺘﻦ ﺑﺎﺯ ﺑﺮﺍﻱ ‪ FTP‬ﺭﺍ ﻣﻴﺘﻮﺍﻧﻴﺪ ﺍﻳﻨﺠﺎ ﺩﺍﻭﻧﻠﻮﺩ ﻛﻨﻴﺪ‪:‬‬
‫‪Filezilla‬‬
‫ﺗﮓ ﻫﺎﻱ ﺗﺼﺎﻭﻳﺮ‬

‫>‪<img‬‬ ‫‪Defines an image‬‬ ‫ﺩﺭﺝ ﺗﺼﻮﻳﺮ‬
‫>‪<map‬‬ ‫‪Defines an image map‬‬ ‫ﺗﻌﺮﻳﻒ ‪ Image map‬ﻳﺎ ؟؟؟‬
‫>‪<area‬‬ ‫‪Defines an area inside an image map‬‬ ‫ﺗﻌﺮﻳﻒ ﻧﺎﺣﻴﻪ ﺍﻱ ﺩﺭ ﺩﺍﺧﻞ ‪Image map‬‬

‫ﭘﺲ ﺯﻣﻴﻨﻪ ) ‪( Background‬‬
‫ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﺑﺎ ﭼﮕﻮﻧﮕﻲ ﺗﻌﻴﻴﻦ ﺗﺼﺎﻭﻳﺮ ﻭ ﺭﻧﮓ ﭘﺲ ﺯﻣﻴﻨﻪ )‪ (Background‬ﺁﺷﻨﺎ ﺧﻮﺍﻫﻴﺪ ﺷﺪ‪ .‬ﺭﻧﮓ ﻭ ﻳﺎ ﺗﺼﻮﻳﺮ ﭘﺲ ﺯﻣﻴﻨﻪ ﻋﺎﻣﻞ ﺑﺴﻴﺎﺭ ﻣﻬﻤﻲ‬
‫ﺩﺭ ﻃﺮﺍﺣﻲ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺑﻮﺩﻩ ﻭ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺭﻧﮓ ﻭ ﻳﺎ ﺗﺼﻮﻳﺮ ﻣﻨﺎﺳﺐ ﻧﻘﺸﻲ ﺗﻌﻴﻴﻦ ﻛﻨﻨﺪﻩ ﺩﺭ ﺧﻮﺍﻧﺎ ﺑﻮﺩﻥ ﺻﻔﺤﺎﺕ ﺩﺍﺭﺩ‪.‬‬

‫ﺭﻧﮓ ﻣﺘﻦ ﻭ ﺯﻣﻴﻨﻪ ﻣﺘﻨﺎﺳﺐ‬

‫ﺍﻧﺘﺨﺎﺏ ﺭﻧﮓ ﻣﻨﺎﺳﺐ ﻣﺘﻮﻥ ﻭ ﭘﺲ ﺯﻣﻴﻨﻪ ﺑﻪ ﺧﻮﺍﻧﺎ ﺑﻮﺩﻥ ﻣﺘﻦ ﻛﻤﻚ ﺯﻳﺎﺩﻱ ﺧﻮﺍﻫﺪ ﻛﺮﺩ‪.‬‬
‫ﺭﻧﮓ ﻣﺘﻦ ﻭ ﺯﻣﻴﻨﻪ ﻧﺎﻣﺘﻨﺎﺳﺐ‬

‫ﻣﺜﺎﻟﻲ ﺍﺯ ﺍﻧﺘﺨﺎﺏ ﻧﺎﻣﻨﺎﺳﺐ ﺭﻧﮓ ﻣﺘﻦ ﻭ ﭘﺲ ﺯﻣﻴﻨﻪ‬
‫ﺭﻧﮓ ﻭ ﺗﺼﻮﻳﺮ ﺯﻣﻴﻨﻪ ﺩﺭ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ‪:‬‬
‫ﺗﮓ >‪ <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‬ﻳﺎ ﺁﺩﺭﺱ ﺗﺼﻮﻳﺮ ﺍﺳﺘﻔﺎﺩﻩ ﺷﺪﻩ ﻭ ﺩﺭ ﻭﺍﻗﻊ ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﻓﺎﻳﻞ ﺍﭼﺘﻤﻞ ﻭ ﺗﺼﻮﻳﺮ‬

‫‪ 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‬ﻫﺎ‬

‫ﺩﺭ ﺍﻳﻦ ﻣﺜﺎﻝ ﭼﮕﻮﻧﮕﻲ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ‪ 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‬‬ ‫ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﻗﻠﻢ‬

‫*** ﺑﻴﺎﻥ ﻣﺨﺘﺼﺮ ﻋﻤﻠﻜﺮﺩ ﺗﮓ >‪ <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‬ﻗﺮﺍﺭ ﺧﻮﺍﻫﻨﺪ‬

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
‫>‪<span‬‬ ‫‪Defines a section in a document‬‬ ‫ﺗﻌﺮﻳﻒ ﺑﺨﺶ ﻭ ﻧﺎﺣﻴﻪ ﺍﻱ ﺍﺯ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ‬

‫ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ) ‪( 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‬ﻓﺎﻳﻞ ﺩﺭ ﺑﺮﮔﻴﺮﻧﺪﻩ ﺍﺳﺘﺎﻳﻠﻬﺎﻱ ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﺗﻌﻴﻴﻦ ﻣﻴﮕﺮﺩﺩ‪:‬‬

‫>‪<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‬‬
‫ﺗﮓ ﻫﺎﻱ ﺍﺳﺘﺎﻳﻞ‬

‫>‪<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‬‬
‫ﺷﻮﺩ‪.‬‬

‫ﺗﻐﻴﻴﺮﺍﺕ ﺩﺭ ﻧﺴﺨﻪ ﺟﺪﻳﺪ ﺍﭼﺘﻤﻞ )‪: (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) .‬‬
‫ﭼﮕﻮﻧﮕﻲ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ‪:‬‬

‫ﻣﺮﻭﺭﮔﺮﻫﺎ ﺍﺯ ﺭﻭﻱ ﺍﺳﺘﻴﻠﻬﺎﻱ ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﺗﻮﺳﻂ ﺍﺳﺘﺎﻳﻞ ﺷﻴﺘﻬﺎ ﺑﻪ ﻓﺮﻣﺖ ﺩﻫﻲ ﻭ ﻧﻤﺎﻳﺶ ﺍﻃﻼﻋﺎﺕ ﺩﺭﻭﻥ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ ﻣﻴﭙﺮﺩﺍﺯﻧﺪ‪ .‬ﺗﻌﺮﻳﻒ ﻭ ﺍﺳﺘﻔﺎﺩﻩ‬
‫ﺍﺯ ﺍﺳﺘﺎﻳﻞ ﻫﺎ ﺩﺭ ﺻﻔﺤﺎﺕ ﺍﭼﺘﻤﻞ ﺑﻪ ﺳﻪ ﺭﻭﺵ ﻣﺨﺘﻠﻒ ﻣﻤﻜﻦ ﻣﻴﺒﺎﺷﺪ‪:‬‬
‫‪(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‬‬
‫ﺗﮓ ﻫﺎﻱ ﺍﺳﺘﺎﻳﻞ‬

‫>‪<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‬‬
‫ﺷﻮﺩ‪.‬‬
‫ﺗﻐﻴﻴﺮﺍﺕ ﺩﺭ ﻧﺴﺨﻪ ﺟﺪﻳﺪ ﺍﭼﺘﻤﻞ )‪: (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‬‬ ‫ﺗﻌﻴﻴﻦ ﻋﻨﻮﺍﻥ ﺳﻨﺪ‬

‫ﺷﻨﺎﺳﻪ ﻫﺎﻱ ﻣﻬﻢ ﺗﮓ ‪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‬‬ ‫ﺍﻳﺠﺎﺩ ﺷﺮﺡ ﻭ ﺗﻮﺻﻴﻒ ﻳﻚ ﻋﻨﺼﺮ ﻓﻬﺮﺳﺖ ﺗﻌﺮﻳﻔﻲ‬

‫>‪<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‬‬ ‫ﺷﻨﺎﺳﻪ ﺍﻱ ﺑﺮﺍﻱ ﺗﻌﺮﻳﻒ ﺭﺩﻳﻔﻬﺎﻱ ﻳﻚ ﻣﺠﻤﻮﻋﻪ ﻓﺮﻳﻢ ﺑﺮ ﺍﺳﺎﺱ ﺍﻧﺪﺍﺯﻩ‬

‫ﻭﺍﻗﻌﻲ ﺑﺮ ﺣﺴﺐ ﭘﻴﻜﺴﻞ ﻭ ﻳﺎ ﺍﺑﻌﺎﺩ ﺩﺭﺻﺪﻱ‬

‫>"‪<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‬‬

‫ﻣﺮﺍﺟﻊ ﻭ ﺭﻓﺮﻧﺴﻬﺎ‬
‫ﻓﺮﻫﻨﮓ ﻟﻐﺖ ﻭﺍژﻩ ﻫﺎﻱ ﻓﻨﻲ ﺩﺭ ﻭﺏ‬
‫‪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‬‬ ‫ﻓﻬﺮﺳﺖ‬

‫‪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‬‬

HTML Css W3schools

Uploaded by

Copyright:

Available Formats

HTML Css W3schools

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Css W3schools

Uploaded by

Copyright:

Available Formats

‫‪Learn HTML and CSS with w3schools 2012‬‬

‫ﻳﻚ ﻓﺎﻳﻞ ‪ HTML‬ﭼﻴﺴﺖ؟‬

‫‪ HTML‬ﺭﺍ "ﺍچ ﺗﻲ ﺍﻡ ﺍﻝ" ﻭ ﻳﺎ ﺍﭼﺘﻤﻞ ﺑﺨﻮﺍﻧﻴﺪ‪.‬‬ ‫•‬

‫ﻣﻴﺨﻮﺍﻫﻴﺪ ﻛﻪ ﻳﻚ ﻓﺎﻳﻞ ﺍﭼﺘﻤﻞ ﺑﺴﺎﺯﻳﺪ؟‬

‫ﺳﭙﺲ ﻓﺎﻳﻞ ﺭﺍ ﺑﺎ ﻧﺎﻡ ﻣﺜﻼ ‪ test.html‬ﺩﺭ ﺩﺭﺍﻳﻮ ‪ \:c‬ﺫﺧﻴﺮﻩ ﻛﻨﻴﺪ‪.‬‬

‫‪1‬‬ ‫‪Teaching by : H.shoja‬‬

‫ﺗﻮﺿﻴﺢ ﻣﺜﺎﻝ ﺑﺎﻻ‬

‫ﺍﻧﺸﻌﺎﺏ ﻓﺎﻳﻞ ‪ htm‬ﻳﺎ ‪ html‬؟‬

‫ﻧﻜﺘﻪ ﺍﻱ ﺩﺭ ﻣﻮﺭﺩ ﺍﺩﻳﺘﻮﺭﻫﺎﻱ ﺍﭼﺘﻤﻞ ) ‪( HTML Editors‬‬

‫‪2‬‬ ‫‪Teaching by : H.shoja‬‬

‫ﻫﻤﺎﻥ ﺑﺮﺩﺍﺷﮕﺮﻫﺎﻱ ﻣﺘﻦ ﻫﺴﺘﻨﺪ‪(.‬‬

‫ﺑﻴﺸﺘﺮﻳﻦ ﺳﻮﺍﻻﺕ ﭘﺮﺳﻴﺪﻩ ﺷﺪﻩ ) ‪: ( FAQ‬‬

‫ﺁﻳﺎ ﻣﻴﺘﻮﺍﻧﻢ ﺍﺯ ﻫﺮ ﺩﻭ ﻣﺮﻭﺭﮔﺮ ‪ Internet Explorer‬ﻭ ‪ Firefox‬ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻢ؟‬

‫ﻓﺎﻳﻬﺎﻱ ‪ HTML‬ﺍﻡ ﺭﺍ ﭼﮕﻮﻧﻪ ﺑﻪ ﺭﻭﻱ ﺍﻳﻨﺘﺮﻧﺖ ﻣﻨﺘﻘﻞ ﻛﻨﻢ؟‬

‫‪3‬‬ ‫‪Teaching by : H.shoja‬‬

‫ﻧﺤﻮﻩ ﻛﺎﺭﻛﺮﺩ ﻭﺏ ﭼﮕﻮﻧﻪ ﺍﺳﺖ؟‬

‫ﻣﺮﻭﺭﮔﺮﻫﺎ ﭼﮕﻮﻧﻪ ﺑﻪ ﺧﻮﺍﻧﺪﻥ ﺻﻔﺤﺎﺕ ﻭﺏ ﻣﻴﭙﺮﺩﺍﺯﻧﺪ؟‬

‫ﻣﺮﻭﺭﮔﺮﻫﺎ ﭼﮕﻮﻧﻪ ﺻﻔﺤﺎﺕ ﻭﺏ ﺭﺍ ﻧﻤﺎﻳﺶ ﻣﻴﺪﻫﻨﺪ؟‬

‫‪4‬‬ ‫‪Teaching by : H.shoja‬‬

‫ﭼﻪ ﻛﺴﺎﻧﻲ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﻫﺎﻱ ﻭﺏ ﺭﺍ ﺗﻌﻴﻴﻦ ﻣﻴﻜﻨﺪ؟‬

‫ﺗﻌﻴﻴﻦ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﻫﺎﻱ ﻭﺏ ﺭﺑﻄﻲ ﺑﻪ ﺷﺮﻛﺘﻬﺎﻱ ﻣﺎﻳﻜﺮﻭﺳﺎﻓﺖ ﻭ ﻳﺎ ‪ Mozilla‬ﻧﺪﺍﺭﺩ‪.‬‬ ‫‪‬‬

‫ﺗﮓ ﻫﺎﻱ ﺍﭼﺘﻤﻞ )‪(HTML Tags‬‬

‫ﺑﺎ ﻛﻤﻚ ﺗﮓ ﻫﺎﻱ ﺍﭼﺘﻤﻞ ﻋﻨﺎﺻﺮ ﻳﺎ ‪ Elements‬ﺳﺎﺧﺘﻪ ﻣﻴﺸﻮﻧﺪ‪.‬‬ ‫•‬

‫ﻋﻨﺎﺻﺮ ﺍﭼﺘﻤﻞ )‪(HTML Elements‬‬

‫ﻣﺜﺎﻝ ﺑﺨﺶ ﻣﻘﺪﻣﻪ ﺭﺍ ﺩﺭ ﻧﻈﺮ ﺑﮕﻴﺮﻳﺪ‪:‬‬

‫‪5‬‬ ‫‪Teaching by : H.shoja‬‬

‫*** ﻧﻤﻮﻧﻪ ﺍﻱ ﺍﺯ ﻳﻚ ﻋﻨﺼﺮ ﺍﭼﺘﻤﻞ‪:‬‬

‫>‪<b>This text is bold</b‬‬

‫*** ﻣﺜﺎﻝ ﺩﻭﻡ ﺍﺯ ﻳﻚ ﻋﻨﺼﺮ ﺍﭼﺘﻤﻞ ‪:‬‬

‫ﺷﻨﺎﺳﻪ ﻫﺎﻱ ﻳﻚ ﺗﮓ )‪(Tag Attributes‬‬

‫‪6‬‬ ‫‪Teaching by : H.shoja‬‬

‫ﻣﺜﺎﻟﻲ ﺳﺎﺩﻩ ﺍﺯ ﻳﻚ ﺻﻔﺤﻪ ﺍﭼﺘﻤﻞ‬

‫ﻧﻤﺎﻳﺶ ﻣﺘﻮﻥ ﻓﺎﺭﺳﻲ‪:‬‬

‫ﺳﺮ ﺗﻴﺘﺮﻫﺎ )‪(Headings‬‬

‫‪7‬‬ ‫‪Teaching by : H.shoja‬‬

‫ﺳﻄﺮ ﺟﺪﻳﺪ )‪(Line Breaks‬‬

‫>‪<p>This <br> is a para<br>graph with line breaks</p‬‬

‫ﻛﺎﻣﻨﺖ ﻫﺎ ﺩﺭ ﺍﭼﺘﻤﻞ )‪(Comments‬‬

‫>‪<!-- This is a comment --‬‬

‫ﭼﻨﺪ ﻧﻜﺘﻪ ﻛﺎﺭﺑﺮﺩﻱ‪:‬‬

‫‪8‬‬ ‫‪Teaching by : H.shoja‬‬

‫ﺑﺎﺯ ﻫﻢ ﻣﺜﺎﻝ ﭘﺎﺭﺍﮔﺮﺍﻓﻬﺎ‬

‫ﺗﺮﺍﺯﺑﻨﺪﻱ ﭘﺎﺭﺍﮔﺮﺍﻑ ﻫﺎ‬

‫ﺭﻓﺘﻦ ﺳﺮ ﺳﻄﺮ ﺟﺪﻳﺪ‬

‫ﻧﻤﺎﻳﺶ ﺧﻄﻮﻁ ﺍﻓﻘﻲ‬

‫ﺗﻌﻴﻴﻦ ﺭﻧﮓ ﺯﻣﻴﻨﻪ ﺻﻔﺤﻪ‬

‫‪9‬‬ ‫‪Teaching by : H.shoja‬‬

‫‪Start Tag‬‬ ‫‪Purpose‬‬ ‫ﻛﺎﺭﺑﺮﺩ‬

‫ﻣﺮﺟﻊ ‪ - HTML 4.01 Specification :‬ﻓﻬﺮﺳﺖ ﻋﻨﺎﺻﺮ ‪ -‬ﻓﻬﺮﺳﺖ ﺷﻨﺎﺳﻪ ﻫﺎ‬

‫ﺩﺭﺱ ﻗﺒﻠﻲ‪ ،‬ﺩﺭﺱ ﺑﻌﺪﻱ‬

‫ﺳﺆﺍﻻﺕ ﻣﺮﺑﻮﻁ ﺑﻪ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ ﺭﺍ ﻣﻴﺘﻮﺍﻥ ﺑﻪ ﺳﻪ ﮔﺮﻭﻩ ﻋﻤﺪﻩ ﺗﻘﺴﻴﻢ ﻛﺮﺩ‪:‬‬

‫‪10‬‬ ‫‪Teaching by : H.shoja‬‬

‫* ﺭﺍﻫﻨﻤﺎﻱ ﻓﺎﺭﺳﻲ ﺳﺎﺯﻱ ﻭﻳﻨﺪﻭﺯ‬

‫ﺩﻭ ﻧﻜﺘﻪ ﺑﺴﻴﺎﺭ ﻣﻬﻢ ﺩﺭ ﻣﻮﺭﺩ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ‪:‬‬

‫>"‪<meta http-equiv="Content-Type" content="text/html; charset=utf-8‬‬

‫ﭼﭗ ﺑﻪ ﺭﺍﺳﺖ ‪dir="ltr" , Left-to-right text. -‬‬

‫‪11‬‬ ‫‪Teaching by : H.shoja‬‬

‫>‪ </p‬ﺳﻼﻡ ﺑﻪ ﺩﻧﻴﺎﻱ ﻭﺏ >"‪<p dir="rtl‬‬

‫ﻣﺜﺎﻟﻬﺎﻱ ﻓﺎﺭﺳﻲ ﻧﻮﻳﺴﻲ‪:‬‬