《网页的数据编码》教学设计
一、学习内容分析
本课是浙江省信息科技教材八年级上册第二单元的第 9课，本课内容处于互联网应用与创新模块，包含了网页的编码、网页的数据请求与响应、网页中的交互三部分内容。要求学生能通过学习网页的数据编码，理解网页的数据请求与响应过程；通过体验网页表单，了解网页表单数据交互的过程。处于第二单元《互联网数据》的第四课，承上启下，为学习下一节网页的编辑与发布打下基础。
二、学情分析
本课授课对象为初二学生，接触过不少网页知识，在本课之前，学生已经了解了常用互联网应用中的数据构成，掌握了HTML文档的基本结构，能够初步编辑HTML网页代码，理解了超链接的作用，体验过CSS设置的效果。但是对于网页的数据编码，网页的数据请求和响应过程以及网页表单数据交互的过程还不太了解。
学习目标
教学目标 核心素养指向
1.通过具体任务的实践活动，了解网页的数据编码； 2.分析网页编码，理解网页的数据请求与响应过程； 3.通过体验网页表单，了解网页表单数据交互的过程。 1.信息意识：崇尚科学精神、原创精神，具有自主动手解决问题、掌握核心技术的意识。 2.计算思维：能在真实情境中发现问题，提取问题的基本特征，对问题进行抽象、分解、建模，制订解决方案。 3.数字化学习与创新：按照任务需求，能选择合适的数字设备、平台和资源，合作完成数字化创新活动的创意、规划与实施。 4.信息社会责任：具有良好的协作意识与习惯，乐于帮助他人开展信息活动，负责任的共享信息和资源，并尊重他人知识产权。
四、教学重难点
教学重点：了解网页的数据编码，理解网页的数据请求与响应过程。编辑好的网页能否正确打开依赖于各个部分的数据编码是否正确，网页发送请求后，浏览器根据编码进行解析，返回相应的数据，编码在这个环节中起到极其重要的作用。
教学难点：通过体验设置网页表单，了解网页表单数据交互的过程。表单是实现网页交互的重要组成部分，表单属性对于学生来讲也是比较陌生的部分，表单所涉及的设置内容较多，想让学生在一节课中进行理解并掌握有较大难度。
通过小组合作、实践探究、分析归纳、迁移应用辅以教师指导等多种方式逐一突破。
五、课前准备
学习环境：Edge浏览器，Windows系统电脑
设计思路
通过讨论得出网页中需要出现的数据，从各项数据的组织进入本课的知识点，讲解HTML标签编码。通过视频标签的添加让学生掌握网页编码及数据请求与响应这部分内容。
学生讨论平时碰到过的网页交互方式，通过网页现有表单的分析以及文本输入框的添加让学生掌握网页表单交互的设置。
教法学法
本课采用实践体验法、讨论总结法、演示讲解法、任务探究法等教学方法。
七、学习过程
学习任务 学习过程 设计意图
教师活动 学生活动
引入 播放一则AI宣传视频。 当今科技发展非常迅速，AI已经渗入我们生活的方方面面，如果老师打算以网页的形式来调查收集同学们对AI了解情况的信息，那么这张网页中需要有哪些元素？（文字、图片、视频、输入框、按钮……）现在通过网页收集信息的方法很常见（展示案例），大多都有文字、图片、输入框、按钮等这些元素，输入框和按钮都属于表单的一部分。今天这节课我们就要学着将这些元素组合起来制作一个“AI主题小调查”的网页。 参与思考、讨论 通过话题引导学生联系日常观察，引出本课课题
新授 一、网页的编码 我们先打开下发的“AI主题小调查”观察一下，这个界面中有哪些元素？（图片、文字、表单） 大家知道这些内容是如何展示在一个网页中的么？结合前几节课的学习，大家思考一下。 网页中的数据都是通过HTML标签编码组织在网页中的，网页编码是指用于表示和处理网页文本内容的字符编码方法，在通过浏览器进行解释并呈现。 刚才我们有举例网页中常见的数据类型，不同的数据类型都对应不同的标签编码，接下去请同学们小组讨论，结合现有的网页界面来分析一下这些数据类型对应的标签编码是什么，进行连线。 学习网页编码 小组讨论，完成任务，各组展示结果，派一组上台连线。 了解网页编码 通过连一连的任务，让学生进行自主探究，加深这部分内容的印象 网页的数据请求与响应是本课的重点之一，通过网页源文件的修改，以及网页的浏览来让学生体验整个过程，加深这个知识点的记忆。
二、网页的数据请求与响应 我们通过HTML标签编码将数据组织在网页中，那么这些数据又是如何呈现给我们，让我们看到相应的文字音频视频等内容的呢？这里就涉及到网页的数据请求与响应。 网页需要通过请求与响应以获取HTML数据，网页中如有多个媒体数据，则需要多次请求与响应，才能在网页上呈现。请求与响应的流程如图： 学习网页的数据请求与响应 通过作业展示进行课堂 检验，关注学生的掌握情况，即时调整教学。
大家刚才应该有注意到，老师下发的文件中，有一个文件名为“AI宣传视频”的视频文件，为了在收集调查结果前，能够确保每位被调查的同学都知道AI是什么，我们可以在网页中插入这个宣传视频，接下去请同学们仿照图片标签的添加格式，在网页图片下方添加这个视频。 （提问：1.视频标签是？2.标签添加语句是？）
