Chapter 16
The World
Wide Web
Chapter Goals
1. Compare and contrast the Internet and the World Wide Web
2. Write basic HTML documents
3. Describe several specific HTML tags and their purposes
4. Describe the processing of Java applets and Java server pages
3
The World Wide Web
The Web
An infrastructure of information combined and the network software
used to access it
Web page
A document that contains or references various kinds of data
Links
A connection between one web page and another
What are the links used for?
4
The World Wide Web
Website
A collection of related web pages
Web browser
A software tool that retrieves and displays eb pages
Web server
A computer set up to respond to requests for web pages
5
Uniform Resource Locator (URL)
A standard way of specifying the location of a Web page, containing
the hostname, "/", and a file
6
Uniform Resource Locator
• Uniform Resource Locator (URL) : A standard way (protocol) of
specifying the location of a web page
[Link]
Location of resource
on machine
Protocol
Domain name of
server machine
6
A Web page Structure
7
Search Engines
Search Engine
A website that helps you find other websites
Can you name at least two?
How do they work?
7
HTML and CSS
12
HTML and CSS
Hypertext Markup Language (HTML) : The language used to create
or build a web page
Markup language : A language that uses tags to annotate the
information in a document
Tag: The syntactic element in a markup language that annotate
the information in a document
HTML5
• Current version of the HTML standard
• Released in 2011
• Supported by all major browsers
13
HTML and CSS
In a modern, well-designed webpage
• HTML tags indicate what the information is
– Paragraph
– Image
– List
– Etc.
• CSS style information indicates how information should be
displayed
– Alignment
– Borders
– Background colors
– Etc.
15
HTML and CSS
16
HTML
✓ Tags are enclosed in angle brackets
(<. . . >)
✓ Words such as head, title, and body are called
elements and specify the type of the tag
✓ Most elements consist of a start tag such as <body>
and a corresponding end tag with a / before the element
name, such as </body>
17
HTML
HTML Document Structure
• Entire document enclosed between <html> and </html>
• The head section (within <head> … </head>) contains information
about the document itself, such as its title.
• The body section (within <body> … </body>) contains the
information to be displayed.
18
HTML and CSS
The browser
• Uses HTML tags together with CSS style information to determine how
page should be displayed
• Ignores how we format the HTML document using carriage returns,
extra spaces, and blank lines.
• Takes into account the width and height of the browser window.
• Reformat the contents to fit your browser window.
19
HTML Structure
<html>
<head>
Head section
</head> Start tag
<body>
Body section End tag
</body>
</html>
16
HTML Example
<html>
<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
<body>
<p>Welcome to XHTML!</p>
</body>
</html>
• HTML documents are passive (they are just text files)
• It's the browser's job to determine how to display them
17
Basic HTML Elements
<p> . . . </p> text that should be treated as a separate paragraph
<hr /> horizontal rule across page
<ul>…</ul> unordered list (usually bullets)
<ol>…</ol> ordered list (e.g. numbered)
<li>…</li> list item
<h1>…</h1> level 1 heading
…
<h6>…</h6> level 6 heading
20
HTML Header Tags
Six headers: h1 through h6
<body>
<h1>Level 1 Header</h1>
<h2>Level 2 header</h2>
<h3>Level 3 header</h3>
<h4>Level 4 header</h4>
<h5>Level 5 header</h5>
<h6>Level 6 header</h6>
</body>
Several Examples: [Link]
19
Unordered Lists and Links
<ul>
<li><a href = "[Link]
<li><a href = "[Link]
<li><a href = "[Link]
<li><a href = "[Link]
</ul>
20
Linking to other Web Pages
<body>
<p><a href = "[Link]
<p><a href = "[Link] Hall</a></p>
<p><a href = "[Link]
<p><a href = "[Link] Today</a></p>
</body>
User click
21
Ordered Lists
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Several Examples: [Link]
22
HTML Images
HTML images are defined with the tag <img>
<img src="[Link]" alt="[Link]" width="104"
height="142">
Example:
[Link]
23
CSS
Styles can be specified at multiple levels and overridden at lower levels as needed
• In an external file
p {color:#00FF00;}
• In the head section of the HTML document:
<head>
…
<style type=“text/css”>
p {color:#00FF00;}
</style>
…
</head>
• As an attribute of an HTML element:
<p style=“text-align:center”>This text is centered!<p>
25
More About CSS
In the Student Dynamics example, the following style tag is used in the
head section of the document:
<style type=”text/css”>
a:link {color:#0000FF; text-decoration:none;}
a:visited {color:#00FF00; text-decoration:none;}
a:hover {color:#FF00FF; text-
decoration:underline;}
</style>
• First rule: An unvisited link is shown in blue text with no underline
• Second rule: A visited link is shown in green with no underline
• Third rule: When the mouse hovers over a link, the link text turns
purple with an underline
26
Java Applets
A Java program designed to be embedded into an HTML document,
transferred over the Web, and executed in a browser
<P>
<APPLET code = "[Link]" width=250
height=150></APPLET>
</P>
28
Java Server Pages
• JSPs are executed on the server side where the web
page resides
• By the time it arrives at your computer, all active processing has taken
place, producing a static (though dynamically created) web page
• JSPs are particularly good for coordinating the interaction
between a web page and an underlying database,
31
Chapter Goals
1. Compare and contrast the Internet and the World Wide Web
2. Write basic HTML documents
3. Describe several specific HTML tags and their purposes
4. Describe the processing of Java applets and Java server pages