第二章-HTML語法

　　上一章只是很簡單的介紹了，用「記事本」也可以寫網頁，按照著書上的步驟，你一定已經成功的寫出第一個網頁了。但是HTML有一定的「語法」喔！

^標準格式

　　HTML的語法大都是成對出現的，而且以< >括起。其中最重要的就是：必須以<html>起頭，以</html>結尾，這個作用是向電腦宣告，從<html>開始到</html>結尾之間的語句，都是HTML語法，電腦才不會錯認指令。

　　現在來看看幾個HTML的標準語法：

　　現在利用這幾個標準語法，實際製作一個網頁吧！

　　雖然還是不夠完美，但是已經比第一章的作品精緻些了，是不是?！

　　現在的你應該對HTML語法有些熟悉了，在「記事本」中編寫網頁的中文時，請一律以「細明體」呈現，因為你的電腦裡所擁有的字型，別台電腦不見得有，但是所有的電腦都有「細明體」字型，這樣才不會出現亂碼唷！

^基本技巧

　　HTML語法的指令大都是成對出現，本書中以< >…</ > 表示的就是成對出現的指令，中間的「…」，是指令所要設定的文字。

文字的編排語法

　　下列就是一些與文字編排相關的語法：

文字的置中與字體

　　現在讓我們把這些語法實際應用在網頁設計上吧!

文字的大小與顏色

　　文字大小的設定語法有兩種，一種是：<h1>...</h1>，阿拉伯數字部分可由1~6，數字越小，字型越大，稱為標題字；另一種是：<font size=+1>…</font>，阿拉伯數字越大，字型越大，而且可以逐字設定大小。

　　 現在來實際操作文字大小的設定：

文字的顏色則由三組（分別為：紅、綠、藍三原色），每組兩位數字，共六位數字來設定，每位數字可以填入：0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f等十六種代號。

現在我們來練習文字顏色的設定：

有趣吧！現在的你已經可以設計出彩色的網頁了呢！

加入水平線

　　在網頁中加入水平線，可使網頁內文與標題的區分更清楚，同時提升網頁的質感。加入水平線的語法如下：

<hr> 加入水平線

< hr size=12 width=”75%”> 改變水平線內定值

　　　現在就來試試看吧!

　　 <hr>還可加入「size」和「width」兩個參數，size指的是線的粗細，以阿拉伯數字表示，數字越小越細；width指的是線的長短，以%表示，數字越大越長。現在再來看看加了參數的<hr>語法的效果。

加入背景

　　加入背景可以使你的網頁更加出色，有兩種方法：其一是加入背景顏色，另一個是加入背景圖案。它們的HTML語法為：

<body bgcolor=”#00ffff”>…</body> 加入背景顏色

<body background=”file:///c:windows/clouds.jpg”>…

</body> 加入背景圖片

加入背景顏色

　　　　　背景顏色代碼的意義與表示方法，與文字顏色的設定法相同，所以你只要記住所喜歡顏色的代碼，將它設定在背景顏色裡，就可以了。

加入背景圖案

　　除了加入背景顏色可以使網頁更美觀之外，還可以加入背景圖案，使網頁更生動。

　　加入網頁的圖檔必須是副檔名為：「 .jpg或 .gif」的圖檔，同時必須將圖檔拷貝至與網頁程式相同目錄處，以方便瀏覽器抓取圖檔喔！而且不管所要加入的圖檔的尺寸是多少，電腦都會自動將圖檔貼滿整個畫面唷！

^{網頁的表格製作}

　　為了呈現資料的整齊與查閱的方便，需要在網頁上製作表格。

　　HTML製作表格的語法是：

</table>

　　這是一個比較複雜的語法，要耐心一些喔！現在再把上面的語法分析解釋的更清楚些：

　　宣告「製作表格」後，必須先宣告「列」再宣告「欄」喔！聽起來霧煞煞，看看下面的實例，應該就清楚些了。

　　現在我們來試著做一個簡單的表格：

　　製作表格語法中的參數”border”是設定表格「框線」的大小，以阿拉伯數字表示，數字越小，框線越細；參數”width”是設定整個表格的寬度，以%表示，數字越小表格越窄。