View
1.932
Download
0
Category
Preview:
DESCRIPTION
Citation preview
HTML 與網頁開發網頁初學者
Yahoo! 奇摩Joseph Chiang / 蔣定宇josephj@yahoo-inc.com
初次遇見 HTML
HTML 是什麼？
• 超文字標記語言（HyperText Markup Language）
• 純文字檔• 網頁上所有的構成元素都可以用標籤
<.../> 配合「屬性」、撰寫出來
• 用「連結」將文件、甚至整個網際網路串連起來
http://fgps.tcc.edu.tw/~jon/jon.htm小豪生活網
剛剛頁面上有那些 HTML ?
• <big>姓名</big>：把「姓名」兩字放大
• <font size=7 face=”標楷體”>個人簡介</font>：7 級字、標楷體
用 HTML 做網頁的問題
• 跨瀏覽器的問題至今一直存在• 不適合做複雜的特效• 不適合做應用程式• 不正確的書籍與撰寫方式• 功能更新緩慢• 很多小陷阱• 無法防止自己的程式被別人看光
FLEX、Silverlight 的好處
• RIA (Rich Interface Application)
• 只要裝了 Player 就沒有跨瀏覽器的問題
• 容易做出各種美麗的特效• 廠商不定期更新、提昇功能性• 以取代傳統 HTML 為目標
• 比較可以保護自己的著作權（Flash）
那... 為什麼還要學 HTML ？
HTML 的優點
• 搜尋引擎的分析技術純熟• 搜尋不易的網站，對點選率不利
• 開發容易、有記事本即可• 容易學習（檢視原始碼）• 與其他程式語言的相容性高• 保有瀏覽的上一頁 / 下一頁功能
• Yahoo!、Google 等網路龍頭依然致力於 HTML 的標準開發（Browser+, Gears）
如何選擇？
• FLEX / Silverlight 適合用在：
• 應用程式介面的開發。• 需強化 User 印象，例如行銷或廣告。
• HTML 適合用在：
• 長期經營維護。• 以資訊及內容為主。
語意 vs. HTML
Semantic
完全無法從原始碼了解網頁的構成
沒有語意的網頁
從原始碼就可以看出基本的結構
有語意的網頁
有語意的好處
• 容易維護、除錯• 檔案較小、速度快• 不需要安裝像是 Dreamweaver（所見及所得）的軟體即可撰寫
• 有助於搜尋引擎最佳化（Search Engine Optimization）
兩者的差異點
• 沒有語意的 HTML，使用 <table/>（表格）做排版，但表格應該使用在資料的呈現、而非排版。
• 沒有語意的 HTML，在原始碼中充滿了樣式（顏色、粗細、寬度、字型）
• 有語意的 HTML：使用適合的標籤、完全不管樣式。
HTMLCSS
JavaScript
負責結構
負責樣式
負責行為
如何做到 Semantic
• 徹底了解每個 HTML 標籤的意義、不使用樣式類的標籤及屬性
• HTML 如今只定義結構
• 樣式由 CSS 、特效由 JavaScript 負責
• 鼓勵大家少使用 Dreamweaver 或 Frontpage，這樣才會去思考頁面的原始碼、也不會變笨。
開始來寫 HTML 吧
必備資源• http://www.w3schools.com/html/
• 推薦工具書：
網頁的基本結構<!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 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 版本及是否符合標準
網頁的基本結構<!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 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 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 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>
顯示標題
• 一本書、一篇文章、一篇部落格，必定有它的標題層次
• 我們使用 <h1> ~ <h6> 來表示這些標題層次
• h1 是此文件的大標題
顯示標題<!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>
段落 <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>
強調 <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>
強調 <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>
連結 <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>
連結 <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>
區塊 <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>
單行 <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>
定義清單
Orz 失意體前屈，原本是日本網路上流行的表情符號：＿|￣|○。它看起來像是一個人跪倒在地上，低著頭，一副「天啊，为什么是这样」的動作，雖然簡單卻很傳神。
冏 原名臉部表情異常緊縮暫時即性症候群，是一種源自於網路象形文字(或心情圖示)，腦殘帝國為其發源地，儼然已經成為一種新興的網路文化。
定義清單
<dl> <dt>Orz</dt> <dd>失意體前屈，原本是日本網路上流行的表情符號：＿|￣|○。它看起來像是一個人跪倒在地上，低著頭，一副「天啊，为什么是这样」的動作，雖然簡單卻很傳神。</dd> <dt>冏</dt> <dd>原名臉部表情異常緊縮暫時即性症候群，是一種源自於網路象形文字(或心情圖示)，腦殘帝國為其發源地，儼然已經成為一種新興的網路文化。 </dd></dl>
清單列表 跑步環島身上裝備
Nike 運動帽 太陽眼鏡 Dphiten 鈦項圈 Nike Dry Fit 吸溼排汗衣 Nike 緊身褲 護手 Casio 電子表 護膝 Nike 慢跑襪 Adidas 慢跑鞋 Sony Cybershot 相機 Dakine 單車水袋背包
清單列表（無順序）<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>
清單列表（有順序） 每日行程
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 就寢
清單列表（有順序）<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>
表格的使用 <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 視訊） 麥克風： 有 有 藍芽： 有 無 轉手性： 高 低
表格的使用 <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>
利用 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”
必讀
• 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/
作業
• 用剛剛教的標籤• 寫一篇文章• 寫出自我介紹• 整理網路上的文章• 例如： http://tw.myblog.yahoo.com/jw!
Q3lkkBafERy7ixxachp8Pg--/article?mid=5084
Recommended