电子计算机导论.pptVIP

電子計算機導論 吳逸賢、吳目誠 編著 第24章　 設計HTML網頁 目錄 24-1　HTML基礎 24-2　製作我的第一個網頁 24-3　用圖形與色彩美化網頁 24-4　超連結與表格 24-1　HTML基礎 認識HTML檔案 建立HTML檔案 認識HTML檔案： HTML中的指令都會以符號標記起來，因此有人稱之為標籤命令（Tag），而且大多有一個相對的結尾指令。 看看下面這個指令： font color=red這段字是紅色/font 正確的HTML檔案結構如下： html head 　　 開頭段 ?行數多寡不限 /head /body 主體段 ?行數多寡不限 /body /html 認識HTML檔案的重要事項： 建立HTML檔案： 編寫HTML檔案時，只要利用Windows內建的記事本就可以進行了，但要觀看實際網頁畫面時，則要另外開啟一個瀏覽器視窗。 以下就是建立與編修HTML檔案的操作示範： 24-2　製作我的第一個網頁 設定網頁標題 讓文字換行顯示 建立一個段落 設定段落文字對齊方式 製作標題文字 為網頁背景配色 設定網頁標題： 指令 TITLE 用法 title網頁標題/title 說明 指定出現在瀏覽器視窗上的標題文字 看看下面這一段HTML內容： html head title 　慧語名言 /title /head /html 完成圖： 設定網頁標題的注意事項： 讓文字換行顯示： 指令 BR 用法 一行文字br 說明 從br指令所在位置開始，將文字換行顯　 　　　示 看看下面這一段HTML內容： html head title慧語名言/title /head body 三人行，必有我師焉，br擇其善者而從之，其不善者而改之。~論語~br /body /html 完成圖： 建立一個段落： 指令 P 用法 p段落文字/p 說明 將一段文字標記為一個段落，並加大段 　　　落間距 看看下面這一段HTML內容： html head title慧語名言/title /head body 三人行，必有我師焉，br擇其善者而從之，其不善者而改之。~論語~br p人隨情欲求華名，譬如燒香，眾人聞其香，然香以薰自燒，br愚者貪流俗之名譽，不守道真，華名危己之禍，其悔在後時。~四十二章經~/p /body /html 完成圖： 設定段落文字對齊方式： 屬性 ALIGN 用法 p align=對齊方式 說明 ALIGN屬性配合P指令使用，可指定段 　　　落文字的對齊方式 看看下面這一段HTML內容： html head title慧語名言/title /head body p align=center有罪而知非，br 　有過而改善，br 　罪將消滅。br 　而後必得道，br 　~四十二章經~/p /body /html 完成圖： 製作標題文字： 指令 H 用法 h1標題文字/h1 說明 H指令需配合1到6的數字，可產生六種 　　 不同樣式的標題文字 看看下面這一段HTML內容： html head title慧語名言/title /head body h2慧語名言/h2 可以量深淺的愛是貧乏的。魔鬼也會引證聖經來替自已的居心辯護。br 從敵人嘴裏發出的讚美，才是真正的光榮。br h4~莎士比亞~/h4 /body /html 完成圖： 製作標題文字的注意事項： 為網頁背景配色： 屬性 BGCOLOR 用法 body bgcolor=”顏色編號” 說明 BGCOLOR是BODY指令的屬性，會將 　　　指定的顏色當做網頁背景色 看看下面這一段HTML內容： html head title慧語名言/title /head body bgcolor=#adff2f 　性格的培育是教育的主要目的，br 　雖然它不能算是唯一的目的。br ~愛迪生~br 　/body /html 完成圖： 為網頁背景配色的重要事項： 24-3　用圖形與色彩美化網頁 在網頁中插入圖片 設定文字字型 改變文字色彩 設定字型大小 在網頁中插入圖片： 指令 IMG SRC 用法 img src=”圖片檔案路徑及名稱” 說明 在指令所在位置插入指定的圖片 看看下面這一段HTML內容： html head title腦筋急轉彎/title /head body bgcolor=#ffb6c1 　風光明媚br 　（猜一台灣地名）P 　謎底--景美brP img src=24_03_01.gifbr /body /html 完成圖： 在網頁中插入圖片的注意事項： 設定文字字型： 指令 FONT FACE 用法 font face=”字型名稱” 說明 以face屬性指定的字型顯示網頁文字 看看下面這一段HTML內容： html head