Html basic

373 views
285 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
373
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html basic

  1. 1. HTML-Basic
  2. 2. 大綱  Text Formatting  Links  Images  Lists  Forms  Iframes  Blocks
  3. 3. Text Formatting  <big>放大文字</big>  <b>粗體</b>  <strong>粗體(強調語氣)</strong>  <i>斜體文字</i>  <em>斜體(強調語氣)</em>  <sup>上標文字</sup>  <sub>下標文字</sub>
  4. 4. Links  連結  <a href=“http://www.google.com”>link</a>  新視窗連結  <a href=“http://www.google.com” target=“_blank” >link</a>  錨點連結  <a href=“#tips”>到有用的提示</a>  <span id=“tips”>有用的提示</span>   url會改變 http://www.google.com http://www.google.com#tips
  5. 5. Images  圖片  <img src=“url” alt=“替代圖片的提示” />  定義map的name,並設定area特定點擊區域  <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">  </map>  透過map 的name與 img的usemap對應,產生點擊特定區域呈現不同圖片  <img src=“planets.gif” width=“145” height=“126” alt="Planets" usemap="#planetmap">  參見w3school : http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
  6. 6. Lists              有序列表,Type: <ol type=“”> <li></li> <li></li> … </ol> 1、 A、 a 、I 無序列表, Type: disc 、 circle 、 square <ul type=“”> <li></li> <li></li> … </ul> Style替代type -> style="list-style-type:circle" 、i
  7. 7. 巢狀Lists  無序列表  <ul>  <li>10</li>  <li>20 <ul>   <li>21</li>  <li>22</li>  <li>23</li>  <li>24</li>  <li>25 <ul>   <li>26</li>  <li>27</li>  <li>28</li>  <li>29</li> </ul>  </li>  </ul>   </li>  <li>30</li>  </ul>
  8. 8. Forms  常用屬性  Action : 資料要傳送的位置 URL  Enctype : 資料送至Server端的編碼方式  Method : 資料傳送方式 get 、 post  Name : 名稱  Target : Server Response 的呈現方式 (_blank 新頁開啟、_self 在同一個frame中開啟)
  9. 9. Iframes  常用屬性  Height: Iframe 高度  Width: Iframe 寬度  src : Iframe 來源位置  Name: Iframe 的名稱
  10. 10. Blocks  Div :    Block level elements (<h1>, <p>, <table> …) 常用於定義頁面的區塊、布局 Span :   常用於group inline 的Elements(<b>、<a>、<td>…)   Inline elements 套用後頁面上不會有視覺上的改變 Block level 與 Inline 的明顯差異就是前者會換行

×