浙教版《信息技术》八年级上第7课 网页的数据组织.pptxVIP

第7课

网页的数据组织（浙教版）八年级上

01教学目标02新知导入03HTML语言04HTML标签05超链接06拓展延伸08课堂小结07课堂练习09板书设计

01教学目标1、信息意识：能够认识到网页是信息传播的重要载体，理解信息在现代社会中的核心价值。2、计算思维：能够理解网页结构的层次性和标签间的嵌套关系，培养逻辑思维能力。3、数字化学习与创新：能够利用在线资源自学HTML新特性和最佳实践，不断提升自己的技术水平。4、信息社会责任：能够了解并实践网页的可访问性原则，确保所有用户，包括残障人士，都能平等地访问和使用网页内容。

02新知导入通过观察和探究网页代码，认识HTML语言，掌握HTML文件的基本结构，能初步编辑HTML网页代码;在浏览网页的过程中，能理解超链接的作用。探究：1、你知道网页是如何实现图片呈现的?2、超链接能链接哪些类型的文件?

02新知导入浏览网站时，人们能欣赏到组织有序且包含着丰富的文字、图片、声音、视频等内容的网页，这些都是通过HTML语言来设计、组织的。

03HTML语言HTML(HyperTextMarkedLanguage)即超文本标记语言，定义了网页内容的结构和内容。用HTML编写的超文本文件称为HTML文件，HTML文件一般通过浏览器解释执行。在使用浏览器访问网页时，浏览器读取并分析HTML文件中的代码，根据解释的结果呈现网页内容。

03HTML语言HTML文件可以使用文本编辑器编写，也可以使用专业软件编辑。网页可以通过浏览器的“开发人员工具”看到HTML代码并编辑调试，如图7-1所示。图7-1

03HTML语言亲身体验尝试打开一个自己熟悉的网站，使用浏览器的“开发人员工具”查对比观察网页显示内容和对应的HTML代码。1、首先，打开你的浏览器（如Chrome、Firefox或Safari）。2、在地址栏中输入网址并按回车键。3、等待页面加载完成。4、右键点击网页上的任意位置，选择“检查元素”或“审查元素”（取决于你使用的浏览器）。这将打开浏览器的“开发人员工具”。

03HTML语言新知拓展你知道网页是如何实现图片呈现的?1、图片格式选择：根据不同的使用场景选择合适的图片格式（如JPEG、PNG、SVG等），以平衡图片质量与文件大小。2、SEO优化：合理使用alt属性不仅能提高无障碍性，也对搜索引擎优化（SEO）有益。应确保alt文本简洁且描述性强。3、响应式设计：为了确保图片在不同设备上都能良好显示，可以使用CSS的媒体查询或srcset属性来提供不同分辨率的图片。

03HTML语言新知拓展—HTML技术发展

04HTML标签HTML用标签来规定元素的属性和其在文件中的位置，一个HTML文件一般包含多个标签，HTML标签由“”和“”符号包围的字符串面组成，通常以成对标签出现。HTML文件的基本结构:

04HTML标签网页首页index.html的代码及效果图，如图7-2所示。图7-2

04HTML标签亲身体验根据小组“人工智能”主题网站的制作方案，用HTML语言编写网页首页的代码，尝试插入主题图片，并调试查看网页效果。1、创建一个名为index.html的文件。2、在index.html文件中，编写以下HTML代码：sectionh2主题图片/h2imgsrc=ai_image.jpgalt=人工智能图片width=300/section3、保存index.html文件。4、使用浏览器打开index.html文件，查看网页效果。

04HTML标签为了使网页便于用户浏览，可以使用HTML标签简单设置文本版面:居中对齐:center/center网页背景色:bodybgcolor=颜色名称”/body字体格式:fontface=字体名称size-字号数值color=颜色名称文字/font教你一招

04HTML标签新知拓展—常用标签

04超链接超文本链接(HypertextLink)简称为超链接，可以实现从一个页面跳转到另一个页面或者跳转到页面的其他位置，实现文档互联、网站互联。在HTML文档中，链接元素可以是文本、图片等，建立超链接的标签为a/a,href属性的作用是设置链接的位置，是a/a标签必不可少的。常见格式如下:

04超链接如图7-3所示，代码第8、9行分别在链接元素“发展”和“历史”建立了超链接，点击“发展”和“历史”可打开相应的超链接文档。图7-3

04超链接1、在一个HTML文档中，用来表示网页名称的标签是：和表示网页主体内容的标签是：和随堂练习ti