第 12 講次 (book2:chap2+chap3)

第 12 講次 (book2:chap2+chap3)網際網路導論嘉義大學資訊工程學系李龍盛老師[email protected]

本著作除另有註明外，採取創用CC 「

姓名標示－非商業性－相同方式分享

」台灣 3.0 版授權釋出

1

ContentContent

文字段落與版面文字樣式的變化

2

文字段落與版面文字段落與版面3

強制換行－強制換行－ 

在瀏覽網頁時 , 文字會隨著瀏覽器的視窗大小而自動換行。不過如此一來 , 每個人瀏覽我們的網頁時看到的版面就可能都不相同。如果希望自行安排文字版面 , 可以用 標籤強制定換行。 標籤使用的方式很簡單 , 只須在要換行的地方 ( 通常是一行的最後面 ) 加上 標籤 , 則瀏覽器就會先換行 , 再顯示後續的文字。

4

文字分段－文字分段－ 

就像我們寫文章習慣會分段落 , 當然在 HTML 裏也有讓文字分段的 標籤。 標籤和 標籤有什麼不同呢？ 標籤除了換行之外 , 瀏覽器還會多空一行空白 , 再接著顯示後面的文字。

5

文字分段－文字分段－ 

也可在段落的結束處加上結尾的 標籤 , 但不加也無妨。根據官方文件指出 , 若加上 明確標出段落的結尾 , 可加快顯示該頁內容的速度。

6

依文字原來格式排列－依文字原來格式排列－ <pre><pre>

如果希望瀏覽器能依文字原來的排列情形來顯示 , 又不想一行行地加上 或 標籤 , 則可將這些文字前後加上 <pre>...</pre> 標籤 , 如此文字就不會擠成一團了。

7

加上分隔線－加上分隔線－ <hr><hr>

很多網頁為了使內容更清晰 , 會用一條橫線(Horizontal Rule) 分隔文件中不同的段落 , 使段落更為分明。只需在要加上分隔線的地方加上 <hr> 標籤 , 在顯示時此處就會出現一條分隔線。

8

設定文字標題－設定文字標題－ <h?><h?>

這個標題並非瀏覽器視窗標題列中所顯示的標題 ( 用 <title> 定義 ), 而是平常在文章中 , 像章節名稱之類的標題。設定標題的標籤共有 6 個 , 分別是 <h1> 、 <h2> 、 ...<h6> 。數字愈大 , 所顯示的文字愈小。

請注意！使用 <h?> 標題標籤時 , 不需要加上 或 來分段或換行 , 瀏覽器會將標題部分當成獨立的一段。

9

設定文字對齊方向－設定文字對齊方向－ 

預設在瀏覽器中 , 文字都是由左一直顯示到右 , 每一行都是靠左邊對齊的。如果您希望文字改成置中或靠右對齊 , 可在段落標籤 中加上屬性來設定。

 標籤有個 ALIGN 屬性用來設定文字對齊的方向 , 可設定的值有 LEFT ( 靠左對齊 , 這也是預設值 ) 、 CENTER ( 置中對齊 ) 、 RIGHT (靠右對齊 ) 三種。

瀏覽器會將 之後的文字都以指定的對齊方式顯示。

10

設定文字對齊方向－設定文字對齊方向－ 

一旦設定了某種對齊方式後 , 例如設定了靠右對齊 , 除非出現另一個 改變其他對齊方向 , 否則文件中所有文字都會靠右對齊。此外 , 若遇到 <hr> 、 <h?> 等代表獨立段落的標籤時 , 文字的對齊方向則會回到預設的靠左對齊。

11

文字置中對齊－文字置中對齊－ <center><center>

另外還有一個對齊中央的標籤 <center>, 其效果也是讓所有的文字向中間對齊。不同於 , 在 <center> 到 </center> 間的文字 , 不會因 <h> 或 <hr> 的出現而變回預設的向左對齊。

12

文字樣式的變化文字樣式的變化13

設定字體的大小、字型與顏色設定字體的大小、字型與顏色

在 HTML 語法中控制文字顯示的標籤非常多 , 最常用的大概就是與字型相關的部分了 , 除了可以調整字體的大小 , 也可以設定使用何種字型 , 並指定文字的顏色。

在 HTML 中專門用來處理字型的標籤是 , 這個標籤有許多屬性。

 標籤中用來設定字體大小的屬性為 size, 其語法為 :

size_no 可用的數字為 1 至 7, 數值愈大字也愈大 , 預設的數值為 3 。

14

直接指定字體大小直接指定字體大小

TIP: 與 <h?> 兩者使用的數字與顯示字體大小的關係剛好相反 ,前者數字愈大字體愈大 , 後者數字愈大字體愈小。

如果未在最後加上 或是用 回復原來大小 ,則最後一個 的設定效力將持續影響後面文字的顯示 ,一直到再次遇到 或 標籤為止。

15

指定字體的相對大小指定字體的相對大小

所有的加或減都是以預設的字體大小 3 做為運算的基準 , 例如 size=“+2” 就相當是size=“5” (3+2), 而 -1 就是變成大小為 2 的字形 (3-1) 。

16

更改預設字體大小－更改預設字體大小－ <basefont size><basefont size>

用來更改預設字體大小的標籤是 <basefont size=“size_no”>, 同樣可指定 1 至 7 之間的數字。

雖然我們可控制字體大小 , 請注意 , 這些設定都只是相對性的 , 而非絕對性的。亦即可以設定這幾個字比那幾個字大或小多少 , 但所有的字顯示出來的大小 , 則是取決於瀏覽器的設定值。

像 IE 的『檢視 / 字型』命令可調整網頁中的字體大小 , 使用者可任意調整 , 不受 HTML 語法的控制。

17

Headings Headings 與與 font font 的差異的差異

<h?> 標籤有 6 種字體大小 , 分別是 h1 〜 h6, 標籤則有 7 種字體尺寸 , 以 size 屬性來設定。有趣的是Headings 標籤是數字越大則字體越小 , 而 標籤則是數字越大字體尺寸也就越大。

除了 7 號字以外 , <h1> 字體大小相當於 的字體大小 , 而 <h2> 字體大小則相當於 的字體大小 , <h3> 字體大小相當於 的字體 ... 。

同樣的一段文章 , 以 <h1> 和 兩組標籤分別比較時 , 兩者的字體大小是一樣的 , 但使用 <h1> 標籤的字體會有明顯的加粗效果。

此外 , 使用 <h?> 這組標籤時 , 在 <h?>...</h?> 之間的文字都會自成一行 , 或者說這些文字算是自成一個段落。

18

Headings Headings 與與 font font 的差異的差異

而 ... 則可用來修飾一行或一段內容中的一小段文字 , 所以不會有換行的情形 , 在同一行中用不同的 size 屬性設定 , 這些不同尺寸的字體還是會出現在同一行。

最後還有一點不同 , 就是 <h?> 文字的大小並不會受 <basefont> 的影響。

19

指定文字字型－指定文字字型－ 

在 標籤中 , face 這個屬性可以設定文字的字型。但是可以設定並不表示就能正確顯示出來 , 還須視用戶端的電腦中是否有安裝該網頁指定的字型。其語法如下：…

字型名稱至少要指定一個 , 為預防使用者的電腦上未安裝指定的字型 , 可以在後面加上第二個字型名稱、第三個字型名稱 ..., 名稱之間以逗號做區隔。

瀏覽器未找到第一個字型時 , 會依序尋找第二個、第三個 ... 來代替。

20

指定字體的顏色－指定字體的顏色－ 

 標籤的 color 屬性可以設定文字的顏色 , 不過僅限包含在 、 標籤之中的文字。如果要設定所有文字的顏色 , 則適合用 <body> 標籤的 text 屬性。

21

設定本文文字的顏色－設定本文文字的顏色－ <body text><body text>

<body> 標籤是用來標示本文 , 此處要介紹的是利用 <body> 標籤的 text 屬性 , 來設定本文文字的顏色。

由於 <body> 標籤是用以標示本文 , 因此利用 text 屬性設定文字顏色時 , 會將全部的本文變更為同一個顏色。它的使用時機 , 通常是為了配合背景顏色或圖片 , 而修改本文的顏色。<body bgcolor=“#0000fff” text=“ffffff”>

22

粗體字－粗體字－ 

利用 標籤可以表現粗體字 (Boldface) 效果 , 讓想要凸顯的文字很容易被注意到。粗體字 

23

斜體字－斜體字－ 

利用 標籤可以表現斜體字 (Italics) 效果 , 以強調該段文字。斜體字 

24

文字加底線－文字加底線－ 

利用 標籤可以將文字加上底線 (Underline), 通常會配合超連結使用 , 可以讓瀏覽網頁的人很容易明白該段文字有超連結。

25

文字刪除線－文字刪除線－ <strike><strike>

當我們修改或更新了文章的內容 , 可以利用 <strike> 標籤標示文字刪除線 , 指出修正或更新的地方。

26

上標字－上標字－ 

上標文字 (Superscript) 會以略高於同一行文字的對齊方式排列 , 同時字型略小於同一行文字。 上標字 

27

下標字－下標字－ 

相對於 標籤 , 利用 標籤則可以做出下標字 (Subscript) 。下標文字會以略低於同一行文字的對齊方式排列 , 同時字型略小於同一行文字。

28

跑馬燈－跑馬燈－ <marquee><marquee>

很多人利用 JavaScript 來做跑馬燈 , 讓一串文字能由右至左循環地捲動 , 不過在 IE 支援的擴充標籤中 , 就有一項是用來在文件中顯示跑馬燈 , 那就是 <marquee> 標籤。

29

<marquee><marquee> 標籤屬性標籤屬性

<marquee behavior=" 屬性值 "> 設定捲動的效果 , 有 scroll 、 slide 及 alternate 三個屬性值可設定。預設值為 scroll, 即一般的捲動效果 , 從一個方向進來 , 另一個方向出去；slide 表示文字捲進來碰到邊界後 , 就停下來不動了 ; alternate 的效果最有趣 , 它會讓文字在限定的範圍中左右兩邊彈來彈去。

30

<marquee direction=" 屬性值 "> 設定文字捲動的方向 , 預設是由右到左的 left, 如果您要做由左跑到右的反方向跑馬燈 , 則可設定成 right 。

<marquee height="?" width="?"> 分別用來設定跑馬燈的高與寬 , 可以單獨指定其一項 , 也可以兩項都指定。 "?" 可以直接輸入圖點數 (heigth="50" 表示跑馬燈有五十個圖點高 ), 或是輸入跑馬燈的區域在視窗中所佔的畫面比例 ( 如 width="30%") 。

<marquee loop=“?”> 設定跑馬燈捲動的次數 , 預設值是 infinite, 表示不限定次數。您可以指定其他整數來設定跑的次數。

31

<marquee scrollamount="?" scrolldelay="?"> 這兩個屬性分別是用來設定跑馬燈捲動時每次移動的『步伐』大小 (scrollamount), 以及需要多久移動一次的時間間隔 (scrolldelay) 。步伐設大一點 , 例如 scrollamount=“50” (仍是以圖點為單位 ), 則跑馬燈文字會一下子就從右邊『跳』到左邊了；至於時間間隔則是以毫秒 (ms) 為單位。例如scrolldelay=500, 便是每 0.5 秒移動一次跑馬燈的文字。您可嘗試調整這兩個屬性值 , 做出有趣的跑馬燈。

<marquee bgcolor=" 顏色 "> 這個屬性可以為跑馬燈設定背景顏色。

32

3-4-2 3-4-2 附屬說明文字附屬說明文字

在某些情況下 , 像是要用到一般人都不太會唸的罕用字 , 或是寫給識字不多的小朋友們看的文章時 , 我們往往需要在字的旁邊加上注音 , 但是要把這種用法搬到 HTML 文件中 , 就有些累人了。

可能有人會想到將注音和文字分兩行輸入 , 並將注音的字體設小一點 , 或許有人想乾脆做成圖片再放到網頁上 , 效果可能比較好。不過 IE 支援一個標籤 <ruby>, 讓我們可以輕鬆解決這類問題。

33

在在 HTML HTML 文件中顯示符號文件中顯示符號

在 HTML 文件中 , 必須使用特殊的字串來表示這些符號。例如要顯示 < 或 > 符號都要先將它們替換成下表所示的特殊語法才可以：

34

符號語法< &lt

> &gt

& &amp

“ &quot

在文件中顯示特殊字元在文件中顯示特殊字元

除了剛剛介紹的 4 個符號要使用特殊的顯示方法外 , 其實有許多特殊符號和字元 , 也必須使用相同的技巧才能顯示在瀏覽器上。例如歐洲語文和特殊文字等 , 這些無法使用鍵盤輸入的文字及符號 , 也都可用兩組 "&" 開頭的特定語法來代替。

這兩組語法 , 其中一組是用字元的名稱來表示 , 例如要顯示 Å 上面加個圓圈 (ring) 的 A 叫做 Aring, 其用法是 &Aring, 德文中的 Ü 母音變化 (umlaut) 要用 &Uuml 等；另一組則是使用各字元符號在 ISO-8859-1 標準中的編碼 , 例如 Å 是 &#197, 則是 &#220 。

需完整的列表 , 可至 http://www.talisman.org/iso8859-1.html 查閱。

35

referencereference

Based on第二章與第三章最新 HTML&CSS 網頁程式設計，施威銘研究室著，台北：旗標出版公司， F6462 。

36

第 12 講次 (book2:chap2+chap3)

Documents