4.16探秘网页与代码（教学设计）-七年级信息科技全一册（人教版2024）.docx

3.16《探秘网页与代码》教学设计

核心素养教育目标：

信息意识：学生了解网页与代码之间的对应关系。

计算思维：学生初步认识HTML语言，知道常用标签的作用。

数字化学习与创新：引导学生验证网页内容的保存形式，培养学生的创新意识和实践能力。

信息社会责任：通过网络实验，整理所学内容，培养探索精神。

教学重难点：

重点：掌握认识HTML语言，知道常用标签的作用。

难点：理解验证网页内容的保存形式。

教学方法：

任务驱动法、分组讨论法、演示法

教学准备：

多媒体网络教室、课件

教学过程：

【复习导入】

学校每年科技节都会有许多科技体验项目，也有制作“科技节体验项目”网站的传统，今年轮到我们班承担网站制作的任务。同学们浏览了往年的科技节网站作品，发现一个网站包含多个网页文件，每个网页文件保存着一堆代码。很多同学对此感到好奇。

今天，我们就来揭开这个秘密，一起探索网页的代码。

【新知探究】

一、网页与HTML代码

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

网页代码，就是指在网页制作过程中需要用到的一些特殊的语言，设计人员通过对这些语言进行组织编排制作出网页，然后由浏览器对代码进行翻译后才是我们最终看到的效果。

制作网页时常用的代码有HTML，JavaScript，ASP，PHP，CGI等，其中超文本标记语言(标准通用标记语言下的一个应用、外语简称：HTML)是最基础的网页代码。

学生自主学习并认识HTM代码。

2、学习活动1

浏览网页，调出浏览器的“开发人员”工具，观察页面代码

3、学生自主学习：超文本标记语言（HyperTextMarkupLanguage），简称HTML，是用于创建网页的标准标记语言。

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

二、显示网页的过程

1、浏览器获得网页代码后，就会按照这些代码的要求，显示相应的文字、图像等，进而呈现出完整的网页效果。

2、学习活动2

（1）用《记事本》软件打开网页文件，尝试通过改代码的方式

完成修改网页标题、更换图像、增加图像说明等任务。

（2）参照以下方法进行操作，在网页中显示一张笑脸图。

方法一：修改网页，让它显示计算机中的图像文件001.png。浏览网页，观察显示效果。

提示:imgsr=***/001.png

方法二：运行《图像编码转换器》软件，选择图像文件001.png后进行编码转换，然后用运行结果替换网页中的img标签。确保网页所在文件夹中没有图像文件001.png后，浏览网页，观察显示效果。

提示:imgsm=data:image/jpeg;base64,iVBORwOKG….alt=lmage/

HTML代码与网页文件

师：一般情况下，HTML代码保存在以“.htm”“.html”等为扩展名的网页文件中。但实际浏览过程中，浏览器只要能得到相应的HTML代码就可以了，并不要求这些代码必须以网页文件形式保存。

学习活动3

（1）运行《Web服务器》软件。

（2）修改编码、内容等参数。

（3）根据提示访问这个网站。

（4）修改内容后再次访问，看看显示的变化。

【拓展与提升】

网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？请验证你的猜想。

【课堂小结】

请同学们对照本章的学习目标进行总结，看看自己掌握了那些知识。