第二章我的第一个网页.ppt

專業HTML網頁設計 陳錦輝 第二章　我的第一個網頁 2.1 HTML的基本架構 2.2 文件檔頭內的標籤 2.3 HTML文件的註解 2.4 深入HTML 4.01語法 2.5 XHTML 1.0語法的變革 2.6 網頁DIY 2.1　HTML的基本架構 HTML文件是由一群HTML標籤與標籤內容組合而成，其中某些HTML標籤也可以包含一些屬性。 一個最基本的HTML文件結構如下圖所示，所有的文件內容都包含在html控制標籤內，其下又分為文件檔頭區head與文件本體區body。 2.1.1　html與/html html與/html屬於成對的控制標籤，用來宣告該文件是一個HTML文件。 每一份HTML文件的第一個控制標籤就是html開始標籤，如此一來，瀏覽器在解讀文件的第一時間就可以得知該文件必須以HTML格式來加以解讀，直到遇見最後的/html結束標籤為止。 2.1.1　html與/html HTML的標籤可以分為成對標籤與獨立標籤(又稱空標籤)兩種。凡是成對標籤必定包含…開始標籤與/…結束標籤。 在開始標籤與結束標籤之間還可以包含其他的控制標籤或內容，而這些被成對標籤所包含的內容就是標籤的作用對象。 獨立標籤則是用來告訴瀏覽器應該立刻產生某一特殊反應。 2.1.2　head與/head head與/head是成對的控制標籤，head標籤的內容就是HTML文件的檔頭資料。 『檔頭資料』可能包含以下兩大類的資料： (1)用來描述該HTML文件的一些描述性資料。 (2)具有特殊功能的一些資料(例如：Java Script / VBScript程式)。 由於這些資料是當做宣告及描述HTML文件之用，因此這些檔頭資料並不會直接顯示在瀏覽器的顯示視窗中。 2.1.2　head與/head 在head中的檔頭資料，最常見的有下列三種標籤：(詳細語法將於2.2節中說明) (1)title：文件標題的宣告。 (2)meta：文件資料描述。 (3)script：程式碼的宣告。 2.1.3　body與/body body與/body也是成對的控制標籤，body標籤的內容就是HTML的文件本體。 文件本體的內容就是要顯示在瀏覽器主視窗的資料及相關控制標籤。 大多數的HTML標籤都是為了控制資料的顯示而設計的，因此，這些控制標籤都應該包含在body與/body之內。 2.2　文件檔頭內的標籤 文件檔頭內標籤的作用在於提示瀏覽器該HTML文件的相關描述與設定，這些標籤包含有title 、meta 、script等等，並且應包含在head與/head之間。 2.2.1　title與/title title的功能為宣告HTML文件的標題，該標題將會顯示在瀏覽器的標題區域(瀏覽器視窗的左上方)。 範例2-1： 內容 執行結果 2.2.2　meta meta標籤是一個獨立標籤(空標籤)，主要的功用是用來描述該HTML文件。 meta的功能項目繁多，例如定義關鍵字(以便使得搜尋引擎可以尋找到該網頁)、宣告網頁製作工具版本、網頁的編碼方式等等關於該份HTML文件的資訊都屬於meta標籤的功能。 meta標籤也可以用來做為動態鏈結網頁之用。 2.2.2　meta 功能一：動態鏈結網頁(更新網頁) 使用者一進入該網站首頁後，經過幾秒，自動鏈結到其他網頁。例如：由舊的首頁網址轉向到新的首頁網址。 某些網頁時常更新網頁內容，為了保證使用者看到的資料全部都是必威体育精装版的資料，可以透過meta標籤強制要求瀏覽器做網頁更新的動作。 範例2-2： 範例1： 內容 執行結果 範例2： 內容 執行結果 2.2.2　meta 功能二：宣告網頁編碼方式 如果希望網頁可以被全世界的瀏覽器正確地解讀，透過meta控制標籤所支援的宣告編碼功能加以獲得解決。 範例2-4： 範例1： 內容 執行結果 範例2： 內容 執行結果 2.2.2　meta 功能三：記錄檔頭資料 取出關鍵字與查詢字串比對，藉此尋得所需要的網頁，而這些資訊(例如關鍵字)就是定義在meta標籤中， 語法： 2.2.3　script與/script script、/script是成對標籤，其中所包含的內容是能夠由客戶端瀏覽器執行的Java Script及VB Script程式碼。 script的功能為宣告script程式碼，最好包含在head與/head之內，但也可以放置於HTML文件的任何位置。 範例2-5： 內容 執行結