好孩子的網頁設計
第四課: XHTML Text Module (2/2)
Jedi
Jedi
2006
text/html
TITLE::好孩子的網頁設計,第四課
[[IMG src="../image/20060607.png" width="464" height="464"]]
----
語氣與內容標示
----
(2/2)
----
0.
----
縮排
----
HEADER::縮排
FOOTER::上週範例
ALIGN::LEFT
<html><head><title>網頁的標題</title></head>
<body><div><h1>大標題</h1><div><h2>標題甲</h2>
<p>第一段……</p><p>第二段,這裡<br />強迫換行
……</p></div><div><h2>標題乙</h2><p>第一段……
</p><p>第二段……</p></div><span>無關的幾個字
</span></div></body></html>
----
ALIGN::LEFT
<html>
<head>
<title>網頁的標題</title>
</head>
<body>
<div>
<h1>大標題</h1>
<div>
<h2>標題甲</h2>
<p>第一段……</p>
<p>第二段,這裡<br />強迫換行……</p>
</div>
<div>
<h2>標題乙</h2>
<p>第一段……</p>
<p>第二段……</p>
</div>
<span>無關的幾個字</span>
</div>
</body>
</html>
----
ALIGN::LEFT
<html>
[[EM:|]] <head>
[[EM:|]] [[EM:|]] <title>網頁的標題</title>
[[EM:|]] </head>
[[EM:|]] <body>
[[EM:|]] [[EM:|]] <div>
[[EM:|]] [[EM:|]] [[EM:|]] <h1>大標題</h1>
[[EM:|]] [[EM:|]] [[EM:|]] <div>
[[EM:|]] [[EM:|]] [[EM:|]] [[EM:|]] <h2>標題甲</h2>
[[EM:|]] [[EM:|]] [[EM:|]] [[EM:|]] <p>第一段……</p>
[[EM:|]] [[EM:|]] [[EM:|]] [[EM:|]] <p>第二段,這裡<br />強迫換行……</p>
[[EM:|]] [[EM:|]] [[EM:|]] </div>
[[EM:|]] [[EM:|]] [[EM:|]] <div>
[[EM:|]] [[EM:|]] [[EM:|]] [[EM:|]] <h2>標題乙</h2>
[[EM:|]] [[EM:|]] [[EM:|]] [[EM:|]] <p>第一段……</p>
[[EM:|]] [[EM:|]] [[EM:|]] [[EM:|]] <p>第二段……</p>
[[EM:|]] [[EM:|]] [[EM:|]] </div>
[[EM:|]] [[EM:|]] [[EM:|]] <span>無關的幾個字</span>
[[EM:|]] [[EM:|]] </div>
[[EM:|]] </body>
</html>
----
FOOTER::
效果相當
----
清楚明瞭
----
有頭有尾
----
不多不少
----
HEADER::
1.
----
語氣
----
強調文字 (放慢速度)
([[EM:em]]phasized text)
----
HEADER::強調文字
[[EM:<em>]]
----
<em>要強調的字詞</em>
----
授權標章為授權法律條款主要內容的<em>摘要</em>
----
斜體字
(英文慣例)
----
HEADER::
猛烈文字 (大聲)
([[EM:strong]] text)
----
HEADER::猛烈文字
[[EM:<strong>]]
----
<strong>要猛烈表達的字句</strong>
----
ALIGN::LEFT
<strong>非商業性</strong>.
您不得為商業目的而使用本著作。
----
粗體字
(英文慣例)
----
HEADER::
2.
----
內容標示
----
縮寫 (簡稱)
([[EM:abbr]]eviation)
----
HEADER::縮寫 (簡稱)
[[EM:<abbr>]]
----
<abbr>縮寫字</abbr>
----
[[EM:Fri]]day
----
<abbr>Fri.</abbr>
----
HEADER::
頭文字
([[EM:acronym]])
----
HEADER::頭文字
[[EM:<acronym>]]
----
<acronym>頭文字</acronym>
----
[[EM:C]]reative [[EM:C]]ommons
----
<acronym>CC</acronym>
----
HEADER::
引述
([[EM:q]]uotation)
----
HEADER::引述
[[EM:<q>]]
----
<q>引述的話</q>
----
老闆表示:<q>我覺得兩個圖都很好看啊</q>
----
HEADER::
一整段引文
([[EM:block]] for [[EM:quote]])
----
HEADER::一整段引文
[[EM:<blockquote>]]
----
<blockquote><p>引文段落</p></blockquote>
----
ALIGN::LEFT
<p>幾千年前,詩人李白寫道:</p>
<blockquote>
<p>白日依山盡<br />
黃河入海流<br />
欲窮千里目<br />
更上一層樓</p>
</blockquote>
----
HEADER::
引用出處
([[EM:cite]])
----
HEADER::引用出處
[[EM:<cite>]]
----
<cite>出處</cite>
----
<cite>智慧財產權月刊,94 年 4 月</cite>
----
HEADER::
樣品
([[EM:samp]]le)
----
HEADER::樣品
[[EM:<samp>]]
----
<samp>出現在他處的東西</samp>
----
您會看到一個<samp>中研院「創用 CC」電子報</samp>的畫面
----
HEADER::
變數
([[EM:var]]iable)
----
HEADER::變數
[[EM:<var>]]
----
<var>變數名稱</var>
----
ALIGN::LEFT
<var>YEAR</var> (CC)(BY) <var>AUTHOR</var>.
Some Rights Reserved.
----
HEADER::
程式碼
([[EM:code]])
----
HEADER::程式碼
[[EM:<code>]]
----
<code>一段程式碼</code>
----
ALIGN::LEFT
<code>
print "Hello World!\n";
</code>
----
HEADER::
鍵盤按鍵
([[EM:k]]ey[[EM:b]]oar[[EM:d]] press)
----
HEADER::鍵盤按鍵
[[EM:<kbd>]]
----
<kbd>按鍵</kbd>
----
請按下 <kbd>Enter</kbd>
----
HEADER::
地址
([[EM:address]])
----
HEADER::地址
[[EM:<address>]]
----
<address>地址資訊</address>
----
地址:<address>台北市南港區研究院路二段 128 號</address>
----
斜體字
(英文慣例)
----
HEADER::
定義
([[EM:d]]e[[EM:f]]i[[EM:n]]ition term)
----
HEADER::定義
[[EM:<dfn>]]
----
<dfn>定義的內容</dfn>
----
授權標章:<dfn>法律條文的摘要版本</dfn>
----
HEADER::
預先排版文字
([[EM:pre]]formatted text)
----
HEADER::預先排版文字
[[EM:<pre>]]
----
<pre>預先排版好的內容,空格和換列都會被保留</pre>
----
ALIGN::LEFT
<pre>白日依山盡
黃河入海流
欲窮千里目
更上一層樓</pre>
----
HEADER::
作業
----
HEADER::作業
上週作業
----
再添細節
----
本次範圍
----
五種以上
----
HEADER::
預告
----
HEADER::預告
編輯線索
----
呈現效果