资源简介

(共32张PPT)
第7课 网页的数据组织
年 级：八年级
学 科：中学信息科技（浙教版）
浏览熟悉的网站，观察网页中常见的数据类型。
思考：网页中的数据是如何组织的？
实践：利用“开发人员工具”查看网页代码。
一、HTML语言
HTML(HyperText Markup Language)即超文本标记语言，用来组织网页的结构和内容。
观察：用“审查元素”功能，对比观察左右窗口中，网页显示内容和对应的HTML代码，归纳其结构特点。
审查元素
例如： ……

大部份标签成对出现
由“<”和“>”符号包围的字符串组成
开放标签
闭合标签
HTML用标签来规定元素的属性及其在文件中的位置。
我们的发现：





正文


HTML文档开始
HTML文档结束
身体
头
额头
二、HTML文档的基本结构
思考：能否利用“开发人员工具”编辑调试代码？
尝试修改中间的内容，观察变化，刷新网页后看再观察？
二、HTML文档的基本结构
HTML文档
( 记事本、 VS code等 )
浏览器
解释执行
二、HTML文档的基本结构
任务1：根据小组“人工智能”网站的制作方案，编写网站首页的代码，修改“网页的标题”与“正文内容”, 并调试查看网页效果。
用记事本编写的HTML语言在进行调试查看时，需将保存文件扩展名从“.txt”更改为为“.html”的文件，选择保存类型为“所有文件” 。
三、更多HTML标签
任务2：结合课本P37页中的“阅读材料”，自主探索了解更多HTML标签的使用，记录自己测试成功的标签。
三、更多HTML标签
探索的标签 作用描述 具体应用

标签

标签
标签
……
任务2：结合课本P37页中的“阅读材料”与课本P35页中的“教你一招”，自主探索了解更多HTML标签的使用，记录自己测试成功的标签。
例如：

这是标题 1

这是标题 2

这是标题 3

这是标题 4

这是标题 5

这是标题 6

三、更多HTML标签
探索的标签 作用描述 具体应用

标签
HTML 正文不同字号是通过

-

标签定义的。

标签 可创建一个段落，浏览器会自动地在段落的前后添加空行。

这是一个段落。

这是一个段落。

这是一个段落。

三、更多HTML标签
探索的标签 作用描述 具体应用

标签

标签 可创建一个段落，浏览器会自动地在段落的前后添加空行。
标签 图片标签，用于添加图片,标签没有结束标签。
常见格式：
探索的标签 作用描述 具体应用
标签
标签 图片标签，用于添加图片,标签没有结束标签。
三、更多HTML标签
居中对齐：

网页背景色：
为了使网页便于用户浏览，可使用HTML标签设置版面与格式。
字体格式：
文字
教你一招
三、更多HTML标签
思考:这些页面间如何产生关联，实现跳转？
一个网站包含了1个主页面 ，多个分页面。
四、超链接
超链接：超文本链接 (Hypertext Link)，可以实现从一个页面跳转到另一个页面，实现文档互联、网站互联。
四、超链接
标签 用于插入超链接。
常见格式：链接元素
可以是文本、图像等
外部网址,内部网页等
四、超链接
标签 用于插入超链接。
拓展思考:如何为图像设置超链接？
常见格式：




例如：
任务3：结合网站设计方案，合理规划超链接的设置,补全以下代码。
四、超链接
找一找：以下代码中超链接的设置存在哪些错误，请进行修改。
代码图1
代码图2

四、超链接
找一找：以下代码中超链接的设置存在哪些错误，请进行修改。
四、超链接
代码图3
五、 小结与评价
HTML 文档基本结构
网页的开始与结束 ——
标记网页头部 ——
显示网页标题 ——
网页的正文 —— （含 bgcolor 属性 ）
HTML 语言
可用 “开发人员工具查看”
可用记事本等工具编写
用浏览器解释执行
更多 HTML 标签

—— 段落

—— 不同字号标题
—— 添加图片
—— 居中
—— 字体格式（含 face 属性、size 属性、color 属性 ）

—— 换行
……
超链接
—— 含 href 属性
链接元素 —— 文本、图像等
网页的数据组织
评价内容指标
通过观察和探究网页代码，理解HTML语言的作用。
明确HTML文档的基本结构，会熟练使用