资源简介

(共22张PPT)
八年级信息技术
网页的数据组织
《第七课》
学习目标
目录
01.
课前导入
02.
认识HTML语言
03.
编辑HTML网页
04.
探究超链接及课堂小结
01
课前导入
情境创设：
如右图“中国大运河博物馆”官网
思考： “网页中的数据（文字、图片
、视频）是如何组织的？”
导入新课
中国大运河博物馆
02
认识HTML语言
1. 认识HTML语言
提问互动：
“浏览网页时，文字、图片、视频是如何‘排兵布阵’的？”
浏览网站时，人们能欣赏到组织有序且包含着丰富的文字、图片、声音、视频等内容的网页，这些都是通过HTML语言来设计、组织的。
核心知识点：
HTML定义：超文本标记语言（HyperText Markup Language），用“标签”描述网页内容。
标签特性：
成对出现（如

内容

），少数自闭合（如）。
标签可嵌套（如

段落

）。
1. 认识HTML语言
1. 认识HTML语言
HTML文件可以使用文本编辑器编写，也可以使用专业软件编辑。网页可以通过浏览器的“开发人员工具”看到HTML代码并编辑调试，如下图所示。
尝试打开一个自己熟悉的网站，使用浏览器的“开发人员工具”查看，对比观察网页显示内容和对应的HTML代码。
课堂练习
03
编辑HTML网页
2. 编辑HTML网页
HTML用标签来规定元素的属性和其在文件中的位置，一个HTML文件一般包含多个标签，HTML标签由“<”和“>”符号包围的字符串而组成，通常以成对标签出现。
HTML文件的基本结构:
#标记网页的开始#
#标记头部的开始#

#标记头部的结束# #标记网页正文开始#
网页内容
#标记网页正文结束# #标记网页的结束#
2. 编辑HTML网页
2. 编辑HTML网页
04
探究超链接
3、探究超链接
定义：
超文本链接(HypertextLink)简称为超链接，可以实现从一个页面跳转到另一个页面或者跳转到页面的其他位置，实现文档互联、网站互联。在 HTML文档中，链接元素可以是文本、图片等，建立超链接的标签为， href属性的作用是设置链接的位置，是标签必不可少的。
常见格式如下:
链接元素
3、探究超链接
超链接类型对比
情境案例：
内部链接：跳转到同一网站的其他页面（如最新动态）。
外部链接：跳转到其他网站（如浙江教育厅）。
锚点链接：跳转到页面内指定位置（需提前定义）。
路径问题解析：
用文件夹结构图说明相对路径（../images/photo.jpg）和绝对路径（C:/website/images/photo.jpg）的区别。
3、探究超链接
实战演练：制作“网站导航栏”
任务要求：
在网页顶部添加3个超链接，分别指向：
本地“介绍.html”文件（相对路径）。
百度首页（绝对路径）。
本页底部（锚点链接）。
测试链接是否有效。
示例代码（如左图）：
05
课堂小结
课堂小结
课后作业
同学们辛苦啦！
感谢同学们的观看！
《第七课》

展开更多......

收起↑