Download presentation
Presentation is loading. Please wait.
1
HTML语言 制作：李贤成
2
教学要求 教学目的： 说明：本部分教材内没有，为补充内容，但又是高考和其他考试的必考内容。 掌握什么是HTML；
掌握文字的修饰和排版； 掌握表格制作； 掌握超链接的建立和图像的插入； 初步掌握表单的制作； 了解框架的建立；
3
教学重点： 掌握文字的修饰和排版； 掌握表格制作； 掌握超链接的建立和图像的插入； 教学难点： 初步掌握表单的制作；
4
基本概念 万维网 万维网是一个大规模的在线（on-line）信息集合，可以 通过一种叫做浏览器（browser）的应用程序进行检索 与查看。 Web Web 是一个支持交互式访问的分布式超媒体系统。不论 是在超文本系统还是在超媒体系统，信息都是以文档集 的形式存贮的。在文档中除了包括基本信息以外，还可 以包括指向文档集中其他文档的指针。
5
页面 Web 上的一个超媒体文档称为一个页面（Page）；作为
一个组织或个人在 WWW（或其他Web）上开始点的页 面称为主页（Homepage）；在逻辑上可视为一个整体的 一系列页面的有机集合称为网站（Web Site或Site）。 HTML HTML(Hypertext Markup Language) 是一种规范，一种 标准，它通过标记符（tag）来标记显示网页的各个部分。 所有的网页都是HTML格式的文件。 HTML通过标签告诉浏览器如何处理在两个标签之间的信 息。HTML标签的格式为： <标签>正文</标签>
6
头部用<HEAD></HEAD>标签表示开始与结束。
网页总是以<HTML>标签开始，在文件的末尾以</HTML> 结束，表示文件是HTML格式。网页文件通常由两个部分 组成：头部（head）和主体(body)。 1．头部区段 头部用<HEAD></HEAD>标签表示开始与结束。 在头部中最常用的标签是<TITLE></TITLE>，是 网页的标题，将显示在浏览器的标题栏中。 综上所述，一个不包含内容的 Web 页文件如下所示： <HTML> <HEAD><TITLE></TITLE></HEAD> <BODY></BODY> </HTML> 演示6-8-1
7
2．主体区段 .<body></body> <body></body>是Html文档的主体部分，在此标志对之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。<body>标志中还可以有以下属性： 属性 用途 示例 <body bgcolor="#rrggbb"> 设置背景颜色。 <body bgcolor="red">红色背景 <body text="#rrggbb"> 设置文本颜色。 <body text="#0000ff">蓝色文本 <body link="#rrggbb"> 设置链接颜色。 <body link="blue">链接为蓝色 <body vlink="#rrggbb"> 设置已使用的链接的颜色。 <body vlink="#ff0000"> <body alink="#rrggbb"> 设置正在被击中的链接的颜色。 <body alink="yellow"> 说明:以上各个属性可以结合使用，如<body bgcolor="red" text="#0000ff">。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色，如#ff0000对应的是红色。此外，还可以使用Html语言所给定的常量名来表示颜色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal，如<body text="Blue">表示<body></body>标志对中的文本使用蓝色显示在浏览器的框内。 示例
8
HTML中有六种标题<H1>～<H6>，用不同 的字体和字号显示标题内容，<H1>是最大的标题，
段落格式 分段标记符分段标记符用于将文档划分为段落， 标记为<P></P>，其中结束标记符通常可省略。 换行标记符 换行标记符用于在文档中强制断行，标记为一个单 独的<BR>。该标记与分段标记符<P>是有区别的。 （P与BR用法示例）
9
FONT标记符 size 属性 字号属性的值可以从 1 到 7，3 是默认值。该属性值也可 以用 + 号或 - 号来作为相对值指定。 演示——<FONT size> COLOR 属性 字体标记符的 COLOR 属性可用来控制文字的颜色，使 用方法与正文标记符<BODY>中使用的 BGCOLOR 属性 相同。 演示——<FONT color>(p28) FACE 属性 FACE 属性用来指定字体样式。在编制网页时，通过在 <FONT>标记符中指定 FACE 属性，用户可以指定一个或 几个字体名称（用逗号隔开）。 演示——<FONT face=> （1-4）
10
添加水平线 标记符为<HR>，它包括：SIZE 属性用来改变水平线的 粗细程度；WIDTH 属性用来更改水平线的长度； NOSHADE 属性用来使水平线以实线显示；COLOL 属性在 Microsoft Internet Explorer 3 及更高版本中， 通过在<HR>中设置 COLOR 属性可以控制水平线的颜色。 演示——水平线效果
11
⑷ 插入图片 在HTML语言中只能识别gif和jpeg格式的图片。使用<IMG>可以显示一个图片，它没有结束标签。
“SRC”属性用来标识一个图片文件名，或指出URL的路径名，其格式为：<IMG SRC=”图片文件名或URL”> (1-5.htm)
12
列表格式 有序列表 有序列表（Ordered list）也称数字式列表，它是一种在 表的各项前显示有数字或字母的缩排列表。定义有序列 表需要使用有序列表标记符<OL></OL>和列表项 （List item）标记符<LI></<LI>（结束标记符可省略）。 （2-1） 演示——有序列表 无序列表 无序列表（Unordered list）也称强调式列表，它是一种 在表的各项前显示有特殊项目符号的缩排列表。定义 无序列表需使用无序列表标记符<UL></UL>和列表项 标记符<LI></LI>。 演示——无序列表 （2-2） 综合应用
13
超链接基础 统一资源定位器 URL（Universal Resources Locator）用于定位 Web 上的文档信息。 一个 URL 包括 3 部分：协议、计算机地址、文件路径。 协议：//计算机/文件路径 、ftp://ftp.pku.edu.cn(http是超文本传输协议 Ftp是文件传输协议) 域名与 IP 地址 绝对 URL 是指资源的完整地址，包括 URL 的所有 3 个部分， 即：协议：//计算机/文档名 相对 URL 是指 Internet 上资源相对于当前页面的地址，它包含从当前页 面指向目标页面位置的路径。
14
不同类型的超链接 内部网页超链接 外部网页超链接 页面内的超链接（锚点、CSS、脚本、空链接等） 文件下载超链接 超链接 创建超链接 A 标记符 用于创建超链接（结束标记符不能省略）， href 属性用于指定超链接的目标。 内部超链接：<a href=test.htm>link</a> 外部超链接：<a href= 演示——超链接（SUPER.HTM)
15
锚点链接 使用锚点超链接时，首先需要定义锚点，然后在超链接
中指向该锚点。指向其他页面内锚点的超链接： <a href=文件#该文件中的锚点>link</a> 定义锚点应使用<a name=xxx></a> 指向锚点：<a href=#锚点名称>link</a> 演示——锚点链接 (1-6.HTM) 文件下载 当我们的超链接目标为浏览器不能识别的格式时， 那么就自动生成了文件下载链接。 <a href=xxx.zip>下载</a> 演示---文件下载 链接 <a 演示
16
表格的组成 表格标记符 table 表格标题 caption 表格行 tr （table row） 表格数据 td （table data） 表格表头 th （table heading） 演示——表格示例(2-3.htm)
17
什么是框架 frame(框架) 也称为“帧”，是在一个浏览器窗口中同时显示多个网页 的技术。 演示——框架示例1 框架示例2 框架结构 框架集 定义框架的结构 <frameset></frameset> 框架具体定义每个页面 <frame> Rows 定义行结构框架 Cols 定义列结构框架 Rows 和 cols 的取值：像素数 % n*
18
框架的初始化 框架的初始化 在 frame 标记符中使用 src 属性可以指定框架中最 初显示的页面。 设置目标框架 指定框架名称 特殊的框架名称 _blank _top 在超链接标记符 A 中指定 target 属性，取值为具体的框架名称。
19
什么是表单 FORM 表单 是用于实现网页浏览者与服务器之间信息交互的一种页 面元素，它由表单控件和一般内容组成。 注册表单 登录表单 FORM 标记符 FORM 标记符 FORM 标记符用于包含所有表单内容 Action 属性服务器端脚本程序（ASP、JSP、Perl等） Method 属性（get、post） post传送数据没有限制, Get最大信息量是2k
20
表单控件的类型 文本框 单行文本框<input type=“text” size=“”> 口令框<input type=“password” size=“”> 演示——文本框示例 复选框和单选框 复选框<input type=“checkbox”checked> 单选框<input type=“radio”name=“”checked> 注意：单选框 name 属性相同者为一组！ 演示——复选框与单选框 按钮 提交按钮<input type=“submit”> 重置按钮<input type=“reset”> 自定义按钮<input type=“button”> <input type=“image”> 演示——不同的按钮效果
21
滚动字幕 (3-8) MARQUEE 标记符：<MARQUEE>XX</MARQUEE> width 和 height 属性 Behavior 属性 Scrollamount 属性 …… 综合示例
Similar presentations
