HTML
Outline
•
•
•
•
•
HTML簡介
網頁基本呈現元素
規則資料的呈現
表單的使用
Meta 標籤使用
什麼是HTML?
• HTML
– HyperText Markup Language
– 超文字標示語言
• HTML是撰寫建構網頁的語言
• 網頁則是透過 HTTP ( HyperText Transfer
Protocol) 網路通訊協定來瀏覽網頁
URL 的解譯
http:// www.yahoo.com.tw/ auction/index.html
通訊協定
資源所在路徑
主機(網域)名稱
Domain name 的解譯
機器名稱
cs20.cs.nthu.edu.tw
.(部門).機構名稱.機構分類.國家
www.sony.com
機器(服務)名稱
沒有國家代碼表示在美國
HyperText ML
• Hypertext(超文字)
– 傳統文件，循序地閱讀
– Hypertext 藉由連結，以樹狀或網狀組織文件
HT Markup Language
• Markup(標記/籤)
– 透過在文件裏插入標籤 (Tags) 來賦予該內容特性
– 如標題、影像、連結、文字格式等
– 標籤由 < 與 > 所括住
• <Title>
• <Center>
– 標籤內可能包含屬性<標籤名稱 屬性=值>
• <A href=“http://www.yahoo.com.tw”>
• <img src=“MyFace.jpg”>
HTML裡的標籤分類
• 依標籤特性
– 單標籤
– 雙標籤
• 依標籤使用方式
– 網頁主體標籤
– 一般應用標籤
• 標籤適用區域不同
單標籤
• 以單一標籤作為標記點
• 語法
– <標籤名稱 屬性="值">
• 例如:
– <Br>
– <img src="image/Logo.gif" width="50">
– <li type="1">
雙標籤
• 以兩個標籤作為標記的範圍
• 語法
– 開始標籤 <標籤名稱 屬性= "值" >
– 結束標籤 </標籤名稱>
• 例如:
–
–
–
–
<title> 我的網頁 </title>
<center> <img src="image/Logo.gif"> </center>
<font size=“3”> 我的名字叫陳國豪 </font>
<a href=“http://www.yahoo.com.tw”>Yahoo</a>
網頁主體標籤
• 建構網頁的基本標籤
• 以以下的結構存在
<HTML>
<HEAD>
放置一些設定標籤的地方
頭
</HEAD>
<BODY>
身
體
網頁內文真正輸入之處
</BODY>
</HTML>
網頁主體標籤
<HTML>
<HEAD>
<Title>李鎮宇的網頁</Title>
</HEAD>
<BODY background="abc.jpg">
Title為網頁抬
頭的內容,只能
放在頭(Head).
…
</BODY>
</HTML>
Body本身可以放
入屬性.如:
背景圖(background)
背景色(bgcolor)
試一試
• 請使用剛剛學的東西作出以下網頁
• 請使用記事本
網頁基本呈現元素
•
•
•
•
•
•
文字 (Text)
影像 (Image)
連結 (Link)
顏色 (Color)
音訊/視訊
特殊文字符號
文字 (Text)
• <P> Paragraph 段落 (雙)
– ALIGN = left|right|center
• <BR> Break 斷行 (單)
• <Hn> Heading 表頭 (雙)
– n=1…6
– ALIGN = left|right|center
• <FONT></FONT> (雙)
– SIZE=string (1..7 or +-n)
– COLOR= [Keyword] |#RRGGBB
– FACE=font names
文字 (Text)
• <PRE> Preformatted Text (雙)
• <blockquote> 引述他人語句 (雙)
• <HR> (單)
–
–
–
–
ALIGN=left|right|center
NOSHADE 陰影效果
SIZE=n 粗細
WIDTH=n | p% 長度
文字 (Text)
•
•
•
•
•
•
•
•
•
<B> 加粗 (雙)
<I> 斜體 (雙)
<U> 加底線 (雙)
<STRIKE> 畫線刪除 (雙)
<BIG> 文字放大 (雙)
<SMALL> 文字縮小 (雙)
<SUP> 上標 (雙)
<SUB> 下標 (雙)
<EM> 強調 (雙)
文字 (Text)
• <MARQUEE> 跑馬燈 (雙)
–
–
–
–
–
–
–
DIRECTION=UP|DOWN|LEFT|RIGHT
BGCOLOR=“[Keyword]|#RRGGBB“
BEHAVIOR=SCROLL|SLIDE |ALTERNATE
SCROLLAMOUNT=n
SCROLLDELAY=n
Width=n
Height=n
• <CENTER> (雙)
影像 (Image)
• <IMG
–
–
–
–
–
–
• >
SRC=“” 來源 URL
ALT=“” 文字說明 String
WIDTH=“” 寬 integer/percentage
HEIGHT=“” 高 integer /percentage
BORDER=“” 框 integer
ALIGN=“” 對齊文字top/middle/bottom/left/right
試一試
• 請使用記事本寫一個圖文並茂的網頁
連結 (Link)
• 絕對路徑
– file:///C:/Myfiles/main.html
– http://www.cs.nthu.edu.tw/homepage.html
• 相對路徑
–
–
–
–
–
homepage.html 同一層目錄
./homepage.html 同一層目錄
web2/homepage.html 下一層目錄
../homepage.html 上一層目錄
../abc/homepage.html上一層目錄的abc目錄下
• <a target="new“ ref="http://www.nthu.edu.tw">
連結 (Link)
• 一般連結 (雙)
• <a
– target=“_blank|_top|_self|_parent” 新網頁開啟目標
– href=“http://www.yahoo.com.tw” 開啟的資源(不只網頁)
• >
•
•
•
•
文章內定位
需設定定位標籤
<A name= “new” > 標籤 (單)
連結的ref改為
– ref=“網頁位置#標籤名稱”
顏色 (Color)
• 一般標籤出現的顏色屬性
– COLOR = [Keyword] | #RRGGBB
• Keyword 有
– red, blue, white, yellow…
• #RRGGBB 是
–
–
–
–
–
–
紅(red)綠(green)藍(blue) 的16進位配色
#FFFFFF ->紅(255)綠(255)藍(255) ->白
#000000 ->紅(0)綠(0)藍(0) ->黑
#FF0000 ->紅(255)綠(0)藍(0) ->?
#FF00FF ->紅(255)綠(255)藍(0) ->?
#077CDC ->紅(??)藍(??)綠(??) ->?
顏色 (Color)
• <body>標籤裡可以設定的顏色屬性
–
–
–
–
–
–
BACKGROUND 背景圖片
BGCOLOR 背景顏色
TEXT 一般文字顏色
LINK 連結文字顏色
VLINK 連結文字被點選後的顏色
ALINK 連結文字被點選中的顏色
音訊/視訊
• <embed
–
–
–
–
–
–
src=“媒體位置"
loop=true|false
autoplay/autostart=false|false
hidden=true|false 來隱藏播放控制面
width=n
height=n>
• </embed>
特殊文字符號
• 特殊符號需要用
–
–
–
–
–
–
(符號)
(")
(&)
(<)
(>)
()
(代碼)
" | "
& | &
< | <
> | >
  |
規則資料的呈現
• 列表 (List)
• 表格 (Table)
列表 (List)
• 無序列表（Unordered list）
• 有序列表（Ordered list）
• 定義列表（Definition list）->較無意義
無序列表（Unordered list）
• <ul
– type=disc | circle | square
•
•
•
•
>
<li>實際項目
<li>實際項目
</ul>
• 也可以是巢狀的
– <ul> <ul></ul> <ul></ul> </ul>
有序列表（Ordered list）
• <ol
– type= 1 | A | a | I | i
• >
• <li
– type= 1 | A | a | I | i
– value= n
• >實際項目
• </ol>
• 也可以是巢狀的並可以與ul混用
– <ol> <ol></ol> <ul></ul> </ol>
表格 (Table)
• <table>
–
–
–
–
<tr>
<td> </td>
<td> </td>
</tr>
• </table>
• tr: table row
• td: table data
表格 (Table)
•
•
•
•
•
•
•
•
•
ALIGN=left|center|right：位置
WIDTH=n|p%：表格的寬度。
BORDER[=n]：邊界的寬度。
CELLSPACING=n：儲存格間距。
CELLPADDING=n：資料到儲存格間離。
BGCOLOR=#RRGGBB：表格底色。
Colspan 合併儲存格
Rowspan 合併儲存格
<caption> 加標題
表單的使用
•
•
•
•
•
•
•
•
前端輸入用.
<FORM >
<INPUT>
<INPUT>
…
<INPUT>
<INPUT>
</FORM>
表單的使用
• <FORM
– action= “ ” 按“確定”執行的 功能
– method=“post” 方法
– enctype=“text/plain” 壓縮法
• >
• <INPUT
–
–
–
–
–
–
• >
name=String
type= submit | reset | password | radio | checkbox …
size=n
maxlength=n
value= String
checked
表單的使用
• <FORM action="mailto:[email protected]" method="post"
enctype="text/plain">
• 名字：<INPUT name="myname" size=10 maxlength=20 value="
"><P>
• 密碼：<INPUT name="passwd" type=password size=8
maxlength=8><P>
• <INPUT type="submit" value="送出表單">
• <INPUT type="reset" value="重新輸入">
• </FORM>
Header的設定
• 在Head中除了Title之外還有什麼可以設定呢?
–
–
–
–
–
使用 <META> 標籤 (META DATA) (單標籤)
語言編碼
重載時間
自動轉址
其它資訊
– <head>
– <meta ….>
– </head>
語言編碼
• <META
– HTTP-EQUIV=“Content-Type“ (內容的類型)
– CONTENT=“text/html; charset=big5“ (字集為Big5)
• >
• charset=
–
–
–
–
Big5 (正體中文)
GB2312 (簡體中文)
Shift-JIS (日文)
UTF-8 (unicode)
重載時間
• 每隔 n 秒就重載網頁一次.
• <META
– HTTP-EQUIV=" REFRESH" (重載)
– CONTENT=“n” (時間n秒)
• >
自動轉址
• 隔 n 秒後就跳到新的網址
• <META
– HTTP-EQUIV=" REFRESH" (重載)
– CONTENT="5; (時間n秒)
URL=http://www.yahoo.com.tw" (目標URL)
• >
其它資訊
• 用以告知網路程式(如搜尋引擎)本網頁的內容
• <META
– NAME=KEYWORDS (類型是關鍵字)
– CONTENT=“pop music, mp3" (包含的關鍵字)
• >
• <META
– NAME=DESCRIPTION (類型是描述)
– CONTENT=“這網頁專門介紹西洋音樂.“ (描述)
• >
框架
• <frameset cols="150,*" >
• <frame name="menu" target="main"
src="1.htm">
• <frame name="main" src="2.htm">
• </frameset>
作業一
• 請設計一個個人相片簿網頁
• 並解釋你用的每一個標籤的意義.
• 請繳交電子檔與書面報告(A4)
© Copyright 2024 ExpyDoc
