《网页的数据组织》教学设计
一、学习内容分析
《网页的数据组织》是浙江教育出版社《信息科技》八年级上册第二单元第7课。教学内容包括认识HTML语言，HTML文档的基本结构及编辑HTML网页代码。
本课对应新课标中的《互联网应用与创新》模块中的“互联网基本原理与功能”部分，是在前一课学生了解常用互联网应用中的数据构成及数据传输的原理之后，进一步学习HTML语言，选择适当的数字化工具对网页中的数据进行组织，为后续网页的编辑和发布做好知识铺垫。
二、学情分析
本课的学习对象是八年级学生，该年段的学生在日常学习与生活中已经能够熟练使用各种浏览器查看网页，对于网页的编辑有着浓厚的学习兴趣。但是对于网页背后的数据组织原理还没有深入的认识，需要教师进一步进行引导学习。同时，该年段的学生已经具备使用数字化资源进行自主学习和探究的能力，为本课的学习提供有效的保障。
学习目标
教学目标 核心素养指向
1.通过观察和探究网页代码，认识HTML语言，掌握HTML文档的基本结构，能初步编辑 HTML网页代码。 2.在浏览网页的过程中，能理解超链接的作用，并掌握超链接标签的书写格式。 3.在完成《人工智能》网站首页的过程中，进一步掌握常用标签的使用。 【计算思维】通过对制作网站首页任务的问题拆解、分析，培养学生的信息意识和计算思维。 【数字化学习与创新】通过对导学单等学习支架的自主学习，提升学生的数字化学习能力。
四、教学重难点
教学重点：HTML文档的基本结构、超链接标签的使用。
教学难点：超链接标签的使用。
五、课前准备
学习资源：学习单、资源包（图片、半成品网页文档、颜色图）
设计思路
问题链：
1.这么多不同类型的数据，我们如何将他们组织成网页呢？
2.国家博物馆首页的代码是用什么语言编写的？
3.HTML标签的作用是什么？
4.什么是超链接？它的作用是什么？
5.一组超链接里包含什么？链接元素可以是哪些类型的数据呢？
6.作品中还有哪些需要完善的？
七、学习过程
（一）复习回顾，引出主题
教学内容与活动 设计意图
本单元项目前期准备结果展示，本课项目任务布置。展示同学们网页设计稿和相应资料。 提问：这么多不同类型的数据，我们如何将他们组织成网页呢？ 通过展示前期做好的准备工作，从而引出本课的项目子任务是要完成网站首页的制作，引出课题。
（二）探究学习，动手实践
教学内容与活动 设计意图
1.活动一： 完成学案中的猜一猜和验一验活动。 了解HTML语言和初步认识HTML标签。 通过对比HTML代码和生成的网页效果图，了解HTML文档的基本结构。 通过修改网页HTML代码，掌握HTML文档的基本结构及书写要求。 观看视频，师生小结HTML基本结构。 2.活动二： 根据学案和半成品文档完成“人工智能”主题网站的首页。 通过对上环节完成的网页观察分析，总结出页面需要优化的几点，通过自主学习导学单和课本内容，完成对页面内容的页面背景修改和图片添加。 教师小结典型问题。 观察范例网站中数据间的关联实现，总结出超链接的作用。 根据两组超链接的示意图，说出超链接的组成要素：链接元素、链接位置；并且说出链接元素的类型。 动手实践，建立超链接。 反馈交流：小结主要问题。 通过展示“国家博物馆网页”和学生熟悉的“百度”首页的源代码，让学生明白HTML语言是的编写网页的基础，以及浏览器是对HTML代码的解释执行最终呈现网页内容。通过学生对代码的观察，初步了解标签是组成HTML文档的基本要素。以图解的形式加强学生对网页的构成以及HTML文档的基本构成的学习。让学生在观察中发现、总结，培养学生的信息素养。 通过对范例网站中不同类型数据的超链接实现，帮助学生理解超链接的相关知识，并且通过教师对比超链接两个要素，讲解超链接标签的格式书写，让学生清晰理解超链接标签的使用。在学生掌握了超链接知识之后，通过完成项目任务进一步落实学生的技能目标，学生对项目任务的拆解分析、动手实践从而落实学生的核心素养。
（三）课堂小结，知识延伸
教学内容与活动 设计意图
课堂小结与作品展示 展示作品并对作品进行自评互评，对本课所学知识进行总结。引导学生进行作品点评、课堂总结。 对本课知识进行总结，将所学的知识进行内化。同时提出作品还需要完善的地方，为后续作品的更新迭代做铺垫。(共11张PPT)
第7课 网页的数据组织/
八上信息技术
数据组成
互联网中的数据构成：
文本
图像
音频
视频
......
中国国家博物馆官网
超文本标记语言
（HTML）
设计、组织
HTML语言
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
HTML语言
活动一：完成学案中的猜一猜和验一验活动。
HTML标签
HTML用标签来规定元素的属性和其在文件中的位置，一个HTML文件一般包含多个标签，HTML标签由“<”和“>”符号包围的字符串而组成， 通常以成对标签出现。
HTML语言
HTML标签





文字、图片、超链接


网页
头部
正文
HTML标签
HTML标签
活动二：根据学案和半成品文档完成“人工智能”主题网站的首页。
超链接
超文本链接(Hypertext Link)简称为超链接，可以实现从一个页面跳转到另一个页面或者跳转到页面的其他位置，实现文档互联、网站互联。
课堂小结





文字、图片、超链接


网页
头部
正文八年级（上）第二单元互联网数据
网页的数据组织
【活动一】猜一猜
在浏览网站时，我们能欣赏到组织有序且内容丰富的网页（例如：图1），请你猜一猜图1中①②对应的代码，并在图2中标注。
图1 图2
【活动一】试一试
打开图1网站https://www./zp/zpml/201812/t20181218_28592.shtml，使用浏览器（以Google Chrome浏览器为例）的“开发者工具”（图2）查看HTML代码，并利用“审查元素”（图3）功能查看是否猜对。
图2 图3
【活动二】
根据小组“人工智能”主题网站的制作方案，用HTML语言编写网页首页的代码，
1.修改背景颜色。2.尝试插入资料库主题图片3.增加超链接。
一、编辑与调试
①打开半成品文本文档 ②在文档中编写html代码 ③修改后缀名为html（以win10为例，图4） ④运行调试
图4
二、标签知识库：
标题标签：

标题

图片标签：
网页背景色：
字体格式： 文字
超链接 链接元素
【扩展阅读】
超链接
超链接可以链接到其他网页、同一页面的其他部分、各种文件和资源，甚至可以触发设备上的电子邮件客户端或电话拨号应用程序。
1. 其他网页：超链接最常见的用途是链接到其他网页。可以使用绝对URL（完整的网址，包括协议和域名）或相对URL（相对于当前页面的路径）来指定目标网页的位置。例如：
< a href=" ">访问示例网站
< a href="page2.html">跳转到第二个页面
2. 同一页面的其他部分：超链接也可以用于在同一页面中创建内部导航。可以通过在目标元素上添加“id”属性，并在超链接的“href”属性中使用锚点（以“#”开头）来实现。例如：（点击 "跳转到第二部分" 的链接将会滚动页面并定位到带有id="section2"的元素。）
< a href="#section2">跳转到第二部分
...

第二部分

3. 文件和资源：超链接还可以链接到各种文件和资源，例如图像、音频、视频、PDF文件等。只需将文件的路径或URL指定为超链接的“href”属性。例如：
< a href="images/picture.jpg">查看图片
< a href="documents/document.pdf">打开PDF文档
4. 电子邮件：使用特殊的“mailto:”链接，点击后将会打开默认的邮件客户端的新电子邮件撰写窗口。例如：（点击 "发送电子邮件" 的链接将会启动用户设备上的邮件客户端，并自动填充收件人为 "info@"。）
< a href="mailto:info@">发送电子邮件
5. 电话号码：使用特殊的“tel:”链接，可以创建一个超链接，点击后将会启动用户设备上的电话拨号应用程序。例如：（点击 "拨打电话" 的链接将会触发设备上的电话应用程序，并将号码设置为 "+123456789"。）
< a href="tel:+123456789">拨打电话