iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 4
3
Modern Web

Half-Stack Developer 養成計畫系列 第 4

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

只有文字的人生是黑白的: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」之後用瀏覽器打開,就可以看到效果。或者是用一些線上服務:codepenjsfiddle,都可以直接在線上看到成果。至於怎麼使用我就不講了,你自己摸索個十分鐘應該可以摸索的出來。再次強調,這系列課程一半要靠我 carry,一半靠你自己。

codepen 長這樣:
http://ithelp.ithome.com.tw/upload/images/20161211/20091346RMC00rzav9.png

jsfiddle 長這樣:
http://ithelp.ithome.com.tw/upload/images/20161211/20091346ifPeOlFObP.png

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

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

ul則是unordered list,相對的還有olordered 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>

上一篇
皇輿全覽圖:前後端架構總覽
下一篇
為自己的人生鮮艷上色:CSS
系列文
Half-Stack Developer 養成計畫30

1 則留言

3
tsuyoshi
iT邦新手 5 級 ‧ 2017-03-07 14:34:26

HTML 的由來維基百科有很詳盡的說明:
https://zh.wikipedia.org/wiki/HTML#.E5.8E.86.E5.8F.B2

<a> 的名稱由來 MDN 也有說明:
HTML 的超連結元素(<a>,意為 Anchor)用來定義超連結或連結。
https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/a

我要留言

立即登入留言