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           斜體

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


This is a paragraph.

 


實戰 - 基本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文件後,我們可以在右面白色的地方, 輸入文件的內容了。請試試跟着輸入以下內容:


This is a paragraph

 


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

看見了沒有?我們用一個瀏覽器CHROME開啟了這個文件後,原本的標籤 -


便不見了。由此可見,原來瀏覽器可以演繹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
看見了沒有?每個標籤其實在告訴電腦,他們包着的內容究竟是甚麼。而它們在被瀏覽器演繹後的樣子也有點不同,例如

的字型會比