資源簡介

(共21張PPT)
網頁的數據組織
浙教版八年級上冊
第7課 網頁的數據組織
學習目標
通過觀察和探究網頁代碼，認識HTML語言，掌握HTML文件的基本結構，能初步編輯HTML網頁代碼；在瀏覽網頁的過程中，能理解超鏈接的作用。
探究
1.你知道網頁是如何實現圖片呈現的？
2.超鏈接能鏈接哪些類型的文件？
建構
瀏覽網站時，人們能欣賞到組織有序且包含著豐富的文字、圖片、聲音、視頻等內容的網頁，這些都是通過HTML語言來設計、組織的。
一、HTML語言
HTML (HyperText Marked Language)即超文本標記語言，定義了網頁內容的結構和內容。
用HTML編寫的超文本文件稱為HTML文件，HTML文件一般通過瀏覽器解釋執行。在使用瀏覽器訪問網頁時，瀏覽器讀取并分析 HTML文件中的代碼，根據解釋的結果呈現網頁內容。
一、HTML語言
HTML文件可以使用文本編輯器編寫，也可以使用專業軟件編輯。網頁可以通過瀏覽器的“開發人員工具”看到HTML代碼并編輯調試。
親身體驗
嘗試打開一個自己熟悉的網站，使用瀏覽器的“開發人員工具”查看，對比觀察網頁顯示內容和對應的HTML代碼。
二、HTML標簽
HTML用標簽來規定元素的屬性和其在文件中的位置，一個HTML文件一般包含多個標簽，HTML標簽由和“>”符號包圍的字符串而組成， 通常以成對標簽出現。
二、HTML標簽
HTML文件的基本結構：
#標記網頁的開始#
#標記頭部的開始#

#標記頭部的結束#
#標記網頁正文開始#
網頁內容
#標記網頁正文結束#
#標記網頁的結束#
二、HTML標簽
網頁首頁index.html的代碼及效果圖：
首頁的HTML代碼及效果圖
親身體驗
根據小組“人工智能”主題網站的制作方案，用HTML語言編寫網 頁首頁的代碼，嘗試插入主題圖片，并調試查看網頁效果。
教你一招
為了使網頁便于用戶瀏覽，可以使用HTML標簽簡單設置文本版面。
居中對齊：＜center＞＜/center＞
網頁背景色：＜body bgcolor="顏色名稱"〉＜/body＞
字體格式：＜font face=字體名稱size=字號數值color="顏色 名稱"〉文字＜/font＞
三、超鏈接
超文本鏈接(Hypertext Link)簡稱為超鏈接，可以實現從一個頁面跳轉到另一個頁面或者跳轉到頁面的其他位置，實現文檔互聯、網站互聯。
三、超鏈接
在 HTML文檔中，鏈接元素可以是文本、圖片等，建立超鏈接的標簽為, href屬性的作用是設置鏈接的位置，是標簽必不可少的。常見的格式如下：

三、超鏈接
如圖：代碼第8、9行分別在鏈接元素“發展“和“歷史“建立 了超鏈接，點擊“發展”和“歷史”可打開相應的超鏈接文檔。
隨堂練習
1. 在一個HTML文檔中，用來表示網頁名稱的標簽是_____和_____,表示網頁主體內容的標簽是_____和_____。
2. 嘗試在網頁中加入背景圖片。
謝謝聆聽！
INTERNET OF THINGS
謝謝
21世紀教育網（www.21cnjy.com)
中小學教育資源網站
兼職招聘：
https://www.21cnjy.com/recruitment/home/admin