HTML網頁基礎語言

Transcript HTML網頁基礎語言

1
本章提要
 事前預備工作
 什麼是 HTML
 如何製作 HTML 文件
 HTML 網頁與瀏覽器
 HTML 的結構
 最基本的 HTML 標籤
2
事前預備工作
 確認個人網頁空間
 學校電算中心 (http://web.idv.nkmu.edu.tw/~學號/)
 校外免費空間
 系上伺服器 (http://mis2.nkmu.edu.tw/學號)
 下載 FTP 共享軟體 – FileZilla
(http://filezilla-project.org/download.php)
 網頁製作軟體 -- Dreamweaver
3
什麼是 HTML
 網路上形形色色的網頁，都是以 HTML 為基礎建構而成的。
 有的是令人目眩神迷、唱作俱佳的多媒體網頁；
 有的是內容豐富別具特色的部落格；
 有的則是功能齊全、不出門就能 Shopping 的購物網站；
不論是哪一種網頁
 不論是想架設自己的部落格，或是想學習網頁程式設
計，學會 HTML 才能真正了解網頁的運作，進而做到
更精細的設定，使網頁更加完美。
4
HTML 與網頁的關係
 若以 IE 做為瀏覽器，
執行『檢視』功能表中
的『原始檔』命令後，
即會顯示另一視窗呈現
該網頁的原始文件內容，
如右圖。
 此原始文件即被稱為
HTML 網頁文件。
 製作網頁時，即需產出
如右圖所示的 HTML
文件。
 故必須學習 HTML
(HyperText Markup
Language)，中文可稱
之為『超文字標記語言』
5
HTML 文件是由標籤組成的
 HTML 文件中除了可在瀏覽器中所看到的文字外，還多出一些
奇怪的文字，像是 <head>、<frameset> 等等，這些由小於 "<"
及大於 ">" 符號所組成的記號為『標籤』(tag)。
 除了這些穿插在文件中的標籤外，其它都是一般的文字而已。
 可用瀏覽程式的存檔功能將所看到的任一個網頁儲存在硬碟中，再
用一般的文書處理器，例如 Windows 的記事本開啟之。

即發現原來 HTML文件和一般的文字檔一樣，只是文字中有一些奇奇
怪怪的 HTML 標籤罷了(至於圖形或圖片則是另外存成圖檔，再用標籤
加進文件中)。
 只要在文章之中加上適當的標籤，則瀏覽程式在讀取該 HTML
文件時，就會依照各標籤所代表的意義，將其後的文字做出靠
左對齊、靠右對齊、放大、使用粗體字等各種效果，在瀏覽器
的視窗顯示出來。
6
為什麼要學 HTML
 “網頁製作”成為 Internet 流行潮下的一股支流後，為
讓多數的非電腦專業人士們能輕鬆自製網頁，因而出現
了許多方便的網頁製作軟體，也就是所謂的 “所見即所
得” (What You See Is What You Get, WYSIWYG) 的網
頁製作工具，像是 FrontPage 和 Dreamweaver 等等。
 這些工具讓使用者不需對 HTML 或其它的網頁製作技術
有什麼瞭解，即能做出圖文並茂的網頁，那麼我們為什
麼還要學 HTML呢？
 若有什麼效果是製作軟體的功能所無法做出的，如果通曉
HTML，這時就可自己動手編輯，將所需的效果設計出來。
7
HTML的基礎
 HTML 網頁的副檔名必須是 .htm (或 .html)，檔名內不
能包含空白字元。
 視作業系統而定，檔名可能會視大小寫為不同。
 HTML 網頁是純文字格式，因此可以使用任何的文書
編輯器 (例如 Windows 的記事本) 編輯HTML網頁。
8
第一份 HTML 文件 - 說明
 HTML 的慣用語法，也就是標籤和屬性，如下所示：
 「標籤」（Tag）：HTML標籤是一個字串符號，主要
是標示需要套用編排格式的文字內容，在標籤內的文字
是使用預設格式編排。
 「屬性」（Attribute）：每一個標籤可以擁有一些屬
性來定義文字內容的細部編排。
9
標記
 HTML網頁是由:
 一系列的元素(element) 所組成
 而元素則是由標記 (markup) 與內容 (content) 所組成。
 所謂標記，是指使用 < 字元與 > 字元將 HTML的元素名
稱包含起來。如下所示：
<元素名稱> 內容 </元素名稱>
 例如顯示段落的 p 元素：
 HTML是Hypertext Markup Language的縮寫 
10
標記的一般規則

有些元素沒有內容，例如 img 元素。這時候將 img 元
素表示成 <img /> 即可，不必寫成<img></img>。這種
元素稱為空元素 (empty element)。

HTML元素名稱並沒有規定要大寫或小寫，所以
與 都可以被瀏覽器所接受。不過正統的用法是使
用小寫的 。

有些 HTML 元素(例如顯示區塊或項目的元素)可以只
有開始標記與內容而忽略結束標記，瀏覽器也能正確
地解析。但這被視為結構鬆散，因此不建議使用。
11
基本的文件結構
12
屬性
 HTML元素內可以包含屬性 (attribute)，提供元素額外的
資訊。
 如：
<元素名稱屬性名稱=“屬性數值” …> 內容 </元素名稱>
 例如顯示段落的 p 元素：
 HTML 是 Hypertext Markup Language 的縮寫

13
屬性的一般規則
 屬性只能寫在開始標記內，不能寫在結束標記內。
 一個元素內可以同時擁有數個屬性，屬性之間以
空白字元隔開，其順序並不重要。
 屬性數值可以是數字或字串，使用單引號或雙引
號包含起來。雖然不使用引號包含數值也可以被
瀏覽器接受，但這不是正統的寫法。
 不同的元素有不同的屬性，這些都定義在 HTML
規範內。
14
註解文字
HTML文件的註解文字，使用  兩個符號包
含起來。例如：
<body>

 這是第一個HTML網頁 
</body>
15
建立第一個 HTML 網頁
16
上機練習 Ex1-1.htm
 請仿上例
1. 將 “這是第一個HTML網頁” 換成自己的“學號
姓名”，並靠左。
2. 網頁中請放一張個人照圖片，指標移至圖片上時，可
自動出現你的名字。
3. 檔名請命名為 ex1-1.htm (均為小寫)
4. 完成後，請將上述檔案及相片檔案上傳至個人網站
(mis2) 之 homework 資料夾中
5. 若要查看是否上傳成功，請輸入
http://mis2.nkmu.edu.tw/學號/homework/ex1-1.htm
17
HTML 範例 2
 HTML 文件：整份網頁內容
均使用小於 “<” 和大於 “>”
符號夾著 HTML 標籤編排內
容。
 第2~12列：<html> 和
</html> 間是 HTML 文件
的內容與定義。
 第3列：<head> 和 </head>
間為標頭區，定義文件之相
關資訊，如：標題文字
<title> 及<meta> 。
 第5~10列：實際 HTML 文
件內容是在 <body> 和
</body> 標籤，第6~9列的
HTML 標籤是文件的真正內
容。
18
HTML 標籤的注意事項 - 1
 HTML 標籤使用小於 “<” 和大於 “>” 符號夾著指令，稱為
標籤，大部分標籤都是成雙成對 (部分標籤是例外)，例如：
HTML 文件是以 <html> 開頭，和 </html> 結尾，在上面
的HTML 架構可以看出標籤成雙成對的特性。
 HTML 標籤並不分英文大小寫，例如：<head>、<HEAD>
和 <Head> 都代表相同的標籤。
 HTML 文件內容是一般文字檔案，不過 Enter 鍵的換行在
網頁顯示時並沒有作用，瀏覽程式會自行調整版面，如果
文件內容需要強迫換行，請使用 標籤。
19
HTML 標籤 、 
 標籤代表文字段落
 不同段落的文字除會換行之外
 還會以一列空白加以分隔，可以很清楚的區分段落。
 標籤代表文字的換行符號
 與 標籤的區別為兩列文字中間沒有空白列分隔。
20
HTML 標籤的注意事項 - 2
 HTML文件的連續空白在瀏覽程式會自動簡化成
一個空白；可用下列方式解決此問題：
1.
&nbsp：如 &nbsp &nbsp 表二個空白字元；
2.
以全型空白鍵輸入即可。
 HTML的註解文字是使用 “”
為結尾所包括的文字內容，瀏覽程式在顯示時會
忽略註解文字，如下所示：

21
上機練習 Ex1-2.htm

請利用前面介紹之標籤如：、、 及空白
等製作下列詩詞。
22
meta 標籤使用-說明與設定編輯工具
<meta> 標籤是位在 <head> 區塊，用以定義HTML
文件的相關資訊，常用的應用如下所示：
1. 設定使用的編輯工具
 在 <meta> 標籤設定 HTML 文件使用的編輯工具，其名
稱 name 屬性為 GENERATOR，content 屬性為
Microsoft NotePad，如下所示：
<meta name="GENERATOR" content="Microsoft
NotePad">
23
meta標籤使用－宣告編碼方式
2.
宣告編碼方式
 因各國文字的內碼不同，為使瀏覽器能正確顯示網頁內容，
在 <meta> 標籤可設定使用的字元集，以 http-equiv 屬性傳
送 HTTP 通訊協定的標頭，如繁體中文即用 big5，如下：
<meta http-equiv="Content-Type" content="text/html;
charset=big5">
 Big5 vs. Unicode
未宣告繁體中文網頁編碼方式時，瀏覽器即以 Big5 解碼顯示。
 為因應各國不同的文字編碼，發展出另一套編碼系統，即
Unicode，如：UTF-8 (為動態式的編碼長度)。
 在 web 2.0 中，多採用 Unicode 的方式，如下：
<meta http-equiv=“Content-Type” content=“text/html;
charset=UTF-8 ">

24
meta 宣告編碼方式範例 (Big5 & UTF-8)
在 IE 中將編碼設為
Big5，即正常顯示
這是一份
HTML文件
25
meta標籤使用-自動更新網頁內容
3. 自動更新網頁內容

http-equiv 屬性另一個重要的功能是設定一段時間後，
自動轉址到指定的 URL 網址，如下所示：
<meta http-equiv=“refresh” content=“5; URL=Ex1-1.php">
 在 content 屬性指定等待的秒數和網址，使用分
號分隔，數字5表示5秒，如果需要馬上的轉向其
值是0，URL是指定的網址。
 <mata> 標籤的目的是在等待5秒鐘後，自動轉址
到 Ex1-1.php 的 PHP 程式。
26
meta 自動更新網頁內容範例
27
上機練習 Ex1-3.htm

請設計一網頁，５秒後自行轉址至 Ex1-2.htm (即春
曉一詩）。
28
HTML 標籤整理
 HTML的標頭標籤
 文字格式標籤
 清單項目標籤
 圖片和超連結標籤
 網頁表格標籤
 框架頁標籤
29
HTML的標頭標籤
 在 HTML 的 <head> 區塊屬於標頭標籤，可以使用下
表的標籤記錄一些網頁資訊，如下表所示：
標籤
<title>…</title>
<base>
<meta>
<link>
說明
網頁標題，顯示在瀏覽程式的標題列
指定基底的 URL 網址
設定伺服端或客戶端所需的識別資訊
連結其他網頁，例如：CSS 外部樣式表檔案
30
文字格式標籤-說明1
 HTML 網頁內容主要是文字內容，編排文字內容的各
種格式效果標籤，如下表所示：
標籤
<hn>…</hn>
…
…
…
<s>…</s>
<strike>…</strike>
…
…
說明
顯示粗體的標題文字，n 的值是 1~6，表示不同
的尺寸，愈小愈大
粗體字
斜體字
底線字
刪除線，在文字中間有一條線
刪除線，另一種刪除線
下標字
上標字
31
文字格式標籤-說明2
標籤
<tt>…</tt>
<big>…</big>
<address>…</address>
…
<center>…</center>
<blink>…</blink>
…
<basefont>
 
<hr>
…
說明
打字機字體
放大字體的字型
使用地址的字體
縮小字體的字型
文字內容是置中對齊
閃爍字
使用 face、size 和 color 屬性設定編排使用的字
體、尺寸和色彩
指定網頁的基本字型
強迫文字換行
插入一條水平線
使用文字段落編排
32
 標籤
 語法：
＜font color="#xxxxxx" size="n" face="字型名稱"＞
 字體紅色：color= “#FF0000”  也可寫成 color =
“red”
 Size：1 最小；7 最大
33
<align> 標籤
 段落標籤（）及標題標籤（<h1> 到 <h6>）具有「
align」屬性，可以設定文字對齊的方式。
34
文字格式標籤-範例
 在 HTML 文字格式標籤是用以設定不同文件內容的格
式編排，位在標籤中的文字內容是需要編排效果的文
字內容，如下所示：
 真想快點快點快點下課！ 
 上課時間過得真慢耶！ 
 偷偷想想中午吃啥好呢？ …… ^_^ 
 上述文字內容分別使用粗體、斜體和底線文字效果。
35
文字格式標籤- font 範例
36
上機練習 Ex1-4.htm (文字格式標籤)
 請依右下圖編製一網頁，格式如下說
明：
1. 春曉：詩名字體大小設為 H1 、置中，下方加一
水平線
2. 春眠不覺曉：字體為標楷體、顏色紅色、粗體、
大小為3
3. 處處聞啼鳥：字體為細明體、顏色藍色、斜體、
大小為4
4. 夜來風雨聲：字體為標楷體、顏色紫色、加底線、
大小為5
5. 花落知多少：字體為細明體、顏色綠色、加刪除
線、大小為6
37
<body> 標籤
 HTML 文件的主要部份，也是網頁的主要內容，
絕大多數控制網頁顯示的元件都在此標籤內。
 <body> 標籤的屬性設定，會影響整個頁面的顯
示方式，其屬性及功能：
38
bgcolor 屬性
 目前網頁預設背景顏色都是白色，如果將背景換
成適當的顏色，會使網頁美觀許多。
 如：<body bgcolor=“#FFFF99”>
39
background 屬性
 background 屬性可以用圖形做為背景
• 如：<body background =“../image/bg1.jpg”>
註： background 與 bgcolor 均用以設定背景，一般擇其一設
定，若二者均設定，則會顯示background 指定之背景圖
40
text 屬性
 <body> 的 text 屬性可以一次變更網頁中全部預
設的文字顏色
<body text=“#CC3399”>
 少部份需特殊色彩的文字再由 的 color 屬
性更改文字色彩，這樣就能快速的完成所有文字
顏色的設定。

41
上機練習 Ex1-5 & Ex1-6
請將上述介紹之 body 相關標籤應用於下列作
業，並依說明修改：
Ex1-5:
1.設定背景顏色
2.以 text 將設定文字顏色，再以 font 變更其他文字的顏
色
3.設定水平線寬度及顏色 (於 <hr> 內加上 size 及 color
即可)
Ex1-6:
1.將 Ex1-5 的背景顏色改以背景圖呈現
(於 <hr> 內加上 size 及 color 即可)
42
清單項目標籤-說明
 HTML 標籤提供多種清單編排，這是使用條列方式編
排的文字內容，如下表所示：
標籤
<ul>…</ul>
<ol>…</ol>
<dl>…</dl>
<menu>…</menu>
<dir>…</dir>
<lh>
<li>
<dt>
<dd>
說明
項目符號
項目編號
定義式清單
選單式清單
目錄式清單
清單標題
清單項目
定義式的項目名稱
定義式的項目說明
43
清單項目標籤-範例
 在清單項目標籤中最常使用的是 <ol> 和 <ul> 標籤，
其中各項目是使用 <li> 標籤，如下所示：
44
< blockquote > 標籤
 <blockquote> 標籤的作用是「文字縮排」，也就是整段文
字會向右內縮數個字元。
45
上機練習－Ex1-7 & Ex1-8 (清單項目標籤)
 Ex1-7：請在 body 區段加入下列程式儲存後執行其結果。
102.10.04 作業
<ol>
<li> Ex1-5
<li> Ex1-6
<li> Ex1-7
<li> Ex1-8
……...
</ol>
102.09.27 作業
<ol>
<li> Ex1-1
<li> Ex1-2
………
</ol>
 Ex1-8：請複製上述程式後，將其中 OL 改成 UL 儲存後執行其
結果，比較二者之差異。
46
圖片和超連結標籤-說明
 在網頁插入圖片和使用超連結建立多媒體網頁內容的
相關標籤，如下表所示：
標籤
<a>…</a>
<img>
<bgsound>
<embed>
<marquee>…</marquee>
說明
在網頁插入超連結
在網頁插入圖片
在網頁插入背景音樂
在網頁插入 MIDI 音樂檔
跑馬燈文字
47
圖片和超連結標籤-超連結語法
 在HTML文件插入超連結是使用<a>標籤，基本語法為：
<a href="protocol://domain/file#bookmark"
target="frame_name"> … </a>
 如置於根目錄：
<a href=“list.htm” target=“mainFrame”> Ex1-9 </a>
 如置於 homework：
<a href=“homework/Ex1-2.htm target=“mainFrame”> Ex1-2 </a>
屬性
說明
 上述標籤的屬性說明，如下表所示：
href
target
設定超連結的目的地
指定超連結目的地顯示的框架名稱
48
圖片和超連結標籤-圖片語法
 在網頁插入圖片是使用<img>標籤，其基本語法如下
所示：
<img src="filename" width=value height=value align=left |
right>
 上述標籤的屬性說明，如下表所示：
屬性
src
說明
圖片檔案名稱和路徑，可以使用 gif、jpg 或 png 格式的圖片檔案
width
圖片寬度，可以是點數或百分比。
height
圖片高度，可以是點數或百分比。
align
圖片和文字在同一列顯示的編排位置，left 是在文字的左方，right
是在文字的右方
49
跑馬燈、圖片 & 超連結標籤範例
50
上機練習 Ex1-9 ＆ Ex1-10
 Ex1-9：請於 Ex1-5.htm 檔案中加入學校校徽圖形檔，
並加入超連結（連結至學校首頁）後，另存成 Ex19.htm。
 Ex1-10：請在 Ex1-7.htm 之各項作業加上超連結，並另
存成 list.htm，並將此檔置於根目錄下（非
homework）
貼心提醒：加上超連結時，請注意各檔案放置位置
 置於根目錄： <a href=“list.htm” target=“mainFrame” >Ex1-9</a>
 置於 homework：<a href=“homework/Ex1-2.htm” target=“mainFrame” >
51
網頁表格標籤-說明
 網頁表格標籤是由一組標籤所組成，以便在網頁建立
表格的編排，如下表所示：
標籤
<table>…</table>
<tr>…</tr>
<td>…</td>
<caption>…</caption>
說明
網頁表格
表格中的一列
表格中的一個儲存格
表格標題
52
網頁表格標籤-語法
 網頁表格的每一列是使用 <tr> 和 <td> 標籤組合出來，一
組 <tr> </tr> 標籤是表格的一列，每一列中使用一組 <td>
</td> 標籤建立一個儲存格，語法如下所示：
<table border=value>
<tr>
<td>........</td>
…….
</tr>
<tr>
<td>.........</td>
……..
</tr>
……
</table>
53
上機練習－Ex1-11.htm (網頁表格標籤)
1. 請在 body 區段加入下列程式儲存後執行其結果。
2. 請將其中 border=“1” 之１改成０及２儲存後執行其結果，並比較其差異
54
框架頁標籤-說明
 框架頁是一種瀏覽程式視窗的分割方法，其標籤如下
表所示：
標籤
說明
<frameset>…</frameset>
設定網頁是一頁框架頁
<frame>
框架頁的框架分割，可分為上下或左右分割
<iframe>
網頁的內置框架，可以直接在網頁插入所需的
框架
<noframes>…</noframes>
不支援框架的瀏覽程式顯示的網頁內容
55
框架頁標籤-語法
 在瀏覽程式建立視窗左右分割的框架，如果
HTML文件為框架頁，原來的 <body> 區塊將以
<frameset> 標籤取代，其基本語法如下所示：
<frameset cols="value,value,">
<frame>
<frame>
</frameset>
屬性
說明
定義左右分割框架的大小，使用","符號分隔的每一個值為各區
域的大小，可以使用百分比或點數，屬性的每一個值對應一個
<frame>標籤
<frame>
定義框架內容，主要是是顯示的 HTML 文件
cols
56
上機練習－ index.htm (框架頁標籤)
 請撰寫下列程式並儲存為 index.htm 後執行其結果。
57

HTML網頁基礎語言

Transcript HTML網頁基礎語言

Directory