2
本節內容提要
1. HTML 初步2. 圖文並茂3. 千變萬化的文字效果4. 跑馬燈5. 嵌入視窗
3
靜態文件
4
動態文件
5
主動式文件
6
HTML 文件結構 在 HTML 文件中由小於 "<" 及大於 ">" 符號所組成的記號稱為標籤 (tag) 。
原來 HTML 文件不過就是和一般文字檔一樣 , 只是文字中夾雜一些特定的 HTML 標籤。當瀏覽程式在讀取我們的 HTML 文件時 , 就會依照各標籤所代表的意義 , 將其後的文字做出不同的特殊效果。
例如: <TITLE> 樹德科技大學 </TITLE>
7
HTML 文件基本架構
<HTML>
<HEAD> 文件資訊<TITLE> 標題 </TITLE>
</HEAD>
<BODY> 文件內容</BODY>
</HTML>
8
HTML 標籤概述 標籤名稱都是英文且無大小寫之分。標籤分類: 前後包夾型-這種標籤必須成對出現,例如:
<BODY>…</BODY> ,在兩個標籤間的文字就會被加上此標籤所定義的效果。
單槍匹馬型-這種標籤只需出現一次,例如:<BR> 、 <HR> 等。
9
HTML 基本標籤
1. <HTML></HTML> 文件的開始與結束
2. <HEAD></HEAD> 標示文件資訊
3. <BODY></BODY> 標示本文
4. <TITLE></TITLE> 文件標題
10
範例練習
11
範例結果顯示 存檔後 , 用 IE 開啟該檔案:
12
簡單的格式變化 在瀏覽器中,不管文句、段落的換行與空格一律依 HTML 標籤來安排文件的段落格式:
13
控制文章段落 -- <BR> 換行
14
不使用 <BR> 的換行
15
控制文章段落 -- <P> 分段
16
控制文章段落 -- <PRE> 保持原先的排列
17
控制文章段落 -- <HR> 分隔線
18
設定標題文字 -- <H1>..<H6>
設定標題的標籤共有 6 個 , 分別是 <H1> 、 <H2> 、…至 <H6> ,數字愈大 , 所顯示的文字愈小:
19
HTML 標籤屬性概述 前面在介紹標籤時 , 只是在 “ <>” 中加入元素的名稱 , 其實很多元素還有屬性 (attribute)可供設定。加入屬性時的標籤格式如下:
屬性不一定只一個 , 有多個屬性時的寫法如下:
20
對齊文字— <P ALIGN> 設定對齊方向
21
對齊文字— <CENTER> 向中對齊
22
分格線 <HR> 標籤的變化
23
範例練習
24
範例結果顯示
25
連到其他網頁— <A> 建立超連結 在 HTML 文件中要建立超文字連結的標籤為 <A> 標籤 (Anchor), 其使用方式如下:
26
連到其他網頁— <A> 建立超連結 (1/2)
例如要建立一個連向”樹德科技大學”首頁的連結 , 其做法如下:
<HTML><TITLE> 歡迎光臨 </TITLE><BODY><A HREF=http://www.stu.edu.tw> 樹德科技大學 </A></BODY></HTML>
27
連到其他網頁— <A> 建立超連結 (2/2)
在 <A> 和 </A> 標籤之間的”樹德科技大學”就會被瀏覽器以藍色的文字加上底線顯示 , 同時只需在這幾個字上按一下 , 便可直接上該網站:
28
連到其他網頁— <A> 建立本機檔案連結
如果要連結到本機中 , 位於同一個資料夾的其他檔案 , 則只須指定檔案名稱即可 ( 不需要加上 http) :
如果檔案是在子資料夾內 , 再加上子資料夾名稱即可:
29
連到其他網頁— <A> 建立 E-mail 連結
常常可看到一種按了之後可寫信給該網站作者的連結 , 此種 URL 是用 mailto : 來指定 , 例如:
<A HREF=mailto:[email protected]>陳明瑤老師的信箱 </A>
30
大小寫的問題 在使用 <A> 標籤建立與其它檔案的連結時 , 要特別注意檔案名稱的大小寫問題。因為目前多數的 WWW 主機都是使用 UNIX 系統 , 在 UNIX 系統中檔案名稱的大小寫是有區別的 , 所以在建立連結時 , 需特別注意 <A HREF="…"> 中所指的檔案名稱與主機上的檔案名稱大小寫要符合。
31
段落控制小結 HTML 文件製作 基本標籤: <HTML>, <HEAD>, <BODY>, 和 <TITLE>
文章段落標籤: <BR>, <P>, <PRE>, <CENTER>, 和 <HR>
超連結標籤: <A>
32
圖文並茂— <IMG> 的基本用法
33
<IMG SRC=" 圖片檔的 URL“ …>
34
加邊框的超連結圖片 (1/2)
35
加邊框的超連結圖片 (2/2)
36
不加框的超連結圖片
37
調整圖片的大小— <IMG WIDTH=“寬度” HEIGHT=“高度” … >
38
設定圖片邊界寬– <IMG VSPACE=“ 上下間隔” …
>
VSPACE 屬性—設定圖片與文字間的上下間隔:
39
圖片加註解— <IMG ALT=“註解文字” … >
ALT 屬性的妙用是:如果圖片加上 <A> 標籤成為一個超連結 , 此時用 ALT 為它設個替代顯示的說明文字 , 說明這個圖片所指的是什麼樣的連結 , 就能讓沒有載入圖片的人知道按圖片可連到何處。
40
調整圖片位置小結 ALIGN=LEFT—靠左 ALIGN=RIGHT—靠右 ALIGN=BASELINE 或 ALIGN=BOTTOM— 對齊
文字底線排列 ALIGN=ABSBOTTOM— 對齊整行 (區塊 ) 最底端
排列 ALIGN=TOP— 對齊整行最頂端排列 ALIGN=TEXTTOP— 對齊文字部份最頂端排列 ALIGN=MIDDLE— 圖片中間線對齊文字中間線 ALIGN=ABSMIDDLE— 圖片中間線對準整列中間線
41
改變文件中的字體大小– <SMALL> 和 <BIG>
<SMALL> — 顯示小字體
<BIG> — 顯示大字體
42
設定文件中的字體大小– <FONT SIZE=“ 字體大小” … >
43
相對字型變更法 使用加減數值的方式來指定:
44
<font> - color 屬性(文字顏色設定)
color 屬性可以用來設定文字的顏色,它同樣可以使用 16進制顏色表示法及關鍵字顏色表示法來設定屬性值。 標籤屬性: <font> - color 屬性。 功能:設定文字的顏色。 格式:
<font color="關鍵字顏色表示法 ">…………………………</font>
<font color="#16進制顏色表示法 ">………………………… </font>
範例 <html> <head> <title><font> 字型顏色設定 </title> </head> <body> <center> <h1>相思 </h1> <font size="5" color="#0000FF">紅豆生南國, </font><br/> <font size="4" color="green">春來發幾枝, </font><br/> <font size="3" color="#FF0000">願君多采擷, </font><br/> <font color="#FF00CC" size="2"> 此物最相思。 </font> </center> </body> </html>
45
46
<H1>..<H6> 與 <FONT …> 的不同
Headings FONT
字體的尺寸H1, H2, H3, H4, H5, H6
Size=7, 6, 5, 4, 3, 2, 1
字體的加粗會將顯示字體做加粗效果
不將顯示字體做加粗效果
分行的效果視為獨立段落 , 會換行
不會換行
47
字型樣式— <B> 粗體字
48
字型樣式— <I> 斜體字
49
字型樣式— <U> 文字加底線, <STRIKE> 文字加橫線
50
字型樣式— <SUB> 下標字, <SUP> — 上標字
51
具有特殊含意的標籤
52
在 HTML 文件中顯示保留符號
符號 語法
< <
> >
& &
” "
53
在文件中顯示特殊字元 (1/2)
54
在文件中顯示特殊字元 (2/2)
55
文字小結 加入圖片的標籤: <IMG> <IMG> 處理圖片的屬性: SRC, LOWSRC,
BORDER, HEIGHT, WIDTH, VSPACE, HSPACE, ALT, 和 ALIGN
改變字型及字體大小的標籤: <BIG>, <SMALL>, <BASEFONT>, 和 <FONT>
<FONT> 處理字型的屬性: SIZE, 和 FACE改變字型樣式的標籤: <B>, <I>, <TT>, <U>,
<STRIKE>, <SUB>, 和 <SUP>
5656
標籤 <MARQUEE>
跑馬燈是一種動態的文字效果,可使文字隨時間依一定的規則變化移動。利用<MARQUEE> 標籤,並加上一些文字即可。
範例:<MARQUEE DIRECTION=LEFT >這段跑馬燈會反覆不停地由右至左捲動</MARQUEE><P>
5757
BEHAVIOR 屬性 標記 <MARQUEE> 的 BEHAVIOR 屬性可以控制跑
馬燈的捲動效果。 SCROLL 的效果使文字由最右方一個接一個字的出現,然後
再逐一消失,它是預定的顯示方式。 SLIDE 效果使文字捲進來後碰到邊界就停住不再移動。
<MARQUEE BEHAVIOR=SLIDE> 我是滑動的方式,你只能看一次喔 !</MARQUEE><P>
ALTERNATE 效果使文字在限定的範圍內左右交替移動。 <MARQUEE BEHAVIOR=ALTERNATE> 我會“反彈”喔!
</MARQUEE><P> LOOP 則可控制跑馬燈捲動的次數。範例:
<MARQUEE BEHAVIOR=SCROLL LOOP=3> 我只重覆 3次喔 !</MARQUEE><P>
5858
DIRECTION 屬性 標記 <MARQUEE> 的 DIRECTION 屬性控制跑馬燈捲動方向。
LEFT 代表向左捲動 RIGHT 代表向右捲動
BGCOLOR 屬性可改變跑馬燈的背景顏色。 文字顏色以 <FONT COLOR=#rrggbb> 設定 範例
<MARQUEE DIRECTION=LEFT> 我往左跑 </MARQUEE><P> <MARQUEE DIRECTION=RIGHT> 我往右跑 </MARQUEE><P> <MARQUEE
BGCOLOR=YELLOW> 我有黃色的背景 </MARQUEE><P> <FONT COLOR=#ffff00><MARQUEE BGCOLOR=#0000ff> 我有
藍色的背景,黃色的字 </MARQUEE><P></FONT>
5959
WIDTH 屬性 標記 <MARQUEE> 的 WIDTH 屬性可以改變跑馬燈
的寬度,而 HEIGHT 則可以改變高度。 SCROLLAMOUNT 代表跑馬燈中文字每次移動的距
離 ( 單位是像素 ) ,而 SCROLLDELAY 則代每次移動間相隔的時間 ( 單位是千分之一秒 ) 。
範例 <MARQUEE BGCOLOR=#FFFF00 HEIGHT=40
WIDTH=50%> 這是一段背景為黃色的文字跑馬燈 </MARQUEE><P>
<MARQUEE SCROLLAMOUNT=100> 我跑很快喔 !</MARQUEE><P>
<MARQUEE SCROLLDELAY=500> 我走很慢耶 !</MARQUEE><P>
6060
標籤 <IFrame>
<Frame> 標籤無法和 <BODY> 標籤共用,針對此一缺點, IE 提出了 Inline Frame 的概念。IE 可以讓您在 <BODY> 標籤中加入分割視窗(Frame) ,此時的分割視窗就好像 <IMG> 標籤所加入的圖片一般,稱為 Inline Frame
範例: <IFRAME SRC=“http://www.hinet.net”> 請使用
Internet Explorer 或 Firefox 否則您看不到 inline frame 的效果 </IFRAME>
6161
<IFRAME> 的屬性 ALIGN 嵌入視窗與文字的對齊方式,有 Left, Right, Top, Middle,
Bottom 範例 <IFRAME SRC="http://www.hinet.net" ALIGN=right></IFRAME>
FRAMEBORDER 設定嵌入視窗是否顯示邊框,預設值為1;設定為0則不顯示邊框 範例 <IFRAME SRC="http://www.hinet.net" frameborder=0></IFRAME>
HEIGHT 設定嵌入視窗的高度 範例 <IFRAME SRC="http://www.hinet.net" height=300 width=400></IFRAME>
WIDTH 設定嵌入視窗的寬度 SCROLLING 設定嵌入視窗是否顯示捲軸,有 YES, NO, AUTU
(預設值 )三種 範例 <IFRAME SRC="http://www.hinet.net" scrolling=no></IFRAME>
6262
<IFRAME> 的屬性 NAME 設定嵌入視窗的名稱,加上超連結時可以和
TARGET 配合使用,範例: <a href="http://www.hinet.net"
target="SMALLWINDOW"> 中華電信 </a> <a href="http://www.kimo.com.tw"
target="SMALLWINDOW">奇摩站 </a> <a href="http://www.yam.com.tw"
target="SMALLWINDOW">蕃著藤 </a> <P>
<IFRAME SRC=“http://www.hinet.net” name=“SMALLWINDOW” ALIGN=CENTER WIDTH=400 HEIGHT=300> 要用 ie才看得到喔 </IFRAME> <P>
6363
範例 main.htm<html> <head> <title> </title> </head> <frameset cols=30%,70%> <frame src="left.htm"name="left”> <frame src="right.htm"name="right”> </frameset> </html>
6464
範例 left.htm<html> <body background=face.jpg> < marquee > 我是跑馬燈 ! </marquee ><P> < marquee behavior=slide> 我走一次就靠在左邊休息了 </marquee > <p> </body></html>
6565
範例 right.htm<html> <body bgcolor=yellow> <marquee direction=left behavior=scroll loop=3> 我走 3 次喔
</marquee><P> <marquee behavior=alternate> 我會反彈喔 </marquee><p><hr> <font color=#FF00FF><marquee direction=left bgcolor=pink
fontcolor> 我會往左 </marquee></font><P> <font color=#FF0000><marquee direction=right
bgcolor=gray HEIGHT=40 WIDTH=50%> 我會往右 </marquee></font><P><hr>
</body></html>
6666
範例 right.htm續<iframe src="http://www.yam.com.tw"
height=200 width=300> </iframe><P>
<iframe src="http://www.yahoo.com.tw" height=200 width=300> </iframe><P>
67
實作練習1. 請展示你所做的網頁,並向老師說明你學習
的心得或困難點。