2.3.1-﹤ img ﹥ 标签基本语法（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 ﹤ img ﹥ 标签基本语法 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 使学生了解<img>标签的基本功能和用途。 · 让学生掌握<img>标签的基本语法和常用属性。 · 培养学生使用<img>标签插入图片的能力，并学会设置图片的尺寸、对齐方式和替代文本等。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. <img>标签的基本语法。 2. <img>标签的常用属性，如src、alt、width、height、align等。 教学难点 · 图片路径的正确书写。 · 图片尺寸的设置与调整。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 讲授法：通过教师的讲解，传授<img>标签的基本知识和使用方法。 · 示范法：教师现场演示如何使用<img>标签插入和调整图片。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 回顾上节课学习的HTML基本结构，如<html>、<head>、<body>等标签。 · 展示几个包含图片的网页，激发学生的学习兴趣。 2分钟 讲授新课 练习指导 `<img>` 标签是 HTML 中用于插入图像的元素。它的基本语法如下： ```html <img src="image-source" alt="alternative-text" width="image-width" height="image-height" align="image-alignment"> ``` 常用属性： 1. `src`：指定图像的 URL。这是一个必需的属性，用于告诉浏览器从哪里加载图像。 ```html <img src="example.jpg"> ``` 2. `alt`：提供图像的替代文本。这是一个可选属性，用于在图像无法加载时显示给用户。它对于无障碍访问和搜索引擎优化（SEO）非常重要。 ```html <img src="example.jpg" alt="A description of the image"> ``` 3. `width` 和 `height`：设置图像的宽度和高度。这些是可选属性，用于调整图像在页面上显示的大小。可以使用像素值或百分比。 ```html <img src="example.jpg" width="200" height="100"> ``` 4. `align`：设置图像的对齐方式。这是一个已废弃的属性，不推荐使用。取而代之的是使用 CSS 的 `float` 或 `text-align` 属性来实现图像对齐。 ```html <!-- 已废弃的 align 属性 --> <img src="example.jpg" align="left"> <!-- 使用 CSS 的 float 属性 --> <img src="example.jpg" style="float: left;"> <!-- 使用 CSS 的 text-align 属性 --> <div style="text-align: center;"> <img src="example.jpg"> </div> ``` 注意：在实际开发中，建议使用 CSS 来控制图像的样式和布局，而不是使用已废弃的 HTML 属性。这样可以实现更好的可维护性和可扩展性。 10分钟 7分钟 自主学习 8分钟 练习训练 · 请写出插入一张名为“example.jpg”的图片的HTML代码。 · 如果图片路径为“/images/pic.png”，但图片无法显示，请给出完整的<img>标签，包括替代文本。 12分钟 布置作业 · 在自己的网页项目中插入至少两张图片，并设置合适的尺寸和对齐方式。 · 为每张图片填写替代文本，确保网页的可访问性。 1分钟 总结回顾 1. <img>标签的基本语法和常用属性。 2. 图片路径的正确书写方法。 3. 图片尺寸和对齐方式的设置技巧。 4. 替代文本（alt属性）的重要性和填写方法。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$