寫網入門

現在就教大家怎樣用寫網最基本的語言(HTML)去做一個網,若你能看完此頁,你應該能懂得怎樣用HTML去寫網!!!

CoffeeCup HTML Editor++ 98

版本：5.0
大小：3.8 MB
介面：所見即所得

Macromedia Dreamweaver

版本：1.2
大小：6.2 MB
介面：所見即所得

　

Homesite

版本：3.01
大小：6.5 MB
介面：HTML Tags

　

HotDog Professional Webmaster Suite

版本：5.0 Preview Release 1
大小：1.2 MB
介面：所見即所得

Hot Dog Pro 所下載的只是 Internet Installer，執行後會在網上下載所需的檔案和進行程式安裝。

　

Notepad

版本：95/98
大小：34 KB
介面：HTML Tags

　

Step 2 Well Begun is Half Done

選好了 HTML Editor 後，我們便可著手建立網頁了。無論你所用的 HTML Editor 是否 WYSIWYG (What You See Is What You Get 所見即所得) 都要對 HTML 的 Tags ﹝標籤﹞ 有所認識。首先讓我們學一些基本的 Tags 。

HTML Tags 都是被括號包著的，如 <HTML> 。所有被 < > 包著的，瀏覽器都會視它們為 HTML Tags ，而不會把它們顯示出來。

因為萬維網以至電腦都是在美國開始發展的，所以所有的指令及用字都是美式英語，與英式英語略有不同。例如 <centre> 就是錯的，應是 <center> 才對。而另外 HTML Tags 是沒有分大小寫的，所以 <HTML> 是與 <html> 一樣，沒有分別。

HTML 文件的格式是分開兩大部份的，第一部分是 <head> 與 </head> 之間的首部和 <body> 與 </body> 之間的主體部分。首部是提供了該檔案的資料如標題給瀏覽器，而主體部分更則是整個檔案的核心部分，就是內容，這部分亦是以下所介紹的 Tags 所構成的部分。

HTML剖析

大部分的 HTML Tags 都是一對對出現的，但當中亦有例外。一對 HTMLHTML 分別守著HTML的首尾，並說明此檔案為超文本文件。 HEAHEAD 故名思義是指該文件的首部，藏著文件的資訊。而其中的 TITLETITLE 則告訴瀏覽器內裏的文字為該網頁的標題，並會顯示在視窗上方的標題列上。既然 HEADHEAD 是指文件的首部，那麼 BODYBODY 便是指文件的身體即內容了。以下的方法可使 BODYBODY 控制整份文件。

大多數的 HTML 都是跟隨著以下格式的：

獨立式：<tag>

開關式：<tag></tag>

附設定：<tag option="setting"></tag>

BACKGROUND 是定義背景圖片，有如你們的桌面牆紙般在背後，但它是強制並排 (Tile) 的，不能單獨放在中央。BGCOLOR 是定義背景顏色，只有當你沒有設定背景圖片或瀏覽者關閉了顯然圖片功能的時候才會發揮其作用，但仍建議你設定。因為在載入背景圖片時，瀏覽器會暫時以背景顏色作為背景；而若瀏覽者關了瀏覽器的載入圖像功能，那麼，背景顏色便可發揮其作用了。

背景圖像忌用色過多和過鮮，因為這往往會使前景文字混淆不清。

TEXT、LINK、VLINK、ALINK分別是定義其文字、超連結、已瀏覽的超連結(Visited Link)、正被選擇的超連結(Active Link)。若以上的項目是沒有設定的話，瀏覽器會以預設值取代。

Step 3 字裡行間

字體大小

在文字處理方面，則有用來控制字體大小的Ｈ(Heading) 家族和FontSize，沒有被它們包圍著的文字，瀏覽器便會以預設的字體來出來。

標題 Heading <H#>文字</H#>

H 家族是用來控制標題的，其格式是 <H#> ，# 為標題字體大小的級數，成員共有六個，由 1 至 6 ，1 最大而 6 是最細。

<H1></H1>

<H2></H2>

<H3></H3>

<H4><H4>

<H5></H5>

<H6></H6>

H 家族是用來控制標題大小，用作處理全行文字，當遇到不同級數的文字時便會自動跳行。

字型 Font <font face="字體名稱" size="#"><b><i><u>文字</u></i></b></font>

而內文方面則有 <font size="#"></font> 的 tag，這個 tag 十分靈活，能使同一行中的文字大小作出變化，還提供多達七種的大小。

至於字元的格式，分別有標準、粗體、斜體和加底線。

<b>Bold</b>

<i>Italic</i>

<u>Underline</u>

<b><i><u>粗斜底線混合使用</u></i></b>

我們亦可以用<font face="FontName"></font>來定義所用的字體。

<font face="Arial">Arial</font>
<font face="Times New Roman">Times New Roman</font>
<font face="Sans-Serif">Sans-Serif</font>
<font face="Courier New">Courier New</font>
<font facee"Verdana">Verdana</font>

Arial
Times New Roman
Sans-Serif
Courier New
Verdana

因為很多人都有以上的字體，所以很多人都用些字體來製作網頁。如你看不到這些字體有何變化，亦即表示你並未安裝該種字形。

若瀏覽者是沒有安裝到該被定義的的字體是時，他是看到的只會是預設字體。

版面設計 Layout

段落 <p>文字</p> / 文<br>字

一段文章的首尾都必定要分別有<p>和</p> (Paragraph)，否則整篇文章便會變成一篇巨大的文章了。另外，除非你加了<p></p>，否則瀏覽器是不會理會你跳行的。

一己應為之事，勿求他人，
今日應為之事，勿待明天。

一己應為之事，勿求他人，今日應為之事，勿待明天。

但若你只想強制地要瀏覽器替你跳行而又不想另起一行的話，你可以用 <br> (Line Break)。

一己應為之事，勿求他人，<br>
今日應為之事，勿待明天。

一己應為之事，勿求他人，
今日應為之事，勿待明天。

在普通的文字處理程式上按兩次空白鍵(Space Bar)即出現兩個空白位，但在HTML裡，無論多少空白位仍被瀏覽器視為一個空白位。

列點

當你想列點的時候，便可用一套 HTML Tag。列點是有許多種方式的：

以點列點

由 <ul> (Unordered List) 開始及以 </ul> 作完結，把每一點括在 <li></li> (List Item) 中。

HTML
VRML
CGI

以數列點

與前者差不多，但由 <ol> (Ordered List) 開始及以 </ol> 作完結，同樣把每一點括在 <li></li> (List Item) 中。

HTML
VRML
CGI

以字列點

這個就與前略有不同，由 <dl> (Definition List) 開始及以 </dl> 作完結，<dt></dt> (Definition Term) 及 <dd></dd> (Definition Data) 分別定義每一點的標題及內容。

<dl>
<dt>HTML</dt>
<dd>Hyper-Text Markup Language</dd>
<dt>VRML</dt>
<dd>Virtual Reality Modeling Language</dd>
<dt>CGI</dt>
<dd>Common Gateway Interface</dd>
</dl>

HTML: Hyper-Text Markup Language
VRML: Virtual Reality Modeling Language
CGI: Common Gateway Interface

如果想把標題如首兩者般放在內容旁，我們可以以 <dl compact> 為開首。

<dl compact>
<dt>HTML</dt>
<dd>Hyper-Text Markup Language</dd>
<dt>VRML</dt>
<dd>Virtual Reality Modeling Language</dd>
<dt>CGI</dt>
<dd>Common Gateway Interface</dd>
</dl>

HTML: Hyper-Text Markup Language
VRML: Virtual Reality Modeling Language
CGI: Common Gateway Interface

點內有點

只要把一組組的列點代替每一點，便可出現點內有點的效果了。

<ol>
<li>Browsers:</li>
<ul>
<li>Microsoft Internet Explorer</li>
<li>Netscape Communicator</li>
</ul>
<li>E-mail Clients:</li>
<ul>
<li>Agent</li>
<li>Eudora</li>
</ul>
</ol>

Browsers:
- Microsoft Internet Explorer
- Netscape Communicator
E-Mail Clients:
- Agent
- Eudora

不同的列點方式是可混合使用的。

縮排

未作縮排

縮排文字

<p>未作縮排</p>
<blockquote>
第一次縮排
<blockquote>
第二次縮排
<blockquote>
第三次縮排
</blockquote>
</blockquote>
</blockquote>

未作縮排

第一次縮排

第二次縮排

第三次縮排

文件原形

如果你想把一篇文章，毋須受到 HTML Tag 的限制，即不理會<P></P>、<BR>、多個空白位等，而完完整整的以 HTML 方式重現在瀏覽器上，那你便要用到 <PRE></PRE> (Preformatted)。在 <PRE></PRE> 內的文字將以原本的形態重現在瀏覽器上。

<pre>
Preformatted

reformatted </pre>

Preformatted
<  P  R  E  > reformatted

一些特別的符號是不能如普遍文字般篇寫，要以內定的編碼替，請參閱特別字元表。

平衡線 Horizontial Line

上面那條分隔線是由 <HR> (Horizontal Line) 造成的，雖然只是一條平衡線，但也有許多變化。

align 是介定該條平衡線是靠那一出現，width 是介定該條平衡線相對該瀏覽器視窗的百分比， color 當然是指它的顏色了。

Step 4 超連結

超文本文件 (HTML) 擁有超連結 (HyperLink) 功能，使其文件能超出一般文件件的範疇。超連結即是把個別的文字或圖片連結到一頁或一個檔案去。

<a href="http://i.am/hksunday">HongKongSunday</a>

HongKongSunday

超連結的 Tag 是 A(Anchor)，後面是接著一個空白位，而空白位後面就接著 href="URL" ，URL(Uniform Resource Locator)是去在 Internet 上指定一個檔案，接著的內容就是要連結的東西，之後以A結尾。

除了檔案外，還可以超連結至 E-mail Address 上。

<a href="mailto:hksunday@hotmail.com">Mail to HKSunday</a>

Email to HKSunday

其實在HREF後只須要是一URL，所以我們其實可以超連結至：

檔案	File	file:
檔案傳送協定	File Tansfer Protocol	ftp:
地鼠	Gopher	gopher
超文本傳送協定	Hyper-Text Transmission Protocol	http:
超文本安全傳送協定	Hyper-Text Transmission Protocol(Security)	https:
電子郵件	E-mail	mailto:
新聞組	Newsgroup	news:
遠端傳送協定	Telnet	telnet
	WAIS	wais:

試試這個：

How to link with E-Mail address

試過後，讓我們了解是如何做的。首先，在一個特定的位置上放好一對 <a name="#pos"></a> 的 Tags，這可以在另一頁 HTML 文件，通常是括著標題的。接著便可在另一處放上超連結，及把它連結到 #pos，便完成了。

在檔案目錄處理方面是以 UNIX 的 / 取代 DOS 的 \。另外，上一層的目錄是以 ..表示。

HTML 文件的所在位置：http://www.domain.com/path/filename.html

所連結檔案的所在位置：http://www.domain.com/linked.zip

那麼，該連結應是：<a href="../linked.zip">Linked File</a>

Step 5 錦上添花

當我們撰寫了一個網頁後，試用瀏覽器看一看，是否覺得如開水的淡而乏味？是的，一個網頁除了文字外，圖片也是很重要的。說到圖片，就不得不介紹Paint Shop Pro了。Paint Shop Pro不但提供了一個強大的編輯圖片功能，更能支援上數十種圖像格式。

在網上，大多數圖片的格式都是以GIF和JPEG為主，這因為大多數瀏覽器都支援該兩種圖片格式。

GIF 與 JPEG 之 256 色圖像比較

	GIF	JPEG
原圖
中間放大

GIF 與 JPEG 之 16M 色比較

	GIF	JPEG
原圖
中間放大

	2 色	16 色	256 色	32K 色	64K 色	16M 色
GIF	支援	支援	支援	不支援	不支援	不支援
JPEG	不支援	不支援	不支援	支援	支援	支援

GIF 適合用來儲存一般圖片，而 JPEG 則是適合用來儲存相片。

我們在網頁上加上以下的 Tags，就可以把圖片加上去。

SRC (Source)定義你所選用的圖片檔案，WIDTH 及 HEIGHT 是分別定義其闊度及高度，BORDER 則是定義其邊界，而 ALT (Alternate text)是定義用來取代該圖片的文字，當有瀏覽者設定他的瀏覽器不載入圖片時或當滑鼠在該圖片上的時候，文字便會出現。

Step 6 The Sound of Music

當你為了自己的網頁變得五光十色的時候，有否想過為它加上聲音呢？

試試加入以下的 tag:

bgmusic.mid 是其背景音樂的檔案名稱，可以更改為你自己所選用的檔案名，它可以是聲波檔(*.wav; *.au) 或 MIDI Sequencer (*.mid)。後半部的 LOOP 是指該檔案須播放多少次，INFINITE 為無限次。

要留意的是以上的 tag 乃專為 Microsoft Internet Explorer 而設的，並不適用於 Netscape Navigator。

為了使兩者也能夠兼容。我們便要使用以下的 Tags：

SRC (Source)定義你所選用的音效檔案，HIDDEN 用來設定是否隱藏播音機。

Step 7 桌子與地圖

桌子

在網頁上列表，你須要以下的一套 Tags。

A	B
C	D

標籤	功用
<table></table>	定義列表
border	設定邊闊
cellpadding	設定內容與內邊的空位
bgcolor	設定背景顏色
bordercolor	設定邊界顏色
bordercolorlight	設定暗面邊界顏色
bordercolordark	設定光面邊界顏色
<tr></tr>	定義行
<td></td>	定義內容

Step 8 跳入框框

在網頁上加上 frames 可使設計多變化和讓瀏覽者不用再重新下載同一網頁。

<html>
<head>
<title>Frames Within A Homepage</title>
</head>
<frameset rows="100%" cols="15%,*">
<frames name="Frame1" src="menu.html" scrolling="auto">
<frames name="Frame2" src="main.html" scrolling="auto">
</frameset>
</html>

以一對 <frameset></frameset> 取代 <body></body>，rows 和 cols 分別用來定義行列的分割，frame 是定義一個框架，name、src分別用來定義該框架的名稱和 html 文件來源，scrolling 是設定有否捲軸，可設定成 yes, no 和 auto。

上下

下分

a
c	d

左右

其中的 name 是十分重要的，因為要令那些超連結能在這些 frames 中走來走去，都是全靠這些 name 作定位。

這樣，那頁 page.html 便會在 a 框中出現了。而

便會令 page.html 在整個瀏覽範圍中出現，即破框而出。

頁首