|
請開啟「文字編輯器」或『記事本』
■ 認識標籤
☉ HTML的標籤分類：
成雙對應存在：如：<head>…</head>,
<body>…</body>.
單一存在：如：<hr>,
<br>, <Li>.
☉ 使用型態如下：
-
<標籤名稱>
內容 </標籤名稱>
-
<標籤名稱 屬性參數1=數值 屬性參數2=數值…>
內容
</標籤名稱>
- <單標籤名稱>內容
- <單標籤名稱 屬性參數1=數值 屬性參數2=數值…>內容
■ 使用標籤
☉ 註明 * 者，表示標籤為單一標籤
☉ 大小寫標籤在網頁是不會影響其功能(屬性例外)
☉ 換行不會影響顯示功能（但是，空白會有缺陷）
|
標籤名稱 |
功能說明 |
|
<HTML> |
網頁文件標記 |
|
<HEAD> |
標示文件資訊（類似文件的註解） |
|
<TITLE> |
標題欄（瀏覽器最上面標題欄的顯示） |
|
<BODY> |
網頁內容（本文） |
■ 實作
<html>
<head>
<Title>歡迎光臨XXX個人網站</Title>
</head>
<body>
王小明
smwang
這是我的第一個網頁，請多指教！
</body>
</html>
■ 說明
■ 換行標籤 與 空白符號
|
標籤名稱 |
功能說明 |
|
<br> |
換行 |
|
<pre> |
預排格式 |
|
|
空白 |
■ 背景色
☉ 屬性設定
<body
bgcolor="#FFFF00"
text="#0000FF">
顏色是由三種光源色：紅(Red)、綠(Green)、藍(Blue)搭配出來
數值是以6位十六進位數值(0~9、a、b、c、d、e、f)，來表示，如下：
|
# |
R |
R |
G |
G |
B |
B |
|
# |
F |
F |
F |
F |
F |
F |
|
F |
F |
0 |
0 |
0 |
0 |
|
0 |
0 |
F |
F |
0 |
0 |
|
0 |
0 |
0 |
0 |
F |
F |
|
0 |
0 |
0 |
0 |
0 |
0 |
白色：FFFFFF
黑色：000000
紅色：FF0000
綠色：00FF00
藍色：0000FF
黃色：?
…
☉ 英文名稱
#RRGGBB 也可以直接以英文顏色名稱取代，如：
- 彩虹色表
|
黑 |
|
black |
|
白 |
|
white |
|
紅 |
|
red |
|
澄 |
|
orange |
|
黃 |
|
yellow |
|
綠 |
|
green |
|
藍 |
|
blue |
|
靛 |
|
indigo |
|
紫 |
|
purple |
- 常用基本色
|
aqua |
gray |
navy |
silver |
black |
green |
olive |
teal |
|
blue |
lime |
purple |
yellow |
fuchsia |
maroon |
red |
white |
- 英文顏色名稱對照表
- RGB和諧色表
■ HEAD 標籤(元件)
|
屬性名稱
|
功能說明
|
|
title |
網頁視窗標題欄的內容 |
|
meta |
網頁的細項資訊設定(給browser,engine)
屬性參數有:
name, content, scheme,
http-equiv.
|
☉ 練習範例:
<HEAD>
<TITLE>How to complete Memorandum
cover sheets</TITLE>
<META http-equiv="Content-Type"
content="text/html; charset=big5">
<META http-equiv="Content-Language"
content="zh-tw">
<META name="author"
content="Sheng-chau Tseng">
<META name="copyright" content="©
1998 Hsin-chu Senior High School">
<META name="keywords"
content="hchs,HCHS,新竹高中,新竹中學">
</HEAD>
■ BODY 相關屬性(參考)
|
屬性名稱 |
功能說明 |
|
bgproperties |
固定網頁的背景，拉捲軸時只有內容會移動.
(只有IE支援) |
|
leftmargin |
設定網頁內容的左邊與邊界左右的距離.
(只有IE支援) |
|
topmargin |
設定網頁內容的上邊與邊界上下的距離.
(只有IE支援) |
|
marginwidth |
設定網頁內容的左邊與邊界左右的距離.
(Netscape支援) |
|
marginheight |
設定網頁內容的上邊與邊界上下的距離.
(Netscape支援) |
|
aLink="color" |
當滑鼠左鍵按下時，超鏈結的顏色. |
|
link="color" |
未選過的超鏈結顏色. |
|
vlink="color" |
已點過的超鏈結顏色. |
|
|