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

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、浏览器获得网页代码后，就会按照这些代码的要求，显示相应的文字、图像等，进而

呈现出完整的网页效果。

html

科技节——人工智能绘住

body,

h1飞显的火车v/h1

vimgsrc=AM)OLpngJ-〜_［一

ahreUhttps://*〉更多Al垛禽作品

/a\

/body\

2、学习活动2

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

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

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

方法一：修改网页，让它显示算机中的图像文件OOl.pngo浏览网页:示效果O

提示：〈imgsr二***/001.png

方法二：运行《图像编码转换器》软件，选择图像文件OOl.png后进行编码转换，然后

用运行结果替换网页中的img〉标签。确保网页所在文件夹中没有图像文件001.png后，浏览

网页，观察显示效果。

提示:iingsb二〃data:image/jpeg;base64,iVBORwOKG-**.alt二〃Image/

三、HTML代码与网页文件

师：一般情况下，HTML代码保存在以\htrn\html等为扩展名的网页文件中。但

实际浏览过程中，浏览器只要能得到相应的HTML代码就可以了，并不要求这些代码必须以网

页文件形式保存。

学习活动3

fWebgg^S-X

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