HTML網頁制作PPT學習課件

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