internet concepts all
DESCRIPTION
thank for vistingTRANSCRIPT
![Page 1: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/1.jpg)
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
![Page 2: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/2.jpg)
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
![Page 3: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/3.jpg)
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
![Page 4: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/4.jpg)
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
![Page 5: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/5.jpg)
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
![Page 6: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/6.jpg)
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
![Page 7: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/7.jpg)
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
![Page 8: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/8.jpg)
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
![Page 9: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/9.jpg)
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
![Page 10: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/10.jpg)
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
![Page 11: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/11.jpg)
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
![Page 12: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/12.jpg)
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++
![Page 13: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/13.jpg)
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
![Page 14: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/14.jpg)
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
![Page 15: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/15.jpg)
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
![Page 16: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/16.jpg)
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
![Page 17: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/17.jpg)
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.
![Page 18: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/18.jpg)
18
Introduction
• Internet– Medium for communication and interaction
– Web Browsers• Software that allows users to view Web content
– Microsoft Internet Explorer
– Netscape Navigator
– Others
![Page 19: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/19.jpg)
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)
![Page 20: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/20.jpg)
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
![Page 21: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/21.jpg)
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)
![Page 22: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/22.jpg)
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
![Page 23: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/23.jpg)
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
![Page 24: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/24.jpg)
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
![Page 25: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/25.jpg)
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
![Page 26: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/26.jpg)
26
Internet Explorer 6 FeaturesFig. 2.2 Deitel Website.
Back
Recent historyForwardStop Refresh Address bar
Go
Pointer (over a hyperlink)
Scroll bars
![Page 27: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/27.jpg)
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
![Page 28: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/28.jpg)
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…
![Page 29: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/29.jpg)
29
Internet Explorer 6 FeaturesFig. 2.4 AutoComplete suggests possible URLs when given a partial address.
Partial address
URLs
![Page 30: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/30.jpg)
30
Internet Explorer 6 FeaturesFig. 2.5 Saving a picture from a Web site.
![Page 31: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/31.jpg)
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)
![Page 32: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/32.jpg)
32
Online Help and TutorialsFig. 2.6 Searching the Internet with IE6.
New searchSearch window
Search categories
Search words
Search button
Toolbar
![Page 33: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/33.jpg)
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
![Page 34: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/34.jpg)
34
Online Help and TutorialsFig. 2.7 IE6 Help dialog.
Help menu
Categories
![Page 35: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/35.jpg)
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…
![Page 36: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/36.jpg)
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
![Page 37: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/37.jpg)
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
![Page 38: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/38.jpg)
38
File Transfer Protocol (FTP)Fig. 2.9 FTP site access in IE6.
FTP address
Folders in the FTP directoryFile
Login window
![Page 39: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/39.jpg)
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)
![Page 40: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/40.jpg)
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
![Page 41: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/41.jpg)
41
Instant MessagingFig. 2.11 Outlook Express e-mail main screen..
Message list
Address book
Preview pane
Mailboxes
Message toolbar items
![Page 42: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/42.jpg)
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
![Page 43: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/43.jpg)
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
![Page 44: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/44.jpg)
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
![Page 45: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/45.jpg)
45
Instant MessagingFig. 2.12 Buddy list and an instant message.
Buddy list
Instant message
![Page 46: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/46.jpg)
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
![Page 47: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/47.jpg)
47
Other BrowsersFig. 2.13 Mozilla web browser.
![Page 48: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/48.jpg)
48
SMTPandFTP
![Page 49: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/49.jpg)
49
26.1 Electronic Mail26.1 Electronic Mail
Sending/Receiving Mail
Addresses
User Agent
MIME
Mail Transfer Agent
Mail Access Protocols
![Page 50: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/50.jpg)
50Figure 26.2 Email address
![Page 51: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/51.jpg)
51Figure 26.3 User agent
![Page 52: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/52.jpg)
52Figure 26.4 MIME
![Page 53: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/53.jpg)
53Figure 26.5 MIME header
![Page 54: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/54.jpg)
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)
![Page 55: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/55.jpg)
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
![Page 56: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/56.jpg)
56Figure 26. 6 Base64
![Page 57: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/57.jpg)
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
![Page 58: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/58.jpg)
58Figure 26.7 Quoted-printable
![Page 59: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/59.jpg)
59Figure 26.8 MTA client and server
![Page 60: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/60.jpg)
60Figure 26.9 Commands and responses
![Page 61: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/61.jpg)
61Figure 26.10 Email delivery
![Page 62: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/62.jpg)
62Figure 26.11 POP3
![Page 63: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/63.jpg)
63
26.2 File Transfer 26.2 File Transfer
Connections
Communication
File Transfer
User Interface
Anonymous
![Page 64: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/64.jpg)
64Figure 26.12 FTP
![Page 65: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/65.jpg)
65Figure 26.13 Using the control connection
![Page 66: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/66.jpg)
66Figure 26.14 Using the data connection
![Page 67: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/67.jpg)
67Figure 26.15 File transfer
![Page 68: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/68.jpg)
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.
![Page 69: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/69.jpg)
69Figure 26.16 Example 1
![Page 70: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/70.jpg)
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,?
![Page 71: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/71.jpg)
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
![Page 72: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/72.jpg)
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
![Page 73: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/73.jpg)
73
Domain Name System (DNS)
![Page 74: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/74.jpg)
74
![Page 75: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/75.jpg)
75
![Page 76: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/76.jpg)
76
![Page 77: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/77.jpg)
77
![Page 78: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/78.jpg)
78
![Page 79: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/79.jpg)
79
![Page 80: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/80.jpg)
80
![Page 81: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/81.jpg)
2004 Prentice Hall, Inc.All rights reserved.
Outline81
TCP/IPTransmission Control Protocol / Internet Protocol
![Page 82: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/82.jpg)
82
TCPTransmission Control Protocol
• TCP is an alternative transport layer protocol over IP.
• TCP provides:– Connection-oriented
– Reliable
– Full-duplex
– Byte-Stream
![Page 83: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/83.jpg)
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.
![Page 84: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/84.jpg)
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.
![Page 85: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/85.jpg)
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).
![Page 86: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/86.jpg)
86
Full Duplex
• TCP provides transfer in both directions.
![Page 87: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/87.jpg)
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).
![Page 88: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/88.jpg)
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
![Page 89: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/89.jpg)
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
![Page 90: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/90.jpg)
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.
![Page 91: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/91.jpg)
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.
![Page 92: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/92.jpg)
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.
![Page 93: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/93.jpg)
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!
![Page 94: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/94.jpg)
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.
![Page 95: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/95.jpg)
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
![Page 96: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/96.jpg)
96
Finally
• When the Server’s SYN is received, the client sends back an ACK with:– Acknowledgment Number is Server’s ISN+1
![Page 97: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/97.jpg)
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
![Page 98: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/98.jpg)
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.
![Page 99: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/99.jpg)
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.
![Page 100: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/100.jpg)
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).
![Page 101: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/101.jpg)
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.
![Page 102: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/102.jpg)
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.
![Page 103: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/103.jpg)
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.
![Page 104: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/104.jpg)
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.
![Page 105: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/105.jpg)
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...
![Page 106: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/106.jpg)
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.
![Page 107: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/107.jpg)
107
TCP Sockets Programming
• Creating a passive mode (server) socket.• Establishing an application-level connection.• Sending/receiving data.• Terminating a connection.
![Page 108: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/108.jpg)
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.
![Page 109: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/109.jpg)
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.
![Page 110: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/110.jpg)
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.
![Page 111: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/111.jpg)
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
![Page 112: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/112.jpg)
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!
![Page 113: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/113.jpg)
113
Writing to a TCP socket
• write might not be able to write all bytes (on a nonblocking socket).
![Page 114: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/114.jpg)
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.*;
![Page 115: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/115.jpg)
115
Classes
InetAddress
Socket
ServerSocket
DatagramSocket
DatagramPacket
UDPUDP
![Page 116: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/116.jpg)
116
Socket class
• Corresponds to active TCP sockets only!– client sockets
– socket returned by accept();
• Passive sockets are supported by a different class: ServerSocket
![Page 117: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/117.jpg)
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);
![Page 118: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/118.jpg)
118
Socket Methods
void close();
InetAddress getInetAddress(); getpeername
InetAddress getLocalAddress(); getsockname
InputStream getInputStream();
OutputStream getOutputStream();
• Lots more (setting/getting socket options, partial close, etc.)
![Page 119: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/119.jpg)
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…
![Page 120: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/120.jpg)
120
ServerSocket Class(TCP Passive Socket)
• Constructors:
ServerSocket(int port);
ServerSocket(int port, int backlog);
ServerSocket(int port, int backlog,InetAddress bindAddr);
![Page 121: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/121.jpg)
121
ServerSocket Methods
Socket accept();
void close();
InetAddress getInetAddress();
int getLocalPort();
throw IOException, SecurityException
![Page 122: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/122.jpg)
2004 Prentice Hall, Inc.All rights reserved.
Outline122
![Page 123: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/123.jpg)
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.
![Page 124: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/124.jpg)
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
![Page 125: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/125.jpg)
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
![Page 126: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/126.jpg)
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
![Page 127: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/127.jpg)
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
![Page 128: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/128.jpg)
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.
![Page 129: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/129.jpg)
129
Internet Explorer and the World Wide Web
![Page 130: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/130.jpg)
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
![Page 131: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/131.jpg)
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
![Page 132: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/132.jpg)
132
The Web is always changing
Address bar (address is constant, but the content changes)
Hyperlinks
Print button
![Page 133: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/133.jpg)
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)
![Page 134: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/134.jpg)
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)
![Page 135: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/135.jpg)
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
![Page 136: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/136.jpg)
136
A message travels the Internet
All that matters is the beginning and ending address
![Page 137: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/137.jpg)
137
Searching the Web
• Search Engines• Web Directories• Meta Search Engines• Clearinghouse
![Page 138: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/138.jpg)
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
![Page 139: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/139.jpg)
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/
![Page 140: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/140.jpg)
140
Web Site and Saving an Image
Choose Save Picture As command
Right click picture for context-sensitive menu
![Page 141: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/141.jpg)
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
![Page 142: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/142.jpg)
142
Returning to a Previous Site
History folder
Favorites folder
![Page 143: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/143.jpg)
143
Organize Favorites
Move a favorite
Create a new folder
Delete a favorite
Rename a favorite
![Page 144: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/144.jpg)
2004 Prentice Hall, Inc.All rights reserved.
Outline144
The TELNET Protocol
![Page 145: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/145.jpg)
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.
![Page 146: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/146.jpg)
146
The TELNET Protocol
• TCP connection• data and control over the same connection.• Network Virtual Terminal• negotiated options
![Page 147: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/147.jpg)
147
Network Virtual Terminal
• intermediate representation of a generic terminal.• provides a standard language for communication
of terminal control functions.
![Page 148: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/148.jpg)
148
Network Virtual Terminal
NVTNVT NVTNVT
ServerServerProcessProcess
TCPTCP TCPTCP
![Page 149: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/149.jpg)
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).
![Page 150: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/150.jpg)
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.
![Page 151: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/151.jpg)
151
Option examples
• Line mode vs. character mode
• echo modes
• character set (EBCDIC vs. ASCII)
![Page 152: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/152.jpg)
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.
![Page 153: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/153.jpg)
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.
![Page 154: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/154.jpg)
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.
![Page 155: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/155.jpg)
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.
![Page 156: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/156.jpg)
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.
![Page 157: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/157.jpg)
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
![Page 158: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/158.jpg)
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).
![Page 159: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/159.jpg)
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
![Page 160: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/160.jpg)
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.
![Page 161: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/161.jpg)
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.
![Page 162: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/162.jpg)
2004 Prentice Hall, Inc.All rights reserved.
Outline162
Introduction to HTML
![Page 163: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/163.jpg)
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
![Page 164: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/164.jpg)
164
Hypertext Markup Language
• Language used to design web pages• Text mixed with Markup tags• Markup tags describe
• Appearance
• Layout
• Content
![Page 165: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/165.jpg)
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>
![Page 166: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/166.jpg)
166
Main HTML Elements
1. DOCTYPE2. HTML3. HEAD Elements that can be included inside HEAD tag:
• TITLE• BASE• META• SCRIPT,NOSCRIPT• STYLE• LINK
![Page 167: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/167.jpg)
167
Main HTML Elements(Continued)
4. BODY Attributes:
BACKGROUND
BGCOLORTEXTLINK,ALINK,VLINK
5. Elements inside BODY tag<body>
HTML tags</body>
![Page 168: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/168.jpg)
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
![Page 169: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/169.jpg)
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>
![Page 170: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/170.jpg)
170
LISTS
•Ordered Lists (OL)<OL>
<LI>
<LI>
:
</OL>
–Attributes : TYPE, START, COMPACTList Entries (LI)
–End Tag optional
–Attributes: VALUE, TYPE
![Page 171: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/171.jpg)
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.
![Page 172: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/172.jpg)
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
![Page 173: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/173.jpg)
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)
![Page 174: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/174.jpg)
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
![Page 175: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/175.jpg)
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>
![Page 176: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/176.jpg)
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
![Page 177: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/177.jpg)
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
![Page 178: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/178.jpg)
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
![Page 179: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/179.jpg)
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
![Page 180: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/180.jpg)
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>
![Page 181: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/181.jpg)
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>
![Page 182: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/182.jpg)
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.
![Page 183: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/183.jpg)
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.
![Page 184: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/184.jpg)
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”>
![Page 185: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/185.jpg)
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.
![Page 186: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/186.jpg)
186
Forms (Continued)
• Basic Form Elements– Text fields
– Password fields
– Textarea fields
– Radio buttons
– Checkboxes
– Menu selections
– Buttons
![Page 187: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/187.jpg)
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
![Page 188: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/188.jpg)
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.
![Page 189: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/189.jpg)
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
![Page 190: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/190.jpg)
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.
![Page 191: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/191.jpg)
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
![Page 192: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/192.jpg)
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.
![Page 193: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/193.jpg)
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
![Page 194: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/194.jpg)
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
![Page 195: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/195.jpg)
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)
![Page 196: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/196.jpg)
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)
![Page 197: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/197.jpg)
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
![Page 198: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/198.jpg)
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)
![Page 199: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/199.jpg)
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)
![Page 200: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/200.jpg)
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
![Page 201: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/201.jpg)
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
![Page 202: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/202.jpg)
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)
![Page 203: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/203.jpg)
203
![Page 204: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/204.jpg)
204
Dynamic Styles
• Element’s style can be changed dynamically
• Dynamic HTML Object Model also allows you to change the class attribute
![Page 205: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/205.jpg)
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)
![Page 206: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/206.jpg)
20624
25 <body onload = "start()">
26 <p>Welcome to our Web site!</p>
27 </body>
28 </html>
Outline
dynamicstyle.html(2 of 2)
![Page 207: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/207.jpg)
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)
![Page 208: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/208.jpg)
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)
![Page 209: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/209.jpg)
209
![Page 210: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/210.jpg)
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
![Page 211: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/211.jpg)
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)
![Page 212: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/212.jpg)
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)
![Page 213: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/213.jpg)
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)
![Page 214: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/214.jpg)
214
![Page 215: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/215.jpg)
215
Using the frames Collection
• Referencing elements and objects in different frames by using the frames collection
![Page 216: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/216.jpg)
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)
![Page 217: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/217.jpg)
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)
![Page 218: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/218.jpg)
21824 <body onload = "start()">
25 <h1>Cross-frame scripting!</h1>
26 </body>
27 </html>
Outline
top.html(2 of 2)
![Page 219: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/219.jpg)
219
![Page 220: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/220.jpg)
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
![Page 221: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/221.jpg)
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)
![Page 222: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/222.jpg)
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)
![Page 223: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/223.jpg)
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.
![Page 224: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/224.jpg)
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.
![Page 225: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/225.jpg)
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.
![Page 226: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/226.jpg)
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.
![Page 227: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/227.jpg)
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
![Page 228: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/228.jpg)
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.
![Page 229: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/229.jpg)
229
Introduction
• Cascading Style Sheets (CSS)– Separation of structure from presentation
![Page 230: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/230.jpg)
230
Inline Styles
• Declare an individual element’s format– Attribute style
– CSS property• Followed by a colon and a value
![Page 231: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/231.jpg)
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
![Page 232: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/232.jpg)
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>
![Page 233: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/233.jpg)
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
![Page 234: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/234.jpg)
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>
![Page 235: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/235.jpg)
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
![Page 236: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/236.jpg)
2004 Prentice Hall, Inc.All rights reserved.
Outline236
declared.html(3 of 3)
51 </body>
52 </html>
![Page 237: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/237.jpg)
237
Conflicting Styles
• Inheritance– Descendant’s properties have greater specificity than
ancestor’s properties
![Page 238: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/238.jpg)
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
![Page 239: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/239.jpg)
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
![Page 240: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/240.jpg)
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>
![Page 241: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/241.jpg)
241
Linking External Style Sheets
• External style sheets– Can provide uniform look and feel to entire site
![Page 242: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/242.jpg)
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 }
![Page 243: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/243.jpg)
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>
![Page 244: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/244.jpg)
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>
![Page 245: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/245.jpg)
245
W3C CSS Validation Service
• Validates external CSS documents• Ensures that style sheets are syntactically correct
![Page 246: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/246.jpg)
246
W3C CSS Validation Service
Fig. 6.6 Validating a CSS document. (Courtesy of World Wide Web Consortium (W3C).)
![Page 247: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/247.jpg)
247
W3C CSS Validation Service
Fig. 6.7 CSS validation results. (Courtesy of World Wide Web Consortium (W3C).)
![Page 248: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/248.jpg)
248
Positioning Elements
• Absolute positioning– z-index attribute
• Layer overlapping elements properly
• Relative positioning– Elements are positioned relative to other elements
![Page 249: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/249.jpg)
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>
![Page 250: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/250.jpg)
250
![Page 251: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/251.jpg)
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
![Page 252: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/252.jpg)
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>
![Page 253: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/253.jpg)
253
![Page 254: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/254.jpg)
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
![Page 255: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/255.jpg)
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
![Page 256: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/256.jpg)
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>
![Page 257: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/257.jpg)
257
![Page 258: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/258.jpg)
258
Element Dimensions
• CSS rules can specify the actual dimensions of each page element
![Page 259: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/259.jpg)
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>
![Page 260: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/260.jpg)
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>
![Page 261: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/261.jpg)
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
![Page 262: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/262.jpg)
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
![Page 263: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/263.jpg)
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
![Page 264: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/264.jpg)
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)
![Page 265: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/265.jpg)
265
Text Flow and the Box Model
Content
Margin
Border
Padding
Fig. 6.13 Box model for block-level elements.
![Page 266: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/266.jpg)
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
![Page 267: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/267.jpg)
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>
![Page 268: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/268.jpg)
268
![Page 269: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/269.jpg)
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>
![Page 270: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/270.jpg)
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>
![Page 271: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/271.jpg)
271
User Style Sheets
• Format pages based on preferences
![Page 272: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/272.jpg)
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>
![Page 273: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/273.jpg)
2004 Prentice Hall, Inc.All rights reserved.
Outline273
User_absolute.html(2 of 2)
24
25 </body>
26 </html>
![Page 274: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/274.jpg)
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 }
![Page 275: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/275.jpg)
275
User Style Sheets
Fig. 6.18 User style sheet in Internet Explorer 6.
![Page 276: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/276.jpg)
276
User Style Sheets
Fig. 6.19 User style sheet applied with pt measurement.
![Page 277: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/277.jpg)
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>
![Page 278: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/278.jpg)
2004 Prentice Hall, Inc.All rights reserved.
Outline278
User_relative.html(2 of 2)
24
25 </body>
26 </html>
![Page 279: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/279.jpg)
279
User Style Sheets
Fig. 6.21 User style sheet applied with em measurement.
![Page 280: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/280.jpg)
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
![Page 281: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/281.jpg)
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.
![Page 282: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/282.jpg)
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)
![Page 283: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/283.jpg)
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
![Page 284: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/284.jpg)
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
![Page 285: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/285.jpg)
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>
![Page 286: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/286.jpg)
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
![Page 287: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/287.jpg)
287
W3C XHTML Validation Service
![Page 288: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/288.jpg)
288
W3C XHTML Validation Service
![Page 289: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/289.jpg)
289
Headers
• Six headers ( header elements)– h1 through h6
![Page 290: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/290.jpg)
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>
![Page 291: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/291.jpg)
291
![Page 292: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/292.jpg)
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
![Page 293: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/293.jpg)
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
![Page 294: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/294.jpg)
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>
![Page 295: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/295.jpg)
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>
![Page 296: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/296.jpg)
296
![Page 297: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/297.jpg)
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
![Page 298: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/298.jpg)
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>
![Page 299: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/299.jpg)
299
![Page 300: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/300.jpg)
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 />
![Page 301: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/301.jpg)
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>
![Page 302: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/302.jpg)
302
![Page 303: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/303.jpg)
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)
![Page 304: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/304.jpg)
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 -->
![Page 305: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/305.jpg)
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>
![Page 306: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/306.jpg)
306
![Page 307: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/307.jpg)
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
![Page 308: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/308.jpg)
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>
![Page 309: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/309.jpg)
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>
![Page 310: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/310.jpg)
310
Nested and Ordered Lists
• Represent hierarchical relationships• Ordered lists (ol)
– Creates a list in which each item begins with a number
![Page 311: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/311.jpg)
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
![Page 312: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/312.jpg)
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>
![Page 313: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/313.jpg)
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>
![Page 314: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/314.jpg)
314
![Page 315: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/315.jpg)
315
Domain NameSystem(DNS)
![Page 316: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/316.jpg)
316
Overview
• Introduction to the DNS• DNS Components• DNS Structure and Hierarchy• The DNS in Context
![Page 317: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/317.jpg)
317
Overview
• Introduction to the DNS• DNS Components
– The name space
– The servers
– The resolvers
• DNS Structure and Hierarchy• The DNS in Context
![Page 318: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/318.jpg)
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""
![Page 319: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/319.jpg)
319
Domain namesand labels
![Page 320: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/320.jpg)
320
FQDN and PQDN
![Page 321: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/321.jpg)
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
""
![Page 322: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/322.jpg)
322
Hierarchy of name servers
![Page 323: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/323.jpg)
323
DNS in the Internet
![Page 324: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/324.jpg)
324
Generic domains
![Page 325: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/325.jpg)
325
Country domains
![Page 326: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/326.jpg)
326
Inverse domain
![Page 327: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/327.jpg)
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
![Page 328: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/328.jpg)
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
![Page 329: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/329.jpg)
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
![Page 330: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/330.jpg)
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
![Page 331: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/331.jpg)
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
![Page 332: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/332.jpg)
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
![Page 333: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/333.jpg)
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
![Page 334: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/334.jpg)
334
Overview
• Introduction to the DNS• DNS Components
– The name space
– The servers
– The resolvers
• DNS Structure and Hierarchy• The DNS in Context
![Page 335: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/335.jpg)
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
![Page 336: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/336.jpg)
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
![Page 337: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/337.jpg)
337
ping www.nominum.com.
The Resolution Process
• Let’s look at the resolution process step-by-step:
annie.west.sprockets.com
![Page 338: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/338.jpg)
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
![Page 339: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/339.jpg)
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?
![Page 340: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/340.jpg)
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.
![Page 341: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/341.jpg)
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
![Page 342: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/342.jpg)
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.
![Page 343: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/343.jpg)
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?
![Page 344: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/344.jpg)
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
![Page 345: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/345.jpg)
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
![Page 346: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/346.jpg)
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
![Page 347: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/347.jpg)
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
![Page 348: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/348.jpg)
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
![Page 349: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/349.jpg)
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
![Page 350: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/350.jpg)
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
![Page 351: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/351.jpg)
351
Overview
• Introduction to the DNS• DNS Components• DNS Structure and Hierarchy• The DNS in Context
![Page 352: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/352.jpg)
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)
"."
![Page 353: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/353.jpg)
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
![Page 354: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/354.jpg)
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
![Page 355: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/355.jpg)
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”
![Page 356: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/356.jpg)
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
![Page 357: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/357.jpg)
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
![Page 358: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/358.jpg)
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
![Page 359: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/359.jpg)
359Figure 18-11
Recursive resolution
![Page 360: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/360.jpg)
360Figure 18-12Iterative resolution
![Page 361: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/361.jpg)
361
Questions?
![Page 362: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/362.jpg)
362
TELNET
![Page 363: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/363.jpg)
363
CONTENTSCONTENTS• CONCEPT• NETWORK VIRTUAL TERMINAL (NVT)• NVT CHARACTER SET• EMBEDDING• OPTIONS• OPTION NEGOTIATION• SUBOPTION NEGOTIATION• CONTROLLING THE SERVER• OUT-OF-BAND SIGNALING
![Page 364: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/364.jpg)
364
CONTENTS CONTENTS (Continued)(Continued)
• ESCAPE CHARACTER• MODE OF OPERATION• EXAMPLES• USER INTERFACE• RLOGIN (REMOTE LOGIN)• SECURITY ISSUE
![Page 365: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/365.jpg)
365
TELNET and Rlogin are TELNET and Rlogin are general-purpose general-purpose
client-server application programs.client-server application programs.
![Page 366: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/366.jpg)
366
CONCEPT
![Page 367: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/367.jpg)
367
Local login
![Page 368: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/368.jpg)
368
Remote login
![Page 369: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/369.jpg)
369
NETWORKVIRTUAL
TERMINAL
![Page 370: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/370.jpg)
370Figure 19-3
NVT
![Page 371: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/371.jpg)
371
NVTCHARACTER
SET
![Page 372: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/372.jpg)
372Figure 19-4
Format of data characters
![Page 373: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/373.jpg)
373Figure 19-5
Format of control characters
![Page 374: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/374.jpg)
374
EMBEDDING
![Page 375: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/375.jpg)
375Figure 19-6
Embedding
![Page 376: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/376.jpg)
376
OPTIONS
![Page 377: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/377.jpg)
377
OPTIONNEGOTIATION
![Page 378: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/378.jpg)
378
Offer to enable
![Page 379: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/379.jpg)
379
Request to enable
![Page 380: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/380.jpg)
380
Offer to disable
![Page 381: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/381.jpg)
381
Request to disable
![Page 382: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/382.jpg)
382
Echo option example
![Page 383: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/383.jpg)
383
SUBOPTIONNEGOTIATION
![Page 384: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/384.jpg)
384
Example of suboption negotiation
![Page 385: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/385.jpg)
385
CONTROLLINGTHE
SERVER
![Page 386: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/386.jpg)
386
Example of interrupting an application program
![Page 387: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/387.jpg)
387
OUT-OF-BANDSIGNALING
![Page 388: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/388.jpg)
388
Out-of-band signaling
![Page 389: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/389.jpg)
389
ESCAPECHARACTER
![Page 390: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/390.jpg)
390
Two different interruptions
![Page 391: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/391.jpg)
391
MODEOF
OPERATION
![Page 392: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/392.jpg)
392
EXAMPLES
![Page 393: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/393.jpg)
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.
![Page 394: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/394.jpg)
394Example1
![Page 395: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/395.jpg)
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.
![Page 396: internet concepts all](https://reader037.vdocuments.site/reader037/viewer/2022110303/54b9f0894a79599a2e8b4608/html5/thumbnails/396.jpg)
396Figure 19-17
Example 2