html网页制作chapter1基本标签教程
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 标记语言是由特定字符分隔的基本元素，指定基 本元素中所包含的文本如何显示
13
html 文件
• html 文件是一个包含标记的文本文件 • 这些标记指导浏览器怎样显示这个页面 • html 文件必须有 htm 或者 html 扩展名 • html 文件可以用一个简单的文本编辑器创建
html 文件
<body bgcolor="red">
• 属性通常由属性名和值成对出现，就像这样： name="value"。属性通常是附加给html元素的 开始标签的
22
页面背景色或背景图像 网页背景色彩
网页背景图像
<body bgcolor="#ffccff“ background="back_image.gif" > hello world！
换段了 换行了
字体、字号相关标签
标题标签
<h#> ... </h#> #=1, 2, 3, 4, 5, 6
说明：<h1>到 <h6>
字体大小依 次递减
……
网页标题
<head>
<title>我的第一个网页 </title>
</head>
<body >
hello world!
</body>
</html>
网页内容，可以是 文本、图像等
<head>头部部分 <body>主体部分
html 网页
<这这h部部tm分分l>包包…含括<文标/h本t题m、和l>图其标像他签和说标链明记接信h。息tm它。l包包文括括档在在的<<开bhoe始dayd和>>……结<<束//bhoedayd>>标标签签内内
</body>
查看源代码
…… <body bgcolor="#ffccff“>
hello world! </body> ……
为了使页面美丽大方，网页背景要尽量地浅
文本相关标签
• 字体、字号
设置了字体的 大小和颜色
• 标题标签<h1>－<h6>
• <font>标签 • 特殊符号
使用了 <h2>…
特殊符号
• html文件的编辑工具
通过文本编辑器创建 使用Dreamwerver编辑器创建
html 示例
<html> <head> <title>页面标题</title> </head> <body> 这是我的第一个页面 <b>这里的文字要加粗</b> </body>
</html>
运行结果
使用记事本创建网页
使用记事本创建网页
使用记事本创建网页的步骤：
1、打开记事本 2、输入html代码 3、保存为*.html或*.htm文件，注意格式问题 4、打开网页预览效果
演示示例2：如何在记事本里创建网页
html 编辑器-Dreamweaver
html文件的基本结构
• html文档的结构 查看源代码
<html>
万维网 2-2
Web 服务器处理请求并返回 请求的页面
HTTP 负责请求和响应
Web 服务器
向服务器发送页面请求 客户端
7
WWW资源
协议：是一组标准规则，访问Web资源都要 遵守相应的协议(HTTP)
地址：是一组命名方案，又称之为URL:Uniform Resource Locator，用于标识web上的页面和资源
注释
• 注释
<!--注释内容 -->
用于增加代码的可读 性，不显示
…… <!-- <li>被注释掉的行将不显示</li> -->
<li>正常显示行1</li> <li>正常显示行2</li> ……
标签属性
• 标签可以拥有属性。属性能够为页面上的 html 元素提供附加信息
• 例如：标签 <body> 定义了 html 页面的主体元 素，使用一个附加的 bgcolor 属性，你可以告诉 浏览器：你页面的背景色是红色的，就像这样：
• 本章重点：html 结构控制标签的运用 • 本章难点：掌握文字内容与修饰相关标签的运用
Internet 和万维网
• 全球范围内网络的网络
• Internet 的一部分 • 由包含各种信息的文档组成
万维网 2-1
Web 服务器
协议
客户端
• 用于访问 Web 上资源的一组 规则
6
• HTTP 是 Web 协议
第一章
Html基本标签
课程目标
• 学完本门课程后，你能够：
制作界面美观大方、面向企业应用的静态商业网站
本章任务 • 制作图文并茂的“广告”页面
本章目标
• 本章目标：
• 了解 Internet 和万维网（www） • 掌握 html 文档的基本结构 • 会使用html的基本结构创建网页 • 会使用文本相关标签实现文字修饰和布局 • 会使用图像相关标签实现图文并茂的页面 • 会使用超链接相关标签实现页面间的跳转
• 浏览器: 是安装在客户端计算机上的应用软件,如
页面
Βιβλιοθήκη Baidu
IE, 用来读取html源代码并按指令显示
• html编辑器：用于开发网页的工具软件
html 简介
• html是一种超文本标记语言。使用html编辑的 文档可以可以通过万维网浏览器查看。文档中可 以包括文本、图象、声音、动画等。
• 用IE、Firefox等浏览器。读取html文本来显示 页面
html 标签
• html 标签用来组成 html 元素 • html 标签两端有两个包括字符：“<”和“>” ，这两
个包括字符被称为尖括号 • html 标签通常成对出现，比如 <b> 和 </b>，一对标
签的前面一个是开始标签，第二个是结束标签,在开始和 结束标签之间的文本是元素内容 • html 标签是大小写无关的，<b>跟<B>表示的意思是一 样的
协议
http
主机
www.niit.com.cn
路径
Index.htm
10
用户从浏览器获得资源
请求
输入地址
11
Web相关术语
• 网站：万维网上相关网页的集合
• 网页：文件后缀名通常为*.html 或* .htm的页面
• html：用于制作网页的超文本标记语言(hyper
Text Mark-up Language)
8
WWW资源
• 常用的网址
http://www.163.com http://www.sina.com.cn http://www.baidu.com
协议
主机
WWW资源
• URL的组成
用于通信的协议，例如http,ftp 与之通信的主机（服务器） 服务器上资源的路径 例如：http://www.niit.com.cn/index.htm
13
html 文件
• html 文件是一个包含标记的文本文件 • 这些标记指导浏览器怎样显示这个页面 • html 文件必须有 htm 或者 html 扩展名 • html 文件可以用一个简单的文本编辑器创建
html 文件
<body bgcolor="red">
• 属性通常由属性名和值成对出现，就像这样： name="value"。属性通常是附加给html元素的 开始标签的
22
页面背景色或背景图像 网页背景色彩
网页背景图像
<body bgcolor="#ffccff“ background="back_image.gif" > hello world！
换段了 换行了
字体、字号相关标签
标题标签
<h#> ... </h#> #=1, 2, 3, 4, 5, 6
说明：<h1>到 <h6>
字体大小依 次递减
……
网页标题
<head>
<title>我的第一个网页 </title>
</head>
<body >
hello world!
</body>
</html>
网页内容，可以是 文本、图像等
<head>头部部分 <body>主体部分
html 网页
<这这h部部tm分分l>包包…含括<文标/h本t题m、和l>图其标像他签和说标链明记接信h。息tm它。l包包文括括档在在的<<开bhoe始dayd和>>……结<<束//bhoedayd>>标标签签内内
</body>
查看源代码
…… <body bgcolor="#ffccff“>
hello world! </body> ……
为了使页面美丽大方，网页背景要尽量地浅
文本相关标签
• 字体、字号
设置了字体的 大小和颜色
• 标题标签<h1>－<h6>
• <font>标签 • 特殊符号
使用了 <h2>…
特殊符号
• html文件的编辑工具
通过文本编辑器创建 使用Dreamwerver编辑器创建
html 示例
<html> <head> <title>页面标题</title> </head> <body> 这是我的第一个页面 <b>这里的文字要加粗</b> </body>
</html>
运行结果
使用记事本创建网页
使用记事本创建网页
使用记事本创建网页的步骤：
1、打开记事本 2、输入html代码 3、保存为*.html或*.htm文件，注意格式问题 4、打开网页预览效果
演示示例2：如何在记事本里创建网页
html 编辑器-Dreamweaver
html文件的基本结构
• html文档的结构 查看源代码
<html>
万维网 2-2
Web 服务器处理请求并返回 请求的页面
HTTP 负责请求和响应
Web 服务器
向服务器发送页面请求 客户端
7
WWW资源
协议：是一组标准规则，访问Web资源都要 遵守相应的协议(HTTP)
地址：是一组命名方案，又称之为URL:Uniform Resource Locator，用于标识web上的页面和资源
注释
• 注释
<!--注释内容 -->
用于增加代码的可读 性，不显示
…… <!-- <li>被注释掉的行将不显示</li> -->
<li>正常显示行1</li> <li>正常显示行2</li> ……
标签属性
• 标签可以拥有属性。属性能够为页面上的 html 元素提供附加信息
• 例如：标签 <body> 定义了 html 页面的主体元 素，使用一个附加的 bgcolor 属性，你可以告诉 浏览器：你页面的背景色是红色的，就像这样：
• 本章重点：html 结构控制标签的运用 • 本章难点：掌握文字内容与修饰相关标签的运用
Internet 和万维网
• 全球范围内网络的网络
• Internet 的一部分 • 由包含各种信息的文档组成
万维网 2-1
Web 服务器
协议
客户端
• 用于访问 Web 上资源的一组 规则
6
• HTTP 是 Web 协议
第一章
Html基本标签
课程目标
• 学完本门课程后，你能够：
制作界面美观大方、面向企业应用的静态商业网站
本章任务 • 制作图文并茂的“广告”页面
本章目标
• 本章目标：
• 了解 Internet 和万维网（www） • 掌握 html 文档的基本结构 • 会使用html的基本结构创建网页 • 会使用文本相关标签实现文字修饰和布局 • 会使用图像相关标签实现图文并茂的页面 • 会使用超链接相关标签实现页面间的跳转
• 浏览器: 是安装在客户端计算机上的应用软件,如
页面
Βιβλιοθήκη Baidu
IE, 用来读取html源代码并按指令显示
• html编辑器：用于开发网页的工具软件
html 简介
• html是一种超文本标记语言。使用html编辑的 文档可以可以通过万维网浏览器查看。文档中可 以包括文本、图象、声音、动画等。
• 用IE、Firefox等浏览器。读取html文本来显示 页面
html 标签
• html 标签用来组成 html 元素 • html 标签两端有两个包括字符：“<”和“>” ，这两
个包括字符被称为尖括号 • html 标签通常成对出现，比如 <b> 和 </b>，一对标
签的前面一个是开始标签，第二个是结束标签,在开始和 结束标签之间的文本是元素内容 • html 标签是大小写无关的，<b>跟<B>表示的意思是一 样的
协议
http
主机
www.niit.com.cn
路径
Index.htm
10
用户从浏览器获得资源
请求
输入地址
11
Web相关术语
• 网站：万维网上相关网页的集合
• 网页：文件后缀名通常为*.html 或* .htm的页面
• html：用于制作网页的超文本标记语言(hyper
Text Mark-up Language)
8
WWW资源
• 常用的网址
http://www.163.com http://www.sina.com.cn http://www.baidu.com
协议
主机
WWW资源
• URL的组成
用于通信的协议，例如http,ftp 与之通信的主机（服务器） 服务器上资源的路径 例如：http://www.niit.com.cn/index.htm