2009年11月1日 星期日

HTML再接再厲(十)：HEAD旗標

我想你已經看過類似的網頁範例幾百遍了，那麼多看一次也無妨吧！

<HTML>
<HEAD>
<TITLE>……</TITLE>
  ……  ……
</HEAD>
<BODY>
  ……  ……
</BODY>
</HTML>

上面有一個新玩意是我在 新手上路 單元中沒有提過的，那就是 頁頭旗標 <HEAD>。何以如此，也許是個人的撰寫習慣吧！不過我必須給你正確的建議：一定要使用<HEAD>及<BODY>將網頁分為兩個部份。<BODY>和</BODY>旗標之內包含你所要顯示的內容，而<HEAD>和</HEAD>旗標內包含以下單元：

  • <TITLE>旗標
  • <MATA>旗標
  • <BASE HREF>旗標
  • 爪哇語法 (JavaScript)
  • 串接樣式表 (Cascading Style Sheets)

<HEAD>旗標

我們先來看看 <HEAD>旗標 會做那些事情：

  • 將網頁分為頭和身體兩部份　這是良好習慣，可減少撰寫和除錯的時間。
  • 其內容會先被載入　有時候你會發現網頁還是空白的，網頁標題已出現在視窗上方的標題列上。或是網頁使用了爪哇語法 (JavaScript)和串接樣式表 (Cascading Style Sheets)做為特別設定和控制，它們都先被載入。
  • 提供網頁的相關說明　這些說明資訊並不會顯示在瀏覽視窗內，通常是用於協助搜尋引擎(search engine)瞭解網頁的關鍵字、摘要、有效時間……等等。

<TITLE>旗標

在<HEAD>旗標所包含的內容中最常被加入的就是<TITLE>旗標了，標題旗標設定在瀏覽視窗最上方所顯示的文字。現在抬頭用力看看本頁的標題，其語法如下：

<TITLE>HTML再接再厲……</TITLE>

你如果仔細觀察，艾爾弗烈德的每一篇網頁都有使用<TITLE>旗標為它們設定標題。你也應該養成為你所有的網頁設定標題的習慣。

這裡順帶提一件"上古軼事"，網路上有些網頁使用了許多個 <TITLE>旗標，但是只有第一個 <TITLE>旗標 所設定的標題會出現在瀏覽視窗的最上方。那為什麼要寫這麼多個呢？因為早期的瀏覽程式支援多個 <TITLE>旗標，它可以像霓虹燈一樣，依序變換顯示所有標題，實在有夠酷！但新版的瀏覽程式已不再支援了。

閒話少說，我們現在就開始設定一個肥肥胖胖的"頭"吧：

<HEAD>
<TITLE>這是一個肥肥胖胖的"頭"的範例</TITLE>
</HEAD>

<META>旗標

我還有一個單元專門介紹 META旗標，這個只介紹幾個最常用的：

  • <META NAME="keywords" CONTENT="key,word,keyword,關鍵字">
    告訴搜尋引擎這篇網頁的關鍵字。
  • <META NAME="description" CONTENT="好棒的網頁啊！">
    告訴搜尋引擎這篇網頁的內容或摘要。
  • <META NAME="generator" CONTENT="Notepad">
    告訴搜尋引擎這篇網頁是用什麼軟體製作的。
  • <META NAME="author" CONTENT="艾爾弗烈德">
    告訴搜尋引擎這篇網頁是由誰製作的。
  • <META NAME="copyright" CONTENT="本網頁著作權屬艾爾弗烈德所有">
    告訴搜尋引擎這篇網頁是……你知道嘛！
  • <META NAME="expires" CONTENT="31 December 2007">
    告訴搜尋引擎這篇網頁何時需要從登錄資料庫中刪除。

再來看看我們的"頭"長多大了：

<HEAD>
<TITLE>這是一個肥肥胖胖的"頭"的範例</TITLE>
<META NAME="keywords" CONTENT="key,word,keyword,關鍵字">
<META NAME="description" CONTENT="好棒的網頁啊！">
<META NAME="generator" CONTENT="Notepad">
<META NAME="author" CONTENT="艾爾弗烈德">
<META NAME="copyright" CONTENT="本網頁著作權屬艾爾弗烈德所有">
<META NAME="expires" CONTENT="31 December 2007">
</HEAD>

<BASE HERF>旗標

BASE就是基地的意思，<BASE HERF>旗標的目的在設定該篇網頁所有超連結的根目錄位置，若以蝙蝠洞為例，其語法如下：

<BASE HREF="http://alfredcave.blogspot.com/">

設定之後，如果你寫了一個連結如下：

<A HREF="page.htm">

瀏覽程式會自動加上完整路徑，其效果如下：

<A HREF="http://alfredcave.blogspot.com/page.htm">

我個人很少用到這個旗標，一方面因為我的網站也沒有大到設定了多層目錄，用不著；其次是我在某些網頁中使用了 目標跳躍連結，某些瀏覽程式會自動重新載入(Refresh或Reload)該頁，造成網頁閃爍現象，而不是"飛"至目標。而且，我都是離線編輯，在我的硬碟上工作，當我要測試網頁時，電腦會嘗試連上遠方伺服主機的根目錄位置，反而帶給我困擾。

但是你若設定了多層目錄，就不妨把我們的"頭"再塞大一點：

<HEAD>
<TITLE>這是一個肥肥胖胖的"頭"的範例</TITLE>
<META NAME="keywords" CONTENT="key,word,keyword,關鍵字">
<META NAME="description" CONTENT="好棒的網頁啊！">
<META NAME="generator" CONTENT="Notepad">
<META NAME="author" CONTENT="艾爾弗烈德">
<META NAME="copyright" CONTENT="本網頁著作權屬艾爾弗烈德所有">
<META NAME="expires" CONTENT="31 December 2007">
<BASE HREF="http://alfredcave.blogspot.com/">
</HEAD>

爪哇語法和串接樣式表

有關爪哇語法 (JavaScript)和串接樣式表 (Cascading Style Sheets)，請容我另文介紹。把它們放在"頭"部的好處是優先載入，當網頁要呼叫它們時，它們已經在那邊準備好了，隨時可以奉召。

好了！總算完成我們肥肥胖胖的大"頭"了：

<HEAD>
<TITLE>這是一個肥肥胖胖的"頭"的範例</TITLE>
<META NAME="keywords" CONTENT="key,word,keyword,關鍵字">
<META NAME="description" CONTENT="好棒的網頁啊！">
<META NAME="generator" CONTENT="Notepad">
<META NAME="author" CONTENT="艾爾弗烈德">
<META NAME="copyright" CONTENT="本網頁著作權屬艾爾弗烈德所有">
<META NAME="expires" CONTENT="31 December 2005">
<BASE HREF="http://alfredcave.blogspot.com/">
<SCRIPT LANGUAGE="JavaScript">
  ……  ……
</SCRIPT>
<STYLE>
  ……  ……
</STYLE>
</HEAD>

結語

你可能覺得用不著這麼大一個"頭"，你當然可以自行取捨。不過加了它們也無傷，還可以協助搜尋引擎和某些網友找到你的網站。

本文配合HTML 4.0撰寫，新版HTML均可向前相容。

文章分類：

0 留言:

張貼留言