中小学教育资源及组卷应用平台 第2课《揭秘神奇标记语言》教学设计 课题 揭秘神奇标记语言 单元 第四单元 学科 信息科技 年级 七年级上 核心素养目标 信息意识：知道HTML语言的主要构成，识别网页中文本直接存储与图片路径引用的差异，通过查看源代码理解信息组织逻辑。计算思维：探秘网页标记语言HTML，能够读懂网页背后的代码，通过CSS优先级规则解决样式冲突问题。数字化学习与创新：通过科技节网页制作实践媒体素材添加与CSS美化，完成数字化作品创作流程。信息社会责任：经历分析讨论、编程实现等过程，能够使用HTML语言有目的地呈现数据，为网页图片添加alt描述文本。 教学重点 使学生理解标记语言（特别是HTML）的核心概念及其与编程语言的区别。帮助学生掌握HTML文档的基本结构标签（, , ,
）及其作用。引导学生学会使用基本的CSS选择器（元素选择器、类选择器）为HTML元素设置简单样式。 教学难点 引导学生清晰辨识HTML单标签（如<img>, <br>）与双标签（如<p>,<div>）的语法差异及其适用场景。帮助学生理解网页中图片等外部资源是通过src属性链接引用（而非直接嵌入）的本质。引导学生掌握CSS不同引入方式（内联、页级、外联）的基本应用方法及其主要优势。 教学过程 教学环节 教师活动 学生活动 设计意图 导入新课 本课要点页形式进行表达，每个网页都有其独特的在互联网的世界里，信息通过网板报，有文字、图表等内容信息，也有标内容和呈现效果。正如同学们绘制的有着独特的构成要素和呈现规范。HTML题、正文、字体等排版信息，网页也是定义这些内容的网页语言之一。HTML和CSS，为前面创建的简单网页本节课，我们聚焦网页制作语言文本设置字号和字体，为网页添加图片和设计网页整体骨架结构，给网页中的音视频，增加网页的可读性和美观性。电脑怎么知道哪里是标题？我们用一种叫HTML的“符号密码”告诉它！像用荧光笔划重点一样，用<h1>标记就是大标题。图片塞进网页里了吗？没有哦！HTML像地图，<img src="路径">告诉浏览器：“去这里找图片贴过来！”文件是分开的。网页积木师：用标签搭建数字世界大家喜欢玩乐高积木吗？用不同形状的积木块，可以拼出房子、汽车、城堡。制作网页也有类似的“积木块”，它们就是 HTML 标签。用 <h1> 可以搭出大大的标题，用 <p> 可以放上一段文字，用 <img> 就能贴上精美的图片。这些被尖括号 < > 包裹的“积木块”，按照一定规则组合起来，就构成了我们看到的丰富多彩的网页。今天，我们就来认识这些神奇的网页“积木块”！播放视频《HTML是什么？解析网页标记语言》 分组对比浏览器地址栏http与https前缀的锁头状态，点击锁头查看证书信息，记录"绿色锁头=加密通道，红色感叹号=危险连接"。分组用<h1>-<h6>为童话故事分段加标题，观察浏览器渲染的字体大小差异尝试用<h1>到<h6>为童话故事创建六级标题，观察浏览器显示的字体大小变化规律。观看视频 通过直观视觉差异帮助学生建立对安全传输认知，引导学生理解锁头图标作为加密状态指示灯的基础作用。通过视觉层级变化理解标题标签的语义化作用，建立网页内容结构化思维通过视觉反馈理解标题标签的层级关系，帮助学生建立网页内容结构化基础认知。了解HTML 讲授新课 新知讲解：一、探索人类之所以能够通过特定的语言进行交流，是因为人类的语言中包括了明确的语法规则，相互间明白每句话、每段话的含义。HTML作为制作网页的一种语言，它又是如何进行表达的呢？其实，HTML不是编程语言，而是一种标记语言。就像同学们用荧光笔给课本重点内容涂上高亮颜色（这种"突出显示"被称为标记化），当人们将标记的规律整理成统一规则时，标记就发展成为一种语言。这种技术最早应用于出版行业，是作者、编辑和 ... ... </a></b></n></i></span></p></div><div class="item-bz"> ~~ 您好，已阅读到文档的结尾了 ~~</div></div></div></div></div><div class="pre_over view-mn" style="background-color: #fff; margin-top: 0"> <div class="zy-btns clearfix"> <a href="https://www.21cnjy.com/H/14/288442/23545023.shtml?from=doc" class="btn-download btn fl"> <span>立即下载</span> </a> <div class="xwt-down-btn fr" style="cursor: pointer"> <a href="#" onclick="alert('您没有登录')" class="btn-download-a btn fr" style="line-height: 34px" > 免费下载 <span class="btn-tag">（校网通专属）</span> </a></div></div></div></div><div class="view-sd"> <div class="author-view"> <div class="author-head"> <a href="https://www.21cnjy.com/H/14/288442/23545023.shtml?from=doc" class="join"> 登录下载Word版课件 </a></div></div><div class="sd-assets-box sd-assets-box--fixed"> <div class="sd-assets"> <h3> 同类资源</h3> <ul id="ul-2" style="display: block;"><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://doc.21cnjy.com/p-24403408.html" class="t-name">第12课 警报采集结果 教学设计【教科版】《信息科技》八年级上册（2025-11-13）</a></li><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://doc.21cnjy.com/p-24404002.html" class="t-name">第5单元第15课《自动通风系统的开发与实现》课件＋素材【河北大学版】《信息科技》八年级（2025-11-13）</a></li><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://doc.21cnjy.com/p-24403992.html" class="t-name">第5单元第15课《自动通风系统的开发与实现》教案【河北大学版】《信息科技》八年级（2025-11-13）</a></li><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://doc.21cnjy.com/p-24404006.html" class="t-name">第5单元第14课《自动通风系统的设计》课件＋素材【河北大学版】《信息科技》八年级（2025-11-13）</a></li><li><span class="icon"> <i class=" v521_doc1"></i></span><a href="https://doc.21cnjy.com/p-24403419.html" class="t-name">第12课 警报采集结果 课件【教科版】《信息科技》八年级上册（2025-11-13）</a></li></ul></div></div><div class="author-view"> <div class="author-head"> <a href="https://www.21cnjy.com/recruitment/home/ordinary" class="join" rel="nofollow"> 上传课件兼职赚钱 </a></div></div></div></div></div><div class="site-footer"> <div class="footer-address g-cw"> <ul class="links clearfix"><li><a href="https://news.21cnjy.com/" title="教育新闻">教育新闻</a></li><li><a href="https://www.21cnjy.com/" title="课件下载">课件下载</a></li><li><a href="https://gongkaike.21cnjy.com/" title="公开课课件">公开课</a></li><li><a href="https://www.zujuan.com/" title="组卷网">组卷网</a></li><li><a href="https://www.kuketang.cn/" title="酷课堂">课堂互动</a></li><li><a href="https://www.chujuan.cn/" title="出卷网">出卷网</a></li><li><a href="https://tp.kt5u.com/" title="拼写宝">课堂投屏工具</a></li><li><a href="https://tools.yunzitie.cn/" title="田字格">田字格字帖</a></li><li><a href="https://www.linkconn.cn/" title="汽车连接器">汽车连接器</a></li><li><a href="https://www.kuketang.cn/" title="酷课堂官网">酷课堂工具</a></li><li><a href="https://www.stirling-pdf.com/?lang=zh_CN" title="Stirling-pdf官网">PDF转Word</a></li></ul><p> 二一教育-课件中心 二一课件通 数据来源：21世纪教育网 <a href="https://beian.miit.gov.cn" rel="nofollow noreferrer"> 粤ICP备11039084号 </a> </p></div></div></body> </html>