资源简介

(共13张PPT)
第16课　探秘网页与代码
第四单元　校园活动线上展
义务教育信息科技课程资源　七年级
项目学习：任务大闯关，你能闯过几关？
三 验证网页内容的保存形式
二 浏览器是如何显示网页的
一 网页与HTML代码之间的对应关系
成功完成任务的同学下课找老师加分
项目情境：
学校每年科技节都会有许多科技体验项目，也有制作“科技节体验项目”网站的传统。同学小华浏览了往年的科技节网站作品，发现一个网站包含多个网页文件，每个网页文件保存着一堆代码。一起来思考！！
问题：我们看到的网页与这些代码之间有什么关系？如何调整代码改变网页的显示效果？
图文并茂的网页，背后对应着一堆代码。这堆代码对应着描述网页的语言——HTML（超文本标记语言）。
项目任务1：网页与HTML代码
任务1：请打开科技节文件夹的网页3D打印，然后调出浏览器的“开发人员”工具，观察页面代码。找一找网页的图片与文字都体现在代码的哪些地方呢？（学习任务单-填写标签）
项目任务1：网页与HTML代码
知识卡片1：HTML语言中用于标记内容、格式或超链接的代码符号叫标签。成对出现的双标签，如和。单标签，如。
标　　签 作　　用

任务2：请观察科技节网址的页面代码，找出HTML不同
标签所对应的作用（学习任务单-填序号）
设置文档头部
设置网页标题
设置文档主体
设置内容的一级标题
设置新一行
设置图像
设置超链接
知识配对游戏：你成功掌握了HTML的标签吗？
项目任务2：显示网页的过程
HTML代码

飞驰的火车

更多AI绘画
作品


知识卡片2：浏览器获得网页代码后，就会按照这些代码的要求，显示相应的文字、图像等，进而呈现出完整的网页效果。
修改要求 修改记录
修改网页标题
更换图像
增加图像说明
项目任务2：显示网页的过程
任务3：用《记事本》软件打开网页文件，根据下表的修改要求，尝试修改网页中的代码。
修改之间的内容
修改标签的src属性
在标签后面增加

标签
浏览器可以把HTML代码转换成浏览时看到的图文并茂的网页。
方法一：修改网页，让它显示计算机中的图像文件001.png。浏览网页，观察显示效果。教师提示：试一试用新代码代替源代码吧！！
原代码：

修改网页代码，让它显示一张笑脸图。

新代码：

项目任务2：显示网页的过程
任务4：参照以下方法进行操作，让网页显示一张笑脸图。
方法二：运行《图像编码转换器》软件，选择图像文件001.png后进行编码转换，然后用运行结果替换网页中的标签。确保网页所在文件夹中没有图像文件001.png 后，浏览网页，观察显示效果。
请查看学习任务单：老师提供了图像的转换代码！！
显示方法 任务记录
使用文件路径 需要图像文件 不需要图像文件
使用图像数据编码 需要图像文件 不需要图像文件
√
√
总结：在网页中显示图像的不同方法：
网页文件是常用的保存HTML代码的容器。
index.htm
index.html
思考：HTML代码一定要以网页文件形式保存吗？
浏览器需要的是 HTML代码，实际浏览过程中，浏览器只要能得到相应的HTML代码就可以了，并不要求必须以网页文件形式保存。


项目任务3：HTML代码与网页文件
观察变化：运行《Web服务器》软件，修改编码、内容等参数后，再次访问此网页，看看显示效果。
项目任务3：HTML代码与网页文件
启动服务后，把最下方的地址复制到浏览器的地址栏中，即可访问网站。
项目总结
1．HTML是一种可用于描述网页的语言。
2．HTML语言中用于标记内容、格式或超链接的代码符号叫标签。
3．修改标签及内容，可以改变网页的显示效果。
4．HTML代码不一定保存在网页文件中。
学习评价 自评分数（5分）
我知道了解网页与代码之间的对应关系。
我了解 HTML 语言，知道常用标签的作用。
我学会验证网页内容的保存形式。
网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？请想办法验证你的猜想。
项目拓展与提升
同学们可以尝试在网页中设置 标签的 src 属性，让它指向外站的一张图像，然后看看显示效果。
结论：浏览网页时可以看到，外站的图像正常显示在网页中。
由此可知，网页中的图像、音频、视频等可以保存在其他网站中。

展开更多......

收起↑