HTML 語法教學 授課：彭穎聰 老師
Html 概述 HTML的全名是HyperText Markup Language，是編寫網頁的基本語言，而它並不是一個程式， 只是一些插在普通文件內的碼( code )，這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來, 就是你現在所看到的頁面就是用HTML來控制的，它可控制字體的大小，也可以插入連結或圖像。 一個HTML檔稱為HTML document，存檔的副檔名為htm或 html，編寫的方式有很多種， 最原始的方法是用windows內的記事本或各種文書編輯軟體，而現在有一種軟體也是編寫HTML碼， 但具有預覽及插入特效的功能，如Dida 網頁速寫器，編寫完成後記得儲存成*.htm或*.html 即可。
Html 概述 若你想看一個網頁的HTML檔，只要在瀏覽器內按下滑鼠右鍵，再選擇 檢視原始檔(view)即可。 一份標準的HTML文件是由元素所組成的，元素是由標籤(Tag)以及文件內容所組成。 文件內容可以是文字、圖形、甚至是影像、聲音等等。而標籤又是啥東東呢？？ 一個開始標籤(< >)是由一個小於符號(<)和一個大於符號(>)所構成的 一個起始標籤中加一道斜線"/"就構成了結束標籤(</>) 而一對標籤是由一個起始標籤和一個結束標籤所構成的。
html的結構 HTML document有一固定的格式，瀏覽器才可以辨識及分析，進而顯示在你的眼前，而基本格式為 : <head> <title> </title> </head> <body> 您所要在瀏覽器顯示的內容 </body> </html> 有兩個須要注意的地方，每一個開啟碼是由< > 兩個符號所框住的，而關閉碼是由</ > 所框住的，而每一個HTML碼有開就要有關，後面的單元會逐一的介紹。
網頁顏色設定 <body bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx"> bgcolor=控制背景顏色 text=控制文字顏色 link=控制連結顏色 vlink=控制已閱讀過的顏色 alink=控制正在連結的顏色 而xxxxxx六個數值代表紅／綠／藍的顏色元素值，為A～F及0～9等所組合起來的六個數值
加入背景圖片 若您覺得背景顏色太單調，想要換成背景圖像的話，就得要在<body>內加入background的屬性了。如果你的背景圖檔檔名為 back.gif，則<body>內便要寫成 : <body background="back.gif" text="#000000" link="#0066cc" vlink="#336600"> 如果圖像的檔案跟您網頁的檔案不在同一目錄裡，則必須輸入完整路徑，如http://www.123.com.tw/back.gif。 bgproperties="fixed"(使背景圖像固定不動，不過只有IE有效果)
加入水平分線 如果想要在網頁內加入一條像下面的水平線，加入<hr>的碼即可。 這是上面那一條線的原始碼 : <hr size="5" align="center" noshade width="90%" color="0000ff"> size=控制線的寬度 align=控制線是靠左(left)／靠右(right)／中間(center) width=控制線的長度，可用數字或百分比 noshade=控制線沒有陰影 color=控制線的顏色
符號清單設定方式 1 只要加入<ul>的碼，便可製出有小圓頭的清單 : 上面的原始碼會顯示成下面的樣子 : <ul> <li>物件清單1 <li>物件清單2 <li>物件清單3 </ul> 上面的原始碼會顯示成下面的樣子 : 物件清單1 物件清單2 物件清單3
符號清單設定方式 2 在<ul>的標籤內加入一些參數就可以讓顯出的效果有所變動唷 : <ul type=disc> 這是一般的小圓點 <ul type=circle> 這是空心的小圓點 <ul type=square> 這是實心正方黑點
編號清單設定方式 1 跟小圓頭的方式很像，只要加入<ol>的碼，便可製出有數字的清單 : 上面的原始碼會顯示成下面的樣子 : <ol> <li>清單1 <li>清單2 <li>清單3 </ol> 上面的原始碼會顯示成下面的樣子 : 清單1 清單2 清單3
編號清單設定方式 2 type=A(控制清單之前數字的參數顯示成A. B. C......) type=I (控制清單之前數字的參數顯示成I. II. III......) type=i (控制清單之前數字的參數顯示成i. i. iii......) start=起始的數值
自訂清單 一般做為解釋一樣動作，加入以下的碼便可做一個定義清單 上面的原始碼會顯示成下面的樣子 : <dl> <dt>電腦 <dd>已成為人類生活的一部分 <dt>滑鼠 <dd>不是老鼠喔～ </dl> 上面的原始碼會顯示成下面的樣子 : 電腦 已成為人類生活的一部分 滑鼠 不是老鼠喔～
標題文字 瀏覽器可分出六種大小的標題文字,原始碼如下 : <h1> 標題文字1 </h1>
文字設定 如果要把文字變成粗體，就要加上<b>的碼了 如果要把文字變成斜體，就要加上<i>的碼了 如果要把文字加上底線，就要加上<u>的碼了 <b>HTML教學</b> HTML教學 <i>HTML教學</i> <u>HTML教學</u> HTML教學
文字的控制 文字的控制要加上<font>的碼，它可以控制文字的大小，顏色，字型，在<font>裡加上一些屬性就可以控制 <font face="Arial" color="#cc33ff" size="7"> Good morning </font> face=控制文字字體，填入字體名稱 color=控制文字顏色 size=控制文字大小，數字1～7
強迫換行、換段 如果覺得您的文字太長，想要您的文字跳到下一行，就要加上<br>或<p>的碼 : align=left (或是 right、center) 控制靠左、靠右、置中 如果在<p>內有加入align的屬性，記得加上</p>的關閉碼
超連結 如要插入一個連結便要加入： <a href=“URL”> <a href=“http://www.kimo.com”> 奇摩站 </a> <a href=“index.htm”> 回首頁 </a> 而在<a href=“URL”>的標籤中，可插入target=“_blank” (_self、 _name) 來改變連結所開啟頁面的狀態!! blank=開在新視窗 self=開在原視窗 name=開在frame分割頁框的name
插入圖片 要插入圖片，就要加入<img src="圖檔名"> 其中<img src="*.gif">內還可加入下列屬性，來變化圖檔 : width=控制圖檔長度 height=控制圖檔高度 align=left／right／center(靠左、靠右、置中) border=控制外框粗細，設成0就是不要外框
表格製作 1 表格是每一個網頁不可缺少的東西，首先我們要加入<table>的碼，在<table>的標籤內可以控制整個表格的長度和外框的粗細 : <table width="300" border="1" cellspacing="2"> width=控制表格長度，可用數字或百分比 cellspaing=控制儲存格的分隔距離，內定為2 background=背景圖檔 border=控制外框粗細，不外框便設成0
表格製作 2 <table>後加上<td>，才會新開一個儲存格，再用</td>來關閉儲存格 : <table border=1> <td>儲存格1</td> <td>儲存格2</td> </table> 儲存格1 儲存格2
表格製作 3 若想跳到下一行，加上<tr>即可 <table border=1> </table> <td>儲存格1</td> <td>儲存格2</td> <tr> <td>儲存格3</td> <td>儲存格4</td> </table> 儲存格1 儲存格2 儲存格3 儲存格4
表格製作 4 也可使用<th> <table border=1> </table> 儲存格1 儲存格2 <th>儲存格1</th> <th>儲存格2</th> <tr> <th>儲存格3</th> <th>儲存格4</th> </table> 儲存格1 儲存格2 儲存格3 儲存格4
表格製作 5 <td><th>內的屬性如下 : align=控制水平是left／right／center valign=控制垂直是top／middle／bottom background=背景圖檔 colspan=使一個儲存格橫跨 N 個欄位 rowspan=使一個儲存格下跨 N 個列
表格製作 6 colspan的用法 : <table border=1> </table> <td colspan=3 align=center>儲存格 A1</td> <tr> <td>儲存格 B1</td> <td>儲存格 B2</td> <td>儲存格 B3</td> </table>
表格製作 7 rowspan的用法 : <table border=1> </table> <td rowspan=3 align=center>儲存格 A1</td> <td>儲存格 B1</td> <tr> <td>儲存格 B2</td> <td>儲存格 B3</td> </table>
頁框分割 1 首先要加入 也可以寫成這樣 : 用*的意思是左邊的頁面長度為120，而剩餘的空間都給右方的頁面使用 <frameset cols=數字或比例,數字或比例>(左右分割畫面) <frameset rows=數字或比例,數字或比例>(上下分割畫面) 也可以寫成這樣 : <frameset cols=120,*> 用*的意思是左邊的頁面長度為120，而剩餘的空間都給右方的頁面使用
頁框分割 2 在<frameset>之後便要加上<frame>的碼，如果左邊頁面的顯示檔案為left.htm， 而右邊的頁面顯示的檔案為right.htm，如下所示 : <frameset cols=120,*> <frame src="left.htm"> <frame src="right.htm"> </frameset>
頁框分割 3 在<frameset>內的控制屬性如下 : framespacing=控制兩個frame之間的距離 frameborder=控制frame外框的粗細 border=控制外框粗細，設成0就是不要外框
頁框分割 4 要分割頁面的原始碼如下，不須加上<body>碼 : <html> </html> <head> <title> </title> </head> <frameset cols=120,* frameborder="0" framespacing="0" border="0"> <frame src="left.htm"> <frame src="right.htm"> </frameset> </html>
頁框分割 5 在<frame>內的特性 : 連結標籤指定開在frame其中一個頁框內 <frame src="left.htm" name="left"> <frame src="right.htm" name="right"> noresize=讓瀏覽者不可改變frame的size，就加上這行 scrolling=auto/no控制frame是可以/不可以捲動 name=給frame的名字，下面有介紹如何應用 連結標籤指定開在frame其中一個頁框內 <a href="right.htm" target="right">回首頁</a> target=“name” 如：left、right
IE專用背景音樂 加入背景音樂只要在<head>跟</head>之間插入下列原始碼即可讓你的網站有悅耳的聲音唷 : <bgsound src="music.mid" loop="1"> src=設定你想要撥放的midi音樂檔名 loop=音樂重撥次數，如想不斷撥放便設成infinite
通用背景音樂 語法： <embed src="music.mid" loop="1" hidden="true" autostart="true"> src=設定你想要撥放的midi音樂檔名 loop=音樂重撥次數，如想不斷撥放便設成true autostart=是否要在音樂檔傳完之後，就自動播放音樂。true是要，flace是不要。內定值是不要。 width=控制面版寬度 high=控制面版高度 align=控制面版與旁邊文字的對齊方式，跟<img>的語法一樣 hidden=true(如果寫上這個屬性的話，就會完全隱藏控制面板，但無法設定控制面板的寬和高。) controls=控制面版樣式為console(正常面版)／smallconsole(較小面版)／playbutton(只顯示撥放按鈕)／pausebutton(只顯示暫停按鈕)／stopbutton(只顯示停止按鈕)／volumelever(只顯示音量調整)
跑馬燈 若您覺得網頁太單調，想要加上變化的話，跑馬燈是不可少的．只要加上<marquee>即可 <marquee>跑馬燈</marquee> 在<marquee>內的屬性 : bgcolor=“#aaff00”這裡加上背景顏色 direction=這是空控制行進的方向(right／up／down) scrollamount=這是空控制行速度 behavior=這是空控制行進的方式(slide／alternate) width=寬度 height=高度