Html & Css

2,286 views
2,155 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
2,286
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html & Css

  1. 1. 羅世豪
  2. 2. Outline <ul><li>HTML & CSS </li></ul><ul><li>HTML 的基本構成 </li></ul><ul><li>常用的 HTML 標籤 </li></ul><ul><li>HTML 的巢狀結構與階層性 </li></ul><ul><li>What is CSS? </li></ul><ul><li>Why CSS? </li></ul><ul><li>CSS 基本語法 </li></ul><ul><li>常見的 CSS 使用方式 </li></ul>
  3. 3. HTML & CSS <ul><li>為什麼 PM 要上這堂課 ? </li></ul><ul><li>當 HTML 遇上 CSS 會擦出什麼火花 ? </li></ul>
  4. 4. HTML 的基本構成 <ul><li>標籤 (Tags) </li></ul><ul><li>關閉標籤 (Closing tags) </li></ul><ul><li>屬性 (Attributes) </li></ul><ul><li>元素 (Elements) </li></ul><ul><li><tag attribute = &quot; value &quot; > 我是一段文字 </tag> </li></ul><ul><li><tag2 attribute2=&quot;value2“ /> </li></ul>
  5. 5. HTML 的基本構成 <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> </li></ul><ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li>相簿很大不用錢 </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  6. 6. HTML 的基本構成 <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> 天空部落 </title> </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot; text/html; charset=utf-8 &quot; /> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>相簿很大不用錢 </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  7. 7. 常用的 HTML 標籤 <ul><li>p 標籤 (paragraph) ,也就是段落 </li></ul><ul><ul><li><p> 這是一段文字 </p> </li></ul></ul><ul><li>換行標籤 (Line Breaks) </li></ul><ul><ul><li><br /> </li></ul></ul><ul><li>h1 、 h2 、 h3 、 h4 、 h5 和 h6 標籤用來定義標題 </li></ul><ul><ul><li><h1> 我是標題 </h1> </li></ul></ul><ul><li>a 標籤用來定義一個連結 </li></ul><ul><ul><li>href 屬性用來定義連結的目標 </li></ul></ul><ul><ul><li>target 屬性用來定義在何處開啟連結 </li></ul></ul><ul><ul><ul><li><a href =&quot;http://blog.yam.com&quot; target =&quot;_blank&quot; > 這是一個連結 </a> </li></ul></ul></ul>
  8. 8. 常用的 HTML 標籤 <ul><li><h1> 風林火山 6/3 不刪檔封測 </h1> </li></ul><ul><li><h2> 遊戲簡介 </h2> </li></ul><ul><li><p> 由台灣知名入口網站 yam 天空代理的線上遊戲-風林火山 ONLINE .... </p><p> 韓國知名大廠 Mgame 斥資數十億精心開發的風林火山 ONLINE... </p> </li></ul><ul><li><h2> 遊戲 MV </h2> </li></ul><ul><li><p> yam 天空提供絕無僅有的【風林火山 ONLINE 】結合羅憶詩的 MV 大首播: <br /> <a href=“http://mymedia.yam.com/m/2746718” target=“_blank”> 點此觀看 </a> 。 </p> </li></ul>
  9. 9. 常用的 HTML 標籤 <ul><li>img 圖片標籤 </li></ul><ul><ul><li>src 屬性定義圖片的位址 </li></ul></ul><ul><ul><li>alt 屬性定義替代的描述 </li></ul></ul><ul><ul><li>width 長度屬性和 height 高度屬性定義圖片呈現的長寬 </li></ul></ul><ul><ul><ul><li><img height =&quot;69&quot; width =&quot;84&quot; src =“http://blog.yam.com/2008index/i/logo.jpg“ alt =“yam logo” /> </li></ul></ul></ul><ul><li>無序列表 (unordered lists) </li></ul><ul><ul><li><ul> <li>blog</li><li>album</li></ul> </li></ul></ul><ul><li>有序列表 (ordered lists) </li></ul><ul><ul><li><ol> <li> 列表項目 1</li><li> 列表項目 2</li> </ol> </li></ul></ul><ul><li>列表項目 (list item) </li></ul><ul><ul><li><li> 這是一個列表項目 </li> </li></ul></ul>
  10. 10. 常用的 HTML 標籤 <ul><li><ul> </li></ul><ul><li><li> blog 排名 </li></ul><ul><li><ol> </li></ul><ul><li><li> Brenda★ 晶晶 ~ 寵貓一生 </li> </li></ul><ul><li> <li> 486 的 大丈夫週記 </li> </li></ul><ul><li> </ol> </li></ul><ul><li></li> </li></ul><ul><li><li> <img height=&quot;69&quot; width=&quot;84&quot; src=&quot;http://blog.yam.com/2008index/i/logo.jpg&quot; alt=“yam logo” /> </li> </li></ul><ul><li></ul> </li></ul>
  11. 11. 常用的 HTML 標籤 <ul><li>table 定義表格 </li></ul><ul><li>tr (table row) 定義表格中的一行 </li></ul><ul><li>th (table header cell) 定義一行或一列資料的表頭,不可為資料 </li></ul><ul><li>td (table data cell) 定義表格中的一資料單元格 (data cell) ,必須包含在 tr 內 </li></ul><ul><ul><li>colspan 屬性指出要跨越幾個單元格 </li></ul></ul><ul><ul><li>rowspan 屬性指出要跨越幾行 </li></ul></ul>
  12. 12. 常用的 HTML 標籤 <ul><li><table border=&quot;1“ > </li></ul><ul><li><caption> 福委投票結果 </caption> </li></ul><ul><li><tr> </li></ul><ul><li> <th> 姓名 </th> </li></ul><ul><li> <th> 票數 </th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li> <td > 黃旭廷 </td> </li></ul><ul><li> <td >48</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li> <td > 邱奕超 </td> </li></ul><ul><li> <td>46</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li> <td> 吉芷宜 </td> </li></ul><ul><li> <td >22</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>
  13. 13. 常用的 HTML 標籤 <ul><li><table border=&quot;1“ > </li></ul><ul><li><caption> 表格標題 </caption> </li></ul><ul><li><tr> </li></ul><ul><li> <th> Header 1 </th> </li></ul><ul><li> < th> Header 2 </th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li> <td colspan =“2” > 第 1 行的第 1 列跟第 2 列合併 </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li> <td rowspan =“2” > 第 2 行跟第 3 行的第 1 列合併 </td> </li></ul><ul><li> <td> 第 2 行第 2 列 </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li> <td> 第 3 行第 2 列 </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>
  14. 14. 常用的 HTML 標籤 <ul><li><table border=&quot;1“ > <caption> 表格標題 </caption> </li></ul><ul><li><thead> </li></ul><ul><li><tr> </li></ul><ul><li> <th> Header 1 </th> </li></ul><ul><li> <th> Header 2 </th> </li></ul><ul><li></tr> </li></ul><ul><li> </thead> </li></ul><ul><li><tfoot> </li></ul><ul><li><tr> </li></ul><ul><li> <td> Footer 1 </td> </li></ul><ul><li> <td> Footer 2 </td> </li></ul><ul><li></tr> </li></ul><ul><li> </tfoot> </li></ul><ul><li><tbody> </li></ul><ul><li><tr> </li></ul><ul><li> <td> 第 1 行第 1 列 </td> </li></ul><ul><li> <td> 第 1 行第 2 列 </td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li> <td> 第 2 行第 1 列 </td> </li></ul><ul><li> <td> 第 2 行第 2 列 </td> </li></ul><ul><li></tr> </li></ul><ul><li></tbody> </table> </li></ul>
  15. 15. 常用的 HTML 標籤 <ul><li>div (division) & span </li></ul><ul><ul><li>div 排版很方便,但不要走火入魔。 </li></ul></ul><ul><li>表單 </li></ul><div id =“content&quot; > <p> 遊戲名稱叫做 <span class =“game“ > 風林火山 </span> </p> </div>
  16. 16. HTML 的巢狀結構與階層性 <ul><li>巢狀結構錯誤示範 </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> 天空部落 </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><div> </li></ul><ul><li> <a href=“http://blog.yam.com”> </li></ul><ul><li>天空部落的連結 </li></ul><ul><li> </div> </li></ul><ul><li> </a> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>巢狀結構正確示範 <html> <head> <title> 天空部落 </title> </head> <body> <div> <a href=“http://blog.yam.com”> 天空部落的連結 </a> </div> </body> </html>
  17. 17. HTML 的巢狀結構與階層性 <ul><li><html> </li></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title> 天空部落 </title> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><p> </li></ul></ul><ul><ul><li> <a href=“http://blog.yam.com”> </li></ul></ul><ul><ul><li>天空部落的連結 </li></ul></ul><ul><ul><li> </a> </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><ul><li><p> 相簿無限大 </p> </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><li></html> </li></ul>
  18. 18. What is CSS? <ul><li>CSS (Cascading Style Sheets) 串接樣式表 </li></ul><ul><li>樣式表 </li></ul><ul><ul><li>將內容與樣式(顯示出來的模樣)分離 </li></ul></ul><ul><li>串接 </li></ul>
  19. 19. Why CSS? <ul><li>更強大的網頁控制與排版能力 </li></ul><ul><li>修改容易 </li></ul><ul><li>提高網頁顯示速度並節省頻寬 </li></ul><ul><li>有利於搜尋引擎的搜索 </li></ul>
  20. 20. CSS 基本語法 body { color: black; background: white; } 多種宣告間以分號隔開 宣告( declaration block ) 決定展現的樣式 特性 (property) 值 (value) 選取符( selector ) 決定這個規則所影響的範圍
  21. 21. 常見的 CSS 使用方式
  22. 22. <ul><li>Thank you! </li></ul>

×