12.2超文本标示语言.ppt

12.1 標示語言 標示語言 描述網頁內元素的特性 指示瀏覽器如何顯示該網頁 標示語言的例子 12.1 標示語言 標示語言 一種跨平台的語言 只要網頁瀏覽器支援標示語言，網頁便可正常地展示出來 不需依賴電腦的操作系統 12.1 標示語言 標示語言 一種跨平台的語言 只要網頁瀏覽器支援標示語言，網頁便可正常地展示出來 不需依賴電腦的操作系統 12.2 超文本標示語言（HTML）的介紹 超文本標示語言（HTML）標記 超文本標示語言（HTML）含有一套稱為標記的特殊格式符號 標記指示瀏覽器如何顯示網頁內容 大部分標記是成對地使用 指示所設效果的開始和結束位置 12.2 超文本標示語言（HTML）的介紹 超文本標示語言（HTML）標記 例子 12.2 超文本標示語言（HTML）的介紹 超文本標示語言（HTML）標記 常見的 HTML 標記 12.2超文本標示語言（HTML）的介紹 超文本標示語言（HTML）標記 常見的 HTML 標記 12.2超文本標示語言（HTML）的介紹 超文本標示語言（HTML）標記 常見的 HTML 標記 12.2超文本標示語言（HTML）的介紹 超文本標示語言（HTML）文件結構 HTML 檔案 是一個含有 HTML標記的純文字檔 必須以 htm 或 html作為擴展名 文件結構 HTML 文件主要分為 :起始部分和主體部分 起始部分包括文件的標題、標記和用來指定文件特性的資訊 主體部分亦包含了文字信息和標記 12.2 超文本標示語言（HTML）的介紹 超文本標示語言（HTML）文件結構 文件結構 12.2 超文本標示語言（HTML）的介紹 超文本標示語言（HTML）文件結構 文件結構 12.3 製作簡單的網頁 以記事本來編寫網頁 第一步 為網頁製作草圖 展明網頁的內容及其顯示方法 第二步 識別內容特性 以記事本編寫相應的 HTML 的標記 第三步 儲存檔案以 htm 或 html 作為擴展名 12.3 製作簡單的網頁 以記事本來編寫網頁 12.3 製作簡單的網頁 Macromedia Dreamweaver - HTML 編輯器 Macromedia Dreamweaver 是一個提供網站、網頁設計和管理的專業 HTML編輯器 Dreamweaver 具有整合開發環境 (IDE)，包含了編碼器和圖形用戶界面編輯器 用戶友好的工具 12.3 製作簡單的網頁 Macromedia Dreamweaver - HTML 編輯器 三種不同的檢視模式 12.3 製作簡單的網頁 Macromedia Dreamweaver - HTML 編輯器 Dreamweaver含有許多具有獨特功能的面板 12.3 製作簡單的網頁 Macromedia Dreamweaver - HTML 編輯器 Dreamweaver含有許多具有獨特功能的面板 12.4 加入多媒體元素 加入多媒體元素 網頁的多媒體元素包括文本、圖像、動畫、音頻和視像 12.4 加入多媒體元素 對HTML檔案 大小的影響 HTML檔案只包含標記 指示網頁瀏覽器如何去顯示多媒體檔案 不包含多媒體檔案 不會因加入多媒體元素而令其檔案大幅度增大 12.4 加入多媒體元素 對HTML檔案 大小的影響 HTML檔案只包含標記 指示網頁瀏覽器如何去顯示多媒體檔案 不包含多媒體檔案 不會因加入多媒體元素而令其檔案大幅度增大 12.5 加入超連結 超連結 允許我們從一個網頁跳到其他網頁 因此我們可以在網站進行「漫遊」 兩種常見的網頁連結 12.5 加入超連結 不同種類的超連結 超連結可以附在文本、圖像、音頻或視像等多媒體元素上 超連結可以連接 同一網頁內的另一錨點 同一網站內的另一網頁 萬維網上的另一個網站 文件、圖像或多媒體檔案 電郵地址 12.5 加入超連結 不同種類的超連結 12.5 加入超連結 不同種類的超連結 HTML DHTML MathML XML XHTML BThis is bold/B BR This is not bold 開始標記 粗體文字 結束標記 在網頁瀏覽器顯示 畫底線文字 /U U 斜體文字 /I I 粗體文字 /B B 文字外觀標記 標示文件的標題 標示 HTML 文件的主體部分 標示 HTML 文件的起始部分 標示文件的開始和結尾 說明 /TITLE TITLE /BODY BODY /HEAD HEAD /HTML HTML HTML 架構敘述 結束標記 開始標記 類型 建立新段落 /P P 段落格式標記 設定分行