第9课 网页的数据编码 教学设计 浙教版初中信息技术八年级上册

第9课《网页的数据编码》教学设计【课标内容要求】初步了解互联网协议，知道网络中数据的编码、传输和呈现的原理【教学内容分析】本课内容处于互联网应用与创新模块，包含了网页的编码、网页的数据请求与响应、网页中的交互三部分内容要求学生能通过学习网页的数据编码，理解网页的数据请求与响应过程；通过体验网页表单，了解网页表单数据交互的过程处于第二单元《互联网数据》的第四课，承上启下，为学习下一节网页的编辑与发布打下基础【教学目标】

1.通过具体任务的实践活动，了解网页的数据编码；

2.分析网页编码，理解网页的数据请求与响应过程；

3.通过体验网页表单，了解网页表单数据交互的过程重点了解网页的数据编码，理解网页的数据请求与响应过程编辑好的网页能否正确打开依赖于各个部分的数据编码是否正确，网页发送请求后，浏览器根据编码进行解析，返回相应的数据，编码在这个环节中起到极其重要的作用难点通过体验设置网页表单，了解网页表单数据交互的过程表单是实现网页交互的重要组成部分，表单属性对于学生来讲也是比较陌生的部分，表单所涉及的设置内容较多，想让学生在一节课中进行理解并掌握有较大难度【核心素养指向】

1.信息意识崇尚科学精神、原创精神，具有自主动手解决问题、掌握核心技术的意识

2.计算思维能在真实情境中发现问题，提取问题的基本特征，对问题进行抽象、分解、建模，制订解决方案

3.数字化学习与创新按照任务需求，能选择合适的数字设备、平台和资源，合作完成数字化创新活动的创意、规划与实施

4.信息社会责任具有良好的协作意识与习惯，乐于帮助他人开展信息活动，负责任的共享信息和资源，并尊重他人知识产权【学情分析】本课授课对象为初二学生，接触过不少网页知识，在本课之前，学生已经了解了常用互联网应用中的数据构成，掌握了HTML文档的基本结构，能够初步编辑HTML网页代码,理解了超链接的作用，体验过CSS设置的效果但是对于网页的数据编码，网页的数据请求和响应过程以及网页表单数据交互的过程还不太了解【设计构想】

1.整体设想通过讨论得出网页中需要出现的数据，从各项数据的组织进入本课的知识点，讲解HTML标签编码通过视频标签的添加让学生掌握网页编码及数据请求与响应这部分内容学生讨论平时碰到过的网页交互方式，通过网页现有表单的分析以及文本输入框的添加让学生掌握网页表单交互的设置

2.教法学法本课采用实践体验法、讨论总结法、演示讲解法、任务探究法等教学方法情境与任务当今科技发展非常迅速，AI已经渗入我们生活的方方面面，如果现在要以网页的形式来调查收集同学们对AI了解情况的信息、，那么这张网页中需要有哪些元素？何如设计这个网页？

3.学生活动活动一连一连将数据类型和对应的标签编码进行连线；活动二在网页图片下方添加“AI宣传视频”视频；活动三在表单姓名下方添加一个用于输入班级的文本框

4.核心素养的落实本课通过体验网页标签、表单的添加，培养使用信息科技解决学习和生活的问题，即培养信息意识素养并通过讨论交流、实践练习等养成数字化学习与创新的习惯，即培养数字化学习与创新素养

5.评价设计过程性评价教师在教学过程中对学生提出的问题、操作过程、解决问题的方法和成果加以帮助和评价在交流、实践阶段，要求学生对关键步骤或结果记录在学习报告中，作为评价依据之一，然后广播展示个别典型的学生范例，组织学生相互交流和评价终结性评价相对于教师的单一评价，在终结性评价时借鉴学生自评和他评结果，会使得教师的评价更加客观、全面学生自评、互评时，需理性评价自己和同伴的学习成果及课堂表现，然后填写下表并思考有待改善或加强的方向【教学环境及资源准备】多媒体教室、网页编辑需要的多媒体文件【教学活动设计】设计意图用时（单学习过程学习任务位分钟）教师活动学生活动4引入播放一则AI宣传视频通过话题引导参与思考、讨论当今科技发展非常迅速，AI已经渗入我们学生联系日常生活的方方[Silt],如果老师打算以网页观察，引出本的形式来调查收集同学们对AI了解情况课课题的信息，那么这张网页中需要有哪些元素？（文字、图片、视频、输入框、按钮……）现在通过网页收集信息的方法很常见（展示案例），大多都有文字、图片、输入框、按钮等这些元素，输入框和按钮都属于表单的一部分今天这节课我们就要学着将这些元素组合起来制作一个“AI主题小调查”的网页6新授

一、网页的编码学习网页编码我们先打开下发的“AI主题小调查”观察一下，这个界面中有哪些元素？（图片、了解网页编码小组讨论，完成文字、表单）任务，各组展示大家知道这些内容是如何展示在一个网页通过连一连的结果，派一组上中的么？结合前几节课的学习，大家思考任务，让学生台连线一下进行自主探网页中的数据都是通过HTML标签编码组织究，加深这部在网页中的，网页编码是指用于表示和处分内容的印象理网页文本内容的字符编码方法，在通过浏览器进行解释并呈现网页的数据请刚才我们有举例网页中常见的数据类型，求与响应是本不同的数据类型都对应不同的标签编码，课的重点之接下去请同学们小组讨论，结合现有的网一，通过网页页界面来分析一下这些数据类型对应的标源文件的修签编码是什么，进行连线改，以及网页的浏览来让学生体验整个过程，^冲—加深这个知识点的记忆W■通过作业展

二、网页的数据请求与响应学习网页的数据请求与响应我们通过HTML标签编码将数据组织在网页示进行课堂检验，关注学中，那么这些数据又是如何呈现给我们，生的掌握情况，即时调整让我们看到相应的文字音频视频等内容的教学呢？这里就涉及到网页的数据请求与响应网页需要通过请求与响应以获取HTML数据，网页中如有多个媒体数据，则需要多次请求与响应，才能在网页上呈现请求与响应的流程如图大家刚才应该有注意到，老师下发的文学生打开文件观结合学生错10件中，有一个文件名为“AI宣传视频”察页面内容误点进行分的视频文件，为了在收集调查结果前，结合源代码观察析，进行重点加强能够确保每位被调查的同学都知道AI是什网页，找出图片么，我们可以在网页中插入这个宣传视频，标签接下去请同学们仿照图片标签的添加格式，在网页图片下方添加这个视频（提问

1.视频标签是？

2.标签添加语句是？）video scr=AI宣传视频”根学生思考，在源据学生完成情况进行点评，利用错误案例文件中添加视频进行分析易错点（

1.标签错误；文件

2.文件名错误；

3.文件路径）展示完成情况12

三、网页中的交互小组思考讨论学举例加深对交刚才我们体验了网页从服务器获取信息的习创建表单的步互的理解表单功能，大家有没有注意到网页上有两个文骤的创建是本课本框和一个“提交”按钮，网页中出现文的难点，通过本框和按钮在我们平时浏览网页的时候有教师讲解创建出现过么，一般用于哪些情境？（各平台过程，通过自账号密码登录、问卷调查、论坛评论等）主探究分析各这个就是网页表单，是实现用户和网页之部分代码对间信息交互的方式之一，是用户向服务器反馈信息的途径大家思考一下，网页中还有哪些交互的形式？（点击链接、按钮操作、鼠标悬停、下拉菜单、滚动交互、轮播图、弹出框和模态框、列表排序与过滤、拖放交互）展示举例个别交互形式这节课我们要体验一下表单的创建，基本步骤是

1.使用＜fonn＞标签创建表单

2.添加表单字段

3.定义表单提交操作

4.处理表单数据在HTML中，使用〈form〉标签创建表单元素，它会包裹表单中的各个字段和提交按钮在form标签中，可以设置表单的基本属性，包含表单的名称、处理程序、传送方法、编码方式等6在刚才的网页中，表单部分代码如下分析表单的各个应的内容，分forroaction=^result,htidzmetM,-get*raiing@sr^ncxype-text/plain*div部分对应的代码析作用，对后姓名，Vr〈inputtype**textnane~usemanesixe-30*brbr是什么续编写做准备你了解的AI应用有哪些，br〈inputtypp=ztextmne=contentsize=30nailength2*60*n】8=”》brbr__表单的设置是〈inputtypec*submit-nam/gubaHvalue=提交/div/£crm完成任务，作品本节课的难小组讨论，结合网页和源代码，找出创展示点，利用此任建文本输入框的代码为务对学生对于这部分的学习进行检验创建提交按钮的代码为接下来请同学们参照案例，在姓名下方添加一个用于输入班级的文本框对学生作品进行展示评价（自我评价、小组互评、教师评价）提供表单拓展内容常用单选按钮forminput type=radio“name二〃sex〃value二〃male checked〉女性brinput type=〃radio〃name=，/sexz，value=female”》男性/form2总结学生回答在本节课中你学到了什么？各项数据是如用提问的方式何组织在网页中的？表单的作用是？对本课内容进行回顾总结，检验学生掌握情况板书设计标筌,-----网页前编码HTML,—网页的数据请求与调应网页的数据编码L文本程—网页交互-----------------一二一。