第16课　探秘网页与代码 1．了解网页与代码之间的对应关系。 2．初步认识HTML语言，知道常用标签的作用。 3．验证网页内容的保存形式。 1．了解网页与代码之间的对应关系。 2．了解浏览器显示网页的过程。 1．使用HTML常用标签修改简单网页代码。 2．了解网页内容的保存形式。 具备上网条件的信息科技实验室、课件、《图像编码转换器》软件、《Web服务器》软件等。 新课导入 【教师活动1】展示国家中小学智慧教育平台网站，引导学生发现一个网站中包含多个网页，并生思考网页为何能够展现图文声像，如何能够实现网页间跳转等问题。 【学生活动1】浏览网站，思考：网页为什么能够展示出文字、图像等内容？浏览器是如何显示网页的？ 【设计意图】通过展示优秀的网站案例，引导学生积极探索网页及其背后的代码世界，激发学生的学习兴趣和好奇心，为本节课及整个单元的学习做好准备。 新知探究 一、网页与HTML代码 【教师活动2】在浏览器中打开“科技节样例”网页，引导学生观察网页中包含哪些构成元素。 【学生活动2】说一说观察到的网页元素，比如：文字、图像、音频、视频、超链接等。 【教师活动3】提问：“这些网页元素是如何呈现出来的？”随后，教师演示如何调出浏览器的“开发人员”工具，并组织学生完成【学习活动1】。在“猜测验证”环节中，学生观察网页及其对应的HTML代码，感受HTML代码语言的特点。具体步骤如下： 让学生猜测标签的作用； 通过修改或删除标签之间的内容，观察网页的变化； 根据浏览效果验证猜测是否正确。 【学生活动3】完成【学习活动1】。 1．打开“科技节3D打印”的网页，调出浏览器的“开发人员”工具，观察网页及其对应的代码，可通过点击小箭头图标来定位网页元素对应的代码，思考网页内容和HTML代码的对应关系。 2．猜测不同标签的作用，通过修改或删除某些标签之间的内容，观察并记录网页的变化来验证猜测是否正确，将结果记录在表格中。 【教师活动4】鼓励学生之间积极交流与合作，组织学生分享实验结果和验证过程。 【学生活动4】结合网页的实时效果变化，分享猜测验证的过程及结果，总结本次实验的收获，包括对网页元素与HTML代码的理解、对HTML标签作用的认识、实验过程中遇到的问题及解决方法等。 【教师小结】图文并茂的网页背后对应着一堆代码，这些代码对应着描述网页的HTML语言。HTML语言中用于标记内容、格式或超链接的代码符号叫标签。 【设计意图】通过“猜测验证”环节，引导学生体验并了解网页与HTML代码之间是如何一一对应的，直观感受HTML语言的特点，提升学生猜测验证的能力。 【教师活动5】教师通过简单讲解，引导学生参照“常用标签表”了解常用的网页标签，简单知道标签的作用。 标签 作用 设置文档头部 设置网页标题 设置文档主体

设置内容的一级标题

设置新的一行 设置图像 设置超链接 【学生活动5】认真听讲，学习HTML常用标签及作用。了解到大部分标签是成对出现的，但也存在不成对的情况。 【设计意图】通过讲解，帮助学生了解HTML代码特点和不同标签的作用，为接下来的实践应用做铺垫。 二、显示网页的过程 【教师活动6】展示代码与网页内容对应关系示意图，配合操作演示，引导学生了解浏览器显示网页的过程：浏览器获得网页代码后，按照代码要求显示文字、图像等，进而呈现出完整的网页效果。 【学生活动6】合作完成【学习活动2】，通过修改网页代码，更进一步了解浏览器显示网页的过程，并熟悉不同标签的作用。 1．用《记事本》软件打开网页文件，尝试通过改代码的方式完成修改网页标题、更换图像、增加图像说明等任务。 2．参照以下方法进行操作， ... ...