semantic html basic
DESCRIPTION
TRANSCRIPT
![Page 2: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/2.jpg)
初次遇見 HTML
![Page 3: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/3.jpg)
HTML 是什麼?
• 超文字標記語言(HyperText Markup Language)
• 純文字檔• 網頁上所有的構成元素都可以用標籤
<.../> 配合「屬性」、撰寫出來
• 用「連結」將文件、甚至整個網際網路串連起來
![Page 4: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/4.jpg)
http://fgps.tcc.edu.tw/~jon/jon.htm小豪生活網
![Page 5: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/5.jpg)
![Page 6: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/6.jpg)
剛剛頁面上有那些 HTML ?
• <big>姓名</big>:把「姓名」兩字放大
• <font size=7 face=”標楷體”>個人簡介</font>:7 級字、標楷體
![Page 7: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/7.jpg)
用 HTML 做網頁的問題
• 跨瀏覽器的問題至今一直存在• 不適合做複雜的特效• 不適合做應用程式• 不正確的書籍與撰寫方式• 功能更新緩慢• 很多小陷阱• 無法防止自己的程式被別人看光
![Page 8: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/8.jpg)
FLEX、Silverlight 的好處
• RIA (Rich Interface Application)
• 只要裝了 Player 就沒有跨瀏覽器的問題
• 容易做出各種美麗的特效• 廠商不定期更新、提昇功能性• 以取代傳統 HTML 為目標
• 比較可以保護自己的著作權(Flash)
![Page 9: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/9.jpg)
那... 為什麼還要學 HTML ?
![Page 10: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/10.jpg)
HTML 的優點
• 搜尋引擎的分析技術純熟• 搜尋不易的網站,對點選率不利
• 開發容易、有記事本即可• 容易學習(檢視原始碼)• 與其他程式語言的相容性高• 保有瀏覽的上一頁 / 下一頁功能
• Yahoo!、Google 等網路龍頭依然致力於 HTML 的標準開發(Browser+, Gears)
![Page 11: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/11.jpg)
如何選擇?
• FLEX / Silverlight 適合用在:
• 應用程式介面的開發。• 需強化 User 印象,例如行銷或廣告。
• HTML 適合用在:
• 長期經營維護。• 以資訊及內容為主。
![Page 12: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/12.jpg)
語意 vs. HTML
Semantic
![Page 13: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/13.jpg)
完全無法從原始碼了解網頁的構成
沒有語意的網頁
![Page 14: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/14.jpg)
從原始碼就可以看出基本的結構
有語意的網頁
![Page 15: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/15.jpg)
有語意的好處
• 容易維護、除錯• 檔案較小、速度快• 不需要安裝像是 Dreamweaver(所見及所得)的軟體即可撰寫
• 有助於搜尋引擎最佳化(Search Engine Optimization)
![Page 16: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/16.jpg)
兩者的差異點
• 沒有語意的 HTML,使用 <table/>(表格)做排版,但表格應該使用在資料的呈現、而非排版。
• 沒有語意的 HTML,在原始碼中充滿了樣式(顏色、粗細、寬度、字型)
• 有語意的 HTML:使用適合的標籤、完全不管樣式。
![Page 17: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/17.jpg)
HTMLCSS
JavaScript
負責結構
負責樣式
負責行為
![Page 18: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/18.jpg)
如何做到 Semantic
• 徹底了解每個 HTML 標籤的意義、不使用樣式類的標籤及屬性
• HTML 如今只定義結構
• 樣式由 CSS 、特效由 JavaScript 負責
• 鼓勵大家少使用 Dreamweaver 或 Frontpage,這樣才會去思考頁面的原始碼、也不會變笨。
![Page 19: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/19.jpg)
開始來寫 HTML 吧
![Page 20: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/20.jpg)
必備資源• http://www.w3schools.com/html/
• 推薦工具書:
![Page 21: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/21.jpg)
網頁的基本結構<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body>
</body></html>
![Page 22: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/22.jpg)
網頁的基本結構<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body>
</body></html>
DOCTYPE 是決定你所使用的 (X)HTML 版本及是否符合標準
![Page 23: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/23.jpg)
網頁的基本結構<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body>
</body></html>
![Page 24: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/24.jpg)
網頁的基本結構<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body>
</body></html>
![Page 25: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/25.jpg)
網頁的基本結構<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body>
</body></html>
![Page 26: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/26.jpg)
網頁的基本結構<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body>
</body></html>
![Page 27: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/27.jpg)
顯示標題
• 一本書、一篇文章、一篇部落格,必定有它的標題層次
• 我們使用 <h1> ~ <h6> 來表示這些標題層次
• h1 是此文件的大標題
![Page 28: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/28.jpg)
顯示標題<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body> <h1>1 天學會 HTML</h1> <p>HTML 學起來真的很簡單</p> <h2>HTML 的基礎知識</h2> <p>這裡將說明最基礎的知識。首先,您應該正式了解用語。</p> <h3>關於元素與屬性</h3> <p>所謂元素</p></body></html>
![Page 29: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/29.jpg)
段落 <p>~</p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body> <h1>1 天學會 HTML</h1> <p>HTML 學起來真的很簡單</p> <h2>HTML 的基礎知識</h2> <p>這裡將說明最基礎的知識。首先,您應該正式了解用語。</p> <h3>關於元素與屬性</h3> <p>所謂元素</p></body></html>
![Page 30: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/30.jpg)
強調 <em>~</em>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body> <h1>1 天學會 HTML</h1> <p>如果學 HTML,但不了解 <em>Semantic 的意義</em>,那等於白學。</p></body></html>
![Page 31: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/31.jpg)
強調 <strong>~</strong>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body> <h1>1 天學會 HTML</h1> <p>如果學 HTML,但不了解 <strong>Semantic 的意義</strong>,那等於白學。</p></body></html>
![Page 32: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/32.jpg)
連結 <a href=”...”>~</a>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body> <h1>1 天學會 HTML</h1> <p>如果學 HTML,但不了解 Semantic 的意義</strong>,那等於白學。</p> <a href=”http://josephj.com/”>啊嗚的部落格</a></body></html>
![Page 33: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/33.jpg)
連結 <a href=”...”>~</a>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body> <h1>1 天學會 HTML</h1> <p>如果學 HTML,但不了解 Semantic 的意義</strong>,那等於白學。</p> <a href=”http://josephj.com/” target=”_blank”>啊嗚的部落格</a></body></html>
![Page 34: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/34.jpg)
區塊 <div>~</div><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body> <div> <a href=”about.html”>關於作者</a> <a href=”forum.php”>討論區</a> </div> <div> <h1>這樣做就對了</h1> <p>歡迎來到 josephj.com,這裡與您分享前端的技術。<p> </div></body></html>
![Page 35: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/35.jpg)
單行 <span>~</span><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body> <div> <h1>這樣做就對了</h1> <div> <span>連結:</span> <a href=”...”>Yahoo!奇摩</a> </div> </div></body></html>
![Page 36: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/36.jpg)
定義清單
Orz 失意體前屈,原本是日本網路上流行的表情符號:_| ̄|○。它看起來像是一個人跪倒在地上,低著頭,一副「天啊,为什么是这样」的動作,雖然簡單卻很傳神。
冏 原名臉部表情異常緊縮暫時即性症候群,是一種源自於網路象形文字(或心情圖示),腦殘帝國為其發源地,儼然已經成為一種新興的網路文化。
![Page 37: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/37.jpg)
定義清單
<dl> <dt>Orz</dt> <dd>失意體前屈,原本是日本網路上流行的表情符號:_| ̄|○。它看起來像是一個人跪倒在地上,低著頭,一副「天啊,为什么是这样」的動作,雖然簡單卻很傳神。</dd> <dt>冏</dt> <dd>原名臉部表情異常緊縮暫時即性症候群,是一種源自於網路象形文字(或心情圖示),腦殘帝國為其發源地,儼然已經成為一種新興的網路文化。 </dd></dl>
![Page 38: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/38.jpg)
清單列表 跑步環島身上裝備
Nike 運動帽 太陽眼鏡 Dphiten 鈦項圈 Nike Dry Fit 吸溼排汗衣 Nike 緊身褲 護手 Casio 電子表 護膝 Nike 慢跑襪 Adidas 慢跑鞋 Sony Cybershot 相機 Dakine 單車水袋背包
![Page 39: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/39.jpg)
清單列表(無順序)<h2>跑步環島身上裝備</h2><ul> <li>Nike 運動帽</li> <li>太陽眼鏡</li> <li>Dphiten 鈦項圈</li> <li>Nike Dry Fit 吸溼排汗衣</li> <li>Nike 緊身褲</li> <li>護手</li> <li>Casio 電子表</li> <li>護膝</li> <li>Nike 慢跑襪</li> <li>Adidas 慢跑鞋</li> <li>Sony Cybershot 相機</li> <li>Dakine 單車水袋背包</li></ul>
![Page 40: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/40.jpg)
清單列表(有順序) 每日行程
4:00 起床盥洗、熱身、吃 (Energy-in + 巧克力棒一條) 5:00 等待 GPS 定位好、相機拿在右手、出發 5:00 ~ 10:00 跑步(依路途長短, 也有跑到快中午的) 11:00 ~ 12:00 抵達旅館、吃完早餐、盥洗完畢,洗衣服晾乾 13:00 ~ 16:00 上網,更新部落格及照片、找當地有什麼好吃的 16:00 ~ 19:00 當地趴趴走, 覓食, 玩 19:00 ~ 21:00 將明日會經過的道路寫在小筆記本上 21:30 就寢
![Page 41: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/41.jpg)
清單列表(有順序)<h2>每日行程</h2><ol> <li>4:00 起床盥洗、熱身、吃 (Energy-in + 巧克力棒一條)</li> <li>5:00 等待 GPS 定位好、相機拿在右手、出發</li> <li>5:00 ~ 10:00 跑步(依路途長短, 也有跑到快中午的) </li> <li>11:00 ~ 12:00 抵達旅館、吃完早餐、盥洗完畢,洗衣服晾乾</li> <li>13:00 ~ 16:00 上網,更新部落格及照片、找當地有什麼好吃的</li> <li>16:00 ~ 19:00 當地趴趴走, 覓食, 玩</li> <li>19:00 ~ 21:00 將明日會經過的道路寫在小筆記本上</li> <li>21:30 就寢</li></ol>
![Page 42: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/42.jpg)
表格的使用 <table></table> 比較表 工人舍(120G + 1G RAM) Eee PC(8G + 1G RAM) 配備: Intel 800MHz / 120G HDD / 1G RAM Intel Mobile / 8G HDD (Flash) / 1G RAM 價錢: 29,900 14,490 系統: Vista XP 攝影機: 130 萬 30 萬(不支援上網 Web 視訊) 麥克風: 有 有 藍芽: 有 無 轉手性: 高 低
![Page 43: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/43.jpg)
表格的使用 <table></table><h3>比較表</h3><table><tr> <th></th><th>工人舍(120G + 1G RAM)</th><th> Eee PC(8G + 1G RAM)</th></tr><tr> <th>配備:</th><td>Intel 800MHz / 120G HDD / 1G RAM</td><td>Intel Mobile / 8G HDD (Flash) / 1G RAM</td></tr><tr> <th>價錢:</th><td>29,900</td><td>14,490</td></tr><tr> <th>系統:</th><td>Vista</td><td>XP</td></tr><tr> <th>攝影機:</th><td>130 萬</td><td>30 萬(不支援上網 Web 視訊)</td></tr><tr> <th>麥克風:</th><td>有</td><td>有</td></tr><tr> <th>藍芽:</th><td>有</td><td>無</td></tr><tr> <th>轉手性:</th><td>高</td><td>低</td></tr></table>
![Page 44: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/44.jpg)
利用 id 與 class 屬性強化定義
<ol class="bibliography"> <li> <cite>"Colorimetry, Second Edition", CIE Publication 15.2-1986,ISBN 3-900-734-00-3.</cite> </li> <li> <cite>"Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 17 December 1996.</cite> </li> <li> <cite>"Cascading Style Sheets, level 2, CSS2 Specification", B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998</cite> </li></ol>
id:代表一個模組,一頁中不能重複id=”navigation”, id=”relate-site”, id=”login”
![Page 45: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/45.jpg)
必讀
• The Elements of Meaningful XHTMLhttp://tantek.com/presentations/2005/09/elements-of-xhtml/
• Bring on the tableshttp://www.456bereastreet.com/archive/200410/bring_on_the_tables/
![Page 46: Semantic HTML Basic](https://reader030.vdocument.in/reader030/viewer/2022012910/54b76e874a7959db2c8b4683/html5/thumbnails/46.jpg)
作業
• 用剛剛教的標籤• 寫一篇文章• 寫出自我介紹• 整理網路上的文章• 例如: http://tw.myblog.yahoo.com/jw!
Q3lkkBafERy7ixxachp8Pg--/article?mid=5084