位元詩人 [網頁設計] 教學:HTML 入門教學

Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

前言

我們在本文中介紹一下什麼是 HTML。當然,HTML 無法在短短一篇文章內介紹完,這裡僅做一些概念上的介紹。

HTML 文件的組成

基本上,HTML 文件是由標籤 (tag) 和內容交織而成的文字文件。

許多 HTML 標籤是成對的,像 <p>這是一段文字</p> (表示段落),但也有一些 HTML 標籤是單獨存在的,像 <img src="images/pic.png"> (表示嵌入圖片)。由此可知,HTML 標籤是一種將內容 (content) 和版面 (layout) 混合在一起的文件形式。我們學習 HTML 就是在熟悉這些標籤怎麼使用。

原本 HTML 呈現出來的樣式很樸素,許多網站漂亮的頁面是藉由調整 CSS 而成。現在不會有網站只用 HTML 來寫網頁,都會搭配一些 CSS 樣式表來美化網頁。

由於 HTML 本身是用來呈現靜態頁面的標籤,沒有程式邏輯的部分,會比真正的程式語言來得簡單得多。HTML 頁面的程式邏輯就是用 JavaScript 來撰寫;要注意 JavaScript 是後來才加到瀏覽器中的技術,原本設計 HTML 時沒有包含程式邏輯的部分。

以下是一個 HTML 版的 Hello World 文件:

<!DOCTYPE html>
<html>
<head>
  <title>My Awesome Site</title>
</head>
<body>
  <h1>Welcome to My Site</h1>
</body>
</html>

每份 HTML 文件都要先宣告其版本:

<!DOCTYPE html>

網頁宣告會依據 HTML 文件版本的不同而有所不同,這裡是用 HTML5 的宣告。

HTML 在長年發展中,經歷了數個版本的更迭,目前的版本來到 HTML5。網頁技術的發展是漸進的,網頁技術相關的委員會 (W3C) 會定期開會以制定出一套標準,之後各個瀏覽器供應商 (browser vendor) 才去實作,所以標準建立後到實際支援會有一段落差期。其實每個瀏覽器供應商都有派代表到 W3C,而且在會議中掌握主導權。

目前瀏覽器實際的支援度可參考 Can I Use 網站;基本的 HTML 標籤通常都能使用,而比較新的標籤就要實際查一下。

每份 HTML 文件固定的版面如下:

<html>
<head>
  <!-- Write metadata here -->
</head>
<body>
  <!-- Write document here -->
</body>
</html>

扣除宣告區後,最外圍會以一對 <html> 標籤包住整份文件。在每份 HTML 文件內,固定會有一個 <head> 區塊和一個 <body> 區塊,前者是 HTML 文件的元資料 (metadata),後者則是實際的網頁內容和版面。

HTML 文件是版面和內容交織的文件檔案,標籤的部分不會顯示在最後的頁面上,瀏覽器會將 HTML 標籤結合相關的 CSS 設定後呈現出來,而標籤所包住的文字則是實際呈現在頁面上的文字。

基礎 HTML 標籤

我們在本節中展示一些基礎的 HTML 標籤。

標頭 (Heading)

標頭用於文章標題或子標題,從 <h1><h6> 共分為六級,範例如下 (看效果):

<h1>Title</h1>
<h2>Subtitle</h2>
<h3>Subsubtitle</h3>

段落 (Paragraph)

在文章中可使用 <p> 來區分段落,範例如下 (看效果):

<p>Lorem ipsum dolor sit amet, consectetur adipiscing ...</p>
<p>Nam ut odio dolor. Praesent eu nibh imperdiet, imperdiet ex vel, semper ...</p>
<p>Maecenas in tellus lacus. Donec iaculis, lectus non viverra convallis,  ...</p>

註:本段文字為 lorem ipsum,即用來檢視排版的無意義文字。

清單 (List)

分為有序的 <ol> 和無序的 <ul> 清單,前者會有清單項目編號,後者則無。

以下是有序的清單 (看效果):

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

以下是無序的清單 (看效果):

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Citrus</li>
</ul>

連結 (Link)

<a> 用來連結其他網頁或網站,以下是實例 (看效果):

<a href="https://www.google.com.tw/" target="_blank">Google 台灣</a>

href 用來指定連結目標,target="_black" 設置在新視窗開啟頁面,這些都是 HTML 標籤的屬性 (attributes)。

影像 (Images)

<img> 用來載入圖片,以下是實例 (看效果):

<img src="https://upload.wikimedia.org/wikipedia/en/2/20/Mozilla-Firefox-4-free-Logo1.jpg" alt="mozilla firefox" width="64">

src 用來指定圖片來源,alt 用於圖片無法載入時的替代性文字,width="64" 是指將寬度縮小到 64 像素,而高度會隨之等比例縮放。

開發用網頁伺服器

有些讀者會用開啟檔案的方式來打開 HTML 文件,但有些網頁的行為要透過和網頁伺服器互動才比較好呈現。所以還是建議讀者在本地端建置一個開發用網頁伺服器。

在本地端設置一個真正的網頁伺服器,像 Apache 或 Nginx 等,設置上比較麻煩;比較簡單的方式是使用開發用的網頁伺服器,這類伺服器不需設定,可立即使用;但這類伺服器效能不彰,不會用在實際上線的網站上。

如果讀者有按照我們前文的建議安裝 Node.js 的話,可以安裝 http-server 套件:

$ npm install -g http-server

使用方式如下:

$ cd path/to/project
$ http-server

這時候,http-server 會在工作目錄所在的位置開一個臨時的網頁伺服器,可用來模擬上網時拜訪網頁的情境。

如果使用 PHP 寫網頁程式,5.4 版之後的 PHP 有內建的網頁伺服器:

$ cd path/to/project
$ php -S localhost:8080

如果想用其他工具的讀者,可參考國外網友整理了一份快速建立開發用網頁伺服器的工具清單

檢查 HTML 代碼

雖然 HTML 只能算是一種靜態代碼而非程式碼,也有一些軟體可以檢查 HTML 代碼是否有錯,像是 HTML 標籤是否成對或是是否寫錯標籤等。HTML Tidy 是一個 HTML 頁面重排 (formatting) 的工具;不過,也可以做為檢查 HTML 代碼的工具。

搭配 -errors 就變成 HTML 的靜態代碼檢查器:

$ tidy -errors path/to/page.html

如果有使用模板語言的話,這個工具就不是那麼方便。我們採取的策略是用 HTTPie 或其他 HTTP client 將頁面抓下來後重導給 tidy

$ http get http://localhost:8080/ | tidy -errors

這個指令的想法是檢查經模板引擎轉換後的頁面 (web pages),再回推當初寫的模板是否有錯。當然這樣比不上直接檢查模板,不過,模板代碼不容易直接檢查,這裡的做法也是可以接受的。

HTML 縮小器

理論上,HTML 頁面可藉著移除多餘空白、去除註解等手法將頁面瘦身,更有利於網路傳輸。不過,HTML 縮小器並不普遍;這是因為我們現在很少撰寫純靜態網頁,多由網頁程式動態生成頁面,較難直接用第三方工具對網頁進行後處理 (post processing)。

如果自己使用的網頁框架可加入這類工具,不妨在網頁中使用這些工具替網頁瘦身,像是 Rails 可在網頁的 middleware 中指定 HtmlCompressor::Rack 來替網頁瘦身 (參考這裡)。如果讀者使用其他的網頁框架,則要查閱一下該框架的手冊,查詢如何在輸出頁面時縮小 HTML 代碼。

繼續深入

一開始只有 HTML 時相對枯燥無聊,在加入 CSS 和 JavaScript 後才能漸漸建立一些比較有趣的網頁。網頁的書通常會把 HTML 和 CSS 寫在一起,讀者可自行到書店翻閱,版面看起來順眼的即可。

有些網頁的書還會將 JavaScript 寫在一起,但筆者建議 JavaScript 部分的教材分開購買,一本書講太多技術往往深度不足。

除了實體書籍外,也可以透過一些線上教程來學習,像是 w3schoolsMDN 等。

關於作者

身為資訊領域碩士,位元詩人 (ByteBard) 認為開發應用程式的目的是為社會帶來價值。如果在這個過程中該軟體能成為永續經營的項目,那就是開發者和使用者雙贏的局面。

位元詩人喜歡用開源技術來解決各式各樣的問題,但必要時對專有技術也不排斥。閒暇之餘,位元詩人將所學寫成文章,放在這個網站上和大家分享。