《html简介文字的变化超连结的使用高雄大学》由会员分享，可在线阅读，更多相关《html简介文字的变化超连结的使用高雄大学（23页珍藏版）》请在金锄头文库上搜索。
1、HTML簡介、文字的變化、超連結的使用主講：朱漢琳課程綱要一、HTML的基礎概念什麼是HTML？HTML文件的根本結構。編寫HTML文件的工具。二、常用的HTML標籤介紹HTML頭部HEAD標籤文字格式設定超連結什麼是HTML？HTML 代表超文字標記語言(Hyper Text Markup Language)。HTML的標準是由國際的組織 W3CThe World Wide Web Consortium發所佈，最新的版本為 4.01。由許多標籤tag所構成的元素element組合而成。是一種純文字檔案，可以使用各種文字編輯器來進行編輯。 副檔名為.htm或.html。什麼是HTML？透過 H
2、TTP ( HyperText Transfer Protocol) 網路通訊協定，便能夠在世界各地透過 WWW (World Wide Web) 的架構做跨平台的交流。以 HTML 格式所儲存的文件檔案，經由瀏覽器如 Internet Explorer或 Netscape Navigator顯示出來。RequestResponseWWWServerUserHTML文件的根本結構一個簡單的網頁：CH01.htm原始檔如下：網頁的標題網頁的內容標籤Tag標籤是由一個符號所構成，例如、。標籤的結構可分為兩種：一種是成對的標籤，另一是單一標籤。成對標籤：由起始標籤openingtag及結束標籤clo
3、singtag組成。大局部的標籤都屬於此類。例如：代表字型的設定。(註：所謂的結束標籤，是在原標籤文字前加上一個/，例如：，通常表示該標籤特性的結束。)單一標籤：顧名思義，就是只有起始標籤。例如：代表水平線、代表斷行。標籤屬性：大局部的標籤都可以藉由標籤的屬性來更改呈現方式，標籤屬性的格式為屬性名稱屬性值，標籤屬性介於標籤名稱與之間，例如：字體大小-字體大小字體大小-字體大小標籤的使用：利用起始標籤與結束標籤所包夾起來的文句，即被賦予這個標籤所代表的意義。瀏覽器在解讀出這些標籤之後，便可根據這些標記的意義來對其所包夾的文句進行編排。例如，與是要告訴瀏覽器，其所包夾的文件內容是一份HTML文件；
4、由與所包夾的文句需以第二種標題形式字形較大、粗體等來顯示。其他注意事項：標籤及屬性都沒有大小寫的區分。屬性質的引號用雙引號或單引號均可。瀏覽器對HTML文件中的空白字元將有特殊的處理。如果使用一個以上的空白字元，第二個及以後的空白將被忽略，僅認可第一個空白字元。如果您希望保存更多的空白，有以下二個方式：使用全形的空白字元。以 來代表一個空白字元。需要兩個空白字元時就連續使用 標籤Tag特殊字元表示法由於在HTML中，、&、空白等符號會被用來當成標記使用，因此，當瀏覽器讀到這些符號時，會自動把它們當成標記而無法正確顯示出來。所以，假设您要在瀏覽器中顯示這些符號，必
5、需使用以下之表示法：“"& & &g;空白 例如要正確顯示，您就應該輸入 <table>。如想要查詢其他的特殊字元表示法，可參考此網頁：/books/html/text2.asp?title=2-6%20特殊文字。HTML文件的根本架構HTML文件由與所包夾，其中包括檔頭與主體兩局部：檔頭：由與所包夾的局部，其中最重要的是與所包夾的文件主題，這個主題會出現在瀏覽器的TitleBar。主體：由與所包夾的局部，所有的網頁內容包含文字、圖片、多媒體物件，甚或是其他的標籤都會放在這一對標籤之內。代表文件的開始用來提供文件整體資訊(文件的頭部)網頁的標題代表文件的
6、標題文件內容局部(文件的主體body區段)網頁的內容代表文件結束檔頭區主體區文字編輯器：任何平台上的任何文字編輯器都可使用，例如Windows裡的Notepad、Wordpad等，甚至可使用Word並以純文字模式儲存檔案亦可。使用這些文字編輯器來直接撰寫並儲存符合HTML格式的文件，比較能得到簡潔、洗鍊、單純的HTML文件。缺點是必須熟悉HTML格式的各種標記與其屬性。HTML設計軟體：市面上有許多HTML設計軟體，例如MicrosoftFrontPage、NetscapeComposer、或MacromediaDreamweaver等，這些軟體提供良好的圖形介面，讓使用者能以所見即所得WYS
7、IWYG,WhatYouSeeIsWhatYouGet的方式，很容易地設計、編排出所想要呈現的網頁，並且以HTML的格式來儲存檔案，功能也較為強大。但所產生的HTML檔案較為複雜，不易閱讀。編寫 HTML 文件的工具常用的HTML標籤介紹檔頭區標籤一、檔頭區的相關標籤：通常在標頭區中包含以下幾個標籤，這些標籤都是可有可無的。使用在標頭，用來定義所有連結網頁的原始路徑定義目前的文件與其它文件之間的關聯，經常用來匯入階層樣式定義檔案之用主要係用來描述文件的參考資訊，其內容並不會顯示在瀏覽器的畫面上在HTML文件中插入瀏覽器端 Script定義階層樣式表文件的標題 常用的HTML標籤介紹Body二、
8、主體區的相關標籤：1.：代表網頁文件主體，用來設定與整份文件相關的屬性，例如：畫面的顏色、各種文字的顏色等等。在標籤中，常用的屬性可以分成幾類：v背景類：1)background=圖檔檔名指定背景圖2)bgcolor=“色彩名稱或色碼(#rrggbb）”指定背景顏色v文字色彩類：1)text=色彩名稱或色碼（#rrggbb）指定一般文字顏色2)link=色彩名稱或色碼（#rrggbb）指定連結文字顏色3)alink=色彩名稱或色碼（#rrggbb）指定連結（連結中）顏色4)vlink=色彩名稱或色碼（#rrggbb）指定連結（連結後）顏色例如：常用的HTML標籤介紹註解2.：通常我們會在程式原
9、始碼中参加一些說明文字，作為程式碼的附註。使用兩符號，在此兩符號中間的文字就會被瀏覽器視為註解而不被執行或顯示。3.如：常用的HTML標籤介紹文字格式標籤之13.文字格式設定相關標籤：標籤標籤功能功能語法語法屬性屬性段落新的段落align=“left”（靠左）或“center”（置中）或“right”（靠右）跳行第一行第二行-提供六種層次的標題格式標題1標題2標題3標題4標題5標題6align=“left”（靠左）或“center”（置中）或“right”（靠右）標籤標籤功能功能語法語法屬性屬性設定文字格式文字SIZE=“字型大小”COLOR=“字型顏色”(#RRGGBB)FACE=“字型”將
10、所標記的文字字型字型加粗加粗字型加粗-將所標記的文字變成斜體斜體字-將所標記的文字加上底線加底線-將所標記的文字畫線刪除畫線刪除-將所標記的文字放大字體放大-常用的HTML標籤介紹文字格式標籤之2標籤標籤功能功能語法語法屬性屬性將所標記的文字縮小文字縮小-將所標記的文字變成上標文字上標-將所標記的文字變成下標文字下標-將所標記的文字以強調粗強調粗體體顯示強調粗體-將所標記的文字以強調斜體顯示強調斜體-常用的HTML標籤介紹文字格式標籤之3常用的HTML標籤介紹超連結之14.超連結：絕對路徑和相對路徑：簡單的說，相對路徑就是相對於現在目錄的路徑表示法，因此相對路徑所指到的檔案或目錄，會隨著現在目
11、錄的不同而改變；絕對路徑指的是一個絕對的位置，並不會隨著現在目錄的改變而改變。類別類別範例範例說明說明絕對路徑file:/E:/文件/Document.doc本機E槽上的Document.doc檔案http:/www.nuk.edu.tw/nuk/home-main-adm.htmhttp:/www.nuk.edu.tw此台Server根目錄下nuk目錄中的home-main-adm.htm檔案/nuk/home-main-adm.htm目前Server的WWW根目錄下的nuk目錄中的home-main-adm.htm檔案類別類別範例範例說明說明相對路徑（相對於目前文件的路徑）text.htm
12、l表同一層目錄下的text.html檔案./text.html表同一層目錄下的text.html檔案image/text.htmlimage子目錄下的text.html檔案./index.html表示上一層目錄下的index.html檔案./html40/cover.html表示上一層目錄下html40子目錄的index.html檔案註：通常我們用.代表現在目錄，而用.代表上一層目錄。常用的HTML標籤介紹超連結之2一般而言，除非有特殊需求，否則在HTML文件中，我們都盡量用相對路徑來表示網址。使用相對路徑的好處是：當我們將包含許多網頁的目錄轉移到另一個位置時，雖然絕對位置改變，但是在此目錄下
13、的網頁相對位置並沒有改變，因此我們並不需要大幅修改網頁內的網址。超連結除了可以連結到網頁以外，我們也可以連結到其他檔案，例如可以連結到數位音樂檔MP3或MIDI、聲音檔WAV、影像檔GIF或JPEG或PNG等，當連結的檔案被送到用戶端時，用戶端會根據檔案類型而呼叫不同的應用程式來播放或呈現。超連結標籤：功能：可連結到另一文件或同一文件中的書籤。語法：範例：連結到高雄大學首頁常用的HTML標籤介紹超連結之3常用的HTML標籤介紹超連結之4常用屬性解說：Href=URL：指定超連結所連結之文件的相對或絕對位置。HTTPURL：如假设檔名省略表示將讀取Server預設的檔名，通常為index.htm
14、l或default.htmlFTPURL：如假设filename省略表示將顯示整個目錄mailtoURL：如mailtotelnetURL：如telnet:/Name：指定書籤Bookmark名稱；連結除了可以跳到其他網頁之外，也可以在一份長的網頁之中上下跳動。例如：CH02.htm連結書籤.這是書籤所在位置Target：指定超連結文件開啟的框架。如高雄大學附錄一、HTML色彩表示法HTML文件中有許多屬性可以控制色彩，包含文件的底色、文字的顏色、表格或線條的顏色.等等。此時您可以直接使用色彩的英文單字名稱來表示，例如：yellow表示黃色、pink表示粉紅色。不過在大多數情況下，我們會使用#
15、rrggbb的格式來表示色彩值。他的原理如同調色盤一般，rr代表紅色，gg代表綠色，bb代表藍色，共有六個十六進位的數值，每一個值都可以是0至F的值，數值愈大及代表該顏色的強度愈強。因此，#FF0000就表示紅色，#00FF00就表示綠色，#0000FF就是藍色了。v常見的色彩及其色碼數值如下表所示：顏色顏色色碼值色碼值顏色顏色色碼值色碼值黑色#000000白色#FFFFFF棕色#A52A2A灰色#808080橘色#FFA500紫色#800080銀色#C0C0C0金色#FFD700黃色#FFFF00海軍藍#000080青綠色#00FFFF天藍色#F0FFFFv您也可以善用以下常見的色彩單字名稱：顏色顏色單字單字顏色顏色單字單字紅色Red黃色Yellow綠色Green藍色Blue靛色Teal紫色Purple黑色Black白色White銀色Silver灰色Gray相關網站W3CHTML4.01規格書：W3Schools：TaiwanCnet簡單好用的HTML標籤與屬性：:/taiwanet/builder/authoring/story/0,2000020511,20008502,00.htmwells的HTML線上教學網站：.htm
