【學習課件】第三章超文本標記語言HTML

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

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

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

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

5、內容 閃爍效果 文字內容 練習：如何寫出x的平方加y的平方？編輯pptx2+y2編輯ppt7、文字顏色 16進制顏色代碼：#RRGGBB10進制RGB代碼：RGB（RRR，GGG，BBB）直接顏色名稱：“Red”/“Blue”/“Silver”編輯ppt實例編輯ppt8、位置控制ALIGN屬性可以控制文字或圖片的對齊方式語法：#leftrightcenterALIGN屬性也常常用在其它標簽中，引起其內容位置的變動。如：H1 ALIGN= center 實例編輯ppt9、預格式化標簽語法格式： 文字內容 實例編輯ppt綜合實例編輯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、列表有序列表無序列表 如何設置多層級列表？編輯ppt 小張 語文 數(shù)學 小王編輯ppt定義性列表定義性列表可以用來給每一個列表項再加上一段說明性文字，說明獨立于列表項另起一行顯示。 第一項 敘述第一項的定義第二項 敘述第二項的定義第三項 敘述第三項

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

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

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

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

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

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

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

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

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

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

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