|
網站建設是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。
本文是創建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 編輯器的在線例表 (按應用平臺分類) ，幫助你尋找應用軟件. 把文件存放到服務器上
如果你在學�；蛘邌挝豢梢栽L問 Web 服務器, 和你的 WEB 管理員webmaster (維護服務器的人) 聯系，看看如何把你的文件存放到 Web 上. 否則，如果在學�；騿挝徊荒茉L問, 可以看看你的社區是否有 免費網絡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 個字符. BODY
HTML 文檔的第二部分，也是最大的部分是正文 body, 它含有你的文檔的內容 (顯示在你的瀏覽器窗口文本區的部分). 下面介紹的標記用在 HTML 文檔的正文 body 內. 標題字體Headings
HTML 有六級標題字體, 從 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 is
still 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 a
paragraph! </P> <P>And this is the second paragraph.</P> 為了保持 HTML 文件的可讀性, 標題字體應該獨占一行, 在開始一個新的部分之前加一到兩行空行，段落之間也用空行隔開( 除了用<P> 標記以外). 這些額外的空白在你編輯文件時將會有用 ( 但是你的瀏覽器將忽略這些空白因為它有自己的關于空白的規則，不依賴于你源文件中的空白). 注意: 結束標記 </P> 可以省略. 這是因為當瀏覽器遇到一個 <P> 標記時, 它認為前一個段落到此結束. 使用 <P> 和 </P> 作為段落標記使得你可以通過在源文件中使用 ALIGN=alignment 屬性使一個段落居中排列. <P ALIGN=CENTER>
這是一個居中的段落. [見下面的輸出形式]
</P> 這是一個居中的段落. 列表Lists
HTML 支持不編號 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 Applications
605 East Springfield Avenue
Champaign, Illinois 61820-5518
水平線Horizontal Rules
<HR> 標記產生一個和瀏覽器窗口等寬的水平線. 水平線對于你分割文檔中的各個部分很有用. 例如，很多人在他們的文本結束和 <address> 信息開始之前加一個水平線. 你可以改變一條線的尺寸 (粗) 和寬度 ( 水平線延伸長度占窗口的百分比). 你可以試著改變設置，直到對顯示效果滿意. 例如: <HR SIZE=4 WIDTH="50%"> 顯示為:
--------------------------------------------------------------------------------
字符格式
HTML 有針對單個字符或句子的兩種風格: 邏輯風格和物理風格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 可能不再支持物理風格, 這意味著瀏覽器將不解釋物理風格的編碼.大多數人在上網的時候，都會瀏覽網頁提供給我們的信息。
|
