【核心素养目标】第7课《网页的数据组织》课件+教案+素材-【浙教版2023】《信息科技》八上
文档属性
| 名称 | 【核心素养目标】第7课《网页的数据组织》课件+教案+素材-【浙教版2023】《信息科技》八上 | | |
| 格式 | zip | ||
| 文件大小 | 20.4MB | ||
| 资源类型 | 试卷 | ||
| 版本资源 | 浙教版 | ||
| 科目 | 信息技术（信息科技） | ||
| 更新时间 | 2024-09-24 16:18:46 | ||
文档简介
(共29张PPT)
第7课
网页的数据组织
（浙教版）八年级
上
01
教学目标
02
新知导入
03
HTML语言
04
HTML标签
05
超链接
06
拓展延伸
08
课堂小结
07
课堂练习
09
板书设计
01
教学目标
1、信息意识：能够认识到网页是信息传播的重要载体，理解信息在现代社会中的核心价值。
2、计算思维：能够理解网页结构的层次性和标签间的嵌套关系，培养逻辑思维能力。
3、数字化学习与创新：能够利用在线资源自学HTML新特性和最佳实践，不断提升自己的技术水平。
4、信息社会责任：能够了解并实践网页的可访问性原则，确保所有用户，包括残障人士，都能平等地访问和使用网页内容。
02
新知导入
通过观察和探究网页代码，认识HTML语言，掌握HTML文件的基本结构，能初步编辑HTML网页代码;在浏览网页的过程中，能理解超链接的作用。
探究：
1、你知道网页是如何实现图片呈现的
2、超链接能链接哪些类型的文件
02
新知导入
浏览网站时，人们能欣赏到组织有序且包含着丰富的文字、图片、声音、视频等内容的网页，这些都是通过HTML语言来设计、组织的。
03
HTML语言
HTML(HyperText Marked Language)即超文本标记语言，定义了网页内容的结构和内容。用HTML编写的超文本文件称为HTML文件，HTML文件一般通过浏览器解释执行。在使用浏览器访问网页时，浏览器读取并分析HTML文件中的代码，根据解释的结果呈现网页内容。
03
HTML语言
HTML文件可以使用文本编辑器编写，也可以使用专业软件编辑。网页可以通过浏览器的“开发人员工具”看到HTML代码并编辑调试，如图7-1所示。
图7-1
03
HTML语言
亲身体验
尝试打开一个自己熟悉的网站，使用浏览器的“开发人员工具”查对比观察网页显示内容和对应的HTML代码。
1、首先，打开你的浏览器（如Chrome、Firefox或Safari）。
2、在地址栏中输入网址 "https://www." 并按回车键。
3、等待页面加载完成。
4、右键点击网页上的任意位置，选择“检查元素”或“审查元素”（取决于你使用的浏览器）。这将打开浏览器的“开发人员工具”。
03
HTML语言
新知拓展
你知道网页是如何实现图片呈现的
1、图片格式选择：根据不同的使用场景选择合适的图片格式（如JPEG、PNG、SVG等），以平衡图片质量与文件大小。
2、SEO优化：合理使用alt属性不仅能提高无障碍性，也对搜索引擎优化（SEO）有益。应确保alt文本简洁且描述性强。
3、响应式设计：为了确保图片在不同设备上都能良好显示，可以使用CSS的媒体查询或srcset属性来提供不同分辨率的图片。
03
HTML语言
新知拓展—HTML技术发展
04
HTML标签
HTML用标签来规定元素的属性和其在文件中的位置，一个HTML文件一般包含多个标签，HTML标签由“<”和“>”符号包围的字符串面组成，通常以成对标签出现。HTML文件的基本结构:
04
HTML标签
网页首页index.html的代码及效果图，如图7-2所示。
图7-2
04
HTML标签
亲身体验
根据小组“人工智能”主题网站的制作方案，用HTML语言编写网页首页的代码，尝试插入主题图片，并调试查看网页效果。
1、创建一个名为index.html的文件。
2、在index.html文件中，编写以下HTML代码：
3、保存index.html文件。
4、使用浏览器打开index.html文件，查看网页效果。
04
HTML标签
为了使网页便于用户浏览，可以使用HTML标签简单设置文本版面:
居中对齐:
网页背景色:文字
教你一招
04
HTML标签
新知拓展—常用标签
04
超链接
超文本链接(HypertextLink)简称为超链接，可以实现从一个页面跳转到另一个页面或者跳转到页面的其他位置，实现文档互联、网站互联。在HTML文档中，链接元素可以是文本、图片等，建立超链接的标签为,href属性的作用是设置链接的位置，是标签必不可少的。常见格式如下:
04
超链接
如图7-3所示，代码第8、9行分别在链接元素“发展”和“历史”建立了超链接，点击“发展”和“历史”可打开相应的超链接文档。
图7-3
04
超链接
1、在一个HTML文档中，用来表示网页名称的标签是：
和
表示网页主体内容的标签是：
和
随堂练习
<br><head><br><body><br><p><br>04<br>超链接<br>随堂练习<br>2.尝试在网页中加入背景图片<br>1、首先，确保你有一个想要作为背景的图片文件，例如background.jpg。<br>2、将图片文件放在与HTML文件相同的目录下，或者使用绝对路径指向图片文件。<br>3、在HTML文件中，使用CSS样式来设置<body>标签的背景图片。可以在<style>标签内添加CSS代码，或者直接在<body>标签中使用style属性。<br>05<br>超链接<br>新知拓展<br>超链接能链接哪些类型的文件 <br>1、视频压缩：视频文件通常很大，为了减少传输所需的时间和带宽，视频在上传到服务器之前会进行压缩。常见的视频压缩标准包括H.264、H.265（HEVC）和VP9等。这些压缩算法能够显著减少视频文件的大小，同时尽可能保持视频质量。<br>2、内容分发网络：CDN是一个分布式的网络，它包含多个数据中心，这些数据中心分布在全球各地。当用户请求一个视频时，CDN会根据用户的地理位置将请求路由到最近的服务器。这样可以减少数据传输的距离和时间，从而提高传输速度。<br>06<br>拓展延伸<br>1、HTML的五大功能<br>06<br>拓展延伸<br>2、HTML网页生活有哪些影响？<br>（1）改变应用使用方式：HTML5的普及使得许多原生APP被基于浏览器的网页应用取代，这些应用无需下载安装，直接在浏览器中运行，如《神经猫》游戏。<br>（2）提升开发效率：HTML5支持跨平台开发，程序员只需开发一套代码即可在PC、Mac、iPhone等多种设备上运行，大大提升了开发效率。<br>（3）优化系统资源：由于HTML5不需要依赖第三方插件（如Flash）来展示多媒体内容，浏览器占用的系统资源减少，设备的电量消耗也相应降低。<br>06<br>拓展延伸<br>3、HTML网页对于青少年有哪些好处和坏处？<br>好处：<br>学习编程基础：掌握HTML是学习其他编程语言的基础，有助于青少年培养逻辑思维和解决问题的能力。<br>坏处：<br>过度依赖网络：长时间沉浸在网页设计和浏览中可能导致青少年过度依赖网络<br>06<br>拓展延伸<br>4、HTML网页对社会的影响？<br>（1）促进信息传播：HTML网页作为信息共享的主要形式，极大地促进了信息的快速传播和交流。<br>（2）推动经济发展：电子商务的兴起与发展离不开HTML技术的支持，它改变了传统的商业模式，推动了经济增长。<br>（3）改善公共服务：政府和公共服务部门通过HTML网页提供在线服务，提高了办事效率和透明度。<br>07<br>课堂练习<br>请回答HTML网页未来发展趋势？<br>1、更加注重用户体验：未来的HTML网页将更加重视用户体验设计，提供更加直观、便捷的交互方式。<br>2、集成更多新技术：随着技术的不断进步，HTML网页将集成人工智能、大数据等新技术，为用户提供更加智能化的服务。<br>3、适应多端设备：随着移动设备的普及，HTML网页将继续优化以适应不同尺寸和类型的显示设备。<br>08<br>课堂小结<br>通过网页的数据组织课程，我们学习了HTML的基本结构和标签的使用，了解了如何通过标签来定义网页的内容和布局。了解了响应式设计的概念和应用。随着移动设备的普及，响应式设计变得越来越重要。通过学习响应式设计，我们能够根据不同的设备和屏幕尺寸来调整网页的布局和样式，确保用户在任何设备上都能获得良好的浏览体验。<br>09<br>板书设计<br>网页的数据组织<br>一、HTML语言<br>二、HTML标签<br>三、超链接<br>课后作业<br>1、回家下载HTML网页编辑软件尝试简单编辑一个网页。<br>https://www.21cnjy.com/recruitment/home/fine中小学教育资源及组卷应用平台<br>信息技术 第7课 网页的数据组织<br>课题 网页的数据组织 单元 第二单元 学科 信息技术 年级 八年级<br>教材分析 《网页的数据组织》该课时教材编排了“HTML语言-HTML标签—超链接”的系列学习活动，旨在让学生通过观察和探究网页代码，认识HTML语言，掌握HTML文件的基本结构，能初步编辑HTML网页代码;在浏览网页的过程中，能理解超链接的作用。教材编排合理，教学环节注重实践与理论相结合，教材内容贴近学生生活实际，符合八年级学生认知特点。<br>教学目标 1、信息意识：能够认识到网页是信息传播的重要载体，理解信息在现代社会中的核心价值。 2、计算思维：能够理解网页结构的层次性和标签间的嵌套关系，培养逻辑思维能力。 3、数字化学习与创新：能够利用在线资源自学HTML新特性和最佳实践，不断提升自己的技术水平。 4、信息社会责任：能够了解并实践网页的可访问性原则，确保所有用户，包括残障人士，都能平等地访问和使用网页内容。<br>重点 一、HTML语言二、HTML标签三、超链接<br>难点 1、超链接<br>教学过程<br>教学环节 教师活动 学生活动 设计意图<br>导入新课 通过观察和探究网页代码，认识HTML语言，掌握HTML文件的基本结构，能初步编辑HTML网页代码;在浏览网页的过程中，能理解超链接的作用。探究：1、你知道网页是如何实现图片呈现的 2、超链接能链接哪些类型的文件 浏览网站时，人们能欣赏到组织有序且包含着丰富的文字、图片、声音、视频等内容的网页，这些都是通过HTML语言来设计、组织的。 观看通过老师讲解和学生之间的相互讨论生活中的网页代码的运用场景。 帮助学生理解网页代码的概念，打开课堂。<br>讲授新课 一 、HTML语言HTML(HyperText Marked Language)即超文本标记语言，定义了网页内容的结构和内容。用HTML编写的超文本文件称为HTML文件，HTML文件般通过浏览器解释执行。在使用浏览器访问网页时，浏览器读取并分析HTML文件中的代码，根据解释的结果呈现网页内容。HTML文件可以使用文本编辑器编写，也可以使用专业软件编辑。网页可以通过浏览器的“开发人员工具”看到HTML代码并编辑调试，如图7-1所示。亲身体验尝试打开一个自己熟悉的网站，使用浏览器的“开发人员工具”查对比观察网页显示内容和对应的HTML代码。新知拓展你知道网页是如何实现图片呈现的 HTML技术发展二 、互联网应用的数据传输HTML用标签来规定元素的属性和其在文件中的位置，一个HTML文件一般包含多个标签，HTML标签由“<”和“>”符号包围的字符串面组成，通常以成对标签出现。HTML文件的基本结构:网页首页index.html的代码及效果图，如图7-2所示。亲身体验根据小组“人工智能”主题网站的制作方案，用HTML语言编写网页首页的代码，尝试插入主题图片，并调试查看网页效果。教你一招为了使网页便于用户浏览，可以使用HTML标签简单设置文本版面:居中对齐:<center></center>网页背景色:<body bgcolor="颜色名称”></body>字体格式:<font face=字体名称 size-字号数值 color="颜色名称">文字</font>新知拓展HTML常用标签三、超链接超文本链接(HypertextLink)简称为超链接，可以实现从一个页面跳转到另一个页面或者跳转到页面的其他位置，实现文档互联、网站互联。在HTML文档中，链接元素可以是文本、图片等，建立超链接的标签为<a></a>,href属性的作用是设置链接的位置，是<a></a>标签必不可少的。常见格式如下:如图7-3所示，代码第8、9行分别在链接元素“发展”和“历史”建立了超链接，点击“发展”和“历史”可打开相应的超链接文档。随堂练习1、.在一个HTML文档中，用来表示网页名称的标签是： 和 表示网页主体内容的标签是： 和 。2.尝试在网页中加入背景图片。新知拓展超链接能链接哪些类型的文件 四 、知识拓展 1、HTML的五大功能2、HTML网页生活有哪些影响？3、HTML网页对于青少年有哪些好处和坏处？4、HTML网页对社会的影响？五、课堂练习 请回答HTML网页未来发展趋势？ 学生之间互相讨论在我们日常生活中的HTML语言的应用场景有哪些。学生通过观看课件和听老师讲解，了解HTML标签的运用场景。 学生之间相互交流日常生活中有哪些超链接运用场景。学生通过观看视频和自我思考我们生活中HTML网页的运用。学生查找资料，相互讨论对于本堂课中老师提出的问题进行解答。 帮助学生积极融入课堂，提高学生学习积极性。 学生通过边看边听的形式HTML标签的实现原理。 帮助学生进一步理解超链接的运行原理。让学生通过视频思考，进一步加深对课堂所学内容的理解。 让学生巩固了解本堂课的内容，加深学生对所学知识的印象。<br>布置作业 回家下载HTML网页编辑软件尝试简单编辑一个网页。 完成作业 培养学生查阅资料的能力，分析解决问题的能力<br>课堂小结 通过网页的数据组织课程，我们学习了HTML的基本结构和标签的使用，了解了如何通过标签来定义网页的内容和布局。了解了响应式设计的概念和应用。随着移动设备的普及，响应式设计变得越来越重要。通过学习响应式设计，我们能够根据不同的设备和屏幕尺寸来调整网页的布局和样式，确保用户在任何设备上都能获得良好的浏览体验。 分组总结归纳 锻炼学生的总结能力，逻辑思维、语言表达能力。<br>板书 一、HTML语言二、HTML标签三、超链接 学习、记忆及勾画知识点 明确教学内容及重点和难点<br>21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）<br>HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)</div></div></div></div> <div class="dis"> <a data-sign="signin" data-toggle="modal" href="https://www.21cnjy.com/H/14/240960/21281776.shtml?from=mip" target="_blank">点击下载</a></div></div></div></div> <div class="right-wrapper"> <div class="sCard"> <div class="sCard-header"> <span class="sCard-headerText">同课章节目录</span></div> <div class="sCard-item"> <div class="sCard-itemText"> <ul class="list__tit"></ul></div></div></div></div></div></div> <div class="nav-fix" style="height: 13vw;"> <div class="nav-item" style="display: flex;" id="down" data-isvip="not_is_vip"> <div style="width:100%;" bindtap="bind_down_for_old_buy" > <div style="text-align: center;font-weight: 600;font-size: 16px;background-color: red;color: white;height: 100%;" type="primary" hover-stop-propagation="true">点击下载</div></div></div> <div style="text-align: center; font-weight: 600; font-size: 16px; color: white; height: 100%;" id="downvip" class="nav-item" data-statu="open" data-isvip="is_vip" bindtap="bind_down_for_old_buy">VIP下载</div></div></div> <section class="footer pmk_990_show pmk_1040_show"> <div class="footerCon" style="padding: 10px 0 18px;"> <div class="footerCopy" style="text-align:center">© 21世纪教育网</div> <div class="footerCopy" style="text-align:center">友情链接：<a href="https://www.21cnjy.com/" target="_blank">21课件</a> <a href="https://www.21cnjy.com/" target="_blank">21教件</a> <a href="https://paike.21cnjy.com/" target="_blank">排课软件</a> <a href="https://zujuan.21cnjy.com/" target="_blank">21组卷网</a> <a href="https://book.21cnjy.com/" target="_blank">21书城</a> <a href="https://www.5yggg.com/" target="_blank">汉字大全</a></div></div> </section> <script src="/static/new_h5/js/jquery.min.2.1.1.js"></script><script src="/static/new_h5/js/common.js"></script><script src="/static/new_h5/plugins/layer/layer.js"></script><script src="https://unpkg.byted-static.com/bridge/douyin_open/1.0.10/lib/douyin_open.umd.js"></script><script>
var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?4d3a61fa5f43aa7235738609fe3000f0";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();</script><script src="/static/new_h5/js/login.js"></script><script src="/static/new_h5/js/zydown.js"></script> </body> </html>
第7课
网页的数据组织
（浙教版）八年级
上
01
教学目标
02
新知导入
03
HTML语言
04
HTML标签
05
超链接
06
拓展延伸
08
课堂小结
07
课堂练习
09
板书设计
01
教学目标
1、信息意识：能够认识到网页是信息传播的重要载体，理解信息在现代社会中的核心价值。
2、计算思维：能够理解网页结构的层次性和标签间的嵌套关系，培养逻辑思维能力。
3、数字化学习与创新：能够利用在线资源自学HTML新特性和最佳实践，不断提升自己的技术水平。
4、信息社会责任：能够了解并实践网页的可访问性原则，确保所有用户，包括残障人士，都能平等地访问和使用网页内容。
02
新知导入
通过观察和探究网页代码，认识HTML语言，掌握HTML文件的基本结构，能初步编辑HTML网页代码;在浏览网页的过程中，能理解超链接的作用。
探究：
1、你知道网页是如何实现图片呈现的
2、超链接能链接哪些类型的文件
02
新知导入
浏览网站时，人们能欣赏到组织有序且包含着丰富的文字、图片、声音、视频等内容的网页，这些都是通过HTML语言来设计、组织的。
03
HTML语言
HTML(HyperText Marked Language)即超文本标记语言，定义了网页内容的结构和内容。用HTML编写的超文本文件称为HTML文件，HTML文件一般通过浏览器解释执行。在使用浏览器访问网页时，浏览器读取并分析HTML文件中的代码，根据解释的结果呈现网页内容。
03
HTML语言
HTML文件可以使用文本编辑器编写，也可以使用专业软件编辑。网页可以通过浏览器的“开发人员工具”看到HTML代码并编辑调试，如图7-1所示。
图7-1
03
HTML语言
亲身体验
尝试打开一个自己熟悉的网站，使用浏览器的“开发人员工具”查对比观察网页显示内容和对应的HTML代码。
1、首先，打开你的浏览器（如Chrome、Firefox或Safari）。
2、在地址栏中输入网址 "https://www." 并按回车键。
3、等待页面加载完成。
4、右键点击网页上的任意位置，选择“检查元素”或“审查元素”（取决于你使用的浏览器）。这将打开浏览器的“开发人员工具”。
03
HTML语言
新知拓展
你知道网页是如何实现图片呈现的
1、图片格式选择：根据不同的使用场景选择合适的图片格式（如JPEG、PNG、SVG等），以平衡图片质量与文件大小。
2、SEO优化：合理使用alt属性不仅能提高无障碍性，也对搜索引擎优化（SEO）有益。应确保alt文本简洁且描述性强。
3、响应式设计：为了确保图片在不同设备上都能良好显示，可以使用CSS的媒体查询或srcset属性来提供不同分辨率的图片。
03
HTML语言
新知拓展—HTML技术发展
04
HTML标签
HTML用标签来规定元素的属性和其在文件中的位置，一个HTML文件一般包含多个标签，HTML标签由“<”和“>”符号包围的字符串面组成，通常以成对标签出现。HTML文件的基本结构:
04
HTML标签
网页首页index.html的代码及效果图，如图7-2所示。
图7-2
04
HTML标签
亲身体验
根据小组“人工智能”主题网站的制作方案，用HTML语言编写网页首页的代码，尝试插入主题图片，并调试查看网页效果。
1、创建一个名为index.html的文件。
2、在index.html文件中，编写以下HTML代码：
主题图片
3、保存index.html文件。
4、使用浏览器打开index.html文件，查看网页效果。
04
HTML标签
为了使网页便于用户浏览，可以使用HTML标签简单设置文本版面:
居中对齐:
网页背景色:文字
教你一招
04
HTML标签
新知拓展—常用标签
04
超链接
超文本链接(HypertextLink)简称为超链接，可以实现从一个页面跳转到另一个页面或者跳转到页面的其他位置，实现文档互联、网站互联。在HTML文档中，链接元素可以是文本、图片等，建立超链接的标签为,href属性的作用是设置链接的位置，是标签必不可少的。常见格式如下:
04
超链接
如图7-3所示，代码第8、9行分别在链接元素“发展”和“历史”建立了超链接，点击“发展”和“历史”可打开相应的超链接文档。
图7-3
04
超链接
1、在一个HTML文档中，用来表示网页名称的标签是：
和
表示网页主体内容的标签是：
和
随堂练习