建立HTML文件

標籤用法

基礎標籤

URL概說

當Home Page的製作與HTML語言

HTML的結構與製作

Home Page與Browser

回資處的首頁

　

　

當Home Page的製作與HTML語言

初學者一定會感到疑惑, 到底我們在瀏覽器(Browser)看到的文字和圖案是怎樣跑出來的, 其實就是瀏覽器HTML文件, 而HTML文件的內容就是告訴瀏覽器有哪些文字放在那裡, 有哪些圖片要如何擺放等等。

HTML(Hypertext Marker Language)可譯為「超文字標記語言」, 當你在瀏覽網站 時可用『View』功能表中的『Document Source』(Netscape), 或『檢視』功能表中 的『原始檔』看到你所瀏覽網站的HTML內容。

HTML的結構與製作

在HTML文件中可以看到一些很正常的文字, 如『歡迎光臨...』等等, 但是奇怪的 是怎麼會有<br>, <font color=Red>等等, 到底"<"和">"有什麼用途呢, 原來是把"<" 和">"所組成的記號來控制文字, 圖形以及其他的編排, 我們把它稱做『標籤』(Tag)。HTML也可算是一種語言, 因此就要有一套制訂標準才行, 而制訂HTML的單位就是有名的W3C, 有空可以去看看, 可以學到更多Tag, 而且因為不斷在制訂新版本, 所以還會學到新的Tag。至於到底要用什麼工具來編寫HTML文件呢?其實HTML本身就是純文字檔, 所以只要是 文字編輯器就可以製作了, 例如Win95的Notepad和 word等等皆可。

Home Page與Browser

r 是不是相同的HTML文件用不同的Browser瀏覽就會有不同的結果呢?沒錯!因為不同的瀏覽器支援的HTML格式不太相同, 而且還各自訂一些不同的語法(以後幾招會提到), 所以在設計網頁時要留心不同Browser瀏覽你的網頁造成不同的效果, 目前主流應該是Netscape和MSIE, 所以多注意這兩個的語法就差不多了。

　

　

建立HTML文件

要產生HTML文件其實很簡單, 只要在Browser內用『File』功能表的『New Docume nt』(Netscape Golden版)即可,或是直接建立一個附檔名為htm或html皆可, 例如hahaha.htm或hahaha.html, 這樣瀏覽器就會知道它是HTML文件了。

　

　

標籤用法

大家若看過別人的HTML文件, 常可以看到:

<標籤名>文件內容.. 而這個標籤名大小寫是沒有關係的, 例如<HTML>和<hTmL>作用都是相同的, 另外標籤大致可分為兩種:

出雙入對型:這種標籤一定成對出現, 例如<BODY>, 接著一定會看到</BODY>其格式就是:

<標籤名>文件內容</標籤名>

獨來獨往型:這種標籤是個獨行俠, 只單獨出現, 例如:<HR>, <P>等等。

　

　

基礎標籤

<HTML>

表示為HTML文件, 必須把<HTML>放在文件最前面, 並把</HTML>放在文件最後面 , 格式為:

<HTML>

....(文件內容與其他標籤)

</HTML>

<HEAD>

顯示文件資訊

<BODY>

顯示文件本文

<TITLE>

顯示文件標題, 例如:<TITLE>你好, 這是我的首頁</TITLE>, 你就會在Browser 最上方看到。而文件最基本的結構就是:

<HTML>

<HEAD>

....(文件資訊)

<TITLE>文件標題</TITLE>

</HEAD>

<BODY>

....(文件內容)

</BODY>

</HTML>

<BR>

換行, 假如你建立一個HTML文件內容為:

<HTML>

<HEAD>

<TITLE>我是範例</TITLE>

</HEAD>

<BODY>

鹿仗客使出玄冥神掌就要擊到張無忌,

但是就在此時, 張無忌暗運九陽神功...

</BODY>

</HTML>

你可以從結果(按一下)看到, 原來在HTML文件裡的第二行有空好幾格, 但是結果卻只空一格, 這是因為不管你有多少空格, Browser都把你當成一格, 另外原本是兩行文字, 但是瀏覽器顯示的卻只有一行, 原來Browser是看標籤做事的, 你必須加上<BR>才行, 瀏覽器只要一看到它就會馬上換行, 例如:

<HTML>

<HEAD>

<TITLE>我是範例</TITLE>

</HEAD>

<BODY>

鹿仗客使出玄冥神掌就要擊到張無忌, <BR>但是就在此時,張無忌暗運九陽神功...

</BODY>

</HTML>

你就可以看到結果(按一下)如我們所願了。

<P>

分段, Browser只要一看到它就會馬上換行, 並多空出一行。

<PRE>

使用原有排列, 例如:

.........

<BODY>

<PRE>

　

半神半聖亦半仙, 全儒全道是全賢;

腦中真書藏萬貫, 掌握文武半邊天。

-素 還 真

</PRE>

</BODY>

結果(按一下)就會跟你排列的一模一樣。

<HR>

加分格線, 為了分隔每一篇文章, 我們可以加入一個標籤<HR>, 如此就會產生分隔線。讀者可能覺得這個分隔線不好看, 因此可以考慮用載入圖片的方式來當分隔線.

<P ALIGN>

設定文章對齊方向, 共有三種方向可以設定, 如果HTML文件如下:

.........

<BODY>

<P ALIGN=LEFT>

我向左對齊

<P ALIGN=CENTER>

我向中對齊

<P ALIGN=RIGHT>

我向右對齊

</BODY>

就會看到如下的效果:

我向左對齊

　

我向中對齊

　

我向右對齊

不過如果遇到標籤<HR>, <H1>時, 以後的文字又會回到向左對齊。

<CENTER>

向中對齊, 它和<P ALIGN=CENTER>不同的是, 他不受<HR>, <H1>的影響,

而且他是出雙入對型的標籤, 用法如下:

<CENTER>

　

.........(要使之向中對齊的文字)

</CENTER>

<COMMENT>

注解標籤, 被括住的文字是注解用, 不會出現, 用法如下:

<COMMENT>我是注解文字, 我不會出現</COMMENT>

但是這個標籤Netscape看不懂, 因此我們可以改用大家都看得懂的標籤, 如下:

<!--注解文字可以放在這裡-->

　

　

URL概說

URL(Uniform Resource Locator)可稱之為『一致性資源定位器』, 主要是用來指明 資料在網際網路上的取得方式與位置, 格式如下: Protocol://Host Name.Domain Name:Port/Path/FileName

通訊協定://伺服器網址:通訊阜/路徑/檔案名稱

若通訊阜為預設值, 則可不加『:通訊阜』, 以下是數種通訊協定:

通訊協定

範例

說明

HTTP

http://www.nctu.edu.tw

連接到交通大學首頁

TELNET

telnet://eden.cc.nctu.edu.tw

連接到伊電園的BBS站

GOPHER

gopher://gopher.nctu.edu.tw

連接到交通大學gopher系統

FTP

ftp://ftp.seed.net.tw

資策會FTP站

NEWS

news://tw.bbs.comp.hardware

硬體討論群

回資處的首頁