部落客不可不知

的HTML語法

製作者：
totem、安妮、孔迷、小豬的旅遊日記
大綱
• 原則
• 變化字型的小撇步
• 超連結語法
• E-mail 連結語法
• 放置圖片設定圖片大小、位置
• 標題
• 設定段落、換行與縮排
• 列清單
• 置中
• 製作表格
• 水平線
原則
z 有始有終--所有指令以<>開始，以</ >結束。
z 開頭指令要與結尾相符。
Example:
將我的文章四字粗斜體
<b><i>我的文章</b></i>……….×
<b><i>我的文章</i></b>...........○
變化字型的小撇步

想把字變成什麼樣，就用什麼樣的標籤把想變的字包起來就對了!

變電報(teletype)-------<tt></tt>
<tt>It is not difficult!</tt>
It is not difficult!
變粗體字語法
z <b></b>或 <strong></strong>
表格根本<b>一點都不難</b>嘛!
表格根本一點都不難嘛!
變斜體字語法
z <i></i>或 <em></em>
表格根本<i>一點都不難</i>嘛!
表格根本一點都不難嘛!
z 劃底線(underline) ------- <u></u>
快要變成<u>部落格小神童</u>嚕!
快要變成部落格小神童嚕!

z 刪除線(strikethrough) -------<strike></strike>
<strike>表格真的一點都不難嗎?</strike>
表格真的一點都不難嗎?

z 變字體大小(font)-------<font size=?></font>
真的要變<font size=40>小神童</font>啦!
真的要變小神童啦!
z 變字體顏色 ------- <font color=?></font>
親愛的，我把<font color=red>字變美了</font>!
親愛的，我把字變美了!

z 又粗 又斜 又劃底線 還變綠色
<b><i><u><font color=green>
我真是太厲害了啦!<font></u></i></b>
我真是太厲害了啦!
 超連結語法
z <a href= “連結網址” target=“_blank”>要顯示的文字 </a>
example:
輸入<a href= http://andrea.totematncu.info
target=“_blank”>我的網頁</a>
 E-mail連結語法

z <a href= “mailto: mail信箱”>要顯示的文字</a>

example:
輸入 <a href= “mailto: andrea.teach@gmail.com>
我的信箱</a>
放置圖片/設定圖片大小、位置
z <img src= “URL”>
z 置於右方: <img src= “URL” align=right>
z 限制圖片大小：
<img src= “URL” height=61 width=90
align=right>
標題
z <h1>標題一</h1>
z <h2>標題二</h2>
z <h3>標題三</h3>
z <h4>標題四</h4>
z <h5>標題五</h5>
z <h6>標題六</h6>
設定段落、換行與縮排
z 段落:
<p>文字</p>
z 換行:
<br>
z 縮排:
<blockquote>文字</blockquote>
 列清單

z 一般清單
<UL>
<LI>物品一</LI>
<LI>物品二</LI>
</UL>

z 順序清單
<OL>
<LI>物品一</LI>
<LI>物品二</LI>
</OL>
置中
z <center>置中文字</center>
 做表格囉!
*好好利用表格不但可以讓你的文字乖乖聽話，
還可以有條理的呈現資料給讀者喔!
我們先來認識一下表格的基本標籤：

表格(table) - <table></table>
表格列(table row) - <tr></tr>
表格欄(table cell,table data or column)- <td></td>
標題(table header) - <th></th>
了解基本標籤了!我們來試著建立一個簡單的表格吧!
步驟解析 HTML 網頁顯示內容

1. 鍵入表格起始標籤 <table>
來開始一個表格 <table> <tr>
2. 鍵入表格列的起始標籤<tr>
<td>哈囉
開始建立表格的第一列 哈囉
</td>
3. 再鍵入表格欄的起始標籤<td>
建立表格第一列的第一格 </tr>
4. 於<td>後面打上儲存格內容， </table>
再以</td>結束這一格
5. 鍵入表格列的結束標籤</tr>
6. 鍵入表格的結束標籤</table>
想要一列裡面有幾欄， 想要有幾列，就重複進行左邊的動
就在步驟2到步驟5中間 作幾次。
重複操作3和4。 而且，想把欄內文字變成標題，把原
來<td>的位置改成<th>就可以嚕!
<table> <table>
<tr> <tr>

<td>哈囉</td> 哈囉 你好 拜拜 <th>哈囉</th> 哈囉 你好 拜拜
<td>你好</td> <th>你好</th> 這是 第二 列嚕
<td>拜拜</td> <th>拜拜</th>

</tr> </tr>
</table>
<tr>

<td>這是</td>
<td>第二</td>
<td>列嚕</td>

</tr>

</table>
 覺得奇怪嗎?表格的框咧?
<table>
<tr>

<td>哈囉</td>
<td>你好</td> 哈囉 你好 拜拜
<td>拜拜</td>

</tr>
</table>

其實是因為表格很聽話，說一步、做一步，我們沒
叫它有框，它絕對不敢有框啦!
所以接下來我們就來看看要如何利用標籤設計自己
想要的表格喔!
讓表格隨你心所欲的標籤:
表格本身<table>
邊框寬度 <table border=★>
內框線寬度 <table cellspacing =★> ★=多少像素(pixel)
文字與框之距離<table cellpadding =★> %=佔整個頁面的百分比
表格寬度 <table width =★ or %>

來看看範例：
<table> border cellspacing

<table border=3 cellspacing=1

cellpadding=8 width=30%>

<tr>
哈囉 你好 拜拜

<td>哈囉</td> cellpadding
<td>你好</td>
<td>拜拜</td>
width
</tr>
</table>
表格列與表格欄 <tr> & <td>
儲存格左右對齊方式 <tr align=?> or <td align=?> ?可填left,center,or right>
儲存格上下對齊方式 <tr valign=?> or <td valign=?> ?可填top,middle,or bottom>

<table> {放在<td>裡面}
<table border=2>
<tr>
<td align=center valign=bottom>哈囉</td> 你好 拜拜
<td>你好</td>
哈囉
<td>拜拜</td>
</tr>
</table>
<table> {放在<tr>裡面}
<table border=2>
<tr align=center valign=bottom >
<td >哈囉</td>
<td>你好</td> 哈囉 你好 拜拜
<td>拜拜</td>
</tr>
</table>
合併列(上下儲存格之合併)<td rowspan= #> #為想合併多少個列
合併欄(左右儲存格之合併)<td colspan= #> #為想合併多少個欄
讓儲存格內文字不會因儲存格大小而斷行 <td nowrap>

<table> 如果想合併最 <table>

<table border=2> 左邊的兩列， <table border=2>
<tr> 我們就在 <tr>
<td>哈囉</td> <td rowspan=2>哈囉</td>
＂哈囉＂那格 <td>你好</td>
<td>你好</td>
加上合併列的 <td>拜拜</td>
<td>拜拜</td>
標籤，可是 </tr>
</tr>
………
<tr> <tr>
<td>這是</td> <td>這是</td>
<td>第二</td> <td>第二</td>
<td>列嚕</td> <td>列嚕</td>
</tr> </tr>
</table> </table>

哈囉 你好 拜拜 哈囉 你好 拜拜

這是 第二 列嚕 這是 第二 列嚕
為什麼表格亂掉了呢?
因為，我們要合併「哈囉」和「這是」，除了記得在「哈囉」那格寫上
正確的合併標籤之外，還要記得刪掉「這是」這一格喔 !
你看Æ

<table>
<table border=2>

<tr> 哈囉 你好 拜拜
<td rowspan=2>哈囉這是</td> 這是
<td>你好</td>
<td>拜拜</td> 第二 列嚕
</tr>

<tr>
<td>第二</td>
<td>列嚕</td>
</tr>

</table>
小叮嚀
z 表格的標籤是很纖細的，一定要記得：
一旦有一個起始標籤，就一定要有一個結束標籤喔!

z 所有控制某項目的屬性都是夾在那個項目的標籤之內的。例如：

控制整個表格的屬性，就是夾在<table>和</table>標籤內
<table border=1 cellpadding=5>…</table>

控制列的屬性就是夾在<tr>和</tr>內
<tr align=right valign=top>…<tr>

同理，控制儲存格的屬性就是夾在<td>和</td>內
<td rowspan=2 colspan=3>…</td>
水平線 (Horizontal Rules)
在文章中加入水平線，可以讓你的版面更整齊美觀喔!

z 水平線標籤<hr></hr>
z 水平線屬性標籤：
水平線寬 <hr width= ★ or %> 像素或是百分比
水平線大小<hr size= ★ >
水平線顏色<hr color=?> ?為顏色
避免陰影<hr noshade>
width