HTML文件是像一般文字(如ascii)格式檔一樣,，可用任何文書編輯器（例如pe2， vi等）來編輯產生。只不過是文件中有一些字元由一些富有不同意義的標籤(tags)所 標示，以定義文件之結構性與其文件間之邏輯關連。簡言之，ＨＴＭＬ是以各式各樣 的標籤在文件中來描述多媒體的資訊（以超連結的方式個別儲存於外部的檔案中） 而已。下面是一個HTML文件範例的骨架：
<html><head> <title>結構文件範例</title></head> <body> <h1>第一層標題</h1> <p>這是html文件範例，必須注意title文字不會顯示於本文區，而由h1定義的 標題會顯示於本文區，title之"結構文件範例"文字會顯示在視窗的頂部。 <ul> <li>無編號列表之第一項 <li>無編號列表之第二項 </ul> <p>這是另一段落，對段落而言雖應有尾標籤</p>與之成對，在技術上 是可省略。在段落內之文字可作顯目效果，<i>This sentence of the paragraph is in italics.</i> <img align=bottom src="nthumap.gif" alt="Warning:"> 歡迎蒞臨清大 <a href="/ccc/index.html">電算中心</a> </body> </html>
HTML主要的能力是:在於它可以把某一串文字或某個圖片連結到另一個由一致資源 定位器URL(Uniform Resource Locator,URL)所描述的文件。該串文字將會被瀏覽 器以高亮度的方式顯示在螢幕，一般是以呈藍色加底線來表示這是一個超文字的 連結(hyperlinkt) 。當游標移至連結物件時游標立即會呈佛手狀。 HTML的超文字連結標籤是一個<A>，用來代表一個定位錨(Anchor)，若要包含 一個定位錨在你的文件中，則以下方式行之：
1.定位錨的標籤是以小於的符號加在字母A之前 (<A) 作為開始。 2.空一格後，利用參數 HERF="URL filename" 來指定所要連結的文件。 然後以大於的符號 (>) 作為結束。 3.在大於符號之後，鍵入要在文件中顯示代表該連結的文字或某個圖片(元件內容)。 4.最後以尾標籤 </A> 作為結束。
其格式如下： <A HREF="scheme://host[:port]/dir/subdir/filename">anchor name</A> 其中"scheme://host[:port]/dir/subdir/filename" 就是一致資源定位器 (URL )， URL 的格式是被WWW 文件用來要取得資料或服務時能快速確定資料之位置與 取得方式(Access Method)。例如參考到其他伺服器上（諸如gopher,wais,http）的 檔案。其中scheme是取得方式,其有下列其中之一: http ：一個WWW 伺服器的檔案。 file ：一個本地系統的檔案,或是在一個不具名(anonymours)FTP伺服器的檔案。 gopher：在Gopher伺服器上的一個目錄或檔案。 例如： gopher://gopher.nthu.edu.tw:70/11/ccc/faq。 WAIS： 在WAIS伺服器上的檔案。 news ： 一個Usenet newsgroup。例如：news:nthu.ccc ＊對netscape特例: news://NewsServer/newsgroup -->載入某個NewsServer之某個newsgroup newspost://NewsServer/newsgroup -->對某個NewsServer之某個newsgroup post 文章. telnet ： 連結到一個Telnet-base 的伺服器上。例如：telnet://y14/。 ftp ： 連結到一個不具名(anonymous)FTP伺服器上的檔案。例如：ftp://y5/ mailto：例如："mailto:your_email@address"。 注意：mailto後沒有"//"。 "mailto:wjchou@oz.nthu.edu.tw"。 ＊對netscape特例: "mailto:wjchou@oz.nthu.edu.tw?subject=SUBJECT_STIRNG"。 若服務需要user_id與passwd時，用「scheme://user_id:passwd@host/」 例如：ftp://user_id:passwd@y14/。但務必注意：若你的瀏覽器有設定 Proxies且WWW主機（HOME PAGE）也有設定Proxis cashe功能時，則您的 user_id與passwd會儲存於WWW主機的磁碟上，這對個人使用安全上是很大 的冒險，故建議不要隨意使用此法。 以下為一個超文字連結的範例： 登記前請參閱<a href="domi_mger.html">學生宿舍網路管理辦法!!</a> 其中「學生宿舍網路管理辦法!!」為元件內容，是進入點的標示字, 連結到名稱為 domi_mger.html的文件中。在本例中該文件務必和目前的文件置於同一個目錄之下 才行。你也可以以絕對路徑或相對路徑的方式 ，與其他目錄下的文件建立連結關係。 例如:若domi_mail.html是在目前子目錄ccc之下的檔案, 你可以以下面的方式作相對 連結(Relative Links):
<A HERF="ccc/domi_mail.html">wjchou</A>聯絡 你也可以用絕對路徑作連結。例如你想要連到一份html user guide, 你可以在你 的文件中鍵入:
<A HERF="http://www.ncsa.uiuc.edu/General/Internet/HTMLPrimer.html"> NCSA's Beginner's Guide to HTML</A> 這樣你就可以產生一個超連結(hyperlink)到"NCSA's Beginner's Guide to HTML"。 一般而言儘量以相對連結的方式較好。除了可少打幾個的字之外,更重要的是當你要移 動一群的文件到其他的地方時, 相對路徑仍然有效又好用。相對地當你在連結一份文 件時, 若採用絕對路徑的方式，則所連結目錄將不再具有相對性。例如:考慮要編寫諸 如使用手冊的文件, 在這群內文件的連結應該採用相對連結。連結至其他群（手冊）的 文件時,則應該採用完整路徑的方式。如此一來, 當你將該文件整個搬到別的目錄下時, 對於這些連結都不用再加以修改了。
通常也稱為Numbered List。其用法如下:
1.由<OL>標籤為開始。
2.每個列表項都以<LI>標籤為開始(沒有</LI>標籤的必要)。
3.以</OL>標籤為結束。
例如:
<OL>
<LI> 工學院.
<LI> 理學院.
<LI> 文學院.
</OL>
其輸出結果如下:
1 工學院.
2 理學院.
3 文學院.
通常也稱為Unnumbered List。其與有序編號列表一樣，只是用<UL>來
作為列表的開始, 而不是<OL>。
例如:
<UL>
<LI> 工學院.
<LI> 理學院.
<LI> 文學院.
</UL>
其輸出結果如下:
‧ 工學院.
‧ 理學院.
‧ 文學院.
列表可以在<body>內任意放置, 當然也允許多階層次的列表排列，我們稱之巢式
列表（Nested List）。例如一個多階層次無序編號列表（有序編號列表亦同）如下：
<UL>
<LI> 工學院
<UL>
<LI> 電機系
<LI> 化工系
</UL>
<LI> 理學院
<UL>
<LI> 物理系
</UL>
</UL>
其結果如下:
‧工學院
‧電機系
‧化工系
‧理學院
‧物理系
一個敘述式列表是以<DL>標籤為起頭，緊隨以主題置於敘述標籤(<DT>)
之後面，,再來就是以敘述部份附加於敘述標籤(<DD> )後面，最後以</DL>
結尾。瀏覽器會將敘述部份變為新的一行，且其文字串內容會自動遇視窗邊緣轉折。
<DT>與<DD>一般是成對使用。在<DT>和<DD>中也可以包含
多個段落(以<p> 來加以分隔) 、列表、或是其他的連結。
例如:
<DL>
<DT>學生宿舍網路的建立
<DD>為將實驗室的網路使用環境擴充至各學生寢室，免除學生往返穿梭苦，
本校全部學生宿舍十九棟，皆已完成 10 BASE-T 乙太網路，並與校園光纖
網路連結。學生只需經 WWW 或 GOPHER 登記即可使用。
<DT>校園資訊系統的逐步擴充
<DD>81年起將學校的各項重要資訊納入GOPHER系統。83年起再
利用 WWW 系統，將各項資訊逐步擴充，並多媒体化。
</DL>
其結果如下:
學生宿舍網路的建立
為將實驗室的網路使用環境擴充至各學生寢室，免除學生往返穿梭苦，本校全部
學生宿舍十九棟，皆已完成 10 BASE-T 乙太網路，並與校園光纖網路連結。學
生只需經 WWW 或 GOPHER 登記即可使用。
校園資訊系統的逐步擴充
81年起將學校的各項重要資訊納入GOPHER系統。83年起再利用 WWW 系統，將各
項資訊逐步擴充，並多媒体化。
若需要如下排列顯示時：
1
1.1
1.1.1
1.1.2
1.2
2
2.1
3
可用下列排列結構：
<dl>
<dt>1
<dd>1.1<dl>
<dd>1.1.1<dd>1.1.2</dl>
<dd>1.2
<dt>2
<dd>2.1
<dt>3</dl>
HTML一般文件裡對空白或換行等字元會失去效用。若使用<PRE>與</PRE> 標籤時，則可引入一段固定寬度字形的文章，且能發揮換行、空白應有的功能。若未在 <PRE>內之章節中需有空白時，須使用全形空白；而換行字元須以強迫換行標籤 （Line Break）"<BR>"代替。在<PRE>內之章節中除保留原有文件 格式外，是允許其他標籤存在（例如連結、列表、字元格式等）。 這對諸如 「程式文件」般的表達是十分有用的。但其文字串內容是不會遇到視窗邊緣而自動 轉折，故最好以 WIDTH屬性設定每行的長度（需視瀏覽器之功能）。例如:
<PRE WIDTH=60> #!/usr/local/bin/perl $| = 1; #flush on print "Content-type: text/html\n\n"; print "<Head><Title>學生宿舍網路</Title></Head>"; print "<Body><H1>Thank you, NTHU CCC</H1>"; if ($ENV{'REQUEST_METHOD'} eq "POST") { read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'}); } elsif ($ENV{'REQUEST_METHOD'} eq "GET") { $buffer=$ENV{'QUERY_STRING'}; } # Split the name-value pairs @pairs = split(/&amp;/, $buffer); foreach $pair (@pairs) { ($name, $value) = split(/=/, $pair); $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; # associative array ---indexed by string $IN{$name} = $value; } </PRE>
結果為 #!/usr/local/bin/perl $| = 1; #flush on print "Content-type: text/html\n\n"; print "<Head><Title>學生宿舍網路</Title></Head>"; print "<Body><H1>Thank you, NTHU CCC</H1>"; if ($ENV{'REQUEST_METHOD'} eq "POST") { read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'}); } elsif ($ENV{'REQUEST_METHOD'} eq "GET") { $buffer=$ENV{'QUERY_STRING'}; } # Split the name-value pairs @pairs = split(/&/, $buffer); foreach $pair (@pairs) { ($name, $value) = split(/=/, $pair); $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; # associative array ---indexed by string $IN{$name} = $value; } 請注意：在<PRE>的章節中若有『 < ， > ， &』等字元時，因在 HTML中其有特別的意義, 故應該用所謂的「跳脫字序」(escape sequences) 『<，>，&』來代替這些字元。
文章內字元格式的多樣化，有助於文意的表達。其字元樣式的型態有：邏輯（logical） 和實體（physical）兩種 。邏輯樣式標籤是根據文字的意義來加以標示, 而實體 樣式標籤則是指定字元要在螢幕上以何種固定的樣式顯現。例如：我們要在 前面 句子所提到的「邏輯樣式」的字串上以 斜體字顯示，可以利用邏輯樣式標籤（如 <em>）把他像定義般的加以標示。當然我們也可以利用實體樣式標籤（如< i>）所提供的功能來達到相同的效果。 在字元樣式的使用上，建議盡可能使用邏輯樣式標籤， 基本上文章是應該和其表示 方法分開的，故用邏輯樣式的好處是：當你想以另一種文字樣式來展現文章時， 你 只要改變定義在瀏覽器中原有的定義即可，例如：MOSAIC之Choose Font或NETSCAPE 之PERFERANCE。 另一個採用邏輯樣式標籤的優點是他可以加強文意的一慣性。即同樣性質的文字都以 同樣式來展現。例如在文字上標示<H1>的標籤要比去記住第一層的標題是採用 什麼樣的文字型態要簡單的多。同理其他同樣字元的樣式設定也是如此用意。例如:就 <STRONG>這個標籤而言， 大部分的瀏覽器都是產生一個較粗的字元（如同< B>設定）。但如有人想要以紅色字來顯示時。則邏輯樣式就能輕易地提供使用者如 此般的彈性。
※一般邏輯樣式有： <DFN> 用來表示被定義字元, 通常是斜體字。 <EM> 強調字元。通常是斜體字。 <CITE> 用在書的標頭(title)。 通常是斜體字。 <CODE> 用在顯示程式碼的片段。通常以較寬的字元來顯示。 <KBD> 表示由使用者鍵盤的輸入。應該是以加粗的較寬字元來表示, 但許多的瀏 覽器是以正常的較寬字元來表示。 <SAMP> 用來表示電腦狀態的描述字元。以較寬的字元來表示。 <STRONG> 表示特別強調的意思。以加粗的字元來表示。 <VAR> 給在句子構造中的變數使用。通常以斜體字來表示。
※實體樣式(physical Styles) <B> 加粗字體。 <I> 斜體字體。 <TT> 打字機文字。即較寬的文字。 某些瀏覽器支援將標籤以一組的方式表現出來(例:<B><I>Sometext</I> </B>來表示加粗的斜體字元) 。在其他的瀏覽器可能只會處理最內部的標籤。 在這裡還是勸告各位不要用字元樣式標籤弄成一組的方式。
在HTML中有四個ASCII字元集( > , < , & , " ) 是有其特殊意義,
不能像其他字元一般的正常顯示，甚至會讓瀏覽器誤解原意。所以若要顯示的話，
就需要所謂「跳脫字序」(ESCAPE SEQUENCES)的方法。
若想要在HTML文件中鍵入上面所提到的四個字元中的任何一個，則需用下列的方式
來代替。例如：
字元 表示字元（跳脫字序）
Less-than sign ( < ) <
Greater-than ( > ) >
Ampersand sign itself ( & ) &
Double quote sign ( " ) "
可參閱 ISO Latin-1 字元
跳脫字序不像HTML的標籤一樣, 他是屬於大小寫相關的。你不可以用<來取代
「<」。這取決於瀏覽器.
NCSA Mosaic可以在HTML文件中顯示X Bitmap(XBM)或GIF 格式的圖形。每個圖形會
需較長的時間來處理，致使延長顯現整個文件的時間，故儘可能不要包含太大太多
或重疊的圖。此一般用於小的圖行或圖示(icon)。
想要將一個圖形引入你的文件中你要使用下列的語法:
例如<img align=top src="nthumap.gif" alt="Warning:"> 歡迎蒞臨清大
符號 名稱 功能
======================================================================
＜ 前標籤前界符號
----------------------------------------------------------------------
img 標籤名稱（元件名稱）
----------------------------------------------------------------------
src 屬性名稱 其屬性值應為URL。
----------------------------------------------------------------------
＝ 屬性值界定符號
----------------------------------------------------------------------
"nthumap.gif" 屬性值 欲顯示目前目錄之圖形檔名稱。
----------------------------------------------------------------------
align 屬性名稱 圖片與說明文字對齊(選項)
-----------------------------------------------------------------------
＝ 屬性值界定符號
-----------------------------------------------------------------------
top 屬性值 將圖片與說明文字「歡迎蒞
臨清大」與圖片上方對齊。
middle 與圖片中間對齊。
bottom 與圖片底部對齊。(內定)
-----------------------------------------------------------------------
alt 屬性名稱 圖形的替換文字顯示
-----------------------------------------------------------------------
＝ 屬性值界定符號
-----------------------------------------------------------------------
"Warning：" 屬性值 當軟硬體環境無法顯示圖形
檔案時，以此字串代替。
----------------------------------------------------------------------
＞ 前標籤尾界符號
----------------------------------------------------------------------
除了以上所介紹之屬性名稱（align等），尚有 ismap屬性名稱，其用於地圖導引，
由圖面裡某位置之參考座標，連結至相關的物件。例如：
<a href="/cgi-bin/htimage/ccc/index.conf">
<img src="index.gif" ismap></a>
index.conf 定義圖面裡index.gif某位置之參考座標，與其連結關係。有興趣請
參考：http://wintermute.ncsa.uiuc.edu:8080/map-tutorial/image-maps.html。
上節曾提過：文件若以線上秀圖 方法去顯示太多太大的圖形，會影響整個HTML文件
的展現速度。故當你的圖形很大，或是想要讓使用者能選擇性地覽圖時，你可以考慮
以外在呼叫圖形的方式來秀圖，此法可讓使用者以一字串或一小圖示，連結至另一
個文件、圖形、聲音或動畫（由外在軀動程式獨立另開新的視窗來展現物件）。這種
外在呼叫的方式有助於減少整個文件的展現時間。其表式方法如下：
<a href="http://www.nthu.edu.tw/bobodog/nthu01.gif">清大封面檔</a>
至於聲音與動畫之展現方式，與上述方法相同。唯一不同之處在於副檔名。
檔案形態 副檔名 MOSAIC NETSCAPE
==============================================================
一般文字 txt int int
HTML文件 html int int
GIF圖形檔 gif int int
JPEG圖形檔 jpg或jpeg ext int (in:可線上秀圖
TIFF圖形檔 tiff ext ext ext: 外在呼叫)
XBM圖形檔 xbm ext ext
PostScript檔案 ps ext ext
AIFF聲音檔 aiff ext ext
AU聲音檔 AU ext ext
QuickTime動畫檔 mov ext ext
MPEG動畫檔 mpeg 或 mpg ext ext
--------------------------------------------------------------
<HR>標籤會在瀏覽器視窗產生一個等寬的行，其常用於標題（heading）、
章節與敘述內容間之分隔物件。
<HR ALIGN=left|right|center WIDTH=percent | number SIZE=number>
ALIGN值內定為center.
例如：
<HR>
<HR ALIGN="left" WIDTH=60% SIZE=3>
<BR>標籤是用來強迫換行用的一個標籤。
若在<BLOCKQUOTE>與</BLOCKQUOTE>標籤間有文章時，其格式在螢幕上
將成為往內凹且前後留出段落的獨立區塊。
註解以 <!-- 註解內容 --> 來表示.
<ADDRESS>標籤在HTML的文件中通常是用來介紹文件作者，同時提供 與作者聯絡的方式(例如:E-Mail Address)。一般是放在檔案的最末端。例如：
<ADDRESS> 周文正(Wen-Jeng Chou)，清大電算中心(CCC NTHU)<p> E_MAIL: wjchou@cc.nthu.edu.tw<br> 02/27/95<br> </ADDRESS>
若要在Oz domain內（y11～y16）建立自己的HOME PAGE,可依下列步驟完成：
1.將自己$HOME（例如:使用者ID是u812345）改變存取權限
chmod 711 u812345 ( or chmod 711 .)
2.在自己$HOME下建立子目錄WWW（大寫）:
mkdir WWW
chmod 711 WWW
3. cd WWW
4.在WWW下建立index.html檔，此檔就是你的HOME PAGE檔
如何在瀏覽器下使用你的HOME PAGE:
Open URL ===> http://www.oz.nthu.edu.tw/~u812345/
5.常見問題
Ｑ、我的 Browser 出現 "403 Forbidden, Your client dose not have
permission to get URL/~xxxxxx/ from this server.
Ａ、這表示你的目錄權限(permission)未開放，請將你的目錄權限打開。
將自己的目錄(Home Directory)存取權限至少改為為 711 (drwx--x--x)。
在 login 自己的帳號後，可用如下的指令：
> chmod 711 .