1 / 21

HTML

HTML. HTML 文件結構 Head 用途、要放的東西 Body 用途、要放的東西 Docuemt Type XHTML, HTML 、文件嚴謹性 網頁語系 UTF-8 元素標籤的 ID 與 C lass 用法差異 HTML 表單設計 Form action type, 上傳檔案 與 Name 樣式設定方式 樣式表 relsheet 標籤內樣式 style 常見的錯誤用法. 網頁的基本要素. HTML CSS. HTML. HTML, Hypertext Markup Language 超文件標記語言

mannix-fitzpatrick
Download Presentation

HTML

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. HTML

  2. HTML 文件結構 • Head 用途、要放的東西 • Body 用途、要放的東西 • Docuemt Type • XHTML, HTML、文件嚴謹性 • 網頁語系 • UTF-8 • 元素標籤的 ID 與 Class • 用法差異 • HTML 表單設計 • Form action type, 上傳檔案與 Name • 樣式設定方式 • 樣式表 relsheet • 標籤內樣式 style • 常見的錯誤用法

  3. 網頁的基本要素 • HTML • CSS

  4. HTML • HTML,Hypertext Markup Language • 超文件標記語言 • 用來描述網頁內容的一種語言 • 描述的內容包含 • 文字、表格、項目、圖片、影音 • 由 W3C所制定的國際標準 • 目前最新的規格為 HTML 5 • 仍為 W3C 草案，故目前不做為本次訓練的撰寫網頁規格 • 本次訓練以 HTML 4.01 版本為撰寫網頁的標準規格

  5. CSS • CSS,Cascading Style Sheets • 層疊樣式表／串樣式列表 • 用來定義 HTML 及 XML 的呈現樣式 • 包含的內容 • 文字、表格及圖片的字型、字體、大小、邊框、排版 等與樣式相關的設定 • HTML 4.01 之後改由 CSS 來設定樣式 • 讓HTML能單純只表達文件的內容 • 使樣式的修改更有彈性 • 目前最新的規格為 CSS 3 • 瀏覽器未全部支援( IE 8 不支援) • 本次訓練規格採用 CSS 2.1

  6. 參考資料 • HTML4.01-http://www.w3.org/TR/html401/ • CSS2.1-http://www.w3.org/TR/CSS21/

  7. 撰寫 HTML 所需的工具 • 計事本 • Microsoft Frontpage • Adobe Dreamweaver • Notepad++ • Netbean

  8. 開始撰寫 HTML • HTML 的檔案類型為 .htm或 .html • 首頁的檔名必須為 index.htm 或 index.html

  9. HTML 的基本語法 • 元素標籤 • <標籤名稱>內容<標籤名稱/> • <標籤名稱屬性=“值">內容</標籤名稱> • 標籤 • 用來表達 HTML 中各中功能的區塊 • 名稱請用小寫英文字母。 • 例如 <p>This is a paragraph</p> • 內容 • 顯示於區塊中的文字 • 屬性 • 用來設定標籤的相關參數 • 參考網址：http://www.w3schools.com/

  10. HTML 的特殊字元 • 元素標籤的內容通常以可以直接使用一般文字輸入 • <P>我的第一個段落</P> • 當遇到特殊字元的表示方式 • &lt; 代表小於符號 < • &gt;代表大於符號 > • &quot代表雙引號 “ • &nbsp; 代表空白 • 錯誤的示範 • <P>1+1>1</P> • 正確的示範 • <P>1+1&gt;1</P>

  11. HTML 的註解 • 註解可以方便在 HTML 的原始碼當中註明一些資訊，這些資訊在瀏覽器當中是不會顯示的 • <!--這個是註解 --> • <!–註解當中可以包含多行-->

  12. 完整 HTML 的文件架構 • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> • <html> • <head><!-- 文件的標頭 --> • <title>Hello HTML</title> • </head> • <body><!-- 文件的本體 --> • <p>Hello World!</p> • </body> • </html>

  13. DocType的用途 • 在 HTML 4.01 之後，需透過 DOCTYPE 來註明文件的內容 • 供瀏覽器分辨呈現文件的模式 • 可分為三種 • 嚴格的(Strict) • 不允許使用舊版本的元素標籤 • 過渡的(Transitional) • 允許使用舊版本的元素標籤 • 框架的(Frameset) • 只允許使用框架相關的元素標籤

  14. DOCTYPE 的標示方式 • 嚴格的 • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”"http://www.w3.org/TR/html4/strict.dtd"> • 過渡的 • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”"http://www.w3.org/TR/html4/loose.dtd"> • 框架的 • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”"http://www.w3.org/TR/html4/frameset.dtd">

  15. 未使用 DOCTYPE • 會使瀏覽器使用舊版的呈現方式，而無法達到預期的畫面效果 • DOCTYPE 的參考資料 • http://htmlhelp.com/tools/validator/doctype.html

  16. <HEAD> 的用途 • HEAD 元素中主要包含文件的相關資訊，包含標題、關鍵字等，不需要顯示在畫面上的文件資訊。 • 標題的元素標籤 • <title>網站標題</title> • 網站的關鍵字 (供搜尋引擎分類用) • <META name="keywords" content="corporate,guidelines,cataloging">

  17. <BODY> 的用途 • 文件的本體，主要是放置需要呈現於網頁上的視覺化內容，包含：文字、圖片、色彩、圖型…等。 • 自從 CSS 出現開始，對於文件樣式不再像以往使用標籤的屬性來設定。

  18. 網頁語系的表示 • 不同國家所使用的語系不同，因此使用的編碼也不同 • 繁體中文的編碼為 big5 • 於一份文件當中無法同時顯示多國語言 • UTF-8是同時支援各國語系的編碼 • 可以在一份文件當中顯示多國語言 • 在 <HEAD> 中設定語系 • <meta http-equiv="Content-type" content="text/html;charset=utf-8 " />

  19. 元素標籤的 id 以及 class • 在 HTML 4.01 中可以使用 ID 及 CLASS 的屬性來給予各文件中所有的元素標籤一個代號 • 屬性 ID 的設定必須在文件中唯一無二的 • 屬性 CLASS 用來指定相同類型的元素標籤 • 透過 ID 及 CLASS 設定可以方便樣式的設定，以及 SCRIPT 對 HTML 元素標籤的操作

  20. 樣式的設定 • 在過去 HTML4.01 之前的規格當中，網頁樣式是使用 HTML 來設定 • HTML4.01 之後，樣式的設定方式如下 • 或者是在 HTML 的元素標籤中使用 style屬性各別設定

  21. 常見錯誤 • 編碼一率未用 UTF-8 造成部份字亂碼 • 標籤視內容來決定, 而不是用樣式來決定 • 斷行請用空標籤<br/> • 標題就使用 <h1>, 內文就使用段落標籤 <p> • 不要將是標題的文字用 <p> 標籤然後把字型設大 (嚴重錯誤)

More Related