Document

Transcript Document

Introduction to XHTML
1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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 bodyProgram
of the web
page
Output
2
W3C XHTML Validation Service
Validating an XHTML document. (Courtesy of World Wide Web Consortium (W3C).)
3
W3C XHTML Validation Service
XHTML validation results. (Courtesy of World Wide Web Consortium (W3C).)
4
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">
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>
5
Program Output
Select a header based on the
amount of emphasis you
would like to give that text.
6
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
<?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.
7
Program Output
Clicking on the “Deitel” link will open up the
Deitel homepage in a new browser window.
8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?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>
9
Program Output
When a user clicks on an email link,
an email message addressed to the
value of the link will open up.
10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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.
11
Program Output
The second image could not be
displayed properly, so the value of
its alt attribute is displayed instead.
12
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 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 />
13
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>
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.
14
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 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>
15
36
37
38
39
40
41
<p>Note: <strong>< ¼</strong> of the information
presented here is updated daily.</p>
</body>
</html>
Contact2.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.
16
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
<?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.
17
Program Output
Each entry in the list is rendered on its
own line with a bullet before it.
18
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">
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>
19
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
<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>
20
69
70
71
</body>
</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.
21
XHTML TABLES
22
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
<?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>A simple XHTML table</title>
</head>
The border attribute gives the size
in pixels of the table’s border.
The width attribute gives
the width of the table.
<body>

<table border = "1" width = "40%"
summary = "This table provides information about
the price of fruit">
The summary attribute
-->
describes the table’s contents.

<caption><strong>Price of Fruit</strong></caption>



<thead>
<tr>
Text placed in
<th>Fruit</th>
<th>Price</th>
rendered bold and
</tr>
</thead>
a table header is
centered in the cell.
23
33
34
35
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

-->
-->
Table1.html
The body of the table is placed
between the tbody tags.
Table rows are created
using the tr element
Data placed between td tags are
placed in an individual cell.
The table footer belongs at the
bottom of the table. It formats text in
a similar manner to a table header.
</table>
24
67
68
69
Table1.html
</body>
</html>
Program Output
Table Caption
Table header
Start of table body
End of table body
Table footer
25
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
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Table2.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Tables</title>
</head>
<body>
<h1>Table Example Page</h1>
<table border = "1">
<caption>Here is a more complex sample table.</caption>

-->
-->
-->
The span attribute
indicates width of the data
cell in number of columns.
<thead>
The align attribute is used to
horizontally align data in a cell.
26
30
31
32
33
34
35
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

-->
Table2.html

<th rowspan = "2">
<img src = "camel.gif" width = "205"
height = "167" alt = "PictureThe
of value
a camel"
of the/>colspan attribute gives
</th>
the
amount of columns taken up by the cell.

<th colspan = "4" valign = "top">
<h1>Camelid comparison</h1><br />
<p>Approximate as of 8/99</p>
The vertical alignment of data in a cell can
</th>
</tr>
be specified with the valign attribute.
<tr valign = "bottom">
<th># of Humps</th>
<th>Indigenous region</th>
<th>Spits?</th>
<th>Produces Wool?</th>
</tr>
</thead>
<tbody>
<tr>
<th>Camels (bactrian)</th>
<td>2</td>
<td>Africa/Asia</td>
<td rowspan = "2">Llama</td>
<td rowspan = "2">Llama</td>
</tr>
The value of the rowspan attribute gives
the amount of rows taken up by the cell.
27
65
66
67
68
69
70
71
72
73
74
75
76
77
<tr>
<th>Llamas</th>
<td>1</td>
<td>Andes Mountains</td>
</tr>
Table2.html
</tbody>
</table>
</body>
</html>
Program Output
Cell spanning the
size of two rows.
Cell spanning the size
of four columns.
28
XHTML FORMS
29
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
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Form.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Forms</title>
</head>
The method attribute specifies how
the form’s data is sent to the Web
server. The post method appends
form data to the browser request.
<body>
<h1>Feedback Form</h1>
<p>Please fill out this form to help
us improve our site.</p>

-->
-->
-->
The value of the action
attribute specifies the URL of
a script on the Web server.
Input elements are used to send data to
the script that processes the form.
<input type = "hidden" name = "recipient"
value = "[email protected]" />
<input type = "hidden" name = "subject"
value = "Feedback Form" />
<input type = "hidden" name = "redirect"
value = "main.html" />
</p>
A hidden value for the type
attribute
sends data that is not entered by the user.
30
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<p><label>Name:
<input name = "name" type = "text" size = "25"
maxlength = "30" />
</label></p>
<p>
Form.html
The size attribute gives the number of
characters visible in the text box.



<input type = "submit" value =
The maxlength attribute gives the maximum
"Submit Your Entries" />
number of characters the user can input.
<input type = "reset" value =
"Clear Your Entries" />
</p>
</form>
</body>
</html>
The value attribute displays a
name on the buttons created.
The label element describes the data
the user needs to enter in the text box.
31
Program Output
Text box created using
input element.
Submit button created
using input element.
Reset button created
using input element.
32
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
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Form2.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Forms</title>
</head>
<body>
<h1>Feedback Form</h1>
<p>Please fill out this form to help
us improve our site.</p>
<form method = "post" action = "/cgi-bin/formmail">
<p>
<input type = "hidden" name = "recipient"
value = "[email protected]" />
<input type = "hidden" name = "subject"
value = "Feedback Form" />
<input type = "hidden" name = "redirect"
value = "main.html" />
</p>
<p><label>Name:
<input name = "name" type = "text" size = "25" />
</label></p>
33
35
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

<p><label>Comments:<br />
<textarea name = "comments" rows = "4" cols = "36">
Enter your comments here.
</textarea>
</label></p>
Form2.html
The textarea element renders a text
area when the page is displayed. The
size of the text area can be specified
with the rows and cols attribute.



<p><label>E-mail Address:
<input name = "email" type = "password"
size = "25" />
Setting
</label></p>
an input element’s type attribute
to checkbox will create a checkbox.
<p>
<strong>Things you liked:</strong><br />
<label>Site design
<input name = "thingsliked" type = "checkbox"
value = "Design" /></label>
<label>Links
<input name = "thingsliked" type = "checkbox"
value = "Links" /></label>
Checkboxes that belong to the
same group must have same
value in the name attribute.
<label>Ease of use
<input name = "thingsliked" type = "checkbox"
value = "Ease" /></label>
<label>Images
<input name = "thingsliked" type = "checkbox"
value = "Images" /></label>
34
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<label>Source code
<input name = "thingsliked" type = "checkbox"
value = "Code" /></label>
</p>
Form2.html
<p>
<input type = "submit" value = "Submit Your Entries" />
<input type = "reset" value = "Clear Your Entries" />
</p>
</form>
</body>
</html>
Program Output
Text area created
with input element.
Checkbox options created
with input element.
35
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
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Form3.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Forms</title>
</head>
<body>
<h1>Feedback Form</h1>
<p>Please fill out this form to help
us improve our site.</p>
<form method = "post" action = "/cgi-bin/formmail">
<p>
<input type = "hidden" name = "recipient"
value = "[email protected]" />
<input type = "hidden" name = "subject"
value = "Feedback Form" />
<input type = "hidden" name = "redirect"
value = "main.html" />
</p>
<p><label>Name:
<input name = "name" type = "text" size = "25" />
</label></p>
36
35
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
<p><label>Comments:<br />
<textarea name = "comments" rows = "4"
cols = "36"></textarea>
</label></p>
Form3.html
<p><label>E-mail Address:
<input name = "email" type = "password"
size = "25" /></label></p>
<p>
<strong>Things you liked:</strong><br />
<label>Site design
<input name = "things" type = "checkbox"
value = "Design" /></label>
<label>Links
<input name = "things" type = "checkbox"
value = "Links" /></label>
<label>Ease of use
<input name = "things" type = "checkbox"
value = "Ease" /></label>
<label>Images
<input name = "things" type = "checkbox"
value = "Images" /></label>
<label>Source code
<input name = "things" type = "checkbox"
value = "Code" /></label>
</p>
37
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97




<p>
<strong>How did you get to our site?:</strong><br />
Form3.html
<label>Search engine
<input name = "how get to site" type = "radio"
value = "search engine" checked = "checked" />
</label>
<label>Links from another site
<input name = "how get to site" type = "radio"
value = "link" /></label>
The checked attribute
will mark this radio
option by default.
<label>Deitel.com Web site
<input name = "how get to site" type = "radio"
value = "deitel.com" /></label>
<label>Reference in a book
<input name = "how get to site" type = "radio"
value = "book" /></label>
<label>Other
<input name = "how get to site" type = "radio"
value = "other" /></label>
An input element with
type value equal to radio
creates radio buttons.
</p>
38
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<p>
Form3.html
<label>Rate our site:



<select name = "rating">
<option selected = "selected">Amazing</option>
<option>10</option>
<option>9</option>
<option>8</option>
The select element
<option>7</option>
creates a drop down list.
<option>6</option>
<option>5</option>
<option>4</option>
<option>3</option>
<option>2</option>
The selected attribute selects a
<option>1</option>
default value for the drop down list.
<option>Awful</option>
</select>
</label>
</p>
<p>
The option tag is used for each
option in the drop down list.
<input type = "submit" value =
"Submit Your Entries" />
<input type = "reset" value = "Clear Your Entries" />
</p>
</form>
</body>
</html>
39
Program Output
Radio box list created
with input element.
Drop down box list created
with input element.The
Amazing option is selected
as a default value.
40
Program Output
41
NAVIGATING ON THE SAME PAGE
Clicking on this internal link
will bring the user to the
bottom of the page where My
3 Favorite CEOs is located.
42
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 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 - List</title>
</head>
To internally link, place a # sign
in front of the name of the desired
anchor element within the page.
<body>

<p><a name = "features"></a></p>
<h1>The Best Features of the Internet</h1>

<p><a href = "#ceos">Go to <em>Favorite CEOs</em></a></p>
<ul>
<li>You can meet people from countries
around the world.</li>
<li>You have access to new media as it becomes public:
<ul>
<li>New games</li>
<li>New applications
<ul>
<li>For Business</li>
<li>For Pleasure</li>
</ul>
</li>
43
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
<li>Around the clock news</li>
<li>Search Engines</li>
<li>Shopping</li>
<li>Programming
<ul>
<li>XHTML</li>
<li>Java</li>
<li>Dynamic HTML</li>
<li>Scripts</li>
<li>New languages</li>
</ul>
</li>
</ul>
</li>
<li>Links</li>
<li>Keeping in touch with old friends</li>
<li>It is the technology of the future!</li>
</ul>

<p><a name = "ceos"></a></p>
<h1>My 3 Favorite <em>CEOs</em></h1>
Links.html
An anchor named ceos will be
created at this point on the page.
This anchor does not link and
will not be seen on the page.
However, other anchors can refer
to this anchor and link to it.
<p>

<a href = "#features">Go to <em>Favorite Features</em>
</a></p>
44
66
67
68
69
70
71
72
73
<ol>
<li>Bill Gates</li>
<li>Steve Jobs</li>
<li>Michael Dell</li>
</ol>
</body>
</html>
Links.html
Program Output
Clicking on this internal link
will bring the user to the
bottom of the page where My
3 Favorite CEOs is located.
45
IMAGE MAPS
46
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 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 - Image Map
</title>
</head>
The area element is
used to create hotspots.
<body>
<p>

<map id = "picture">
The shape attribute defines a
shape for the hotspot.

The first two integers of the

coordinate attribute define the (x,y)

<area href = "form.html" shape = "rect"
coordinate of the upper-left hand
coords = "2,123,54,143"
corner of the rectangle.
alt = "Go to the feedback form" />
The last two integers define the
<area href = "contact.html" shape = "rect"
coords = "126,122,198,143"
(x,y) coordinate of the lower-right
alt = "Go to the contact page" />
hand corner of the rectangle.
<area href = "main.html" shape = "rect"
coords = "3,7,61,25" alt = "Go to the homepage" />
<area href = "links.html" shape = "rect"
coords = "168,5,197,25"
47
alt = "Go to the links page" />
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56


<area shape = "poly" alt = "E-mail the Deitels"
coords = "162,25,154,39,158,54,169,51,183,39,161,26"
href = "mailto:[email protected]" />

-->
Picture.html
Assigning poly to the shape
attribute creates a polygon
with coordinates defined by
the coords attribute.
 Assigning circle to the shape
 attribute creates a circle, with
<img src = "deitel.gif" width = "200" height = "144"
a center and radius specified
alt = "Deitel logo" usemap = "#picture" />
by the coords attribute.
</p>
</body>
</html>
The image map assigned to the usemap
attribute will be used with the image.
The # in front of the name of the image map
indicates that an internal image map is being used.
48
Program Output
Selecting the
Feedback hotspot
links to the page
below.
Hotspots created using
the area element.
49
MENUS AND FRAMES
50
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 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>


<meta name = "keywords" content = "Webpage, design,
XHTML, tutorial, personal, help, index, form,
contact, feedback, list, links, frame, deitel" />
The meta element provides
information to search
engines about the document.
The name attribute describes
the type of meta element.
<meta name = "description" content = "This Web site will
help you learn the basics of XHTML and Webpage design
through the use of interactive examples and
instruction." />
</head>
<body>
The content attribute provides
the information search engines
use to catalog pages.
<h1>Welcome to Our Web Site!</h1>
<p>We have designed this site to teach about the wonders
of <strong><em>XHTML</em></strong>. <em>XHTML</em> is
better equipped than <em>HTML</em> to represent complex
data on the Internet. <em>XHTML</em> takes advantage of
XML’s strict syntax to ensure well-formedness. Soon you
will know about many of the great new features of
<em>XHTML.</em></p>
51
36
37
38
39
40
<p>Have Fun With the Site!</p>
Main.html
</body>
</html>
52
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
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Index.html


The frameset element informs the
browser that the page contains frames.
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Main</title>
<meta name = "keywords" content = "Webpage, design,
XHTML, tutorial, personal, help, index, form,
contact, feedback, list, links, frame, deitel" />
<meta name = "description" content = "This Web site will
help you learn the basics of XHTML and Web page design
through the use of interactive examples
The cols
and instruction." />
</head>

frame fills the rest of the browser, as
indicated by the * value.


<frame name = “leftframe" src = "nav.html" />
<frame name = "main" src = "main.html" />
The frame element loads documents
into the frameset. The src attribute
indicates the document to be loaded.
Nav.html is loaded into the left frame and
main.html is loaded into the right frame.
53
30
31
32
33
34
35
36
37
38
39
<noframes>
<p>This page uses frames, but your browser does not
support them.</p>
Index.html
<p>Please, <a href = "nav.html">follow this link to
browse our site without frames</a>.</p>
</noframes>
</frameset>
</html>
Left frame
(leftframe)
The noframes element provides an option
for browsers that do not display frames.
Right frame
(main)
54
Program Output
When Header Examples
is selected, the document
it links to is displayed in
the right frame.
55
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
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Nav.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Navigation Bar
</title>
</head>
<body>
The target attribute specifies
where the document linked by
the anchor should display.
<p>
<a href = "links.html" target = "main">
<img src = "buttons/links.jpg" width = "65"
height = "50" alt = "Links Page" />
</a><br />
<a href = "list.html" target = "main">
<img src = "buttons/list.jpg" width = "65"
height = "50" alt = "List Example Page" />
</a><br />
The document will open in
the frame called main.
<a href = "contact.html" target = "main">
<img src = "buttons/contact.jpg" width = "65"
height = "50" alt = "Contact Page" />
</a><br />
56
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<a href = "header.html" target = "main">
<img src = "buttons/header.jpg" width = "65"
height = "50" alt = "Header Page" />
</a><br />
Nav.html
<a href = "table1.html" target = "main">
<img src = "buttons/table.jpg" width = "65"
height = "50" alt = "Table Page" />
</a><br />
<a href = "form.html" target = "main">
<img src = "buttons/form.jpg" width = "65"
height = "50" alt = "Feedback Form" />
</a><br />
</p>
</body>
</html>
Other values of target can be specified to load
documents onto a new browser window, into the
same frame that the anchor appears in and onto a
full browser window, removing all frames.
57
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
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Index2.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Main</title>
The vertical frame on the right is
into two horizontal frames.
<meta name = "keywords" content = "Webpage, design,
divided
XHTML, tutorial, personal, help, index, form,
contact, feedback, list, links, frame, deitel" />
<meta name = "description" content = "This Web site will
help you learn the basics of XHTML and Web page design
through the use of interactive examples
and instruction." />
</head>
<frameset cols = "110,*">
<frame name = "nav" src = "nav.html" />
The rows attribute works in a similar manner
to the cols attribute, except the rows attribute
gives the height of each frame.



<frameset rows = "175,*">
<frame name = "picture" src = "picture.html" />
<frame name = "main" src = "main.html" />
</frameset>
58
34
35
36
37
38
39
40
41
42
43
<noframes>
<p>This page uses frames, but your browser does not
support them.</p>
Index2.html
<p>Please, <a href = "nav.html">follow this link to
browse our site without frames</a>.</p>
</noframes>
</frameset>
</html>
Program Output
The nested frame element splits
the right vertical frame into two
horizontal frames.
59
END OF LECTURE
60

Document

Transcript Document

Directory