HTML

何謂HTML

HTML文件結構

HTML文件格式架構

HTML文件註解

編輯HTML的工具

HTML 常用標籤

文件的背景與前景

文件背景圖案

文件背景顏色

前景文字

背景音樂

人性化的顏色代號

前景物件字體顏色的彈性設定

標題

字體

文字樣式

字體顏色與字型

實作

特殊字元

區塊結構元素

表列結構元素

定義表列

規律性表列

線段HP

圖形

基本表格結構

設定表格

框線與外框邊

儲存格

表格文字排列控制

HTML 互動式標籤

建立Form

多種輸入元件

輸入元件對應的名稱和值

多行文字輸入元件的改進

傳送HTTP檔案

何謂HTML:
WWW上製作網頁(HomePage)的語言,是一種標籤語言(Tag Language),可以讓瀏覽器處理及呈現原始文件的內容。在HTML語法中大都是以:<XX>開始,以</XX>結束;其中XX就是HTML的標籤。下面為一HTML例子:

HTML外觀

titile以簡短的文字表示網頁之內容,title的內容會出顯示在瀏覽器頂端的標題列上。若將網頁加入我的最愛(書籤),則我的最愛(書籤)名稱為title內容。

編輯HTML的工具
具有編輯純文字檔功能的軟體皆可用來編輯HTML,Windows本身附送的記事本即是一個非常普遍的HTML編輯工具,底下為一使用記事本編輯網頁的方法。

1. 用記事本編寫HTML標籤後,首先,先選擇另存新檔(如圖)

HTML 常用標籤


格式 <html></html>

說明:必須分置於文字的開頭與結尾處,告知瀏覽器此為一份HTML文件。

格式 <head></head>

說明:文件的表頭,主要定義本分文件內容的整體資訊,一些script的定義皆放於此區

格式 <body>文件主要內容</body>

說明:所有要在網頁上顯示的資料皆放在此區內。

格式 <p>內容</p>

說明:將內容設定為獨立的一個段落。

格式 <center>內容</center>

說明:將內容置中對齊。

格式 <b >內容</b>

說明:設定內容文字為粗體。

格式 <i>內容</i>

說明:設定內容文字為斜體。

格式 <u>內容</u>

說明:設定內容文字加上底線。

格式 <sub>內容</sub>

說明:設定內容文字為下標。

格式 <sup>內容</sup>

說明:設定內容文字為上標。

格式 <font face=字型size=大小 color=顏色>內容</font>

說明:設定內容文字的格式,可以設定字型、大小與顏色。

範例

<html>

<head><title>Font範例</title></head>

<body>

<center>

<font size=7 color=white>大小=7</font>

<font size=6 color=yellow>大小=6</font>

<font size=5 color=white>大小=5</font>

<font size=4 color=red>大小=4</font>

<font size=3 color=white>大小=3</font>

<font size=2 color=white>大小=2</font>

<font size=1 color=white>大小=1</font>

</center>

</body>

</html>

格式 <h?>內容</h?>

說明:將內容置中對齊。

範例:

</html>

<html>

<head><title>標題與粗斜體範例</title></head>

<body> <center>

<h1>第一級標題</h1>

<h2>第二級標題</h2>

<h3>第三級標題</h3>

<h4>第四級標題</h4>

<h5>第五級標題</h5>

<h6>第六級標題</h6>

一般文字

<sup><b>上標粗體</b></sup>

一般文字

<sub><i>下標斜體</i></sub>

</center> </body>

</html>

格式〈註解

說明:說明文字,瀏覽器會忽略此段文字。

格式:

<UL>

<LH>標題

<LI type=square>第一項

<LI type=circle>第二項

<LI type=disc>第三項

</UL>

說明:無序列表,類似WORD的項目符號。

格式:

<OL start=開始號碼 type=編號方式>

<LH>標題

<LI type=square>第一項

<LI type=circle>第二項

<LI type=disc>第三項

</OL>

說明:有序列表,類似WORD的大綱編號。

格式

<DL>

<LH>標題

<DT>第一個專有名詞

  <DD>定義內容

<DT>第二個專有名詞

  <DD>定義內容

...

</DL>

說明:定義列表,類似WORD的大綱層級。

範例:

<OL type=A start=5>

<LH>標題

<LI>第一項

<UL>

<LI type=square>第一小項

<LI type=circle>第二小項

<LI type=disc>第三小項

</UL>

<LI>第二項

<LI>第三項

</OL>

<DL>

<DT>第一個定義名詞

  <DD>定義說明

<DT>第二個定義名詞

  <DD>定義說明

</DL>

格式:

<table width=% height=高度 border=框線寬度 cellpadding=文字與表格邊緣距離 cellspacing=表格間距>

<caption align=top/bottom>表格標題</caption>

<tr><td>列一欄一</td><td>列一欄二</td></tr>

<tr><td>列二欄一</td><td>列二欄二</td></tr>

</table>

說明:基本畫表格,以<table>為表格開始,border定義表格框線寬度,<tr>表示列,<td>表示欄位,除了<td></td>還可用<th></th>其差別為<th></th>中的字是粗體字且置中。若設定width=20% height=50則表格大小會以實際內容所佔大小作分配,另外cellpadding可用來設定內容與表格邊緣的距離,cellspacing用來設定格子與格子間的距離

格式

<tr align=水平對齊 valign=垂直對齊>內容</tr>

<th align=水平對齊valign=垂直對齊>內容</th>

<td align=水平對齊valign=垂直對齊>內容</td>

水平對齊方式=left/center/right

垂直對齊方式=top/middle/bottom

說明:設定表格內容對齊方式。

格式:

<img src="路徑/圖片檔名" alt="找不到圖片時的替代文字" width=顯示時的寬度height=顯示時的高度 border="邊框大小">

說明:在網頁上加入圖片,src用來告訴瀏覽器到何處讀取圖片。

格式:

<body background="路徑/圖片檔名" bgproperties=fixed text=文字顏色>

說明:設定網頁背景,background用來告訴瀏覽器到何處讀取背景圖片,bgproperties = fixed用來設定背景圖片不隨內容一起捲動。

格式:

<A HREF="URL" STYLE = "text-decoration : none" target=_blank>內容</a>

說明:設定內容的超連結,其中STYLE = "text-decoration:none"用來設定超連結不出現底線,target=_blank用來設定以新視窗開啟超連的文件。

格式

<th colspan=要合併的欄位數量>內容</th>

<th rowspan=要合併的列數量>內容</th>

<td rowspan=要合併的列數量>內容</td>

說明:colspan合併欄rowspan合併列。

範例:

<table border=5>

<tr><th colspan=2>課表</th>

<th>星期一</th>

<th>星期二</th>

<th>星期三</th>

<th>星期四</th>

<th>星期五</th>

<th>星期六</th></tr>

<tr><th rowspan=4>上午</th>

<th>8:00~8:50</th>

<td align=center></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td></tr>

<tr><th>9:00~9:50</th>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

</tr>  

<tr><th>10:00~10:50</th>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

</tr>  

<tr><th>11:00~11:50</th>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td></tr>  

<tr><th rowspan=4>下午</th>

<th>13:00~13:50</th>

<td align=center ></td>

<td align=center ></td>

<td align=center valign=middle rowspan=4><br></td>

<td></td>

<td></td>

<td align=center valign=middle rowspan=4> &nbsp </td></tr>

<tr><th>14:00~14:50</th>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td></tr>

<tr><th>15:00~15:50</th>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td></tr>  

<tr><th>16:00~16:50</th>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td>

<td align=center ></td></tr>   

</table>

格式:

<a href="mailto:電子郵件信箱">信箱名稱</a>

說明:設定按下信箱名稱後,可以寄信至mailto後指定之電子郵件信箱地址。

範例:

<a href="mailto:sundaymp3@pchome.com.tw">

sundaymp3@pchome.com.tw</a>

格式:

<body bgcolor=背景顏色 text=文字顏色 link=連結顏色 vlink=已連結之顏色 alink=滑鼠按下鏈結未放開前之顏色>

說明:設定文件背景、文字與連結的色彩,色彩設定方式可分兩種,第一種是使用616進位數設定,另一種直接輸入顏色英文亦可,顏色色表請按此

格式:

<embed src="路徑/聲音檔名" width=寬度 height=高度 autostart=true loop=flase></embed>

說明:設定文件背景音樂,src用來告訴瀏覽器到何處讀取音樂檔,若不想顯示撥放音樂的圖形,可將widthheight設為零。

格式:

<MARQUEE

  [ ALIGN = left | center | right | top | bottom ]

  [ BEHAVIOR = scroll | slide | alternate ]

  [ BGCOLOR = color ]

  [ DIRECTION = left | right ]

  [ HEIGHT = lenght ]

  [ HSPACE = pixels ]

  [ LOOP = number | infinite ]

  [ SCROLLAMOUNT = pixels ]

  [ SCROLLDELAY = milliseconds ]

  [ VSPACE = pixels ]

  [ WIDTH = lenght ] >內容

</MARQUEE>

說明:設定跑馬燈,ALIGN : 用來指定文字對齊跑馬燈方框的位置。
BEHAVIOR
:指定捲動的方式。scroll會等文字整個捲出跑馬燈的一端後,再從另一端出現;slide是以展示幻燈片 的方式呈現文字;alternate會讓文字在左右來回移動。
BGCOLOR
:指定跑馬燈的背景顏色,可用16進位RGB值或色彩名稱。DIRECTION:指定文字移動的方向。 HEIGHT:設定跑馬燈高度,單位為像素。
WIDTH
:設定跑馬燈寬度,單位為視窗的百分比值或像素。
LOOP
:指定跑馬燈捲動的次數,若LOOP=infinite(LOOP=-1)則會永不停止。
SCROLLAMOUNT
:設定跑馬燈文字每次更新畫面時的位移距離,以像素值為單位。
SCORLLDELEY
:設定跑馬燈每次更新畫面之間的暫停時間,以千分之一秒為單位。

範例:

<marquee alig=center direction=right behavior=slide scrollamount=20 bgcolor=000000

scrolldelay=50 LOOP = -1 >跑馬燈</ marquee >

格式:

<meta http-equiv="refresh" content="次數; url=接著要顯示的網頁">

說明:自動轉換網頁,之前的所有標籤皆放置於<Body></body>中接下來的標籤是放置於<head></head>間。當然要設定自動轉換網頁須先有多個網頁才可以。

範例:

<html>

<head>

<title>自動換頁</title>

<meta http-equiv="content-type" content = "text / html ; charset=big5">

<meta http-equiv="refresh" content="2; url= next.htm ">

</head>

<body bgcolor="#000000" text="#ffffff" link= "#00ffff" vlink="#00ff00" alink= “#ff0000">

<center>

<table>

<tr>

<td><img src="image1.gif"></td>

<td valign=top><font size=7 color=white><br><br><br></font></td>

</tr>

</table>

</body>

</html>

格式:非標籤符號

html中,〈、〉、&、〝等符號會被當成標籤使用,當瀏覽器讀到這些符號時,會自動把它們當成標籤,所以在瀏覽器中要顯示這些符號,就必須用:&lt來顯示小於符號,&gt來顯示大於符號,&amp來顯示&符號,&quot;來顯示雙引號。

範例:

若想要在網頁上顯示A>B則html攥寫方式如下:A&lt;B

格式:

<hr noshade size=粗細 width=百分比 align=對齊方式>

說明:設定分隔線,noshade可設定分隔線為實線(非中空線)size設定線的粗細,width設定線的長度。

範例:

<hr noshade size=8 width=50% align=center>

 

HTML 互動式標籤


格式:

<form action="網頁名稱" method="get/post">

姓名:<input type="text" name=NAME value="" size=8 maxlength=8>

密碼:<input type="password" name=PASS value="" size=4 maxlength=4>

<input type ="check box">

<input type ="radio">

<input type ="hidden">

…….

<input type="submit"><Input type="reset">

</form>

說明:在表單中輸入資料,按下Submit按鈕後資料傳送到action="網頁名稱"的網頁中。
input type="text"
表示輸入的資料為文字型態,input type="password"表示輸入的資料為密碼型態,maxlength指定資料最大長度。input type="submit"為按鈕,按下此按鈕可將資料送出,送出方式於method中定義。Input type="reset"則為清除輸入資料的按鈕。
最後再利用<% request.form("變數名稱") %>抓取從表單傳回來的資料。

範例:

<form action="123.htm" method="get">

姓名:<input type="text" name=NAME value="" size=8 maxlength=8>

密碼:<input type="password" name=PASS value="" size=4 maxlength=4>

<input type="submit"><Input type="reset">

</form>

格式:

<textarea name="paragraph" rows=列數 columns=行數>

說明:輸入多列資料

格式:

<select>

<option>選項一

<option>選項二

<option>選項三

……

</select>