Scribd
Upload
9 views

Lecture 5

This document introduces XHTML and its basic elements and tags. It demonstrates how to add titles, paragraphs, headings, links, emails, images and navigation buttons to an XHTML page. Key elements covered include html, head, title, body, h1-h6, p, a, img, and line breaks.

Uploaded by

myturtle game01
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Lecture 5

This document introduces XHTML and its basic elements and tags. It demonstrates how to add titles, paragraphs, headings, links, emails, images and navigation buttons to an XHTML page. Key elements covered include html, head, title, body, h1-h6, p, a, img, and line breaks.

Uploaded by

myturtle game01
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 100

Introduction to XHTML

1
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Main.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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> 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 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 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Header.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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> The font size of the text
14 Every XHTML document is
15 <h1>Level 1 Header</h1> between tags decreases as
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>

5
Program Output

Select a header based on the


amount of emphasis you
would like to give that text.

6
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Links.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 4.5: 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. 7
Program Output

Clicking on the “Deitel” link will open up the


Deitel homepage in a new browser window.

8
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Contact.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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
11 </title>
12 </head>
13
To create an email link include
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>

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 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Picture.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 4.7: 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.

11
Program Output

The second image could not be


displayed properly, so the value of
its alt attribute is displayed instead.

12
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Nav.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 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 /> 13
36
37 <a href = "form.html">
Nav.html
38 <img src = "buttons/form.jpg" width = "65"
39 height = "50" alt = "Feedback Form" /></a><br />
40 </p>
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. 14
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Contact2.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 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
22 address.</p>
abbreviation for that character. In
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> 15
36
37 <p>Note: <strong>&lt; &frac14;</strong> of the information
Contact2.html
38 presented here is updated daily.</p>
39
40 </body>
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.

16
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Links2.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 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.
17
Program Output

Each entry in the list is rendered on its


own line with a bullet before it.

18
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
List.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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> 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 19
36 <li>Around the clock news</li>
37 <li>Search engines</li>
List.html
38 <li>Shopping</li>
39 <li>Programming
40
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>

20
69
70 </body>
List.html
71 </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 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Table1.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 5.1: table1.html -->
6 <!-- Creating a basic table -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
The border attribute gives the size
9 <head> in pixels of the table’s border.
10 <title>A simple XHTML table</title>
11 </head>
12 The width attribute gives
13 <body>
14 the width of the table.
15 <!-- The <table> tag opens a table -->
16 <table border = "1" width = "40%"
17 summary = "This table provides information about
18 the price of fruit">
19 The summary attribute
20 <!-- The <caption> tag summarizes the table's describes the table’s contents.
-->
21 <!-- contents (this helps the visually impaired) -->
22 <caption><strong>Price of Fruit</strong></caption>
23
24 <!-- The <thead> is the first section of a -->
25 <!-- table. It formats the table header -->
26 <!-- area. <th> inserts a heading cell. -->
27 <thead>
28 <tr>
29 <th>Fruit</th> Text placed in a table header is
30 <th>Price</th> rendered bold and centered in the cell.
31 </tr>
32 </thead>

23
33
34 <!-- All table content goes is enclosed within -->
Table1.html
35 <!-- <tbody>. <tr> inserts a table row. <td> -->
36 <!-- inserts a data cell. -->
37 <tbody>
38 <tr>
39 <td>Apple</td>
40 <td>$0.25</td>
41 </tr> The body of the table is placed
42 between the tbody tags.
43 <tr>
44 <td>Orange</td>
45 <td>$0.50</td>
46 </tr>
47 Table rows are created
48 <tr> using the tr element
49 <td>Banana</td>
50 <td>$1.00</td>
51 </tr>
52
53 <tr>
54 <td>Pineapple</td> Data placed between td tags are
55 <td>$2.00</td> placed in an individual cell.
56 </tr>
57 </tbody>
58
59 <tfoot>
60 <tr> The table footer belongs at the
61 <th>Total</th> bottom of the table. It formats text in
62 <th>$3.75</th>
63 </tr> a similar manner to a table header.
64 </tfoot>
65
66 </table>
24
67
68 </body>
Table1.html
69 </html>

Program Output

Table Caption

Table header

Start of table body

End of table body

Table footer

25
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Table2.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 5.2: table2.html -->
6 <!-- Intermediate table design -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Tables</title>
11 </head>
12
13 <body>
14
15 <h1>Table Example Page</h1>
16
17 <table border = "1">
18 <caption>Here is a more complex sample table.</caption>
19
20 <!-- <colgroup> and <col> are used to -->
21 <!-- format entire columns at once. -->
The span attribute
22 <!-- span determines how many columns --> indicates width of the data
23 <!-- the col tag affects. --> cell in number of columns.
24 <colgroup>
25 <col align = "right" span = "1" />
26 </colgroup>
27
28 <thead>
29 The align attribute is used to
horizontally align data in a cell.

26
30 <!-- rowspans and colspans merge the specified -->
31 <!-- number of cells vertically or horizontally -->
32 <tr>
33
34 <!-- Merge two rows --> Table2.html
35 <th rowspan = "2">
36 <img src = "camel.gif" width = "205"
37 height = "167" alt = "PictureThe
of value
a camel"
of the/>colspan attribute givesthe
38 </th>
39 amount of columns taken up by the cell.
40 <!-- Merge four columns -->
41 <th colspan = "4" valign = "top">
42 <h1>Camelid comparison</h1><br />
43 <p>Approximate as of 8/99</p>
44 </th> The vertical alignment of data in a cell can
45 </tr> be specified with the valign attribute.
46
47 <tr valign = "bottom">
48 <th># of Humps</th>
49 <th>Indigenous region</th>
50 <th>Spits?</th>
51 <th>Produces Wool?</th>
52 </tr>
53
54 </thead>
55
56 <tbody>
57
58 <tr> The value of the rowspan attribute gives
59 <th>Camels (bactrian)</th> the amount of rows taken up by the cell.
60 <td>2</td>
61 <td>Africa/Asia</td>
62 <td rowspan = "2">Llama</td>
63 <td rowspan = "2">Llama</td>
64 </tr> 27
65
66 <tr>
Table2.html
67 <th>Llamas</th>
68 <td>1</td>
69 <td>Andes Mountains</td>
70 </tr>
71
72 </tbody>
73
74 </table>
75
76 </body>
77 </html>
Program Output

Cell spanning the


size of two rows.
Cell spanning the size
of four columns.

28
XHTML FORMS

29
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Form.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 5.3: form.html -->
6 <!-- Form Design Example 1 -->
7 Each form must begin
8 <html xmlns = "http://www.w3.org/1999/xhtml"> and end with form tags.
9 <head>
10 <title>Internet and WWW How to Program - Forms</title>
11 </head>
12 The method attribute specifies how
13 <body> the form’s data is sent to the Web
14
15 <h1>Feedback Form</h1>
server. The post method appends
16 form data to the browser request.
17 <p>Please fill out this form to help
18 us improve our site.</p>
19 The value of the action
20 <!-- This tag starts the form, gives the method of --> attribute specifies the URL of
21 <!-- sending information and the location of form -->
22 <!-- scripts. Hidden inputs contain -->
a script on the Web server.
23 <!-- non-visual information -->
24 <form method = "post" action = "/cgi-bin/formmail">
25
26 <p> Input elements are used to send data to
27 <input type = "hidden" name = "recipient" the script that processes the form.
28 value = "[email protected]" />
29 <input type = "hidden" name = "subject"
30 value = "Feedback Form" />
31 <input type = "hidden" name = "redirect"
32 value = "main.html" />
33 </p> A hidden value for the type attribute
sends data that is not entered by the user. 30
34
35 <!-- <input type = "text"> inserts a text box -->
Form.html
36 <p><label>Name:
37 <input name = "name" type = "text" size = "25"
38 maxlength = "30" />
39 </label></p>
40
The size attribute gives the number of
41 <p> characters visible in the text box.
42 <!-- input types "submit" and "reset" insert -->
43 <!-- buttons for submitting and clearing the -->
44 <!-- form's contents -->
45 <input type = "submit" value = The maxlength attribute gives the maximum
46 "Submit Your Entries" />
47 <input type = "reset" value = number of characters the user can input.
48 "Clear Your Entries" />
49 </p>
50
51 </form>
52
53 </body> The value attribute displays a
54 </html> 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 Reset button created


using input element. using input element.

32
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Form2.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 5.4: form2.html -->
6 <!-- Form Design Example 2 -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Forms</title>
11 </head>
12
13 <body>
14
15 <h1>Feedback Form</h1>
16
17 <p>Please fill out this form to help
18 us improve our site.</p>
19
20 <form method = "post" action = "/cgi-bin/formmail">
21
22 <p>
23 <input type = "hidden" name = "recipient"
24 value = "[email protected]" />
25 <input type = "hidden" name = "subject"
26 value = "Feedback Form" />
27 <input type = "hidden" name = "redirect"
28 value = "main.html" />
29 </p>
30
31 <p><label>Name:
32 <input name = "name" type = "text" size = "25" />
33 </label></p>
34
33
35 <!-- <textarea> creates a multiline textbox -->
36 <p><label>Comments:<br />
Form2.html
37 <textarea name = "comments" rows = "4" cols = "36">
38 Enter your comments here.
39 </textarea>
40 </label></p>
41 The textarea element renders a text
42 <!-- <input type = "password"> inserts a --> area when the page is displayed. The
43 <!-- textbox whose display is masked with -->
44 <!-- asterisk characters -->
size of the text area can be specified
45 <p><label>E-mail Address: with the rows and cols attribute.
46 <input name = "email" type = "password"
47 size = "25" />
48 </label></p> Setting an input element’s type attribute
49 to checkbox will create a checkbox.
50 <p>
51 <strong>Things you liked:</strong><br />
52
53 <label>Site design
54 <input name = "thingsliked" type = "checkbox" Checkboxes that belong to the
55 value = "Design" /></label> same group must have same
56 value in the name attribute.
57 <label>Links
58 <input name = "thingsliked" type = "checkbox"
59 value = "Links" /></label>
60
61 <label>Ease of use
62 <input name = "thingsliked" type = "checkbox"
63 value = "Ease" /></label>
64
65 <label>Images
66 <input name = "thingsliked" type = "checkbox"
67 value = "Images" /></label>
68
34
69 <label>Source code
70 <input name = "thingsliked" type = "checkbox"
Form2.html
71 value = "Code" /></label>
72 </p>
73
74 <p>
75 <input type = "submit" value = "Submit Your Entries" />
76 <input type = "reset" value = "Clear Your Entries" />
77 </p>
78
79 </form>
80
81 </body>
82 </html> Program Output

Text area created


with input element.

Checkbox options created


with input element.

35
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Form3.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 5.5: form3.html -->
6 <!-- Form Design Example 3 -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Forms</title>
11 </head>
12
13 <body>
14
15 <h1>Feedback Form</h1>
16
17 <p>Please fill out this form to help
18 us improve our site.</p>
19
20 <form method = "post" action = "/cgi-bin/formmail">
21
22 <p>
23 <input type = "hidden" name = "recipient"
24 value = "[email protected]" />
25 <input type = "hidden" name = "subject"
26 value = "Feedback Form" />
27 <input type = "hidden" name = "redirect"
28 value = "main.html" />
29 </p>
30
31 <p><label>Name:
32 <input name = "name" type = "text" size = "25" />
33 </label></p>
34
36
35 <p><label>Comments:<br />
36 <textarea name = "comments" rows = "4"
Form3.html
37 cols = "36"></textarea>
38 </label></p>
39
40 <p><label>E-mail Address:
41 <input name = "email" type = "password"
42 size = "25" /></label></p>
43
44 <p>
45 <strong>Things you liked:</strong><br />
46
47 <label>Site design
48 <input name = "things" type = "checkbox"
49 value = "Design" /></label>
50
51 <label>Links
52 <input name = "things" type = "checkbox"
53 value = "Links" /></label>
54
55 <label>Ease of use
56 <input name = "things" type = "checkbox"
57 value = "Ease" /></label>
58
59 <label>Images
60 <input name = "things" type = "checkbox"
61 value = "Images" /></label>
62
63 <label>Source code
64 <input name = "things" type = "checkbox"
65 value = "Code" /></label>
66 </p>
67

37
68 <!-- <input type = "radio" /> creates a radio -->
69 <!-- button. The difference between radio buttons -->
Form3.html
70 <!-- and checkboxes is that only one radio button -->
71 <!-- in a group can be selected -->
72 <p>
73 <strong>How did you get to our site?:</strong><br />
74
75 <label>Search engine
76 <input name = "how get to site" type = "radio"
77 value = "search engine" checked = "checked" />
78 </label>
79 The checked attribute
80 <label>Links from another site
81 <input name = "how get to site" type = "radio"
will mark this radio
82 value = "link" /></label> option by default.
83
84 <label>Deitel.com Web site
85 <input name = "how get to site" type = "radio"
86 value = "deitel.com" /></label>
87
88 <label>Reference in a book
89 <input name = "how get to site" type = "radio" An input element with
90 value = "book" /></label> type value equal to radio
91 creates radio buttons.
92 <label>Other
93 <input name = "how get to site" type = "radio"
94 value = "other" /></label>
95
96 </p>
97

38
98 <p>
99 <label>Rate our site:
Form3.html
100
101 <!-- The <select> tag presents a drop-down -->
102 <!-- list with choices indicated by the -->
103 <!-- <option> tags -->
104 <select name = "rating">
105 <option selected = "selected">Amazing</option>
106 <option>10</option>
107 <option>9</option>
108 <option>8</option> The select element
109 <option>7</option>
110 <option>6</option> creates a drop down list.
111 <option>5</option>
112 <option>4</option>
113 <option>3</option>
114 <option>2</option> The selected attribute selects a
115 <option>1</option>
116 <option>Awful</option> default value for the drop down list.
117 </select>
118
119 </label>
120 </p>
121 The option tag is used for each
122 <p> option in the drop down list.
123 <input type = "submit" value =
124 "Submit Your Entries" />
125 <input type = "reset" value = "Clear Your Entries" />
126 </p>
127
128 </form>
129
130 </body>
131 </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 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Links.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 5.6: links.html -->
6 <!-- Internal Linking -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - List</title>
11 </head> To internally link, place a # sign
12 in front of the name of the desired
13 <body>
14 anchor element within the page.
15 <!-- <a name = ".."></a> creates an internal hyperlink -->
16 <p><a name = "features"></a></p>
17 <h1>The Best Features of the Internet</h1>
18
19 <!-- An internal link's address is "#linkname" -->
20 <p><a href = "#ceos">Go to <em>Favorite CEOs</em></a></p>
21
22 <ul>
23 <li>You can meet people from countries
24 around the world.</li>
25
26 <li>You have access to new media as it becomes public:
27 <ul>
28 <li>New games</li>
29 <li>New applications
30 <ul>
31 <li>For Business</li>
32 <li>For Pleasure</li>
33 </ul>
34 </li>
35 43
36 <li>Around the clock news</li>
37 <li>Search Engines</li>
Links.html
38 <li>Shopping</li>
39 <li>Programming
40 <ul>
41 <li>XHTML</li>
42 <li>Java</li>
43 <li>Dynamic HTML</li>
44 <li>Scripts</li>
45 <li>New languages</li>
46 </ul>
47 </li>
48 </ul>
49 </li>
50 An anchor named ceos will be
51 <li>Links</li> created at this point on the page.
52 <li>Keeping in touch with old friends</li> This anchor does not link and
53 <li>It is the technology of the future!</li>
54 </ul> will not be seen on the page.
55 However, other anchors can refer
56 <!-- Named anchor --> to this anchor and link to it.
57 <p><a name = "ceos"></a></p>
58 <h1>My 3 Favorite <em>CEOs</em></h1>
59
60 <p>
61
62 <!-- Internal hyperlink to features -->
63 <a href = "#features">Go to <em>Favorite Features</em>
64 </a></p>
65

44
66 <ol>
67 <li>Bill Gates</li>
Links.html
68 <li>Steve Jobs</li>
69 <li>Michael Dell</li>
70 </ol>
71
72 </body>
73 </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 <?xml version = "1.0" ?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Picture.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 5.7: picture.html -->
6 <!-- Creating and Using Image Maps -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>
11 Internet and WWW How to Program - Image Map The area element is
12 </title> used to create hotspots.
13 </head>
14
15 <body>
16
17 <p> The shape attribute defines a
18
19 <!-- The <map> tag defines an image map -->
shape for the hotspot.
20 <map id = "picture">
21
22 <!-- The "shape = rect" indicates a rectangular -->
23 <!-- area, with coordinates for the upper-left -->
The first two integers of the
24 <!-- and lower-right corners coordinate attribute define the (x,y)
-->
25 <area href = "form.html" shape = "rect" coordinate of the upper-left hand
26 coords = "2,123,54,143"
27 alt = "Go to the feedback form" />
corner of the rectangle.
28 <area href = "contact.html" shape = "rect" The last two integers define the (x,y)
29 coords = "126,122,198,143" coordinate of the lower-right hand
30 alt = "Go to the contact page" />
31 <area href = "main.html" shape = "rect"
corner of the rectangle.
32 coords = "3,7,61,25" alt = "Go to the homepage" />
33 <area href = "links.html" shape = "rect"
34 coords = "168,5,197,25"
35 alt = "Go to the links page" /> 47
36
37 <!-- Value poly creates a hotspot in the shape -->
Picture.html
38 <!-- of a polygon, defined by coords -->
39 <area shape = "poly" alt = "E-mail the Deitels"
40 coords = "162,25,154,39,158,54,169,51,183,39,161,26"
41 href = "mailto:[email protected]" />
42 Assigning poly to the shape
43 <!-- The "shape = circle" indicates a circular -->
44 <!-- area with center and radius listed -->
attribute creates a polygon
45 <area href = "mailto:[email protected]" with coordinates defined by
46 shape = "circle" coords = "100,36,33" the coords attribute.
47 alt = "E-mail the Deitels" />
48 </map>
49
50 <!-- <img src =... usemap = "#id"> indicates that the --> Assigning circle to the shape
51 <!-- indicated image map is used with this image --> attribute creates a circle, with
52 <img src = "deitel.gif" width = "200" height = "144" a center and radius specified
53 alt = "Deitel logo" usemap = "#picture" />
54 </p> by the coords attribute.
55 </body>
56 </html>

The image map assigned to the usemap The # in front of the name of the image map
attribute will be used with the image. 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 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Main.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 5.8: main.html -->
6 <!-- <meta> tag -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml"> The meta element provides
9 <head>
10 <title>Internet and WWW How to Program - Welcome</title>
information to search
11 engines about the document.
12 <!-- <meta> tags give search engines information -->
13 <!-- they need to catalog your site -->
14 <meta name = "keywords" content = "Webpage, design,
15 XHTML, tutorial, personal, help, index, form, The name attribute describes
16 contact, feedback, list, links, frame, deitel" /> the type of meta element.
17
18 <meta name = "description" content = "This Web site will
19 help you learn the basics of XHTML and Webpage design
20 through the use of interactive examples and
21 instruction." />
22
23 </head> The content attribute provides
24
25 <body> the information search engines
26 use to catalog pages.
27 <h1>Welcome to Our Web Site!</h1>
28
29 <p>We have designed this site to teach about the wonders
30 of <strong><em>XHTML</em></strong>. <em>XHTML</em> is
31 better equipped than <em>HTML</em> to represent complex
32 data on the Internet. <em>XHTML</em> takes advantage of
33 XML’s strict syntax to ensure well-formedness. Soon you
34 will know about many of the great new features of
35 <em>XHTML.</em></p> 51
36
37 <p>Have Fun With the Site!</p>
Main.html
38
39 </body>
40 </html>

52
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
Index.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4
5 <!-- Fig. 5.9: index.html -->
6 <!-- XHTML Frames I -->
7 The frameset element informs the
8 <html xmlns = "http://www.w3.org/1999/xhtml"> browser that the page contains frames.
9 <head>
10 <title>Internet and WWW How to Program - Main</title>
11 <meta name = "keywords" content = "Webpage, design,
12 XHTML, tutorial, personal, help, index, form,
13 contact, feedback, list, links, frame, deitel" />
14
15 <meta name = "description" content = "This Web site will
16 help you learn the basics of XHTML and Web page design
17 through the use of interactive examples
18 and instruction." /> The cols attribute gives the width of
19 each frame. The first vertical frame
20 </head> created is 110 pixels from the left of
21
22 <!-- The <frameset> tag sets the frame dimensions the browser. The second vertical
-->
23 <frameset cols = "110,*"> frame fills the rest of the browser, as
24 indicated by the * value.
25 <!-- Individual frame elements specify which pages -->
26 <!-- appear in a given frame -->
27 <frame name = “leftframe" src = "nav.html" />
28 <frame name = "main" src = "main.html" />
29

Nav.html is loaded into the left frame and


The frame element loads documents main.html is loaded into the right frame.
into the frameset. The src attribute
indicates the document to be loaded. 53
30 <noframes>
31 <p>This page uses frames, but your browser does not
Index.html
32 support them.</p>
33
34 <p>Please, <a href = "nav.html">follow this link to
35 browse our site without frames</a>.</p>
36 </noframes>
37 The noframes element provides an option
38 </frameset>
39 </html> for browsers that do not display frames.

Left frame Right frame


(leftframe) (main)

54
Program Output

When Header Examples


is selected, the document
it links to is displayed in
the right frame.

55
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Nav.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig. 5.10: nav.html -->
6 <!-- Using images as link anchors -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9
10 <head>
11 <title>Internet and WWW How to Program - Navigation Bar
12 </title>
The target attribute specifies
13 </head>
14 where the document linked by
15 <body> the anchor should display.
16
17 <p>
18 <a href = "links.html" target = "main">
19 <img src = "buttons/links.jpg" width = "65"
20 height = "50" alt = "Links Page" />
21 </a><br /> The document will open in
22 the frame called main.
23 <a href = "list.html" target = "main">
24 <img src = "buttons/list.jpg" width = "65"
25 height = "50" alt = "List Example Page" />
26 </a><br />
27
28 <a href = "contact.html" target = "main">
29 <img src = "buttons/contact.jpg" width = "65"
30 height = "50" alt = "Contact Page" />
31 </a><br />
32

56
33 <a href = "header.html" target = "main">
34 <img src = "buttons/header.jpg" width = "65"
Nav.html
35 height = "50" alt = "Header Page" />
36 </a><br />
37
38 <a href = "table1.html" target = "main">
39 <img src = "buttons/table.jpg" width = "65"
40 height = "50" alt = "Table Page" />
41 </a><br />
42
43 <a href = "form.html" target = "main">
44 <img src = "buttons/form.jpg" width = "65"
45 height = "50" alt = "Feedback Form" />
46 </a><br />
47 </p>
48
49 </body>
50 </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 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
Index2.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4
5 <!-- Fig. 5.11: index2.html -->
6 <!-- XHTML Frames II -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Main</title>
11
12 <meta name = "keywords" content = "Webpage, design,
The vertical frame on the right is
13 XHTML, tutorial, personal, help, index, form, divided into two horizontal frames.
14 contact, feedback, list, links, frame, deitel" />
15
16 <meta name = "description" content = "This Web site will
17 help you learn the basics of XHTML and Web page design
18 through the use of interactive examples
19 and instruction." />
20 The rows attribute works in a similar manner
21 </head> to the cols attribute, except the rows attribute
22
23 <frameset cols = "110,*"> gives the height of each frame.
24 <frame name = "nav" src = "nav.html" />
25
26 <!-- Nested framesets are used to change the -->
27 <!-- formatting and spacing of the frameset -->
28 <!-- as a whole -->
29 <frameset rows = "175,*">
30 <frame name = "picture" src = "picture.html" />
31 <frame name = "main" src = "main.html" />
32 </frameset>
33

58
34 <noframes>
35 <p>This page uses frames, but your browser does not
Index2.html
36 support them.</p>
37
38 <p>Please, <a href = "nav.html">follow this link to
39 browse our site without frames</a>.</p>
40 </noframes>
41
42 </frameset>
43 </html>
Program Output

The nested frame element splits


the right vertical frame into two
horizontal frames.

59
XHTML
Cascading Style Sheets (CSS)

60
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Inline.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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> Thestyle attribute specifies the style for an element.
12 Some style properties are font-size and color.
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
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>

61
Program Output

62
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Declared.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 Use the style element to
12 <!-- This begins the style sheet section. --> create an embedded CSS.
13 <style type = "text/css">
14
15 em { background-color: #8000ff;
16 color: white }
17 Styles placed in the head apply
18 h1 { font-family: arial, sans-serif }
19 to all elements in the document.
20 p { font-size: 14pt }
21
22 .special { color: blue }
23
24 </style> More style properties include font
25 </head> type (font-family) and background
26
color (background-color).

A style class named special is created. Style classes inherit the


style properties of the style sheet in addition to their own.

63
27 <body>
28
Declared.html
29 <!-- This class attribute applies the .blue 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 The styles associated with the
39 programming, and Object Technology.</p>
40
special class are applied to the
41 <h1>Clients</h1> header and paragraph elements.
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
51 </body>
52 </html>

64
Program Output

Notice the styles defined


in the CSS are applied to
all paragraphs, headers,
and bolded text.

Elements that have the


special class applied have
the class’s styles as well as
the CSS styles applied.

65
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Advanced.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig 6.3: advanced.html -->
6 <!-- More advanced style sheets -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml"> A style class is defined specifically for a
9 <head>
10 <title>More Styles</title> elements. The style is applied if the a
11 element’s class attribute is set to nodec.
12 <style type = "text/css">
13
14 a.nodec { text-decoration: none }
15 The hover psuedoclass defined for the a
16 a:hover { text-decoration: underline;
17 color: red;
element is activated dynamically when the
18 background-color: #ccffcc } user rolls over the a element with a mouse.
19
20 li em { color: red;
21 font-weight: bold }
22 The em element for li elements is
23 ul { margin-left: 75px } defined to have bold red font.
24
25 ul ul { text-decoration: underline;
26 margin-left: 15px }
27
28 </style> Elements of an unordered list in another
29 </head> nested unordered list will be underlined and
30
have a left-hand margin of 15 pixels.
31 <body>
32
33 <h1>Shopping list for <em>Monday</em>:</h1>
34
66
35 <ul>
36 <li>Milk</li>
Advanced.html
37 <li>Bread
38 <ul>
39 <li>White bread</li>
40 <li>Rye bread</li>
41 <li>Whole wheat bread</li>
42 </ul> According to the CSS defined, the three
43 </li> elements listed under bread should be
44 <li>Rice</li>
45 <li>Potatoes</li> underlined and indented 15 pixels from
46 <li>Pizza <em>with mushrooms</em></li> the left margin when rendered.
47 </ul>
48
49 <p><a class = "nodec" href = "http://www.food.com">
50 Go to the Grocery store</a></p>
51
52 </body>
53 </html>

The text placed between the em tags should


be bolded and colored red when rendered.
When the user scrolls over the text anchoring the
link, the hover class will be activated and the text
will change to the style defined by the hover class.

67
Program Output

The elements in the nested unordered


list are underlined and indented 15
pixels from the left margin.

By applying the hover psuedoclass to


this anchor, the anchor’s background and
text color changes when the use r rolls
over it with the mouse.

68
1 /* Fig. 6.4: styles.css */
2 /* An external stylesheet */
Styles.css
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 }

69
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" External.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 6.5: external.html -->
6 <!-- Linking external style sheets -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml"> The link element is used to
9 <head> reference an external style sheet.
10 <title>Linking External Style Sheets</title>
11 <link rel = "stylesheet" type = "text/css"
12 href = "styles.css" />
13 </head>
14
15 <body> The type attribute
16
17 <h1>Shopping list for <em>Monday</em>:</h1>
defines the MIME type.
18 <ul>
19 <li>Milk</li>
20 <li>Bread
21 <ul>
22 <li>White bread</li>
23 <li>Rye bread</li> The rel attribute is used to
24 <li>Whole wheat bread</li> define the linking relationship.
25 </ul>
26 </li>
27 <li>Rice</li>
28 <li>Potatoes</li>
29 <li>Pizza <em>with mushrooms</em></li>
30 </ul>
31

70
32 <p>
33 <a href = "http://www.food.com">Go to the Grocery store</a>
External.html
34 </p>
35
36 </body>
37 </html>
Program Output

The documents rendered with an


external CSS should be the same as
those rendered with an internal CSS.

71
W3C CSS Validation Service

Validating a CSS document. (Courtesy of World Wide Web Consortium (W3C).)


72
W3C CSS Validation Service

CSS validation results. (Courtesy of World Wide Web Consortium (W3C).)

73
LAYERING IMAGES

74
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Positioning.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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> The position property of the style element
12 allows for positioning of an element.
13 <body>
14
15 <p><img src = "i.gif" style = "position: absolute;
16 top: 0px; left: 0px; z-index: 1" alt =
17 "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 The z-index property allows layering of
24 </body> multiple images.The images are layered
25 </html>
such that images with lower z-indexes are
placed under images with higher ones.

75
Program Output

The effect of the z-index


property is several images
layered on top of one another.

76
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. 6.9: positioning2.html --> Positioning2.html
6 <!-- Relative positioning of elements -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Relative Positioning</title> Relative positioning places
11
12 <style type = "text/css"> an element relative to a
13 reference point on the page.
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 } For instance, when this class is applied the
23
24 .sub { position: relative;
element will be displayed –1cm relative to
25 bottom: -1ex } the left of where it would be placed.
26
27 .shiftleft { position: relative;
28 left: -1ex }
29
30 .shiftright { position: relative;
31 right: -1ex }
32
33 </style>
34 </head>
77
35
36 <body>
Positioning2.htm
37 l
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>
Program Output

The text in red has the shiftleft class


applied, and is shifted left relative to
where it would have initially been placed.

78
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Background.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 6.10: background.html -->
6 <!-- Adding background images and indentation -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml"> The background-image property assigns
9 <head> a background to the body of the page.
10 <title>Background Images</title>
11
12 <style type = "text/css">
13
14 body { background-image: url(logo.gif);
The background–position property assigns
15 background-position: bottom right; a location for the image on the page.
16 background-repeat: no-repeat;
17 background-attachment: fixed; }
18
19 p { font-size: 18pt; If set to repeat, the background-
20 color: #aa5588; repeat property will tile the image
21 text-indent: 1em;
22 font-family: arial, sans-serif; }
as the background.
23
24 .dark { font-weight: bold; }
25
26 </style> The value of the background-
27 </head>
28 attachment property determines if the
image moves as the user scrolls the page.

The font format specified will


be applied to all p elements.

79
29 <body>
30
Background.html
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>
Program Output

Note that no formatting needed


to be set in the p element itself
because it has already been
defined in the CSS.

80
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Width.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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> Elements placed between div tags will be set on
11 their own line with a margin below and after it.
12 <style type = "text/css">
13
14 div { background-color: #ffccff;
15 margin-bottom: .5em }
16 </style>
17 The width and height attributes of style allow
18 </head> the user to indicate the percentage of the width
19 and height of the screen the element can occupy.
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>
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

81
32 <div style = "width: 20%; height: 30%; overflow: scroll">
33 This box is only twenty percent of
Width.html
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>
Program Output

This will set the overflow attribute to


add scroll bars for text that overflows.

82
MIXING IMAGES AND TEXT

83
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Floating.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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% } The float property allows you to move an element to
18 one side of the screen such that other content in the
19 p { text-align: justify; } document then flows around the floated element.
20
21 </style>
22
23 </head>
24
25 <body> The margin property specifies the
26
distance between the edge of the element
27 <div style = "text-align: center">
28 Deitel & Associates, Inc.</div> and any other element on the page.
29
30 <div style = "float: right; margin: .5em;
31 text-align: right">
32 Corporate Training and Publishing</div>
33

84
34 <p>Deitel & Associates, Inc. is an internationally
35 recognized corporate training and publishing organization
Floating.html
36 specializing in programming languages, Internet/World
37 Wide Web technology and object technology education.
38 Deitel & Associates, Inc. is a member of the World Wide
39 Web Consortium. The company provides courses on Java,
40 C++, Visual Basic, C, Internet and World Wide Web
41 programming, and Object Technology.</p>
42
Padding is the distance between
43 <div style = "float: right; padding: .5em; the content inside an element
44 text-align: right"> and the element’s border.
45 Leading-edge Programming Textbooks</div>
46
47 <p>The company's clients include many Fortune 1000
48 companies, government agencies, branches of the military
49 and business organizations. 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.<span style = "clear: right"> Here is some
55 unflowing text. Here is some unflowing text.</span></p>
56
57 </body>
58 </html>

The clear property can be used to interrupt


the flow of text around a floating element.

85
Program Output

A floating element
with 5 em padding.

86
Test Flow and Box Model

Margin

Border
Content
Padding

Box model for block-level elements.

87
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Borders.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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; The border-width property is the
17 margin-bottom: 1em; width of the border around an element.
18 padding: .5em }
19
20 .thick { border-width: thick }
21
22 .medium { border-width: medium } The border-style property
23
24 .thin { border-width: thin }
is the style of border used.
25
26 .groove { border-style: groove }
27
28 .inset { border-style: inset }
29 The border-color property
30 .outset { border-style: outset } is the color of the border.
31
32 .red { border-color: red }
33
34 .blue { border-color: blue }
88
35
36 </style>
Borders.html
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> Program Output

A sampling of the different types


of borders that can be specified.

89
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Borders2.html
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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%; Specifying a border directly through
21 padding: .3em } the style attribute of the div element.
22 </style>
23 </head>
24
25 <body>
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> 90
Program Output

91
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. 6.16: user_absolute.html --> User_absolute.html
6 <!-- User styles -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>User Styles</title> Author defined style sheets are
11 ones defined within the page.
12 <style type = "text/css">
13
14 .note { font-size: 9pt }
15
16 </style>
17 </head>
18 By using absolute measurement (pt in this case) the
19 <body> developer will override user defined style sheets.
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>
24
25 </body>
26 </html>

92
Program Output

Developer defined class applied to this p


element decrease the font size of the text.

Styles set by the author have higher precedence


over the styles set by user style sheets.

93
1 /* Fig. 6.17: userstyles.css */
2 /* A user stylesheet */
Userstyles.css
3
4 body { font-size: 20pt;
5 color: yellow;
6 background-color: #000080 }

User defined style sheets are usually external.


A user’s style sheet is not linked to a page,
they are set in the browser’s options.

94
User Style Sheets

Setting the user’s style sheet in IE.

Adding a user style sheet in Internet Explorer 5.5.

95
User Style Sheets

Web page with user styles applied.

96
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. 6.20: user_relative.html --> User_relative.html
6 <!-- User styles -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml"> By using relative measurements (in this
9 <head> case, em), the developer will not override
10 <title>User Styles</title> user defined style sheet formats.
11
12 <style type = "text/css">
13
14 .note { font-size: .75em }
15
16 </style> When rendered the font size displayed will
17 </head>
18
be .75 percent times the value of the font
19 <body> size defined in the user style sheet.
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>
24
25 </body>
26 </html>

97
Program Output

Output before relative measurement is used to define the font in the document.

98
User Style Sheets

Using relative measurements in author styles.

Output when relative measurement is used. By using relative


measurements the user defined styles are not overwritten.

99
END OF LECTURE

100

You might also like