○HTML先修班：第四課○
課程內容：
- 文字標籤─可改變文字的顏色、大小和字型
- 顏色標籤─除了挑選顏色之外，還可以做許多設定
- 特殊符號標籤─在內文增加特殊符號
- 家庭作業
一. 文字標籤(fonts)
在網頁上改變文字的外觀和感覺一點都不難。
<font></font>這組標籤可以改變文字的顏色、大小和字型。
文字標籤的三個基本屬性是：顏色、大小和字型。
顏色(color)
要改變文字的顏色，只需使用文字標籤的顏色屬性即可。
你可以使用命名顏色(如yellow, red)或是十六進位字碼(如#FFFF00,#FF0000)。
最好是使用瀏覽器安全顏色(只要能顯示256色以上的顯示器都會呈現出一樣的顏色)。
<font color="red">這個文字的顏色是紅的</font> 這個文字的顏色是紅的
<font color="#00FF00">這個文字的顏色是綠的</font> 這個文字的顏色是綠的
大小(size)
文字的大小是由瀏覽器決定的相對大小，不是以 pixels 計算的大小。
size 3 是預設值，size 1 最小，size 7 最大。
你也可以使用 + 和 - 來設定相對於附近文字大小的新文字大小。
<font size="+2">這個文字的大小是+2</font> 這個文字的大小是+2
<font size="1">這個文字的大小是1</font> 這個文字的大小是1
<font size="-1">這個文字的大小是-1</font> 這個文字的大小是-1
<font size="7">這個文字的大小是7</font> 這個文字的大小是7
字型(face)
文字的字型其實就是文字標籤的功能。
你可以設定任何你喜歡的字型，但是如果你的讀者沒有在他們的瀏覽器安裝你所選的字型，他們的瀏覽器就會想辦法找一個類似的出來，那他們的網頁就會和你想要呈現的不一樣。
為了解決這個問題，你可以挑選幾個字型，用逗點把它們分隔開，好讓瀏覽器照你喜好的優先順序選擇使用。
每台電腦的標準字型都不盡相同。你可以在字型種類最少的電腦上確認你的網頁是否能呈現出你所選擇的字型。
<font face="新細明體"> 這個文字的字型是新細明體
<font face="標楷體"> 這個文字的字型是標楷體
二. 顏色(color)
在網路上的顏色面對一些相當有趣的挑戰。對於一些基本的顏色，你可以直接使用顏色的名字(如red, blue, green)。但這些適用於電腦的顏色選擇範圍不是很大。同樣的，如果你使用命名顏色，你會冒著在網路上無法正確顯示顏色的風險。
為什麼會這樣呢？大多數的電腦所使用的顯示器都是設定256色預設值。Macintosh的256色組合和一般電腦的256色組合是不相同的。結果導致一組216色的組合，會在大部份的顯示器上呈現(幾乎)相同的顏色。這組顏色就叫做瀏覽器安全色盤(Browser Safe Color Palette)。
如果你想要使用的顏色不在命名顏色的名單中，那你就必須使用一種十六進位的文字碼(由0到F等16個數目構成的)。這個文字碼是由三組十六進位組合而成，各代表顏色中red, green, blue(RGB)的成分多寡。
當你開始製作你的網頁時，有很多方法可以讓你的網站有趣又特別。
最好的方法就是加入顏色。顏色可以用在表格、背景和字型上。
命名顏色(named color)
在你的網頁裡使用顏色有不同的方法。
最簡單的方法之一就是使用命名顏色。
它們就像你想的那樣，命名顏色有red, blue, green, purple等等。
但是，並非所有的瀏覽器都支援命名顏色，那就是為什麼你最好使用十六進位字碼的理由。
十六進位字碼(hexadecimal codes)
這些字碼是用來定義顏色的。它們是三個十六進位(0到F)數目的集合。
第一個顏色是red，再來是green，第三個是blue。每個十六進位數目都是三合一的RGB。
00是最低的色度，FF是最高的色度。例如，red是FF0000，blue是0000FF，green是00FF00，purple是990099。
把顏色加入文章中
把顏色放進文章裡最常用的方式就是使用<font>標籤。
選擇你希望文字顯現的顏色，把它放在文字標籤中，並使用"color"這個屬性。
例如，<font color="#FF0000">red</font> red
另外一個加顏色的方法是將它用在表格裡當背景顏色。只要在表格(table, tr, td, th)標籤裡加入"bgcolor"的屬性。
你也可以在整個網頁裡加入顏色，只要在body標籤裡加入bgcolor的屬性即可。
使用CSS(cascading style sheets)來加入顏色也是很容易的。
你可以改變字型的顏色，也可以改變背景顏色。
使用"color" style 屬性來改變字型顏色，例如，<font style="color : #0000FF"> </font>
使用"background-color" style 屬性來改變背景顏色，例如，<font style="background-color : #CCCCFF"> </font>
三. 特殊符號
當你在寫HTML時，你必須使用特殊符號來定義HTML，但是你要如何讓瀏覽器知道你現在不是在寫HTML，例如<and>，而只是在寫一般的文字呢？這時，你就必須使用特殊的文字碼。
可以使用特殊文字碼來表現的符號如版權符號、商標符號、右上角符號、右下角符號、重音符號、音標符號以及非英文字型等等。
一般文字之外的符號
當你使用HTML時，你可以打出大部份的文字，而不需要使用任何特殊字碼。
但那些鍵盤上沒有直接類似的符號，例如©和®，要怎麼處理呢？
這些都叫做"特殊符號"，HTML把它們轉譯成數目或字母密碼，讓它們也可以被放在HTML的文件裡。
以下列舉一些特殊符號的例子：
小於符號〈<〉 <
大於符號〈>〉 >
版權符號〈©〉 ©
商標符號〈®〉 ®
英鎊符號〈£〉 £
中間點符號〈·〉 ·
1/2符號〈½〉 ½
右上肩符號1〈¹〉 ¹
右上肩符號2〈²〉 ²
四. 家庭作業
將你的網頁的文字字型換成另一種新字型。
使用大小和顏色的屬性創造分段的標題，讓網頁更具趣味性。
使用十六進位色碼或命名顏色讓網頁多采多姿些。
不要忘記在你的網頁加上你的版權聲明。
學習更多的HTML標籤...
首頁製作百寶箱
奇摩免費網頁
網路家庭個人網頁
網頁編輯工具下載
檔案傳輸工具下載
|