HTML網(wǎng)頁(yè)制作PPT學(xué)習(xí)課件

HTML語(yǔ)言 1 目標(biāo) 描述HTML文檔的結(jié)構(gòu)使用基本的HTML標(biāo)簽在HTML文檔中插入特殊字符在HTML文檔中創(chuàng)建超級(jí)鏈接 2 HTML簡(jiǎn)介 3 超文本 提供鏈接到其他頁(yè)面或同一頁(yè)面的其他位置的文本 標(biāo)記 可以用標(biāo)簽標(biāo)記頁(yè)面的不同部分以正確顯示 語(yǔ)言 HTML可用于 控制頁(yè)面和內(nèi)容的外觀發(fā)布和檢索聯(lián)機(jī)文檔創(chuàng)建聯(lián)機(jī)表單插入諸如音頻剪輯和視頻剪輯等對(duì)象 HTML文檔示例 4 學(xué)習(xí)HTML歡迎來(lái)到HTML世界 HTML代碼 瀏覽器處理代碼并進(jìn)行顯示 編輯器和瀏覽器 5 學(xué)習(xí)HTML歡迎來(lái)到HTML世界 HTML代碼 在編輯器中編寫(xiě)HTML代碼 瀏覽器顯示HTML文檔 頁(yè)面 編輯器2 2 6 需要在編輯器中鍵入源代碼 示例 DreamWeaver MacromediaDreamweaver是一種專(zhuān)業(yè)的HTML編輯器 用于設(shè)計(jì) 編碼 開(kāi)發(fā)網(wǎng)站 網(wǎng)頁(yè)和強(qiáng)大的Web應(yīng)用程序 HTML文檔結(jié)構(gòu) 7 學(xué)習(xí)HTML歡迎來(lái)到HTML世界 HTML網(wǎng)頁(yè) 頭部部分 主體部分 標(biāo)簽標(biāo)記HTML文檔的開(kāi)始和結(jié)束 這部分包括標(biāo)題和其他說(shuō)明信息 包括在 標(biāo)簽內(nèi) 這部分包含文本 圖像和鏈接 它包括在 標(biāo)簽內(nèi) HTML標(biāo)簽2 2 8 學(xué)習(xí)HTML歡迎來(lái)到HTML世界 標(biāo)簽 標(biāo)識(shí)BODY元素 屬性 提供有關(guān)元素的附加信息 值 分配給屬性的內(nèi)容 META標(biāo)簽2 1 META標(biāo)簽是一個(gè)特殊的HTML標(biāo)簽 提供有關(guān)網(wǎng)頁(yè)的信息 如作者姓名 公司名稱(chēng)和聯(lián)系信息等許多搜索引擎都使用META標(biāo)簽信息例如 要將GrahamBrowne指定為作者 則使用以下META標(biāo)簽 9 META標(biāo)簽2 2 http equiv屬性可用來(lái)代替META標(biāo)簽中的name屬性 10 表示有效期 格林尼治標(biāo)準(zhǔn)時(shí)間2005年9月12日 星期一14 25 27 表示每隔2秒 自動(dòng)刷新網(wǎng)頁(yè) 演示 自動(dòng)刷新的例子 HTML基本元素 標(biāo)題段落換行符預(yù)先格式化字符格式化列表水平線字體圖像特殊字符超級(jí)鏈接 11 標(biāo)題 12 動(dòng)物世界從大自然獲得靈感從大自然獲得靈感從大自然獲得靈感從大自然獲得靈感從大自然獲得靈感從大自然獲得靈感 H1到H6標(biāo)簽用于指定不同級(jí)別的標(biāo)題 段落標(biāo)簽 13 詩(shī)詞學(xué)習(xí)我是第一段我是第二段左對(duì)齊顯示居中顯示右對(duì)齊顯示 標(biāo)簽用于標(biāo)記段落 換行符 只要在文本中放入標(biāo)簽 就會(huì)強(qiáng)制換行 14 詩(shī)詞學(xué)習(xí)我是第一行我是第二行我是第一段我是第二段 標(biāo)簽 15 詩(shī)詞學(xué)習(xí)靜夜思床前明月光疑是地上霜舉頭望明月低頭思故鄉(xiāng) HTML 標(biāo)簽用于顯示具有預(yù)先定義格式的文本 如HTML文檔中所示 字符格式化標(biāo)簽 16 學(xué)習(xí)HTML這很有趣足球是最令人喜愛(ài)的運(yùn)動(dòng)之一 信息技術(shù)是發(fā)展的關(guān)鍵 水的分子式是H2O 32等于9 此標(biāo)簽用于對(duì)文本應(yīng)用各種格式 如粗體 斜體 下劃線 下標(biāo) 上標(biāo)等 列表簡(jiǎn)介 列表用于按邏輯方式對(duì)數(shù)據(jù)分組 17 玫瑰花 向日葵 蘭花 蘋(píng)果 桔子 水仙 芒果 水果蘋(píng)果芒果桔子花卉水仙蘭花向日葵玫瑰花 列表類(lèi)型 無(wú)序列表 18 星期中的每一天星期日星期一星期二星期三星期四星期五星期六 無(wú)序列表也稱(chēng)為 項(xiàng)目列表 列表類(lèi)型 有序列表 19 星期中的每一天星期日星期一星期二星期三星期四星期五星期六 在有序列表中 列表項(xiàng)以自動(dòng)生成的順序顯示 使用水平線 20 動(dòng)物世界老虎的夜間視覺(jué)老虎的夜視能力優(yōu)于人類(lèi)的夜視能力五倍以上 標(biāo)簽用于在頁(yè)面上繪制水平線 使用字體和屬性 21 動(dòng)物世界了解有關(guān)動(dòng)物的更多信息斑馬的特性沒(méi)有任何兩匹斑馬的斑紋是完全一樣的 因此每匹斑馬都是獨(dú)一無(wú)二的 可以按名稱(chēng)或十六進(jìn)制值指定顏色 可以為字體指定的大小范圍為從1到7 可以指定一列字體 各字體間用逗號(hào)分隔 瀏覽器以最先找到的字體顯示文本 元素及其相關(guān)屬性 如SIZE COLOR和FACE 可用于控制網(wǎng)頁(yè)上文本的顯示 插入圖像2 1 22 標(biāo)簽用于在HTML文檔中插入圖像 標(biāo)簽的兩個(gè)常用屬性是SRC和ALIGN SRC屬性用于指定要插入的圖像位置 ALIGN屬性用于指定圖像相對(duì)于文本的對(duì)齊方式 插入圖像2 2 23 動(dòng)物世界讓我們看看這些可愛(ài)的動(dòng)物底部對(duì)齊頂部對(duì)齊居中對(duì)齊 插入特殊字符2 1 某些字符在HTML中具有特殊意義 如小于號(hào) 定義HTML標(biāo)簽的開(kāi)始字符實(shí)體用于在HTML文檔中插入特殊字符 如版權(quán)號(hào) 注冊(cè)商標(biāo)等通常情況下 HTML會(huì)自動(dòng)截去多余的空格 不管你加多少空格 都被看做一個(gè)空格 比如你在兩個(gè)字之間加了10個(gè)空格 HTML會(huì)截去9個(gè)空格 只保留一個(gè) 為了在網(wǎng)頁(yè)中增加空格 你可以使用表示空格 24 插入特殊字符需要用HTML字符實(shí)體 空格 插入特殊字符2 2 25 創(chuàng)建超級(jí)鏈接 26 了解鳥(niǎo)類(lèi)會(huì)彈琴的狗狗單擊此處查看 絕對(duì)和相對(duì)路徑名 27 要鏈接到另一目錄 C example 下的頁(yè)面 可編寫(xiě)或 要鏈接到同一目錄 C html 下的頁(yè)面 可編寫(xiě)或 C html目錄 C example目錄 絕對(duì)路徑名 相對(duì)路徑名 鏈接到同一文檔的某個(gè)部分2 1 錨記標(biāo)簽用于使用戶(hù) 跳 到文檔的某個(gè)部分HTML的NAME屬性用于創(chuàng)建錨標(biāo)記為達(dá)到這種跳轉(zhuǎn)效果 請(qǐng)?jiān)贖REF參數(shù)中使用該標(biāo)記 28 主題名稱(chēng) 主題名稱(chēng) 鏈接到同一文檔的各個(gè)部分2 2 29 獅子斑馬印度豹獅子獅子的吼聲從八公里之外就能聽(tīng)到 雄獅 很容易從鬃毛識(shí)別出雌雄 的重量達(dá)250公斤 而雌獅則要輕得多 只有180公斤 斑馬沒(méi)有任何兩匹斑馬的斑紋完全一樣 因此每匹斑馬都是獨(dú)一無(wú)二的 斑馬也稱(chēng)為黑白條紋相間的馬 演示 錨鏈接例子 鏈接到其他文檔的特定位置 30 讓我們深入了解一些動(dòng)物獅子斑馬印度豹 Animals htm 獅子獅子的吼聲從八公里之外就能聽(tīng)到 雄獅 很容易從鬃毛識(shí)別出雌雄 的重量達(dá)250公斤 而雌獅則要輕得多 只有180公斤 Animaldetails htm 電子郵件鏈接 用戶(hù)可從網(wǎng)頁(yè)發(fā)送電子郵件 31 海豚充分交流 密切配合據(jù)說(shuō) 海豚的交流模式幾乎與人類(lèi)的一樣復(fù)雜 請(qǐng)將您的疑問(wèn)發(fā)送至DavidFernandez 總結(jié)2 1 HTML標(biāo)簽一般配對(duì)使用 不區(qū)分大小寫(xiě)標(biāo)簽都具有屬性 屬性提供關(guān)于網(wǎng)頁(yè)上HTML元素的附加信息META標(biāo)簽放置在網(wǎng)頁(yè)的標(biāo)題處以提供關(guān)于頁(yè)面的信息 搜索引擎常會(huì)用到這些標(biāo)簽標(biāo)題級(jí)標(biāo)簽使用 32 總結(jié)2 2 段落標(biāo)簽使用 無(wú)序列表使用標(biāo)簽 有序列表使用標(biāo)簽字體標(biāo)簽超鏈接標(biāo)簽超鏈接文本 33 表格 行 列 列標(biāo)題 在HTML文檔中 廣泛使用表格來(lái)存放網(wǎng)頁(yè)上的文本和圖像 單元格 34 使用表格姓名性別分?jǐn)?shù)RobertM80 創(chuàng)建表格 代表表格的開(kāi)始 border 2表示邊框尺寸為2 表示行 這是表格的第一行 有三列數(shù)據(jù) 代表列 表格的第二行 有三列數(shù)據(jù) 表格的第三行 也有三列數(shù)據(jù) 35 學(xué)員檔案信息姓名性別分?jǐn)?shù)RobertM80 表格的標(biāo)題 表示表格標(biāo)題 表示行或列標(biāo)題 粗體顯示 表格的第二行 有三列數(shù)據(jù) 表格的第三行 有三列數(shù)據(jù) 36 學(xué)員檔案信息姓名性別分?jǐn)?shù)RobertM80 表格的對(duì)齊方式 整個(gè)表格居中 姓名列默認(rèn)左對(duì)齊 性別列居中 分?jǐn)?shù)列右對(duì)齊 37 合并單元格 跨列 創(chuàng)建表格第一學(xué)期第二學(xué)期數(shù)學(xué)科學(xué)英語(yǔ)數(shù)學(xué)科學(xué)英語(yǔ)989580958788 COLSPAN n 屬性表示跨多少列 38 合并單元格 跨行 創(chuàng)建表格螺母螺栓錘子第一季度一月250010001240二月300025004000 ROWSPAN n 屬性表示跨多少行 39 學(xué)員檔案信息姓名性別分?jǐn)?shù)RobertM80MaryF18 表格的背景色和尺寸設(shè)置 表格的顏色設(shè)置 表格的背景色行的背景色列的背景色顏色值可以采用RGB red green blue 紅綠藍(lán)十六進(jìn)制值表示 如紅色 FF0000 或是一些預(yù)定義色彩名稱(chēng) red blue yellow等 表格的尺寸設(shè)置 例如 表示一個(gè)長(zhǎng)為200像素 寬為100像素的表格 表示一個(gè)寬為窗口的20 高為窗口的10 的表格 40 表單輸入元素 7 課堂練習(xí) 請(qǐng)編寫(xiě)HTML代碼 表單 42 METHOD post或get 表單 ACTION METHOD 指定提交后由服務(wù)器上哪個(gè)處理程序處理 指定向服務(wù)器提交的方法 一般為post或get方法 post方法比較安全 ACTION URL 表單輸入元素 1 文本框 按鈕 單選按鈕 復(fù)選框等都是輸入元素 44 表單輸入元素 2 BUTTON 按鈕 表單輸入元素 3 身份證號(hào) TEXT 文本 密碼 請(qǐng)?zhí)顚?xiě)您的工作經(jīng)歷 表單輸入元素 4 性別 男性女性 單選按鈕和復(fù)選框 你喜歡以下哪些明星 酒井法子鄭秀文BonJovi HTML輸入元素 5 2004年歐錦賽預(yù)測(cè) 最佳球員 RonaldoBeckhamZidane預(yù)測(cè)大賽亞軍巴西法國(guó)阿根廷預(yù)測(cè)誰(shuí)將成為2004年歐錦賽冠軍 閱讀代碼 請(qǐng)問(wèn)網(wǎng)頁(yè)中的顯示結(jié)果 48 表單輸入元素 6 下拉菜單 誰(shuí)是2002年世界杯冠軍 西班牙法國(guó)巴西德國(guó) 列表選項(xiàng) 表單輸入元素 7 課堂練習(xí) 請(qǐng)編寫(xiě)HTML代碼 框架 廣告欄頂部框架 top htm 商品詳細(xì)介紹右側(cè)框架 main htm 商品導(dǎo)航左側(cè)框架 left htm 51 為何使用框架 在另一個(gè)固定部分顯示導(dǎo)航部分 在頁(yè)面的一個(gè)固定部分顯示徽標(biāo)或靜態(tài)信息 在此處顯示主要內(nèi)容 站點(diǎn)中只有此部分是變化的 總結(jié)4 1 表格標(biāo)題數(shù)據(jù)1數(shù)據(jù)2 數(shù)據(jù)11數(shù)據(jù)22 跨行的單元格 數(shù)據(jù)11跨列的單元格 數(shù)據(jù)22 表格的一般語(yǔ)法 53 總結(jié)4 2 文本框密碼框文本域單選按鈕男性復(fù)選框酒井法子 表單的一般語(yǔ)法 54 總結(jié)4 3 選項(xiàng)1選項(xiàng)2 55 總結(jié)4 4 框架 頂部窗口顯示廣告top htm 顯示詳細(xì)內(nèi)容main htm 左側(cè)窗口顯示導(dǎo)航鏈接left htm 56 DHTML簡(jiǎn)介 DHTML HTML 腳本語(yǔ)言JavaScript 層疊樣式表CSS 指定一個(gè)網(wǎng)頁(yè)的元素 決定元素的大小顏色和位置 操縱網(wǎng)頁(yè)的元素 DHTML是制作動(dòng)態(tài)HTML頁(yè)面的技術(shù) 57 DHTML的功能 設(shè)計(jì)人員可以隨著與用戶(hù)的交互操作而改變文本的顏色 字體和大小 設(shè)計(jì)人員可以隨用戶(hù)的輸入或事件 如單擊鼠標(biāo) 而更改頁(yè)面的內(nèi)容 設(shè)計(jì)人員可以用x座標(biāo)和y座標(biāo)來(lái)指定網(wǎng)頁(yè)元素的確切位置 絕對(duì)位置或相對(duì)位置 設(shè)計(jì)人員可以將網(wǎng)頁(yè)中的表格綁定到數(shù)據(jù)庫(kù) 設(shè)計(jì)人員可以將選擇的字體和網(wǎng)頁(yè)一起封裝 Web程序員可以編寫(xiě)腳本以更改網(wǎng)頁(yè)的樣式和內(nèi)容 在DHTML中 每個(gè)元素都被視為一個(gè)對(duì)象 可以獨(dú)立地對(duì)每個(gè)對(duì)象進(jìn)行訪問(wèn)和編程 動(dòng)態(tài)樣式 動(dòng)態(tài)內(nèi)容 定位 數(shù)據(jù)綁定 可下載字體 腳本 對(duì)象結(jié)構(gòu) 58 DHTML示例 閃爍文本 移動(dòng)文本 消隱文本 59 設(shè)置屬性這個(gè)段落應(yīng)用了樣式這個(gè)段落按默認(rèn)樣式顯示 什么是樣式 指定顯示樣式 60 常用的樣式屬性 61 根據(jù)樣式代碼的位置 分為三類(lèi) 行內(nèi)樣式內(nèi)嵌樣式外部樣式 樣式的分類(lèi) 在最后一個(gè)聲明后面加上一個(gè)分號(hào) 是一個(gè)好習(xí)慣 行內(nèi)樣式 您如果希望某段文字和其他段落的文字顯示風(fēng)格不一樣 那么請(qǐng)采用 行內(nèi)樣式 行內(nèi)樣式使用元素標(biāo)簽的STYLE屬性定義 關(guān)鍵代碼 剩余時(shí)間 成交結(jié)束新舊程度 全新所在地 北京寶貝數(shù)量 5件瀏覽量 220次另送價(jià)值50元的充電器套裝 一個(gè)充電器 兩節(jié)充電電池 可使用半年以 63 應(yīng)用樣式P font size 20px color blue text align center 我是段落1我是段落2我是段落3我們的樣式絕對(duì)統(tǒng)一 內(nèi)嵌樣式 1 所有的段落都采用P樣式 保證樣式統(tǒng)一 行內(nèi)樣式表局限于某個(gè)標(biāo)簽 如果希望本網(wǎng)頁(yè)內(nèi)的所以同類(lèi)標(biāo)簽都采用統(tǒng)一樣式 這時(shí)應(yīng)采用內(nèi)嵌樣式 用分號(hào)隔開(kāi) 64 內(nèi)嵌樣式 2選擇器 根據(jù)選擇器的不同 內(nèi)嵌樣式又分為 HTML選擇器CLASS類(lèi)選擇器ID選擇器 65 關(guān)鍵代碼 P 設(shè)置樣式 字體和背景色 font family System font size 18px color 3333CC H2 background color CCFF33 text align center 品種特征方面 1 蛋魚(yú) 蛋魚(yú) 2 龍睛 龍睛 3 高頭 高頭 內(nèi)嵌樣式 3HTML選擇器 應(yīng)用H2樣式 應(yīng)用P樣式 內(nèi)嵌樣式 4class類(lèi)選擇器 myinput border 1pxsolid border color D4BFFF color 2A00FF 用戶(hù)名密碼 CLASS類(lèi)選擇器 應(yīng)用類(lèi)選擇器 class 類(lèi)名 類(lèi)選擇器的定義格式為 類(lèi)名 樣式規(guī)則 fire color red font size 24px 我是二級(jí)標(biāo)題 火是這樣的我是段落 火是這樣的 內(nèi)嵌樣式 5ID選擇器 ID選擇器 ID選擇器的定義格式為 ID名 樣式規(guī)則 應(yīng)用ID選擇器 ID ID名 A 設(shè)置超鏈接不帶下劃線 color blue text decoration none 文本修飾 無(wú) A hover 鼠標(biāo)在超鏈接上方停留時(shí) 帶下劃線 color red text decoration underline 文本修飾 下劃線 HEAD 俺是超鏈接 移過(guò)來(lái)我就顯示下劃線 內(nèi)嵌樣式 6特殊的選擇器 HTML選擇器 特殊的偽類(lèi) A代表超鏈接 hover代表鼠標(biāo)懸停 外部樣式 根據(jù)樣式文件與網(wǎng)頁(yè)的關(guān)聯(lián)方式又分為 鏈接 LINK 外部樣式表導(dǎo)入 import 外部樣式表 樣式文件P 網(wǎng)頁(yè)2 網(wǎng)頁(yè)3 網(wǎng)頁(yè)1 70 鏈接外部樣式表 使用LINK 鏈接 標(biāo)簽 語(yǔ)法 第一步 創(chuàng)建樣式表文件newstyle css 第二步 把樣式文件和網(wǎng)頁(yè)關(guān)聯(lián) 樣式文件 newstyle cssP Onel htm another htm 第三步 瀏覽查看各網(wǎng)頁(yè) 演示 鏈接樣式表示例 71 導(dǎo)入外部樣式表 使用 import導(dǎo)入 語(yǔ)法 import樣式表文件 css 操作步驟同鏈接樣式表 72 外部樣式文件