4.2 揭秘神奇的标记语言 课件-2025-2026学年七年级上《信息科技》（教科版）.pptxVIP

信息意识·计算思维·数字化学习与创新·信息社会责任信息科技七年级上册第四单元互联网数据编码与呈现——美编网页第2课揭秘神奇的标记语言

聚焦探索设计实现拓展引入情境同学们，我们每天都会上网浏览各种网页，但你们有没有想过，这些丰富多彩的网页是怎么制作出来的呢？

聚焦探索设计实现拓展聚焦问题，明确任务?聚焦问题网页数据是怎么通过标记语言变得这么丰富多彩的呢？?明确任务掌握HTML搭建网页骨架和CSS添加样式的流程，设计并实现一个简单的“学校名片”网页。?成果形式一个包含标题、段落、图片、链接等元素且样式美观的“学校名片”网页。

标记语言聚焦探索设计实现拓展分析问题，探索方法?温馨提示:在探索过程中，大家可以先查阅资料，了解常见的标记语言有哪些，它们各自的应用场景是什么。然后，选择一种标记语言，研究它是如何通过标签来组织和标记内容的，注意观察标签的格式和使用规则。

聚焦探索设计实现拓展分析问题，探索方法写一写

聚焦探索设计实现拓展分析问题，探索方法

聚焦探索设计实现拓展?趣味活动1：“标签对对碰”完成“标签对对碰”游戏，掌握常见HTML标签的书写及配对规则。?趣味活动2：代码初体验在半成品代码中尝试插入HTML标签，观察页面变化。?温馨提示注意标签的正确书写格式，观察每插入一个标签后页面的具体变化，记录发现的问题。分析问题，探索方法

聚焦探索设计实现拓展分析问题，探索方法：点评展示点评指导展示“标签对对碰”游戏成果及半成品代码实践效果，教师点评学表现，指出配对正确与错误的地方，强调HTML标签书写规范。本环节提升升华掌握HTML标签基本书写规则，理解标签语义与页面结构的对应关系，初步形成“结构—表现分离”的思维。

聚焦探索设计实现拓展梳理思路，设计方案：设计要求任务1：绘制网页作品设计鱼骨图规划作品蓝图。

聚焦探索设计实现拓展梳理思路，设计方案：设计要求?小组汇报各小组汇报设计方案，展示鱼骨图，介绍网页结构布局、样式规划及文字内容安排，分享设计思路与创意亮点。?温馨提示在设计时注意标签语义的准确性、样式规划的合理性，以及文字内容的简洁明了；鼓励发挥创意，设计出独特且美观的“学校名片”网页。

聚焦探索设计实现拓展梳理思路，设计方案：点评展示点评指导肯定优点，指出不足，如标签使用是否合理、样式规划是否美观、内容安排是否清晰等；针对问题提出改进建议。本环节提升升华掌握HTML搭建骨架、CSS添加样式的基本流程，提升系统化设计思维，学会通过鱼骨图将复杂问题简单化、可视化。

聚焦探索设计实现拓展运用所学，实现方案：实现示范教师示范新建“school.html”和“style.css”文件，板书内部样式表格式，展示如何插入HTML标签并添加CSS样式，实现一个简单的网页效果。

聚焦探索设计实现拓展运用所学，实现方案?实现思路依据鱼骨图设计蓝图，在本地文件夹新建“school.html”和“style.css”文件，按照HTML标签顺序搭建网页骨架，运用CSS关键词添加样式，实现“学校名片”网页的视觉呈现。?实现过程在真实编码环境中，按照设计思路逐步编写代码，每写一行代码即查看页面效果，体验“写一行、看一行”的即时反馈。?新内容强调HTML文件与CSS文件的关联，内部样式表的使用，以及常见HTML标签与CSS属性的综合运用。

聚焦探索设计实现拓展运用所学，实现方案：点评展示点评指导点评学生实现成果，肯定成功之处，指出问题所在，如代码规范性、页面美观度、功能完整性等；针对问题进行详细讲解。本环节提升升华掌握核心标签及CSS属性的运用，提升用代码解决真实问题的能力，增强对“结构—表现分离”计算思维的理解。

聚焦探索设计实现拓展评价交流，拓展练习拓展任务要求把页面压缩包通过微信发给家长，让家长用浏览器打开并语音反馈“最喜欢的设计点”，收集家长反馈并截图保存。

聚焦探索设计实现拓展评价交流，拓展练习：拓展性任务要求

聚焦探索设计实现拓展全课总结提升总结提升本节课深入学习了HTML和CSS这两种网页设计的核心标记语言。通过“标签对对碰”游戏，掌握了HTML标签的书写规则，理解了如何用这些标签搭建网页的骨架。接着，通过鱼骨图设计活动，学会了用CSS为网页添加样式，让页面变得更加美观。在实践操作中，大家完成了“学校名片”网页的制作，体验了网页从设计到实现的完整过程。课后学习指导与作业鼓励自主拓展学习，尝试更多HTML和CSS的功能。根据课堂所学，独立完成一个简单的网页设计任务（制作个人简介网页或好书推荐网页），巩固所学知识与技能。在课后尝试为页面添加背景音乐或更多超链接，进一步优化“学校名片”网页，为单元后续“内容编辑”埋下伏笔。

谢谢