




版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
網頁程序設計基礎第一章
網頁簡介和超鏈接
張新課程信息目標掌握HTML文檔結構和標記的使用了解互聯網了解HTML在HTML文檔中使用超鏈接在HTML文檔中使用特殊字符使用<META>標記4網頁是利用超文本標記語言HTML(HyperTextMarkupLanguge)編寫的,存放在Internet/Intranet上的Web服務器中,供訪問者使用瀏覽器來閱讀。利用HTML語言編寫出來的網頁又稱為超文本,即網頁中包含有文本、圖形、聲音、圖像和超鏈接(HyperLink)等多媒體信息。通常我們看到的網頁,都是以
.htm
或
html
后綴結尾的文件,稱
.HTML
文件。5網頁是在瀏覽因特網時看到的一個個的頁面;文字、圖片和動畫等網站是指存放在網絡服務器上的完整信息的集合體:它是由一個或多個網頁,按照一定的邏輯順序,以超鏈接(A)方式連接在一起,形成的一組描述完整信息的整體。首頁(主頁):構成網站的第一頁,一般起目錄、導航作用,所以又叫導航頁。6主頁個人簡歷我的相冊作品展示家庭相冊心情隨筆個人相冊網站作品平面作品涂鴉作品7互聯網簡介互聯網是世界上最大的計算機網絡互聯網被稱為網絡的網絡萬維網是互聯網中的一個子網WWW
包含分散在世界范圍內的眾多Web服務器(WorldWideWeb)8互聯網萬維網網絡99IE瀏覽器URL地址網頁HTTP協議10協議:訪問WWW上的資源必須遵循超文本傳輸協議HyperTextTransferProtocol(HTTP)地址:統一資源定位符UniformResourceLocators(URL)用來標識Web上的頁面和資源HTML:超文本標記語言HyperTextMarkupLanguage用于創建可以通過Web訪問的文檔www11WWW地址URL相當于一個文件名在網絡范圍的擴展URL的格式:<URL的訪問方式>://<主機>:<端口>/<路徑>例如::80/index.actionftp——文件傳送協議FTPhttp——超文本傳送協議HTTP存放資源的主機在因特網中的域名可省略,默認端口80,文件指向主頁12流行的瀏覽器軟件包括:InternetExplorer(IE)NavigatorFirefox、騰訊TT、360安全瀏覽器、搜狗等B/S工作原理工作原理:基于B/S(Browser/Server,瀏覽器/服務器)模式Server因特網Http請求Http響應靜態網頁技術靜態網頁技術所謂靜態是指網頁的內容是事先設計好的,不會根據實際情況發生變化HTML語言(HpyerTextMarkupLanguage,超文本標記語言)文件擴展名:.htm或.html制作工具MicrosoftFrontPageMacromediaDreamweaverText動態網頁技術動態網頁技術網頁的內容不再是固定不變的,而會根據實際情況發生動態變化網頁里的內容很大一部分是訪問數據庫得到的,用戶輸入的信息也將被保存到數據庫中與用戶的交互性大大加強分類Server端動態網頁技術Client端動態網頁技術Server端動態網頁技術Web服務器不只是簡單地將用戶請求的文件發送給Client端,而是先執行相應的腳本程序(Script),通常執行的結果為HTML格式,然后將執行結果返回給瀏覽器進行顯示用戶能夠看到的只是HTML文件,而看不到腳本程序的源代碼Server端動態網頁技術CGI(CommonGatewayInterface,通用網關接口)腳本程序文件擴展名:.cgi典型應用實例:檢查用戶身份Server端動態網頁技術在HTML代碼中嵌入腳本程序代碼段,Web服務器同樣先將腳本程序代碼段執行,轉變為HTML代碼后,返回給瀏覽器顯示ASP(ActiveServerPages,動態服務器主頁),由Microsoft公司推出,以VisualBasic為腳本語言,文件擴展名為.aspASP.net,是微軟新一代動態服務器主頁,以任何支持.net技術的語言為腳本,文件擴展名為aspxPHP,采用了類似于C語言的腳本語言,擴展名為.phpJSP(JavaServerPages),以Java為腳本語言,擴展名為.jspServer端動態網頁技術開發工具VisualInterDev(CGI/ASP)VisualS(ASP.net)DreamweaverUltraDev(CGI/ASP/PHP/JSP)Dreamweaver
(CGI/ASP/PHP/JSP)文本編輯器:UltraEdit,TextClient端動態網頁技術JavaScriptPlug-in(各類插件)媒體工具類AdobePhotoshop/MacromediaFireworksMacromediaFlashJava語言(JavaApplet)可移植性強,可以在不改動源程序的前提下讓應用程序運行于不同的操作系統平臺上,適用于網絡環境21基于web的網絡應用電子商務應用電子商務(electroniccommerce)是指通過Internet進行的各種商務活動,它覆蓋與商務活動有關的所有方面電子商務是商務活動與信息技術相結合的產物,它是傳統商務領域的一場巨大變革電子商務代表著一種新的產品生產、銷售與企業運營管理方式電子商務的類型企業與企業(businesstobusiness,B2B)企業與消費者(businesstoconsumer,B2C)消費者與消費者(consumertoconsumer,C2C)22電子政務(electronicgovernment)通過應用信息技術,實現全部政府業務處理的電子化,達到高效、方便、透明地處理政府機關之間,政府與企業、公眾的全部業務服務的目的電子政務的類型政府部門之間的電子政務(government-to-government,G-to-G)政府對企業的電子政務(government-to-business,G-to-B)政府對公眾的電子政務(government-to-citizen,G-to-C)23遠程教育應用通過數字化音頻、視頻技術,實現文字、圖像和聲音的同步傳輸,有效解決教師與學生之間的距離與時間的限制,最大限度地共享優質的師資、授課環境、實驗環境等資源,實現交互式教學遠程教育培訓服務主要包括:教育門戶網站、教育頻道、遠程教育培訓平臺提供商、遠程教育培訓內容商等24博客應用博客(blog)是以文章的形式在Internet上發表和信息共享博客在技術上屬于網絡共享空間,在形式上屬于個人Internet出版,博客是人們在Internet上思想交流的一種新方式博客的主要類型以個人的記事、表達與交流為主的博客,即個人博客由共同關心某類問題的人或團體構成的博客社區,例如技術研討、新聞時事等25播客與網絡電視應用播客是基于Internet的數字廣播技術。初期的播客借助一種iPodder的軟件與一些便攜播放器相結合播客錄制網絡語音廣播節目,并傳輸到網絡中共享給其他用戶,用戶可將廣播節目下載到自己的播放器中收聽26搜索引擎應用搜索引擎(searchengineer)是Internet中的一種Web服務器,它主動搜索其他Web服務器中的信息并索引,將索引內容存儲在可供查詢的數據庫中包含Internet中各種信息的龐大數據庫,它必須不斷更新自己的數據庫,以便反映Internet中的最新信息常用的搜索引擎Google搜索引擎:/百度搜索引擎:httP:///搜索關鍵字、高級搜索27基于P2P的網絡應用P2P(peer-to-peer)是一種客戶結點之間以對等的方式,通過直接交換信息達到共享計算機資源和服務的目的P2P網絡淡化服務提供者與服務使用者的界限,每個結點既是網絡服務的使用者,又可以向其他客戶提供資源和服務即時通信P2P軟件流媒體P2P軟件QQPPLivePoPoTvAntsMSNMessengerGoogleTalk2829301.HTML語言HTML語言的發展:80年代末在SGML的基礎上產生1994年,W3C(WorldWideWebConsortium)組織對HTML進行了標準化工作自1990年問世以來,已發行4個版本:HTML1.0、HTML2.0、HTML3.0、HTML4.0、HTML5.0HTML標準的網站:/pub/www●HyperText
Markup
Language—超文本標記語言
制作Web頁面的基本編程語言
一系列標記的集合用HTML編寫的超文本文檔稱為HTML文檔。●
HTML文檔的編寫方法手工直接編寫:記事本、EditPlus等,存成.htm
或.html文件
可視化編輯器:Dreamweaver、Frontpage等由Web服務器實時動態地生成:IIS、Tomcat等1.HTML語言HTML標簽及其屬性
標記:是HTML語言的基本組成部分,要用<>括起來。●雙邊標記:頭標與尾標。如:<title>…</title><html>…</html>。●單邊標記:只有頭標。如:<hr>標記屬性:對標記的狀態進行描述,出現在標記的<>內,屬性值用“”或者’’引起來。常見共有屬性:color、bgcolor、background、size、width、height、align、src。34HTML開發HTML標記的格式組成:<HTML>...</HTML>HTML標記用于標記HTML文檔的開始和結束元素-標識標記屬性-描述標記值-分配給屬性的內容<ELEMENTATTRIBUTE=value>標記:人(事物)屬性:性別、頭發、職業……值:女性、長頭發、工程師……
男性、黃頭發、培訓師……35HTML作用使用HTML標記或元素,可以:控制頁面和內容的外觀發布聯機文檔使用HTML文檔中插入的鏈接檢索聯機信息創建聯機表單,收集用戶的信息、執行事務等等插入動畫開發幫助文件36HTML語法示例:<HTML><HEAD> <TITLE>歡迎學習HTML</TITLE></HEAD><BODY> <H3>我的第一個HTML文檔</H3></BODY></HTML>運行結果37標記<HTML> <HEAD> <TITLE>歡迎使用HTML</TITLE> </HEAD> <BODYBGCOLOR=lavender> <P>這會是一種很有趣的體驗 <P>另一個段落元素 </BODY></HTML>運行結果38補充:關于顏色顏色值是一個關鍵字或一個RGB格式的數字。aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow色彩的概述色彩具有五顏六色,千變萬化的特點。平時我們看到的白光,經過分析在色帶上可以看到,事實上包括了7種顏色。色彩有冷、暖之分,其巧妙運用會達到意想不到的效果。紅色代表:熱情、活潑、熱鬧、溫暖、幸福橙色代表:光明、華麗、興奮、快樂。黃色代表:明朗、愉快、高貴、希望綠色代表:平靜、和平、柔和、安靜、青春藍色代表:永恒、沉靜、理智、誠實紫色代表:高貴、魅力、自傲白色代表:純潔、樸實、神圣灰色代表:消極、謙虛、平凡、中庸、寂寞黑色代表:堅實、嚴肅、粗莽40在HTML中對于顏色的定義可以用6位十六進制數。電腦屏幕的色彩是由rgb(紅、綠、藍)三種色光所合成的,通過調整這三個基色就可以調配出其它的顏色。每2位數代表一種顏色的濃度,三種顏色的順序為紅、綠、藍,00代表顏色濃度最小,FF代表顏色濃度最大。#000000代表純黑、#FFFFFF代表純白、41d圖中所示是部分顏色的RGB代碼:
例:為頁面設置背景色:
<bodybgcolor=“#FFFF33”>42HTML文檔的結構HTML部分文檔頭部分正文部分<HTML> <HEAD> <TITLE>歡迎進入HTML世界</TITLE> </HEAD> <BODY> <P>這會是一種很有趣的體驗</P> </BODY></HTML>基本結構:運行結果43段落標記<HTML> <HEAD> <TITLE>歡迎使用HTML</TITLE> </HEAD> <BODYBGCOLOR=lavender>
<P>這會是一種很有趣的體驗
<P>
另一個段落元素 </BODY></HTML>運行結果44換行標記<HTML> <HEAD> <TITLE>歡迎使用HTML</TITLE> </HEAD> <BODYBGCOLOR=lavender> <P>這會是一種很有趣的<BR>體驗 <P>另一個段落元素 </BODY></HTML>運行結果45使用對齊屬性<HTML>
<HEAD>
<TITLE>學習HTML</TITLE>
</HEAD> <BODYBGCOLOR=lavender> <Palign=right>這會是一種很有趣的體驗</P> </BODY></HTML>
運行結果右對齊Left:左對齊Center:居中Right:右對齊46使用META標記2-1提供關于網頁的信息<METAname=“Author”content=“GrahamBrown”>
<METAname=“KEYWORDS”content=“...”>
<METAname="DESCRIPTION"content="...">對網頁的描述根據關鍵詞生成響應獲得文檔的作者名稱2.應用:關鍵詞生成響應<METAhttp-equiv="Expires"content="Mon,15Sep200314:25:27GMT">Expires:Mon,15Sep200314:25:27GMT設置網頁的到期值:響應
473.自動刷新頁面<METAhttp-equiv="Refresh"content="10;url=http://yourlink">4.使用網頁所使用的編碼<METAhttp-equiv="Content-Type"content="text/html;charset=gb2312">應用:如網上實時新聞報道。應用:如在不同瀏覽器上正確顯示中文。使用META標記2-248在HTML文檔中使用特殊字符……<TDwidth="100%"height=18><FONTsize=-1>Userid 用戶名/口令。</FONT></TD>…………200>189……>號……20<189……<號……"風馳電掣"……
“號……x>y;&x=120……
與符號……©CopyRight版權所有……
?版權符號……®APTECH……
?注冊商標491、職位:關于可申請的職位……2、培訓資源:本學院美術學位的培訓資源請單擊此處查看視頻……3、聯盟:我們有許多聯盟……超鏈接簡介2-1主頁(落錨點)職位培訓資源請單擊此處查看視頻聯盟50超鏈接簡介2-2鏈接類型內部鏈接1、到同一網站內的其它網頁的鏈接2、到同一文檔內的其他部分的鏈接外部鏈接到其他網站或服務器上的頁面的鏈接。----------------------------------------------------------------------Web站點1Web站點251創建超鏈接要創建超鏈接,必須指定兩個部分要鏈接的文件的完整地址或URL熱點熱點可以是一行文字甚至一個圖像C:\internet\index.htmlservice/index.html
絕對URL文件的完整地址相對URL52超鏈接:錨記A<AHREF=protocol://host.domain:port/path/filename>
Hypertext</A>Protocol是協議類型http–超文本傳輸協議gopher–搜索文件telnet–打開
telnet會話ftp–文件傳輸協議mailto–發送電子郵件
Host.domain是服務器的Internet地址Port是目標服務器的端口號Hypertext是用戶必須單擊才能激活鏈接的文本或圖像eg.<AHREF=Doc2.html>文檔2</A><AHREF="
:80/index.action">互聯網</A><AHREF="
">互聯網</A><AHREF="
/EnglishWeb/index.html">互聯網</A>
語法為:53鏈接到其他文檔<HTML>碼頭<HEAD><TITLE>使用鏈接</TITLE></HEAD><BODY><BR><BR><P>本頁的所有內容都講述關于如何創建到文檔的鏈接
<AHREF=Doc2.html>單擊此處查看文檔2</A></BODY></HTML>
<HTML>船<HEAD><TITLE>文檔2</TITLE></HEAD><BODY><BR><BR><P>這是文檔2。單擊文檔1中的超鏈接后將顯示本頁。<BR><BR>
<AHREF=Doc1.html>返回</A></BODY></HTML>
54鏈接到同一文檔的各個部分<HTML><HEAD><TITLE>使用鏈接</TITLE></HEAD><BODY>
<AHREF=#Internet>互聯網</A><BR><BR>
<AHREF=#HTML>HTML簡介</A><BR><BR>
<AHREF=#Consistency>多樣化和統一性</A><BR><BR>
<Aname=Internet>互聯網</A><BR><P>互聯網是網絡的網絡。也就是說,計算機網絡可以跨越國家甚至全球的范圍連接到其他網絡。世界上所有的計算機都可以通過TCP/IP傳輸協議綁定在一起。</P>
<Aname=HTML>HTML簡介</A><BR><P>超文本標記語言是Web用來創建和識別文檔的標準語言。雖然它不是標準通用標記語言(SGML)的子集,但與它有著某種程度上的關聯。SGML是一種文檔格式語言表示方法。</P>
<Aname=Consistency>多樣性和統一性</A><BR><P>萬事萬物都離不開多樣性和統一性這樣一條基本準則。也就是說,所有的事物都可以融合成一個整體,同時,又保持自己獨特的與眾不同的一面。站點的獨特性恰恰來源于它的一致性。顏色、字體、分欄布局以及其他設計元素應在站點的每個部分都保持一致。</P><BR><BR><BR><BR><BR><BR></BODY></HTML>單擊55鏈接到另一文檔中某個特定位置<HTML><HEAD><TITLE>主文檔</TITLE></HEAD><BODY>
<AHREF=副文檔.html#Internet>互聯網</A><BR><BR>
<AHREF=副文檔.html#HTML>HTML簡介</A><BR><BR>
<AHREF=副文檔.html#Consistency>多樣性和統一性</A></BODY></HTML>
單擊56鏈接到另一文檔中某個特定位置<HTML><HEAD><TITLE>副文檔</TITLE></HEAD><BODY>
<Aname=Internet>互聯網</A><BR><P>互聯網是網絡的網絡。也就是說,計算機網絡可以跨越國家甚至全球的范圍連接到其他網絡。世界上所有的計算機都可以通過TCP/IP傳輸協議綁定在一起。</P>
<Aname=HTML>HTML簡介</A><BR><P>超文本標記語言是Web用來創建和識別文檔的標準語言。雖然它不是標準通用標記語言(SGML)的子集,但與它有著某種程度上的關聯。SGML是一種文檔格式語言表示方法。</P>
<Aname=Consistency>多樣性和統一性</A><BR><P>萬事萬物都離不開多樣性和統一性這樣一條基本準則。也就是說,所有的事物都可以融合成一個整體,同時,又保持自己獨特的與眾不同的一面。站點的獨特性恰恰來源于它的一致性。顏色、字體、分欄布局以及其他設計元素應在站點的每個部分都保持一致。</P><BR><BR><BR><BR><BR><BR
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 教學評估團日活動
- 家訪記錄表培訓
- 情境測查考試題及答案
- java面試題及答案session
- oracle理論面試題及答案
- 健康素養考試題及答案
- 兒童哲學與教育
- 扶貧站面試題及答案
- 歷史巢湖中考試題及答案
- 工業互聯網平臺量子密鑰分發技術產業生態構建報告
- 2023-2024學年四川省廣安市高二下學期期末教學質量檢測數學試題 (解析版)
- 夾具考試題及答案
- (高清版)DB31∕T 1530-2024 心理咨詢機構服務規范
- 青海省消防救援總隊招聘消防文員筆試真題2024
- 便秘科普宣傳課件
- 浙江潔普斯清潔設備有限公司年產11萬臺清洗機技改項目環評報告
- 高校資產管理十五五規劃方案
- 安全防范系統設計方案
- 《人衛版第九版內科學心力衰竭》課件PPT
- 中國監察制度史
- 竣工驗收證書(模板)
評論
0/150
提交評論