HTML 語法教學

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有一固定的格式，瀏覽器才可以辨識及分析，進而顯示在你的眼前，而基本格式為 : <html> <head> <title> </title> </head> <body> 您所要在瀏覽器顯示的內容 </body> </html> • 有兩個須要注意的地方，每一個開啟碼是由<> 兩個符號所框住的，而關閉碼是由</> 所框住的，而每一個HTML碼有開就要有關，後面的單元會逐一的介紹。

網頁顏色設定 • <bodybgcolor="#xxxxxx"text="#xxxxxx"link="#xxxxxx"vlink="#xxxxxx"alink="#xxxxxx"> bgcolor=控制背景顏色 text=控制文字顏色 link=控制連結顏色 vlink=控制已閱讀過的顏色 alink=控制正在連結的顏色 • 而xxxxxx六個數值代表紅／綠／藍的顏色元素值，為A～F及0～9等所組合起來的六個數值

加入背景圖片 • 若您覺得背景顏色太單調，想要換成背景圖像的話，就得要在<body>內加入background的屬性了。如果你的背景圖檔檔名為 back.gif，則<body>內便要寫成 : <bodybackground="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=a (控制清單之前數字的參數顯示成a. b. c......) type=I (控制清單之前數字的參數顯示成I. II. III......) type=i (控制清單之前數字的參數顯示成i. i. iii......) start=起始的數值

自訂清單 • 一般做為解釋一樣動作，加入以下的碼便可做一個定義清單 <dl> <dt>電腦 <dd>已成為人類生活的一部分 <dt>滑鼠 <dd>不是老鼠喔～ </dl> • 上面的原始碼會顯示成下面的樣子 : 電腦已成為人類生活的一部分滑鼠不是老鼠喔～

標題文字 • 瀏覽器可分出六種大小的標題文字,原始碼如下 : <h1> 標題文字1 </h1> <h2> 標題文字2 </h2> <h3> 標題文字3 </h3> <h4> 標題文字4 </h4> <h5> 標題文字5 </h5> <h6> 標題文字6 </h6>

文字設定 如果要把文字變成粗體，就要加上<b>的碼了如果要把文字變成斜體，就要加上<i>的碼了如果要把文字加上底線，就要加上<u>的碼了 <b>HTML教學</b> HTML教學　 <i>HTML教學</i> HTML教學 <u>HTML教學</u> HTML教學

文字的控制 • 文字的控制要加上<font>的碼，它可以控制文字的大小，顏色，字型，在<font>裡加上一些屬性就可以控制 <fontface="Arial"color="#cc33ff"size="7"> Good morning </font> • face=控制文字字體，填入字體名稱 • color=控制文字顏色 • size=控制文字大小，數字1～7

強迫換行、換段 • 如果覺得您的文字太長，想要您的文字跳到下一行，就要加上<br>或<p>的碼 : 　同一段換行<br>換新的段落<p> • 在<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="http://www.e4fancy.com/images/e4fancy88.gif"> • 其中<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>

表格製作 3 • 若想跳到下一行，加上<tr>即可 <table border=1> <td>儲存格1</td> <td>儲存格2</td> <tr> <td>儲存格3</td> <td>儲存格4</td> </table>

表格製作 4 • 也可使用<th> <table border=1> <th>儲存格1</th> <th>儲存格2</th> <tr> <th>儲存格3</th> <th>儲存格4</th> </table>

表格製作 5 • <td><th>內的屬性如下 : align=控制水平是left／right／center valign=控制垂直是top／middle／bottom background=背景圖檔 colspan=使一個儲存格橫跨 N 個欄位 rowspan=使一個儲存格下跨 N 個列

表格製作 6 • colspan的用法 : <table border=1> <td colspan=3 align=center>儲存格 A1</td> <tr> <td>儲存格 B1</td> <td>儲存格 B2</td> <td>儲存格 B3</td> </table>

表格製作 7 • rowspan的用法 : <table border=1> <td rowspan=3 align=center>儲存格 A1</td> <td>儲存格 B1</td> <tr> <td>儲存格 B2</td> <tr> <td>儲存格 B3</td> </table>

頁框分割 1 • 首先要加入 <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> <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 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=高度

HTML 語法教學