第2课 制作一个网页 · 教案

一、教学目标

1. 知识与技能：认识 HTML 常用标签（标题、段落、图片、链接），理解网页基本骨架。
2. 过程与方法：通过「照骨架填空」的活动，动手写出第一个简单网页。
3. 情感态度与价值观：消除对网页的神秘感，激发用代码表达内容的兴趣。

二、教学重点与难点

• 重点：HTML 的基本结构（html/head/body）与常见标签的作用。
• 难点：理解「标签成对出现、有开始有结束」，以及 head 与 body 的区别。

三、教学准备

多媒体课件、简易 HTML 编辑器或记事本、示例网页代码、学习任务单。

四、教学过程

环节一　情境导入（5 分钟）

回顾第一单元：我们天天看网页，那网页是怎么「做」出来的？

展示一个朴素网页的源代码，提问：这些带尖括号的字母是什么？ 引出 HTML。

环节二　新知探究：HTML 与网页结构（12 分钟）

1. 讲清 HTML：超文本标记语言，用「标签」告诉浏览器怎么显示内容。
2. 演示基本骨架：

<html>
  <head><title>页面标题</title></head>
  <body>
    <h1>大标题</h1>
    <p>这是一段文字。</p>
  </body>
</html>

1. 介绍常见标签：
   • <h1>~`

     标题；

     段落； 图片；` 链接。

2. 强调：标签成对（如 <p>...</p>），<head> 放页面信息，<body> 放看到的内容。

环节三　实践操作：写出你的第一个网页（15 分钟）

四人小组活动：

• 任务一：在编辑器里补全骨架，写下自己的姓名和一句自我介绍（用 <p>）。
• 任务二：加一个大标题 <h1> 和一个链接 <a> 指向学校网站。
• 任务三：在浏览器中打开，检查显示效果。

教师巡视，重点纠正「标签没闭合」「把内容写进 head」两类问题。

环节四　交流总结（8 分钟）

各组展示网页，教师总结：

1. HTML 用标签描述内容，浏览器负责显示；
2. 基本结构：html 包 head 和 body；
3. 标签要成对、闭合，内容放在 body 里。

五、板书设计

制作一个网页

HTML：用标签描述网页的标记语言

骨架：
<html>
  <head><title>标题</title></head>
  <body> 看到的内容 </body>
</html>

常用标签：h1 标题 p 段落 img 图片 a 链接

六、教学反思

（课后填写：学生是否理解 head/body 区别；有无标签不闭合；可增加「改标签看变化」的探究。）