Scribd
Upload
60 views21 pages

Outline: 2001 Prentice Hall, Inc. All Rights Reserved

Uploaded by

vanissoo
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
60 views21 pages

Outline: 2001 Prentice Hall, Inc. All Rights Reserved

Uploaded by

vanissoo
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 21

1

Chapter 4 - Introduction to XHTML:


Part 1
Outline
4.1 Introduction
4.2 Elements and Attributes
4.3 Editing XHTML
4.4 Common Elements
4.5 W3C XHTML Validation Service
4.6 Headers
4.7 Linking
4.8 Images
4.9 Special Characters and More Line Breaks
4.10 Unordered Lists
4.11 Nested and Ordered Lists
4.12 Internet and World Wide Web Resources

 2001 Prentice Hall, Inc. All rights reserved.


2
1 <?xml version = "1.0"?> Outline
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. 4.1: main.html --> Main.html
6 <!-- Our first Web page -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head> The text between the
10 <title>Internet and WWW How to Program - Welcome</title>
11 </head> title tags appears as the
12 title of the web page.
13 <body>
14 <p>Welcome to XHTML!</p>
15 </body>
16 </html> 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 <?xml version = "1.0"?> Outline
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. 4.4: header.html --> 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> The font size of the text
14
between tags decreases as Every XHTML document is
15 <h1>Level 1 Header</h1>
16 <h2>Level 2 header</h2> the header level increases. required to have opening
17 <h3>Level 3 header</h3> and closing html tags.
18 <h4>Level 4 header</h4>
19 <h5>Level 5 header</h5>
20 <h6>Level 6 header</h6>
21
22 </body>
23 </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 <?xml version = "1.0"?> Outline
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. 4.5: links.html --> Links.html
6 <!-- Introduction to hyperlinks -->
7 Text between strong
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head> tags will appear bold.
10 <title>Internet and WWW How to Program - Links</title>
11 </head>
12 Linking is accomplished
13 <body> in XHTML with the
14 anchor (a) element.
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 <p><a href = "http://www.deitel.com">Deitel</a></p> The text between the a tags
20 is the anchor for the link.
21 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
22
23 <p><a href = "http://www.yahoo.com">Yahoo!</a></p>
24
25 <p><a href = "http://www.usatoday.com">USA Today</a></p>
26
27 </body>
28 </html>
The anchor links to the
page that’s value is given
Elements placed between paragraph
by the href attribute.
tags will be set apart from other
elements on the page with a vertical
line before and after it.  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 <?xml version = "1.0"?> Outline
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. 4.6: contact.html --> 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
11 </title>
12 </head>
To create an email link include
13
14 <body> “mailto:” before the email
15 address in the href attribute.
16 <p>My email address is
17 <a href = "mailto:[email protected]"> [email protected]
18 </a>. Click the address and your browser will open an
19 email message and address it to me.</p>
20
21 </body>
22 </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 <?xml version = "1.0"?> Outline
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. 4.7: picture.html --> Picture.html
6 <!-- Adding images with XHTML -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml"> The value of the src attribute
9 <head>
10 <title>Internet and WWW How to Program - Welcome</title> of the image element is the
11 </head> location of the image file.
12
13 <body>
14
15 <p><img src = "xmlhtp.jpg" height = "238" width = "183"
16 alt = "XML How to Program book cover" />
17 <img src = "jhtp.jpg" height = "238" width = "183"
18 alt = "Java How to Program book cover" /></p>
19 </body>
20 </html>

The height and width


attributes of the image
The value of the alt attribute element give the height and
gives a description of the image. width of the image.
This description is displayed if
the image cannot be displayed.

 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 <?xml version = "1.0"?> Outline
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. 4.8: nav.html --> 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 Placing an image element between
14 <body>
15 anchor tags, creates an image that
16 <p> is an anchor for a link.
17 <a href = "links.html">
18 <img src = "buttons/links.jpg" width = "65"
19 height = "50" alt = "Links Page" /></a><br />
20
21 <a href = "list.html">
22 <img src = "buttons/list.jpg" width = "65"
23 height = "50" alt = "List Example Page" /></a><br />
24
25 <a href = "contact.html"> A line break will render an
26 <img src = "buttons/contact.jpg" width = "65" empty line on a web page.
27 height = "50" alt = "Contact Page" /></a><br />
28
29 <a href = "header.html">
30 <img src = "buttons/header.jpg" width = "65"
31 height = "50" alt = "Header Page" /></a><br />
32
33 <a href = "table.html">
34 <img src = "buttons/table.jpg" width = "65"
35 height = "50" alt = "Table Page" /></a><br />
 2001 Prentice Hall, Inc.
All rights reserved.
14
36 Outline
37 <a href = "form.html">
38 <img src = "buttons/form.jpg" width = "65"
39 height = "50" alt = "Feedback Form" /></a><br />
40 </p> Nav.html
41
42 </body>
43 </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 <?xml version = "1.0"?> Outline
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. 4.9: contact2.html --> 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 The horizontal rule element renders a
14 <body> horizontal line on the web page.
15
16 <!-- Special characters are entered -->
17 <!-- using the form &code; -->
18 <p>My email address is
19 Special characters are denoted with
<a href = "mailto:[email protected]">[email protected]
20 </a>. Click on the address and your browser will an ampersand (&) and an
21 automatically open an email message and address it to my
abbreviation for that character. In
22 address.</p>
23 this case, the special characters are
24 <hr /> <!-- Inserts a horizontal rule --> ampersand and copyright.
25
26 <p>All information on this site is <strong>&copy;</strong>
27 Deitel <strong>&amp;</strong> Associates, Inc. 2002.</p>
28
29 <!-- Text can be struck out with a set of -->
30 <!-- <del>...</del> tags, it can be set in subscript -->
31 <!-- with <sub>...</sub>, and it can be set into -->
32 <!-- superscript with <sup...</sup> -->
33 <p><del>You may download 3.14 x 10<sup>2</sup>
34 characters worth of information from this site.</del>
35 Only <sub>one</sub> download per hour is permitted.</p>
 2001 Prentice Hall, Inc.
All rights reserved.
16
36 Outline
37 <p>Note: <strong>&lt; &frac14;</strong> of the information
38 presented here is updated daily.</p>
39
40 </body> Contact2.html
41 </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 <?xml version = "1.0"?> Outline
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. 4.10: links2.html --> 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 The entries in an unordered
13 <body> list must be included between
14
15 <h1>Here are my favorite sites</h1> the <ul> and </ul> tags.
16
17 <p><strong>Click on a name to go to that page.</strong></p>
18
19 <ul>
20 <li><a href = "http://www.deitel.com">Deitel</a></li>
21
22 <li><a href = "http://www.prenhall.com">Prentice Hall
23 </a></li>
24
25 <li><a href = "http://www.yahoo.com">Yahoo!</a></li>
26
27 <li><a href = "http://www.usatoday.com">USA Today</a>
28 </li>
29 </ul>
30 </body>
31 </html> An entry in the list must
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 <?xml version = "1.0"?> Outline
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 4.11: list.html --> 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> By inserting a list as an entry in
14
15 <h1>The Best Features of the Internet</h1>
another list, lists can be nested.
16
17 <ul>
18 <li>You can meet new people from countries around
19 the world.</li>
20 <li>You have access to new media as it becomes public:
21
22 <!-- This starts a nested list, which uses a -->
23 <!-- modified bullet. The list ends when you -->
24 <!-- close the <ul> tag -->
25 <ul>
26 <li>New games</li>
27 <li>New applications
28
29 <!-- Another nested list --> Entries for an ordered list must be placed
30 <ol type = "I"> between the <ol> and </ol> tags.
31 <li>For business</li>
32 <li>For pleasure</li>
33 </ol> <!-- Ends the double nested list -->
34 </li>
35
 2001 Prentice Hall, Inc.
All rights reserved.
20
36 <li>Around the clock news</li> Outline
37 <li>Search engines</li>
38 <li>Shopping</li>
39 <li>Programming
40 List.html
41 <ol type = "a">
42 <li>XML</li>
43 <li>Java</li> The type attribute of the ordered
44 <li>XHTML</li>
45 <li>Scripts</li> list element allows you to select a
46 <li>New languages</li> sequence type to order the list.
47 </ol>
48
49 </li>
50
51 </ul> <!-- Ends the first level nested list -->
52 </li>
53
54 <li>Links</li>
55 <li>Keeping in touch with old friends</li> Text placed between the em
56 <li>It is the technology of the future!</li> tags will be italicized.
57
58 </ul> <!-- Ends the primary unordered list -->
59
60 <h1>My 3 Favorite <em>CEOs</em></h1>
61
62 <!-- ol elements without a type attribute -->
63 <!-- have a numeric sequence type (i.e., 1, 2, ...) -->
64 <ol>
65 <li>Harvey Deitel</li>
66 <li>Bill Gates</li>
67 <li>Michael Dell</li>
68 </ol>
 2001 Prentice Hall, Inc.
All rights reserved.
21
69 Outline
70 </body>
71 </html>
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.

You might also like