資源簡介

《網頁的數據組織》教學設計
一、學習內容分析
《網頁的數據組織》是浙江教育出版社《信息科技》八年級上冊第二單元第7課。教學內容包括認識HTML語言，HTML文檔的基本結構及編輯HTML網頁代碼。
本課對應新課標中的《互聯網應用與創新》模塊中的“互聯網基本原理與功能”部分，是在前一課學生了解常用互聯網應用中的數據構成及數據傳輸的原理之后，進一步學習HTML語言，選擇適當的數字化工具對網頁中的數據進行組織，為后續網頁的編輯和發布做好知識鋪墊。
二、學情分析
本課的學習對象是八年級學生，該年段的學生在日常學習與生活中已經能夠熟練使用各種瀏覽器查看網頁，對于網頁的編輯有著濃厚的學習興趣。但是對于網頁背后的數據組織原理還沒有深入的認識，需要教師進一步進行引導學習。同時，該年段的學生已經具備使用數字化資源進行自主學習和探究的能力，為本課的學習提供有效的保障。
學習目標
教學目標 核心素養指向
1.通過觀察和探究網頁代碼，認識HTML語言，掌握HTML文檔的基本結構，能初步編輯 HTML網頁代碼。 2.在瀏覽網頁的過程中，能理解超鏈接的作用，并掌握超鏈接標簽的書寫格式。 3.在完成《人工智能》網站首頁的過程中，進一步掌握常用標簽的使用。 【計算思維】通過對制作網站首頁任務的問題拆解、分析，培養學生的信息意識和計算思維。 【數字化學習與創新】通過對導學單等學習支架的自主學習，提升學生的數字化學習能力。
四、教學重難點
教學重點：HTML文檔的基本結構、超鏈接標簽的使用。
教學難點：超鏈接標簽的使用。
五、課前準備
學習資源：學習單、資源包（圖片、半成品網頁文檔、顏色圖）
設計思路
問題鏈：
1.這么多不同類型的數據，我們如何將他們組織成網頁呢？
2.國家博物館首頁的代碼是用什么語言編寫的？
3.HTML標簽的作用是什么？
4.什么是超鏈接？它的作用是什么？
5.一組超鏈接里包含什么？鏈接元素可以是哪些類型的數據呢？
6.作品中還有哪些需要完善的？
七、學習過程
（一）復習回顧，引出主題
教學內容與活動 設計意圖
本單元項目前期準備結果展示，本課項目任務布置。展示同學們網頁設計稿和相應資料。 提問：這么多不同類型的數據，我們如何將他們組織成網頁呢？ 通過展示前期做好的準備工作，從而引出本課的項目子任務是要完成網站首頁的制作，引出課題。
（二）探究學習，動手實踐
教學內容與活動 設計意圖
1.活動一： 完成學案中的猜一猜和驗一驗活動。 了解HTML語言和初步認識HTML標簽。 通過對比HTML代碼和生成的網頁效果圖，了解HTML文檔的基本結構。 通過修改網頁HTML代碼，掌握HTML文檔的基本結構及書寫要求。 觀看視頻，師生小結HTML基本結構。 2.活動二： 根據學案和半成品文檔完成“人工智能”主題網站的首頁。 通過對上環節完成的網頁觀察分析，總結出頁面需要優化的幾點，通過自主學習導學單和課本內容，完成對頁面內容的頁面背景修改和圖片添加。 教師小結典型問題。 觀察范例網站中數據間的關聯實現，總結出超鏈接的作用。 根據兩組超鏈接的示意圖，說出超鏈接的組成要素：鏈接元素、鏈接位置；并且說出鏈接元素的類型。 動手實踐，建立超鏈接。 反饋交流：小結主要問題。 通過展示“國家博物館網頁”和學生熟悉的“百度”首頁的源代碼，讓學生明白HTML語言是的編寫網頁的基礎，以及瀏覽器是對HTML代碼的解釋執行最終呈現網頁內容。通過學生對代碼的觀察，初步了解標簽是組成HTML文檔的基本要素。以圖解的形式加強學生對網頁的構成以及HTML文檔的基本構成的學習。讓學生在觀察中發現、總結，培養學生的信息素養。 通過對范例網站中不同類型數據的超鏈接實現，幫助學生理解超鏈接的相關知識，并且通過教師對比超鏈接兩個要素，講解超鏈接標簽的格式書寫，讓學生清晰理解超鏈接標簽的使用。在學生掌握了超鏈接知識之后，通過完成項目任務進一步落實學生的技能目標，學生對項目任務的拆解分析、動手實踐從而落實學生的核心素養。
（三）課堂小結，知識延伸
教學內容與活動 設計意圖
課堂小結與作品展示 展示作品并對作品進行自評互評，對本課所學知識進行總結。引導學生進行作品點評、課堂總結。 對本課知識進行總結，將所學的知識進行內化。同時提出作品還需要完善的地方，為后續作品的更新迭代做鋪墊。(共11張PPT)
第7課 網頁的數據組織/
八上信息技術
數據組成
互聯網中的數據構成：
文本
圖像
音頻
視頻
......
中國國家博物館官網
超文本標記語言
（HTML）
設計、組織
HTML語言
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。
HTML語言
活動一：完成學案中的猜一猜和驗一驗活動。
HTML標簽
HTML用標簽來規定元素的屬性和其在文件中的位置，一個HTML文件一般包含多個標簽，HTML標簽由“<”和“>”符號包圍的字符串而組成， 通常以成對標簽出現。
HTML語言
HTML標簽





文字、圖片、超鏈接


網頁
頭部
正文
HTML標簽
HTML標簽
活動二：根據學案和半成品文檔完成“人工智能”主題網站的首頁。
超鏈接
超文本鏈接(Hypertext Link)簡稱為超鏈接，可以實現從一個頁面跳轉到另一個頁面或者跳轉到頁面的其他位置，實現文檔互聯、網站互聯。
課堂小結





文字、圖片、超鏈接


網頁
頭部
正文八年級（上）第二單元互聯網數據
網頁的數據組織
【活動一】猜一猜
在瀏覽網站時，我們能欣賞到組織有序且內容豐富的網頁（例如：圖1），請你猜一猜圖1中①②對應的代碼，并在圖2中標注。
圖1 圖2
【活動一】試一試
打開圖1網站https://www./zp/zpml/201812/t20181218_28592.shtml，使用瀏覽器（以Google Chrome瀏覽器為例）的“開發者工具”（圖2）查看HTML代碼，并利用“審查元素”（圖3）功能查看是否猜對。
圖2 圖3
【活動二】
根據小組“人工智能”主題網站的制作方案，用HTML語言編寫網頁首頁的代碼，
1.修改背景顏色。2.嘗試插入資料庫主題圖片3.增加超鏈接。
一、編輯與調試
①打開半成品文本文檔 ②在文檔中編寫html代碼 ③修改后綴名為html（以win10為例，圖4） ④運行調試
圖4
二、標簽知識庫：
標題標簽：

標題

圖片標簽：
網頁背景色：
字體格式： 文字
超鏈接 鏈接元素
【擴展閱讀】
超鏈接
超鏈接可以鏈接到其他網頁、同一頁面的其他部分、各種文件和資源，甚至可以觸發設備上的電子郵件客戶端或電話撥號應用程序。
1. 其他網頁：超鏈接最常見的用途是鏈接到其他網頁?？梢允褂媒^對URL（完整的網址，包括協議和域名）或相對URL（相對于當前頁面的路徑）來指定目標網頁的位置。例如：
< a href=" ">訪問示例網站
< a href="page2.html">跳轉到第二個頁面
2. 同一頁面的其他部分：超鏈接也可以用于在同一頁面中創建內部導航?？梢酝ㄟ^在目標元素上添加“id”屬性，并在超鏈接的“href”屬性中使用錨點（以“#”開頭）來實現。例如：（點擊 "跳轉到第二部分" 的鏈接將會滾動頁面并定位到帶有id="section2"的元素。）
< a href="#section2">跳轉到第二部分
...

第二部分

3. 文件和資源：超鏈接還可以鏈接到各種文件和資源，例如圖像、音頻、視頻、PDF文件等。只需將文件的路徑或URL指定為超鏈接的“href”屬性。例如：
< a href="images/picture.jpg">查看圖片
< a href="documents/document.pdf">打開PDF文檔
4. 電子郵件：使用特殊的“mailto:”鏈接，點擊后將會打開默認的郵件客戶端的新電子郵件撰寫窗口。例如：（點擊 "發送電子郵件" 的鏈接將會啟動用戶設備上的郵件客戶端，并自動填充收件人為 "info@"。）
< a href="mailto:info@">發送電子郵件
5. 電話號碼：使用特殊的“tel:”鏈接，可以創建一個超鏈接，點擊后將會啟動用戶設備上的電話撥號應用程序。例如：（點擊 "撥打電話" 的鏈接將會觸發設備上的電話應用程序，并將號碼設置為 "+123456789"。）
< a href="tel:+123456789">撥打電話

展開更多......

收起↑