资源简介

中小学教育资源及组卷应用平台
第2课《揭秘神奇标记语言》教学设计
课题揭秘神奇标记语言单元第四单元学科信息科技年级七年级上
核心素养目标信息意识：知道HTML语言的主要构成，识别网页中文本直接存储与图片路径引用的差异，通过查看源代码理解信息组织逻辑。计算思维：探秘网页标记语言HTML，能够读懂网页背后的代码，通过CSS优先级规则解决样式冲突问题。数字化学习与创新：通过科技节网页制作实践媒体素材添加与CSS美化，完成数字化作品创作流程。信息社会责任：经历分析讨论、编程实现等过程，能够使用HTML语言有目的地呈现数据，为网页图片添加alt描述文本。
教学重点使学生理解标记语言（特别是HTML）的核心概念及其与编程语言的区别。帮助学生掌握HTML文档的基本结构标签（, , , ）及其作用。引导学生学会使用基本的CSS选择器（元素选择器、类选择器）为HTML元素设置简单样式。<br/>教学难点引导学生清晰辨识HTML单标签（如<img>, <br>）与双标签（如<p>, <div>）的语法差异及其适用场景。帮助学生理解网页中图片等外部资源是通过src属性链接引用（而非直接嵌入）的本质。引导学生掌握CSS不同引入方式（内联、页级、外联）的基本应用方法及其主要优势。<br/>教学过程<br/>教学环节教师活动学生活动设计意图<br/>导入新课本课要点页形式进行表达，每个网页都有其独特的在互联网的世界里，信息通过网板报，有文字、图表等内容信息，也有标内容和呈现效果。正如同学们绘制的有着独特的构成要素和呈现规范。HTML题、正文、字体等排版信息，网页也是定义这些内容的网页语言之一。HTML和CSS，为前面创建的简单网页本节课，我们聚焦网页制作语言文本设置字号和字体，为网页添加图片和设计网页整体骨架结构，给网页中的音视频，增加网页的可读性和美观性。电脑怎么知道哪里是标题？我们用一种叫HTML的“符号密码”告诉它！像用荧光笔划重点一样，用<h1>标记就是大标题。图片塞进网页里了吗？没有哦！HTML像地图，<img src="路径">告诉浏览器：“去这里找图片贴过来！”文件是分开的。网页积木师：用标签搭建数字世界大家喜欢玩乐高积木吗？用不同形状的积木块，可以拼出房子、汽车、城堡。制作网页也有类似的“积木块”，它们就是 HTML 标签。用 <h1> 可以搭出大大的标题，用 <p> 可以放上一段文字，用 <img> 就能贴上精美的图片。这些被尖括号 < > 包裹的“积木块”，按照一定规则组合起来，就构成了我们看到的丰富多彩的网页。今天，我们就来认识这些神奇的网页“积木块”！播放视频《HTML是什么？解析网页标记语言》分组对比浏览器地址栏http与https前缀的锁头状态，点击锁头查看证书信息，记录"绿色锁头=加密通道，红色感叹号=危险连接"。分组用<h1>-<h6>为童话故事分段加标题，观察浏览器渲染的字体大小差异尝试用<h1>到<h6>为童话故事创建六级标题，观察浏览器显示的字体大小变化规律。观看视频通过直观视觉差异帮助学生建立对安全传输认知，引导学生理解锁头图标作为加密状态指示灯的基础作用。通过视觉层级变化理解标题标签的语义化作用，建立网页内容结构化思维通过视觉反馈理解标题标签的层级关系，帮助学生建立网页内容结构化基础认知。了解HTML<br/>讲授新课新知讲解：一、探索人类之所以能够通过特定的语言进行交流，是因为人类的语言中包括了明确的语法规则，相互间明白每句话、每段话的含义。HTML作为制作网页的一种语言，它又是如何进行表达的呢？其实，HTML不是编程语言，而是一种标记语言。就像同学们用荧光笔给课本重点内容涂上高亮颜色（这种"突出显示"被称为标记化），当人们将标记的规律整理成统一规则时，标记就发展成为一种语言。这种技术最早应用于出版行业，是作者、编辑和出版商用来描述书籍、报刊等印刷品排版格式的专业术语。在信息科技领域，标记语言指的是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。标记语言常用于标识文本的格式、描述链接的地址等，不用于向计算机发出指令。二、写一写你知道计算机领域有哪些标记语言吗？标记语言是如何实现标记的呢？标记语言：用特殊符号给电脑下指令RTF：用 { } 和 \ 定义文档格式（如字体/颜色），如带格式的包装盒。JSON：用 { } [ ] 存储交换数据（如游戏存档），像结构化收纳箱。Markdown：用 # * - 快速排版文本（如笔记标题），是高效写作小助手。HTML：用 < > 标签搭建网页（文字/图片/链接），如网页的乐高积木。掌握符号密码，轻松操作数字世界！三、探索超文本标记语言——HTML超文本（Hyper Text，简称HT）是通过超链接将文字、图片等信息相互连接，形成网状信息体系的技术。而超文本标记语言（Hyper Text Markup Language，缩写为HTML）正是基于此设计的通用标准标记语言，专门用于创建能在浏览器中显示的网页。HTML使用标记标签（由尖括号包围的关键词，通常成对出现）来描述网页内容：控制文本格式（如加粗/标题）、定义页面布局、管理图片显示等元素HTML标签一般分为两大类，分别是单标签、双标签。概念单标签双标签语法格式<标签名 **/**> 或 <标签名><标签名>内容</标签名>举例说明<br>（换行）<br/><img src="logo.png">（图片）<p>段落文字</p><br/><div>内容块</div>核心特点独立存在<br/>无需包裹内容，直接生效包裹内容<br/>需起始+结束标签，形成容器四、议一议网页如果只有文字而没有图片，呈现效果会大打折扣，即图片是网页中非常重要的组成内容。HTML语言如何描述图片等多媒体数据呢？填写表格思考网页是否真的将多媒体数据加入HTML文档中。据类型标签代码实例添加图片<img><img src="images/logo.gif">添加音频<audio><audio src="music.mp3" controls></audio>添加视频<video><video src="movie.mp4" controls></video>添加超链接<a><a href="https://">点击</a>五、探索层看样式表CSS是一种用于创建网页样式和布局的语言，可用于改变网页的外观和交互性。层叠样式表CSS通常与HTML结合使用。样式指的是用名称保存下来的对HTML元素进行修饰所使用的一组修饰参数，这里的HTML元素可以是字符、段落、表格等，修饰参数包括字体、字号、边框、底纹、对齐方式、缩进、边线等。CSS语法规则有两个主要部分构成，选择器以及一条或多条声明。六、议一议CSS中，选择器指向需要设置样式的HTML元素。结合网页代码，说一说常见的选择器有哪些？就像给班级同学贴不同颜色的姓名贴：红色贴（元素选择器）：全班同学统一指令蓝色贴（类选择器）：指定某个小组同学金色贴（ID选择器）：只给班长特殊指令选择器类型写法作用示例代码元素选择器标签名选中同类型所有元素p { color: red; } → 所有段落变红类选择器.类名选中特定班级成员.book { border: 1px solid; } → 所有class="book"的元素加边框ID选择器#id名选中唯一学号同学#header { font-size: 24px; } → 仅id="header"的元素变大字七、探索HTML与CSS结合使用HTML和CSS是网页制作中的两种基本的语言，两者合作可以使网页更具可读性、更美观。HTML和CSS是如何合作的呢？通常是在HTML文档中引入CSS，让两者联合。CSS引入主要有内联、页级和外联三种方式。结合实例，对比三种方式的使用方法，分析各自的优势。CSS引入方式使用方法优势内联在HTML标签内用style属性直接写CSS<br/>（例：<p style="color:red;"）优先级最高<br/>快速测试单个元素页级在HTML的<head>中用<style>标签写CSS<br/>（例：<style> p {color:blue;} </style>）统一控制整个页面样式<br/>避免重复代码外联用<link>标签引入外部.css文件<br/>（例：<link rel="stylesheet" href="style.css">）全网站样式统一<br/>维护成本最低<br/>浏览器缓存加速加载浏览学校网站或者社团网站，查看网页源代码，寻找标签并说明标签标记的是什么内容，填写下表。序号标签内容备注1<html>包裹整个网页网页的"书包" 2<head>网页设置信息"隐形工具袋" （不显示内容）3<title>浏览器标签页标题"网页身份证" （如"学校首页")4<body>所有可见内容"展示橱窗" （文字/图片在这里）5<h1>一级标题"最大字号标题" （通常用于主标题）6<p>段落文字"普通文本块" （像作文段落）7<img>图片"照片贴" （需src属性指定路径）8<a>超链接"传送门" （点击跳转其他页面）八、设计设置网页基本结构美化网页文本添加网页媒体素材九、实现利用HTML语言和CSS语言为科技节宣传网页设置头部、主体等基本结构，要求修改标题文本格式，包括字体、字号和对齐方式等，再添加正文文本，插入图片、音频、视频等媒体素材。通过实践，体会网页数据组织方式。<html><head><title>科技节专栏

科技之光，创造未来!

需要注意的是，不同的浏览器对同一标签可能会有不完全相同的解释，因而可能会有不同的显示效果。十、拓展思考：在网页代码里，文本和图片的信息呈现方式是一样的吗？通过小组研讨，完善下面的表达。网页代码中，文本与图片的呈现方式并不相同。根据HTML语言的规则，图片不会像文字那样，直接插入HTML页面，而是标记出（图片路径）和（替代文字），通过这种方式链接到HTML页面上。因此，当使用Word或者记事本等文本编辑软件打开网页，是看不到图片的，只有使用（浏览器）打开HTML文件，才可以看到网页中的图片。十一、拓展延伸从记事本到万物互联从本地编辑到网络请求浏览器：指令翻译官，解析你写的