1 / 31

第2章 HTML、XML 和 CSS 的基礎

第2章 HTML、XML 和 CSS 的基礎. 2-1 HTML 的基礎 2-2 HTML 標籤 2-3 XML 文件的基礎 2-4 Cascading Style Sheets 2-5 局部套用的 CSS 2-6 內建網頁的 CSS 2-7 使用 CSS 進行絕對位置的編排. 2-1 HTML 的基礎. 2-1-1 第一份 HTML 文件 2-1-2 HTML 文件的基本架構 2-1-3 Meta 標籤的使用. 2-1-1 第一份 HTML 文件-1.

michelle-avery
Download Presentation

第2章 HTML、XML 和 CSS 的基礎

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第2章 HTML、XML和CSS的基礎 • 2-1 HTML的基礎 • 2-2 HTML標籤 • 2-3 XML文件的基礎 • 2-4 Cascading Style Sheets • 2-5 局部套用的CSS • 2-6 內建網頁的CSS • 2-7 使用CSS進行絕對位置的編排

  2. 2-1 HTML的基礎 • 2-1-1 第一份HTML文件 • 2-1-2 HTML文件的基本架構 • 2-1-3 Meta標籤的使用

  3. 2-1-1 第一份HTML文件-1 • 「HTML」（HyperText Markup Language）標記語言屬於一種文件編排語言，其目的是編排文件的內容，以便顯示漂亮的文件內容。 • Tim Berners-Lee在1991年建立HTML，在1993年HTML1.0版由Berners-Lee和Connolly完成，HTML只是使用SGML的慣用語法，也就是標籤和屬性，如下所示： • 「標籤」（Tag）：HTML標籤是一個字串符號，主要是標示需要套用編排格式的文字內容，在標籤內的文字是使用預設格式編排。 • 「屬性」（Attribute）：每一個標籤可以擁有一些屬性來定義文字內容的細部編排。

  4. 2-1-1 第一份HTML文件-2 01: <html> 02: <head> 03: <title>Ch2-1-1.htm</title> 04: </head> 05: <body> 06: <b>From: </b>hueyan@ms2.hinet.net<br> 07: <b>To: </b>hueyan@tpts1.seed.net.tw<br> 08: <b>Subject: </b>測試郵件功能<br> 09: <p>這是第一封郵件</p> 10: </body> 11: </html>

  5. 2-1-2 HTML文件的基本架構 • HTML文件標籤的基本架構，如下所示： <html> 標示著一份HTML網頁 <head> HTML網頁的基本定義 </head> <body> HTML網頁的內容 </body> </html> • HTML文件是包含於<html>和</html>標籤間的內容和定義，其中<head>和</head>標籤包圍的區塊定義HTML網頁的本身，網頁內容是定義在<body>和</body>標籤間。

  6. 2-1-3 Meta標籤的使用 • <meta>標籤是位在<head>區塊，可以用來定義HTML標籤所沒有定義的相關資訊，常用的應用如下所示： • 設定使用的編輯工具 <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> • 設定網頁使用的語系 <meta http-equiv="Content-Type" content="text/html; charset=big5"> • 自動更新網頁內容 <meta http-equiv="refresh" content="10,url=UsersList.aspx">

  7. 2-2 HTML標籤 • 2-2-1 HTML的標頭標籤 • 2-2-2 文字格式標籤 • 2-2-3 清單項目標籤 • 2-2-4 圖片和超連結標籤 • 2-2-5 網頁表格標籤 • 2-2-6 網頁表單標籤 • 2-2-7 框架頁標籤

  8. 2-2-1 HTML的標頭標籤

  9. 2-2-2 文字格式標籤-1

  10. 2-2-2 文字格式標籤-2

  11. 2-2-2 文字格式標籤-3

  12. 2-2-3 清單項目標籤

  13. 2-2-4 圖片和超連結標籤

  14. 2-2-5 網頁表格標籤

  15. 2-2-6 網頁表單標籤

  16. 2-2-7 框架頁標籤

  17. 2-3 XML文件的基礎 • 2-3-1 什麼是XML • 2-3-2 XML文件的組成

  18. 2-3-1 什麼是XML-1 • 「XML」（eXtensible Markup Language）可擴展標示語言屬於一種標籤語言，XML 1.0版規格在1998年2月正式推出，XML的寫法十分類似HTML，繼承SGML自定標籤的優點，並且刪除一些SGML複雜的部分，在功能上能夠補足HTML標籤的不足，而擁有更多的擴充性。 • XML並不是用來編排內容，而是用來描述資料，它並沒有如同HTML一般的預設標籤，使用者需要自己定義描述資料所需的各種標籤。

  19. 2-3-1 什麼是XML-2 01: <?xml version="1.0" encoding="Big5"?> 02: <!--網頁製作徹底研究系列--> 03: <booklist> 04: <book> 05: <code>F8915</code> 06: <title>ASP網頁製作徹底研究</title> 07: <authorlist> 08: <author>陳會安</author> 09: </authorlist> 10: <price>580</price> 11: </book> 12: <book> 13: <code>F8916</code> 14: <title>ASP與IIS 4/5網站架設徹底研究</title> 15: <authorlist> 16: <author>陳會安</author> 17: </authorlist> 18: <price>550</price> 19: </book> 20: </booklist>

  20. 2-3-2 XML文件的組成 • XML文件基本上是由標籤和內容組成，一共七種組成的元素可以出現在XML文件中。 • 元素（Element） • 屬性（Attribute） • 實體參考（Entity Reference） • 註解（Comment） • CDATA區塊（CDATA Section）與PCDATA • PI（Processing Instructions） • DTD（Document Type Declarations）

  21. 2-4 Cascading Style Sheets • 2-4-1 CSS的基礎 • 2-4-2 CSS的基本語法 • 2-4-3 常用的CSS樣式屬性

  22. 2-4-1 CSS的基礎-1 • 「Cascading Style Sheets」簡稱CSS，中文稱為層級式樣式表，CSS層級式樣式表是一種樣式語言，能夠定義HTML標籤的顯示效果。 • 瀏覽程式在解譯HTML標籤時是使用預設顯示樣式，例如：<p>標籤是段落、<ul>為清單項目，CSS能夠重新定義標籤的顯示樣式。

  23. 2-4-1 CSS的基礎-2 • 如果想在網頁上使用CSS編排網頁內容，一共有三種方式，如下所示： • 局部套用的CSS（In-Line Style Sheets）。 • 內建網頁的CSS（Embedded Style Sheet）。 • 外部連結的CSS（External Style Sheet）。

  24. 2-4-2 CSS的基本語法 • CSS能夠針對指定標籤定義全新的樣式，其基本語法如下所示： Selector {property1: value1; property2: value2 } • 選擇器Selector選擇樣式套用的標籤，大括號括起的樣式組，就是重新定義的標籤樣式，例如：前面的<p>標籤，如下所示： p { font-size: 10pt; 　 color: red; }

  25. 2-4-3 常用的CSS樣式屬性 • 在選擇好定義的標籤後，可以定義CSS，CSS常用的樣式屬性分類成幾大類。 • 字型的樣式屬性 • 文字內容顯示的字型效果屬性 • 色彩和背景樣式屬性 • 標籤內容的顯示和背景色彩屬性 • 文字樣式屬性 • 文字內容的顯示屬性包含對齊、字距的屬性 • 區塊樣式屬性 • 文字內容顯示的區塊，這也包含外框顯示的屬性 • 絕對位置的樣式屬性 • 絕對位置編排，也就是可以顯示在指定的位置

  26. 2-5 局部套用的CSS • 局部套用的CSS是直接在標籤使用style屬性定義樣式，常用的HTML標籤有<div>、<a>、<span>和<p>。 <div style="color: green; font-size: 24pt; margin-left: 5px"> <div style="position:absolute; top:40px; width:130px; height:130px">

  27. 2-6 內建網頁的CSS • 2-6-1 重設HTML標籤樣式 • 2-6-2 重新設定超連結標籤的樣式 • 2-6-3 自訂樣式名稱

  28. 2-6-1 重設HTML標籤樣式 • CSS能夠重新定義HTML標籤顯示的編排樣式，內建網頁的CSS是將樣式定義在<body>標籤前的<style>標籤，如下所示： <style type="text/css"> body { font-size: 9pt; font-family: 標楷體; line-height: 120%; } span {text-transform: uppercase} p { font-size: 12pt; color: yellow; background-color: blue; line-height: 20px; } </style>

  29. 2-6-2 重新設定超連結標籤的樣式 • 網頁超連結的顯示狀態分為多種情況，不同狀態的超連結樣式需要分別定義，如下所示： <style type="text/css"> a:link {font-size: 9pt; text-decoration: none} a:active {font-size: 9pt; text-decoration: none} a:visited {font-size: 9pt; text-decoration: none} a:hover {font-size: 15pt; text-decoration: underline} </style>

  30. 2-6-3 自訂樣式名稱 • CSS允許使用者在網頁定義個人風格的樣式名稱，樣式名稱是一個Class，以「.」句點開始的名稱定義在<style>標籤，如下所示： .littlered {color: red; font-size: 9pt} .littlegreen {color: green; font-size: 9pt} • HTML標籤使用class屬性指定樣式名稱，在標籤套用定義的樣式，如下所示： <font class="littlered">Style</font>

  31. 2-7 使用CSS進行絕對位置的編排 • CSS擁有絕對位置的定位能力，能夠讓您隨心所欲的編排網頁元素，如下所示： .titlered { position: absolute; top: 100pt; left: 50pt; visibility: visible; z-index: 1; background-color: blue; color: yellow; font-size: 19pt; } • 樣式使用絕對位置顯示元素，即absolute，其位置是離上方邊界100像素，左邊50像素的位置。

More Related