HTML

HyperText Markup Language (HTML)

2019/07/06 (增加連結 & PPT)
2023/08/28 (增加內嵌以顯示HTML的結果)

基本內容

一般而言，一個空的網頁至少會有以下的內容:

<!DOCTYPE html>

<html>

<body>

</body>

</html>

html的語法是以標籤(tag)為基礎，標籤是夾在「<」及「>」中間，標籤又分為Start Tag及End Tag，加了「/」的就是End Tag。第一行是定義這是個文件的類型(document type)是html，在<html>與</html>中間的內容就都是html。在<html>與</html>中間會有<body></body>，在<body></body>中間的內容是可以看得到的內容。

下面的範例，在<body></body>中間有<h1></h1>及<p></p>，h代表的是heading(標題)，p代表的是paragraph(段落)。

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

標題 (heading)

標題從h1到h6，h1是最主要的標題(字最大)，h6是最不重要的標題(字最小)。大家可以試著使用一下h2，就可以看到不同的效果。

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<h2>My Second Heading</h2>

<p>My first paragraph.</p>

</body>

</html>

段落 (paragraph)與換行

在一個網頁裡，文字即使分行也不會自動成一個段落，必須把文字夾在<p></p>中間，才會讓文字成一個段落。在HTML裡，另外有一個標籤<br>，br指的是line break就是換行的意思，效果與<p></p>是不太一樣。

<!DOCTYPE html>

<html>

<body>

<p>This is<br>a paragraph<br>with line breaks</p>

<p>This is<br>another paragraph<br>with line breaks</p>

</body>

</html>

清單

就像使用Word，在HTML裡也可以有清單(List)，列表分為有序清單(Ordered List)及無序清單(Unordered List)，有序清單(Ordered List)格的內容夾在<ol></ol>中間，無序清單(Unordered List)的內容夾在<ul></ul>中間，每個清單內容(List)則夾在<li></li>中間。請記得，HTML中的縮排只是讓自己看得懂，與實際的縮排無關。

經歷

<ol>

<li>輔仁大學資訊管理學系助理教授</li>

<li>輔仁大學學務處學生學習中心主任</li>

<li>輔仁大學資訊中心校務資訊一組組長</li>

</ol>

學歷

<ul>

<li>輔仁大學資訊管理學系學士</li>

<li>Master of Science, University of Maryland</li>

<li>Doctor of Business Administration, Indiana University</li>

</ul>

清單中是可以有清單的，如下例:

<ol>

<ul>

<li>輔仁大學資訊管理學系助理教授</li>

<li>輔仁大學學務處學生學習中心主任</li>

<li>輔仁大學資訊中心校務資訊一組組長</li>

</ul>

<ul>

<li>輔仁大學資訊管理學系學士</li>

<li>Master of Science, University of Maryland</li>

<li>Doctor of Business Administration, Indiana University</li>

</ul>

</ol>

中文字

如果內容包括如果內容包括中文字，要在<head></head>中加上文字集的設定，有時候瀏覽器會誤判，導致中文字會變成亂碼。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ol>

<ul>

<li>輔仁大學資訊管理學系助理教授</li>

<li>輔仁大學學務處學生學習中心主任</li>

<li>輔仁大學資訊中心校務資訊一組組長</li>

</ul>

<ul>

<li>輔仁大學資訊管理學系學士</li>

<li>Master of Science, University of Maryland</li>

<li>Doctor of Business Administration, Indiana University</li>

</ul>

</ol>

</body>

</html>

連結

在HTML裡的核心就是Hypertext(超本文)，Hypertext就是附有Hyperlink(超連結)的文字，Hypertext的概念讓網頁與網頁之間的關連變得非常的彈性。連結是以Anchor <a></a>為標籤，在Start Tag中以href (Hyperlink reference)來標示連結，在<a></a>中則是Hypertext的內容。

圖片

除了Hypertext之外，可以容易的放置圖片也是網頁的重要特性。圖片是以Image <img>為標籤，img只需要有Start Tag，在Start Tag中以src來標示所使用的圖片名稱，以alt來設定當圖片無法呈現時，所應該展示的文字內容。這個內容也可以讓視障者所使用的螢幕閱讀程式讀這些文字內容。

表格

就像使用Word，在HTML裡也可以有表格，表格的內容夾在<table></table>中間，在表格中每個列(row)的內容夾在<tr></tr>中間，表頭(heading)的內容夾在<th></th>中間，資料內容(data)則夾在<td></td>中間。

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

</table>

基本格式

在html裡，可以針對部分內容加一些基本的格式，如<b> (Bold text)、<i> ( Italic text) (詳參:HTML text format)。如以下範例:

<!DOCTYPE html>

<html>

<body>

<p>This text is normal.</p>

<p>This text is <i>italic</i>.</p>

</body>

</html>

保留字元及特殊符號

在html裡，如果要顯示一些保留字元(如:「<」、「>」)是必需要特殊處理的(詳參: https://www.w3schools.com/html/html_entities.asp、https://www.w3schools.com/html/html_symbols.asp)。其中<pre></pre>是將內文的換行及空白都保留，<code></code>是將這一段內容視為程式碼。另外，「<」(less than)就是「<」，「>」(less than)就是「>」。

<pre>

<code>

<!DOCTYPE html>

<html>

<body>

</body>

</html>

</code>

</pre>

工具

一般的純文字編輯器(如:記事本)都可以使用，但是，不要使用Word，雖然Word的內容可以轉存為網頁，但不建議使用。一般都會使用 Dreamweaver或Sublime等工具，因為這些工具可以協助我們寫HTML、CSS，也可以幫忙檢查錯誤。比如說，使用Dreamweaver產生一個新的html檔案，Dreamweaver會給一個簡單的空網頁，如:

<!doctype html>

<html>

<head>

</head>

<body>

</body>

</html>

因為，Sublime是免費的，所以，很多網頁設計師也很喜歡使用Sublime (詳參: 《Sublime Text外掛》Emmet&HTML Boilerplate二隻外掛，讓你快速產生HTML5網頁範本 )。

也可以使用Adobe(dreamweaver的公司)所推出的Bracket (詳參: BRACKETS 入門、 Brackets：Adobe 推免費、開放原始碼網頁編輯器（Windows、Mac、Linux） & Brackets網頁HTML、CSS及JavaScript碼編輯器)。

參考資料

Brackets.ppt