Your SlideShare is downloading. ×
  • Like
HTML Tutorial in Persian
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML Tutorial in Persian

  • 364 views
Published

Kick start HTML tutorial in Persian. …

Kick start HTML tutorial in Persian.

Learn HTML in a few days with this.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • !...خوب
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
364
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. ‫ﻛﺎرﮔﺎه آﻣﻮزﺷﻲ‬ ‫ﺗﻮﺳﻌﻪ وب‬ ‫ﺑﺨﺶ اول - ‪HTML‬‬‫اراﺋﻪ: ﻋﺒﺎس ﻧﺎدري‬‫اﻧﺠﻤﻦ ﻋﻠﻤﻲ داﻧﺸﺠﻮﻳﻲ‬‫ﻣﻬﻨﺪﺳﻲ ﻛﺎﻣﭙﻴﻮﺗﺮ‬‫داﻧﺸﮕﺎه ﺷﻬﻴﺪ ﺑﻬﺸﺘﻲ‬ ‫ﻧﺴﺨﻪ 1‬
  • 2. ‫ﻋﻨﺎوﻳﻦ ﻣﻄﺮﺣﻲ‬ ‫وب ﭼﻴﺴﺖ؟‬ ‫•‬ ‫2 ‪Web‬‬ ‫–‬ ‫ﭘﺮوﺗﻜﻞ ‪HTTP‬‬ ‫–‬ ‫ﻛﺎوﺷﮕﺮ وب‬ ‫–‬ ‫ﭘﺮوﺗﻜﻞ ‪HTTPS‬‬ ‫–‬ ‫ﭘﺮوﺗﻜﻞ ‪FTP‬‬ ‫–‬ ‫ﭘﺮوﺗﻜﻞ ﻫﺎي دﻳﮕﺮ وب‬ ‫–‬ ‫‪ HTML‬ﭼﻴﺴﺖ؟‬ ‫•‬
  • 3. ‫وب ﭼﻴﺴﺖ؟‬
  • 4. ‫وب ﭼﻴﺴﺖ؟‬‫ﺗﻮر ﮔﺴﺘﺮده ﺟﻬﺎﻧﻲ )‪ (World Wide Web‬ﻣﺠﻤﻮﻋﻪ اﺑﺮﻣﺘﻦ ﻫﺎي ﻣﺘﺼﻞ ﺑﻪ ﻫﻢ از‬ ‫•‬ ‫ﻃﺮﻳﻖ اﻳﻨﺘﺮﻧﺖ اﺳﺖ.‬ ‫اﺳﻨﺎد وب )اﺑﺮﻣﺘﻦ( ﺗﻮﺳﻂ ﻛﺎوﺷﮕﺮ وب )‪ (Web Browser‬ﻗﺎﺑﻞ ﻣﻄﺎﻟﻌﻪ ﻫﺴﺘﻨﺪ.‬ ‫•‬‫اﺳﺘﺎﻧﺪاردﺗﺮﻳﻦ ﺳﻨﺪ وب، ‪ HTML‬ﻳﺎ ‪) HyperText Markup Language‬زﺑﺎن‬ ‫•‬ ‫ﻣﺸﺨﺺ اﺑﺮﻣﺘﻨﻲ( ﺗﻘﺮﻳﺒﺎ ﺗﻤﺎم وب را ﺗﺸﻜﻴﻞ داده اﺳﺖ.‬ ‫وب در ﺳﺎل 0891 اﺑﺪاع ﺷﺪ.‬ ‫•‬ ‫اﺳﻨﺎد وب از ﻃﺮﻳﻖ اﺑﺮاﺗﺼﺎل )‪ (Hyperlink‬ﺑﻪ ﻳﻜﺪﻳﮕﺮ ﻣﺘﺼﻞ ﻫﺴﺘﻨﺪ.‬ ‫•‬‫اﺳﺘﺎﻧﺪاردﻫﺎي وب از ﻃﺮف )‪ World Wide Web Consortium (W3C‬و‬ ‫•‬ ‫)‪ Internet Engineering Task Force (IETF‬وﺿﻊ ﻣﻲ ﺷﻮﻧﺪ.‬‫ﻣﺎﻳﻜﺮوﺳﺎﻓﺖ در ﻋﺮﺻﻪ وب از اﺳﺘﺎﻧﺪاردﻫﺎ ﭘﻴﺮوي ﻧﻤﻲ ﻛﻨﺪ و اﺳﺘﺎﻧﺪاردﻫﺎي ﺧﻮد را وﺿﻊ‬ ‫•‬ ‫ﻧﻤﻮده اﺳﺖ.‬
  • 5. ‫2 ‪Web‬‬ ‫ﺧﺎﺻﻴﺖ اﺻﻠﻲ وب اﺳﺘﺎﻧﺪارد ﺑﻮدن ﺷﻜﻞ ﻇﺎﻫﺮي و ﺳﺎدﮔﻲ دﺳﺘﺮﺳﻲ ﺑﻪ آن ﺑﻮد.‬ ‫•‬ ‫ﺑﻪ دﻟﻴﻞ ﻛﻤﺒﻮدﻫﺎ و ﻋﺪم ﭘﻮﻳﺎﻳﻲ وب، وب 2 در ﺳﺎل 4002 ﺷﻜﻞ ﮔﺮﻓﺖ.‬ ‫•‬ ‫“وب 2 اﻧﻘﻼﺑﻲ ﺗﺠﺎري درﺻﻨﻌﺖ ﻛﺎﻣﭙﻴﻮﺗﺮ اﺳﺖ ﻛﻪ ﺑﻪ وﺳﻴﻠﻪ‬ ‫اﺗﻜﺎ ﺑﻪ اﻳﻨﺘﺮﻧﺖ ﺑﻪ ﻋﻨﻮان ﺳﻜﻮي ﺗﺠﺎرت ﺷﻜﻞ ﮔﺮﻓﺘﻪ اﺳﺖ.”‬‫• در واﻗﻊ ﺗﻜﻨﻮﻟﻮژي وب 2 ﺗﻔﺎوﺗﻲ ﺑﺎ وب ﻧﺪارد، ﺑﻠﻜﻪ وب 2 ﺑﺪﻳﻦ ﻣﻌﻨﺎﺳﺖ ﻛﻪ ﻧﺮم اﻓﺰارﻫﺎ‬ ‫و ﻛﺎرﺑﺮدﻫﺎي ﻣﺨﺘﻠﻒ ﻫﻤﮕﻲ ﺑﺮ روي وب اﺗﻜﺎ ﻛﻨﻨﺪ و ﺑﻪ وﺳﻴﻠﻪ وب ﺗﻮﺳﻌﻪ ﻳﺎﺑﻨﺪ.‬‫• ﺑﺎ ﺗﻮﺳﻌﻪ وب 2 اﺳﺘﻔﺎده از ﺗﻜﻨﻮﻟﻮژي ﻫﺎي ﺧﺎص ﺑﺎ ﻫﺪف ﭘﻮﻳﺎ ﺳﺎزي ﺻﻔﺤﺎت روﻧﻖ ﮔﺮﻓﺖ‬ ‫و درﻳﭽﻪ ﺟﺪﻳﺪي ﺑﻪ روي وب ﺑﺎز ﺷﺪ.‬ ‫• در وب 2، ﺷﺮﻛﺘﻬﺎ ﺧﺪﻣﺎت و ﻣﺤﺼﻮﻻت ﺧﻮد را ﺑﺮ روي وب و ﺑﺮاي وب اراﺋﻪ ﻣﻲ دﻫﻨﺪ.‬ ‫• وب 2 ﺗﺎ ﺟﺎﻳﻲ ﭘﻴﺶ رﻓﺖ ﻛﻪ ﺳﻴﺴﺘﻢ ﻋﺎﻣﻞ ﻫﺎي ﺗﺤﺖ وب ﭘﺪﻳﺪ آﻣﺪﻧﺪ.‬
  • 6. ‫ﭘﺮوﺗﻜﻞ ‪HTTP‬‬ ‫ﭘﺮوﺗﻜﻞ اﺻﻠﻲ وب ﭘﺮوﺗﻜﻞ ‪ HTTP‬ﻳﺎ ‪ HyperText Transfer Protocol‬اﺳﺖ.‬ ‫•‬‫‪ HTTP‬ﻳﻚ ﭘﺮوﺗﻜﻞ ﺗﻘﺎﺿﺎ-ﭘﺎﺳﺨﻲ )‪ (Request-Responce‬اﺳﺖ. در اﻳﻦ‬ ‫•‬‫ﭘﺮوﺗﻜﻞ ﻛﻼﻳﻨﺖ، ﻳﻚ درﺧﻮاﺳﺖ ﺑﻪ ﺳﺮور ﻓﺮﺳﺘﺎده و ﺳﺮور درﺧﻮاﺳﺖ وي را ﭘﺎﺳﺦ ﻣﻲ‬ ‫ﮔﻮﻳﺪ. ﭘﺲ از اﻳﻦ ﺗﺮاﻛﻨﺶ، اﺗﺼﺎل ﻣﺎﺑﻴﻦ ﻃﺮﻓﻴﻦ ﻣﻨﻘﻄﻊ ﻣﻲ ﮔﺮدد.‬‫‪ HTTP‬ﻳﻚ ﭘﺮوﺗﻜﻞ ﺑﺪون وﺿﻌﻴﺖ )‪ (Stateless‬اﺳﺖ، ﺑﺪﻳﻦ ﻣﻌﻨﻲ ﻛﻪ ﺳﺮور از‬ ‫•‬ ‫وﺿﻌﻴﺖ ﻓﻌﻠﻲ ﻛﻼﻳﻨﺖ ﺧﺒﺮي ﻧﺪارد و ﺗﻨﻬﺎ ﺗﻘﺎﺿﺎي وي را درﻳﺎﻓﺖ ﻣﻲ ﻛﻨﺪ.‬ ‫ﺗﻘﺎﺿﺎ اﻧﻮاع ﻣﺨﺘﻠﻔﻲ داراﺳﺖ. ﻣﻌﻤﻮل ﺗﺮﻳﻦ اﻧﻮع ﺗﻘﺎﺿﺎ، ‪ POST‬و ‪ GET‬اﺳﺖ.‬ ‫•‬‫ﭘﺎﺳﺦ ﺳﺮور ﺑﻪ ﺗﻘﺎﺿﺎ ﻣﻲ ﺗﻮاﻧﺪ اﻃﻼﻋﺎت، ‪ ،HTML‬ﻓﺎﻳﻞ ﻫﺎي ﺗﻜﻤﻴﻠﻲ )ﻣﺎﻧﻨﺪ ﺗﺼﺎوﻳﺮ( و‬ ‫•‬ ‫ﻳﺎ اﻧﻮاع دﻳﮕﺮ داده ﺑﺎﺷﺪ.‬ ‫در ﺻﻮرﺗﻲ ﻛﻪ ﭘﺎﺳﺦ ﺳﺮور ‪ HTML‬ﺑﺎﺷﺪ، ﻳﻚ ﺻﻔﺤﻪ وب ﺑﺮاي ﻛﺎرﺑﺮ ﻓﺮﺳﺘﺎده ﻣﻲ ﺷﻮد.‬ ‫•‬
  • 7. ‫ﻛﺎوﺷﮕﺮ وب‬‫ﻛﺎوﺷﮕﺮ وب )ﻳﺎ ‪ (Web Browser‬ﻧﺮم اﻓﺰارﻳﺴﺖ ﻛﻪ ﻣﻲ ﺗﻮاﻧﺪ ﺗﺤﺖ ﭘﺮوﺗﻜﻞ ﻫﺎي وب‬ ‫•‬ ‫ﺑﺎ اﻳﻨﺘﺮﻧﺖ ﻛﺎر ﻛﻨﺪ.‬‫ﻛﺎوﺷﮕﺮ وب ﺧﻮاﺳﺘﻪ ﻛﺎرﺑﺮ را در ﻗﺎﻟﺐ درﺧﻮاﺳﺘﻬﺎي ‪ HTTP‬ﺑﺮاي ﺳﺮور ارﺳﺎل ﻣﻲ ﻛﻨﺪ‬ ‫•‬ ‫و ﻧﺘﺎﻳﺞ ﺳﺮور را ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ.‬‫ﻛﺎوﺷﮕﺮ وب ﻋﻼوه ﺑﺮ ﻗﺎﺑﻠﻴﺖ ﻗﺎﻟﺐ ﺑﻨﺪي و ﻧﻤﺎﻳﺶ اﺳﻨﺎد ‪ ،HTML‬ﺗﻮاﻧﺎﻳﻲ درﻳﺎﻓﺖ ﺗﻤﺎم‬ ‫•‬ ‫ﻓﺎﻳﻠﻬﺎي ﺗﻜﻤﻴﻠﻲ ﻛﻪ در ﺳﻨﺪ ‪ HTML‬اﺳﺘﻔﺎده ﺷﺪه اﻧﺪ را ﺑﻪ ﺻﻮرت ﺧﻮدﻛﺎر داراﺳﺖ.‬‫ﻛﺎوﺷﮕﺮﻫﺎي اﻣﺮوزه وب ﻋﻼوه ﺑﺮ ﺗﻮاﻧﺎﻳﻲ ﻫﺎي اﺻﻠﻲ ﺑﺎﻻ، ﻗﺎﺑﻠﻴﺖ ﻫﺎي ﺑﻴﺸﻤﺎر دﻳﮕﺮي ﻧﻴﺰ‬ ‫•‬ ‫دارا ﻫﺴﺘﻨﺪ.‬‫ﻛﺎوﺷﮕﺮﻫﺎي ﻣﻌﺮوف را ﻣﻲ ﺗﻮان ‪ Internet Explorer‬ﻣﺎﻳﻜﺮوﺳﺎﻓﺖ ﻛﻪ از ﻧﻴﻤﻲ از‬ ‫•‬‫اﺳﺘﺎﻧﺪاردﻫﺎي وب ﺗﺒﻌﻴﺖ ﻧﻤﻲ ﻛﻨﺪ، ‪ Firefox‬ﻣﻮزﻳﻼ ﻛﻪ ﻗﺪرﺗﻤﻨﺪﺗﺮﻳﻦ ﻛﺎوﺷﮕﺮ ﺣﺮﻓﻪ‬‫اي داﻧﺴﺘﻪ ﻣﻲ ﺷﻮد و اﺧﻴﺮا ‪ Google Chrome‬ﻛﻪ ﺑﺮاي اﻫﺪاف وب 2 ﻃﺮاﺣﻲ ﺷﺪه‬ ‫اﺳﺖ، داﻧﺴﺖ.‬
  • 8. ‫ﭘﺮوﺗﻜﻞ ‪HTTPS‬‬‫• ﭘﺮوﺗﻜﻞ ‪ HTTP‬ﺑﻪ ﺻﻮرت ﺗﻤﺎم ﻣﺘﻦ و ﻣﺴﺘﻘﻴﻢ ﻛﺎر ﻣﻴﻜﻨﺪ. از اﻳﻦ رو اﺣﺘﻴﺎﺟﺎت اﻣﻨﻴﺘﻲ‬‫را ﺑﺮآورده ﻧﻤﻲ ﺳﺎزد. ﺑﺮاي ﻣﺜﺎل ﺗﻌﺎﻣﻼت ﺑﺎﻧﻜﻲ ﻛﻪ ﺑﺎ اﺳﺘﻔﺎده از ‪ HTTP‬اﻧﺠﺎم ﺷﻮﻧﺪ،‬ ‫ﻛﺎﻣﻼ ﻗﺎﺑﻞ دﻳﺪ ﺑﺮاي ﻫﻤﮕﺎن ﺧﻮاﻫﻨﺪ ﺑﻮد.‬‫• ﺑﺮاي ﺟﺒﺮان اﻳﻦ ﻛﻤﺒﻮدﻫﺎ، ﭘﺮوﺗﻜﻞ ‪ HTTPS‬ﻳﺎ ‪ Secure HTTP‬اﺑﺪاع ﺷﺪ. اﻳﻦ‬‫ﭘﺮوﺗﻜﻞ ﺑﺎ اﺳﺘﻔﺎده از ﭘﺮوﺗﻜﻞ اﻣﻨﻴﺘﻲ ‪ ( Secure Sockets Layer ) SSL‬و ﻳﺎ‬‫‪ (Transport Layer Security ) TLS‬ﺗﺒﺎدﻻت ﺳﺮور و ﻛﻼﻳﻨﺖ را اﻣﻦ ﻣﻲ ﺳﺎزد.‬ ‫از اﻳﻦ ﭘﺮوﺗﻜﻞ در ﺗﻤﺎﻣﻲ وب ﻫﺎﻳﻲ ﻛﻪ ﺑﻪ اﻣﻨﻴﺖ اﺣﺘﻴﺎج اﺳﺖ اﺳﺘﻔﺎده ﻣﻲ ﮔﺮدد.‬‫• ﺑﺮاي ﻛﺎرﻛﺮد درﺳﺖ ‪ ،HTTPS‬ﻻزم اﺳﺖ ﻛﻪ ﺳﺮور ﺧﻮد را ﺑﺎ ﻳﻚ ﮔﻮاﻫﻴﻨﺎﻣﻪ دﻳﺠﻴﺘﺎل‬‫)‪ (Digital Certificate‬اﻫﺮاز ﻫﻮﻳﺖ ﻛﻨﺪ. ﺑﺮاي ﺗﻬﻴﻪ ﻳﻚ ﮔﻮاﻫﻴﻨﺎﻣﻪ دﻳﺠﻴﺘﺎل، ﻻزم‬ ‫اﺳﺖ ﺗﺎ ﺑﻪ ﻣﺮاﻛﺰ اﻋﻄﺎي ﮔﻮاﻫﻲ ﻫﺰﻳﻨﻪ اي ﻣﻌﺎدل 001 ﻫﺰار ﺗﻮﻣﺎن ﺑﺮاي ﻫﺮ ﺳﺎل ﭘﺮداﺧﺖ.‬‫• ﺑﻪ دﻟﻴﻞ ﻫﺰﻳﻨﻪ ﺑﺎﻻ و ﻗﺪﻳﻤﻲ ﺑﻮدن اﻛﺜﺮ ﭘﻴﺎده ﺳﺎزي ﻫﺎي ‪ ،HTTPS‬اﻳﻦ ﭘﺮوﺗﻜﻞ ﻧﻘﺎط‬ ‫اﻣﻨﻴﺘﻲ ﺑﺴﻴﺎري را ﺑﺮاي وب ﺑﺎز ﮔﺬارده اﺳﺖ.‬
  • 9. ‫ﭘﺮوﺗﻜﻞ ‪FTP‬‬‫• ‪ FTP‬ﻳﺎ ‪ File Transfer Protocol‬ﻳﻚ اﺳﺘﺎﻧﺪارد ﻧﺴﺒﺘﺎ ﻗﺪﻳﻤﻴﺴﺖ ﻛﻪ ﺑﺮاي ﺗﺒﺎدل‬‫ﻓﺎﻳﻞ در وب اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد. اﻣﺮوزه ﻓﺎﻳﻞ را ﻣﻲ ﺗﻮان ﺑﺎ اﺳﺘﻔﺎده از ‪ HTTP‬ﺑﻪ ﺳﺎدﮔﻲ‬ ‫‪ FTP‬ﻣﻨﺘﻘﻞ ﻛﺮد.‬‫• در واﻗﻊ ‪ FTP‬راه دﻳﮕﺮي دﺳﺘﺮﺳﻲ ﺑﻪ داده ﻫﺎي ﻣﻮﺟﻮد ﺑﺮ روي ﺳﺮورﻫﺎي وب اﺳﺖ، ﻛﻪ‬ ‫ﻣﻌﻤﻮﻻ در دو ﻛﺎرﺑﺮد اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد:‬ ‫– درﻳﺎﻓﺖ ﻓﺎﻳﻠﻬﺎي ﺑﺴﻴﺎر ﺑﺰرگ از اﻳﻨﺘﺮﻧﺖ‬ ‫– ﻗﺮاردادن ﻓﺎﻳﻠﻬﺎ و اﺳﻨﺎد ﺑﺮ روي وب ﺗﻮﺳﻂ ﻧﮕﻬﺪارﻧﺪه ﻳﺎ ﺳﺎزﻧﺪه آن‬‫• از آﻧﺠﺎﻳﻲ ﻛﻪ ‪ FTP‬ﻓﻘﻂ ﺑﺮاي ﺗﻌﺎﻣﻞ ﻓﺎﻳﻞ اﻳﺠﺎد ﺷﺪه اﺳﺖ، ﻫﻴﭻ ﺳﻨﺪ داراي ﻧﻤﻮد‬ ‫ﻇﺎﻫﺮي )ﻣﺎﻧﻨﺪ ‪ HTML‬ﺑﺮاي ‪ (HTTP‬ﻧﺪارد.‬
  • 10. ‫ﭘﺮوﺗﻜﻞ ﻫﺎي دﻳﮕﺮ وب‬‫• ﭘﺮوﺗﻜﻞ ﻫﺎي ﻓﺮاوان دﻳﮕﺮي در وب وﺟﻮد دارﻧﺪ ﻛﻪ ﺗﻌﺪاد ﺑﺴﻴﺎر زﻳﺎدي از آﻧﻬﺎ ﺑﺮاي‬‫ﺗﺒﺎدل داده ﻫﺎي ﺻﻮﺗﻲ و ﺗﺼﻮﻳﺮي ﺑﻪ ﻛﺎر ﻣﻲ روﻧﺪ. ﺑﺮاي ﻛﺎرﻛﺮد ﺑﺎ ﻫﺮ ﭘﺮوﺗﻜﻞ، ﻧﺮم اﻓﺰار‬ ‫ﻣﺨﺼﻮص آن ﭘﺮوﺗﻜﻞ اﺣﺘﻴﺎج اﺳﺖ.‬‫• ﺑﺎ روي ﻛﺎر آﻣﺪن وب 2 و ﺗﻜﻨﻮﻟﻮژي ﻫﺎي ﺟﺪﻳﺪ آن، ﻧﻴﺎز ﺑﻪ ﭘﺮوﺗﻜﻞ ﻫﺎي دﻳﮕﺮ ﺗﻘﺮﻳﺒﺎ‬‫ﻣﺮﺗﻔﻊ ﺷﺪه اﺳﺖ. ﺑﻪ ﻫﻤﻴﻦ دﻟﻴﻞ آﻧﻬﺎ ﺗﻘﺮﻳﺒﺎ ﻛﺎرﺑﺮدﻫﺎي ﻣﺘﻌﺪد ﺧﻮد را از دﺳﺖ داده و‬ ‫ﻓﺮاﻣﻮش ﺷﺪه اﻧﺪ.‬
  • 11. ‫‪ HTML‬ﭼﻴﺴﺖ؟‬
  • 12. ‫‪HTML‬ﭼﻴﺴﺖ؟‬‫زﺑﺎن اﺳﺘﺎﻧﺪارد ﺻﻔﺤﺎت وب. اﻳﻦ زﺑﺎن در واﻗﻊ ﻳﻚ ﻗﺎﻟﺐ اراﺋﻪ اﻃﻼﻋﺎت اﺳﺖ و ﺑﺮﻧﺎﻣﻪ‬ ‫•‬ ‫ﻧﻮﻳﺴﻲ ﺧﺎﺻﻲ در آن وﺟﻮد ﻧﺪارد.‬ ‫اﻣﺮوزه ‪ HTML‬ﺗﻘﺮﻳﺒﺎ ﺗﻮاﻧﺎﻳﻲ ﻧﻤﺎﻳﺶ ﻫﺮﮔﻮﻧﻪ داده اي ﺑﺎ ﻫﺮ ﻗﺎﻟﺒﻲ را داراﺳﺖ.‬ ‫•‬‫ﻣﻲ ﺗﻮان آﻧﺮا ﻳﻚ ﻓﺮﻣﺖ ﺧﻴﻠﻲ ﺳﺎده داﻧﺴﺖ ﻛﻪ ﻣﺎﻧﻨﺪ ‪ PDF‬و ‪ Word‬ﺗﺼﻮﻳﺮ، ﻣﺘﻦ و‬ ‫•‬ ‫داده ﻫﺎي دﻳﮕﺮ را در ﻛﻨﺎر ﻳﻜﺪﻳﮕﺮ ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ.‬‫‪ HTML‬ﻳﻚ زﺑﺎن ﺑﺮﭼﺴﺒﻲ )‪ (Tag‬اﺳﺖ. از اﻳﻦ رو ‪ Markup Language‬داﻧﺴﺘﻪ‬ ‫•‬ ‫ﻣﻲ ﺷﻮد، ﻣﺎﻧﻨﺪ ‪ XML‬ﻛﻪ ﻳﻚ زﺑﺎن ﺑﺮﭼﺴﺒﻲ ﺑﺪون ﻣﺤﺪودﻳﺖ ﺑﺮﭼﺴﺐ اﺳﺖ.‬ ‫ﺑﺮﭼﺴﺐ ﻫﺎي ‪ HTML‬ﻣﺤﺪودﻧﺪ و ﻫﺮﻛﺪام ﻧﻤﺎﻳﺎﻧﮕﺮ داده ﺧﺎﺻﻲ ﻫﺴﺘﻨﺪ.‬ ‫•‬‫ﻋﻨﻮان ﺷﺮوع ﺑﺮﭼﺴﺐ در داﺧﻞ ﻋﻼﻣﺖ ﺑﺰرﮔﺘﺮ و ﻛﻮﭼﻜﺘﺮ ﻗﺮار ﻣﻲ ﮔﻴﺮد، و ﭘﺎﻳﺎن‬ ‫•‬ ‫ﺑﺮﭼﺴﺐ ﻫﻤﺎﻧﻨﺪ ﺷﺮوع آن، ﻓﻘﻂ ﺑﺎ ﺗﻔﺎوت ﻳﻚ / اﺳﺖ:‬‫>‪<tagName>tagdata here, as mush as you want </tagName‬‬
  • 13. ‫ﺑﺮﭼﺴﺐ ﭼﻴﺴﺖ؟‬‫• ﺗﻤﺎم اﻃﻼﻋﺎت ﻳﻚ ﺳﻨﺪ ﺑﺮﭼﺴﺒﻲ، در داﺧﻞ ﺑﺮﭼﺴﺐ ﻫﺎ ﻗﺮار ﻣﻲ ﮔﻴﺮد. ﻫﺮ ﺑﺮﭼﺴﺐ 3‬ ‫ﺑﺨﺶ دارد:‬ ‫– ﻋﻨﻮان ﺑﺮﭼﺴﺐ )ﻣﻌﻴﻦ ﻛﻨﻨﺪه ﻧﻮع آن(‬ ‫– ﺻﻔﺎت ﺑﺮﭼﺴﺐ )ﻣﻌﻴﻦ ﻛﻨﻨﺪه وﻳﮋﮔﻴﻬﺎ و رﻓﺘﺎر آن(‬ ‫– داده ﺑﺮﭼﺴﺐ )ﻣﻌﻴﻦ ﻛﻨﻨﺪه داده اي ﻛﻪ ﺑﺮﭼﺴﺐ اراﺋﻪ ﻣﻲ دﻫﺪ(‬‫• ﺑﺮﭼﺴﺐ ﻫﺎ ﻣﻲ ﺗﻮاﻧﻨﺪ در ﻳﻚ ﺳﺎﺧﺘﺎر درﺧﺘﻲ در داﺧﻞ ﻳﻜﺪﻳﮕﺮ ﻗﺮار ﮔﻴﺮﻧﺪ، ﺑﺪﻳﻦ ﻣﻌﻨﻲ‬ ‫ﻛﻪ داده ﻳﻚ ﺑﺮﭼﺴﺐ ﻣﻲ ﺗﻮاﻧﺪ ﺧﻮد ﺷﺎﻣﻞ ﺑﺮﭼﺴﺒﻬﺎي دﻳﮕﺮ ﺑﺎﺷﺪ.‬ ‫• ﻣﺜﺎل ﺑﺮاي ﺑﺮﭼﺴﺐ ﺗﻮ در ﺗﻮ ﺑﻪ ﻫﻤﺮاه ﺻﻔﺎت و ﻣﻘﺪار ﺻﻔﺎت ﺑﺮﭼﺴﺐ:‬‫>”2‪<tag attribute1=“attributeValue” attribute2=“attributeValue‬‬‫>‪<innerTag> some data <anotherInnerTag /> </innerTag‬‬‫>‪</tag‬‬‫• ﻫﻤﺎﻧﻄﻮر ﻛﻪ در ﻣﺜﺎل ﻣﺸﺨﺺ اﺳﺖ، ﺑﺮﭼﺴﺒﻲ ﻛﻪ داده ﻧﺪاﺷﺘﻪ ﺑﺎﺷﺪ، در داﺧﻞ ﺧﻮد ﺑﺴﺘﻪ‬ ‫ﻣﻲ ﺷﻮد.‬
  • 14. ‫ﺑﺮﭼﺴﺐ رﻳﺸﻪ‬‫• ﻫﻤﺎﻧﮕﻮﻧﻪ ﻛﻪ ﻳﻚ ﻓﺎﻳﻞ ‪ ،XML‬ﺑﺎ ﺑﺮﭼﺴﺐ ﻫﺎي ﺧﻮد ﻳﻚ ﺳﺎﺧﺘﺎر درﺧﺘﻲ ﻣﻲ ﺳﺎزد ﻛﻪ‬‫ﺗﻨﻬﺎ ﻳﻚ رﻳﺸﻪ دارد )ﺑﺮﭼﺴﺐ رﻳﺸﻪ(، رﻳﺸﻪ ﻓﺎﻳﻠﻬﺎي ‪ HTML‬ﻫﻢ ﺑﺮﭼﺴﺐ >‪<html‬‬ ‫اﺳﺖ. ﺗﻤﺎم ﻣﺤﺘﻮﻳﺎت ﺻﻔﺤﻪ وب در داﺧﻞ اﻳﻦ ﺑﺮﭼﺴﺐ ﻗﺮار ﻣﻲ ﮔﻴﺮد.‬‫• ﻧﻜﺘﻪ: ﻫﻤﺎﻧﻨﺪ ﻓﺎﻳﻠﻬﺎي ‪ XML‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﻳﻚ ﻧﻮع و ﻓﻀﺎي ﻧﺎم ﺑﺮاي ﻓﺎﻳﻠﻬﺎي ‪HTML‬‬‫ﺗﻌﺮﻳﻒ ﻛﻨﻴﺪ. اﻳﻦ ﻛﺎر اﺧﻴﺮا ﺑﻪ ﻳﻚ اﺳﺘﺎﻧﺪارد ﺗﺒﺪﻳﻞ ﺷﺪه و ﺑﻬﺘﺮ اﺳﺖ رﻋﺎﻳﺖ ﺷﻮد. ﻧﻮع‬ ‫در ﺧﻂ اول ﻓﺎﻳﻞ ﻗﺮار ﻣﻲ ﮔﻴﺮد. اﻧﻮاع ﻗﺎﺑﻞ اﺳﺘﻔﺎده:‬‫)ﻏﻴﺮ اراﺋﻪ اي( ‪HTML 4.01 Strict‬‬‫"‪<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN‬‬ ‫>"‪"http://www.w3.org/TR/html4/strict.dtd‬‬‫‪HTML 4.01 Transitional‬‬‫10.4 ‪<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML‬‬ ‫"‪Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd‬‬‫‪HTML 4.01 Frameset‬‬‫10.4 ‪<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML‬‬ ‫>"‪Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd‬‬
  • 15. (‫)اداﻣﻪ‬ ‫ﺑﺮﭼﺴﺐ رﻳﺸﻪ‬XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">XHTML 1.0 Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd">XHTML 1.1 (strict)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • 16. ‫ﺳﺮﺻﻔﺤﻪ و ﺑﺪﻧﻪ‬‫• ﻫﺮ ﺳﻨﺪ ‪ HTML‬از دو ﻗﺴﻤﺖ اﺻﻠﻲ ﺗﺸﻜﻴﻞ ﺷﺪه اﺳﺖ، ﺳﺮﺻﻔﺤﻪ )‪ (Head‬و ﺑﺪﻧﻪ‬‫)‪ .(Body‬اﻃﻼﻋﺎت ﻣﺮﺑﻮط ﺑﻪ ﺻﻔﺤﻪ ﻛﻪ ﻧﻤﺎﻳﺶ ﻇﺎﻫﺮي ﻧﺪارﻧﺪ، در ﺳﺮﺻﻔﺤﻪ ﻗﺮار ﮔﺮﻓﺘﻪ‬ ‫و اﻃﻼﻋﺎت ﻧﻤﺎﻳﺸﻲ ﺻﻔﺤﻪ در ﻗﺴﻤﺖ ﺑﺪﻧﻪ ﺟﺎي ﻣﻲ ﮔﻴﺮﻧﺪ. ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل:‬‫>‪<html‬‬‫>‪<head‬‬ ‫>‪<title> Sample Webpage </title‬‬‫>‪</head‬‬‫>‪<body‬‬ ‫>‪<p> hello there this is a paragraph </p‬‬ ‫>‪<p> hello again another paragraph with <b> bold </b> text! </p‬‬‫>‪</body‬‬‫>‪</html‬‬
  • 17. ‫ﻓﺎﻳﻞ ﻣﺘﻨﻲ‬‫• از آﻧﺠﺎﻳﻲ ﻛﻪ ‪ HTML‬ﻳﻚ ﻓﺎﻳﻞ ﻣﺘﻨﻲ اﺳﺖ، داﻧﺴﺘﻦ ﻧﻜﺎﺗﻲ در ﻣﻮرد ﻓﺎﻳﻞ ﻣﺘﻨﻲ‬ ‫ﺳﻮدﻣﻨﺪ ﺑﻪ ﻧﻈﺮ ﻣﻲ رﺳﺪ:‬ ‫١. ﻓﺎﻳﻞ ﻫﺎي ﻣﺘﻨﻲ ﺳﻪ ﻧﻮع ذﺧﻴﺮه ﻣﻲ ﮔﺮدﻧﺪ:‬‫ﻛﺎراﻛﺘﺮ ﺑﻨﺪي ‪ :ASCII‬در اﻳﻦ ﻣﺪل ﻫﺮ ﻛﺎراﻛﺘﺮ 1 ﺑﺎﻳﺖ ﻣﻲ ﮔﻴﺮد و 652 ﺣﺎﻟﺖ دارد. اﻳﻦ ﻧﻮع‬ ‫١.‬ ‫ﻛﺎراﻛﺘﺮ ﺑﻨﺪي ﻓﺎﻗﺪ ﺗﻮاﻧﺎﻳﻲ ﻧﻤﺎﻳﺶ زﺑﺎﻧﻬﺎي ﻏﻴﺮ اﻧﮕﻠﻴﺴﻲ اﺳﺖ.‬‫ﻛﺎراﻛﺘﺮ ﺑﻨﺪي وﻳﻨﺪوز : در اﻳﻦ ﻣﺪل ﻫﺮ ﻛﺎراﻛﺘﺮ در ﻓﺎﻳﻞ ﻣﺘﻨﻲ 2 ﺑﺎﻳﺖ ﻣﻲ ﮔﻴﺮد و ﺑﺮ اﺳﺎس‬ ‫٢.‬ ‫اﺳﺘﺎﻧﺪارد وﻳﻨﺪوز ﺑﻪ ﺷﻜﻞ ﺧﺎﺻﻲ ﺗﺒﺪﻳﻞ ﻣﻲ ﺷﻮد.‬‫ﻛﺎراﻛﺘﺮ ﺑﻨﺪي ‪ :Unicode‬در اﻳﻦ ﻣﺪل، ﻫﺮ ﻛﺎراﻛﺘﺮ 2 ﺑﺎﻳﺖ ﻣﻲ ﮔﻴﺮد و ﺗﻮاﻧﺎي ﻧﻤﺎﻳﺶ ﺑﻪ‬ ‫٣.‬‫اﻛﺜﺮ زﺑﺎﻧﻬﺎ وﺟﻮد دارد. ﻳﻮﻧﻴﻜﺪ ﺧﻮد ﺑﻪ اﺳﺘﺎﻧﺪاردﻫﺎي ﻣﺘﻔﺎوﺗﻲ ﺗﻘﺴﻴﻢ ﻣﻲ ﮔﺮدد ﻛﻪ زﺑﺎن‬ ‫ﻓﺎرﺳﻲ در اﺳﺘﺎﻧﺪارد اﺻﻠﻲ آن، 8-‪ UTF‬ﭘﺸﺘﻴﺒﺎﻧﻲ ﺷﺪه اﺳﺖ.‬‫٢. ﻛﺎراﻛﺘﺮ اﻧﺘﻬﺎي ﺧﻂ در وﻳﻨﺪوز و ﻟﻴﻨﻮﻛﺲ ﺗﻔﺎوت ﻣﻲ ﻛﻨﺪ، در وﻳﻨﺪوز ﻳﻚ ﻛﺎراﻛﺘﺮ 31‬‫)‪ (Enter‬و ﻳﻚ ﻛﺎراﻛﺘﺮ ﻛﻤﻜﻲ ﺑﺎ ﺷﻤﺎره 01 ﻣﻌﻴﻦ ﻛﻨﻨﺪه ﭘﺎﻳﺎن ﺧﻂ اﺳﺖ وﻟﻲ در‬‫ﻟﻴﻨﻮﻛﺲ ﻛﺎراﻛﺘﺮ 01 وﺟﻮد ﻧﺪارد. ازاﻳﻦ رو ﻓﺎﻳﻠﻬﺎي ﻣﺘﻨﻲ ﻟﻴﻨﻮﻛﺲ در وﻳﻨﺪوز، ﻳﻜﺴﺮه و‬ ‫ﺑﺪون ﺧﻂ ﺑﻨﺪي ﺑﻪ ﻧﻈﺮ ﻣﻲ رﺳﻨﺪ.‬
  • 18. ‫ﻧﻜﺎت ‪HTML‬‬ ‫١. ﺗﻤﺎﻣﻲ ﻓﻀﺎﻫﺎي ﺧﺎﻟﻲ )‪ (whitespace‬ﭘﻴﻮﺳﺘﻪ، در ﺧﺮوﺟﻲ ﻳﻚ ‪ Space‬ﻣﻲ ﺷﻮﻧﺪ.‬‫٢. از آﻧﺠﺎﻳﻲ ﻛﻪ ﻋﻼﻣﺖ ﻫﺎي & > < ﺑﺮاي ﻣﻌﻴﻦ ﻛﺮدن ﺑﺮﭼﺴﺐ ﻫﺎ ﻛﺎرﺑﺮد دارﻧﺪ، ﺑﺮاي‬ ‫وارد ﻛﺮدن آﻧﻬﺎ در ﻣﺘﻦ ﺑﺎﻳﺪ ﺗﺒﺪﻳﻞ زﻳﺮ اﻧﺠﺎم ﺷﻮد:‬ ‫< : ;‪&lt‬‬ ‫١.‬ ‫> : ;‪&gt‬‬ ‫٢.‬ ‫& : ;‪&amp‬‬ ‫٣.‬‫٣. ﺑﺮاي ﺗﻮﻟﻴﺪ اﺳﻨﺎد ‪ HTML‬ﻣﻲ ﺗﻮاﻧﻴﺪ از ﻧﺮم اﻓﺰارﻫﺎي ﺑﺴﻴﺎري ﺑﻬﺮه ﺟﻮﻳﻴﺪ، ﻧﺮم‬ ‫اﻓﺰارﻫﺎي زﻳﺮ از ﻣﻌﺮوﻓﺘﺮﻳﻦ آﻧﻬﺎ ﻫﺴﺘﻨﺪ:‬ ‫‪Microsoft Frontpage‬‬ ‫١.‬ ‫‪Adobe Dreamweaver‬‬ ‫٢.‬ ‫‪ZendStudio for Eclipse‬‬ ‫٣.‬
  • 19. ‫ﺑﺮﭼﺴﺒﻬﺎي ‪HTML‬‬
  • 20. ‫ﺑﺮﭼﺴﺐ ﻫﺎي ﻣﺠﺎز‬‫• ‪ HTML‬داراي ﺣﺪود 57 ﺑﺮﭼﺴﺐ ﻣﺠﺎز )اﻣﺮوزه( و ﺣﺪود 001 ﺑﺮﭼﺴﺐ ﻣﻌﻤﻮل اﺳﺖ. ﻫﺮ‬‫ﻛﺪام از اﻳﻦ ﺑﺮﭼﺴﺐ ﻫﺎ، ﻛﺎرﺑﺮد ﺧﺎﺻﻲ دارﻧﺪ و اﻃﻼﻋﺎت ﺧﺎﺻﻲ را اراﺋﻪ ﻣﻲ دﻫﻨﺪ. در‬ ‫ﺑﺨﺶ ﺑﻌﺪي ﺗﻌﺪادي از ﻣﻌﻤﻮل ﺗﺮﻳﻦ اﻳﻦ ﺑﺮﭼﺴﺐ ﻫﺎ را ﺑﺮرﺳﻲ ﺧﻮاﻫﻴﻢ ﻛﺮد.‬‫• ﺣﺪود 52 ﺑﺮﭼﺴﺐ ‪ HTML‬ﺑﺎ ﮔﺬر زﻣﺎن ﻣﻨﻘﺮض ﺷﺪه اﻧﺪ )اﺳﺘﻔﺎده از آﻧﻬﺎ ﻏﻴﺮ‬‫اﺳﺘﺎﻧﺪارد ﺷﺪه اﺳﺖ( ﺑﻴﺸﺘﺮ آﻧﻬﺎ ﺑﺮﭼﺴﺐ ﻫﺎي ﻗﺎﻟﺐ ﺑﻨﺪي ﻫﺴﺘﻨﺪ ﻛﻪ ﺑﺎ ﺑﻪ وﺟﻮد آﻣﺪن‬ ‫‪ CSS‬اﺳﺘﻔﺎده از آﻧﻬﺎ ﻧﺎﺻﺤﻴﺢ داﻧﺴﺘﻪ ﻣﻲ ﺷﻮد.‬‫• ‪ HTML‬ﻣﺎﻧﻨﺪ ﻫﺮ زﺑﺎن ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ و اﺳﻜﺮﻳﭙﺘﻴﻨﮓ دﻳﮕﺮي، از ﺗﻮﺿﻴﺤﺎت‬ ‫)‪ (Comments‬ﭘﺸﺘﻴﺒﺎﻧﻲ ﻣﻲ ﻛﻨﺪ، اﻣﺎ ﻣﺘﺎﺳﻔﺎﻧﻪ ﻗﺎﻟﺐ آن ﻛﻤﻲ دﺷﻮار اﺳﺖ:‬‫>-- !‪<!-- this is a comment‬‬‫• در ‪ HTML‬از ﺗﻮﺿﻴﺤﺎت اﺳﺘﻔﺎده ﻧﻤﻲ ﺷﻮد ﻣﮕﺮ در ﻣﻮارد ﺑﺴﻴﺎر ﻣﺤﺪود، زﻳﺮا ﺣﺠﻢ‬ ‫ﺻﻔﺤﺎت ﺑﺴﻴﺎر ﻣﻬﻢ اﺳﺖ و ﺗﺎ ﺟﺎي ﻣﻤﻜﻦ ﺑﺎﻳﺪ آﻧﺮا ﻛﻤﻴﻨﻪ ﻧﻤﻮد.‬
  • 21. ‫ﺑﺮﭼﺴﺐ >‪<html‬‬ ‫• ‪ HTML‬ﺑﻪ ﺑﺰرﮔﻲ و ﻛﻮﭼﻜﻲ ﺣﺮوف در ﻧﺎم ﺑﺮﭼﺴﺐ ﻫﺎ ﺣﺴﺎس ﻧﻴﺴﺖ.‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪HTML‬‬ ‫وﻇﻴﻔﻪ: ﻣﺸﺨﺺ ﻛﺮدن ﻳﻚ ﺳﻨﺪ ‪HTML‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫• اﺧﺘﻴﺎري‬ ‫– ‪ :Dir‬ﻣﺸﺨﺺ ﻛﻨﻨﺪه ﺟﻬﺖ ﺳﻨﺪ )ﭼﭗ ﺑﻪ راﺳﺖ ﻳﺎ ﺑﺎﻟﻌﻜﺲ( ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ”‪ “rtl‬و ”‪“ltr‬‬ ‫ﻣﻘﺪار ﭘﻴﺶ ﻓﺮض: ‪rtl‬‬ ‫– ‪ :Lang‬ﻣﺸﺨﺺ ﻛﻨﻨﺪه زﺑﺎن ﺳﻨﺪ )ﺑﺮ اﺳﺎس ﻣﺨﻔﻒ 2 ﺣﺮﻓﻲ زﺑﺎن( ﻣﺎﻧﻨﺪ ”‪ “fa‬ﻳﺎ ”‪“en‬‬
  • 22. <html> ‫ﻣﺜﺎل‬<html dir=rtl lang=fa><head></head><body>‫ﺳﻼم روز ﺷﻤﺎ ﺑﻪ ﺧﻴﺮ‬</body></html><html><head></head><body>Hello, World! </body></html>
  • 23. ‫ﺑﺮﭼﺴﺐ >‪<head‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Head‬‬ ‫وﻇﻴﻔﻪ: ﻣﺸﺨﺺ ﻛﺮدن ﻣﺤﺪوده اﻃﻼﻋﺎت راﺟﻊ ﺑﻪ ﻳﻚ ﺳﻨﺪ‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Html‬‬‫ﻧﻜﺘﻪ: ﺗﻤﺎم ﺑﺮﭼﺴﺐ ﻫﺎﻳﻲ ﻛﻪ در ‪ head‬ﻗﺮار ﻣﻲ ﮔﻴﺮﻧﺪ، ﻣﻲ ﺗﻮاﻧﻨﺪ در ‪ body‬و ﻳﺎ ﺟﺎي‬ ‫•‬ ‫دﻳﮕﺮ ﻧﻴﺰ اﺳﺘﻔﺎده ﺷﻮﻧﺪ، وﻟﻲ اﺳﺘﺎﻧﺪارد آن اﺳﺖ ﻛﻪ داﺧﻞ ‪ head‬اﺳﺘﻔﺎده ﺷﻮﻧﺪ.‬
  • 24. ‫ﺑﺮﭼﺴﺐ >‪<title‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Title‬‬ ‫وﻇﻴﻔﻪ: ﻣﺸﺨﺺ ﻛﺮدن ﻋﻨﻮان ﺻﻔﺤﻪ‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Head‬‬ ‫ﻋﻨﻮان ﺻﻔﺤﻪ در ﺑﺎﻻي ﭘﻨﺠﺮه ﻛﺎوﺷﮕﺮ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد.‬ ‫•‬
  • 25. <title> ‫ﻣﺜﺎل‬<html lang=fa><head> <title>‫/<ﻋﻨﻮان ﺻﻔﺤﻪ‬title></head><body>‫ﺳﻼم روز ﺷﻤﺎ ﺑﻪ ﺧﻴﺮ‬</body></html>
  • 26. ‫ﺑﺮﭼﺴﺐ >‪<p‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪P‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﭘﺎراﮔﺮاف‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :Align‬ﻣﺮﺗﺐ ﻛﺮدن ﻣﺘﻦ داﺧﻞ ﭘﺎراﮔﺮاف، ﻣﻘﺎدﻳﺮ ﻣﺠﺎز:‬ ‫• ‪ Left‬ﺑﻪ ﭼﭗ )ﭘﻴﺸﻔﺮض(‬ ‫• ‪ Right‬ﺑﻪ راﺳﺖ‬ ‫• ‪ Center‬ﺑﻪ ﻣﺮﻛﺰ‬ ‫• ‪ Justify‬ﻫﻢ ﺗﺮاز‬ ‫دﻗﺖ ﻛﻨﻴﺪ ﻛﻪ ﺑﺮاي ﺳﻨﺪ ﻫﺎي ‪ RTL‬ﺟﺎي ﭼﭗ و راﺳﺖ در اﻳﻦ ﻣﺮﺗﺐ ﻛﺮدن ﺟﺎﺑﺠﺎ ﻣﻲ ﮔﺮدد.‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ Body‬و ﻏﻴﺮه‬
  • 27. ‫ﺑﺮﭼﺴﺐ >‪<br‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Br‬‬ ‫وﻇﻴﻔﻪ: ﻣﺸﺨﺺ ﻛﺮدن اﻧﺘﻬﺎي ﺧﻂ )رﻓﺘﻦ ﺑﻪ ﺧﻂ ﺑﻌﺪي(‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺑﻠﻪ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: ﻫﻤﻪ ﺟﺎ‬
  • 28. ‫ﺑﺮﭼﺴﺐ >‪<img‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Img‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﺗﺼﻮﻳﺮ‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺑﻠﻪ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :src‬آدرس ﻓﺎﻳﻞ ﺗﺼﻮﻳﺮي‬‫– ‪ :Alt‬ﻣﺘﻦ ﺟﺎﻳﮕﺰﻳﻦ )ﺗﺎ ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﺗﺼﻮﻳﺮ ﺑﺎر ﺷﻮد، ﻳﺎ اﮔﺮ ﻧﺸﻮد، اﻳﻦ ﻣﺘﻦ در ﺟﺎي آن ﻧﻤﺎﻳﺶ‬ ‫داده ﻣﻲ ﺷﻮد(‬ ‫– ‪ :Align‬ﻣﻘﺎدﻳﺮ ﻗﺎﺑﻞ اﺳﺘﻔﺎده ‪top, bottom, middle, left , right‬‬ ‫– ‪ :Width , Height‬اﺑﻌﺎد ﺗﺼﻮﻳﺮ، در ﺻﻮرﺗﻲ ﻛﻪ ذﻛﺮ ﻧﺸﻮد اﻧﺪازه ﺧﻮد ﺗﺼﻮﻳﺮ‬ ‫– ‪ :Title‬ﻣﺘﻦ راﻫﻨﻤﺎي ﻛﻤﻜﻲ )‪(Tooltip‬‬ ‫– ‪ :Usemap‬ﻛﺎرﺑﺮد ﺣﺮﻓﻪ اي )ﺟﻬﺖ ﺗﺨﺼﻴﺼﻲ ﻳﻚ ﻧﻘﺸﻪ ﻣﻨﻄﻘﻪ ﺑﻨﺪي ﺑﻪ ﺗﺼﻮﻳﺮ(‬‫ﻻزم ﺑﻪ ذﻛﺮ اﺳﺖ ﻛﻪ ﺗﻘﺮﻳﺒﺎ ﺗﻤﺎم ﺑﺮﭼﺴﺐ ﻫﺎي ‪ HTML‬از ﺻﻔﺖ ‪ Title‬ﭘﺸﺘﻴﺒﺎﻧﻲ ﻣﻴﻜﻨﻨﺪ، از‬ ‫اﻳﻦ رو از ﺗﻜﺮار آن ﻣﻲ ﭘﺮﻫﻴﺰﻳﻢ.‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ Body‬و ﻏﻴﺮه‬
  • 29. <img> ‫ﻣﺜﺎل‬<html><head> <title>/>‫ﻋﻨﻮان ﺻﻔﺤﻪ‬title></head><body><p> ،‫<ﺳﻼم روز ﺷﻤﺎ ﺑﻪ ﺧﻴﺮ، اﻳﻦ ﭘﺎراﮔﺮاف اول اﺳﺖ‬br/>.‫ﺗﺼﻮﻳﺮ ﻫﻢ دارد‬<img src=image1.jpg width=200align=middle/></p><p>‫/<اﻳﻦ ﻫﻢ ﭘﺎراﮔﺮاف دوم‬p><img src=image1.jpg width=200height=200 /></body></html>
  • 30. ‫ﺑﺮﭼﺴﺐ >‪<a‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪A‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻟﻨﮕﺮﮔﺎه، اﺗﺼﺎل ﺑﻪ ﺻﻔﺤﺎت دﻳﮕﺮ ﻳﺎ ﻗﺴﻤﺘﻲ از ﺻﻔﺤﻪ ﺟﺎري‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ، ﻣﺤﺘﻮي ﻋﻨﻮان اﺗﺼﺎل اﺳﺖ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :href‬آدرس )‪ (URL‬اﺗﺼﺎل ﻳﺎ ﻟﻨﮕﺮﮔﺎه‬ ‫– ‪ :Name‬ﺗﻌﺮﻳﻒ ﻧﺎم ﻟﻨﮕﺮﮔﺎه ﺑﺮاي ارﺟﺎع‬ ‫– ‪ :Target‬ﺻﻔﺤﻪ ﺟﺪﻳﺪ، در ﻛﺠﺎ ﺑﺎز ﺷﻮد:‬ ‫‪ : _blank‬ﺻﻔﺤﻪ ﺟﺪﻳﺪ )ﭘﻨﺠﺮه ﺟﺪﻳﺪ ﺑﺎز ﻣﻲ ﺷﻮد(‬ ‫•‬ ‫‪ : _parent‬در داﺧﻞ ﺻﻔﺤﻪ اي ﻛﻪ ﺻﻔﺤﻪ ﺟﺎري را ﺑﺎز ﻛﺮده اﺳﺖ‬ ‫•‬ ‫‪) : _self‬ﭘﻴﺸﻔﺮض( در ﻫﻤﻴﻦ ﺻﻔﺤﻪ‬ ‫•‬ ‫ﻧﺎم ﻓﺮﻳﻢ: ﺑﺮاي ﺻﻔﺤﺎت ﻓﺮﻳﻢ ﺑﻨﺪي ﺷﺪه‬ ‫•‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ Body‬و ﻏﻴﺮه‬‫اﻳﻦ ﺑﺮﭼﺴﺐ ﻣﻲ ﺗﻮاﻧﺪ اﺗﺼﺎﻟﻲ ﺑﻪ ﻳﻚ ﺻﻔﺤﻪ دﻳﮕﺮ ﺑﺮﻗﺮار ﻛﻨﺪ، ﻳﺎ ﻳﻚ ﻟﻨﮕﺮﮔﺎه در اﻳﻦ ﺻﻔﺤﻪ ﺗﻌﺮﻳﻒ‬ ‫ﻛﻨﺪ. )ﻟﻨﮕﺮﮔﺎه ﭼﻴﺴﺖ؟(‬
  • 31. <a> ‫ﻣﺜﺎل‬<html><body> <p> This is a sample paragraph. Click <a href=http://www.google.com>Here</a> to visit Google website. <br/> <a href=http://hackersite.com/hack.html title=Click me to die!>Yahoo!</a> <br/><br/> <a href=http://somesite.com/somepage.html#anchor> <img src=img.gif /> </a></body></html>
  • 32. ‫ﺑﺮﭼﺴﺐ >‪<b‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪B‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻣﺘﻦ ‪Bold‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ Body‬و ﻏﻴﺮه‬‫ﺑﺮﭼﺴﺐ ﻫﺎي دﻳﮕﺮي ﻣﺎﻧﻨﺪ ‪ i‬و ‪ big‬و ‪ small‬و ... ﻧﻴﺰ ﺑﺮاي ﻗﺎﻟﺐ ﺑﻨﺪي ﻣﺘﻦ ﺑﻪ ﻛﺎر ﻣﻲ روﻧﺪ‬ ‫ﻛﻪ ﻛﺎرﺑﺮد آﻧﻬﺎ ﺑﺎ ‪ css‬ﺟﺎﻳﮕﺰﻳﻦ ﺷﺪه اﺳﺖ.‬
  • 33. ‫ﺑﺮﭼﺴﺐ >‪<sup>,<sub‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Sup, Sub‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ رو/زﻳﺮ ﻣﺘﻦ‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ Body‬و ﻏﻴﺮه‬‫ﺑﺮﭼﺴﺐ ﻫﺎي دﻳﮕﺮي ﻣﺎﻧﻨﺪ ‪ i‬و ‪ big‬و ‪ small‬و ... ﻧﻴﺰ ﺑﺮاي ﻗﺎﻟﺐ ﺑﻨﺪي ﻣﺘﻦ ﺑﻪ ﻛﺎر ﻣﻲ روﻧﺪ‬ ‫ﻛﻪ ﻛﺎرﺑﺮد آﻧﻬﺎ ﺑﺎ ‪ css‬ﺟﺎﻳﮕﺰﻳﻦ ﺷﺪه اﺳﺖ.‬
  • 34. ‫ﺑﺮﭼﺴﺐ >‪<hr‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Hr‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﺧﻂ ﺟﺪا ﻛﻨﻨﺪه اﻓﻘﻲ )‪(Horizontal Line‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺑﻠﻪ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ Body‬و ﻏﻴﺮه‬‫ﺑﻪ ﻣﺎﻧﻨﺪ ﺑﺮﭼﺴﺐ ‪ br‬ﻛﻪ ﻳﻚ ﺧﻂ را ﺗﻤﺎم ﻣﻲ ﻛﻨﺪ و ﺑﻪ اﺑﺘﺪاي ﺧﻂ ﺑﻌﺪي ﻣﻲ رود، ‪ hr‬ﻧﻴﺰ‬‫ﺧﻄﻲ ﺧﺎﻟﻲ ﻛﺮده، در ﺧﻂ ﺑﻌﺪي ﻳﻚ ﺧﻂ ﻧﺎزك اﻓﻘﻲ ﻛﺎﻣﻞ رﺳﻢ ﻣﻲ ﻛﻨﺪ و ﺑﻪ اﺑﺘﺪاي ﺧﻂ‬ ‫ﺑﻌﺪي ﻣﻲ رود.‬
  • 35. <sub>,<sup> ‫ﻣﺜﺎل‬<html><body> Some text with <sup>super</sup> text. <hr/> Some more text with <sub>sub</sub> text.</body></html>
  • 36. ‫ﺑﺮﭼﺴﺐ >‪<ol>,<ul‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪OL,UL‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻟﻴﺴﺖ ﻣﺮﺗﺐ )‪ (Ordered List‬و ﻟﻴﺴﺖ ﻧﺎﻣﺮﺗﺐ )‪(Unordered List‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ Body‬و ﻏﻴﺮه‬‫اﻳﻦ دو ﺑﺮﭼﺴﺐ ﻣﺤﺪوده ﻳﻚ ﻟﻴﺴﺖ ﻋﺪدي و ﻳﺎ ﮔﻠﻮﻟﻪ اي را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﻨﺪ. ﺳﭙﺲ ﺑﺎ‬ ‫اﺳﺘﻔﺎده از ﺑﺮﭼﺴﺐ ‪ li‬ﻣﻲ ﺗﻮان در داﺧﻞ ﻟﻴﺴﺖ، ﻋﻨﺼﺮ اﻓﺰود.‬‫ﻧﻜﺘﻪ: در ﺻﻮرﺗﻲ ﻛﻪ در داﺧﻞ ﺑﺮﭼﺴﺐ ﻫﺎي ﻣﺤﺪوده ﻟﻴﺴﺖ، از ﺑﺮﭼﺴﺐ ﻫﺎي دﻳﮕﺮ اﺳﺘﻔﺎده‬‫ﻛﻨﻴﺪ )ﺧﺎرج از ‪ ،(li‬اﻛﺜﺮ ﻛﺎوﺷﮕﺮﻫﺎ آﻧﺮا ﺑﻪ درﺳﺘﻲ ﻧﻤﺎﻳﺶ ﺧﻮاﻫﻨﺪ داد وﻟﻲ از اﺳﺘﺎﻧﺪارد‬ ‫ﺧﺎرج ﺷﺪه اﻳﺪ.‬
  • 37. ‫ﺑﺮﭼﺴﺐ>‪<li‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪LI‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻋﻨﺼﺮ ﻟﻴﺴﺖ )‪(List Item‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ OL‬و ‪UL‬‬‫ﻫﺮ ﻋﻨﺼﺮ ﻟﻴﺴﺖ در ﻟﻴﺴﺘﻬﺎي ﻣﺮﺗﺐ ﻳﻚ ﺷﻤﺎره ﻣﻲ ﮔﻴﺮد و در ﻟﻴﺴﺖ ﻫﺎي ﮔﻠﻮﻟﻪ اي ﻳﻚ‬ ‫ﮔﻠﻮﻟﻪ در اﺑﺘﺪاي آن ﻗﺮار ﻣﻲ ﮔﻴﺮد. ﻟﻴﺴﺖ ﻫﺎ ﻣﻲ ﺗﻮاﻧﻨﺪ ﺗﻮ در ﺗﻮ اﺳﺘﻔﺎده ﺷﻮﻧﺪ.‬
  • 38. ‫ﻣﺜﺎل ﻟﻴﺴﺖ ﻫﺎ‬<html><body> <ol> <li>/>‫ﻋﻨﺼﺮ اول‬li> <li>/>‫ﻋﻨﺼﺮ دوم‬li> <li>/>‫ﻋﻨﺼﺮ ﺳﻮم‬li> </ol> <ul> <li> List 1</li> <li> List 2</li> <li> List 3</li> </ul></body></html>
  • 39. ‫ﺑﺮﭼﺴﺐ ﻫﺎي ﻧﺎﺣﻴﻪ ﺑﻨﺪي‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Span, Div‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻳﻚ ﻧﺎﺣﻴﻪ در ﺳﻨﺪ‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: ﻫﻤﻪ ﺟﺎ‬‫• ﺑﺮﭼﺴﺐ ﻫﺎي ﻧﺎﺣﻴﻪ ﺑﻨﺪي ﺑﺮاي ﺟﺪا ﻛﺮدن ﻧﺎﺣﻴﻪ ﻫﺎي ‪ HTML‬اﺳﺘﻔﺎده ﻣﻲ ﺷﻮﻧﺪ. اﻳﻦ‬ ‫ﺑﺮﭼﺴﺐ ﻫﺎ ﺑﺴﻴﺎر ﭘﺮﻛﺎرﺑﺮد ﺑﻮده و در اﺳﻨﺎد ‪ HTML‬ﺑﻪ ﺗﻌﺪاد اﺳﺘﻔﺎده ﻣﻲ ﺷﻮﻧﺪ.‬‫• ﺑﺮﭼﺴﺐ ‪ Span‬ﺑﺮاي ﻧﺎﺣﻴﻪ ﺑﻨﺪي ﻗﺴﻤﺘﻲ از ﻣﺘﻦ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد و ﺗﻔﺎوﺗﻲ در ﻇﺎﻫﺮ‬ ‫ﺳﻨﺪ اﻳﺠﺎد ﻧﻤﻲ ﻛﻨﺪ.‬‫• ﺑﺮﭼﺴﺐ ‪ Div‬ﺑﺮاي ﻧﺎﺣﻴﻪ ﺑﻨﺪي ﻗﺴﻤﺘﻲ از ﺳﻨﺪ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد و ﻣﻲ ﺗﻮاﻧﺪ اﻧﻮاع‬ ‫ﺑﺮﭼﺴﺐ ﻫﺎي دﻳﮕﺮ )ﺣﺘﻲ ‪ (Div‬را در ﺧﻮد ﻧﮕﻪ دارد.‬ ‫• در ﺑﺨﺶ ‪ CSS‬ﺑﻴﺸﺘﺮ راﺟﻊ ﺑﻪ اﻳﻦ ﺑﺮﭼﺴﺐ ﻫﺎ ﺑﺤﺚ ﺧﻮاﻫﺪ ﺷﺪ.‬
  • 40. ‫ﺟﺪول ﻫﺎ‬
  • 41. ‫ﺟﺪول ﻫﺎي ‪HTML‬‬‫ﺟﺪول ﻫﺎ از ﻣﻬﻤﺘﺮﻳﻦ و ﭘﺮﻛﺎرﺑﺮدﺗﺮﻳﻦ ﺑﺮﭼﺴﺐ ﻫﺎي ‪ HTML‬ﻫﺴﺘﻨﺪ. آﻧﻬﺎ ﻛﺎرﺑﺮدﻫﺎي‬ ‫•‬ ‫زﻳﺎدي دارﻧﺪ از ﺟﻤﻠﻪ:‬ ‫– اراﺋﻪ اﻃﻼﻋﺎت ﻗﺎﻟﺐ ﺑﻨﺪي ﺷﺪه‬ ‫– ﻗﺎﻟﺐ ﺑﻨﺪي ﺻﻔﺤﺎت‬ ‫– ﻗﺎﻟﺐ ﺑﻨﺪي ﺗﺼﺎوﻳﺮ‬ ‫• ﻳﻚ ﺟﺪول ﻛﺎﻣﻞ ﺑﺎ ﻳﻚ ﺑﺮﭼﺴﺐ ‪ Table‬ﺷﺮوع و ﭘﺎﻳﺎن ﻣﻲ ﻳﺎﺑﺪ.‬‫• ﻫﺮ ﺟﺪول ﻣﻲ ﺗﻮاﻧﺪ ﻳﻚ ﻗﺴﻤﺖ ﺑﺎﻻﻳﻲ )‪ ،(Header‬ﻳﻚ ﻗﺴﻤﺖ ﻣﻴﺎﻧﻲ )‪ (Body‬و ﻳﻚ‬ ‫ﻗﺴﻤﺖ ﺗﺤﺘﺎﻧﻲ )‪ (Footer‬داﺷﺘﻪ ﺑﺎﺷﺪ.‬ ‫• ﺳﻄﺮ ﻫﺎ و ﺳﺘﻮن ﻫﺎ در ﻫﺮ ﻧﺎﺣﻴﻪ ﺟﺪاﮔﺎﻧﻪ ﻣﺸﺨﺺ ﻣﻲ ﺷﻮﻧﺪ.‬
  • 42. ‫ﺑﺮﭼﺴﺐ >‪<Table‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Table‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻳﻚ ﺟﺪول ﻛﺎﻣﻞ‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫‪ :Border‬اﻧﺪازه ﻛﺎدر ﺧﺎﻧﻪ ﻫﺎي ﺟﺪول. ﻳﻚ ﻋﺪد ﺻﺤﻴﺢ‬ ‫–‬ ‫‪ :Cellpadding‬ﻓﺎﺻﻠﻪ ﻣﻴﺎن دﻳﻮاره ﺧﺎﻧﻪ ﻫﺎي ﺟﺪول و داده درون آﻧﻬﺎ‬ ‫–‬ ‫‪ :Cellspacing‬ﻓﺎﺻﻠﻪ ﻣﻴﺎن دو ﺧﺎﻧﻪ ﺟﺪول‬ ‫–‬ ‫‪ :Width‬ﻋﺮض ﺟﺪول ﺑﻪ ﻋﺪد ﻳﺎ درﺻﺪ )درﺻﺪ از اﻧﺪازه ﻛﻞ ﺻﻔﺤﻪ(‬ ‫–‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Body‬‬
  • 43. ‫ﺑﺮﭼﺴﺐ >‪<Tr‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Tr‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻳﻚ ﺳﻄﺮ ﺟﺪول )‪(Table Row‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :Align‬ﺟﻬﺖ ﮔﻴﺮي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘﻲ(‬ ‫– ‪ :VAlign‬ﺟﻬﺖ ﮔﻴﺮي ﻋﻤﻮدي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ:‬ ‫‪Top‬‬ ‫•‬ ‫‪Middle‬‬ ‫•‬ ‫‪Bottom‬‬ ‫•‬ ‫‪Baseline‬‬ ‫•‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Table,Tbody,Thead,Tfoot‬‬
  • 44. ‫ﺑﺮﭼﺴﺐ >‪<Td‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Td‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻳﻚ ﺧﺎﻧﻪ داده در ﻳﻚ ﺳﻄﺮ ﺟﺪول )‪(Table Data‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫‪ :Align‬ﺟﻬﺖ ﮔﻴﺮي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘﻲ(‬ ‫–‬ ‫‪ :VAlign‬ﺟﻬﺖ ﮔﻴﺮي ﻋﻤﻮدي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ‬ ‫–‬ ‫‪ :Colspan‬اﻳﻦ ﺧﺎﻧﻪ ﭼﻨﺪ ردﻳﻒ را در ﺑﺮ ﺑﮕﻴﺮد )ادﻏﺎم ﺳﺘﻮﻧﻲ ﺧﺎﻧﻪ ﻫﺎ(‬ ‫–‬ ‫‪ :Rowspan‬اﻳﻦ ﺧﺎﻧﻪ ﭼﻨﺪ ﺳﺘﻮن را در ﺑﺮ ﺑﮕﻴﺮد)ادﻏﺎم ردﻳﻔﻲ ﺧﺎﻧﻪ ﻫﺎ(‬ ‫–‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪tr,th‬‬
  • 45. ‫ﻣﺜﺎل ﺟﺪول ﺳﺎده‬<html><body> <table border=1> <tr> <td>Cell 11</td> <td>Cell 12</td> </tr><tr> <td>Cell 21</td> <td>Cell 22</td> </tr></table> <hr/> <table border=1> <tr> <td rowspan=2>Cell 11 <br/>Cell 21</td> <td>Cell 12</td> </tr><tr> <!-- Cell 21 ommited --> <td>Cell 22</td> </tr></table></body></html>
  • 46. ‫ﺑﺮﭼﺴﺐ >‪<Tbody‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Tbody‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻧﺎﺣﻴﻪ ﺑﺪﻧﻪ ﺟﺪول )‪(Table Body‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :Align‬ﺟﻬﺖ ﮔﻴﺮي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘﻲ(‬ ‫– ‪ :VAlign‬ﺟﻬﺖ ﮔﻴﺮي ﻋﻤﻮدي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Table‬‬
  • 47. ‫ﺑﺮﭼﺴﺐ >‪<Thead‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Thead‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻧﺎﺣﻴﻪ ﻓﻮﻗﺎﻧﻲ ﺟﺪول )‪(Table Header‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :Align‬ﺟﻬﺖ ﮔﻴﺮي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘﻲ(‬ ‫– ‪ :VAlign‬ﺟﻬﺖ ﮔﻴﺮي ﻋﻤﻮدي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Table‬‬
  • 48. ‫ﺑﺮﭼﺴﺐ >‪<Tfoot‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Tfoot‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻧﺎﺣﻴﻪ ﺗﺤﺘﺎﻧﻲ ﺟﺪول )‪(Table Footer‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :Align‬ﺟﻬﺖ ﮔﻴﺮي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘﻲ(‬ ‫– ‪ :VAlign‬ﺟﻬﺖ ﮔﻴﺮي ﻋﻤﻮدي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Table‬‬
  • 49. ‫ﺑﺮﭼﺴﺐ >‪<Th‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Th‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻳﻚ ﺧﺎﻧﻪ داده در ﺳﻄﺮ ﻧﺎﺣﻴﻪ ﻓﻮﻗﺎﻧﻲ ﺟﺪول ) ‪(Table Header Data‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :Align‬ﺟﻬﺖ ﮔﻴﺮي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘﻲ(‬ ‫– ‪ :VAlign‬ﺟﻬﺖ ﮔﻴﺮي ﻋﻤﻮدي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Thead>Tr‬‬
  • 50. ‫ﻣﺜﺎل ﺟﺪول ﻧﺎﺣﻴﻪ ﺑﻨﺪي ﺷﺪه‬<html><body> <table border="1"> <thead><tr> <th>Month</th> <th>Pays</th> </tr></thead><tbody><tr> <td>January</td> <td>$100</td> </tr><tr> <td>February</td> <td>$80</td> </tr></tbody><tfoot><tr> <td>Sum</td> <td>$180</td> </tr></tfoot></table></body></html>
  • 51. ‫ﺟﺪول ﻫﺎي ﻗﺎﻟﺐ ﺑﻨﺪي‬‫• ﻫﻨﮕﺎﻣﻲ ﻛﻪ از ﺟﺪاول ﺑﺮاي ﻗﺎﻟﺐ ﺑﻨﺪي ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد، ‪ Border‬آﻧﻬﺎ ﺻﻔﺮ‬ ‫ﻗﺮار ﻣﻲ ﮔﻴﺮد ﺗﺎ ﻣﺸﺨﺺ ﻧﺒﺎﺷﻨﺪ.‬ ‫• ﺑﺎ اﺳﺘﻔﺎده از ‪ CSS‬ﻣﻲ ﺗﻮان ﺑﻪ ﺟﺪول ﻫﺎ ﻧﻤﻮد ﺑﺴﻴﺎر ﺧﻮب و ﻣﻄﻠﻮﺑﻲ داد.‬ ‫• ﻗﺎﻟﺐ ﺑﻨﺪي ﺑﺎ ﺟﺪاول ﺑﺎﻋﺚ اﺳﺘﺎﻧﺪارد ﺷﺪن ﺷﻴﻮه ﻧﻤﺎﻳﺶ ﺻﻔﺤﻪ ﻣﻲ ﺷﻮد.‬ ‫• ﺟﺪول ﻫﺎ ﺑﺮ اﺳﺎس ﻧﻮع ﺳﻨﺪ )‪ (DOCTYPE‬ﺑﻪ اﻧﻮاع ﻣﺨﺘﻠﻔﻲ ﺗﻔﺴﻴﺮ ﻣﻲ ﺷﻮﻧﺪ.‬ ‫ﺑﺮاي ﻣﺜﺎل ﺳﺎﻳﺖ ‪ bazitab.com‬ﺑﺎ اﺳﺘﻔﺎده از ﺟﺪاول ﻗﺎﻟﺐ ﺑﻨﺪي ﺷﺪه اﺳﺖ:‬ ‫•‬
  • 52. ‫ﻓﺮم ﻫﺎ‬
  • 53. ‫ﻓﺮم ﻫﺎي ‪HTML‬‬‫• ﻫﻤﺎﻧﻄﻮري ﻛﻪ اﺷﺎره ﺷﺪ، ﭘﺮوﺗﻜﻞ ‪ HTTP‬ﺑﺮ ﻣﺒﻨﺎي ﺗﻘﺎﺿﺎ/ﭘﺎﺳﺦ ﻛﺎر ﻣﻲ ﻛﻨﺪ. ﺑﺮاي‬‫ارﺳﺎل ﻳﻚ ﺗﻘﺎﺿﺎي ﭘﻮﻳﺎ از ﺻﻔﺤﺎت وب ﺑﻪ ﻳﻚ ﺳﺮور، از ﻓﺮﻣﻬﺎي ‪ HTML‬اﺳﺘﻔﺎده ﻣﻲ‬ ‫ﺷﻮد.‬‫• ﻓﺮم و اﺟﺰاي آن ﻧﻴﺰ ﺑﺮﭼﺴﺐ ﻫﺎي ‪ HTML‬ﻫﺴﺘﻨﺪ. ﺑﻪ ﻫﻨﮕﺎم ارﺳﺎل )‪ (Submit‬ﻳﻚ‬ ‫ﻓﺮم، ﻛﺎوﺷﮕﺮ ﺑﻪ ﺻﻮرت اﺗﻮﻣﺎﺗﻴﻚ ﻣﺤﺘﻮاي درﺧﻮاﺳﺖ ﻓﺮم را ﺑﻪ ﺳﺮور ارﺳﺎل ﻣﻲ ﻧﻤﺎﻳﺪ.‬ ‫• ﺑﺎ اﺳﺘﻔﺎده از اﺗﺼﺎﻻت، ﻣﻲ ﺗﻮان درﺧﻮاﺳﺖ ﻫﺎي ‪ Get‬اﻳﺴﺘﺎ اﻳﺠﺎد ﻛﺮد.‬ ‫• درﺧﻮاﺳﺖ ﻫﺎ دو ﻧﻮع ﻣﻌﻤﻮل دارﻧﺪ: ‪ Get‬و ‪:Post‬‬‫– در ﻧﻮع ‪ Get‬ﭘﺎراﻣﺘﺮﻫﺎي درﺧﻮاﺳﺖ در اﻧﺘﻬﺎي ‪ URL‬اﺿﺎﻓﻪ ﻣﻲ ﺷﻮﻧﺪ و ﻗﺎﺑﻞ دﻳﺪن ﻫﺴﺘﻨﺪ،‬ ‫ﺑﻪ ﻫﻤﻴﻦ دﻟﻴﻞ ﻣﺤﺪودﻳﺖ اﻧﺪازه دارﻧﺪ )1 ﻛﻴﻠﻮﺑﺎﻳﺖ(‬‫– در ﻧﻮع ‪ Post‬ﭘﺎراﻣﺘﺮﻫﺎي درﺧﻮاﺳﺖ ﻏﻴﺮﻗﺎﺑﻞ دﻳﺪ ﺑﻪ ﺳﺮور ﻓﺮﺳﺘﺎده ﻣﻲ ﺷﻮﻧﺪ و ﻣﺤﺪودﻳﺖ‬ ‫ﻛﻤﺘﺮي دارﻧﺪ )46 ﻣﮕﺎﺑﺎﻳﺖ(‬ ‫• ﻣﺰاﻳﺎ و ﻣﻌﺎﻳﺐ ‪ Post‬و ‪ Get‬در ﭼﻴﺴﺖ؟‬‫‪http://hosting.pershe.com/viewticket.php?tid=109338&c=X4jQ3Ukc‬‬ ‫ﺟﺪاﻛﻨﻨﺪه ﭘﺎراﻣﺘﺮﻫﺎ از آدرس‬ ‫ﭘﺎراﻣﺘﺮﻫﺎي ‪(c , tid) Get‬‬ ‫ﺟﺪاﻛﻨﻨﺪه ﭘﺎراﻣﺘﺮﻫﺎ از ﻳﻜﺪﻳﮕﺮ‬
  • 54. ‫>‪<form‬‬‫• ﻳﻚ ﻓﺮم ‪ HTML‬داﺧﻞ ﻳﻚ ﺑﺮﭼﺴﺐ ‪ Form‬ﻗﺮار ﻣﻲ ﮔﻴﺮد. ﻫﺮ ﻓﺮم ﻣﻲ ﺗﻮاﻧﺪ )در ﺣﺎﻟﺖ‬‫ﻣﻌﻤﻮل( ﻳﻚ ﻛﻠﻴﺪ ارﺳﺎل )‪ (Submit‬داﺷﺘﻪ ﺑﺎﺷﺪ، ﻛﻪ ﺑﺎ ﻛﻠﻴﻚ ﺷﺪن آن ﻳﺎ ﻓﺸﺮده‬‫ﺷﺪن ﻛﻠﻴﺪ ‪ Enter‬در ﻫﺮ ﺟﺎي ﻓﺮم، ﻛﺎوﺷﮕﺮ ﺑﻪ ﻃﻮر ﺧﻮدﻛﺎر ﻣﺤﺘﻮاي ﻓﺮم را ارﺳﺎل‬ ‫ﻛﺮده و ﺻﻔﺤﻪ را ﺑﺎرﮔﺰاري ﻣﺠﺪد ﻣﻲ ﻛﻨﺪ.‬ ‫• ﻳﻚ ﻓﺮم دو ﭘﺎراﻣﺘﺮ اﺻﻠﻲ داراﺳﺖ:‬ ‫– ‪ :Method‬ﺷﻴﻮه ارﺳﺎل را ﻣﻌﻴﻦ ﻣﻲ ﻛﻨﺪ )‪(Get/Post‬‬ ‫– ‪ :Action‬ﻣﻘﺼﺪي ﻛﻪ اﻃﻼﻋﺎت ﺑﻪ آن ارﺳﺎل ﻣﻲ ﺷﻮﻧﺪ را ﻣﺸﺨﺺ ﻣﻲ ﺳﺎزد.‬ ‫ﺑﺮاي ﻣﺜﺎل ﺑﻪ ﻓﺮم زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ:‬ ‫•‬‫>‪<form></form‬‬‫>‪<form action=‘getData.php’ method=‘get’></form‬‬‫>‪<form action=‘http://google.com/’ method=‘get’></form‬‬
  • 55. ‫>‪<input‬‬‫• ﻣﻌﻤﻮل ﺗﺮﻳﻦ ﻓﻴﻠﺪﻫﺎﻳﻲ ﻛﻪ در ﻳﻚ ﻓﺮم ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﻲ ﮔﻴﺮﻧﺪ، ﻓﻴﻠﺪﻫﺎي ورود‬‫ﻣﺴﺘﻘﻴﻢ اﻃﻼﻋﺎت )دﻛﻤﻪ ﻳﺎ ﺟﻌﺒﻪ ﻣﺘﻦ( ﻫﺴﺘﻨﺪ. اﻧﻮاع ﻣﺨﺘﻠﻒ اﻳﻦ ﻓﻴﻠﺪﻫﺎ ﺗﻮﺳﻂ ﺻﻔﺖ‬ ‫‪ type‬ﻣﺸﺨﺺ ﻣﻲ ﺷﻮﻧﺪ:‬ ‫‪ :Button‬ﻳﻚ دﻛﻤﻪ ﻣﻌﻤﻮﻟﻲ )ﺑﺮاي ﻛﺎرﺑﺮدﻫﺎي اﺳﻜﺮﻳﭙﺘﻲ(‬ ‫–‬ ‫‪ :Checkbox‬ﻳﻚ ﻣﺮﺑﻊ ﺳﻔﻴﺪ ﻛﻮﭼﻚ ﻗﺎﺑﻞ ﺗﻴﻚ ﺧﻮردن‬ ‫–‬ ‫‪ :File‬ﻳﻚ ﻓﻴﻠﺪ اﻧﺘﺨﺎب ﻓﺎﻳﻞ )ﺑﺮاي آﭘﻠﻮد(‬ ‫–‬ ‫‪ :Hidden‬ﻳﻚ ﻓﻴﻠﺪ ﻣﺘﻨﻲ ﻏﻴﺮﻗﺎﺑﻞ دﻳﺪن )داراي ﻛﺎرﺑﺮدﻫﺎي ﻓﺮاوان(‬ ‫–‬ ‫‪ :Password‬ﻳﻚ ﻓﻴﻠﺪ ﻣﺘﻨﻲ ﻛﻪ ﻣﺤﺘﻮاي ﺧﻮد را ﺑﻪ ﺷﻜﻞ ﺳﺘﺎره ﻧﺸﺎن ﻣﻲ دﻫﺪ‬ ‫–‬ ‫‪ :Radio‬ﻳﻚ داﻳﺮه ﻛﻮﭼﻚ. از ﻳﻚ ﻣﺠﻤﻮﻋﻪ ‪ Radio‬ﺗﻨﻬﺎ ﻳﻜﻲ ﻣﻲ ﺗﻮاﻧﺪ اﻧﺘﺨﺎب ﺷﻮد‬ ‫–‬ ‫‪ :Text‬ﻓﻴﻠﺪ ﻣﺘﻨﻲ ﻣﻌﻤﻮﻟﻲ‬ ‫–‬ ‫‪ :Submit‬دﻛﻤﻪ ارﺳﺎل ﻓﺮم‬ ‫–‬ ‫‪ :Reset‬دﻛﻤﻪ ﭘﺎك ﻛﺮدن ﻣﺤﺘﻮاي ﺗﻤﺎم ﻓﻴﻠﺪﻫﺎي ﻓﺮم‬ ‫–‬
  • 56. <input> ‫ﻣﺜﺎل‬<html><body><form method=get><input type=checkbox> I am a checkbox! <br/><input type=file> <br/><input type=password value=sth> <br/><input type=radio> Radio button! <br/><input type=text value=Normal!> <br/><input type=submit> | <input type=button></form></body></html>
  • 57. ‫>‪) <input‬اداﻣﻪ(‬‫• ﺗﻘﺮﻳﺒﺎ اﻛﺜﺮ ﻓﻴﻠﺪﻫﺎي ﻳﻚ ﻓﺮم ﺑﺎ اﺳﺘﻔﺎده از ﺑﺮﭼﺴﺐ ‪ input‬ﺗﺎﻣﻴﻦ ﻣﻲ ﺷﻮﻧﺪ! ﺻﻔﺎت‬ ‫ﻣﻌﻤﻮل ﻳﻚ ‪ input‬ﺑﻪ ﺷﺮح زﻳﺮﻧﺪ:‬‫‪ :Checked‬در ﺻﻮرﺗﻲ ﻛﻪ ‪ Radio‬ﻳﺎ ‪ Checkbox‬اﺳﺘﻔﺎده ﺷﻮد، ﻣﻲ ﺗﻮاﻧﺪ ﺗﻴﻚ ﺧﻮردن‬ ‫–‬ ‫ﻳﺎ ﻧﺨﻮردن آﻧﺮا ﻣﺸﺨﺺ ﻛﻨﺪ : ‪Checked=‘Checked’ or else‬‬ ‫‪ :Disabled‬ﻫﺮ ورودي ﻛﻪ ﻏﻴﺮﻓﻌﺎل ﺷﻮد، ﺧﺎﻛﺴﺘﺮي ﺷﺪه و ﻏﻴﺮﻗﺎﺑﻞ ﺗﻌﺎﻣﻞ ﺧﻮاﻫﺪ ﺷﺪ.‬ ‫–‬ ‫‪ :MaxLength‬ﺑﺮاي ‪ text‬ﻳﺎ ‪ password‬ﺣﺪاﻛﺜﺮ ﺗﻌﺪاد ﻛﺎراﻛﺘﺮ ﻗﺎﺑﻞ ﺗﺎﻳﭗ اﺳﺖ‬ ‫–‬ ‫‪ :Readonly‬ﺑﺮاي ﻓﻴﻠﺪﻫﺎي ‪ text‬ﻳﺎ ‪ ،password‬آﻧﻬﺎ را ﻏﻴﺮﻗﺎﺑﻞ ﺗﻐﻴﻴﺮ ﻣﻲ ﻛﻨﺪ‬ ‫–‬ ‫‪ :Size‬اﻧﺪازه ﻇﺎﻫﺮي ﻓﻴﻠﺪ را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ )ﺑﺮ ﺣﺴﺐ ﺗﻌﺪاد ﻛﺎراﻛﺘﺮ(‬ ‫–‬‫‪ :Value‬ﺑﺮاي دﻛﻤﻪ ﻫﺎ، ﻣﺘﻦ روي آﻧﻬﺎ را ﻣﺸﺨﺺ ﻣﻲ ﺳﺎزد. ﺑﺮاي ﻣﺎﺑﻘﻲ، ﻣﺤﺘﻮاي ﻣﻘﺪاري را‬ ‫–‬‫ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ )ﻛﻪ ﻓﻘﻂ در ﻓﻴﻠﺪﻫﺎي ﻣﺘﻨﻲ ﻗﺎﺑﻞ ﻣﺸﺎﻫﺪه اﺳﺖ(. اﻳﻦ ﻣﺤﺘﻮا ﭘﺲ از ارﺳﺎل‬ ‫ﻓﺮم، ﺑﻪ ﺳﺮور ارﺳﺎل ﻣﻲ ﺷﻮد.‬ ‫‪ :Name‬ﻧﺎﻣﻴﺴﺖ ﻛﻪ ﺳﺮور اﻃﻼﻋﺎت ﻫﺮ ﻓﻴﻠﺪ را ﺑﺎ آن ﺗﻤﻴﺰ ﻣﻲ دﻫﺪ.‬ ‫–‬
  • 58. <input> ‫ﻣﺜﺎل دوم‬<html><body><form method=getaction=http://google.com/search>:‫<ﻋﺒﺎرﺗﻲ را وارد ﻛﻨﻴﺪ ﺗﺎ در ﮔﻮﮔﻞ ﺟﺴﺘﺠﻮ ﺷﻮد‬br/><input text value=Search String /><br/><input type=submit value=Search><br/></form></body></html>
  • 59. ‫>‪<textarea‬‬‫• ﺑﺮﭼﺴﺐ >‪ <textarea‬ﺟﻬﺖ ﺗﻌﺮﻳﻒ ﻳﻚ ﻣﺤﻴﻂ ورود ﻣﺘﻦ )ﭼﻨﺪ ﺧﻄﻲ( اﺳﺘﻔﺎده ﻣﻲ‬ ‫ﺷﻮد. از اﻳﻦ ﺑﺮﭼﺴﺐ ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﻻزم اﺳﺖ ﻣﺘﻦ ﺑﺰرﮔﻲ وارد ﺷﻮد، اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻨﺪ.‬ ‫• ﺻﻔﺖ ‪ readonly‬ﺑﺮاي اﻳﻦ ﺑﺮﭼﺴﺐ ﻣﻌﺘﺒﺮ اﺳﺖ.‬‫• ﺻﻔﺎت ‪ rows‬و ‪ cols‬ﺑﻪ ﺗﺮﺗﻴﺐ ﺗﻌﺪاد ﺳﻄﺮﻫﺎ و ﺳﺘﻮن ﻫﺎي ﻳﻚ ﻣﺤﻮﻃﻪ ﻣﺘﻨﻲ را ﺑﺮ‬ ‫ﺣﺴﺐ ﻛﺎراﻛﺘﺮ ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﻨﺪ.‬‫• دﻗﺖ ﻛﻨﻴﺪ ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﻣﻲ ﺧﻮاﻫﻴﺪ ﻳﻚ ﻓﻀﺎي ﻣﺘﻦ ﺧﺎﻟﻲ اﻳﺠﺎد ﻛﻨﻴﺪ، ﺑﻴﻦ ﺷﺮوع و ﭘﺎﻳﺎن‬‫ﺑﺮﭼﺴﺐ، ﺧﻂ ﻳﺎ ﻓﺎﺻﻠﻪ وﺟﻮد ﻧﺪاﺷﺘﻪ ﺑﺎﺷﺪ، زﻳﺮا ﻫﺮﭼﻴﺰي ﻛﻪ ﻣﺎﺑﻴﻦ دو ﺑﺮﭼﺴﺐ‬ ‫‪ textarea‬ﺑﺎﺷﺪ، ﻣﺤﺘﻮي آن ﻣﺤﺴﻮب ﻣﻲ ﮔﺮدد:‬‫‪<textarea rows=‘5’ cols=‘10’>Hello‬‬‫>‪There</textarea‬‬ ‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ، ﻣﺘﺤﻮاي ‪ textarea‬از اﺻﻮل‬ ‫‪ HTML‬ﭘﻴﺮوي ﻧﻤﻲ ﻛﻨﺪ )ﻋﺪم اﺣﺘﻴﺎج ﺑﻪ >/‪(<br‬‬
  • 60. ‫>‪<select‬‬‫ﺑﺮﭼﺴﺐ ‪ Select‬ﻳﻚ ‪ Dropdown Combo‬اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ، ﻳﻌﻨﻲ ﻟﻴﺴﺘﻲ ﻛﻪ ﺗﻨﻬﺎ‬ ‫•‬‫ﻳﻚ ﻋﻨﺼﺮ آن ﻣﺸﺨﺺ اﺳﺖ و ﺑﺎ ﻛﻠﻴﻚ ﺑﺮ روي آن، ﻣﺎﺑﻘﻲ ﺑﻪ ﺻﻮرت ﻛﺮﻛﺮه اي ﻗﺎﺑﻞ‬ ‫اﻧﺘﺨﺎب ﻣﻲ ﮔﺮدﻧﺪ.‬‫در ﺻﻮرﺗﻲ ﻛﻪ ﺻﻔﺖ ‪ Mutiple‬از ﻳﻚ ‪ Select‬ﺗﻨﻈﻴﻢ ﺷﻮد، دﻳﮕﺮ ﻛﺮﻛﺮه اي ﻧﺒﻮده و ﺑﻪ‬ ‫•‬‫ﻣﺎﻧﻨﺪ ﻳﻚ ﻟﻴﺴﺖ ﻣﻌﻤﻮﻟﻲ ﺑﺎ ﻗﺎﺑﻠﻴﺖ اﻧﺘﺨﺎب ﭼﻨﺪﻳﻦ ﻣﻮرد ﺧﻮاﻫﺪ ﺑﻮد. ﻣﺤﺘﻮﻳﺎت ﻟﻴﺴﺘﻬﺎي‬ ‫اﻳﻨﮕﻮﻧﻪ در ﻗﺎﻟﺐ ﻳﻚ آراﻳﻪ ﺑﺮاي ﺳﺮور ارﺳﺎل ﻣﻲ ﺷﻮﻧﺪ.‬ ‫ﻣﻮارد ﻳﻚ ﻟﻴﺴﺖ ‪ Select‬ﺗﻮﺳﻂ ﺑﺮﭼﺴﺐ ﻫﺎي ‪ Option‬ﻣﺸﺨﺺ ﻣﻲ ﮔﺮدﻧﺪ.‬ ‫•‬‫ﻫﺮ ‪ Option‬اي ﻛﻪ ﺻﻔﺖ ‪ Selected‬آن ﺗﻨﻈﻴﻢ ﺷﺪه ﺑﺎﺷﺪ، در ﻟﻴﺴﺖ ﺑﻪ ﺻﻮرت‬ ‫•‬ ‫اﻧﺘﺨﺎب ﺷﺪه ﺧﻮاﻫﺪ ﺑﻮد.‬‫ﻫﺮ ‪ Option‬اﮔﺮ ﺻﻔﺖ ‪ Value‬ﺗﻨﻈﻴﻢ ﺷﺪه داﺷﺘﻪ ﺑﺎﺷﺪ، در ﺻﻮرت اﻧﺘﺨﺎب، ‪Value‬‬ ‫•‬ ‫آن ﺑﻪ ﺳﺮور ارﺳﺎل ﻣﻲ ﺷﻮد و در ﻏﻴﺮ اﻳﻨﺼﻮرت ﻣﺤﺘﻮاي ﻣﺘﻨﻲ آن.‬
  • 61. <select> ‫ﻣﺜﺎل‬<html><body><select> <option value=Wood>‫/<ﭼﻮب‬option> <option value=Iron>‫/<آﻫﻦ‬option> <option value=Stone>‫/<ﺳﻨﮓ‬option></select></body></html>
  • 62. ‫>‪<label>,<fieldset‬‬‫• ﺑﺮاي ﺗﻨﻈﻴﻢ راﻫﻨﻤﺎ و ﻣﺘﻦ ﻣﻌﺮف ﻳﻚ ﻓﻴﻠﺪ در ﻳﻚ ﻓﺮم، ﺑﻬﺘﺮ اﺳﺖ ﺑﺠﺎي ﻣﺘﻦ ﻋﺎدي از‬ ‫ﺑﺮﭼﺴﺐ ‪ Label‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ. اﻳﻨﻜﺎر ﺗﻮاﻧﺎﻳﻲ ﻗﺎﻟﺐ ﺑﻨﺪي ﺻﻔﺤﺎت را ﺑﻴﺸﺘﺮ ﻣﻲ ﻛﻨﺪ.‬ ‫• ﺗﻨﻬﺎ ﺻﻔﺖ ﻳﻚ ‪ For ،Label‬اﺳﺖ ﻛﻪ ﻧﺎم ﻳﻚ ﻓﻴﻠﺪ دﻳﮕﺮ را درﻳﺎﻓﺖ ﻣﻲ ﻛﻨﺪ.‬‫>‪<label for=‘myname’>Enter your name:</label‬‬‫>/ ’‪<input type=‘text’ name=‘myname‬‬‫ﺑﺮاي ﮔﺮوه ﺑﻨﺪي ﻣﻨﻄﻘﻲ دﺳﺘﻪ اي از ﻓﻴﻠﺪﻫﺎي ﻳﻚ ﻓﺮم، از ﺑﺮﭼﺴﺐ ‪ fieldset‬اﺳﺘﻔﺎده‬ ‫•‬ ‫ﻣﻲ ﺷﻮد. اﻳﻨﻜﺎر ﻣﺨﺼﻮﺻﺎ در ﻫﻨﮕﺎم اﺳﺘﻔﺎده از ‪ Radio‬ﻫﺎي ﻣﺘﻌﺪد ﻻزم اﺳﺖ:‬‫>‪<fieldset‬‬‫>’‪<input type=‘radio’><input type=‘radio‬‬‫>‪</fieldset><fieldset‬‬‫>‪<input type=‘radio’><input type=‘radiou’></fieldset‬‬
  • 63. ‫ﻧﻜﺎت ﺳﻮدﻣﻨﺪ‬
  • 64. ‫ﺻﻔﺘﻬﺎي اﺷﺘﺮاﻛﻲ‬ ‫ﺷﺶ ﺻﻔﺖ وﺟﻮد دارﻧﺪ ﻛﻪ ﺑﺮاي ﺗﻤﺎﻣﻲ ﺑﺮﭼﺴﺐ ﻫﺎي ‪ HTML‬ﻣﻌﺘﺒﺮ ﻫﺴﺘﻨﺪ:‬ ‫•‬ ‫– ﺻﻔﺘﻬﺎي ﻫﺴﺘﻪ اي:‬ ‫‪ :Class‬ﻛﻼس ﻳﻚ ﺑﺮﭼﺴﺐ را ﻣﺸﺨﺺ ﻣﻲ ﺳﺎزد )ﺑﺮاي اﺳﺘﻔﺎده در ‪(CSS‬‬ ‫•‬‫‪ :Id‬ﻳﻚ اﺳﻢ ﺑﺮاي ﺑﺮﭼﺴﺐ ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ. در ﻳﻚ ﺳﻨﺪ ‪ HTML‬اﺳﻢ ﻫﻴﭻ دو ﺑﺮﭼﺴﺒﻲ ﻧﺒﺎﻳﺪ‬ ‫•‬ ‫ﻳﻜﺴﺎن ﺑﺎﺷﺪ. در اﺳﻜﺮﻳﭙﺖ و ‪ CSS‬ﻣﻲ ﺗﻮان ﺑﺎ اﺳﻢ ﺑﺮدن ﻳﻚ ﺑﺮﭼﺴﺐ ﺑﻪ آن دﺳﺘﺮﺳﻲ ﻳﺎﻓﺖ.‬‫‪ :Style‬وﺿﻌﻴﺖ ﻇﺎﻫﺮي ﻳﻚ ﺑﺮﭼﺴﺐ را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ )ﺗﻮﺻﻴﻪ ﻣﻲ ﺷﻮد ﺑﻪ ﺟﺎي آن از ‪CSS‬‬ ‫•‬ ‫اﺳﺘﻔﺎده ﺷﻮد(‬ ‫‪ :Title‬ﻣﺘﻦ راﻫﻨﻤﺎي ﻛﻤﻜﻲ ﺑﺮﭼﺴﺐ را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ )ﺑﺎ ﻧﮕﻪ داﺷﺘﻦ ﻣﺎوس ﻧﻤﺎﻳﺎن ﻣﻲ ﺷﻮد(‬ ‫•‬ ‫– ﺻﻔﺖ زﺑﺎﻧﻲ:‬ ‫• ‪ :Dir‬ﺟﻬﺖ ﻣﺘﻦ، ‪ LTR‬ﻳﺎ ‪RTL‬‬ ‫– ﺻﻔﺖ دﺳﺘﻴﺎﺑﻲ:‬‫• ‪ :Tabindex‬ﺗﺮﺗﻴﺐ دﺳﺘﺮﺳﻲ ﺑﻪ ﻳﻚ ﺑﺮﭼﺴﺐ را ﺑﺮاي اﺳﺘﻔﺎده ﻛﻨﻨﺪﮔﺎن از ﻛﻴﺒﻮد ﻣﺸﺨﺺ ﻣﻲ‬‫ﺳﺎزد. در ﺻﻮرﺗﻲ ﻛﻪ ﺑﺮ روي ﻛﻴﺒﻮرد ﻛﻠﻴﺪ ‪ TAB‬را ﻓﺸﺎر دﻫﻴﺪ، ﺑﻪ ﺗﺮﺗﻴﺐ ‪ Tabindex‬روي‬ ‫ﻋﻨﺎﺻﺮ ﺟﺎﺑﺠﺎ ﺧﻮاﻫﻴﺪ ﺷﺪ.‬
  • 65. ‫ﺑﺮﭼﺴﺐ ﻫﺎي دﻳﮕﺮ‬‫• ﺑﺮﭼﺴﺐ ﻫﺎي زﻳﺮ ﻧﻴﺰ در ‪ HTML‬وﺟﻮد دارﻧﺪ ﻛﻪ در دوره ﻫﺎي دﻳﮕﺮي ﻣﻄﺮح ﺧﻮاﻫﻨﺪ‬ ‫ﺷﺪ:‬ ‫– ‪ :Style‬ﻳﻚ ﺳﻨﺪ ‪ CSS‬در درون اﻳﻦ ﺑﺮﭼﺴﺐ ﺗﻌﺮﻳﻒ ﻣﻲ ﺷﻮد‬ ‫– ‪ :Script‬اﺳﻜﺮﻳﭙﺘﻬﺎي ‪ Javascript‬درون اﻳﻦ ﺑﺮﭼﺴﺐ ﻧﻮﺷﺘﻪ ﻣﻲ ﺷﻮﻧﺪ‬‫– ‪ :Meta‬ﺑﺮاي ﺗﻌﺮﻳﻒ ﻣﺘﺎداده در ‪ Head‬ﻳﻚ ﺳﻨﺪ. ﺑﺮﭼﺴﺐ ﻫﺎي ﻣﺘﺎ در واﻗﻊ ﻣﻲ ﺗﻮاﻧﻨﺪ‬ ‫ﻣﻜﻤﻞ ﭘﺎراﻣﺘﺮﻫﺎي ‪ HTTP‬ﺑﺎﺷﻨﺪ.‬ ‫• ﺻﻔﺖ ‪ Content‬ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن ﻣﺤﺘﻮاي ‪Header‬‬ ‫• ﺻﻔﺖ ‪ http-equiv‬ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن ﺧﻮد ‪Header‬‬ ‫• ﺻﻔﺖ ‪ Name‬ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن ﻧﺎم ﻣﺘﺎ داده‬ ‫– ‪ :Link‬ﺑﺮاي ﺗﻌﺮﻳﻒ ﻳﻚ ﻣﻨﺒﻊ ﺧﺎرﺟﻲ:‬ ‫• ‪ :Rel‬راﺑﻄﻪ ﻣﻨﺒﻊ ﺑﺎ ﺳﻨﺪ‬ ‫• ‪ :Href‬آدرس ﻣﻨﺒﻊ‬ ‫• ‪ :Type‬ﻧﻮع ﻣﻨﺒﻊ‬‫>/ "‪<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon‬‬
  • 66. ‫ﺗﻤﺮﻳﻨﺎت‬
  • 67. ‫ﺗﻤﺮﻳﻨﺎت‬ ‫ﻳﻚ ﺳﻨﺪ ‪ HTML‬ﺑﺴﺎزﻳﺪ ﻛﻪ ﺗﻮﺳﻂ آن ﺑﺘﻮاﻧﻴﺪ ﺟﺴﺘﺠﻮي ﺗﺼﺎوﻳﺮ ﮔﻮﮔﻞ را اﻧﺠﺎم دﻫﻴﺪ.‬ ‫١.‬‫ﻳﻚ ﺻﻔﺤﻪ ﺳﻪ ﺳﺘﻮﻧﻲ )ﻣﺎﻧﻨﺪ ‪ (SBCE‬ﺑﺴﺎزﻳﺪ و آﻧﺮا ﺑﺎ ﻣﻄﺎﻟﺐ دﻟﺨﻮاه ﭘﺮ ﻛﻨﻴﺪ، ﺳﭙﺲ آﻧﺮا ﺑﺮ‬ ‫٢.‬‫روي ﻛﺎوﺷﮕﺮﻫﺎي ﻣﺨﺘﻠﻒ )ﺣﺪاﻗﻞ ‪ Firefox‬و ‪ (IE‬ﺗﺴﺖ ﻛﻨﻴﺪ و ﺗﻔﺎوﺗﻬﺎ را ﺑﻴﺎن ﻛﻨﻴﺪ. ﺳﻌﻲ‬ ‫ﻛﻨﻴﺪ ﺳﻨﺪ را ﻃﻮري اﺻﻼح ﻛﻨﻴﺪ ﻛﻪ در ﻫﻤﻪ ﻛﺎوﺷﮕﺮﻫﺎ ﻳﻜﺠﻮر دﻳﺪه ﺷﻮد.‬‫ﻳﻚ وﺑﻼگ دﺳﺘﻲ ﺑﺴﺎزﻳﺪ. وﺑﻼگ ﺷﻤﺎ ﺑﺎﻳﺪ ﭼﻨﺪﻳﻦ ﻣﻄﻠﺐ داﺷﺘﻪ ﺑﺎﺷﺪ. ﻫﻤﭽﻨﻴﻦ در وﺑﻼگ ﺑﺎﻳﺪ‬ ‫٣.‬ ‫ﭼﻨﺪ ﻓﺎﻳﻞ ﺑﺮاي داﻧﻠﻮد وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ.‬‫ﻳﻚ ﺳﺎﻳﺖ ﻣﻌﺘﺒﺮ )ﻣﺎﻧﻨﺪ ‪ (Download.com‬را ﺑﺎز ﻛﻨﻴﺪ، ﺳﻌﻲ ﻛﻨﻴﺪ ﻫﻤﺎﻧﻨﺪ آﻧﺮا ﺑﺴﺎزﻳﺪ )از‬ ‫۴.‬‫ﻧﻈﺮ ﻇﺎﻫﺮ ﻋﻴﻨﺎ ﺑﺮاﺑﺮ ﺑﺎﺷﺪ(. ﺗﻤﺎم ﻟﻴﻨﻜﻬﺎﻳﻲ ﻛﻪ در آن ﺳﺎﻳﺖ وﺟﻮد دارد را ﺑﻪ ﻫﻤﺎن ﻣﻘﺼﺪ ﭘﻴﻮﻧﺪ‬ ‫ﺑﺰﻧﻴﺪ، ﺑﻪ ﻃﻮري ﻛﻪ اﮔﺮ ﻛﺴﻲ ﺳﻨﺪ ﺷﻤﺎ را دﻳﺪ، ﻧﺘﻮاﻧﺪ ﺗﻔﺎوت آﻧﺮا ﺑﺎ ﺳﺎﻳﺖ اﺻﻠﻲ ﺗﺸﺨﻴﺺ دﻫﺪ.‬ ‫ﻳﻚ ﻓﺮم زﻳﺒﺎ و ﻗﺎﻟﺐ ﺑﻨﺪي ﺷﺪه ﺑﺮاي درﻳﺎﻓﺖ اﻃﻼﻋﺎت ﻛﺎﻣﻞ ﻳﻚ ﻛﺎرﺑﺮ ﻃﺮاﺣﻲ ﻛﻨﻴﺪ.‬ ‫۵.‬‫ﺑﺎ ﻣﺮاﺟﻌﻪ ﺑﻪ اﻳﻨﺘﺮﻧﺖ و ﻣﻄﺎﻟﻌﻪ ﺑﻴﺸﺘﺮ راﺟﻊ ﺑﻪ ﺑﺮﭼﺴﺐ ‪ ،IMG‬ﻳﻚ ﺗﺼﻮﻳﺮ اﻳﺠﺎد ﻛﻨﻴﺪ ﻛﻪ ﺑﺎ‬ ‫۶.‬ ‫ﻛﻠﻴﻚ ﺑﺮ روي ﻫﺮ ﻗﺴﻤﺘﻲ از آن، ﻳﻚ ﺳﺎﻳﺖ ﻣﺠﺰا ﺑﺎز ﺷﻮد. )ﻗﺴﻤﺘﻬﺎ ﻟﺰوﻣﺎ ﻣﺮﺑﻌﻲ ﻧﺒﺎﺷﻨﺪ(‬