第16课 探秘网页与代码导学案 人教版2024七年级信息科技.docxVIP

3-

第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

imgsrc=***/***.jpg

ahref=xxxx/a

center/center

表1-1

【学习活动2】

1．将附件1自我介绍.txt后缀改回.html双击鼠标左键打开附件1自我介绍.txt，复制里面的所有代码，粘贴到老师打开的在线编辑器（地址：/try/try.php?filename=tryhtml_intro）中。

2、按照提示修改相应文字或参数

3、将修改好的代码全部复制、粘贴到：附件1自我介绍.txt中并保存，将该文件重命名为：xxx自我介绍.html，恭喜你，你的自我介绍网页就完成了！现在你可以双击打开在网页上观看显示效果了。

达标检测

达标检测

点击已完成的“个人简介”页面底部“更多信息”链接，打开本节课的在线测试题目，选择答案并提交，完整本节课的当堂检测内容，未能完成“个人简介”网页制作的同学，可以打开“操作材料”文件夹中的在线作业.txt文本文档，复制链接到浏览器地址栏中打开完成作业。

课堂总结

课堂总结

1．HTML是一种可用于描述网页的语言。

2．HTML语言中用于标记内容、格式或超链接的代码符号叫标签。

3．修改标签及内容，可以改变网页的显示效果。