(
课件网) 八年级信息技术 网页的数据组织 《第七课》 学习目标 目录 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 课堂小结 课堂小结 课后作业 同学们辛苦啦！ 感谢同学们的观看！ 《第七课》 ... ...
