只有文字的人生是黑白的：HTML

2017鐵人賽 html

huli

2016-12-14 23:36:09

4947 瀏覽

只有文字的人生是黑白的：HTML

經過前三堂的無聊課程，我們從這一堂開始終於要正式開始把手弄髒、自己跳下去做東西了。以網頁課程來說，我覺得從前端開始教起是最好的選項，因為前端會讓你可以馬上看到，至少會有一些些的成就感（比起叫你算 BMI 輸出結果或是九九乘法表好多了）。

在講新的簡寫的專有名詞的時候，我習慣會讓大家知道它的全名，因為我覺得會讓你更了解這是什麼東西。但基本上你只要聽過就好，也不用背起來，就像你知道 MRT 是捷運，但可能不知道它的全名是什麼一樣。

HTML 是 HyperText Markup Language，中文翻譯叫做「超·文本標記語言」，超跟文本中間其實沒有那個點號，但是加上去之後中二值破表，所以我就幫它加上去了。

不過就算你看了他的全名，你也一定不知道他叫什麼東西。其實上面的重點只有「標記語言」四個字。簡單來說呢，HTML 不是程式語言，算是一種...表示的方法吧。就是特定語法寫成的東西，然後瀏覽器看得懂。注意，重點是：瀏覽器看得懂。

舉個例子好了，假設今天你跟你隔壁同學小明想要在上課的時候來下五子棋，但那是一個沒有智慧型手機的年代，所以你們只能用最古老的方式：傳紙條。可是呢，如果在紙條上面畫上一整個棋盤，被老師發現的話不就完蛋了嗎？全班都知道你們在上課時間偷下五子棋了。

於是，聰明的你就想到一招：「棋盤我們可以自己偷偷畫在課本上啊，我只要告訴對方我下哪個位置就好了！這樣就算紙條被發現，老師也只會看到一堆數字，我就說我們在算數學就好了，真是萬無一失的計畫！」

因此，你就跟小明約定好，紙條上面就寫說你下在哪個點就好了。在下了五手棋之後，紙條應該會長這樣

(1, 3)
(2, 4)
(3, 3)
(5, 2)
(4, 3)

如果有同學不小心看到了，也只會覺得這是三小，看不懂。可是在你眼中，這就是棋盤啊！（或許你前面的大食客同學會覺得這是綠豆糕，但我們要有雅量，要尊重他），雖然其他人都看不懂這是什麼，但是在你看到這些數字的時候，你的腦中就會浮現出棋盤的畫面。

沒錯，這就是 HTML 的真諦。當你用文字編輯器把 HTML 的檔案打開來，你只會看到一堆文字，但如果你用瀏覽器打開來，居然就可以看到畫面了！因為 HTML 就是瀏覽器才讀得懂的格式，所以它知道怎麼樣去顯示。

所以囉，假如你想要讓瀏覽器照著你的想法去顯示網頁，你就只要去學習這一套密語，也就是 HTML，就可以了。

讓我們再接續上面的例子，當附近同學也都覺得這個方法不錯的時候，突然有個同學發問了：「可是，前面的數字代表 x 還是 y 啊，哪邊是(0, 0)？」。
當只有一小群人在用這個方式傳紙條的時候，你可以一一解釋，可是假如今天全台灣的國中生都用這個方法在玩，那可能就會出現很多種變化不同的版本了。或許南部跟北部還會有不同的下法，就像閃電逼逼跟閃電布丁一樣。

於是聰明的你決定把這個格式改一改：

<top>1</top> <left>3</left>
<top>2</top> <left>4</left>
<top>3</top> <left>3</left>
<top>5</top> <left>2</left>
<top>4</top> <left>3</left>

這樣不就清楚多了嗎！一眼就看得出來第一行代表「上面數來第一格，左邊數來第三格」，而且這個格式還可以擴充呢！你想玩撲克牌也可以，都是用同一種格式：

<number>12</number> <color>heart</color>
<number>2</number> <color>cube</color>

這套格式實在是太好用了，而且第一個想到的人是一位天才，所以，他在十幾年以後，就以這個他在國中時期跟同學玩五子棋的格式當作範本，開發出了 HTML，所以你會發現 HTML 長得跟上面的格式很像。這就是 HTML 的由來（不要相信我，我在虎爛）

我們可以來看看一些 HTML 的元素：

<h1>我是標題，heading</h1>
<h2>我是比較小的標題</h2>
<p>我是一般段落，paragraph</p>
<a href="http://huli.logdown.com">點我點我</a>
<ul>
  <li>清單1</li>
  <li>清單2</li>
  <li>清單3</li>
</ul>

你可以把上面的文字複製貼上，然後另存新檔成「index.html」之後用瀏覽器打開，就可以看到效果。或者是用一些線上服務：codepen、jsfiddle，都可以直接在線上看到成果。至於怎麼使用我就不講了，你自己摸索個十分鐘應該可以摸索的出來。再次強調，這系列課程一半要靠我 carry，一半靠你自己。

codepen 長這樣：

jsfiddle 長這樣：

如果你懂最早我舉的那個下五子棋的例子，那我相信你現在實際看到 HTML，大概也可以猜出來是怎樣。首先我要強調一點，因為方便的緣故，所以很多標籤的名字都被簡化。例如說 h1 代表 heading1 的意思，就是標題，然後因為標題都有分大小嘛，可能有最大的、第二大的...，所以 1 就代表最大的意思，總共有 h1~h6，都有不同的大小。

p 就是 paragraph，段落。a的話就是你常聽到的「超連結」，可以連到其他網站去，你看標籤後面跟的那個 href 就是這個標籤的一些屬性，你可以附加一些額外資訊上去。至於 a 為什麼要叫做 a 我就不知道了，我們姑且就猜說因為很常用到又懶得打字，只好取作 a 吧。

ul則是unordered list，相對的還有ol，ordered list，一個是沒有順序的一個有順序，有順序的話就會在前面出現 1, 2, 3 這種序號。在上面舉的ul的例子，還可以看到 HTML 的標籤是有階層的概念的，你看那幾個li就被包在<ul>跟</ul>之間。至於為什麼有階層，我覺得是一件很顯而易見的事，你要我講解我還真的不知道怎麼講解...只好隨便瞎扯個理由：這樣排版起來比較漂亮 ^^。

HTML Basic Examples，這邊有介紹到很多基本的 html 標籤，強烈建議你可以去這邊玩玩看，至少把基本的標籤都大概記一下。

寫到這邊，發現我差點忘記講 HTML 的架構。正常來說，一般的 HTML 檔案大概會長這樣

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1>Hello</h1>
</body>
</html>

就像人有頭有身體一樣，HTMl 也有 head 跟 body，head 是來放一些額外的資訊，body 則是主要的架構，你寫的 HTML 全部都會放在這。至於最外層則是會用html這個標籤包起來，最上方的<!DOCTYPE html>則是在跟瀏覽器說：我是符合標準的 HTML 文件喔！

我這邊大概就只介紹到這樣，師父領進門，修行在個人。其他的就靠你自己了。你隨便打個「html 教學」或是「html 入門」的關鍵字就會有一堆資料了。我們這系列課程會有一個 blog 系統作為目標來邁進，因此之後學到的東西也會立刻套用到現在完成的進度上面。

下面是一個超級陽春的部落格系統的 HTML 範例，當你看得懂下面在做什麼的時候，你就可以繼續前往下一個單元了。
（最後再提醒一點，你看下面的文章長的多漂亮，都是因為有縮排的關係。縮排的好處就是可以從縮排就看出 HTML 的架構，請大家務必要縮排，拜託拜託。不過其實不縮排也什麼啦，頂多你寫出來的 code 會讓下一個接手的同事很想死而已。）

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1>This is my blog</h1>
  <div>
    <div>
      <h2>文章1</h2>
      <p>大家好</p>
    </div>
    <div>
      <h2>文章2</h2>
      <p>我是文章2</p>
    </div>
  </div>
</body>
</html>