HTML简介以及文字的变化和超链接的使用

《HTML简介以及文字的变化和超链接的使用》由会员分享，可在线阅读，更多相关《HTML简介以及文字的变化和超链接的使用（23页珍藏版）》请在金锄头文库上搜索。

1、HTML簡介、文字的變化、超連結 的使用 主講：朱漢琳課程綱要一、HTML 的基礎概念 n什麼是 HTML？ nHTML 文件的基本結構。 n編寫 HTML 文件的工具。二、常用的 HTML 標籤介紹 nHTML 頭部（HEAD）標籤 n文字格式設定 n超連結什麼是 HTML？ HTML 代表超文字標記語言(Hyper Text Markup Language)。 HTML的標準是由國際的組織 W3C（The World Wide Web Consortium） 發所佈，最新的版本為 4.01。 由許多標籤（tag）所構成的元素（element）組合而成。 是一種純文字檔案，可以使用各種文字編

2、輯器來進行編輯。 副檔名為.htm或.html。什麼是 HTML？ 透過 HTTP ( HyperText Transfer Protocol) 網路通訊協定，便 能夠在世界各地透過 WWW (World Wide Web) 的架構做跨平台的 交流。 以 HTML 格式所儲存的文件檔案，經由瀏覽器（如 Internet Explorer或 Netscape Navigator）顯示出來。RequestResponseWWW ServerUserHTML 文件的基本結構 一個簡單的網頁：CH01.htm原始檔如下：網頁的標題網頁的內容標籤（Tag）標籤是由一個符號所構成，例如 、。標籤的結構可分

3、為兩種：一種是成對的標籤，另一是單一標籤。成對標籤：由起始標籤（opening tag）及結束標籤（closing tag）組成 。大部分的標籤都屬於此類。例如：（代表字型的設定）。(註：所謂的結束標籤，是在原標籤文字前加上一個/，例如： ，通常表示該標籤特性的結束。)單一標籤：顧名思義，就是只有起始標籤。例如：（代表水平線 ）、（代表斷行）。標籤屬性 ：大部分的標籤都可以藉由標籤的屬性來更改呈現方式，標籤屬性的 格式為 屬性名稱屬性值，標籤屬性介於標籤名稱與 之間，例如 ：字體大小 - 字體大小字體大小 - 字體大小標籤的使用 ：利用起始標籤 與結束標籤 所包夾起來的 文句，即被賦予這個標籤

4、所代表的意義。瀏覽器在解讀出這些標籤之後，便可根 據這些標記的意義來對其所包夾的文句進行編排。例如， 與 是要告訴瀏覽器，其所包夾的文件內容是一份 HTML 文件；由 與 所包夾的文句需以第二種標題形式（字形較大、粗體等）來顯示。 其他注意事項： 標籤及屬性都沒有大小寫的區分。 屬性質的引號用雙引號或單引號均可。 瀏覽器對HTML文件中的空白字元將有特殊的處理。如果使用一個以上 的空白字元，第二個及以後的空白將被忽略，僅認可第一個空白字元。如果 您希望保留更多的空白，有以下二個方式： 使用全形的空白字元。 以來代表一個空白字元。（需要兩個空 白字元時就連續使用）標籤（Tag）特殊字元表示法由於

5、在HTML中，、空白 例如要正確顯示，您就應該輸入 table。如想要查詢其他的特殊字元表示法，可參考此網頁： http:/neural.cs.nthu.edu.tw/jang/books/html/text2.asp?title=2- 6%20特殊文字。HTML 文件的基本架構 HTML 文件由 與 所包夾，其中包括 檔頭 與 主 體 兩部分：檔頭：由 與 所包夾的部分，其中最重要的是 與 所包夾的文件主題，這個主題會出現在瀏覽器的 Title Bar。 主體 ：由 與 所包夾的部分，所有的網頁內容（包 含文字、圖片、多媒體物件，甚或是其他的標籤）都會放在這一對標籤 之內。 代表文件的開始用

6、來提供文件整體資訊(文件的頭部)網頁的標題 代表文件的標題文件內容部分(文件的主體body區段)網頁的內容代表文件結束檔頭區主體區文字編輯器 ： 任何平台上的任何文字編輯器都可使用，例如 Windows 裡 的Notepad、Wordpad 等，甚至可使用 Word 並以純文字模式儲存 檔案亦可。使用這些文字編輯器來直接撰寫並儲存符合 HTML 格式的文件，比較能得到簡潔、洗鍊、單純的 HTML 文件。缺 點是必須熟悉 HTML 格式的各種標記與其屬性。 HTML 設計軟體 ： 市面上有許多HTML 設計軟體，例如 Microsoft FrontPage 、 Netscape Composer

7、 、或 Macromedia Dreamweaver 等，這些軟體 提供良好的圖形介面，讓使用者能以所見即所得（WYSIWYG, What You See Is What You Get）的方式，很容易地設計、編排出 所想要呈現的網頁，並且以 HTML 的格式來儲存檔案，功能也 較為強大。但所產生的 HTML 檔案較為複雜，不易閱讀。 編寫 HTML 文件的工具常用的 HTML 標籤介紹（檔頭區標籤）一、檔頭區的相關標籤：通常在標頭區中包含以下幾個標籤，這些標籤都是可有可無的 。使用在標頭，用來定義所有連結網頁的原始路徑定義目前的文件與其它文件之間的關聯，經常用來匯入階 層樣式定義檔案之用主要

8、係用來描述文件的參考資訊，其內容並不會顯示在瀏 覽器的畫面上 在HTML文件中插入瀏覽器端 Script 定義階層樣式表 文件的標題 常用的 HTML 標籤介紹（Body）二、主體區的相關標籤： ：代表網頁文件主體，用來設定與整份文件相關的屬性 ，例如：畫面的顏色、各種文字的顏色等等。 在標籤中，常用的屬性可以分成幾類：v背景類：1) background=“圖檔檔名“指定背景圖2) bgcolor=“色彩名稱或色碼(#rrggbb）”指定背景顏色v文字色彩類：1) text=“色彩名稱或色碼（#rrggbb）“指定一般文字顏色2) link=“色彩名稱或色碼（#rrggbb）“指定連結文字顏

9、色3) alink=“色彩名稱或色碼（#rrggbb）“指定連結（連結中）顏色4) vlink=“色彩名稱或色碼（#rrggbb）“指定連結（連結後）顏色例如：常用的 HTML 標籤介紹（註解）：通常我們會在程式原始碼中加入一些說明文 字，作為程式碼的附註。使用兩符號，在此兩符號 中間的文字就會被瀏覽器視為註解而不被執行或顯示。如：常用的 HTML 標籤介紹（文字格式標籤之1 ）文字格式設定相關標籤：標籤功能語法屬性段落新的段落align=“ left” （靠 左）或 “center” （ 置中）或 “right” （靠右） 跳行第一行 第二行-提供六種層次的標題格式標題1 標題2 標題3 標

10、題4 標題5 標題 6align=“ left” （靠 左）或 “center” （ 置中）或 “right” （靠右）標籤功能語法屬性設定文字格式文字SIZE=“字型大小” COLOR=“字型顏色 ”(#RRGGBB) FACE=“字型” 將所標記的文字字型 加粗字型加粗-將所標記的文字變成 斜體斜體字-將所標記的文字加上 底線加底線-將所標記的文字畫線 刪除畫線刪除-將所標記的文字 放大字體放大-常用的 HTML 標籤介紹（文字格式標籤之2 ）標籤功能語法屬性將所標記的文字縮小文字縮小-將所標記的文字變成上標文字上標-將所標記的文字變成下標文字下標-將所標記的文字以強調粗 體顯示強調 粗體

11、-將所標記的文字以強調斜 體顯示強調斜 體-常用的 HTML 標籤介紹（文字格式標籤之3 ）常用的 HTML 標籤介紹（超連結之1）超連結： 絕對路徑和相對路徑：簡單的說，相對路 徑就是相對於現在目錄的路徑表示法，因此相對路徑所指 到的檔案或目錄，會隨著現在目錄的不同而改變；絕對路徑 指的是一個絕對的位置，並不會隨著現在目錄的改變而改變。 類別範例說明 絕對路 徑file:/E:/文件/Document.doc本機 E 槽上的Document.doc 檔案 http:/www.nuk.edu.tw/nuk/home-main-adm.htmhttp:/www.nuk.edu.tw 此台Serv

12、er根目錄下 nuk 目錄 中的 home-main-adm.htm 檔案 /nuk/home-main- adm.htm目前Server的 WWW 根目錄下 的 nuk 目錄中的 home-main- adm.htm 檔案類別範例說明相對 路徑 （相 對於 目前 文件 的路 徑）text.html 表同一層目錄下的 text.html 檔案 ./text.html 表同一層目錄下的 text.html 檔案 image/text.htmlimage 子目錄下的 text.html 檔案 /index.html表示上一層目錄下的 index.html 檔案 /html40/cover.html

13、表示上一層目錄下 html40 子目錄的 index.html 檔案 註：通常我們用.代表現在目錄，而用代表上一層目錄。常用的 HTML 標籤介紹（超連結之2）一般而言，除非有特殊需求，否則在 HTML 文件中，我們都盡量用相對 路徑來表示網址。使用相對路徑的好處是：當我們將包含許多網頁的目 錄轉移到另一個位置時，雖然絕對位置改變，但是在此目錄下的網頁相 對位置並沒有改變，因此我們並不需要大幅修改網頁內的網址。 超連結除了可以連結到網頁以外，我們也可以連結到其他檔案，例如可 以連結到數位音樂檔（MP3 或 MIDI）、聲音檔（WAV）、影像檔（GIF 或 JPEG 或 PNG）等，當連結的檔案

14、被送到用戶端時，用戶端會根據 檔案類型而呼叫不同的應用程式來播放或呈現。超連結標籤： 功能：可連結到另一文件或同一文件中的書籤。 語法： 範例：連結到高雄大學首頁常用的 HTML 標籤介紹（超連結之3）常用的 HTML 標籤介紹（超連結之4）常用屬性解說： Href=URL：指定超連結所連結之文件的相對或絕對位置。 *HTTP URL ：如 http:/www.nuk.edu.tw（若檔名省略表 示將讀取Server預設的檔名，通常為 index.html 或 default.html） *FTP URL ：如 ftp:/ftp.tku.edu.tw（若 filename 省略表 示將顯示整個

15、目錄） *mailto URL：如 mailto:hanneynuk.edu.tw *telnet URL：如 telnet:/bbs.nuk.edu.tw Name：指定書籤（Bookmark）名稱；連結除了可以跳到其他網頁 之外，也可以在一份長的網頁之中上下跳動。 例如：CH02.htm 連結書籤這是書籤所在位置 Target：指定超連結文件開啟的框架。如 高雄大學附錄一、HTML 色彩表示法HTML文件中有許多屬性可以控制色彩，包含文件的底色、文字的顏色、表格或 線條的顏色等等。此時您可以直接使用色彩的英文單字名稱來表示，例如：yellow 表示黃色、pink 表 示粉紅色。不過在大多數

16、情況下，我們會使用 #rrggbb 的格式來表示色彩值。他的 原理如同調色盤一般，rr 代表紅色，gg 代表綠色，bb代表藍色，共有六個十六進 位的數值，每一個值都可以是 0 至 F 的值，數值愈大及代表該顏色的強度愈強。 因此，#FF0000就表示紅色，#00FF00就表示綠色，#0000FF就是藍色了。 v常見的色彩及其色碼數值如下表所示：顏色色碼值值顏色色碼值值黑色#000000白色#FFFFFF棕色#A52A2A灰色#808080橘色#FFA500紫色#800080 銀色#C0C0C0金色#FFD700黃色#FFFF00海軍藍#000080青綠色#00FFFF天藍色#F0FFFFv 您也可以善用以下常見的色彩單字名稱：顏色單字顏色單字紅色Red黃色Y