1 / 38

HTML 概要

HTML 概要. 靜宜大學 資訊管理學系 蔡奇偉 副教授. 內容綱要. HTML 是什麼？ HTML 的特性 HTML 基本概念. HTML 是什麼？. HTML 是英文 HyperText Markup Language 一詞的縮寫字，中文翻譯成「超文字標記語言」。它是一套定義網頁原始檔格式的語言。 HTML 的語法源於 SGML （ Standard Generalized Markup Language ），不過它比 SGML 簡單多了，也更容易學習。 HTML 目前的版本是 4.01 ，你可從以下的網址取得其規格書：.

eugene
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 是什麼？ • HTML 的特性 • HTML 基本概念

  3. HTML 是什麼？ HTML 是英文 HyperText Markup Language 一詞的縮寫字，中文翻譯成「超文字標記語言」。它是一套定義網頁原始檔格式的語言。 HTML 的語法源於 SGML （Standard Generalized Markup Language），不過它比 SGML 簡單多了，也更容易學習。 HTML 目前的版本是 4.01，你可從以下的網址取得其規格書： http://www.w3.org/TR/html4/

  4. HTML 的特性 • HTML 是一種編排文件的語言 • HTML 支援多媒體內容 • HTML 支援超文字的架構 • HTML 可連結網路上的文件 （透過 URL） • HTML 提供互動功能 （配合伺服端程式）

  5. HTML基本概念 • 編排文件的標記語言 • 標記 • 元件 • 元件的屬性 • HTML 文件的基本架構 • HTML 元件一覽 • HTML 元件的註解 • HTML 文件與瀏覽器

  6. HTML是個編排文件的標記語言 標記語言（markup language） 標記語言是用來編排文件的一種電腦語言。 以標記語言撰寫的文件，除了內容外，其中 還有一些編排的指令（如：設定章節標題、 放大縮小字體、選用粗體字 ……等等）。

  7. <b> </b> 開始粗體字標記 結束粗體字標記 範例 失敗 為成功之母 失敗為成功之母

  8. Markup Languages 可區分為以下兩種： • Physical Markup Languages - 編排在顯示媒體上的位置和外觀 - 如Tex • Logical Markup Languages - 依據文件的邏輯架構（如章、節、和段落）來 編排位置和外觀 - HTML, LaTex

  9. 標記（Tags） HTML 標記必須寫在 <（小於符號）和 > （小於符號）之間。譬如：<b>。 標記名稱中的字元，大小寫並無區別。譬如： <b> 和 <B> 相同、<title> 和 <Title> 相同。 一個以 /（斜線符號）開頭的標記稱為結束標記。譬如：</b> 是 <b> 的結束標記。

  10. HTML 文件是由若干個元件所組成。 <cmd1> .... </cmd1> <cmd2> .... </cmd2> ..... 第一個元件 第二個元件 <cmd> .... </cmd> start tag content end tag 元件（Elements） • 大部份的元件是由一個起始標記和一個結束標記含括而成 • 少部份的元件是只由一個標記所組成的空元件（如 <HR>）

  11. <cmd1> ... <cmd2> ... </cmd2> ... </cmd1> • 元件可能包含其他元件 <cmd1> ... <cmd2> ... </cmd1> ... </cmd2> • 元件不能和其他的元件部份重疊（ overlap） • 某些元件不能用於其他若干元件之中

  12. 範例 <P>...<STRONG>...</STRONG>...<B>...</B>...</P> 由青年守則第十條：「失敗為成功之母」，我 們知道鄭成功的媽媽名叫失敗。 <P>由青年守則第十條： 「<STRONG>失敗</STRONG>為成功之母」， 我們知道<B>鄭成功</B>的媽媽名叫失敗。 </P>

  13. 屬性名稱 屬性值 元件的屬性（Attributes of Elements） 有些元件可以設定屬性。屬性必須設定在起始標記 中，其格式如下： <cmdname1=value1 ...... namek=valuek > 註：無大小寫的區別 範例： <BODY BGCOLOR=#ffffff TEXT=#0000ff> <!-- 白底藍字 --> ... </BODY>

  14. 關於標記裏的空白 • < 和標記名稱之間不可有空白 如：<B>寫作 < B>會造成錯誤，而 <B >則被允許。 • 屬性名稱之後等號的兩邊不可同時是空白 如：<BODY BGCOLOR = #ffffff>會造成錯誤， 但 <BODY BGCOLOR= #ffffff>和 <BODY BGCOLOR =#ffffff> 則被允許。

  15. 屬性值的前後要加 "（'） 嗎？ • 若屬性值是全由英文大小寫字母、數字、句點（.）、破折號（-）、或冒號（:）所組成，則可以省去其前後的英文雙引號（或單引號），否則就不可省略。如： • <IMG SRC=owl.gil • ALT=“The Owl playing his guita”> 註：顏色值不須含括在雙引號之間

  16. 元件中允許的項目 除了不能重疊以外，我們也必須注意元件之中所允許擺放的項目。比方說：HTML 規定 TH (table head cell) 元件中只可以放文字和圖片，而不可以放另一個表格。我們必須遵守這些限制來撰寫網頁。

  17. 元件可以使用的環境 HTML 規定某些元件只能在特定的元件之中使用， 我們也必須遵守這樣的限制。舉例來說， 前一頁所 說的 TH 元件只能使用於 TABLE 元件。如果，你把 它寫在非 TABLE 的元件之中的話，就會造成錯誤。

  18. HTML 文件的註解 HTML 文件的註解是夾註在 <!--與 -->之間。 除了一些特例外（如內崁的 JavaScript），瀏覽器 會忽略所有出現在註解中的文字。我們建議盡量 在 HTML 文件中加上註解，以便利自己和別人瞭 解你的文件原始碼。 由於 HTML 允許 -- 和 > 之間存在空白，所以在註解中，我們要避免出現連續的兩個或多個破折號。

  19. HTML 文件的基本架構 <HTML> <HEAD> ... 一些描述文件的資訊 </HEAD> <BODY> ... 文件的內容 </BODY> </HTML>

  20. 範例 字最少的HTML文件 <HTML> <HEAD> <TITLE>好</TITLE> </HEAD> </HTML>

  21. 中文網頁所需的編碼的資訊 <HEAD> <META HTTP-EQUIV="Content-Type” CONTENT="text/html; charset=big5"> 網頁使用中文 Big5 字碼集

  22. HTML 文件與瀏覽器 HTML 文件本身是一個文字檔，必須經過瀏覽器（如 Netscape 或 IE）處理後才能在螢幕上顯現出排版後的效果。 由於各家瀏覽器對元件處理的方式有若干差異，同時也各自支援一些獨家的 HTML 擴充功能，因此，在撰寫 HTML 文件時應注意下面幾點： • 應以內容為主，外觀為輔。 • 針對某一瀏覽器而設計的外觀，可能在另一個瀏覽器 上就大為走樣。 • 若想讓更多數人可以觀看，請儘量避免使用擴充功能。

  23. HTML 元件一覽 HTML HEAD BASEBase URL of the document ISINDEXSearchable document LINKRelationships to other documents METAMeta information NEXTIDCounter for automated editor RANGEMark a range of a document STYLEStylesheet information TITLEDocument title *

  24. BODY ADDRESSAddress information BANNERA document banner BLOCKQUOTE(BQ)Block quotations CREDITFIG or BLOCKQUOTE credit DIVDivision of a document FIGFigures OVERLAYImage overlay on a FIG CAPTIONCaption to a FIG or TABLE FNFootnotes

  25. FORMUser input form INPUTInput fields SELECTSelectable fields OPTIONOptions in aselectable fields TEXTAREAText input region HnHeadings (n = 1, 2, ..., 6) HRHorizontal rule NOTENotes or Admonishments DLDescription/Glossary list LHList heading DTTerm DDDescription

  26. OLOrdered list LHList heading LIList item ULUnordered list LHList heading LIList item DIRDirectory list LIList item MENUMenu list LIList item

  27. PParagraphs PREPreformated text TABLETables CAPTIONTable captions COLColumn width and properties COLGROUPGroup columns THEADTable head TBODYTable body TFOOTTable footer TRTable row TDTable data cell THTable header cell

  28. text level markup Physical Phrase Markup BBold BIGIncrease font size IItalics SStrike through SMALLReduce font size SUBSubscript SUPSuperscript TTFixed width font UUnderline

  29. Semantic Phrase Markup ACRONYMAcronyms（頭語字） ABBREVAbbreviations（縮寫字） AUAuthor CITECitations CODETyped computer code DELDeleted text DFNDefining instance of a term EMEmphasized text INSInserted text KBDKeyboard input

  30. LANGLanguage context PERSONNames of a person QShort inline quotation SAMPSample text STRONGStrongly emphasized VARA variable

  31. Character level and Special Elements BRLine break IMGInline image AHypertext Anchor SPOTMark a location in a documentation TABTabbing control MATHMathematical expressions

  32. Netscape and Microsoft Extensions HEAD Elements SCRIPTInline scripting program BODY Elements APPLETInclude an inline Java applet PARAMDefine a variable required by the applet BASEFONTSet the base font BGSOUNDInclude an inline sound file CENTERCenter contents horizontally FRAMESETDeclare a FRAME document FRAMEContent for a particular FRAME NOFRAMEMarkup for non FRAME browsers

  33. MAPA client side imagemap AREARegion in a client side imagemap MARQUEEDefine a scrolling text marquee Physical Phrase Markup FONTChange the font size BLINKBlinking text NOBRNo line break WBRWord break

  34. HEAD 元件 BASEBase URL of the document ISINDEXSearchable document LINKRelationships to other documents METAMeta information NEXTIDCounter for automated editor RANGEMark a range of a document STYLEStylesheet infomation TITLEDocument title

  35. 設定瀏覽器視窗的標題 TITLE 元件 語法：<TITLE> ... </TITLE> 標題目的在於挑明文件的內容意向，必須簡短 明確，最好以不超過10個字為佳。 範例： <TITLE>三國演義大事表</TITLE>

  36. 文件的主體 BODY 元件 語法：<BODY> ... </BODY> BODY元件包含文件所要描述的內容。 屬性 BGCOLOR=#rrggbb底色 TEXT=#rrggbb字的顏色 LINK=#rrggbbcolor of hyperlink text VLINK=#rrggbbcolor of visited hyperlink text BACKGROUND=image_file 底圖

  37. 範例： <BODY BGCOLOR=#ffffff TEXT=#0000ff> <!-- 白底藍字 --> ... </BODY> <BODY BGCOLOR=#ffffff BACKGROUNG=“img.jpg”> <!-- 白底黑字、底圖為img.jpg --> ... </BODY>

  38. 運用底色和底圖的要點： • 底色最好採柔和的顏色。 • 底色和文字的顏色間的對比需鮮明。 • LINK 和 VLINK 的顏色需有別於正常文字的顏色， 且易於辨認。 • 底圖的尺寸不要太大。 • 應注意底圖上下左右是否平滑銜接。 • 底圖不要太花俏太複雜以避免喧賓奪主。

More Related