模块2任务2.1：编写第一个HTML页面（教案）-《网页设计与制作》（电子工业出版社）上好课

《任务2.1：编写第一个HTML页面》教案 课 题 编写第一个HTML页面 课 型 新授课 课 时 2课时 授课班级 授课时间 授课教师 教材分析 本节课选自《网页设计与制作》模块2“HTML网页元素”中任务2.1编写第一个HTML页面。学生已在模块1“初识网页与网站”中认识了网页、网站与HTML的基本概念，掌握了在VS Code中创建文件夹和文件、用浏览器打开网页等基本操作。本任务将带领学生第一次真正动手编写HTML代码：先学习HTML文档的基本结构，再认识标签及等子标签，接着了解标签分类与标签关系，最后按任务实施步骤完成“我的第一个网页”的制作。内容由结构认知到代码实践，是培养学生规范代码编写习惯、建立“标签—结构—内容”认知的关键任务，也为后续页面格式化标签、图像、列表、超链接等元素的学习奠定基础。 学情分析 授课对象为中职计算机应用专业学生，已完成模块1的学习，能使用VS Code创建文件与文件夹、会用Edge浏览器打开网页，具备基本的计算机操作能力；但从未独立编写过HTML代码，对“标签”“嵌套”“属性”等概念十分陌生。学生普遍存在以下困难：容易漏写结束标签或出现交叉嵌套，容易忘记保存文件或把文件扩展名写错，对“代码正确、页面却显示乱码”的原因缺乏认知。学生对“自己动手做一个网页”兴趣浓厚、动手意愿强，但注意力保持时间较短，需要通过可视化效果对比和即时反馈来激发成就感。本节课内容正是学生打好代码规范基础、建立学习信心的关键。 学习目标 【知识目标】 ①理解HTML文档的基本结构，掌握<!DOCTYPE>、<html>、<head>、<body>四个核心部分的作用； ②掌握<head>标签中<title>网页标题、<meta charset>字符集等常用子标签的用法； ③了解双标签、单标签、注释标签的区别，以及标签的嵌套关系与并列关系。 【能力目标】 ①能独立、规范地书写HTML文档的基本结构； ②能使用标题标签<h1>和段落标签<p>组织页面文字，完成简单网页的制作； ③能使用VS Code创建HTML文件并在浏览器中查看运行效果，会排查简单的代码错误。 【素养目标】 ①培养规范的代码编写习惯，自觉遵循语法规则与行业规范，写出可读性、可维护性强的代码；②在反复修改与调试中养成耐心细致、精益求精的工匠精神；③树立知识产权保护意识，为后续规范使用图像、字体等外部资源打下基础。 学习重难点 【学习重点】 1.HTML文档的基本结构与书写规范； 2.<html>、<head>、<body>等核心标签的作用； 3.<title>标题标签与<meta charset>字符集声明的写法与作用。 【学习难点】 1.理解标签的嵌套关系与并列关系，正确书写开闭标签、避免交叉嵌套； 2.分析并解决“代码看起来正确、页面却显示乱码”和“标签未闭合、页面显示异常”等典型问题。 教学方法 讲授法、示范操作演示法、任务驱动法、对比教学法 课前准备 阅读教材、阅读教材模块2任务2.1内容，熟悉HTML文档基本结构与常见标签的用法；检查机房内VS Code、Edge浏览器是否安装并可正常使用；准备“任务2-1.html”示例文件，以及页面运行效果截图和“中文乱码”对比截图。 教学媒体 多媒体机房、电子教室广播软件、VS Code、Edge浏览器 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 1.展示两张对比图：一张是“用记事本写的一段普通文字”，一张是“浏览器中排版规范的网页”，提问：“同样是文字，为什么放进浏览器就变成了漂亮的网页？” 2.打开教材图2-1“第一个HTML页面效果”，并同步用VS Code展示它对应的代码，引导学生发现：页面上的每一句话，都被一对“尖括号标签”包着。 3.抛出问题：“网页的‘骨架’是怎么搭起来的？我们能不能自己动手做出这样一个网页？”点明本节课的学习目标。 1.观察两张对比图，主动说出自己的猜测（如“网页有格式”“网页里有代码”）。 2.观看教师展示的代码与效果，发现文字被<h1>、<p>等标签包裹，初步感受“标签决定显示效果”。 3.明确本节课的学习目标，带着“网页骨架怎么搭”的问题进入新知学习。 1.用“同样文字、不同效果”的对比情境制造认知冲突，激发学生的好奇心和探究欲。 2.通过“效果—代码”的对照，让学生直观感受到标签的作用，为后续结构学习做好铺垫。 活动二： HTML文档的基本结构与<head>标签 1.新知讲授 （1）结合教材“基本语法结构”示例，讲解HTML文档的4个核心部分：<!DOCTYPE>文档类型声明、<html>根标签、<head>头部标签、<body>主体标签，逐一说明各自的作用与书写位置。 （2）讲解<head>标签的作用，重点介绍<title>网页标题标签和<meta charset="UTF-8">字符集声明。 （3）讲解标签的属性：如<meta charset="UTF-8">中charset为属性名、“UTF-8”为属性值，说明HTML标签可以有0个或多个属性。 2.对比分析 分别运行“包含<meta charset="UTF-8">”和“不包含”的两段代码，让页面中文显示为乱码，再补上字符集声明后恢复正常，讲解乱码产生的原因。 3.背诵记忆 展示HTML文档基本结构代码，要求学生在规定的时间内完成四个核心部分及其作用的识记，并通过教师开展的问答抽查，要求识记不牢固的学生利用课后时间继续完成记忆巩固。 4.课堂问答 教师展示课堂问答题目，要求学生自主思考并主动回答问题，给予学生肯定评价并鼓励学生积极参与课堂互动。 5.课堂练习 教师展示“补全代码”课堂练习，要求学生补全代码并说明理由，针对回答问题的学生给予肯定的评价，并鼓励其他同学积极参与课堂互动。 1.跟随教师学习HTML文档的4个核心部分，在教材上批注各标签的作用与书写位置。 2.认真观察乱码对比演示，思考并回答乱码的原因，理解<meta charset="UTF-8">的重要性，记录“网页乱码先查字符集”的排错口诀。 3.参与课堂问答，完成知识点背诵记忆，认真作答“补全代码”练习题，主动回应教师提问，巩固所学知识。 1.通过“效果对比”的方式讲解字符集，把抽象概念转化为可看见的现象，直观突破“页面乱码”这一难点。 2.以“补全代码”的形式检验学生对文档结构的掌握情况，让学生在做题中加深对4个核心部分位置与作用的理解。 3.通过背诵、问答与练习，强化知识点记忆，为后续实际编写代码打好基础。 活动三： 标签的分类与标签关系、特殊字符代码 1.新知讲授 （1）讲解标签分类：双标签：包含开始标签和结束标签，如<html>…</html>、单标签：如<meta charset="UTF-8">、<link rel="stylesheet" href="my.css"/>、注释标签<!--注释内容-->，并说明注释内容不会在页面中显示，只有查看源代码才能看到。 （2）结合教材示例讲解标签的两种关系：嵌套关系，要求“必须先结束内层内容的标签，再由内而外依次关闭标签”，严禁交叉嵌套和并列关系。 （3）讲解特殊字符代码：演示在页面中直接输入“<”会出错，引出&nbsp;、&lt;、&gt;、&amp;、&copy;、&reg;等常用特殊字符代码。 2.例题分析 题目：判断并改正错误代码。教师出示<h1><p>这是标题</h1></p>等含有交叉嵌套的错误代码，分析错误原因并演示改正方法。 3.背诵记忆 展示表2-1“常见的特殊字符代码”，要求学生在规定的时间内完成知识点的识记，并通过教师开展的问答抽查，要求识记不牢固的学生利用课后时间继续完成记忆巩固。 4.课堂问答 教师展示课堂问答题目，要求学生自主思考并主动回答问题，给予学生肯定评价并鼓励学生积极参与课堂互动。 5.课堂练习 教师展示两道课堂练习题，要求学生思考并回答，针对回答问题的学生给予肯定的评价，并鼓励其他同学积极参与课堂互动。 1.跟随教师学习标签的分类，动手在草稿纸上分别写出一个双标签、一个单标签和一句注释。 2.分析“判断并改正错误代码”例题，主动找出交叉嵌套等错误，理解“先内后外”的闭合规则。 3.参与课堂问答，完成特殊字符代码的背诵记忆，认真作答课堂练习题，主动回应教师提问，巩固所学知识。 1.通过“错误代码诊断”的例题，让学生在纠错中理解嵌套规则，突破“标签关系”这一难点。 2.用表格化的方式整理特殊字符代码，降低记忆难度，帮助学生形成规范书写的意识。 3.通过背诵、问答与练习，巩固标签分类与关系，为下一步动手编写完整页面扫清语法障碍。 活动四： 任务实施——编写第一个HTML页面 1.任务布置 要求学生按教材“任务实施”步骤，在VS Code中创建“任务2-1.html”文件，制作如图2-1所示的“我的第一个网页”，页面文字为“欢迎学习网页设计与制作”“这是我的第一个HTML页面”。 2.示范操作 教师在大屏幕上逐步演示：步骤1打开VS Code，创建名为“任务2-1.html”的文件；步骤2在HTML页面结构中编写代码；步骤3单击运行按钮，在浏览器中打开，查看页面效果。强调“先保存、再运行”。 3.巡回指导 学生动手操作，教师巡视，重点帮助出现漏写结束标签、文件扩展名错误、忘记保存等问题的学生。 4.课堂练习 发布教材“试一试2-1.html”任务：①为页面设置自定义标题；②在代码中添加3条不同的注释；③打开浏览器查看页面效果，验证注释是否会在页面中显示。要求学生独立完成后同桌互查。 5.成果展示 选取2～3名学生展示作品并说明代码思路，给予肯定评价与针对性点评。 1.明确任务要求，阅读教材“任务实施”步骤。 2.观看教师示范，对照教材记下代码结构与操作步骤。 3.独立动手完成“任务2-1.html”的编写与运行，遇到问题先自查再请教，初步体验“写代码—看效果”的完整过程。 4.完成“试一试2-1.html”拓展任务，验证注释在页面中不显示，与同桌互查代码，讨论问题原因。 5.展示自己的作品，说明代码的组成与思路，听取教师点评并修改完善。 1.通过“教师示范—学生模仿—拓展练习”层层递进的任务驱动，让学生亲历网页制作的完整流程，把知识转化为技能。 2.以“试一试”任务引导学生主动探究注释的作用，在验证中加深理解，培养自主探究与规范注释的习惯。 3.通过成果展示与同桌互查，增强学生的成就感与团队协作意识，及时反馈学习效果。 课堂小结 作业布置 【课堂小结】 本节课我们认识了网页的“骨架”——HTML文档的基本结构，掌握了<!DOCTYPE>、<html>、<head>、<body>四个核心部分的作用，学会了用<title>设置网页标题、用<meta charset="UTF-8">声明字符集以解决中文乱码问题；同时认识了双标签、单标签和注释标签，理解了标签的嵌套关系与并列关系，并记住了常用的特殊字符代码。最后我们亲手编写并运行了“我的第一个网页”，体验了“写代码—看效果”的完整过程，体会到规范书写代码的重要性。 【作业布置】 1.预习任务2.2 使用页面格式化标签组织课程概况。 2.完成教材“试一试2-1.html”任务：为页面设置自定义标题，在代码中添加3条注释，并验证注释是否会在页面中显示。 3.整理本节课笔记，用自己的话描述HTML文档基本结构四个核心部分的作用，并在“任务2-1.html”的基础上，把标题文字改为自己的姓名和班级，重新运行查看效果。 板书设计 编写第一个HTML页面 一、HTML文档基本结构 　　<!DOCTYPE html>　文档类型声明 　　<html>　　　　　根标签 　　<head>　　　　　头部：<title>标题、<meta charset="UTF-8">字符集 　　<body>　　　　　主体 二、标签分类 　　双标签：<html>…</html>　　单标签：<meta charset="UTF-8">　　注释：<!--注释内容--> 三、标签关系 　　嵌套关系：先结束内层，再由内而外关闭，严禁交叉嵌套　　并列关系：同级，如<head>与<body> 四、特殊字符代码 　　&nbsp;空格　&lt;<　&gt;>　&amp;&　&copy;©　&reg;® 教学反思 本节课以“同样文字、不同效果”的对比情境导入，学生对“标签决定显示效果”印象深刻，学习积极性较高；通过乱码对比演示讲解字符集，有效突破了“页面乱码”这一难点。但部分学生对标签的嵌套关系与并列关系仍容易混淆，实际编写时仍有漏写结束标签的情况，后续需增加纠错练习和针对性演示；“试一试”任务中个别学生完成较慢，需合理控制示范节奏，并适当提供操作步骤提示卡，帮助学生顺利完成。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $