免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
資訊科技 ND076DR-2論壇現已開授網上製作網頁班及Photoshop教學班以及攝影教學班及EXCEL教學班...請各同學留意及支持! 感謝各同學一值支持資訊科技 ND076DR-2論壇!!!
返回列表 發帖

[13.01.16] 網頁製作 基礎編

本文來自:資訊科技 ND076DR-2http://nd076dr2.258club.com/★ 轉帖請註明出處! 作者:麥多芬 您是第4993個瀏覽者

免責聲明
購買主題 已購買人數:0  記錄 本主題需向作者支付 10 金錢 才能瀏覽
分享到: QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友

歷史上的今天:

本帖最後由 麥多芬 於 2013-1-16 11:37 編輯
HTML 教學
基礎入門

什麼是HTML

 

  HTML就是超文件標示語言(HyperText Markup Language)。主要是在瀏覽器中顯示一份文件的內容。它本身並非程式設計,只不過是標示(Mark-up),用來強調及組織一般性的文字。HTML是由一些標記(tags)所構成,每個標記對瀏覽器下一個特定的指令,這些指令會告訴瀏覽器如何顯示文件的內容。

  編輯HTML不需要多麼高級的軟體配備,你只要有『記事本』這項軟體就可以了。但記得,HTML文件的副檔名有些奇怪,你必須設定為 .htm 或是 .html 才行。例如: index.htm 是一個合法的HTML檔名,但 index.txt 就不是了。你可能聽過一些HTML的編輯程式如:HotDogCutrHTML....等。對初學者而言,使用這些工具並不太好。雖然它們的設計目的是幫助你更容易使用 HTML 來工作。但不幸的是,其中有許多會將 HTML 的代碼隱覽起來,造成學習上的困難。那麼,編輯好的HTML檔要怎麼看呢?你要有瀏覽器,不論是 IE 或 是NetScape 都行。利用瀏覽器中的『開啟檔案』的功能就可以看到你所編輯的HTML檔了。

  HTML是由很多的文件標記( Document Tags )所組成,這些標記在你建立的每一個HTML文件都會用到。它們會對文件檔中不同的部份作不同的定義。大部分的標記都是成對的( 圍堵標記 Container Tags),即包含『起始標記』『結束標記』。如<HTML>表示網頁的開始,而</HTML>代表網頁的結束。起始標記和結束標記差別就在於前面的斜線符號而己。標記本身沒有大小寫的區分,不過建議是使用大寫字母,以便在文字編輯器中容易識別。

  一個HTML的基本語法範例如下:

<HTML>

<HEAD>
<TITLE>我的第一個網頁</TITLE>
</HEAD>

<BODY>
空山不見人,但聞人語響;返景入深林,復照青苔上。
</BODY>

</HTML>

  顯示結果

  首先,我們必需讓Web瀏覽器知道這是一個HTML文件,我們必需加上起始標記:

<HTML>

  注意:是<HTML>而不是HTML。所有的標記指令都包含了 < 和 > 兩個符號,這是 HTML 的標記規則,如果沒有包含括號,瀏覽器會把這些指令當作文字顯示在網頁中。所以,瀏覽器將 <HTML> 視為標記指令,但 HTML 則視為一般文字。

  HTML的頁首是你輸入網頁標題(TITLE)的地方。輸入以下的文字,可以建立 HTML 的頁首標題,如下例:

<HEAD>
<TITLE>我的第一個網頁</TITLE>
</HEAD>

  有了頁首後,你就要輸入文字、圖形等資料作為本文了。在</HEAD>標記後輸入以下文字可以插入本文部份:

<BODY>
</BODY>

  在兩個標記之間,你可以輸入網頁的其它文字或圖形,如下例:

<BODY>
空山不見人,但聞人語響;返景入深林,復照青苔上。
</BODY>

  最後,我們必需結束整個HTML文件,因此我們必需加上結束標記:

</HTML>

  如此一來,它便是一個完整的Web文件了。

TOP

本帖最後由 麥多芬 於 2013-1-16 11:37 編輯
HTML 教學
基礎入門
什麼是HTML
段落


段落

 

  在了解了基本的HTML標記後,我們就可以在網頁內輸入文字了。如先前所提的,你在網頁內輸入的文字必須在<BODY></BODY>間,往後所介紹的標記,除了特殊的語法外,都必須遵照此項規則,不再敘述。

  為了使段落分明,你可以用段落標記<>來控制,標記如下:

<>空山不見人,</P>
<>但聞人語響;</P>
<>返景入深林,</P>
<>復照青苔上。</P>

  顯示結果如下:

空山不見人,

但聞人語響;

返景入深林,

復照青苔上。

  在技術上,<>是一個圍堵標記,但是在 HTML 中,並不需要 </P> 作結尾,這使得許多人誤以為 <> 是空標記,而把它拿來當作是段落間的一個空白行。這並非 <> 的設計目的。使用 <> 作為圍堵標記,可以使你的 HTML 文件在所有的瀏覽器中顯示最可信任的結果。 HTML 的設計精神是用 <> 來作段落區隔的。

  在HTML的標記中,有些是可以加上屬性設定的。如段落標記<;P>也可以用來控制文字的對齊方式,如果我們加上ALIGN的屬性設定,則可控制段落中的文字向左(LEFT)、右(RIGHT)或是置中對齊(RIGHT)。範例如下:

<;P ALIGN=RIGHT>
這段文字會向右對齊</P>
<;P ALIGN=CENTER>
這段文字會向中對齊</P>
<;P ALIGN=LEFTt>
這段文字會向左對齊</P>

  顯示結果如下:

這段文字會向右對齊

這段文字會向中對齊

這段文字會向左對齊

 

  大部份所輸入的文字應該包含在圍堵標記中,如<;P>....</P>。一般情況下,瀏覽器會忽略文字之間的空白,或是 ENTER 。如以下的 HTML 碼:

<;P>
空山不見人,
但聞人語響;
返景入深林,
復照青苔上。
</P>

  看起來很不錯,但在瀏覽器中呈現出來的結果是:

空山不見人, 但聞人語響; 返景入深林, 復照青苔上。

  不是我們所要的結果吧! 有時,上下文字之間並不希望有太大的間距,那麼段落標記就不太適合了,我們可以改用換行標記<BR>來分隔上下的文字,標記如下:

空山不見人,<BR>
但聞人語響;<BR>
返景入深林,<BR>
復照青苔上。<BR>

  顯示結果如下:

空山不見人,
但聞人語響;
返景入深林,
復照青苔上。

  利用一些分隔線<HR>將文件中的不同部份隔開,會使得版面清晰,你也可以用它來分隔文件主體和文件末的一些資訊。不同於<;P>,分隔線標記<HR>是一個空標記( Empty Tag )這類標記只有一個起始標記,沒有結束的標記。因為它們的作用在於標記指令本身,而不會影響到其他的文字。語法如下:

鹿柴 <HR>
空山不見人,<BR>
但聞人語響;<BR>
返景入深林,<BR>
復照青苔上。<BR>

  顯示結果如下:

鹿柴


空山不見人,
但聞人語響;
返景入深林,
復照青苔上。

  如同<;P>標記,<HR>本身還有一些屬性的設定。如 WIDTH 屬性可以設定水平線的寬度,你可以用百分比來設定寬度,如 50% ,則水平線佔整個視窗寬度的一半;你也可以用絕對值來設定寬度,如200,則水平線的寬度為200像素。屬性 SIZE 則是設定水平線的高度,單位為像素。屬性 ALIGN 則是設定水平線的對齊,設定值請參考「段落」那一部份,一些設定的範例如下:

寬度為400像素的水平尺規:
<HR WIDTH=400>


寬度為瀏覽器一半的水平尺規:
<HR WIDTH=50%>
 

高度為15像素的水平尺規:
<HR SIZE=15>


 

靠左的水平尺規:
<HR WIDTH=50% ALIGN=LEFT>


 

靠右的水平尺規:
<HR WIDTH=50% ALIGN=RIGHT>


實心水平線:
<HR NOSHADE>


 

  任何介於 <!-- --> 之間的內容都會被忽略,也就是說,你無法在瀏覽器上看到這些內容。一般而言,說明標記( Comment Tag )是為你自已作的,你也可以在文件中利用說明標記來加入版權或是個人資訊。例如:

<!--本文版權為 『老師不在時 』網站所有,未經許可,請勿複製 -->

  你可以利用<COMMENT>....</COMMENT>標記來表示,上面的語法可寫成:

<COMMENT>本文版權為 『老師不在時 』網站所有,未經許可,請勿複製 </COMMENT>

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題


文字標題

 

  我該如何改變字體的大小呢?第一種選擇,我們可以將文字設定為標題字。標籤的格式如<Hn>n代表1至6的數字。n值愈小,則標題愈大,有效的運用標題,可以幫助你組織整個文件。範例如下:

<H1>落日照大旗</H1>
<H2>落日照大旗</H2>
<H3>落日照大旗</H3>
<H4>落日照大旗</H4>
<H5>落日照大旗</H5>
<H6>落日照大旗</H6>

顯示結果如下:

落日照大旗

落日照大旗

落日照大旗

落日照大旗

落日照大旗
落日照大旗


   屬性 ALIGN 在設定標題字的對齊方式,可用的值有 LEFT(靠左)CENTER(置中)RIGHT(靠右)。LEFT是預設值,不用設定,自然是靠左對齊的。例如:

<H1>落日照大旗</H1>
<H2>落日照大旗</H2>
<H3>落日照大旗</H3>
<H4 ALIGN=CENTER>落日照大旗</H4>
<H5 ALIGN=RIGHT>落日照大旗</H5>
<H6>落日照大旗</H6>

顯示結果如下:

落日照大旗

落日照大旗

落日照大旗

落日照大旗

落日照大旗
落日照大旗

有效率的使用標題標記,可以讓你很快的在網頁中加入組織層次。看一下底下的範例:

<H1>李白詩選</H1>
<HR>
<H2>採蓮曲</H2>
<>若耶溪旁採蓮女,笑隔荷花共人語。<BR>
日照新妝水底明,風飄香袂空中舉。<BR>
岸上誰家遊治郎,三三五五映垂楊。<BR>
紫騮嘶入落花去,見此踟躕空斷腸。
</P>
<H2>烏夜啼</H2>
<>黃雲城邊烏欲棲,歸飛啞啞枝上啼。<BR>
機中織錦秦川女,碧紗如煙隔窗語。<BR>
停梭悵然憶遠人,獨宿孤房淚如雨。
</P>

顯示結果如下:

李白詩選


採蓮曲

若耶溪旁採蓮女,笑隔荷花共人語。
日照新妝水底明,風飄香袂空中舉。
岸上誰家遊治郎,三三五五映垂楊。
紫騮嘶入落花去,見此踟躕空斷腸。

烏夜啼

黃雲城邊烏欲棲,歸飛啞啞枝上啼。
機中織錦秦川女,碧紗如煙隔窗語。
停梭悵然憶遠人,獨宿孤房淚如雨。

DIY ARMCANDY Multi Chain Link Bracelet

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體


字形字體

 

  除了上述的標題字標記外,我們也可以利用文字標記<FONT SIZE=n>來改變字形的大小,n代表1到7的數字,數字愈大,則字體愈小。範例如下:

<FONT SIZE=1>落日照大旗</FONT><BR>
<FONT SIZE=2>落日照大旗</FONT><BR>
<FONT SIZE=3>落日照大旗</FONT><BR>
<FONT SIZE=4>落日照大旗</FONT><BR>
<FONT SIZE=5>落日照大旗</FONT><BR>
<FONT SIZE=6>落日照大旗</FONT><BR>
<FONT SIZE=7>落日照大旗</FONT><BR>

顯示結果如下:

落日照大旗
落日照大旗
落日照大旗
落日照大旗
落日照大旗
落日照大旗
落日照大旗

  另一種型式的表式方式是在 N 值前加上符號;如果加上正號(+)代表比預期的字型大 N 級,如果加上負號(-)代表比預期的字型小 N 級,而所謂的預期是指3。範例如下:

<FONT SIZE=-2>落日照大旗</FONT><BR>
<FONT SIZE=-1>落日照大旗</FONT><BR>
<FONT>落日照大旗</FONT><BR>
<FONT SIZE=+1>落日照大旗</FONT><BR>
<FONT SIZE=+2>落日照大旗</FONT><BR>
<FONT SIZE=+3>落日照大旗</FONT><BR>
<FONT SIZE=+4>落日照大旗</FONT><BR>

顯示結果如下:

落日照大旗
落日照大旗
落日照大旗
落日照大旗
落日照大旗
落日照大旗
落日照大旗

  你當然也可以改變預設字體的大小值,語法如:<BASEFONT SIZE=N>,其中的N值必須在1至7之間,因為HTML文件的字型大小是在1到7之間的。範例如下:

明月幾時有<BR>
<BASEFONT SIZE=5>
把酒問青天<BR>
<FONT SIZE=-2>不知天上宮闕</FONT><BR>
今夕是何年

顯示結果如下:

明月幾時有
把酒問青天
不知天上宮闕
今夕是何年


你可以很好色

  除了改變字體大小外,標記<FONT>也提供COLOR屬性用來指定文字的顏色。指定的方式是在屬性COLOR後面加上色譜的組合#rrggbb,rr代表紅色系gg代表綠色系bb代表藍色系。數值可由00 ~ FF,00代表最弱的顏色效果,而FF代表最強的顏色效果,範例如下: 

<><FONT SIZE=1 COLOR="#FF0000">紅色</FONT>
<><FONT SIZE=2 COLOR="#FF8040">橙色</FONT>
<><FONT SIZE=3 COLOR="#FFFF00">黃色</FONT>
<><FONT SIZE=4 COLOR="#00FF40">綠色</FONT>
<><FONT SIZE=5 COLOR="#00FFFF">藍色</FONT>
<><FONT SIZE=6 COLOR="#0000FF">靛色</FONT>
<><FONT SIZE=7 COLOR="#FF00FF">紫色</FONT>

顯示結果如下:

紅色

橙色

黃色

綠色

藍色

靛色

紫色


  標記<FONT>也提供FACE屬性可用來指定文字的字型,不過前提是使用者的電腦中也必須有相對應的字型才可以,如果沒有,瀏覽器便會以系統預定的字型來顯示指定的文字。範例如下:

<FONT SIZE=4 FACE="華康粗圓體, 標楷體, 細明體">
馬鳴風蕭蕭</FONT>
<FONT SIZE=4 FACE="華康粗圓體, 細明體,標楷體">
馬鳴風蕭蕭</FONT>

  上述範例中,瀏覽器會先以華康粗圓體來顯示文件內容,如果使用者電腦中沒有該字體,則會以標楷體來顯示文件內容,依此類推。顯示結果如下:

馬鳴風蕭蕭
馬鳴風蕭蕭

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果


文字效果

 

  非隱藏式標記( Explicit Tags )標記也稱為實體標記( Physics Tags ),因為這些標記很清楚的告訴瀏覽器你所希望的文字的顯示面貌。基本的非隱藏式標記屬於圍標記,允許使用者將文字標記為粗體(bold)斜體(italic)加底線(underline)。加上一些簡單的文字標記可以讓你的文字更加多樣化,

這是<B>粗體字</B><BR>
這是<I>斜體字</I><BR>
這是<U>加底線</U>的字

顯示結果如下:

這是粗體字
這是斜體字
這是加底線的字

非隱藏式標記的另一個特性是可以和其他的圍堵標記一起使用,範例如下:
 

這是<B><I>粗體加斜體的效果</I></B>的字

顯示結果如下:

這是粗體加斜體的效果的字


  隱藏式標記( Implicit Tags)又稱為邏輯標記( Logical Tags),因為它們給予瀏覽器在顯示文字時的一些自由,這類標記如頁首標記(TITLE),通常它們會與其他的標記並存,當然,這和所用的瀏覽器也有關係。常用的有:

標記 意義 一般用法
<EM>, </EM> 強調 斜體
<STRONG>, </STRONG> 特別強調 粗體
<TT>, </TT> 打字字體 類似打字效果

範例如下:

我所<EM>強調</EM>的是<STRONG>HTML很簡單</STRONG><BR>
大家都<TT>同意</TT>吧

顯示結果如下:

我所強調的是HTML很簡單
大家都同意

  在早期的瀏覽器中是有分辨隱藏式和非隱藏式標記的必要性,使用隱藏式的標記會造成在不同的瀏覽器中產生不同的觀看效果,這應該是我們所不願意見到的。底下列出一些有關文字效果的一些標記:

標記 顯示結果
<SUP>上</SUP>標字 標字 
<SUB>下</SUB>標字 標字 
<CODE>程式行</CODE> 程式行
<KBO>鍵盤字</KBO> 鍵盤字 
<SAMP>範例</SAMP> 範例 
<VAR>變數</VAR> 變數 
<CITE>傳記引述</CITE> 傳記引述 
<BLOCKQUOTE>引述文字區塊</BLOCKQUOTE>
引述文字區塊
<DEF>術語定義</DEF> 術語定義 
<ADDRESS>街道或E-mail</ADDRESS>
街道或E-mail 
<STRIKE>刪除線</STRIKE> 刪除線 
<BIG>大</BIG>一點 一點 
<SMALL>小</SMALL>一點 一點 
<BLINK>文字閃爍</BLINK> 文字閃爍 

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果

本文效果

 


  以前曾提到過<BODY>這個標記,它是用來定義 HTML 文件的主體的。因此,適當的在 <BODY>內加上一些屬性設定,相當於在空白的舞台上搭起背景,可讓你的網頁更具看頭。

  先前你自行練習的網頁背景是白色的,這也是預設的顏色,透過<BODY>的BGCOLOR屬性,我們可以指定網頁的背景顏色。範例如下:

<BODY BGCOLOR=AQUA>>
背景是水藍色的
</BODY>

<BODY BGCOLOR=#0000FF >
背景是藍色的
</BODY>
顯示結果 顯示結果

  在顏色值的設定方面,我們可以有兩種表示方式;一種是利用#RRGGBB的設定方式(參考文字設定部份),一種是直接指定顏色的英文名稱,如下表。一些常見的色彩我們可以用顏色的英文名稱來指定顏色,如果無法記得英文名稱,就只好用色譜值(#rrggbb)來指定顏色了。

aqua 水藍色 black 黑色 blue 深藍色
yellow 黃色 gray 灰色 green 綠色
lime 萊姆色 maroon 粟色 navy 軍艦藍
olive 橄欖綠 purple 紫色 red 紅色
sliver 銀色 teal 藏青色 white 白色

  網頁的預設文字的顏色是黑色的,不過你可以使用 TEXT 屬性更改網頁的文字顏色。範例如下:

<BODY BGCOLOR=#0000FF text="#FFFF00">
背景是藍色的,文字是黃色的
</body>
顯示結果

  在顏色值的設定方面,你可以利用#RRGGBB的設定方式。

  透過 BACKGROUND這個屬性,我們可以指定網頁的背景圖片,圖檔格式是GIF或JPG都可以,不過要記得指明圖片的路徑所在。範例如下,img代表路徑的名稱,b28.gif則是圖片的名稱:

 

<BODY BACKGROUND="img/b28.gif>
這是一個背景圖的設定範例
</BODY>

顯示結果

  如果我們再加上BGPROPERTIES=FIXED的屬性設定,則可設定出浮水印的效果,觀看範例時請拉下捲軸,比較一下兩個範例的背景有何不同。範例如下:

<BODY BACKGROUND="img/b28.gif BGPROPERTIES=FIXED>
這是一個浮水印的設定範例
</BODY>

有浮水印效果  沒有浮水印效果

  要用大一點的背景圖或是小一點的背景圖呢?直覺上,一個50*50的背景圖的檔案大小當然比100*100 的的圖的檔案來得小,因此,為了加快下載速度,當然是使用50*50的圖檔了。一般情況下,這是正確的。但如果你所有的網頁都使用同一個背景圖的話,結果 就不是這樣了。當你瀏覽過一個網頁後,該網頁的資訊會暫存在你電腦中的Cache中,圖檔當然是暫存在電中了。假設你的視窗是400*400,如果你使用 50*50的圖檔,電腦要將圖『填』64次才會佔滿視窗;如果你使用100*100,電腦只要填16次。如果多個網頁都使用同一個圖,這些時間是抵得上圖 片下載時間的差異的。

  打開你電腦的喇叭吧,讓我們在網頁中加入一些音樂。加入BGSOUND這個屬性,我們可以讓網頁跳出無聲的世界。範例如下:

<html>
<head>
<title>背景音樂設定</title>
<bgsound src="image/CANYON.MID" loop="-1">
</head>
<BODY>
記得打開喇叭喔!
</body>
</html>

顯示結果

  在設定值中,SRC 後面接的是聲音檔的路徑檔名,LOOP 控制的是聲音的播放次數,-1 代表無限次播放,你也可以以 infinite 來代替。

  很討厭的是,如果你是使用 NS 的瀏覽器,你是聽不到聲音的,上面的語法只能用在 IE 中。如果你要在 NS 中能聽到背景聲音,你必須將上面白色字的部份改成:

<EMBED SRC="image/CANYON.MID" VOLUME="95" AUTOSTART="TRUE" CONTROLS="SMALLCONSOLE" LOOP="TRUE" WIDTH="50" HEIGHT="15"></EMBED>

  在藍色部分是檔名,大小寫不同可能會被視為是不同的檔名。 VOLUMN 設定的是聲音的大小,而AUTOSTART 設定為 TRUE會使得聲音檔在載入得立即播放,你也可以設定為 FALSE 。

  有一個不太好記的屬性 CONTROLS ,是用來設定聲音播放面板的格式的,而 WIDTH 及 HEIGHT 則是設定面板的大小。LOOP 設定音效播放次數,TRUE 表示不停的放.

  如果你希望設定的背景聲音,不管是在 IE 或是 NS 中都能播放,那你就必須將兩段語法一起加進你的網頁中了。


  你有沒有注意到每次你做出來的網頁,文字和視窗的最左上角都有一點矩離。那就是瀏覽器的邊界設定了。文字還好,有時你要加上專屬於你的網頁的圖片,有那麼一點邊邊就不好看了。

  TOPMARGIN可以設定元件跟視窗的上邊界,而LEFTMARGIN就是設定左邊界了。邊界的單位以像素為單位。範例如下:

<body bgcolor="#008080" text="#FFFF00">
<p><img border="0" src="image/html.gif" width="250" height="78"></p>
<p>這是有邊界的網頁</p>
</body>
<body bgcolor="#008080" topmargin="0" leftmargin="0">
<p><img border="0" src="image/html.gif"></p>
<p>這是上邊,和左邊都設為0的網頁</p>
</body>
顯示結果 顯示結果

  先不用理會圖片是怎麼產生的,注意一下白色字的部份就可以了。


TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單


無序號清單 (Unorder List )


  當我們所要傳達的訊息是一條一條的說明時,這種就是所謂的清單資料。在短時間內傳送大量資訊最好的方法就是使用多層次的清單。清單讓你的文件看來更有層次、更有組織,使用者也可以很容易地找到他們所需要的資訊。常用的情況下,清單分為無順序的清單及有順序的清單。這個單元,我們介紹無序號的清單。

  簡單的方式便是將主題分為幾個項目,基本上這些項目間並沒有什麼次序,但逐一的列出可使主題更為明顯。標記<UL></UL>可用來標示一段無順序的清單區域,<LH>可用來標示整個區域的標題,並不一定要存在,但如果你使用<LH>來為立清單標題,標題字並不會有特殊的字形變化。而<LI>則用來標每一個項目。對照範例如下:

<H3>中華職棒聯盟</H3>
<UL>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>時報鷹
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</UL>

<UL>
<LH>中華職棒聯盟
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>時報鷹
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</LH>
</UL>

顯示結果如下:

中華職棒聯盟

  • 兄弟象
  • 統一獅
  • 興農牛
  • 時報鷹
  • 三商虎
  • 味全龍
  • 中信鯨
    中華職棒聯盟
  • 兄弟象
  • 統一獅
  • 興農牛
  • 時報鷹
  • 三商虎
  • 味全龍
  • 中信鯨

  請注意的是,這個範例除了表示列表的使用方式,及LH這個標記的效果外,這並不是一個良好的寫作方式。在HTML2.0的標準中,在多層次的清單中使用頁首標記(Hn)並不是一個好習慣,因為你可以只是用頁首標記來達到強調的效果,但頁首標記的設計目的是使網頁更有組織有系統,並非用來強調文字的。雖然大多數的瀏覽器可以正確的顯示,但此舉可能影響清單的美觀。如必要,考慮一下使用<FONT>這個標記吧。


    實心圓形是<UL>標籤的內定符號,但<UL>標籤也有一些不同符號的設定:

  TYPE=disc   符號為圓點,為內定值
  TYPE=circle   符號為空心圓點
  TYPE=square 符號實心方塊

範例如下:

<H3>中華職棒聯盟</H3>
<UL TYPE=disc>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</UL>

<H3中華職棒聯盟</H3>
<UL TYPE=circle>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</UL>
<H3>中華職棒聯盟</H3>
<UL TYPE=square>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</UL>

顯示結果如下:

中華職棒聯盟

  • 兄弟象
  • 統一獅
  • 興農牛
  • 三商虎
  • 味全龍
  • 中信鯨

 

中華職棒聯盟

  • 兄弟象
  • 統一獅
  • 興農牛
  • 三商虎
  • 味全龍
  • 中信鯨
 

中華職棒聯盟

  • 兄弟象
  • 統一獅
  • 興農牛
  • 三商虎
  • 味全龍
  • 中信鯨
 


  你可以根據你自已的需要,來混合使用上述的三個符號,你不必使用多個<UL>,因為這樣會形成多個清單區域。你只要在<LI>標記後面加上符號的形式就可以了。範例如下:

<H3>中華職棒聯盟</H3>
<UL TYPE=disc>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>三商虎
<LI TYPE=circle>味全龍
<LI TYPE=square>中信鯨
</UL>

顯示結果如下:

中華職棒聯盟

  • 兄弟象
  • 統一獅
  • 興農牛
  • 三商虎
  • 味全龍
  • 中信鯨

 

TOP

HTML 教學
基礎入門
什麼是HTML
段落
標題
字形字體
文字效果
本文效果
項目清單
無序號清單
有序號清單


目錄(Directory)、定義(Definition)及選單(Menu)

  這三個清單方式是不屬於順序和非順序清單的,這三種清單方式交替的使用順序和非順序清單方式,並沒有固定的方式。「目錄」及「選單」基本上都是 簡單的清單;「定義」在所有的清單中是比較獨特的一個,因為在清單結構中提供二層的列項目;一個作項目定義,另一個作為自身的定義。


  使用<DIR>標記可以建立目錄清單。理論上,<DIR>標記的限制比較多一些;它是設計來顯示HTML頁的檔案及目錄結構的;技術上,它不支援HTML內部標記,雖然大部份的瀏覽器會將它顯示出來。使用範例如下:

目錄清單
<DIR>
<LI>兄弟象
<LI>統一獅
<LI>興農牛
<LI>時報鷹
<LI>三商虎
<LI>味全龍
<LI>中信鯨
</DIR>

顯示結果:

目錄清單

  • 兄弟象
  • 統一獅
  • 興農牛
  • 時報鷹
  • 三商虎
  • 味全龍
  • 中信鯨

  •   使用<MENU>標記可以建立選單清單。範例如下:

    選單清單
    <MENU>
    <LI>兄弟象
    <LI>統一獅
    <LI>興農牛
    <LI>時報鷹
    <LI>三商虎
    <LI>味全龍
    <LI>中信鯨
    </MENU>

    顯示結果如下:

    選單清單

  • 兄弟象
  • 統一獅
  • 興農牛
  • 時報鷹
  • 三商虎
  • 味全龍
  • 中信鯨

  •   它是用來作二層的項目清單,這個清單方式在許多場合是很有用的,而且它的一個好處是,前後一致不用符號或是數字。定義清單使用了 <DL> 及二個空標記: <DT>定義條目;<DD>定義項目。範例如下:

    定義清單
    <DL>
    <DT>日間班
    <DD>六個月
    <DD>六個月
    <DT>夜間班
    <DD>八週
    <DD>十週
    </DL>

    顯示結果:

    定義清單

    日間班
    六個月
    六個月
    夜間班
    八週
    十週

    TOP

    HTML 教學
    基礎入門
    什麼是HTML
    段落
    標題
    字形字體
    文字效果
    本文效果
    項目清單
    無序號清單
    有序號清單
    定義目錄選單


    目錄(Directory)、定義(Definition)及選單(Menu)

      這三個清單方式是不屬於順序和非順序清單的,這三種清單方式交替的使用順序和非順序清單方式,並沒有固定的方式。「目錄」及「選單」基本上都是 簡單的清單;「定義」在所有的清單中是比較獨特的一個,因為在清單結構中提供二層的列項目;一個作項目定義,另一個作為自身的定義。


      使用<DIR>標記可以建立目錄清單。理論上,<DIR>標記的限制比較多一些;它是設計來顯示HTML頁的檔案及目錄結構的;技術上,它不支援HTML內部標記,雖然大部份的瀏覽器會將它顯示出來。使用範例如下:

    目錄清單
    <DIR>
    <LI>兄弟象
    <LI>統一獅
    <LI>興農牛
    <LI>時報鷹
    <LI>三商虎
    <LI>味全龍
    <LI>中信鯨
    </DIR>

    顯示結果:

    目錄清單

  • 兄弟象
  • 統一獅
  • 興農牛
  • 時報鷹
  • 三商虎
  • 味全龍
  • 中信鯨

  •   使用<MENU>標記可以建立選單清單。範例如下:

    選單清單
    <MENU>
    <LI>兄弟象
    <LI>統一獅
    <LI>興農牛
    <LI>時報鷹
    <LI>三商虎
    <LI>味全龍
    <LI>中信鯨
    </MENU>

    顯示結果如下:

    選單清單

  • 兄弟象
  • 統一獅
  • 興農牛
  • 時報鷹
  • 三商虎
  • 味全龍
  • 中信鯨

  •   它是用來作二層的項目清單,這個清單方式在許多場合是很有用的,而且它的一個好處是,前後一致不用符號或是數字。定義清單使用了 <DL> 及二個空標記: <DT>定義條目;<DD>定義項目。範例如下:

    定義清單
    <DL>
    <DT>日間班
    <DD>六個月
    <DD>六個月
    <DT>夜間班
    <DD>八週
    <DD>十週
    </DL>

    顯示結果:

    定義清單

    日間班
    六個月
    六個月
    夜間班
    八週
    十週

    TOP

    HTML 教學
    基礎入門
    什麼是HTML
    段落
    標題
    字形字體
    文字效果
    本文效果
    項目清單
    無序號清單
    有序號清單
    定義目錄選單
    超連結
    加上連結


    超連結

     


      超連結是HTML文件中非常重要的一項功能,藉此我們可以將一些相關的文件連結起來,使它們能夠彼此參考。另外,我們也可以利用超連結的功能連上其他網址上的網頁,而達到網網相連的目的。產生超文字鏈結及超媒體鏈結的基本標記是 <A> (anchor tag),這是一個圍堵標記,要用 </A>作為結束,基本語法如下:

    <A HREF ="URL">連結的文字</A>

      注意 HREF ,雖然幾乎在每一個你所用的 <A> 標記都會用到它,但它只是 <A> 標記的一個簡單屬性,它用來指定連結的目的地的。範例如下:

    <A HREF="marquee.htm">跑馬燈教學</A>

    執行結果:

      很明顯的是,『跑馬燈教學』這幾個字在網頁上顯示的是加了底線,並以不同的顏色表現出來,表示按下這個句子就能啟動超文字連結。


     

      有沒有注意到上一個範例中,『跑馬燈教學』這個檔案是出現在現行的視窗中 ? 有時,這並不是我們希望文件出現的位置。但沒關系,我們可以利用TARGET這個屬性來設定連結的目標。

    基本上,TARGET的值有四個基本的設定:

    _SELF:瀏覽噞會使用同一個頁框來顯示超連結所設定的網頁。此為預設值。

    _TOP:瀏覽器會清除所有的頁框,然後使用整個瀏覽器來顯示超連結所設定的網頁。

    _BLANK:瀏覽器會開啟另一個新的瀏覽器視窗來顯示超連結所設定的網頁。

    _PARENT:瀏覽器會使用前一個畫面的頁框來顯示超連結所設定的網頁;如果沒有前一個畫面,則使用整頁顯示內容。

      一個簡單的範例範例如下,這次我們把網頁開在一個新視窗中:

    <A HREF="marquee.htm" TARGET=_blank>跑馬燈教學</A>

    按一下底下的連結吧:

     跑馬燈教學

      如果你對頁框還沒有概念,你可以先大致看一下頁框的教學範例。  

    TOP

    HTML 教學
    基礎入門
    什麼是HTML
    段落
    標題
    字形字體
    文字效果
    本文效果
    項目清單
    無序號清單
    有序號清單
    定義目錄選單
    超連結
    加上連結
    通訊協定


    不同通訊協定的連結

     

      再看一次超連結的語法:

    <A HREF="URL">連結的文字</A>

      URL(Universal Resource Locators)是一種位址的表示法,可以包含以何種協定進行連線。要連結那一個網址,連線的埠號,及檔案的路徑和名稱。URL可以用下列的式子來定義:

    <scheme>:<scheme_dependent_information>

      其中 <scheme> ,你也可以稱之為機制,表示某種傳輸協定,如 HTTP、FTP、或是 Gopher等等,而 <scheme_dependent_information> 中便是欲連結主機的資訊。整個配合 <A> 及 </A> 超連結標記,就成為:

    <A HREF="<scheme>://Host_Name.Domain_Name:port/path/file name>連結的文字</A>

      解釋一下:Host_Name是遠端主 (Server) 的名稱,而 Domain_Name 則是這台機器的名稱,例如:ccsun1.cc.nctu.edu.tru,其中 ccsun1 為 Host_Name,cc.nctu.edu.tru為 Domain_Name。port是指Server那裏提供 WWW 服務的埠號,一般是 80,大部份情況下,可省略不寫。

      看了上一段的英文字,我想大家頭痛了,事實上沒那麼難啦 ! 就是我們可以利用不同的通訊協定來指明各種的網路服務。例如:http可連至其他的Web伺服器,mailto啟動系統預的郵件編輯器來傳遞電子信件,telnet可用來登錄遠端的伺服器,而ftp可用來做檔案傳輸的服務。範例如下:

    連結至WWW站:
    <A HREF="HTTP://www.seed.net.tw">
    資策會SeedNet</A>
    連結至FTP站:
    <A HREF="Ftp://home.kimo.com.twt">
    奇摩站Ftp主機</A>
    連結至News站:
    <A HREF="News://news.ncu.edu.tw">
    中央大學News站</A>
    連結至Telnet站:
    <A HREF="Telnet://bbs.mgt.ncu.edu.tw">中央大學龍貓BBS站</A>
    連結至E-Mail:
    以上若有任何意見請寄信至
    <A HREF="Mailto:alex_cheng@ms9.url.com.tw">我的電子信箱</A>

    以下是顯示的結果:

    連結至WWW站: 資策會SeedNet
    連結至FTP站:奇摩站Ftp主機
    連結至News站:中央大學News站
    連結至Telnet站:中央大學龍貓BBS站
    連結至E-Mail:若有任何意見請寄信至我的電子信箱


      有沒有注意到 mailto 這個通訊協定,少了 // 是不是 ? 不是打錯,它就是要這樣用。還有一些屬於 mailto 這個通訊協定的設定也在這裏一併說明了。

      如果你已經按了上面 E-Mail 連結的範例,當開啟郵件軟體時,收件人的 Address 已經填上了,我們還可以加上一些範例,例如:

    Subject:加上主旨。

    CC:副本收件人。

      如果你要加上以上的項目,你必需用『?』來做連結,如果你有同一個項目中還有多個細項,你必需用『&』來連結,例如以下的語法都是合法的。

    例一:<A HREF="Mailto:alex_cheng@ms9.url.com.tw?Subject=讀者回函">我的電子信箱</A>

    例二:<A HREF="Mailto:alex_cheng@ms9.url.com.tw?Subject=讀者回函&CC=ufjl1300@ms9.hinet.net">我的電子信箱</A>

    例三:<A HREF="Mailto:alex_cheng@ms9.url.com.tw?Subject=讀者回函& CC=ufjl1300@ms9.hinet.net&CC=awayschool@kimo.com">我的電子信箱</A& gt;

    這是例三的顯示結果我的電子信箱


      有一個很特殊的通訊協定,file,用於在本機上的超連結,不同於其他的通訊協定,這個協定會直接連結到使用者的電腦裏的檔案。例如下面的語法:

    <A HREF=file:///c:\windows\Pbrush.exe>小畫家</A>

      你可以試一下是不是會開啟小畫家,如果不會,那就是你電腦中沒有這個檔案了。你要用這個語法,那你就保証別人的電腦中有著和你電腦中相同的檔案了。否則就會出現連結錯誤的訊息了。

      看到上述密密麻麻的斜線; 反斜線了吧 ! 頭是不是又昏了,這是我們下一個重點:路徑的表示。

    TOP

    HTML 教學
    基礎入門
    什麼是HTML
    段落
    標題
    字形字體
    文字效果
    本文效果
    項目清單
    無序號清單
    有序號清單
    定義目錄選單
    超連結
    加上連結
    通訊協定
    路徑設定


    路徑設定

     


      在目前這個網站中,如果我建立這麼一個連結:

    <A HREF="marquee.htm">跑馬燈教學</A>,或是
    <A HREF="http://home.kimo.com.tw/awaycheck/html/link/marquee.htm>跑馬燈教學</A>

      利用這兩種方法,我都可以建立同樣的超連結。先在這裏分清楚,前者是『相對路徑』的寫法,後者是『絕對路徑』的寫法。

      在超連結的設定中,相對路徑指的是我所要連結的檔案和目前的檔案所存放在網站之間的位置相對關係。這個用法只能用在存放於同一個網站內的檔案之間,相互連結。例如:你就不可能利用同樣的寫法來連結我的檔案。絕對路徑比較簡單,它直接標明了檔案在網路上的位置,你也可以直接利用絕對路徑的方式直接連結到我的檔案中。那麼何時使用相對路徑,何時使用絕對路徑呢 ? 一般我們使用的通則是:同一個網站內的檔案,我們大多使用相對路徑,不同網站內的檔案,我們一定會使用絕對路徑。

      在編寫HTML文件時,每個連結如果你都使用絕對路徑來填入URL(通常是可怕的一大串),尤其是當一個HTML檔提供了很多很多的連結時,這 些URLs會龐大到簡直是個大災難,讓一份小小的文件淹沒在URLs中。作者也會被這些URLs搞得不知道原來的文件到底長得什麼樣,只看到無止盡的 URLURLURLURLURL,然後文件的File Size也因這些URLs而暴增。更可怕的是,有朝一日一但你換了個帳號,或是在你的帳號底下有些的目錄要更動,很多或所有文件的URLs都要從頭改過, 豈不恐怖?相對位址可以幫我們解決這個問題。

      現在你所看的檔案的名稱是 link.htm,是放在:

    http://home.kimo.com.tw/awaycheck/html/link/link2.htm(絕對位址)

      如果我要連結『跑馬燈教學』這個檔案,它是放在:

    http://home.kimo.com.tw/awaycheck/html/link/marquee.htm(絕對位址)

      是放在同一個目錄中的檔案,如果我們要連結跑馬燈這個檔案,我們只要寫:

    <A HREF="marquee.htm">跑馬燈教學</A>就可以了 !

      不要乎略了一個事實是,你現在正在看這個網頁,也就是說你已經進到 http://home.kimo.com.tw/awaycheck/html/link/ 這個目錄中了,你要看『跑馬燈教學』這個檔案,難道你還要電腦重新找一次  http://home.kimo.com.tw/awaycheck/html/link/ 嗎?例如:你已經在台大了,你要問路,你應該會問『公館』在那裏(相對路徑),而不是問『台灣的台北的公館』在那裏(絕對路徑)吧 !


      這次我要連結一個檔案-範例一(ex1.htm),它是放在(絕對位址)

    http://home.kimo.com.tw/awaycheck/html/link/example/ex1.htm(絕對位址)

      這次,如果你要用相對位址的方式來連結,你要怎麼做呢?對了,是:

    <A HREF="example/ex1.htm">前往範例一</A>

      很簡單吧!『範例一』比目前的檔案『深』了一層,要連結它,你就把『深』了的路徑寫上去;如果你還連結『更深』層的檔案,你就看它『怎麼深』,你就『怎麼寫』吧 !

      往下層目錄連結沒問題了,那麼往上層呢 ? 假定我有一個檔案-範例二(ex2.htm),它是放在:

    http://home.kimo.com.tw/awaycheck/html/ex2.htm(絕對位址)

      這次,如果你要用相對位址的方式來連結,你要怎麼做呢?你不能說沒學過,是:

    <A HREF="../ex2.htm">前往範例二</A>

      『..』這個符號代表的是『上一層』的目錄。如果你要再上一層呢?例如有個檔案-範例三(ex3.htm),它是放在:

    http://home.kimo.com.tw/awaycheck/ex3.htm(絕對位址)

      這次,如果你要用相對位址的方式來連結的話,你要這麼寫:

    <A HREF="../../ex3.htm">前往範例三</A>

      唉 ! 往上幾層,你就點幾下就好了。

      又有一個情況,假定有一個檔案-範例四(ex4.htm),它是放在:

    http://home.kimo.com.tw/awaycheck/html/list/ex4.htm(絕對位址)

      再重新看一次,你現在看的檔案是放在:

    http://home.kimo.com.tw/awaycheck/html/link/link2.htm(絕對位址)

      很麻煩吧!其實了解了上一個的寫法就不會麻煩了,應該是:

    <A HREF="../list/ex3.htm">前往範例四</A>

      希望你都能了解,而且,最好能真的了解 !


      <BASE>標記可以在包含超連的文件內,將絕對位址變成相對位址,當你的網頁在同一個網站的許多子目錄下都需被連結時,這個標記就相當有用了,例如首頁。這個標記的格式如下:

    <BASE HREF="絕對位置">

      如果你曾經學過DOS,你把它想像成它的功能就如同 path 這個指令的功能,就更容易理解了。請注意,<BASE>只能用在<HEAD>標記之間。

      如果你的首頁的網址是 http://www.hi.com.tw/index.htm,你有一個檔案是放在 http://www.hi.com.tw/abc/123/sample.htm。那麼你要從sample.htm中連結到首頁,你應該加上:

    <A HREF="../../index.htm">回首頁</A>

      如果子目錄太多,檔案也多,這就不好了。你可以將sample.htm改寫成:

    <HEAD>
    <BASE HREF="http://www.hi.com.tw/">
    </HEAD>

    <BODY>
    <A HREF="index.htm">回首頁</A>
    ...........
    </BODY>

      如果一來,瀏覽噞就會在伺服器的主目錄下找尋 index.htm 而不管目前文件是存在那個目錄下了。如果你計畫要建立一個大型的 Web 站,你可能就會考慮在你的 HTML 範本檔案內加入 <BASE> 了。


    相對於上面的範例,連結到不同電腦中的檔案就簡單多了。例如:

    <A HREF="http://www.kimo.com.tw">奇摩站</A>

    <A HREF="http://www.hinet.net">中華電信</A>

    就直接把絕對位置放上去就可以了。  

    TOP

    HTML 教學
    基礎入門
    什麼是HTML
    段落
    標題
    字形字體
    文字效果
    本文效果
    項目清單
    無序號清單
    有序號清單
    定義目錄選單
    超連結
    加上連結
    通訊協定
    路徑設定
    內部連結


    內部連結 (Section Link)

     

      當HTML文件內容很長時,我們可在文件的前方建立索引以方便使用者查詢,這時我們可以藉由內部連結的方式讓使用者快速地前往相關的部份。底下有現成的範例,先連連看:

    詞   選


    李白:菩 薩 蠻 晏幾道:鷓 鴣 天 溫庭筠:南 歌 子


      要建立內部連結,首先你必需在連結的目的地先建立名稱標記,再利用<A>來連結這些標記。

      名稱標記是這樣建立的:利用標記<A>的<NAME>屬性用以建立一個可供識別的名稱標籤。如:

    <A NAME=LI></a>菩 薩 蠻
    。。。。。

    <A NAME=EN></a>鷓 鴣 天
    。。。。

    <A NAME=WN></a>南 歌 子
    。。。

      建立好名稱標記後,我們再利用#加名稱標籤來達到內部連結的目的。範例如下:

    <A HREF=#LI>李白:菩 薩 蠻</A>
    <A HREF=#EN>晏幾道:鷓 鴣 天</A>
    <A HREF=#WN>溫庭筠:南 歌 子</A>

      這是同一個檔案中有內部連結的範例,如果我要從別的檔案中連到這個檔案,而且直接看到溫庭筠的南歌子呢?我可以這麼表示:


    <A HREF="link4.htm#WN>溫庭筠:南 歌 子</A>

      檔案名稱再加上標籤名稱就行了。

      還有一些事情是需要再說明的。只有實際超連結文字才用“#“符號,NAME的設定中是不需要的。同時,NAME對大小寫是敏感的( case-sensitive ) ,假如 HREF 呼叫 WN,而 NAME 是 wn,這個連結可能沒辦法運作。


    菩 薩 蠻


    平 林 漠 漠 煙 如 織   寒 山 一 帶 傷 心 碧
    暝 色 入 高 樓   有 人 樓 上 愁
    玉 階 空 儜 立   宿 鳥 歸 飛 急
    何 處 是 歸 程   長 亭 更 長 亭


    此 首 望 遠 懷 人 之 詞 , 寓 情 于 境 界 之 中 。 一 起 寫 平 林 寒 山 境 界 , 蒼 茫 悲 壯 梁 元 帝 賦 雲 ﹕ 「 登 樓 一 望 , 唯 見 遠 樹 含 煙 。 平 原 如 此 , 不 知 道 路 幾 千 。 」 此 詞 境 界 似 之 。 然 其 寫 日 暮 景 色 , 更 覺 淒 黯 。 此 兩 句 , 白 內 而 外 。 「 瞑 色 」 兩 句 , 自 外 而 內 。 煙 如 織 、 傷 心 碧 , 皆 瞑 色 也 。 兩 句 折 到 樓 與 人 , 逼 出 「 愁 」 字 , 喚 醒 全 篇 。 所 以 覺 寒 山 傷 心 者 , 以 愁 之 故 ; 所 以 愁 者 , 則 以 人 不 歸 耳 。 下 片 , 點 明 「 歸 」 字 。 「 空 」 字 , 亦 從 「 愁 」 字 來 。 烏 歸 飛 急 , 寫 出 空 間 動 態 , 寫 出 鳥 之 心 情 。 鳥 歸 人 不 歸 , 故 雲 此 首 望 遠 懷 人 之 詞 , 寓 情 于 境 界 之 中 。 一 起 寫 平 林 寒 山 境 界 , 蒼 茫 悲 壯 。 粱 元 帝 賦 雲 「 空 佇 立 」 。 「 何 處 」 兩 句 , 自 相 呼 應 , 仍 以 境 界 結 束 。 但 見 歸 程 , 不 見 歸 人 , 語 意 含 蓄 不 盡 。

     

    鷓 鴣 天


    彩 袖 殷 勤 捧 玉 鐘   當 年 拚 卻 醉 顏 紅
    舞 低 楊 柳 樓 心 月   歌 盡 桃 花 扇 影 風
    從 別 後   憶 相 逢   幾 回 魂 夢 與 君 同
    今 宵 剩 把 銀 釭 照   猶 恐 相 逢 是 夢 中


    此 首 為 別 後 相 逢 之 詞 。 上 片 , 追 溯 當 年 之 樂 。 「 彩 袖 」 一 句 , 可 見 當 年 之 濃 情 密 意 。 拚 醉 一 句 , 可 見 當 年 之 豪 情 。 換 頭 , 「 從 別 後 」 三 句 , 言 別 後 相 憶 之 深 , 常 縈 魂 夢 。 「 今 宵 」 兩 句 , 始 歸 到 今 日 相 逢 。 老 杜 雲 ﹕ 「 夜 闌 更 秉 燭 , 相 對 如 夢 寐 」 , 小 晏 用 之 , 然 有 「 剩 把 」 與 「 猶 恐 」 四 字 呼 應 , 則 驚 喜 儼 然 , 變 質 直 為 宛 轉 空 靈 矣 。 上 言 夢 似 只 , 今 言 真 似 夢 , 文 心 曲 折 微 妙 。

     

    南 歌 子


    倭 墮 低 梳 髻   連 娟 細 掃 眉
    終 日 兩 相 思   為 君 憔 悴 盡   百 花 時


    此 首 寫 相 用 純 用 拙 重 之 筆 。 起 兩 句 , 寫 貌 ﹕ 「 終 日 」 句 , 寫 情 。 「 為 男 」 句 , 承 上 「 相 思 」 , 透 進 一 層 , 低 回 欲 絕 。


    南 歌 子


    懶 拂 鴛 鴦 枕   休 縫 翡 翠 裙
    羅 帳 罷 爐 薰   近 來 心 更 切   為 思 君


    此 首 , 起 三 句 三 層 。 「 近 來 」 句 , 又 深 一 層 。 「 為 思 君 」 句 總 束 , 振 起 全 詞 以 上 所 謂 「 懶 」 、 「 休 」 、 「 龍 」 者 , 皆 恩 君 之 故 也 。

                                

    TOP

    HTML 教學
    基礎入門
    什麼是HTML
    段落
    標題
    字形字體
    文字效果
    本文效果
    項目清單
    無序號清單
    有序號清單
    定義目錄選單
    超連結
    加上連結
    通訊協定
    路徑設定
    內部連結
    其他設定


    超連結的其他設定

     

    屬性 LINK=#rrggbb 設定未連結過的文字顏色
    VLINK=#RRGGBB 設定已連結過的文字顏色
    ALINK=#RRGGBB 指標按在可連結文字上的顏色

      上述這些標記是放在 <BODY> 中的,連結顏色的設定會影響整個網頁。例如以下的範例:

    <HTML>
    <HEAD>
    <TITLE>超連結及其他</TITLE>
    </HEAD>
    <BODY link="#008000" vlink="#FF00FF" alink="#808000">
    <A HREF="http://www.kimo.com.tw">奇摩站</A>
    </BODY>
    </HTML>

    顯示結果:奇摩站

      看吧 ! 連結文字的顏色不同了吧 ! 不過不太好使用這項設定。


      這個標記是放在<HEDA>之間的,用來將目前文件與其他 URL 作連結。大多數的情況下, <LINK> 標記不會在使用者的瀏覽器中建立一個超連結。它的格式如下:

    <LINK HREF="URL" REL="relationship">或是
    <LINK HREF="URL" REV="relationship">

      <LINK>最常用來建立 Web 站上其他文件的使用者定義結構。以 REL 屬性為例,它定義 HREF="URL" 正目前文件之的關係;而 REV 則定義了目前文件與 HREF 的 URL 之間的關係,如:

    <LINK HREF="http://www.hi.com.tw/index.htm" REL="PARENT"
    <LINK HREF="http://www.hi.com.tw/product.htm" REV="CHILD"

      這些定義在網站上少用,反而是在公司的內部中,一些比較有組織的文件才用到。

      你大概會經常使用到<LINK>標記: REV="MADE" 說明網頁是誰建立的。一般我們可以這樣用:

    <HEAD>
    <LNK HREF="mailto:alex_cheng@ma9.url.com.tw" REV="MADE" REL="AUTHOR">
    </HEAD>

      這樣並不會真的產生一個mailto:的連結。你還是要在本文區中放一個 mailto: anchor 的標記。


      同樣的,這個標記也是用左 <HEAD> 標記中的,這個標記可以讓某些伺服器找尋網頁內的關鍵字。假如你的 Web 伺服器提供這樣的找尋功能,使用者的瀏覽器也支援這些這些找尋功能,那麼載入網頁時,使用者就就會看到一個簡單的找尋方塊了。我是申請奇摩站的免費空間,並使用 IE 5,這樣的組合可以使用這項功能。

    <ISINDEX>的語法如下:

    <HEAD>
    <ISINDEX>
    </HEAD>

    TOP

    返回列表
    資訊科技 ND076DR-2已經運行: