2 電子書 HTML 與 CSS 簡介 或許您曾用過 Dreamweaver 等網頁編輯軟體製作網頁, 不過您知道嗎? 再怎麼優秀的軟體, 還是逃不開 HTML 的規範, 因為唯有遵循 HTML 語法的網頁, 才能在瀏覽器中正確地顯示 在本章中, 您除了可對 HTML 有基本的認識以外, 還能夠利用 Windows 的記事本快速建立一個屬於自己的網頁, 再透過 CSS 的編排, 讓您的網頁更加美觀 什麼是 HTML 美化 HTML 網頁在網頁中加入超連結讓版面更精緻的 CSS
2-1 什麼是 HTML HTML 是網頁所使用的語言, 也就是製作網頁的基礎 在這一節, 我們先來了解 HTML 的特性及基本架構, 並利用記事本來建立第一個網頁 2-1-1 HTML 與網頁的關係 一般我們打開瀏覽器時看到的網頁, 不但有圖片 文字還可以顯示動畫 聲音... 等多媒體效果 這些物件能正確地顯示在瀏覽器中, 其實都是靠 HTML 的幫忙 ; 您所看到的網頁, 其實是由一些文字及符號所組成的 HTML 文件 : 圖表 2-1 瀏覽器中所看到的網頁 在 IE 視窗中按下鍵顯示功能表列, 再執行 檢視 / 原始檔 命令, IE 就會以另外一個視窗呈現出網頁的原始文件內容, 也就是網頁的原始碼 : 圖表 2-2 網頁的原始碼 2-2
電子書 2 HTML 與 CSS 簡介 這些網頁的原始碼就是 HTML, HTML 是 Hyper Text Markup Language ( 超文字標記語言 ) 的縮寫 它可說是網頁的根本, 用來告訴瀏覽器應該如何呈現網頁的內容, 例如 : 圖片應該擺在何處 文字的字型或顏色 網頁背景的顏色... 等 只要經過瀏覽器的解讀, 密密麻麻的 HTML 程式碼就能轉變為圖文並茂的網頁 2-1-2 HTML 的基本架構和語法 一個 HTML 文件是由許多 文字 及 標籤 組合而成 所謂的標籤是指由 "<" 和 ">" 這兩個符號所組成的記號, 其中的內容各有不同的意義, 當瀏覽器在讀取 HTML 文件時, 會依照不同標籤所代表的意義, 轉換出各種不同的效果 ( 例如將字體放大 改變顏色... 等 ) HTML 標籤 HTML 標籤通常是成雙成對地出現, 例如 :<body> </body>, 其中具有 "/" 符號的是結束標籤, 另一個則是起始標籤 ; 不過有些標籤僅會出現單個, 例如 :<br> <hr> 等標籤 此外, HTML 標籤的名稱沒有大小寫的分別, 例如 <body> <BODY> <body>, 產生的效果都是一樣的 不過在 XHTML 與新版的 HTML 標準 ( 如 HTML4), 語法要求愈趨嚴謹, 標籤就會有大小寫的差異, 因此建議您一律使用小寫的標籤 TIP XHTML 是以 XML 為基礎所發展的 HTML 格式, 具有模組化和可擴展性的特點 您可以連上 http://www.w3.org/markup/ 網站瀏覽 XHTML 的相關資訊 HTML 的基本架構 在認識 HTML 的語法之前, 我們先來了解一下 HTML 的基本架構 HTML 文件需 有一定的格式, 才能讓瀏覽器正確解讀 HTML 的基本架構如下 : <html> <head> <title> 網頁的標題 </title> </head> <body> </body> </html> 只要在上列的 <body>...</body> 標籤中插入所要顯示的內容, 就能完成一個簡單的 HTML 文件了 2-3
HTML 語法 上述的 <html> </html> <head> </head> <title> </title> <body> </body> 這 4 組標籤, 可說是建立 HTML 文件最基本的標籤, 讓我們先來看看這 4 組標籤的意義以及使用方法 : <html> </html>: 這組標籤代表 HTML 文件的開始與結束, 所以要在文件的開頭加上 <html>, 並在文件最末端加上 </html> <html> ( 文件的內容及其他標籤 ) </html> <head> </head>: 用來標示文件的相關資訊, 例如標題 檔案名稱等 <title> </title>: 放在 <head> </head> 標籤之間, 用來表示文件標題的標籤 夾帶 在 <title> </title> 標籤中的文字會顯示在瀏覽器視窗的標題欄上 <head> <title> 歡迎光臨 </title> </head> 圖表 2-3 用 IE 瀏覽器瀏覽網頁 如果我們未定義 <title> 標籤, 瀏覽器會以文件的路徑名稱做為標題 ( 例如以 D:\ 範例檔案 \Html 與 CSS\Ex-01.html 作為標題) TIP 即使您的文件中沒有 <head> 標籤, 仍然可以利用 <title> 標籤指定文件的標題 <body> </body>: 標示文件內容, 也就是顯示在網頁上的文字 圖片 等, 可說是網頁的主體 一個 HTML 文件可分為文件資訊及文件內容 2 個部分 文件資訊就是 <head> 標 籤所包含的內容, 文件內容則是用 <body> 標籤來定義的 2-4
電子書 2 HTML 與 CSS 簡介 <html> <head> ( 文件資訊可放置此處 ) </head> <body> ( 文件的內容 ) </body> </html> 2-1-3 快速建立一個 HTML 網頁 了解 HTML 基本的架構後, 我們就可以利用上述的 4 組標籤做一個簡單的網頁了! 在此我們以記事本做為編輯 HTML 文件的工具, 請執行 開始 / 所有程式 / 附屬應用程式 / 記事本 命令開啟記事本, 然後輸入以下的 HTML 程式碼 : <html> <head> <title> 基礎練習 </title> </head> <body> 使用記事本建立簡單的網頁 </body> </html> 輸入完畢後, 請執行 檔案 / 另存新檔 命令, 在存檔類型處選擇所有檔案, 並在檔案名 稱最後輸入 ".html" 格式 存檔後請用瀏覽器開啟此檔案, 看看效果如何 ( 可參考範例檔案 Ex-02.html): 圖表 2-4 建立 HTML 網頁 2-5
2-1-4 編輯 HTML 的工具 既然 HTML 是一般的文字檔, 利用普通的文書處理軟體, 例如 Windows 的記事本 Word 等, 就可以編輯 HTML, 只要在存檔時將副檔名儲存為.htm 或.html 即可 由於 HTML 的標籤很多, 若語法錯誤可能會造成網頁無法正常顯示, 因此誕生了專門用來編輯 HTML 文件的軟體, 例如 Adobe 公司的 Dreamweaver 網頁編輯程式都會標示詳盡的功能表命令或工具列, 讓使用者只要選擇命令或是按下工具列上的按鈕, 即可將 HTML 標籤加到文件中, 簡化編輯 HTML 的工作 2-2 美化 HTML 網頁 若網頁背景一片空白 文字單調沒有變化 甚至連一張圖片都沒有, 恐怕達不到吸引人的目的 想讓網頁更生動活潑, 就必須在 HTML 文件中加入其他功能的標籤, 並且適當地定義標籤的屬性 2-2-1 段落及文字的變化 根據上一節介紹的基本架構, 很容易就可以完成一個 HTML 網頁 然而使用記事本編輯網頁時, 即使在文件中加上了換行或空行等編排, 在瀏覽器中檢視時, 並不會顯示您所做的編排, 您必須使用 HTML 標籤, 才能讓瀏覽器正確顯示網頁格式 我們已將文字換行 使用瀏覽器瀏覽網頁, 並不會顯示左圖中的換行效果 圖表 2-5 必須以 HTML 標籤控制換行才能讓瀏覽器正確顯示 2-6
電子書 2 HTML 與 CSS 簡介 文章段落的格式 若要正確控制文章段落, 可使用以下各種 HTML 標籤來控制 : <br> 換行 : 只要在想換行的地方 ( 通常是一行的最末端 ) 加上 <br> 標籤, 瀏覽器就會自動換行 <body> 使用記事本建立簡單的網頁,<br> 藉此了解網頁的基本架構 </body> 圖表 2-6 <br> 標籤的效果 <p> 分段 : <p> 標籤用來標示段落, 也就是將文字分段 所謂的 分段 是指除了將文字換行以外, 段落與段落間還會多出一行空白 <body> 練習一 <p> 使用記事本建立簡單的網頁,<br> 藉此了解網頁的基本架構 </body> 圖表 2-7 <p> 標籤的效果 <pre> 使用原始排列 : 若您希望瀏覽器中呈現的文字排列, 就如同在文書編輯程式中排列的格式一樣, 那麼可在這些文字前後加上 <pre> </pre> 標籤, 如此就可以省去一行一行加上 <br> 或 <p> 標籤的麻煩了 <body> <pre> 練習一使用記事本建立簡單的網頁, 練習二使用 HTML 標籤控制網頁格式 </pre> </body> 圖表 2-8 <pre> 標籤的效果 2-7
套用標題文字 學會如何安排段落後, 接著來看看如何改變文件中的文字顯示效果 在 HTML 中用來設定文字格式的標籤很多, 以下介紹比較常用的標題文字 設定標題文字的標籤共有 6 個, 分別是 <h1> <h2> <h6>, 數字愈大, 所顯示的文字愈小 <h1> 楓橋夜泊 </h1> <h2> 張繼 </h2> <h3> 月落烏啼霜滿天 </h3> <h4> 江楓漁火對愁眠 </h4> <h5> 姑蘇城外寒山寺 </h5> <h6> 夜半鐘聲到客船 </h6> TIP 使用 <h?> 標籤時, 可不必使用 <p> 或 <br> 標籤定義段落格式, 瀏覽器會自 動將標題當作獨立的一段文字 圖表 2-9 各種標題效果 文字的對齊方向 在瀏覽器中, 文字都是由左至右顯示, 且每一行都是靠左對齊的 若要讓文字改為置中或靠右對齊, 可在段落標籤 <p> 中加入屬性來設定 <p> 標籤的 align 屬性, 可用來控制文字對齊的方向, 其可設定的值有 left ( 靠左對齊, 此為預設值 ) center ( 置中對齊 ) right ( 靠右對齊 ) 3 種 瀏覽器會自動將 <p align=" "> 之後的文字都以設定的對齊方式來顯示 <p align="left"> 靠左對齊 <p align="center"> 置中對齊 <p align="right"> 靠右對齊 圖表 2-10 段落對齊效果 2-8
電子書 2 HTML 與 CSS 簡介 2-2-2 加入網頁背景色 透過文字的排版, 我們已經讓內容變得更豐富 更有變化了 但白底黑字的搭配, 看起 來總是單調了些, 所以接下來我們要幫網頁背景換個顏色, 讓網頁看起來更亮麗一點 色彩的指定方式 在介紹如何加入網頁背景色之前, 我們必須先說明在 HTML 文件中顏色的指定方式, 不論是網頁的背景 文字的顏色, 都是用相同的方式來設定 使用 RGB 16 進位表示法 在 HTML 文件中指定顏色的方法可用 R ( 紅 ) G ( 綠 ) B ( 藍 ) 三原色來調配, 其 表示方法如下 : #RRGGBB RR GG BB 分別代表紅 綠 藍 3 色的 16 進位值 ( 從 00 到 ff, 00 的色度最低 ff 色度最高 ), 例如要使用最亮的紅色, 就指定 #ff0000, 表示紅色的部分為 ff, 其他的顏色為 0, 若是黃色則可用 #ffff00 來表示 下表中列出幾個基本顏色的表示法供您參考 : 顏色 表示法 顏色 表示法 黑 #000000 綠 #00ff00 白 #ffffff 藍 #0000ff 紅 #ff0000 黃 #ffff00 圖表 2-11 RGB 顏色表示法 網頁安全色 網頁安全色是由 216 種顏色所組成, 這 216 種顏色是 Windows 及 Macintosh 作業系統以及瀏覽器都支援的顏色 假如我們在製作網頁時, 使用非網頁安全色的顏色, 很可能會在瀏覽者的電腦中出現顏色的誤差, 因此當我們在製作網頁時, 最好選擇 216 種網頁安全色中的色彩 您可以在搜尋網站輸入 " 色碼 " " 網頁安全色碼 " 等關鍵字進行尋找, 就可以找到網頁安全色色碼的資訊, 然後參照其列出來的色碼去指定您要使用的色彩 2-9
使用色彩名稱指定顏色 除了用 16 進位的方式指定顏色, 也可考慮使用色彩的名稱來指定, 下表中列出幾種色 彩名稱表示法供您參考 : 顏色 表示法 顏色 表示法 黑色 Black 白色 White 紅色 Red 黃色 Yellow 藍色 Blue 綠色 Green 圖表 2-12 以色彩名稱表示顏色 設定背景顏色 了解 HTML 的色彩指定方式後, 接下來我們可以試著為網頁加上背景色 背景顏色的 設定方式是在 <body> 標籤中以 bgcolor 屬性來設定 ( 以下範例是將背景色設定為黃色 ) : <body bgcolor="#ffff00"> ( 文件內容 ) </body> 圖表 2-13 背景色變更為黃色 TIP 其他標籤若要設定色彩時, 也是以相 同的方法加入指定色彩的屬性即可 2-2-3 加入圖片 在網頁中加入圖片可以減少冗長的文字敘述 在 HTML 文件中加入圖片很簡單, 只要在想放置圖片的地方使用 <img src =" 圖片檔的路徑 "> 標籤, 瀏覽器就會自動在對應的位置加入圖片 但在加入圖片之前, 我們必須先了解路徑的種類, 這關係到圖片是否能夠在網頁中正確顯示 2-10
電子書 2 HTML 與 CSS 簡介 絕對路徑與相對路徑 路徑可分為兩種 : 絕對路徑與相對路徑 假設製作好的網頁 (index.html) 以及圖片 (picture.jpg) 放在電腦中的 C:\images 資料夾中, 那麼要把圖片放置在網頁中的表示方法如下 : 絕對路徑 相對路徑 <img src="c:/images/picture.jpg"> <img src="picture.jpg"> 圖表 2-14 絕對路徑與相對路徑表示法 由上表可知, 絕對路徑可以明確地指定圖片的位置, 讓電腦依此路徑尋找圖片 ; 相對路徑則是以相對於網頁位置的方式指定圖片位置, 電腦只會在網頁所在的網站資料夾中尋找圖片 因此, 若您想在網頁中指定圖片連結, 應該將所有檔案都存於網站資料夾中, 然後以相對路徑連結, 如此一來, 即使網站資料夾存放的目錄改變了, 電腦仍可找到該檔案 您可以從下圖中了解不同情形下相對路徑的幾種設定方法 : images photo2.jpg 圖片資料夾 A.html Web 網站資料夾 Photo1.jpg mainpage B.html 圖表 2-15 相對路徑的設定方法 子資料夾 應用 1 : 若要在 A.html 中加入 photo1.jpg, 相對路徑為 "photo1.jpg" 應用 2: 若要在 A.html 中加入 photo2.jpg, 相對路徑為 "images/photo2.jpg" 應用 3: 若要在 B.html 中加入 photo1.jpg, 相對路徑為 "../photo1.jpg" 應用 4: 若要在 B.html 中加入 photo2.jpg, 相對路徑為 "../images/photo2.jpg" 2-11
加入圖片 我們現在馬上來看應用實例, 請開啟練習檔案 Ex-07.html, 這個網頁中已加入圖片, 接著觀察網頁的原始碼, 就可發現奧妙所在 : 圖表 2-16 在網頁中加入圖片 <center> <h1> 美麗的櫻花 </h1> <p> 今年櫻花提早綻放 </p> <p> 陽明山現在已經是一片花海 </p> <img src = "flower.jpg"> <br> 難得在台灣能看到如此美景 </center> 我們加入了這一行 在這個網頁中使用了相對路徑, 因此圖片 (flower.jpg) 和網頁 (Ex-07.html) 必須存 放在同一個目錄下, 圖片才能正確顯示 2-12
電子書 2 HTML 與 CSS 簡介 加入背景圖片 若想在網頁中加入背景圖片, 則在要設定背景圖的物件標籤中加入 background 屬性, 即可設定背景圖片 請參閱範例檔案 Ex-08.html, 在此我們以設定網頁背景圖為例, 在 <body> 標籤中加入 background 屬性 : <body background="flower.jpg"> 圖表 2-17 設定網頁背景圖 2-3 在網頁中加入超連結 超連結是網頁中最基本又實用的功能之一, 只要利用滑鼠按一下有連結的地方 ( 如圖片 文字 等 ), 即可連結到另一個網頁 ( 或是同一個網頁中的其他地方 ) 在 HTML 文件中, 建立超連結的標籤為 <a> 標籤, 其使用方法如下 : <a href=" 要連結的 URL"> 說明文字 </a> 網頁中的超連結, 可分為外部超連結以及內部超連結 2 種類型, 分述如下 2-13
2-3-1 外部超連結 所謂的外部超連結是指按下網頁中有設定超連結的地方時, 可連到其他的網站或是檔案 利用 <a> 標籤註明 URL 後, 瀏覽者只要在標示有 URL 超連結之處按一下, 即可連至該 URL 現在假設我們要在網頁中建立一個連向旗標公司網站首頁的超連結, 其做法如下 ( 請參考範例檔案 Ex-09.html): <body> <a href="http://www.flag.com.tw/"> 旗標公司 </a> </body> 我們寫在 <a> 和 </a> 標籤之間的 " 旗標公司 " 就是設有超連結的文字 在瀏覽器中通常顯示為藍色並加上底線, 將指標移到具有超連結的地方, 滑鼠指標會變成手狀, 只要在連結文字上按一下滑鼠左鈕, 即可連上要連結的目標 ( 在本範例中會連結 至旗標公司網站 ): 圖表 2-18 網頁中設有超連結的文字 除了上述連到網站的外部超連結外, 我們還能設定可啟動電腦中其他網路服務程式的連 結, 如啟動電子郵件程式 FTP 網站等等 : 連結寫法 說明 範例 mailto: 電子郵件地址 啟動電子郵件程式編輯新郵件 <a href="mailto:service@flag.com.tw"> 說明文字 </a> ftp:// 網域名稱 連結到 FTP 網站 <a href="ftp://ftp.hinet.net"> 說明文字 </a> 圖表 2-19 電子郵件和 FTP 網站超連結的書寫方式 2-3-2 內部超連結 如果超連結是要連結到自己網站中的其他網頁, 這種超連結就稱為內部超連結 內部超 連結在 HTML 文件中的標示方法如下 : <a href="myfile.html"> 連到 myfile.html 檔案 </a> 2-14
電子書 2 HTML 與 CSS 簡介 如果檔案放在資料夾中, 就要再加上資料夾的路徑 檔名 : <a href=" 資料夾名稱 /myfile.html"> 連到資料夾名稱下的 myfile.html 檔案 </a> 2-4 讓版面更精緻的 CSS CSS 的全名是 Cascading Style Sheets, 中文可稱作串接樣式表, 它能提供許多 HTML 無法支援的屬性, 例如網頁中的文字 圖片 表格等, 都可使用 CSS 來美化 2-4-1 CSS 的優點 在 HTML 中運用 CSS 的設定, 有下列優點 : 避免重複撰寫程式碼 : 當我們在撰寫 HTML 文件的時候, 需要為每個標籤設定格 式, 例如想把 標題 1 (<h1> 標籤 ) 設定為置中時, 必須在每個 <h1> 標籤都加上 "align = center" 的設定, 如果您的文件中有 10 個 <h1> 標籤, 就必須設定 10 次! 若使用 CSS, 我們只需在文件的開頭定義此標籤, 後續用到此標籤時, 即可直接套用設定, 十分方便 簡化網頁的維護 : 若要管理大型商務網站, 必須一次設定大量網頁的樣式, 這時可以把 CSS 樣式表從網頁中抽離, 存成一個獨立的樣式表, 之後需要設定或修改樣式時, 只要將網頁連結到該 CSS 檔, 或將該 CSS 檔匯入網頁, 再也不用一頁頁去修改樣式了 連結到外部 CSS 檔 A1.html A2.html A3.html 都有用到相同的語法 A1.html A2.html A3.html 只要連結到 ext.css 即可 將共用的語法獨立存成一個 CSS 檔 圖表 2-20 獨立的 CSS 樣式表能簡化網頁的維護 2-15
2-4-2 CSS 的語法 CSS 程式碼就是一條一條定義網頁樣式的規則, 以下介紹它們的表示方法 CSS 的基本寫法 每一條 CSS 規則分為選擇器 (Selector) 和宣告 (Declaration) 兩個部分, 其中宣告 (Declaration) 則是由屬性 (Property) 和值 (Value) 所組成的, 例如 : 選擇器 (selector) { 屬性 (property) : 值 (value) } 宣告 (Declaration) 所謂的選擇器是用來選擇這條規則要套用的對象, 例如我們要設定 <h1> 標籤的字型 大小為 12 點, 顏色為紅色時, 寫法如下 : h1 { font-size : 12pt ; color : red ; } 上例中, <h1> 標籤是我們套用的對象, 因此選擇器就是 h1 font-size 及 color 是我 們要設定的字型屬性 ;12pt 及 red 是分別指定給 font-size 及 color 屬性的值 TIP 當選擇器包含多個宣告時, 請務必使用分號 ";" 來區隔宣告 我們也可以同時讓多個選擇器共用相同的宣告, 例如要把 <h1> <h2> <h3> 標籤 的字型大小都設為 12 點 : h1, h2, h3 {font-size : 12pt} TIP 當有多個選擇器要共用相同的宣告時, 可以合併寫在一起, 但選擇器要使用逗號 "," 做區隔 2-16
電子書 2 HTML 與 CSS 簡介 如何定義 CSS 前面我們已經學會 CSS 的表示方式, 接下來我們來看看要怎麼在 HTML 中使用 CSS 一般我們可以用以下 3 種方式定義 CSS: 在個別標籤中使用 style 屬性 如果只想改變某一個標籤的屬性時, 可以使用 style 屬性去定義它 語法如下 : < 標籤 style= 屬性 1 : 值 1; 屬性 2 : 值 2;> 要顯示的內容 </ 標籤 > 例如要將標題 <h1> 的樣式變更為紅色的 20pt 字, 語法如下 : <h1 style=color : red ; font-size=20 pt ; > 標題字型是紅色, 大小為 20 點 </h1> 在 <head> 中用 <style> 標籤定義 CSS 為了方便管理與修改樣式, 通常我們會將 CSS 集中定義, 最常見的做法就是在 <head> </head> 之間使用 <style> 標籤來定義 CSS 在網頁開頭定義之後, 就可以完全改變該元素的屬性 語法如下 : <head> <style type="text/css"> 選擇器 1 { 屬性 1: 值 1; 屬性 2: 值 2} 選擇器 2 { 屬性 1: 值 1; 屬性 2: 值 2}... </style> </head> 例如我們在 <style> 標籤裡設定 標題 1 (<h1> 標籤 ) 的顏色和字型, 設定完成後, 網頁中有使用 <h1> 的地方都會套用此顏色和字型 請參考範例檔案 Ex-10.html: <head> <style type="text/css"> h1 { color:red ; font-size:20pt ; } </style> </head> 圖表 2-21 用 style 標籤定義 CSS 2-17
用 <link> 標籤連結 CSS 檔 CSS 的優點之一就是可以把 CSS 從網頁中抽離, 另外存成一個獨立的 CSS 檔, 方便讓網頁連結或匯入該 CSS 檔 而 CSS 檔的寫法只需要依照先前的語法撰寫即可, 不用加上 <style> 標籤, 但必須儲存成副檔名為.css 的樣式表檔 當我們要將網頁連結到 CSS 檔時, 需要在 head 段落中用 <link> 標籤呼叫 CSS 檔, 語法如下 : <head>... <link rel="stylesheet" type="text/css" href="css 檔的路徑 ">... </head> 例如我們把前面範例中的 CSS 設定另存為一個 CSS 檔 ( 範例檔案 Ex-01.css): h1{ color:red; font-size:20pt; } 當我們要讓網頁讀取 Ex-01.css 時, 語法如下 ( 請參考 Ex-11.html): <head> <link rel="stylesheet" type="text/css" href="ex-01.css"> </head> 我們也可以用 @import 指令將 CSS 檔匯入網頁, @import 指令必須放在網頁的 <style> </style> 標 TIP 籤之間, 並且必須在結尾處加上分號 ( 請參考範例檔案 Ex-12.html) 兩者的差別在於, <link> 只能寫在 HTML 中, 而 @import 則可以寫在 HTML 或 CSS 檔中, 是較為彈性的用法 2-18
電子書 2 HTML 與 CSS 簡介 使用 CSS 的注意事項 當我們要輸入 CSS 程式碼的時候, 需要注意下列事項 : 所有的宣告都必須包含在大括弧 {} 之中 每一種宣告必須用分號 ; 結束, 只有最後一個宣告可以省略 要加上註解的時候, 必須把註解的文字放在 /* 和 */ 符號之間, 例如 : h1{color:red} /* 設定標題 1 為紅色 */ 若屬性值包含空格, 必須用英文雙引號 " 或單引號 ' 包圍起來, 例如 : h1{color:red; /* 設定標題 1 為紅色 */ font-family:"courier New" /* 英文字優先使用 Courier New 字型 */ } TIP 上例中因為 Courier New 中間有空格, 所以前後需要加上雙引號 2-4-3 用 CSS 設定文字顏色與背景 前面我們已經學會了 CSS 的用法, 接下來我們來實際練習幾種常見的 CSS 效果 設定文字顏色 要設定文字的顏色, 我們要使用 color 屬性, 語法如下 : color: 屬性值 其中的屬性值可以用 2-2-2 節提過的色碼, 也可以直接用顏色名稱表示 例如我們要 將文字指定為紅色, 可以用下列寫法 : color:red color:#ff0000 2-19
設定背景顏色 要設定背景顏色, 我們要使用 background-color 屬性, 寫法與 color 完全相同, 讓 我們直接看看下面的例子 ( 請參考範例檔案 Ex-13.html): <style type="text/css"> body{background-color:#ccccff;} h1{background-color:#ffcccc;} p{background-color:#ffff77;} </style> </head> <body> <h1>h1 的背景色是粉紅色 </h1> <p>p 的背景色是淺黃色 </p> Body 的背景色是淡紫色 </body> 我們在上例中先針對 <body> 標籤設定淡紫色的背景色, 也就是整個網頁的背景色, 再對其它標籤 ( 例如 <h1> <p> 等等 ) 設定不同的背景色, 這麼一來, 就可以讓上述標籤擁有各自的背景色 圖表 2-22 替不同標籤設定各自的背景色 2-20
重點整理 1. HTML 是網頁基本的構成要素, 想要學好網頁的製作, 應該先瞭解 HTML 語法, 如此當網頁發生問題時, 便可直接檢視或修改 HTML 原始碼來維護網頁 2. 一個標準的 HTML 文件架構包括以下 4 種標籤 :<html> <head> <title> <body> 運用此架構所建立的 HTML 文件, 能確保網頁正常顯示 3. HTML 的每個標籤名稱都是以英文表示, "<" ">" 符號中的字母並沒有大小寫之分 此外, 標籤通常都是成雙成對的出現, 但其中也有部分的標籤是以單個出現 2 HTML 與CSS 簡介電子書 4. 一個 HTML 文件可分為文件資訊以及文件內容 2 個部分 文件資訊就是 <head> 標籤所包含的內容, 文件內容則是用 <body> 標籤來定義的 5. HTML 文件必須用特定的標籤來定義文件的格式, 瀏覽器並不會顯示您在編輯程式中自行設定的文件格式, 例如 : 換行 文字加粗體 對齊 等等 6. HTML 指定色彩的方式可透過 RGB 16 進位法, 或直接指定顏色的名稱 7. 絕對路徑可以明確地指定圖片的位置, 讓電腦依循此固定路徑尋找圖片 ; 相對路徑則是以相對於目錄的方式來指定圖片位置, 電腦只會在網頁所在的目錄中尋找圖片 若您想在網頁中指定連結, 最好以相對路徑的方式, 如此一來, 即使檔案存放的目錄改變了, 電腦仍可利用相對的方式找到該檔案 8. 在 <head> </head> 標籤中最常使用的就是 <title> </title> 標籤, 此標籤中定義的文字會成為該網頁的標題 9. 當我們需要一次設定大量網頁的樣式時, 通常會把 CSS 從網頁中抽離, 另外存成一個獨立的 CSS 檔, 這麼一來, 需要設定或修改時只要將各網頁連結到該 CSS 檔, 或將該 CSS 檔案匯入網頁即可, 而不用一頁頁去修改 10. CSS 的基本表示法是 : 選擇器 (selector) { 屬性 (property) : 值 (value) } 11. 若您要在 HTML 中使用 CSS, 最常見的表示方式就是在 <head> </head> 之間用 <style> 標籤來定義 CSS 12. 設定 CSS 時, 所有的宣告都必須包含在大括弧 {} 之中 2-21
2 HTML 與CSS 簡介電子書 實力評量 一 問答題 1. 請簡述 HTML 文件的基本架構 2. 試說明 <font color="#ff0000"> 標籤中, "#ff0000" 所代表的意義 3. 請簡述 絕對路徑 和 相對路徑 的意思為何 4. 請簡述在網頁中使用 CSS 的優點 5. 請說出定義 CSS 有哪些方式 二 實作題 1. 請用記事本撰寫一個最基本的 HTML 文件, 網頁標題必須為 " 我的第一個網頁 " 2. 承上題, 請使用 <img> 標籤在您的網頁中插入圖片 3. 承上題, 請為圖片加上超連結設定 4. 請將下列的程式碼做簡化 h1{color:red} h2{color:red} p{font-size:20pt} p{color:blue} 2-22
課後隨堂考 班級 : 學號 : 姓名 : 1. ( ) 要顯示在網頁標題列的文字, 要使用哪一個標籤? (A) <html> </html> (B) <title> </title> (C) <head> </head> (D) <body> </body> 2. ( ) 網頁的主體是指哪一個標籤的內容? (A) <html> </html> (B) <title> </title> (C) <head> </head> (D) <body> </body> 3. ( ) 如果我們在 Word 編輯網頁, 想要讓文字隨我們在 Word 設定的樣子換行, 可在文件中加入哪一個標籤? (A) <p> (B) <br> (C) <pre> (D) <img> 4. ( ) 下列何者可編輯 HTML 文件 (A) Dreamweaver (B) Word (C) 記事本 (D) 以上皆可 背面還有喔! 隨身卡 重點整理 1. HTML 是網頁基本的構成要素, 想要學好網頁的製作, 應該先瞭解 HTML 語法, 如此當網頁發生問題時, 便可直接檢視或修改 HTML 原始碼來維護網頁 2. 一個標準的 HTML 文件架構包括以下 4 種標籤 :<html> <head> <title> <body > 運用此架構所建立的 HTML 文件, 能確保網頁正常顯示 3. HTML 的每個標籤名稱都是以英文表示, " < " " > " 符號中的字母並沒有大小寫之分 此外, 標籤通常都是成雙成對的出現, 但其中也有部分的標籤是以單個出現 4. 一個 HTML 文件可分為文件資訊以及文件內容 2 個部分 文件資訊就是 <head> 標籤所包含的內容, 文件內容則是用 <body> 標籤來定義 5. HTML 文件必須用特定的標籤來定義文件的格式, 瀏覽器並不會顯示您在編輯程式中自行設定的文件格式, 例如 : 換行 文字加粗體 對齊 等等 6. HTML 指定色彩的方式可透過 RGB 16 進位法, 或直接指定顏色的名稱 HTML 與 CSS 簡介 電子書 2
5. ( ) 下列何者不是用來定義 CSS 樣式的方法? (A) 在 <head> </head> 間用 <style> 標籤定義 (B) 在個別標籤中使用 style 屬性 (C) 用 <a> 標籤連結 CSS 檔 (D) 在 <style> 標籤中用 @import 指令匯入 CSS 檔 6. ( ) 設定超連結的標籤是? (A) <a> (C) <pre> (B) <img> (D) <url> 7. ( ) 下列敘述何者錯誤? (A) HTML 標籤的名稱都是英文 (B) 標籤只能以大寫來編輯 (C) 標籤以 "< >" 符號所組成 (D) 具有 "/" 符號的是結束標籤 8. ( ) 下列關於 CSS 串接樣式表的敘述何者錯誤? (A) 避免重複撰寫 HTML 程式碼 (B) 簡化網頁的維護 (C) 能提供許多 HTML 無法支援的屬性 (D) 是一種新的網頁格式, 未來可望取代 HTML 9. ( ) 下列敘述何者正確? (A) <h1> 標籤中的文字字體小於 <h6> (B) <p> 標籤的 align 屬性, 可用來控制文字的字體大小 (C) <pre> 標籤中的文字, 會依其原本排列的格式來顯示 (D) <p> 標籤可以讓文字換行 10. ( ) 若在 HTML 中設定 <body bgcolor="#0000ff">, 表示這套用這個網頁的背景為 (A) 黑色 (B) 白色 (C) 藍色 (D) 綠色 7-A 12. 設定 CSS 時, 所有的宣告都必須包含在大括弧 { } 之中 11. 若您要在 HTML 中使用 CSS, 最常見的表示方式就是在 <head> </head> 之間用 <style> 標籤來定義 CSS 10. CSS 的基本表示法是 : 選擇器 (selector) { 屬性 (property) : 值 (value) } 9. 當我們需要一次設定大量網頁的樣式時, 通常會把 CSS 從網頁中抽離, 另外存成一個獨立的 CSS 檔, 這麼一來, 需要設定或修改時只要將各網頁連結到該 CSS 檔, 或將該 CSS 檔案匯入網頁即可, 而不用一頁頁去修改 8. 在 <head> </head> 標籤中最常使用的就是 <title> </title> 標籤, 此標籤中定義的文字會成為該網頁的標題 7. 絕對路徑可以明確地指定圖片的位置, 讓電腦依循此固定路徑尋找圖片 ; 相對路徑則是以相對於目錄的方式來指定圖片位置, 電腦只會在網頁所在的目錄中尋找圖片 若您想在網頁中指定連結, 最好以相對路徑的方式, 如此一來, 即使檔案存放的目錄改變了, 電腦仍可利用相對的方式找到該檔案