網頁設計實務 基礎HTML介紹 週次：2 建國技術學院 資管系 饒瑞佶 2003年9月19日
Hyper Text Markup Language（HTML） ＷＷＷ上製作ＨｏｍｅＰａｇｅ的語言，是一種標記語言。需透過瀏覽器翻譯標記後方可呈現 。 HTML 標準之原始資料 除標準HTML標記外，各瀏覽器廠商也自訂專屬的標記
何謂標記語言? Tag Language 製作ＨＴＭＬ文件的過程中必須加入所謂的標記【ＴＡＧ】，好讓瀏覽器知道該如何處理及呈現原始文件的內容。 在ＨＴＭＬ語法中，除了少數例外，大都是以：<XX>開始，以</XX>結束；其中XX就是ＨＴＭＬ的標記。
Web Server vs. Browser Web Server Client 端 瀏覽結果會因Browser不同而不同 下載 HTML文件， 由客戶端瀏覽器執行 *.htm *.htm 瀏覽結果會因Browser不同而不同
HTML標記 有頭有尾，中間夾住所要顯示的文字或圖形 純文字檔 無大小寫之分 檔名需要是.HTM或是.HTML <標籤名稱 屬性 =“設定值”> ..要顯示之文件資料.. </標籤名稱> <Tag Attributes ="Value"> ..Document Of Display.. </Tage>
HTML標記類別 表格標籤(Table Tags) 表單標籤(From Tags) 文件結構標籤(Document Structure Tags) 區段格式標籤(Block Formatting Tags) 字元格式標籤(Character Formatting Tags) 清單標籤(List Tags) 連結標籤(Anchor Tag) 多媒體標籤(Multimedia Tag) 表格標籤(Table Tags) 表單標籤(From Tags)
文件結構標籤 <html>...</html>:標示HTML文件的啟始,終止處 <head>...</head>:標示文件標頭區 <body>...</body>:標釋出文件主題區 <html>...</html>:標示HTML文件的啟始,終止處 <head>...</head>:標示文件標頭區 <body>...</body>:標釋出文件主題區
區段格式標籤 <title>...</title>:文件抬頭 <hi>...</hi>:i=1,2,..,6網頁標題 <hr>...</hr>:產生水平線 <br>...</br>:強迫換行 <p>...</p>:文件段落 <pre>...</pre>:以原始格式顯示 <address>...</address>:標註聯絡人姓名電話地址等資訊 <blockquote>...</blockquote>:區段引言標記 <html>...</html>:標示HTML文件的啟始,終止處 <head>...</head>:標示文件標頭區 <body>...</body>:標釋出文件主題區
字元格式標籤 <b>...</b>:粗體字 <i>...</i>:斜體字 <font>...</font>:改變字型設定 <center>...</center>:向中對齊 <blink>...</blink>:文字閃爍 <big>...</big>:加大字型 <small>...</samll>:縮小字型 <html>...</html>:標示HTML文件的啟始,終止處 <head>...</head>:標示文件標頭區 <body>...</body>:標釋出文件主題區
清單標籤 <ul>...</ul>:無編號清單 <ol>...</ol>:有編號清單 <li>...</li>:清單項目 <dl>...</dl>:定義式清單 <dd>...</dd>:定義描述 <dir>...</dir>:目錄式清單 <menu>...</menu>:選單式清單
連結標籤 <a>...</a>:建立超連結
多媒體標籤 <img>...</img>:嵌入影像 <embed>...</embed>:嵌入多媒體物件 <bgsound>...</bgsound>:背景音樂
標準HTML之架構 使用記事本練習 ….. <HTML> <HEAD><TITLE>瀏覽器抬頭列顯示的訊息</TITLE></HEAD> <BODY> 網頁主體內容 </BODY> </HTML> 使用記事本練習 …..
HTML 表格標籤
表格元件 用以定義以橫列與直欄構成的表格。 包含許多選擇性元件與屬性。 <Table> …… </Table>
表格子元件 CAPTION 表格標題 TR 表格列 COL 表格欄 TH 儲存格標題 TD 儲存格資料 說明 每一子元件均包含若干屬性
基本表格樣本 <TABLE> <CAPTION>表格標題</CAPTION> <TR> <TH>標題一<TH>標題二 <TD>第一列，內容一<TD>第一列，內容二 <TD>第二列，內容一<TD>第二列，內容二 </TABLE>
表格元件屬性 WIDTH 表格的寬度 HEIGHT 表格的高度 BORDER 表格的外框線寬度 FRAME 表格的外框線顯示方式 RULES 儲存格的框線顯示方式 CELLSPACING 儲存格間格大小 CELLPADDING 儲存格內邊留白大小 ALIGN 表格的水平排列方式 BGCOLOR 表格的底色 (背景色彩) BORDERCOLOR 表格的外框線顏色
表格寬度 - WIDTH 通常以下列兩種方式定義。 像素值： width = 200 百分比值： width = 20% <table width = "200"> 格式
表格高度 - HEIGHT 通常以下列兩種方式定義。 像素值： height = "200" 百分比值： height = "50%" <table height = "30%"> 格式
表格外框線寬度 - BORDER 以像素為表示單位。 如不指定，預設值為 0 ，即不顯示。 <table border="2"> 格式
表格外框線顯示方式 - FRAME 共計九種顯示方式。 void: 不顯示外框線。 above: 只顯示上框線。 below: 只顯示下框線。 hsides: 只顯示水平框線。 vsides: 只顯示垂直框線。 lhs: 只顯示左框線。 rhs: 只顯示右框線。 box: 顯示所有框線。 border: 顯示所有框線。
表格內框線顯示方式 - RULES 共計五種顯示方式。 none: 不顯示內框線。 groups:只顯示列組與欄組間的框線。 rows: 只顯示水平框線。 cols: 只顯示垂直框線。 all: 顯示所有內框線。
表格框線色彩 - BORDERCOLOR 通常以下列兩種方式定義。 sRGB值： borderColor = "#FF0000" 顏色名稱： borderColor = "red" <table borderColor= "red"> 格式
表格背景色彩 - BGCOLOR 通常以下列兩種方式定義。 sRGB值： bgColor = "#000080" 顏色名稱： bgColor = "navy" <table bgColor = "navy"> 格式
儲存格間格大小 - CELLSPACING 定義儲存格與儲存格之間的間格。 通常利用像素大小來表示。 <table cellSpacing="1"> 格式
儲存格內留白大小–CELLPADING 定義儲存格邊緣與內含文字的間隔。 通常利用像素大小來表示。 <table cellPading="1"> 格式
表格水平排列方式 – ALIGN 共計三種排列方式。 <table align = "center"> left: 靠左對齊。 right: 靠右對齊。 center: 置中。 <table align = "center"> 格式
畸形表格的產生 ColSpan 與 RowSpan 屬性 ColSpan=3 RowSpan=2 ColSpan=2
畸形表格的HTML標籤 正常 畸形 <TABLE Border=1 Width="100%" > <TR> <TD> </TD> </TR> </TABLE> <TABLE Border=1 Width="100%" > <TR> <TD ColSpan="3"> </TD> </TR> <TD RowSpan="2"> </TD> <TD ColSpan="2"> </TD> <TD> </TD> </TABLE> 正常 畸形