好孩子的網頁設計，第十二課
Jedi
本次課程投影片：
http://Jedi.org/p4/slide/20060830/#eva
一定要用 Firefox 纔能看，用 IE 會出錯。如果妳沒有 Firefox 或不知道甚麼是
Firefox ，沒關係，底下是本週課程提要：
0. 本次課程所用到的標籤
這次介紹的四個標籤，一律都是放在 <head> …… </head> 內。
<base> 基底網址，定義網頁中各種 URI （例如 <img /> 中的
src 屬性、 longdesc 屬性，以及 <a> 中的 href 屬
性等）的基底部分
<style> 套用於網頁的樣式規則
<link> 網頁的外部相關資源、連結
<meta> 往頁的後設資訊
1. <base> 標籤會用到的屬性
1.0. id （請複習第八課的內容）
1.1. href 基底網址的 URI ：
href="http://foo.bar/paz/"
如此，網頁中任何位於 http://foo.bar/paz/ 的網址，都可以省略掉這
一部份
例如本來是：
<html>
<head>
……
</head>
<body>
……
<img src="http://foo.bar/paz/toto.jpg" …… />
……
<a href="http://foo.bar/paz/tutu.html" …… >……</a>
……
</body>
</html>
用了 <base> 後可以改寫成：
<html>
<head>
……
<base href="http://foo.bar/paz/" />
……
</head>
<body>
……
<img src="toto.jpg" …… />
……
<a href="tutu.html" …… >……</a>
……
</body>
</html>
效果是一樣的。但是後者顯然少打很多字。
2. <style> 標籤會用到的屬性
2.1. xml:lang, id, title, type （請複習第十課的內容）
2.2. media 要套用的媒體類型
關於 <style> 標籤，以及樣式表的詳情，請期待下一期的課程。
3. <link> 標籤會用到的屬性
3.0. 常用屬性（請複習第八課的內容）
3.1. type, rel, rev, href, hreflang, charset （請複習第十課的內容）
實際的範例如：
<html>
<head>
……
<link href="http://creativecommons.org/licenses/by-nc-sa/2.5/tw/"
hreflang="zh-tw" charset="UTF-8" rel="Copyright" title="使用聲明" />
<link href="http://creativecommons.org.tw/"
hreflang="zh-tw" charset="UTF-8" rel="Start" title="首頁" />
……
</head>
<body>
……
</body>
</html>
基本上可以有任意數量的 <link> ，就一直加就是了。各位不妨參考一下
第十課的時候，我們介紹過的各種 rel ，如果可以的話不妨把所有可以
補充進去的關連網頁都用 <link> 加進去。
3.2. media 跟 <style> 的 media 屬性一樣，用來指定對應的媒體類型，通
常也就是用來指定替代樣式表的時候使用，例如：
<link rel="Stylesheet" media="screen" href="http://jedi.org/blog/styles-site.css" type="text/css" />
<link rel="Stylesheet" media="print" href="http://jedi.org/blog/styles-site-print.css" type="text/css" />
在上述這個實際的例子中， http://jedi.org/blog/styles-site.css 祇
會用於螢幕顯示，當使用者要列印網頁的時候，則會去使用 http://jedi.org/blog/styles-site-print.css
關於這部分的細節，當我們下一期介紹到樣式表的時候還會再說明更多。
4. <meta> 標籤會用到的屬性
4.1. xml:lang, id （請複習第十課的內容）
4.2. scheme 剖析 meta 標籤用的規劃
4.3. name, content 後設資訊的名稱及內容，例如：
<html>
<head>
……
<meta name="author" content="Jedi" />
<meta name="description" content="好孩子的網頁設計，第十二課" />
<meta name="keyword" content="Jedi, 網頁設計, XHTML, 投影片" />
<meta name="generator" content="UltraEdit v12.10a" />
<meta name="revised" content="Jedi, 2006/08/30" />
……
</head>
<body>
……
</body>
</html>
上述這個例子中，我們分別定義了 author (作者), description (內容
描述), keyword (關鍵字), generator (撰寫網頁使用的程式), revised
(更新資訊) 這五項後設資訊。理論上 <meta> 也可以有無限多個，就一
直加下去就是了……
4.4. http-equiv 和 HTTP 檔頭有相同效果的屬性，也需搭配 content
屬性使用。常見的 http-equiv 有：
content-type 設定內容類別
content-language 設定內容語言
expires 設定有效期限
refresh 設定更新週期
set-cookie 設定 cookie
實際使用的範例像這樣：
<html>
<head>
……
<meta http-equiv="refresh" content="10" />
……
</head>
<body>
……
</body>
</html>
在上述這個範例中，這個網頁每 10 秒鐘就會自動重新載入更新頁面一次。
另外有個很重要的地方要注意：微軟的 Internet Explorer (IE) 一直有
個嚴重的瑕疵，就是當網頁的標題（及內容）使用了 UTF-8 編碼，但是
在 <title> 「的前面」卻沒有使用 <meta> 指明網頁編碼，且伺服器也
沒有送出網頁編碼的 HTTP 檔頭，整個網頁就會變成一片空白，甚麼都顯
示不出來。因此使用 UTF-8 編碼來編輯網頁的時候，務必要這樣：
<html>
<head>
……
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-tw" />
<title>foo</title>
……
</head>
<body>
……
</body>
</html>
亦即在 <title>foo</title> 之前，就要先有
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
除此之外，其他東西的順序倒無所謂。其他的 <meta> 、 <link> 、
<base> 要怎麼放，或者要放在 <title> 的前或後都可以。
5. 本週作業：
繼續修改上次作業，至少加入兩筆後設資訊，如果可以的話也試著加入外
部資源連結。
完成後，這個檔案請在 09/05 前寄給我。
6. 版權宣告：
本講義採 Creative Commons "Attribution NonCommercial Share-Alike 2.5 Taiwan"
授權條款釋出。著作人為 Jedi http://Jedi.org/blog/
Best,
/Jedi/