使用Html來變化文字

HTML

文字^的變化

Html能帶給我們「驚奇」的體驗，往往是從對文字的變化進行控制開始。這通常也 是學習Html的第一步，更是數位多媒體文本寫作的基礎能力。這部分一旦上手，對 Html就再也不會怕了。

建議先看影 音說明，增加閱讀背景經驗值。 click here!!

來，就先看下面的表格內容，先直覺的感受一下什麼是Html的功效：

原始文字	加上字型語法	呈現效果
標題文字	<h3>標題文字</h3>	標題文字
粗體文字	<b>粗體文字</b>	粗體文字
斜體文字	<i>斜體文字</i>	斜體文字
加底線文字	<u>加底線文字</u>	加底線文字
畫刪除線文字	<strike>畫刪除線文字< /strike>	畫刪除線文字
文字上標	文字<sup>上標</sup>	文字上標
文字背景色	文字<mark>背景色</mark>	文字背景色

語法說明：

1. 要對文字進行變化，首先必須在想要變化的文字前、後加上控制變化的語法參數。以對「粗體文字」 進行變化為例，要在「粗體文字」之前加上<b>，在之後再加上</b>，於是就形成成「<b>粗體文字</b>」這樣的形式。<b>是文字變化的起始參數，而</b>是結束參數。這告訴電腦要從那裡開始變化，而又在那裡結束。一般而言，結束的參數往往是起始的參數再加上「/」這一符號。
2. 除了少數的例外，Html的語法參數往往是「起始」與「結束」成對。這是很重要的Html語法槪念。這不只是對文字變化而已，而是大部分的Html語法均如此。
3. 文字變化的語法還有很多，上面只是常用的例子而已。有興趣進一步學習的同學，可以在網路上找到更多的文字變化語法參數。

二種以上的效果共同使用，要如何來寫語法：

<i><u>斜體加底線文字</u></i>                             斜體加底線文字

---

我們可以看到，這是以同心圓的樣態來排列。

文字大小的變化
文字要以「大小」來呈現時，要注意，是為了標題而使用，還是一般內文使用！
如果是標題作用，那是「段落」（區塊）的排版概念；如果是「內文」，則是線性的排版概念。

有時Html往往會用不同的語法參數來形成類似功能的變化。以文字大小變化這一功能為例，就可以用<hx>xxx</hx>、<font size="數字">xxx</font>、<small>xxx</small>這三種不同的控制參數來進行文字大小的變化。請看範例：

<hx>xxx</hx>標題語法（區塊概念）

<h1>這是標題 1</h1> <h2>這是標題 2</h2> <h3>這是標題 3</h3> <h4>這是標題 4</h4> <h5>這是標題 5</h5> <h6>這是標題 6</h6>	這是標題 1 這是標題 2 這是標題 3 這是標題 4 這是標題 5 這是標題 6
在文字寫作中，我們<h1>使用標題狀況< /h1>下，標題會獨立的成為一個段落。	在文字寫作中，我們 使用標題狀況 下，標題會獨立的成為一個段落。
在文字寫作中，我們<big>使用文字變化狀況< /big>下，後面文字會接上。	在文字寫作中，我們使用文字變化狀況下，後面文字會接 上。

語法說明：

1. 通常<hx>xxx</hx>這一文字變化語法形式被稱之為「標題語法」。從h1到 h6共有六組。數字愈小，標題愈大。
2. 之所以稱之為標題語法，是因為在結束參數</hx>之後，瀏覽器會自動斷行。這很適合文章中標題的版面使用。

請看以下範例及說明：

	文字語法	呈現效果
範例1	文字標題<br>內文	文字標題 內文
範例2	<h3>文字標題</h3>內文	文字標題 內文

在範例1中，「文字標題」與「內文」中間有<br>的斷行語法，文字才形成斷行。但在範例2中，不須用<br>，<h3>xxx</h3>就會自動形成斷行之際再加上一空白行。

再來，請看第二範例：

<font size="數字">xxx</font>以及<small>xxx</small>內文語法

原始文字	文字大小語法	呈現效果
文字大小	<small>文字大小</small>	文字大小
文字大小	<big>文字大小</big>	文字大小
文字大小	<font size="1">文字大小</font>	文字大小
文字大小	<font size="2">文字大小</font>	文字大小
文字大小	<font size="3">文字大小</font>	文字大小
文字大小	<font size="4">文字大小</font>	文字大小
文字大小	<font size="5">文字大小</font>	文字大小
文字大小	<font size="6">文字大小</font>	文字大小

語法說明：

1. 先來看<font size="數字">xxx</font>這一語法參數。控制文字大小的數字是「1」到「7」，共七個級距。如果沒有對文字的大小進行控制的話，那一般呈現的大小是「3」，換言之3是預設的文字大小。
2. <big>xxx</big>是指將字從預設大小增大一級，即第「4」級。所以上表可以看到，<big>xxx</big>的文字大小和<font size="4">xxx</font>的文字大小是一樣的。而<small>xxx</font>是指將文字從預設小大降一級。

文字顏色的變化

對上面的文字變化語法有一些認識後，相信文字顏色的語法就讓人覺得相對簡單了。

文字顏色語法：	呈現效果：
<font color="#ff0000">文字顏色</font>	文字顏色

語法說明：

1. 相信各位現在可以感受到，html的語法結構有著相似性。文字顏色的語法<font color="#xxxxxx">xxx</font>和文字大小的語法<font size="x">xxx</font>就差別在「color="#ff0000"」這一參數。
2. 「#ff0000」是紅色的顏色代碼。更完整的顏色代碼表，請按此參考。

文字顏色使用上的注意事項：

1. 文字是要傳達想法和概念的，因之文字的顏色和背景顏色最好有明顯的對比，也就是說文字要能清晰而明顯的呈現出來。換言之，憑直覺的閱讀而言，文字在閱讀上不能有吃力的感覺。因為沒有讀者喜歡花力氣去辨識出一個一個字。
2. 一般而言，一份網頁文本內的文字顏色不要太多，最好不要超過五種不同的顏色。因為花花綠綠的顏色往往會搶掉讀者對文字意義本身的理解。
3. 對顏色有進一步興趣的同學，最好再去理解一下色彩學中不同顏色之間的「對比」性質或是「類似」性質。亦即什麼是對比色，什麼是類似色。這樣才能創造最好的數位閱讀環境。

寫出空白的半形字元

這是什麼意思呢？先看下面的例子：

二個空白的空格之後         再跑字出來。

html編輯中是長這樣的：

二個空白的空格之後&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;再跑字出來。

說明：

1. 在利用純文字編輯器時，如果真的要出現空白字元，就要打上「&nbsp;」，電腦才會知道你要空白字元。這是英文半形的空白字元，但因網頁的設定不同，空白的小大有時不同。試試幾次就知要放幾個。
2. 直接在網頁編輯器作業，如我們教的Kompozer，就不用擔心這問題。不管是中文全形或英文半形空白，直接打字下去就對了。不然為什麼要用網頁編輯器呢？但同學仍要了解這一狀況，才不會在看原始碼時看不懂。

寫出「符號」


我們常見各種有趣的符號被使用，例如：

⊕
√ ♣

要如何寫出來呢？

首先，要找到 html 符號代碼表，請按這裡，就會顯現出各式符號的「代碼」。使用代碼來呈現。


  你可以使用「命名實體」或是「十進制編碼」的二種符號代表系統，二種都可以使用。


語法：

中文&otimes;&#969;中文

呈現：

中文⊗ω中文


變化字體

語法：

<font face="微軟正黑體">中文字型的變化</font>

效果：

中文字型的變化

說明：

1. 一般常用的電腦中文字有：新細明體（內文使用）、微軟正黑體（標題使用）、標楷體（引文使用）。英文常用字：Georgia (內文）、Verdana （標題或非內文字）。
   
2. 但目前漸漸有使用微軟正黑體來當作中文內文字體的趨勢。同學可以自行觀察。
   

font語法綜合練習

文字的變化是很常用的。
我可以把<font xxx>語法，一起拿來綜合使用。
但記得結束碼要對應清楚，幾個語法就要有幾個結束碼。下例就要有三個結束碼。

語法：

<font size="6"><font color="#ff0000"><font face="標楷體">這是我們呈現的中文字</font></font></font>

呈現效果：

這是我們呈現的中文字


走 馬燈特效

語法：

<marquee>要跑的文字或物件</marquee>

效果：

要跑的文字或物件
語法2：

<marquee  behavior="alternate"> 要跑的文字或物件</marquee>

效果：

要跑的文字或物件

---