【學(xué)習(xí)課件】第三章超文本標(biāo)記語言HTML

1、第三章超文本標(biāo)記語言HTML編輯ppt第三章 超文本標(biāo)記語言HTML學(xué)習(xí)目標(biāo)：通過本章的學(xué)習(xí)，使學(xué)生對HTML有一個全面的了解，能夠掌握HTML文件中常用標(biāo)簽的作用，可以閱讀一般網(wǎng)頁的源文件,并會用HTML中常見的標(biāo)簽命令編寫簡單的網(wǎng)頁。學(xué)習(xí)重點(diǎn)：掌握HTML文件中常用標(biāo)簽的作用。學(xué)習(xí)難點(diǎn)：能夠利用HTML編寫制作網(wǎng)頁學(xué)習(xí)方式：講授多媒體演示上機(jī)學(xué)習(xí)時間：4課時編輯ppt3.1 HTML基本結(jié)構(gòu)一、html簡介 HTML (HyperText Markup Language) 超文本標(biāo)記語言，是一種用來制作超文本文檔的簡單標(biāo)記語言，用特殊標(biāo)記(tag)來描述文檔結(jié)構(gòu)和表現(xiàn)形式。使用HTML語言

2、描述的文件，需要通過WWW瀏覽器顯示出效果。 HTML開發(fā)工具：記事本、FrontPage、Dreamweaver等。 HTML文件的擴(kuò)展名：htm，html。編輯ppt二、HTML的基本結(jié)構(gòu) 標(biāo)題 文檔主題，正文部分 表示該文檔是HTML文檔出現(xiàn)在文檔的起始部分里，標(biāo)明文檔的題目，以及主題信息指明文檔的主體區(qū)域，包含正文內(nèi)容、圖像、表格等等編輯ppt三、HTML標(biāo)簽1、單標(biāo)簽 例： 換行標(biāo)簽2、雙標(biāo)簽 內(nèi)容 例： 一級標(biāo)題3、標(biāo)簽屬性 例：編輯ppt3.2 常用的HTML標(biāo)簽命令一、BODY標(biāo)簽用來定義文檔主體語法格式： (其他頁面元素)編輯pptBgcolor背景顏色Background背

3、景圖片Text一般文字的顏色Leftmargin頁面左側(cè)的留白距離Topmargin頁面頂端的留白距離Link鏈接文字的顏色Alink活動鏈接文字的顏色Vlink已訪問鏈接文字的顏色編輯ppt二、頁面布局與文字設(shè)計(jì)1、標(biāo)題2、換行3、段落4、水平線5、文字的大小設(shè)置6、文字的字體與樣式7、文字的顏色8、位置控制9、預(yù)格式化10、字幕11、列表12、Html特殊字符編輯ppt1、標(biāo)題語法格式： 標(biāo)題內(nèi)容 其中： x = 1、2、3、4、5、6 Align（對齊）屬性包括left、center、right實(shí)例編輯ppt2、換行語法格式：文字內(nèi)容 實(shí)例編輯ppt3、段落語法格式： 段落內(nèi)容 其中：

4、Align（對齊）屬性包括left、center、right實(shí)例編輯ppt4、水平線語法格式：Width 水平線的寬度，用百分比或象素值來表示Align 水平線的對齊方式Size 水平線的高度Color 水平線的顏色Noshade 無陰影效果實(shí)例編輯ppt長度單位像素(pixel)/百分比(%)絕對長度：相對長度：編輯ppt5、文字的大小設(shè)置語法格式： 文字內(nèi)容 Face文字的字體名稱，如宋體Size文字的字號，可選值為17，默認(rèn)值為3Color文字顏色實(shí)例編輯ppt6、文字的字體實(shí)例 編輯ppt字體樣式文字加粗 文字內(nèi)容 文字斜體 文字內(nèi)容 文字加下劃線 文字內(nèi)容 上標(biāo) 文字內(nèi)容 下標(biāo) 文字

5、內(nèi)容 閃爍效果 文字內(nèi)容 練習(xí)：如何寫出x的平方加y的平方？編輯pptx2+y2編輯ppt7、文字顏色 16進(jìn)制顏色代碼：#RRGGBB10進(jìn)制RGB代碼：RGB（RRR，GGG，BBB）直接顏色名稱：“Red”/“Blue”/“Silver”編輯ppt實(shí)例編輯ppt8、位置控制ALIGN屬性可以控制文字或圖片的對齊方式語法：#leftrightcenterALIGN屬性也常常用在其它標(biāo)簽中，引起其內(nèi)容位置的變動。如：H1 ALIGN= center 實(shí)例編輯ppt9、預(yù)格式化標(biāo)簽語法格式： 文字內(nèi)容 實(shí)例編輯ppt綜合實(shí)例編輯ppt10、字幕語法： 屬性：bgcolor 背景顏色 direc

6、tion 字幕滾動方向（down/up/left/right）height 字幕高度 width 字幕寬度vspace 垂直空白 hspace 水平空白scrolldelay 每次移動的時間間隔scrollamout 每次移動的距離behavior (= scroll, alternate, slide)loop 循環(huán)次數(shù) align編輯ppt11、列表有序列表無序列表 如何設(shè)置多層級列表？編輯ppt 小張 語文 數(shù)學(xué) 小王編輯ppt定義性列表定義性列表可以用來給每一個列表項(xiàng)再加上一段說明性文字，說明獨(dú)立于列表項(xiàng)另起一行顯示。 第一項(xiàng) 敘述第一項(xiàng)的定義第二項(xiàng) 敘述第二項(xiàng)的定義第三項(xiàng) 敘述第三項(xiàng)

7、的定義實(shí)例編輯ppt12、Html特殊字符代碼表示式屏幕顯示符號 空格 < &&編輯ppt三、表格表格的基本結(jié)構(gòu) 定義表格定義標(biāo)題 定義表行 定義表頭 定義表元(表格的具體數(shù)據(jù))實(shí)例編輯ppt第一季度邊框(boder)單元格內(nèi)容與單元格邊框之間的距離(Cellpadding)行(TR)單元格TD表格(TABLE)單元格間距(CellSpacing)編輯ppt 語法格式： 編輯ppt1、表格的標(biāo)題設(shè)置標(biāo)題位于表格上方： . 設(shè)置標(biāo)題位于表格下方： . 實(shí)例編輯ppt2、表格的尺寸編輯ppt3、邊框尺寸 定貨單蘋果香蕉葡萄200公斤200公斤100公斤 編輯ppt4、格間線寬度 定貨單蘋

8、果香蕉葡萄200公斤200公斤100公斤 編輯ppt5、內(nèi)容與格線之間的寬度 定貨單蘋果香蕉葡萄200公斤200公斤100公斤 編輯ppt6、表格內(nèi)文字的對齊/布局左右排列居左居中居右 A B C 編輯ppt6、表格內(nèi)文字的對齊/布局上下排列 上齊居中 下齊 A B C D 編輯ppt7、跨多行、多列的表元跨多列的表元 值班人員 星期一 星期二 星期三 李強(qiáng)張明王平 編輯ppt7、跨多行、多列的表元跨多行的表元 值班人員 星期一星期二 星期三 李強(qiáng)張明王平 編輯ppt8、表格的顏色可對整個表格填入底色，也可對任何一行、一個表元使用背景色。表格的背景色彩 行的背景色彩 表元的背景色彩 或 編輯p

9、pt綜合實(shí)例表格標(biāo)題行標(biāo)題一行標(biāo)題二列標(biāo)題一AAAABBBB列標(biāo)題二CCCCDDDD編輯ppt四、文件間的鏈接鏈接文字HREF：定義這個鏈接所指的地方通過點(diǎn)擊“鏈接文字”可以到達(dá)指定的文件溫州大學(xué)本地鏈接、URL鏈接、目錄鏈接、郵件鏈接編輯ppt 語法格式： A HREF =“URL” Name=“?” Target=“?” Title=“?” 鏈接文字URL 鏈接目標(biāo)的URL地址Name 鏈接目標(biāo)的名稱Target 目標(biāo)窗口Title 鏈接提示URL和Name屬性不同時使用編輯ppt鏈接標(biāo)簽的Target屬性 鏈接文字 _Blank 打開一個新窗口 _Self 在當(dāng)前窗口打開鏈接（默認(rèn)） _

10、Parent 在當(dāng)前窗口的父窗口中打開鏈接 _Top 在最高一級窗口中打開鏈接僅用于框架窗口編輯ppt1、本地鏈接本地鏈接:對同一臺機(jī)器上的不同文件進(jìn)行的連接稱為本地鏈接以絕對路徑表示：文件的鏈接以相對路徑表示：文件的鏈接鏈接上一目錄中的文件：IP地址編輯ppt2、URL鏈接URL鏈接是指鏈接的文件在其它服務(wù)器上。語法：協(xié)議名：/主機(jī).域名路徑文件名如：溫州大學(xué)編輯ppt3、目錄鏈接目錄鏈接直接指到某文件上部、下部或是中央部分制作方法是：（1）把某段落設(shè)置為鏈接位置，格式是： （2）在調(diào)用此鏈接部分的文件定義鏈接：鏈接文字如果是在一個文件內(nèi)跳轉(zhuǎn)，文件名可以省略不寫。實(shí)例編輯ppt4、郵件鏈接

11、聯(lián)系我們 編輯ppt五、多媒體效果1、插入圖片2、插入音樂3、插入視頻編輯ppt1、插入圖片如：編輯ppt語法格式：SRC 圖片文件URL地址ALT 圖片的說明文字Width/ Height 圖片的寬度/高度Boder 圖片的邊框hspace 圖片與文字的水平距離vspace 圖片與文字的垂直距離編輯ppt圖像標(biāo)簽的Align屬性Top圖片和文字頂部對齊Middle圖片和文字中間對齊Bottom圖片和文字底邊對齊Absmiddle圖片對齊到目前文字行絕對中間Absbottom圖片對齊到目前文字行絕對底部Left圖片左對齊，文字沿圖片繞排Right圖片右對齊，文字沿圖片繞排實(shí)例編輯ppt圖形按鈕

12、如：編輯ppt2、插入音樂（1）點(diǎn)播音樂做鏈接樂曲名（2）自動載入音樂實(shí)例編輯ppt1、SRC=“FILENAME“：設(shè)定音樂文件的路徑2、AUTOSTART=TRUE/FALSE：是否要音樂文件傳送完就自動播放，TRUE或1是要，F(xiàn)ALSE或0是不要，默認(rèn)為TRUE3、LOOP=TRUE/FALSE：設(shè)定播放重復(fù)次數(shù)，LOOP=6表示重復(fù)6次，TRUE表示無限次播放，F(xiàn)ALSE播放一次即停止。4、STARTIME=“分:秒”：設(shè)定樂曲的開始播放時間，如20秒后播放寫為STARTIME=00:20編輯ppt5、VOLUME=0-100：設(shè)定音量的大小。如果沒設(shè)定的話，就用系統(tǒng)的音量。6、WID

13、TH HEIGHT：設(shè)定控制面板的大小7、HIDDEN=TRUE：隱藏控制面板8、CONTROLS=CONSOLE/SMALLCONSOLE：設(shè)定控制面板的樣子編輯ppt（3）IE中的背景音樂 #=循環(huán)數(shù) 例：編輯ppt3、插入視頻（1）鏈接一個視頻文件視頻名稱（2）自動載入視頻實(shí)例編輯ppt1、SRC=FILENAME“：設(shè)定文件的路徑2、AUTOSTART=TRUE/FALSE：是否要文件傳送完就自動播放，TRUE是要，F(xiàn)ALSE是不要，默認(rèn)為FALSE3、LOOP=TRUE/FALSE：設(shè)定播放重復(fù)次數(shù)，LOOP=6表示重復(fù)6次，TRUE表示無限次播放，F(xiàn)ALSE播放一次即停止。4、ST

14、ARTIME=“分:秒”：設(shè)定開始播放時間，如20秒后播放寫為STARTIME=00:205、VOLUME=0-100：設(shè)定音量的大小。如果沒設(shè)定的話，就用系統(tǒng)的音量。6、WIDTH HEIGHT：設(shè)定控制面板的大小編輯ppt六、框架 Frames結(jié)構(gòu)能將整個窗口分成幾個獨(dú)立的小窗口 每一個窗口可分別載入不同的文件 每個窗口可以相互溝通編輯ppt框架語法 編輯ppt 框架的嵌套編輯pptFrameSet標(biāo)簽 語法格式： 編輯pptFrameSet標(biāo)簽的屬性Cols垂直分割窗口Rows橫向分割窗口Frameborder框架邊框Framespacing兩個框架邊界之間保留空白的距離編輯pptRow

15、s、Cols屬性例： 編輯pptRows、Cols屬性Rows=“ 100 , * ”1006681024編輯pptRows、Cols屬性 將100像素以外的窗口平均分配 將窗口分為三等份編輯pptFrame標(biāo)簽 語法格式： 編輯pptFrame標(biāo)簽的屬性Name框架名稱SRC此框架要顯示的網(wǎng)頁URL Scrolling:YES要滾動條Scrolling:NO不要滾動條Scrolling:Auto內(nèi)容超過一屏?xí)r有滾動條，否則，沒有NoResize禁止改變框架大小編輯ppt各窗口間的相互操作由Frames分出來的幾個窗口的內(nèi)容并不是靜止不變的，往往一個窗口的內(nèi)容隨著另一個窗口的要求而不斷變化。為

16、了完成各窗口之間的相互操作，我們必須為每一個窗口起一個名字例：編輯ppt各窗口間的相互操作定義了窗口名稱，還應(yīng)該有Target來配合使用，Target屬性指定了所鏈接的文件出現(xiàn)在哪一窗口。Target的值可以是name定義的名稱 也可以是以下四類值： 顯示一個新窗口 _self 顯示在同一個窗口_parent 顯示在Frameset的前一份文件的窗口_top 顯示在整個瀏覽器窗口編輯ppt例如 編輯ppt七、表單交互式表單的作用就是收集用戶信息，將其提交到服務(wù)器，從而實(shí)現(xiàn)與客戶的交互。一個完整的表單包含兩個部分： 在網(wǎng)頁中進(jìn)行描述的表單對象 應(yīng)用程序，用于對客戶輸入的信息進(jìn)行分析處理編輯ppt

17、表單體標(biāo)簽 例： 編輯ppt表單體屬性1、名稱2、動作：輸入一個URL地址或mailto地址，指明處理該表單數(shù)據(jù)的程序3、方法：Post允許傳送數(shù)據(jù)量大的的信息, Get只接收低于1K（約215個漢字）的信息。 post傳輸信息內(nèi)容，get傳輸url值。編輯ppt各種表單對象編輯ppt文本框 初始值 單行多行密碼編輯ppt單選按鈕 音樂 旅游編輯ppt復(fù)選框 語文 數(shù)學(xué)編輯ppt按鈕 編輯ppt列表框 ?？?本科 碩士 博士 編輯ppt跳轉(zhuǎn)菜單 第一單元 第二單元 第三單元 編輯ppt文件域 編輯ppt3.3 綜合制作實(shí)例使用表格進(jìn)行頁面布局編輯ppt本章習(xí)題 根據(jù)下列要求在記事本中用HTML代碼設(shè)計(jì)一網(wǎng)頁，并把后綴名改為.htm或.html結(jié)尾的網(wǎng)頁。1.htm 新建一個網(wǎng)頁，網(wǎng)頁標(biāo)題保存為“主頁”1）文本超連接 連接到“表格”頁面2）圖片超連接 插入一副圖片連接到“圖片”頁面3）郵件超連接 輸入自己的郵箱進(jìn)行連接編輯ppt2.htm 新建一個網(wǎng)頁，網(wǎng)頁標(biāo)題保存為“表