HTML網頁製作入門(三)

在前兩章介紹網頁的基本架構後，開始可以來試做網頁了。首先在網頁<head>~</head>標籤內設定一些網頁基本附加(Meta)資訊。有了這些資訊瀏覽者才能找到並且正確顯示你的網頁。

網頁標頭附加資訊設定

主要的附加資訊有以下幾種，在<meta />空標籤內設定。

●網頁搜尋的關鍵語(keyword): <meta name="keyword" content="HTML,CSS,Javascript" />; 當瀏覽者在搜尋引擎輸入"HTML"、"CSS"、"Javascript"關鍵語時，就可以找到你的網頁。每個關鍵語之間使用逗號","區隔。
●網頁內容的描述(description): <meta name="description" content="在這裡輸入網頁內容的概要..." />; 當瀏覽者在搜尋引擎找到你的網頁時，會顯示出你的網頁標題(在第一章介紹過title標籤內容)和網頁的描述內容。
●網頁的語言碼(Language)和文字碼(charset): <meta http-equiv="Content-Language" content="zh-tw" />; 告訴網頁瀏覽器你的網頁語言碼是中文繁體碼"zh-tw"。; <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />; 告訴網頁瀏覽器你的HTML網頁的文字碼是萬用字元碼"utf-8"。
●網頁內容的型態(type): <meta http-equiv="Content-Style-Type" content="text/css" />; 告訴網頁瀏覽器你的網頁內的樣式是"text/css"。如果有Javascript時再追加下列的設定:; <meta http-equiv="Content-Script-Type" content="text/javascript" />

上一章有提到將文稿程式和樣式設定存放在外部的檔案，會讓HTML的構造文顯得簡潔易懂，不僅開發和維護容易，處理速度也會較快。連結外部的檔案也是在網頁<head>~</head>標籤內設定。設定的方式如下:

●CSS樣式檔的連結: <link rel="stylesheet" type="text/css" href="../stylesheets/sample.css" />; 利用<link />空標籤(tag)指定CSS樣式外部檔"sample.css"放在上層的"stylesheets"目錄之下。(請參考上一章的相對位置說明)。
●Javascript外部檔的指定: <script type="text/javascript" language="javascript" src="../script/sample.js"></script/>; 利用<script>的標籤內的src屬性，指定javascript文稿語言檔"sample.js"放在上層的"script"目錄之下。

上述在網頁標頭(head)的資訊不會呈現在網頁上，因此時常被忽略。筆者通常會製作網頁樣版(template)，每個網頁都套用上去，可以節省相當多的網頁開發工時，也可以避免設定錯誤。網頁樣版(template)內的網頁標身(<body>~</body>)內，還會放入接下來要說明的網頁版面配置。

表1:網頁樣版(temp.html)

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

<html>

<head>

<title>在這裡輸入網頁標題</title>

<meta name="keyword" content="在這裡輸入網頁關鍵語並以逗號做區隔 />

<meta name="description" content="在這裡輸入網頁內容的概要..." />

<meta http-equiv="Content-Language" content="zh-tw" />

<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<link rel="stylesheet" type="text/css" href="../stylesheets/temp.css" />

<script type="text/javascript" language="javascript" src="../script/temp.js"></script/>

</head>

<body>

<div class = "body_head" ></div>

<div class = "body_left" ></div>

<div class = "body_middle" ></div>

<div class = "body_right" ></div>

<div class = "body_foot" ></div>

</body>

</html>