Document

Transcript Document

Chapter 4 - Introduction to XHTML:
Part 1
Outline
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
4.10
4.11
4.12
Introduction
Elements and Attributes
Editing XHTML
Common Elements
W3C XHTML Validation Service
Headers
Linking
Images
Special Characters and More Line Breaks
Unordered Lists
Nested and Ordered Lists
Internet and World Wide Web Resources
 2001 Prentice Hall, Inc. All rights reserved.
1
2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Main.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
<body>
<p>Welcome to XHTML!</p>
</body>
</html>
The text between the
title tags appears as the
title of the web page.
Elements between the body tags
of the html document appear in
the body of the web page
Program Output
 2001 Prentice Hall, Inc.
All rights reserved.
3
4.5 W3C XHTML Validation Service
Fig. 4.2
Validating an XHTML document. (Courtesy of World Wide Web Consortium (W3C).)
 2001 Prentice Hall, Inc. All rights reserved.
4
4.5 W3C XHTML Validation Service
Fig. 4.3
XHTML validation results. (Courtesy of World Wide Web Consortium (W3C).)
 2001 Prentice Hall, Inc. All rights reserved.
5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Outline
Header.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Headers</title>
</head>
<body>
<h1>Level
<h2>Level
<h3>Level
<h4>Level
<h5>Level
<h6>Level
1
2
3
4
5
6
Header</h1>
header</h2>
header</h3>
header</h4>
header</h5>
header</h6>
The font size of the text
between tags decreases as
the header level increases.
Every XHTML document is
required to have opening
and closing html tags.
</body>
</html>
 2001 Prentice Hall, Inc.
All rights reserved.
6
Outline
Program Output
Select a header based on the
amount of emphasis you
would like to give that text.
 2001 Prentice Hall, Inc.
All rights reserved.
7
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Links.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Links</title>
</head>
Text between strong
tags will appear bold.
Linking is accomplished
in XHTML with the
anchor (a) element.
<body>
<h1>Here are my favorite sites</h1>
<p><strong>Click on a name to go to that page.</strong></p>
<p><a href = "http://www.deitel.com">Deitel</a></p>
The text between the a tags
is the anchor for the link.
<p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
<p><a href = "http://www.yahoo.com">Yahoo!</a></p>
<p><a href = "http://www.usatoday.com">USA Today</a></p>
</body>
</html>
Elements placed between paragraph
tags will be set apart from other
elements on the page with a vertical
line before and after it.
The anchor links to the
page that’s value is given
by the href attribute.
 2001 Prentice Hall, Inc.
All rights reserved.
8
Outline
Program Output
Clicking on the “Deitel” link will open up the
Deitel homepage in a new browser window.
 2001 Prentice Hall, Inc.
All rights reserved.
9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Contact.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Contact Page
</title>
</head>
<body>
To create an email link include
“mailto:” before the email
address in the href attribute.
<p>My email address is
<a href = "mailto:[email protected]"> [email protected]
</a>. Click the address and your browser will open an
email message and address it to me.</p>
</body>
</html>
 2001 Prentice Hall, Inc.
All rights reserved.
10
Outline
Program Output
When a user clicks on an email link,
an email message addressed to the
value of the link will open up.
 2001 Prentice Hall, Inc.
All rights reserved.
11
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Picture.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
The value of the src attribute
of the image element is the
location of the image file.
<body>
<p><img src = "xmlhtp.jpg" height = "238" width = "183"
alt = "XML How to Program book cover" />
<img src = "jhtp.jpg" height = "238" width = "183"
alt = "Java How to Program book cover" /></p>
</body>
</html>
The value of the alt attribute
gives a description of the image.
This description is displayed if
the image cannot be displayed.
The height and width
attributes of the image
element give the height and
width of the image.
 2001 Prentice Hall, Inc.
All rights reserved.
12
Outline
Program Output
The second image could not be
displayed properly, so the value of
its alt attribute is displayed instead.
 2001 Prentice Hall, Inc.
All rights reserved.
13
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Nav.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Navigation Bar
</title>
</head>
<body>
<p>
<a href = "links.html">
<img src = "buttons/links.jpg" width = "65"
height = "50" alt = "Links Page" /></a><br />
Placing an image element between
anchor tags, creates an image that
is an anchor for a link.
<a href = "list.html">
<img src = "buttons/list.jpg" width = "65"
height = "50" alt = "List Example Page" /></a><br />
<a href = "contact.html">
<img src = "buttons/contact.jpg" width = "65"
height = "50" alt = "Contact Page" /></a><br />
A line break will render an
empty line on a web page.
<a href = "header.html">
<img src = "buttons/header.jpg" width = "65"
height = "50" alt = "Header Page" /></a><br />
<a href = "table.html">
<img src = "buttons/table.jpg" width = "65"
height = "50" alt = "Table Page" /></a><br />
 2001 Prentice Hall, Inc.
All rights reserved.
14
36
37
38
39
40
41
42
43
<a href = "form.html">
<img src = "buttons/form.jpg" width = "65"
height = "50" alt = "Feedback Form" /></a><br />
</p>
Outline
Nav.html
</body>
</html>
Program Output
Using an image as an anchor works
exactly the same as using text.
Clicking on the image entitled “links”
brings the user to the page on the right.
 2001 Prentice Hall, Inc.
All rights reserved.
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Contact Page
</title>
</head>
<body>
The horizontal rule element renders a
horizontal line on the web page.


<p>My email address is
Special characters are denoted with
<a href = "mailto:[email protected]">[email protected]
</a>. Click on the address and your browser will
an ampersand (&) and an
automatically open an email message and address it to my
abbreviation for that character. In
address.</p>
<hr /> 
this case, the special characters are
ampersand and copyright.
<p>All information on this site is <strong>©</strong>
Deitel <strong>&</strong> Associates, Inc. 2002.</p>




<p><del>You may download 3.14 x 10<sup>2</sup>
characters worth of information from this site.</del>
Only <sub>one</sub> download per hour is permitted.</p>
 2001 Prentice Hall, Inc.
All rights reserved.
16
36
37
38
39
40
41
<p>Note: <strong>< ¼</strong> of the information
presented here is updated daily.</p>
Outline
Contact2.html
</body>
</html>
Program Output
Text placed between del
tags is struck out..
Text placed between the
sub tags is subscripted.
Text placed between the
sup tags is superscripted.
 2001 Prentice Hall, Inc.
All rights reserved.
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Links2.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Links</title>
</head>
<body>
<h1>Here are my favorite sites</h1>
The entries in an unordered
list must be included between
the <ul> and </ul> tags.
<p><strong>Click on a name to go to that page.</strong></p>
<ul>
<li><a href = "http://www.deitel.com">Deitel</a></li>
<li><a href = "http://www.prenhall.com">Prentice Hall
</a></li>
<li><a href = "http://www.yahoo.com">Yahoo!</a></li>
<li><a href = "http://www.usatoday.com">USA Today</a>
</li>
</ul>
</body>
An entry in the list must
</html>
be placed between the
<li> and </li> tags.
 2001 Prentice Hall, Inc.
All rights reserved.
18
Outline
Program Output
Each entry in the list is rendered on its
own line with a bullet before it.
 2001 Prentice Hall, Inc.
All rights reserved.
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Outline
List.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Lists</title>
</head>
<body>
<h1>The Best Features of the Internet</h1>
By inserting a list as an entry in
another list, lists can be nested.
<ul>
<li>You can meet new people from countries around
the world.</li>
<li>You have access to new media as it becomes public:

-->
-->

Entries for an ordered list must be placed
<ol type = "I">
between the <ol> and </ol> tags.
<li>For business</li>
<li>For pleasure</li>
</ol> 
</li>
 2001 Prentice Hall, Inc.
All rights reserved.
20
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
Outline
<li>Around the clock news</li>
<li>Search engines</li>
<li>Shopping</li>
<li>Programming
<ol type = "a">
<li>XML</li>
<li>Java</li>
<li>XHTML</li>
<li>Scripts</li>
<li>New languages</li>
</ol>
List.html
The type attribute of the ordered
list element allows you to select a
sequence type to order the list.
</li>
</ul> 
</li>
<li>Links</li>
<li>Keeping in touch with old friends</li>
<li>It is the technology of the future!</li>
</ul>
Text placed between the em
tags will be italicized.

<h1>My 3 Favorite <em>CEOs</em></h1>


<ol>
<li>Harvey Deitel</li>
<li>Bill Gates</li>
<li>Michael Dell</li>
</ol>
 2001 Prentice Hall, Inc.
All rights reserved.
21
69
70
71
</body>
</html>
Outline
List.html
Program Output
Nested lists are indented
underneath the main list.
Some sequence types available
to order lists are roman
numerals, letters and numbers.
 2001 Prentice Hall, Inc.
All rights reserved.

Document

Transcript Document

Directory