中小学教育资源及组卷应用平台 第16课 探秘网页与代码 教学设计 课题 探秘网页与代码 单元 第四单元 学科 信息科技 年级 七年级 单元主题 【学情分析】万维网是目前应用最广泛的互联网服务，网页是万维网最重要的信息载体。前一单元对万维网进行了整体介绍，讲解了人们输入网址后，互联网中的软件和硬件设备如何按照网络协议协同工作，完成数据传输任务。本单元是上一单元内容的延伸，将通过一系列剖析、制作网页的学习活动，让学生了解万维网中数据的构成，学会使用适当的数字化工具编辑网页、发布网站。【内容结构】 学习目标 1. 信息意识：主动学习互联网知识，增强数据安全意识，进行安全防护。2. 计算思维：知道网络中信息编码、传输和呈现的原理。能通过多种手段采集、分析和呈现数据。3. 数字化学习与创新：能够使用适当的数字化工具对网页进行协同编辑和发布，增强协作和责任意识。4. 信息社会责任：在互联网应用中，知道数据安全防护的常用方法和策略，保护个人隐私，尊重他人隐私。 重点 网页与代码之间的对应关系；显示网页的过程；网页内容的保存形式。 难点 网页与代码之间的对应关系。 教学过程 教学环节 教师活动 学生活动 设计意图 学校每年科技节都会有许多科技体验项目，也有制作“科技节体验项目”网站的传统，今年轮到本班承担网站制作的任务。同学们浏览了往年的科技节网站作品，发现一个网站包含多个网页文件，每个网页文件保存着一堆代码。很多同学对此感到好奇： 我们看到的网页与这些代码之间有什么关系？如何调整代码改变网页的显示效果？ 【引导分析+建构】信息爆炸的时代，我们每天都在网络世界里穿梭，刷新闻、逛购物网站、看视频、写博客…… 这些丰富多彩的网页就像一扇扇神奇的窗口，为我们展现着无尽的精彩。大家有没有想过，这些界面精美、功能各异的网页是如何诞生的呢？其实，它们的背后都离不开网页代码的支撑。今天这堂课，就将带领大家揭开网页与网页代码的神秘面纱，一同探索用代码构建网页世界的奇妙之旅。 注意、思考、讨论 吸引学生的注意力，启发学生思考。 图文并茂的网页，背后对应着一堆代码。这堆代码对应着描述网页的语——— HTML（hypertext markup language，超文本标记语言）。 浏览一个网页，然后调出浏览器的“开发人员”工具，观察页面代码。 HTML语言中用于标记内容、格式或超链接的代码符号叫标签。 成对出现的双标签，如和。 单标签，如
![]()
。 【知识链接】 常用的网页标签： 【学习活动】二、显示网页的过程浏览器获得网页代码后，就会按照这些代码的要求，显示相应的文字、图像等，进而呈现出完整的网页效果。【学习探究】1．用《记事本》软件打开网页文件，根据下表的修改要求，尝试修改网页中的代码。2．参照以下方法进行操作，让网页显示一张笑脸图。方法一：修改网页，让它显示计算机中的图像文件001.png。浏览网页，观察显示效果。方法二：运行配套资源中的《图像编码转换器》软件，选择图像文件001.png后进行编码转换，然后用运行结果替换网页中的
![]()
标签。确保网页所在文件夹中没有图像文件001.png 后，浏览网页，观察显示效果。在网页中显示图像的不同方法：【学习活动】三、HTML代码与网页文件网页文件是常用的保存HTML代码的容器。一般情况下，HTML 代码保存在以“.htm”“.html”等为扩展名的网页文件中。【提问】HTML代码一定要以网页文件形式保存吗？【引导分析】浏览器需要的是 HTML代码，实际浏览过程中，浏览器只要能得到相应的HTML代码就可以了，并不要求必须以网页文件形式保存。【实践探究】运行《Web 服务器》软件根据提示访问这个网站。修改编码、内容等参数。修改内容后再次访问，看看显示的变化。【小结】可以看到，即 ... ...
