HTML網頁製作入門(一)
 
聯絡我們
會員登錄
購物車


首頁 書籤 最新訊息 其他
IT辭典 IT技術動向 IT和經營結合 系統導入 系統基盤建置 系統營運管理
張士超
東京工業大學經營工學科畢。現任IT綜合情報網編輯。

HTML網頁製作入門(一)

目前製作HTML網頁不是一件很困難的事,在我們常用的辦公室軟體MS WORD等編輯文章後,以網頁格式保存,也就能產生出網頁出來。在網路上也有相當多簡單地就能製作出網頁的工具。但是,對於網頁的內容、編排的方式、功能等有意見,想要動手去做修改時,不懂的網頁語言就束手無策了。

我們利用IE、Firefox、Safari等瀏覽器的「檢視原始檔」的功能,看到網頁的原始檔內出現許多「<」和「>」包圍的文字,這些被稱為標籤(Tag),而網頁語言就是由<標籤名>所構成。因此學習網頁語言,開始先要了解標籤(Tag)的構造。

認識網頁標籤(Tag)

網頁標籤(Tag)分為兩種,一種有起始標籤(<標籤名>)和結束標籤(</標籤名>)所構成,兩者之間可以放進網頁的內容(Contents),例如段落標籤<p>段落內容...</p>。另外一種只有起始標籤沒有結束標籤,因此不能放進網頁的內容(Contents),被稱做為空標籤(Empty),>前加上反斜線,例如改行標籤<br />。早期的HTML語法,空標籤內的最後不用加入反斜線"/",但是在XHML語法就必須要要有。為了避免舊的瀏覽器無法判讀,在標籤名和反斜線之間加入半形空白。起始標籤和空標籤內可以定義標籤的屬性及其屬性值,之後做詳細解說。


圖1:網頁標籤(Tag)的種類和構造

無論任何網頁都有以下4種基本的網頁標籤(Tag):

<html>~~~</html>
HTML網頁(html)標籤,宣告HTML標籤內的都是HTML文章。
<head>~~~</head>
網頁標頭(head)標籤,設定網頁的基本資訊。主要有關文件的樣式、文字碼、標題、、關鍵字、簡要文、相關文件、樣式表、文稿程式等資訊
<title>~~~</title>
網頁標題(title)標籤,此標題會顯示於window視窗的標題列上,也會出現在搜尋引擎搜尋結果的超連結標題上。
<body>~~~</body>
網頁標身(body)標籤,設定顯現在瀏覽器的網頁文件內容。


圖2:網頁的4種基本標籤(Tag)

了解網頁標籤的基本種類和構造後,想要開始撰寫HTML語言之前,必須在第一行先要宣告使用的HTML版本是那一個版本(如圖2所示),如此網頁瀏覽器才能正確的解析。

認識HTML的版本

HTML版本目前分為以下3種版本,必須在html標籤(<html>)前做宣告。制訂標準HTML規格的機構W3C(World Wide Web Consortium)在XHTML 1.0提供以下Transitional、Frameset、Strick三種DTD(Document Type Difinition)。

●Transitional DTD
允許繼續使用W3C非推薦元素和屬性的寬鬆文檔類型,但不可以使用框架。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
●Frameset DTD
允許使用框架的Transitional文檔類型。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
●Strict DTD
不允許繼續使用W3C非推薦的元素和屬性,以及框架的嚴密文檔類型。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在最新的XHTML 1.1版只沿用Strict DTDHTML 1.0嚴密文檔類型,不再分類成3種型態(Transitional DTD、Frameset DTD、Strict DTD)。因此,W3C非推薦元素和屬性以及框架,都不可使用。宣告方式為:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


舊的瀏覽器有可能不對應XHTML 1.1版,接下來的說明都使用XHTML 1.0的Strict DTD版本。我們來試做一個簡單的網頁,沒有製作網頁的編輯器沒有關係,利用Windows的「記事本」也可以製作網頁。在「記事本」內輸入以下內容之後,以"mypage.html"的檔案名保存。


圖3:我的第一個網頁的程式範本

按這裡檢視一下成果...。網頁的標題應該會出現「我的第一個網頁」,網頁的內容會出現「這是我第一個網頁...」


圖4:我的第一個網頁的網頁範本

接下來的章節,將繼續介紹製作網頁必備的一些知識,以及如何參考本網站所提供的「WEB開發用辭典」,製作網頁。


top