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 留言:

張貼留言