網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: <html> <head> <title> ………………

網頁語言HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: <html> <head> <title> ……………… </title> </head> <body> ……………… </body> </html>

1.1.2 組織結構 尖括號: 大小楷均可 <html>...</html>: 訂出網頁開始及結尾位置 <head>...</head>: 訂出網頁資料 <body>…</body>: 訂出網頁瀏覽內容 <title>…</title>: 訂出網頁標題列內容

1.1.3 字型大小 <h1>…</h1>最大字形 ……………... <h6>…</h6>最小字型 e.g. Happy <h1> NewYear </h1> Happy NewYear <font size = 數字>……</font>而數字可以是 +7, +6……-7 不會換行 e.g. Happy <font size=7> New </font> Year Happy New Year } 而當中文字會有隔行

1.1.4 字型顏色 <font color=“xxx”>……</font>而 xxx 是英文顏色名稱或 RGB值顏色名稱 : red, green, blue, cyan, yellow, purple, silver, gray, lime… RGB值: e.g. #ff0000, #00ff00, #0000ff, #00ffff, #ffff00……… 1.1.5 字型樣式 <b>…</b>粗體字 e.g. <b> Hello </b> Hi Hello Hi <i>… </i> 斜體字 e.g. <i> Hello </i> Hi Hello Hi

1.1.6 段落及跳行 <p>…</p>訂出段落開始及結尾位置 e.g. It is a <p> Paragraph </p> tags It is a Paragraph tags <br>跳行 e.g. Hello <br> Hi Hello Hi

1.1.7 文字對位及橫線 <p align=“xxx”>而其中 xxx 可以是: left(左), right(右), center(置中), justify(左右對齊) e.g. <p align=“center”> Hello Hi Hello Hi <center>…</center>} 之前及之後會附帶跳行 e.g. Hello <center> Hi </center> Hello Hi <hr color=“yellow” size=no width=x%> e.g. Hr=“yellow” size=10 width=50%

1.1.8 定位點及對位 <tab id=xxx indent=數字> 而其中 xxx 是定位點名稱數字則用 en 單位 e.g. <tab id=mytab indent=6> Classes in S.1: <br><tab to =mytab> 1A <br><tab to =mytab> 1B Output Classes in S.1: 1A 1B

1.1.9 插入圖片 <img src=“xxx” alt=“yyy” align=“zzz” border=no> 其中 xxx 是圖片的檔名 (一般副檔名為 gif/jpg) 若果找不到圖片, 其中 yyy 則是文字顯示其中 zzz 是文字的對齊方式: top|middle|bottom e.g. <img src=“star.gif”> 1.1.10 插入超連結 <a href=“url”>...</a> 其中 url 是超連結的劃一資源定位內容, 或是一區段名稱(後頁有介紹區段Section)

<a href=“http://url”>連結至互聯網上某一網頁 <a href=“xxx”>連結至同一電腦同一層次的某些檔案 <a href=“../yyy/xxx”>連結至同一電腦上一層次的某些檔案 <a href=“mailto:EmailAddress>連結至某一電郵地址 <a href=“new: NewsGroupName>連結至某一新聞組 e.g. <a href=“http://home.netvigator.com/~chiuchow> <a href=“link2.html”> <a href=“../subject1/link1.html”> <a href=“mailto:chiuchow@netvigator.com”> <a href=“news://news.netvigator.com/ims.tech.comp”> <a name= “SectionName”> 設定區段所在地及名稱 <a href= “#SectionName”> 連結至某一區段

1.1.11 插入圖片 jpg/gif 作超連結 <a href=“url”><img src=“xxx”…border=數字…> …/a> 其中, 數字為框線的粗度, 欠此參數則令圖片出現幼框線一條 1.1.12 非數字序列 <ul type=xxx> 其中 xxx 可以是 disc, circle 或 square <lh>list header</lh> <li>item 1 <li>item 2 …… </ul>

e.g. <ul type=circle> <lh>secondary 1</lh> <li>1A <li>1B </ul> 螢幕輸出: secondary 1 1A 1B

1.1.13 數字序列 e.g. <ol > <lh>list header</lh> <li>item 1 <li>item 2 </ol> 螢幕輸出: list header 1. item 1 2. item 2

1.1.14 定義序列 e.g. <dl > <dt>list term 1 <dd>definition 1 <dt>list term 2 <dd>definition 2 </dl> 螢幕輸出: list term 1 definition 1 list term 2 definition 2

1.1.15 <Body> 句子結構 <body background=“gif/jpg filename” bgcolor=“xxx” text=“xxx” alink=“xxx” vlink=“xxx” 其中 xxx = 顏色的英文名稱或 RGB值其中alink的句子決定當按滑鼠時文字的顏色其中vlink的句子決定曾按滑鼠文字的顏色

1.1.16 圖像地圖 <img src= “xxx” ……usemap=“#MapName”> 先用此句子訂出所需連結的圖像 <map name= “MapName”>…...</map> 再用此句子訂出圖像內某一範圍為超連結地圖 <map name= “MapName”>…… <area shape=“xxx” coords=“???” href=“yyy” target=“zzz”> <area shape…… …… …… > </map>

shape=“xxx” 其中 xxx 可以是 rect, circle, polygon coords=“???” (如是方形rect), 其中 ??? 可以是 x1, y1, x2, y2 (x1, y1 是左上角座標; x2, y2 是右下角座標) (如是圓形circle), 其中 ??? 可以是 x, y, r (x, y 是圓心座標; r 是半徑) (如是多邊形polygon)其中 ??? 可以是 x1, y1… href=“yyy” 其中 yyy 是超連結的地方 target=“zzz” 其中 zzz 是超連結後所佔用的地方

1.1.17 表格 e.g. <table border> <caption> Table Example </caption> <tr><th>Column 1 Head <th>Column 2 Head <tr><td>Data 1<td>Data 2 <tr><td>Data 3<td>Data 4 </table> 螢幕輸出: Table Example

e.g. <table border=1 cellspacing=0 cellpadding=0> <tr><th colspan=2> Column Head <tr><td rowspan=2 vlign=middle>Data 1 <td align=center>Data 3 <tr><td>Data 4 </table> output

1.1.18 表單 <form action=xxx method=yyy> <input type=zzz……>………... </form> e.g. <form method=“post” enctype=“text/plain” action=MAILTO:abc@abc.com> 姓名:<input type=text name=“name” size=20><p> <input type=submit value=“傳送”> </form>

e.g. <form method=“post” enctype=“text/plain” action=MAILTO:abc@abc.com> Email:<input type=text name=“name” size=30 value=“chiuchow@netvigator.com><p> 密碼:<input type=password name=“psd” size=30><p> <input type=submit value=“傳送”> </form>

e.g. <form method=“post” enctype=“text/plain” action=MAILTO:abc@abc.com> 你的興趣是:<p> <input type=checkbox name=“box1”>看書<p> <input type=checkbox name=“box2”>看電影<p> <input type=checkbox name=“box3”>運動<p> <input type=submit value=“傳送”> </form>

e.g. <form method=“post” enctype=“text/plain” action=MAILTO:abc@abc.com> 你的興趣是:<p> <input type=radio name=“choice1”>看書<p> <input type=radio name=“choice2”>看電影<p> <input type=radio name=“choice3”>運動<p> <input type=submit value=“傳送”> </form>

e.g. <form method=“post” enctype=“text/plain” action=MAILTO:abc@abc.com> 你的興趣是: <p> <textarea name=“comments” rows=4 cols=50> </textarea> <p> <input type=submit value=“傳送”> </form>

e.g. <form method=“post” enctype=“text/plain” action=MAILTO:abc@abc.com> 你的興趣是: <p> <select name=“district” size=1 multiple> <option>看書</option> <option>看電影</option> <option>運動</option> </select> <p> <input type=submit value=“傳送”> </form>

1.1.19 框架 <frameset rows|cols=“xxx%, *”> <frame name=“yyy” src=“aaa.htm”……> <frame name=“zzz” src=“bbb.htm”……> <noframes>你的瀏覽器不支援框架</noframes> </frameset> 其中xxx是行寬或列高的百分比其中yyy是第一行或列的名稱其中zzz是第二行或列的名稱其中aaa是第一行或列所顯示的網頁的名稱其中bbb是第二行或列所顯示的網頁的名稱

e.g. 框架 – 上下分割 <frameset rows=“15%, *”> <frame name=“top” src=“toppage.htm”……> <frame name=“bottom” src=“botpage.htm”……> <noframes>你的瀏覽器不支援框架</noframes> </frameset>

e.g. 框架 – 左右分割 <frameset cols=“15%, *”> <frame name=“left” src=“toppage.htm”……> <frame name=“right” src=“botpage.htm”……> <noframes>你的瀏覽器不支援框架</noframes> </frameset>

e.g.框架 – 混合分割 <frameset rows=“15%, *”> <frame name=“top” src=“toppage.htm”……> <frameset cols=“15%, *”> <frame name=“left” src=“botpage.htm”……> <frame name=“right” src=“blanpage.htm”……> </frameset> <noframes>你的瀏覽器不支援框架</noframes> </frameset>

螢幕顯示:

如要刪除框架框線及框架間空間, 需加以下參數資料: <frameset rows=“15%, *” frameborder=“No” framespacing=0> ………

網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: <html> <head> <title> ………………