第 2 章 HTML語法 製作.

Slides:



Advertisements
Similar presentations
E-portfolio 個人履歷網站教學
Advertisements

第5章 表格的设计与 制作. 内容提要 表格的创建、编辑 表格的属性设置 特效表格的制作 布局表格的基本操作 表格和布局表格的应用.
Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
HyperText Markup Language
第六章 网页设计与制作基础.
ASP.NET 網頁製作教本 -- 從基本語法學起
第3章 文字与段落 清华大学出版社.
HTML第一课 李 伟 HTML开发语言基础.
Chapter 5 全球資訊網 5-1 World Wide Web 的誕生 5-2 使用Internet Explorer
專題製作 許惠淑.
第5章 HTML 標籤介紹.
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
第8讲 HTML与PHP基础 静态网页 vs. 动态网页.
动态网页制作 第1章 HTML语言1.
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
第7章 表 格 清华大学出版社.
教学内容 1、演示并讲解用表格布局制作的网页 2、用表格制作网页.
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
网页 设计与制作.
第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
第二部分 HTML语言控制 本次课的主要内容: 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用
HTML 語法教學 授課:彭穎聰 老師.
HTML簡介、文字的變化、超連結的使用 主講:朱漢琳.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
CT212 (02/03)-Network Programming and design
第二章 網際網路網頁的設計.
HTML.
ASP动态网页设计实用教程 主讲教师: 开课单位:.
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
建國技術學院資訊管理學系 饒瑞佶 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 2004/7/5.
湖北职院计科系.
教師: 陳明瑤 電郵: 網際網路應用-網頁設計3 教師: 陳明瑤 電郵:
DreamWeaver MX (II) 林偉川.
Chapter14 HTML簡介與簡易網頁製作
HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法
網路概念 APACHE PHP MYSQL HTML BY 董仔 08/01/14.
Ch.13 HTML網頁實作.
第2章 超文本标记语言HTML.
8 网页制作基础知识 赵国庆 博士 北京师范大学教育技术学院
CSS樣式 靜宜大學 資管系 楊子青.
W3C标准网页制作 主讲教师:张 涛.
授课教师:姬广永 QQ: TEL: 学习交流网站:
HTML – 文字格式 資訊教育.
檔案與磁碟的基本介紹.
HTML & CSS.
主讲:陶建平 华中科技大学网络与计算中心
The Department of Education Technology
Web应用开发.
W3C标准网页制作 主讲教师:张 涛.
網頁程式設計 本章投影片錄自HTML5、CSS3、RWD、jQuery Mobile跨裝網頁設計 陳惠貞 著 碁峰資訊股份有限公司出版
HTML – 表格 資訊教育.
第 19 章 XML記憶體執行模式.
第一個cordova project Cordova project建立與平台設定,均藉由cli(command line interface來完成 建立project請打開命令提示字元視窗應輸入下列命令 cordova create hello tw.edu.stust.mis.hello HelloWorld.
HTML – 超連結與圖片 資訊教育.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
進階網頁設計 電算中心 – 何建義.
HTML大探索.
CSS樣式 靜宜大學 資管系 楊子青.
第6章 框架实现多窗口网页.
從HTML表格到CSS 靜宜大學 資管系 楊子青.
Dreamweaver 進階網頁製作 B 許天彰.
Brief Guide of FrontPage
國立台灣大學 關懷弱勢族群電腦課程 By 資訊工程 黃振修
第2章 块级标签 经济管理学院.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
第五章 自訂佈景主題與文字處理 講授者:詹雅愔.
HTML5.
教师:李金双 网页制作 教师:李金双
Presentation transcript:

第 2 章 HTML語法 製作

認識HTML - 簡介HTML 在以往建構靜態網頁時,可以利用網頁設計工具進行設計,但是想要學習動態網頁的製作時,則必須捨棄這些工具直接運用HTML撰寫網頁。 以HTML語法撰寫的檔案稱做HTML文件。儲存HTML文件時,並未運用特別的檔案格式,而是以.htm或.html為副檔名儲存的純文字檔。      

認識HTML - 簡介HTML 您可使用任何文書編輯軟體建立、編輯HTML文件,如Windows中的文字編輯軟體 – NotePad。

認識HTML - HTML的標籤與元件觀念 HTML的標籤

認識HTML - HTML的標籤與元件觀念 HTML文件內HTML標籤控制文字顯示的語法如下所示。 <標籤名稱>欲控制文字</標籤名稱> <P>位元文化</P>

認識HTML - HTML的標籤與元件觀念 元件的觀念 以下敘述將利用Align屬性,控制『位元文化』這四個字組成的段落,以置中方式對齊。 <P Align=Center>位元文化</P>

認識HTML - HTML的標籤與元件觀念 HTML的階層觀念 整個HTML文件就像是一個大元件,將包含許多小元件。 在<HTML>標籤建構的元件內,還包含由<HEAD>標籤與<BODY>標籤所建立的兩個主要子元件。

認識HTML - HTML的標籤與元件觀念 所有HTML文件的最基本架構如下所示: <HTML> <HEAD> …… <BODY> </BODY> </HTML>

認識HTML - HTML的標籤與元件觀念 HTML標籤的架構如下圖所示:

認識HTML - HTML的標籤與元件觀念 以下語法<HEAD>標籤與<BODY>標籤彼此交錯是不對的,當標籤交錯時,將無法區別兩個元件的範圍。

認識HTML - HTML的標籤與元件觀念 超連結 網頁的超連結是以下加底線,並以不同顏色與網頁中其他文字區隔。 當滑鼠游移到超連結上時,游標將變成手形圖示,告訴您可以點選該文字,連結至其他網頁,如下圖所示。

認識HTML - HTML的標籤與元件觀念 超文字與多媒體 網頁內除了可以包含文字外,也可以置入圖片、影像、聲音、動畫等多媒體資料。 <IMG src="http://192.168.1.10/poweredby.gif>

認識HTML - HTML的標籤與元件觀念 在HTML文件內還有一些比較特殊的小觀念必須注意: HTML文件內以按下 鍵的方式分行,顯示於瀏覽器時,並不會有任何效果。若網頁內容的文字欲換行,必須使用<BR>標籤。 HTML文件的文字間,不論您鍵入幾個空白鍵,瀏覽器僅顯示為一格空白。若希望在HTML文件內顯示數個空白時,必須利用『 』代表空白。當n個『 』串連在一起時,瀏覽器內將顯示n個空白。

認識HTML - HTML的標籤與元件觀念 在HTML的標籤中,英文大小寫的意義相同,也就是說<HTML>與<html>是一樣的。 使用不同瀏覽器瀏覽同一份HTML文件時,顯示的網頁可能不盡相同,因為不同的瀏覽器解譯HTML語法會有些許差異。

認識HTML - HTML的標籤與元件觀念 雖然HTML是一個標準語法,但Netscape與IE基於此標準語法,將各自訂定一些只能在該廠牌瀏覽器內,才能正常顯示的特殊語法。若希望所有瀏覽器都能正常瀏覽所製作的網頁時,應該避免使用這些自訂語法,本書所說明的HTML語法為HTML 4.0。

認識HTML - HTML小助教 啟動後的畫面如下圖所示: 檢視區 按下此鈕可立即執行 輸入的HTML語法, 並在檢視區看到結果 輸入區

HTML標籤運用基本觀念 - HTML標籤的語法 定義元件的開始標籤之基本語法如下: 結束標籤的建立方式: <標籤名稱 屬性1="值1" 屬性2="值2" …> </標籤名稱>

HTML標籤運用基本觀念 - HTML標籤的語法 <標籤名稱 屬性1="值1" 屬性2="值2" …>元件資料< /標籤名稱>

HTML標籤運用基本觀念 - HTML文件基本架構 <HEAD><TITLE>標題文字</TITLE></HEAD> <BODY> …… </BODY> </HTML>

HTML標籤運用基本觀念 - HTML文件基本架構 整個文件被區分為兩大部份: 由<HEAD>標籤建立的文件標頭 由<BODY>標籤建立的文件主體

HTML標籤運用基本觀念 - HTML文件基本架構 <HEAD>標籤 由<HEAD>標籤定義的元件中,是放置有關這份HTML文件的資訊,例如:文件的標題、編碼方式…等等。 <TITLE>標籤 此標籤使用於<HEAD>標籤內,用於標示此HTML文件的標題名稱。

HTML標籤運用基本觀念 - HTML文件基本架構 <BODY>標籤 由<BODY>標籤建立的元件,為此HTML文件的內容主體。 此HTML文件欲顯示的所有文件內容都將放在這個元件中。 在這個元件中,可以利用各種HTML標籤,控制網頁顯示內容的格式、編排與效果。

HTML標籤運用基本觀念 - 文件主體標籤<BODY></BODY> bgcolor屬性 控制文件的背景顏色,語法為: 16進位數值的方式指定顏色,語法如下: bgcolor="顏色" #RRGGBB RR代表紅色、GG代表綠色、BB代表藍色

HTML標籤運用基本觀念 - 文件主體標籤<BODY></BODY> 常用的基本顏色名稱列於下表。 英文名稱 顏色 Black 黑 Purple 紫 White 白 Olive 橄欖綠 Gray 灰 Navy 深藍 Silver 銀灰 Aqua 水藍 Red 紅 Lime 青綠 Green 綠 Maroon 茶色 Blue 藍 Teal 墨綠 Yellow 黃 Fuchsia 紫紅

HTML標籤運用基本觀念 - 文件主體標籤<BODY></BODY> 以下HTML敘述將產生背景顏色為藍色的HTML文件。 <HTML> <BODY bgcolor=blue> 文件背景為藍色 </BODY> </HTML>

HTML標籤運用基本觀念 - 文件主體標籤<BODY></BODY> 上述HTML敘述鍵入HTML小助教後,顯示的畫面如下:

HTML標籤運用基本觀念 - 文件主體標籤<BODY></BODY> text屬性 此屬性用於控制網頁內文字的顏色,語法為: text=顏色值 link屬性 網頁中未被點選過之超連結的顏色,語法為: link=顏色值

HTML標籤運用基本觀念 - 文件主體標籤<BODY></BODY> vlink屬性 設定網頁中已經連結過之超連結的顏色,語法如下: vlink=顏色值 alink屬性 按下滑鼠時之顏色 alink=顏色值

HTML標籤運用基本觀念 - 文件主體標籤<BODY></BODY> background屬性 指定做為HTML文件背景的圖片,可以使用的圖檔格式為GIF與JPG,語法如下: background="檔案名稱與路徑"

文字版面編排標籤 - 標題標籤<Hn></Hn>

文字版面編排標籤 - 標題標籤<Hn></Hn> 以下HTML敘述將建立出六種層級的標題 <HTML> <BODY> <H1>標題1</H1> <H2>標題2</H2> <H3>標題3</H3> <H4>標題4</H4> <H5>標題5</H5> <H6>標題6</H6> 以上為網頁中可用的各等級標題。 </BODY> </HTML>

文字版面編排標籤 - 標題標籤<Hn></Hn> 上述HTML敘述鍵入HTML小助教後,顯示的效果如下:

文字版面編排標籤 - 標題標籤<Hn></Hn> Align屬性 <Hn>標籤內較為常用的屬性為align,此屬性用於控制標題的對齊方式,語法如下: align= left 或 center 或right

文字版面編排標籤 - 標題標籤<Hn></Hn> 以下HTML敘述將示範不同的標題對齊方式 <HTML> <BODY> <h1 align=center>置中標題</h1> <h1 align=left>靠左標題</h1> <h1 align=right>靠右標題</h1> </BODY> </HTML>

文字版面編排標籤 - 標題標籤<Hn></Hn> 上述HTML敘述鍵入HTML小助教後所,顯示的效果如下:

文字版面編排標籤 - 段落標籤<P></P> 在瀏覽器中,不同段落文字間將以一行空白間隔,以區別文字的不同段落,語法如下: <P>文字</P> 在<P>標籤中較常用的屬性為align屬性,透過此屬性可以控制段落的對齊方式,語法如下: align= left 或 center 或right

文字版面編排標籤 - 段落標籤<P></P> 以下HTML敘述,將示範不同的標題對齊方式。 <HTML> <BODY> <P align=center>置中段落</P> <P align=left>靠左段落</P> <P align=right>靠右段落</P> </BODY> </HTML>

文字版面編排標籤 - 段落標籤<P></P> 上述HTML敘述鍵入HTML小助教後,所顯示的效果如下:

文字版面編排標籤 - 換行標籤<BR> 換行標籤是一個沒有結尾標籤的標籤,HTML文件中任何位置只要使用了<BR>標籤,當文件顯示於瀏覽器中時,該位置後的文字將顯示於下一行。 若欲將某位置後的文字顯示於下一行時,必須在該位置使用<BR>標籤。

文字版面編排標籤 - 換行標籤<BR> 以下HTML敘述將示範利用<BR>標籤將文字分行顯示。 <HTML> <BODY> 第一行<BR> 第二行<BR> </BODY> </HTML>

文字版面編排標籤 - 換行標籤<BR> 上述HTML敘述鍵入HTML小助教後,所顯示的效果如下:

文字版面編排標籤 - 水平分隔線<HR> Size屬性 設定水平線的粗細,單位為像素(pixel)。 Width屬性 水平線的寬度,單位可使用像素(pixel),或螢幕的百分比 。 align屬性 控制水平分隔線的對齊方式,有置中、靠左、靠右三種,語法 如下: align=center或left或right

文字版面編排標籤 - 水平分隔線<HR> color屬性 線條的顏色,顏色可用英文名稱或是16進位數值設定。 語法如下: color=顏色值 noshade屬性 水平線不顯示3D陰影。

文字版面編排標籤 - 水平分隔線<HR> 以下HTML敘述將示範建立各種不同的水平分隔線。 <HTML> <BODY> <HR align=left> <HR align=left width= 50%> <HR size=10 width= 50%> <HR size=20 color="blue"> <HR size=20> <HR size=20 noshade> </BODY> </HTML>

文字版面編排標籤 - 水平分隔線<HR> 上述HTML敘述鍵入HTML小助教後,顯示的效果如下:

文字版面編排標籤 - 置中對齊<CENTER></CENTER> <HTML> <BODY> <CENTER> <P>我是郭尚君</P>請多指教 </CENTER> </BODY> </HTML>

文字版面編排標籤 - 置中對齊<CENTER></CENTER> 上述HTML敘述鍵入HTML小助教後,顯示效果如下:

文字版面編排標籤 - 有序號條列標籤<ol></ol> 有序號條列標籤的語法如下: <ol> <li>條列1 <li>條列2 <li>條列3 …… </ol>

文字版面編排標籤 - 有序號條列標籤<ol></ol> type屬性 此屬性用於控制序號的種類。 語法如下: type=1或A或a或I或i 設定值 說明 1 表示序號為數字。 A 表示序號為大寫英文字母。 a 表示序號為小寫英文字母。 I 表示序號為大寫羅馬數字。 i 表示序號為小寫羅馬數字。

文字版面編排標籤 - 有序號條列標籤<ol></ol> start屬性 以下為設定序號開始之編號的語法,n可以是2、C或是vi。 start=n

文字版面編排標籤 - 無序號條列標籤<ul></ul> 無序號條列標籤的語法如下: <ul> <li>條列1 <li>條列2 <li>條列3 …… </ul>

文字版面編排標籤 - 無序號條列標籤<ul></ul> type屬性 此屬性在無序號項目條列中,可以設定項目符號 。 語法如下: type=circle或disc或square

文字版面編排標籤 - 說明項目條列<dl></dl> 語法如下: <dl> <dt>條列1 <dd>條列1的說明1 <dd>條列1的說明2 …… <dt>條列2 </dl>

文字格式標籤 - 字型標籤<Font></Font> 語法如下: <FONT 屬性1=值1 屬性2=值2 ……>欲控制文字</FONT> face屬性 控制文字使用字型的屬性,語法為: face="字型名稱"

文字格式標籤 - 字型標籤<Font></Font> size屬性 控制文字大小的屬性,語法為: size=字體等級 color屬性 設定文字的顏色,語法為: color="顏色"

文字格式標籤 - 特定文字樣式標籤 標籤 說明 <b>…</b> 文字以粗體字顯示。 <i>…</i> 文字以斜體字顯示。 <u>…</u> 在文字下方加上底線。 <s>…</s> 文字加上刪除線。 <em>…</em> 文字以強調樣式顯示。 <strong>…</strong> 文字以加強強調樣式顯示。 <address>…</address> 電子郵件地址、網頁網址所專用的文字樣式。 <code>…</code> 程式碼或指令專用的字體。 <big>…</big> 顯示放大字體。 <small>…</small> 顯示縮小字體。 <sup>…</sup> 將文字顯示為上標文字。 <sub>…</sub> 將文字顯示為下標文字。

表格的建立 - 建立表格的四種標籤 在網頁內建立表格是非常重要的技巧,HTML語法內可運用<TABLE>、<TH>、<TR>、<TD>四種標籤建立表格。 各標籤之說明如下: <TABLE></TABLE>標籤 - <TABLE>標籤用於標示一個表格元件。一個表格元件將由數個列(<TR>)、儲存格(<TD>)與標題格(<TH>)子元件組成。

表格的建立 - 建立表格的四種標籤 <TR></TR>標籤 - <TR>標籤用於定義表格的一列,一組<TR>標籤內通常包含數組由<TD>或<TH>定義的儲存格。 <TD></TD>標籤 - <TD>標籤用於定義表格的儲存格。 <TH></TH>標籤 - <TH>標籤用於定義表格的標題儲存格,此儲存格中的文字將以粗體的方式顯示。此標籤可以不使用。

表格的建立 - 建立表格的四種標籤 在一個基本表格的表格元件中,必須包含一組<TABLE>標籤,一組<TR>標籤與一組<TD>標籤,敘述如下: <TABLE> <TR><TD></TD></TR> </TABLE> 上述語法將建立出只有一個儲存格的表格。

表格的建立 - <TABLE>標籤的屬性 border屬性:用於控制表格框線的厚度。 設定語法: border = 數值 cellspacing屬性 用於控制儲存格邊框到表格邊框的距離,也就是框線的寬度。 cellspacing = 數值

表格的建立 - <TABLE>標籤的屬性 cellpadding屬性 用於控制儲存格內文字的邊緣到儲存格邊框的距離。 bordercolor屬性 用於設定表格厚度的顏色。 cellpadding = 數值 bordercolor = 顏色值

表格的建立 - <TABLE>標籤的屬性 表格邊框的各控制屬性之設定 <HTML> <BODY> <TABLE border=10 cellspacing=10 cellpadding=10> <TR><TD>郭尚君</TD><TD>屏東市</TD></TR> <TR><TD>馬孝瑀</TD><TD>台北縣</TD></TR> </TABLE> </BODY> </HTML>

表格的建立 - <TABLE>標籤的屬性 上述HTML敘述鍵入HTML小助教後,所顯示的效果如下:

表格的建立 - <TABLE>標籤的屬性 bgcolor屬性 用於設定表格的背景顏色。 width屬性 整個表格的寬度設定。 bgcolor = 顏色值 width = 數值

表格的建立 - <TABLE>標籤的屬性 height屬性 控制整個表格的高度。 align屬性 控制整個表格在網頁中,採用的水平方向對齊方式設定語法如下: height = 數值 align = left 或 center 或 right

表格的建立 - <TR>標籤的屬性 align屬性 <TR>標籤所包含儲存格中,文字的水平對齊方式,設定語法如下: valign屬性 <TR>標籤所包含儲存格中,文字的垂直對齊方式,設定語法如下: align = left 或 center 或 right valign = top 或 middle 或 bottom 或 baseline

表格的建立 - <TD><TH>標籤的屬性 colspan屬性 水平延伸儲存格,設定語法如下: rowspan屬性 垂直延伸儲存格,設定語法如下: colspan = n rowspan = n

其他常用標籤 - 相對路徑與絕對路徑 相對路徑 – 以引用檔案之網頁所在位置為參考基礎,建立出的資料夾路徑。 絕對路徑 – 以Web站台根資料夾為參考基礎的資料夾路徑。

其他常用標籤 - 相對路徑與絕對路徑 下表介紹建立路徑所使用的幾個特殊符號,及其所代表的意義。 特殊符號 說明 . 代表目前所在的資料夾。 .. 代表上一層資料夾。 / 代表根資料夾。

其他常用標籤 - 相對路徑與絕對路徑 假設您所架設的Web站台擁有如下圖所示的資料夾路徑。 假若欲在Ref.htm檔中引用BeRef.gif檔時,其相對路徑如下: ./SubDir2/BeRef.gif

其他常用標籤 - 相對路徑與絕對路徑 亦可省略『./』直接用以下這個方式引用。 若使用絕對路徑以根資料夾為參考點引用該檔時,則引用路徑如下: SubDir2/BeRef.gif /Dir1/SubDir2/BeRef.gif

其他常用標籤 - 相對路徑與絕對路徑 若Web站台的資料夾之架構如下圖: 假若欲在Ref.htm檔引用BeRef.gif檔時,相對路徑如下: 若使用絕對路徑引用時,則引用路徑如下: ../Dir2/BeRef.gif /Dir2/BeRef.gif

其他常用標籤 - 相對路徑與絕對路徑 假設在欲架設之Web站台中,擁有如下圖的資料夾路徑。

其他常用標籤 - 相對路徑與絕對路徑 以下運用表格說明在上圖的情況下,某檔案引用另一檔案時,所應使用的相對路徑與絕對路徑。 引用者 被引用者 Ref1.htm BeRef1.gif ../SubDir2/BeRef1.gif /Dir1/SubDir2/BeRef1.gif Ref2.htm ../../Dir1/SubDir2/BeRef1.gif BeRef2.htm ../../Dir2/BeRef2.htm /Dir2/BeRef2.htm ../BeRef2.htm

其他常用標籤 - 超連結的標籤<A>與</A> 語法中各部份說明如下: 超連結名稱:此字串顯示於網頁中,代表此超連結,並供 使用者點選超連結之用。 連結位置:用於指定href屬性所超連結的目標位置,可使 用URL指定。 語法如下: <A Href="連結位置">超連結名稱</A> 通訊協定://連結位址/檔案位置…/檔案名稱

其他常用標籤 - 超連結的標籤<A>與</A> 以下列舉一些常見的連結位置設定方式。 一、指定透過http協定連結至其他網頁 <a href="http://localhost:8080/aspexample/ch2/ex2-24/img.htm"> 二、指定透過FTP協定連結至網路上的FTP伺服器 <a href="ftp://ftp-cnpa.admin.yzu.edu.tw"> 三、Telnet連結 <a href="telnet://bbs.iti.com.tw">

其他常用標籤 - 超連結的標籤<A>與</A> 四、電子郵件 由於這並不是標準的URL,將以『mailto:電子郵件帳號』的語法,將欲寄信的目標帳號設定給href屬性。 五、連結至同一伺服器上的其他網頁 可使用相對路徑或絕對路徑指定欲連結的網頁。 <a href="mailto:sckuo1@ms32.hinet.net"> <a href="img.htm">

其他常用標籤 - 圖檔載入標籤<IMG> <IMG>標籤用於將圖檔載入HTML文件內,可使用此標籤載入GIF、JPG…等格式的圖檔,基本語法如下: 以下敘述將載入位於上一層資料夾內名為mark.gif的圖檔。 <img src="圖檔儲存位置與名稱"> <img src="../mark.gif">

其他常用標籤 - 圖檔載入標籤<IMG> 以下敘述將從位址為192.168.1.10的伺服器之根資料夾,載入名稱為mark.gif的圖檔。 <img src="http://192.168.1.10/mark.gif">

其他常用標籤 - 圖檔載入標籤<IMG> alt屬性 當瀏覽器不能顯示指定圖片時,則以指定給alt屬性的字串替代圖片,設定語法為: alt="敘述文字“ border屬性 設定圖片的邊框,語法為: border=n

其他常用標籤 - 圖檔載入標籤<IMG> height屬性 設定圖片的高度,語法為: height=n width屬性 設定圖片的寬度,設定語法如下: width=n

其他常用標籤 - 圖檔載入標籤<IMG> hspace屬性 設定圖片左右水平空間的空白區域,網頁中的文字以及其他物件都會避開這塊空白的區域,設定語法為: hspace=n vspace屬性 與上一項屬性用法相同,但控制的是垂直的空間。

其他常用標籤 -視窗框架的使用 視窗框架的基本結構 其他常用標籤 -視窗框架的使用 視窗框架的基本結構 將整個瀏覽器畫面分割的視窗框架,主要利用<Frameset>標籤與<Frame>標籤定義。 其中<Frameset>標籤用於定義一個視窗框架元件,而<Frame>標籤則用於定義視窗框架中某個子視窗元件。

其他常用標籤 -視窗框架的使用 <Frameset> <Frame> …… </Frameset> 其他常用標籤 -視窗框架的使用 一組視窗框架的標準格式如下所示: <Frameset> <Frame> …… </Frameset>

其他常用標籤 -視窗框架的使用 設定畫面的分割方式 視窗框架的分割方式,可分為列分割與欄分割。 其他常用標籤 -視窗框架的使用 設定畫面的分割方式 視窗框架的分割方式,可分為列分割與欄分割。 一個視窗框架元件採用的是哪種分割方式,則要看設定於<Frameset>標籤的是rows屬性還是cols屬性。

其他常用標籤 -視窗框架的使用 列分割 以下<Frameset>標籤將使用rows屬性,定義一個列分割畫面的視窗框架。 其他常用標籤 -視窗框架的使用 列分割 以下<Frameset>標籤將使用rows屬性,定義一個列分割畫面的視窗框架。 <Frameset rows="高度1, 高度2, …, *"> <Frame> …… </Frameset>

其他常用標籤 -視窗框架的使用 設定給rows屬性的字串代表各分割子視窗的高度,第一個子視窗高度1,第二個為高度2,依此類推。 其他常用標籤 -視窗框架的使用 設定給rows屬性的字串代表各分割子視窗的高度,第一個子視窗高度1,第二個為高度2,依此類推。 最後一個『*』,則代表最後一個子視窗的高度,為其他子視窗高度分配後所剩餘的高度。 當將畫面分割成幾個子視窗時,設定給rows屬性的字串就有幾個高度值,且每個高度值間將以逗號(,)分隔。 設定高度值的方式共有兩種,一種是採用整數設定,單位為像素(pixel),另一種則是設定畫面的百分比。

其他常用標籤 -視窗框架的使用 欄分割 以下<Frameset>標籤將使用cols屬性,定義一個欄分割畫面的視窗框架。 其他常用標籤 -視窗框架的使用 欄分割 以下<Frameset>標籤將使用cols屬性,定義一個欄分割畫面的視窗框架。 <Frameset cols="寬度1, 寬度2,…. ,*"> <Frame> …… </Frameset>

其他常用標籤 -視窗框架的使用 子視窗的設定 name屬性 其他常用標籤 -視窗框架的使用 子視窗的設定 name屬性 name屬性用於指定頁框的名稱,定義子視窗名稱後,便可在HTML語法內指定該視窗。設定語法為: name="子視窗名稱"

其他常用標籤 -視窗框架的使用 src屬性 此屬性可指定預設載入子視窗之HTML文件的位置與名稱,語法為: 其他常用標籤 -視窗框架的使用 src屬性 此屬性可指定預設載入子視窗之HTML文件的位置與名稱,語法為: src="HTML文件的位置與名稱“ 以下設定將載入位於同一資料夾的first.htm網頁。 <frame src="first.htm" name="main">

其他常用標籤 -視窗框架的使用 控制視窗框架框線的frameborder屬性 其他常用標籤 -視窗框架的使用 控制視窗框架框線的frameborder屬性 <Frameset>標籤與<Frame>標籤的frameborder屬性用於控制是否顯示視窗框架四周的框線。 使用於<Frameset>標籤時,可控制該視窗框架元件的所有子視窗。 使用於<Frame>標籤時,則僅控制該標籤代表的子視窗,語法如下: frameborder=0或1

其他常用標籤 -視窗框架的使用 巢狀的視窗框架 所謂的巢狀視窗框架意指,一個視窗框架還包含了另一個視窗框架。

其他常用標籤 -視窗框架的使用 超連結target屬性與視窗框架的搭配應用 設定語法如下: target = "子視窗名稱"

其他常用標籤 -視窗框架的使用 設定target屬性可以運用下表所列的幾個代表特殊意義之值: 設定值 說明 _blank 其他常用標籤 -視窗框架的使用 設定target屬性可以運用下表所列的幾個代表特殊意義之值: 設定值 說明 _blank 新開一個視窗載入連結的網頁。 _self 在同一個視窗框載入連結的網頁。 _parent 將連結的網頁載入目前頁框的上一層視窗框(運用於巢狀視窗框架中),如果沒有上層,則載入同一視窗框。 _top 將網頁載入目前瀏覽器的最上層,因此,將畫面跳離原有視窗框。

其他常用標籤 - 註解標籤<!----> 其他常用標籤 - 註解標籤<!----> 欲在HTML文件內,說明HTML語法的意義時,可以使用『<!--…-->』標籤定義註解文字,語法如下: <!--註解文字-->