第9课《网页的数据编码》教学设计 2024—2025学年浙教版（2023）初中信息技术八年级上册

课题名称 互联网数据——网页的数据编码教学设计 备课教师 评课教师 年级 课时 1 教学目标 1. 通过了解网页的数据编码，理解网页的数据请求与响应过程。 2. 通过体验网页表单，了解网页表单数据交互的过程。 教学重点 了解网页的数据编码，理解网页的数据请求与响应过程。 教学难点 通过体验设置网页表单，了解网页表单数据交互的过程。 教学过程 备注 1、 “导”（6分钟） 播放一则AI宣传视频。老师打算以网页的形式来调查收集同学们对AI了解情况的信息，这张网页中需要有哪些元素？（文字、图片、视频、输入框、按钮……）现在通过网页收集信息的方法很常见（展示案例），大多都有文字、图片、输入框、按钮等元素。今天这节课我们要学着将这些元素组合起来制作一个“AI主题小调查”的网页。 2、 “思”（12分钟） 一、网页的编码 打开“AI主题小调查”网页观察一下，这个界面中有哪些元素？（图片、文字、表单）。 大家知道这些内容是如何展示在一个网页中？结合前几节课的学习，思考一下。 网页中的数据都是通过HTML标签编码组织在网页中的，网页编码是指用于表示和处理网页文本内容的字符编码方法，在通过浏览器进行解释并呈现。 不同的数据类型都对应不同的标签编码，请同学们小组讨论，结合现有的网页界面来分析一下这些数据类型对应的标签编码是什么，进行连线。 二、网页的数据请求与响应 我们通过HTML标签编码将数据组织在网页中，那么这些数据又是如何呈现出来让我们看到相应的文字音频视频等内容的呢？这里就涉及到网页的数据请求与响应。 网页需要通过请求与响应以获取HTML数据，网页中如有多个媒体数据，则需要多次请求与响应，才能在网页上呈现。请求与响应的流程如图： 任务包中有一个文件名为“AI宣传视频”的视频文件，请同学们仿照图片标签的添加格式，在网页图片下方添加这个视频。 （提问：1.视频标签是？2.标签添加语句是？）<video scr=”AI宣传视频”> 根据学生完成情况进行点评，利用错误案例进行分析易错点。（1.标签错误；2.文件名错误；3.文件路径） 3、 “议”（7分钟） 网页中的交互 AI主题小调查的网页上有两个文本框和一个“提交”按钮，有什么作用？这是网页表单，是实现用户和网页之间信息交互的方式之一，是用户向服务器反馈信息的途径。大家思考一下，网页中还有哪些交互的形式？（点击链接、按钮操作、鼠标悬停、下拉菜单、滚动交互、轮播图、弹出框和模态框、列表排序与过滤、拖放交互） （一）创建表单的基本步骤 1.使用<form>标签创建表单2.添加表单字段3.定义表单提交操作4.处理表单数据 在HTML中，使用<form>标签创建表单元素，它会包裹表单中的各个字段和提交按钮。 （二）常见的表单字段包括： 1.<input type="text">：文本输入框，用于接收用户输入的文本。 2.<input type="password">：密码输入框，用于接收用户输入的密码，显示为密文。 3.<input type="checkbox">：复选框，允许用户选择一个或多个选项。 4.<input type="radio">：单选按钮，允许用户从一组选项中选择一个。 5.<select>和<option>：下拉菜单，允许用户从预定义的选项中选择一个。 6.<textarea>：多行文本输入框，用于接收用户输入的多行文本。 （三）教师演示创建一个包含文本输入框和提交按钮的表单。 活动：制作一张调查家庭使用人工智能设备的网页。 4、 “展”（7分钟） 1.教师通过智慧课堂平板展示学生完成的任务单，并请每组选出一名代表讲解展示本组的讨论成果，对学生作品进行展示评价。（自我评价、小组互评、教师评价） 2.教师对勇于展示的同学进行鼓励，并鼓励其他学生质疑、挑战、纠错、补充。 五、“评”（8分钟） 1.教师讲解HTML标签编码。通过视频标签的添加让学生掌握网页编码及数据请求与响应这部分内容。学生讨论平时碰到过的网页交互方式，通过网页现有表单的分析以及文本输入框的添加让学生掌握网页表单交互的设置。 3.总结本课收获。 六、“练”（5分钟） 制作一张调查家庭使用人工智能设备的网页。 教学板书 教学反思 表单属性对于学生来讲也是比较陌生的部分，表单所涉及的设置内容较多，想让学生在一节课中进行理解并掌握有较大难度。 学科网（北京）股份有限公司 $$