WWW主頁制作實(shí)驗(yàn)

WWW主頁制作實(shí)驗(yàn)

一、實(shí)驗(yàn)?zāi)康?br>1 了解和掌握WWW服務(wù)器的構(gòu)成；

2 學(xué)習(xí)HTML語言的格式和使用；

3 了解WWW網(wǎng)絡(luò)服務(wù)使用的新技術(shù)。

二、預(yù)備知識
1、WWW簡介
??? WWW產(chǎn)生的背景是Inetrnet。概括地說，WWW是一個基于Inetrnet的、全球連接的、分布的、動態(tài)的、多平臺的交互式圖形超文本信息系統(tǒng)。它利用多種協(xié)議去傳輸和顯示駐留在世界各地計算機(jī)上的多媒體信息源，與WWW服務(wù)器一起為Inetrnet提供“分布式客戶機(jī)/服務(wù)器”的運(yùn)行環(huán)境。

??? WWW網(wǎng)由三部分組成，即服務(wù)器、瀏覽器和通信協(xié)議。瀏覽器是每位終端用戶所使用的通向WWW網(wǎng)的窗口。瀏覽器用來處理用戶對文檔的請求，它按一定方式聯(lián)通遠(yuǎn)程信息源并從中取回所需的信息，顯示在用戶的屏幕上。WWW網(wǎng)服務(wù)器負(fù)責(zé)向?yàn)g覽器提供所需的服務(wù)，當(dāng)它與某個瀏覽器建立連接之后，它監(jiān)聽瀏覽器發(fā)出的請求，并向?yàn)g覽器傳送所需的信息，這些信息可以是從服務(wù)器磁盤中取出的，也可能是臨時拼湊起來的（比如一系列查詢結(jié)果）。

??? WWW網(wǎng)可以使用不同的數(shù)據(jù)傳輸協(xié)議獲取信息。當(dāng)瀏覽器與WWW網(wǎng)服務(wù)器打交道時，它們使用WWW網(wǎng)本身的協(xié)議——超文本傳輸協(xié)議HTTP（HyperText Transfer Protocol）。除HTTP以外，瀏覽器也可以與使用其它協(xié)議的其它服務(wù)器進(jìn)行數(shù)據(jù)交換，這些協(xié)議包括：

FTP即文件傳輸協(xié)議，這是互聯(lián)網(wǎng)上最古老的也是用得最廣的文件傳輸手段。

Gopher：這是美國明尼蘇達(dá)大學(xué)始創(chuàng)的校園網(wǎng)信息傳輸協(xié)議。

NNTP：這是Usenet消息組所使用的消息閱讀和發(fā)送協(xié)議。

WAIS：這是ThinkingMachines公司創(chuàng)立的文檔查詢和獲取協(xié)議。

Telnet：這是傳統(tǒng)的基于字符設(shè)備的通信協(xié)議。

SMTP：這是電子郵件使用的電子信息協(xié)議。

WWW網(wǎng)的頁是WWW網(wǎng)信息組織的基本單位。要WWW網(wǎng)頁的功能，必須有一種能支持這些功能的語言來描述。這個語言就是WWW網(wǎng)的超文本置標(biāo)語言HTML（HyperText Markup Language)。WWW網(wǎng)頁的作者必須按這種語言來書寫自己的網(wǎng)頁。

2、HTML語言簡介
??? HTML（HyperText Markup Language超文本標(biāo)注語言）是WWW（World Wide Web環(huán)球網(wǎng)）上的專用語言。讀者訪問的所有的Web文檔，以及在Web瀏覽器上看到的每一份資料都是基于HTML語言的。它是使用Internet的基礎(chǔ)，是HTTP（HyperText Transfer Protocal超文本傳輸協(xié)）的一個部分。

??? HTML文件是簡單的純文本文件（全ASCII文件），在MIME（Multipurpose Internet Mail Extensions多用途交互網(wǎng)絡(luò)郵件擴(kuò)展標(biāo)準(zhǔn)）機(jī)制中使用.html(或.htm)擴(kuò)展名。其主要特征是在文本中有HTML標(biāo)注符。HTML語言的優(yōu)點(diǎn)是標(biāo)注簡單明了，功能強(qiáng)大?？梢远x文件的顯示格式、標(biāo)題、字型、表格、窗口等；與WWW上任一資料進(jìn)行超級連接；使用輔助應(yīng)用程序，連入圖像、視頻、聲頻等多媒體資料。HTML語言也有一定的局限，表現(xiàn)在：作者只能選用Web資源的字體，排版功能不是很強(qiáng)；忽略空格及自然格式，段落須指明；在不同的硬件環(huán)境下顯示不同。

HTML語言是WWW上的操作語言，讀者在Web上的一切操作（包括組織文件、建立連接、發(fā)布消息等）都依靠HTML語言來完成。對HTML語言的標(biāo)注命令的介紹請參閱實(shí)驗(yàn)講義附錄中相關(guān)部分或直接在校園網(wǎng)上閱讀有關(guān)的文獻(xiàn)。

3、HTML頁面制作
??? 在使用一般編輯器編寫HTML文檔時，用戶只需把正文與標(biāo)簽同時寫進(jìn)文檔即可。但是，這種原始的編輯方式不夠直接，容易出錯。近來出現(xiàn)了許多HTML編輯器，提供“所見即所得”(WYSIWYG)的編輯風(fēng)格，并使用鼠標(biāo)選取標(biāo)簽，減少了標(biāo)簽輸入的工作量，有的還提供HTML格式檢查功能。例如在本實(shí)驗(yàn)室提供的是“FrontPage Express”。

　? 另外，還有許多文檔格式的轉(zhuǎn)換工具，可以把一個非HTML文檔轉(zhuǎn)換成HTML文檔。目前可以處理的文檔類型計有：MicrosoftWord/RTF，WordPerfect，F(xiàn)rameMak-er，LaTex，BibTex，TexInfo，Troff，QuarkXPress，Page-Maker等等。

請同學(xué)們在編制自己的WWW主頁之前先熟悉HTML文檔的格式，為自己的主頁準(zhǔn)備素材。同時?????? 了解最新的WWW技術(shù)，如CGI、Java、Java Script、Tcl/Tk Script、網(wǎng)絡(luò)數(shù)據(jù)庫技術(shù)、ActiveX、ASP等等。準(zhǔn)備在自己的主頁中使用自己掌握的技術(shù)。

三、實(shí)驗(yàn)要求
1、建立自己的個人主頁；

2、在主頁中嵌入各種媒體的文件（聲音、圖片、動畫等）；

3、在主頁中使用超級鏈接。

4、在主頁文件中對實(shí)驗(yàn)一、實(shí)驗(yàn)二、實(shí)驗(yàn)三進(jìn)行小結(jié)。

四、思考題
1. 簡述WWW服務(wù)器的結(jié)構(gòu)及其工作原理。

2. 介紹你的個人主頁的特點(diǎn)和獨(dú)到之處。

3. 介紹你所使用的新技術(shù)。

附錄? HTML教程
一、HTML 語言的結(jié)構(gòu)
　　html文件是標(biāo)準(zhǔn)的ASCII文件，它看起來象是加入了許多被稱為鏈接簽(tag)的特殊字符串的普遍文本文件。從結(jié)構(gòu)上講，html文件由元素(element)組成，組成html文件的元素有許多種，用于組織文件的內(nèi)容和指導(dǎo)文件的輸出格式。絕大多數(shù)元素是“容器”， 即它有起始標(biāo)記和結(jié)尾標(biāo)記。元素的起始標(biāo)記叫做起始鏈接簽(start tag)，元素結(jié)束標(biāo)記叫做結(jié)尾鏈接簽(end tag)，在起始鏈接簽和結(jié)尾鏈接簽中向的部分是元素體。 每一個元素都有名稱和可選擇的屬性，元素的名稱和屬性都在起始鏈接簽內(nèi)標(biāo)明。

　　實(shí)際上，html文件僅由一個html元素組成， 即文件以開始，以結(jié)尾，文件其部分都是 html的元素體。html元素的元素體由兩大部分，即頭元素..和體元素…和一些注釋組成。頭元素和體元素的元素體又由其它的元素和文本及注釋組成。也就是說，一個html文件應(yīng)具有下面的結(jié)構(gòu)：

　　html文件開始

　　 文件頭開始

????? 文件頭

　　 文件頭結(jié)束

　　 文件體開始

　　???? 文件體

　　 文件體結(jié)束

　 html文件結(jié)束

二、構(gòu)成網(wǎng)頁的基本元素
1、題目(TITLE)
Title元素是文件頭中唯一一個必須出現(xiàn)的元素，它也只能出現(xiàn)在文件頭中。title元素的格式為：　　

title標(biāo)明該html文件的題目，是對文件內(nèi)容的概括。一個好的題目應(yīng)該能使讀者從中判斷出該文件的大概內(nèi)容。文件的題目一般不會顯示在文本窗口中，而以窗口的名稱顯示出來。除了標(biāo)識窗口外，當(dāng)將某一 homepage 存入書簽或文件時，title還用作書簽名或缺省的文件名。下面是一個最簡單的html 文件

This is my first html file.

2、標(biāo)題(hn)
標(biāo)題元素有6種，分別為h1, h2,…h(huán)6，用于表示文章中的各種題目。標(biāo)題號越小，字體越大。一般情況下，瀏覽器對標(biāo)題作如下解釋：

　　h1 黑體，特大字體，居中，上下各有兩行空行。

　　h2 黑體，大字體，上下各有一到兩行空行

hn可以有對齊屬性，align＝#，#表示：left 標(biāo)題居左；center 標(biāo)題居中；right 標(biāo)題居右。例:

Chapter 2

3、分段

　　html的瀏覽器是基于窗口的，用戶可以隨時改變顯示區(qū)的大小，所以html將多個空格以及回車等效為一個空格，這是和絕大多數(shù)字處理器不同的。html的分段完全依賴于分段元素

。

也可以有多種屬性，比較常用的屬性是：

　　aligh＝#， #可以是left,center,right,其含義同上文。

　　例

This is a centered paragraph <／p>當(dāng) html文件中有圖形，圖形可能占據(jù)了窗口的一端，圖形的周圍可能還有較大的空白區(qū)。這時，不帶clear屬性的

可能會使文章的內(nèi)容顯示在該空白區(qū)內(nèi)。為確保下一段內(nèi)容顯示在圖形的下方，可使用clear屬性。clear屬性的含義為：

clear=left 下一段顯示在左邊界處空白的區(qū)域

clear=right 下一段顯示在右邊界處空白的區(qū)域

clear=all 下一段的左右兩邊都不許有別的內(nèi)容

4、清單List
　　清單用于列舉事實(shí)，常用的清單有3種格式，即無序清單(unordered List)，有序清單(ordered list)和定義清單(definition list)

無序清單用(ul)開始，每一個清單條目用

開始，清單條目用

引導(dǎo)，它的說明用

引導(dǎo)。

三、超文本鏈接指針
　　超文本鏈接指針是html最吸引人們優(yōu)點(diǎn)之一。使用超文本鏈接指針可以使順序存放的文件具有一定程度上隨機(jī)訪問的能力，這更加符合人類的思維方式。人的思維是跳躍的、交叉的，而每一個鏈接指針正好代表了作者或者讀者的思維跳躍。因而組織得好的鏈接指針不僅能使讀者跳過他不感興趣的章節(jié)(比如一些枯燥的數(shù)據(jù))，而且有助于更好地理解作者的意圖。

　　一個超文本鏈接指針由兩部分組成。一是被指向的目標(biāo)，它可以是同一文件的另一部分，也可以是世界另一端的一個文件，還可以是動畫或音樂；另一部分是指向目標(biāo)的鏈接指針。

1、統(tǒng)一資源定位器URL
統(tǒng)一資源定位器(uuiform Resource Locator)是文件名的擴(kuò)展。在單機(jī)系統(tǒng)中，定位一個文件需要路徑和文件名，對于遍布全球的Internet網(wǎng)，顯然還需要知道文件存放在哪個網(wǎng)絡(luò)的哪臺主機(jī)中才行。與單機(jī)系統(tǒng)不一樣的是在單機(jī)系統(tǒng)中，所有的文件都由統(tǒng)一的操作系統(tǒng)管理，因而不必給出訪問該文件的方法；而在Internet上，各個網(wǎng)絡(luò)，各臺主機(jī)的操作系統(tǒng)都不一樣，因此必須指定訪問該文件的方法。一個URL包括了以上所有的信息。它的構(gòu)成為：protocol:// machine.name[:port]／directory／

filename其中protocol是訪問該資源所采用的協(xié)議，即訪問該資源的方法，它可以是：

http 超文本傳輸協(xié)議，該資源是html文件

file 文件傳輸協(xié)議,用ftp訪問該資源

ftp 文件傳輸協(xié)議,用ftp訪問該資源

gopher gopher協(xié)議,該資源是gopher文件

news 表明該資源是網(wǎng)絡(luò)新聞

　　與單機(jī)系統(tǒng)絕對路徑，相對路徑的概念類似，統(tǒng)一資源定位器也有絕對URL和相對URL之分。上文所述的是絕對URL。相對URL是相對于你最近訪問的URL。比如你正在觀看一個URL為http://www.inep.ac.cn/index.html的文件，如果想看同一個目錄下的另一個文件china.html，你可以直接使用china.html，這時china.html就是一個相對url，它的絕對url為http://www.ihep.ac.cn/china.html。

2、指向一個目標(biāo)
　　在html文件中用鏈接指針指向一個目標(biāo)。其基本格式為： 字符串href屬性中的統(tǒng)一資源定位器(url)是被指向的目標(biāo)，隨后的“字符串”在html文件中充當(dāng)指針的角色， 它一般顯示為藍(lán)色。當(dāng)讀者用鼠標(biāo)點(diǎn)這個字符串時，瀏覽器就會將url處的資源顯示在屏幕上。例如：

IHEP CHINA homepage用戶用鼠標(biāo)點(diǎn)取IHEP china homepage，即可看到高能所編寫的關(guān)于中國情況的介紹。在這個例子中， 充當(dāng)指針的是IHEP china homepage，下面我們將看到用圖象做為指針的例子。

　　在編寫html文件時，需要知道目標(biāo)的url。如何才能得到目標(biāo)的url呢？對于自己主機(jī)內(nèi)的文件，它的url 可以根據(jù)該文件的實(shí)際情況決定。對于Interner上的資源， 我們在用瀏覽器觀看時，它的url會在瀏覽器的Location一欄中顯示出來，把它抄下來寫到你的html文件中即可。

　　在編寫html文件時，對有能確定關(guān)系的一組資源(比如在同一個目錄中)應(yīng)采用相對url， 這不僅簡化你的html文件，而且便于維護(hù)。比如當(dāng)你需要將某個目錄整個搬到另外一個地方或把某一主機(jī)的資源移到另一臺主機(jī)時，用相對url寫的html文件用不看更新其中的url(只

要它們的相對關(guān)系沒有改變)。但如果你用絕對url編寫html，你就不得不逐字修改每個鏈接指針中的url，這是一件很乏味也很容易出錯的工作。對于各個資源之間沒有固定的關(guān)系，比如你的html文件是介紹各大學(xué)情況的，它所指向的目標(biāo)分布在全球的主機(jī)中，這時你就只能用絕對url了。

　　在本章的末尾，作者給出一個完整的html文件，該文件使用了前三章介紹的全部元素，以便于讀者理解。

3、標(biāo)記一個目標(biāo)
上節(jié)提到的鏈接指針可以使讀者在整個Interner網(wǎng)上方便地鏈接。但如果你編寫了一個很長的html文件，從頭到尾地讀很浪費(fèi)時間，能不能在同一文件的不同部分之間也建立起鏈接，使用戶方便地在上下方之間跳轉(zhuǎn)呢？答案是肯定的。前面曾提到過一個超文本鏈接指針包括兩個部分，一個指向目標(biāo)的鏈接指針，另一個是被指向的目標(biāo)。對于一個完整的文件，我們可以用它的url來唯一地標(biāo)識它， 但對于同一文件的不同部分，我們怎樣來標(biāo)識呢？下面的內(nèi)容將介紹鏈接指針元素的另外的一個用途，標(biāo)識目標(biāo)。

　　標(biāo)識一個目標(biāo)的方法為：

　　text<／a>

name屬性將放置該標(biāo)記的地方標(biāo)記為“name”，name是一個全文唯一的標(biāo)記串，text部分可有可無。這樣，我們就把放置標(biāo)記的地方做了一個叫做“name”的標(biāo)記。

　　做好標(biāo)記后，可以用下列方法來指向它，

text

url是放置標(biāo)記的html文件的url name是標(biāo)記名，對于同一個文件，可以寫為　

text

這時就可以點(diǎn)取text跳轉(zhuǎn)到標(biāo)記名為name的部分了。

4、目標(biāo)窗口
如果希望被指向的目標(biāo)在一個新的窗口中顯示，可以使用target屬性來修飾鏈接指針元素。text 將url代表的資源顯示在一個新的窗口中，該窗口的名字叫window-name。

5、圖象鏈接指針
圖象也可以做為鏈接指針。格式為：?？梢钥闯?，上例中用取代了鏈接指針中text的位置。

是圖象元素，它表明顯示url代表的圖象文件，參見圖象一章。

　　下面是一個簡單的圖象鏈接指針。

　China home page

四、版面風(fēng)格控制
1、字體
字體大小
　　html有七種字號，1號最小，7號最大。缺省字號為3，可以用設(shè)置缺省字號。設(shè)置文本的字號有兩種辦法，一種是設(shè)置絕對字號，；另一種是設(shè)置文本的相對字號；。用第二種方法時“＋”號表示字體變大，“－”號表示字體變小。如：

Today is fine!Today is fine!

Today is fine!Today is fine!

字體風(fēng)格
字體風(fēng)格分為物理風(fēng)格和邏輯風(fēng)格。物理風(fēng)格直接指定字體，物理風(fēng)格的字體有黑體，斜體，下劃線，打字機(jī)體。邏輯風(fēng)格指定文本的作用。

　　強(qiáng)調(diào) 特別強(qiáng)調(diào) 源代碼例子 鍵盤輸入 變量 定義 引用 較小較大 上標(biāo) 下標(biāo)物理風(fēng)格

Today is fine!Today is fine!

Today is fine!Today is fine!

Today is fine!Today is fine!

Today is fine!Today is fine!

字體顏色
字體的顏色用指定#可以是6位16進(jìn)數(shù)，分別指定紅、綠、蘭的值，也可以是black，olive，teal，red，blue，maroon，navy，gray，lime，fudrsia，white，green，purple，sliver，yellow，aqua 之一。

文本使文本閃爍，閃爍頻率為１秒鐘一次。

2、圖象
行間圖象
行向圖象使你的頁面更加漂亮，但是行向圖象會導(dǎo)致網(wǎng)絡(luò)通訊量急劇增大。使訪問時間延長。所以在主頁(homepage)，不宜采用很大的圖象。如果確實(shí)需要一些大圖象，最好在主頁中用一個縮小的圖象指向原圖，并標(biāo)明該圖的大小。這樣讀者可以快速地訪問您的主頁，自己選擇看還是不看那些圖象。圖象的基本格式為：

　　　或

image-url是圖象文件的url。目前，大部分瀏覽器支持 .gif 和 .xbm文件，netscape還支持jpeg文件。alt屬性告訴不支持圖象的瀏覽器用text代替該圖。

圖象與文本的對齊方式
圖象在窗口中會占據(jù)一塊空間，在圖象的左右可能會有空白，不加說明時，瀏覽器將隨后的文本顯示在這些空白中，顯示的位置由align屬性指定。用align=left,righr時，圖象是一個浮動圖象。比如align=left，圖象必須挨著左邊框，它把原來占據(jù)該塊空白的文本“擠走”，或擠到它右邊，或擠到它上下。文本與圖象的間距用vspace=#,hspace=#指定，#是整數(shù)，單位是象素，前者指定縱向間距，后者指定橫向間距。

3、背影和文本顏色
窗口背景可以用下列方法指定

前者指定填充背景的圖象，如果圖象的大小小于窗口大小，則把背景圖象重復(fù)，直到填滿窗口區(qū)域。后者指定的是16進(jìn)制的紅、綠、蘭分量。

bgcolor 背景顏色

Text 文本顏色

Link 鏈接指針顏色

alinik 活動的鏈接指針顏色

vlinik 已訪問過的鏈接指針顏色

例 大紅背景色.

注意，此時體元素必須寫完整，即用結(jié)束

五、表格(Table)
1、表格的基本形式
一個表由

開始，結(jié)束，表的內(nèi)容由,和定義。說明表的一個行，表有多少行就有多少個；說明表的列數(shù)和相應(yīng)欄目的名稱，有多少個欄就有多少個；則填充由和組成的表格。是否用表格線分開為部分內(nèi)容用

border屬性說明，下面是一個有表格線和一個元表格線的表及其輸出。

?

2、表的大小，邊框?qū)挾?，表格間距
　　1、表的大小用width=#和height=#屬性說明。前者為表寬，后者為表高，#是以象素為單位的整數(shù)。

　　2、邊框?qū)挾扔蒪order=#說明，#為寬度值，單位是象素。

　　3、表格間距即劃分表格的線的粗細(xì)用cellspacing=#表示，#的單位是象素，下面的例子將表格間距定義為10個象素，它看起來象用很粗的線劃分的表格。

3、表中文本的輸出
1、文本與表框的距離用cellpadding=#說明。下面的例子使表的內(nèi)容與表框離開10個象素。

2、表格的后度大于其中的文本后度時，文本在其中的輸出位置與用align=#說明。

　　#是 left，center和right三者之一，分別表示左對齊，居中和右對齊，align屬性可修飾,和鏈接簽。

3、表格的高度大于其中文本的高度時，可以用valign=#說明文本在其中的位置。#是top,middle,bottom,baseline四者之一。分別表示上對齊，文本中線與表格中線對齊， 下對齊，文本基線與表格中線對齊，特別注意的是baseine對齊方式，它使得文本出現(xiàn)在網(wǎng)格的上方而不是相象中的下半部。同樣，valign可以修飾,,中的任何一個。

六、分框 Frame
1、分框的基本格式
分框?qū)⒘饔[器的窗口分成多個區(qū)域，每個區(qū)域可以單獨(dú)顯示一個html文件，各個區(qū)域也可相關(guān)連地顯示某一個內(nèi)容，比如可以將索引放在一個區(qū)域，文件內(nèi)容顯示在另一個區(qū)域。

分框的基本結(jié)構(gòu)如下

...

...中的內(nèi)容顯示在不支持分框的瀏覽器窗口中,因而這里指向一個普通版本的html文件，以便使用不支持分框?yàn)g覽器的用戶閱讀。

　　分框由指定，并且可以嵌簽，分區(qū)中種部分顯示的內(nèi)容用指定?！　⌒枰f明的是，frame是一個新出現(xiàn)的元素，許多流覽器不支持它?？梢詫⒋翱跈M向分成幾個部分，也可以分成縱向幾個部分，還可以混和分框。

2、橫向、縱向、混合分框
　 橫向分框用指定，#可以是一個百分?jǐn)?shù)，也可以是一整數(shù)。前者規(guī)定各框占窗口的百分?jǐn)?shù)，后者指定各框的絕對大小。例如，下面的例子將窗口分成30%、20%、50%的幾個區(qū)域，各區(qū)域的內(nèi)容分別為A.html,B.html,C.html?？v向分框用指定。將窗口分成橫縱幾個區(qū)域時，用代替鏈接至即可將原的分好的區(qū)域再次分框， 下面的例子先將窗口分成20%,80%， 然后將右邊的區(qū)域再分成分別占40%和60%的上下兩個區(qū)域。

3、分框間的關(guān)聯(lián)
分框之間可以有特定的關(guān)聯(lián)，比如將某一框的內(nèi)容輸出到另一個框，這樣我們就可以把其中一個框作為輸出框，另一個框作為選擇框。實(shí)現(xiàn)這種關(guān)聯(lián)需要做下列的事情。

　?、僭诜挚虻膆rme文件中標(biāo)記各個框，標(biāo)記的方法是在中加入name屬性，比如上例，定義左邊的框?yàn)檩敵觯疫吙驗(yàn)橄笠?/font>

②在B.html文件中指定輸出到哪個框方法是在B.html文件中加入下列一行。 這便得用鼠標(biāo)點(diǎn)取B.html中的鏈接指針，它的輸出會顯示在左邊的框中。