第7课网页的数据组织 教学设计 -2023—2024学年浙教版（2023）初中信息技术八年级上册

教学设计 课程基本信息 学科 信息科技 年级 八年级 学期 秋季 课题 第7课 网页的数据组织 教学内容与学习对象分析 教学内容分析： 本课是第二单元的第2课，内容主要包括“HTML语言”“HTML标签”“超链接”三个部分。本课与七上第二单元“探秘互联网”中的“网络服务”“互联网应用协议”等内容密切相关。同时，紧密承接本单元第1课“互联网应用中的数据”的学习，重点探究网页的数据组织，并为下阶段网页数据的呈现、编码与发布等内容的学习奠定基础。 本课遵循“数据”这一逻辑主线，落实课程标准中“了解常用互联网应用中数据的构成，能够使用适当的数字化工具对网页进行编辑与发布”的内容要求。本课以“人工智能”主题网站创作为主线，以任务驱动和问题引导的方式开展教学。本课第一部分通过浏览器的“开发人员工具”观察代码，理解网页中 HTML 语言的作用；第二部分围绕 HTML 标签和 HTML 文档基本结构的学习，开展 “人工智能”主题网站的代码编写；第三部分通过设置文本超链接的实践活动，促使学生理解超链接在网页数据组织中的作用。 学习对象分析： 本课授课对象为八年级的学生，他们已具备一定的认知水平和操作技能，抽象思维也日渐完善。通过之前的学习，学生已经对互联网应用中的数据构成、传输过程原理、互联网协议有了一定的了解。他们了解网页是人们获取信息的重要来源之一，但网页的数据组织相关知识是全新的学习领域，其中涉及HTML语言的编写，对于学生挑战较大。这需要教师创设“人工智能”主题网站制作情境，以问题引导和任务驱动为主要教学方法，激发学生学习兴趣，培养其自主探究意识，引导学生在实践中领悟网页的数据组织，掌握文本、图片、超链接等标签及属性的设置方法。 教学目标分析（含核心素养导向） 信息意识：认识互联网对社会发展的影响，使用信息科技（HTML语言）解决学习和生活中的问题。 计算思维：观察网页的数据组织，分析提取数据组织的基本特征，对实际的网页编辑任务进行抽象、分解、建模，制定解决方案，并能有效执行，及时反思和优化。 数字化学习与创新：根据实际需求，选择合适的数字化平台和资源，创造性地完成网站的规划与实施。 信息社会责任：通过网页编辑实践，能理解超链接的作用，感受文档互联、网站互联等带来的便捷，加深对互联网相关技术本质的认识，加强网络安全责任感。 教学重点： HTML文档的基本结构 教学难点： 超链接的理解与设置。 教学过程 【回顾旧知，导入新课】 浏览自己熟悉的网站，观察网页中的数据类型，同时思考网页中的数据是如何组织的？ 【实践应用，探索新知】 一、HTML语言 1.实践：尝试打开一个自己熟悉的网站，使用浏览器中的“开发人员工具”查看HTML代码（提供操作视频辅助学习）。 2.明确HTML语言的作用：HTML(HyperText Markup Language)即超文本标记语言，用来组织网页的结构和内容。 3.观察：用“审查元素”功能，对比观察左右窗口中，网页显示内容和对应的HTML代码，归纳其结构特点。 HTML标签由“<”和“>”符号包围的字符串组成，通常成对的标签出现，成对的标签中，第二个标签会多一个“/”。 二、HTML文档的基本结构 1.类比学习:了解HTML语言中的<html>、<body>、<head>、<title>等标签作用，明确HTML语言的基本结构。 2.思考：能否利用浏览器中的“开发人员工具”编辑调试代码？ ①测试：利用浏览器“开发者工具”修改<title> ……</title>中间的文字，观察并记录该网页标题的变化。 ②结论：“开发人员工具”可用于网页代码的调试查看，不能直接用于网页编辑。 3.了解HTML语言的编写与调试方式，完成如下填空。编辑软件:（记事本、VS Code、Eclipse等） 调试方式:（ 浏览器 ） 4. 第1项任务：根据小组“人工智能”网站的制作方案，编写网页首页的代码，修改“网页的标题”与“正文内容”, 并调试查看网页效果。 ①自主学习用记事本编写HTML语言并用浏览器调试的方法。 ②用记事本编写的HTML语言在进行调试查看时，需将保存文件扩展名从“.txt”更改为为“.html”的文件，选择保存类型为“所有文件” 。 三、更多HTML标签 1.第2项任务：结合课本P37页中的“阅读材料”与课本P35页中的“教你一招”，自主探索了解更多HTML标签的使用，记录自己测试成功的标签。 我探索的标签 作用描述 具体应用 ① <h1>标签 HTML 正文不同字号是通过<h1> - <h6> 标签来定义的。 ②<p>标签 段落标签，可创建一个段落，浏览器会自动地在段落的前后添加空行。 ③ <img>标签 图片标签，用于添加图片,<img>标签没有结束标签。 <img src="图片地址 " width="宽度点数 " height= "高度点数"> 2.自主学习P35页教你一招，使用HTML标签设置版面与格式。 四、超链接 1.思考：网站的组成有1个主页面 ，多个分页面。这些页面间如何产生关联，实现跳转？ 2.明确超链接的作用：超文本链接 (Hypertext Link)，可以实现从一个页面跳转到另一个页面，实现文档互联、网站互联。 3.自主学习P35页中关于文本超链接的设置方法。 <a>标签的使用，<a href="链接位置">链接元素</a> 4.拓展思考：如何为图像设置超链接？ <a href="链接位置"> <img src= "图片位置" > </a> 5.第3项任务：结合网站设计方案，合理规划超链接的设置，补全以下代码。 6.找一找：以下代码中超链接的设置存在哪些错误，请进行修改。 【小结评价，优化提升】 1. 思维导图回顾本课的学习过程。 2.参照评价量表，开展自我评价。 备注：教学设计应至少含教学内容与学习对象分析、教学目标分析（含核心素养导向）、教学过程等三个部分，如有其它内容，可自行补充增加。文档字体请使用“黑色，宋体，五号”。 学科网（北京）股份有限公司 $$