单元四 · 校园活动线上展
第16课 探秘网页与代码
一、学习目标
- 了解网页与代码之间的对应关系。
- 初步认识HTML语言，知道常用标签的作用。
二、情境导入
学校每年科技节都会有许多科技体验项目，也有制作“科技节体验项目”网站的传统，今年轮到本班承担网站制作的任务。
同学们浏览了往年的科技节网站作品，发现一个网站包含多个网页文件，每个网页文件保存着一堆代码。
很多同学对此感到好奇：我们看到的网页与这些代码之间有什么关系？
三、核心讲解
本课学习路径：
1网页与HTML代码
2显示网页的过程
3HTML代码与网页文件
1．网页与HTML代码
上网浏览时会接触风格各异的网页，里面有文字、图像、音频、视频等多种资源。通
网页与HTM：先抓住「网页与HTML代码」在做什么，再用例子对照验证。
- 图文并茂的网页，背后对应着一堆代码。这堆代码对应着描述网页的语言——HTML
- （hypertext markup language，超文本标记语言）。
- 浏览一个网页，然后调出浏览器的“开发人员”工具，观察页面代码。
- HTML语言中用于标记内容、格式或超链接的代
- 码符号叫标签。
想一想：过网页中的超链接，可以方便地在网页和资源之间跳转。这一切到底是怎样完成的呢？
2．显示网页的过程
参照以下方法进行操作，让网页显示一张笑脸图。
编码：用约定符号表示信息，便于存储、传输与识别。
- 方法一：修改网页，让它显示计算机中的图像文件001.png。浏览网
- 页，观察显示效果。
- 方法二：运行配套资源中的《图像编码转换器》软件，选择图像文件
- 签。确保网页所在文件夹中没有图像文件001.png 后，浏览网页，观察显示效果。
- 单击“选择图像”按钮，选择图
想一想：HTML代码一定要以网页文件形式保存吗？
3．HTML代码与网页文件
运行《Web服务器》软件。
- 修改编码、内容等参数后。
- 根据提示访问这个网站，看看显示效果。
- 修改内容后再次访问，看看显示效果。
- 启动服务后，把最下方的地址复制到浏览器的地址栏
- 中，即可访问网站。
弄清以上要点后，再进入下方动手体验，用实际操作验证。
四、动手体验 · MixNT 网络仿真
点「打开仿真」载入拓扑，对照本课概念观察现象。
打开拓扑，对照本课概念观察现象。
正在打开仿真
正在载入网络拓扑…
五、课堂总结
- HTML是一种可用于描述网页的语言。
- HTML语言中用于标记内容、格式或超链接的代码符号叫标签。
- 修改标签及内容，可以改变网页的显示效果。
- HTML代码不一定保存在网页文件中。
六、拓展提升
拓展：网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？请想办法验证你的猜想。
测评
完成练习后作答；选出后点「检查」。答错会显示简短说明。
下列哪一项更接近本课学习目标？
本课课堂总结强调的是？
本课主题最贴近下列哪一项？
完成本课后，优先应该做什么来证明学会了？
判断：教学指南中的学习活动可以全部跳过。
拓展提升部分的作用是？
本节小结
回顾本课要点，完成动手体验与测评。记住：探秘网页与代码。