课 型

新授课

授课时间

2023年12月5日

教 学

目 标

通过分析不同互联网应用中的数据组织方式，知道互联网应用中的数据是按一定规则有序组织并以适当的形式呈现的；

通过体验观察，归纳超链接的组成，分析链接源和链接目标，感受超链接对数据组织的影响；

通过实践操作，了解HTML的基本结构和标签、属性，体会HTML对网页构建的重要作用；

通过菱溪公园实例，感受常州本地文化特色，增强地域归属感。

重 点

难 点

重点：理解互联网应用中数据组织形式，掌握网站的数据结构和超链接的组成。

难点：区分不同互联网应用数据在组织方式上的异同，应用超文本标记语言的标签、属性。

教  学  过  程

教 师 活 动

学生活动

一、新课导入

屏幕上的这个界面大家一定都很熟悉，这是QQ的聊天消息列表，大家回忆一下聊天对象的呈现规律，尝试把这些内容填入到界面中。

根据我们的生活经验，QQ的消息列表中的聊天对象会按时间排列，最近发过消息的聊天对象会排在前面，而设置了置顶的对象会在最上方。

双击聊天对象，我们的聊天记录就会展现出来。不难发现，在我们和别人的聊天记录中，数据也会按时序呈现，聊天界面中最新的消息会呈现在最下方。同样的，我们平时使用的微信也是以这种规律来显示聊天对象和消息记录的，由此可见，即时通信工具的数据是以聊天对象为单位按时间顺序来组织的。

今天我们就一起来学习互联网应用中数据的组织。

二、数据的组织方式

在生活中，我们除了通过QQ、微信与他人联系，还会有什么其他方式吗？

1.即时通信工具和电子邮箱的数据呈现和组织对比

观察电子邮箱界面，它和刚刚的即时通信工具的数据组织一样吗？它们有什么相同点和不同点？

总结：电子邮箱是一种通过互联网进行信息传递和存储的工具，通过设置收件箱、发件箱、草稿箱、垃圾箱等方式分类组织邮件。

即时通信是一种实时通信技术，按聊天对象组织数据，可以实现文字、语音、视频等多种形式的信息交流，还可以通过设置备注、添加标签、组建群聊等组织联系人信息。

所以，互联网应用中的数据都会按照一定的方式和规律组织并呈现给用户，方便用户查看和检索，而且不同互联网应用的数据组织方式和结构设计也不尽相同。

2.网站的数据组织方式

那么我们平时在互联网上使用最多的网站又是如何组织数据的呢？我们一起来浏览网站的板块，分析其中数据的内在逻辑，绘制出网站结构图，并判断网站的数据组织是什么类型的。

从网站的结构图可以看出，网站的大部分数据都是分类呈现的，即使内容没有在一个页面中，也具有清晰的结构和体系。

三、数据的组织方法

1.超链接的组成

网站的内在逻辑是树形，但是我们在使用时可以根据需要在页面间切换，整体呈现给我们的是网状结构，那么这些页面之间的跳转是通过什么建立起来的呢？

（类比wps演示，引导学生说出超链接）

通过超链接，存储在不同位置的数据就可以组织到一起，实现从一个页面到另一个页面的跳转，使网页不断向外扩展，形成非线性文本，把互联网数据变成了一个巨大的超级文档体系，让我们摆脱了“文本只能线性阅读”的限制。一个完整的超链接包含两个部分：链接源和链接目标。

那么网站中常有哪些内容可以做链接源，哪些内容可以做链接目标呢？接下来大家就打开“找一找”网址中的网站，去寻找超链接。

链接源是显示链接的部分，通常是包含超链接的文字、图像等。链接目标是单击超链接后所显示的内容，可以是同一网页的不同位置，可以是一个新的网页，还可以是一份文稿、一个电子邮箱地址，甚至是一个应用程序。

2.超文本标记语言

正是有了超链接，我们才能根据自己的意愿来选择浏览不同的网页，那么超链接是如何实现的呢？背后支撑它的技术是什么？让我们一起来揭开网页的面纱，看看它背后的内容。

（查看网页源代码）

网页源代码是用超文本标记语言（HTML）编写的代码。

（播放视频）

从视频中我们可以得知，正是HTML的出现才有了如今丰富多彩的互联网生活，它描述了网页的结构，由一系列的元素组成，这些元素决定了浏览器展现哪些内容、如何展现内容。接下来同学们根据任务单上的任务来感受HTML的魅力，并通过观察比较和操作实践来总结HTML的基本组成和显著特点。

HTML文档的基本结构就像是人体结构，其中头部提供关于网页的信息，主体提供网页的具体内容，并通过使用标签来定义网页的结构和内容，然后浏览器将这些标签所代表的意义表示出来。

标签是由一对尖括号（<>）包围的关键字，可以分为单标签和双标签。一般成对出现的标签，其内容在两个标签中间，如<title>标题</title>。单独呈现的标签，则在标签属性中赋值，如 <img src="……" />，src就是必要的属性，它指向显示图像的路径地址。

在拓展提升的操作中，我们可以发现超链接的标签也是一个双标签，<a href=".\归乐园.html" target="_self">归乐园</a>，有没有同学能分析出链接源和链接目标各体现在代码的哪里？

当然，我们也可以使用一些在线网页制作工具来进行网页的设计与制作，实时渲染观察效果。

（教师演示在线代码）

目前，HTML已经发展到了第五代，也就是我们平时常常会听说的H5。第五代最大的突破是支持在移动设备上播放音视频等多媒体，具有跨平台服务功能，在后面的课程中我们会继续学习。

在信息科技突飞猛进的同时，我们也不能忽视了传统文化的保护和传承，而大运河博物馆和菱溪公园的火爆也正体现了我们对传统文化的关注度日益提高。“每一种文明都延续着一个国家和民族的精神血脉，既需要薪火相传、代代守护，更需要与时俱进、勇于创新。”作为新时代的青春力量，我们既要学习先进的科学技术，又要坚守传统文化的阵地，才能做好强国复兴的答卷。

四、课堂小结

通过思维导图带领学生回顾本节课内容。

学生观察思考，填充界面，并说出排序的理由。

学生回答，引出电子邮箱

学生根据提示完成网站结构图，判断结构

学生在网站中寻找超链接，分析链接源和链接目标

学生实践，操作演示

板 书

设 计

互联网应用中数据的组织

数据的组织方式

      树形结构   网状结构

数据的组织方法

      超链接：链接源  链接目标

      超文本标记语言