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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第2章Internet與HTML

2.1Internet與萬維網

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

用HTML建立一個簡單的網頁

HTML文檔的總體結構

常用的HTML標記

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

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

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

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

<html><head><title>網頁制作</title></head><body><h1>網頁設計與制作</h1><h2>第2章</h2><br><h3>Internet與HTML</h3><br></body></html>3、將文件保存為“.htm”文件

第一次保存文件時會彈出“另存為”對話框，默認的保存類型為文本文檔（*.txt），應在“保存類型”中選擇“所有文件”，然后在“文件名”選頂中輸入文件名“html1.htm”，最后按“保存”保存文件。顯示結果4、瀏覽所設計的網頁

瀏覽所設計的網頁，可以有如下兩種方法：第一種方法是雙擊HTML文檔圖標。第二種方法是雙擊瀏覽器圖標，調出瀏覽器窗口，單擊“文件”→“打開”菜單命令，調出“打開”對話框，再從“網頁”文件夾中選擇html1文件，單擊“打開”按鈕，即可在瀏覽器中打開網頁了。顯示結果三.HTML文檔的總體結構從例1中我們可以看到HTML文檔的一般結構如下所示：

<html><head><title>網頁標題</title></head><body>網頁正文</body></html>HTML文件一般是由標記和網頁的正文組成。各種標記代表的含義如下：指明文件中HTML編碼信息，同時文件擴展名.html或.htm也指明該文件是一個HTML文檔。<html>表示HTML文檔的開始，</html>表示HTML文檔的結束。

HTML編碼文檔的第一部分，即頭部信息。其中存放標題及其他內容。

（1）<html>...</html>（2）<head>...</head>這一對標記指明網頁的標題，標題顯示在瀏覽器窗口的頂端。標題應當是描述性的、獨特的和相對簡潔的。

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

換行標記BR是在HTML文檔中增加一個換行。它只是進行了換行而不改變段落設置和其他字符，這一點不同于分段標記P。<BR>是HTML語言中為數不多的單獨出現的標記，即只有<BR>而沒有</BR>。（2）換行標記

2.文本對齊方式（1）ALIGN屬性

ALIGN屬性用來表示文本在水平方向的對齊方式。如下所示：

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

等號右邊的三個值分別表示文本靠左邊、中間和右邊對齊。（2）CENTER元素

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

<UL><LI>北京

<LI>上海

<LI>天津

</UL>顯示結果為：

·北京

·上海

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

UL元素可用于創(chuàng)建一個以圓點等項目開始的無序列表，列表中的每一項用LI元素加以識別。（2）有序列表：OL元素和LI元素有序列表與無序列表類似，但項目符號為序號數字或字母。顯示如果如下所示：

1.北京

2.上海

3.天津

4.水平分隔線

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

HTML中可以用標記對文檔字符進行字體設置。字體設置包括標題、字體、字符顏色等內容。（1）標題元素

使用標題有利于組織信息，以便用戶能夠對內容有一個迅速清楚的了解。HTML中規(guī)定了標題格式。在HTML中，支持六級標題，其標記分別為h1到h6，每對起止標記用來指定文檔的標題內容。（2）字體元素

字體（FONT）元素用來設置文檔的字體。通過改變其屬性，對字體進行不同的設置。在FONT的屬性中：

SIZE屬性用來決定字的大?。?/p>

COLOR屬性用來指定文檔字符的顏色，顏色值可以按照十六進制數或者預定義顏色名方式給定；

FACE屬性用來指定一種字體名。例2

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

<fontsize=12color=MediumSlateBlueface=cursive>歡迎進入我的網站</font>

</h1></body></html>顯示結果6.表單標記表單Form標記，是動態(tài)HTML技術的基礎。它使HTML文檔能夠接受用戶的輸入信息并能夠對用戶輸入的信息進行反饋，提供了與用戶交互的可能。表單從用戶方面收集信息，當用戶添好表單上所需要的信息并將表單提交后，服務器就可以得到表單中包含的信息。表單中主要使用的標記（1）FORM：在文檔中生成表單;（2）INPUT：輸入字段;（3）SELECT：定義可選擇的若干選項，一般為列表框;（4）OPTION：SELECT元素中的選項;（5）TEXTAREA：多行文本的輸入字段。例3<html><head><title>表單的應用</title></head><body><h3>表單的應用</h3><p>請詳細填寫以下資料：

<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>興趣愛好：

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

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

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

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

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

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

友情鏈接：微軟當用戶點擊帶有下劃線的“微軟”文本時，即可打開微軟公司的主頁。幾種鏈接格式

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

（2）加入圖像標記IMG用來將圖

溫馨提示

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

評論

0/150

提交評論