第 12 講次 (book2:chap2+chap3)

第 12講次 (book2:chap2+chap3) 網際網路導論嘉義大學資訊工程學系李龍盛老師 sheng@mail.ncyu.edu.tw 本著作除另有註明外，採取創用CC「姓名標示－非商業性－相同方式分享」台灣3.0版授權釋出

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

文字段落與版面

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

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

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

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

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

設定文字標題－<h?> 這個標題並非瀏覽器視窗標題列中所顯示的標題 (用 <title> 定義), 而是平常在文章中, 像章節名稱之類的標題。設定標題的標籤共有 6 個, 分別是 <h1>、<h2>、...<h6>。數字愈大, 所顯示的文字愈小。請注意！使用 <h?> 標題標籤時, 不需要加上 或 來分段或換行, 瀏覽器會將標題部分當成獨立的一段。

設定文字對齊方向－ 預設在瀏覽器中, 文字都是由左一直顯示到右, 每一行都是靠左邊對齊的。如果您希望文字改成置中或靠右對齊, 可在段落標籤 中加上屬性來設定。 標籤有個 ALIGN 屬性用來設定文字對齊的方向, 可設定的值有 LEFT (靠左對齊, 這也是預設值)、CENTER (置中對齊)、RIGHT (靠右對齊) 三種。瀏覽器會將 之後的文字都以指定的對齊方式顯示。

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

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

文字樣式的變化

設定字體的大小、字型與顏色 在 HTML 語法中控制文字顯示的標籤非常多, 最常用的大概就是與字型相關的部分了, 除了可以調整字體的大小, 也可以設定使用何種字型, 並指定文字的顏色。在 HTML 中專門用來處理字型的標籤是 , 這個標籤有許多屬性。 標籤中用來設定字體大小的屬性為 size, 其語法為: size_no 可用的數字為 1 至 7, 數值愈大字也愈大, 預設的數值為 3。

直接指定字體大小 TIP: 與 <h?> 兩者使用的數字與顯示字體大小的關係剛好相反,前者數字愈大字體愈大, 後者數字愈大字體愈小。如果未在最後加上 或是用 回復原來大小,則最後一個 的設定效力將持續影響後面文字的顯示,一直到再次遇到 或 標籤為止。

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

更改預設字體大小－<basefont size> 用來更改預設字體大小的標籤是 <basefont size=“size_no”>, 同樣可指定 1 至 7 之間的數字。雖然我們可控制字體大小, 請注意, 這些設定都只是相對性的, 而非絕對性的。亦即可以設定這幾個字比那幾個字大或小多少, 但所有的字顯示出來的大小, 則是取決於瀏覽器的設定值。像 IE 的『檢視/字型』命令可調整網頁中的字體大小, 使用者可任意調整, 不受 HTML 語法的控制。

Headings 與 font 的差異 <h?> 標籤有 6 種字體大小, 分別是 h1〜h6, 標籤則有 7 種字體尺寸, 以 size 屬性來設定。有趣的是Headings 標籤是數字越大則字體越小, 而 標籤則是數字越大字體尺寸也就越大。除了 7 號字以外, <h1> 字體大小相當於 的字體大小, 而 <h2> 字體大小則相當於 的字體大小, <h3> 字體大小相當於 的字體...。同樣的一段文章, 以 <h1> 和 兩組標籤分別比較時, 兩者的字體大小是一樣的, 但使用 <h1> 標籤的字體會有明顯的加粗效果。此外, 使用 <h?> 這組標籤時, 在 <h?>...</h?> 之間的文字都會自成一行, 或者說這些文字算是自成一個段落。

Headings 與 font 的差異 而 ... 則可用來修飾一行或一段內容中的一小段文字, 所以不會有換行的情形, 在同一行中用不同的size 屬性設定, 這些不同尺寸的字體還是會出現在同一行。最後還有一點不同, 就是 <h?> 文字的大小並不會受 <basefont> 的影響。

指定文字字型－ 在 標籤中, face 這個屬性可以設定文字的字型。但是可以設定並不表示就能正確顯示出來, 還須視用戶端的電腦中是否有安裝該網頁指定的字型。其語法如下：… 字型名稱至少要指定一個, 為預防使用者的電腦上未安裝指定的字型, 可以在後面加上第二個字型名稱、第三個字型名稱..., 名稱之間以逗號做區隔。瀏覽器未找到第一個字型時, 會依序尋找第二個、第三個...來代替。

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

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

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

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

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

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

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

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

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

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

<marquee>標籤屬性 <marquee direction="屬性值">設定文字捲動的方向, 預設是由右到左的 left, 如果您要做由左跑到右的反方向跑馬燈, 則可設定成 right。 <marquee height="?" width="?">分別用來設定跑馬燈的高與寬, 可以單獨指定其一項, 也可以兩項都指定。"?" 可以直接輸入圖點數 (heigth="50" 表示跑馬燈有五十個圖點高), 或是輸入跑馬燈的區域在視窗中所佔的畫面比例 (如 width="30%")。 <marquee loop=“?”>設定跑馬燈捲動的次數, 預設值是 infinite, 表示不限定次數。您可以指定其他整數來設定跑的次數。

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

3-4-2 附屬說明文字 在某些情況下, 像是要用到一般人都不太會唸的罕用字, 或是寫給識字不多的小朋友們看的文章時, 我們往往需要在字的旁邊加上注音, 但是要把這種用法搬到 HTML 文件中, 就有些累人了。可能有人會想到將注音和文字分兩行輸入, 並將注音的字體設小一點, 或許有人想乾脆做成圖片再放到網頁上, 效果可能比較好。不過 IE 支援一個標籤<ruby>, 讓我們可以輕鬆解決這類問題。

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

在文件中顯示特殊字元 除了剛剛介紹的 4 個符號要使用特殊的顯示方法外, 其實有許多特殊符號和字元, 也必須使用相同的技巧才能顯示在瀏覽器上。例如歐洲語文和特殊文字等, 這些無法使用鍵盤輸入的文字及符號, 也都可用兩組 "&" 開頭的特定語法來代替。這兩組語法, 其中一組是用字元的名稱來表示, 例如要顯示 Å 上面加個圓圈 (ring) 的 A 叫做 Aring, 其用法是 &Aring, 德文中的 Ü母音變化 (umlaut) 要用 &Uuml 等；另一組則是使用各字元符號在 ISO-8859-1 標準中的編碼, 例如 Å 是 &#197, 則是 &#220。需完整的列表, 可至 http://www.talisman.org/iso8859-1.html 查閱。

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

第 12 講次 (book2:chap2+chap3)