如何製作烘焙雞
看到別人漂亮的烘焙雞是不是好欽佩，一定要電腦高手才做得出來嗎？
其實你只要會打字、再認識一點底下所要介紹的HTML語法，
就可以作出圖文並茂的烘焙雞了！趕快試試看吧！
在全球資訊網中的文件大都是以HTML語法所寫成的一般普通文字檔，不信的話你可以
選取檢視原始檔案(View Document Source)看看這篇文章的真面目：如果你是用領航員
(Netscape Navigator)選－檢視－檢視原始檔案，如果你是用微軟的網路探險家
(IE,Internet Explorer)按滑鼠右鍵－選－檢視原始檔。
不知道你有沒有注意到，HTML文件中有很多字用小於符號和大於符號括住，例如：
<title>..............</title>，<h1>.............</h1>，<center>...........</center>
而且一個括號有斜線，另一個則沒有斜線，這就是秘密的所在了！
每一個括號都代表一種命令（標籤），你的瀏覽器就靠這個標籤來呈現出不同的效果
例如：<h1>測試</h1>
<h1>告訴領航員字變成標題字（大、粗........）
有斜線的</h1>則告訴領航員，將字恢復成原來的（命令結束了）
標籤是不是一定要兩個（開始、結束），那可不一定，不過大部分是啦！
為視窗換標題
試試看，到測試區輸入：<title>大雄的烘焙雞</title>
視窗左上角的標題欄就出現你的首頁標題：大雄的烘焙雞
多種大小的本文標題字
試試看，到測試區輸入：<h1>歡迎光臨</h1>
視窗中是不是有大大的歡迎光臨
除了<h1>......</h1>還可以是<h?></h?> (? 可填的數字1∼6，數字愈小字愈大)
字對齊中央
試試看，到測試區修改為：<center><h1>歡迎光臨</h1></center>
你的字是不是對中了！
更換字的大小和顏色
試試看，到測試區輸入：你<font size=5>好</font>嗎
視窗中是不是變成：你好嗎
其中的 size 就是設定字的大小，等號旁可填數字1∼7，數字愈大字愈大
試試看，到測試區輸入：你<font size=5 color=red>好</font>嗎
視窗中是不是變成：你好嗎
前面說過 size 是設定字的大小，而 color 則是設定字的顏色：
＜例＞red=紅 orange=橙 yellow=黃 green=綠 blue=藍 black=黑 white=白
也可以用<font color=#RRGGBB></font>來表示更多的顏色(RGB代表紅藍綠，可以換成0∼f)
＜例＞紅=#ff0000 綠=#00ff00 藍=#0000ff 紫=#ff00ff(紅＋藍)，以此類推
加分隔線
試試看，到測試區輸入：<hr>
是不是多了一條橫線
如果不想那麼長，試試看，到測試區修改為：<hr width=50%>
是不是只剩下一半 (50%) 了
那要粗一點呢？試試看，到測試區修改為：<hr size=10>
是不是變粗了！
換行
試試看，到測試區輸入：大<br>雄<br>
是不是會變成：
大
雄
換段
試試看，到測試區輸入：大<p>雄<p>
看得出來和<p>和<br>有什麼不同嗎？！換段除了換到下一行，還會加一些空白列！
加圖片
接下來看看如何加上圖片呢？試試看，到測試區輸入：
<img src="http://www.lsps.tp.edu.tw/image/html.gif">
其中 src="http://www.lsps.tp.edu.tw/image/html.gif" 引號中是圖片的擺放的位置
如果圖片和文件放在同一個目錄（資料夾），可以用src="html.gif"，不用加http://......
去哪裡找圖片呢？力行國小中有一些，你也可以到蕃薯藤輸入圖片或圖案找找看！
加入連結點
HTML文件的優點就是可以一頁串一頁，只要在連結點（滑鼠指標變手指的地方）按一下
，就可以載入另一頁，我們來看看，如何設定連結點，製作一個點單：
試試看，到測試區輸入：<a href="http://www.ntu.edu.tw/">台大</a>
台大 放在 <a href="........."> </a> 之間，表示當滑鼠移到這兩個字時會變成”指頭
而 http://www.ntu.edu.tw/ 則是台大的網址
＜另例＞我自己有兩頁，yan1.htm 設連結點到同目錄下的 yan2.htm，則輸入：
<a href="yan2.htm">另一頁</a>
有沒有發現，不用加 http://........
加背景圖
接下來看看如何加上背景圖片呢？
試試看，到測試區，在視窗標題(title)的下一行輸入：<body background="http://www.lsps.tp.edu.tw/image/bk_sky.jpg">
其中 "http://www.lsps.tp.edu.tw/image/bk_sky.jpg" 引號中是圖片的擺放的位置
如果圖片和文件放在同一個目錄，http://www.lsps.tp.edu.tw/image/ 就可以去掉，
只要輸入<body background="bk_sky.jpg">就可以了！
表格製作
製作一個表格會用到下面的標籤：
要使用表格<TABLE>......</TABLE>
表格標題欄<TH>......</TH>
行（→）資料欄<TD>......</TD>
列（↓）<TR>......</TR>
另外可控制表格的格線厚度BORDER=?， 表格寬度WIDTH=?，表格背景顏色BGCOLOR=?
試試看，到測試區輸入：
<TABLE BORDER=5>
<TR><td>第1A格</td><td>第1B格</td><td>第1C格</td></TR>
<TR><td>第2A格</td><td>第２B格</td><td>第2C格</td></TR>
</TABLE>
是不是產生一個３×２格，格線厚度３(BORDER=5)的表格
如果想要把 1A 和 2A 合併（如下所示）怎麼辦呢？
試試看，到測試區輸入：
<TABLE BORDER=5>
<TR><td rowspan=2>第1A格</td><td>第1B格</td><td>第1C格</td></TR>
<TR><td>第２B格</td><td>第2C格</td></TR>
</TABLE>
有沒有注意到 1A 多了什麼？
多了 rowspan=2 ，告訴領航員，這一格要向下延展二格(列)
而 <td>第2A格</td> 則把它刪除
如果想要把 1A 和 1B 合併（如下所示）怎麼辦呢？
試試看，到測試區輸入：
<TABLE BORDER=5>
<TR><td colspan=2>第1A格</td><td>第1C格</td></TR>
<TR><td>第2A格</td><td>第２B格</td><td>第2C格</td></TR>
</TABLE>
有沒有注意到 1A 多了什麼？
多了 colspan=2 ，告訴領航員，這一格要向右延展二格(行)
而 <td>第1B格</td> 則把它刪除
此外，表格的寬度、顏色可以自己加加看！想一想，下面的表格要怎樣做？
練習小技巧
其實利用我們的範例練習不需每個字重新輸入，視窗軟體可以用滑鼠剪貼的：
1.用滑鼠在要複製的字上按左鍵拖曳（按住不放並移動），將要選取的字做記號
2.選－窗視點中的－編輯－複製（或用鍵盤Ctrl + C)
3.到測試區－（用鍵盤Ctrl + V)
網頁製作：台北市力行國小顏國雄老師
