《internet應(yīng)用教程》課件第8章

第8章網(wǎng)站建設(shè)與HTML語(yǔ)言簡(jiǎn)介8.1網(wǎng)站的建立8.2HTML語(yǔ)言的定義與結(jié)構(gòu)8.3超文本中的標(biāo)簽8.4文字控制8.5表格8.6文件之間的鏈接8.7插入圖像 8.1網(wǎng)?站?的?建?立

當(dāng)人們?cè)贗nternet世界里瀏覽那些內(nèi)容各異、精妙絕倫的網(wǎng)頁(yè)時(shí)可能會(huì)有這樣的想法，如此豐富多彩的網(wǎng)頁(yè)是怎樣編寫出來的呢?自己能夠做一個(gè)個(gè)人網(wǎng)頁(yè)在網(wǎng)上發(fā)布，讓所有的人看到嗎?本章將解決上述問題。建立網(wǎng)站的主要步驟如下：

(1)首先在Internet上申請(qǐng)一個(gè)免費(fèi)的主頁(yè)空間和域名。許多網(wǎng)站都提供這種免費(fèi)服務(wù)，但要求個(gè)人主頁(yè)能留出一定的空間以放置其廣告信息。如果是為一個(gè)企業(yè)建立網(wǎng)站，最好不要用這種免費(fèi)的主頁(yè)空間，因?yàn)檫@種空間的安全性較低。

(2)在自己的計(jì)算機(jī)上設(shè)計(jì)、制作網(wǎng)頁(yè)。

(3)當(dāng)網(wǎng)頁(yè)制作完成后，即可通過FTP客戶端軟件，將與網(wǎng)站相關(guān)的網(wǎng)頁(yè)文件、圖片文件、動(dòng)畫文件等上傳到Internet上。

(4)最后，將網(wǎng)站登記到搜索引擎上，為自己所做的網(wǎng)站進(jìn)行宣傳，以便Internet用戶對(duì)其進(jìn)行訪問。8.1.1網(wǎng)頁(yè)及網(wǎng)站設(shè)計(jì)概述

1.網(wǎng)頁(yè)

從專業(yè)角度看，網(wǎng)頁(yè)是一種用HTML撰寫的文檔，這種文檔可以在Internet上傳輸，能夠被瀏覽器接收并翻譯為能被普通人理解的頁(yè)面。

HTML的全文是“HyperTextMarkupLanguage”，中文意思為“超文本標(biāo)記語(yǔ)言”?！俺谋尽敝疙?yè)面內(nèi)除文本外，還可包含圖片、鏈接，甚至音頻、視頻等非文字元素。一般情況下，一個(gè)網(wǎng)站由很多的網(wǎng)頁(yè)組成，其中有一個(gè)比較特殊的網(wǎng)頁(yè)，即Internet用戶訪問網(wǎng)站時(shí)所看到的第一個(gè)網(wǎng)頁(yè)，稱做主頁(yè)(Homepage或HomePage)。瀏覽網(wǎng)頁(yè)時(shí)，當(dāng)移動(dòng)鼠標(biāo)到頁(yè)面某一位置時(shí)，如果鼠標(biāo)指針形狀變成一只小手的形狀，則此位置就是一個(gè)超鏈接。用鼠標(biāo)單擊此處，瀏覽器會(huì)顯示此超鏈接所指向的網(wǎng)頁(yè)。事實(shí)上，龐大的WWW資源庫(kù)中的所有信息，都是通過這種簡(jiǎn)單的、易于理解的方式組織起來的。在Internet上進(jìn)行網(wǎng)頁(yè)瀏覽的過程是這樣的：用戶通過瀏覽器將瀏覽請(qǐng)求發(fā)送給相關(guān)服務(wù)器；服務(wù)器收到請(qǐng)求后，根據(jù)請(qǐng)求的性質(zhì)和服務(wù)器所能提供的服務(wù)，確定在服務(wù)器上進(jìn)行何種處理，處理完成后，將處理結(jié)果用HTML格式文件返回給瀏覽器；瀏覽器收到返回的HTML文件后，根據(jù)HTML格式對(duì)其進(jìn)行解釋，并將解釋結(jié)果顯示在窗口中。如果被瀏覽的網(wǎng)頁(yè)中包含了音頻、視頻或其他瀏覽器不能處理的材料，則瀏覽器會(huì)提示用戶下載相應(yīng)的插件以完成屏幕輸出。圖8-1示意了瀏覽器與Web服務(wù)器之間的關(guān)系。圖8-1Web資源訪問過程

2.網(wǎng)站規(guī)劃設(shè)計(jì)

要想設(shè)計(jì)出好的網(wǎng)站，就要對(duì)網(wǎng)站有很好的規(guī)劃。規(guī)劃網(wǎng)站時(shí)，一般應(yīng)注意以下幾點(diǎn)：

(1)?HTML文件的顯示效果與其自身版本、瀏覽器對(duì)HTML的處理方法有關(guān)。不同的瀏覽器對(duì)同一HTML文件的處理方式不一定完全相同，因此，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)應(yīng)充分考慮到這一點(diǎn)，力求讓所有的瀏覽器都能正常瀏覽。

(2)在確定網(wǎng)站的總體結(jié)構(gòu)時(shí)，應(yīng)遵循“層次分明”的基本原則，應(yīng)盡量避免形成復(fù)雜的網(wǎng)狀結(jié)構(gòu)。網(wǎng)狀結(jié)構(gòu)不僅不利于用戶查找內(nèi)容，還會(huì)給網(wǎng)站維護(hù)、擴(kuò)充工作帶來麻煩。

(3)與普通文本相比，圖像、音頻和視頻能提供更加直接和豐富的信息，有效提高網(wǎng)站的吸引力。但是，圖像、音頻和視頻材料的數(shù)據(jù)量較大，無限制地使用這些材料會(huì)嚴(yán)重影響瀏覽速度。所以，對(duì)一般網(wǎng)站而言，在選取材料時(shí)，應(yīng)以文本信息為主，以多媒體材料為輔，最好是使多媒體材料只起到畫龍點(diǎn)睛的作用。

(4)對(duì)任何網(wǎng)站而言，主頁(yè)都是非常重要的。訪問者對(duì)網(wǎng)站的第一印象在很大程度上取決于其對(duì)主頁(yè)的感受，因此，應(yīng)竭盡全力對(duì)主頁(yè)進(jìn)行精雕細(xì)刻。

(5)網(wǎng)站的內(nèi)容要經(jīng)常更新。因?yàn)榫W(wǎng)站發(fā)布到網(wǎng)上，用戶第一次瀏覽會(huì)覺得有新鮮感，但如果過了一段時(shí)間網(wǎng)站毫無變化，就會(huì)失去“回頭客”。一般而言，網(wǎng)頁(yè)的訪問量與其更新速度是成正比的。在網(wǎng)頁(yè)上標(biāo)明最后更新日期并注明最新內(nèi)容是吸引用戶的有效辦法。

(6)網(wǎng)頁(yè)中的文本內(nèi)容應(yīng)簡(jiǎn)明扼要，為實(shí)現(xiàn)設(shè)計(jì)目標(biāo)服務(wù)。此外，還要注意行文規(guī)范，盡量避免出現(xiàn)錯(cuò)別字。

(7)網(wǎng)頁(yè)的內(nèi)容要符合國(guó)家計(jì)算機(jī)信息網(wǎng)絡(luò)安全保護(hù)管理辦法的規(guī)定，即在網(wǎng)頁(yè)中不能制作、復(fù)制和傳播下列信息：

·煽動(dòng)抗拒、破壞憲法和法律、行政法規(guī)實(shí)施的。

·煽動(dòng)顛覆國(guó)家政權(quán)，推翻社會(huì)主義制度的。

·煽動(dòng)分裂國(guó)家、破壞國(guó)家統(tǒng)一的。

·煽動(dòng)民族仇恨、民族歧視，破壞民族團(tuán)結(jié)的。

·捏造或者歪曲事實(shí)，散布謠言，擾亂社會(huì)秩序的。

·宣揚(yáng)封建迷信、淫穢、色情、賭博、暴力、兇殺、恐怖，教唆犯罪的。

·公然侮辱他人或者捏造事實(shí)誹謗他人的。

·損害國(guó)家機(jī)關(guān)信譽(yù)的。

·其他違反憲法和法律、行政法規(guī)的。

3.網(wǎng)頁(yè)的主要內(nèi)容

下面將對(duì)網(wǎng)頁(yè)中可能包含的內(nèi)容進(jìn)行簡(jiǎn)單介紹，這些內(nèi)容的具體實(shí)現(xiàn)和瀏覽效果將在后續(xù)內(nèi)容中進(jìn)行詳細(xì)介紹。網(wǎng)頁(yè)中的重要內(nèi)容有以下幾點(diǎn)：

(1)背景。背景是網(wǎng)頁(yè)最基本的內(nèi)容之一，設(shè)計(jì)者可以用所喜歡的顏色或圖片對(duì)網(wǎng)頁(yè)進(jìn)行裝飾，以強(qiáng)調(diào)網(wǎng)頁(yè)的整體風(fēng)格。此外，為了使整個(gè)頁(yè)面布局清晰，還可以加入水平分

割線。

(2)文本。文本是網(wǎng)頁(yè)中最主要的內(nèi)容。目前，由于網(wǎng)絡(luò)傳輸速度相對(duì)較低，瀏覽者常常關(guān)閉瀏覽器的圖像顯示功能，這就要求設(shè)計(jì)者設(shè)計(jì)文本的編排格式。與一般字處理軟件類似，網(wǎng)頁(yè)編輯軟件也可以設(shè)置頁(yè)面中文本的各種屬性，如字體、大小、顏色、字形等，此外，還可以設(shè)置段落格式，如行距、縮進(jìn)、對(duì)齊方式等。當(dāng)然，還可以將文本設(shè)置為超鏈接。

(3)表格。表格是將大量數(shù)據(jù)以簡(jiǎn)潔明快的方式展示給瀏覽者的有效方式。適當(dāng)使用表格，可以大幅度提高頁(yè)面空間的利用率。此外，表格還是進(jìn)行頁(yè)面布局的有力工具。

(4)框架?？蚣苁沁M(jìn)行頁(yè)面布局的另一工具。借助框架，可將頁(yè)面劃分為若干區(qū)域，其中每個(gè)區(qū)域都對(duì)應(yīng)一個(gè)獨(dú)立的HML文件，即可在不同的區(qū)域顯示不同的頁(yè)面。

(5)圖像。圖像是網(wǎng)頁(yè)吸引訪問者的重要手段。大小適中、制作精美的圖像能夠在很大程度上增加訪問者的訪問興趣。但是，如果圖像尺寸過大、顏色數(shù)目太多，則對(duì)于帶寬資源有限的訪問者而言，無疑是一種折磨。

(6)表單。表單用于從訪問者處獲取信息，如訪問者姓名，瀏覽、查詢要求等。當(dāng)訪問者將信息填入表單并將表單提交給服務(wù)器后，服務(wù)器就可以從中提取信息并交由相關(guān)程序進(jìn)行處理。

4.網(wǎng)頁(yè)的優(yōu)化

在完成網(wǎng)站建設(shè)的基本內(nèi)容后，應(yīng)對(duì)網(wǎng)站進(jìn)行優(yōu)化。未經(jīng)優(yōu)化的網(wǎng)站，很可能顏色失真，或者圖像數(shù)據(jù)量過大，或者對(duì)瀏覽器的兼容性太差，難以吸引用戶。

優(yōu)化的內(nèi)容大致包括：減少數(shù)據(jù)量、改善視覺效果、提高網(wǎng)站對(duì)瀏覽器的兼容性等。下面是幾個(gè)常用的優(yōu)化原則：

(1)正確選擇圖像格式。用于頁(yè)面的基本圖像格式有GIF和JPEG兩種。其中，GIF圖像最多可包含256種顏色，通常用于制作簡(jiǎn)潔的小圖像，如簡(jiǎn)單的按鈕、導(dǎo)航條和徽標(biāo)等；JPEG圖像可支持的顏色數(shù)可達(dá)16MB，采用有損壓縮方式而使圖像有所失真，通常用于存儲(chǔ)照片等。

(2)提供多個(gè)版本。網(wǎng)絡(luò)用戶遍布五湖四海，他們使用不同的語(yǔ)言、計(jì)算機(jī)、瀏覽器等。因此如果網(wǎng)站需要對(duì)多種類型的用戶開放，最好能提供多種版本。

(3)優(yōu)化配色方案。初做網(wǎng)頁(yè)的人可能會(huì)選擇用五顏六色的圖片作為背景，其實(shí)這樣做效果并不好。一些知名公司的網(wǎng)站多數(shù)是以白、藍(lán)或黃色為基本色，再點(diǎn)綴一些其他顏色，使整個(gè)頁(yè)面顯得典雅、溫馨又活潑。

(4)突出網(wǎng)站特點(diǎn)。網(wǎng)站內(nèi)容要有特點(diǎn)、有新意，否則所制作的站點(diǎn)將會(huì)淹沒在茫茫的Internet大海里。8.1.2網(wǎng)頁(yè)空間的申請(qǐng)

要建立網(wǎng)站首先必須在Internet上獲得一塊存儲(chǔ)網(wǎng)站的空間。目前有兩種方式可獲得存儲(chǔ)空間：一種是租用虛擬主機(jī)，另一種是申請(qǐng)免費(fèi)空間。

租用虛擬主機(jī)需要支付費(fèi)用，一般用于商業(yè)用途，適合公司、企業(yè)和有特殊需要的個(gè)人。幾乎所有Internet服務(wù)提供商(ISP)均提供租用虛擬主機(jī)服務(wù)，有的ISP還提供制作、維護(hù)網(wǎng)頁(yè)的服務(wù)。

Internet上有許多站點(diǎn)提供免費(fèi)的地址空間，申請(qǐng)免費(fèi)空間不需付費(fèi)，但空間提供者一般會(huì)要求用戶在網(wǎng)頁(yè)上放置其廣告。

1.選擇免費(fèi)網(wǎng)頁(yè)空間的原則

在Internet上，提供免費(fèi)個(gè)人網(wǎng)頁(yè)存放空間的站點(diǎn)很多，用戶可以根據(jù)自己的需要進(jìn)行選擇。一般來說，這些站點(diǎn)提供的具體服務(wù)千差萬別。有的僅提供空間，有的還附帶提供免費(fèi)的域名、郵箱、計(jì)數(shù)器、聊天室、BBS論壇、留言板、ASP(動(dòng)態(tài)服務(wù)端網(wǎng)頁(yè))或PHP運(yùn)行環(huán)境等。有的允許用戶將主頁(yè)用FTP方式直接上傳，有的則只能通過E-mail方式來發(fā)送主頁(yè)。一般提供免費(fèi)空間的網(wǎng)站都限制使用空間。如何選擇一個(gè)理想的免費(fèi)空間呢?這里給出以下幾個(gè)基本原則：

(1)首先要測(cè)算一下自己所制作的網(wǎng)站大致要多少存儲(chǔ)空間，然后到相應(yīng)的站點(diǎn)去申請(qǐng)。

(2)所選擇的網(wǎng)站附帶的免費(fèi)服務(wù)越多越好，最好能提供留言板、電子郵箱等等。

(3)所申請(qǐng)的網(wǎng)站最好支持ASP或PHP，并且還可以掛接數(shù)據(jù)庫(kù)，這樣就可以按照自己的要求，自行設(shè)計(jì)有特色的交互網(wǎng)頁(yè)。

(4)訪問速度越快越好。要了解一下ISP與Internet的連接帶寬(連接帶寬越寬越好)，這會(huì)影響到瀏覽者訪問網(wǎng)站的速度。

(5)一定要選擇能用ISP方式上傳網(wǎng)頁(yè)文件的站點(diǎn)，以便對(duì)網(wǎng)站進(jìn)行維護(hù)。

(6)應(yīng)選擇信譽(yù)度高的免費(fèi)服務(wù)站點(diǎn)。否則辛辛苦苦制作的網(wǎng)站，可能在未獲任何事先通知的情況下就被刪除。

2.如何查找提供免費(fèi)個(gè)人網(wǎng)頁(yè)的站點(diǎn)

用戶可以利用搜索引擎來查找提供免費(fèi)個(gè)人網(wǎng)頁(yè)的站點(diǎn)。例如，在瀏覽器的地址欄中輸入http://serch.163.com/，啟動(dòng)網(wǎng)易搜索引擎，然后依次選擇“電腦網(wǎng)絡(luò)”→“免費(fèi)資源”→“免費(fèi)建站”，就會(huì)出現(xiàn)與圖8-2類似的頁(yè)面，這是用網(wǎng)易搜索引擎查找到的可提供免費(fèi)網(wǎng)頁(yè)空間的站點(diǎn)。圖8-2網(wǎng)易查詢結(jié)果

3.申請(qǐng)免費(fèi)網(wǎng)頁(yè)空間

一般說來，國(guó)外站點(diǎn)提供的網(wǎng)頁(yè)空間較大，服務(wù)也多一些，但國(guó)外站點(diǎn)大都是外文的，所以若需建立漢語(yǔ)網(wǎng)頁(yè)，應(yīng)盡可能在國(guó)內(nèi)申請(qǐng)站點(diǎn)。

不同的免費(fèi)空間提供商所支持的申請(qǐng)方式大致相同，用戶只需訪問其網(wǎng)站中相應(yīng)的服務(wù)頁(yè)面，按要求填寫一些必要的資料，即可完成申請(qǐng)。8.1.3上傳網(wǎng)頁(yè)

上傳網(wǎng)頁(yè)就是把在本地計(jì)算機(jī)做好的網(wǎng)頁(yè)傳送到已被獲準(zhǔn)使用的Web服務(wù)器上，以供訪問者瀏覽。用于上傳的文件很多，這里以LeapFTP為例來說明。

LeapFTP是一個(gè)功能豐富、性能穩(wěn)定、操作簡(jiǎn)單的LeapFTP客戶端軟件，十分適合一般用戶使用。很多提供軟件下載服務(wù)的網(wǎng)站都提供LeapFTP安裝程序供用戶自由下載。利用LeapFTP上傳網(wǎng)頁(yè)的一般步驟如下：

(1)下載LeapFTP安裝程序，將其安裝在本地計(jì)算機(jī)上。

(2)啟動(dòng)如圖8-3所示的LeapFTP程序窗口。LeapFTP是一個(gè)Windows風(fēng)格的應(yīng)用程序，其屏幕構(gòu)成自上而下為菜單欄、工具欄、連接參數(shù)設(shè)置欄、工作區(qū)和狀態(tài)欄。圖8-3LeapFTP屏幕構(gòu)成

(3)在服務(wù)器網(wǎng)址欄輸入空間提供商提供的FTP地址、用戶名(User)、口令(Pass)和端口號(hào)(Port)，然后單擊“連接到服務(wù)器(Connecttoserver)”按鈕，建立連接。

(4)連接成功后，LeapFTP窗口與圖8-4類似。在用戶工作區(qū)中，左上方窗格中為本地目錄，右上方窗格中為可訪問的遠(yuǎn)程目錄(該目錄的實(shí)際位置可能距本地有萬里之遙)，在這兩個(gè)窗格中，可以很方便地進(jìn)行目錄切換，就像在資源管理器中操作一樣。圖8-4利用LeapFTP訪問遠(yuǎn)程目錄

(5)完成上傳后，單擊“斷開連接”按鈕，斷開與服務(wù)器的連接，然后退出LeapFTP。

在默認(rèn)狀態(tài)下，LeapFTP會(huì)自動(dòng)記錄用戶的登錄信息(包括FTP地址、用戶名、口令和端口號(hào))，以備今后使用。如果不希望其他人利用剛才輸入的登錄信息登錄服務(wù)器的話，可選擇“Tools”菜單中的“ClearLoginHistory”清除所有的登錄數(shù)據(jù)，或者在登錄前，關(guān)閉LeapFTP的自動(dòng)記錄登錄歷史的功能(具體步驟是，依次選擇“Options”→“Preference”→“Genaral”→“Options”，取消對(duì)“KeepLoginHistor”的選擇)。在上傳網(wǎng)頁(yè)文件時(shí)應(yīng)注意以下幾個(gè)方面的問題。

(1)設(shè)計(jì)的網(wǎng)站中的所有文件都要全部上傳(包括圖片文件等)。

(2)網(wǎng)頁(yè)文件在進(jìn)行超級(jí)鏈接時(shí)一定要使用相對(duì)路徑。

(3)務(wù)必將網(wǎng)頁(yè)的主頁(yè)文件名設(shè)為空間提供商所指定的文件名，通常為index.htm或default.htm。需要特別強(qiáng)調(diào)的是在為網(wǎng)頁(yè)、圖片和動(dòng)畫文件命名時(shí)，最好全部用英文名字，如果用中文名，當(dāng)把它發(fā)布到網(wǎng)上后，就可能會(huì)出現(xiàn)錯(cuò)誤。

(4)如果空間提供商所提供的Web服務(wù)器是基于UNIX等對(duì)文件名中字符大小寫敏感的操作系統(tǒng)，則應(yīng)保證網(wǎng)站各處的文件名(包括HTML文件中作為鏈接目標(biāo)的文件名)是嚴(yán)格一致的，否則就會(huì)出現(xiàn)“找不到文件”之類的錯(cuò)誤。

在對(duì)網(wǎng)頁(yè)進(jìn)行更新和維護(hù)時(shí)，其操作步驟與上傳網(wǎng)頁(yè)的操作基本上相同，不同之處就是維護(hù)或更新網(wǎng)頁(yè)時(shí)，只需上傳那些修改過的網(wǎng)頁(yè)文件，沒有變化的網(wǎng)頁(yè)文件則無需重傳。

對(duì)于那些不再需要的網(wǎng)頁(yè)文件，應(yīng)及時(shí)刪除以節(jié)約存儲(chǔ)空間。

此外，應(yīng)該在規(guī)定的期限內(nèi)上傳或更新網(wǎng)頁(yè)，否則有的空間提供商會(huì)收回網(wǎng)頁(yè)的帳號(hào)。同時(shí)，應(yīng)該將自己的網(wǎng)站在本地硬盤上進(jìn)行備份，以備發(fā)生意外時(shí)重新上傳。 8.2HTML語(yǔ)言的定義與結(jié)構(gòu)

8.2.1HTML的定義

HTML是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)(如UNIX、WINDOWS等)。1990年以來，HTML就一直被用作WorldWideWeb的信息表示語(yǔ)言，用于描述Homepage的格式設(shè)計(jì)和它與WWW上其他Homepage的連接信息。使用HTML語(yǔ)言描述的文件，需要通過WWW瀏覽器顯示出效果。

所謂超文本，不僅可以加入圖片、聲音、動(dòng)畫、影視等內(nèi)容，還可以從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件，與世界各地主機(jī)的文件連接。

·通過HTML可以表現(xiàn)出豐富多彩的設(shè)計(jì)風(fēng)格

圖片調(diào)用：<IMGSRC="文件名">

文字格式：<FONTSIZE="+5"COLOR="00FFFF">文字</FONT>

·通過HTML可以實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn)

頁(yè)面跳轉(zhuǎn)：〈AHREF="文件路徑/文件名"></A>

·通過HTML可以展現(xiàn)多媒體的效果

聲頻：<EMBEDSRC="音樂文件名"AUTOSTART=true>

視頻：<EMBEDSRC="視頻文件名"AUTOSTART=true>8.2.2HTML的基本結(jié)構(gòu)

超文本文檔分文檔頭和文檔體兩部分。在文檔頭里，對(duì)這個(gè)文檔進(jìn)行了一些必要的定義，文檔體中是要顯示的各種文檔信息。具體格式如下：

<HTML>

<HEAD>

頭部信息

</HEAD>

<BODY>

文檔主體，正文部分

</BODY>

</HTML>其中，<HTML>在最外層，表示這對(duì)標(biāo)記間的內(nèi)容是HTML文檔。我們還會(huì)看到一些Homepage省略<HTML>標(biāo)記，因?yàn)?.html或?.htm文件被Web瀏覽器默認(rèn)為是HTML文檔。<HEAD>之間包括文檔的頭部信息，如文檔總標(biāo)題等，若不需頭部信息則可省略此標(biāo)記。<BODY>標(biāo)記一般不省略，表示正文內(nèi)容的開始。例8-1下面是一個(gè)最基本的超文本文檔的源代碼：

<HTML>

<HEAD>

<TITLE>一個(gè)簡(jiǎn)單的HTML示例</TITLE>

</HEAD>

<BODY>

<CENTER>

<H3>歡迎光臨我的主頁(yè)</H3>

<BR>

<HR>

<FONTSIZE=2>

這是我第一次做主頁(yè),我會(huì)加油的,好好學(xué)習(xí)!

</FONT>

</CENTER>

</BODY>

</HTML>在編寫一個(gè)HTML文件時(shí)，我們需要一個(gè)文本編輯器，如果使用的是Macintosh系統(tǒng)，那么文字編輯器可能是AimpleText，這個(gè)軟件完全能夠滿足我們當(dāng)前的要求。如果使用Windows系統(tǒng)，文字編輯器應(yīng)該是Notepad(當(dāng)然也可以使用其他的一些網(wǎng)頁(yè)制作工具)。請(qǐng)將其中一種文本編輯器打開并建立一個(gè)新的空白文件，然后向其中輸入一些HTML代碼。例如在Notepad中輸入上述的代碼，輸入完畢后保存為?.html或?.htm文件(在Windows系統(tǒng)下，保存成?.htm),則就是網(wǎng)頁(yè)文件，雙擊此網(wǎng)頁(yè)文件可以查看該代碼在瀏覽器中的運(yùn)行結(jié)果。圖8-5在瀏覽器中出現(xiàn)的結(jié)果 8.3超文本中的標(biāo)簽

8.3.1標(biāo)簽

1.單標(biāo)簽

某些標(biāo)記稱為“單標(biāo)簽”，因?yàn)樗恍鑶为?dú)使用就能完整地表達(dá)意思，這類標(biāo)記的語(yǔ)法是：<標(biāo)簽名稱>。如最常用的單標(biāo)簽是<BR>，它表示換行。

2.雙標(biāo)簽

另一類標(biāo)記稱為“雙標(biāo)簽”，它由“始標(biāo)簽”和“尾標(biāo)簽”兩部分構(gòu)成，必須成對(duì)使用，其中始標(biāo)簽告訴Web瀏覽器從此處開始執(zhí)行該標(biāo)記所表示的功能，而尾標(biāo)簽告訴Web瀏覽器在這里結(jié)束該功能。始標(biāo)簽前加一個(gè)斜杠(/)即成為尾標(biāo)記，這類標(biāo)記的語(yǔ)法是：

<標(biāo)簽>內(nèi)容</標(biāo)簽>

其中“內(nèi)容”部分就是要被這對(duì)標(biāo)記施加作用的部分。例如你想突出對(duì)某段文字的顯示，就將此段文字放在一對(duì)<EM></EM>標(biāo)記中，如<EM>第一名</EM>。

3.標(biāo)簽屬性

許多單標(biāo)記和雙標(biāo)記的始標(biāo)記內(nèi)可以包含一些屬性，其語(yǔ)法是：

<標(biāo)簽名字屬性1屬性2屬性3…>

各屬性之間無先后次序，屬性也可省略(即取默認(rèn)值)，例如單標(biāo)記<HR>表示在文檔當(dāng)前位置畫一條水平線(horizontalline)，一般是從窗口中當(dāng)前行的最左端一直畫到最右端。帶一些屬性：

<HRSIZE=3ALIGN=LEFTWIDTH="75%">其中，SIZE屬性定義線的粗細(xì)，屬性值取整數(shù)，缺省為1；ALIGN屬性表示對(duì)齊方式，可取LEFT(左對(duì)齊，缺省值)，CENTER(居中)，RIGHT(右對(duì)齊)；WIDTH屬性定義線的長(zhǎng)度，可取相對(duì)值，(由一對(duì)""號(hào)括起來的百分?jǐn)?shù)，表示相對(duì)于充滿整個(gè)窗口的百分比)，也可取絕對(duì)值(用整數(shù)表示的屏幕像素點(diǎn)的個(gè)數(shù)，如WIDTH=300)，缺省值是"100%"。8.3.2標(biāo)題

一般文章都有標(biāo)題、副標(biāo)題、章和節(jié)等結(jié)構(gòu)，HTML中也提供了相應(yīng)的標(biāo)題標(biāo)簽<Hn>,其中n為標(biāo)題的等級(jí)，n越小，標(biāo)題字號(hào)就越大，以下列出所有等級(jí)的標(biāo)題：

<H1>…</H1>第一級(jí)標(biāo)題

<H2>…</H2>第二級(jí)標(biāo)題

<H3>…</H3>第三級(jí)標(biāo)題

<H4>…</H4>第四級(jí)標(biāo)題

<H5>…</H5>第五級(jí)標(biāo)題

<H6>…</H6>第六級(jí)標(biāo)題下面是一組標(biāo)題的超文本文檔的源代碼。

<html>

<head>

<title>學(xué)習(xí)標(biāo)題</title>

</head>

<body>

這是一行普通文字<P>

<H1>這個(gè)是一級(jí)標(biāo)題</H1>

<H2>這個(gè)是二級(jí)標(biāo)題</H2>

<H3>這個(gè)是三級(jí)標(biāo)題</H3>

<H4>這個(gè)是四級(jí)標(biāo)題</H4>

<H5>這個(gè)是五級(jí)標(biāo)題</H5>

<H6>這個(gè)是六級(jí)標(biāo)題</H6>

</body>

</html>在瀏覽器中查看的結(jié)果如圖8-6所示。從結(jié)果可以看出，每一個(gè)標(biāo)題的字體為黑體字，內(nèi)容文字前后都插入空行。圖8-6瀏覽器結(jié)果8.3.3線段

使用線段標(biāo)簽可以在屏幕上顯示一條水平線，用以分割頁(yè)面中的不同部分。線段標(biāo)簽<HR>有以下四個(gè)屬性：

size線段的寬度；

width線段的長(zhǎng)度，用占屏幕寬度的百分比或像素值來表示；

align線段的對(duì)齊方式，有LEFT、RIGHT、CENTER三種值；

noshade線段無陰影屬性，為實(shí)心線段。我們可以用一個(gè)例子來說明線段的用法。

<HTML>

<HEAD>

<TITLE>線段粗細(xì)的設(shè)定</TITLE>

</HEAD>

<BODY>

<P>這是第一條線段，無size設(shè)定，取內(nèi)定值SIZE=1來顯示<BR>

<HR>

<P>這是第二條線段，SIZE=10<BR>

<HRSIZE=10>

<P>這是第三條線段，無WIDTH設(shè)定，取WIDTH內(nèi)定值100%來顯示<BR>

<HRSIZE=3>

<P>這是第四條線段，WIDTH=50(點(diǎn)數(shù)方式)<BR>

<HRWIDTH=50SIZE=5>

<P>這是第五條線段，WIDTH=50%(百分比方式)<BR>

<HRWIDTH=50%SIZE=7>

<P>這是第六條線段，無ALIGN設(shè)定，(取默認(rèn)值CENTER顯示)<BR>

<HRWIDTH=40%SIZE=6>

<P>這是第七條線段，是左對(duì)齊<BR>

<HRWIDTH=60%ALIGN=LEFT>

<P>這是第八條線段，是右對(duì)齊<BR>

<HRWIDTH=80%SIZE=3ALIGN=RIGHT>

<P>這是第九條線段，無NOSHADE設(shè)定，取默認(rèn)值無陰影效果來顯示<BR>

<HRWIDTH=80%SIZE=5>

<P>這是第十條線段，有NOSHADE設(shè)定<BR>

<HRWIDTH=80%SIZE=7ALIGN=LEFTNOSHADE>

</BODY>

</HTML>圖8-7線段設(shè)置瀏覽效果 8.4文字控制

8.4.1字體

HTML提供了定義字體的功能，用FACE屬性來完成這個(gè)工作。FACE的屬性值可以是本機(jī)上的任一字體類型，但有一點(diǎn)麻煩的是，只有對(duì)方的電腦中裝有相同的字體才可以在對(duì)方的瀏覽器中出現(xiàn)用戶預(yù)先設(shè)計(jì)的風(fēng)格。文字字體設(shè)置格式如下：

<fontface="字體">

為了讓文字富有變化，或者為了刻意強(qiáng)調(diào)某一部分，HTML提供了一些標(biāo)簽產(chǎn)生這些效果，現(xiàn)將常用的標(biāo)簽列舉如下：8.4.2文字顏色

頁(yè)面中五顏六色的漂亮的文字可以增加網(wǎng)頁(yè)的顯示效果。給文字設(shè)置顏色的格式如下：

<fontcolor=color_value>…</font>

這里的顏色值可以是一個(gè)十六進(jìn)制數(shù)(用“#”作為前綴)，也可以是以下16種顏色名稱。8.4.3位置控制

通過ALIGN屬性可以選擇文字或圖片的對(duì)齊方式，left表示向左對(duì)齊，right表示向右對(duì)齊，center表示居中?；菊Z(yǔ)法如下：

<DIVALIGN=#>#＝left／right／center

<HTML>

<HEAD>

<TITLE>字體</TITLE>

</HEAD>

<BODY>

<h1>字體設(shè)置</h1>

<FONTface="楷體_GB2312">體會(huì)學(xué)習(xí)的樂趣</FONT>

<FONTface="宋體">體會(huì)學(xué)習(xí)的樂趣</FONT>

<FONTface="仿宋_GB2312">體會(huì)學(xué)習(xí)的樂趣</FONT>

<FONTface="黑體">體會(huì)學(xué)習(xí)的樂趣</FONT><br>

<FONTface="Arial">whatbeautifulflowers!</FONT>

<FONTface="ComicSansMS">whatbeautifulflowers!</FONT><br>

<p>

<I>這里是斜體字</I>

<U>這里有下劃線</U>

<B>這里是黑體字</B><br>

<BIG>這里是大型字體</BIG>

<SMALL>這里是小型字體</SMALL>

<BLINK>這里有閃爍效果</BLINK><br>

<EM>Welcometohere</EM>

<CITE>Welcometohere</CITE>

<STRONG>Welcometohere</STRONG><br>

<h1>文字顏色設(shè)置</h1>

<FONTCOLOR=RED>這里色彩斑斕</FONT><BR>

<FONTCOLOR=WHITE>這里色彩斑斕</FONT><BR>

<FONTCOLOR=#00FFFF>這里色彩斑斕</FONT><BR>

<FONTCOLOR=#FFFF00>這里色彩斑斕</FONT><BR>

<FONTCOLOR=#FFFFFF>這里色彩斑斕</FONT><BR>

<FONTCOLOR=#00FF00>這里色彩斑斕</FONT><BR>

<FONTCOLOR=#C0C0C0>這里色彩斑斕</FONT><BR>

<h1>文字對(duì)齊設(shè)置</h1>

<divalign=left>

這里是左對(duì)齊<br>

<divalign=right>

這里是右對(duì)齊<br>

<divalign=center>

這里是居中對(duì)齊<br>

</BODY>

</HTML>圖8-8字體設(shè)置瀏覽效果 8.5表格

8.5.1表格的基本結(jié)構(gòu)

在表格中的常用標(biāo)簽有下面幾種：

<table>...</table>定義表格

<caption>...</caption>定義標(biāo)題

<tr>定義表行

<th>定義表頭

<td>定義表元(表格的具體數(shù)據(jù))8.5.2表格尺寸設(shè)置

1.表格的大小

一般情況下，表格的總長(zhǎng)度和總寬度是根據(jù)各行和各列的總和自動(dòng)調(diào)整的，如果我們要直接固定表格的大小，可以使用下列方式：

<tablewidth=n1height=n2>

其中，width和height屬性分別指定表格固定的寬度和長(zhǎng)度，n1和n2可以用像素來表示，也可以用百分比(與整個(gè)屏幕相比的大小比例)來表示。

例如下面的代碼表示一個(gè)長(zhǎng)為200像素，寬為100像素的表格。

<tablewidth="200"height="100">

下面的代碼表示一個(gè)長(zhǎng)為屏幕的20%，寬為屏幕的10%的表格。

<tablewidth=20%height=10%>

2.表格邊框尺寸設(shè)置

邊框是用border屬性來體現(xiàn)的，它表示表格的邊框邊厚度和框線。將border設(shè)成不同的值，有不同的效果。

3.格間線寬度

格與格之間的線為格間線，它的寬度可以使用<TABLE>中的CELLSPACING屬性加以調(diào)節(jié)。格式是：

<TABLE

CELLSPACING=#>

#表示要取用的像素值

4.內(nèi)容與格線之間的寬度

我們還可以在<TABLE>中設(shè)置CELLPADDING屬性，用來規(guī)定內(nèi)容與格線之間的寬度。格式為：

<TABLECELLPADDING=#>

其中，#表示要取用的像素值。8.5.3表格內(nèi)文字的對(duì)齊和布局

表格中數(shù)據(jù)的排列方式有兩種，分別是左右排列和上下排列。左右排列是以ALIGN屬性來設(shè)置，而上下排列則由VALIGN屬性來設(shè)置。其中左右排列的位置可分為三種：居左(left)、居右(right)和居中(center)；而上下排列基本上比較常用的有四種：上齊(top)、居中(middle)、下齊(bottom)和基線(baseline)。

左右排列語(yǔ)法如下：

<tralign=#>

<thalign=#>

<tdalign=#>

其中，#=left/center/right上下排列語(yǔ)法如下：

<trvalign=#>

<thvalign=#>

<tdvalign=#>

其中，#=top/middle/bottom/baseline

例如下列源代碼的顯示結(jié)果如圖8-9所示。

<tableborder=1width="250">

<caption>水果訂單</caption>

<tr><th>西瓜</th><th>葡萄</th><th>香蕉</th><th>芒果</th>

<tr><td>400Kg</td><td>100Kg</td><td>200Kg</td><td>150Kg</td>

</table>

<tableborder=4width=350>

<caption>水果訂單</caption><tr><th>西瓜</th><th>葡萄</th><th>香蕉</th><th>芒果</th>

<tr><td>400公斤</td><td>100公斤</td><td>200公斤</td><td>150公斤</td>

</table>

<tableborder=0

width="250">

<caption>水果訂單</caption>

<tr><th>西瓜</th><th>葡萄</th><th>香蕉</th><th>芒果</th>

<tr><td>400Kg</td><td>100Kg</td><td>200Kg</td><td>150Kg</td>

</table>

<tableborder=3cellspacing=7>

<caption>水果訂單</caption><tr><th>西瓜</th><th>葡萄</th><th>香蕉</th><th>芒果</th>

<tr><td>400Kg</td><td>100Kg</td><td>200Kg</td><td>150Kg</td>

</table>

<tableborder=3cellpadding=6>

<caption>水果訂單</caption>

<tr><th>西瓜</th><th>葡萄</th><th>香蕉</th><th>芒果</th>

<tr><td>400Kg</td><td>100Kg</td><td>200Kg</td><td>150Kg</td>

</table>

<tableborder=1width="200">

<tr><th>居左</th><th>居中</th><th>居右</th>

<tr><tdalign=left>你</td><tdalign=center>好</td><tdalign=right>嗎</td>

</table>

<tableborder=1width="250"heith="100">

<tr><thheight="50">上齊</th><th>居中</th><th>下齊</th><th>基線</th>

<tr><tdvalign=topheight="50">很</td><tdvalign=middle>好</td><tdvalign=bottom>謝</td><tdvalign=baseline>謝</td>

</table>圖8-9表格設(shè)置瀏覽效果 8.6文件之間的鏈接

超文本中的鏈接是其最重要的特性之一，使用者可以從一個(gè)頁(yè)面直接跳轉(zhuǎn)到其他的頁(yè)面、圖像或者服務(wù)器。一個(gè)鏈接的基本格式如下：

<AHREF="資源地址">鏈接文字</A>

其中標(biāo)簽<A>表示一個(gè)鏈接的開始，</A>表示鏈接的結(jié)束；屬性“HREF”定義了這個(gè)鏈接所指的地方；通過點(diǎn)擊“鏈接文字”可以到達(dá)指定的文件。

例如，下列代碼的顯示結(jié)果如圖8-10、8-11所示。

<AHREF="">常州信息職業(yè)技術(shù)學(xué)院</A>圖8-10顯示結(jié)果(一)也就是在頁(yè)面上有一行文字“常州信息職業(yè)技術(shù)學(xué)院”，單擊它可以打開網(wǎng)頁(yè)，如圖8-11所示。圖8-11顯示結(jié)果(二)8.6.1本地鏈接

對(duì)同一臺(tái)機(jī)器上的不同文件進(jìn)行的連接稱為本地鏈接，它使用UNIX或DOS系統(tǒng)中文件路徑的表示方法，采用絕對(duì)路徑或相對(duì)路徑來指示一個(gè)文件。

例如，我們現(xiàn)在正在瀏覽的這一頁(yè)的絕對(duì)路徑是：c:\book\Internet應(yīng)用與網(wǎng)頁(yè)制作基礎(chǔ)\link01.htm。而這一頁(yè)相對(duì)于當(dāng)前目錄即“Internet應(yīng)用與網(wǎng)頁(yè)制作基礎(chǔ)”的相對(duì)路徑是：link01.htm如果是瀏覽“Internet應(yīng)用與網(wǎng)頁(yè)制作基礎(chǔ)”之外的一頁(yè)，該文件路徑要以兩個(gè)圓點(diǎn)(..)來表示上一層目錄：../../internet/IP地址?，F(xiàn)在我們把這幾種路徑的表示方法寫入鏈接中：

以絕對(duì)路徑表示：<AHREF="/c:\book\Internet應(yīng)用與網(wǎng)頁(yè)制作基礎(chǔ)\link01.htm">文件的鏈接</A>

相對(duì)路徑表示：<AHREF="link01.htm">文件的鏈接</A>

鏈接上一目錄中的文件：<AHREF="../../Internet/IP地址">IP地址</A>

一般情況下，我們是不用絕對(duì)路徑的，因?yàn)槲覀兊馁Y源常常是放在網(wǎng)上供其他人瀏覽的，寫成絕對(duì)路徑，當(dāng)我們把整個(gè)目錄中的所有文件都移植到服務(wù)器上時(shí)，帶有C:的資源地址用戶將無法訪問到。所以我們最好寫成相對(duì)路徑，避免了重新修改文件資源路徑的麻煩。8.6.2URL鏈接

如果鏈接的文件在其他服務(wù)器上，我們就要弄清我們所指向的文件采用的是哪一種URL地址。URL的意思是統(tǒng)一資源定位器，通過它可以以多種通信協(xié)議與外界溝通來存取

信息。

URL鏈接的形式是：協(xié)議名：//主機(jī).域名/路徑/文件名其中協(xié)議包括：

file 本地系統(tǒng)文件

http

WWW服務(wù)器

ftp

ftp服務(wù)器

telnet 基于TELNET的協(xié)議

mailto 電子郵件

news