第16课+探秘网页与代码+课件+2025-2026学年人教版初中信息科技七年级全一册
2026-05-20
|
43份
|
26页
|
151人阅读
|
1人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第16课 探秘网页与代码 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2025-2026 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | ZIP |
| 文件大小 | 28.65 MB |
| 发布时间 | 2026-05-20 |
| 更新时间 | 2026-05-20 |
| 作者 | 一课小白菜 |
| 品牌系列 | - |
| 审核时间 | 2026-05-20 |
| 下载链接 | https://m.zxxk.com/soft/57953025.html |
| 价格 | 0.50储值（1储值=1元） |
| 来源 | 学科网 |
摘要：
该初中信息科技课件围绕网页与HTML代码的对应关系、标签作用及网页保存形式展开，以“红五月”校园活动创设情境导入，通过自主学习问题引导初步认知，再以观察代码、修改代码的探究任务为支架衔接前后知识。
其亮点在于采用情境化合作探究与动手实践结合的教学方法，通过小组观察浏览器代码对应网页内容培养信息意识，修改HTML标签及内容体现计算思维，利用NetBox运行验证成果落实数字化学习与创新。学生能在实践中理解知识，教师可依托结构化活动提升教学效率。
内容正文：
教学设计
课程名称
第16课 探秘网页与代码
学科
信息科技
年级
初一
教学内容
网页与HTML代码、显示网页的过程、HTML代码与网页文件。
学情分析
教学目标
1. 了解网页与代码之间的对应关系。
2. 初步认识HTML语言，知道常用标签的作用。
3. 验证网页内容的保存形式。
重难点
1. 重点：网页与代码之间的对应关系
2. 重难：理解标签的作用。
教学过程
教师活动
学生活动
设计意图
课堂引入
创设问题情境：
每年5月份，学校都会举办声势浩大的“红五月”校园科技文化艺术节，期间有很多精彩的项目。为了让更多人能够了解我校的科技文化艺术节，从今天开始让我们一起来完成关于校园科技文化艺术节网站的制作。那网站是怎样制作的呢？本节课先让我们一起进入第16课《探秘网页与代码》。
听讲与思考。
以学生身边的校园活动作为引入，激发学生的学习热情。
自主学习
提出问题：
1.什么是网页？
2.网站与网页的关系是什么？
3.什么是HTML标记语言？
学生阅读老师提供的学习资料开始自学。
初步了解本节课的知识点。
探究1
提出探究要求：
1.先用浏览器打开探究1文件夹中的网页index.html。
2.调出浏览器的“开发人员”工具，观察页面代码。
3.找出浏览器显示的内容在网页代码中的位置及相关的标签。
1. 以小组为单位，阅读教师提供的材料或上网搜索资料共同探讨教师所提出的问题。
2.请各小组派代表，向全班同学展示探究成果，其他同学聆听或质疑。
以合作探究形式达成重难点。
探究2
提出探究要求：
（一）用记事本打开探究2 网页文件夹中的index.html，并作以下修改：
1.网页标题修改为：某学校“红五月”校园科技文化艺术节
2.内容一级标题修改为：缤纷五月筑梦想，绚烂青春绘华章
3.段落内容修改为：“五月花开胜火，青春壮志凌云”，带着对青年人的期望，校长从青年爱国谈起，指出火红的五月，是为青春绽放。并希望同学们能借助此次活动，在梦想的舞台上倾情演绎，在科技文化艺术的海洋里畅游，勤勉奋进，眼界开阔，志向凌云，让青春在历史的浪潮中绽放光彩。
4.将图像img02.png添加到网页中。
（二）访问网页内容
1．运行《NetBox.exe》软件。
2．如果没有自动弹出网页内容，请在浏览器中输入http://127.0.0.1/查看网页内容。
以小组为单位，根据要求，利用教师提供的学习资源，以合作探究的方式开展学习。
完成探究任务后，小组展示分享。
课堂总结
对本节课的内容进行梳理：
1．HTML是一种可用于描述网页的语言。
2．HTML语言中用于标记内容、格式或超链接的代码符号叫标签。
3．修改标签及内容，可以改变网页的显示效果。
4．HTML代码不一定保存在网页文件中。
思考与总结。
帮助学生形成知识体系。
学科网（北京）股份有限公司
$探秘网页与代码
第16课
1
学习目标
1
2
3
了解网页与代码之间的对应关系。
初步认识HTML语言，知道常用标签的作用。
验证网页内容的保存形式。
学习目标
2
学习内容
三 HTML代码与网页文件
二 显示网页的过程
一 网页与HTML代码
学习内容
3
问题情境
每年5月份，学校都会举办声势浩大的“红五月”校园科技文化艺术节，期间有很多精彩的项目。为了让更多人能够了解我校的科技文化艺术节，从今天开始让我们一起来完成关于校园科技文化艺术节网站的制作。那网站是怎样制作的呢？本节课先让我们一起进入第16课《探秘网页与代码》。
请查看自主学习部分的文字材料及视频，完成以下问题：
1.什么是网页？
2.网站与网页的关系是什么？
3.什么是HTML标记语言？
自主学习
网页（Web Page）是通过互联网访问的一种文档，通常由HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript等编程语言编写而成，包含了文字、图片、视频等多种元素。一个网页是一个包含HTML标签的纯文本文件，文件扩展名为.html或.htm，它需要通过网页浏览器来阅读。
网页的基本构成：文字、图片、音频、视频、动画、程序等。
网页和网站是网络世界中两个基本而重要的概念，它们之间既有联系也有区别。网页是构成网站的基本单元，通常是HTML格式的文件，通过浏览器访问。而网站是由多个相关联的网页组成的集合体，具有完整的网络功能和结构
HTML（HyperText Markup Language）是一种用于创建和结构化网页的标记语言。它通过一系列标签来定义网页的内容、格式和布局，包括文本、图片、链接、表格等元素。
第16课 学习内容
我们对网页与网站的关系及HTML已有初步的了解，那么HTML超文本标记语言是如何将信息显示给用户的呢？请同学们完成以下合作探究内容：
1.先用浏览器打开探究1文件夹中的网页index.html。
2.调出浏览器的“开发人员”工具，观察页面代码。
3.找出浏览器显示的内容在网页代码中的位置及相关的标签。
注：相关操作可查看参考视频介绍。
探究1
HTML语言中用于标记内容、格式或超链接的代码符号叫标签。
成对出现的双标签，如<HTML>和</HTML>。
单标签，如<img>。
第16课 学习内容
网页与HTML代码
8
标 签 作 用
<head></head> 设置文档头部
<title></title> 设置网页标题
<body></body> 设置文档主体
<h1></h1> 设置内容的一级标题
<p></p> 设置段落
<img src='***/***.jpg'> 设置图像
<a href='xxxx'></a> 设置超链接
第16课 学习内容
网页与HTML代码
9
HTML代码
<html>
<title>“红五月”</title>
<body>
<h1>“红五月”</h1>
<p>“红五月”</p>
<p><img src='img01.png' width="600"></p>
</body>
</html>
浏览器获得网页代码后，就会按照这些代码的要求，显示相应的文字、图像等，进而呈现出完整的网页效果。
第16课 学习内容
显示网页的过程
10
请以小组为单位，完成以下任务：
（一）用记事本打开探究2 网页文件夹中的index.html，并作以下修改：
1.网页标题修改为：某学校“红五月”校园科技文化艺术节
2.内容一级标题修改为：缤纷五月筑梦想，绚烂青春绘华章
3.段落内容修改为：“五月花开胜火，青春壮志凌云”，带着对青年人的期望，校长从青年爱国谈起，指出火红的五月，是为青春绽放。并希望同学们能借助此次活动，在梦想的舞台上倾情演绎，在科技文化艺术的海洋里畅游，勤勉奋进，眼界开阔，志向凌云，让青春在历史的浪潮中绽放光彩。
4.将图像img02.png添加到网页中。
（二）访问网页内容
1．运行《NetBox.exe》软件。
2．如果没有自动弹出网页内容，请在浏览器中输入http://127.0.0.1/查看网页内容。
探究2
请小组代表向全班同学演示你们合作探究的成果，如有疑问可待展示完毕后提出。
分享展示
HTML代码与网页文件
浏览器需要的是 HTML代码，实际浏览过程中，浏览器只要能得到相应的HTML代码就可以了，并不要求必须以网页文件形式保存。
知识补充
网页文件是常用的保存HTML代码的容器。
index.htm
index.html
HTML代码一定要以网页文件形式保存吗？
13
网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？请想办法验证你的猜想。
同学们可以尝试在网页中设置一个指向其他网站的图像，然后看看显示效果。
拓展与提升
14
1．HTML是一种可用于描述网页的语言。
2．HTML语言中用于标记内容、格式或超链接的代码符号叫标签。
3．修改标签及内容，可以改变网页的显示效果。
4．HTML代码不一定保存在网页文件中。
课堂总结
15
$而学胶销十漏“红五用”一育性线
snulla
一庙“红h月校园料技又化之木节一创笔
活动
饼明
一附7
创客编程体到
0冒苏国
生命满希望
留书强
前瑞由你园红五月”
“五月”
一届五月仪园料技又化艺木节一一郎物
活动
部容缩程体过了)
宝33画湛江一中培才学校第十一届“红五月“校园科技文化艺术节-一创客教育体验
活动
明
创客编程体验区
1
1业服苏国
“。杨海娟教师工作室null0null1
当台目11181101141001111815
21为进一步丰富我校的校园科技、艺术文化氛围，弘扬积极向上的校园精神，全面展示我校学子的风采，我校于5月16日至5月18日成功举办第十五届“红五月”校园科技文化艺术节。5月17日上午，本次活动开幕式在学校达人广场举行，开幕式由体卫艺处陈主任主持，梁副校长致辞。
随后，由吴老师带领着小学部学生带来精彩的竖笛节目表演——《龙的传人》，充分展现炎黄子孙的自信与骄傲。
在学生的操纵下，一架架无人机牵引着航模飞机升空，悬停、转圈……充满科技魅力的航模飞机与蓝天交相辉映，让在场师生们感受到了学子的科技风采。
开幕式结束后，小学部、初中部分别在校园各处展开活动，全校学生积极参与，展现了培才学子青春激昂的风采和阳光自信的精神面貌。
$null（一）
1.网页标题：xxx学校“红五月”校园科技文化艺术节
2.内容一级标题：缤纷五月筑梦想，绚烂青春绘华章
3.段落内容：“五月花开胜火，青春壮志凌云”，带着对青年人的期望，校长从青年爱国谈起，指出火红的五月，是为青春绽放。并希望同学们能借助此次活动，在梦想的舞台上倾情演绎，在科技文化艺术的海洋里畅游，勤勉奋进，眼界开阔，志向凌云，让青春在历史的浪潮中绽放光彩。
4.将图像img02.png添加到网页中。
（二）
1．运行《NetBox.exe》软件。
2．如果没有自动弹出网页内容，请在浏览器中输入http://127.0.0.1/查看网页内容。
$今天来教大家一分钟学会HTML编程。什么是HTML？HTML的全称为超文本标记语言，但这里千万不要管什么官方的解释，你直接理解为编写网页最基础的脚本语言，就像一篇文章中的文字，这下是不是简单易懂了？那首先要明白所谓的web编程，我们浏览器上面展示的东西都是web编程语言的呈现网页上的图片、文字等等。他们通过HTML来组织关联，形成我们看到的网页的效果。下面我们来看一段代码，我们可以从这段代码中理解一些基础的语法。如每个标记用坚果来包含，用斜杠来代表结束。还是用一篇文章来举例的，HTML可以理解为一张A4的白纸，head里面包含的就是标题的结构，title里面包含了我们的主标题，body里面是我们的文章主体。这下是不是明白了一些？我们再看这幅图，大家看到这里右侧的是我们编写的代码，左侧的是代码上网页呈现的形式，是不是相对于简单了。
一、什么是网页
网页是构成网站的基本元素，通常由HTML（超文本标记语言）编写，并通过浏览器来展示。网页是一个包含HTML标签的纯文本文件，文件扩展名为.html或.htm。它通过浏览器解释HTML标签来生成页面，展示文字、图片、表格、声音等元素。
网页的基本组成元素包括：
（1）文字：网页的主要内容载体。
（2）图像：用于美化页面，提供视觉效果。
（3）声音：提供背景音乐或声音效果。
（4）视频：内容丰富，视觉冲击力强。
（5）动画：增加页面的动态效果。
二、HTML
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
学科网（北京）股份有限公司
$null@
@H打-向厚校第十二届“红五月”一高中性物邀nullnull庆视建党100周年置第十三届”红五月”一知识产权知识竞赛
世品u里O
2
QU145RS798R
●指2
7火红五月，伴着如炬骄阳，培才校园里，科技文化艺术的热浪再次掀起。17日上午七点三十分，XXX学校第十二届“红五月”校园科技文化艺术节在达人广场拉开了序幕。
“五月花开胜火，青春壮志凌云”，带着对青年人的期望，校长从青年爱国谈起，指出火红的五月，是为青春绽放。并希望同学们能借助此次活动，在梦想的舞台上倾情演绎，在科技文化艺术的海洋里畅游，勤勉奋进，眼界开阔，志向凌云，让青春在历史的浪潮中绽放光彩。
航模表演是开幕式的表演环节。校管乐团奏响《我和我的祖国》、《培才颂》，熟悉的旋律回荡在培才园里，庄严而自豪；校舞蹈队活力舞动，成为如茵草地上热情绽放的焦点；航模队玩转航模飞机，放飞激情，放飞梦想。
信息科组的机器人表演、橡皮筋动力小车挑战赛、创客体验，展示了现代科技的魅力。体育科组的体育棋类比赛展开了紧张的角逐；音乐科组的“校园十大歌手”比赛、舞蹈比赛、器乐比赛让我们感受到了培才学子的多才多艺与全面发展；美术科组的现场书画比赛、剪纸比赛、美术作品展带领大家走进艺术的殿堂，体会艺术的美与灵动；语文科组的“声临其境”——文学名著配音比赛、团扇题诗配画比赛、摘抄设计比赛等，让大家走进诗情画意，走进文学殿堂，接受文艺的熏陶。
$夏日当空，微风徐至。欣喜孩童，灿烂笑颜。言笑晏晏，不染尘纤。5月26日，我校小学部开展了“红五月”校园科技文化艺术节暨庆祝“六一”儿童节活动，活跃了节日的气氛，装点了烂熳的色彩。
众盼已久的“红五月”暨庆祝“六一”活动，在校长激昂的致辞中拉开序幕。给予开幕式别样精彩的，还有小学部学生的“精忠报国”武术操及舞蹈展演。齐鸣的鼓声庄重而震撼，庞大的方阵井井而有序，学生们精神抖擞、意气风发，步伐整齐、动作有力，一出场，便夺得了全场的目光与赞叹。伴随着《精忠报国》的音乐，飘扬的战旗在孩子们的手上挥舞，霸气的将军服为他们加了几分英气。一拳一脚、一挥一踢，行云流水；一开一合、一起一落，气吞山河。招招刚劲，全场观众热血沸腾，为开幕式添了一笔气势。
在这个诗一样的季节里，学子们与清风阳光不期而遇，游园活动在众人的期待下如期而至。孩子们揣着集章卡，穿梭于摊位之中，在炎热的夏季寻找清爽的好心情。精美的海报，多样的游戏，宝贵的印章，让兴奋的孩子们多了一丝奔忙；快乐的神态，竞争的情绪，激动的呐喊，让玩乐的孩子们多了一份专注。
游园活动多彩多样，语文、数学、英语、科信、艺术、体育、综合科组的老师集思广益，结合学科特色，共创设了23个游戏摊位。诗词成语、数独计算、英语单词，在此刻更加妙趣横生；美术扎染、书法创作、运动技巧，在此刻更加大放异彩。而所有精彩，在孩子们的喜形于色的脸庞与成功兑换的礼物中展现得淋漓尽致。所学的知识不仅能运用到生活中，还能运用到游戏中，这大概就是寓教于乐的乐趣吧！
$在繁花似锦，热情洋溢的五月，伴随着郑建忠校长铿锵有力的精彩致辞，湛江一中培才学校第十三届“红五月”校园科技文化艺术节正式拉开帷幕。科技文化艺术节作为学校一年一度的“重头戏”，各大学科组卯足劲根据学科特点，开展与学科知识相关各类特色活动，为学生搭建丰富多彩的自我表现舞台。我校信息技术科组分别举办了“知识产权知识竞赛”、“垃圾分类游戏”、“创客嘉年华”活动。
保护知识产权，助力中国梦。在科技腾飞的今天，拥有核心技术知识产权，意味着拥有竞争力，作为中国接班人的中学生，应该树立知识产权意识，了解知识产权。在红五月展开的知识产权知识竞赛中，我们结合科组特长，采用现场宣讲和计算机机考形式联合开展，活动内容丰富，主题鲜明，学生热情高涨，参赛人数高达500多人，参与性强，达到极好的宣传效果。
与此同时，为了增长同学们对科技知识的了解，激发学习科技知识的热情，在图书馆四楼创客空间举办了“创客嘉年华”，现场为同学们展示3D打印技术、激光切割技术、CNC雕刻技术。陈帝松老师用激光雕刻技术为前来参加“创客嘉年华”的同学现场制作了精美的钥匙挂件，拿到挂件的同学非常开心，依然围着激光切割机久久不肯离开。
$红五月”
“红五月”
一届五月仪园料技又化艺木节一一郎物
活动
部容缩程体而学胶销十漏“红五用”一育性线
s
第四单元 校园活动线上展 第16课 探秘网页与代码
学习任务单
（一）自主学习
阅读教师提供的资料，请思考：1.什么是网页？2.网站与网页的关系是什么？3.什么是HTML标记语言？
（二）探究1
一．阅读教师提供的资料，以小组为单位共同解决以下探究：
1.先用浏览器分别打开探究1文件夹中的网页：我的第一个网页.html和3D打印.html
2.调出浏览器的“开发人员”工具，观察页面代码。
3.找出浏览器显示的内容在网页代码中的位置及相关的标签。
（三）探究2
以小组为单位共同解决以下探究：
用记事本打开探究2 网页文件夹中的index.html，并作以下修改：
1.网页标题修改为：某学校“红五月”校园科技文化艺术节
2.内容一级标题修改为：缤纷五月筑梦想，绚烂青春绘华章
3.段落内容修改为：“五月花开胜火，青春壮志凌云”，带着对青年人的期望，校长从青年爱国谈起，指出火红的五月，是为青春绽放。并希望同学们能借助此次活动，在梦想的舞台上倾情演绎，在科技文化艺术的海洋里畅游，勤勉奋进，眼界开阔，志向凌云，让青春在历史的浪潮中绽放光彩。
4.将图像img02.png添加到网页中。
学科网（北京）股份有限公司
$生命满希望
前路出你创
留雀强D创意设计大宽
型null27
属干有害地银
腹给涂物
0844null8null7
●
面面我校第十四届“红五月”校园科技文化艺术节于5月26日上午正式开幕。为了丰富校园文化生活，拓展学生思维，提高学生对学习信息技术的兴趣，信息技术科组筹备并举办了计算机创新思维编程比赛和键舞飞扬打字比赛。
计算机创新思维编程比赛分为两个组别：图形化趣味编程组、算法设计组，各年级的学生都可以报名参加。报名图形化趣味编程组的同学可以使用Mind+、源码编辑器等图形化编程工具，来解决各种有趣的问题。参加算法设计组的同学则需要使用Python、C++等编程工具，来根据情境要求，设计解决问题的算法，并将运算结果记录下来。此次比赛一共评选出一等奖10名、二等奖17名、三等奖25名。通过这次比赛，各位参赛选手都能一展所长，而且锻炼了计算思维，有的同学甚至能对一个问题给出两种不同的解决方法。
键舞飞扬打字比赛采用由信息技术科组老师自主研发打字比赛系统，比赛内容节选学生熟悉的《紫藤萝瀑布》一课，系统自动计算准确率和比赛时间。参加本次指尖上较量的同学有一百多名，同学们指尖灵动、行云流水，只听见“哒哒哒”的打字声密集不断，同学们眼明手快，用自己最快的速度去敲下每一字符。
举办比赛活动，不仅激发了学生对信息技术学习的热情，更让学生认识到夯实基础的重要性，起到了以赛促练、以赛促学的良好效果。
$
资源预览图
1
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。