Transcript INTERNET

Unit 5 Network Systems

•
•
•
•
5.1 Internet Basics
5.2 Local and Wide Area Networks
5.3 Client-Server Framework
5.4 Communications
5.5 Internet Architecture
1
Communications
• What are computer communications 通信?
2
Communications
• What is needed for successful communications?
Sending
device — initiates
instruction to
transmit data,
instructions, or
information
Communications
device — connects
the sending device to
the communications
channel
Communications
device — connects
the communications
channel to the
receiving device
Communications
channel — media
on which data,
instructions, or
information travel
Receiving
device — accepts
transmission of data,
instructions, or
information
3
Uses of Computer Communications
• What are some uses of communications technology?
Internet
Chat Rooms
FTP
Web
Instant
Messaging
E-Mail
Newsgroups
Web
Folders
Internet
Telephony
Video
Conferencing
Fax Machine
or Computer
Fax/Modem
4
Uses of Computer Communications
• What are wireless messaging services无线信息服务?
Text messaging
Wireless instant
allows users to send
messaging allows
and receive short
wireless mobile
text messages on a
devices to exchange
smart phone or
messages
Picture messaging
PDA
Video
messaging
allows users to send
graphics, pictures,
video clips, sound
files, and short text
messages
5
Uses of Computer Communications
•What are wireless Internet
access points and cybercafés?
–
Wireless Internet access point
（无线Internet接入点）allows
wireless connection to Internet
in public location
•
–
3G network
Cybercafé （网吧）is coffee
house that provides computers
with Internet access
6
Uses of Computer Communications
• What is a global positioning system (GPS，全球定位系统)?
Step 1.
GPS satellites orbit
Earth. Every
thousandth of a
second, each satellite
sends a signal that
indicates its current
position to the GPS
receiver.
Step 2.
A GPS receiver
(such as in a car,
a watch, a smart
phone, a
handheld device,
or a collar)
determines its
location on Earth
by analyzing at
least 3 separate
satellite signals
from the 24
satellites in orbit.
7
Uses of Computer Communications
•What are collaboration and
groupware?
– Collaboration 协作 is working
with other users connected to
a server
• A document management
system provides for storage
and management of a
company’s documents
– Groupware群体软件 is
software
that allows people
to share
information
8
p. 302 Fig. 8-6
Uses of Computer Communications
• What are voice mail and web services?
–
Voice mail （音频邮件） is voice message converted to
digital form
–
Web services （Web服务） describe standardized software
that enables programmers to create applications that
communicate with other remote computers over the
Internet or over an internal business network
9
p. 302
5.1 Internet Basics
• What’s Internet （国际互联网，英特网）?
– Internet is a collection of local, regional, national
and international computer networks that are
linked together to exchange data and distribute
processing tasks.
10
Networks and the Internet
•
Why do users access the Internet?
1.
Communications
2. Information
3. Shopping
4. Banking and Investing
5. Classes
6. Entertainment
7. Download Music
8. Share Information
11
p. 9 Fig. 1-7
Internet History (1)
• The Internet began as a Cold War
project to create a communications
network that was immune to a
nuclear attack.
• In 1969, the U.S. government
created ARPANET(阿帕网),
connecting four western universities
and allowing researchers to use the
mainframes of any of the networked
• ARPANET was a project of the
Advanced Research Projects Agency
of the federal government's
Department of Defense (美国国防部
高级研究计划局).
12
Internet History (2)
• There were 23 Internet sites in 1971, 111 in 1977, and up to
almost 4 million in 1994.
• In 1984 ARAPnet - divided into MILNET and ARPANET. MILNET
the military and ARPANET the advanced research component
• In 1986, another U.S. government agency, the National Science
Foundation (NSF), set up a network of five supercomputer
centers called NSFnet.
• In 1990 ARPAnet ceases to exist. The network is now officially
referred to as the INTERNET.
ARPAnet (OUT)
INTERNET (BEGINS)
• In1997, the Internet has 19.5 MILLION HOSTS; 1 Million
WWW sites; 71,618 Newsgroups.
13
Internet Growth
• The size of the Internet based on
– Number of people using it.
– Number of computers connected
– Quantity of data flowing.
• Internet host 主机: A computer on the Internet that
provides services
– data routing
– e-mail
– Web pages
• Today there are millions of host computers available.
• There are around 200 million Internet users.
• Internet traffic: Number of bytes transmitted from
one host to another computer.
14
Internet traffic
15
What’s Available in the Internet?
•
•
•
•
•
•
•
•
E-mail 电子邮件服务
World Wide Web (WWW) 万维网
BBS 电子公告板系统
Telnet 远程登录服务
FTP 文件传送服务
E-commerce 电子商务
Internet Telephony 网络电话
Blogs 博客？Web BLOG
16
Internet Technology
The Internet makes the Web possible
It is the infrastructure behind the Web
17
The Internet Backbone
• Internet backbone 主干网
– Major internet communication links.
• Network service provider (NSP网络服务提供商)
– Construct and maintain the Internet backbone, such as AT&T
• Network access point (NAP网络访问点) – point on the
Internet where several connections converge
18
The Internet Backbone
19
Internet Structure
• 大致上可将因特网分为以下五个接入级
–
–
–
–
–
网络接入点 NAP
国家主干网（主干 ISP）
地区 ISP
本地 ISP
校园网、企业网或 PC 机上网用户
20
ISP
• You connect to the Internet by connecting to an ISP
which connects to the Internet backbone.
• ISP (Internet Service Provider，Internet服务提供商)company that maintains an Internet host computer
– provides Internet access to businesses and individuals
– charges monthly fee
– offered over telephone lines, cable TV, or satellite dish
• Dial-up connection 拨号连接: A connection that uses a
phone line to establish a temporary Internet
connection.
21
Nation-wide Internet Service Providers in
China
• There are four Nation-wide Internet Service
Providers in China
–
–
–
–
CERNET: China Education and Research Network
CSTNET: China Science and Technology Network
CHINANET: China Public Computer Internet
GBNNET: Golden Bridge Information Network
• To be permitted to connect with Internet backbone
directly
22
Internet Servers
• Many computers are on the Internet
• Yours – called a client computer
• Internet server computers – computers
that provide information and services on
the Internet
23
Internet Servers
24
Internet Servers
Web server: provides information and
services to Web surfers
25
Internet Servers
Mail server: provides e-mail
services and accounts
26
Internet Servers
FTP (file transfer protocol)
server: maintains downloadable files
27
Internet Servers
IRC (Internet Relay Chat ) server:
supports discussion groups and chat
rooms
28
Data Transmission 数据传送
• Cables, wires and satellites carry internet data from
an inter-linked communications network.
• Data traveling from one internet host to another is
transmitted from one link in the network to another,
along the best possible route
29
Communications Protocols
• Information moves on the Internet according
to communications protocols
• Communications protocol (通信协议) – set of
rules that every computer follows to transfer
information
• Most widely used
– TCP/IP
– HTTP
– FTP
30
Communications Protocols
• TCP/IP (Transport Control Protocol/Internet Protocol
传输控制协议/Internet协议) – primary protocol for
transmitting information over the Internet
• HTTP (Hypertext transfer protocol超文本传输协议 ) –
supports the movement of information over the Web
• FTP (File transfer protocol，文件传输协议) – the
communications protocol you use to transfer
information from one computer to another
31
Internet Address and Domains
• IP Address （IP地址）: An identifier for a computer
or device on a TCP/IP network. The format of an IP
address is a 32-bit numeric address written as four
numbers separated by periods. Each number can be
zero to 255. For example, 204.194.30.130
• Router （路由器）: Device which checks the IP
address of the data at every intersection on the back
bone, that carries the IP address of its destination .
• Many host computers have an easy-to-remember name
which is officially called a fully qualified domain name.
– Most people call it a domain name
32
Domain Names 域名
• Typed in lowercase
• Ends with three letter extension which is its top-level
domain
– A name that identifies one or more IP addresses
• A computer with a domain name is referred to as a
site.
• Web site - location in a computer somewhere on the
Internet.
33
Domain Name Space 域名空间
类别顶级域名
地理顶级域名
34
Internet Top-level domains 顶级域名
35
Finding IP Address with “nslookup”
36
Internet Address and Domains
37
Web Basics
38
Web
• What is the Web 万维网?
– Billions of documents, called Web pages 网页, available to
anyone connected to the Internet
A Web site is
a collection of
related Web pages
You can share
information by
creating Web pages
or posting photos on
a photo sharing
community
A Web page contains
text, graphics, audio,
video, and links to
other Web pages
A podcast is
recorded audio
stored on a Web site
that can be
downloaded
A blog consists of timestamped articles in
a journal format
39
Web
• The World Wide Web, or “the Web” was created in
1990 at the European Laboratory for Particle Physics
(欧洲原子核研究组织CERN) in Geneva, Switzerland
• The Web
– Internet service that stores and provides information
– easy to use source of graphical information
– consists of documents (Web pages) that contain information
on a particular topic
– Consists of one or more links that point to other web pages
which makes it easy to follow a thread of related information.
40
Difference between the Web and
Internet
• In the words of Tim Berners-Lee,
– On the Net, you find computers; on the Web, you
find the documents, sounds, videos, and information
– On the Net, the connections are cables between
computers; on the Web, connections are hypertext
links
– The internet is a communications systems; and the
web is an interlinked collection of information that
flows over the Net
41
Websites 网站
• Websites are composed of a series of Web
pages.
– each page stored as a file
• HTTP
– stands for Hypertext Transfer Protocol超文本传送
协议
– is the protocol that allows Web browsers to
communicate with Web servers
– HTTP defines how messages are formatted and
transmitted, and what actions Web servers and
browsers should take in response to various
commands
42
Web browser
• What is a Web browser 浏览器?

Program that allows you to view Web pages
Microsoft
Internet
Explorer
Firefox
Netscape
Opera
Mozilla
Safari
43
Web Browser
• Request a web page from a web server by
typing URL
• The server sends the data for the web page
which contains the information to be viewed
and a set of instructions that tells your
browser how to display it.
– Microsoft Internet Explorer
– Netscape Navigator
– Firefox
44
The World Wide Web
• What is a home page主页?


The first page that a Web site displays
Often provides connections to other Web pages
• What is downloading下载?


The process of a computer receiving information
Depending upon connection speed, downloading can
take from a few seconds to several minutes
45
The World Wide Web
•How does a Web browser display a home page?
Step 2.
Web browser
looks up the home
page setting
Step 3.
Step 1.
Click the Web browser
program name
Step 4.
The home page
displays in the Web
browser
The Web browser
communicates with the
ISP’s server to retrieve
the IP address. The IP
address is sent to your
computer.
46
URL
• The uniform resource
locator (URL，统一资
源定位符) is the
unique identifier of a
web page.
• The location window
displays the URL of
the current page.
47
More Detail about URL
• URL is the address of a Web resource
communication
protocol
identifier
host name
name of the resource,
specified by a path
• http://www.icarnegie.com/courses.html might be
interpreted this way: Using hypertext transfer
protocol(http), retrieve the file on www.icarnegie.com
named /courses.html.
48
URLs
• The format is:
protocol://host.domain[:port number]/path/filename
• Protocol will be used to retrieve the information.
Some of the options are
– file: find a file on your computer
– http: hypertext transfer protocol - find an html file on a
WWW server
– ftp: file transfer protocol - find a file on the Internet
– telnet: connection to a telnet service (a terminal emulator)
– mailto: send a mail message, use SMTP
49
Absolute and relative URLs
• Absolute URLs 绝对URL
– Like a complete street address, e.g., “140-09, 155th street,
New York, USA”
– E.g., “http://www.scu.edu/department/”
– Usually used to link pages between sites
• Relative URLs 相对URL
– Like directions, e.g., “down the street and turn left at the
traffic lights”
– E.g., “sc/resources.htm”
– Usually used to link pages within a site
50
Example
Current URL
Target URL
Relative URL
http://sw.scu.edu.c
n/index.htm
http://sw.scu.edu.cn/staff.h
tm
staff.htm
http://sw.scu.edu.c
n/index.htm
http://sw.scu.edu.cn/bbs/to
pic1.htm
bbs/topic1.ht
m
http://sw.scu.edu.c
n/bbs/topic1.htm
http://sw.scu.edu.cn/index.h ../index.htm
tm
51
Access Website with URL
52
The World Wide Web
• What is a hyperlink (超链接)?

Built-in connection to another related
Web page location



Item found elsewhere
on same Web page
Different Web page
at same Web site
Web page at a different
Web site
53
The World Wide Web
• What is a hit 点击?

Any Web site name that is listed as the result of a search
Step 2.
Select type of
search you want
to run
Step 1. Go to search engine
Step 3. View hits
Step 4.
Click
link to view
Web site
54
The World Wide Web
• What are the eleven basic types of Web sites?











Portal
News
Informational
Business/Marketing
Educational
Entertainment
Advocacy
Blog
Wiki
Content Aggregator
Personal
55
Web Portals
• A Web portal （门户网站）is a Web site that provides
a group of popular Web services.
–
–
–
–
search engines
e-mail accounts
chat rooms
links to shopping, weather, news, and sports
• Web Portals
– America Online
– Yahoo
– Netease
• Access to these portal sites is free to anyone who
accesses the page.
56
The World Wide Web
• What is multimedia 多媒体?

Application integrating text with other media elements






Graphics
Animation
Audio
Video
Virtual reality
Plug-ins
57
Internet Multimedia
• Media element such as sound, animation, and video
– stored in a file which is sent to your computer in
two ways when a link for media element is clicked.
– Web server sends you the entire file before
playing it.
– Large files requires five minutes or more before
playing.
58
Internet Multimedia
• What is a thumbnail 缩略图 ?

Small version of a larger graphic image—used to
improve Web page display time

Usually click
on thumbnail to
display larger
image
59
Internet Multimedia
• What is animation 动画?

Appearance of motion created by
displaying a series of still images
in sequence
60
Internet Multimedia
• What is audio 音频?


Music, speech, or any other sound
Individual compressed sound files
that you download from the Web to
your computer


Common Web audio file formats are
AA, AAC, AIFF, ASF, MP3, WAV,
WMA, RA, and QT
Once downloaded, you can play
(listen to) the contents of the files
61
Internet Multimedia
• What is streaming audio 音频流?



Transfers data in a continuous and even flow
Enables you to listen to the sound as it downloads to
your computer
Radio stations use streaming audio to broadcast over
the Web
62
Internet Multimedia
• What is video 视频?


Consists of full-motion images with sound
played back at various speeds
MPEG (Moving Pictures Experts Group)
is popular video compression
standard
63
The Concept of Streaming
64
The Features of Streaming
• Playing immediately
– Watch streaming media instantaneously
– Without waiting for a lengthy download
• Live program
– The only way of live broadcast
– Ex: Broadcast news or programs in a network
• No restriction on the size
– View A/V while the media has being transmitted
– Traditionally, file size is related with time starting to view
• Multicasting
– Allow many viewers enjoy the same streaming file at the same time
• Broadcast Randomly
– Viewers can pause, seek, and play file according to their needs
65
Internet Multimedia
• What is virtual reality (VR，虚拟现实)?


Use of computers to simulate real or imagined
environment
Appears as a three dimensional (3-D) space

Used for games and many
practical applications
66
Internet Multimedia
• What are plug-ins 插件?


Programs that
extend the
capability of
a browser
You can
download many
plug-ins at no
cost from various
Web sites
67
Search Engines
• Search Engine搜索引擎 popularly refers to a Web site
that provides a variety of tools to help you find
information.
• Find information by topic directory
– Click a series of links to drill down through a list of topics and
subtopics
– For example: Yahoo
• Find information using search form
– Fill out a form with search terms
– For example: Google
68
Search Operator
• And: Query railroad and cars will locate pages
that contain both words
• Quotation Marks: Surrounding a series of
keywords with quotation marks indicates the
words must be treated as phrase. “green
card”.
• Wildcards: The asterisk (*) allows a search
engine to find pages with any derivation of a
basic word. medic*
69
Web Publishing Process 网页发布流程
A web server stores data for Web
pages that form a Web site
70
Web Publishing Process
HTML documents: a plain text with
embedded HTML tag
71
HTML
• HTML or Hypertext Markup Language 超文本
标记语言 is a scripting language used for
writing Web pages.
• HTML is a plain text documents with
embedded HTML tags（标签）
– Some of these tags specify how the document is to
be displayed when viewed in a browser
– Other tags contain links to related document,
graphics, sound, and video files that are also stored
on Web server
72
How does Web work?
73
5.1.1 MIME Types
• Multipurpose Internet Mail Extensions
– 多用途Internet邮件扩展
• Designed for the interchange of data among various
e-mail systems
• Allows for universal interchange of data
• They define how an attachment is to be read
• With Web browsers, MIME types tell it what plug-ins
to use
• MIME type designations have two components: a type
and a subtype, which are separated by a slash (/).
74
Extended Web Architecture
Client
Web Layer
translation
Data
Sources
XML
XML
JSP
Page
JDBC
EJB
The host-host data transfers usually involve one MIME file
75
MIME Types
超文本标记语言文本
.html,.htm
text/html
普通文本
.txt
text/plain
RTF文本
.rtf
application/rtf
GIF图形
.gif
image/gif
JPEG图形
.jpeg,.jpg
image/jpeg
au声音文件
.au
audio/basic
MIDI音乐文件
mid,.midi
audio/midi,audio/x-midi
RealAudio音乐文件
.ra, .ram
audio/x-pn-realaudio
MPEG文件
.mpg,.mpeg
video/mpeg
AVI文件
.avi
video/x-msvideo
GZIP文件
.gz
application/x-gzip
TAR文件
.tar
application/x-tar
76
Example 1
Mime-Version: 1.0 //版本号：1.0
Content-Type: multipart/mixed;
boundary="IMA.Boundary.750407228" //内容类型
是多种的
--IMA.Boundary.750407228
Content-Type: text/plain; charset=US-ASCII //内
容类型：文本，字符是ASCII的
Content-Transfer-Encoding: 7bit //编码方式：7位
Content-Description: cc:Mail note part
77
Example 2
<html>
<head>
<meta HTTP-EQUIV="content-type"
CONTENT="text/html; charset=UTF-8">
<title>Google 搜索</title>
</head>
<body>
…
</body>
</html>
78
5.1.2 Internet Languages
•
•
•
•
HTML
XML
JavaScript
Java
79
HTML
80
Drawbacks & limitations of HTML
•
•
•
•
HTML has a fixed tag set
HTML is a presentation technology and is “flat”
High traffic volume.
HTML supports methods for data presentation.
Can’t markup data in any meaningful way
• Search engines return far to many hits
• Can’t specify collections of related pages
81
常用网页制作工具
• 目前网页上大部分信息都是通过HTML(超文本标记
语言)发布的，从原理上讲用Windows自带的记事
本程序就可以制作网页，但使用专门的网页制作
工具软件可以事半功倍
• 网页制作工具很多，最常用的有 FrontPage和
DreamWeaver两种。
82
• 1.FrontPage2002
• FrontPage2002是微软公司新推出的网页制作工具，它具有
很强的网页编辑和管理功能。特别是它自身附带多种模板
，为初学者提供了简单易行的制作途径。
•
• 2．DreamWeaver MX
• DreamWeaver MX 是Macromedia公司新推出的优秀的网页设
计工具，它可以在不用书写任何代码的情况下，创建具有
动态HTML特性的网页，例如动画和分层等。利用
DreamWeaver MX的目标浏览器检查特性，可以制作适合各
种浏览器、兼容性极好的网页。同时，它还可以在用可视
编辑器进行编辑时，同步看到文档的源代码。
83
1. HTML 标签
HTML 语言使用标签来指明文档中的
不同内容。标签是区分文本各个组成部分
的分界符，用来把HTML文档划分成不同的
逻辑部分(或结构)，如段落、标题和表格
等。
标签描述了文档的结构，它向浏览器
提供该文档的格式化信息，以传送文档的
外观特征。
84
大部分HTML 标签形式如下：
〈标签名〉相应内容〈／标签名〉
标签的名字用尖括号〈 〉括起来。
HTML 标签一般有起始标签与结束标
签两种，分别放在它起作用的文档两边。
起始标签与结束标签非常相似，只是结束
标签在“〈”号后面多了一个斜杠“／”。
85
２. HTML 文件
HTML 文件就是普通的文本文件。可
以使用两种基本方法制作HTML 页面：
一种是用文本编辑器，譬如Windows
操作环境下的Notebook，编辑文本及HTML
命令；
另一种是采用可视化软件，譬如
FrontPage，DreamWeaver，生成HTML 命令。
86
下面是一份HTML 文件的内容：
<HTML>
<HEAD><TITLE>例一</TITLE></HEAD>
<BODY>
<CENTER> <H1>网络认证培训考试</H1>
<HR size=”6” width="50%" noshade>
<font size="4"> 1.MCSE认证考试<br>2.ATC 认证
考试<br>3.Adobe认证考试<br></font>
</CENTER>
</BODY>
</HTML>
87
以上的HTML文件，经过浏览程序解释后，显示出
来的效果如图所示。窗口只显示文字和线条的大小
及格式，而HTML原文件的其他符号都不见了，这些
没有显示出来的符号，如<HTML>\<HEAD>等，它们的
作用是告诉浏览器，如何将文件内容以适当的格式
显示排列。
88
3. HTML 文件结构
任何一份 HTML 文件，都包含了表头
(Header)、本体(Body)、主题(Title)三个
要素，分别以 <HEAD>、<BODY>和 <TITLE>
标签来表示。同时也是为了HTML文件有别
于其它种类的文件， 另外再加上 <HTML>
标签加以强调。
89
<HTML>标签：<HTML>和</HTML>标签
置于整个文件的起始及结束处，表示文件
是属HTML 语言格式。其余标签都应该位
于该标签里面。
<HEAD>标签：<HEAD>和</HEAD>标签
标明文件的表头段，主要说明本文内容整
体信息，是文章的开场白。所有在表头段
的内容都不会显现在浏览器窗口的本体段
(Client area)里。
90
<BODY>标签：<BODY>和</BODY>标签
标明文件的本体区段，位于表头段以下的
地方，即是指经浏览器解读后显示在窗口
本体段(Client area)的内容。
<TITLE>标签：<TITLE>标签标明文件
内容的主题，让读者了解文件的主题。
<TITLE>标签里不允许有其它的标签存在。
91
<Hn>和<／Hn>标签：叫子标题标识，用
来区分章节标题字体的大小，浏览时会显示
不同的大小字型。HTML定义了６个级别的子
标题，其格式为：<Hn>子标题内容</Hn>。其
中n可在１～６中进行选择（１号最大，６号
最小）。
<FONT size=”n”>和</FONT>标签：该标识
符可以改变指定范围内文字字体的大小,
size属性用来设定字号，n的取值为１～７，
默认值为３。
92
<HR size=”n” width=“nn%” noshade>标
签：设定横线段的标签。size属性设定线段
粗细，n的默认值为2(最细）。Width属性用
来指定横线的长短，用满屏宽度的百分比来
设定，默认值为100%。noshade属性能够产生
一条普通的二维黑线，默认值为一条带阴影
的三维横线。
<CENTER>和<BR>标签：<CENTER>为使该标
签范围内的内容居中对齐；<BR>为换行控制
标签。
93
4. HTML 超链接
在HTML 中使用anchor 标签<a>来建
立链接，它将文本或图形标识为指向其
它HTML 文档、图形、小程序、多媒体效
果或HTML 文档中特定位置。在链接的语
法中必须包含一个参考属性href 和一个
结束标签</a>，如下所示：
<a href=“URL”>here's a link to another page.</a>
94
在链接语法中，<a></a>定义一个超
链接，here‘s a link to another Page
是超链接对象。href指定了目标URL，URL
是文档在Web或Internet上的地址，它总
是放在引号中。这个URL可以是一个书签、
网页或者站点。
在链接语法中，不仅可以从网页链
接到网页，而且还可以在一个网页内部链
接。所以在HTML中，将链接分成两部分，
一种是标准链接，另一种是页内链接。
95
标准链接
所谓标准链接，就是两个网页间的链接
，它有绝对URL和相对URL两种链接方式。
绝对URL包含四个部分，即协议指示符、
主机名、文件夹名和文件名。根据具体情况
，URL可能还包括其他信息，指定用户名或
服务器端脚本的输入，但这四个部分是URL
的基础。绝对URL举例如下：
http://www.sina.com.cn/index.htm
96
相对URL通常只包含文件夹和文件名，甚
至只有文件名，可以用这种相对URL指向位于
与原文档在同一服务器或同一文件夹中的文
件。这时，浏览器假设链接的目标文档与原
文档在同一文件夹中或同一服务器中，所以
不需要服务器名和协议名。可以利用相对URL
指向原文档附近的文档（称为文档相对URL）
或指向原文档所在的服务器（服务器相对
URL）。
97
页内链接
所谓页内链接，就是不仅可以链接到
其他网页，而且还可以链接到单个HTML网
页的任何地方，在网页中定义一个书签
book，然后可以在网页中设置一个页内链
接。它也有绝对URL和相对URL两种链接方
式.
98
例如：使用相对URL用anchor标签链接子标题，使得可以直接
进入文档中的这个位置。
首先是建立子标题:<H2>Proposals</H2>.
再加上anchor标签来建立链接：<H2><A>Proposals</A></H2>。
最后，加进NAME属性；
<H2><A NAME="pro">Proposal</A></H2>。
在浏览器中浏览文档时，看不出什么不同之处，但却提供了
直接链接文档中某个部分的工具。
当使用绝对URL时，假设Proposals段在indexjc.htm文档中，
而这个文档在ez-online.hb.cninfo.net服务器的swzn文件夹
中，则HTML源代码为：
<A HREF=" http://ez-nline.hb.cninfo.net/swzn/indexjc.htm
#pro">Proposal</A>
99
5. 插入图像
图像文件格式
图像文件格式可分为两种，一种是
点阵图形；另一种是矢量图形。浏览器
普遍支持的图形格式有GIF 和JPEG。
一般我们看到的HTML 文件里的图
形，多数为GIF 格式，这是因为GIF 的
显示速度比较好。如果我们要选择高品
质的显示画面，则可以选择JPEG 格式
的图形。
100
插入图象
HTML文件中，IMG 元素用来插图象。
属性SRC 的主要用途是指定图形资
源的位置，<img src=“URL”>。
属性ALT 是指定图形对应的文字叙
述，其值为任意一串文字,由编写HTML
文件者来设置。ALT 属性的设立主要针对
非图形界面浏览器使用者。但是，这对图
形界面浏览器也有帮助。每当这些浏览器
关闭显示图形功能后，这一串文字就派上
用场了。
101
图文版面的排列
(1). 图文的基本排列方式
图文对齐排列由IMG 元素的ALIGN 属
性来设置，图与文的对齐排列原则是以文
字的基线(Baseline)为依据。其中排列的
方式有以下几种：
图文对齐排列方式
图形顶端位置与文字基线对齐
ALIGN=up
图形中间位置与文字基线对齐
ALIGN=middle
图形底端位置与文字基线对齐
ALIGN=bottom(缺省值)
图形顶端位置与文字最高位置对齐
ALIGN=texttop
图形顶端位置与行文字基线对齐
ALIGN=baseline
102
(2). 浮动图形
图形与文字除了有以上五种排列方式
之外，也有另外两种排列方式，分别为
ALIGN=left和ALIGN=right。
当ALIGN为right时，文字与图形分开排
列，图形漂到文件的右边界；当ALIGN变为
left时，图形告左排列，并把图形底下的文
字往外挤出去，图形像漂至左边界。
103
(3). 图形配置控制
宽度设置 图形配置宽度的设置是
由WIDTH属性来完成。
高度设置 图形配置高度的设置是
由HEIGHT属性来实现。
例如：要插入的图形原来的尺寸为
100×90大小。如果我们要显示出
200×180大小的图，可将WIDTH和HEIGHT
两种属性分别设置成200和180，如下所示
<IMG SRC=“www.gif” WIDTH=200 HEIGHT=180>
104
6. 表格
表格在HTML语言中是以TABLE元素来
表示，其对应的标签为<TABLE>，并以
</TABLE>签来结束表格结构的有效性。
105
基本表格结构
在基本表格结构中，包含项目表头
(TH元素可表示表格项目的表头)和资料
(TD元素可表示资料)，并加上了表格的
标题。表格标题是以标签<CAPTION>表
示，并以</CAPTION>结束。表格标题、
项目表头和资料构成了表格基本结构三
个要素。<TR>元素是表示表格的行。
106
实例：
<table border><caption>Internet应用形态比较</caption>
<tr><th>应用类型\年度</th><th>1993年</th><th>1994年</th>
<th>1995年</th></tr>
<tr><th>当月传输量<br>(Giga Byte)</th><td>5,159</td>
<td>10,294</td><td>19,119</td></tr>
<tr><th>FTP</th><td>2,412</td><td>4,243</td><td>5,784</td></tr>
<tr><th>WWW</th><td>0.122</td><td>269</td><td>3,382<td></tr>
</table>
107
XML
108
XML
• XML is a text document markup language whose full
name is eXtensible Markup Language(可扩展标记语言).
• XML tags is used to describe what a piece of text
means.
• The XML tags differ from HTML tags mainly in two
functions:
– XML tags is to describe what a piece of text means such as
<phone> 123</phone> while HTML tags primarily concern with
how text should be displayed.
– XML has no predefined tags while HTML does.
109
An example XML document
• XML documents use a self-describing and simple
syntax.
<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
110
An example XML document
• XML documents use a self-describing and simple
syntax.
<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
XML declaration - defines the XML version and
the character encoding used in the document.
<body>Don't forget
me this weekend!</body>
</note>
In this case the document conforms to the 1.0
specification of XML and uses the ISO-8859-1
(Latin-1/West European) character set.
111
An example XML document
• XML documents use a self-describing and simple
syntax.
<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>Tove</to>
Root element is mandatory.
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
112
An example XML document
• XML documents use a self-describing and simple
syntax.
<?xml version="1.0" encoding="ISO-8859-1"?>
The next 4 lines describe 4
<note>
child elements of the root (to,
from,heading, and body)
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
113
An example XML document
• XML documents use a self-describing and simple
syntax.
<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
Finally the last line defines
the end of the root element.
114
XML Syntax (1) 语法
• All XML elements must have a closing tag
– In HTML some elements do not have to have a
closing tag. The following code is legal in HTML:
<p>This is a paragraph <p>This is another
paragraph
– In XML all elements must have a closing tag, like
this:
<p>This is a paragraph</p> <p>This is another
paragraph</p>
• Note: You might have noticed from the previous
example that the XML declaration did not have a
closing tag. This is not an error. The declaration is not
a part of the XML document itself. It is not an XML
element, and it should not have a closing tag.
115
XML Syntax (2)
• XML tags are case sensitive
– Unlike HTML, XML tags are case sensitive.
– With XML, the tag <Letter> is different from the
tag <letter>.
• Opening and closing tags must therefore be written
with the same case:
<Message>This is incorrect</message>
<message>This is correct</message>
116
XML Syntax (3)
• All XML elements must be properly nested
– Improper nesting of tags makes no sense to XML.
– In HTML some elements can be improperly nested
within each other like this:
<b><i>This text is bold and italic</b></i>
– In XML all elements must be properly nested within
each other like this:
<b><i>This text is bold and italic</i></b>
117
XML Syntax (4)
• All XML documents must have a root element
– All XML documents must contain a single tag pair to define a
root element.
– All other elements must be within this root element.
– All elements can have sub elements (child elements).
• Sub elements must be correctly nested within their
parent element:
<root> <child> <subchild>.....</subchild> </child>
</root>
118
XML Syntax (5)
• Attribute values must always be quoted
– With XML, it is illegal to omit quotation marks around
attribute values.
<?xml version="1.0" encoding="ISO-8859-1"?>
<note date=12/11/2002>
<to>Tove</to>
<from>Jani</from>
</note>
<?xml version="1.0" encoding="ISO-8859-1"?>
<note date="12/11/2002">
<to>Tove</to>
<from>Jani</from>
</note>
119
XML Syntax (6)
• With XML, white space is preserved
– With XML, the white space in your document is not
truncated.
– This is unlike HTML.
– With HTML, a sentence like this:
Hello
my name is Tove,
will be displayed like this:
Hello my name is Tove,
120
XML Syntax (7)
• Comments in XML
– The syntax for writing comments in XML is similar
to that of HTML.
<!-- This is a comment -->
121
XML Validation
• XML with correct syntax is Well Formed XML.
• XML validated against a DTD is Valid XML.
– A "Valid" XML document is a "Well Formed" XML document,
which also conforms to the rules of a Document Type
Definition (DTD)
<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
122
Definition of DTD
• DTD(Document Type Definition文件类型描述 )
– A DTD defines the legal elements of an XML
document.
– The purpose of a DTD is to define the legal building
blocks of an XML document. It defines the
document structure with a list of legal elements.
123
DTD Example
<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
note.dtd
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
124
JavaScript
125
JavaScript
<html><head><title>JavaScript Demonstration</title>
<script type="text/javascript" language="JavaScript1.2">
function display() {
document.body.bgColor = "black";
var ln1 = "Hello World!";
var ln2 = "This is the " + document.title + " page.";
var str = ln1.fontcolor("lime") + "<br />" + ln2.fontcolor("red");
document.writeln(str);
}
</script>
</head>
<body>
<script type="text/javascript" language="JavaScript1.2">
display();
</script>
</body></html>
126
JavaScript example
<html>
<head> My first JavaScript! </head>
<body>
<br> This is a normal HTML document.
<br>
<script language="LiveScript"> document.write("这是
以 JavaScript 印出的!")
</script>
<br> Back in HTML again.
</body>
</html>
127
Java Applet
import java.applet.Applet;
import java.awt.Graphics;
public class Demonstration extends Applet {
public void paint(Graphics g) {
g.drawRoundRect(5, 5, 100, 50, 10, 10);
g.drawString("Hello World!", 23, 35);
}
}
<p>Here is the result of the applet: <applet code="Demonstration.class"
width="110“ height="60" align="middle"></applet></p>
128
End of Unit5.1
129