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

第7课

网页结构设计

第2课时（赣科技版）七年级上

01学习目标内容总览02新知导入03探究新知04课堂练习05课堂总结课后作业06

教学目标掌握HTML基本操作和标签使用方法，培养对网页制作的兴趣和主动探索精神，增强对信息层次结构的理解算思维信息社会责任数字化学习与创新信息意识学会通过HTML标签和属性组织网页内容，培养结构化信息处理技能和逻辑思维能力，提升解决问题的能力。掌握如何在网页中添加图像与链接，提升网页的美感和功能性，激发创新设计思维，增强网页设计能力。理解HTML规范的重要性，编写符合标准的网页，提高网页的可访问性和用户体验，树立良好的数字伦理观念。

新知导入

新知讲解想一想HTML的基本操作1、HTML的基本操作HTML标签的种类多种多样，帮助网页实现各种效果。下面我们来学习一些基础标签。

新知讲解想一想HTML的基本操作2、HTML标题HTML标题是通过h1--h6标签来定义的。标题无处不在，它的应用范围十分广泛：网站结构、写作文等。

新知讲解想一想HTML的基本操作2、HTML标题这里有六个标题元素标签--h1、h2、h3h4、h5、h6。

新知讲解想一想HTML的基本操作2、HTML标题每个元素代表文档中不同级别的内容：h1表示主标题，h2表示二级子标题，h3表示三级子标题，h4、h5、h6字体的大小依次递减。

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

新知讲解议一议1、在HTML中使用H标题和设置字体大小有什么区别？（1）语义不同：使用H标题标签告诉浏览器内容的重要性和层级，而设置字体大小只是改变文字的视觉效果。（2）结构化信息：H标题标签帮助创建网页的层次结构，而设置字体大小只是改变内容的外观。（3）默认样式：H标题标签有默认的样式以突出显示标题，而设置字体大小需要手动使用CSS调整。（4）可访问性：H标题标签被屏幕阅读器识别以帮助导航，而设置字体大小不会影响页面结构的理解。

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

新知讲解做一做1、结合所学知识，对下面文字添加标签，使其在Web浏览器中显示成结构层级。!DOCTYPEhtmlhtmlheadmetacharset=utf-8title社会主义核心价值观/title/headbodyh1社会主义核心价值观/h1p富强民主文明和谐/pp自由平等公正法治/pp爱国敬业诚信友善/p/body/html

新知讲解想一想HTML的基本操作3、HTML图像HTML图像是通过标签img来定义的。使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。

新知讲解想一想HTML的基本操作3、HTML图像需要注意的是img元素是自关闭元素，不需要结束标记，也就是说，此标签不需要/img，属性width=206，height=36代表此张图片宽206，长36。

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

新知讲解想一想HTML的基本操作4、HTML链接在href=“”中添加网址，点击文字实现跳转，如下图所示，点击文字后将跳转到中华人民共和国教育部政府门户网站。

新知讲解想一想HTML的基本操作5、其他标签下面介绍一些实用标签，同学们可以自行操作查看效果。标签名称标签作用br/插入一个换行符b/b创建粗体字i/i创建斜体字em/em强调内容strong/strong加粗字体table/table创建一个表格tr/tr开始表格中的每一行td/td开始表格中的每一列div/div创建一个块级元素

新知讲解议一议1、你认为在网页中使用图像和链接会带来什么样的效果？（1）增加视觉吸引力：图片可以让网页看起来更有趣和生动。（2）提供更多信息：通过点击链接，可以跳转到更多相关的信息或页面。（3）改善用户体验：图片和链接能帮助用户更容易找到所需的信息。（4）增强互动性：链接让用户可以点击并与网页内容进行互动。（5）导航更方便：使用链接可以在同一页面或不同页面之间轻松导航。

新知讲解想一想HTML标签的属性1、什么是标签的属性HTML属性是为HTML元素提供的附加信息，一般放在开始标签内也就是第一个标签里的括号内，而且属性总是以名称或值对的形式出现，例如，图像标签里的width和