第16课 探秘网页与代码导学案 2025-2026学年人教版初中信息科技七年级全一册

第16课　探秘网页与代码 导学案

班级_________ 姓名_________

1．了解网页与代码之间的对应关系。

2．初步认识HTML语言，知道常用标签的作用。

3．学会通过修改代码制作自己的第一个网页。

知道常用标签的作用

修改代码并保存

师： 同学们，今天老师和大家初次见面，先给大家自我介绍一下，请同学们打开老师发给大家的“操作素材”文件夹，找到里面的文本文件“附件1自我介绍.txt”双击打开它，就能看到老师的自我介绍了，件同学们看出了什么信息。

生：看到一些文字，更多的是一些符号和字母。

师：这个自我介绍看起来不是很直观，能得到的信息也不是很全，但是作为大家的信息科技教师，事情肯定不会这么简单，接下来请大家关闭 “附件1自我介绍.txt”文件，将文件重命名为“附件1自我介绍.html”，这时候再双击打开它看看有什么变化。

生：这下看着直观多了。

师：我们没有修改文件里面的任何内容只改了文件的后缀名就发生了如此大的变化，到底发生了什么，你们想不想也拥有这样的自我介绍呢，接下来我们一起走进今天的课程“探秘网页与代码”。

【学习活动1】

活动目的：了解网页与代码之间的关系和常用标签的作用。

活动条件：可联网的计算机、自我介绍网页。

活动步骤：

步骤1：打开网页：在浏览器中打开“附件1自我介绍..html”网页。

步骤2：查看代码：调出浏览器的“开发人员”工具，查看网页的HTML代码。

步骤3：初步观察：观察页面代码，记录网页上不同区域（如标题、段落、图片等）对应的HTML标签。

步骤4：以小组的形式先仔细观察代码和网页，然后再把鼠标光标放到代码各个位置对比网页和代码的关系，猜测每个标签的作用并完成导学案中表格1-1的填写。

活动记录：

以小组为单位通过观察、讨论和操作，结合参考选项，将你猜测的标签功能填入表格1-1中对应的位置。

参考选项：

①设置超链接   ②设置文档头部   ③设置新一行   ④设置文档主体

⑤使网页内容居中 ⑥设置内容的一级标题  ⑦设置图像 ⑧设置网页标题

标　　签	作　　用
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<img src='***/***.jpg'>
<a href='xxxx'></a>
<center></center>

表1-1