HTML 網頁設計初學者指南
本文是創建HTML文件的初級讀物。HTML 是 WWW(World Wide Web )中使用的超文本標記語言。本指南的目的是介紹如何使用HTML和創建 web 文件。本文中的鏈接指向一些附加的信息。你還可以到你本地的書店查看一下,那裡可能會有很多有價值的關於 Web 和 HTML 的資料。前言術語WWW World Wide Web Web World Wide Web SGML Standard Generalized Markup Language--標準通用標記語言,描述標記語言的一個標準 DTD Document Type Definition--文本類型定義, 這是一個用SGML寫成的標記語言的正式說明 HTML HyperText Markup Language-- 超文本標記語言, 它是一個SGML DTD HTML 是一套獨立於平台的格式定義( 用標記說明 ) , 用來描述World Wide Web 文檔中的各個組成部分. HTML 是Tim Berners-Lee 在 CERN (在日內瓦的歐洲粒子物理實驗室) 發明的. 本文不包括的內容本指南假設讀者具有以下基礎: 知道如何使用 NCSA Mosaic 或者其它的 Web browser 對Web 服務器和客戶 browsers 有一般的理解 可以訪問 Web 服務器 (或者你只是想用本地方式創建個人使用的HTML 文檔) HTML 版本本指南參考最新的說明--HTML 2.0-- 加上一些已經在 browsers 中廣泛實現的附加特性. 以及正在發展的一些新特性. HTML 文檔什麼是 HTML 文檔HTML 文檔是普通文本 ( ASCII) 文件, 它可以用任意編緝器(如UNIX 中的Emacs 或 vi, Macintosh 中的BBEdit, Windows中的Notepad)生成. 你也可以使用字處理軟件, 不過要記住存文件時要存成“帶回車的純文本”。 HTML 編輯器現在有一些 WYSIWYG 編輯器 (如., 可用在多種平台的 HotMetal, 或者可用在 Macintosh 機的 Adobe PageMill ). 在你學了一些 HTML 標記的基本知識之後,你可能希望使用它們. 你會發現掌握足夠的 HTML 編碼知識對於判斷一個 WYSIWYG 編輯器是否適用是很有益處的 如果你還沒有選定使用哪種軟件, 可以參考本站軟件下載 HTML 編輯器的在線例表 (按應用平台分類) ,幫助你尋找應用軟件. 把文件存放到服務器上如果你在學校或者單位可以訪問 Web 服務器, 和你的 WEB 管理員webmaster (維護服務器的人) 聯繫,看看如何把你的文件存放到 Web 上. 否則,如果在學校或單位不能訪問, 可以看看你的社區是否有免費網絡FreeNet, 一種提供免費 Internet 訪問服務的基於社區的網絡. 如果也沒有免費網絡, 你可以當地的 Internet 服務提供者聯繫,他們可以把你的文檔存放到服務器上,不過要收取費用. (你可以在當地的報紙上找到廣告with your Chamber of Commerce for the names of companies.) 標記說明一個元素 element 是一個文檔結構的基本組成部分. 元素的例子有頭 heads, 表格tables, 段落 paragraphs, 列表 lists 等. 你可以這樣理解: 你用 HTML 標記為瀏覽器標出文件的各個元素 . 元素中可以包含普通文本,其他元素,或二者都有. 在 HTML 文檔中使用tags表示各種元素. HTML 標記由一個左尖括號 (<), 一個標記名, 和一個右尖括號 (>) 組成. 標記通常成對出現 (如, <H1> 和 </H1>) 以指出標記作用的範圍. 結束標記和起始標記相似,只是在括號中的標記名中以斜槓 (/) 領頭. HTML 標記在下文中列出. 有些元素可能含有一個屬性 attribute, 它是包含在起始標記中的附加信息說明. 例如, 通過在圖像文件的 HTML 代碼中包含適當的屬性,你可以指明一幅圖像的位置 (頂端, 中間, 或底部) . 具有可選屬性的標記 如下. 注意: HTML 不區分大小寫. <title> 等價於 <TITLE> 或 <TiTlE>. 有幾個例外的情況列在下文中的轉義序列中. 並非所有的 World Wide Web 瀏覽器都支持所有的標記. 如果一個瀏覽器不支持某個標記, 它通常只是忽略之. 最小的 HTML 文檔每個 HTML 文檔應該包含一些標準 HTML 標記. 每個文檔都包含頭 head 和正文 body text 兩部分. 頭中含有標題 title, 正文中含有實際構成段落,列表和其他元素的文本. 瀏覽器需要具體的信息是因為它們都是根據 HTML 和 SGML 說明編程的. 下面的源文檔舉例說明必須的元素: <html><head><TITLE>A Simple HTML Example</TITLE></head><body><H1>HTML is Easy To Learn</H1><P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P><P>And this is the second paragraph.</P></body></html> 必須的元素有 <html>, <head>, <title>, 和 <body> 標記 (和它們相應的結束標記). 由於在每個文件中你都要包括這些標記, 你可以創建一個含有這些標記的模板文件. ( 有些瀏覽器會自動正確地規格化你的 HTML 文件,哪怕你沒有包含這些標記. 但是有些瀏覽器不會這樣! 因此你要確保包含這些標記.)一個教學工具要看到你的瀏覽器當前窗口所顯示信息的原始文件, 可以選擇瀏覽器菜單中的 View Source (或者等價操作) 選項. 文件的內容和所有的 HTML 標記將顯示在一個新窗口中. 這是學習使用 HTML 和掌握技巧和構造的一個非常好的方式. 當然, 你看的 HTML 不一定在技術上是正確的. 當你熟悉了 HTML 並且看了很多這方面的參考資料,你將能夠區分 "好的" 和 "不好的" HTML. 記住你可以保存 HTML 編碼的源文件,用做你的 Web 頁的模板,或者把它修改之後用做其他用途. HTML 標記HTML該元素指明你的文件包含 HTML-編碼 信息. 文件擴展名 .html 也指明該文件是一個 HTML 文檔而且 必須使用. (如果你的系統受 8.3 制文件名的限制 (如., LeeHome.htm), 可以用 .htm 做擴展名.) HEAD頭元素 head 是你的 HTML-編碼 文檔中包含標題 title 的第一部分. 標題是作為你的瀏覽器窗口的一部分來顯示的 (見下文). TITLE標題 title 元素含有你的文檔標題並且作為一種全局上下文識別其內容. 標題通常顯示在瀏覽器窗口的某個位置 (通常在頂端), 而不是在文本區. 標題同時也用於熱點列表 hotlist 或書籤列表 bookmark list 中的顯示, 因此標題的選擇因當是描述性的, 獨特的, 和相對簡潔的. 標題在 WAIS 服務中還用於搜索服務器. 例如, 你可能在一章的內容中包含一個短小的書本的標題: NCSA Mosaic 指南 (Windows): 安裝. 這個標題說明了軟件的名稱, 使用平台, 和本章內容, 它比簡單地把該文檔稱為 安裝. 要好得多。一般你的標題應該不超過 64 個字符. BODYHTML 文檔的第二部分,也是最大的部分是正文 body, 它含有你的文檔的內容 (顯示在你的瀏覽器窗口文本區的部分). 下面介紹的標記用在 HTML 文檔的正文 body 內. 標題字體HeadingsHTML 有六級標題字體, 從 1 到 6 編號, 1 號最小. 標題字體的顯示比普通文本字體大或者粗. 每個文檔中的第一個標題字體應該標記為 <H1>. 標題字體元素的語法為: <Hy>標題字體文本 </Hy> 其中 y 是從 1 到 6 的數字,指明標題字體的等級. 在你的文檔中不要跳躍使用標題字體等級. 例如, 不要用一級標題 (<H1>) 開始,然後跟隨一個三級標題 (<H3>) . 段落Paragraphs不同於多數字處理器中的文檔, HTML 文件中的換行是不重要的. 你不用擔心你的文本中行的長度 ( 當然最好不要超過 72 個字符). 在你的源文件中任何地方可以使用換行, 多個空白在你的瀏覽器中被重疊成為一個空白. 在“最小的 HTML 文檔”中給出的例子中第一段的編碼為 <P>Welcome to the world of HTML. This is the first paragraph. While short it isstill a paragraph!</P> 源文件中各行之間有換行. Web 瀏覽器忽略這些換行,只有遇到另一個 <p> 標記時才開始新段落 <P> 要點: 你必須用 <P> 元素指明段落. 瀏覽器忽略源文件中的任何縮進或空行. 如果沒有 <P> 元素, 文檔將被看作一個大段落處理. (一個例外的情況是把文本標記為 "preformatted," 下文中將做介紹.) 例如, 下面的內容的輸出和第一個 HTML 例子完全相同: <H1>Level-one heading</H1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still aparagraph! </P> <P>And this is the second paragraph.</P> 為了保持 HTML 文件的可讀性, 標題字體應該獨佔一行, 在開始一個新的部分之前加一到兩行空行,段落之間也用空行隔開( 除了用<P> 標記以外). 這些額外的空白在你編輯文件時將會有用 ( 但是你的瀏覽器將忽略這些空白因為它有自己的關於空白的規則,不依賴於你源文件中的空白). 注意: 結束標記 </P> 可以省略. 這是因為當瀏覽器遇到一個 <P> 標記時, 它認為前一個段落到此結束. 使用 <P> 和 </P> 作為段落標記使得你可以通過在源文件中使用 ALIGN=alignment 屬性使一個段落居中排列. <P ALIGN=CENTER>這是一個居中的段落. [見下面的輸出形式]</P> 這是一個居中的段落. 列表ListsHTML 支持不編號 unnumbered, 編號numbered, 和定義definition 三種列表. 你也可以嵌套列表, 但是不要嵌套過多,否則會使讀者感到不清晰。 不編號列表Unnumbered Lists 製作一個不編號的,公告式列表, 用開始標記 <UL> ( unnumbered list 的簡記) 開始 輸入 <LI> (list item) 標記,後面跟獨立的項; 不需使用 </LI> 標記 用 </UL> 標記結束整個列表 下面是一個有三個項的列表: <UL><LI> apples<LI> bananas<LI> grapefruit</UL> 輸出形式為: apples bananas grapefruit <LI> 項可以含有多個段落. 用段落標記 <P> 指明. 編號列表Numbered Lists 編號列表 (也稱為 有序列表ordered list) 和不編號列表相同, 只是用 <OL> 代替 <UL>. 各項同樣用 <LI> 標記. 下面的 HTML 代碼: <OL><LI> oranges<LI> peaches<LI> grapes</OL> 產生的輸出為: oranges peaches grapes 定義列表Definition Lists 定義列表 (編碼為 <DL>) 通常含有交替出現的 定義術語definition term (編碼為 <DT>) 和定義描述definition definition (編碼為 <DD>). Web 瀏覽器通常另起一行顯示定義描述. 下面是一個定義列表的例子: <DL><DT> NCSA<DD> NCSA, the National Center for Supercomputing Applications,is located on the campus of the University of Illinois at Urbana-Champaign. <DT> Cornell Theory Center<DD> CTC is located on the campus of Cornell University in Ithaca,New York. </DL> 輸出形式為: NCSA NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. Cornell Theory Center CTC is located on the campus of Cornell University in Ithaca, New York. <DT> 和 <DD> 項可以包含多個段落 (用 <P> 標記指示), 列表, 或其他的定義信息. COMPACT 屬性可能會被經常使用,如果你的定義術語很簡短的話. 例如,如果你想顯示一些計算機選項, 它們可以和定義的開始處於同一行中. <DL COMPACT><DT> -i<DD>invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path<DT> -k<DD>invokes NCSA Mosaic for Microsoft Windows in kiosk mode</DL> 輸出形式為: -i invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path. -k invokes NCSA Mosaic for Microsoft Windows in kiosk mode. 嵌套列表Nested Lists 列表可以嵌套. 在每個列表項中,你還可以含有多個段落,每個段落含有嵌套列表.這裡是一個嵌套列表的例子: <UL><LI> A few New England states:<UL><LI> Vermont<LI> New Hampshire<LI> Maine</UL><LI> Two Midwestern states:<UL><LI> Michigan<LI> Indiana</UL></UL> 這個嵌套列表的顯示: A few New England states: Vermont New Hampshire Maine Two Midwestern states: Michigan Indiana 預排格式文本Preformatted Text用<PRE> 標記 (表示 "preformatted") 可以產生固定寬度的字體. 該標記同時使空格,新行,和製表鍵 tabs 有效 (多個空格顯示為多個空格, 源文件中的換行也在瀏覽器中產生換行). 這對於程序清單和其他一些網頁寄存情況是很有用的. 例如, 下面的行: <PRE>#!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm * </PRE> 顯示為: #!/bin/csh cd $SCR cfs get mysrc.f:mycfsdir/mysrc.f cfs get myinfile:mycfsdir/myinfile fc -02 -o mya.out mysrc.f mya.out cfs save myoutfile:mycfsdir/myoutfile rm * <PRE> 標記可以帶一個寬度屬性 WIDTH ,指明一行中最多允許的字符數. WIDTH 同時通知瀏覽器選擇一個合適的字體以及文本的縮排. 在 <PRE> 作用的部分中也可以加超鏈. 但是其他的 HTML 標記應該避免在 <PRE> 的區間中使用. 注意,由於<, >, 和 & 在 HTML 文件中有特殊含義, 在你輸入這些字符的時候必須使用它們的轉義序列 (分別為<, >, 和 &) . 詳細內容參見轉義序列 . 大範圍引用Extended Quotations使用 <BLOCKQUOTE> 標記可以在屏幕上用分離的塊顯示大段的引用. 多數瀏覽器通常改變引用部分的頁邊界,以和周圍的文本區分開. 在下面的網站設計例子中: <BLOCKQUOTE><P>Omit needless words.</P><P>Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.</P>--William Strunk, Jr., 1918</BLOCKQUOTE> 顯示結果為: Omit needless words. Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. --William Strunk, Jr., 1918 地址Addresses<ADDRESS> 標記通常用於說明文檔的作者, 與作者聯繫的方法 (如, 一個電子郵件地址), 和一個修訂日期. 它一般是一個文件的最後部分. 例如, 本在線指南的最後一行為: <ADDRESS>A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu / revised April 96</ADDRESS> 結果為: A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu / revised April 96注意: <ADDRESS> 不 用於普通郵政地址. 關於普通郵政地址參見下文的 "強制換行" . 強制換行Forced Line Breaks/郵政地址Postal Addresses<BR> 標記強制產生一個換行,行間沒有間隙. 對於由較短的行組成的文本,如郵政地址, <P> 元素產生的附加空行會使你覺得不必要. 例如, 使用 <BR>: National Center for Supercomputing Applications<BR>605 East Springfield Avenue<BR>Champaign, Illinois 61820-5518<BR> 輸出為: National Center for Supercomputing Applications605 East Springfield AvenueChampaign, Illinois 61820-5518 水平線Horizontal Rules<HR> 標記產生一個和瀏覽器窗口等寬的水平線. 水平線對於你分割文檔中的各個部分很有用. 例如,很多人在他們的文本結束和 <address> 信息開始之前加一個水平線. 你可以改變一條線的尺寸 (粗) 和寬度 ( 水平線延伸長度占窗口的百分比). 你可以試著改變設置,直到對顯示效果滿意. 例如: <HR SIZE=4 WIDTH="50%"> 顯示為: ---------------------------------------------------------- 字符格式Web DesignHTML 有針對單個字符或句子的兩種風格: 邏輯風格和物理風格logical and physical. 邏輯風格Logical styles 根據文本的內容進行標記, 而物理風格 physical styles 指明一個部分的顯示效果. 例如, 在前面的句子中, "logical styles" 這個單詞標記為一個 "定義definition." 同樣的效果 (斜體) 可以通過其他的標記告訴你的瀏覽器 "把這些字變成斜體" 來實現。 注意: 有些瀏覽器對 <DFN> 標記不做任何風格解釋, 因此你可能沒有發現前面段落中的單詞顯示成斜體。 邏輯風格和物理風格Logical Versus Physical Styles如果物理風格和邏輯風格能夠產生相同的效果, 為什麼不合二為一呢? 在理想的 SGML 概念中, 內容和它的顯示是分開的. 因此 SGML 標記一個一級標題字體為一級標題字體, 但是並不指明一級標題字體應該顯示多大, 例如, 24點粗體 加倍集中24-point bold Times centered. 這種處理的好處(類似於很多字處理軟件的 style sheets ) 是,如果你決定把一級標記字體改為 20-point left-justified Helvetica, 你只需要改變你的瀏覽器中一級標題字體的定義就可以了. 今天確實有很多瀏覽器允許你按你的希望定義多種 HTML 標記在屏幕上的實際效果. 邏輯標籤的另一個優點在於它們有助於在你的文檔中保持一致性. 標記 <H1> 比 24-point bold Times center 或其它描述要好記得多. 例如, 對 <STRONG> 標記. 多數瀏覽器用粗體解釋. 但是, 某個讀者可能喜歡把這部分顯示為紅色. 邏輯風格提供了這種靈活性. 當然, 假設如果你想用斜體顯示一些內容而不想受瀏覽器的設置的影響, 你就需要使用物理風格 . 因此,物理風格提供一種另一種一致性:在你的文檔中用某種方式顯示的內容在別的地方也會以同樣的方式顯示. 你應該固定地使用某一種風格. 如果你用物理風格標記, 則在一篇文檔中全都使用物理風格. 如果你使用邏輯風格, 則在文檔中堅持使用邏輯風格. 記住,將來的 HTML 可能不再支持物理風格, 這意味著瀏覽器將不解釋物理風格的編碼. 邏輯風格Logical Styles<DFN> 用於被定義的單詞. 一般用斜體顯示. (NCSA Mosaic is a World Wide Web browser.) <EM> 用於強調. 通常用斜體顯示. (Consultants cannot reset your password unless you call the help line.) <CITE> 用於書籍的標題, 等. 通常斜體顯示. (A Beginner's Guide to HTML) <CODE> 用於計算機編碼. 用固定寬度字體顯示. (The <stdio.h> header file) <KBD> 用於用戶鍵盤輸入. 通常用無格式固定寬度字體顯示. (Enter passwd to change your password.) <SAMP> 用於字母序列. 用固定寬度字體顯示. (Segmentation fault: Core dumped.) <STRONG> 用於著重強調. 通常用粗體顯示. (NOTE: Always check your links.) <VAR> 用於變量, 你將用確定的信息代替這個變量. 通常用斜體顯示. (rm filename deletes the file.) 物理風格標記<B> 粗體文本 <I> 斜體文本 <TT> 打字機文本typewriter text, 如固定寬度文本. 轉義序列Escape Sequences (a.k.a. Character Entities)字符有兩種功能: 轉義特殊字符 顯示普通 ASCII 字符集中不包含的字符 ( 帶有可區別標記的基本字符) 有三個 ASCII 字符--左尖括號(<), 右尖括號 (>), 和ampersand (&)--在 HTML 中有特殊含義,因此不能按照原樣用在文本中. (尖括號用於指示 HTML 標記的開始和結束, ampersand 用於指示一個轉義序列的開始.) 雙引號可以原樣使用,但是也可以使用字符實體("). 如果在 HTML 文檔中使用上述三個字符, you must enter its escape sequence instead: < < 的轉義序列; > > 的轉義序列; & & 的轉義序列; 其它的轉義序列支持重讀字符, 如: ö 帶元音變音的小寫字母 o : * ñ 小寫字母n 帶 tilde: * È 大寫字母 E 帶低重音( grave accent): * 你可以用其它字母替代上面的 o, n, 和 E. 參考特殊字符清單. 注意: 轉義序列是區分大小寫的,這一點不同於 HTML 的其它部分。例如,你不能用 < 代替 <. 鏈接 LinkingHTML 的主要長處在於它能夠鏈接文本和/或圖像到另一個文檔或者文檔的一部分中. 瀏覽器用顏色和/或下劃線突出指定的文本或圖像,以說明它是一個超文本鏈接hypertext link (通常簡寫為 hyperlink 或 link). HTML 的單個與超文本鏈接有關的標記為 <A>, 表示 anchor. 在文檔中包含 anchor: 用 <A 開始一個 anchor ( A 後面要留一個空白) 指明你要連接的文檔:HREF="filename" ,後面個跟一個右尖括號 (>) 輸入在當前文檔中作為超鏈文本的部分 輸入 anchor 結束標記: </A> ( anchor 結束標記之前不需空白 ) 以下是一個含有超文本鏈接到 US.html: 的例子 <A HREF="MaineStats.html">Maine</A> 上面的例子中,單詞 Maine 被作為指向文檔 MaineStats.html的超鏈,它和第一個文檔在同一個目錄下. 相對路徑名和絕對路徑名你可以通過和當前文檔的相對路徑relative path指明鏈接到其它目錄的文檔. 例如, 到 AtlanticStatesa 子目錄的文件 NYStats.html 的鏈接為: <A HREF="AtlanticStates/NYStats.html">New York</A> 它們之所以被稱為相對路徑鏈接 是因為你指定到連接文件的路徑是相對於當前文件的位置而言的. 你也可以使用文件的絕對路徑 (完整的 URL), 但是相對路徑在訪問一個服務器時效率更高. 路徑名使用標準 UNIX 格式. 在 UNIX 格式中,父目錄(包含當前目錄的目錄) 表示為 "..". (更詳盡的信息請參考 UNIX 入門參考手冊如 Learning the UNIX Operating System from O'Reilly and Associates, Inc.) 假設你在 NYStats.html 文件中,想要參考原始文檔 US.html, 你的鏈接如下: <A HREF="../US.html">United States</A> 一般地, 你應該使用相對鏈接,因為: 移動一組文件到另一個位置會比較容易(因為相對路徑名依然有效) 和服務器的連接更有效率 需要鍵入的信息更少但是,如果指向的文檔和當前文檔沒有直接聯繫,就需要絕對路徑名. 例如, 考慮構成一個用戶手冊的一組文檔. 這組文檔內部的鏈接應該採用相對鏈接. 而到其它文檔的鏈接 ( 可能指向一個相關的軟件) 應該用絕對鏈接. 這樣,當你把用戶手冊移到一個新目錄下時,所有的鏈接都不必改變. URLsWorld Wide Web 使用標準資源定位 Uniform Resource Locators (URLs) 指明其它服務器中的文件. 一個 URL 包括訪問資源的類型(例如, Web, gopher, WAIS), 服務器的地址, 和文件的位置. 語法格式為: scheme://host.domain [:port]/path/ filename 其中 scheme 是以下的一個 file 本地系統的一個文件 ftp 匿名FTP 服務器中的文件 http World Wide Web 服務器中的文件 gopher Gopher 服務器中的文件 WAIS WAIS 服務器中的文件 news Usenet 的一個新聞組newsgroup telnet 到一個基於Telnet 的服務的連接 端口port 號通常可以省略. (除非對方告訴你使用它,否則忽略它) 例如,在你的文檔中鏈接本指南: <A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html"> NCSA's Beginner's Guide to HTML</A> 它將文本 NCSA's Beginner's Guide to HTML 標記為一個超鏈,連到當前文檔中 . 到指定部分的鏈接錨鏈也可以用於引導讀者到一篇文檔(可以是當前文檔或其他文檔)中的特定區域,而不一定到缺省的頂端位置. 這種類型的錨鏈通常稱為一個 命名錨鏈named anchor ,因為創建鏈接時, 你需要在文檔中插入 HTML 名字. 本指南是在同一篇文檔中使用命名錨鏈的很好的例子. 它作成一篇文檔以便於打印. 但是當你只是想瞭解關於HTML 的一部分信息時,在這樣一篇(長)文檔中瀏覽是比較費時的. 內部的超鏈用於在文檔開始創建一個"內容索引table of contents". 這些超鏈使你可以從文檔中的一個位置移到另一個位置。(到本文的頂端點擊內容索引中 到指定部分的鏈接. 你就會返回這裡.) 你還可以鏈接到另一篇文檔中的指定部分. 首先提這一點是因為這會有助於幫助你理解一篇文檔內部的鏈接. 不同文檔中指定部分之間的鏈接假設你想從文檔A (documentA.html) 中建立一條到另一篇文檔(MaineStats.html)中的一個指定部分的鏈接. 輸入HTML編碼指向一個命名鏈接: documentA.html: In addition to the many state parks, Maine is also home to <a href="MaineStats.html#ANP">Acadia National Park</a>. 井號(#)後面的字符串可以看作文件MaineStats.html 中的一個標籤. 這個標籤說明了當該鏈接被激活時瀏覽器從什麼地方開始顯示. 在上例中,顯示的第一行將是 Acadia National Park heading. 第二步, 在MaineStats.html中創建命名錨鏈 (本例中為 "ANP") <H2><A NAME="ANP">Acadia National Park</a></H2> 這些元素都作好以後,你就可以讓讀者直接找到MaineStats.html中Acadia 的參考信息了. 注意: 要想鏈接到另一篇文檔中的指定位置,你需要對那篇文檔具有寫權限,或者那篇文檔中已經含有文檔內部的命名錨鏈. 例如,你可以在你所寫的文檔中包含指向本指南的錨鏈,因為本文中已經含有命名錨鏈 (使用瀏覽器中的 View Source 看一看編碼). 但是如果本文檔 沒有命名錨鏈, 你就不能製作到特定位置的鏈接,因為你不能編輯NCSA服務器中的原始文件. 指向當前文檔內指定部分的鏈接語法和前文相同,只是文件名 省略. 例如, 要從 MaineStats中鏈接到 ANP : ...More information about <A HREF="#ANP">Acadia National Park</a> is available elsewhere in this document. 注意確保你的文檔中在鏈接指向的部分包含 <A NAME=> 標記(<H2><A NAME="ANP">Acadia National Park</a></H2>). 當你認為讀者可能需要打印全部文檔,或者在一個文件中有很多短信息需要在線說明的情況下非常有用. 郵件發送Mailto在超鏈中包含mailto屬性,可以方便讀者給某個人或別名發送電子郵件. 格式為: <A HREF="mailto:emailinfo@host">Name</a> 例如, 輸入: <A HREF="mailto:pubs@ncsa.uiuc.edu">NCSA Publications Group</a> 可以創建一個已經配置好的發往 BUPT Publications Group的郵件窗口. (你當然應該換用另一個地址!) 嵌入行中的圖像多數 Web 瀏覽器可以顯示嵌入行中的X 位圖(XBM), GIF, 或 JPEG 格式的圖像(即和文本想鄰的圖像) . 其他格式的圖像正在合併到Web 瀏覽器中[如, Portable Network Graphic (PNG) 格式]. 每個圖像都花費處理時間並降低文檔顯示的速度. 仔細選擇你的文檔中的圖像和圖像的個數. 包含一個嵌入行中的圖像, 輸入: <IMG SRC=圖像名>ALT="FORWARD" HEIGHT=32 WIDTH=32> 其中 圖像名 是圖像文件的URL . <IMG SRC> URLs 的語法格式和錨鏈HREF使用的格式相同. 如果圖像文件是GIF 文件, 則圖像名中的文件名部分必須以.gif結束. X 位圖格式的文件必須以.xbm結尾; JPEG 圖像文件必須以.jpg或 .jpeg結束; Portable Network Graphic 文件必須以.png結束. 圖像大小屬性在<IMG> 標記中你應該包含其它兩個屬性,用於通知瀏覽器正在和文本一起下載的圖像的大小. HEIGHT 和 WIDTH 屬性使瀏覽器在下載文件其它部分的時候為圖像留出適當的空間(象素). (從你的圖像處理軟件如Adobe Photoshop中可以得到象素大小.) 例如, 要在文件中包含一幅自己的肖像, 輸入: <IMG src="http://127.0.0.1/Files/BeyondPic/2006-6/13/0661313162193204.gif" HEIGHT=100 WIDTH=65>ALT="FORWARD" HEIGHT=32 WIDTH=32> 注意: 當圖像大小與屬性描述大小不一致時,有些瀏覽器使用 HEIGHT 和 WIDTH屬性來擴大或縮小一幅圖像以使它適用於分配的空間. 並非所有的瀏覽器開發者都贊同放大/縮小圖像. 因此,在安排時不要假設你的讀者都可以使用這種特性. 最好查看一下圖像大小,使用正確的尺寸. 圖像定位對於圖像的顯示你具有一定的靈活性. 你可以讓圖像和文本分開,把圖像放在左邊,右邊,或者中間. 或者你可以讓圖像和文本在同一行。你可以嘗試多種形式,看一看哪種最好使圖像和文本在同一行缺省情況下圖像的底部和隨後的文本在同一行顯示,就像現在的這段. 你也可以通過把ALIGN= 屬性的值設為 TOP 或 CENTER,把圖像放到一段的頂端或中間。 這段文本與圖像的頂端在同一行(<IMG SRC = "BarHotlist.gif" ALIGN=TOP>). 注意只有一行文本如此,其他行跳到圖像的底部顯示. 這一行文本顯示在圖像中間(<IMG SRC = "BarHotlist.gif" ALIGN=CENTER>). 同樣,只有一行顯示在中間,其他行在圖像的下面. 不帶文本的圖像如果要顯示一幅不帶文本的圖像(例如,你的組織的徽標), 只要把它作為單獨的一段即可. 使用段落標記的 ALIGN=屬性把圖像調整到窗口的中間或右邊,如下所示: <p ALIGN=CENTER><IMG SRC = "BarHotlist.gif"></p> 結果為: 圖像顯示在中間; 本段從它下面靠左開始. 圖像的替換文本一些 World Wide Web 瀏覽器--主要是那些在 VT100 終端上運行的瀏覽器--不能顯示圖像. 有些用戶會關掉圖像下載功能,就算他們的軟件可以顯示圖像(特別是如果他們是 modem 或低速線路的用戶). HTML 提供一種機制使得讀者知道他們看到的頁面上缺少了什麼. ALT 屬性使你可以指定一段可以替代圖像來顯示的文本. 例如: <IMG src="http://127.0.0.1/Files/BeyondPic/2006-6/13/0661313162177410.gif" ALT="Up">ALT="" HEIGHT=48 WIDTH=50> 其中 UpArrow.gif 是一個向上的箭頭.在具有圖像顯示功能並且圖像下載打開的瀏覽器中,你可以看到一個上箭頭的圖形。在VT100 瀏覽器中或者圖像下載關閉的情況下, 你的窗口中將顯示 Up 這個單詞. 你應該對出現在你的文檔中的每個圖像都使用一個替換文本, 這是一種對讀者的禮貌. 背景圖像新版本的 Web 瀏覽器可以下載一幅圖像用做顯示一個主頁時的背景. 有些人喜歡使用背景,有些人不喜歡. 通常,如果你想包含一個背景, 你要確保你的文本在背景上依然可以被很清晰地閱讀. 背景圖像可以是一個物體的組織 (例如亞麻布紙張)或圖像 (可能是一個徽標). 你可以像生成其他任何圖像一樣來生成背景圖像。 不過你只需要製作一個很小的圖像. 瀏覽器會使用一種稱之為“蓋瓦”tiling的特性重複顯示這個圖像,填滿整個瀏覽器窗口。簡單地說,你只要生成一幅圖像,瀏覽器會自動重複多次,直到填滿你的窗口。當你使用下面說明的標記時,這個動作會自動執行. 包含背景圖像的標記包含在 <BODY> 標記描述中作為一個屬性: <BODY BACKGROUND="filename.gif"> 背景顏色缺省情況下瀏覽器使用灰底黑字顯示文本. 但是, 你可以改變它們. 一些 HTML 作者選擇一個背景顏色,配以文本顏色的相應改變. 對於這種改變一定要預先看一看,是否還易於閱讀. (例如, 不少人用黑底紅字,非常難以閱讀!) 使用<BODY>標記的多種屬性,你可以改變文本,鏈接,看過的鏈接和活動鏈接的顏色. 例如, 輸入: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC"> 將創建一個窗口,背景為黑色 (BGCOLOR), 文本為白色 (TEXT), 超鏈為銀色 (LINK). 六位的數字和字母的組合代表顏色,它給出某種顏色的 RGB (紅red, 綠green, 藍blue)的值. 這個六位數字實際上是三個順序排列的兩位數, 代表從00到FF的紅,綠,藍比重的十六進制值。例如, 000000 表示黑色(沒有任何顏色), FF0000 是亮紅, FFFFFF 是白色 (所有三種顏色全部飽和). 這些數字和字母的組合的含義是模糊的. 幸運的是有一個在線資源可以幫助你瞭解各種組合與顏色的對應關係: ColorPro Web server 外部圖像,聲音,和動畫你可能希望當用戶激活你的文檔中一個單詞或小的圖像作成的鏈接時,把一幅圖像作為單獨的文檔打開. 這種情況稱為一個外部圖像, 當你不想由於大的圖像而降低主文檔的下載速度時,它是很有用的. 要包含一個外部圖像的鏈接, 輸入: <A HREF="MyImage.gif">link anchor</A> 你也可以用一個小的圖像作為到大圖像的鏈接. 輸入: <A HREF="LargerImage.gif"><IMG src="http://127.0.0.1/Files/BeyondPic/2006-6/13/066131316214468.gif"></A>ALT="" HEIGHT=48 WIDTH=50> 讀者看到圖像 SmallImage.gif ,點擊它就可以打開文件 LargerImage.gif . 使用同樣的語法鏈接外部動畫和聲音. 唯一的不同在於鏈接文件的擴展名. 例如, <A HREF="AdamsRib.mov">link anchor</A> 指明一個到QuickTime 電影的鏈接. 一些通常的文件類型和其擴展名為: 文件類型 擴展名 純文本plain text .txt HTML 文檔 .html GIF 圖像 .gif TIFF 圖像 .tiff X 位圖圖像 .xbm JPEG 圖像 .jpg 或 .jpeg PostScript 文件 .ps AIFF 聲音文件 .aiff AU 聲音文件 .au WAV 聲音文件 .wav QuickTime 電影 .mov MPEG 電影 .mpeg 或 .mpg 記住你假設的讀者和他們使用的軟件. 例如,多數UNIX 工作站不能播放QuickTime 電影. 表格Tables在 HTML 制定表格標記之前, HTML 作者不得不在<PRE> 標記中仔細安排他們的表格式的信息,計算空格的個數,預覽輸出效果。表格不僅對描述表格式信息十分有用,對於那些經常性的 HTML 作者來說,它可以使他們可以方便地完成大量的 Web 頁. (請看 NCSA Relativity Group's pages ,一個很好的例子.) 根據下面的編碼解釋考慮你的表格式信息. 一個表格得有一些表頭,用於說明每行/列包含什麼內容,行rows表示信息, 單元cells表示每個項. 在下面的表格中, 第一列包含表頭信息, 每行說明一個 HTML 表格標記, 每個單元含有一對標記或者對標記功能的解釋. 表格元素 元素 描述 <TABLE> ... </TABLE> 定義一個表格。 如果使用了 BORDER 屬性, 瀏覽器顯示一個帶邊界的表格. <CAPTION> ... </CAPTION> 定義表格標題的caption . 標題的缺省位置在表格的頂部. 屬性 ALIGN=BOTTOM可以用於指定標題顯示在表格底部 注:caption標記內可以使用任意其他標記. <TR> ... </TR> 說明表格中的一行. 你可以定義整個行的缺省屬性: ALIGN (LEFT, CENTER, RIGHT) 和/或 VALIGN (TOP, MIDDLE, BOTTOM). 詳細內容參考本表格末尾的"表格屬性"部分. <TH> ... </TH> 定義一個表格頭單元. 缺省狀態該單元的文本為粗體居中. 該單元可以包含其他屬性,說明單元屬性和/或單元內容. 詳細內容參見本表格底部的"表格屬性"部分. <TD> ... </TD> 定義一個表格數據單元. 缺省情況下該單元內的文本為水平方向靠左對齊, 垂直方向居中排放. 該單元可以包含其他屬性,說明單元屬性和/或單元內容. 詳細內容參見本表格底部的"表格屬性"部分. 表格屬性 注: 在<TH> ... </TH> 或 <TD> ... </TD> 單元中定義的屬性將覆蓋( override ) <TR> ... </TR>中的缺省定義. 屬性 描述 ALIGN (LEFT, CENTER, RIGHT) VALIGN (TOP, MIDDLE, BOTTOM) COLSPAN=n ROWSPAN=n NOWRAP 一個單元的水平位置分配. 一個單元的垂直位置分配. 一個單元跨多少列(n). 一個單元跨多少行(n). 關閉一個單元中的自動換行(word wrapping). 通用表格格式一個表格的通用格式形式為: <TABLE> <== 表格定義的開始<CAPTION> caption 內容 </CAPTION> <== caption 定義 <TR> <== 第一行定義的開始<TH> 單元cell 內容 </TH> <== 第一行的第一個單元 (一個頭head)<TH> 單元內容 </TH> <== 第一行最後一個單元(一個頭 head)</TR> <== 第一行定義的結尾<TR> <== 第二行定義的開始 <TD> 單元內容 </TD> <== 第二行第一個單元 ....<TD> 單元內容 </TD> <== 第二行最後一個單元 </TR> <== 第二行定義的結尾 <TR> <== 最後一行定義的開始 <TD> 單元內容 </TD> <== 最後一行第一個單元 ... <TD> 單元內容 </TD> <== 最後一行最後一個單元 </TR> <== 最後一行定義結尾 </TABLE> <== 表格定義結束 <TABLE> 和 </TABLE> 標記必須把整個表格括起. 表格中的第一個項是 CAPTION, 它是可選部分. 然後你可以用 <TR> 和 </TR> 標記定義任意多行. 在一行內也可以有用<TD>...</TD> 或 <TH>...</TH> 標記定義的任意數目的單元. 表格中的每一行在本質上是和它的上下行獨立編排格式的. 這使得你可以很容易地顯示象上文中的只有一個單元的表格, 例如表格屬性, 跨越表格中的多個列. 非表格式信息使用的表格有些 HTML 作者使用表格描述非表格化信息. 例如, 因為鏈接可以包含在表格單元中, 一些作者使用沒有邊界的表格組合一些分離的圖像創建“一個”圖像. 可以顯示表格的瀏覽器可以無縫隙地顯示這些實際分離的圖像, 使得合成的圖像類似於一個 圖像映像image map (一個帶有矩形超鏈區域的圖像). 使用帶有圖像邊界的表格也可以得到很好的顯示效果. 不妨試一試,看看自己喜歡哪種風格. 填充 Form (Fill-out Forms)Web form 使讀者可以向 Web 服務器返回信息以產生某種動作. 例如, 假設你想收集名字和電子郵件地址以便向提出要求的讀者發送電子郵件. 對每個輸入他/她的姓名和地址的人, 你需要得到要發送的信息和加到數據庫中的響應者的項目. 這種輸入數據的處理工作通常是由script(描述式語言:譯者注)描述函數或者用 Perl 或其他處理文本,文件和信息的語言編寫的程序來完成的. 如果你寫不出能夠處理輸入數據的程序或script函數, 你就得找其他人替你完成. Form 本身倒是比較簡單. 它們也使用 HTML 標記來生成. 可能不同的地方在於接受並處理遞交數據的程序或script描述函數. 由於需要說明專門的處理輸入信息的script描述函數, 在本指南中不討論 填充forms. 疑難解答避免標記重疊請看這個 HTML 例子: <B>This is an example of <DFN>overlapping</B> HTML tags.</DFN> overlapping 這個單詞被同時包含在 <B> 和 <DFN> 兩個標記中. 瀏覽器在這種情況下會無所適從,因而你可能得不到預期的效果. 通常情況下應該避免標記重疊. 檢查你的標記,讓它們成對出現. 成對使用的標記(顯然,結束標記可以省略的元素除外, 如段落標記) 中間不應該被打斷. 再看看上面的例子. 在中間的標記(DFN)尚未結束前,你不能使粗體標記<B>結束. 在你把文件放入服務器中之前,應該先檢查以下是否含有類似上述情況的錯誤. 只嵌入錨鏈和字符標記mbed Only Anchors and Character TagsHTML 協議允許你在其他 HTML 標記中嵌入超鏈: <H1><A HREF="Destination.html">My heading</A></H1> 不要 在一個錨鏈中嵌入 HTML 標記: <A HREF="Destination.html"><H1>My heading</H1></A> 儘管當前的多數瀏覽器能夠處理第二個例子, HTML 的正式說明是不支持這種結構的,你的文件也許在將來的瀏覽器中將發生問題. 記住,一個瀏覽器顯示不正確編碼的文件是可以被原諒的. 但是這種寬容可能不會延續到該軟件的下一個版本!當發生疑問時, 就根據 HTML 說明的規定來書寫 (參見下面的 其它信息 ). 字符標記可以用在其它元素中改變文本顯示模式: <UL><LI><B>A bold list item</B><LI><I>An italic list item</I></UL> 避免嵌入其它類型的 HTML 元素標記. 例如, 你可能想在一個列表中嵌入標題字體以增大一些字符的顯示: <UL><LI><H1>A large heading</H1><LI><H2>Something slightly smaller</H2></UL> 儘管有些瀏覽器可以很好地顯示這種編碼, 這種格式將來是否有效是很難說的,因為它是未定義的 . 為了保證對所有瀏覽器兼容, 你應該避免使用這種結構. (Netscape 支持一種 <FONT> 標記, 用於指定某個字符在瀏覽器中顯示的大小, 也不是當前官方 HTML 說明中的定義.) 在 <LI> 標記中插入 <B> 標記與在 <LI> 標記中插入 <H1> 標記有什麼不同呢? 在訦TML 語義說明中 <H1> 的含義是一個文檔中主標題字體的開始,它後面應該跟當前文檔的內容. 因此在一個列表中出現 <H1> 時是沒有含義的. 字符格式標記通常也不可以附加. 例如, 你可能想這樣寫: <B><I>some text</I></B> 期望得到一種加粗的斜體文本. 有些瀏覽器確實可以; 另外一些瀏覽器則只解釋最內層的標記. 最後的步驟 使你的編碼有效當你把一篇文檔放入一個 Web 服務器時, 要確保格式和每個鏈接正確(包括命名錨鏈在內). 理想的情況是在你認為一篇文檔完成了的時候讓其他人瀏覽一遍並且給出評論. 你可以通過 HTML 有效性服務來驗證你的文件是否符合目前普遍接受的 HTML 的標準. 如果你不知道你的文檔是否符合 HTML 說明, 這個服務是一個有用的教學工具. 這個服務允許你選擇一個校驗的級別(如, 嚴格校驗strict, 二級校驗level 2, 三級校驗level 3).如果你想使用一些非標準的格式,這種自由是很有用的. 替代圖像當<IMG SRC> 標記指向的圖像不存在時, 你的瀏覽器會使用一個替代圖像. 在你最後檢查你的文件時如果出現了這種情況, 應該確保所指向的圖像文件確實存在, 超鏈使用的 URL 信息正確, 以及文件屬性被正確設置(對所有人可讀). 然後再檢查一遍! 更新你的文件如果一個文件的內容是靜態的 (例如George Washington的個人傳記), 可能不會需要更新. 但是對於和時間關係密切的內容,或者包含的領域是經常變化的, 記住不斷更新你的文件! 當文件含有諸如每週計劃或事件的最後期限這一類信息時,更新是非常重要的. 刪除過時的文件或註明為什麼有些過期的信息依然在服務器中 (例如, 某個事件在下一輪中的要求和當前內容是相同的,所以該文件過一段時間後仍有參考價值). 瀏覽器的區別不同的 Web 瀏覽器顯示的 HTML 元素不盡相同. 記住不是所有的瀏覽器都能夠解釋 HTML 文件中所有的標記元素. 不過,瀏覽器對於不能識別的標記通常只是忽略而已. 你可能花費了很多時間是你的文件在你當前使用的瀏覽器上“看上去非常漂亮”. 如果你用另一個瀏覽器察看你的文件, 它很可能看起來不太一樣,甚至很不相同. 因此請記住這個建議:使用正確的 HTML 來書寫你的文件. 把解釋工作留給瀏覽器,爭取得到最好的效果. 註釋你的文件在你的HTML文件中你可能需要留一些註釋. HTML 中的註釋類似於計算機程序中的註釋--你輸入的文本不是用於給瀏覽器顯示的,讀者也無法直接看到它們,就像計算機程序中的註釋是不被程序本身使用的,程序使用者也看不到這些註釋. 不過,如果讀者看原始文件的話,將可以看到註釋. 一般的註釋包括更新文件的作者姓名, 生成一個文件所使用的軟件和其版本, 或者一些較小的改動信息等. 加入一段註釋的格式為: <!-- 註釋內容 --> 你必須包含歎號和連字符. 其他信息本指南只是一個關於 HTML 的簡介, 而不是一個詳盡的參考. 下面是一些其他的參考信息. 別忘了先到附近的書店查一查 Web 和 HTML 的書籍.
留言列表
