講給設計師聽的HTML-參考f2eclass

講給設計師聽的 HTML Sammy

不要聽到HTML就怕

愛他可以不用背他

HTML是什麼？ ‧超文件標示語言（英文：HyperText Markup Language，HTML）

HTML是什麼？ ‧超文件標示語言（英文：HyperText Markup Language，HTML）做簡報之前我還不知道全名是什麼 orz

純文字檔，副檔名為.htm .html

所有的元素都是由標籤組成

了解正確的觀念

語意化 semantic

沒語意化

沒語意化完全看不懂呀.....

有話意化

有話意化可以⽐比較清楚知道網⾴頁架構

差在哪？

差在哪？ • 沒語意化HTML，就是醜爆了！

差在哪？ • 沒語意化HTML，就是醜爆了！ • 沒語意化HTML，在原始碼裡充滿了樣式 (顏⾊色、⼤大⼩小、字型...還有更多噁⼼心的東⻄西)

差在哪？ • 沒語意化HTML，就是醜爆了！ • 沒語意化HTML，在原始碼裡充滿了樣式 (顏⾊色、⼤大⼩小、字型...還有更多噁⼼心的東⻄西) • 有語意化的HTML，使⽤用適當的標籤，不放噁⼼心的東⻄西。

差在哪？ • 沒語意化HTML，就是醜爆了！ • 沒語意化HTML，在原始碼裡充滿了樣式 (顏⾊色、⼤大⼩小、字型...還有更多噁⼼心的東⻄西) • 有語意化的HTML，使⽤用適當的標籤，不放噁⼼心的東⻄西。
• 有語意化的HTML，更好被Google搜尋到

有語意化的好處

有語意化的好處 • 容易維護、DeBug

有語意化的好處 • 容易維護、DeBug • 檔案⼩小、速度快

有語意化的好處 • 容易維護、DeBug • 檔案⼩小、速度快 • 可以不⽤用⼀一定要⽤用frontpage、 dreamweaver來做網⾴頁

有語意化的好處 • 容易維護、DeBug • 檔案⼩小、速度快 • 可以不⽤用⼀一定要⽤用frontpage、 dreamweaver來做網⾴頁 • ⽐比較容易搜尋

有語意化的好處 • 容易維護、DeBug • 檔案⼩小、速度快 • 可以不⽤用⼀一定要⽤用frontpage、 dreamweaver來做網⾴頁 • ⽐比較容易搜尋
• 看起來帥氣專業

結構

結構樣式

結構樣式⾏行為

怎麼語意化?

怎麼語意化? • 由HTML來定義結構

怎麼語意化? • 由HTML來定義結構 • 由CSS來負責樣式

怎麼語意化? • 由HTML來定義結構 • 由CSS來負責樣式 • 由JavaScript來負責特效

HTML的組成

HTML的組成 • 由很多標籤(tag)組成的

HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容</標籤名稱>

HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容</標籤名稱> • 範例：<h1>今天天氣好</h1>

HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容</標籤名稱> • 範例：<h1>今天天氣好</h1> • 每個標籤可以有屬性(Attribute)

HTML的組成 • 由很多標籤(tag)組成的 • 語法：<標籤名稱>內容</標籤名稱> • 範例：<h1>今天天氣好</h1> • 每個標籤可以有屬性(Attribute) •
語法：<標籤名稱屬性名稱=’屬性值’>內容</標籤名稱>

語法：<標籤名稱屬性名稱=’屬性值’>內容</標籤名稱> • 範例：<a href=‘http://www.google.com.tw/’>前往Google</a>

語法：<標籤名稱屬性名稱=’屬性值’>內容</標籤名稱> • 範例：<a href=‘http://www.google.com.tw/’>前往Google</a> • 註解(在網⾴頁看看不到)

語法：<標籤名稱屬性名稱=’屬性值’>內容</標籤名稱> • 範例：<a href=‘http://www.google.com.tw/’>前往Google</a> • 註解(在網⾴頁看看不到) • 範例：

了解HTML結構 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>標題</title> </head> <body>
 </body> </html>

</body> </html> 此為HTML5⽂文件宣告，不可省略

</body> </html> HTML的內容

</body> </html> 不會出現在網⾴頁的內容，例如編碼、作者、關鍵字、標題...等。

</body> </html> 實際會出現在網⾴頁的內容

標題 <h1>...</h1> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快快樂樂學HTML</title>
</head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html>

</head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html> • h = heading, 標題的意思

</head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html> • h = heading, 標題的意思 • 書、⽂文章必有標題的層次

</head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html> • h = heading, 標題的意思 • 書、⽂文章必有標題的層次 • 使⽤用h1~h6來標⽰示

</head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html> • h = heading, 標題的意思 • 書、⽂文章必有標題的層次 • 使⽤用h1~h6來標⽰示 • h1就是⽂文件的標題

</head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html> • h = heading, 標題的意思 • 書、⽂文章必有標題的層次 • 使⽤用h1~h6來標⽰示 • h1就是⽂文件的標題 • 可以清楚了解結構

</head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html> • h = heading, 標題的意思 • 書、⽂文章必有標題的層次 • 使⽤用h1~h6來標⽰示 • h1就是⽂文件的標題 • 可以清楚了解結構 • SEO很重要的地⽅方

段落 <p>....</p> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快快樂樂學HTML</title>
</head> <body> <h1>什麼是HTML</h1> <p>HTML就是超⽂文件標⽰示語⾔言（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎語意化</p> </body> </html>

h1 h2 p

h1 h2 p p

強調 <em>....</em> em = emphasize <!doctype html> <html lang="en"> <head>
<meta charset="UTF-8"> <title>快快樂樂學HTML</title> </head> <body> <h1>什麼是HTML</h1> <p>HTML就是<em>超⽂文件標⽰示語⾔言</em>（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎<em>語意化</em></p> </body> </html>

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快快樂樂學HTML</title> </head> <body>
<h1>什麼是HTML</h1> <p>HTML就是<em>超⽂文件標⽰示語⾔言</em>（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎<em>語意化</em></p> </body> </html> 強調 <em>....</em> em = emphasize

更強調 <strong>....</strong> 與em有程度的差別，更強調的意思 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">
<title>快快樂樂學HTML</title> </head> <body> <h1>什麼是HTML</h1> <p>HTML就是<strong>超⽂文件標⽰示語⾔言</strong>（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎<strong>語意化</strong></p> </body> </html>

連結 <a href=‘網址’>連結字樣</a> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">
<title>快快樂樂學HTML</title> </head> <body> <h1>什麼是HTML</h1> <p>HTML就是<strong>超⽂文件標⽰示語⾔言</strong>（英⽂文：HyperText Markup Language，HTML）</p> <h2>HTML的基本知識</h2> <p>blablabla....</p> <h3>HTML的觀念</h3> <p>就是要合乎<strong>語意化</strong></p> <p>如果需要參考請到<a href=‘http://www.google.com’>Google</a>搜尋</a> </body> </html>

圖⽚片 <img src=”圖⽚片網址” alt=”破圖說明”> <img src=”http://farm9.staticflickr.com/8543/8748617369_5b9048d29c_z.jpg” alt=”JSDC 2013開始”>

圖⽚片 <img src=”圖⽚片網址” alt=”破圖說明”> <img src=”http://farm9.staticflickr.com/8543/8748617369_5b9048d29c_z.jpg” alt=”JSDC 2013開始”> ⾼高度說明
src 圖⽚片網址 alt 破圖時的⽂文字 title 提⽰示⽂文字 width 寬度 height 屬性

無順序的清單 <ul> <li></li> <li></li> </ul> unordered list HTML Result

有順序的清單 <ol> <li></li> <li></li> </ol> ordered list HTML Result

表格 table HTML Result <h2>名單</h2> <table> <tr> <td>編號</td> <td>姓名</td> <td>電話</td>
</tr> <tr> <td>001</td> <td>⿈黃⼩小⺠民</td> <td>097644324</td> </tr> <tr> <td>002</td> <td>林⼤大同</td> <td>0212313041</td> </tr> </table>

</tr> <tr> <td>001</td> <td>⿈黃⼩小⺠民</td> <td>097644324</td> </tr> <tr> <td>002</td> <td>林⼤大同</td> <td>0212313041</td> </tr> </table> •不要拿table來排版

</tr> <tr> <td>001</td> <td>⿈黃⼩小⺠民</td> <td>097644324</td> </tr> <tr> <td>002</td> <td>林⼤大同</td> <td>0212313041</td> </tr> </table> •不要拿table來排版 •類似Excel來存放資料

換⾏行區塊 division <div> ... </div> 把相關的HTML，群組化，不相關的隔離 <div> <a href="#">這是連結⼀一</a> </div>
<div> <a href="#">這是連結⼆二</a> </div>

單⾏行區塊 span <span>...</span> 跟div⼀一樣是區分HTML，但是不會換⾏行 <span> <a href="#">這是連結⼀一</a> </span> <span> <a
href="#">這是連結⼆二</a> </span>

注意

注意 • 標籤與屬性都要⼀一律⼩小寫

注意 • 標籤與屬性都要⼀一律⼩小寫 • 屬性值需要⽤用雙引號” 包覆

注意 • 標籤與屬性都要⼀一律⼩小寫 • 屬性值需要⽤用雙引號” 包覆 • 特定標籤不應結尾(⾮非XHTML)

注意 • 標籤與屬性都要⼀一律⼩小寫 • 屬性值需要⽤用雙引號” 包覆 • 特定標籤不應結尾(⾮非XHTML) • 例如:<br>,
<link>, <img>

看到想吐了....

練習 • 連結：http://goo.gl/mEeFx • 建⽴立test1.html，把內容貼上 • 10分鐘 • 會⽤用到的連結： •
h1, h2, ul, li, p, em

• 解答 http://goo.gl/lJu38 練習

參考 • 本簡報資料⼤大部分來⾃自於 • http://www.slideshare.net/josephj/ html-14701114

Q&A 簡報網址： http://goo.gl/OnXW6

講給設計師聽的HTML-參考f2eclass

講給設計師聽的HTML-參考f2eclass

More Decks by Sammy Lin

Other Decks in Programming

Featured

Transcript