HTML入門教學2019 - 9個課程

如果你剛接觸編程,想建立網頁/APP,HTML絕對是你第一個要學習的編程語言。

我叫Jack,是一位Awwwards認可得獎,有多年的編程教學經驗的編程員。

今天,這篇「HTML入門教學2019 - 9個課程」,將會從新手角度,分開9個章節,由淺入深,教授你所有你要知道的HTML編程知識。

如果你正在想學習HTML,看這篇文章就對了!

準備好了?我們開始吧!

1. HTML 基本概念

要編寫一個網頁,原來可以分為前台(Frontend)後台(Backend)

前台(Frontend)就是網頁的外觀。例如你看到的文字,圖片,美麗的排版等等,通通都是前台(Frontend)。

而前台(Frontend)(網頁的外觀),是由3種編程語言組成,它們分別是:

  1. HTML
  2. CSS
  3. Javascript

HTML主要是負責外觀的結構
CSS負責把結構變得更美麗
Javascript負責外觀元素的控制

看到這裡,你可能不禁會想:「嘩!單是編寫網頁的外觀,便要學習3種編程語言?」

對!單是編寫網頁的外觀,便要學習3種編程語言!你不是要放棄吧?但好消息是,所有網頁的外觀,皆是由這3種語言寫成,無一例外。

現在,我們只要知道,HTML是負責外觀的結構就行了。

就像寫信一樣,寫信會有一個結構,例如上款,標題,內文,下款等等。網頁的外觀也有一個結構,而這個結構,就是HTML

要了解更多關於Frontend及Backend的概念,可參考:
網頁設計教學2019 - 9個課程

2. 起始標籤(Opening Tag) 與結束標籤(Closing Tag)

HTML是如何為網頁的外觀進行結構呢?

答案:透過使用標籤(Tag)。

標籤可分為起始標籤(Opening Tag)和結束標籤(Closing Tag),兩者之間我們會放入網頁的內容(Content)。

比方說:

<p>This is some content</p>

<p>就是起始標籤(Opening Tag)

This is some content就是內容

</p>就是結束標籤(Closing Tag) (多了/便是結束標籤)

以上的寫法代表,This is some content 屬於p標籤。而p標籤就是代表內文(Paragraph)。也就是說,This is some content 便是內文。

我們來試試吧!

首先,我們要安裝2個軟件。它們分別是:

  1. Brackets ( http://brackets.io )
  2. Chrome ( https://www.google.com/chrome/ )

Brackets是一個類似文字編輯器的軟件,但主要作用是用來寫Program。

除了Brackets外,還有很多不同的編輯器可以用作寫Program,例如:

Windows:

  • Atom
  • Notepad++
  • Visual Studio Code

Mac:

  • Atom
  • Coda
  • Visual Studio Code

首先,在你的電腦隨便一個位置,開一個新的資料夾。這個資料夾將用於存放即將要做的HTML文件。

然後,開啟剛剛下載的Brackets。按File -> Open Folder ,選擇剛剛我們新建的資料夾。

選擇好資料夾後,接Open。

在左手邊深灰色背景的地方,按右鍵 -> New File來新增一個檔案。

輸入文件名稱,隨便甚麼名稱都可以,但要記着一定要輸入副檔名(.html) ,如xxx.html

建立了一個HTML文件後,我們可以在右面白色的地方, 輸入文件的內容。請試試跟着輸入以下內容:

<p>This is some content</p>

看到右手邊有一個「閃電」的按鍵嗎?他的功能是即時預覽(Live Preview),意思是使用瀏覽器去開啟這個文件。我們輸入完內容後, 試試按一下它吧!

看見了沒有?我們用一個瀏覽器Chrome開啟了這個文件後,原本的標籤便不見了。由此可見,原來瀏覽器可以演繹HTML,並把它變成用家可明白的介面。

在這示範,Hello World! 是我們想呈現出來的內容,而我們使用p標籤去包着它,是給電腦說明它是一個段落。

如果回到我們剛剛新建的資料夾,會發現多了一個文件day1.html。其實它就是我們剛剛用Brackets建立的Hello World!文件。

現在我們試試更改入邊的內容,加上I am Jack.要留意每當你做完文件的更改後,你必須要把他儲存。

儲存文件的方法是到File -> Save。或者是按快捷鍵 Ctrl+s (Windows) 或 Command+s (Mac)。

文件儲存後,我們可以到剛剛開啟了的CHROME,按一下(Refresh) 這樣做就可以看到剛剛的改動喔!。

Refresh網頁的方法是按一下(Refresh) ,或者按快捷鍵 Ctrl+r (Windows) 或 Command+r (Mac)。

以後每當你做完改動,也記着要先儲存(Ctrl/Command + s),然後到瀏覽器刷新(Ctrl/Command + r)看看剛剛的改動。

我們試試是輸入其他的標籤吧。要注意這些標籤全部都是有起始標籤和結束標籤的。

看見了沒有?每個標籤其實在告訴電腦,他們包着的內容究竟是甚麼。

如這段文字是普通段落,我們便用p標籤去它包著。
如這段文字是本文中最重要的標題,我們便用h1標籤去把它包着。

以下是一些常用的標籤的意思:

p            段落
h1          最重要的標題
h2          第二重要的標題
h3          第三重要的標題
h4          第四重要的標題
h5          第五重要的標題
h6          第六重要的標題
a            連結
ul和li       無次序的列點
ol和li       有次序的列點
strong      粗體,而且很重要
b             粗體
i              斜體

正確地使用標籤是一個非常重要的概念。它會電腦明白網頁上的內容究竟代表著甚麼。

另外,我們也可以看見一個標籤可以包着另外一個標籤。例如

<ul> 
 <li>List 1</li> 
 <li>List 2</li> 
</ul>

每一個<li>代表一個列點。而每一組列點則會用一個<ul>包著。

要注意,當一個標籤被另外一個標籤包著,我們會通常把被包著的那個標籤Indent一下。(就是用Space把它向右一點)這個Indent,我們可以接3次Space鍵,或是按一下「Tab」鍵,都可以有同樣效果。

以上Indent的手勢,對寫HTML是非常重要的。雖然你沒有用Indent的話,程式一樣能行,但就會變得比較難讀及混亂。

最後,<strong><i>分別代表了粗體和斜體。我們也試試看吧!

雖然絕大部分的標籤,都必須有一個起始標籤和結束標籤。但凡事總有例外,<br>只需要有一個起始標籤,表示隔一行。

3. 屬性 (Attribute)

只有HTML標籤,其實是不夠的。接下來,我們想給每個HTML標籤更多的額外資料,便需要為他們加上不同的屬性。

屬性的添加方法是:

起始標籤(Opening Tag)中加入:
屬性="值"

一個常常使用屬性的Tag,就是<a>

<a>代表連結。<a>會使用屬性href, 寫法如下:

<a href="http://yahoo.com">Link</a>

在以上例子,我們在<a>加入一個名為href的屬性。而這個href的value則是一個網址http://yahoo.com

使用以上的語法後,我們的Link這個字,便可以變為連結。一按下去便會去到http://yahoo.com

同一個Tag,我們可以添加多於一個屬性。每個屬性只要用一個格號,分格便可以。

例如我們可以添加多一個叫target的屬性,如果把它的值設為_blank,當用家按這個連結時, 便會在一個新視窗開連結啟。

<a href="http://yahoo.com" target="_blank">Link</a>

包著"值"的這個引號,可以是單引號,也可以是雙引號。

另外一個常常使用屬性的Tag,就是<img>

<img>代表圖片。<img>會使用屬性src, 寫法如下:

<img src="xxxx.jpg">

src中的值便是一張圖片的連結。

什麼是圖片連結?

圖片連結就是以圖片副檔名結尾的網址,例如:

  • .jpg (最常用,因為圖片容量最小)
  • .jpeg (最常用,因為圖片容量最小)
  • .png (可以有透明底,常用於logo)
  • .gif (動畫)
  • .svg (用vector畫的動畫)

我們試試到 http://image.google.com 搜尋相片。

指著圖片按右鍵->新分頁開啟圖片 (要使用chrome才有以上的功能)

複製圖片網址。

然後把網址放到src的value中,例如:

<img src="https://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/pig-young-closeup.ngsversion.1412640764383.jpg">

在Brackets中Preview看看,圖片是不是出來了?

你也可以把圖片儲存到和你html同一個Folder。這時候,你只要在src中直接輸入圖片的檔案名字及副檔名,便可以直接指到圖片。<img src="xxxx.jpg">

如果你覺得圖片太大,可以加上width屬性,讓圖片變小。

<img src="xxxx.jpg" width="400">

width的單位是px。px是網頁設計中常用的長度單位。其長度大約可以理解為:一部13吋的Macbook的闊度大約是1400px。

4. Block Level 與 Inline Level (div, span)

接下來,另一個學習概念是Block Level 與 Inline Level。

原來,每一個html tag都可分為Block Level或Inline Level。

Block Level就是兩個tag之間,會自動格一行。p, h1, h2, h3等等的tag都屬於Block Level。

Inine Level就是兩個tag之間,會自動格一行。a, img等等的tag都屬於Block Level。

然後,我們要學習多兩個常用的tag。它們就是div和span

div和span本身都是沒有意思的。但我們會常常用到它們。它們的主要作用是做grouping,就是包著一堆字或HTML tag,讓日後我們更容易為它們加上CSS。

<div>屬於Block Level,用作group一堆HTML tag,例如

<div>
   <h1>Some content</h1>
   <h1>Some content</h1>
   <p>Some content</p>
</div>

<span>屬於Inline Level,用作group一堆字,例如

<p>This is some <span>Some content</span></p>

請大家都在Brackets上試試看!

5. 放youtube/google map (Iframe)

<iframe>是另外一個我們常用的tag。它的作用在於把其他網站的全部或部份內容,嵌入到自己的網站中。

Google Map, youtube, facebook widgets, instagram widgets等等,都會利用iframe的方法,讓你把其內容嵌入到你的網站中。

讓我們試試把youtube片放到自已的網站上吧!

先到youtube.com隨便找一段影片,按share

再按embed

然後就可以把iframe的代碼複製到你的HTML上喇!

Google Map也是一樣。我們先到https://www.google.com/maps。隨便搜尋一個地方,然後按分享。

按嵌入地圖,然後就可以把iframe的代碼複製到你的HTML上喇!

6. 放相 (src/background image)

我把「放相」獨立寫成一章來說,是因為這概念比較重要,而且很多人都不知道。

在HTML,放相是有兩種方法的。

第一種方法你已經學習了,就是使用<img>,例如:

<img src="xxxx.jpg">Link</img>

另外一種方法,就是使用CSS的Background。雖然我們還沒有學習CSS,但我們也看一看代碼是如何寫:

<tag style="background:url(xxxxxx.jpg)"></tag>

background的寫法會比較多應用在背景圖片。大家日後在修改一些HTML Template, 想改照片時, 若果找不到<img>,那麼照片應該藏在CSS的background內喇!

7. HTML 頁面結構

到此為止,我們一直在HTML檔上,直接輸入HTML。

然而,當我們真正編寫一個網頁時,我們先會寫多一點東西,名為「HTML頁面結構」。

HTML基本頁面結構給下:

<html>
   <head>
      <title>Some title</title>
   </head>
   <body>
      <h1>Some content</h1>
      <p>Some content</p>
      <p>Some content</p>
   </body>
</html>

我們會先使用<html>,包著所有東西,代表這是一個HTML檔案。

<html>下,我們會再分為<head><body>

我們之前學的所有東西,包括p, h1, img, a等等,全部都應該放在<body>內。<body>就是放在螢幕會看見的東西。

至於<head>,則會放置螢幕不會看見的東西,例如CSS,meta tag(主要用作SEO),title等等。

8. 表格(table)

如果你要顯示像excel般的一大堆數據,你便可以使用表格(table)。

我們會使用<table>。在<table>內,每一列會使用<tr>。在每一列內,每一個column會使用<td>

實際寫法如下:

<table>
   <tr>
      <td>Some Content</td>
      <td>Some Content</td>
      <td>Some Content</td>
   </tr>
   <tr>
      <td>Some Content</td>
      <td>Some Content</td>
      <td>Some Content</td>
   </tr>
</table>

9. 表單(form)

當你的網頁要提交數據到server,你便可以使用表單(form)。

今天,我們只會學習表單在HTML上的外觀。要實際提交數據,你還需要寫一些後台的東西,而那並不是今天主要討論的題目。

我們會使用<form>。在<form>內,我們會使用不同的Form Element,來表達我們的表單。

常見的Form Element包括<input>, <select><textarea>

我們先看看<input>。透過使用屬性type配上不同的value,<input>可以有很多不同的功用:

<form>
   Name: <input type="text"><br>
   Password: <input type="password"><br>
   Gender: <input type="radio" name="gender">Male
   <input type="radio" name="gender">Female<br>
   Name: <input type="checkbox"><br>I agree<br>
   Name: <input type="hidden"><br>
   <input type="submit">
</form>

select box也是常見的Form Element。在<select>中,我們會配上不同的<option>

<select>
   <option>Option 1</option>
   <option>Option 2</option>
   <option>Option 3</option>
</select>

<textarea>也是常見的Form Element

<textarea>Some text...</textarea>

實際使用時,以上的Form Element通常也會配上name或value等屬性,讓後台分辨你提交的數據。

總結

HTML其實並不難學。但要充分理解及運用,也要時間去練習。以上的9個課程,已教授了你絕大部分你要知道的HTML編程知識。大家好好學習吧!

如有任何問題,歡迎Email我!