Basic of A WEB Page授課教師: 李彥賢1網頁的組成n網頁基本上係利用HTML(HyperText Markup Language)標籤語言(Tag)來編寫，其對應的原 始檔案，通稱為HTML文件。nHTML被發展的目的n提供內容提供者簡單且快速的編輯方式來呈現資料n制定共通的文件格式定義，讓不同工作平台的使用 者能夠存取同一份文件n以較快的方式讓文字資料在使用者面前展現nHTML文件的基本要素為文字和連結2網頁的組成 (續)nHTML文件原則上可分成三個部分n版本宣告：宣告該文件所使用的HTML版本，此 一部份省略時，瀏覽器會以相容模式來解譯文件 內容n文件資訊宣告：宣告文件標題、語系與編碼方式 、文件資訊，例如作者與關鍵字、網頁畫面顯示 前的動作、及其他相關定義，例如JavaScript程 式碼n文件資料：所有要顯示在瀏覽器中的內容，包括 資料與格式3網頁的組成 (續)4文件資訊宣告標籤n文件資訊宣告: nhttp-equiv屬性: 回應給瀏覽器處理的資料項(變數)名稱n需搭配屬性content來傳遞資料項(變數)的內容n常見的項目有refresh, Content-Type, Content-Script-Type, Content-Style-Type等。對應的content值有“10; url=xxx”, “text/html; charset=xxx”, “text/javascript”, “text/css”等nname屬性: 自行定義的資料項名稱n編寫者自行定義用來記錄某些自行使用或網路搜尋共用的資料 項名稱。例如資料項keywords, 其content內容可以提供網路搜 尋引擎該文件的關鍵字ncontent屬性: 資料(變數)項的內容5文件資訊宣告標籤 (續)n描述語言宣告標籤: n宣告在標籤內為描述語言的程式內容, 例如 javascript的程式碼n描述語言宣告標籤: n宣告在標籤內為樣板語言定義的內容, 例如CSS的定 義碼n文件中的註解標籤n就是註解, 不會被瀏覽器解譯6文件資訊宣告標籤 (續)n基準URL標籤: n只適用於IE瀏覽器。可設定整份文件中所有超連結的基 準網址以及點選超連結後的視窗反應動作nhref屬性: 設定該份文件所有超連結的基準URL。例如某 文件設定基準URL為http:/www.ncyu.edu.tw,若文件 中有一超連結連結檔案為abc.html, 則當按下此連結時將 會連結到http:/www.ncyu.edu.tw/abc.html, 即基準 URL會自動被瀏覽器附加到連結檔案的名稱之前ntarget屬性: 指定顯示連結目標的框架或視窗n除了指定框架的名稱外, target屬性有四個特別值分述如下n_top: 解除框架, 將連結目標顯示於整個視窗n_parent: 將連結目標顯示在連結按鈕所處框架的母框架中n_self: 將連結目標顯示在連結按鈕所處的框架中n_blank: 將連結目標顯示在新開啟的視窗7文件內容格式設定標籤n內容格式設定標籤: n同時為文件資料區域宣告標籤ntext屬性: 整份文件的文字顏色nlink屬性: 未進行連結過的超連結的文字顏色nvlink屬性:已進行連結過的超連結的文字顏色nalink屬性:目前正被選取的超連結的文字顏色nbgcolor屬性: 網頁背景顏色n以上顏色的設定值可以是英文單字, 例如red(紅), green(綠 ), blue(藍)n也可是RGS值, 例如 #ff0000(紅), #00ff00(綠), #(0000ff)藍n可利用小畫家取得RGS值nbackground屬性: 網頁背景圖的URL 8文字格式標籤 n標題文字標籤: n從到, 字型從大到小n字型標籤: nface屬性: 字型, 例如標楷體等nsize屬性: 字體大小 n絕對大小: 字體從小到大的值為1到7, n相對大小: 內定值為3所以相對大小從-2到+4ncolor屬性: 文字顏色9文字格式標籤 (續)n粗體字: n斜體字: n底線: n上標文字: n下標文字: n強調粗體: n強調斜體: n打字機字體: n刪除線: 10文字格式標籤 (續)n跑馬燈文字標籤: n只適用於IE瀏覽器nbehavior屬性: 內定值設定讓文字一邊進一邊出nslide: 文字遇到邊界就停止nalternate: 文字在螢幕上來回跑ndirection屬性: 文字移動的方向, 內定值為由右至左 (left)nup, down, left, right: 上下左右nheight屬性: 跑馬燈的寬度, 可設定為螢幕百分比或是像素值nwidth屬性: 跑馬燈的高度, 可設定為螢幕百分比或是像素值nloop屬性: 跑馬燈的次數, 需設定為大於0的值nscrollamount屬性: 跑馬燈文字每一次移動的距離(像素)nscrolldelay屬性: 跑馬燈文字每一次移動的間隔時間(毫秒)nbgcolor屬性: 跑馬燈的背景顏色11文字格式標籤 (續)n常用特殊文字符號表符號十進位 Unicode符號十進位Unicode“ “ ”12文字排版標籤n標題文字標籤: n從到, 字型從大到小nalign屬性: 標題文字對齊方式nleft, right, center, justify: 置左, 置右, 置中, 切齊 段落標籤: nalign屬性: 段落內文字對齊方式n換行標籤: n置中標籤: 13文字排版標籤 (續)n分隔線標籤: nalign屬性: 分隔線對齊方式nsize屬性: 分隔線高度nwidth屬性: 分隔線寬度n屬性Size and width 的值可為螢幕百分比或像素ncolor屬性: 分隔線顏色nnoshade屬性: 顯示實心的分隔線n使用方式為 14文字排版標籤 (續) n顯示符號資料項標籤: n宣告式標籤, 必須搭配標籤方能顯示資料項符號ntype屬性: 使用的資料項符號型態ndisc, circle, square: 實心圓點, 空心圓點, 實心方塊n資料項有階層性時, 不同層級的符號型態會自動變換n顯示編號資料項標籤: n宣告式標籤, 必須搭配標籤方能顯示資料項編號nstart屬性: 起始編號ntype屬性: 使用的資料項編號型態n1, a, A, i, I: 數字, 小寫英文字母, 大寫英文字母, 小寫羅馬數字, 大寫羅馬數字n資料項有階層性時, 不同層級的編號型態不會自動變換15文字排版標籤 (續) n資料項標籤: n資料項前面有此標籤時, 方能顯示項目符號或編號 ntype屬性: 設定此筆資料使用的項目符號, 需依據搭 配或給於適當的值nvalue屬性: 由此筆資料開始用所設定的值從新編號, 僅搭配使用時可作用16文字排版標籤 (續)n資料說明清單標籤: n宣告式標籤, 必須搭配及標籤方能使資料 項符號n使用資料說明清單係利用縮排來區分資料層次n與或的最大差別在於資料項目(標題)前方 無項目符號或編號n資料標題標籤: n資料說明標籤: n資料標題說明, 會自動將函括其中說明文字縮排n可搭配使用17標題要放在文件文字碼的宣告之後HTML文件範例18我是範例內容的標題, 字型大小為第二級且會自動換行, 不過我只是一 種格式, 用不用我都沒關係我的上面是一條分隔線我的字型和顏色是由第二格font標籤決定的, 我的字型可以變粗, 也可以斜斜的, 也可以加底線當然也可以讓三種方式一起出現。除此之外, 我還有其他的變化HTML文件範例 (續)19我可以變上標變下標加上刪除線 我不知道強調粗體跟強調斜體跟原 本的粗體和斜體有什麼麼不一樣。此外我還會變成打字 機字型或是把我的 Font type換掉。加 了ul與dd的混搭 項目一這邊擺放項目一的說明 項目二這邊擺放項目二的說明 項目三這邊擺放項目三的說明22超連結標籤n除文字資料的呈現之外, 網頁最重要的就是具 備超連結的功能, 也因為超連結的設計使得大 多數情況下得以:n降低傳輸資料量 (不需要不傳), n快速呈現資料(先到的文字資料可先獲得解譯)n讓使用者穿梭於網路之中(跳躍至不同網頁)n超連結可連結到n網頁(站內或站外)n網頁內的某個錨點nHTML以外的檔案nEmail 23超連結標籤 (續)n超連結標籤: nhref屬性: 設定所要連結的網址, (HTML)檔案名稱, 網頁中的錨點, Email等等nname屬性: 設定錨點, 可單獨使用不需搭配hrefntarget屬性: 參考投影片7ntitle屬性: 為超連結加上說明nstyle屬性: 利用屬性值cursor來改變游標移到超連結 時的游標圖示24超連結標籤 (續)n超連結標籤中屬性Style的所有游標相關屬性值屬性值游標樣式屬性值游標樣式cursor: auto自動改變樣式cursor: default標準選擇 cursor: help選擇說明cursor: wait忙碌中 cursor : crosshair選擇精確度cursor: text選擇文字cursor : hand選擇連線cursor : pointer選擇指示 cursor : move移動cursor : n-resize箭頭朝上方 cursor : s-resize箭頭朝下方cursor : w-resize箭頭朝左方 cursor : nw-resize箭頭朝左上方cursor : sw-resize箭頭朝左下方 cursor : e-resize箭頭朝右方cursor : ne-resize箭頭朝右上方 cursor : se-resize箭頭朝右下方cursor : url(游標連 結位置.cur)自訂滑鼠指標 連結25圖片連結標籤n圖片連結標籤: n用來連結所要顯示的圖片nscr屬性: 圖片檔案來源目錄或網址nwidth屬性: 圖片顯示時的寬度nheight屬性:圖片顯示時的高度nborder屬性: 圖片顯示時的邊框厚度nalt屬性: 圖片顯示失敗時顯示的說明文字ntitle屬性: 圖片本身的說明文字nalt全名為alternative, 是指圖片不存在時的替代顯示, 而 非圖片的說明內容, 因此若alt與title同時被設定, 將滑鼠移 致圖片上方停留時, 瀏覽器還是顯示title的內容做為圖片 說明26圖片連結標籤 (續)n圖片連結標籤: (續)nhspace屬性: 設定圖片與左右兩邊文字之間的距離nvspace屬性: 設定圖片與上下行文字之間的距離nalign屬性: 設定圖片與文字對齊方式ntop: 同段文字對齊圖片上方nmiddle: 同段文字對齊圖片中間nbottom: 同段文字對齊圖片底部nleft: 圖片靠文字左邊nright: 圖片靠文字右邊ntexttop: 同段文字(含間距)對齊圖片上方nabsbottom:同段文字(含間距)對齊圖片下方27