中小学教育资源及组卷应用平台
第7.1课《网页结构设计》教学设计
课题 网页结构设计 单元 第七单元 学科 信息技术 年级 七年级上
核心素养目标 1、信息意识：了解HTML的重要性，认识HTML在制作和显示网页内容中的基础作用，提升对网页技术的基本认知。2、计算思维：学会HTML标签的基本用法，理解头部和主体部分的结构，培养用逻辑和系统思维解决问题的能力。3、数字化学习与创新：能够编写简单的HTML文档，运用所学知识创造具有标题和段落的网页，激发数字化学习兴趣和创新精神。4、信息社会责任：理解HTML在网页制作中的规范性，养成遵守互联网信息发布规则的意识，尊重网上信息资源的规范和版权。
教学重点 了解HTML的基本概念认识HTML文档的组成
教学难点 熟悉HTML文档的结构理解基本的HTML标签
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 视频导入：《什么是HTML》 观看视频，了解HTML的基本概念。 培养学生的观察力和创造力，
讲授新课 一、想一想认识HTML1、什么是HTMLHTML的全称为超文本标记语言，它包括一系列的标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。2、HTML与网页的关系我们常说的网页其实就是一个HTML文档，Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示 HTML标签,而是使用标签来解释页面的内容。3、HTML文档的基本结构标准的 HTML 都具有一个基本的结构，如下！标记网页的开始标记头部的开始标记页面正文的开始标记页面正文的结束标记网页的结束3、HTML文档的基本结构由尖括号包围的关键词，如“。（5）主体部分：包含网页上实际显示的内容，例如 ，

和

。2、为什么标签是网页的基础单元？（1）结构定义：标签决定了网页的整体结构，例如标题、段落和列表。（2）内容显示：标签包围和标记内容，让浏览器知道如何显示这些内容。（3）链接资源：标签可以链接图片、视频和其他网页资源，使网页更丰富和互动。（4）语义信息：标签提供了网页内容的语义信息，使搜索引擎和辅助技术能更好地理解网页。（5）技术兼容：标签让搜索引擎和屏幕阅读器理解网页内容，从而使网页更容易被找到和访问。三、想一想认识HTML3、HTML的作用自1990年以来，HTML就一直被用作万维网的信息表示语言。使用HTML描述的文件需要通过Web浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个 HTML 文档都是静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种在排版网页中，资料显示位置的标记结构语言，简单易学。HTML的普遍应用就是因为带来了超文本的技术--通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。四、议一议1、为什么HTML被广泛使用？（1）简单易学：HTML容易学习，即使是初学者也能很快掌握。（2）广泛兼容：HTML被所有的网页浏览器支持和识别，因此可以在任何设备上显示。（3）灵活多用：HTML可以展示文字、图片、视频和声音等多种内容，非常多功能。（4）结构清晰：HTML使用标签来组织内容，使得网页结构清晰明了。（5）互联性强：使用超文本链接（如 标签），可以轻松地从一个页面跳到另一个页面，实现全球信息互联。2、学习HTML对于将来制作网页有什么好处？（1）建立基础知识：学习HTML提供了网页制作的基础知识，让你理解网页是如何构建的。（2）制作简单网页：用HTML，你可以自己制作和设计简单的网页，展示文字、图片和链接等。（3）与其他技术配合：HTML是与CSS和JavaScript等其他网页制作技术配合使用的基础，有助于你更全面地学习和掌握网页设计。（4）增强创造力：制作网页需要创意和逻辑思维，学习HTML能提高你的创造力和解决问题的能力。五、想一想认识HTML扩展阅读超文本是一种组织信息的方式，它通过超级链接的方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找、检索信息提供方便HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。六、议一议1、超文本与互联网之间有什么关系？（1）基本概念的联系：超文本在互联网上用来展示和组织各种信息。（2）信息获取的便捷性：点击超文本中的链接能快速跳转到相关信息页面。（3）网页内容的丰富性：网页用超文本语言写，可以包含图片、视频和文字内容。（4）全球信息连接：超文本让我们轻松访问世界各地的网页和网站。（5）统一协议的重要性：HTTP协议帮助浏览器和服务器正确传输超文本信息内容。2、超链接是如何提高信息获取效率的？（1）快速跳转：点击超链接，可以立即跳到相关的信息页面。（2）减少搜索时间：超链接直接带你到相关内容，减少查找时间。（3）方便导航：网站通过超链接组织内容，方便用户浏览不同主题。（4）直接访问源头：超链接可以直接链接到详细信息的来源，提供更多细节。（5）多媒体集成：超链接可以连接到图片、视频等多种形式的信息，丰富获取途径。七、想一想认识HTML4、HTML的特点超文本标记语言文档制作相对简单，但功能强大，支持嵌入不同数据格式的文件。（1）简易性：超文本标记语言有统一的结构和规定，从而更加简单易学。（2）可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求。同时超文本标记语言采取子类元素的方式，为系统扩展带来保证。（3）平台无关性：超文本标记语言可以使用在广泛的平台上。（4）通用性：HTML是网络的通用语言，一种简单、通用的标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上其他任何人浏览到，无论使用的是什么类型的电脑或浏览器。八、议一议1、你认为HTML的可扩展性会对网站开发带来哪些好处？（1）HTML的简易性：HTML的语法简单，容易理解。（2）HTML的可扩展性：通过增加新的标签和属性，HTML可以实现更多功能，如播放视频。（3）HTML的平台无关性：HTML可以在任何设备和操作系统上运行，所有浏览器都支持。（4）HTML的通用性：HTML是构建网页的基础语言，可以将文本和图片结合在一个页面中。2、为什么HTML被称为网络的通用语言？（1）浏览器支持：所有的网页浏览器都能读懂并显示HTML，从而保证任何人都能访问网页。（2）跨平台：HTML能在不同的操作系统（如Windows、Mac、Linux）和设备（如电脑、手机、平板）上正常运行。（3）内容整合：HTML允许在网页上集成文字、图片、视频和链接，提供丰富的内容展示。（4）开发兼容性：不管是初学者还是专业开发者，使用HTML都能创建功能丰富的网页。九、做一做1、请同学们根据所学内容，使用记事本，编写主题为“新年新展望”的HTML文档，要求含有文档标题，至少一个页面标题，一个正文段落，并在浏览器中观看效果。我的新年展望是xxxxxx十、知识拓展HTML的历史HTML（超文本标记语言）是我们今天浏览网页的基础，它的历史可以追溯到上世纪90年代初。1、起源：HTML由蒂姆·伯纳斯-李（Tim Berners-Lee）于1991年发明，当时的目的是为了方便科学家在全球范围内共享文档。2、HTML 1.0：1993年，HTML 1.0正式发布，提供了基本的文档结构和超链接功能，使网页的基本框架初具雏形。3、早期发展：随着互联网的快速发展，1995年发布的HTML 2.0规范增加了表格和表单的支持，进一步丰富了网页内容。4、中期进展：1997年，HTML 3.2正式发布，引入了更多的样式和脚本支持，使网页的功能和外观更加多样化和互动化。5、HTML 4.01：1999年发布的HTML 4.01规范引入了对国际化的支持，并加强了对CSS样式表的集成，推动了网页设计的分离与标准化。6、HTML5的到来：2014年，HTML5正式发布，它不仅增加了音频、视频和图形绘制（Canvas）等多媒体支持，还改进了语义化标签，提升了网页的易用性、可访问性和搜索引擎优化。HTML从最初的简单文档标记语言，经过多个版本的发展和改进，如今已经成为构建丰富多彩、功能强大的现代网页的核心技术，不断推动着互联网的进步与创新。十一、议一议1、你觉得为什么HTML会对互联网有那么大的影响？（1）基础语言：HTML是网页的基础，使得我们能看到和使用互联网。（2）简单易学：HTML的语法简单，任何人都可以学会，促进了更多人创建内容。（3）统一标准：HTML提供统一标准，确保网页在不同设备和浏览器上都能正确显示。（4）多媒体支持：HTML支持图片、音频和视频，使得网页更加丰富。（5）增强互动：HTML与CSS和JavaScript合作，增加网页互动和动态。（6）全球共享：HTML使人们能够在全球范围内轻松共享和访问信息。2、如果没有HTML，你觉得我们今天的上网体验会是怎样的？（1）网页混乱：没有HTML，网页可能会没有统一的结构和格式，显得混乱且难以阅读。（2）难以创建：网页制作会变得复杂，普通人很难自己创建网页。（3）缺乏多媒体：网页可能无法显示图片、音频和视频，只能看到简单的文本内容。（4）少互动：网页会缺少表单和按钮等互动元素，使用体验变差。（5）全球共享难：没有一个统一标准，信息共享变得很困难。 学生打开并阅读一个简单的HTML文档，从中识别并记录常见的HTML标签和它们的用途。学生在文本编辑器中编写一个包含基本结构的HTML文档，使用标准的HTML标签如, ,
标记页面正文的开始
标记页面正文的结束
标记网页的结束
新知讲解
想一想
认识HTML
3、HTML文档的基本结构
由尖括号包围的关键词，如“。
（5）主体部分：包含网页上实际显示的内容，例如 ，

和

。
新知讲解
议一议
2、为什么标签是网页的基础单元？
（1）结构定义：标签决定了网页的整体结构，例如标题、段落和列表。
（2）内容显示：标签包围和标记内容，让浏览器知道如何显示这些内容。
（3）链接资源：标签可以链接图片、视频和其他网页资源，使网页更丰富和互动。
（4）语义信息：标签提供了网页内容的语义信息，使搜索引擎和辅助技术能更好地理解网页。
（5）技术兼容：标签让搜索引擎和屏幕阅读器理解网页内容，从而使网页更容易被找到和访问。
新知讲解
想一想
认识HTML
3、HTML的作用
自1990年以来，HTML就一直被用作万维网的信息表示语言。使用HTML描述的文件需要通过Web浏览器显示出效果。
新知讲解
想一想
认识HTML
3、HTML的作用
HTML是一种建立网页文件的语言，通过标记式的指令，将影像、声音、图片、文字动画、影视等内容显示出来。
新知讲解
想一想
认识HTML
3、HTML的作用
事实上，每一个HTML文档都是静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种在排版网页中，资料显示位置的标记结构语言，简单易学。
新知讲解
想一想
认识HTML
3、HTML的作用
HTML的普遍应用就是因为带来了超文本的技术--通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接。超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。
新知讲解
议一议
1、为什么HTML被广泛使用？
（1）简单易学：HTML容易学习，即使是初学者也能很快掌握。
（2）广泛兼容：HTML被所有的网页浏览器支持和识别，因此可以在任何设备上显示。
（3）灵活多用：HTML可以展示文字、图片、视频和声音等多种内容，非常多功能。
（4）结构清晰：HTML使用标签来组织内容，使得网页结构清晰明了。
（5）互联性强：使用超文本链接（如 标签），可以轻松地从一个页面跳到另一个页面，实现全球信息互联。
新知讲解
议一议
2、学习HTML对于将来制作网页有什么好处？
（1）建立基础知识：学习HTML提供了网页制作的基础知识，让你理解网页是如何构建的。
（2）制作简单网页：用HTML，你可以自己制作和设计简单的网页，展示文字、图片和链接等。
（3）与其他技术配合：HTML是与CSS和JavaScript等其他网页制作技术配合使用的基础，有助于你更全面地学习和掌握网页设计。
（4）增强创造力：制作网页需要创意和逻辑思维，学习HTML能提高你的创造力和解决问题的能力。
新知讲解
想一想
认识HTML
扩展阅读
超文本是一种组织信息的方式，它通过超级链接的方法将文本中的文字、图表与其他信息媒体相关联。
新知讲解
想一想
认识HTML
扩展阅读
这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。
新知讲解
想一想
认识HTML
扩展阅读
这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找、检索信息提供方便HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。
新知讲解
议一议
1、超文本与互联网之间有什么关系？
（1）基本概念的联系：超文本在互联网上用来展示和组织各种信息。
（2）信息获取的便捷性：点击超文本中的链接能快速跳转到相关信息页面。
（3）网页内容的丰富性：网页用超文本语言写，可以包含图片、视频和文字内容。
（4）全球信息连接：超文本让我们轻松访问世界各地的网页和网站。
（5）统一协议的重要性：HTTP协议帮助浏览器和服务器正确传输超文本信息内容。
新知讲解
议一议
2、超链接是如何提高信息获取效率的？
（1）快速跳转：点击超链接，可以立即跳到相关的信息页面。
（2）减少搜索时间：超链接直接带你到相关内容，减少查找时间。
（3）方便导航：网站通过超链接组织内容，方便用户浏览不同主题。
（4）直接访问源头：超链接可以直接链接到详细信息的来源，提供更多细节。
（5）多媒体集成：超链接可以连接到图片、视频等多种形式的信息，丰富获取途径。
新知讲解
想一想
认识HTML
4、HTML的特点
超文本标记语言文档制作相对简单，但功能强大，支持嵌入不同数据格式的文件。
新知讲解
想一想
认识HTML
4、HTML的特点
（1）简易性：超文本标记语言有统一的结构和规定，从而更加简单易学。
新知讲解
想一想
认识HTML
4、HTML的特点
（2）可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求。同时超文本标记语言采取子类元素的方式，为系统扩展带来保证。
特殊符号 字符实体 示例
空格   百度   新浪
大于号(>) > 如果时间>晚上6点，就坐车回家
小于号(<) < 如果时间<早上7点，就走路去上学
引号("') " W3C规范中，HTML的属性值必须用成对的"引起来
版权符号@ © © 2006-2024深圳市二一教育科技有限责任公司
新知讲解
想一想
认识HTML
4、HTML的特点
（3）平台无关性：超文本标记语言可以使用在广泛的平台上。
新知讲解
想一想
认识HTML
4、HTML的特点
（4）通用性：HTML是网络的通用语言，一种简单、通用的标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上其他任何人浏览到，无论使用的是什么类型的电脑或浏览器。
新知讲解
议一议
1、你认为HTML的可扩展性会对网站开发带来哪些好处？
（1）HTML的简易性：HTML的语法简单，容易理解。
（2）HTML的可扩展性：通过增加新的标签和属性，HTML可以实现更多功能，如播放视频。
（3）HTML的平台无关性：HTML可以在任何设备和操作系统上运行，所有浏览器都支持。
（4）HTML的通用性：HTML是构建网页的基础语言，可以将文本和图片结合在一个页面中。
新知讲解
议一议
2、为什么HTML被称为网络的通用语言？
（1）浏览器支持：所有的网页浏览器都能读懂并显示HTML，从而保证任何人都能访问网页。
（2）跨平台：HTML能在不同的操作系统（如Windows、Mac、Linux）和设备（如电脑、手机、平板）上正常运行。
（3）内容整合：HTML允许在网页上集成文字、图片、视频和链接，提供丰富的内容展示。
（4）开发兼容性：不管是初学者还是专业开发者，使用HTML都能创建功能丰富的网页。
新知讲解
做一做
1、请同学们根据所学内容，使用记事本，编写主题为“新年新展望”的HTML文档，要求含有文档标题，至少一个页面标题，一个正文段落，并在浏览器中观看效果。


。
主体部分： 包含网页上实际显示的内容，例如 标签及其内容。
45
https://www.21cnjy.com/help/help_extract.php
让备课更有效
www.21cnjy.com
Thanks!