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

该初中信息科技课件聚焦HTML语言与网页制作，通过“打开自我介绍.txt文件—修改后缀为.html—观察网页与代码对应”的阶梯式操作，帮助学生建立网页与代码的关联认知，为标签学习和自主制作网页搭建实践支架。 其亮点是以“个人自我介绍”真实情境为载体，通过小组合作猜测标签作用（计算思维的抽象建模）、动手修改代码生成专属网页（数字化学习与创新），培养信息意识（感知文件格式与网页呈现关系）。教学贴近生活易操作，能激发学生实践兴趣，教师使用可高效落实课标目标，提升学生数字创新能力。

打开老师的自我介绍 附件1自我介绍.txt 在操作材料文件夹中找到下图所示文本文档，双击鼠标左键打开。 1 自我介绍 <html> <head> <title>我的自我介绍</title> </head> <body> <center> <h1>老师的自我介绍</h1> <p>初中信息技术教师 | 超爱上班</p> <img src="001.jpg" width="200"> <h2>关于我</h2> <p>我是一名充满激情且帅气（以前）的信息科技教师，</p> <h2>教育背景</h2> <p>计算机科学学士，XX大学，2018年毕业。</p> <h2>技能</h2> <p>七岁习文，八岁习武</p> <p>不善言辞，略懂拳脚</p> <p>能吃、不胖</p> <h2>联系方式</h2> <p>邮箱：zhangsan@example.com</p> <p>电话：+86 1234567890</p> </center> </body> 2 自我介绍 附件1自我介绍.txt 附件1自我介绍.html 修改文件后缀名txt为html再打开 3 自我介绍 <html> <head> <title>我的自我介绍</title> </head> <body> <center> <h1>老师的自我介绍</h1> <p>初中信息技术教师 | 超爱上班</p> <img src="001.jpg" width="200"> <h2>关于我</h2> <p>我是一名充满激情且帅气（以前）的信息科技教师，</p> <h2>教育背景</h2> <p>计算机科学学士，XX大学，2018年毕业。</p> <h2>技能</h2> <p>七岁习文，八岁习武</p> <p>不善言辞，略懂拳脚</p> <p>能吃、不胖</p> <h2>联系方式</h2> <p>邮箱：zhangsan@example.com</p> <p>电话：+86 1234567890</p> </center> </body> 4 第16课：探秘网页与代码 义务教育2024 七年级全一册 第四单元：校园活动线上展 5 学习目标 1 了解网页与代码之间的对应关系。 2 初步认识HTML语言，知道常用标签的作用。 3 会通过修改代码制作自己的第一个网页 6 什么是HTML？ ? HTML（hypertext markup language） 超文本标记语言 文本：简单说，它是一个文本文件 标记：标记内容 用文本的形式来标记网页的内容，这里的内容包含文字、图像、声音、视频等等。 了解网页与代码之间的对应关系。 7 网页与代码 8 网页与代码 9 网页与代码 10 了解网页与代码之间的对应关系。 那如何识别html文件呢？ ? xxx.html HTML文件的扩展名： xxx.htm 11 初步认识HTML语言，知道常用标签的作用。 HTML语言的特征： HTML语言中用于标记内容、格式或超链接的代码符号叫标签。 成对出现的双标签，如<HTML>和</HTML>。 单标签，如<img>。 <html> <head> <title>我的自我介绍</title> </head> <body> <center> <h1>老师的自我介绍</h1> <p>初中信息技术教师 | 超爱上班</p> <img src="001.jpg" width="200"> <h2>技能</h2> <p>七岁习文，八岁习武</p> <p>不善言辞，略懂拳脚</p> <p>能吃、不胖</p> <h2>联系方式</h2> <p>邮箱：zhangsan@example.com</p> <p>电话：+86 1234567890</p> </center> </body> </html> 12 初步认识HTML语言，知道常用标签的作用。 活动一：猜测每个标签的作用（时间5分钟） 1.双击鼠标左键打开操作材料中的“附件1自我介绍.html”文件，网页打开后，按键盘上的 “F12”调出开发人员选项。 2.以小组的形式先仔细观察代码和网页，然后再把鼠标光标放到代码各个位置对比网页和代码的关系，猜测每个标签的作用并完成导学案中表格1-1的填写。 13 初步认识HTML语言，知道常用标签的作用。 设置超链接 设置文档头部 设置新一行 设置文档主体 使网页内容居中 设置内容的一级标题 设置图像 设置网页标题 标　　签 作　　用 <head></head> <title></title> <body></body> <h1></h1> <p></p> <img src='***/***.jpg'> <a href='xxxx'></a> <center></center> 14 初步认识HTML语言，知道常用标签的作用。 标　　签 作　　用 <head></head> 设置文档头部,定义网页编码格式等 <title></title> 设置网页标题 <body></body> 网页可见部分，设置文档主体 <h1></h1> 设置内容的一级标题 <p></p> 设置新一行 <img src='***/***.jpg'> 设置图像 <a href='xxxx'></a> 设置超链接 <center></center> 使网页内容居中 15 16 制作自己的个人简介网页 附件1自我介绍.txt 1、将附件1自我介绍.txt后缀改回.html双击鼠标左键打开附件1自我介绍.txt，复制里面的所有代码，粘贴到老师打开的在线编辑器。 粘贴代码到此位置 活动二：修改代码制作自己的个人简介网页 17 制作自己的个人简介网页 ①修改<title>标签内容为你的“学校名称” ②修改<h1>标签内容为你的“班级+名字” ③修改<p>标签内容为你的座右铭或一句话，内容要积极健康。 ④修改<img>标签中的图片，男生改为“boy.png”,女生改为“girl.png”。 ⑤删除红框中的所有内容 ⑥修改<h2>标签为<h3>标签，修改“联系方式”为兴趣爱好，将“邮箱”和“电话” 改为你的两项兴趣爱好 ⑦修改<a href>标签中的网址为“https://kaoshi.wjx.top/vm/hTOgTo0.aspx” 2、按照提示修改相应文字或参数 18 制作自己的个人简介网页 3、将修改好的代码全部复制、粘贴到：附件1自我介绍.txt中并保存，将该文件重命名为：xxx自我介绍.html，恭喜，你的自我介绍网页就完成了！现在你可以双击打开在网页上观看显示效果了。 19 课堂练习 20 课堂小结 1．HTML是一种可用于描述网页的语言。 2．HTML语言中用于标记内容、格式或超链接的代码符号叫标签。 3．修改标签及内容，可以改变网页的显示效果。 21 $