HTML

Download Report

Transcript HTML 

網頁設計實務
基礎HTML介紹
週次：2
建國技術學院 資管系 饒瑞佶
2003年9月19日
何謂HTML?
Hyper Text Markup Language（HTML）
ＷＷＷ上製作ＨｏｍｅＰａｇｅ的語言，是一種
標記語言。需透過瀏覽器翻譯標記後方可呈現 。
HTML 標準之原始資料
除標準HTML標記外，各瀏覽器廠商也自訂專屬的標記
何謂標記語言?
Tag Language
製作ＨＴＭＬ文件的過程中必須加入所謂的標記【Ｔ
ＡＧ】，好讓瀏覽器知道該如何處理及呈現原始文件
的內容。
在ＨＴＭＬ語法中，除了少數例外，大都是以：<XX>
開始，以</XX>結束；其中XX就是ＨＴＭＬ的標記。
Web Server vs. Browser
Client 端
Web Server
下載 HTML文件，
由客戶端瀏覽器執行
*.htm
瀏覽結果會因Browser不同而不同
*.htm
HTML標記
有頭有尾，中間夾住所要顯示的文字或圖形
純文字檔
無大小寫之分
檔名需要是.HTM或是.HTML
<標籤名稱 屬性 =“設定值”> ..要顯示之文件資料.. </標籤名稱
>
<Tag Attributes ="Value"> ..Document Of Display.. </Tage>
HTML標記類別
文件結構標籤(Document Structure Tags)
區段格式標籤(Block Formatting Tags)
字元格式標籤(Character Formatting Tags)
清單標籤(List Tags)
連結標籤(Anchor Tag)
多媒體標籤(Multimedia Tag)
表格標籤(Table Tags)
表單標籤(From Tags)
文件結構標籤
•<html>...</html>:標示HTML文件的啟始,終止處
•<head>...</head>:標示文件標頭區
•<body>...</body>:標釋出文件主題區
•<html>...</html>:標示HTML文件的啟始,終止處
•<head>...</head>:標示文件標頭區
•<body>...</body>:標釋出文件主題區
區段格式標籤
•<title>...</title>:文件抬頭
•<html>...</html>:標示HTML文件的啟始,終止處
•<hi>...</hi>:i=1,2,..,6網頁標題
•<head>...</head>:標示文件標頭區
•<body>...</body>:標釋出文件主題區
•<hr>...</hr>:產生水平線
•<br>...</br>:強迫換行
•<p>...</p>:文件段落
•<pre>...</pre>:以原始格式顯示
•<address>...</address>:標註聯絡人姓名電話地址等資訊
•<blockquote>...</blockquote>:區段引言標記
字元格式標籤
•<b>...</b>:粗體字
•<html>...</html>:標示HTML文件的啟始,終止處
•<head>...</head>:標示文件標頭區
•<i>...</i>:斜體字
•<body>...</body>:標釋出文件主題區
•<font>...</font>:改變字型設定
•<center>...</center>:向中對齊
•<blink>...</blink>:文字閃爍
•<big>...</big>:加大字型
•<small>...</samll>:縮小字型
清單標籤
•<ul>...</ul>:無編號清單
•<ol>...</ol>:有編號清單
•<li>...</li>:清單項目
•<dl>...</dl>:定義式清單
•<dd>...</dd>:定義描述
•<dir>...</dir>:目錄式清單
•<menu>...</menu>:選單式清單
連結標籤
•<a>...</a>:建立超連結
多媒體標籤
•<img>...</img>:嵌入影像
•<embed>...</embed>:嵌入多媒體物件
•<bgsound>...</bgsound>:背景音樂
標準HTML之架構
<HTML>
<HEAD><TITLE>瀏覽器抬頭列顯示的訊息</TITLE></HEAD>
<BODY>
網頁主體內容
</BODY>
</HTML>
使用記事本練習 …..
HTML
表格標籤
表格元件
1. 用以定義以橫列與直欄構成的表格。
2. 包含許多選擇性元件與屬性。
<Table> …… </Table>
表格子元件
1.
2.
3.
4.
5.
CAPTION
TR
COL
TH
TD
說明
表格標題
表格列
表格欄
儲存格標題
儲存格資料
每一子元件均包含若干屬性
基本表格樣本
<TABLE>
<CAPTION>表格標題</CAPTION>
<TR>
<TH>標題一<TH>標題二
<TR>
<TD>第一列，內容一<TD>第一列，內容二
<TR>
<TD>第二列，內容一<TD>第二列，內容二
</TABLE>
表格元件屬性
WIDTH
HEIGHT
BORDER
FRAME
RULES
CELLSPACING
CELLPADDING
ALIGN
BGCOLOR
BORDERCOLOR
表格的寬度
表格的高度
表格的外框線寬度
表格的外框線顯示方式
儲存格的框線顯示方式
儲存格間格大小
儲存格內邊留白大小
表格的水平排列方式
表格的底色 (背景色彩)
表格的外框線顏色
表格寬度 - WIDTH
• 通常以下列兩種方式定義。
1. 像素值：
width = 200
2. 百分比值：
width = 20%
格式
<table width = "200">
表格高度 - HEIGHT
• 通常以下列兩種方式定義。
1. 像素值：
height = "200"
2. 百分比值：
height = "50%"
格式
<table height = "30%">
表格外框線寬度 - BORDER
1. 以像素為表示單位。
2. 如不指定，預設值為 0 ，即不顯示。
格式
<table border="2">
表格外框線顯示方式 - FRAME
• 共計九種顯示方式。
1.
2.
3.
4.
5.
6.
7.
8.
9.
void: 不顯示外框線。
above: 只顯示上框線。
below: 只顯示下框線。
hsides: 只顯示水平框線。
vsides: 只顯示垂直框線。
lhs:
只顯示左框線。
rhs: 只顯示右框線。
box: 顯示所有框線。
border: 顯示所有框線。
表格內框線顯示方式 - RULES
• 共計五種顯示方式。
1.
2.
3.
4.
5.
none: 不顯示內框線。
groups:只顯示列組與欄組間的框線。
rows: 只顯示水平框線。
cols: 只顯示垂直框線。
all:
顯示所有內框線。
表格框線色彩 - BORDERCOLOR
• 通常以下列兩種方式定義。
1. sRGB值：
borderColor = "#FF0000"
2. 顏色名稱：
borderColor = "red"
格式
<table borderColor= "red">
表格背景色彩 - BGCOLOR
• 通常以下列兩種方式定義。
1. sRGB值：
bgColor = "#000080"
2. 顏色名稱：
bgColor = "navy"
格式
<table bgColor = "navy">
儲存格間格大小 - CELLSPACING
• 定義儲存格與儲存格之間的間格。
• 通常利用像素大小來表示。
格式
<table cellSpacing="1">
儲存格內留白大小–CELLPADING
• 定義儲存格邊緣與內含文字的間隔。
• 通常利用像素大小來表示。
格式
<table cellPading="1">
表格水平排列方式 – ALIGN
• 共計三種排列方式。
1. left: 靠左對齊。
2. right: 靠右對齊。
3. center: 置中。
格式
<table align = "center">
畸形表格的產生
ColSpan 與 RowSpan 屬性
ColSpan=3
RowSpan=2 ColSpan=2
畸形表格的HTML標籤
<TABLE Border=1 Width="100%" >
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD> 正常
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
<TABLE Border=1 Width="100%" >
<TR>
<TD ColSpan="3"> </TD>
</TR>
<TR>
<TD RowSpan="2"> </TD>
<TD ColSpan="2"> </TD>
</TR>
<TR>
<TD> </TD>
畸形
<TD> </TD>
</TR>
</TABLE>