第16课探秘网页与网站教案人教版（2024）初中信息科技七年级全一册.docx

课题

探秘网页与网站——我给哪吒安个家

学科

信息技术

学段

初中

年级

七年级

课型

新授课

课时

1课时

授课时间

4月10日

教学内容及教材分析

本节课是人教版《初中信息技术七年级》第四单元《校园活动线上展》第16课《探秘网页与代码》这一课内容加上部分组建web网站相关内容，教材内容紧密结合初中生的认知水平和兴趣点，通过简单的的案例和实际的代码示例，循序渐进地介绍了HTML语言的基本结构和常用标签，体验简单的网站发布。教材注重理论与实践的结合，不仅让学生了解网页的构成要素，还引导他们动手实践，通过编写简单的HTML代码来体验网页制作和发布网站的乐趣。同时，教材还注重启发学生的思维，鼓励他们探索和发现，从而培养他们的信息素养和创新能力。

课标要求

了解网页与代码之间的对应关系。初步认识HTML语言，知道常用标签的作用。体验网站的发布。

核

心

素

养

目

标

信息意识：增强学生对网页与代码关系的认识，理解网页背后的工作原理，体验简单的网站发布，提高信息获取和处理的能力。

计算思维：初步掌握HTML语言的基本概念和常用标签的作用，学会用计算思维分析和解决网页制作中的问题。

数字化学习与创新：通过实践操作，培养学生数字化学习的能力，激发他们的创新思维和创造力。

信息社会责任：引导学生遵守网络道德规范，树立信息社会责任感，学会安全、合法地使用网络资源。

教学重点

掌握认识HTML语言，知道常用标签的作用，体验简单网页制作。

教学难点

理解验证Base64编码保存网页内容、体验网站的发布。

教学方法

任务驱动法、演示讲解法、自主学习和小组合作。

学习方法

观察学习、合作探究、实践操作、反思总结

教学工具

多媒体教室，确保每台计算机能够正常上网，信息技术教学平台、Web服务器软件、网页模版载入程序、图像编码转换网页，并且浏览器功能正常。

教

学

过

程

教

学

过

程

教

学

过

程

教

学

过

程

教

学

过

程

教

学

过

程

教师活动

学生活动

新课导入（约3分钟）：

从今年春节的电影《哪吒2》引入课程，提出问题：同学们当时是从哪些途径了解到有《哪吒2》这部电影的，引导学生说出从抖音、门户网站、微博、微信公众号等网络途径。这些网络途径看到的信息，本质上都是通过网页传播的。

提出问题：“大家在浏览网页的时候，有没有想过这些网页是怎么制作出来的？为什么我们在浏览器中输入一个网址就能看到各种各样的内容呢？”

设计意图：

以热门电影《哪吒2》为切入点，通过生活化场景激活学生网络使用经验，引导其关注日常网页传播现象，激发对网页制作原理的探究兴趣。问题链设计旨在衔接学生已有认知与信息技术新知，为后续讲解网页开发与网络通信原理作铺垫，培养数字化思维。

提出问题，学生思考回答。

提出问题，学生思考回答。

新课教学：

简要介绍本节课的学习内容：“现在我们就一起来探秘网页与代码之间的奥秘，了解网页是如何通过代码来实现图文声像展示和各种功能的，同时简单体验一下网站的发布。”

一、网页与HTML代码（约8分钟）

讲解：1、上网浏览时会接触风格各异的网页，里面有文字、图像、音频、视频等多种资源。通过网页中的超链接，可以方便地在网页和资源之间跳转。这一切到底是怎样完成的呢？

2、课件展示网页与HTML代码，引导学生发现网页源代码，与原网页里的元素的联系。

左边原网页的元素和右边的源代码是_一一对应_的。

这里的代码我们称为HTML；代码中使用尖括号的部分我们称为_标签。

3、结合上面的对比图片，讲解：超文本标记语言（HyperTextMarkupLanguage），简称HTML，是用于创建网页的标准标记语言。

HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签（markuptag）。HTML使用标记标签来描述网页。HTML文档包含了HTML标签及文本内容。HTML文档也叫做web页面，包含很多因素，音乐、文字、链接、图片等

设计意图:

这部分教学内容旨在通过引导学生浏览网页并观察其背后的HTML代码，使学生初步了解网页与HTML代码之间的关系。通过对比，学生可以直观地看到网页背后的代码结构，认识到HTML代码是构建网页的基础。通过观察和了解HTML标签的使用，学生将进一步理解HTML语言的基本概念和组成元素，为后续深入学习HTML编程奠定基础。这一活动不仅培养了学生的观察能力，还激发了他们对网页设计和开发的兴趣。

二、显示网页的过程（约8分钟）

HTML语言是标记语言，标签就是标记符号，浏览器获得网页代码后，就会按照标签的标记，显示相应的文字、图片等，进而呈现出完整的网页效果

1、什么是标签

HTML语言中用于标记内容、格式或超链接的代码符号叫标签。

2、结合前面网页代码认识标签

3、网页中常用标签表示的含义：

标签

作