HTML 教學(二) - 屬性 (Attribute)

前文提要:  HTML 教學(一)- 基礎

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

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

- 學習HTML屬性 (Attribute)
- 利用HTML標籤及屬性建立網頁

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

屬性的添加方法是,在起始標籤(Opening Tag)中加入:

屬性=’值’

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

例如:

我們便可以在a的起始標籤中加入一個名為href的屬性,並把一個網址設定為其值,變為:

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

1

又例如,img代表相片,它只有起始標籤。

我們必須告訴電腦,相片的位置在那。我們可以為它加入一個名為src的屬性,並把一個圖片地址設定為其值:

實戰 - HTML屬性

我們試試在brackets中輸入以下的內容,看看會出現甚麼。

2

3

看!我們建立了一個連結。我們家按這連結時便會到google.com。要注意的是連結一定要以http:// 或 http:// 開頭。

現在我們試試新增一個屬性target,看看有甚麼結果?

如果你輸入正確,現在當用家按Link時http://yahoo.com便會在一個新視窗開啟。

現在我們會嘗試用去新增一張圖片。

4請隨便抓一條圖片連結,我們可以到google image搜尋相片。

5按View Image。

6所謂圖片連結,就是一個連結的最後副檔名是:
.jpg
.jpeg
.png
.tff
.svg
….等

.jpg是比較常用的圖片副檔名,因為其檔案容量較小。而如果你的圖片是有一個透明背景,就必須用上.png。

由於標籤不能說明要連結的圖片在哪裏,因次我們會加上一個src屬性。

7
8

我們成功了加了相片,但相片太大了。

我們可以加上另一個屬性width, 便可以重新定義圖片顯示的大小。

9

成功把圖片縮小了!

這裏長度的單位是叫px,大約可以理解為:一個13吋的Macbook的闊度大約是1300px。

10

如果我們只是定義闊度,圖片是會按比例放大或縮小的。但如果我們加入另一個屬性height,圖片便會強行被我們所定義的長度和闊度去顯示。

11

圖片會變得不合比例。

最後,我們可以把圖片加入連結。只要用一a包着img便可以:

12現在我們按按圖片,是不是會到了http://google.com?