初學網頁應知：用執行個體來學習HTML

初學|網頁 　　記得在本人剛開始學習編寫網頁時曾向一位WEB高手請教過如何用FRONTPAGE 98來製作一張絢麗多姿的個人網頁。他告訴我，他製作網頁時不用任何網頁製作軟體，而是靠手寫的。當時我一下子愣住了，“WHAT？手寫網頁！OH，MY GAD！這人簡直是高手中的高手呀！”從此他在我心目中地位猶如偉人般的高大……然而時過半年到了今天，他已經不再是我的偶像。因為我也能手寫網頁了，而且編寫出的WEB還要勝他一籌（自我感覺）。看到此處你一定會問我，到底我取了什麼“真經”能“逍遙仙境”呢？其實很簡單，那就是HTML語言。

　　HTML是由WEB的發明者Tim Berners-Lee和同事Daniel W.Connolly於1990年創立的一種標記式語言。它是標準通用化標記語言SGML的應用。用它的文法規則建立的文檔可以運行在不同作業系統的平台上。因此，HTML文檔屬於純文字檔案（它能用任意的文本編寫器書寫）。現在有很多網迷稱HTML為程式語言，把寫HTML文檔理解為編程，這顯然是走進了一個誤區。

　　在瞭解了HTML的定義後，接下來我們便來學習此語言。由於篇幅有限，本文不可能把HTML語言的屬性一一講解。筆者只是選了一些比較重要而又廣泛使用的元素進行分析。

　　在進入正題前，我們先來看看下面這張網頁原始碼。（這是筆者個人首頁的原始碼，本文將圍繞著此代碼進行詳解。）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>意境</title>
</head>
<body>
<table border="0" width="100%" cellpadding="0">
<tr>
<td width="100%"><p align="center"><font face="隸書" size="6" color="#FF00FF"><strong>歡迎進入華人網站</strong></font></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="10%" valign="top" align="center"></td>
<td width="80%" valign="top"><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="17%"></td>
<td width="17%">
<a href="http://202.103.176.80/g/speaker/cool.htm">
<img src="mypic1.gif" alt="共用程式網站進入口" border="0" width="180" height="90"></a></td>
<td width="17%"></td>
</tr>
<tr>
<td width="17%"></td>
<td width="17%"></td>
<td width="17%"></td>
</tr>
<tr>
<td width="17%">
<img src="mypic2.gif"
alt="個人作品網站進入口" width="180" height="90"></td>
<td width="17%"></td>
<td width="17%"><a href="http://202.103.176.80/g/speaker/dault.htm">
<img src="mypic4.gif" alt="華人首頁進入口" border="0"></a></td>
</tr>
<tr>
<td width="17%"></td>
<td width="17%">　<p>　</td>
<td width="17%"></td>
</tr>
<tr>
<td width="17%"></td>
<td width="17%">
<img src="mypic3.gif" alt="名家推薦網站進入口"></td>
<td width="17%"></td>
</tr>
</table>
</td>
<td width="10%" valign="top" align="center"></td>
</tr>
<tr>
<td width="10%"></td>
<td width="80%"></td>
<td width="10%"></td>
</tr>
</table>
</td>
</tr>
</table>

<p>　</p>

<table border="0" width="100%" cellpadding="0">
<tr>
<td width="100%"><table border="0" width="100%" cellpadding="0">
<tr>
<td width="100%"><p align="center"><strong><font face="隸書" color="#A6A6FF">二OOO年三月三十日製作完成</font></strong></td>
</tr>
<tr>
<td width="100%"><p align="center"><font face="隸書" color="#A6A6FF"><strong>謝謝您的光臨</strong></font></td>
</tr>
<tr>
<td width="100%"><p align="center"><strong><font face="隸書" color="#A6A6FF">華人網站站長：張鳴</font></strong></td>
</tr>
<tr>

<td width="100%"><strong><font face="隸書" color="#A6A6FF">
<marquee border="0" align="middle" scrolldelay="120">
若您需要協助，請及時找我，聯絡E-MAIL：dibazh@online.sh.cn</marquee></font></strong></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
看了這段代碼後，您是否感到有些頭暈呀？（這麼多英文，好複雜呦！）其實這一點都不複雜，請聽我慢慢道來。
一．<HTML></HTML>元素。它表示了這個文檔為HTML文檔，即：我們所說的網頁。
二．<HEAD></HEAD>元素。它是用來標明當前文檔的若干資訊。例如，文檔標題，文檔所用的字元集等等。在上例中，<HEAD></HEAD>中插入的TITLE和META元素就分別給HEAD元素指明了題目（“意境”）以及所用的字元集（gb2312）。
三．<TITLE></TITLE>和<META>元素。上面已經提到過這兩個元素分別代表的含義。TITLE是給文檔起個題目，META是說明HTML所使用的一些資訊。（注意：此元素不要與HEAD混淆，META元素一般包括在HEAD元素中。）META不僅能指明文檔所用的字元集，而且還能提供一些有趣的功能。例如：自動跳轉網頁（代碼為：<meta http-equiv="refresh"
content="240（秒數）; url=http://breaker.126.com（地址）">)和網頁出現方式（可以圓形開啟網頁，方形開啟網頁等等）。
四．四個表格元素。它是HTML中最主要的元素。它能夠協助您解決在排版上所遇到的眾多問題，例如，文字與圖象對齊等等。如果有人對您說我在製作網頁時從來不用表格元素的話，那麼此人的網頁肯定稱不上“精品”。
1．<table></table>。這是定義表格的元素，也可以說是表格的“身份證”。要想知道網頁中總共有幾張表格那就數一數有幾對此元素便可。拿上例來看，總共有五對<table></table>，那麼此張網頁就有五張表格。另外此元素還附有一些屬性，在此本人介紹幾個比較重要的。
A．<table border=數字>表示表格邊框線的寬度。
B. <table border width=數字;height=數字>指定整個表格的寬度及高度。
C. <table border cellspacing=數字>表示兩個儲存格之間的距離。
D. <table border cellpadding=數字>表示儲存格的大小。
注意：上面的“數字”可用正整數表示，也可用百分數表示。他們的單位都是“象素”。另外，筆者在此推薦各位在編寫網頁時最好用正整數來表示，因為這比較直觀。而用百分數來寫的話，還需經過換算才能知道您表格或儲存格的大小。
2．<tr></tr>。這是用來定義表行的元素。即：表格中行的“身份證”。在表格中有幾對此元素就表示當前表格中有幾行。
3．<td></td>。關於此對元素的定義在很多書中的解釋都很專業，對初識HTML語言的朋友來講很難理解。現本人通過自己的領悟而給它一個的定義：<td></td>是表示一行中儲存格的元素。同上原理，一行中有幾對此元素，就有幾個儲存格。
4．<th></th>。它是用來定義表頭，但此元素在今天已經不常用到了。因此，筆者也不多作介紹。
五．<font></font>。此元素規定了字型運用的方式，它有三個屬性：SIZE，COLOR，FACE。這分別代表了字型的大小，顏色及哪種字型。例如上面的網頁中這段代碼<font face="隸書" size="6" color="#（可以省略）FF00FF"><strong>歡迎進入華人網站</strong></font>它表示了“歡迎進入華人網站”這八個文字，用隸書六號粗（<strong></strong>代表粗字型）字型紫紅色在網頁中顯示出來。另外，color="#FF00FF" 代碼中的“#”可以省略。
六．<img>。它是專門設定圖片屬性的元素。我們以上例中的這段代碼進行分析：
<img src="mypic1.gif" alt="共用程式網站進入口" border="0" width="180" height="90">。其中<img src>是指明了圖片的路徑。在ITERNENT上若要能正常地顯示您在網頁中所設定的圖片，那麼您圖片的路徑必須正確。否則的話，圖片不會呈現。<img alt>這是表示在瀏覽器不能開啟圖片時顯示的說明，這個說明可以是由您任意命名，但最好能寫些有意義的文字。就如本人給此圖片取名為“共用程式網站進入口”，也就是說當點擊此圖片時，網頁會自動串連到共用程式網站同時開啟此網站的首頁。至於border,width,height這些屬性很簡單，即：圖片的邊框線寬度，圖片的寬度以及圖片的高度。它與表格的border,width,height屬性定義差不多，只是前者是針對圖片，而後者是針對錶格。
七．<a href></a>。這是一個超串連的元素。在href後面寫下欲串連的網址，在<a href>與<a>之間寫入文字或插入圖片，那麼您的超串連就完成了。怎麼樣很容易吧！
八．<marquee></marquee>。這是HTML語言的進階技術運用元素。用它可以實現WEB中文字的滾動效果，讓您的網頁更具有動態魅力。這個元素支援以下幾個屬性：
1． DIRECTION。它是指定文字的滾動方向，例如，<marquee direction=right>就是指文字
從左向右滾動。除了right，我們還可以用left（從右至左）,up（自下往上）,down（由上朝下）來設定文字的方向。
2． BEHAVIOR。這是指定文字的滾動方式。它有三個對象：SCROLL，SLIDE，ALTERNATE。這
三個對象分別代表了環繞滾動，滾動一次和來復原動。其中，環繞滾動（即SCROLL）是滾動方式（BEHAVIOR）的預設值。例如上例中的“<marquee border="0" align="middle" scrolldelay="120">若您需要協助，請及時找我，聯絡E-MAIL：dibazh@online.sh.cn</marquee>”的這段代碼就指明了文字以預設值SCROLL的方式進行滾動。
3． LOOP。這是指定文字滾動的迴圈次數。當LOOP=-1或LOOP=INFINITE時，則表明文字滾動
是無限迴圈。
4． SCROLLDELAY。這是指文字滾動的速度。它的單位是毫秒。再看此代碼“<marquee
border="0" align="middle" scrolldelay="120">若您需要協助，請及時找我，聯絡E-MAIL：dibazh@online.sh.cn</marquee>”，其中的“scrolldelay="120"”表示，文字捲動速度為120毫秒。
5． ALIGN。這是滾動文字的對齊屬性也就是處於的位置。它有TOP（對齊上方），MIDDLE（對
齊中部），BOTTOM（對齊下方）三個對象。上段代碼中的“align="middle"”則明確了文字的位置是在中部。另外，此元素不僅能夠用在MARQUEE中而且在其他元素中也經常用到，例如，TABLE，TD等等。它們的用法與含義與MARQUEE是相同的。
好了，HTML介紹到此就該告已段落。現在再回首看一下上文開始時的網頁代碼，您是否覺得太簡單了。（慘啦！又有一位網頁高手出現了，我的“飯碗”不保。）是啊！作為網頁編寫語言――HTML它真的是非常容易。筆者只用了很少的時間便能徹底領悟它的精髓，我想對於聰明的讀者來說肯定是不在話下的。
在寫本文時，筆者遇到一位電腦朋友，他勸我不要寫這篇文章因為如今有很多網頁編輯軟體，如ProntPage98，Dreamweaver3等等，它們都能自動產生網頁，為何還需研究HTML呢？這位朋友的話初聽起來不無道理，然而仔細想想便感到他的話缺乏“品味”。其實HTML語言是所有網頁的基礎，對於一個想成為WEB高手的您來講，學習HTML是必不可少的。就象今天我們雖有計算機，但在學數學時仍須從“1+1=2”開始一樣，這就是基本功。要知道“建立在沙漠中的宮殿，再豪華也會倒塌的。”（因為缺乏基礎！）
最後，祝願您們都能成為WEB高手！若有問題，請E-MAIL本人:　dibazh@online.sh.cn。

　　摘自《軟體世界》　/文