资源简介

中小学教育资源及组卷应用平台
第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 服务器》软件根据提示访问这个网站。修改编码、内容等参数。修改内容后再次访问，看看显示的变化。【小结】可以看到，即使没有网页文件，也能完成相应的浏览任务。网页内容可以保存在网页文件中，可以保存在数据库中，也可以由软件实时生成。但考虑到管理、维护、修改等因素，很多网站选择把网页存放在网页文件中。 听讲、思考、讨论 教师通过引领学生学习课程内容，促进学生学习知识。学生通过认真听讲、实践探究等方式，积极学习基础知识和相关技能。另外，通过提问的方式引发学生思考，培养其思考和解决问题的能力。
课堂小结 知识回顾 对课堂知识进行总结和梳理，帮助学生更好地理解和掌握所学内容。
拓展-提升 【拓展-提升】网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？请验证你的猜想。【提示】同学们可以尝试在网页中设置一个指向其他网站的图像，然后看看显示效果。【验证思路】可设置 标签的 src 属性，让它指向外站的一张图像，然后浏览网页时可以看到，外站的图像正常显示在网页中。由此可知，网页中的图像、音频、视频等可以保存在其他网站中。 自主探究 让学生通过课外拓展的形式巩固、强化所学内容，并适当拓宽其视野。
常用的网页标签
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)(共31张PPT)
（义务教育版）七年级
全一册
第16课
探秘网页与代码
学习目标
激趣导入
学习活动
思考-讨论
实践探究
课堂小结
拓展-提升
单元主题
单元主题
单元名称 课名称 核心内容
第四单元 校园活动线上展 第16课　探秘网页与代码 网页与HTML代码、HTML标签、网页数据的呈现
第17课　制作网页展活动 标签格式、用HTML代码制作网页
第18课　美化网页方法多 HTML代码美化网页、串联样式表美化网页
第19课　多人协同效率高 多人协同制作网页、Markdown代码
第20课　组建网站跟我做 网站建设流程、发布网站
学习目标
激趣导入
【问题情境】
学校每年科技节都会有许多科技体验项目，也有制作“科技节体验项目”网站的传统，今年轮到本班承担网站制作的任务。同学们浏览了往年的科技节网站作品，发现一个网站包含多个网页文件，每个网页文件保存着一堆代码。很多同学对此感到好奇：
我们看到的网页与这些代码之间有什么关系？如何调整代码改变网页的显示效果？
激趣导入
【建构】
信息爆炸的时代，我们每天都在网络世界里穿梭，刷新闻、逛购物网站、看视频、写博客…… 这些丰富多彩的网页就像一扇扇神奇的窗口，为我们展现着无尽的精彩。
大家有没有想过，这些界面精美、功能各异的网页是如何诞生的呢？其实，它们的背后都离不开网页代码的支撑。今天这堂课，就将带领大家揭开网页与网页代码的神秘面纱，一同探索用代码构建网页世界的奇妙之旅。
学习活动
学习活动
网页与HTML代码
一
学习活动
一、网页与HTML代码
上网浏览时会接触风格各异的网页，里面有文字、图像、音频、视频等多种资源。通过网页中的超链接，可以方便地在网页和资源之间跳转。这一切到底是怎样完成的呢？
图文并茂的网页，背后对应着一堆代码。这堆代码对应着描述网页的语言—— HTML（hypertext markup language，超文本标记语言）。
学习活动
一、网页与HTML代码
浏览一个网页，然后调出浏览器的“开发人员”工具，观察页面代码。
学习活动
一、网页与HTML代码
HTML语言中用于标记内容、格式或超链接的代码符号叫标签。
成对出现的双标签，如和。
单标签，如。
学习活动
一、网页与HTML代码
【知识链接】
标　　签 作　　用
设置文档头部
设置网页标题
设置文档主体

设置内容的一级标题

设置新一行
设置图像
设置超链接
学习活动
显示网页的过程
二
学习活动
二、显示网页的过程
浏览器获得网页代码后，就会按照这些代码的要求，显示相应的文字、图像等，进而呈现出完整的网页效果。
HTML代码

飞驰的火车

更多AI绘画
作品


学习活动
二、显示网页的过程
修改要求 修改记录
修改网页标题
更换图像
增加图像说明
【学习探究】
1．用《记事本》软件打开网页文件，根据下表的修改要求，尝试修改网页中的代码。
修改之间的内容
修改标签的src属性
在标签后面增加

标签
学习活动
二、显示网页的过程
2．参照以下方法进行操作，让网页显示一张笑脸图。
方法一：修改网页，让它显示计算机中的图像文件001.png。浏览网页，观察显示效果。
学习活动
二、显示网页的过程
2．参照以下方法进行操作，让网页显示一张笑脸图。
方法二：运行配套资源中的《图像编码转换器》软件，选择图像文件001.png后进行编码转换，然后用运行结果替换网页中的标签。确保网页所在文件夹中没有图像文件001.png 后，浏览网页，观察显示效果。
单击“选择图像”按钮，选择图像文件，就可以看到转换后的代码。
学习活动
二、显示网页的过程
2．参照以下方法进行操作，让网页显示一张笑脸图。
方法二：运行配套资源中的《图像编码转换器》软件，选择图像文件001.png后进行编码转换，然后用运行结果替换网页中的标签。确保网页所在文件夹中没有图像文件001.png 后，浏览网页，观察显示效果。
学习活动
二、显示网页的过程
显示方法 任务记录
使用文件路径 需要图像文件 不需要图像文件
使用图像数据编码 需要图像文件 不需要图像文件
在网页中显示图像的不同方法：


√
√
学习活动
HTML代码与网页文件
三
学习活动
三、HTML代码与网页文件
网页文件是常用的保存HTML代码的容器。
一般情况下，HTML 代码保存在以“.htm”“.html”等为扩展名的网页文件中。
index.htm
index.html
HTML代码一定要以网页文件形式保存吗？
学习活动
三、HTML代码与网页文件
浏览器需要的是 HTML代码，实际浏览过程中，浏览器只要能得到相应的HTML代码就可以了，并不要求必须以网页文件形式保存。
学习活动
三、HTML代码与网页文件
【实践探究】
1 . 运行《Web 服务器》软件
学习活动
三、HTML代码与网页文件
【实践探究】
2 . 根据提示访问这个网站。
学习活动
三、HTML代码与网页文件
【实践探究】
3 . 修改编码、内容等参数。
学习活动
三、HTML代码与网页文件
【实践探究】
4 . 修改内容后再次访问，看看显示的变化。
学习活动
三、HTML代码与网页文件
【实践探究】
可以看到，即使没有网页文件，也能完成相应的浏览任务。
网页内容可以保存在网页文件中，可以保存在数据库中，也可以由软件实时生成。但考虑到管理、维护、修改等因素，很多网站选择把网页存放在网页文件中。
课堂小结
拓展-提升
网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？请验证你的猜想。
同学们可以尝试在网页中设置一个指向其他网站的图像，然后看看显示效果。
https://www.21cnjy.com/recruitment/home/fine

展开更多......

收起↑