嗨！歡迎來到第二單元。顯然你是很認真地要撰寫個人網頁，那麼你也一定準備好文字處理程式了，例如記事本(NotePad)或SimpleText；你一定也還記得附加檔名 .html 和 .htm吧！好極了，我們就開始今天的課程！
HTML旗標
HTML 是非常簡單、邏輯的格式，就好像聽你指揮往前、往後、向上或向下一樣容易。只要記住一點，HTML 是文字格式，它的主要目的也在控制文字編排。當你寫了長長一篇文章之後，你總不會將文章不分段的一口氣讀(列印)完吧！你將文章分段、每個段落之前加上標題，而標題文字使用較大字型、文章重點則加上底線或是改為粗體字型、註解文字使用較小字型。在 HTML 裡，這些功能皆透過一系列的旗標來完成。
每一個旗標都代表一個指令，例如你想將文章中某一個字改為較大字型，你就在那一字前面加上一個放大旗標，在那個字的後前加上一個回復旗標。一行字或整個段落也是如此控制。粗體、斜體字型都有相對應的旗標，控制方法也相同。
旗標的格式
所有的旗標(指令)都有一固定的格式，姑且稱為 HTML 文法。它們一定由一個"小於符號"開始，<，再由一個大於符號結束，>，絕對沒有例外。旗標多半是英文單字的縮寫，學習 HTML 只是要記得這些旗標而已。我們馬上就來學第一個旗標：
控制粗體字型的旗標是英文字母 B，其來源為 Bold (粗體)。我們來看看它如何控制 "艾爾弗烈德" 這個名字：
<B>艾爾弗烈德</B>
哇！ 變成粗體字了
- <B>是粗體字旗標。
- "阿爾弗烈德"是被粗體字旗標<B>所控制的文字。
- </B>是回復旗標。注意，它也是字母 B，只是前面加了一條斜線 /。
- 目前為止還算簡單吧？
常見問題
- 問：其它的回復旗標是否也是啟動旗標加上一條斜線呢？
- 答：是的。
- 問：旗標會出現在我的網頁上嗎？
- 答：不會。只要你的旗標沒有打錯字母，而且置於 < 和 > 之間，讀者不會看到這些幕後的控制碼。
- 問：艾爾弗烈德的粗體字型旗標是大寫的英文字母 B，是不是所有的控制旗標都使用大寫字母？
- 答：不是，無論是大寫或小寫英文字母，瀏覽程式視它們為相同的控制旗標。不過，最好是保持一個良好習慣，例如所有的控制旗標都使用大寫字母，當你要回頭修改現有的 HTML 文件時就容易多了。(註：若要與XML相容，則建議都使用小寫字母。)
- 問：是不是文件中的所有內容都需要控制旗標？
- 答：不是。無論是否受到旗標控制，所有的內容都會顯示。旗標的作用是控制(美化) HTML 文件，吸引讀者注意。
- 問：如果我忘了加上回復旗標、或是加上回復旗標卻打漏字母而少了那條斜線，會對我的 HTML 文件造成什麼影響？
- 答：這是麻煩事，不過是很容易矯正的麻煩。顯而易見的，如果你沒有正確地加上回復旗標，所有接下來的內容都會繼續受到控制。當你用瀏覽程式檢視你的 HTML 文件時，從你漏掉回復旗標之後的文件內容都會持續相同的"特效"。修正方法就是所以回到 HTML 文件，加入正確的回復旗標，重新儲存文件，再回到瀏覽程式檢視，一切回到正常。
- 問：所有的控制旗標是成雙成對嗎？
- 答：不是，的確有些例外。不過目前我們先保持一個觀念：有開始就有結束。記得第一單元中艾爾弗烈德曾告訴你，語言一定有文法規定，成雙成對就是 HTML 一條重要的文法。
成雙成對
一些主要的 HTML 旗標都是成對出現，它們也都很容易記憶，(還是需要略通英文啦)。以下列出三個常用的文字控制旗標：
| 效果 | 控制碼 | 說明 | 範例 |
| 粗體(Bold) | B | <B>粗體(Bold)</B> | 粗體(Bold) |
| 斜體(Italic) | I | <I>斜體(Italic)</I> | 斜體(Italic) |
| 鉛字體(Typerwriter) | TT | <TT>鉛字體(Typerwriter)</TT> | 鉛字體(Typerwriter) |
- 問：是否能一次使用兩個或兩個以上控制旗標？
- 答：是的。但要記得不管使用幾個控制旗標，不要忘了成雙成對的文法規定。看看接下來的例子：
- <B><I>粗體和斜體</I></B>：粗體和斜體
- <B><TT>粗體和鉛字體</TT></B>：粗體和鉛字體
當你使用兩個或兩個以上控制旗標時，務必注意啟動和回復的順序。看看接下來的說明：
- <B><I><TT>艾爾弗烈德</TT></B></I>：誤，</B> 應在 </I> 之後。
- <B><I><TT>艾爾弗烈德</TT></I></B>：正
注意！回復旗標的順序和啟動旗標的順序完全相反。
單身旗標
現在介紹幾個常用的單身旗標，意思是它們不需要回復旗標。
| 旗標 | 說明 |
| <HR> | HR 是 Horizontal Reference 的縮寫，它會在網頁中顯示一條水平的分隔線。 |
| <BR> | BR 是 Break 的縮寫，它的作用為另起一行，(跳行)。 |
| <P> | P 是 Paragraph 的縮寫，它的作用為另起一段，(分段)。它的功能和 <BR> 有點兒類似，不過段落與段落之間的距離較大，意即 <P> 多跳一行。
雖然 <P> 是一個單身旗標，不過你仍可以加上回復旗標 </P>，協助你保持成雙成對的良好文法習慣。 |
你的第一張網頁
如果你已瞭解上述旗標的作用，你可以開始撰寫你的第一張網頁了。不過在真正開始之前，艾爾弗烈德還得告訴你兩個重要旗標，而且它們必須出現在每一份 HTML 文件之中。(哼！居然拖到現在才告訴人家！)
每一張網頁都是由 <HTML> 旗標開始：顯而易見的，你必須宣告這是一份 HTML 文件。
利用 <TITLE> 和 </TITLE> 旗標給你的網頁一個標題(表頭、橫批)：看看命令列的上方，(如果你的瀏覽程式使用全螢幕，看看螢幕的頂端)，是否出現 HTML新手入門：旗標 的字樣，這就是利用 <TITLE> 和 </TITLE> 旗標所宣告的本頁標題，在啟動旗標和回復旗標之間的文字就會出現在命令列上方的橫幅內。
每一張網頁都是由 </HTML> 旗標結束：這就更明白了，成雙成對的文法規定，</HTML> 宣告結束 HTML 文件。
我們開始吧!
再提醒一次，HTML 非常容易，它完全聽你的指揮而往前、往後、向上或向下。你加入啟動旗標，它就啟動"特效"，你加入回復旗標，它就停止"特效"。你只要確定旗標都置於 < 和 > 之間，而且沒有打錯、漏字母即可。
這裡提供一個簡單的示範網頁，包涵今天的課程。輸入你的文字處理程式，儲存，再用瀏覽程式檢視。
<HTML>
<HEAD>
<TITLE>我的第一張網頁</TITLE>
</HEAD>
<BODY>
<P><B>這是我的第一張 HTML 網頁！</B>
<BR>我可以使用<I>斜體字</I>或<B>粗體字</B>。</P>
<P><B><I>或是粗體及斜體字</I></B>。</P>
<P><TT>或是下課啦！</TT></P>
<HR>
</BODY>
</HTML>
艾爾弗烈德在這個範例中還使用了第二單元未教的旗標，你就先依樣畫葫蘆，總之這是非常簡單的網頁。注意 <HTML> 和 </HTML> 以及 <TITLE> 和 </TITLE>。仔細觀察 <P> 和 <BR> 的不同效果。
如果你已經完成你的第一張網頁，不妨與艾爾弗烈德的參考答案對照效果：請按這裡。
明天見！
本文為配合HTML 4.0撰寫，新版HTML均可向前相容。
0 留言:
張貼留言