资源简介

项目2 选择网页传播地方文化
——互联网数据呈现
教学设计
一、内容分析
在互联网中，网页是最基础的一种应用，网页承载了丰富的信息，是人们获取有价值的数据的重要来源之一。网页的使用者在浏览网站时可以欣赏到组织有序且包含着丰富的文本、图像、音频、视频等的网页内容。这些具有丰富内容的网页，都是通过 HTML 语言来设计、组织的。本课是第 3 单元的第 2 课，本课内容基于数字素养与技能培育要求，遴选网页的数据组织内容，从信息科技实践应用出发，注重帮助学生理解“HTML 语言”“HTML 标签”“超链接 ”等网页组成的基本概念和基本原理，提升学生从应用网页到构建网页的知识迁移能力和学科思
维水平。依据安徽版初中信息科技教学指南内容，本课中“科”与“技”的具体内容分析如下。
类别 本课内容分析
科学原理 认识网页的数据组织的“HTML 语言”“HTML 标签”“超链接”等基础原理
实践应用 选择网页传播徽文化，以宣传“徽风古韵” 为大单元项目，规划网页结构呈现徽文化
二、学情分析
本课教学对象是七年级学生，在小学阶段学生通过在线学习与生活模块的学习， 已体验过在解决问题的过程中在线社会对学习与生活的影响，学生初步具备借助合适的数字化学习平台或工具解决问题的能力。因此从网页使用者角度看，学生已具有浏览各类网站内容的经验，对不同形式的网页中如何呈现文本、图像、音频和视频等内容比较熟悉。但从网页内容的提供者角度出发，网页是如何对数据进行组织的，是学生新的学习领域。
传统信息技术教学的重点是让学生从“徽风古韵”项目的需求角度出发，通过学习了解已有的徽文化网页内容，重构制作“徽风古韵”徽文化网页。因此学生可能将重点放在对徽文化网页具体内容的规划之上，从而淡化网页的数据组织的“HTML 语言”“HTML 标签”“超链接”等基础原理。而信息科技学科的教学是引导学生从网页的使用者转向网页的提供者，理解万物互联的途径、原理和意义。组织课堂教学内容，体现循序渐进和螺旋式发展。因此本课教学要明显区别于以往的常规信息技术教学，立足于引领学生认识“互联网数据呈现”这一核心素养点。
三、实验规划
本课教学采用信息科技学科的验证性实验方式组织教学。为有效组织学生开展实验学习，本课规划采用3组实验，逐步引导学生从网页的使用者切换到网页的制作者角度，通过观察和探究验证网页代码，认识 HTML 语言，了解 HTML 文档的基本结构，能使用记事本修改 HTML网页代码，验证网页代码的功能；通过修改网页代码中网址的实践，能理解超链接的作用。3 组实验的规划思路如下表所示。
序号 实验名称 实验规划思路
实验一 感受 HTML 语言 借助学生熟悉的浏览器，认识到网页中文字、图片等数据内容呈现是由编码构成的。通过对比查看网页呈现方式感受 HTML 语言。
实验二 认识网页代码结构 使用记事本软件工具，让学生动手尝试修改网页中的文字内容、图片位置，验证性理解 HTML 网页代码的结构以及网页代码的功能。
实验三 体验超链接作用 引导学生使用记事本软件修改网页中与文字链接有关的超链接网址，让学生通过验证实验理解超链接的代码，进而理解超文本链接实现文档互联。
四、目标与重难点
1 ．实验教学目标
（1）通过实验了解浏览器具有解释网页 HTML 代码功能。
（2）通过实验了解网页的基本结构与常规代码的作用。
（3）通过实验了解网页超链接的代码与作用。
2 ．实验教学重点
（1）认识到网页的数据组织方式。
（2）通过记事本修改网页中文字、图片等内容，从而验证代码的功能。
3 ．实验教学难点
了解 HTML 代码的基本结构。
五、实验教学策略
信息科技实验是一种重要的科学实践活动。本课实验教学属于一级主题“互联网应用与创新”下的二级主题“互联网基本原理和功能”中的基本实验活动“3.互联网应用中各种数据的组织”。义务教育信息科技基本实验目录涵盖了验证性实验、探究性实验、设计性（创新应用性）实验和虚拟仿真实验等实验类型。每种实验类型都有着不同的目的和特点，可以满足学生在信息科技学科中的不同学习需求。
本课采用的是验证性实验，信息科技验证性实验的流程包括实验准备、实验执行、数据收集和分析、撰写实验报告和评价反馈五个主要步骤。这一流程旨在确保学生能够通过实验活动深化对信息科技的理解和提升应用能力，同时提升他们的实践动手能力和培养科学精神。验证性实验是信息科技最常见的实验教学类型之一，其目的是通过实践验证或证明特定的现象或理论，如学生可以通过修改 HTML 文档实验来验证 HTML 基本代码的功能和正确性。这种实验教学方法可以帮助学生巩固和应用所学的 HTML 网页组织的理论知识，培养学生的实践动手能力。
六、实验教学准备
为提高实验教学效率，如下表所示，准备了实验相关的微课、学习支架和数字化学习资源。
序号 主要类型 实验准备内容
1 实验手册 3 个实验的情景、实验要求、实验过程、实验结论
2 微课资源 HTML 语言、认识 HTML 标签、网页超链接
3 软件工具 提供记事本软件工具、能够查看网页代码的浏览器
4 学习资源 “HTML 语言”“HTML 标签”“超链接”概念的知识链接
七、评价建议
本设计提供的是基于 3 个验证性实验的学生表现性评价的全部内容。在实际应用中，教师可以根据学生的响应和实验结果的反馈对评价量表进行调整。以下分别对应 3 个实验的表现性评价量表的设计， 旨在全面衡量学生在本课信息科技实验中的学习表现，而不是通用性的实验评价建议，所以提供的评价指标较为全面。在实际教学中，可以根据学生情况进行修改与优化，本评价只是建议，并不是要求在教学中全部呈现所有的内容。
1. “ 感受 HTML 语言”实验评价
评价指标 表现性评价描述 自评
实践操作技能 学生能够借助浏览器查看网页的代码 ☆☆☆
理论知识掌握 学生通过学习教师提供的微课了解 HTML 是什么，有什么作用，并能用自己的语言进行描述。 ☆☆☆
创新与问题解决能力 学生通过互联网了解关于 HTML 语言的更多信息 ☆☆☆
团队合作与交流 同学互助了解不同的浏览器查看网页代码的方法 ☆☆☆
2. “ 认识网页代码结构 ”实验评价
评价指标 表现性评价描述 自评
HTML 基础知识掌握 学生能够认识 HTML 的基本标签及其功能，并正确识别和记忆 HTML 基本标签。 ☆☆☆
实践操作技能 学生能熟练地使用记事本软件打开网页源代码，并能成功修改文字内容和调整图片位置。 ☆☆☆
代码理解与调试能力 在修改网页代码过程中，学生能根据页面显示结果调试代码，解决基础性的代码错误问题。 ☆☆☆
网页内容设计能力 学生能合理布局徽文化“ 徽风古韵” 网页元素，体现出对网页设计基础原则的理解和应用。 ☆☆☆
3. “ 体验超链接作用 ”实验评价
评价指标 表现性评价描述 自评
实践操作技能 学生能熟练地使用记事本软件修改网页中文字链接的超链接地址，并确保链接可以正确跳转。 ☆☆☆
代码理解与调试能力 在修改超链接过程中，学生能根据链接效果调试代码，解决如死链接、错误跳转等问题。 ☆☆☆
网络资源整合能力 学生能通过创建超链接有效地组织和利用网络资源，展示对网络信息互联的理解。 ☆☆☆
团队合作与交流 学生能合理分工规划徽文化 “ 徽风古韵” 组成结构，通过制作不同网页，用超链接组合起来，理解互联网众筹。 ☆☆☆
八、学习流程
互联网数据是互联网创新应用的基础，随着互联网应用的日益普及，产生了更多的互联网数据。在此之前，学生已体验了互联网基础应用，为引导学生从互联网应用体验到对互联网数据本质的认识，依据安徽版教学指南指引，围绕宣传“徽文化”的项目明线，结合 “互联网数据呈现”素养目标暗线，以探究实验为抓手，围绕问题链开展学习。
九、教学过程
教学 环节 学生活动 教师活动 设计意图
创设情境明确目标 1．观看微课，思考问题 微课内容：浏览网站时，人们能欣赏到组织有序且包含着丰富的文本、图像、音频、视频等内容的网页，这些都是通过 HTML 语言来设计、组织的。网页设计常用的编程语言主要是 HTML 、CSS 、JavaScript 、JAVA 、PHP 、 PYTHON、SQL、C/C++语言等。本课主要学习 HTML语言，用来组织网页的结构和内容。 思考问题：你知道编写网页的语言吗？ 交流观点：网页编写是从互联网优质数据资源提供者的角度出发，这是初中学生区别小学阶段对网络模块学习与理解的关键。 2． 出示问题链，明确目标 问题链：你知道编写网页的语言吗？你知道什么是HTML语言吗？HTML 文件的基本结构是什么？超链接是什么？有何作用？ 学习目标：通过 3 组实验了解上述问题。 提前制作微课，以互联网资源提供者的视角，认识编写网页的语言，引导学生从互联网网页的应用者的角度转变为从互联网网页的提供者角度思考问题，培养学生了解互联网数据组织与呈现的学习意识。 引导学生从互联网网页提供者的视角看待数据组织，直指互联网数据组织与呈现，力求让学生能够对互联网背后的运行原理形成进一步认识。 应用微课快速切入情境， 以问题为导向 ，激发学生从应用与体验互联网转向探究与寻找互联网背后的原理。 以问 题 链方式出示问题，让学 生能 根 据问 题进 行思考，通过后续3 个实验从而解决问题，达 成学 习目标。
实验一： 感受HTML语言 1．实验情景 互联网中传播徽文化的方式有很多，其中网页就是最简单最实用的一种传播方式。无论哪种传播方式，所传播的互联网数据都是按一定方式进行数据组织与呈现的。本实验就是以网页为载体，使学生感受互联网数据的组织与呈现。 2．实验要求 【实验目的】感受浏览器呈现网页代码 【实验准备】微课、计算机、实验手册 【实验器材】浏览器软件、提供的网页网址 提出问题：你知道什么 是 HTML 语言吗？ HTML （ hypertext mark language）即超文本标记语言，定义网页的结构和内容。 通过实验手册引导学生打开一个自己熟悉的网站，使用浏览器的“开发人员工具 ”查看，对比观察网页显示内容和对应的HTML 代码。 在实验过程
实验一： 感受HTML语言 3．实验过程 步骤 1：选择计算机设备，安装浏览器（以某浏览器为例）。 记录：你选择的浏览器是 。 步骤 2：运行浏览器，选择打开一个徽文化介绍网页。运行浏览器更多工具中的“开发人员工具”。 记录：你能否看到对应网页的代码？□能看到□看不到。步骤 3：复制一段代码，如网页中出现的“文字”代码，通过搜索，了解这段代码的作用。 记录：你选择的代码是：□文字□图片□视频，通过搜索，你认为这段代码的关键语句是 。 4．实验结论 用 HTML 编写的超文本文件称为 HTML 文件，HTML 文件一般通过 解释执行。在使用浏览器访问网页时，浏览器读取并分析 HTML 文件中的 ，根据 的结果呈现网页内容。 用 HTML 编写的超文本文件称为HTML文件，HTML 文件一般通过浏览器解释执行。 查看网页中的代码。 展示使用浏览器更多工具中的“开发人员工具”。 提供微课与实验手册，帮助不熟练的学生进行辅助教学。 通过实验结论，帮助学生在经历实验操作之后，梳理实验的收获。 中，让学生体验，使用浏览器访问网页时，浏览器读取并分析文件中的代码，根据解释的结果呈现网页内容。这样就能很好地帮助学生理解网页的使用者与提供者不同的角色定位以及网页数据有序组织呈现背后的原理。
实验 二： 认识网页代码结构 1．实验情景 HTML 文档可以用标签规定元素的属性及其在文档中的位置。一个 HTML 文档一般包含多个标签，HTML标签由“<”和“> ”符号包围的字符串组成，通常以成对的标签出现。本实验就是使用记事本通过修改提供的网页代码，以验证的方式理解网页 HTML 代码的作用。 2．实验要求 【实验目的】通过验证性实验，认识网页代码结构【实验准备】计算机、实验手册 【实验器材】教师提供“徽文化文字代码”“徽文化图片代码”两种半成品 HTML 文档文件。 3．实验过程 步骤 1：使用浏览器打开“徽文化文字代码”，了解网页的内容。 记录：该网页的数据呈现方式是： □文本□数据□图片步骤 2：选择记事本打开“徽文化文字代码”， 对比了解网页的内容。 #标记网页的开始# #标记网页头部开始# #显示网页标题# #标记网页头部结束# #标记网页正文开始# #网页正文内容# 让学生快速了解HTML 文档是什么，为验证性实验做好实验准备。 引导学生明确实验目标、实验注意事项。 使用类比记忆法： 将 head、body 等学生熟悉的英语单词与人体部位进行类比。将head 标签比作人的头部，将 body 标签比作人的身体。将 title 标签比作人的额头。 让学生先了解网页结构，再试着修改代码，最后查看网页效果。 通过设计实验活动，让学生对代码进行理解。 将复杂的问题进行简化处理，通过设计有针对性的验证性实验，让学生在实验过程中认识网页代码结构。 认识 HTML 文件的基本结构，使用类比的方式。 提供对应的“ 徽文化文字代码”“ 徽文
教学 环节 学生活动 教师活动 设计意图
实验 二： 认识网页代码结构 #标记网页正文结束# #标记网页的结束# 记录：该网页数据组成结构是□代码成对出现□有开始就有结束□所有 HTML 标签是由“<”和“> ”符号包围的字符串。 步骤 3：使用以下标签修改“徽文化文字代码”“徽文化图片代码”2 种半成品 HTML 文档。 验证实验（1）：试着修改网页中文字的大小、文字的字体、文字的字体颜色。 验证实验（2）：试着修改网页中图片的大小、更换图片。 记录：你修改的方法是 。 4．实验结论 HTML，即超文本标记语言，定义了网页内容的 和 。 教师出示修改技巧： 居中对齐：

。 网页背景色：。 字 体 格 式 ： 文字。 化图片代码 ”两种半成品HTML 文档。 让学生在修改代码的过程中 ， 验 证HTML 标签的作用与功能，从而进一步理解网页的编码与呈现。
实验三： 体验超链接作用 1．实验情景 超文本链接简称为超链接，可以实现从一个页面跳转到另一个页面或者跳转到页面的其他位置，实现文档互联、网站互联。本实验学习验证超链接代码的作用。 2．实验要求 【实验目的】验证超链接代码的作用 【实验准备】计算机、实验手册 【实验器材】准备“徽文化超链接”网页文档 3．实验过程 步骤 1： 了解超链接的标签 建立超链接的标签为, href 属性的作用是设置链接的位置，是标签必不可少的。 步骤 2：修改超链接代码 链接元素 记录： 。 步骤 3：分工规划徽文化网页的内容。 我选择的徽文化结构的主题是：□宣纸徽墨□徽派建筑□徽州名菜□其他 我选择的徽文化网页结构的内容是： 记录： 。 4．实验结论 超链接是网页中不可或缺的元素，它让用户能够通过单击 在互联网的不同页面之间 。在 HTML 文档中，链接元素可以是 、 等。 教师介绍超链接标签定义：在 HTML 中， 标签用于创建超链接。这个标签允许用户从一个网页跳转到另一个网页，或者网页内部的另一个部分，还可以是电子邮件地址或者其他资源。 教师介绍超链接语法结构：一个基本的超链接代码可以写成链接文字，其中 url 是目标资源的地址，而“链接文字”则是用户可见并可点击的文本。 超链接的标签：用于创建超链接的HTML标签是 ，它通常被称为“锚”标签。 本实验让学生通过验证，了解超链接代码在网页中的作用。 体验超链接作用的实验，是让学生修改网页代码，并使用浏览器测试超链接能链接哪些内容。一般分 3 类链接：一是链接到其他网站；二是链接到邮件地址；三是页面内跳转。 了解功能还要会结合项目，了解网络众筹概念，就可以将多个网页链接在一起。
教学 环节 学生活动 教师活动 设计意图
总结反思拓展提升 1．总结反思 （1）师生共同总结本节课所学内容，通过3 组实验感受到 HTML 代码可以 网页中的 。 （2）一个 HTML 文档中，用来表示网页名称的标签是 和 ，表示网页主体内容的标签是 和 。 （3）完成评价量表的填写。 2．拓展提升 （1）基础性作业（必做）：查看自己感兴趣网页的代码。试着在线修改这个网页代码，能否成功？为什么？ （2）扩展性作业（可选）：使用记事本软件，应用 HTML语言编写一个古诗网页。 教师组织学生归纳实验记录，得出实验收获。 让学生用自己的语言表达 HTML 语言是如何组织与呈现网页内容的。 提供有针对性的扩展性作业，让学生根据自己的情况进行选择性使用。 学生需要归纳实验报告结论，包括实验过程、遇到的问题、解决方案和个人反思。 反馈与建议：教师根据学生的作业提供个性化反馈，指出优点和改进的地方。
十、板书设计
十一、教学反思
实验教学是培养创新人才的重要途径。《义务教育课程方案和课程标准（2022 年版）》明确提出要“突出学科思想方法和探究方式的学习，加强知行合一、学思结合，倡导‘做中学’‘用中学 ’‘创中学’”，《信息科技课程标准（2022 年版）》中更是提出了“要注重把握数字化学习的特点，合理利用数字化平台、工具和资源，运用线上实验、模拟仿真等方式，引导学生自主学习、合作学习”，对于实验教学给出具体而可行的指导。因此，本课教学设计围绕信息科技实验教学进行。
我认为实验教学具有以下特点：一是可以提升学生的实验能力和动手能力；二是可以激发学生的创新思维和创造力；三是有助于培养学生的问题解决能力； 四是能体现信息科技课程的育人价值。在本课教学中，我采用的是验证性实验，验证性实验是信息科技最常见的实验教学类型之一，其目的是通过实践验证或证明特定的现象或理论，如学生可以通过修改 HTML 文档来验证 HTML 基本代码的功能和正确性。这种实验教学方法可以帮助学生巩固和应用所学的HTML 网页组织的理论知识，培养学生的实践动手能力。

展开更多......

收起↑