*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
融媒體Wix教學
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
Unsplash圖像集
我的給大學生書單

2012年6月14日 星期四

使用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,就不用擔心這問題。不管是中文全形或英文半形空白,直接打字下去就對了。不然為什麼要用網頁編輯器呢?但同學仍要了解這一狀況,才不會在看原始碼時看不懂。


變化字體

語法:

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

效果:

中文字型的變化

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



走 馬燈特效

語法:

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

效果:

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

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

效果:

要跑的文字或物件



2 則留言:

  1. 李老師請問kompozer開啟舊檔,發現所有的圖像都看不見,但會留下有圖像的符號,若開瀏蘭頁面所有的圖片又正常出現,請問是哪裡出問題?留言無法貼圖,請問要貼圖嗎?

    回覆刪除