《網(wǎng)頁(yè)設(shè)計(jì)與制作》(第二版)電子課件第二章-Internet與HTML_第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》(第二版)電子課件第二章-Internet與HTML_第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》(第二版)電子課件第二章-Internet與HTML_第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》(第二版)電子課件第二章-Internet與HTML_第4頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》(第二版)電子課件第二章-Internet與HTML_第5頁(yè)
已閱讀5頁(yè)，還剩54頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第2章Internet與HTML

2.1Internet與萬(wàn)維網(wǎng)

Internet概述萬(wàn)維網(wǎng)網(wǎng)頁(yè)與網(wǎng)站一.Internet概述將地理位置不同的、具有獨(dú)立功能的多個(gè)計(jì)算機(jī)系統(tǒng)通過(guò)通信線路和通信設(shè)備互連在一起，由網(wǎng)絡(luò)軟件實(shí)現(xiàn)網(wǎng)絡(luò)資源共享和互相通信的系統(tǒng)叫計(jì)算機(jī)網(wǎng)絡(luò)。計(jì)算機(jī)網(wǎng)絡(luò)按照覆蓋區(qū)域可分為局域網(wǎng)（LAN）和廣域網(wǎng)（WAN）。Internet是將全世界的網(wǎng)絡(luò)連接在一起形成的國(guó)際互聯(lián)網(wǎng)絡(luò)，簡(jiǎn)稱“互聯(lián)網(wǎng)”，我國(guó)推薦名稱為“因特網(wǎng)”。Internet的發(fā)展歷程20世紀(jì)60年代末，美國(guó)國(guó)防部所屬的高級(jí)研究規(guī)劃署ARPA研究并建立了實(shí)驗(yàn)性軍用計(jì)算機(jī)網(wǎng)絡(luò)ARPANet。70年代，ARPANet網(wǎng)絡(luò)的應(yīng)用由軍事領(lǐng)域延伸到教育領(lǐng)域，科學(xué)家們開(kāi)始利用ARPANet網(wǎng)絡(luò)交換信息，共享研究成果。1983年，TCP/IP協(xié)議（即傳輸控制協(xié)議和網(wǎng)際間協(xié)議）的建立，使計(jì)算機(jī)通信有了統(tǒng)一的標(biāo)準(zhǔn)。這是計(jì)算機(jī)網(wǎng)絡(luò)發(fā)展史上的一個(gè)里程碑，網(wǎng)絡(luò)從此進(jìn)入高速發(fā)展的時(shí)代。1986年，美國(guó)國(guó)家科學(xué)基金會(huì)NSF（NationalScienceFoundation）開(kāi)始將美國(guó)各地的研究人員、各大學(xué)和研究機(jī)構(gòu)的計(jì)算中心連接到了分布在不同地區(qū)的五個(gè)超級(jí)計(jì)算中心。至此，NSFNet網(wǎng)絡(luò)越來(lái)越多地被高等院校、科研機(jī)構(gòu)、政府部門、商業(yè)集團(tuán)、實(shí)驗(yàn)室和個(gè)人等所使用，逐漸取代了ARPANet網(wǎng)絡(luò)。Internet---我們生活的一部分隨著計(jì)算機(jī)和通信技術(shù)的發(fā)展，計(jì)算機(jī)網(wǎng)絡(luò)由過(guò)去的軍事與教育專用網(wǎng)絡(luò)發(fā)展成為無(wú)所不包、無(wú)所不能的國(guó)際互聯(lián)網(wǎng)絡(luò)：Internet。Internet提供的服務(wù)主要有：電子郵件（E-mail）、文件傳輸（FTP）、電子公告（BBS）、遠(yuǎn)程登錄（Telnet）和網(wǎng)頁(yè)瀏覽（WWW）。Internet正以人們難以想象的速度迅猛發(fā)展。二.萬(wàn)維網(wǎng)（WWW）WWW（WorldWideWeb）俗稱萬(wàn)維網(wǎng)，它是歐洲粒子物理研究所（CERN）的科學(xué)家TimBerners-Lee發(fā)明的。他提出了超文本（HyperText）的結(jié)構(gòu)體系，目的是讓大家在不同的地方用一種簡(jiǎn)捷的方式共享信息資源。WWW制定了一套標(biāo)準(zhǔn)，包括超文本HTML語(yǔ)言、統(tǒng)一的資源定位符URL和超文本傳輸協(xié)議HTTP。超文本由若干互連的超媒體文件組成，它是通過(guò)超鏈接把一些具有超媒體特性的信息鏈接起來(lái)的一種新型的信息管理技術(shù)。超媒體不但包括了文本內(nèi)容，還包括圖像、動(dòng)畫、聲音和視頻等。超鏈接就是通過(guò)超文本中的鏈接點(diǎn)（也叫“參考點(diǎn)”或“熱點(diǎn)”）建立與其他超媒體文件的鏈接，用鼠標(biāo)單擊鏈接點(diǎn)即可調(diào)出與之相鏈接的其他超媒體文件（即網(wǎng)頁(yè)）。各種信息按不同的類型以網(wǎng)頁(yè)文件的形式分別放在萬(wàn)維網(wǎng)服務(wù)器上。萬(wàn)維網(wǎng)已經(jīng)成為當(dāng)前Internet上最受歡迎、最為流行和最新的信息檢索服務(wù)系統(tǒng)。三.網(wǎng)頁(yè)與網(wǎng)站網(wǎng)站是網(wǎng)頁(yè)的集合，通常一個(gè)網(wǎng)站是由眾多不同內(nèi)容的網(wǎng)頁(yè)組成的。網(wǎng)頁(yè)是網(wǎng)站的基本信息單位，是WWW網(wǎng)上的各個(gè)超文本文件。那么什么是超文本文件呢?超文本文件就是以超文本標(biāo)記語(yǔ)言書(shū)寫的。超文本標(biāo)記語(yǔ)言是由TimBerners-Lee提出的WWW的描述語(yǔ)言，簡(jiǎn)稱HTML（HyperTextMarkupLanguage），它不是編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言。HTML語(yǔ)言的目的是把網(wǎng)上各類計(jì)算機(jī)中的文本或圖形有機(jī)地結(jié)合起來(lái)，形成共享的整體，而用戶不必考慮具體信息是在網(wǎng)絡(luò)上的哪個(gè)位置。超文本標(biāo)記語(yǔ)言（HTML）HTML命令可以說(shuō)明文字、圖形、動(dòng)畫、聲音、表格、鏈接等。網(wǎng)頁(yè)就是HTML文本，它是由HTML命令組成的描述性文本。HTML的結(jié)構(gòu)包括頭部（Head）和主體（Body）兩大部分：頭部描述瀏覽器所需的信息，主體包含所要說(shuō)明的具體內(nèi)容。2.2HTML語(yǔ)言基礎(chǔ)了解HTML的基本概念及工具

用HTML建立一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)

HTML文檔的總體結(jié)構(gòu)

常用的HTML標(biāo)記

一.了解HTML的基本概念及工具1.標(biāo)記符又稱標(biāo)簽，HTML是影響網(wǎng)頁(yè)內(nèi)容顯示格式的標(biāo)記符集合，瀏覽器根據(jù)標(biāo)記符決定網(wǎng)頁(yè)的實(shí)際顯示效果。2．HTML編輯器用于生成和保存HTML文檔，是基于文本的編輯器，在創(chuàng)建文檔時(shí)只能看到HTML代碼。3．web瀏覽器用于瀏覽和測(cè)試HTML文檔。最常用的瀏覽器是NetscapeNavigator和

MicrosoftInternetExplorer。標(biāo)記符所有的標(biāo)記符都用尖括號(hào)括起來(lái)。例如，<HTML>表示HTML標(biāo)記符。絕大多數(shù)標(biāo)記符都是成對(duì)出現(xiàn)的，包括開(kāi)始標(biāo)記符和結(jié)束標(biāo)記符。如：<HTML>…<／HTML>。HTML標(biāo)記符是不區(qū)分大小寫的，通常約定標(biāo)記符使用大寫字母，利于HTML文檔的維護(hù)。屬性屬性是用來(lái)描述對(duì)象特征的特性。在HTML中，所有的屬性都放置在開(kāi)始標(biāo)記符的尖括號(hào)里；屬性與標(biāo)記符之間用空格分隔；屬性的值放在相應(yīng)屬性之后，用等號(hào)分隔；而不同的屬性之間用空格分隔。格式為：<標(biāo)記符屬性1=屬性值1屬性2=屬性值2…>受影響的內(nèi)容<／標(biāo)記符>二.用HTML建立一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)網(wǎng)頁(yè)文件的擴(kuò)展名一般是“.htm”或“.html”，建立網(wǎng)頁(yè)可以在Windows記事本內(nèi)輸入HTML文檔。由于HTML文檔是文本文件，在存盤時(shí)文件的原名一定要輸入HTML文檔的擴(kuò)展名.htm或.html，同時(shí)要注意HTML文檔中的各種英文標(biāo)記要在英文方式下輸入。為了便于管理，可在D盤根目錄下建立一個(gè)名字為“網(wǎng)頁(yè)”的文件夾。例1建立網(wǎng)頁(yè)文件html1.htm操作步驟：

1打開(kāi)Windows下記事本程序，創(chuàng)建新文檔；

2輸入HTML代碼和文本正文；

<html><head><title>網(wǎng)頁(yè)制作</title></head><body><h1>網(wǎng)頁(yè)設(shè)計(jì)與制作</h1><h2>第2章</h2><br><h3>Internet與HTML</h3><br></body></html>3、將文件保存為“.htm”文件

第一次保存文件時(shí)會(huì)彈出“另存為”對(duì)話框，默認(rèn)的保存類型為文本文檔（*.txt），應(yīng)在“保存類型”中選擇“所有文件”，然后在“文件名”選頂中輸入文件名“html1.htm”，最后按“保存”保存文件。顯示結(jié)果4、瀏覽所設(shè)計(jì)的網(wǎng)頁(yè)

瀏覽所設(shè)計(jì)的網(wǎng)頁(yè)，可以有如下兩種方法：第一種方法是雙擊HTML文檔圖標(biāo)。第二種方法是雙擊瀏覽器圖標(biāo)，調(diào)出瀏覽器窗口，單擊“文件”→“打開(kāi)”菜單命令，調(diào)出“打開(kāi)”對(duì)話框，再?gòu)摹熬W(wǎng)頁(yè)”文件夾中選擇html1文件，單擊“打開(kāi)”按鈕，即可在瀏覽器中打開(kāi)網(wǎng)頁(yè)了。顯示結(jié)果三.HTML文檔的總體結(jié)構(gòu)從例1中我們可以看到HTML文檔的一般結(jié)構(gòu)如下所示：

<html><head><title>網(wǎng)頁(yè)標(biāo)題</title></head><body>網(wǎng)頁(yè)正文</body></html>HTML文件一般是由標(biāo)記和網(wǎng)頁(yè)的正文組成。各種標(biāo)記代表的含義如下：指明文件中HTML編碼信息，同時(shí)文件擴(kuò)展名.html或.htm也指明該文件是一個(gè)HTML文檔。<html>表示HTML文檔的開(kāi)始，</html>表示HTML文檔的結(jié)束。

HTML編碼文檔的第一部分，即頭部信息。其中存放標(biāo)題及其他內(nèi)容。

（1）<html>...</html>（2）<head>...</head>這一對(duì)標(biāo)記指明網(wǎng)頁(yè)的標(biāo)題，標(biāo)題顯示在瀏覽器窗口的頂端。標(biāo)題應(yīng)當(dāng)是描述性的、獨(dú)特的和相對(duì)簡(jiǎn)潔的。

HTML文檔的第二部分，也是網(wǎng)頁(yè)中最大的部分，即正文部分，包含文檔的所有內(nèi)容，顯示在瀏覽器窗口的工作區(qū)域中。（3）<title>...</title>（4）<body>...</body>四.常用的HTML標(biāo)記行控制文本對(duì)齊方式列表元素水平分隔線字體設(shè)置表單標(biāo)記建立表格超鏈接和圖像標(biāo)記多媒體效果1.行控制HTML分段標(biāo)記P，用來(lái)定義文檔中的一個(gè)段落。標(biāo)記<P>可看作是段落的開(kāi)始，而標(biāo)記</P>則可視作段落的結(jié)束。單獨(dú)一個(gè)<P>會(huì)添加一個(gè)空行。段落的縮進(jìn)、第一個(gè)詞前面的空格以及其他特性主要由瀏覽器決定。（1）分段標(biāo)記

換行標(biāo)記BR是在HTML文檔中增加一個(gè)換行。它只是進(jìn)行了換行而不改變段落設(shè)置和其他字符，這一點(diǎn)不同于分段標(biāo)記P。<BR>是HTML語(yǔ)言中為數(shù)不多的單獨(dú)出現(xiàn)的標(biāo)記，即只有<BR>而沒(méi)有</BR>。（2）換行標(biāo)記

2.文本對(duì)齊方式（1）ALIGN屬性

ALIGN屬性用來(lái)表示文本在水平方向的對(duì)齊方式。如下所示：

<PAlign=left/center/right></P>

等號(hào)右邊的三個(gè)值分別表示文本靠左邊、中間和右邊對(duì)齊。（2）CENTER元素

CENTER元素的作用是使文本居中，處于CENTER元素起止標(biāo)記符中間的任何文本，包括標(biāo)題、正文或其他插入對(duì)象都將在瀏覽器窗口中居中顯示。3.列表元素文檔中的列表是很重要的，它將使文檔一目了然。在HTML中的列表分為無(wú)序列表有序列表自定義列表例如：

<UL><LI>北京

<LI>上海

<LI>天津

</UL>顯示結(jié)果為：

·北京

·上海

·天津（1）無(wú)序列表：UL元素和LI元素

UL元素可用于創(chuàng)建一個(gè)以圓點(diǎn)等項(xiàng)目開(kāi)始的無(wú)序列表，列表中的每一項(xiàng)用LI元素加以識(shí)別。（2）有序列表：OL元素和LI元素有序列表與無(wú)序列表類似，但項(xiàng)目符號(hào)為序號(hào)數(shù)字或字母。顯示如果如下所示：

1.北京

2.上海

3.天津

4.水平分隔線

水平分隔線元HR，可在HTML文檔的不同章節(jié)之間插入一個(gè)水平線作為分界標(biāo)志符。5.字體設(shè)置

HTML中可以用標(biāo)記對(duì)文檔字符進(jìn)行字體設(shè)置。字體設(shè)置包括標(biāo)題、字體、字符顏色等內(nèi)容。（1）標(biāo)題元素

使用標(biāo)題有利于組織信息，以便用戶能夠?qū)?nèi)容有一個(gè)迅速清楚的了解。HTML中規(guī)定了標(biāo)題格式。在HTML中，支持六級(jí)標(biāo)題，其標(biāo)記分別為h1到h6，每對(duì)起止標(biāo)記用來(lái)指定文檔的標(biāo)題內(nèi)容。（2）字體元素

字體（FONT）元素用來(lái)設(shè)置文檔的字體。通過(guò)改變其屬性，對(duì)字體進(jìn)行不同的設(shè)置。在FONT的屬性中：

SIZE屬性用來(lái)決定字的大??；

COLOR屬性用來(lái)指定文檔字符的顏色，顏色值可以按照十六進(jìn)制數(shù)或者預(yù)定義顏色名方式給定；

FACE屬性用來(lái)指定一種字體名。例2

<html><head><title>HTML中字體的設(shè)置</title></head><body><h1align=center>

<fontsize=12color=MediumSlateBlueface=cursive>歡迎進(jìn)入我的網(wǎng)站</font>

</h1></body></html>顯示結(jié)果6.表單標(biāo)記表單Form標(biāo)記，是動(dòng)態(tài)HTML技術(shù)的基礎(chǔ)。它使HTML文檔能夠接受用戶的輸入信息并能夠?qū)τ脩糨斎氲男畔⑦M(jìn)行反饋，提供了與用戶交互的可能。表單從用戶方面收集信息，當(dāng)用戶添好表單上所需要的信息并將表單提交后，服務(wù)器就可以得到表單中包含的信息。表單中主要使用的標(biāo)記（1）FORM：在文檔中生成表單;（2）INPUT：輸入字段;（3）SELECT：定義可選擇的若干選項(xiàng)，一般為列表框;（4）OPTION：SELECT元素中的選項(xiàng);（5）TEXTAREA：多行文本的輸入字段。例3<html><head><title>表單的應(yīng)用</title></head><body><h3>表單的應(yīng)用</h3><p>請(qǐng)?jiān)敿?xì)填寫以下資料：

<formmethod="post”action="login.asp"><p>姓名：<inputname="UsrName"size=20>性別：

男<inputname="gender"type=radiovalue="male">

女<inputname="gender"type=radiovalue="female"><p>年齡：<inputname="Age"size=10><p>工作單位：

<textareaname="Factory"cols=48rows=3></textarea><p>興趣愛(ài)好：

<textareaname="Hobby"cols=48rows=3></textarea><p><inputtype=submitvalue="提交"><inputtype=resetvalue="取消"></form></body></html>顯示結(jié)果7.建立表格表格在HTML的文檔中應(yīng)用非常廣泛。它可以用于傳統(tǒng)的表格，可以用來(lái)設(shè)置分欄和對(duì)齊以及對(duì)網(wǎng)頁(yè)進(jìn)行布局。TABLE元素定義表格TR定義表行TH定義表頭TD定義表格數(shù)據(jù)例4<html><head><title>表格的應(yīng)用</title></head><body><tablealign=centerborder=5width=100height=100><captionvalign=top>表格的應(yīng)用</caption>

<tr><thcolspan=100>姓名</th></tr><tr><thbgcolor=red>小明</th><thbgcolor=blue>王紅</th><thbgcolor=white>張亮</th></tr>

<tr><tdalign=left>中國(guó)</td><tdalign=center>英國(guó)</td><tdalign=right>法國(guó)</td></tr></table></body></html>顯示結(jié)果關(guān)于例4的說(shuō)明（1）用clospan屬性實(shí)現(xiàn)跨列；（2）用rowspan屬性實(shí)現(xiàn)跨行；（3）用border屬性設(shè)定表格邊框線的寬度；（4）用width和height屬性來(lái)設(shè)定表格的寬度和高度；（5）用caption元素來(lái)規(guī)定表格的標(biāo)題，表格標(biāo)題默認(rèn)放在表格的上方，但通過(guò)valign屬性將值設(shè)為bottom，則標(biāo)題放在表格的下方；（6）用bgcolor屬性來(lái)設(shè)置表格的顏色，包括表元的和背景圖像。格式如下：背景色設(shè)置：<bodybgcolor=black>

或<bodybgcolor=＃000000>常用顏色名稱：red、yellow、green、blue、white、orange背景圖像設(shè)置：<bodybackground=“bg.bmp”>例4中：第二行的表元分別設(shè)為紅色、藍(lán)色和白色。

align屬性用來(lái)控制表格及其中文字的布局，它也有左、中、右三種取值。在第三行的表元中，分別設(shè)成了這三種取值。8.超鏈接和圖像標(biāo)記加入超鏈接功能，使得任何一個(gè)HTML文件可以方便地轉(zhuǎn)到另一個(gè)頁(yè)面。超鏈接主要是通過(guò)錨點(diǎn)元素A來(lái)實(shí)現(xiàn)的。A元素標(biāo)識(shí)一些文本，使其成為超文本鏈接的起點(diǎn)或目的點(diǎn)。如果A元素中包含HREF屬性，則該元素的起始標(biāo)記與結(jié)束標(biāo)記之間所有文本就變成了超文本（HyperText）。（1）加入超鏈接建立鏈接，必備兩個(gè)條件：在文件中確定鏈接點(diǎn)和確認(rèn)被鏈接的文件的名稱或URL。頁(yè)面鏈接使用的格式：

<ahref＝“被鏈接文件名”>帶下劃線的文本</a>如何建立鏈接使用HREF的一個(gè)例子友情鏈接：<ahref=>微軟</a>這段代碼的運(yùn)行結(jié)果為：

友情鏈接：微軟當(dāng)用戶點(diǎn)擊帶有下劃線的“微軟”文本時(shí)，即可打開(kāi)微軟公司的主頁(yè)。幾種鏈接格式

<AHREF＝“#錨點(diǎn)名稱”><ANAME＝“錨點(diǎn)名稱”><ahref=mailto:dqlgj@163.com>Email地址</a>同一個(gè)文件中的鏈接格式：為被鏈接的部分起名字并加標(biāo)記，這個(gè)名字叫錨點(diǎn)名稱。格式是：電子郵件鏈接格式：

（2）加入圖像標(biāo)記IMG用來(lái)將圖

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論