網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General

1

網頁語言 HTML (HyperText Markup Language)

1.1.1 基本 html 檔結構 :

<html>

<head>

<title> ………………

</title>

</head>

<body>………………

</body>

</html>

2

1.1.2 組織結構

尖括號 : 大小楷均可

<html>...</html>:

訂出網頁開始及結尾位置

<head>...</head>:

訂出網頁資料

<body>…</body>:

訂出網頁瀏覽內容

<title>…</title>:

訂出網頁標題列內容

3

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

} 而當中文字會有隔行

4

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

5

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

6

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>

HelloHi

<hr color=“yellow” size=no width=x%>

e.g. Hr=“yellow” size=10 width=50%

7

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

8

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)

9

<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:[email protected]”><a href=“news://news.netvigator.com/ims.tech.comp”>

<a name= “SectionName”> 設定區段所在地及名稱<a href= “#SectionName”> 連結至某一區段

10

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>

11

e.g. <ul type=circle>

<lh>secondary 1</lh>

<li>1A

<li>1B

</ul>

螢幕輸出 : secondary 1

1A

1B

12

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

13

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

14

1.1.15 <Body> 句子結構

<body background=“gif/jpg filename” bgcolor=“xxx”

text=“xxx” alink=“xxx” vlink=“xxx”

其中 xxx = 顏色的英文名稱或 RGB 值

其中 alink 的句子決定當按滑鼠時文字的顏色

其中 vlink 的句子決定曾按滑鼠文字的顏色

15

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>

16

shape=“xxx” 其中 xxx 可以是 rect, circle, polygoncoords=“???” ( 如是方形 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 是超連結後所佔用的地方

17

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 ExampleColumn 1 Head Column 2 Head

Data 1 Data 2

Data 3 Data 4

18

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>

outputColumn Head

Data 3Data 1

Data 4

19

1.1.18 表單

<form action=xxx method=yyy>

<input type=zzz……>………...

</form>

e.g. <form method=“post” enctype=“text/plain”

action=MAILTO:[email protected]>

姓名 :<input type=text name=“name” size=20><p>

<input type=submit value=“ 傳送” >

</form>

20



Email:<input type=text name=“name” size=30 value=“[email protected]><p>

密碼 :<input type=password name=“psd” size=30><p>


</form>

21



你的興趣是 :<p>

<input type=checkbox name=“box1”> 看書 <p>

<input type=checkbox name=“box2”> 看電影 <p>

<input type=checkbox name=“box3”> 運動 <p>

<input type=submit value=“ 傳送” > </form>

22



你的興趣是 :<p>

<input type=radio name=“choice1”> 看書 <p>

<input type=radio name=“choice2”> 看電影 <p>

<input type=radio name=“choice3”> 運動 <p>

<input type=submit value=“ 傳送” > </form>

23



你的興趣是 : <p>

<textarea name=“comments” rows=4 cols=50>

</textarea> <p>


</form>

24



你的興趣是 : <p>

<select name=“district” size=1 multiple>

<option> 看書 </option>

<option> 看電影 </option>

<option> 運動 </option>

</select> <p>


</form>

25

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 是第二行或列所顯示的網頁的名稱

26

e.g. 框架 – 上下分割 <frameset rows=“15%, *”>

<frame name=“top” src=“toppage.htm”……>

<frame name=“bottom” src=“botpage.htm”……>

<noframes> 你的瀏覽器不支援框架 </noframes>

</frameset>

27

e.g. 框架 – 左右分割 <frameset cols=“15%, *”>

<frame name=“left” src=“toppage.htm”……>

<frame name=“right” src=“botpage.htm”……>


</frameset>

28

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>


</frameset>

29

螢幕顯示 :

30

如要刪除框架框線及框架間空間 , 需加以下參數資料 :

<frameset rows=“15%, *” frameborder=“No” framespacing=0>

………

Documents

網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General