赣科技版信息科技七年级上册 第7课《网页结构设计》第2课时 教案.doc

第7.2课《网页结构设计》教学设计

课题

网页结构设计

单元

第七单元

学科

信息技术

年级

七年级上

核心素

养目标

1、信息意识：掌握HTML基本操作和标签使用方法，培养对网页制作的兴趣和主动探索精神，增强对信息层次结构的理解。

2、计算思维：学会通过HTML标签和属性组织网页内容，培养结构化信息处理技能和逻辑思维能力，提升解决问题的能力。

3、数字化学习与创新：掌握如何在网页中添加图像与链接，提升网页的美感和功能性，激发创新设计思维，增强网页设计能力。

4、信息社会责任：理解HTML规范的重要性，编写符合标准的网页，提高网页的可访问性和用户体验，树立良好的数字伦理观念。

教学重点

了解标签和网页结构

认识常用HTML标签

教学难点

掌握标签属性及应用

理解语义和使用规范

教学过程

教学环节

教师活动

学生活动

设计意图

导入新课

视频导入：《html标签属性》

观看视频，了解html标签属性。

培养学生的观察力和创造力，

讲授新课

一、想一想

HTML的基本操作

1、HTML的基本操作

HTML标签的种类多种多样，帮助网页实现各种效果。下面我们来学习一些基础标签。

2、HTML标题

HTML标题是通过h1--h6标签来定义的。标题无处不在，它的应用范围十分广泛：网站结构、写作文等。

这里有六个标题元素标签--h1、h2、h3h4、h5、h6。

每个元素代表文档中不同级别的内容：h1表示主标题，h2表示二级子标题，h3表示三级子标题，h4、h5、h6字体的大小依次递减。

扩展阅读

HTML中的空格与小写标签

在代码中可能包含了很多的空格，但实际上无论你用了多少空格（包括空格字符，包括换行），当渲染这些代码的时候，HTML解释器会将连续出现的空格字符减少为一个单独的空格符。

二、议一议

1、在HTML中使用H标题和设置字体大小有什么区别？

（1）语义不同：使用H标题标签告诉浏览器内容的重要性和层级，而设置字体大小只是改变文字的视觉效果。

（2）结构化信息：H标题标签帮助创建网页的层次结构，而设置字体大小只是改变内容的外观。

（3）默认样式：H标题标签有默认的样式以突出显示标题，而设置字体大小需要手动使用CSS调整。

（4）可访问性：H标题标签被屏幕阅读器识别以帮助导航，而设置字体大小不会影响页面结构的理解。

三、做一做

1、结合所学知识，对下面文字添加标签，使其在Web浏览器中显示成结构层级。

!DOCTYPEhtml

htmlhead

metacharset=utf-8

title社会主义核心价值观/title

/head

body

h1社会主义核心价值观/h1

p富强民主文明和谐/p

p自由平等公正法治/p

p爱国敬业诚信友善/p

/body/html

四、想一想

HTML的基本操作

3、HTML图像

HTML图像是通过标签img来定义的。使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。

需要注意的是img元素是自关闭元素，不需要结束标记，也就是说，此标签不需要/img，属性width=206，height=36代表此张图片宽206，长36。

4、HTML链接

HTML链接是通过标签a来定义的。a标签，也叫anchor(锚点)元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。

在href=“”中添加网址，点击文字实现跳转，如下图所示，点击文字后将跳转到中华人民共和国教育部政府门户网站。

5、其他标签

下面介绍一些实用标签，同学们可以自行操作查看效果。

五、议一议

1、你认为在网页中使用图像和链接会带来什么样的效果？

（1）增加视觉吸引力：图片可以让网页看起来更有趣和生动。

（2）提供更多信息：通过点击链接，可以跳转到更多相关的信息或页面。

（3）改善用户体验：图片和链接能帮助用户更容易找到所需的信息。

（4）增强互动性：链接让用户可以点击并与网页内容进行互动。

（5）导航更方便：使用链接可以在同一页面或不同页面之间轻松导航。

六、想一想

HTML标签的属性

1、什么是标签的属性

HTML属性是为HTML元素提供的附加信息，一般放在开始标签内也就是第一个标签里的括号内，而且属性总是以名称或值对的形式出现，例如，图像标签里的width和height属性，更改他们的数值大小，就可以对图像的大小进行定义。

2、HTML链接的属性

在标签a中使用了href属性来描述链接的地址。

3、HTML空链接

HTML空链接是指将鼠标放在链接上后，鼠标变成手形，但单击后仍停留在当前页面，主要为了能更好地看到最终的效果。将属性href设置为#就可以实现此功能。

4、HTML链接与URL

URL全称为HTML统一资源定位器，