第7课 网页的数据组织 课件 2023—2024学年浙教版（2023）初中信息技术八年级上册

第7课 网页的数据组织 学习目标 通过观察和探究网页代码，认识HTML语言，掌握HTML文件的基本结构，能初步编辑HTML网页代码；在浏览网页的过程中，能理解超链接的作用。 探究 1.你知道网页是如何实现图片呈现的？ 2.超链接能链接哪些类型的文件？ 建构 浏览网站时，人们能欣赏到组织有序且包含着丰富的文字、图片、声音、视频等内容的网页，这些都是通过HTML语言来设计、组织的。 一、HTML语言 HTML (HyperText Marked Language)即超文本标记语言，定义了网页内容的结构和内容。 用HTML编写的超文本文件称为HTML文件，HTML文件一般通过浏览器解释执行。在使用浏览器访问网页时，浏览器读取并分析 HTML文件中的代码，根据解释的结果呈现网页内容。 一、HTML语言 HTML文件可以使用文本编辑器编写，也可以使用专业软件编辑。网页可以通过浏览器的“开发人员工具”看到HTML代码并编辑调试。 亲身体验 尝试打开一个自己熟悉的网站，使用浏览器的“开发人员工具”查看，对比观察网页显示内容和对应的HTML代码。 二、HTML标签 HTML用标签来规定元素的属性和其在文件中的位置，一个HTML文件一般包含多个标签，HTML标签由和“>”符号包围的字符串而组成， 通常以成对标签出现。 二、HTML标签 HTML文件的基本结构： <html> #标记网页的开始# <head> #标记头部的开始# <title>显示网页的标题</title> </head> #标记头部的结束# <body> #标记网页正文开始# 网页内容 </body> #标记网页正文结束# </html> #标记网页的结束# 二、HTML标签 网页首页index.html的代码及效果图： 首页的HTML代码及效果图 亲身体验 根据小组“人工智能”主题网站的制作方案，用HTML语言编写网 页首页的代码，尝试插入主题图片，并调试查看网页效果。 教你一招 为了使网页便于用户浏览，可以使用HTML标签简单设置文本版面。 居中对齐：＜center＞＜/center＞ 网页背景色：＜body bgcolor="颜色名称"〉＜/body＞ 字体格式：＜font face=字体名称size=字号数值color="颜色 名称"〉文字＜/font＞ 三、超链接 超文本链接(Hypertext Link)简称为超链接，可以实现从一个页面跳转到另一个页面或者跳转到页面的其他位置，实现文档互联、网站互联。 三、超链接 在 HTML文档中，链接元素可以是文本、图片等，建立超链接的标签为<a></a>, href属性的作用是设置链接的位置，是<a></a>标签必不可少的。常见的格式如下： <a href="链接位置"〉链接元素</a> 三、超链接 如图：代码第8、9行分别在链接元素“发展“和“历史“建立 了超链接，点击“发展”和“历史”可打开相应的超链接文档。 随堂练习 1. 在一个HTML文档中，用来表示网页名称的标签是_____和_____,表示网页主体内容的标签是_____和_____。 2. 尝试在网页中加入背景图片。 谢谢聆听！ INTERNET OF THINGS $$