3

HTML 教學(一)- 基礎

HTML是構成網頁介面的基本元素。瀏覽器會懂得把一堆HTML源碼變成漂亮的網頁介面。今天我們將會學習一些基本的HTML編程。如果你想學習製作網站,一些基本的HTML是一定要了解的。

在這篇HTML教學,我們會學習到:

- 學習HTML 標籤,及明白使用正確標籤的重要性
- 利用不同標籤,使用進階的文字編輯軟件,建立簡單網頁

要製作一個HTML檔案,你只需要一個基本的文字編輯器,例如NOTEPAD,然後把文件的副檔名定為.html 或是 .htm便可以。

當然,身為一個網頁設計師,我們會用一些比較厲害文字編輯器軟件,但我想你知道,即使最基本的一個文字編輯器如NOTEPAD,我們也可以用它來製作HTML。

以下是一些比較常用的文字編輯器:

Coda (Mac)
Notepad++ (Windows)
Sublime (Windows & Mac)
Brackets (Windows & Mac)

標籤(Tag)

今天我們只會學習一個語法 - 標籤(Tag)。

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

起始標籤的寫法: <標籤名>

結束標籤的寫法: </標籤名>

整句的寫法: <標籤名>內容</標籤名>

標籤的作用在於,讓電腦知道該內容是甚麼來的,例如它究竟是一組段落?還是一個標題?或是一個連結?

以下是一些常用的標籤:

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

以上的標籤全都需要包含起始標籤和結束標籤,例如:

<p>This is a paragraph.</p>

實戰 - 基本HTML編程

我們將會利用一個免費的文字編輯器 Brackets。首先,在你的電腦隨便一個位置,開一個新的資料夾。

2
這個資料夾將用於存放即將要做的HTML文件。

1
然後,到 http://brackets.io/ 下載並安裝brackets。如果你的電腦沒有Chrome,也請先下載: https://www.google.com/chrome/browser/desktop/index.html

3
開啟Brackets, File -> Open Folder 選擇剛剛我們新建的資料夾。

4
選擇好資料夾後,接Open

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

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

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

<p>This is a paragraph</p>

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

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

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

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

10
現在我們試試更改入邊的內容,加上I am Jack.要留意每當你做完文件的更改後,你必須要把他儲存。方法是到File -> Save。或者是按快捷鍵 Ctrl+s (Windows) 或 Command+s (Mac)。

11
文件儲存後,我們可以到剛剛開啟了的CHROME,按一下(Refresh) refresh或者按快捷鍵 Ctrl+r (Windows) 或 Command+r (Mac)。這樣做就可以看到剛剛的改動喔!

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

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

13
看見了沒有?每個標籤其實在告訴電腦,他們包着的內容究竟是甚麼。而它們在被瀏覽器演繹後的樣子也有點不同,例如<h1>的字型會比<p>大。但要留意這並不是重點,因為如何把這些內容變得更漂亮,例如字體大細,我們可以由CSS去更改。我們現在的重點是,把內容用不同的標籤去定位。例如這段文字是普通段落,我們便用p標籤去它包著。這段文字是本文中最重要的標題,我們便用h1標籤去把它包着。

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

另外,我們也可以看見一個標籤可以包着另外一個標籤。例如<ul>便包着了<li>,表示了一個無排序的一項一項列點。

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

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

17

下回繼續!
HTML 教學(二) – 屬性 (Attribute)