好孩子的網頁設計
第十二課: XHTML Base Module, Metainformation Module, Stylesheet Module and Link Module
Jedi
Jedi
2006
text/html
TITLE::好孩子的網頁設計,第十二課
[[IMG src="../image/20060830.png" width="464" height="464"]]
----
後設資訊
----
1.
----
基底網址
----
HEADER::基底網址
網頁中充滿網址
----
圖片
src="http://foo.bar/paz/toto.jpg"
----
超連結
href="http://foo.bar/paz/tutu.html"
----
網址會重複
----
src="[[EM:http://foo.bar/paz/]]toto.jpg"
href="[[EM:http://foo.bar/paz/]]tutu.html"
----
[[EM:base]] URI
[[EM:<base />]]
----
<base [[EM:href="http://foo.bar/paz/"]] />
----
放在哪裡?
----
ALIGN::LEFT
[[EM:<head>]]
……
<base href="http://foo.bar/paz/" />
……
[[EM:</head>]]
----
ALIGN::LEFT
<html>
<head>
……
<base href="[[EM:http://foo.bar/paz/]]" />
……
</head>
<body>
……
<img src="[[EM:toto.jpg"]] …… />
……
<a href="[[EM:tutu.html"]] …… >……</a>
……
</body>
</html>
----
HEADER::
2.
----
樣式規則
----
HEADER::樣式規則
(不在本期範圍)
----
[[EM:Style]] Sheet
[[EM:<style>]]
----
ALIGN::LEFT
<head>
……
<style>
適用於整頁的樣式規則
</style>
……
</head>
----
可以用的屬性
----
FOOTER::可以用的屬性
xml:lang, id, media, title, type
----
[[EM:xml:lang]], [[EM:id]], media, [[EM:title]], [[EM:type]]
請複習第十課
----
xml:lang, id, [[EM:media]], title, type
要套用的媒體類型
----
FOOTER::
行內樣式
----
FOOTER::行內樣式
可用於各種組件的屬性
----
[[EM:style="套用至特定組件的樣式"]]
----
(第八課有提過)
----
FOOTER::
詳情請待下期課程
----
HEADER::
3.
----
外部資源
----
HEADER::外部資源
External [[EM:Link]]
[[EM:<link />]]
----
ALIGN::LEFT
<head>
……
<link …… />
……
</head>
----
可以用的屬性
----
FOOTER::可以用的屬性
常用屬性, type, rel, rev, href
hreflang, media, charset
----
FOOTER::
ALIGN::LEFT
<html>
<head>
……
[[EM:<link href="http://creativecommons.org/licenses/by-nc-sa/2.5/tw/"]]
[[EM:hreflang="zh-tw" charset="UTF-8" rel="Copyright" title="使用聲明" />]]
……
</head>
<body>
……
</body>
</html>
----
ALIGN::LEFT
<html>
<head>
……
<link href="http://creativecommons.org/licenses/by-nc-sa/2.5/tw/"
hreflang="zh-tw" charset="UTF-8" rel="Copyright" title="使用聲明" />
[[EM:<link href="http://creativecommons.org.tw/"]]
[[EM:hreflang="zh-tw" charset="UTF-8" rel="Start" title="首頁" />]]
……
</head>
<body>
……
</body>
</html>
----
HEADER::
4.
----
後設資訊
----
HEADER::後設資訊
[[EM:meta]]information
[[EM:<meta />]]
----
ALIGN::LEFT
<head>
……
<meta …… />
……
</head>
----
可以用的屬性
----
FOOTER::可以用的屬性
xml:lang, id, scheme,
name, content, http-equiv
----
xml:lang, id
之前說過很多次了
----
scheme
剖析 meta 標籤用的規劃
----
name, content
後設資訊的名稱及內容
----
http-equiv
[[EM:HTTP Equiv]]alent
和 HTTP 檔頭等價
----
FOOTER::http-equiv
content-type 設定內容類別
expires 設定有效期限
refresh 設定更新週期
set-cookie 設定 cookie
----
FOOTER::
ALIGN::LEFT
<html>
<head>
……
[[EM:<meta name="author" content="Jedi" />]]
……
</head>
<body>
……
</body>
</html>
----
ALIGN::LEFT
<html>
<head>
……
<meta name="author" content="Jedi" />
[[EM:<meta name="description" content="Jedi 的自我介紹" />]]
……
</head>
<body>
……
</body>
</html>
----
ALIGN::LEFT
<html>
<head>
……
<meta name="author" content="Jedi" />
<meta name="description" content="好孩子的網頁設計,第十二課" />
[[EM:<meta name="keyword" content="Jedi, 網頁設計, XHTML, 投影片" />]]
……
</head>
<body>
……
</body>
</html>
----
ALIGN::LEFT
<html>
<head>
……
<meta name="author" content="Jedi" />
<meta name="description" content="好孩子的網頁設計,第十二課" />
<meta name="keyword" content="Jedi, 網頁設計, XHTML, 投影片" />
[[EM:<meta name="generator" content="UltraEdit v12.10a" />]]
……
</head>
<body>
……
</body>
</html>
----
ALIGN::LEFT
<html>
<head>
……
<meta name="author" content="Jedi" />
<meta name="description" content="好孩子的網頁設計,第十二課" />
<meta name="keyword" content="Jedi, 網頁設計, XHTML, 投影片" />
<meta name="generator" content="UltraEdit v12.10a" />
[[EM:<meta name="revised" content="2006/08/30" />]]
……
</head>
<body>
……
</body>
</html>
----
ALIGN::LEFT
<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="2006/08/30" />
[[EM:<meta name="……" content="……" />]]
……
</head>
<body>
……
</body>
</html>
----
ALIGN::LEFT
<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" />
<meta name="……" content="……" />
[[EM:<meta http-equiv="refresh" content="10" />]]
……
</head>
<body>
……
</body>
</html>
----
ALIGN::LEFT
<html>
<head>
……
[[EM:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />]]
[[EM:<meta http-equiv="Content-Language" content="zh-tw" />]]
[[EM:<title>foo</title>]]
……
</head>
<body>
……
</body>
</html>
----
ALIGN::LEFT
<html>
<head>
……
[[EM:<meta http-equiv="Content-Type" content="text/html; charset=big5" />]]
[[EM:<meta http-equiv="Content-Language" content="zh-tw" />]]
[[EM:<title>foo</title>]]
……
</head>
<body>
……
</body>
</html>
----
不這樣寫,
IE會異常
----
其他東西
順序無所謂
----
HEADER::
FOOTER::
作業
----
HEADER::作業
先前作業
----
加上後設資訊
----
加上外部資源
----
HEADER::
預告
----
HEADER::預告
表單