資源簡介

中小學(xué)教育資源及組卷應(yīng)用平臺
信息科技 第2課 網(wǎng)頁中的信息編碼教學(xué)設(shè)計
課題 網(wǎng)頁中的信息編碼 單元 第一單元 學(xué)科 信息科技 年級 七年級下
教材分析 網(wǎng)頁中的信息編碼選自《信息科技》（電子工業(yè)版）的第一章第二節(jié)的內(nèi)容，教材由“查看網(wǎng)頁源代碼”、“認(rèn)識網(wǎng)頁源代碼”二部分內(nèi)容組成，主要內(nèi)容包括：瀏覽器的作用和網(wǎng)頁的組成、如何在瀏覽器中查看網(wǎng)頁源代碼、網(wǎng)頁信息的編碼和解碼、HTML文件結(jié)構(gòu)與標(biāo)簽的功能以及編輯HTML網(wǎng)頁幾個部分。學(xué)生通過對本教材的學(xué)習(xí)逐步掌握信息科技的相關(guān)知識，具備一定的科學(xué)精神和科技倫理，提高創(chuàng)新能力，夯實信息社會責(zé)任，發(fā)揮信息科技課程的獨(dú)特育人價值，為數(shù)字強(qiáng)國培養(yǎng)優(yōu)秀接班人和建設(shè)者。
教學(xué)目標(biāo) 1、信息意識：根據(jù)學(xué)習(xí)與生活需要,有意識地選用信息技術(shù)工具處理與加工信息。2、計算思維：在實踐應(yīng)用中，熟悉網(wǎng)絡(luò)平臺中的技術(shù)工具、軟件系統(tǒng)的功能與應(yīng)用。3、數(shù)字化學(xué)習(xí)與創(chuàng)新：根據(jù)任務(wù)要求，借助在線平臺，與伙伴協(xié)作設(shè)計和創(chuàng)作作品。4、信息社會責(zé)任：遵循信息科技領(lǐng)域的倫理道德規(guī)范，明確科技活動中應(yīng)遵循的價值觀念、道德責(zé)任和行為準(zhǔn)則。
重點 1、了解瀏覽器的作用和網(wǎng)頁的組成；2、了解網(wǎng)頁源代碼的概念；3、了解網(wǎng)頁信息的編碼和解碼；4、了解HTML文件結(jié)構(gòu)與標(biāo)簽的功能。
難點 1、掌握如何在瀏覽器中查看網(wǎng)頁源代碼；2、掌握HTML在線編輯器制作網(wǎng)頁。
教學(xué)過程
教學(xué)環(huán)節(jié) 教師活動 學(xué)生活動 設(shè)計意圖
導(dǎo)入新課 根據(jù)企業(yè)希望向瀏覽者傳遞的信息（包括產(chǎn)品、服務(wù)、理念、文化），進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁面設(shè)計美化工作。作為企業(yè)對外宣傳物料的其中一種，精美的網(wǎng)頁設(shè)計對于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。觀看視頻引出今天的教學(xué)內(nèi)容網(wǎng)頁中的信息編碼。 學(xué)生聽教師引導(dǎo)生活中的案例 激發(fā)學(xué)生對網(wǎng)頁設(shè)計的學(xué)習(xí)興趣并快速進(jìn)入學(xué)習(xí)狀態(tài)
講授新課 一、查看網(wǎng)頁源代碼1、瀏覽器的作用（1）最基礎(chǔ)的就是用來瀏覽網(wǎng)頁；（2）打開網(wǎng)頁看新聞、看視頻、玩網(wǎng)頁游戲、看書、網(wǎng)購；（3）還可以添加擴(kuò)展程序、插件等；（4）可以用來下載需要的文件、軟件；（5）內(nèi)容操作，比如打印、查找。2、瀏覽器中網(wǎng)頁的組成：（1）網(wǎng)頁標(biāo)題；（2）網(wǎng)頁文本；（3）網(wǎng)頁圖片；（4）網(wǎng)頁多媒體；（5）網(wǎng)頁狀態(tài)欄。3、網(wǎng)頁源代碼是使用HTML語言編寫的文件，也稱為HTML文件，實際上是純文本文件。4、在網(wǎng)頁空白處右擊，在彈出的快捷菜單里選擇查看網(wǎng)頁源代碼，也可以按快捷鍵Ctrl+U。5、觀看視頻如何在瀏覽器中查看源代碼。6、“<>” 就是HTML語言的標(biāo)簽，用來對網(wǎng)頁上的標(biāo)題、圖片、聲音等元素進(jìn)行標(biāo)識。二、認(rèn)識網(wǎng)頁源代碼1、HTML在線編輯器是可以即時編譯HTML代碼的軟件，訪問地址（ https://c./front-end/61/ ）。2、網(wǎng)頁信息的編碼和解碼總結(jié)：（1）網(wǎng)頁的全部內(nèi)容需在··· 標(biāo)簽中。（2）瀏覽器標(biāo)題欄中的網(wǎng)頁標(biāo)題等信息主要放在··· 標(biāo)簽中。 （3）網(wǎng)頁展示的內(nèi)容需要嵌套在··· 標(biāo)簽中。3、HTML標(biāo)簽是HTML語言中最基本的單位，都是成對出現(xiàn)，標(biāo)簽對的第一個是開始標(biāo)簽，第二個是結(jié)束標(biāo)簽。4、常用的HTML標(biāo)簽及功能。5、網(wǎng)頁字符編碼格式。（1）UTF-8編碼；（2）GB2312編碼。練一練（1）利用HTML模板功能制作一個網(wǎng)頁，感受網(wǎng)頁信息的編碼和解碼過程。（編輯器地址：https://c./front-end/61/）（2）將“科技創(chuàng)新 自主可控”網(wǎng)頁源代碼中所用到標(biāo)簽填入下表，并簡述這些標(biāo)簽的功能。 通過教師的講解，以小組合作的方式，開展探討交流，完成任務(wù)。通過教師的講解，以小組合作的方式，開展探討交流，完成任務(wù)。通過教師的講解，以小組合作的方式，開展探討交流，完成任務(wù)。 通過小組合作，加強(qiáng)學(xué)生組內(nèi)團(tuán)結(jié)、共同完成任務(wù)引導(dǎo)學(xué)生掌握什么是網(wǎng)頁源代碼，以及學(xué)習(xí)如何制作一個網(wǎng)頁。培養(yǎng)學(xué)生獨(dú)立思考和動手實踐能力
布置作業(yè) 1、把HTML標(biāo)簽與其對應(yīng)的功能連起來。2、編制“清平樂·六盤山.html”為文件名，在瀏覽器中瀏覽網(wǎng)頁效果。 完成作業(yè) 培養(yǎng)學(xué)生查閱資料的能力，分析解決問題的能力
課堂小結(jié) 本節(jié)課首先了解瀏覽器的作用和網(wǎng)頁的組成，網(wǎng)頁源代碼的概念，掌握如何在瀏覽器中查看網(wǎng)頁源代碼，接著了解網(wǎng)頁信息的編碼和解碼，了解HTML文件結(jié)構(gòu)與標(biāo)簽的功能，最后重點講授了HTML在線編輯器制作網(wǎng)頁的方法。 分組總結(jié)歸納 鍛煉學(xué)生的總結(jié)能力，邏輯思維、語言表達(dá)能力。
板書 一、查看網(wǎng)頁源代碼1、瀏覽器的作用和網(wǎng)頁的組成2、網(wǎng)頁源代碼的概念3、如何在瀏覽器中查看網(wǎng)頁源代碼二、認(rèn)識網(wǎng)頁源代碼1、HTML在線編輯器簡介2、網(wǎng)頁信息的編碼和解碼3、HTML文件結(jié)構(gòu)與標(biāo)簽的功能4、編輯HTML網(wǎng)頁 學(xué)習(xí)、記憶及勾畫知識點 明確教學(xué)內(nèi)容及重點和難點
21世紀(jì)教育網(wǎng) www.21cnjy.com 精品試卷·第 2 頁 （共 2 頁）
HYPERLINK "http://www.21cnjy.com/" 21世紀(jì)教育網(wǎng)(www.21cnjy.com)(共37張PPT)
1.2 網(wǎng)頁中的信息編碼
電子工業(yè)版七年級下冊
新知導(dǎo)入
教學(xué)目標(biāo)
1、了解瀏覽器的作用和網(wǎng)頁的組成；
2、了解網(wǎng)頁源代碼的概念；
3、掌握如何在瀏覽器中查看網(wǎng)頁源代碼；
4、了解網(wǎng)頁信息的編碼和解碼；
5、了解HTML文件結(jié)構(gòu)與標(biāo)簽的功能；
6、掌握HTML在線編輯器制作網(wǎng)頁。
1.2.1 查看網(wǎng)頁源代碼
新知講解
瀏覽器的作用：
（1）最基礎(chǔ)的就是用來瀏覽網(wǎng)頁；
（2）打開網(wǎng)頁看新聞、看視頻、玩網(wǎng)頁游戲、看書、網(wǎng)購；
（3）還可以添加擴(kuò)展程序、插件等；
（4）可以用來下載需要的文件、軟件；
（5）內(nèi)容操作，比如打印、查找。
新知講解
瀏覽器中網(wǎng)頁的組成：
（1）網(wǎng)頁標(biāo)題；
（2）網(wǎng)頁文本；
（3）網(wǎng)頁圖片；
（4）網(wǎng)頁多媒體；
（5）網(wǎng)頁狀態(tài)欄。
新知講解
網(wǎng)頁源代碼是使用HTML語言編寫的文件，也稱為HTML文件，實際上是純文本文件。
新知講解
在網(wǎng)頁空白處右擊，在彈出的快捷菜單里選擇查看網(wǎng)頁源代碼，也可以按快捷鍵Ctrl+U。
新知講解
觀看視頻如何在瀏覽器中查看源代碼。
新知講解
網(wǎng)頁源代碼
網(wǎng)頁標(biāo)題
文檔標(biāo)題
網(wǎng)頁文本
嵌入圖片
練一練
瀏覽器查看網(wǎng)頁的源代碼，并說明源代碼中標(biāo)簽“<>”的作用。
“<>” 就是HTML語言的標(biāo)簽，用來對網(wǎng)頁上的標(biāo)題、圖片、聲音等元素進(jìn)行標(biāo)識。
1.2.2 認(rèn)識網(wǎng)頁源代碼
新知講解
HTML在線編輯器是可以即時編譯HTML代碼的軟件，訪問地址（ https://c./front-end/61/ ）。
點擊HTML模板
勾選自動執(zhí)行
新知講解
網(wǎng)頁源代碼
網(wǎng)頁執(zhí)行結(jié)果
新知講解
網(wǎng)頁信息的編碼和解碼。
修改HTML頁面正文的標(biāo)題
修改瀏覽器標(biāo)題
新知講解
網(wǎng)頁信息的編碼和解碼。
HTML信息的編碼
HTML信息的解碼
新知講解
網(wǎng)頁信息的編碼和解碼總結(jié)：
（1）網(wǎng)頁的全部內(nèi)容需在··· 標(biāo)簽中。
（2）瀏覽器標(biāo)題欄中的網(wǎng)頁標(biāo)題等信息主要放在··· 標(biāo)簽中。
（3）網(wǎng)頁展示的內(nèi)容需要嵌套在··· 標(biāo)簽中。
新知講解
HTML文件結(jié)構(gòu)圖。

我的HTML頁面

我的第一個段落。

定義HTML文件
提供網(wǎng)頁標(biāo)題、標(biāo)注及編碼信息的內(nèi)容，在網(wǎng)頁中不顯示
定義網(wǎng)頁標(biāo)題
網(wǎng)頁中顯示的內(nèi)容，即在這個區(qū)域?qū)懭氲娜魏蝺?nèi)容，都會顯示在網(wǎng)頁中
網(wǎng)頁采用utf-8字符編碼格式
新知講解
HTML標(biāo)簽是HTML語言中最基本的單位，都是成對出現(xiàn)，標(biāo)簽對的第一個是開始標(biāo)簽，第二個是結(jié)束標(biāo)簽。
HTML開始標(biāo)簽
HTML結(jié)束標(biāo)簽
新知講解
常用的HTML標(biāo)簽。
標(biāo)簽 顯示效果
··· 定義標(biāo)題的字體大小，其中的n是標(biāo)題大小的級別，取值范圍為1—6，h1最大，h6最小。
為文檔定義一個標(biāo)題。
··· 文字以粗體形式顯示。
··· 文字以斜體形式顯示。
··· 文字以加刪除線的形式顯示。
新知講解
常用的HTML標(biāo)簽。
標(biāo)簽 顯示效果
··· 文字以加下劃線的形式顯示

···

劃分段落
插入圖像
··· 定義超鏈接