WWW主頁制作實驗

WWW主頁制作實驗

一、實驗?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é)議去傳輸和顯示駐留在世界各地計算機上的多媒體信息源，與WWW服務(wù)器一起為Inetrnet提供“分布式客戶機/服務(wù)器”的運行環(huán)境。

??? WWW網(wǎng)由三部分組成，即服務(wù)器、瀏覽器和通信協(xié)議。瀏覽器是每位終端用戶所使用的通向WWW網(wǎng)的窗口。瀏覽器用來處理用戶對文檔的請求，它按一定方式聯(lián)通遠(yuǎn)程信息源并從中取回所需的信息，顯示在用戶的屏幕上。WWW網(wǎng)服務(wù)器負(fù)責(zé)向瀏覽器提供所需的服務(wù)，當(dāng)它與某個瀏覽器建立連接之后，它監(jiān)聽瀏覽器發(fā)出的請求，并向瀏覽器傳送所需的信息，這些信息可以是從服務(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)）機制中使用.html(或.htm)擴(kuò)展名。其主要特征是在文本中有HTML標(biāo)注符。HTML語言的優(yōu)點是標(biāo)注簡單明了，功能強大?？梢远x文件的顯示格式、標(biāo)題、字型、表格、窗口等；與WWW上任一資料進(jìn)行超級連接；使用輔助應(yīng)用程序，連入圖像、視頻、聲頻等多媒體資料。HTML語言也有一定的局限，表現(xiàn)在：作者只能選用Web資源的字體，排版功能不是很強；忽略空格及自然格式，段落須指明；在不同的硬件環(huán)境下顯示不同。

HTML語言是WWW上的操作語言，讀者在Web上的一切操作（包括組織文件、建立連接、發(fā)布消息等）都依靠HTML語言來完成。對HTML語言的標(biāo)注命令的介紹請參閱實驗講義附錄中相關(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格式檢查功能。例如在本實驗室提供的是“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ù)。

三、實驗要求
1、建立自己的個人主頁；

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

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

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

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

2. 介紹你的個人主頁的特點和獨到之處。

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)明。

　　實際上，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
　　清單用于列舉事實，常用的清單有3種格式，即無序清單(unordered List)，有序清單(ordered list)和定義清單(definition list)

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

開始，清單條目用

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

引導(dǎo)。

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

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

1、統(tǒng)一資源定位器URL
統(tǒng)一資源定位器(uuiform Resource Locator)是文件名的擴(kuò)展。在單機系統(tǒng)中，定位一個文件需要路徑和文件名，對于遍布全球的Internet網(wǎng)，顯然還需要知道文件存放在哪個網(wǎng)絡(luò)的哪臺主機中才行。與單機系統(tǒng)不一樣的是在單機系統(tǒng)中，所有的文件都由統(tǒng)一的操作系統(tǒng)管理，因而不必給出訪問該文件的方法；而在Internet上，各個網(wǎng)絡(luò)，各臺主機的操作系統(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ò)新聞

　　與單機系統(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)點這個字符串時，瀏覽器就會將url處的資源顯示在屏幕上。例如：

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

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

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

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

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

3、標(biāo)記一個目標(biāo)
上節(jié)提到的鏈接指針可以使讀者在整個Interner網(wǎng)上方便地鏈接。但如果你編寫了一個很長的html文件，從頭到尾地讀很浪費時間，能不能在同一文件的不同部分之間也建立起鏈接，使用戶方便地在上下方之間跳轉(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

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

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

5、圖象鏈接指針
圖象也可以做為鏈接指針。格式為：?？梢钥闯觯侠杏?img src="url">取代了鏈接指針中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)格的字體有黑體，斜體，下劃線，打字機體。邏輯風(fēng)格指定文本的作用。

　　強調(diào) 特別強調(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)，不宜采用很大的圖象。如果確實需要一些大圖象，最好在主頁中用一個縮小的圖象指向原圖，并標(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ū)挾龋砀耖g距
　　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ū)域可以單獨顯示一個html文件，各個區(qū)域也可相關(guān)連地顯示某一個內(nèi)容，比如可以將索引放在一個區(qū)域，文件內(nèi)容顯示在另一個區(qū)域。

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

...

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

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

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)容輸出到另一個框，這樣我們就可以把其中一個框作為輸出框，另一個框作為選擇框。實現(xiàn)這種關(guān)聯(lián)需要做下列的事情。

　?、僭诜挚虻膆rme文件中標(biāo)記各個框，標(biāo)記的方法是在中加入name屬性，比如上例，定義左邊的框為輸出，右邊框為象引。

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