‫ﻛﺎرﮔﺎه آﻣﻮزﺷﻲ‬                      ‫ﺗﻮﺳﻌﻪ وب‬                      ‫ﺑﺨﺶ اول - ‪HTML‬‬‫اراﺋﻪ: ﻋﺒﺎس ﻧﺎدري‬‫اﻧﺠﻤﻦ ﻋﻠﻤﻲ داﻧﺸ...
‫ﻋﻨﺎوﻳﻦ ﻣﻄﺮﺣﻲ‬                         ‫وب ﭼﻴﺴﺖ؟‬       ‫•‬                          ‫2 ‪Web‬‬     ‫–‬                   ‫...
‫وب ﭼﻴﺴﺖ؟‬
‫وب ﭼﻴﺴﺖ؟‬‫ﺗﻮر ﮔﺴﺘﺮده ﺟﻬﺎﻧﻲ )‪ (World Wide Web‬ﻣﺠﻤﻮﻋﻪ اﺑﺮﻣﺘﻦ ﻫﺎي ﻣﺘﺼﻞ ﺑﻪ ﻫﻢ از‬                ‫•‬                        ...
‫2 ‪Web‬‬       ‫ﺧﺎﺻﻴﺖ اﺻﻠﻲ وب اﺳﺘﺎﻧﺪارد ﺑﻮدن ﺷﻜﻞ ﻇﺎﻫﺮي و ﺳﺎدﮔﻲ دﺳﺘﺮﺳﻲ ﺑﻪ آن ﺑﻮد.‬        ‫•‬                ‫ﺑﻪ دﻟﻴﻞ ﻛﻤﺒﻮ...
‫ﭘﺮوﺗﻜﻞ ‪HTTP‬‬   ‫ﭘﺮوﺗﻜﻞ اﺻﻠﻲ وب ﭘﺮوﺗﻜﻞ ‪ HTTP‬ﻳﺎ ‪ HyperText Transfer Protocol‬اﺳﺖ.‬                    ‫•‬‫‪ HTTP‬ﻳﻚ ﭘﺮ...
‫ﻛﺎوﺷﮕﺮ وب‬‫ﻛﺎوﺷﮕﺮ وب )ﻳﺎ ‪ (Web Browser‬ﻧﺮم اﻓﺰارﻳﺴﺖ ﻛﻪ ﻣﻲ ﺗﻮاﻧﺪ ﺗﺤﺖ ﭘﺮوﺗﻜﻞ ﻫﺎي وب‬              ‫•‬                     ...
‫ﭘﺮوﺗﻜﻞ ‪HTTPS‬‬‫• ﭘﺮوﺗﻜﻞ ‪ HTTP‬ﺑﻪ ﺻﻮرت ﺗﻤﺎم ﻣﺘﻦ و ﻣﺴﺘﻘﻴﻢ ﻛﺎر ﻣﻴﻜﻨﺪ. از اﻳﻦ رو اﺣﺘﻴﺎﺟﺎت اﻣﻨﻴﺘﻲ‬‫را ﺑﺮآورده ﻧﻤﻲ ﺳﺎزد. ﺑﺮاي...
‫ﭘﺮوﺗﻜﻞ ‪FTP‬‬‫• ‪ FTP‬ﻳﺎ ‪ File Transfer Protocol‬ﻳﻚ اﺳﺘﺎﻧﺪارد ﻧﺴﺒﺘﺎ ﻗﺪﻳﻤﻴﺴﺖ ﻛﻪ ﺑﺮاي ﺗﺒﺎدل‬‫ﻓﺎﻳﻞ در وب اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد. اﻣ...
‫ﭘﺮوﺗﻜﻞ ﻫﺎي دﻳﮕﺮ وب‬‫• ﭘﺮوﺗﻜﻞ ﻫﺎي ﻓﺮاوان دﻳﮕﺮي در وب وﺟﻮد دارﻧﺪ ﻛﻪ ﺗﻌﺪاد ﺑﺴﻴﺎر زﻳﺎدي از آﻧﻬﺎ ﺑﺮاي‬‫ﺗﺒﺎدل داده ﻫﺎي ﺻﻮﺗﻲ و ﺗ...
‫‪ HTML‬ﭼﻴﺴﺖ؟‬
‫‪HTML‬ﭼﻴﺴﺖ؟‬‫زﺑﺎن اﺳﺘﺎﻧﺪارد ﺻﻔﺤﺎت وب. اﻳﻦ زﺑﺎن در واﻗﻊ ﻳﻚ ﻗﺎﻟﺐ اراﺋﻪ اﻃﻼﻋﺎت اﺳﺖ و ﺑﺮﻧﺎﻣﻪ‬        ‫•‬                     ...
‫ﺑﺮﭼﺴﺐ ﭼﻴﺴﺖ؟‬‫• ﺗﻤﺎم اﻃﻼﻋﺎت ﻳﻚ ﺳﻨﺪ ﺑﺮﭼﺴﺒﻲ، در داﺧﻞ ﺑﺮﭼﺴﺐ ﻫﺎ ﻗﺮار ﻣﻲ ﮔﻴﺮد. ﻫﺮ ﺑﺮﭼﺴﺐ 3‬                                     ...
‫ﺑﺮﭼﺴﺐ رﻳﺸﻪ‬‫• ﻫﻤﺎﻧﮕﻮﻧﻪ ﻛﻪ ﻳﻚ ﻓﺎﻳﻞ ‪ ،XML‬ﺑﺎ ﺑﺮﭼﺴﺐ ﻫﺎي ﺧﻮد ﻳﻚ ﺳﺎﺧﺘﺎر درﺧﺘﻲ ﻣﻲ ﺳﺎزد ﻛﻪ‬‫ﺗﻨﻬﺎ ﻳﻚ رﻳﺸﻪ دارد )ﺑﺮﭼﺴﺐ رﻳﺸﻪ(، رﻳﺸ...
(‫)اداﻣﻪ‬   ‫ﺑﺮﭼﺴﺐ رﻳﺸﻪ‬XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/x...
‫ﺳﺮﺻﻔﺤﻪ و ﺑﺪﻧﻪ‬‫• ﻫﺮ ﺳﻨﺪ ‪ HTML‬از دو ﻗﺴﻤﺖ اﺻﻠﻲ ﺗﺸﻜﻴﻞ ﺷﺪه اﺳﺖ، ﺳﺮﺻﻔﺤﻪ )‪ (Head‬و ﺑﺪﻧﻪ‬‫)‪ .(Body‬اﻃﻼﻋﺎت ﻣﺮﺑﻮط ﺑﻪ ﺻﻔﺤﻪ ﻛﻪ ﻧ...
‫ﻓﺎﻳﻞ ﻣﺘﻨﻲ‬‫• از آﻧﺠﺎﻳﻲ ﻛﻪ ‪ HTML‬ﻳﻚ ﻓﺎﻳﻞ ﻣﺘﻨﻲ اﺳﺖ، داﻧﺴﺘﻦ ﻧﻜﺎﺗﻲ در ﻣﻮرد ﻓﺎﻳﻞ ﻣﺘﻨﻲ‬                                       ...
‫ﻧﻜﺎت ‪HTML‬‬ ‫١. ﺗﻤﺎﻣﻲ ﻓﻀﺎﻫﺎي ﺧﺎﻟﻲ )‪ (whitespace‬ﭘﻴﻮﺳﺘﻪ، در ﺧﺮوﺟﻲ ﻳﻚ ‪ Space‬ﻣﻲ ﺷﻮﻧﺪ.‬‫٢. از آﻧﺠﺎﻳﻲ ﻛﻪ ﻋﻼﻣﺖ ﻫﺎي & > < ﺑﺮ...
‫ﺑﺮﭼﺴﺒﻬﺎي ‪HTML‬‬
‫ﺑﺮﭼﺴﺐ ﻫﺎي ﻣﺠﺎز‬‫• ‪ HTML‬داراي ﺣﺪود 57 ﺑﺮﭼﺴﺐ ﻣﺠﺎز )اﻣﺮوزه( و ﺣﺪود 001 ﺑﺮﭼﺴﺐ ﻣﻌﻤﻮل اﺳﺖ. ﻫﺮ‬‫ﻛﺪام از اﻳﻦ ﺑﺮﭼﺴﺐ ﻫﺎ، ﻛﺎرﺑﺮد ﺧ...
‫ﺑﺮﭼﺴﺐ >‪<html‬‬              ‫• ‪ HTML‬ﺑﻪ ﺑﺰرﮔﻲ و ﻛﻮﭼﻜﻲ ﺣﺮوف در ﻧﺎم ﺑﺮﭼﺴﺐ ﻫﺎ ﺣﺴﺎس ﻧﻴﺴﺖ.‬                                 ...
<html> ‫ﻣﺜﺎل‬<html dir=rtl lang=fa><head></head><body>‫ﺳﻼم روز ﺷﻤﺎ ﺑﻪ ﺧﻴﺮ‬</body></html><html><head></head><body>Hello, Wo...
‫ﺑﺮﭼﺴﺐ >‪<head‬‬                                                              ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Head‬‬                         ...
‫ﺑﺮﭼﺴﺐ >‪<title‬‬                                              ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Title‬‬                                  ‫وﻇﻴﻔ...
<title> ‫ﻣﺜﺎل‬<html lang=fa><head>  <title>‫/<ﻋﻨﻮان ﺻﻔﺤﻪ‬title></head><body>‫ﺳﻼم روز ﺷﻤﺎ ﺑﻪ ﺧﻴﺮ‬</body></html>
‫ﺑﺮﭼﺴﺐ >‪<p‬‬                                                                       ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪P‬‬                      ...
‫ﺑﺮﭼﺴﺐ >‪<br‬‬                                             ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Br‬‬             ‫وﻇﻴﻔﻪ: ﻣﺸﺨﺺ ﻛﺮدن اﻧﺘﻬﺎي ﺧﻂ )رﻓﺘﻦ...
‫ﺑﺮﭼﺴﺐ >‪<img‬‬                                                                       ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Img‬‬                  ...
<img> ‫ﻣﺜﺎل‬<html><head>   <title>/>‫ﻋﻨﻮان ﺻﻔﺤﻪ‬title></head><body><p> ،‫<ﺳﻼم روز ﺷﻤﺎ ﺑﻪ ﺧﻴﺮ، اﻳﻦ ﭘﺎراﮔﺮاف اول اﺳﺖ‬br/>.‫ﺗ...
‫ﺑﺮﭼﺴﺐ >‪<a‬‬                                                                        ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪A‬‬                     ...
<a> ‫ﻣﺜﺎل‬<html><body>   <p> This is a sample paragraph. Click   <a href=http://www.google.com>Here</a>   to visit Google ...
‫ﺑﺮﭼﺴﺐ >‪<b‬‬                                                                   ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪B‬‬                          ...
‫ﺑﺮﭼﺴﺐ >‪<sup>,<sub‬‬                                                          ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Sup, Sub‬‬                    ...
‫ﺑﺮﭼﺴﺐ >‪<hr‬‬                                                                ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Hr‬‬                           ...
<sub>,<sup> ‫ﻣﺜﺎل‬<html><body>   Some text with   <sup>super</sup>   text.   <hr/>   Some more text with   <sub>sub</sub> ...
‫ﺑﺮﭼﺴﺐ >‪<ol>,<ul‬‬                                                        ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪OL,UL‬‬        ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻟﻴﺴﺖ ...
‫ﺑﺮﭼﺴﺐ>‪<li‬‬                                                                  ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪LI‬‬                          ...
‫ﻣﺜﺎل ﻟﻴﺴﺖ ﻫﺎ‬<html><body>   <ol>   <li>/>‫ﻋﻨﺼﺮ اول‬li>   <li>/>‫ﻋﻨﺼﺮ دوم‬li>   <li>/>‫ﻋﻨﺼﺮ ﺳﻮم‬li>   </ol>   <ul>   <li> ...
‫ﺑﺮﭼﺴﺐ ﻫﺎي ﻧﺎﺣﻴﻪ ﺑﻨﺪي‬                                                       ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Span, Div‬‬                     ...
‫ﺟﺪول ﻫﺎ‬
‫ﺟﺪول ﻫﺎي ‪HTML‬‬‫ﺟﺪول ﻫﺎ از ﻣﻬﻤﺘﺮﻳﻦ و ﭘﺮﻛﺎرﺑﺮدﺗﺮﻳﻦ ﺑﺮﭼﺴﺐ ﻫﺎي ‪ HTML‬ﻫﺴﺘﻨﺪ. آﻧﻬﺎ ﻛﺎرﺑﺮدﻫﺎي‬      ‫•‬                      ...
‫ﺑﺮﭼﺴﺐ >‪<Table‬‬                                                     ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Table‬‬                                ...
‫ﺑﺮﭼﺴﺐ >‪<Tr‬‬                                           ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Tr‬‬                     ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻳﻚ ﺳﻄﺮ ﺟﺪول )...
‫ﺑﺮﭼﺴﺐ >‪<Td‬‬                                                      ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Td‬‬               ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻳﻚ ﺧﺎﻧﻪ ...
‫ﻣﺜﺎل ﺟﺪول ﺳﺎده‬<html><body>    <table border=1>    <tr> <td>Cell 11</td>           <td>Cell 12</td>    </tr><tr>         ...
‫ﺑﺮﭼﺴﺐ >‪<Tbody‬‬                                   ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Tbody‬‬               ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻧﺎﺣﻴﻪ ﺑﺪﻧﻪ ﺟﺪول )‪(Ta...
‫ﺑﺮﭼﺴﺐ >‪<Thead‬‬                                   ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Thead‬‬           ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻧﺎﺣﻴﻪ ﻓﻮﻗﺎﻧﻲ ﺟﺪول )‪(Tabl...
‫ﺑﺮﭼﺴﺐ >‪<Tfoot‬‬                                      ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Tfoot‬‬            ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻧﺎﺣﻴﻪ ﺗﺤﺘﺎﻧﻲ ﺟﺪول )‪(...
‫ﺑﺮﭼﺴﺐ >‪<Th‬‬                                                           ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Th‬‬  ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻳﻚ ﺧﺎﻧﻪ داده در ...
‫ﻣﺜﺎل ﺟﺪول ﻧﺎﺣﻴﻪ ﺑﻨﺪي ﺷﺪه‬<html><body>    <table border="1">    <thead><tr>           <th>Month</th>           <th>Pays</t...
‫ﺟﺪول ﻫﺎي ﻗﺎﻟﺐ ﺑﻨﺪي‬‫• ﻫﻨﮕﺎﻣﻲ ﻛﻪ از ﺟﺪاول ﺑﺮاي ﻗﺎﻟﺐ ﺑﻨﺪي ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد، ‪ Border‬آﻧﻬﺎ ﺻﻔﺮ‬                          ...
‫ﻓﺮم ﻫﺎ‬
‫ﻓﺮم ﻫﺎي ‪HTML‬‬‫• ﻫﻤﺎﻧﻄﻮري ﻛﻪ اﺷﺎره ﺷﺪ، ﭘﺮوﺗﻜﻞ ‪ HTTP‬ﺑﺮ ﻣﺒﻨﺎي ﺗﻘﺎﺿﺎ/ﭘﺎﺳﺦ ﻛﺎر ﻣﻲ ﻛﻨﺪ. ﺑﺮاي‬‫ارﺳﺎل ﻳﻚ ﺗﻘﺎﺿﺎي ﭘﻮﻳﺎ از ﺻﻔﺤﺎت...
‫>‪<form‬‬‫• ﻳﻚ ﻓﺮم ‪ HTML‬داﺧﻞ ﻳﻚ ﺑﺮﭼﺴﺐ ‪ Form‬ﻗﺮار ﻣﻲ ﮔﻴﺮد. ﻫﺮ ﻓﺮم ﻣﻲ ﺗﻮاﻧﺪ )در ﺣﺎﻟﺖ‬‫ﻣﻌﻤﻮل( ﻳﻚ ﻛﻠﻴﺪ ارﺳﺎل )‪ (Submit‬دا...
‫>‪<input‬‬‫• ﻣﻌﻤﻮل ﺗﺮﻳﻦ ﻓﻴﻠﺪﻫﺎﻳﻲ ﻛﻪ در ﻳﻚ ﻓﺮم ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﻲ ﮔﻴﺮﻧﺪ، ﻓﻴﻠﺪﻫﺎي ورود‬‫ﻣﺴﺘﻘﻴﻢ اﻃﻼﻋﺎت )دﻛﻤﻪ ﻳﺎ ﺟﻌﺒﻪ ﻣﺘﻦ( ...
<input> ‫ﻣﺜﺎل‬<html><body><form method=get><input type=checkbox> I am a checkbox! <br/><input type=file> <br/><input type=...
‫>‪) <input‬اداﻣﻪ(‬‫• ﺗﻘﺮﻳﺒﺎ اﻛﺜﺮ ﻓﻴﻠﺪﻫﺎي ﻳﻚ ﻓﺮم ﺑﺎ اﺳﺘﻔﺎده از ﺑﺮﭼﺴﺐ ‪ input‬ﺗﺎﻣﻴﻦ ﻣﻲ ﺷﻮﻧﺪ! ﺻﻔﺎت‬                         ...
<input> ‫ﻣﺜﺎل دوم‬<html><body><form method=getaction=http://google.com/search>:‫<ﻋﺒﺎرﺗﻲ را وارد ﻛﻨﻴﺪ ﺗﺎ در ﮔﻮﮔﻞ ﺟﺴﺘﺠﻮ ﺷﻮد‬...
‫>‪<textarea‬‬‫• ﺑﺮﭼﺴﺐ >‪ <textarea‬ﺟﻬﺖ ﺗﻌﺮﻳﻒ ﻳﻚ ﻣﺤﻴﻂ ورود ﻣﺘﻦ )ﭼﻨﺪ ﺧﻄﻲ( اﺳﺘﻔﺎده ﻣﻲ‬    ‫ﺷﻮد. از اﻳﻦ ﺑﺮﭼﺴﺐ ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﻻزم ا...
‫>‪<select‬‬‫ﺑﺮﭼﺴﺐ ‪ Select‬ﻳﻚ ‪ Dropdown Combo‬اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ، ﻳﻌﻨﻲ ﻟﻴﺴﺘﻲ ﻛﻪ ﺗﻨﻬﺎ‬                   ‫•‬‫ﻳﻚ ﻋﻨﺼﺮ آن ﻣﺸﺨﺺ اﺳ...
<select> ‫ﻣﺜﺎل‬<html><body><select>   <option value=Wood>‫/<ﭼﻮب‬option>   <option value=Iron>‫/<آﻫﻦ‬option>   <option valu...
‫>‪<label>,<fieldset‬‬‫• ﺑﺮاي ﺗﻨﻈﻴﻢ راﻫﻨﻤﺎ و ﻣﺘﻦ ﻣﻌﺮف ﻳﻚ ﻓﻴﻠﺪ در ﻳﻚ ﻓﺮم، ﺑﻬﺘﺮ اﺳﺖ ﺑﺠﺎي ﻣﺘﻦ ﻋﺎدي از‬   ‫ﺑﺮﭼﺴﺐ ‪ Label‬اﺳﺘﻔﺎ...
‫ﻧﻜﺎت ﺳﻮدﻣﻨﺪ‬
‫ﺻﻔﺘﻬﺎي اﺷﺘﺮاﻛﻲ‬           ‫ﺷﺶ ﺻﻔﺖ وﺟﻮد دارﻧﺪ ﻛﻪ ﺑﺮاي ﺗﻤﺎﻣﻲ ﺑﺮﭼﺴﺐ ﻫﺎي ‪ HTML‬ﻣﻌﺘﺒﺮ ﻫﺴﺘﻨﺪ:‬                   ‫•‬          ...
‫ﺑﺮﭼﺴﺐ ﻫﺎي دﻳﮕﺮ‬‫• ﺑﺮﭼﺴﺐ ﻫﺎي زﻳﺮ ﻧﻴﺰ در ‪ HTML‬وﺟﻮد دارﻧﺪ ﻛﻪ در دوره ﻫﺎي دﻳﮕﺮي ﻣﻄﺮح ﺧﻮاﻫﻨﺪ‬                               ...
‫ﺗﻤﺮﻳﻨﺎت‬
‫ﺗﻤﺮﻳﻨﺎت‬        ‫ﻳﻚ ﺳﻨﺪ ‪ HTML‬ﺑﺴﺎزﻳﺪ ﻛﻪ ﺗﻮﺳﻂ آن ﺑﺘﻮاﻧﻴﺪ ﺟﺴﺘﺠﻮي ﺗﺼﺎوﻳﺮ ﮔﻮﮔﻞ را اﻧﺠﺎم دﻫﻴﺪ.‬            ‫١.‬‫ﻳﻚ ﺻﻔﺤﻪ ﺳﻪ ﺳﺘ...
HTML Tutorial in Persian
HTML Tutorial in Persian
Upcoming SlideShare
Loading in …5
×

HTML Tutorial in Persian

779 views

Published on

Kick start HTML tutorial in Persian.

Learn HTML in a few days with this.

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
779
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
32
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

HTML Tutorial in Persian

  1. 1. ‫ﻛﺎرﮔﺎه آﻣﻮزﺷﻲ‬ ‫ﺗﻮﺳﻌﻪ وب‬ ‫ﺑﺨﺶ اول - ‪HTML‬‬‫اراﺋﻪ: ﻋﺒﺎس ﻧﺎدري‬‫اﻧﺠﻤﻦ ﻋﻠﻤﻲ داﻧﺸﺠﻮﻳﻲ‬‫ﻣﻬﻨﺪﺳﻲ ﻛﺎﻣﭙﻴﻮﺗﺮ‬‫داﻧﺸﮕﺎه ﺷﻬﻴﺪ ﺑﻬﺸﺘﻲ‬ ‫ﻧﺴﺨﻪ 1‬
  2. 2. ‫ﻋﻨﺎوﻳﻦ ﻣﻄﺮﺣﻲ‬ ‫وب ﭼﻴﺴﺖ؟‬ ‫•‬ ‫2 ‪Web‬‬ ‫–‬ ‫ﭘﺮوﺗﻜﻞ ‪HTTP‬‬ ‫–‬ ‫ﻛﺎوﺷﮕﺮ وب‬ ‫–‬ ‫ﭘﺮوﺗﻜﻞ ‪HTTPS‬‬ ‫–‬ ‫ﭘﺮوﺗﻜﻞ ‪FTP‬‬ ‫–‬ ‫ﭘﺮوﺗﻜﻞ ﻫﺎي دﻳﮕﺮ وب‬ ‫–‬ ‫‪ HTML‬ﭼﻴﺴﺖ؟‬ ‫•‬
  3. 3. ‫وب ﭼﻴﺴﺖ؟‬
  4. 4. ‫وب ﭼﻴﺴﺖ؟‬‫ﺗﻮر ﮔﺴﺘﺮده ﺟﻬﺎﻧﻲ )‪ (World Wide Web‬ﻣﺠﻤﻮﻋﻪ اﺑﺮﻣﺘﻦ ﻫﺎي ﻣﺘﺼﻞ ﺑﻪ ﻫﻢ از‬ ‫•‬ ‫ﻃﺮﻳﻖ اﻳﻨﺘﺮﻧﺖ اﺳﺖ.‬ ‫اﺳﻨﺎد وب )اﺑﺮﻣﺘﻦ( ﺗﻮﺳﻂ ﻛﺎوﺷﮕﺮ وب )‪ (Web Browser‬ﻗﺎﺑﻞ ﻣﻄﺎﻟﻌﻪ ﻫﺴﺘﻨﺪ.‬ ‫•‬‫اﺳﺘﺎﻧﺪاردﺗﺮﻳﻦ ﺳﻨﺪ وب، ‪ HTML‬ﻳﺎ ‪) HyperText Markup Language‬زﺑﺎن‬ ‫•‬ ‫ﻣﺸﺨﺺ اﺑﺮﻣﺘﻨﻲ( ﺗﻘﺮﻳﺒﺎ ﺗﻤﺎم وب را ﺗﺸﻜﻴﻞ داده اﺳﺖ.‬ ‫وب در ﺳﺎل 0891 اﺑﺪاع ﺷﺪ.‬ ‫•‬ ‫اﺳﻨﺎد وب از ﻃﺮﻳﻖ اﺑﺮاﺗﺼﺎل )‪ (Hyperlink‬ﺑﻪ ﻳﻜﺪﻳﮕﺮ ﻣﺘﺼﻞ ﻫﺴﺘﻨﺪ.‬ ‫•‬‫اﺳﺘﺎﻧﺪاردﻫﺎي وب از ﻃﺮف )‪ World Wide Web Consortium (W3C‬و‬ ‫•‬ ‫)‪ Internet Engineering Task Force (IETF‬وﺿﻊ ﻣﻲ ﺷﻮﻧﺪ.‬‫ﻣﺎﻳﻜﺮوﺳﺎﻓﺖ در ﻋﺮﺻﻪ وب از اﺳﺘﺎﻧﺪاردﻫﺎ ﭘﻴﺮوي ﻧﻤﻲ ﻛﻨﺪ و اﺳﺘﺎﻧﺪاردﻫﺎي ﺧﻮد را وﺿﻊ‬ ‫•‬ ‫ﻧﻤﻮده اﺳﺖ.‬
  5. 5. ‫2 ‪Web‬‬ ‫ﺧﺎﺻﻴﺖ اﺻﻠﻲ وب اﺳﺘﺎﻧﺪارد ﺑﻮدن ﺷﻜﻞ ﻇﺎﻫﺮي و ﺳﺎدﮔﻲ دﺳﺘﺮﺳﻲ ﺑﻪ آن ﺑﻮد.‬ ‫•‬ ‫ﺑﻪ دﻟﻴﻞ ﻛﻤﺒﻮدﻫﺎ و ﻋﺪم ﭘﻮﻳﺎﻳﻲ وب، وب 2 در ﺳﺎل 4002 ﺷﻜﻞ ﮔﺮﻓﺖ.‬ ‫•‬ ‫“وب 2 اﻧﻘﻼﺑﻲ ﺗﺠﺎري درﺻﻨﻌﺖ ﻛﺎﻣﭙﻴﻮﺗﺮ اﺳﺖ ﻛﻪ ﺑﻪ وﺳﻴﻠﻪ‬ ‫اﺗﻜﺎ ﺑﻪ اﻳﻨﺘﺮﻧﺖ ﺑﻪ ﻋﻨﻮان ﺳﻜﻮي ﺗﺠﺎرت ﺷﻜﻞ ﮔﺮﻓﺘﻪ اﺳﺖ.”‬‫• در واﻗﻊ ﺗﻜﻨﻮﻟﻮژي وب 2 ﺗﻔﺎوﺗﻲ ﺑﺎ وب ﻧﺪارد، ﺑﻠﻜﻪ وب 2 ﺑﺪﻳﻦ ﻣﻌﻨﺎﺳﺖ ﻛﻪ ﻧﺮم اﻓﺰارﻫﺎ‬ ‫و ﻛﺎرﺑﺮدﻫﺎي ﻣﺨﺘﻠﻒ ﻫﻤﮕﻲ ﺑﺮ روي وب اﺗﻜﺎ ﻛﻨﻨﺪ و ﺑﻪ وﺳﻴﻠﻪ وب ﺗﻮﺳﻌﻪ ﻳﺎﺑﻨﺪ.‬‫• ﺑﺎ ﺗﻮﺳﻌﻪ وب 2 اﺳﺘﻔﺎده از ﺗﻜﻨﻮﻟﻮژي ﻫﺎي ﺧﺎص ﺑﺎ ﻫﺪف ﭘﻮﻳﺎ ﺳﺎزي ﺻﻔﺤﺎت روﻧﻖ ﮔﺮﻓﺖ‬ ‫و درﻳﭽﻪ ﺟﺪﻳﺪي ﺑﻪ روي وب ﺑﺎز ﺷﺪ.‬ ‫• در وب 2، ﺷﺮﻛﺘﻬﺎ ﺧﺪﻣﺎت و ﻣﺤﺼﻮﻻت ﺧﻮد را ﺑﺮ روي وب و ﺑﺮاي وب اراﺋﻪ ﻣﻲ دﻫﻨﺪ.‬ ‫• وب 2 ﺗﺎ ﺟﺎﻳﻲ ﭘﻴﺶ رﻓﺖ ﻛﻪ ﺳﻴﺴﺘﻢ ﻋﺎﻣﻞ ﻫﺎي ﺗﺤﺖ وب ﭘﺪﻳﺪ آﻣﺪﻧﺪ.‬
  6. 6. ‫ﭘﺮوﺗﻜﻞ ‪HTTP‬‬ ‫ﭘﺮوﺗﻜﻞ اﺻﻠﻲ وب ﭘﺮوﺗﻜﻞ ‪ HTTP‬ﻳﺎ ‪ HyperText Transfer Protocol‬اﺳﺖ.‬ ‫•‬‫‪ HTTP‬ﻳﻚ ﭘﺮوﺗﻜﻞ ﺗﻘﺎﺿﺎ-ﭘﺎﺳﺨﻲ )‪ (Request-Responce‬اﺳﺖ. در اﻳﻦ‬ ‫•‬‫ﭘﺮوﺗﻜﻞ ﻛﻼﻳﻨﺖ، ﻳﻚ درﺧﻮاﺳﺖ ﺑﻪ ﺳﺮور ﻓﺮﺳﺘﺎده و ﺳﺮور درﺧﻮاﺳﺖ وي را ﭘﺎﺳﺦ ﻣﻲ‬ ‫ﮔﻮﻳﺪ. ﭘﺲ از اﻳﻦ ﺗﺮاﻛﻨﺶ، اﺗﺼﺎل ﻣﺎﺑﻴﻦ ﻃﺮﻓﻴﻦ ﻣﻨﻘﻄﻊ ﻣﻲ ﮔﺮدد.‬‫‪ HTTP‬ﻳﻚ ﭘﺮوﺗﻜﻞ ﺑﺪون وﺿﻌﻴﺖ )‪ (Stateless‬اﺳﺖ، ﺑﺪﻳﻦ ﻣﻌﻨﻲ ﻛﻪ ﺳﺮور از‬ ‫•‬ ‫وﺿﻌﻴﺖ ﻓﻌﻠﻲ ﻛﻼﻳﻨﺖ ﺧﺒﺮي ﻧﺪارد و ﺗﻨﻬﺎ ﺗﻘﺎﺿﺎي وي را درﻳﺎﻓﺖ ﻣﻲ ﻛﻨﺪ.‬ ‫ﺗﻘﺎﺿﺎ اﻧﻮاع ﻣﺨﺘﻠﻔﻲ داراﺳﺖ. ﻣﻌﻤﻮل ﺗﺮﻳﻦ اﻧﻮع ﺗﻘﺎﺿﺎ، ‪ POST‬و ‪ GET‬اﺳﺖ.‬ ‫•‬‫ﭘﺎﺳﺦ ﺳﺮور ﺑﻪ ﺗﻘﺎﺿﺎ ﻣﻲ ﺗﻮاﻧﺪ اﻃﻼﻋﺎت، ‪ ،HTML‬ﻓﺎﻳﻞ ﻫﺎي ﺗﻜﻤﻴﻠﻲ )ﻣﺎﻧﻨﺪ ﺗﺼﺎوﻳﺮ( و‬ ‫•‬ ‫ﻳﺎ اﻧﻮاع دﻳﮕﺮ داده ﺑﺎﺷﺪ.‬ ‫در ﺻﻮرﺗﻲ ﻛﻪ ﭘﺎﺳﺦ ﺳﺮور ‪ HTML‬ﺑﺎﺷﺪ، ﻳﻚ ﺻﻔﺤﻪ وب ﺑﺮاي ﻛﺎرﺑﺮ ﻓﺮﺳﺘﺎده ﻣﻲ ﺷﻮد.‬ ‫•‬
  7. 7. ‫ﻛﺎوﺷﮕﺮ وب‬‫ﻛﺎوﺷﮕﺮ وب )ﻳﺎ ‪ (Web Browser‬ﻧﺮم اﻓﺰارﻳﺴﺖ ﻛﻪ ﻣﻲ ﺗﻮاﻧﺪ ﺗﺤﺖ ﭘﺮوﺗﻜﻞ ﻫﺎي وب‬ ‫•‬ ‫ﺑﺎ اﻳﻨﺘﺮﻧﺖ ﻛﺎر ﻛﻨﺪ.‬‫ﻛﺎوﺷﮕﺮ وب ﺧﻮاﺳﺘﻪ ﻛﺎرﺑﺮ را در ﻗﺎﻟﺐ درﺧﻮاﺳﺘﻬﺎي ‪ HTTP‬ﺑﺮاي ﺳﺮور ارﺳﺎل ﻣﻲ ﻛﻨﺪ‬ ‫•‬ ‫و ﻧﺘﺎﻳﺞ ﺳﺮور را ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ.‬‫ﻛﺎوﺷﮕﺮ وب ﻋﻼوه ﺑﺮ ﻗﺎﺑﻠﻴﺖ ﻗﺎﻟﺐ ﺑﻨﺪي و ﻧﻤﺎﻳﺶ اﺳﻨﺎد ‪ ،HTML‬ﺗﻮاﻧﺎﻳﻲ درﻳﺎﻓﺖ ﺗﻤﺎم‬ ‫•‬ ‫ﻓﺎﻳﻠﻬﺎي ﺗﻜﻤﻴﻠﻲ ﻛﻪ در ﺳﻨﺪ ‪ HTML‬اﺳﺘﻔﺎده ﺷﺪه اﻧﺪ را ﺑﻪ ﺻﻮرت ﺧﻮدﻛﺎر داراﺳﺖ.‬‫ﻛﺎوﺷﮕﺮﻫﺎي اﻣﺮوزه وب ﻋﻼوه ﺑﺮ ﺗﻮاﻧﺎﻳﻲ ﻫﺎي اﺻﻠﻲ ﺑﺎﻻ، ﻗﺎﺑﻠﻴﺖ ﻫﺎي ﺑﻴﺸﻤﺎر دﻳﮕﺮي ﻧﻴﺰ‬ ‫•‬ ‫دارا ﻫﺴﺘﻨﺪ.‬‫ﻛﺎوﺷﮕﺮﻫﺎي ﻣﻌﺮوف را ﻣﻲ ﺗﻮان ‪ Internet Explorer‬ﻣﺎﻳﻜﺮوﺳﺎﻓﺖ ﻛﻪ از ﻧﻴﻤﻲ از‬ ‫•‬‫اﺳﺘﺎﻧﺪاردﻫﺎي وب ﺗﺒﻌﻴﺖ ﻧﻤﻲ ﻛﻨﺪ، ‪ Firefox‬ﻣﻮزﻳﻼ ﻛﻪ ﻗﺪرﺗﻤﻨﺪﺗﺮﻳﻦ ﻛﺎوﺷﮕﺮ ﺣﺮﻓﻪ‬‫اي داﻧﺴﺘﻪ ﻣﻲ ﺷﻮد و اﺧﻴﺮا ‪ Google Chrome‬ﻛﻪ ﺑﺮاي اﻫﺪاف وب 2 ﻃﺮاﺣﻲ ﺷﺪه‬ ‫اﺳﺖ، داﻧﺴﺖ.‬
  8. 8. ‫ﭘﺮوﺗﻜﻞ ‪HTTPS‬‬‫• ﭘﺮوﺗﻜﻞ ‪ HTTP‬ﺑﻪ ﺻﻮرت ﺗﻤﺎم ﻣﺘﻦ و ﻣﺴﺘﻘﻴﻢ ﻛﺎر ﻣﻴﻜﻨﺪ. از اﻳﻦ رو اﺣﺘﻴﺎﺟﺎت اﻣﻨﻴﺘﻲ‬‫را ﺑﺮآورده ﻧﻤﻲ ﺳﺎزد. ﺑﺮاي ﻣﺜﺎل ﺗﻌﺎﻣﻼت ﺑﺎﻧﻜﻲ ﻛﻪ ﺑﺎ اﺳﺘﻔﺎده از ‪ HTTP‬اﻧﺠﺎم ﺷﻮﻧﺪ،‬ ‫ﻛﺎﻣﻼ ﻗﺎﺑﻞ دﻳﺪ ﺑﺮاي ﻫﻤﮕﺎن ﺧﻮاﻫﻨﺪ ﺑﻮد.‬‫• ﺑﺮاي ﺟﺒﺮان اﻳﻦ ﻛﻤﺒﻮدﻫﺎ، ﭘﺮوﺗﻜﻞ ‪ HTTPS‬ﻳﺎ ‪ Secure HTTP‬اﺑﺪاع ﺷﺪ. اﻳﻦ‬‫ﭘﺮوﺗﻜﻞ ﺑﺎ اﺳﺘﻔﺎده از ﭘﺮوﺗﻜﻞ اﻣﻨﻴﺘﻲ ‪ ( Secure Sockets Layer ) SSL‬و ﻳﺎ‬‫‪ (Transport Layer Security ) TLS‬ﺗﺒﺎدﻻت ﺳﺮور و ﻛﻼﻳﻨﺖ را اﻣﻦ ﻣﻲ ﺳﺎزد.‬ ‫از اﻳﻦ ﭘﺮوﺗﻜﻞ در ﺗﻤﺎﻣﻲ وب ﻫﺎﻳﻲ ﻛﻪ ﺑﻪ اﻣﻨﻴﺖ اﺣﺘﻴﺎج اﺳﺖ اﺳﺘﻔﺎده ﻣﻲ ﮔﺮدد.‬‫• ﺑﺮاي ﻛﺎرﻛﺮد درﺳﺖ ‪ ،HTTPS‬ﻻزم اﺳﺖ ﻛﻪ ﺳﺮور ﺧﻮد را ﺑﺎ ﻳﻚ ﮔﻮاﻫﻴﻨﺎﻣﻪ دﻳﺠﻴﺘﺎل‬‫)‪ (Digital Certificate‬اﻫﺮاز ﻫﻮﻳﺖ ﻛﻨﺪ. ﺑﺮاي ﺗﻬﻴﻪ ﻳﻚ ﮔﻮاﻫﻴﻨﺎﻣﻪ دﻳﺠﻴﺘﺎل، ﻻزم‬ ‫اﺳﺖ ﺗﺎ ﺑﻪ ﻣﺮاﻛﺰ اﻋﻄﺎي ﮔﻮاﻫﻲ ﻫﺰﻳﻨﻪ اي ﻣﻌﺎدل 001 ﻫﺰار ﺗﻮﻣﺎن ﺑﺮاي ﻫﺮ ﺳﺎل ﭘﺮداﺧﺖ.‬‫• ﺑﻪ دﻟﻴﻞ ﻫﺰﻳﻨﻪ ﺑﺎﻻ و ﻗﺪﻳﻤﻲ ﺑﻮدن اﻛﺜﺮ ﭘﻴﺎده ﺳﺎزي ﻫﺎي ‪ ،HTTPS‬اﻳﻦ ﭘﺮوﺗﻜﻞ ﻧﻘﺎط‬ ‫اﻣﻨﻴﺘﻲ ﺑﺴﻴﺎري را ﺑﺮاي وب ﺑﺎز ﮔﺬارده اﺳﺖ.‬
  9. 9. ‫ﭘﺮوﺗﻜﻞ ‪FTP‬‬‫• ‪ FTP‬ﻳﺎ ‪ File Transfer Protocol‬ﻳﻚ اﺳﺘﺎﻧﺪارد ﻧﺴﺒﺘﺎ ﻗﺪﻳﻤﻴﺴﺖ ﻛﻪ ﺑﺮاي ﺗﺒﺎدل‬‫ﻓﺎﻳﻞ در وب اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد. اﻣﺮوزه ﻓﺎﻳﻞ را ﻣﻲ ﺗﻮان ﺑﺎ اﺳﺘﻔﺎده از ‪ HTTP‬ﺑﻪ ﺳﺎدﮔﻲ‬ ‫‪ FTP‬ﻣﻨﺘﻘﻞ ﻛﺮد.‬‫• در واﻗﻊ ‪ FTP‬راه دﻳﮕﺮي دﺳﺘﺮﺳﻲ ﺑﻪ داده ﻫﺎي ﻣﻮﺟﻮد ﺑﺮ روي ﺳﺮورﻫﺎي وب اﺳﺖ، ﻛﻪ‬ ‫ﻣﻌﻤﻮﻻ در دو ﻛﺎرﺑﺮد اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد:‬ ‫– درﻳﺎﻓﺖ ﻓﺎﻳﻠﻬﺎي ﺑﺴﻴﺎر ﺑﺰرگ از اﻳﻨﺘﺮﻧﺖ‬ ‫– ﻗﺮاردادن ﻓﺎﻳﻠﻬﺎ و اﺳﻨﺎد ﺑﺮ روي وب ﺗﻮﺳﻂ ﻧﮕﻬﺪارﻧﺪه ﻳﺎ ﺳﺎزﻧﺪه آن‬‫• از آﻧﺠﺎﻳﻲ ﻛﻪ ‪ FTP‬ﻓﻘﻂ ﺑﺮاي ﺗﻌﺎﻣﻞ ﻓﺎﻳﻞ اﻳﺠﺎد ﺷﺪه اﺳﺖ، ﻫﻴﭻ ﺳﻨﺪ داراي ﻧﻤﻮد‬ ‫ﻇﺎﻫﺮي )ﻣﺎﻧﻨﺪ ‪ HTML‬ﺑﺮاي ‪ (HTTP‬ﻧﺪارد.‬
  10. 10. ‫ﭘﺮوﺗﻜﻞ ﻫﺎي دﻳﮕﺮ وب‬‫• ﭘﺮوﺗﻜﻞ ﻫﺎي ﻓﺮاوان دﻳﮕﺮي در وب وﺟﻮد دارﻧﺪ ﻛﻪ ﺗﻌﺪاد ﺑﺴﻴﺎر زﻳﺎدي از آﻧﻬﺎ ﺑﺮاي‬‫ﺗﺒﺎدل داده ﻫﺎي ﺻﻮﺗﻲ و ﺗﺼﻮﻳﺮي ﺑﻪ ﻛﺎر ﻣﻲ روﻧﺪ. ﺑﺮاي ﻛﺎرﻛﺮد ﺑﺎ ﻫﺮ ﭘﺮوﺗﻜﻞ، ﻧﺮم اﻓﺰار‬ ‫ﻣﺨﺼﻮص آن ﭘﺮوﺗﻜﻞ اﺣﺘﻴﺎج اﺳﺖ.‬‫• ﺑﺎ روي ﻛﺎر آﻣﺪن وب 2 و ﺗﻜﻨﻮﻟﻮژي ﻫﺎي ﺟﺪﻳﺪ آن، ﻧﻴﺎز ﺑﻪ ﭘﺮوﺗﻜﻞ ﻫﺎي دﻳﮕﺮ ﺗﻘﺮﻳﺒﺎ‬‫ﻣﺮﺗﻔﻊ ﺷﺪه اﺳﺖ. ﺑﻪ ﻫﻤﻴﻦ دﻟﻴﻞ آﻧﻬﺎ ﺗﻘﺮﻳﺒﺎ ﻛﺎرﺑﺮدﻫﺎي ﻣﺘﻌﺪد ﺧﻮد را از دﺳﺖ داده و‬ ‫ﻓﺮاﻣﻮش ﺷﺪه اﻧﺪ.‬
  11. 11. ‫‪ HTML‬ﭼﻴﺴﺖ؟‬
  12. 12. ‫‪HTML‬ﭼﻴﺴﺖ؟‬‫زﺑﺎن اﺳﺘﺎﻧﺪارد ﺻﻔﺤﺎت وب. اﻳﻦ زﺑﺎن در واﻗﻊ ﻳﻚ ﻗﺎﻟﺐ اراﺋﻪ اﻃﻼﻋﺎت اﺳﺖ و ﺑﺮﻧﺎﻣﻪ‬ ‫•‬ ‫ﻧﻮﻳﺴﻲ ﺧﺎﺻﻲ در آن وﺟﻮد ﻧﺪارد.‬ ‫اﻣﺮوزه ‪ HTML‬ﺗﻘﺮﻳﺒﺎ ﺗﻮاﻧﺎﻳﻲ ﻧﻤﺎﻳﺶ ﻫﺮﮔﻮﻧﻪ داده اي ﺑﺎ ﻫﺮ ﻗﺎﻟﺒﻲ را داراﺳﺖ.‬ ‫•‬‫ﻣﻲ ﺗﻮان آﻧﺮا ﻳﻚ ﻓﺮﻣﺖ ﺧﻴﻠﻲ ﺳﺎده داﻧﺴﺖ ﻛﻪ ﻣﺎﻧﻨﺪ ‪ PDF‬و ‪ Word‬ﺗﺼﻮﻳﺮ، ﻣﺘﻦ و‬ ‫•‬ ‫داده ﻫﺎي دﻳﮕﺮ را در ﻛﻨﺎر ﻳﻜﺪﻳﮕﺮ ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ.‬‫‪ HTML‬ﻳﻚ زﺑﺎن ﺑﺮﭼﺴﺒﻲ )‪ (Tag‬اﺳﺖ. از اﻳﻦ رو ‪ Markup Language‬داﻧﺴﺘﻪ‬ ‫•‬ ‫ﻣﻲ ﺷﻮد، ﻣﺎﻧﻨﺪ ‪ XML‬ﻛﻪ ﻳﻚ زﺑﺎن ﺑﺮﭼﺴﺒﻲ ﺑﺪون ﻣﺤﺪودﻳﺖ ﺑﺮﭼﺴﺐ اﺳﺖ.‬ ‫ﺑﺮﭼﺴﺐ ﻫﺎي ‪ HTML‬ﻣﺤﺪودﻧﺪ و ﻫﺮﻛﺪام ﻧﻤﺎﻳﺎﻧﮕﺮ داده ﺧﺎﺻﻲ ﻫﺴﺘﻨﺪ.‬ ‫•‬‫ﻋﻨﻮان ﺷﺮوع ﺑﺮﭼﺴﺐ در داﺧﻞ ﻋﻼﻣﺖ ﺑﺰرﮔﺘﺮ و ﻛﻮﭼﻜﺘﺮ ﻗﺮار ﻣﻲ ﮔﻴﺮد، و ﭘﺎﻳﺎن‬ ‫•‬ ‫ﺑﺮﭼﺴﺐ ﻫﻤﺎﻧﻨﺪ ﺷﺮوع آن، ﻓﻘﻂ ﺑﺎ ﺗﻔﺎوت ﻳﻚ / اﺳﺖ:‬‫>‪<tagName>tagdata here, as mush as you want </tagName‬‬
  13. 13. ‫ﺑﺮﭼﺴﺐ ﭼﻴﺴﺖ؟‬‫• ﺗﻤﺎم اﻃﻼﻋﺎت ﻳﻚ ﺳﻨﺪ ﺑﺮﭼﺴﺒﻲ، در داﺧﻞ ﺑﺮﭼﺴﺐ ﻫﺎ ﻗﺮار ﻣﻲ ﮔﻴﺮد. ﻫﺮ ﺑﺮﭼﺴﺐ 3‬ ‫ﺑﺨﺶ دارد:‬ ‫– ﻋﻨﻮان ﺑﺮﭼﺴﺐ )ﻣﻌﻴﻦ ﻛﻨﻨﺪه ﻧﻮع آن(‬ ‫– ﺻﻔﺎت ﺑﺮﭼﺴﺐ )ﻣﻌﻴﻦ ﻛﻨﻨﺪه وﻳﮋﮔﻴﻬﺎ و رﻓﺘﺎر آن(‬ ‫– داده ﺑﺮﭼﺴﺐ )ﻣﻌﻴﻦ ﻛﻨﻨﺪه داده اي ﻛﻪ ﺑﺮﭼﺴﺐ اراﺋﻪ ﻣﻲ دﻫﺪ(‬‫• ﺑﺮﭼﺴﺐ ﻫﺎ ﻣﻲ ﺗﻮاﻧﻨﺪ در ﻳﻚ ﺳﺎﺧﺘﺎر درﺧﺘﻲ در داﺧﻞ ﻳﻜﺪﻳﮕﺮ ﻗﺮار ﮔﻴﺮﻧﺪ، ﺑﺪﻳﻦ ﻣﻌﻨﻲ‬ ‫ﻛﻪ داده ﻳﻚ ﺑﺮﭼﺴﺐ ﻣﻲ ﺗﻮاﻧﺪ ﺧﻮد ﺷﺎﻣﻞ ﺑﺮﭼﺴﺒﻬﺎي دﻳﮕﺮ ﺑﺎﺷﺪ.‬ ‫• ﻣﺜﺎل ﺑﺮاي ﺑﺮﭼﺴﺐ ﺗﻮ در ﺗﻮ ﺑﻪ ﻫﻤﺮاه ﺻﻔﺎت و ﻣﻘﺪار ﺻﻔﺎت ﺑﺮﭼﺴﺐ:‬‫>”2‪<tag attribute1=“attributeValue” attribute2=“attributeValue‬‬‫>‪<innerTag> some data <anotherInnerTag /> </innerTag‬‬‫>‪</tag‬‬‫• ﻫﻤﺎﻧﻄﻮر ﻛﻪ در ﻣﺜﺎل ﻣﺸﺨﺺ اﺳﺖ، ﺑﺮﭼﺴﺒﻲ ﻛﻪ داده ﻧﺪاﺷﺘﻪ ﺑﺎﺷﺪ، در داﺧﻞ ﺧﻮد ﺑﺴﺘﻪ‬ ‫ﻣﻲ ﺷﻮد.‬
  14. 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. 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. 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. 17. ‫ﻓﺎﻳﻞ ﻣﺘﻨﻲ‬‫• از آﻧﺠﺎﻳﻲ ﻛﻪ ‪ HTML‬ﻳﻚ ﻓﺎﻳﻞ ﻣﺘﻨﻲ اﺳﺖ، داﻧﺴﺘﻦ ﻧﻜﺎﺗﻲ در ﻣﻮرد ﻓﺎﻳﻞ ﻣﺘﻨﻲ‬ ‫ﺳﻮدﻣﻨﺪ ﺑﻪ ﻧﻈﺮ ﻣﻲ رﺳﺪ:‬ ‫١. ﻓﺎﻳﻞ ﻫﺎي ﻣﺘﻨﻲ ﺳﻪ ﻧﻮع ذﺧﻴﺮه ﻣﻲ ﮔﺮدﻧﺪ:‬‫ﻛﺎراﻛﺘﺮ ﺑﻨﺪي ‪ :ASCII‬در اﻳﻦ ﻣﺪل ﻫﺮ ﻛﺎراﻛﺘﺮ 1 ﺑﺎﻳﺖ ﻣﻲ ﮔﻴﺮد و 652 ﺣﺎﻟﺖ دارد. اﻳﻦ ﻧﻮع‬ ‫١.‬ ‫ﻛﺎراﻛﺘﺮ ﺑﻨﺪي ﻓﺎﻗﺪ ﺗﻮاﻧﺎﻳﻲ ﻧﻤﺎﻳﺶ زﺑﺎﻧﻬﺎي ﻏﻴﺮ اﻧﮕﻠﻴﺴﻲ اﺳﺖ.‬‫ﻛﺎراﻛﺘﺮ ﺑﻨﺪي وﻳﻨﺪوز : در اﻳﻦ ﻣﺪل ﻫﺮ ﻛﺎراﻛﺘﺮ در ﻓﺎﻳﻞ ﻣﺘﻨﻲ 2 ﺑﺎﻳﺖ ﻣﻲ ﮔﻴﺮد و ﺑﺮ اﺳﺎس‬ ‫٢.‬ ‫اﺳﺘﺎﻧﺪارد وﻳﻨﺪوز ﺑﻪ ﺷﻜﻞ ﺧﺎﺻﻲ ﺗﺒﺪﻳﻞ ﻣﻲ ﺷﻮد.‬‫ﻛﺎراﻛﺘﺮ ﺑﻨﺪي ‪ :Unicode‬در اﻳﻦ ﻣﺪل، ﻫﺮ ﻛﺎراﻛﺘﺮ 2 ﺑﺎﻳﺖ ﻣﻲ ﮔﻴﺮد و ﺗﻮاﻧﺎي ﻧﻤﺎﻳﺶ ﺑﻪ‬ ‫٣.‬‫اﻛﺜﺮ زﺑﺎﻧﻬﺎ وﺟﻮد دارد. ﻳﻮﻧﻴﻜﺪ ﺧﻮد ﺑﻪ اﺳﺘﺎﻧﺪاردﻫﺎي ﻣﺘﻔﺎوﺗﻲ ﺗﻘﺴﻴﻢ ﻣﻲ ﮔﺮدد ﻛﻪ زﺑﺎن‬ ‫ﻓﺎرﺳﻲ در اﺳﺘﺎﻧﺪارد اﺻﻠﻲ آن، 8-‪ UTF‬ﭘﺸﺘﻴﺒﺎﻧﻲ ﺷﺪه اﺳﺖ.‬‫٢. ﻛﺎراﻛﺘﺮ اﻧﺘﻬﺎي ﺧﻂ در وﻳﻨﺪوز و ﻟﻴﻨﻮﻛﺲ ﺗﻔﺎوت ﻣﻲ ﻛﻨﺪ، در وﻳﻨﺪوز ﻳﻚ ﻛﺎراﻛﺘﺮ 31‬‫)‪ (Enter‬و ﻳﻚ ﻛﺎراﻛﺘﺮ ﻛﻤﻜﻲ ﺑﺎ ﺷﻤﺎره 01 ﻣﻌﻴﻦ ﻛﻨﻨﺪه ﭘﺎﻳﺎن ﺧﻂ اﺳﺖ وﻟﻲ در‬‫ﻟﻴﻨﻮﻛﺲ ﻛﺎراﻛﺘﺮ 01 وﺟﻮد ﻧﺪارد. ازاﻳﻦ رو ﻓﺎﻳﻠﻬﺎي ﻣﺘﻨﻲ ﻟﻴﻨﻮﻛﺲ در وﻳﻨﺪوز، ﻳﻜﺴﺮه و‬ ‫ﺑﺪون ﺧﻂ ﺑﻨﺪي ﺑﻪ ﻧﻈﺮ ﻣﻲ رﺳﻨﺪ.‬
  18. 18. ‫ﻧﻜﺎت ‪HTML‬‬ ‫١. ﺗﻤﺎﻣﻲ ﻓﻀﺎﻫﺎي ﺧﺎﻟﻲ )‪ (whitespace‬ﭘﻴﻮﺳﺘﻪ، در ﺧﺮوﺟﻲ ﻳﻚ ‪ Space‬ﻣﻲ ﺷﻮﻧﺪ.‬‫٢. از آﻧﺠﺎﻳﻲ ﻛﻪ ﻋﻼﻣﺖ ﻫﺎي & > < ﺑﺮاي ﻣﻌﻴﻦ ﻛﺮدن ﺑﺮﭼﺴﺐ ﻫﺎ ﻛﺎرﺑﺮد دارﻧﺪ، ﺑﺮاي‬ ‫وارد ﻛﺮدن آﻧﻬﺎ در ﻣﺘﻦ ﺑﺎﻳﺪ ﺗﺒﺪﻳﻞ زﻳﺮ اﻧﺠﺎم ﺷﻮد:‬ ‫< : ;‪&lt‬‬ ‫١.‬ ‫> : ;‪&gt‬‬ ‫٢.‬ ‫& : ;‪&amp‬‬ ‫٣.‬‫٣. ﺑﺮاي ﺗﻮﻟﻴﺪ اﺳﻨﺎد ‪ HTML‬ﻣﻲ ﺗﻮاﻧﻴﺪ از ﻧﺮم اﻓﺰارﻫﺎي ﺑﺴﻴﺎري ﺑﻬﺮه ﺟﻮﻳﻴﺪ، ﻧﺮم‬ ‫اﻓﺰارﻫﺎي زﻳﺮ از ﻣﻌﺮوﻓﺘﺮﻳﻦ آﻧﻬﺎ ﻫﺴﺘﻨﺪ:‬ ‫‪Microsoft Frontpage‬‬ ‫١.‬ ‫‪Adobe Dreamweaver‬‬ ‫٢.‬ ‫‪ZendStudio for Eclipse‬‬ ‫٣.‬
  19. 19. ‫ﺑﺮﭼﺴﺒﻬﺎي ‪HTML‬‬
  20. 20. ‫ﺑﺮﭼﺴﺐ ﻫﺎي ﻣﺠﺎز‬‫• ‪ HTML‬داراي ﺣﺪود 57 ﺑﺮﭼﺴﺐ ﻣﺠﺎز )اﻣﺮوزه( و ﺣﺪود 001 ﺑﺮﭼﺴﺐ ﻣﻌﻤﻮل اﺳﺖ. ﻫﺮ‬‫ﻛﺪام از اﻳﻦ ﺑﺮﭼﺴﺐ ﻫﺎ، ﻛﺎرﺑﺮد ﺧﺎﺻﻲ دارﻧﺪ و اﻃﻼﻋﺎت ﺧﺎﺻﻲ را اراﺋﻪ ﻣﻲ دﻫﻨﺪ. در‬ ‫ﺑﺨﺶ ﺑﻌﺪي ﺗﻌﺪادي از ﻣﻌﻤﻮل ﺗﺮﻳﻦ اﻳﻦ ﺑﺮﭼﺴﺐ ﻫﺎ را ﺑﺮرﺳﻲ ﺧﻮاﻫﻴﻢ ﻛﺮد.‬‫• ﺣﺪود 52 ﺑﺮﭼﺴﺐ ‪ HTML‬ﺑﺎ ﮔﺬر زﻣﺎن ﻣﻨﻘﺮض ﺷﺪه اﻧﺪ )اﺳﺘﻔﺎده از آﻧﻬﺎ ﻏﻴﺮ‬‫اﺳﺘﺎﻧﺪارد ﺷﺪه اﺳﺖ( ﺑﻴﺸﺘﺮ آﻧﻬﺎ ﺑﺮﭼﺴﺐ ﻫﺎي ﻗﺎﻟﺐ ﺑﻨﺪي ﻫﺴﺘﻨﺪ ﻛﻪ ﺑﺎ ﺑﻪ وﺟﻮد آﻣﺪن‬ ‫‪ CSS‬اﺳﺘﻔﺎده از آﻧﻬﺎ ﻧﺎﺻﺤﻴﺢ داﻧﺴﺘﻪ ﻣﻲ ﺷﻮد.‬‫• ‪ HTML‬ﻣﺎﻧﻨﺪ ﻫﺮ زﺑﺎن ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﻲ و اﺳﻜﺮﻳﭙﺘﻴﻨﮓ دﻳﮕﺮي، از ﺗﻮﺿﻴﺤﺎت‬ ‫)‪ (Comments‬ﭘﺸﺘﻴﺒﺎﻧﻲ ﻣﻲ ﻛﻨﺪ، اﻣﺎ ﻣﺘﺎﺳﻔﺎﻧﻪ ﻗﺎﻟﺐ آن ﻛﻤﻲ دﺷﻮار اﺳﺖ:‬‫>-- !‪<!-- this is a comment‬‬‫• در ‪ HTML‬از ﺗﻮﺿﻴﺤﺎت اﺳﺘﻔﺎده ﻧﻤﻲ ﺷﻮد ﻣﮕﺮ در ﻣﻮارد ﺑﺴﻴﺎر ﻣﺤﺪود، زﻳﺮا ﺣﺠﻢ‬ ‫ﺻﻔﺤﺎت ﺑﺴﻴﺎر ﻣﻬﻢ اﺳﺖ و ﺗﺎ ﺟﺎي ﻣﻤﻜﻦ ﺑﺎﻳﺪ آﻧﺮا ﻛﻤﻴﻨﻪ ﻧﻤﻮد.‬
  21. 21. ‫ﺑﺮﭼﺴﺐ >‪<html‬‬ ‫• ‪ HTML‬ﺑﻪ ﺑﺰرﮔﻲ و ﻛﻮﭼﻜﻲ ﺣﺮوف در ﻧﺎم ﺑﺮﭼﺴﺐ ﻫﺎ ﺣﺴﺎس ﻧﻴﺴﺖ.‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪HTML‬‬ ‫وﻇﻴﻔﻪ: ﻣﺸﺨﺺ ﻛﺮدن ﻳﻚ ﺳﻨﺪ ‪HTML‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫• اﺧﺘﻴﺎري‬ ‫– ‪ :Dir‬ﻣﺸﺨﺺ ﻛﻨﻨﺪه ﺟﻬﺖ ﺳﻨﺪ )ﭼﭗ ﺑﻪ راﺳﺖ ﻳﺎ ﺑﺎﻟﻌﻜﺲ( ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ”‪ “rtl‬و ”‪“ltr‬‬ ‫ﻣﻘﺪار ﭘﻴﺶ ﻓﺮض: ‪rtl‬‬ ‫– ‪ :Lang‬ﻣﺸﺨﺺ ﻛﻨﻨﺪه زﺑﺎن ﺳﻨﺪ )ﺑﺮ اﺳﺎس ﻣﺨﻔﻒ 2 ﺣﺮﻓﻲ زﺑﺎن( ﻣﺎﻧﻨﺪ ”‪ “fa‬ﻳﺎ ”‪“en‬‬
  22. 22. <html> ‫ﻣﺜﺎل‬<html dir=rtl lang=fa><head></head><body>‫ﺳﻼم روز ﺷﻤﺎ ﺑﻪ ﺧﻴﺮ‬</body></html><html><head></head><body>Hello, World! </body></html>
  23. 23. ‫ﺑﺮﭼﺴﺐ >‪<head‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Head‬‬ ‫وﻇﻴﻔﻪ: ﻣﺸﺨﺺ ﻛﺮدن ﻣﺤﺪوده اﻃﻼﻋﺎت راﺟﻊ ﺑﻪ ﻳﻚ ﺳﻨﺪ‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Html‬‬‫ﻧﻜﺘﻪ: ﺗﻤﺎم ﺑﺮﭼﺴﺐ ﻫﺎﻳﻲ ﻛﻪ در ‪ head‬ﻗﺮار ﻣﻲ ﮔﻴﺮﻧﺪ، ﻣﻲ ﺗﻮاﻧﻨﺪ در ‪ body‬و ﻳﺎ ﺟﺎي‬ ‫•‬ ‫دﻳﮕﺮ ﻧﻴﺰ اﺳﺘﻔﺎده ﺷﻮﻧﺪ، وﻟﻲ اﺳﺘﺎﻧﺪارد آن اﺳﺖ ﻛﻪ داﺧﻞ ‪ head‬اﺳﺘﻔﺎده ﺷﻮﻧﺪ.‬
  24. 24. ‫ﺑﺮﭼﺴﺐ >‪<title‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Title‬‬ ‫وﻇﻴﻔﻪ: ﻣﺸﺨﺺ ﻛﺮدن ﻋﻨﻮان ﺻﻔﺤﻪ‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Head‬‬ ‫ﻋﻨﻮان ﺻﻔﺤﻪ در ﺑﺎﻻي ﭘﻨﺠﺮه ﻛﺎوﺷﮕﺮ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد.‬ ‫•‬
  25. 25. <title> ‫ﻣﺜﺎل‬<html lang=fa><head> <title>‫/<ﻋﻨﻮان ﺻﻔﺤﻪ‬title></head><body>‫ﺳﻼم روز ﺷﻤﺎ ﺑﻪ ﺧﻴﺮ‬</body></html>
  26. 26. ‫ﺑﺮﭼﺴﺐ >‪<p‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪P‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﭘﺎراﮔﺮاف‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :Align‬ﻣﺮﺗﺐ ﻛﺮدن ﻣﺘﻦ داﺧﻞ ﭘﺎراﮔﺮاف، ﻣﻘﺎدﻳﺮ ﻣﺠﺎز:‬ ‫• ‪ Left‬ﺑﻪ ﭼﭗ )ﭘﻴﺸﻔﺮض(‬ ‫• ‪ Right‬ﺑﻪ راﺳﺖ‬ ‫• ‪ Center‬ﺑﻪ ﻣﺮﻛﺰ‬ ‫• ‪ Justify‬ﻫﻢ ﺗﺮاز‬ ‫دﻗﺖ ﻛﻨﻴﺪ ﻛﻪ ﺑﺮاي ﺳﻨﺪ ﻫﺎي ‪ RTL‬ﺟﺎي ﭼﭗ و راﺳﺖ در اﻳﻦ ﻣﺮﺗﺐ ﻛﺮدن ﺟﺎﺑﺠﺎ ﻣﻲ ﮔﺮدد.‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ Body‬و ﻏﻴﺮه‬
  27. 27. ‫ﺑﺮﭼﺴﺐ >‪<br‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Br‬‬ ‫وﻇﻴﻔﻪ: ﻣﺸﺨﺺ ﻛﺮدن اﻧﺘﻬﺎي ﺧﻂ )رﻓﺘﻦ ﺑﻪ ﺧﻂ ﺑﻌﺪي(‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺑﻠﻪ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: ﻫﻤﻪ ﺟﺎ‬
  28. 28. ‫ﺑﺮﭼﺴﺐ >‪<img‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Img‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﺗﺼﻮﻳﺮ‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺑﻠﻪ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :src‬آدرس ﻓﺎﻳﻞ ﺗﺼﻮﻳﺮي‬‫– ‪ :Alt‬ﻣﺘﻦ ﺟﺎﻳﮕﺰﻳﻦ )ﺗﺎ ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﺗﺼﻮﻳﺮ ﺑﺎر ﺷﻮد، ﻳﺎ اﮔﺮ ﻧﺸﻮد، اﻳﻦ ﻣﺘﻦ در ﺟﺎي آن ﻧﻤﺎﻳﺶ‬ ‫داده ﻣﻲ ﺷﻮد(‬ ‫– ‪ :Align‬ﻣﻘﺎدﻳﺮ ﻗﺎﺑﻞ اﺳﺘﻔﺎده ‪top, bottom, middle, left , right‬‬ ‫– ‪ :Width , Height‬اﺑﻌﺎد ﺗﺼﻮﻳﺮ، در ﺻﻮرﺗﻲ ﻛﻪ ذﻛﺮ ﻧﺸﻮد اﻧﺪازه ﺧﻮد ﺗﺼﻮﻳﺮ‬ ‫– ‪ :Title‬ﻣﺘﻦ راﻫﻨﻤﺎي ﻛﻤﻜﻲ )‪(Tooltip‬‬ ‫– ‪ :Usemap‬ﻛﺎرﺑﺮد ﺣﺮﻓﻪ اي )ﺟﻬﺖ ﺗﺨﺼﻴﺼﻲ ﻳﻚ ﻧﻘﺸﻪ ﻣﻨﻄﻘﻪ ﺑﻨﺪي ﺑﻪ ﺗﺼﻮﻳﺮ(‬‫ﻻزم ﺑﻪ ذﻛﺮ اﺳﺖ ﻛﻪ ﺗﻘﺮﻳﺒﺎ ﺗﻤﺎم ﺑﺮﭼﺴﺐ ﻫﺎي ‪ HTML‬از ﺻﻔﺖ ‪ Title‬ﭘﺸﺘﻴﺒﺎﻧﻲ ﻣﻴﻜﻨﻨﺪ، از‬ ‫اﻳﻦ رو از ﺗﻜﺮار آن ﻣﻲ ﭘﺮﻫﻴﺰﻳﻢ.‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ Body‬و ﻏﻴﺮه‬
  29. 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. 30. ‫ﺑﺮﭼﺴﺐ >‪<a‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪A‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻟﻨﮕﺮﮔﺎه، اﺗﺼﺎل ﺑﻪ ﺻﻔﺤﺎت دﻳﮕﺮ ﻳﺎ ﻗﺴﻤﺘﻲ از ﺻﻔﺤﻪ ﺟﺎري‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ، ﻣﺤﺘﻮي ﻋﻨﻮان اﺗﺼﺎل اﺳﺖ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :href‬آدرس )‪ (URL‬اﺗﺼﺎل ﻳﺎ ﻟﻨﮕﺮﮔﺎه‬ ‫– ‪ :Name‬ﺗﻌﺮﻳﻒ ﻧﺎم ﻟﻨﮕﺮﮔﺎه ﺑﺮاي ارﺟﺎع‬ ‫– ‪ :Target‬ﺻﻔﺤﻪ ﺟﺪﻳﺪ، در ﻛﺠﺎ ﺑﺎز ﺷﻮد:‬ ‫‪ : _blank‬ﺻﻔﺤﻪ ﺟﺪﻳﺪ )ﭘﻨﺠﺮه ﺟﺪﻳﺪ ﺑﺎز ﻣﻲ ﺷﻮد(‬ ‫•‬ ‫‪ : _parent‬در داﺧﻞ ﺻﻔﺤﻪ اي ﻛﻪ ﺻﻔﺤﻪ ﺟﺎري را ﺑﺎز ﻛﺮده اﺳﺖ‬ ‫•‬ ‫‪) : _self‬ﭘﻴﺸﻔﺮض( در ﻫﻤﻴﻦ ﺻﻔﺤﻪ‬ ‫•‬ ‫ﻧﺎم ﻓﺮﻳﻢ: ﺑﺮاي ﺻﻔﺤﺎت ﻓﺮﻳﻢ ﺑﻨﺪي ﺷﺪه‬ ‫•‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ Body‬و ﻏﻴﺮه‬‫اﻳﻦ ﺑﺮﭼﺴﺐ ﻣﻲ ﺗﻮاﻧﺪ اﺗﺼﺎﻟﻲ ﺑﻪ ﻳﻚ ﺻﻔﺤﻪ دﻳﮕﺮ ﺑﺮﻗﺮار ﻛﻨﺪ، ﻳﺎ ﻳﻚ ﻟﻨﮕﺮﮔﺎه در اﻳﻦ ﺻﻔﺤﻪ ﺗﻌﺮﻳﻒ‬ ‫ﻛﻨﺪ. )ﻟﻨﮕﺮﮔﺎه ﭼﻴﺴﺖ؟(‬
  31. 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. 32. ‫ﺑﺮﭼﺴﺐ >‪<b‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪B‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻣﺘﻦ ‪Bold‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ Body‬و ﻏﻴﺮه‬‫ﺑﺮﭼﺴﺐ ﻫﺎي دﻳﮕﺮي ﻣﺎﻧﻨﺪ ‪ i‬و ‪ big‬و ‪ small‬و ... ﻧﻴﺰ ﺑﺮاي ﻗﺎﻟﺐ ﺑﻨﺪي ﻣﺘﻦ ﺑﻪ ﻛﺎر ﻣﻲ روﻧﺪ‬ ‫ﻛﻪ ﻛﺎرﺑﺮد آﻧﻬﺎ ﺑﺎ ‪ css‬ﺟﺎﻳﮕﺰﻳﻦ ﺷﺪه اﺳﺖ.‬
  33. 33. ‫ﺑﺮﭼﺴﺐ >‪<sup>,<sub‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Sup, Sub‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ رو/زﻳﺮ ﻣﺘﻦ‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ Body‬و ﻏﻴﺮه‬‫ﺑﺮﭼﺴﺐ ﻫﺎي دﻳﮕﺮي ﻣﺎﻧﻨﺪ ‪ i‬و ‪ big‬و ‪ small‬و ... ﻧﻴﺰ ﺑﺮاي ﻗﺎﻟﺐ ﺑﻨﺪي ﻣﺘﻦ ﺑﻪ ﻛﺎر ﻣﻲ روﻧﺪ‬ ‫ﻛﻪ ﻛﺎرﺑﺮد آﻧﻬﺎ ﺑﺎ ‪ css‬ﺟﺎﻳﮕﺰﻳﻦ ﺷﺪه اﺳﺖ.‬
  34. 34. ‫ﺑﺮﭼﺴﺐ >‪<hr‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Hr‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﺧﻂ ﺟﺪا ﻛﻨﻨﺪه اﻓﻘﻲ )‪(Horizontal Line‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺑﻠﻪ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ Body‬و ﻏﻴﺮه‬‫ﺑﻪ ﻣﺎﻧﻨﺪ ﺑﺮﭼﺴﺐ ‪ br‬ﻛﻪ ﻳﻚ ﺧﻂ را ﺗﻤﺎم ﻣﻲ ﻛﻨﺪ و ﺑﻪ اﺑﺘﺪاي ﺧﻂ ﺑﻌﺪي ﻣﻲ رود، ‪ hr‬ﻧﻴﺰ‬‫ﺧﻄﻲ ﺧﺎﻟﻲ ﻛﺮده، در ﺧﻂ ﺑﻌﺪي ﻳﻚ ﺧﻂ ﻧﺎزك اﻓﻘﻲ ﻛﺎﻣﻞ رﺳﻢ ﻣﻲ ﻛﻨﺪ و ﺑﻪ اﺑﺘﺪاي ﺧﻂ‬ ‫ﺑﻌﺪي ﻣﻲ رود.‬
  35. 35. <sub>,<sup> ‫ﻣﺜﺎل‬<html><body> Some text with <sup>super</sup> text. <hr/> Some more text with <sub>sub</sub> text.</body></html>
  36. 36. ‫ﺑﺮﭼﺴﺐ >‪<ol>,<ul‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪OL,UL‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻟﻴﺴﺖ ﻣﺮﺗﺐ )‪ (Ordered List‬و ﻟﻴﺴﺖ ﻧﺎﻣﺮﺗﺐ )‪(Unordered List‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ Body‬و ﻏﻴﺮه‬‫اﻳﻦ دو ﺑﺮﭼﺴﺐ ﻣﺤﺪوده ﻳﻚ ﻟﻴﺴﺖ ﻋﺪدي و ﻳﺎ ﮔﻠﻮﻟﻪ اي را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﻨﺪ. ﺳﭙﺲ ﺑﺎ‬ ‫اﺳﺘﻔﺎده از ﺑﺮﭼﺴﺐ ‪ li‬ﻣﻲ ﺗﻮان در داﺧﻞ ﻟﻴﺴﺖ، ﻋﻨﺼﺮ اﻓﺰود.‬‫ﻧﻜﺘﻪ: در ﺻﻮرﺗﻲ ﻛﻪ در داﺧﻞ ﺑﺮﭼﺴﺐ ﻫﺎي ﻣﺤﺪوده ﻟﻴﺴﺖ، از ﺑﺮﭼﺴﺐ ﻫﺎي دﻳﮕﺮ اﺳﺘﻔﺎده‬‫ﻛﻨﻴﺪ )ﺧﺎرج از ‪ ،(li‬اﻛﺜﺮ ﻛﺎوﺷﮕﺮﻫﺎ آﻧﺮا ﺑﻪ درﺳﺘﻲ ﻧﻤﺎﻳﺶ ﺧﻮاﻫﻨﺪ داد وﻟﻲ از اﺳﺘﺎﻧﺪارد‬ ‫ﺧﺎرج ﺷﺪه اﻳﺪ.‬
  37. 37. ‫ﺑﺮﭼﺴﺐ>‪<li‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪LI‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻋﻨﺼﺮ ﻟﻴﺴﺖ )‪(List Item‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪ OL‬و ‪UL‬‬‫ﻫﺮ ﻋﻨﺼﺮ ﻟﻴﺴﺖ در ﻟﻴﺴﺘﻬﺎي ﻣﺮﺗﺐ ﻳﻚ ﺷﻤﺎره ﻣﻲ ﮔﻴﺮد و در ﻟﻴﺴﺖ ﻫﺎي ﮔﻠﻮﻟﻪ اي ﻳﻚ‬ ‫ﮔﻠﻮﻟﻪ در اﺑﺘﺪاي آن ﻗﺮار ﻣﻲ ﮔﻴﺮد. ﻟﻴﺴﺖ ﻫﺎ ﻣﻲ ﺗﻮاﻧﻨﺪ ﺗﻮ در ﺗﻮ اﺳﺘﻔﺎده ﺷﻮﻧﺪ.‬
  38. 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. 39. ‫ﺑﺮﭼﺴﺐ ﻫﺎي ﻧﺎﺣﻴﻪ ﺑﻨﺪي‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Span, Div‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻳﻚ ﻧﺎﺣﻴﻪ در ﺳﻨﺪ‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد: ﻧﺪارد‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: ﻫﻤﻪ ﺟﺎ‬‫• ﺑﺮﭼﺴﺐ ﻫﺎي ﻧﺎﺣﻴﻪ ﺑﻨﺪي ﺑﺮاي ﺟﺪا ﻛﺮدن ﻧﺎﺣﻴﻪ ﻫﺎي ‪ HTML‬اﺳﺘﻔﺎده ﻣﻲ ﺷﻮﻧﺪ. اﻳﻦ‬ ‫ﺑﺮﭼﺴﺐ ﻫﺎ ﺑﺴﻴﺎر ﭘﺮﻛﺎرﺑﺮد ﺑﻮده و در اﺳﻨﺎد ‪ HTML‬ﺑﻪ ﺗﻌﺪاد اﺳﺘﻔﺎده ﻣﻲ ﺷﻮﻧﺪ.‬‫• ﺑﺮﭼﺴﺐ ‪ Span‬ﺑﺮاي ﻧﺎﺣﻴﻪ ﺑﻨﺪي ﻗﺴﻤﺘﻲ از ﻣﺘﻦ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد و ﺗﻔﺎوﺗﻲ در ﻇﺎﻫﺮ‬ ‫ﺳﻨﺪ اﻳﺠﺎد ﻧﻤﻲ ﻛﻨﺪ.‬‫• ﺑﺮﭼﺴﺐ ‪ Div‬ﺑﺮاي ﻧﺎﺣﻴﻪ ﺑﻨﺪي ﻗﺴﻤﺘﻲ از ﺳﻨﺪ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد و ﻣﻲ ﺗﻮاﻧﺪ اﻧﻮاع‬ ‫ﺑﺮﭼﺴﺐ ﻫﺎي دﻳﮕﺮ )ﺣﺘﻲ ‪ (Div‬را در ﺧﻮد ﻧﮕﻪ دارد.‬ ‫• در ﺑﺨﺶ ‪ CSS‬ﺑﻴﺸﺘﺮ راﺟﻊ ﺑﻪ اﻳﻦ ﺑﺮﭼﺴﺐ ﻫﺎ ﺑﺤﺚ ﺧﻮاﻫﺪ ﺷﺪ.‬
  40. 40. ‫ﺟﺪول ﻫﺎ‬
  41. 41. ‫ﺟﺪول ﻫﺎي ‪HTML‬‬‫ﺟﺪول ﻫﺎ از ﻣﻬﻤﺘﺮﻳﻦ و ﭘﺮﻛﺎرﺑﺮدﺗﺮﻳﻦ ﺑﺮﭼﺴﺐ ﻫﺎي ‪ HTML‬ﻫﺴﺘﻨﺪ. آﻧﻬﺎ ﻛﺎرﺑﺮدﻫﺎي‬ ‫•‬ ‫زﻳﺎدي دارﻧﺪ از ﺟﻤﻠﻪ:‬ ‫– اراﺋﻪ اﻃﻼﻋﺎت ﻗﺎﻟﺐ ﺑﻨﺪي ﺷﺪه‬ ‫– ﻗﺎﻟﺐ ﺑﻨﺪي ﺻﻔﺤﺎت‬ ‫– ﻗﺎﻟﺐ ﺑﻨﺪي ﺗﺼﺎوﻳﺮ‬ ‫• ﻳﻚ ﺟﺪول ﻛﺎﻣﻞ ﺑﺎ ﻳﻚ ﺑﺮﭼﺴﺐ ‪ Table‬ﺷﺮوع و ﭘﺎﻳﺎن ﻣﻲ ﻳﺎﺑﺪ.‬‫• ﻫﺮ ﺟﺪول ﻣﻲ ﺗﻮاﻧﺪ ﻳﻚ ﻗﺴﻤﺖ ﺑﺎﻻﻳﻲ )‪ ،(Header‬ﻳﻚ ﻗﺴﻤﺖ ﻣﻴﺎﻧﻲ )‪ (Body‬و ﻳﻚ‬ ‫ﻗﺴﻤﺖ ﺗﺤﺘﺎﻧﻲ )‪ (Footer‬داﺷﺘﻪ ﺑﺎﺷﺪ.‬ ‫• ﺳﻄﺮ ﻫﺎ و ﺳﺘﻮن ﻫﺎ در ﻫﺮ ﻧﺎﺣﻴﻪ ﺟﺪاﮔﺎﻧﻪ ﻣﺸﺨﺺ ﻣﻲ ﺷﻮﻧﺪ.‬
  42. 42. ‫ﺑﺮﭼﺴﺐ >‪<Table‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Table‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻳﻚ ﺟﺪول ﻛﺎﻣﻞ‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫‪ :Border‬اﻧﺪازه ﻛﺎدر ﺧﺎﻧﻪ ﻫﺎي ﺟﺪول. ﻳﻚ ﻋﺪد ﺻﺤﻴﺢ‬ ‫–‬ ‫‪ :Cellpadding‬ﻓﺎﺻﻠﻪ ﻣﻴﺎن دﻳﻮاره ﺧﺎﻧﻪ ﻫﺎي ﺟﺪول و داده درون آﻧﻬﺎ‬ ‫–‬ ‫‪ :Cellspacing‬ﻓﺎﺻﻠﻪ ﻣﻴﺎن دو ﺧﺎﻧﻪ ﺟﺪول‬ ‫–‬ ‫‪ :Width‬ﻋﺮض ﺟﺪول ﺑﻪ ﻋﺪد ﻳﺎ درﺻﺪ )درﺻﺪ از اﻧﺪازه ﻛﻞ ﺻﻔﺤﻪ(‬ ‫–‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Body‬‬
  43. 43. ‫ﺑﺮﭼﺴﺐ >‪<Tr‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Tr‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻳﻚ ﺳﻄﺮ ﺟﺪول )‪(Table Row‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :Align‬ﺟﻬﺖ ﮔﻴﺮي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘﻲ(‬ ‫– ‪ :VAlign‬ﺟﻬﺖ ﮔﻴﺮي ﻋﻤﻮدي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ:‬ ‫‪Top‬‬ ‫•‬ ‫‪Middle‬‬ ‫•‬ ‫‪Bottom‬‬ ‫•‬ ‫‪Baseline‬‬ ‫•‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Table,Tbody,Thead,Tfoot‬‬
  44. 44. ‫ﺑﺮﭼﺴﺐ >‪<Td‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Td‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻳﻚ ﺧﺎﻧﻪ داده در ﻳﻚ ﺳﻄﺮ ﺟﺪول )‪(Table Data‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫‪ :Align‬ﺟﻬﺖ ﮔﻴﺮي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘﻲ(‬ ‫–‬ ‫‪ :VAlign‬ﺟﻬﺖ ﮔﻴﺮي ﻋﻤﻮدي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ‬ ‫–‬ ‫‪ :Colspan‬اﻳﻦ ﺧﺎﻧﻪ ﭼﻨﺪ ردﻳﻒ را در ﺑﺮ ﺑﮕﻴﺮد )ادﻏﺎم ﺳﺘﻮﻧﻲ ﺧﺎﻧﻪ ﻫﺎ(‬ ‫–‬ ‫‪ :Rowspan‬اﻳﻦ ﺧﺎﻧﻪ ﭼﻨﺪ ﺳﺘﻮن را در ﺑﺮ ﺑﮕﻴﺮد)ادﻏﺎم ردﻳﻔﻲ ﺧﺎﻧﻪ ﻫﺎ(‬ ‫–‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪tr,th‬‬
  45. 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. 46. ‫ﺑﺮﭼﺴﺐ >‪<Tbody‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Tbody‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻧﺎﺣﻴﻪ ﺑﺪﻧﻪ ﺟﺪول )‪(Table Body‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :Align‬ﺟﻬﺖ ﮔﻴﺮي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘﻲ(‬ ‫– ‪ :VAlign‬ﺟﻬﺖ ﮔﻴﺮي ﻋﻤﻮدي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Table‬‬
  47. 47. ‫ﺑﺮﭼﺴﺐ >‪<Thead‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Thead‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻧﺎﺣﻴﻪ ﻓﻮﻗﺎﻧﻲ ﺟﺪول )‪(Table Header‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :Align‬ﺟﻬﺖ ﮔﻴﺮي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘﻲ(‬ ‫– ‪ :VAlign‬ﺟﻬﺖ ﮔﻴﺮي ﻋﻤﻮدي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Table‬‬
  48. 48. ‫ﺑﺮﭼﺴﺐ >‪<Tfoot‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Tfoot‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻧﺎﺣﻴﻪ ﺗﺤﺘﺎﻧﻲ ﺟﺪول )‪(Table Footer‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :Align‬ﺟﻬﺖ ﮔﻴﺮي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘﻲ(‬ ‫– ‪ :VAlign‬ﺟﻬﺖ ﮔﻴﺮي ﻋﻤﻮدي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Table‬‬
  49. 49. ‫ﺑﺮﭼﺴﺐ >‪<Th‬‬ ‫ﻧﺎم ﺑﺮﭼﺴﺐ: ‪Th‬‬ ‫وﻇﻴﻔﻪ: ﺗﻌﺮﻳﻒ ﻳﻚ ﺧﺎﻧﻪ داده در ﺳﻄﺮ ﻧﺎﺣﻴﻪ ﻓﻮﻗﺎﻧﻲ ﺟﺪول ) ‪(Table Header Data‬‬ ‫ﺑﺪون ﻣﺤﺘﻮي: ﺧﻴﺮ‬ ‫ﺻﻔﺎت اﺳﺘﺎﻧﺪارد:‬ ‫– ‪ :Align‬ﺟﻬﺖ ﮔﻴﺮي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ )4 ﺣﺎﻟﺘﻲ(‬ ‫– ‪ :VAlign‬ﺟﻬﺖ ﮔﻴﺮي ﻋﻤﻮدي ﻣﺤﺘﻮاي ﻳﻚ ﺧﺎﻧﻪ‬ ‫ﻣﺤﻞ ﻗﺮارﮔﻴﺮي: داﺧﻞ ‪Thead>Tr‬‬
  50. 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. 51. ‫ﺟﺪول ﻫﺎي ﻗﺎﻟﺐ ﺑﻨﺪي‬‫• ﻫﻨﮕﺎﻣﻲ ﻛﻪ از ﺟﺪاول ﺑﺮاي ﻗﺎﻟﺐ ﺑﻨﺪي ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد، ‪ Border‬آﻧﻬﺎ ﺻﻔﺮ‬ ‫ﻗﺮار ﻣﻲ ﮔﻴﺮد ﺗﺎ ﻣﺸﺨﺺ ﻧﺒﺎﺷﻨﺪ.‬ ‫• ﺑﺎ اﺳﺘﻔﺎده از ‪ CSS‬ﻣﻲ ﺗﻮان ﺑﻪ ﺟﺪول ﻫﺎ ﻧﻤﻮد ﺑﺴﻴﺎر ﺧﻮب و ﻣﻄﻠﻮﺑﻲ داد.‬ ‫• ﻗﺎﻟﺐ ﺑﻨﺪي ﺑﺎ ﺟﺪاول ﺑﺎﻋﺚ اﺳﺘﺎﻧﺪارد ﺷﺪن ﺷﻴﻮه ﻧﻤﺎﻳﺶ ﺻﻔﺤﻪ ﻣﻲ ﺷﻮد.‬ ‫• ﺟﺪول ﻫﺎ ﺑﺮ اﺳﺎس ﻧﻮع ﺳﻨﺪ )‪ (DOCTYPE‬ﺑﻪ اﻧﻮاع ﻣﺨﺘﻠﻔﻲ ﺗﻔﺴﻴﺮ ﻣﻲ ﺷﻮﻧﺪ.‬ ‫ﺑﺮاي ﻣﺜﺎل ﺳﺎﻳﺖ ‪ bazitab.com‬ﺑﺎ اﺳﺘﻔﺎده از ﺟﺪاول ﻗﺎﻟﺐ ﺑﻨﺪي ﺷﺪه اﺳﺖ:‬ ‫•‬
  52. 52. ‫ﻓﺮم ﻫﺎ‬
  53. 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. 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. 55. ‫>‪<input‬‬‫• ﻣﻌﻤﻮل ﺗﺮﻳﻦ ﻓﻴﻠﺪﻫﺎﻳﻲ ﻛﻪ در ﻳﻚ ﻓﺮم ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﻲ ﮔﻴﺮﻧﺪ، ﻓﻴﻠﺪﻫﺎي ورود‬‫ﻣﺴﺘﻘﻴﻢ اﻃﻼﻋﺎت )دﻛﻤﻪ ﻳﺎ ﺟﻌﺒﻪ ﻣﺘﻦ( ﻫﺴﺘﻨﺪ. اﻧﻮاع ﻣﺨﺘﻠﻒ اﻳﻦ ﻓﻴﻠﺪﻫﺎ ﺗﻮﺳﻂ ﺻﻔﺖ‬ ‫‪ type‬ﻣﺸﺨﺺ ﻣﻲ ﺷﻮﻧﺪ:‬ ‫‪ :Button‬ﻳﻚ دﻛﻤﻪ ﻣﻌﻤﻮﻟﻲ )ﺑﺮاي ﻛﺎرﺑﺮدﻫﺎي اﺳﻜﺮﻳﭙﺘﻲ(‬ ‫–‬ ‫‪ :Checkbox‬ﻳﻚ ﻣﺮﺑﻊ ﺳﻔﻴﺪ ﻛﻮﭼﻚ ﻗﺎﺑﻞ ﺗﻴﻚ ﺧﻮردن‬ ‫–‬ ‫‪ :File‬ﻳﻚ ﻓﻴﻠﺪ اﻧﺘﺨﺎب ﻓﺎﻳﻞ )ﺑﺮاي آﭘﻠﻮد(‬ ‫–‬ ‫‪ :Hidden‬ﻳﻚ ﻓﻴﻠﺪ ﻣﺘﻨﻲ ﻏﻴﺮﻗﺎﺑﻞ دﻳﺪن )داراي ﻛﺎرﺑﺮدﻫﺎي ﻓﺮاوان(‬ ‫–‬ ‫‪ :Password‬ﻳﻚ ﻓﻴﻠﺪ ﻣﺘﻨﻲ ﻛﻪ ﻣﺤﺘﻮاي ﺧﻮد را ﺑﻪ ﺷﻜﻞ ﺳﺘﺎره ﻧﺸﺎن ﻣﻲ دﻫﺪ‬ ‫–‬ ‫‪ :Radio‬ﻳﻚ داﻳﺮه ﻛﻮﭼﻚ. از ﻳﻚ ﻣﺠﻤﻮﻋﻪ ‪ Radio‬ﺗﻨﻬﺎ ﻳﻜﻲ ﻣﻲ ﺗﻮاﻧﺪ اﻧﺘﺨﺎب ﺷﻮد‬ ‫–‬ ‫‪ :Text‬ﻓﻴﻠﺪ ﻣﺘﻨﻲ ﻣﻌﻤﻮﻟﻲ‬ ‫–‬ ‫‪ :Submit‬دﻛﻤﻪ ارﺳﺎل ﻓﺮم‬ ‫–‬ ‫‪ :Reset‬دﻛﻤﻪ ﭘﺎك ﻛﺮدن ﻣﺤﺘﻮاي ﺗﻤﺎم ﻓﻴﻠﺪﻫﺎي ﻓﺮم‬ ‫–‬
  56. 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. 57. ‫>‪) <input‬اداﻣﻪ(‬‫• ﺗﻘﺮﻳﺒﺎ اﻛﺜﺮ ﻓﻴﻠﺪﻫﺎي ﻳﻚ ﻓﺮم ﺑﺎ اﺳﺘﻔﺎده از ﺑﺮﭼﺴﺐ ‪ input‬ﺗﺎﻣﻴﻦ ﻣﻲ ﺷﻮﻧﺪ! ﺻﻔﺎت‬ ‫ﻣﻌﻤﻮل ﻳﻚ ‪ input‬ﺑﻪ ﺷﺮح زﻳﺮﻧﺪ:‬‫‪ :Checked‬در ﺻﻮرﺗﻲ ﻛﻪ ‪ Radio‬ﻳﺎ ‪ Checkbox‬اﺳﺘﻔﺎده ﺷﻮد، ﻣﻲ ﺗﻮاﻧﺪ ﺗﻴﻚ ﺧﻮردن‬ ‫–‬ ‫ﻳﺎ ﻧﺨﻮردن آﻧﺮا ﻣﺸﺨﺺ ﻛﻨﺪ : ‪Checked=‘Checked’ or else‬‬ ‫‪ :Disabled‬ﻫﺮ ورودي ﻛﻪ ﻏﻴﺮﻓﻌﺎل ﺷﻮد، ﺧﺎﻛﺴﺘﺮي ﺷﺪه و ﻏﻴﺮﻗﺎﺑﻞ ﺗﻌﺎﻣﻞ ﺧﻮاﻫﺪ ﺷﺪ.‬ ‫–‬ ‫‪ :MaxLength‬ﺑﺮاي ‪ text‬ﻳﺎ ‪ password‬ﺣﺪاﻛﺜﺮ ﺗﻌﺪاد ﻛﺎراﻛﺘﺮ ﻗﺎﺑﻞ ﺗﺎﻳﭗ اﺳﺖ‬ ‫–‬ ‫‪ :Readonly‬ﺑﺮاي ﻓﻴﻠﺪﻫﺎي ‪ text‬ﻳﺎ ‪ ،password‬آﻧﻬﺎ را ﻏﻴﺮﻗﺎﺑﻞ ﺗﻐﻴﻴﺮ ﻣﻲ ﻛﻨﺪ‬ ‫–‬ ‫‪ :Size‬اﻧﺪازه ﻇﺎﻫﺮي ﻓﻴﻠﺪ را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ )ﺑﺮ ﺣﺴﺐ ﺗﻌﺪاد ﻛﺎراﻛﺘﺮ(‬ ‫–‬‫‪ :Value‬ﺑﺮاي دﻛﻤﻪ ﻫﺎ، ﻣﺘﻦ روي آﻧﻬﺎ را ﻣﺸﺨﺺ ﻣﻲ ﺳﺎزد. ﺑﺮاي ﻣﺎﺑﻘﻲ، ﻣﺤﺘﻮاي ﻣﻘﺪاري را‬ ‫–‬‫ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ )ﻛﻪ ﻓﻘﻂ در ﻓﻴﻠﺪﻫﺎي ﻣﺘﻨﻲ ﻗﺎﺑﻞ ﻣﺸﺎﻫﺪه اﺳﺖ(. اﻳﻦ ﻣﺤﺘﻮا ﭘﺲ از ارﺳﺎل‬ ‫ﻓﺮم، ﺑﻪ ﺳﺮور ارﺳﺎل ﻣﻲ ﺷﻮد.‬ ‫‪ :Name‬ﻧﺎﻣﻴﺴﺖ ﻛﻪ ﺳﺮور اﻃﻼﻋﺎت ﻫﺮ ﻓﻴﻠﺪ را ﺑﺎ آن ﺗﻤﻴﺰ ﻣﻲ دﻫﺪ.‬ ‫–‬
  58. 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. 59. ‫>‪<textarea‬‬‫• ﺑﺮﭼﺴﺐ >‪ <textarea‬ﺟﻬﺖ ﺗﻌﺮﻳﻒ ﻳﻚ ﻣﺤﻴﻂ ورود ﻣﺘﻦ )ﭼﻨﺪ ﺧﻄﻲ( اﺳﺘﻔﺎده ﻣﻲ‬ ‫ﺷﻮد. از اﻳﻦ ﺑﺮﭼﺴﺐ ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﻻزم اﺳﺖ ﻣﺘﻦ ﺑﺰرﮔﻲ وارد ﺷﻮد، اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻨﺪ.‬ ‫• ﺻﻔﺖ ‪ readonly‬ﺑﺮاي اﻳﻦ ﺑﺮﭼﺴﺐ ﻣﻌﺘﺒﺮ اﺳﺖ.‬‫• ﺻﻔﺎت ‪ rows‬و ‪ cols‬ﺑﻪ ﺗﺮﺗﻴﺐ ﺗﻌﺪاد ﺳﻄﺮﻫﺎ و ﺳﺘﻮن ﻫﺎي ﻳﻚ ﻣﺤﻮﻃﻪ ﻣﺘﻨﻲ را ﺑﺮ‬ ‫ﺣﺴﺐ ﻛﺎراﻛﺘﺮ ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﻨﺪ.‬‫• دﻗﺖ ﻛﻨﻴﺪ ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﻣﻲ ﺧﻮاﻫﻴﺪ ﻳﻚ ﻓﻀﺎي ﻣﺘﻦ ﺧﺎﻟﻲ اﻳﺠﺎد ﻛﻨﻴﺪ، ﺑﻴﻦ ﺷﺮوع و ﭘﺎﻳﺎن‬‫ﺑﺮﭼﺴﺐ، ﺧﻂ ﻳﺎ ﻓﺎﺻﻠﻪ وﺟﻮد ﻧﺪاﺷﺘﻪ ﺑﺎﺷﺪ، زﻳﺮا ﻫﺮﭼﻴﺰي ﻛﻪ ﻣﺎﺑﻴﻦ دو ﺑﺮﭼﺴﺐ‬ ‫‪ textarea‬ﺑﺎﺷﺪ، ﻣﺤﺘﻮي آن ﻣﺤﺴﻮب ﻣﻲ ﮔﺮدد:‬‫‪<textarea rows=‘5’ cols=‘10’>Hello‬‬‫>‪There</textarea‬‬ ‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ، ﻣﺘﺤﻮاي ‪ textarea‬از اﺻﻮل‬ ‫‪ HTML‬ﭘﻴﺮوي ﻧﻤﻲ ﻛﻨﺪ )ﻋﺪم اﺣﺘﻴﺎج ﺑﻪ >/‪(<br‬‬
  60. 60. ‫>‪<select‬‬‫ﺑﺮﭼﺴﺐ ‪ Select‬ﻳﻚ ‪ Dropdown Combo‬اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ، ﻳﻌﻨﻲ ﻟﻴﺴﺘﻲ ﻛﻪ ﺗﻨﻬﺎ‬ ‫•‬‫ﻳﻚ ﻋﻨﺼﺮ آن ﻣﺸﺨﺺ اﺳﺖ و ﺑﺎ ﻛﻠﻴﻚ ﺑﺮ روي آن، ﻣﺎﺑﻘﻲ ﺑﻪ ﺻﻮرت ﻛﺮﻛﺮه اي ﻗﺎﺑﻞ‬ ‫اﻧﺘﺨﺎب ﻣﻲ ﮔﺮدﻧﺪ.‬‫در ﺻﻮرﺗﻲ ﻛﻪ ﺻﻔﺖ ‪ Mutiple‬از ﻳﻚ ‪ Select‬ﺗﻨﻈﻴﻢ ﺷﻮد، دﻳﮕﺮ ﻛﺮﻛﺮه اي ﻧﺒﻮده و ﺑﻪ‬ ‫•‬‫ﻣﺎﻧﻨﺪ ﻳﻚ ﻟﻴﺴﺖ ﻣﻌﻤﻮﻟﻲ ﺑﺎ ﻗﺎﺑﻠﻴﺖ اﻧﺘﺨﺎب ﭼﻨﺪﻳﻦ ﻣﻮرد ﺧﻮاﻫﺪ ﺑﻮد. ﻣﺤﺘﻮﻳﺎت ﻟﻴﺴﺘﻬﺎي‬ ‫اﻳﻨﮕﻮﻧﻪ در ﻗﺎﻟﺐ ﻳﻚ آراﻳﻪ ﺑﺮاي ﺳﺮور ارﺳﺎل ﻣﻲ ﺷﻮﻧﺪ.‬ ‫ﻣﻮارد ﻳﻚ ﻟﻴﺴﺖ ‪ Select‬ﺗﻮﺳﻂ ﺑﺮﭼﺴﺐ ﻫﺎي ‪ Option‬ﻣﺸﺨﺺ ﻣﻲ ﮔﺮدﻧﺪ.‬ ‫•‬‫ﻫﺮ ‪ Option‬اي ﻛﻪ ﺻﻔﺖ ‪ Selected‬آن ﺗﻨﻈﻴﻢ ﺷﺪه ﺑﺎﺷﺪ، در ﻟﻴﺴﺖ ﺑﻪ ﺻﻮرت‬ ‫•‬ ‫اﻧﺘﺨﺎب ﺷﺪه ﺧﻮاﻫﺪ ﺑﻮد.‬‫ﻫﺮ ‪ Option‬اﮔﺮ ﺻﻔﺖ ‪ Value‬ﺗﻨﻈﻴﻢ ﺷﺪه داﺷﺘﻪ ﺑﺎﺷﺪ، در ﺻﻮرت اﻧﺘﺨﺎب، ‪Value‬‬ ‫•‬ ‫آن ﺑﻪ ﺳﺮور ارﺳﺎل ﻣﻲ ﺷﻮد و در ﻏﻴﺮ اﻳﻨﺼﻮرت ﻣﺤﺘﻮاي ﻣﺘﻨﻲ آن.‬
  61. 61. <select> ‫ﻣﺜﺎل‬<html><body><select> <option value=Wood>‫/<ﭼﻮب‬option> <option value=Iron>‫/<آﻫﻦ‬option> <option value=Stone>‫/<ﺳﻨﮓ‬option></select></body></html>
  62. 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. 63. ‫ﻧﻜﺎت ﺳﻮدﻣﻨﺪ‬
  64. 64. ‫ﺻﻔﺘﻬﺎي اﺷﺘﺮاﻛﻲ‬ ‫ﺷﺶ ﺻﻔﺖ وﺟﻮد دارﻧﺪ ﻛﻪ ﺑﺮاي ﺗﻤﺎﻣﻲ ﺑﺮﭼﺴﺐ ﻫﺎي ‪ HTML‬ﻣﻌﺘﺒﺮ ﻫﺴﺘﻨﺪ:‬ ‫•‬ ‫– ﺻﻔﺘﻬﺎي ﻫﺴﺘﻪ اي:‬ ‫‪ :Class‬ﻛﻼس ﻳﻚ ﺑﺮﭼﺴﺐ را ﻣﺸﺨﺺ ﻣﻲ ﺳﺎزد )ﺑﺮاي اﺳﺘﻔﺎده در ‪(CSS‬‬ ‫•‬‫‪ :Id‬ﻳﻚ اﺳﻢ ﺑﺮاي ﺑﺮﭼﺴﺐ ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ. در ﻳﻚ ﺳﻨﺪ ‪ HTML‬اﺳﻢ ﻫﻴﭻ دو ﺑﺮﭼﺴﺒﻲ ﻧﺒﺎﻳﺪ‬ ‫•‬ ‫ﻳﻜﺴﺎن ﺑﺎﺷﺪ. در اﺳﻜﺮﻳﭙﺖ و ‪ CSS‬ﻣﻲ ﺗﻮان ﺑﺎ اﺳﻢ ﺑﺮدن ﻳﻚ ﺑﺮﭼﺴﺐ ﺑﻪ آن دﺳﺘﺮﺳﻲ ﻳﺎﻓﺖ.‬‫‪ :Style‬وﺿﻌﻴﺖ ﻇﺎﻫﺮي ﻳﻚ ﺑﺮﭼﺴﺐ را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ )ﺗﻮﺻﻴﻪ ﻣﻲ ﺷﻮد ﺑﻪ ﺟﺎي آن از ‪CSS‬‬ ‫•‬ ‫اﺳﺘﻔﺎده ﺷﻮد(‬ ‫‪ :Title‬ﻣﺘﻦ راﻫﻨﻤﺎي ﻛﻤﻜﻲ ﺑﺮﭼﺴﺐ را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ )ﺑﺎ ﻧﮕﻪ داﺷﺘﻦ ﻣﺎوس ﻧﻤﺎﻳﺎن ﻣﻲ ﺷﻮد(‬ ‫•‬ ‫– ﺻﻔﺖ زﺑﺎﻧﻲ:‬ ‫• ‪ :Dir‬ﺟﻬﺖ ﻣﺘﻦ، ‪ LTR‬ﻳﺎ ‪RTL‬‬ ‫– ﺻﻔﺖ دﺳﺘﻴﺎﺑﻲ:‬‫• ‪ :Tabindex‬ﺗﺮﺗﻴﺐ دﺳﺘﺮﺳﻲ ﺑﻪ ﻳﻚ ﺑﺮﭼﺴﺐ را ﺑﺮاي اﺳﺘﻔﺎده ﻛﻨﻨﺪﮔﺎن از ﻛﻴﺒﻮد ﻣﺸﺨﺺ ﻣﻲ‬‫ﺳﺎزد. در ﺻﻮرﺗﻲ ﻛﻪ ﺑﺮ روي ﻛﻴﺒﻮرد ﻛﻠﻴﺪ ‪ TAB‬را ﻓﺸﺎر دﻫﻴﺪ، ﺑﻪ ﺗﺮﺗﻴﺐ ‪ Tabindex‬روي‬ ‫ﻋﻨﺎﺻﺮ ﺟﺎﺑﺠﺎ ﺧﻮاﻫﻴﺪ ﺷﺪ.‬
  65. 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. 66. ‫ﺗﻤﺮﻳﻨﺎت‬
  67. 67. ‫ﺗﻤﺮﻳﻨﺎت‬ ‫ﻳﻚ ﺳﻨﺪ ‪ HTML‬ﺑﺴﺎزﻳﺪ ﻛﻪ ﺗﻮﺳﻂ آن ﺑﺘﻮاﻧﻴﺪ ﺟﺴﺘﺠﻮي ﺗﺼﺎوﻳﺮ ﮔﻮﮔﻞ را اﻧﺠﺎم دﻫﻴﺪ.‬ ‫١.‬‫ﻳﻚ ﺻﻔﺤﻪ ﺳﻪ ﺳﺘﻮﻧﻲ )ﻣﺎﻧﻨﺪ ‪ (SBCE‬ﺑﺴﺎزﻳﺪ و آﻧﺮا ﺑﺎ ﻣﻄﺎﻟﺐ دﻟﺨﻮاه ﭘﺮ ﻛﻨﻴﺪ، ﺳﭙﺲ آﻧﺮا ﺑﺮ‬ ‫٢.‬‫روي ﻛﺎوﺷﮕﺮﻫﺎي ﻣﺨﺘﻠﻒ )ﺣﺪاﻗﻞ ‪ Firefox‬و ‪ (IE‬ﺗﺴﺖ ﻛﻨﻴﺪ و ﺗﻔﺎوﺗﻬﺎ را ﺑﻴﺎن ﻛﻨﻴﺪ. ﺳﻌﻲ‬ ‫ﻛﻨﻴﺪ ﺳﻨﺪ را ﻃﻮري اﺻﻼح ﻛﻨﻴﺪ ﻛﻪ در ﻫﻤﻪ ﻛﺎوﺷﮕﺮﻫﺎ ﻳﻜﺠﻮر دﻳﺪه ﺷﻮد.‬‫ﻳﻚ وﺑﻼگ دﺳﺘﻲ ﺑﺴﺎزﻳﺪ. وﺑﻼگ ﺷﻤﺎ ﺑﺎﻳﺪ ﭼﻨﺪﻳﻦ ﻣﻄﻠﺐ داﺷﺘﻪ ﺑﺎﺷﺪ. ﻫﻤﭽﻨﻴﻦ در وﺑﻼگ ﺑﺎﻳﺪ‬ ‫٣.‬ ‫ﭼﻨﺪ ﻓﺎﻳﻞ ﺑﺮاي داﻧﻠﻮد وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ.‬‫ﻳﻚ ﺳﺎﻳﺖ ﻣﻌﺘﺒﺮ )ﻣﺎﻧﻨﺪ ‪ (Download.com‬را ﺑﺎز ﻛﻨﻴﺪ، ﺳﻌﻲ ﻛﻨﻴﺪ ﻫﻤﺎﻧﻨﺪ آﻧﺮا ﺑﺴﺎزﻳﺪ )از‬ ‫۴.‬‫ﻧﻈﺮ ﻇﺎﻫﺮ ﻋﻴﻨﺎ ﺑﺮاﺑﺮ ﺑﺎﺷﺪ(. ﺗﻤﺎم ﻟﻴﻨﻜﻬﺎﻳﻲ ﻛﻪ در آن ﺳﺎﻳﺖ وﺟﻮد دارد را ﺑﻪ ﻫﻤﺎن ﻣﻘﺼﺪ ﭘﻴﻮﻧﺪ‬ ‫ﺑﺰﻧﻴﺪ، ﺑﻪ ﻃﻮري ﻛﻪ اﮔﺮ ﻛﺴﻲ ﺳﻨﺪ ﺷﻤﺎ را دﻳﺪ، ﻧﺘﻮاﻧﺪ ﺗﻔﺎوت آﻧﺮا ﺑﺎ ﺳﺎﻳﺖ اﺻﻠﻲ ﺗﺸﺨﻴﺺ دﻫﺪ.‬ ‫ﻳﻚ ﻓﺮم زﻳﺒﺎ و ﻗﺎﻟﺐ ﺑﻨﺪي ﺷﺪه ﺑﺮاي درﻳﺎﻓﺖ اﻃﻼﻋﺎت ﻛﺎﻣﻞ ﻳﻚ ﻛﺎرﺑﺮ ﻃﺮاﺣﻲ ﻛﻨﻴﺪ.‬ ‫۵.‬‫ﺑﺎ ﻣﺮاﺟﻌﻪ ﺑﻪ اﻳﻨﺘﺮﻧﺖ و ﻣﻄﺎﻟﻌﻪ ﺑﻴﺸﺘﺮ راﺟﻊ ﺑﻪ ﺑﺮﭼﺴﺐ ‪ ،IMG‬ﻳﻚ ﺗﺼﻮﻳﺮ اﻳﺠﺎد ﻛﻨﻴﺪ ﻛﻪ ﺑﺎ‬ ‫۶.‬ ‫ﻛﻠﻴﻚ ﺑﺮ روي ﻫﺮ ﻗﺴﻤﺘﻲ از آن، ﻳﻚ ﺳﺎﻳﺖ ﻣﺠﺰا ﺑﺎز ﺷﻮد. )ﻗﺴﻤﺘﻬﺎ ﻟﺰوﻣﺎ ﻣﺮﺑﻌﻲ ﻧﺒﺎﺷﻨﺪ(‬

×