網頁程式設計教學:HTML 入門

PUBLISHED ON NOV 22, 2018 — WEB

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

    HTML5

    HTML 文件的組成

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

    原本 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) 會開會以制定出一套標準,之後各個瀏覽器供應商才去逐漸實作,所以標準建立後到實際支援會有一段落差期,目前實際的支援情形可參考 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>
    

    <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 時相對枯燥無聊,在加入 CSS 和 JavaScript 後才能漸漸建立一些比較有趣的網頁。網頁的書通常 HTML 和 CSS 會寫在一起,讀者可自行到書店翻閱,版面看起來順眼的即可;有些網頁的書會將 JavaScript 寫在一起,筆者建議 JavaScript 部分的教材分開購買。也可以透過一些線上教程來學習,像是 w3schoolsMDN 等。

    開發用網頁伺服器

    有些讀者會用開啟檔案的方式來打開 HTML 文件,但有些網頁的行為要透過和網頁伺服器互動才比較好呈現。在本地端設置一個真正的網頁伺服器,像 Apache 或 Nginx 等,設置上比較麻煩;比較簡單的方式是使用開發用的網頁伺服器,這類伺服器不需設定,可立即使用;但這類伺服器效能不彰,不會用在實際上線的網站上。

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

    $ npm install -g http-server
    

    使用方式如下:

    $ cd path/to/project
    $ http-server
    

    這時候,http-server 會在工作目錄所在的位置開一個臨時的網頁伺服器,可用來模擬上網時拜訪網頁的情境。如果想用其他工具的讀者,可參考國外網友整理了一份快速建立開發用網頁伺服器的工具清單

    檢查 HTML 代碼

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

    搭配 -errors 即可變成 HTML 的 linter:

    $ 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 來替網頁瘦身 (參考這裡)。

    TAGS: WEB