第16课探秘网页与代码-教学设计2026-2027学年人教版初中信息科技七年级全一册

第16课《探秘网页与代码》教学设计 2026-2027学年人教版初中信息科技七年级全一册 课　　题 第16课 探秘网页与代码 教材版本 人教版（2024） 所在单元 第四单元 校园活动线上展 课　　型 新授课 课　　时 1课时（40分钟） 授课对象 初中七年级学生 一、教学目标 1. 通过查看、修改网页源代码的实践活动，知道网页与 HTML 代码之间存在一一对应的关系，了解 HTML（超文本标记语言）是构成网页的基础语言，能说出 HTML 通过标签告诉浏览器网页内容类型和结构。（信息意识） 2. 通过动手添加、修改成对标签和单标签（如 <img>），掌握标签的书写规则，理解 HTML 文档 <html>—<head>—<body> 的基本结构，能区分 <head> 与 <body> 的不同作用。（计算思维） 3. 借助文本编辑工具打开并修改网页文件，观察浏览器呈现效果的变化，体会代码与效果的对应关系，能根据需求修改标题、文字、图片标签实现简单的网页内容调整。（数字化学习与创新） 4. 通过对网页资源两种存放方式（本站服务器、通过标签属性指向外站地址）的讨论，初步形成尊重原创、合规引用网络资源的意识。（信息社会责任） 二、教学重点与难点 教学重点：网页与代码的一一对应关系；HTML 标签的书写规则；HTML 文档的基本结构（<html>、<head>、<body>）；浏览器按标签规则解析代码呈现网页的过程。 教学难点：区分成对标签与单标签；理解 <head> 中 <title> 等元数据的作用与 <body> 中可见内容的区别；初步建立'修改代码—观察效果'的网页调试思维。 三、教学方法与教学准备 教学方法：情境教学法、任务驱动法、演示讲解法、实验探究法、小组合作法。 教学准备：连通多媒体教学网络的机房，教师机与学生机均安装记事本（或 VS Code、Notepad++ 等文本编辑工具）与浏览器；提供若干简单 HTML 示例文件（含图片资源）；'代码观察与修改'任务单。 四、教学过程 教学环节 教师活动 学生活动 设计意图 情境导入 （5分钟） 1. 展示'校园活动线上展'示例网页，提问：我们平时浏览的这些漂亮网页，背后是什么在支撑？ 2. 现场用记事本打开网页文件，让学生看到 HTML 代码；修改标题文字并刷新浏览器，引出本课课题。 1. 观察示例网页，思考网页背后的秘密。 2. 观察教师演示，看到修改代码后网页发生变化，初步感知代码与网页效果的关联。 从学生熟悉的网页浏览切入，通过现场'改代码—看变化'的演示制造认知冲突，激发探究兴趣，自然引出本课主题。 探究一 认识网页与HTML （12分钟） 1. 讲解：HTML 中文名称为超文本标记语言，通过预定义标签告诉浏览器网页的内容类型和结构。 2. 引导学生打开示例网页的源代码，寻找 <html>、<head>、<title>、<body> 等标签，讨论各标签中包含的内容。 3. 归纳 HTML 文档基本结构：<html> 为根标签，<head> 放元数据，<body> 放可见内容。 1. 听讲并记录 HTML 的含义与作用。 2. 对照任务单在源代码中找到指定标签，小组内交流各自发现的内容。 3. 完成'标签—作用'匹配练习，说出 <head> 与 <body> 的区别。 通过'教师讲解—学生查找—归纳结构'三步，帮助学生建立对 HTML 基本结构的整体认知，落实教学重点。 探究二 标签规则与网页渲染 （10分钟） 1. 讲解标签书写规则：大部分成对出现（起始/结束），少数单标签（如 <img>）。 2. 演示浏览器如何按标签规则解析代码并渲染网页。 3. 布置实践任务：用记事本修改示例网页中的文字内容、标题文字，保存后刷新浏览器观察变化。 1. 听讲，对比成对标签与单标签的写法差异。 2. 观察演示，理解浏览器解析渲染的过程。 3. 动手修改文字、标题，刷新浏览器观察一一对应的变化，在任务单上记录。 把'网页与代码一一对应'这一核心概念落到学生亲手操作上，通过修改—观察—记录强化对应关系，培养计算思维。 探究三 网页资源与标签属性 （8分钟） 1. 出示含 <img> 的代码，引导学生讨论：网页中的图片来自哪里？ 2. 讲解：图片等资源既可以保存在本站服务器，也可以通过标签属性（如 src）指向外站地址；浏览器会按地址获取资源。 3. 引导学生将 <img> 的 src 属性改为外站图片地址，观察效果。 1. 观察 <img> 标签，猜测图片来源。 2. 听讲并理解网页资源的两种存放方式。 3. 动手修改 src 属性为外站图片地址并刷新，验证效果，思考引用外站资源应注意的问题。 通过图片资源的两种来源对比，既拓展标签属性的认识，又渗透尊重版权、合规引用资源的信息社会责任意识。 课堂小结 （3分钟） 1. 引导学生回顾：HTML 是什么？文档基本结构包括哪几部分？成对标签与单标签有何区别？ 2. 用板书梳理知识脉络。 1. 跟随教师回顾本课核心知识点，用自己的话回答问题。 2. 完善任务单。 及时梳理，帮助学生把零散实践经验结构化，巩固核心概念。 布置作业 （2分钟） 出示作业（详见'六、作业设计'），说明要求。 记录作业，明确任务。 分层作业兼顾基础巩固与拓展提升，为下一课制作网页作铺垫。 五、板书设计 第16课　探秘网页与代码 一、HTML——超文本标记语言 　　通过预定义标签，告诉浏览器网页的内容类型和结构 二、标签规则：大部分成对出现（起始/结束），少数单标签（如 <img>） 三、HTML 基本结构：<html>（根）→ <head>（元数据，含 <title>）+ <body>（可见内容） 四、核心认识：网页与代码一一对应，浏览器按标签规则解析渲染；资源可在本站，也可通过属性指向外站 六、作业设计 1. 基础题：请写出 HTML 文档最基本的三对顶级标签名称，并分别说明 <head> 和 <body> 的作用。 2. 实践题：用记事本打开本课示例网页，修改 <title> 中的标题文字和 <body> 中的一段文字，保存后用浏览器打开，把观察到的变化记录在任务单上。 3. 拓展题（选做）：尝试在 <body> 中添加一个新的 <p> 段落标签，写入一句自己想推荐的读书格言，保存并预览效果。 4. 复习题：预习第17课《制作网页展活动》，思考'如果要制作一个读书节活动网页，我们会按照怎样的流程完成？' 第 5 页　共 5 页 学科网（北京）股份有限公司 $