HTML文件是像一般文字(如ascii)格式檔一樣,,可用任何文書編輯器(例如pe2, vi等)來編輯產生。只不過是文件中有一些字元由一些富有不同意義的標籤(tags)所 標示,以定義文件之結構性與其文件間之邏輯關連。簡言之,HTML是以各式各樣 的標籤在文件中來描述多媒體的資訊(以超連結的方式個別儲存於外部的檔案中) 而已。下面是一個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 --------------------------------------------------------------
畫面安排文件內容是用"畫面集"
標籤 ,