網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By...
-
Upload
aphrodite-griffin -
Category
Documents
-
view
28 -
download
0
description
Transcript of 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By...
![Page 1: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/1.jpg)
1
網頁語言 HTML (HyperText Markup Language)
1.1.1 基本 html 檔結構 :
<html>
<head>
<title> ………………
</title>
</head>
<body>………………
</body>
</html>
![Page 2: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/2.jpg)
2
1.1.2 組織結構
尖括號 : 大小楷均可
<html>...</html>:
訂出網頁開始及結尾位置
<head>...</head>:
訂出網頁資料
<body>…</body>:
訂出網頁瀏覽內容
<title>…</title>:
訂出網頁標題列內容
![Page 3: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/3.jpg)
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
} 而當中文字會有隔行
![Page 4: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/4.jpg)
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
![Page 5: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/5.jpg)
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
![Page 6: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/6.jpg)
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%
![Page 7: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/7.jpg)
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
![Page 8: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/8.jpg)
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)
![Page 9: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/9.jpg)
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”> 連結至某一區段
![Page 10: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/10.jpg)
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>
![Page 11: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/11.jpg)
11
e.g. <ul type=circle>
<lh>secondary 1</lh>
<li>1A
<li>1B
</ul>
螢幕輸出 : secondary 1
1A
1B
![Page 12: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/12.jpg)
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
![Page 13: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/13.jpg)
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
![Page 14: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/14.jpg)
14
1.1.15 <Body> 句子結構
<body background=“gif/jpg filename” bgcolor=“xxx”
text=“xxx” alink=“xxx” vlink=“xxx”
其中 xxx = 顏色的英文名稱 或 RGB 值
其中 alink 的句子決定當按滑鼠時文字的顏色
其中 vlink 的句子決定曾按滑鼠文字的顏色
![Page 15: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/15.jpg)
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>
![Page 16: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/16.jpg)
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 是超連結後所佔用的地方
![Page 17: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/17.jpg)
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
![Page 18: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/18.jpg)
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
![Page 19: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/19.jpg)
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>
![Page 20: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/20.jpg)
20
e.g. <form method=“post” enctype=“text/plain”
action=MAILTO:[email protected]>
Email:<input type=text name=“name” size=30 value=“[email protected]><p>
密碼 :<input type=password name=“psd” size=30><p>
<input type=submit value=“ 傳送” >
</form>
![Page 21: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/21.jpg)
21
e.g. <form method=“post” enctype=“text/plain”
action=MAILTO:[email protected]>
你的興趣是 :<p>
<input type=checkbox name=“box1”> 看書 <p>
<input type=checkbox name=“box2”> 看電影 <p>
<input type=checkbox name=“box3”> 運動 <p>
<input type=submit value=“ 傳送” > </form>
![Page 22: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/22.jpg)
22
e.g. <form method=“post” enctype=“text/plain”
action=MAILTO:[email protected]>
你的興趣是 :<p>
<input type=radio name=“choice1”> 看書 <p>
<input type=radio name=“choice2”> 看電影 <p>
<input type=radio name=“choice3”> 運動 <p>
<input type=submit value=“ 傳送” > </form>
![Page 23: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/23.jpg)
23
e.g. <form method=“post” enctype=“text/plain”
action=MAILTO:[email protected]>
你的興趣是 : <p>
<textarea name=“comments” rows=4 cols=50>
</textarea> <p>
<input type=submit value=“ 傳送” >
</form>
![Page 24: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/24.jpg)
24
e.g. <form method=“post” enctype=“text/plain”
action=MAILTO:[email protected]>
你的興趣是 : <p>
<select name=“district” size=1 multiple>
<option> 看書 </option>
<option> 看電影 </option>
<option> 運動 </option>
</select> <p>
<input type=submit value=“ 傳送” >
</form>
![Page 25: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/25.jpg)
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 是第二行或列所顯示的網頁的名稱
![Page 26: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/26.jpg)
26
e.g. 框架 – 上下分割 <frameset rows=“15%, *”>
<frame name=“top” src=“toppage.htm”……>
<frame name=“bottom” src=“botpage.htm”……>
<noframes> 你的瀏覽器不支援框架 </noframes>
</frameset>
![Page 27: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/27.jpg)
27
e.g. 框架 – 左右分割 <frameset cols=“15%, *”>
<frame name=“left” src=“toppage.htm”……>
<frame name=“right” src=“botpage.htm”……>
<noframes> 你的瀏覽器不支援框架 </noframes>
</frameset>
![Page 28: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/28.jpg)
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>
<noframes> 你的瀏覽器不支援框架 </noframes>
</frameset>
![Page 29: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/29.jpg)
29
螢幕顯示 :
![Page 30: 網頁語言 HTML (HyperText Markup Language) 1.1.1 基本 html 檔結構: ……………… By aphrodite-griffin 112 SlideShows Follow User 16 Views Presentation posted in: General](https://reader035.fdocument.pub/reader035/viewer/2022062221/56812a8e550346895d8e3bca/html5/thumbnails/30.jpg)
30
如要刪除框架框線及框架間空間 , 需加以下參數資料 :
<frameset rows=“15%, *” frameborder=“No” framespacing=0>
………