internet concepts all
DESCRIPTION
thank for vistingTRANSCRIPT
1
Introduction to Computers and the Internet
Outline Introduction History of the Internet Personal Computing History of the World Wide Web
Hardware Trends Key Software Trend: Object Technology JavaScript: Object-Based Scripting for the Web C and C++ Java
2
History of the Internet
• ARPANET– Implemented in late 1960’s by ARPA (Advanced Research
Projects Agency of DOD)
– Networked computer systems of a dozen universities and institutions with 56KB communications lines
– Grandparent of today’s Internet
– Intended to allow computers to be shared
3
History of the Internet
• ARPA’s goals– Allow multiple users to send and receive info at same time
– Network operated packet switching technique• Digital data sent in small packages called packets
• Packets contained data, address info, error-control info and sequencing info
• Greatly reduced transmission costs of dedicated communications lines
– Network designed to be operated without centralized control• If portion of network fails, remaining portions still able to route
packets
4
History of the Internet
• Transmission Control Protocol (TCP)– Name of protocols for communicating over ARPAnet
– Ensured that messages were properly routed and that they arrived intact
• Organizations implemented own networks– Used both for intra-organization and communication
5
History of the Internet
• Huge variety of networking hardware and software appeared– ARPA achieved inter-communication between all platforms with
development of the IP• Internetworking Protocol
• Current architecture of Internet
– Combined set of protocols called TCP/IP
• The Internet– Limited to universities and research institutions
– Military became big user
– Next, government decided to access Internet for commercial purposes
6
History of the Internet
• Internet traffic grew– Businesses spent heavily to improve Internet
• Better service their clients
– Fierce competition among communications carriers and hardware and software suppliers
– Result• Bandwidth (info carrying capacity) of Internet increased
tremendously
• Costs plummeted
7
Personal Computing
• Computers today– As powerful as million dollar machines from 20 years ago
– Workstations• Most powerful desktops today
• Provide users with enormous capabilities
– Information easily shared over networks• Networks controlled by servers
– Common programs and data used by client computers
– Popular operating systems• UNIX, Mac OS X, Windows, Windows NT, Linux
8
History of the World Wide Web
• WWW– Allows computer users to locate and view multimedia-based
documents
– Introduced in 1990 by Tim Berners-Lee
• Internet today– Mixes computing and communications technologies
– Makes information constantly and instantly available to anyone with a connection
9
The Key Software Trend: Object Technology
• Objects– Reusable software components that model items in the real
world
– Makes software developers more productive
– Object-oriented programs often easier to understand, correct and modify than older types of programs
10
The Key Software Trend: Object Technology
• Object technology
– C++, developed in 1980s, based on two languages• C – Developed to implement the UNIX OS in early 1970’s
• Simula 67 – Simulation programming language from 1967
11
JavaScript: Object-BasedScripting for the Web
• JavaScript
– Attractive package for advancing level of programming language education
– Object-based language
– Supports proper software engineering techniques
12
C and C++
• History of C and C++– Evolved from B language (developed by Dennis Ritchie)
– C Implemented in 1972 as contemporary of Pascal• C++ developed by Bjarne Stroustrup in 1980s
• C++ Initially used in Unix, today used in virtually all new operating systems
• Advantages of C++– Extends C programming into object orientation
– Older C code may be integrated into C++
13
Java
• History of Java– Project Green (1991): developed C based language (later
called Java) for intelligent consumer electronic devices• Advanced by World Wide Web explosion in 1993: potential to
create Web pages with dynamic content
• Java introduced in May of 1995
• Advantages of Java– Allows Web pages with dynamic and interactive content
– Allows Large-scale enterprise applications
– Enhances Web Servers
– Now one of most widely implemented languages in world
14
Microsoft .NET
• .NET initiative– June 2000
– Use multiple programming languages in same project
– Internet and Web development• ASP.NET allows complex Web-based client-server
applications
• Brings software reuse to Web
15
Dynamic HTML
• DHTML– Two versions
• Microsoft
• Netscape
– Consists of number of technologies freely available for download
– Used for developing high-performance, Web-based applications
• Much of application’s work performed directly on client rather than on server or Internet
16
Microsoft Internet Explorer 6
OutlineIntroduction to the Internet Explorer 6 Web
Browser Connecting to the Internet Internet Explorer 6 Features Searching the Internet Online Help and Tutorials Keeping Track of Favorite Sites File Transfer Protocol (FTP) Electronic Mail Instant Messaging
Other Web Browsers
17
Objectives
• In this tutorial, you will learn:– To become familiar with the Microsoft Internet Explorer 6
(IE6) Web browser’s capabilities.
– To be able to use IE6 to search the “world of information” available on the World Wide Web.
– To be able to use the Internet as an information tool.
– To become familiar with e-mail.
– To learn about instant messaging.
– To become aware of the differences between various browsers.
18
Introduction
• Internet– Medium for communication and interaction
– Web Browsers• Software that allows users to view Web content
– Microsoft Internet Explorer
– Netscape Navigator
– Others
19
Connecting to the Internet
• Computer hardware– Computer hardware
• Modem
– Transmits data over phone lines
• Network card (NIC)
• Internet Service Provider (ISP)– Commercial
• AOL (www.aol.com)
• Microsoft Network (join.msn.com)
• NetZero (www.netzero.com)
20
Connecting to the Internet
• Internet Service Provider (ISP), cont.– Considerations
• Cost
• Bandwidth
– Amount of data transferred through communications medium in a fixed amount of time
– Broadband• Constantly connected
• 100’s of kbps (kilo-bits per second)
• DSL (Digital Subscriber Line)
– Uses existing phone lines
– Requires DSL modem
21
Connecting to the Internet
• Internet Service Provider (ISP), cont.– Broadband, cont.
• Cable Modem
– Use cable television lines
– Requires cable modem
• ISDN (Integrated Services Digital Network)
– Uses digital or standard telephone lines
– Requires a terminal adaptor
– Dial-up connection• Uses existing phone lines
• Interferes with phone use
• Must dial-up with modem.
• Usually 56 kbps (kilo-bits per second)
22
Connecting to the Internet
• Internet Connection Wizard– Use this application to configure computer’s Internet
connection.– Start > Programs > Accessories > Communications >
Internet Connection Wizard
• Tutorial available on Windows 2000
23
Connecting to the InternetFig. 2.1 Internet Connection Wizard helps configure Internet access.
Tutorial button
Specify what type of connection to use by clicking one of the option buttons
24
Internet Explorer 6 Features
• Web browser– Program which displays Internet content
• Microsoft Internet Explorer 6
• Netscape 7.1
– URL (Uniform/Universal Resource Locator)• Web page address
– HTTP (hyper-text transfer protocol)
• Protocol for transferring data over the Internet
• Type in Address field
– Hyperlinks• Graphical or textual elements
– Click to link to another Web page
– Loads new page into browser window
25
Internet Explorer 6 Features
• Web browser, cont.– History
• Lists recently visited Web sites
• Forward/Back buttons
• Refresh button
• History button
– Divides window and lists recently-visited sites on left
26
Internet Explorer 6 FeaturesFig. 2.2 Deitel Website.
Back
Recent historyForwardStop Refresh Address bar
Go
Pointer (over a hyperlink)
Scroll bars
27
Internet Explorer 6 FeaturesFig. 2.3 The History menu lists previously visited Web sites.
Interactive History window
History date options
Site from folder
Web site folder
Click and drag here to resize
Content window
28
Internet Explorer 6 Features
• Web browser, cont.– Autocomplete
• Completes Web address as it is being typed
• Completes form information as it is being typed
– File options• Save Web page for off-line use
– File > Save As• Save pictures from a Web site
– Right click image
• Choose Save Picture As…
29
Internet Explorer 6 FeaturesFig. 2.4 AutoComplete suggests possible URLs when given a partial address.
Partial address
URLs
30
Internet Explorer 6 FeaturesFig. 2.5 Saving a picture from a Web site.
31
Searching the Internet
• Search engines– Web sites that sort through by keywords and categories
• Google (www.google.com)• Yahoo! (www.yahoo.com)• Lycos (www.lycos.com)• Altavista (www.altavista.com)
– Store information in databases– Returns list of sites as hyperlinks
• Meta-search engines– Do not maintain databases– Aggregate results from multiple search engines– Microsoft Network (www.msn.com)
• Click Search button in toolbar
– MetaCrawler (www.metacrawler.com)
32
Online Help and TutorialsFig. 2.6 Searching the Internet with IE6.
New searchSearch window
Search categories
Search words
Search button
Toolbar
33
Online Help and Tutorials
• IE 6 built-in help feature– Help > Tour
• Overview of IE 6
– Help > Contents and Index• Search for help on specific topic
34
Online Help and TutorialsFig. 2.7 IE6 Help dialog.
Help menu
Categories
35
Keeping Track of Favorite Sites
• Favorites– List organizes frequently-visited sites
– Add sites to list• Favorites > Add to Favorites…
– Organize list• Favorites > Organize Favorites…
36
Keeping Track of Favorite Sites
Fig. 2.8 Favorites menu helps organize frequently visited Web sites.
Add/Organize Favorites
Favorites
Favorites window
Site information
Organize Favorites dialog
37
File Transfer Protocol (FTP)
• Downloading– Transfer files from remote servers over the Internet to a local
computer• Usually applications, browser plug-ins or files
• Plug-ins
– Applications which work with Web browsers to add functionality
• Shockwave (www.shockwave.com)
• Adobe Acrobat (www.adobe.com)
– Use FTP (File Transfer Protocol)• ftp://• FTP site
– May require login and password
– Right click file in FTP directory and copy to hard drive
38
File Transfer Protocol (FTP)Fig. 2.9 FTP site access in IE6.
FTP address
Folders in the FTP directoryFile
Login window
39
Electronic Mail
• E-mail (electronic mail)– Delivers formatted messages over Internet
– E-mail address• username@domainname
– Email Programs• Eudora
• Pegasus
• Outlook Express
– Free email accounts• Hotmail (www.hotmail.com)
• Yahoo! (mail.yahoo.com)
40
Electronic Mail
• E-mail (electronic mail), cont.– Post Office Protocol (POP)
• Remote server
• Download to local client
• E-mail scattered
– Internet Message Access Protocol (IMAP)• Manipulate messages directly on server
• Access all your e-mail from any machine
– Simple Mail Transfer Protocol (SMTP)• Used to send e-mail
41
Instant MessagingFig. 2.11 Outlook Express e-mail main screen..
Message list
Address book
Preview pane
Mailboxes
Message toolbar items
42
Instant Messaging
• Instant Messaging– Communicate (“chat”) in real time
– Send audio, video and files
– Several popular services• AOL Instant Messenger (www.aim.com)
• Yahoo! Messenger (messenger.yahoo.com)
• ICQ (web.icq.com)
• MSN Messenger (messenger.msn.com)
– Trillian (www.trillian.cc)• Able to communicate with all of the above
43
Instant Messaging
• Instant Messaging– Communicate (“chat”) in real time
– Send audio, video and files
– Several popular services• AOL Instant Messenger (www.aim.com)
• Yahoo! Messenger (messenger.yahoo.com)
• ICQ (web.icq.com)
• MSN Messenger (messenger.msn.com)
– Trillian (www.trillian.cc)• Able to communicate with all of the above
44
Instant Messaging
• Instant Messaging, cont.– Some instant messaging tools designed for collaboration
• NetMeeting
• Windows Messenger
• Include whiteboard feature to share drawings
– Screen name• Unique identifier
– Buddy List• Maintains list of screen names
45
Instant MessagingFig. 2.12 Buddy list and an instant message.
Buddy list
Instant message
46
Other Browsers
• Alternatives to Internet Explorer and Netscape– Offer new/different features and layout engines
• Mozilla (www.mozilla.org)
– Uses Gecko layout engine, basis for Netscape 7.1
• Opera (www.opera.com)
– Lightweight
• Amaya (www.w3.org/Amaya)
– Browser/editor
– Demonstrates W3C standards
– Each layout engine displays websites differently• Testing on multiple browsers important
47
Other BrowsersFig. 2.13 Mozilla web browser.
48
SMTPandFTP
49
26.1 Electronic Mail26.1 Electronic Mail
Sending/Receiving Mail
Addresses
User Agent
MIME
Mail Transfer Agent
Mail Access Protocols
50Figure 26.2 Email address
51Figure 26.3 User agent
52Figure 26.4 MIME
53Figure 26.5 MIME header
54Table 26.1Table 26.1 Data types and subtypes in MIMEData types and subtypes in MIME
Type Subtype Description
Text Plain Unformatted text
Multiport
Mixed Body contains ordered parts of different data types
Parallel Same as above, but no order
Digest Similar to mixed, but the default is message/RFC822
Alternative Parts are different versions of the same message
Message
RFC822 Body is an encapsulated message
Partial Body is a fragment of a bigger message
Ext. Body Body is a reference to another message
ImageJPEG Image is in JPEG
GIF Video is in GIF format
Video MPEG Video is in MPEG format
Audio Basic Single-channel encoding of voice at 8 KHz
ApplicationPostScript Adobe PostScript
Octet-Stream General binary data (8-bit bytes)
55
Table 26.2 Table 26.2 Content-transfer encodingContent-transfer encoding
Category Description
Type ASCII characters and short lines
7bit Non-ASCII characters and short lines
8bit Non-ASCII characters with unlimited-length lines
Binary 6-bit blocks of data are encoded into 8-bit ASCII characters
Base64 Non-ASCII characters are encoded as an equal sign followed by an ASCII code
56Figure 26. 6 Base64
57
Table 26.3 Table 26.3 Base64 encoding tableBase64 encoding table
Value Code Value Code Value Code Value Code Value Code Value Code
0 A 11 L 22 W 33 h 44 s 55 3
1 B 12 M 23 X 34 i 45 t 56 4
2 C 13 N 24 Y 35 j 46 u 57 5
3 D 14 O 25 Z 36 k 47 v 58 6
4 E 15 P 26 a 37 l 48 w 59 7
5 F 16 Q 27 b 38 m 49 x 60 8
6 G 17 R 28 c 39 n 50 y 61 9
7 H 18 S 29 d 40 o 51 z 62 +
8 I 19 T 30 e 41 p 52 0 63 /
9 J 20 U 31 f 42 q 53 1
10 K 21 V 32 g 43 r 54 2
58Figure 26.7 Quoted-printable
59Figure 26.8 MTA client and server
60Figure 26.9 Commands and responses
61Figure 26.10 Email delivery
62Figure 26.11 POP3
63
26.2 File Transfer 26.2 File Transfer
Connections
Communication
File Transfer
User Interface
Anonymous
64Figure 26.12 FTP
65Figure 26.13 Using the control connection
66Figure 26.14 Using the data connection
67Figure 26.15 File transfer
68
Example 1Example 1
Figure 26.16 (next slide) shows an example of how a file is stored.
1. The control connection is created, and several control commands and responses are exchanged.
2. Data are transferred record by record.
3. A few commands and responses are exchanged to close the connection.
69Figure 26.16 Example 1
70
Table 26.4 Table 26.4 List of FTP commands in UNIXList of FTP commands in UNIX
Commands
!, $, account, append, ascii, bell, binary, bye, case, cd, cdup, close, cr, delete, debug, dir, discount, form, get, glob, hash, help, lcd, ls, macdef, mdelete, mdir, mget, mkdir, mls, mode, mput, nmap, ntrans, open, prompt, proxy, sendport, put, pwd, quit, quote, recv, remotehelp, rename, reset, rmdir, runique, send, status, struct, sunique, tenex, trace, type, user, verbose,?
71
Example 2Example 2
We show some of the user interface commands that accomplish the same task as in Example 1. The user input is shown in boldface. As shown below, some of the commands are provided automatically by the interface. The user receives a prompt and provides only the arguments.
$ ftp challenger.atc.fhda.eduConnected to challenger.atc.fhda.edu220 Server readyName: forouzanPassword: xxxxxxxftp > ls /usr/user/report200 OK150 Opening ASCII mode......................226 transfer completeftp > close221 Goodbyeftp > quit
72
Example 3Example 3
We show an example of using anonymous FTP. We connect to internic.net, where we assume there are some public data available.
$ ftp internic.netConnected to internic.net220 Server readyName: anonymous331 Guest login OK, send "guest" as passwordPassword: guestftp > pwd257 '/' is current directoryftp > ls200 OK150 Opening ASCII modebin...ftp > close221 Goodbyeftp > quit
73
Domain Name System (DNS)
74
75
76
77
78
79
80
2004 Prentice Hall, Inc.All rights reserved.
Outline81
TCP/IPTransmission Control Protocol / Internet Protocol
82
TCPTransmission Control Protocol
• TCP is an alternative transport layer protocol over IP.
• TCP provides:– Connection-oriented
– Reliable
– Full-duplex
– Byte-Stream
83
Connection-Oriented
• Connection oriented means that a virtual connection is established before any user data is transferred.
• If the connection cannot be established - the user program is notified.
• If the connection is ever interrupted - the user program(s) is notified.
84
Reliable
• Reliable means that every transmission of data is acknowledged by the receiver.
• If the sender does not receive acknowledgement within a specified amount of time, the sender retransmits the data.
85
Byte Stream
• Stream means that the connection is treated as a stream of bytes.
• The user application does not need to package data in individual datagrams (as with UDP).
86
Full Duplex
• TCP provides transfer in both directions.
87
TCP Ports
• Interprocess communication via TCP is achieved with the use of ports (just like UDP).
• UDP ports have no relation to TCP ports (different name spaces).
88
TCP Segments
• The chunk of data that TCP asks IP to deliver is called a TCP segment.
• Each segment contains:– data bytes from the byte stream
– control information that identifies the data bytes
89
TCP Segment Format
Destination Port
Options (if any)
Data
1 byte 1 byte
Source Port
Sequence Number
Acknowledgment Number
1 byte 1 byte
offset Reser. Control Window
Checksum Urgent Pointer
90
TCP Lingo
• When a client requests a connection it sends a “SYN” segment (a special TCP segment) to the server port.
• SYN stands for synchronize. The SYN message includes the client’s ISN.
• ISN is Initial Sequence Number.
91
More...
• Every TCP segment includes a Sequence Number that refers to the first byte of data included in the segment.
• Every TCP segment includes an Acknowledgement Number that indicates the byte number of the next data that is expected to be received.– All bytes up through this number have already been
received.
92
And more...
• There are a bunch of control flags:– URG: urgent data included.
– ACK: this segment is (among other things) an acknowledgement.
– RST: error – connection must be reset.
– SYN: synchronize Sequence Numbers (setup)
– FIN: polite connection termination.
93
TCP Connection Creation
• A server accepts a connection.– Must be looking for new connections!
• A client requests a connection.– Must know where the server is!
94
Client Starts
• A client starts by sending a SYN segment with the following information:– Client’s ISN (generated pseudo-randomly)
– Maximum Receive Window for client.
95
Server Response
• When a waiting server sees a new connection request, the server sends back a SYN segment with:– Server’s ISN (generated pseudo-randomly)
– Request Number is Client ISN+1
96
Finally
• When the Server’s SYN is received, the client sends back an ACK with:– Acknowledgment Number is Server’s ISN+1
97
SYNISN=X
SYNISN=X
Client Server
SYNISN=Y ACK=X+1
SYNISN=Y ACK=X+1
ACK=Y+1ACK=Y+1
1
2
3
98
Why 3-Way?
• Why is the third message necessary?
• HINTS: – TCP is a reliable service.
– IP delivers each TCP segment.
– IP is not reliable.
99
TCP Data and ACK
• Once the connection is established, data can be sent.
• Each data segment includes a sequence number identifying the first byte in the segment.
• Each segment (data or empty) includes a request number indicating what data has been received.
100
TCP Buffers
• Both the client and server allocate buffers to hold incoming and outgoing data– The TCP layer does this.
• Both the client and server announce with every ACK how much buffer space remains (the Window field in a TCP segment).
101
Send Buffers
• The application gives the TCP layer some data to send.
• The data is put in a send buffer, where it stays until the data is ACK’d.
• The TCP layer won’t accept data from the application unless (or until) there is buffer space.
102
ACKs
• A receiver doesn’t have to ACK every segment (it can ACK many segments with a single ACK segment).
• If a sender doesn’t get an ACK after some time limit, it resends the data.
103
Termination
• The TCP layer can send a RST segment that terminates a connection if something is wrong.
• Usually the application tells TCP to terminate the connection politely with a FIN segment.
104
FIN
• Either end of the connection can initiate termination.
• A FIN is sent, which means the application is done sending data.
• The FIN is ACK’d.• The other end must now send a FIN.• That FIN must be ACK’d.
105
FINSN=X
FINSN=X
App1 App2
ACK=X+1ACK=X+1
ACK=Y+1ACK=Y+1
1
2
4
FINSN=Y
FINSN=Y
3...
106
TCP TIME_WAIT
• Once a TCP connection has been terminated (the last ACK sent) there is some unfinished business:– What if the ACK is lost? The last FIN will be resent and it
must be ACK’d.
107
TCP Sockets Programming
• Creating a passive mode (server) socket.• Establishing an application-level connection.• Sending/receiving data.• Terminating a connection.
108
Establishing a passive mode TCP socket
Passive mode:– Address already determined.
– Tell the kernel to accept incoming connection requests directed at the socket address.
• 3-way handshake
– Tell the kernel to queue incoming connections for us.
109
Accepting an incoming connection.
• Once we start listening on a socket, the O.S. will queue incoming connections– Handles the 3-way handshake
– Queues up multiple connections.
• When our application is ready to handle a new connection, we need to ask the O.S. for the next connection.
110
Terminating a TCP connection
• Either end of the connection can call the close() system call.
• If the other end has closed the connection, and there is no buffered data, reading from a TCP socket returns 0 to indicate EOF.
111
Client Code
• TCP clients can connect to a server, which:– takes care of establishing an endpoint address for the client
socket.
– Attempts to establish a connection to the specified server.• 3-way handshake
112
Reading from a TCP socket
• By default read() will block until data is available.
• Reading from a TCP socket may return less than max bytes (whatever is available).
• You must be prepared to read data 1 byte at a time!
113
Writing to a TCP socket
• write might not be able to write all bytes (on a nonblocking socket).
114
Java Sockets Programming
• The package java.net provides support for sockets programming
• Typically you import everything defined in this package with:
import java.net.*;
115
Classes
InetAddress
Socket
ServerSocket
DatagramSocket
DatagramPacket
UDPUDP
116
Socket class
• Corresponds to active TCP sockets only!– client sockets
– socket returned by accept();
• Passive sockets are supported by a different class: ServerSocket
117
Socket Constructors
• Constructor creates a TCP connection to a named TCP server.– There are a number of constructors:Socket(InetAddress server, int port);
Socket(InetAddress server, int port,
InetAddress local, int localport);
Socket(String hostname, int port);
118
Socket Methods
void close();
InetAddress getInetAddress(); getpeername
InetAddress getLocalAddress(); getsockname
InputStream getInputStream();
OutputStream getOutputStream();
• Lots more (setting/getting socket options, partial close, etc.)
119
Socket I/O
• Socket I/O is based on the Java I/O support (in the package java.io).
• InputStream and OutputStream are abstract classes– common operations defined for all kinds of InputStreams,
OutputStreams…
120
ServerSocket Class(TCP Passive Socket)
• Constructors:
ServerSocket(int port);
ServerSocket(int port, int backlog);
ServerSocket(int port, int backlog,InetAddress bindAddr);
121
ServerSocket Methods
Socket accept();
void close();
InetAddress getInetAddress();
int getLocalPort();
throw IOException, SecurityException
2004 Prentice Hall, Inc.All rights reserved.
Outline122
123
Newsgroups
• Newsgroups-electronic discussion groups where user reads and post message “posted” by a user can be read by several people
• Usenet-network of news groups• Messages posted on one newsgroup are distributed through Usenet
network• Different topics covered by newsgroups
– Recreational
– Technical
– Social area
– Etc.
124
• To access newsgroups you need– access to a news server– a news reader (client)– You must “subscribe” to the group
• News server must be maintained by a news administrator– Decides which groups will be delivered to a site
Newsgroups
125
Top Level for Names in News
• Groups• rec – Arts, hobbies, etc.• news – Usenet news• comp – Computer topics• soc – Social issues• sci – Scientific topics• misc – Topics don’t fit into any other category• alt – Alternative groups – often specific to the site
126
Format for Posted Articles
• Two parts: header and body
• Header (some common fields)
• Path: list of news servers involved in the transit of the article
• From: Address of person that posted the message
• Newsgroups: List of groups to which article was posted
• Subject or Summary
• Organization: Company or school associated with the person who posted the article
2004 Prentice Hall, Inc.All rights reserved.
Outline127
UUCP – Unix to Unix copy
Allows remote execution of commands and transfer of files, email and net news between computers
Most commanly used for dial up connections
128
Equipped with modem – so that they can communicate remotly.
Each uucp network has the list of neighbor systems with phone number, login names and passwords.
129
Internet Explorer and the World Wide Web
130
Terminology
• HTTP – HyperText Transfer Protocol is used to transmit Web documents• HTTPS – Secure protocol for confidential transactions• HTML – The language in which all Web documents are displayed
• TCP/IP – A suite of protocols that allows multiple platforms to communicate
• URL – Uniform Resource Locator
• Web Server – Computers that store hypertext and/or hypermedia documents and make them available to other computers
• Web Client – Personal computers that access files held by web servers
• Web Browser – Software application to locate and display web pages
131
Hyperlinks
• The essence of the Web as you click on a link to more to the next document, which may be stored on a different computer
• Hyperlinks may contain text, graphics, sound, or video links– Blue underlined fonts are unexplored
– Magenta links have been previously accessed
www.microsoft.com
www.microsoft.com
132
The Web is always changing
Address bar (address is constant, but the content changes)
Hyperlinks
Print button
133
http://www.annex.com/southwest/museum.htm
Means of access,HyperText Transfer Protocol
Internet Address (Web site)
Document
Path (Directory or Folder)
Uniform Resource Locator (URL)
134
Domain Names
• Original Six:– .edu (education)
– .com (commercial)
– .gov (government)
– .mil (military)
– .net (network administration)
– .org (non-profit)
• New domains:– .biz (business)
– .pro (licensed professional)
– .info (information services)
– .uk (United Kingdom)
– .ca (Canada)
– .au (Australia)
135
Examples of URLs
• My school: www.miami.edu• Exploring Windows: www.prenhall.com/grauer• My favorite site: www.refdesk.com• Anti-virus updates: www.symantec.com• Download software: www.tucows.com
136
A message travels the Internet
All that matters is the beginning and ending address
137
Searching the Web
• Search Engines• Web Directories• Meta Search Engines• Clearinghouse
138
A program that systematically searches the Web for documents on a specific topic
Uses a key word or words as a query Several search engines are available Each search engine has its own database No search engine is best Uses Boolean (logical) operators Returns “hits” or documents once search has
been submitted
Search Engines
139
Popular Web Search Engines
http://www.altavista.com/ http://www.msn.com/
http://www.go.com/ http://www.excite.com/
http://www.lycos.com http://www.askjeeves.com/
http://www.webcrawler.com/ http://www.google.com/
http://www.yahoo.com http://www.search.com/
140
Web Site and Saving an Image
Choose Save Picture As command
Right click picture for context-sensitive menu
141
Security and Privacy
• Secure transactions – https protocol
– Encryption
• Privacy– Cookie is a small file written to your disk each time you visit
a site
– Problem is when one site can read many cookies, e.g., DoubleClick.com
142
Returning to a Previous Site
History folder
Favorites folder
143
Organize Favorites
Move a favorite
Create a new folder
Delete a favorite
Rename a favorite
2004 Prentice Hall, Inc.All rights reserved.
Outline144
The TELNET Protocol
145
TELNET vs. telnet
• TELNET is a protocol that provides “a general,
bi-directional, eight-bit byte oriented
communications facility”.
• telnet is a program that supports the TELNET
protocol over TCP.
• Many application protocols are built upon the
TELNET protocol.
146
The TELNET Protocol
• TCP connection• data and control over the same connection.• Network Virtual Terminal• negotiated options
147
Network Virtual Terminal
• intermediate representation of a generic terminal.• provides a standard language for communication
of terminal control functions.
148
Network Virtual Terminal
NVTNVT NVTNVT
ServerServerProcessProcess
TCPTCP TCPTCP
149
Negotiated Options
• All NVTs support a minimal set of capabilities.• Some terminals have more capabilities than the
minimal set.• The 2 endpoints negotiate a set of mutually
acceptable options (character set, echo mode, etc).
150
Negotiated Options
• The protocol for requesting optional features is well defined and includes rules for eliminating possible negotiation “loops”.
• The set of options is not part of the TELNET protocol, so that new terminal features can be incorporated without changing the TELNET protocol.
151
Option examples
• Line mode vs. character mode
• echo modes
• character set (EBCDIC vs. ASCII)
152
Control Functions
• TELNET includes support for a series of control functions commonly supported by servers.
• This provides a uniform mechanism for communication of (the supported) control functions.
153
Control Functions
• Interrupt Process (IP)– suspend/abort process.
• Abort Output (AO)– process can complete, but send no more output to user’s
terminal.
• Are You There (AYT)– check to see if system is still running.
154
More Control Functions
• Erase Character (EC)– delete last character sent
– typically used to edit keyboard input.
• Erase Line (EL)– delete all input in current line.
155
Command Structure
• All TELNET commands and data flow through the same TCP connection.
• Commands start with a special character called the Interpret as Command escape character (IAC).
• The IAC code is 255.• If a 255 is sent as data - it must be followed by
another 255.
156
Looking for Commands
• Each receiver must look at each byte that arrives and look for IAC.
• If IAC is found and the next byte is IAC - a single byte is presented to the application/terminal (a 255).
• If IAC is followed by any other code - the TELNET layer interprets this as a command.
157
Command Codes
• IP 243• AO 244• AYT 245• EC 246• EL 247
WILLWILL 251251 WON’TWON’T 252252 DODO 253253 DON’TDON’T 254254 IACIAC 255255
158
Playing with TELNET
• You can use the telnet program to play with the TELNET protocol.
• telnet is a generic TCP client.– Sends whatever you type to the TCP socket.– Prints whatever comes back through the TCP socket.– Useful for testing TCP servers (ASCII based protocols).
159
Some TCP Servers you can play with
• Many Unix systems have these servers running (by default):– echo port 7– discard port 9– daytime port 13– chargen port 19
160
telnet hostname port
> telnet rcs.rpi.edu 7Trying 128.113.113.33...Connected to cortez.sss.rpi.edu (128.113.113.33).
Escape character is '^]'.Hi daveHi davestop itstop it^]telnet> quitConnection closed.
161
telnet vs. TCP
• Not all TCP servers talk TELNET (most don't)
• You can use the telnet program to play with these servers, but the fancy commands won't do anything.– type ^], then "help" for a list of fancy TELNET stuff you can do in telnet.
2004 Prentice Hall, Inc.All rights reserved.
Outline162
Introduction to HTML
163
Agenda
• Introduction to HTML• Creating and Publishing Web pages• Main HTML elements• Block-Level HTML elements• Text-Level HTML elements• Creating Hyperlinks• Adding Images • Creating Tables, Forms and Frames
164
Hypertext Markup Language
• Language used to design web pages• Text mixed with Markup tags• Markup tags describe
• Appearance
• Layout
• Content
165
HTML Document Template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 EN"><html><head><title>Title</title> </head><body><!-- all the HTML for display --> : : : : : :</body></html>
166
Main HTML Elements
1. DOCTYPE2. HTML3. HEAD Elements that can be included inside HEAD tag:
• TITLE• BASE• META• SCRIPT,NOSCRIPT• STYLE• LINK
167
Main HTML Elements(Continued)
4. BODY Attributes:
BACKGROUND
BGCOLORTEXTLINK,ALINK,VLINK
5. Elements inside BODY tag<body>
HTML tags</body>
168
Block-Level Elements
• Headings• H1…H6• ALIGN
• Basic Text Sections• P• ALGN• PRE• ADDRESS• BLOCKQUOTE• WIDTH• ADDRESS
• Lists• OL• LI• UL• DL• DT• DD
• Tables , Forms & Frames• Misc.
• HR• BR• CENTER
169
P: The Basic Paragraph
• Attributes–ALIGN
•LEFT (Default), RIGHT,CENTER•White Space is ignored•Consecutive <P>s don’t yield multiple lines•End tag is optional
<body><p> Paragraph 1</p><p> Paragraph 2</p></body>
170
LISTS
•Ordered Lists (OL)<OL>
<LI>
<LI>
:
</OL>
–Attributes : TYPE, START, COMPACTList Entries (LI)
–End Tag optional
–Attributes: VALUE, TYPE
171
LISTS (Continued)
•Unordered Lists (Bulleted Lists)<UL><LI><LI>….</UL>
–Attributes: TYPE, COMPACTTYPE can be DISC, CIRCLE, SQUARE
Ordered & Unordered lists can be nested.
172
Text-Level Elements
• Physical Character Styles– B, I, TT, U, SUB, SUP, BIG, SMALL, STRIKE, S, BLINK
– FONT• SIZE
• COLOR
• FACE
– BASEFONT
– SIZE
• Logical Character Styles– EM, STRONG, CODE, SAMP, KBD, DFN, VAR, CITE
173
Text – Level Elements (Continued)
• Hypertext links– A
• Attributes: HREF, TARGET, NAME,….
• Images– IMG
• Attributes: SRC (required), ALT, ALIGN, WIDTH, HEIGHT, VSPACE, HSPACE, BORDER, USEMAP, ISMAP
• Misc.– BR (Explicit line break)– AREA (Client side image maps)– APPLET (Java)– HR ( Horizontal Line)
174
Hypertext Links
• Links can contain images and other text level elements– <A HREF=…..>………</A>
• Link to absolute URL– Use a complete URL starting with http://
• Link to relative URL– Use a filename or relative path to filename
• Interpreted with respect to current file
175
Hypertext Links (Continued)
• Link to a section– Use a section name preceded by #– <A HREF=“#Section2”>Section 2</A>
• Link to a section in a URL– Use absolute or relative URL, then #, then section name
• Naming a section– Use <A NAME=“…..”>and do not include # sign– <A NAME=“Section2”>Images</A>
176
IMG – Embedding Images
• Example– <IMG SRC=“SomeFile.gif” ALT=“My Page” WIDTH=400
HEIGHT=300>
• Attributes– SRC (Required)– ALT (Technically Required)– ALIGN– WIDTH, HEIGHT– HSPACE, VSPACE– BORDER– USEMAP, ISMAP
177
Tables
• Template<TABLE BORDER=1>
<CAPTION>Table Caption</CAPTION><TR><TH>Heading 1</TH><TH>Heading 2</TH></TR><TR><TD>Row 1 Col 1 </TD><TD>Row 1 Col 2</TD></TR><TR><TD>Row 2 Col 1 </TD><TD>Row 2 Col 2</TD></TR>
</TABLE>
• TABLE Element Attributes– ALIGN : Horizontal alignment of the table .Values can be LEFT (default), RIGHT, CENTER.– BORDER : Specifies the width in pixels around the table .Default 0– CELLSPACING : Gives the space in pixels between adjacent cells. Default 3– CELLPADDING : Determines the empty space between the cell’s border and table element. Default is 1.– WIDTH : Specifies the width of the table in pixel or as percentage of the browser window.– BGCOLOR : Specifies the background color of the table
178
Tables (Continued)
• Table CAPTION
Attribute : ALIGN (Values: TOP, BOTTOM)
• Table Row (TR)– Used to define each row in the table
– Each row will contain <TH> & <TD>
– Attributes:• ALIGN, VALIGN, BGCOLOR
179
Tables (Continued)
• Table Cells TH & TD• Attributes :
– COLSPAN defines a heading or a cell data that spans more than one column.
– ROWSPAN defines a heading or a cell data that spans more than one row.
– ALIGN– VALIGN– WIDTH, HEIGHT
180
Frames
• Frame Template<html>
<head><title>DocumentTitle</title></head><frameset …>
<!– Frame and nested Frameset entries here --><noframes><body>
<!-- For non frame browsers --></body></noframes>
</frameset><html>
181
Frames (Continued)
• Attributes – COLS, ROWS
• A comma separated list of pixel values, percentages and weighted remainders.
• Frameset entries should always specify atleast two rows or columns.
• Examples
<frameset rows=“50,10%,*,2*”>…</frameset>
<frameset cols=“25,*,*”>….</frameset>
182
Frames (Continued)
• Frame Attributes (Continued)– FRAMEBORDER
• Indicates whether borders will be drawn between frame cells.• Yes or 1 specifies border & No or 0 specifies no border.
– BORDER (Netscape), FRAMESPACING (IE)• Specifies the border between frame cells.
– BORDERCOLOR• Sets the color of the border between cells.
183
Frames (Continued)
• Specifying contents of frame cells.– SRC
• URL of the document to place in the frame cell.– NAME
• Supplies destination for TARGET attribute for hypertext links.– BORDERCOLOR, FRAMEBORDER– MARGINWIDTH, MARGINHEIGHT
• Sets left/right & top/bottom cell margins.– SCROLLING
• Indicates whether cells should have margins.– NORESIZE
• Disables the ability to resize the frame cells.
184
Targeting Frame Cells
• Specify the cell in which place a page referenced by a hyperlink.
• The NAME attribute of the <FRAME>– <FRAME SRC=“” NAME=“Cell name”>
• The TARGET attribute of the <A HREF>– <A HREF=“ “ TARGET=“Cell name”>
185
Forms
• Adds interactivity to the html pages.• Template
<form action=“url” method=“get/post”>…form elements</form>
• Attributes– ACTION
• Specifies the location of a script or program that will process the data sent by the browser via the selections in the form.
– METHOD• define one of two ways the data from the form is sent to the program
that will process the data.
186
Forms (Continued)
• Basic Form Elements– Text fields
– Password fields
– Textarea fields
– Radio buttons
– Checkboxes
– Menu selections
– Buttons
187
Forms (Continued)
• Text input elements– Creates a textbox.
– Type attribute of input set to “text”.
– Attributes: name, size, value, maxlength
• Password input elements– Creates a textbox to enter password.
– Type attribute of input set to “password”.
– Attributes: name, size, value, maxlength
188
Forms (Continued)
• Check Boxes– Adds check boxes to the web page.– Type attribute of input set to “checkbox”.– Attributes: name, value, checked.– More than one can be selected.– Each has different value for name attribute.
• Radio Buttons– Adds radio buttons to the web page.– Type attribute of input set to “radio”.– Attributes: name, value, checked.– Only one button can be selected.– Same name for all radio buttons in the group.
189
Forms (Continued)
• Menu Selection– Provides drop-down menus.
– Here type=“select”
– <OPTION>..</OPTION> tag defines the text displayed in the menu.
– Attributes for OPTION: selected
• Submit & Reset Buttons– For submit, type=“submit”
– For reset, type=“reset”
– Both have attribute : value
190
Summary
• HTML document should be enclosed in the HTML,HEAD & BODY tags.
• Documents are composed of block-level and text-level elements.
• Hypertext links can be absolute or relative.• Tables are built using TABLE, TR, TH & TD tags.• Frames are created by FRAMESET & FRAME tags with
attributes like ROWS, COLS, SRC..• Forms contain elements like textboxes, radio buttons,
checkboxes, drop-down menu & buttons for submit and reset.
191
Dynamic HTML: Object Model and Collections
Outline Introduction Object Referencing Collections all and children Dynamic Styles Dynamic Positioning Using the frames Collection navigator Object Summary of the DHTML Object Model
192
Objectives
• In this lesson, you will learn:– To use the Dynamic HTML Object Model and scripting to
create dynamic Web pages.
– To understand the Dynamic HTML object hierarchy.
– To use the all and children collections to enumerate all of the XHTML elements of a Web page.
– To use dynamic styles and dynamic positioning.
– To use the frames collection to access objects in a separate frame on your Web page.
– To use the navigator object to determine which browser is being used to access your page.
193
Introduction
• Dynamic HTML Object Model– Allows Web authors to control the presentation of their pages– Gives them access to all the elements on their pages
• Web page– Elements, forms, frames, tables– Represented in an object hierarchy
• Scripting– Retrieve and modify properties and attributes
194
Object Referencing
• The simplest way to reference an element is by using the element’s id attribute.
• The element is represented as an object– XHTML attributes become properties that can be manipulated by
scripting
1951 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 13.1: reference.html -->
6 <!-- Object Model Introduction -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Object Model</title>
11
12 <script type = "text/javascript">
13 <!--
14 function start()
15 {
16 alert( pText.innerText );
17 pText.innerText = "Thanks for coming.";
18 }
19 // -->
20 </script>
21
22 </head>
Outline
reference.html(1 of 2)
19623
24 <body onload = "start()">
25 <p id = "pText">Welcome to our Web page!</p>
26 </body>
27 </html>
Outline
reference.html(2 of 2)
197
Collections all and children
• Collections– Arrays of related objects on a page
– all• all the XHTML elements in a document
– children• Specific element contains that element’s child elements
1981 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig 13.2: all.html -->
6 <!-- Using the all collection -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Object Model</title>
11
12 <script type = "text/javascript">
13 <!--
14 var elements = "";
15
16 function start()
17 {
18 for ( var loop = 0; loop < document.all.length; ++loop )
19 elements += "<br />" + document.all[ loop ].tagName;
20
21 pText.innerHTML += elements;
22 alert( elements );
23 }
24 // -->
Outline
all.html(1 of 2)
19925 </script>
26 </head>
27
28 <body onload = "start()">
29 <p id = "pText">Elements on this Web page:</p>
30 </body>
31 </html>
Outline
all.html(2 of 2)
200Outline
children.html(1 of 3)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig 13.3: children.html -->
6 <!-- The children collection -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Object Model</title>
11
12 <script type = "text/javascript">
13 <!--
14 var elements = "<ul>";
15
16 function child( object )
17 {
18 var loop = 0;
19
20 elements += "<li>" + object.tagName + "<ul>";
21
201Outline
children.html(2 of 3)
22 for ( loop = 0; loop < object.children.length; loop++ )
23 {
24 if ( object.children[ loop ].children.length )
25 child( object.children[ loop ] );
26 else
27 elements += "<li>" +
28 object.children[ loop ].tagName +
29 "</li>";
30 }
31
32 elements += "</ul>" + "</li>";
33 }
34 // -->
35 </script>
36 </head>
37
20238 <body onload = "child( document.all[ 4 ] );
39 myDisplay.outerHTML += elements;
40 myDisplay.outerHTML += ‘</ul>’;">
41
42 <p>Welcome to our <strong>Web</strong> page!</p>
43
44 <p id = "myDisplay">
45 Elements on this Web page:
46 </p>
47
48 </body>
49 </html>
Outline
children.html(3 of 3)
203
204
Dynamic Styles
• Element’s style can be changed dynamically
• Dynamic HTML Object Model also allows you to change the class attribute
2051 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 13.4: dynamicstyle.html -->
6 <!-- Dynamic Styles -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Object Model</title>
11
12 <script type = "text/javascript">
13 <!--
14 function start()
15 {
16 var inputColor = prompt(
17 "Enter a color name for the " +
18 "background of this page", "" );
19 document.body.style.backgroundColor = inputColor;
20 }
21 // -->
22 </script>
23 </head>
Outline
dynamicstyle.html(1 of 2)
20624
25 <body onload = "start()">
26 <p>Welcome to our Web site!</p>
27 </body>
28 </html>
Outline
dynamicstyle.html(2 of 2)
2071 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 13.5: dynamicstyle2.html -->
6 <!-- More Dynamic Styles -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Object Model</title>
11
12 <style type = "text/css">
13
14 .bigText { font-size: 3em;
15 font-weight: bold }
16
17 .smallText { font-size: .75em }
18
19 </style>
20
Outline
dynamicstyle2.html(1 of 2)
20821 <script type = "text/javascript">
22 <!--
23 function start()
24 {
25 var inputClass = prompt(
26 "Enter a className for the text " +
27 "(bigText or smallText)", "" );
28 pText.className = inputClass;
29 }
30 // -->
31 </script>
32 </head>
33
34 <body onload = "start()">
35 <p id = "pText">Welcome to our Web site!</p>
36 </body>
37 </html>
Outline
dynamicstyle2.html(2 of 2)
209
210
Dynamic Positioning
• XHTML elements can be positioned with scripting– Declare an element’s CSS position property to be either absolute
or relative– Move the element by manipulating any of the top, left, right or bottom CSS properties
2111 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 13.6: dynamicposition.html -->
6 <!-- Dynamic Positioning -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Dynamic Positioning</title>
11
12 <script type = "text/javascript">
13 <!--
14 var speed = 5;
15 var count = 10;
16 var direction = 1;
17 var firstLine = "Text growing";
18 var fontStyle = [ "serif", "sans-serif", "monospace" ];
19 var fontStylecount = 0;
20
21 function start()
22 {
23 window.setInterval( "run()", 100 );
24 }
25
Outline
dynamicposition.html(1 of 3)
21226 function run()
27 {
28 count += speed;
29
30 if ( ( count % 200 ) == 0 ) {
31 speed *= -1;
32 direction = !direction;
33
34 pText.style.color =
35 ( speed < 0 ) ? "red" : "blue" ;
36 firstLine =
37 ( speed < 0 ) ? "Text shrinking" : "Text growing";
38 pText.style.fontFamily =
39 fontStyle[ ++fontStylecount % 3 ];
40 }
41
42 pText.style.fontSize = count / 3;
43 pText.style.left = count;
44 pText.innerHTML = firstLine + "<br /> Font size: " +
45 count + "px";
46 }
47 // -->
48 </script>
49 </head>
50
Outline
dynamicposition.html(2 of 3)
21351 <body onload = "start()">
52 <p id = "pText" style = "position: absolute; left: 0;
53 font-family: serif; color: blue">
54 Welcome!</p>
55 </body>
56 </html>
Outline
dynamicposition.html(3 of 3)
214
215
Using the frames Collection
• Referencing elements and objects in different frames by using the frames collection
2161 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4
5 <!-- Fig. 13.7: index.html -->
6 <!-- Using the frames collection -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Frames collection</title>
11 </head>
12
13 <frameset rows = "100, *">
14 <frame src = "top.html" name = "upper" />
15 <frame src = "" name = "lower" />
16 </frameset>
17
18 </html>
Outline
index.html(1 of 1)
2171 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 13.8: top.html -->
6 <!-- Cross-frame scripting -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>The frames collection</title>
11
12 <script type = "text/javascript">
13 <!--
14 function start()
15 {
16 var text = prompt( "What is your name?", "" );
17 parent.frames( "lower" ).document.write(
18 "<h1>Hello, " + text + "</h1>" );
19 }
20 // -->
21 </script>
22 </head>
23
Outline
top.html(1 of 2)
21824 <body onload = "start()">
25 <h1>Cross-frame scripting!</h1>
26 </body>
27 </html>
Outline
top.html(2 of 2)
219
220
navigator Object
• Netscape, Mozilla, Microsoft’s Internet Explorer– Others as well
• Contains information about the Web browser
• Allows Web authors to determine what browser the user is using
2211 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig 13.9: navigator.html -->
6 <!-- Using the navigator object -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>The navigator Object</title>
11
12 <script type = "text/javascript">
13 <!--
14 function start()
15 {
16 if (navigator.appName=="Microsoft Internet Explorer")
17 {
18 if ( navigator.appVersion.substring( 1, 0 ) >= "4" )
19 document.location = "newIEversion.html";
20 else
21 document.location = "oldIEversion.html";
22 }
23 else
24 document.location = "NSversion.html";
25 }
Outline
navigator.html(1 of 2)
22226 // -->
27 </script>
28 </head>
29
30 <body onload = "start()">
31 <p>Redirecting your browser to the appropriate page,
32 please wait...</p>
33 </body>
34 </html>
Outline
navigator.html(2 of 2)
223
Summary of the DHTML Object Model
applets
all
anchors
embeds
forms
filters
images
links
plugins
styleSheets
scripts
frames
plugins
collection
body
screen
document
history
navigator
location
event
document
document
object
window
Key
Fig. 13.10 DHTML Object Model.
224
Summary of the DHTML Object Model
Object or collection Description Objects
window Represents the browser window and provides access to the document object contained in the window. If the window contains frames a separate window object is created automatically for each frame, to provide access to the document rendered in the frame. Frames are considered to be subwindows in the browser.
document Represents the XHTML document rendered in a window. The document object provides access to every element in the XHTML document and allows dynamic modification of the XHTML document.
body Provides access to the body element of an XHTML document. history Keeps track of the sites visited by the browser user. The object provides a script
programmer with the ability to move forward and backward through the visited sites, but for security reasons does not allow the actual site URLs to be manipulated.
navigator Contains information about the Web browser, such as the name of the browser, the version of the browser, the operating system on which the browser is running and other information that can help a script writer customize the user’s browsing experience.
location Contains the URL of the rendered document. When this object is set to a new URL, the browser immediately switches (navigates) to the new location.
event Can be used in an event handler to obtain information about the event that occurred (e.g., the mouse x-y coordinates during a mouse event).
screen Contains information about the computer screen for the computer on which the browser is running. Information such as the width and height of the screen in pixels can be used to determine the size at which elements should be rendered in a Web page.
Fig. 13.11 Objects in the Internet Explorer 6 Object Model.
225
Summary of the DHTML Object Model
Object or collection Description Collections
all Many objects have an all collection that provides access to every element contained in the object. For example, the body object’s all collection provides access to every element in the body element of an XHTML document.
anchors Collection contains all the anchor elements (a) that have a name or id attribute. The elements appear in the collection in the order they were defined in the XHTML document.
applets Contains all the applet elements in the XHTML document. Currently, the most common applet elements are Java applets.
embeds Contains all the embed elements in the XHTML document.
forms Contains all the form elements in the XHTML document. The elements appear in the collection in the order they were defined in the XHTML document.
frames Contains window objects that represent each frame in the browser window. Each frame is treated as its own subwindow.
images Contains all the img elements in the XHTML document. The elements appear in the collection in the order they were defined in the XHTML document.
links Contains all the anchor elements (a) with an href property. This collection also contains all the area elements that represent links in an image map.
Fig. 13.11 Objects in the Internet Explorer 6 Object Model.
226
Summary of the DHTML Object Model
Object or collection Description plugins Like the embeds collection, this collection contains all the embed elements in the
XHTML document. scripts Contains all the script elements in the XHTML document.
styleSheets Contains styleSheet objects that represent each style element in the XHTML document and each style sheet included in the XHTML document via link.
Fig. 13.11 Objects in the Internet Explorer 6 Object Model.
227
Cascading Style Sheets™ (CSS)
Outline Introduction Inline Styles Embedded Style Sheets Conflicting Styles Linking External Style Sheets
W3C CSS Validation Service Positioning Elements Backgrounds Element Dimensions Text Flow and the Box Model User Style Sheets Web Resources
228
Objectives
• In this lesson, you will learn:– To control the appearance of a Web site by creating style
sheets.
– To use a style sheet to give all the pages of a Web site the same look and feel.
– To use the class attribute to apply styles.
– To specify the precise font, size, color and other properties of displayed text.
– To specify element backgrounds and colors.
– To understand the box model and how to control the margins, borders and padding.
– To use style sheets to separate presentation from content.
229
Introduction
• Cascading Style Sheets (CSS)– Separation of structure from presentation
230
Inline Styles
• Declare an individual element’s format– Attribute style
– CSS property• Followed by a colon and a value
2004 Prentice Hall, Inc.All rights reserved.
Outline231
inline.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.1: inline.html -->
6 <!-- Using inline styles -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Inline Styles</title>
11 </head>
12
13 <body>
14
15 <p>This text does not have any style applied to it.</p>
16
17 <!-- The style attribute allows you to declare -->
18 <!-- inline styles. Separate multiple styles -->
19 <!-- with a semicolon. -->
20 <p style = "font-size: 20pt">This text has the
21 <em>font-size</em> style applied to it, making it 20pt.
22 </p>
23
2004 Prentice Hall, Inc.All rights reserved.
Outline232
inline.html(2 of 2)
24 <p style = "font-size: 20pt; color: #0000ff">
25 This text has the <em>font-size</em> and
26 <em>color</em> styles applied to it, making it
27 20pt. and blue.</p>
28
29 </body>
30 </html>
233
Embedded Style Sheets
• Embed an entire CSS document in an XHTML document’s head section– Multipurpose Internet Mail Extensions (MIME) type
• Describes a file’s content
– Property background-color• Specifies the background color
– Property font-family• Specifies the name of the font to use
– Property font-size• Specifies a 14-point font
2004 Prentice Hall, Inc.All rights reserved.
Outline234
declared.html(1 of 3)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.2: declared.html -->
6 <!-- Declaring a style sheet in the header section. -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Style Sheets</title>
11
12 <!-- this begins the style sheet section -->
13 <style type = "text/css">
14
15 em { background-color: #8000ff;
16 color: white }
17
18 h1 { font-family: arial, sans-serif }
19
20 p { font-size: 14pt }
21
22 .special { color: blue }
23
24 </style>
25 </head>
2004 Prentice Hall, Inc.All rights reserved.
Outline235
declared.html(2 of 3)
26
27 <body>
28
29 <!-- this class attribute applies the .special style -->
30 <h1 class = "special">Deitel & Associates, Inc.</h1>
31
32 <p>Deitel & Associates, Inc. is an internationally
33 recognized corporate training and publishing organization
34 specializing in programming languages, Internet/World
35 Wide Web technology and object technology education.
36 Deitel & Associates, Inc. is a member of the World Wide
37 Web Consortium. The company provides courses on Java,
38 C++, Visual Basic, C, Internet and World Wide Web
39 programming, and Object Technology.</p>
40
41 <h1>Clients</h1>
42 <p class = "special"> The company's clients include many
43 <em>Fortune 1000 companies</em>, government agencies,
44 branches of the military and business organizations.
45 Through its publishing partnership with Prentice Hall,
46 Deitel & Associates, Inc. publishes leading-edge
47 programming textbooks, professional books, interactive
48 CD-ROM-based multimedia Cyber Classrooms, satellite
49 courses and World Wide Web courses.</p>
50
2004 Prentice Hall, Inc.All rights reserved.
Outline236
declared.html(3 of 3)
51 </body>
52 </html>
237
Conflicting Styles
• Inheritance– Descendant’s properties have greater specificity than
ancestor’s properties
2004 Prentice Hall, Inc.All rights reserved.
Outline238
advance.html(1 of 3)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig 6.3: advanced.html -->
6 <!-- More advanced style sheets -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>More Styles</title>
11
12 <style type = "text/css">
13
14 a.nodec { text-decoration: none }
15
16 a:hover { text-decoration: underline;
17 color: red;
18 background-color: #ccffcc }
19
20 li em { color: red;
21 font-weight: bold }
22
23 ul { margin-left: 75px }
24
2004 Prentice Hall, Inc.All rights reserved.
Outline239
advance.html(2 of 3)
25 ul ul { text-decoration: underline;
26 margin-left: 15px }
27
28 </style>
29 </head>
30
31 <body>
32
33 <h1>Shopping list for <em>Monday</em>:</h1>
34
35 <ul>
36 <li>Milk</li>
37 <li>Bread
38 <ul>
39 <li>White bread</li>
40 <li>Rye bread</li>
41 <li>Whole wheat bread</li>
42 </ul>
43 </li>
44 <li>Rice</li>
45 <li>Potatoes</li>
46 <li>Pizza <em>with mushrooms</em></li>
47 </ul>
48
2004 Prentice Hall, Inc.All rights reserved.
Outline240
advance.html(3 of 3)
49 <p><a class = "nodec" href = "http://www.food.com">
50 Go to the Grocery store</a></p>
51
52 </body>
53 </html>
241
Linking External Style Sheets
• External style sheets– Can provide uniform look and feel to entire site
2004 Prentice Hall, Inc.All rights reserved.
Outline242
styles.css(1 of 1)
1 /* Fig. 6.4: styles.css */
2 /* An external stylesheet */
3
4 a { text-decoration: none }
5
6 a:hover { text-decoration: underline;
7 color: red;
8 background-color: #ccffcc }
9
10 li em { color: red;
11 font-weight: bold;
12 background-color: #ffffff }
13
14 ul { margin-left: 2cm }
15
16 ul ul { text-decoration: underline;
17 margin-left: .5cm }
2004 Prentice Hall, Inc.All rights reserved.
Outline243
external.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.5: external.html -->
6 <!-- Linking external style sheets -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Linking External Style Sheets</title>
11 <link rel = "stylesheet" type = "text/css"
12 href = "styles.css" />
13 </head>
14
15 <body>
16
17 <h1>Shopping list for <em>Monday</em>:</h1>
18 <ul>
19 <li>Milk</li>
20 <li>Bread
21 <ul>
22 <li>White bread</li>
23 <li>Rye bread</li>
24 <li>Whole wheat bread</li>
25 </ul>
2004 Prentice Hall, Inc.All rights reserved.
Outline244
external.html(2 of 2)
26 </li>
27 <li>Rice</li>
28 <li>Potatoes</li>
29 <li>Pizza <em>with mushrooms</em></li>
30 </ul>
31
32 <p>
33 <a href = "http://www.food.com">Go to the Grocery store</a>
34 </p>
35
36 </body>
37 </html>
245
W3C CSS Validation Service
• Validates external CSS documents• Ensures that style sheets are syntactically correct
246
W3C CSS Validation Service
Fig. 6.6 Validating a CSS document. (Courtesy of World Wide Web Consortium (W3C).)
247
W3C CSS Validation Service
Fig. 6.7 CSS validation results. (Courtesy of World Wide Web Consortium (W3C).)
248
Positioning Elements
• Absolute positioning– z-index attribute
• Layer overlapping elements properly
• Relative positioning– Elements are positioned relative to other elements
2004 Prentice Hall, Inc.All rights reserved.
Outline249
positioning.html(1 of 1)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig 6.8: positioning.html -->
6 <!-- Absolute positioning of elements -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Absolute Positioning</title>
11 </head>
12
13 <body>
14
15 <p><img src = "i.gif" style = "position: absolute;
16 top: 0px; left: 0px; z-index: 1"
17 alt = "First positioned image" /></p>
18 <p style = "position: absolute; top: 50px; left: 50px;
19 z-index: 3; font-size: 20pt">Positioned Text</p>
20 <p><img src = "circle.gif" style = "position: absolute;
21 top: 25px; left: 100px; z-index: 2" alt =
22 "Second positioned image" /></p>
23
24 </body>
25 </html>
250
2004 Prentice Hall, Inc.All rights reserved.
Outline251
positioning2.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.9: positioning2.html -->
6 <!-- Relative positioning of elements -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Relative Positioning</title>
11
12 <style type = "text/css">
13
14 p { font-size: 1.3em;
15 font-family: verdana, arial, sans-serif }
16
17 span { color: red;
18 font-size: .6em;
19 height: 1em }
20
21 .super { position: relative;
22 top: -1ex }
23
24 .sub { position: relative;
25 bottom: -1ex }
26
2004 Prentice Hall, Inc.All rights reserved.
Outline252
positioning2.html2 of 2
27 .shiftleft { position: relative;
28 left: -1ex }
29
30 .shiftright { position: relative;
31 right: -1ex }
32
33 </style>
34 </head>
35
36 <body>
37
38 <p>The text at the end of this sentence
39 <span class = "super">is in superscript</span>.</p>
40
41 <p>The text at the end of this sentence
42 <span class = "sub">is in subscript</span>.</p>
43
44 <p>The text at the end of this sentence
45 <span class = "shiftleft">is shifted left</span>.</p>
46
47 <p>The text at the end of this sentence
48 <span class = "shiftright">is shifted right</span>.</p>
49
50 </body>
51 </html>
253
254
Backgrounds
• background-image– Specifies the image URL
• background-position– Places the image on the page
• background-repeat– Controls the tiling of the background image
• background-attachment– fixed– scroll
• font-weight– Specify the “boldness” of text
2004 Prentice Hall, Inc.All rights reserved.
Outline255
background.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.10: background.html -->
6 <!-- Adding background images and indentation -->
7
8 <html xmlns = "http://www.w3 .org/1999/xhtml">
9 <head>
10 <title>Background Images</title>
11
12 <style type = "text/css">
13
14 body { background-image: url(logo.gif);
15 background-position: bottom right;
16 background-repeat: no-repeat;
17 background-attachment: fixed; }
18
19 p { font-size: 18pt;
20 color: #aa5588;
21 text-indent: 1em;
22 font-family: arial, sans-serif; }
23
24 .dark { font-weight: bold; }
25
2004 Prentice Hall, Inc.All rights reserved.
Outline256
background.html(2 of 2)
26 </style>
27 </head>
28
29 <body>
30
31 <p>
32 This example uses the background-image,
33 background-position and background-attachment
34 styles to place the <span class = "dark">Deitel
35 & Associates, Inc.</span> logo in the bottom,
36 right corner of the page. Notice how the logo
37 stays in the proper position when you resize the
38 browser window.
39 </p>
40
41 </body>
42 </html>
257
258
Element Dimensions
• CSS rules can specify the actual dimensions of each page element
2004 Prentice Hall, Inc.All rights reserved.
Outline259
width.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.11: width.html -->
6 <!-- Setting box dimensions and aligning text -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Box Dimensions</title>
11
12 <style type = "text/css">
13
14 div { background-color: #ffccff;
15 margin-bottom: .5em }
16 </style>
17
18 </head>
19
20 <body>
21
22 <div style = "width: 20%">Here is some
23 text that goes in a box which is
24 set to stretch across twenty percent
25 of the width of the screen.</div>
2004 Prentice Hall, Inc.All rights reserved.
Outline260
width.html(2 of 2)
26
27 <div style = "width: 80%; text-align: center">
28 Here is some CENTERED text that goes in a box
29 which is set to stretch across eighty percent of
30 the width of the screen.</div>
31
32 <div style = "width: 20%; height: 30%; overflow: scroll">
33 This box is only twenty percent of
34 the width and thirty percent of the height.
35 What do we do if it overflows? Set the
36 overflow property to scroll!</div>
37
38 </body>
39 </html>
261
Text Flow and the Box Model
• Floating– Move an element to one side of the screen
• Box model– Margins
• margin-top, margin-right, margin-left, margin-bottom
– Padding• padding-top, padding-right, padding-left, and padding-bottom
– Border• border-width
– thin, medium, thick• border-color
– Sets the color• border-style
– none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset
2004 Prentice Hall, Inc.All rights reserved.
Outline262
floating.html(1 of 3)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.12: floating.html -->
6 <!-- Floating elements and element boxes -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Flowing Text Around Floating Elements</title>
11
12 <style type = "text/css">
13
14 div { background-color: #ffccff;
15 margin-bottom: .5em;
16 font-size: 1.5em;
17 width: 50% }
18
19 p { text-align: justify }
20
21 </style>
22
23 </head>
24
2004 Prentice Hall, Inc.All rights reserved.
Outline263
floating.html(2 of 3)
25 <body>
26
27 <div style = "text-align: center">
28 Deitel & Associates, Inc.</div>
29
30 <div style = "float: right; margin: .5em;
31 text-align: right">
32 Corporate Training and Publishing</div>
33
34 <p>Deitel & Associates, Inc. is an internationally
35 recognized corporate training and publishing organization
36 specializing in programming languages, Internet/World
37 Wide Web technology and object technology education.
38 The company provides courses on Java, C++, Visual Basic, C,
39 Internet and World Wide Web programming, and Object Technology.</p>
40
41 <div style = "float: right; padding: .5em;
42 text-align: right">
43 Leading-Edge Programming Textbooks</div>
44
45 <p>The company's clients include many Fortune 1000
46 companies, government agencies, branches of the military
47 and business organizations.</p>
48
2004 Prentice Hall, Inc.All rights reserved.
Outline264
49 <p style = "clear: right">Through its publishing
50 partnership with Prentice Hall, Deitel & Associates,
51 Inc. publishes leading-edge programming textbooks,
52 professional books, interactive CD-ROM-based multimedia
53 Cyber Classrooms, satellite courses and World Wide Web
54 courses.</p>
55
56 </body>
57 </html>
floating.html(3 of 3)
265
Text Flow and the Box Model
Content
Margin
Border
Padding
Fig. 6.13 Box model for block-level elements.
2004 Prentice Hall, Inc.All rights reserved.
Outline266
borders.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.14: borders.html -->
6 <!-- Setting borders of an element -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Borders</title>
11
12 <style type = "text/css">
13
14 body { background-color: #ccffcc }
15
16 div { text-align: center;
17 margin-bottom: 1em;
18 padding: .5em }
19
20 .thick { border-width: thick }
21
22 .medium { border-width: medium }
23
24 .thin { border-width: thin }
25
2004 Prentice Hall, Inc.All rights reserved.
Outline267
borders.html(2 of 2)
26 .groove { border-style: groove }
27
28 .inset { border-style: inset }
29
30 .outset { border-style: outset }
31
32 .red { border-color: red }
33
34 .blue { border-color: blue }
35
36 </style>
37 </head>
38
39 <body>
40
41 <div class = "thick groove">This text has a border</div>
42 <div class = "medium groove">This text has a border</div>
43 <div class = "thin groove">This text has a border</div>
44
45 <p class = "thin red inset">A thin red line...</p>
46 <p class = "medium blue outset">
47 And a thicker blue line</p>
48
49 </body>
50 </html>
268
2004 Prentice Hall, Inc.All rights reserved.
Outline269
borders2.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.15: borders2.html -->
6 <!-- Various border-styles -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Borders</title>
11
12 <style type = "text/css">
13
14 body { background-color: #ccffcc }
15
16 div { text-align: center;
17 margin-bottom: .3em;
18 width: 50%;
19 position: relative;
20 left: 25%;
21 padding: .3em }
22 </style>
23 </head>
24
25 <body>
2004 Prentice Hall, Inc.All rights reserved.
Outline270
borders2.html(2 of 2)
26
27 <div style = "border-style: solid">Solid border</div>
28 <div style = "border-style: double">Double border</div>
29 <div style = "border-style: groove">Groove border</div>
30 <div style = "border-style: ridge">Ridge border</div>
31 <div style = "border-style: inset">Inset border</div>
32 <div style = "border-style: outset">Outset border</div>
33
34 </body>
35 </html>
271
User Style Sheets
• Format pages based on preferences
2004 Prentice Hall, Inc.All rights reserved.
Outline272
User_absolute.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.16: user_absolute.html -->
6 <!-- User styles -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>User Styles</title>
11
12 <style type = "text/css">
13
14 .note { font-size: 9pt }
15
16 </style>
17 </head>
18
19 <body>
20
21 <p>Thanks for visiting my Web site. I hope you enjoy it.
22 </p><p class = "note">Please Note: This site will be
23 moving soon. Please check periodically for updates.</p>
2004 Prentice Hall, Inc.All rights reserved.
Outline273
User_absolute.html(2 of 2)
24
25 </body>
26 </html>
2004 Prentice Hall, Inc.All rights reserved.
Outline274
userstyles.css1 of 1
1 /* Fig. 6.17: userstyles.css */
2 /* A user stylesheet */
3
4 body { font-size: 20pt;
5 color: yellow;
6 background-color: #000080 }
275
User Style Sheets
Fig. 6.18 User style sheet in Internet Explorer 6.
276
User Style Sheets
Fig. 6.19 User style sheet applied with pt measurement.
2004 Prentice Hall, Inc.All rights reserved.
Outline277
User_relative.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.20: user_relative.html -->
6 <!-- User styles -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>User Styles</title>
11
12 <style type = "text/css">
13
14 .note { font-size: .75em }
15
16 </style>
17 </head>
18
19 <body>
20
21 <p>Thanks for visiting my Web site. I hope you enjoy it.
22 </p><p class = "note">Please Note: This site will be
23 moving soon. Please check periodically for updates.</p>
2004 Prentice Hall, Inc.All rights reserved.
Outline278
User_relative.html(2 of 2)
24
25 </body>
26 </html>
279
User Style Sheets
Fig. 6.21 User style sheet applied with em measurement.
280
Introduction to XHTML
Outline Introduction Editing XHTML First XHTML Example W3C XHTML Validation Service Headers Linking Images Special Characters and More Line Breaks Unordered Lists Nested and Ordered Lists Web Resources
281
Objectives
• In this chapter, you will learn:– To understand important components of XHTML
documents.
– To use XHTML to create Web pages.
– To be able to add images to Web pages.
– To understand how to create and use hyperlinks to navigate Web pages.
– To be able to mark up lists of information.
282
Introduction
• Extensible HyperText Markup Language– XHTML
– A markup language
– Separation of the presentation of a document from the structure of the document’s information
– Based on HTML• Technology of the World Wide Web Consortium (W3C)
283
Editing XHTML
• XHTML documents– Source-code form
– Text editor (e.g. Notepad, Wordpad, emacs, etc.)– .html or .htm file-name extension
– Web server• Stores XHTML documents
– Web browser• Requests XHTML documents
284
First XHTML Example
• XHTML comments– Start with <!-- and end with -->– html element
• head element– Head section
• Title of the document• Style sheets and scripts
• body element– Body section
• Page’s content the browser displays
– Start tag• attributes (provide additional information about an
element)– name and value (separated by an equal sign)
– End tag
2004 Prentice Hall, Inc.All rights reserved.
Outline285
main.html(1 of 1)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 4.1: main.html -->
6 <!-- Our first Web page -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Welcome</title>
11 </head>
12
13 <body>
14 <p>Welcome to XHTML!</p>
15 </body>
16 </html>
286
W3C XHTML Validation Service
• Validation service ( validator.w3.org )– Checking a document’s syntax
• URL that specifies the location of the file• Uploading a file to the site validator.w3.org/file-upload.html
287
W3C XHTML Validation Service
288
W3C XHTML Validation Service
289
Headers
• Six headers ( header elements)– h1 through h6
2004 Prentice Hall, Inc.All rights reserved.
Outline290
header.html(1 of 1)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 4.4: header.html -->
6 <!-- XHTML headers -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Headers</title>
11 </head>
12
13 <body>
14
15 <h1>Level 1 Header</h1>
16 <h2>Level 2 header</h2>
17 <h3>Level 3 header</h3>
18 <h4>Level 4 header</h4>
19 <h5>Level 5 header</h5>
20 <h6>Level 6 header</h6>
21
22 </body>
23 </html>
291
292
Linking
• Hyperlink– References other sources such as XHTML documents and
images
– Both text and images can act as hyperlinks
– Created using the a (anchor) element• Attribute href
– Specifies the location of a linked resource
• Link to e-mail addresses using mailto: URL
• <strong> tag– Bold
2004 Prentice Hall, Inc.All rights reserved.
Outline293
links.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 4.5: links.html -->
6 <!-- Introduction to hyperlinks -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Links</title>
11 </head>
12
13 <body>
14
15 <h1>Here are my favorite sites</h1>
16
17 <p><strong>Click a name to go to that page.</strong></p>
18
19 <!-- Create four text hyperlinks -->
20 <p><a href = "http://www.deitel.com">Deitel</a></p>
21
22 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
23
24 <p><a href = "http://www.yahoo.com">Yahoo!</a></p>
25
2004 Prentice Hall, Inc.All rights reserved.
Outline294
links.html(2 of 2)
26 <p><a href = "http://www.usatoday.com">USA Today</a></p>
27
28 </body>
29 </html>
2004 Prentice Hall, Inc.All rights reserved.
Outline295
contact.html(1 of 1)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 4.6: contact.html -->
6 <!-- Adding email hyperlinks -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Contact Page</title>
11 </head>
12
13 <body>
14
15 <p>
16 My email address is
17 <a href = "mailto:[email protected]">
19 </a>
20 . Click the address and your browser will
21 open an e-mail message and address it to me.
22 </p>
23 </body>
24 </html>
296
297
Images
• Three most popular formats– Graphics Interchange Format (GIF)
– Joint Photographic Experts Group (JPEG)
– Portable Network Graphics (PNG)
– img element• src attribute
– Specifies the location of the image file
• width and height
• Pixels (“picture elements”)
• Empty elements– Terminated by character / inside the closing right angle bracket
(>), or by explicitly including the end tag
• br element– Line break
2004 Prentice Hall, Inc.All rights reserved.
Outline298
picture.html(1 of 1)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 4.7: picture.html -->
6 <!-- Adding images with XHTML -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Welcome</title>
11 </head>
12
13 <body>
14
15 <p>
16 <img src = "xmlhtp.jpg" height = "238" width = "183"
17 alt = "XML How to Program book cover" />
18 <img src = "jhtp.jpg" height = "238" width = "183"
19 alt = "Java How to Program book cover" />
20 </p>
21 </body>
22 </html>
299
2004 Prentice Hall, Inc.All rights reserved.
Outline300
nav.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 4.8: nav.html -->
6 <!-- Using images as link anchors -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Navigation Bar
11 </title>
12 </head>
13
14 <body>
15
16 <p>
17 <a href = "links.html">
18 <img src = "buttons/links.jpg" width = "65"
19 height = "50" alt = "Links Page" />
20 </a><br />
21
22 <a href = "list.html">
23 <img src = "buttons/list.jpg" width = "65"
24 height = "50" alt = "List Example Page" />
25 </a><br />
2004 Prentice Hall, Inc.All rights reserved.
Outline301
nav.html(2 of 2)
26
27 <a href = "contact.html">
28 <img src = "buttons/contact.jpg" width = "65"
29 height = "50" alt = "Contact Page" />
30 </a><br />
31
32 <a href = "header.html">
33 <img src = "buttons/header.jpg" width = "65"
34 height = "50" alt = "Header Page" />
35 </a><br />
36
37 <a href = "table1.html">
38 <img src = "buttons/table.jpg" width = "65"
39 height = "50" alt = "Table Page" />
40 </a><br />
41
42 <a href = "form.html">
43 <img src = "buttons/form.jpg" width = "65"
44 height = "50" alt = "Feedback Form" />
45 </a><br />
46 </p>
47
48 </body>
49 </html>
302
303
Special Characters and More Line Breaks
• Character entity references (in the form &code;)• Numeric character references (e.g. &)
• del– Strike-out text
• sup– Superscript text
• sub– Subscript text
• <hr />– Horizontal rule (horizontal line)
2004 Prentice Hall, Inc.All rights reserved.
Outline304
contact2.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 4.9: contact2.html -->
6 <!-- Inserting special characters -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Contact Page
11 </title>
12 </head>
13
14 <body>
15
16 <!-- special characters are entered -->
17 <!-- using the form &code; -->
18 <p>
19 Click
20 <a href = "mailto:[email protected]">here
21 </a> to open an e-mail message addressed to
23 </p>
24
25 <hr /> <!-- inserts a horizontal rule -->
2004 Prentice Hall, Inc.All rights reserved.
Outline305
contact2.html(2 of 2)
26
27 <p>All information on this site is <strong>©</strong>
28 Deitel <strong>&</strong> Associates, Inc. 2002.</p>
29
30 <!-- to strike through text use <del> tags -->
31 <!-- to subscript text use <sub> tags -->
32 <!-- to superscript text use <sup> tags -->
33 <!-- these tags are nested inside other tags -->
34 <p><del>You may download 3.14 x 10<sup>2</sup>
35 characters worth of information from this site.</del>
36 Only <sub>one</sub> download per hour is permitted.</p>
37
38 <p>Note: <strong>< ¼</strong> of the information
39 presented here is updated daily.</p>
40
41 </body>
42 </html>
306
307
Unordered Lists
• Unordered list element ul– Creates a list in which each item begins with a bullet symbol
(called a disc)– li (list item)
• Entry in an unordered list
2004 Prentice Hall, Inc.All rights reserved.
Outline308
links2.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 4.10: links2.html -->
6 <!-- Unordered list containing hyperlinks -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Links</title>
11 </head>
12
13 <body>
14
15 <h1>Here are my favorite sites</h1>
16
17 <p><strong>Click on a name to go to that page.</strong></p>
18
19 <!-- create an unordered list -->
20 <ul>
21
22 <!-- add four list items -->
23 <li><a href = "http://www.deitel.com">Deitel</a></li>
24
25 <li><a href = "http://www.w3.org">W3C</a></li>
2004 Prentice Hall, Inc.All rights reserved.
Outline309
links2.html(2 of 2)
26
27 <li><a href = "http://www.yahoo.com">Yahoo!</a></li>
28
29 <li><a href = "http://www.cnn.com">CNN</a></li>
30 </ul>
31 </body>
32 </html>
310
Nested and Ordered Lists
• Represent hierarchical relationships• Ordered lists (ol)
– Creates a list in which each item begins with a number
2004 Prentice Hall, Inc.All rights reserved.
Outline311
list.html(1 of 3)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 4.11: list.html -->
6 <!-- Advanced Lists: nested and ordered -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Lists</title>
11 </head>
12
13 <body>
14
15 <h1>The Best Features of the Internet</h1>
16
17 <!-- create an unordered list -->
18 <ul>
19 <li>You can meet new people from countries around
20 the world.</li>
21 <li>
22 You have access to new media as it becomes public:
23
2004 Prentice Hall, Inc.All rights reserved.
Outline312
list.html(2 of 3)
24 <!-- this starts a nested list, which uses a -->
25 <!-- modified bullet. The list ends when you -->
26 <!-- close the <ul> tag. -->
27 <ul>
28 <li>New games</li>
29 <li>
30 New applications
31
32 <!-- nested ordered list -->
33 <ol>
34 <li>For business</li>
35 <li>For pleasure</li>
36 </ol>
37 </li>
38
39 <li>Around the clock news</li>
40 <li>Search engines</li>
41 <li>Shopping</li>
42 <li>
43 Programming
44
45 <!-- another nested ordered list -->
46 <ol>
47 <li>XML</li>
48 <li>Java</li>
2004 Prentice Hall, Inc.All rights reserved.
Outline313
list.html(3 of 3)
49 <li>XHTML</li>
50 <li>Scripts</li>
51 <li>New languages</li>
52 </ol>
53
54 </li>
55
56 </ul> <!-- ends the nested list of line 27 -->
57 </li>
58
59 <li>Links</li>
60 <li>Keeping in touch with old friends</li>
61 <li>It is the technology of the future!</li>
62
63 </ul> <!-- ends the unordered list of line 18 -->
64
65 </body>
66 </html>
314
315
Domain NameSystem(DNS)
316
Overview
• Introduction to the DNS• DNS Components• DNS Structure and Hierarchy• The DNS in Context
317
Overview
• Introduction to the DNS• DNS Components
– The name space
– The servers
– The resolvers
• DNS Structure and Hierarchy• The DNS in Context
318
The Name Space
• The name space is the structure of the DNS database– An inverted tree with the root node at the top
• Each node has a label– The root node has a null label, written as “”
th ird -le ve l n o de
se co n d-le ve l no de se co n d-le ve l no de
to p -le ve l no de
th ird -le ve l n o de th ird -le ve l n o de
se co n d-le ve l no de
to p -le ve l no de
se co n d-le ve l no de se co n d-le ve l no de
to p -le ve l no de
T h e roo t no de""
319
Domain namesand labels
320
FQDN and PQDN
321
Domain Names
• A domain name is the sequence of labels from a node to the root, separated by dots (“.”s), read left to right
– The name space has a maximum depth of 127 levels
– Domain names are limited to 255 characters in length
• A node’s domain name identifies its position in the name space
d a ko ta
w e s t
to rna do
e a st w w w
n o m in um m e ta in fo
com
b e rke ley n w u
e du g ov
n a to
in t
a rm y
m il
uu
n e t o rg
""
322
Hierarchy of name servers
323
DNS in the Internet
324
Generic domains
325
Country domains
326
Inverse domain
327
Name Servers
• Name servers store information about the name space in units called “zones”– The name servers that load a complete zone are said to “have
authority for” or “be authoritative for” the zone
• Also, a single name server may be authoritative for many zones
328
Types of Name Servers
• Two main types of servers– Authoritative – maintains the data
• Master – where the data is edited
• Slave – where data is replicated to
– Caching – stores data obtained from an authoritative server
– The most common name server implementation (BIND) combines these two into a single process
329
Name Server Architecture
• You can think of a name server as part:– database server, answering queries about the parts of the
name space it knows about (i.e., is authoritative for),
– cache, temporarily storing data it learns from other name servers, and
– agent, helping resolvers and other name servers find data that other name servers know about
330
Name Server Architecture
Master
serverZone transfer
Zone
data
file
From
diskAuthoritative Data
(primary master and
slave zones)
Agent
(looks up queries
on behalf of resolvers)
Cache Data
(responses from
other name servers)
Name Server Process
331
Authoritative Data
ResolverQuery
Response
Authoritative Data
(primary master and
slave zones)
Agent
(looks up queries
on behalf of resolvers)
Cache Data
(responses from
other name servers)
Name Server Process
332
Using Other Name Servers
Arbitrary
name
server
Response
ResolverQuery
Query
Authoritative Data
(primary master and
slave zones)
Agent
(looks up queries
on behalf of resolvers)
Cache Data
(responses from
other name servers)
Name Server Process
Response
333
Cached Data
Query
Response
Authoritative Data
(primary master and
slave zones)
Agent
(looks up queries
on behalf of resolvers)
Cache Data
(responses from
other name servers)
Name Server Process
Resolver
334
Overview
• Introduction to the DNS• DNS Components
– The name space
– The servers
– The resolvers
• DNS Structure and Hierarchy• The DNS in Context
335
Name Resolution
• Name resolution is the process by which resolvers and name servers cooperate to find data in the name space
• To find information anywhere in the name space, a name server only needs the names and IP addresses of the name servers for the root zone (the “root name servers”)– The root name servers know about the top-level zones and can tell
name servers whom to contact for all TLDs
336
Name Resolution
• A DNS query has three parameters:– A domain name (e.g., www.nominum.com),
• Remember, every node has a domain name!
– A class (e.g., IN), and
– A type (e.g., A)
• A name server receiving a query from a resolver looks for the answer in its authoritative data and its cache– If the answer isn’t in the cache and the server isn’t authoritative
for the answer, the answer must be looked up
337
ping www.nominum.com.
The Resolution Process
• Let’s look at the resolution process step-by-step:
annie.west.sprockets.com
338
What’s the IP address of
www.nominum.com?
The Resolution Process
• The workstation annie asks its configured name server, dakota, for www.nominum.com’s address
ping www.nominum.com.annie.west.sprockets.com
dakota.west.sprockets.com
339
The Resolution Process
• The name server dakota asks a root name server, m, for www.nominum.com’s address
ping www.nominum.com.annie.west.sprockets.com
m.root-servers.net
dakota.west.sprockets.com
What’s the IP address of
www.nominum.com?
340
The Resolution Process
• The root server m refers dakota to the com name servers
• This type of response is called a “referral”
ping www.nominum.com.annie.west.sprockets.com
m.root-servers.net
dakota.west.sprockets.com Here’s a list of the com name servers.
Ask one of them.
341
The Resolution Process
• The name server dakota asks a com name server, f, for www.nominum.com’s address
ping www.nominum.com.annie.west.sprockets.com
m.root-servers.net
dakota.west.sprockets.com
What’s the IP address of
www.nominum.com?
f.gtld-servers.net
342
The Resolution Process
• The com name server f refers dakota to the nominum.com name servers
ping www.nominum.com.annie.west.sprockets.com
f.gtld-servers.net
m.root-servers.net
dakota.west.sprockets.com
Here’s a list of the nominum.com name servers.
Ask one of them.
343
The Resolution Process
• The name server dakota asks an nominum.com name server, ns1.sanjose, for www.nominum.com’s address
ping www.nominum.com.annie.west.sprockets.com
f.gtld-servers.net
m.root-servers.net
dakota.west.sprockets.com
ns1.sanjose.nominum.net
What’s the IP address of
www.nominum.com?
344
The Resolution Process
• The nominum.com name server ns1.sanjose responds with www.nominum.com’s address
ping www.nominum.com.annie.west.sprockets.com
f.gtld-servers.net
m.root-servers.net
dakota.west.sprockets.com
ns1.sanjose.nominum.netHere’s the IP address for
www.nominum.com
345
Here’s the IP address for
www.nominum.com
The Resolution Process
• The name server dakota responds to annie with www.nominum.com’s address
ping www.nominum.com.annie.west.sprockets.com
f.gtld-servers.net
m.root-servers.net
dakota.west.sprockets.com
ns1.sanjose.nominum.net
346
ping ftp.nominum.com.
Resolution Process (Caching)
• After the previous query, the name server dakota now knows:
– The names and IP addresses of the com name servers
– The names and IP addresses of the nominum.com name servers
– The IP address of www.nominum.com
• Let’s look at the resolution process again
annie.west.sprockets.com
347
ping ftp.nominum.com.
What’s the IP address of ftp.nominum.com?
Resolution Process (Caching)
• The workstation annie asks its configured name server, dakota, for ftp.nominum.com’s address
annie.west.sprockets.com
f.gtld-servers.net
m.root-servers.net
dakota.west.sprockets.com
ns1.sanjose.nominum.net
348
ping ftp.nominum.com.
What’s the IP address of ftp.nominum.com?
Resolution Process (Caching)
• dakota has cached an NS record indicating ns1.sanjose is an nominum.com name server, so it asks it for ftp.nominum.com’s address
annie.west.sprockets.com
f.gtld-servers.net
m.root-servers.net
dakota.west.sprockets.com
ns1.sanjose.nominum.net
349
ping ftp.nominum.com.
Here’s the IP address for
ftp.nominum.com
Resolution Process (Caching)
• The nominum.com name server ns1.sanjose responds with ftp.nominum.com’s address
annie.west.sprockets.com
f.gtld-servers.net
m.root-servers.net
dakota.west.sprockets.com
ns1.sanjose.nominum.net
350
ping ftp.nominum.com.
Here’s the IP address for
ftp.nominum.com
Resolution Process (Caching)
• The name server dakota responds to annie with ftp.nominum.com’s address
annie.west.sprockets.com
f.gtld-servers.net
m.root-servers.net
dakota.west.sprockets.com
ns1.sanjose.nominum.net
351
Overview
• Introduction to the DNS• DNS Components• DNS Structure and Hierarchy• The DNS in Context
352
The Current TLDs
C O MC o m m e rc ia l O rg a n iza tio ns
N E TN e tw o rk In fra stru c tu re
O R GO th er O rga n iza tio ns
G e n e ric T L D s(g T L D s)
A FA fg ha n is tan
A LA lba n ia
D ZA lg e ria
...
Y UY u g os la v ia
Z MZ a m b ia
Z WZ im ba b we
C o u n try C o de T L D s(ccT L D s )
IN TIn te rna tion a l Tre a ty O rga n iza tio ns
A R P A(T ra n s it ion D e v ice)
In te rn a tion a l T L D s(iT L D s )
G O VG o vern m e n ta l O rga n iza tio ns
M ILM ilita ry O rga n iza tio ns
E D UE d uca tio n a l In stitu tio ns
U S L e g acy T L D s(u sT L D s)
"."
353
Registries, Registrars, and Registrants
Registry Zone DB
RegistrantsRegistrants
End user requests add/modify/delete
Registrar submits add/modify/delete to registry
Registrar RegistrarRegistrar
Masterupdated
Registry updateszone
Slaves updated
354
The “Generic” Top-Level Domains (gTLDs)
• .COM, .NET, and .ORG– By far the largest top level domains on the Internet today
• .COM has approx. 20,000,000 names
– Essentially no restriction on what can be registered
• Network Solutions (now Verisign) received the contract for the registry for .COM, .NET, and .ORG– also a registrar for these TLDs
355
New Top Level Domains
• Recently, ICANN created 7 new top level domains:– .aero, .biz, .coop, .info, .museum, .name, .pro
• Some are chartered (.aero, .coop, .museum, .name, .pro)• Some are generic (.biz, .info)
– Expect these new TLDs to show up around 2Q01
• Many people unhappy with the process by which these new TLDs were created– Expect continued “discussion”
356
ccTLD Organization
• How each country top-level domain is organized is up to the country– Some, like Australia’s au, follow the functional definitions
• com.au, edu.au, etc.– Others, like Great Britain’s uk and Japan’s jp, divide the domain
functionally but use their own abbreviations• ac.uk, co.uk, ne.jp, ad.jp, etc.
– A few, like the United State’s us, are largely geographical• co.us, md.us, etc.
– Canada uses organizational scope• bnr.ca has national scope, risq.qc.ca has Quebec scope
– Some are flat, that is, no hierarchy• nlnet.nl, univ-st-etienne.fr
– Considered a question of national sovereignty
357
.arpa
• Now, Address and Routing Parameter Area– Was Advanced Research Projects Administration
• Used for infrastructure domains– IPv4 reverse (address to name) lookups– IPv6 reverse lookups– E.164
358
Other TLDs
• .GOV – used by US Governmental organizations– E.g., state.gov, doj.gov, whitehouse.gov, etc.
• .MIL – used by the US Military– E.g., af.mil, army.mil, etc.
• .EDU – used for Educational institutions– Higher learning, not only US-based ones
– E.g., harvard.edu, unu.edu, utoronto.edu
• .INT – international treaty organizations– E.g., itu.int, nato.int, wipo.int
359Figure 18-11
Recursive resolution
360Figure 18-12Iterative resolution
361
Questions?
362
TELNET
363
CONTENTSCONTENTS• CONCEPT• NETWORK VIRTUAL TERMINAL (NVT)• NVT CHARACTER SET• EMBEDDING• OPTIONS• OPTION NEGOTIATION• SUBOPTION NEGOTIATION• CONTROLLING THE SERVER• OUT-OF-BAND SIGNALING
364
CONTENTS CONTENTS (Continued)(Continued)
• ESCAPE CHARACTER• MODE OF OPERATION• EXAMPLES• USER INTERFACE• RLOGIN (REMOTE LOGIN)• SECURITY ISSUE
365
TELNET and Rlogin are TELNET and Rlogin are general-purpose general-purpose
client-server application programs.client-server application programs.
366
CONCEPT
367
Local login
368
Remote login
369
NETWORKVIRTUAL
TERMINAL
370Figure 19-3
NVT
371
NVTCHARACTER
SET
372Figure 19-4
Format of data characters
373Figure 19-5
Format of control characters
374
EMBEDDING
375Figure 19-6
Embedding
376
OPTIONS
377
OPTIONNEGOTIATION
378
Offer to enable
379
Request to enable
380
Offer to disable
381
Request to disable
382
Echo option example
383
SUBOPTIONNEGOTIATION
384
Example of suboption negotiation
385
CONTROLLINGTHE
SERVER
386
Example of interrupting an application program
387
OUT-OF-BANDSIGNALING
388
Out-of-band signaling
389
ESCAPECHARACTER
390
Two different interruptions
391
MODEOF
OPERATION
392
EXAMPLES
393
Example 1Example 1
In this example, we use the default mode to show the concept and its deficiencies even though it is almost obsolete today. The client and the server negotiate the terminal type and terminal speed and then the server checks the login and password of the user. See Figure 19.16.
394Example1
395
Example 2Example 2
In this example, we show how the client switches to the character mode. This requires that the client request the server to enable the SUPPRESS GO AHEAD and ECHO options.
396Figure 19-17
Example 2