资源简介 中小学教育资源及组卷应用平台第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文档的基本结构由尖括号包围的关键词，如“”称为HTML标签，通常成对出现，分为开始标签和结束标签。由标签和标签间的内容合成网页文件，网页文件一般用 .htm 或 .html 扩展名命名。浏览器对网页文件进行解析，将网页内容呈现给用户，如图所示，左为浏览器解析的内容，右为运行结果。HTML5HTML5 是公认的下一代 Web语言，它极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。二、议一议1、一个完整的HTML文档包括哪些基本部分？（1）文档类型声明：告诉浏览器这是一个HTML5文档，例如 <!DOCTYPE html>。（2）HTML标记：标记网页的开始和结束，例如 <html> 和 </html>。（3）头部部分：包含不显示在页面上的信息，例如 <head>，<title>。（4）标题部分：设置网页的标题，显示在浏览器标签页上，例如 <title>我的网页。（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标签如, , , <body>等，并在浏览器中查看实际显示效果。学生删除HTML文档中的头部部分、标题部分等，观察浏览器显示的变化和网页的不同，讨论头部信息对网页的重要性。学生阅读一个简单的HTML文档，识别其中使用的各种标签，并讨论每个标签在定义网页结构中的作用。例如，分析标题标签<h1>、段落标签<p>和列表标签<ul>, <li>。学生编写一个简单的静态HTML文档，包含基本指令代码，然后在浏览器中查看页面显示效果，并分析HTML作为静态网页文件的特性。学生分组讨论为什么HTML被广泛使用，从简单易学、广泛兼容、灵活多用、结构清晰和互联性强五个方面分别进行分析，并总结讨论结果。各组学生分享他们使用HTML制作简单网页的经验，讨论过程中遇到的问题和解决方法。学生分组讨论超文本链接如何加快信息查找过程，并总结讨论结果与全班分享。学生分组讨论超文本如何在互联网上用于展示和组织各种信息，然后各组分别总结讨论结果与全班分享。学生在预先设置好的网页中使用超链接直接跳转到目标内容，并记录完成任务所用的时间与简单搜索对比。学生分组讨论HTML在全球互联网上作为通用标记语言的应用场景，举例说明其对全球信息交流的影响，并分享讨论结果。学生编写一个简单的HTML页面，分别在电脑、平板和手机等设备上进行测试，记录和分享各平台显示效果的一致性。学生分组讨论HTML如何帮助初学者和专业开发者创建功能丰富的网页，并总结讨论结果分享给全班。学生使用记事本编写一个主题为“新年新展望”的HTML文档，要求文档包含标题、页面标题和正文段落，并在浏览器中查看效果。学生使用表格制作一个HTML历史的时间轴，展示从HTML的起源到HTML5的关键发展节点，并通过页面展示。学生编写一个包含标题、段落和图片的简单HTML页面，展示和分享自己的页面，并讨论HTML的易学性对互联网发展的影响。学生在记事本中编写一段没有HTML标签的纯文本内容，并在浏览器中查看效果，与具有HTML结构的网页进行对比，讨论体验差异。 让学生通过实际的HTML文档初步学习HTML的基本标签，培养他们的观察力和基础知识掌握能力。通过编写和解析基本HTML文档，学生能够熟悉并掌握HTML文档的基本结构和关键标签，培养他们的基础编程能力和逻辑思维能力。通过实验和讨论，帮助学生理解头部信息和标题部分在HTML文档中的重要性，以及它们对网页显示和浏览器行为的影响，培养学生的问题解决能力和思考能力。通过分析标签在HTML文档中的作用，帮助学生理解标签如何决定网页的结构，并培养他们的分析能力和理解能力。通过实际编写和分析静态HTML文档，帮助学生理解HTML文档是怎样通过标记结构显示内容的，培养他们的编程基础和逻辑思维。通过深入讨论和分析，学生能够全面理解HTML被广泛使用的原因，提升其综合分析能力和表达能力，也能够提高合作讨论技能。通过分享和讨论，学生可以互相学习制作网页的经验和技巧，提高实践操作水平，并培养解决问题的能力。通过讨论促进学生理解超文本链接在信息组织和查找中的重要性，提升批判性思维和语言表达能力，培养团队合作精神。通过探讨超文本与互联网的基本概念，帮助学生理解超文本在互联网上的作用和信息组织方式，培养基本的网络知识和理解能力。通过实际操作体验超链接减少搜索时间，学生能理解超链接的便利性，培养高效的信息查询能力。通过讨论HTML作为网络通用语言的特点，学生能够理解其在全球互联网上的重要性，增强对网络基础架构的认识。通过展示HTML在不同设备和操作系统上的效果，学生能够理解HTML的跨平台特性，培养适应不同技术环境的能力，并增强对网页开发的信心。通过讨论HTML对初学者和专业开发者的友好性，学生可以认识到HTML的易学性和功能丰富性，激发他们学习和使用HTML的兴趣。通过动手编写一个简单的HTML文档，学生能够巩固所学的HTML基础知识，体验HTML语法的简易性和实践性，同时增强他们对网页制作的兴趣。通过编写一个HTML历史的时间轴，学生可以了解HTML发展的关键节点，培养他们的历史认知能力和数据整理能力。通过动手编写HTML页面，学生可以亲身体会其语法的简单易学，增强学习兴趣和动手能力，同时理解这种易学性对互联网普及的推动作用。通过动手实验编写一个没有HTML标签的网页，学生可以直观感受没有HTML的网页是如何混乱和难以阅读的，增强他们对HTML重要性的理解。<br/>课堂小结 网页结构设计1、了解HTML的基本概念2、认识HTML文档的组成3、熟悉HTML文档的结构4、理解基本的HTML标签 总结回顾 对本节课内容进行总结概括。<br/>课后作业 一个完整的HTML文档的基本结构包括哪些部分？ 布置作业 拓展学生的学习能力<br/>板书 观看板书 强调教学重点内容<br/>21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）<br/>HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)(共46张PPT)<br/>第7课<br/>网页结构设计<br/>第1课时<br/>（赣科技版）七年级<br/>上<br/>01<br/>学习目标<br/>内容总览<br/>02<br/>新知导入<br/>03<br/>探究新知<br/>04<br/>课堂练习<br/>05<br/>课堂总结<br/>课后作业<br/>06<br/>教学目标<br/>了解HTML的重要性，认识HTML在制作和显示网页内容中的基础作用，提升对网页技术的基本认知。<br/>01<br/>02<br/>03<br/>04<br/>计算思维<br/>信息社会责任<br/>数字化学习与创新<br/>信息意识<br/>学会HTML标签的基本用法，理解头部和主体部分的结构，培养用逻辑和系统思维解决问题的能力。<br/>能够编写简单的HTML文档，运用所学知识创造具有标题和段落的网页，激发数字化学习兴趣和创新精神。<br/>理解HTML在网页制作中的规范性，养成遵守互联网信息发布规则的意识，尊重网上信息资源的规范和版权。<br/>新知导入<br/>新知讲解<br/>想一想<br/>认识HTML<br/>1、什么是HTML<br/>HTML的全称为超文本标记语言，它包括一系列的标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。<br/>新知讲解<br/>想一想<br/>认识HTML<br/>2、HTML与网页的关系<br/>我们常说的网页其实就是一个HTML文档，Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示 HTML标签,而是使用标签来解释页面的内容。<br/>新知讲解<br/>想一想<br/>认识HTML<br/>3、HTML文档的基本结构<br/>标准的 HTML 都具有一个基本的结构，如下！<br/><html>标记网页的开始<br/><head>标记头部的开始<br/><title>浏览器中显示的文档标题标记页面正文的开始标记页面正文的结束标记网页的结束新知讲解想一想认识HTML3、HTML文档的基本结构由尖括号包围的关键词，如“”称为HTML标签，通常成对出现，分为开始标签和结束标签。<br/>新知讲解<br/>想一想<br/>认识HTML<br/>3、HTML文档的基本结构<br/>由标签和标签间的内容合成网页文件，网页文件一般用 .htm 或 .html 扩展名命名。浏览器对网页文件进行解析，将网页内容呈现给用户，如图所示，左为浏览器解析的内容，右为运行结果。<br/>新知讲解<br/>想一想<br/>扩展阅读<br/>HTML5<br/>HTML5 是公认的下一代 Web语言，它极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。<br/>新知讲解<br/>议一议<br/>1、一个完整的HTML文档包括哪些基本部分？<br/>（1）文档类型声明：告诉浏览器这是一个HTML文档，例如 <!DOCTYPE html>。<br/>（2）HTML标记：标记网页的开始和结束，例如 <html> 和 </html>。<br/>（3）头部部分：包含不显示在页面上的信息，例如 <head>，<title>。<br/>（4）标题部分：设置网页的标题，显示在浏览器标签页上，例如 <title>我的网页。（5）主体部分：包含网页上实际显示的内容，例如 ，和。新知讲解议一议2、为什么标签是网页的基础单元？（1）结构定义：标签决定了网页的整体结构，例如标题、段落和列表。（2）内容显示：标签包围和标记内容，让浏览器知道如何显示这些内容。（3）链接资源：标签可以链接图片、视频和其他网页资源，使网页更丰富和互动。（4）语义信息：标签提供了网页内容的语义信息，使搜索引擎和辅助技术能更好地理解网页。（5）技术兼容：标签让搜索引擎和屏幕阅读器理解网页内容，从而使网页更容易被找到和访问。新知讲解想一想认识HTML3、HTML的作用自1990年以来，HTML就一直被用作万维网的信息表示语言。使用HTML描述的文件需要通过Web浏览器显示出效果。新知讲解想一想认识HTML3、HTML的作用HTML是一种建立网页文件的语言，通过标记式的指令，将影像、声音、图片、文字动画、影视等内容显示出来。新知讲解想一想认识HTML3、HTML的作用事实上，每一个HTML文档都是静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种在排版网页中，资料显示位置的标记结构语言，简单易学。新知讲解想一想认识HTML3、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）多媒体集成：超链接可以连接到图片、视频等多种形式的信息，丰富获取途径。新知讲解想一想认识HTML4、HTML的特点超文本标记语言文档制作相对简单，但功能强大，支持嵌入不同数据格式的文件。新知讲解想一想认识HTML4、HTML的特点（1）简易性：超文本标记语言有统一的结构和规定，从而更加简单易学。新知讲解想一想认识HTML4、HTML的特点（2）可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求。同时超文本标记语言采取子类元素的方式，为系统扩展带来保证。特殊符号 字符实体 示例空格 百度 新浪大于号(>) > 如果时间>晚上6点，就坐车回家小于号(<) < 如果时间<早上7点，就走路去上学引号("') " W3C规范中，HTML的属性值必须用成对的"引起来版权符号@ © © 2006-2024深圳市二一教育科技有限责任公司新知讲解想一想认识HTML4、HTML的特点（3）平台无关性：超文本标记语言可以使用在广泛的平台上。新知讲解想一想认识HTML4、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文档，要求含有文档标题，至少一个页面标题，一个正文段落，并在浏览器中观看效果。新年展望</title<br/><body>我的新年展望是xxxxxx</body><br/></html><br/>新知讲解<br/>HTML的历史<br/>知识拓展<br/>HTML（超文本标记语言）是我们今天浏览网页的基础，它的历史可以追溯到上世纪90年代初。<br/>新知讲解<br/>HTML的历史<br/>知识拓展<br/>1、起源：HTML由蒂姆·伯纳斯-李（Tim Berners-Lee）于1991年发明，当时的目的是为了方便科学家在全球范围内共享文档。<br/>新知讲解<br/>HTML的历史<br/>知识拓展<br/>2、HTML 1.0：1993年，HTML 1.0正式发布，提供了基本的文档结构和超链接功能，使网页的基本框架初具雏形。<br/>新知讲解<br/>HTML的历史<br/>知识拓展<br/>3、早期发展：随着互联网的快速发展，1995年发布的HTML 2.0规范增加了表格和表单的支持，进一步丰富了网页内容。<br/>新知讲解<br/>HTML的历史<br/>知识拓展<br/>4、中期进展：1997年，HTML 3.2正式发布，引入了更多的样式和脚本支持，使网页的功能和外观更加多样化和互动化。<br/>新知讲解<br/>HTML的历史<br/>知识拓展<br/>5、HTML 4.01：1999年发布的HTML 4.01规范引入了对国际化的支持，并加强了对CSS样式表的集成，推动了网页设计的分离与标准化。<br/>新知讲解<br/>HTML的历史<br/>知识拓展<br/>6、HTML 5的到来：2014年，HTML 5正式发布，它不仅增加了音频、视频和图形绘制（Canvas）等多媒体支持，还改进了语义化标签，提升了网页的易用性、可访问性和搜索引擎优化。<br/>新知讲解<br/>HTML的历史<br/>知识拓展<br/>HTML从最初的简单文档标记语言，经过多个版本的发展和改进，如今已经成为构建丰富多彩、功能强大的现代网页的核心技术，不断推动着互联网的进步与创新。<br/>新知讲解<br/>议一议<br/>1、你觉得为什么HTML会对互联网有那么大的影响？<br/>（1）基础语言：HTML是网页的基础，使得我们能看到和使用互联网。<br/>（2）简单易学：HTML的语法简单，任何人都可以学会，促进了更多人创建内容。<br/>（3）统一标准：HTML提供统一标准，确保网页在不同设备和浏览器上都能正确显示。<br/>（4）多媒体支持：HTML支持图片、音频和视频，使得网页更加丰富。<br/>（5）增强互动：HTML与CSS和JavaScript合作，增加网页互动和动态。<br/>（6）全球共享：HTML使人们能够在全球范围内轻松共享和访问信息。<br/>新知讲解<br/>议一议<br/>2、如果没有HTML，你觉得我们今天的上网体验会是怎样的？<br/>（1）网页混乱：没有HTML，网页可能会没有统一的结构和格式，显得混乱且难以阅读。<br/>（2）难以创建：网页制作会变得复杂，普通人很难自己创建网页。<br/>（3）缺乏多媒体：网页可能无法显示图片、音频和视频，只能看到简单的文本内容。<br/>（4）少互动：网页会缺少表单和按钮等互动元素，使用体验变差。<br/>（5）全球共享难：没有一个统一标准，信息共享变得很困难。<br/>课堂总结<br/>1<br/>了解HTML的基本概念<br/>网页结构设计<br/>2<br/>认识HTML文档的组成<br/>3<br/>掌握HTML文档的结构<br/>4<br/>理解基本的HTML标签<br/>板书设计<br/>开展问卷调查活动<br/>开展问卷调查活动<br/>了解敬老爱老美德<br/>认识需要帮助的老人<br/>熟悉问卷调查的方法<br/>劳动之识——设计问卷需注意问题<br/>劳动之行——能合作完善问卷设计<br/>网页结构设计<br/>1、了解HTML的基本概念<br/>2、认识HTML文档的组成<br/>3、熟悉HTML文档的结构<br/>4、理解基本的HTML标签<br/>课后作业：<br/>1、一个完整的HTML文档的基本结构包括哪些部分？<br/>课后作业<br/>1、一个完整的HTML文档的基本结构包括哪些部分？<br/>文档类型声明： 告诉浏览器这是一个HTML5文档，比如 <!DOCTYPE html>。<br/>HTML标记： 标记网页的开始和结束，例如 <html> 和 </html>。<br/>头部部分： 包含页面的元数据（如字符集）和标题信息，例如 <head> 标签及其内容。<br/>标题部分： 设置网页标题，显示在浏览器标签页上，例如 <title>我的网页。主体部分： 包含网页上实际显示的内容，例如 标签及其内容。45https://www.21cnjy.com/help/help_extract.php让备课更有效www.21cnjy.comThanks! 展开更多...... 收起↑ 资源列表 【赣科技版】《信息科技》七年级上册 第7课《网页结构设计》第1课时 教案.doc 【赣科技版】《信息科技》七年级上册 第7课《网页结构设计》第1课时 课件.pptx 什么是HTML.mp4
资源列表
