Download presentation
Presentation is loading. Please wait.
1
Web系统开发 林昌华
2
课程主要内容： - 常用的HTML标签语言 - 层叠样式表CSS - Web客户端开发脚本语言JavaScript - DOM编程
3
教学计划： 课程成绩: -理论课36学时 -上机13学时 -期末复习3学时 -期末机考2学时 -期末笔试 -上机练习10%×4
- 机考20% -期末笔试30% -作业、考勤和考核10%
4
第1章 HTML语言基础 1.1 HTML的背景知识 1989年，在瑞士日内瓦欧洲粒子物理研究所（CERN）工作的蒂姆·伯纳斯·李（Tim Berners- Lee）发明了World Wide Web，简称WWW或Web，中文叫做万维网。他成功开发出世界上第一个Web服务器和第一个Web客户机。 1991年5月Web网在Internet上首次露面，立即引起轰动，迅速被广泛推广应用。
5
Web网的原理就是在Internet基础上，首先建立起能够提供文本、图形、视频、音频等多媒体信息的许多Web服务器。然后，这些多媒体信息通过以超文本标记语言HTML（Hypertext Markup Language）编写的网页文件的超链接功能彼此关联。这样，Web服务器不仅提供自有的多媒体信息，还能链接其它web服务器存放的多媒体信息，而这些Web服务器又链接着更多的Web服务器，从而环球范围内的Web服务器互相链接而形成一个庞大的信息网络。
6
Web网为客户机提供统一的浏览器软件，例如微软的Web浏览器IE（Internet Explorer）。由于在客户端安装的浏览器都是相同的，对内容提供商来说具有良好的开放性。
如图，在联网的情况下，用户只需输入Web服务器网址，发出浏览请求，浏览器对收到的web服务器发来的HTML文件进行解释，就能使用户轻松地浏览和查询信息。浏览器以友善的图形界面、简单的操作以及多媒体显示方式，大大提高了信息的感染力。
7
如图, Web网只是Internet的一个子集，它是由Web 服务器和Web客户机构成的。
8
HTML（Hypertext Markup Language）超文本标记语言是制作网页的核心语言。
下面是一个用HTML编制的网页文件 — 演示1.HTM，可以用记事本编辑它，用浏览器打开它。 <HTML> <HEAD> <TITLE>1.1.1演示.1</TITLE> </HEAD> <BOdy> <MArquee behavior="alternate"> <font color="red" size=14 face=‘Arial, Helvetica, sans-serif’>Web 开发系统</font> </marquee> <SCRIPT LANGUAGE=JavaScript> </SCRIPT> </BODY> </HTML>
9
几个基本概念 标签 HTML标签必须由“<”开头，由“>”结尾。尖括号对“<>”和其中的标签名就是HTML的一个标签。 标签通常是成对使用的，使用一个开始标签和一个结束标签。“<标签名>”表示开始标签，“</标签名>”表示结束标签。开始标签用于开启某种形式的显示，结束标签用于关闭开始标签开启的功能。标签可以用大写，也可以用小写或大小写混合。
10
例如，语句“<TITLE>1. 1. 1演示
例如，语句“<TITLE>1.1.1演示.1</TITLE>” 表示将“<TITLE>”与“</TITLE>”之间的文本“1.1.1演示.1”显示在浏览器左上方的标题栏内。 “<TITLE>”开启显示，</TITLE>结束显示。 有的控制语句仅需一个标签，没有结束标签。如：<br>表示换行。 属性 标签可以设置一个或多个属性来控制标签的显示效果。例如<marquee>标签中的behavior。属性设置的一般格式为：属性名=属性值。属性值可以用英文的双引号（”）或单引号（’）引起来，也可以不使用任何引号。
11
使用HTML编写的文件就是网页文件，扩展名为.htm或.html。
例如，在下述的两个语句中，黄色的字符就规定了文本“Web 开发系统”的显示属性 <marquee behavior="alternate"> <font color="red" size="14" face="Arial, Helvetica, sans-serif">Web 开发系统</font> </marquee> 使用HTML编写的文件就是网页文件，扩展名为.htm或.html。
12
2. 网页文件的打开 使用通用的IE浏览器打开网页文件。 浏览器的基本作用就是解释网页文件中HTML标签的含义，并用规定的效果去显示有关的文本或执行某种功能。例如，网页中文字的大小、颜色，图像和声音的播放等。
13
浏览器可以打开本地存储系统中的网页，例如：1. 1. 1演示1. htm，也可以打开网络上的网页，例如：http://www. sohu
HTML不是程序设计语言，而是一种标记语言，也就是用一些标记来说明文本的显示效果。要建立网站和制作网页，就必须对HTML语言有所了解。
14
1.1.2 HTML版本 HTML2.0 — 1995； HTML3.0 ,Netscape和微软的HTML版本相差很大，标记不同；
HTML 4.01 Specification（W3C Recommendation 24 December 1999）. This document is a revised version of the 4.0 Recommendation first released on 18 December 1997 and then revised 24 April 1998。
15
IETF和W3C组织 因特网的最大特点是管理上的开放性，它被每个用户所共同拥有，没有人和组织对因特网拥有绝对控制权。因特网没有集中的管理机构，为了促进因特网的运行标准兼容，确保因特网的持续发展，先后成立了一些机构和组织，它们自愿承担因特网的管理职责。 目前主要由两个组织负责制定web网站管理和开发相关的规范，这两个组织是因特网工程任务组（Internet Engineering Tast Force,IETF）和WWW联盟（World Wide Web Consortium,W3C）。
16
IETF是由网络设计人员、操作人员、厂商和专家组成的民间组织，主要负责有关因特网的各种技术标准及接口规范的制定。
W3C是与web有关的企业和机构成立的业界联盟，目前的成员仅限于团体和组织。W3C负责研究、审定、发布、管理有关web标准，例如，HTML、CSS等。 该组织致力于开发促进Web发展和确保其互操作性的基础性协议，引导进一步发掘Web的潜力，它还开发和推动标准的参考代码。W3C不从事网络传输协议规范的制定，它将重点放在人们从Web上所看到的东西上，例如，字体、图形和3D动画等。W3C没有强制执行的权力，它的标准仅仅是建议，不具备法律效力。
17
1.2 HTML的全局架构标签 一个网页文件中的标签有一定的组成结构，不能随意颠倒和错乱这种关系。下面这段内容说明了一个最基本的网页文件全局架构标签的组成结构。 <html> <head> <title>显示在浏览器左上方的标题</title> </head> <body bgcolor=“red” text=“yellow”> <p>红色背景、黄色文本</p> </body> </html>
18
1.2.1 <html></html>
<html>标签用于网页文件的最前面，用来标识网页文件的开始。而</html>标签位于网页文件的最后，用来标识网页文件的结束。这两个标签必须成对使用，网页中的其它内容都存放在<html>与</html>之间。 <head></head> 一个网页文件从总体上可以分为头和主体两部分。 <head>和</head>定义了网页文件的头部。在此标签对之间可以使用<title></title>、<script></script>。文件头的内容主要用于定义网页文件在WWW网中的情况，其内容不在页面内显示。
19
1.2.3 <title></title>
标识网页主题，其中的内容将在浏览器的标题栏中显示，不出现在页面内。 例如： <head> <title>显示在浏览器左上方的标题</title> </head>
20
1.2.4 <body></body>
<body></body>标签对之间的部分为网页文件的主体。在<body>与</body>之间放置的是需要实际显示的文本内容和用于控制文本显示的标签，例如<p>…</p>、<br>、<hr>等标签，它们所定义的文本、图像等将会在页面中显示。 <body>标签是一个非常重要的标签，含有大量的属性，许多重要的网页功能都是通过<body>标签的属性实现的。
21
<body>标签的几种一般属性如下：
例如：<body text=“Blue”>表示<body></body>标签对中的文本使用蓝色显示。另外，各个属性可以结合使用，如<body bgcolor="red” text="#0000ff">。
22
HTML中的颜色表示法： (1) 用颜色常量名表示：HTML语言指定了一些颜色常量名，如Black、White、Green、Maroon等。可以使用它们定义颜色。 (2) 用六位十六进制表示：前两位表示红色值、中间两位为绿色值、后两位为蓝色值。数字以“#”号开头。如Text=#ff0000；Bgcolor="#FFFF00"等。 (3) 用RGB表示法：即使用RGB函数表示。RGB函数的格式是： RGB(红色值, 绿色值, 蓝色值) 其中：颜色值的取值范围为0 ~ 255，或者取值为百分比0 ~ 100%。如红色表示为RGB(255,0,0)，与RGB(100%,0,0)作用完全一样。
23
<body>标签的几种事件属性如下：
除了上述事件外，随着浏览器版本的升级，现在还增加了许多新的事件，以增加人机交互能力，这些事件是： onMouseMove 鼠标移动、onDblClick 鼠标双击、 onMouseDown 鼠标被按下 等。 事件属性的值往往是一个JavaScript函数，来完成WEB编程任务。具体应用参考后面章节。
24
课后复习标签<html>、<head>、<title>和<body>的作用。
课堂练习 用记事本编写一个Web网页文件。 要求： 1.浏览器左上方的标题栏内显示html 的全局架构标签组成结构。 2.浏览器显示文本内容：我是（name）管理信息学院的06级学生。 3.浏览器背景为蓝色，文本为黄色。 课后复习标签<html>、<head>、<title>和<body>的作用。
Similar presentations
