HTML字体字型颜色功能.PDF

1 HTML 字體/ 字型/顏 色功能 本單元大綱 0 單元目標 1 基本概論 2 本單元範例簡介 3 單元操作練習 4 HTML 標記列表 5 單元習題(選擇題) 6 專題作業 7 附錄 0 單元目標 隨著全球資訊網(World Wide Web ，WWW) 的普及 ，網頁成為通過 網際網路存取資訊的通用文件型態。HTML (HyperText Markup Language) 是一種用於建立網頁的標準標記語言 ，為構建網站的基礎， 允許嵌入圖像與物件且可以用於建立互動式表單。 本單元的教學目標包括以下三項： 1. 介紹HTML 的基本概念； 2. 介紹HTML 字體/ 字型/顏色功能等相關標記； 3. 藉由範例解說與實例操作來瞭解HTML 標記與屬性設定的細節。 1 基本概論 HTML 是超文件標示語言(HyperText Markup Language) 的縮寫，用 於在瀏覽器中顯示一份文件的內容。HTML 本質上並不是程式設計， 是預先定義好的標示(Markup) ，用來組織及強調一般性的文字。HTML 是一種基礎技術，與 CSS、JavaScript 一起被使用於網站設計 ，以呈現 炫目的網頁及執行網頁應用程式 ，HTML 允許嵌入圖像與物件，並且 可以用於建立互動式表單，可用於結構化資訊—例如標題、段落和列 表等，也可以用來描述文件的外觀和語意。 HTML 由許多標記（tags ）所構成，每個標記對瀏覽器下一個特定 的指令，這些指令會告訴瀏覽器如何顯示文件的內容。編輯 HTML 只 要有最基本的文字編輯器即可，例如 Windows 作業系統中內建的 『記 事本』軟體。HTML 文件的副檔名必須設定為 .htm 或是 .html ，例如 ： index.htm 是一個合法的HTML 檔名。 一個簡單的HTML 文件如圖 1.1 所示，這個文件用瀏覽器檢視的畫 面如圖 1.2 所示： 1.X XXXX 3 圖1.1 ：一個簡單的HTML 文件 圖1.2 ：瀏覽器檢視HTML 文件 HTML 的頁面結構如圖 1.3 所示： 圖1.3 ：HTML 頁面結構 2 本單元範例簡介 本範例介紹如何在網頁上條列個人學歷、經歷以及連絡方式。 步驟 1: 開啓文字編輯器軟體，如記事本。下圖所示為開啓 Notepad++ 的畫面。 1.X XXXX 5 步驟2 ：在文字編輯區中輸入HTML 的主標記，如下圖所示： 步驟 3 ：在head/head之間加入 title 標記，內容為我的學、經歷(可 自行替換) ，如下圖所示： 步驟4 ：在body/body 之間列舉各人學、經歷項目(可自行替換) ，如 下圖所示： 步驟 5 ：在檔案(F) 功能列表中點按儲存檔案(S) ，輸入檔名 example 1.htm ，存放位置可任意指定(如桌面) ，下圖為完成狀態： 1.X XXXX 7 步驟6: 用瀏