Introduction to XHTML: Part 2 - Ostravská univerzitahunka/vyuka/TechInter/ti_2/XHTML_2.pdf ·...
52
Introduction to XHTML: Part 2 Outline 2.1 Introduction 2.2 Basic XHTML Tables 2.3 Intermediate XHTML Tables and Formatting 2.4 Basic XHTML Forms 2.5 More Complex XHTML Forms 2.6 Internal Linking 2.7 Creating and Using Image Maps 2.8 meta meta meta meta Elements 2.9 frameset frameset frameset frameset Element 2.10 Nested frameset frameset frameset framesets 2.11 Web Resources
Transcript of Introduction to XHTML: Part 2 - Ostravská univerzitahunka/vyuka/TechInter/ti_2/XHTML_2.pdf ·...
Introduction to XHTML: Part 2
Outline2.1 Introduction2.2 Basic XHTML Tables2.3 Intermediate XHTML Tables and Formatting2.4 Basic XHTML Forms2.5 More Complex XHTML Forms2.6 Internal Linking2.7 Creating and Using Image Maps2.8 metametametameta Elements2.9 framesetframesetframesetframeset Element2.10 Nested framesetframesetframesetframesets2.11 Web Resources
Objectives
• In this lesson, you will learn:– To be able to create tables with rows and columns of data.
– To be able to control table formatting.
– To be able to create and use forms.
– To be able to create and use image maps to aid in Web-page navigation.
– To be able to make Web pages accessible to search engines using meta elements.
– To be able to use the frameset element to display multiple Web pages in a single browser window.
2.1 Introduction
• Tables– Present information
• Forms– Collect information from visitor
• Internal linking and image maps– Enhance Web page navigation
• Frames– Display multiple documents in the browser
2.2 Basic XHTML Tables
• Organize data into rows and columns• table element
– Attribute border• Specifies the table’s border width in pixels
– Attribute summary• Describes the table’s contents
– Attribute caption• Describes the table’s content and helps text-based browsers interpret
table data
– Head section (header cell, defined with a thead element)• Contains header information such as column names• tr element (defines an individual table row)• th element (defines the columns in the head section)
– Foot section (defined with a tfoot element)– Table body (defined with a tbody element)– Data cells (defined with td element)
OutlineOutline
table.html(1 of 3)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 5.1: table1.html Fig. 5.1: table1.html Fig. 5.1: table1.html Fig. 5.1: table1.html -------->>>>
6 <!<!<!<!-------- Creating a basic table Creating a basic table Creating a basic table Creating a basic table -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "h"h"h"http://www.w3.org/1999/xhtml"ttp://www.w3.org/1999/xhtml"ttp://www.w3.org/1999/xhtml"ttp://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>A simple XHTML tableA simple XHTML tableA simple XHTML tableA simple XHTML table</title></title></title></title>
11 </head> </head> </head> </head>
12
13 <body> <body> <body> <body>
14
15 <! <! <! <!-------- the <table> tag opens a table the <table> tag opens a table the <table> tag opens a table the <table> tag opens a table -------->>>>
16 <table border = <table border = <table border = <table border = "1""1""1""1" width = width = width = width = "40%""40%""40%""40%"
17 summary = summary = summary = summary = "This table provides information about"This table provides information about"This table provides information about"This table provides information about
18 the price of fruit"the price of fruit"the price of fruit"the price of fruit">>>>
19
20 <! <! <! <!-------- the <caption> tag summarizes the table's the <caption> tag summarizes the table's the <caption> tag summarizes the table's the <caption> tag summarizes the table's -------->>>>
21 <! <! <! <!-------- contents (this helps the vi contents (this helps the vi contents (this helps the vi contents (this helps the visually impaired) sually impaired) sually impaired) sually impaired) -------->>>>
22 <caption><strong><caption><strong><caption><strong><caption><strong>Price of FruitPrice of FruitPrice of FruitPrice of Fruit</strong></caption></strong></caption></strong></caption></strong></caption>
23
OutlineOutline
table.html(2 of 3)
24 <! <! <! <!-------- the <thead> is the first section of a table the <thead> is the first section of a table the <thead> is the first section of a table the <thead> is the first section of a table -------->>>>
25 <! <! <! <!-------- it formats the table header area it formats the table header area it formats the table header area it formats the table header area -------->>>>
26 <thead><thead><thead><thead>
27 <tr><tr><tr><tr> <!<!<!<!-------- <tr> inserts a table row <tr> inserts a table row <tr> inserts a table row <tr> inserts a table row -------->>>>
28 <th><th><th><th>FruitFruitFruitFruit</th></th></th></th> <!<!<!<!-------- insert a heading cell insert a heading cell insert a heading cell insert a heading cell -------->>>>
29 <th><th><th><th>PricePricePricePrice</th></th></th></th>
30 </tr></tr></tr></tr>
31 </thead></thead></thead></thead>
32
33 <! <! <! <!-------- the <tfoot> is the last section of a table the <tfoot> is the last section of a table the <tfoot> is the last section of a table the <tfoot> is the last section of a table -------->>>>
34 <! <! <! <!-------- it it it it formats the table footer formats the table footer formats the table footer formats the table footer -------->>>>
35 <tfoot><tfoot><tfoot><tfoot>
36 <tr><tr><tr><tr>
37 <th><th><th><th>TotalTotalTotalTotal</th></th></th></th>
38 <th><th><th><th>$3.75$3.75$3.75$3.75</th></th></th></th>
39 </tr></tr></tr></tr>
40 </tfoot></tfoot></tfoot></tfoot>
41
42 <! <! <! <!-------- all table content is enclosed all table content is enclosed all table content is enclosed all table content is enclosed -------->>>>
43 <! <! <! <!-------- within the <tbody> within the <tbody> within the <tbody> within the <tbody> -------->>>>
44 <tbody><tbody><tbody><tbody>
45 <tr><tr><tr><tr>
46 <td><td><td><td>AppleAppleAppleApple</td></td></td></td> <!<!<!<!-------- insert a data cell insert a data cell insert a data cell insert a data cell -------->>>>
47 <td><td><td><td>$0.25$0.25$0.25$0.25</td></td></td></td>
48 </tr></tr></tr></tr>
OutlineOutline
table.html(3 of 3)
49
50 <tr> <tr> <tr> <tr>
51 <td> <td> <td> <td>OrangeOrangeOrangeOrange</td></td></td></td>
52 <td><td><td><td>$0.50$0.50$0.50$0.50</td></td></td></td>
53 </tr> </tr> </tr> </tr>
54
55 <tr> <tr> <tr> <tr>
56 <td><td><td><td>BananaBananaBananaBanana</td></td></td></td>
57 <td><td><td><td>$1.00$1.00$1.00$1.00</td></td></td></td>
58 </tr> </tr> </tr> </tr>
59
60 <tr> <tr> <tr> <tr>
61 <td><td><td><td>PineapplePineapplePineapplePineapple</td></td></td></td>
62 <td><td><td><td>$2.00$2.00$2.00$2.00</td></td></td></td>
63 </tr> </tr> </tr> </tr>
64 </tbody></tbody></tbody></tbody>
65
66 </table></table></table></table>
67
68 </body> </body> </body> </body>
69 </html> </html> </html> </html>
2.3 Intermediate XHTML Tables and Formatting
• Element colgroup– Groups and formats columns
• Element col– Attribute align
• Determines the alignment of text in the column
– Attribute span• Determines how many columns the col element formats
• rowspan and colspan
– Specify the number of rows or columns occupied by a cell
– valign
• Aligns data vertically
• One of the four values: “top”, “ middle”, “ bottom”, “baseline”
OutlineOutline
table2.html(1 of 4)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 5.2: table2.html Fig. 5.2: table2.html Fig. 5.2: table2.html Fig. 5.2: table2.html -------->>>>
6 <!<!<!<!-------- Intermediate table design Intermediate table design Intermediate table design Intermediate table design -------->>>>
7
8 <html xmlns <html xmlns <html xmlns <html xmlns = = = = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program ---- Tables Tables Tables Tables</title></title></title></title>
11 </head> </head> </head> </head>
12
13 <body> <body> <body> <body>
14
15 <h1><h1><h1><h1>Table Example PageTable Example PageTable Example PageTable Example Page</h1></h1></h1></h1>
16
17 <table border = <table border = <table border = <table border = "1""1""1""1">>>>
18 <caption><caption><caption><caption>Here is a more complex sample table.Here is a more complex sample table.Here is a more complex sample table.Here is a more complex sample table.</caption></caption></caption></caption>
19
20 <! <! <! <!-------- <colgroup> and <col> tags are used to <colgroup> and <col> tags are used to <colgroup> and <col> tags are used to <colgroup> and <col> tags are used to -------->>>>
21 <! <! <! <!-------- format entire columns format entire columns format entire columns format entire columns -------->>>>
22 <colgroup><colgroup><colgroup><colgroup>
23
OutlineOutline
table2.html(2 of 4)
24 <! <! <! <!-------- span attribute determines how many columns span attribute determines how many columns span attribute determines how many columns span attribute determines how many columns -------->>>>
25 <! <! <! <!-------- the <col> tag affects the <col> tag affects the <col> tag affects the <col> tag affects -------->>>>
26 <col align = <col align = <col align = <col align = "right" "right" "right" "right" span =span =span =span = "1" "1" "1" "1" />/>/>/>
27 </colgroup></colgroup></colgroup></colgroup>
28
29 <thead><thead><thead><thead>
30
31 <! <! <! <!-------- rowspans and colspans merge the specified rowspans and colspans merge the specified rowspans and colspans merge the specified rowspans and colspans merge the specified -------->>>>
32 <! <! <! <!-------- number of cells vertically or horizontally number of cells vertically or horizontally number of cells vertically or horizontally number of cells vertically or horizontally -------->>>>
33 <tr><tr><tr><tr>
34
35 <! <! <! <!-------- merge two rows merge two rows merge two rows merge two rows -------->>>>
36 <th rowspan = <th rowspan = <th rowspan = <th rowspan = "2""2""2""2">>>>
37 <img src = <img src = <img src = <img src = "camel.gif""camel.gif""camel.gif""camel.gif" width = width = width = width = "205""205""205""205"
38 height = height = height = height = "167" "167" "167" "167" alt = alt = alt = alt = "Picture of a camel" "Picture of a camel" "Picture of a camel" "Picture of a camel" />/>/>/>
39 </th></th></th></th>
40
41 <! <! <! <!-------- merge four columns merge four columns merge four columns merge four columns -------->>>>
42 <th colspan = <th colspan = <th colspan = <th colspan = "4""4""4""4" valign = valign = valign = valign = "top""top""top""top">>>>
43 <h1><h1><h1><h1>Camelid comparisonCamelid comparisonCamelid comparisonCamelid comparison</h1><br /></h1><br /></h1><br /></h1><br />
44 <p><p><p><p>Approximate as of 9/2002Approximate as of 9/2002Approximate as of 9/2002Approximate as of 9/2002</p></p></p></p>
45 </th></th></th></th>
46 </tr></tr></tr></tr>
47
OutlineOutline
table2.html(3 of 4)
48 <tr valign = <tr valign = <tr valign = <tr valign = "bottom""bottom""bottom""bottom">>>>
49 <th><th><th><th># of Humps# of Humps# of Humps# of Humps</th></th></th></th>
50 <th><th><th><th>Indigenous regionIndigenous regionIndigenous regionIndigenous region</th></th></th></th>
51 <th><th><th><th>Spits?Spits?Spits?Spits?</th></th></th></th>
52 <th><th><th><th>Produces Wool?Produces Wool?Produces Wool?Produces Wool?</th></th></th></th>
53 </tr></tr></tr></tr>
54
55 </thead></thead></thead></thead>
56
57 <tbody><tbody><tbody><tbody>
58
59 <tr><tr><tr><tr>
60 <th><th><th><th>Camels (bactrian)Camels (bactrian)Camels (bactrian)Camels (bactrian)</th></th></th></th>
61 <td><td><td><td>2222</td></td></td></td>
62 <td><td><td><td>Africa/AsiaAfrica/AsiaAfrica/AsiaAfrica/Asia</td></td></td></td>
63 <td><td><td><td>YesYesYesYes</td></td></td></td>
64 <td><td><td><td>YesYesYesYes</</</</td>td>td>td>
65 </tr></tr></tr></tr>
66
67 <tr><tr><tr><tr>
68 <th><th><th><th>LlamasLlamasLlamasLlamas</th></th></th></th>
69 <td><td><td><td>1111</td></td></td></td>
70 <td><td><td><td>Andes MountainsAndes MountainsAndes MountainsAndes Mountains</td></td></td></td>
71 <td><td><td><td>YesYesYesYes</td></td></td></td>
72 <td><td><td><td>YesYesYesYes</td></td></td></td>
OutlineOutline
table2.html4 of 4
73 </tr></tr></tr></tr>
74
75 </tbody></tbody></tbody></tbody>
76
77 </table></table></table></table>
78
79 </body> </body> </body> </body>
80 </html></html></html></html>
2.4 Basic XHTML Forms
• Element form– Attribute method
• Specifies how the form’s data is sent to Web server
• method = “post”
– Appends form data to the browser request
• method = “get”
– Appends form data directly to the end of the URL
– Attribute action• Specifies the URL of a script on the Web server
– input
• Specifies data to provide to the script that processes the form
OutlineOutline
form.html(1 of 3)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 5.3: form.html Fig. 5.3: form.html Fig. 5.3: form.html Fig. 5.3: form.html -------->>>>
6 <!<!<!<!-------- Form Design Example 1 Form Design Example 1 Form Design Example 1 Form Design Example 1 -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http:"http:"http:"http://www.w3.org/1999/xhtml"//www.w3.org/1999/xhtml"//www.w3.org/1999/xhtml"//www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program ---- Forms Forms Forms Forms</title></title></title></title>
11 </head> </head> </head> </head>
12
13 <body> <body> <body> <body>
14
15 <h1><h1><h1><h1>Feedback FormFeedback FormFeedback FormFeedback Form</h1></h1></h1></h1>
16
17 <p><p><p><p>Please fill out this form to help Please fill out this form to help Please fill out this form to help Please fill out this form to help
18 us improve our site. us improve our site. us improve our site. us improve our site.</p></p></p></p>
19
20 <! <! <! <!-------- this tag starts the form, gives the this tag starts the form, gives the this tag starts the form, gives the this tag starts the form, gives the -------->>>>
21 <! <! <! <!-------- method of sending information and the method of sending information and the method of sending information and the method of sending information and the -------->>>>
22 <! <! <! <!-------- location of form scripts location of form scripts location of form scripts location of form scripts -------->>>>
23 <form method = <form method = <form method = <form method = "post""post""post""post" actionactionactionaction = = = = "/cgi"/cgi"/cgi"/cgi----bin/formmail"bin/formmail"bin/formmail"bin/formmail">>>>
24
OutlineOutline
form.html(2 of 3)
25 <p><p><p><p>
26 <! <! <! <!-------- hidden inputs contain non hidden inputs contain non hidden inputs contain non hidden inputs contain non----visual visual visual visual -------->>>>
27 <! <! <! <!-------- information information information information -------->>>>
28 <input type = <input type = <input type = <input type = "hidden""hidden""hidden""hidden" name = name = name = name = "recipient""recipient""recipient""recipient"
29 value = value = value = value = "[email protected]" "[email protected]" "[email protected]" "[email protected]" />/>/>/>
30 <input type = <input type = <input type = <input type = "hidden""hidden""hidden""hidden" name = name = name = name = "subject""subject""subject""subject"
31 value = value = value = value = "Feedback Form" "Feedback Form" "Feedback Form" "Feedback Form" />/>/>/>
32 <input type = <input type = <input type = <input type = "hidden""hidden""hidden""hidden" name =name =name =name = "redirect""redirect""redirect""redirect"
33 value = value = value = value = "main.html" "main.html" "main.html" "main.html" />/>/>/>
34 </p> </p> </p> </p>
35
36 <!<!<!<!-------- <input type = "text"> inserts a text box <input type = "text"> inserts a text box <input type = "text"> inserts a text box <input type = "text"> inserts a text box -------->>>>
37 <p><label><p><label><p><label><p><label>Name:Name:Name:Name:
38 <input name = <input name = <input name = <input name = "name""name""name""name" type = type = type = type = "text""text""text""text" size = size = size = size = "25""25""25""25"
39 maxlength =maxlength =maxlength =maxlength = "30""30""30""30" />/>/>/>
40 </label></p></label></p></label></p></label></p>
41
42 <p> <p> <p> <p>
43 <!<!<!<!-------- input types "submit" and "reset" insert input types "submit" and "reset" insert input types "submit" and "reset" insert input types "submit" and "reset" insert -------->>>>
44 <!<!<!<!-------- buttons for submitting and clearing the buttons for submitting and clearing the buttons for submitting and clearing the buttons for submitting and clearing the -------->>>>
45 <!<!<!<!-------- form's form's form's form's contents contents contents contents -------->>>>
46 <input type =<input type =<input type =<input type = "submit""submit""submit""submit" value =value =value =value =
47 "Submit Your Entries" "Submit Your Entries" "Submit Your Entries" "Submit Your Entries" />/>/>/>
48 <input type =<input type =<input type =<input type = "reset" "reset" "reset" "reset" value =value =value =value =
49 "Clear Your Entries" "Clear Your Entries" "Clear Your Entries" "Clear Your Entries" />/>/>/>
50 </ </ </ </p>p>p>p>
OutlineOutline
form.html(3 of 3)
51
52 </form></form></form></form>
53
54 </body></body></body></body>
55 </html></html></html></html>
2.5 More Complex XHTML Forms• Element textarea
– Inserts a multiline text box (text area)– Attribute rows
• Specifies the number of rows
– Attribute cols• Specifies the number columns
– Input “password”• Inserts a password box with the specified size
• Element checkbox– Enable users to select from a set of options
• Element select– Provides a drop-down list of items
• Element option– Adds items to the drop-down list– Attribute selected
• Specifies which item initially is displayed as the selected item
OutlineOutline
form2.html(1 of 4)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 5.4: form2.html Fig. 5.4: form2.html Fig. 5.4: form2.html Fig. 5.4: form2.html -------->>>>
6 <!<!<!<!-------- Form Design Example 2 Form Design Example 2 Form Design Example 2 Form Design Example 2 -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http:"http:"http:"http://www.w3.org/1999/xhtml"//www.w3.org/1999/xhtml"//www.w3.org/1999/xhtml"//www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program ---- Forms Forms Forms Forms</title></title></title></title>
11 </head> </head> </head> </head>
12
13 <body> <body> <body> <body>
14
15 <h1><h1><h1><h1>Feedback FormFeedback FormFeedback FormFeedback Form</h1></h1></h1></h1>
16
17 <p><p><p><p>Please fill out this form to help Please fill out this form to help Please fill out this form to help Please fill out this form to help
18 us improve our site. us improve our site. us improve our site. us improve our site.</p></p></p></p>
19
20 <form method = <form method = <form method = <form method = "post""post""post""post" action = action = action = action = "/cgi"/cgi"/cgi"/cgi----bin/formmail"bin/formmail"bin/formmail"bin/formmail">>>>
21
OutlineOutline
form2.html(2 of 4)
22 <p><p><p><p>
23 <input type = <input type = <input type = <input type = "hidden""hidden""hidden""hidden" name = name = name = name = "recipient""recipient""recipient""recipient"
24 value = value = value = value = "[email protected]" "[email protected]" "[email protected]" "[email protected]" />/>/>/>
25 <input type = <input type = <input type = <input type = "hidden""hidden""hidden""hidden" name = name = name = name = "subject""subject""subject""subject"
26 value = value = value = value = "Feedback Form" "Feedback Form" "Feedback Form" "Feedback Form" />/>/>/>
27 <<<<input type = input type = input type = input type = "hidden""hidden""hidden""hidden" name =name =name =name = "redirect""redirect""redirect""redirect"
28 value =value =value =value = "main.html" "main.html" "main.html" "main.html" />/>/>/>
29 </p></p></p></p>
30
31 <p><label><p><label><p><label><p><label>Name:Name:Name:Name:
32 <input name = <input name = <input name = <input name = "name""name""name""name" type =type =type =type = "text""text""text""text" size =size =size =size = "25" "25" "25" "25" />/>/>/>
33 </label></p></label></p></label></p></label></p>
34
35 <!<!<!<!-------- <textarea> creates a multiline textbox <textarea> creates a multiline textbox <textarea> creates a multiline textbox <textarea> creates a multiline textbox -------->>>>
36 <p><label><p><label><p><label><p><label>Comments:Comments:Comments:Comments:<br /><br /><br /><br />
37 <textarea name = <textarea name = <textarea name = <textarea name = "comments""comments""comments""comments" rows = rows = rows = rows = "4""4""4""4" cols = cols = cols = cols = "36""36""36""36">>>>
38 Enter your comments here.Enter your comments here.Enter your comments here.Enter your comments here.
39 </t</t</t</textarea>extarea>extarea>extarea>
40 </label></p></label></p></label></p></label></p>
41
OutlineOutline
form2.html(3 of 4)
42 <! <! <! <!-------- <input type = "password"> inserts a <input type = "password"> inserts a <input type = "password"> inserts a <input type = "password"> inserts a -------->>>>
43 <! <! <! <!-------- textbox whose display is masked with textbox whose display is masked with textbox whose display is masked with textbox whose display is masked with -------->>>>
44 <! <! <! <!-------- asterisk characters asterisk characters asterisk characters asterisk characters -------->>>>
45 <p><label><p><label><p><label><p><label>EEEE----mail Address: mail Address: mail Address: mail Address:
46 <input name<input name<input name<input name = = = = "email""email""email""email" type = type = type = type = "password""password""password""password"
47 size = size = size = size = "25" "25" "25" "25" />/>/>/>
48 </label></p></label></p></label></p></label></p>
49
50 <p><p><p><p>
51 <strong> <strong> <strong> <strong>Things you liked:Things you liked:Things you liked:Things you liked:</strong><br /></strong><br /></strong><br /></strong><br />
52
53 <label><label><label><label>Site designSite designSite designSite design
54 <input name = <input name = <input name = <input name = "thingsliked""thingsliked""thingsliked""thingsliked" type =type =type =type = "checkbox""checkbox""checkbox""checkbox"
55 value =value =value =value = "Design" "Design" "Design" "Design" /></label>/></label>/></label>/></label>
56
57 <label><label><label><label>LinksLinksLinksLinks
58 <input name = <input name = <input name = <input name = "thingsliked" "thingsliked" "thingsliked" "thingsliked" type =type =type =type = "checkbox""checkbox""checkbox""checkbox"
59 valuevaluevaluevalue = = = = "Links" "Links" "Links" "Links" /></label>/></label>/></label>/></label>
60
61 <label><label><label><label>Ease of useEase of useEase of useEase of use
62 <input name =<input name =<input name =<input name = "thingsliked""thingsliked""thingsliked""thingsliked" type =type =type =type = "checkbox""checkbox""checkbox""checkbox"
63 value =value =value =value = "Ease" "Ease" "Ease" "Ease" /></label>/></label>/></label>/></label>
64
65 <label><label><label><label>Images Images Images Images
66 <input name = <input name = <input name = <input name = "thin"thin"thin"thingsliked"gsliked"gsliked"gsliked" type =type =type =type = "checkbox""checkbox""checkbox""checkbox"
67 value =value =value =value = "Images" "Images" "Images" "Images" /></label>/></label>/></label>/></label>
OutlineOutline
form2.html(4 of 4)
68
69 <label><label><label><label>Source codeSource codeSource codeSource code
70 <input name = <input name = <input name = <input name = "thingsliked""thingsliked""thingsliked""thingsliked" type =type =type =type = "checkbox""checkbox""checkbox""checkbox"
71 value =value =value =value = "Code" "Code" "Code" "Code" /></label>/></label>/></label>/></label>
72 </p></p></p></p>
73
74 <p><p><p><p>
75 <input type = <input type = <input type = <input type = "submit""submit""submit""submit" value =value =value =value =
76 "Submit Your Entries" "Submit Your Entries" "Submit Your Entries" "Submit Your Entries" />/>/>/>
77 <input type = <input type = <input type = <input type = "reset""reset""reset""reset" value =value =value =value =
78 "Clear Your Entries" "Clear Your Entries" "Clear Your Entries" "Clear Your Entries" />/>/>/>
79 </p></p></p></p>
80
81 </form></form></form></form>
82
83 </body></body></body></body>
84 </html></html></html></html>
OutlineOutline
form3.html(1 of 6)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 5.5: form3.html Fig. 5.5: form3.html Fig. 5.5: form3.html Fig. 5.5: form3.html -------->>>>
6 <!<!<!<!-------- Form Design Example 3 Form Design Example 3 Form Design Example 3 Form Design Example 3 -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http:"http:"http:"http://www.w3.org/1999/xhtml"//www.w3.org/1999/xhtml"//www.w3.org/1999/xhtml"//www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program ---- Forms Forms Forms Forms</title></title></title></title>
11 </head> </head> </head> </head>
12
13 <body> <body> <body> <body>
14
15 <h1><h1><h1><h1>Feedback FormFeedback FormFeedback FormFeedback Form</h1></h1></h1></h1>
16
17 <p><p><p><p>Please fill out this form to help Please fill out this form to help Please fill out this form to help Please fill out this form to help
18 us improve our site. us improve our site. us improve our site. us improve our site.</p></p></p></p>
19
20 <form method = <form method = <form method = <form method = "post""post""post""post" action = action = action = action = "/cgi"/cgi"/cgi"/cgi----bin/formmail"bin/formmail"bin/formmail"bin/formmail">>>>
21
22 <p><p><p><p>
23 <input type = <input type = <input type = <input type = "hidden""hidden""hidden""hidden" name =name =name =name = "recipient""recipient""recipient""recipient"
24 value = value = value = value = "[email protected]" "[email protected]" "[email protected]" "[email protected]" />/>/>/>
25 <input type = <input type = <input type = <input type = "hidden""hidden""hidden""hidden" name =name =name =name = "subject""subject""subject""subject"
OutlineOutline
form3.html(2 of 6)
26 value = value = value = value = "Feedback Form" "Feedback Form" "Feedback Form" "Feedback Form" />/>/>/>
27 <input type = <input type = <input type = <input type = "hidden""hidden""hidden""hidden" name =name =name =name = "redirect""redirect""redirect""redirect"
28 value = value = value = value = "main.html" "main.html" "main.html" "main.html" />/>/>/>
29 </p> </p> </p> </p>
30
31 <p><label> <p><label> <p><label> <p><label>Name: Name: Name: Name:
32 <input name = <input name = <input name = <input name = "name""name""name""name" typ typ typ type =e =e =e = "text""text""text""text" size = size = size = size = "25" "25" "25" "25" />/>/>/>
33 </label></p> </label></p> </label></p> </label></p>
34
35 <p><label> <p><label> <p><label> <p><label>Comments:Comments:Comments:Comments:<br /><br /><br /><br />
36 <textarea name = <textarea name = <textarea name = <textarea name = "comments""comments""comments""comments" rows =rows =rows =rows = "4""4""4""4"
37 cols = cols = cols = cols = "36""36""36""36"></textarea>></textarea>></textarea>></textarea>
38 </label></p> </label></p> </label></p> </label></p>
39
40 <p><label> <p><label> <p><label> <p><label>EEEE----mail Address: mail Address: mail Address: mail Address:
41 <input name = <input name = <input name = <input name = "email""email""email""email" type = type = type = type = "password""password""password""password"
42 size = size = size = size = "25" "25" "25" "25" /></label></p>/></label></p>/></label></p>/></label></p>
43
44 <p> <p> <p> <p>
45 <strong> <strong> <strong> <strong>Things you liked:Things you liked:Things you liked:Things you liked:</strong><br /></strong><br /></strong><br /></strong><br />
46
47 <label> <label> <label> <label>Site designSite designSite designSite design
48 <input name = <input name = <input name = <input name = "thingsliked""thingsliked""thingsliked""thingsliked" type =type =type =type = "checkbox""checkbox""checkbox""checkbox"
49 value = value = value = value = "Design" "Design" "Design" "Design" /></label>/></label>/></label>/></label>
50
OutlineOutline
form3.html(3 of 6)
51 <label> <label> <label> <label>LinksLinksLinksLinks
52 <input name = <input name = <input name = <input name = "thingsliked""thingsliked""thingsliked""thingsliked" type =type =type =type = "checkbox""checkbox""checkbox""checkbox"
53 value = value = value = value = "Links" "Links" "Links" "Links" /></label>/></label>/></label>/></label>
54
55 <label> <label> <label> <label>Ease of useEase of useEase of useEase of use
56 <input name = <input name = <input name = <input name = "thingsliked""thingsliked""thingsliked""thingsliked" type =type =type =type = "checkb"checkb"checkb"checkbox" ox" ox" ox"
57 value = value = value = value = "Ease" "Ease" "Ease" "Ease" /></label>/></label>/></label>/></label>
58
59 <label> <label> <label> <label>Images Images Images Images
60 <input name = <input name = <input name = <input name = "thingsliked""thingsliked""thingsliked""thingsliked" type =type =type =type = "checkbox""checkbox""checkbox""checkbox"
61 value = value = value = value = "Images" "Images" "Images" "Images" /></label>/></label>/></label>/></label>
62
63 <label> <label> <label> <label>Source cSource cSource cSource codeodeodeode
64 <input name = <input name = <input name = <input name = "thingsliked""thingsliked""thingsliked""thingsliked" type =type =type =type = "checkbox""checkbox""checkbox""checkbox"
65 value = value = value = value = "Code" "Code" "Code" "Code" /></label>/></label>/></label>/></label>
66 </p> </p> </p> </p>
67
68 <!<!<!<!-------- <input type = "radio" /> creates a radio <input type = "radio" /> creates a radio <input type = "radio" /> creates a radio <input type = "radio" /> creates a radio -------->>>>
69 <!<!<!<!-------- button. The differ button. The differ button. The differ button. The difference between radio buttons ence between radio buttons ence between radio buttons ence between radio buttons -------->>>>
70 <!<!<!<!-------- and checkboxes is that only one radio button and checkboxes is that only one radio button and checkboxes is that only one radio button and checkboxes is that only one radio button -------->>>>
71 <!<!<!<!-------- in a group can be selected. in a group can be selected. in a group can be selected. in a group can be selected. -------->>>>
72 <p> <p> <p> <p>
73 <strong> <strong> <strong> <strong>How did you get to our site?:How did you get to our site?:How did you get to our site?:How did you get to our site?:</strong><br </strong><br </strong><br </strong><br />/>/>/>
74
OutlineOutline
form3.html(4 of 6)
75 <label> <label> <label> <label>Search engineSearch engineSearch engineSearch engine
76 <input name =<input name =<input name =<input name = "howtosite""howtosite""howtosite""howtosite" type =type =type =type = "radio""radio""radio""radio"
77 value =value =value =value = "search engine""search engine""search engine""search engine" checked = checked = checked = checked = "checked""checked""checked""checked" /> /> /> />
78 </label> </label> </label> </label>
79
80 <label> <label> <label> <label>Links from Links from Links from Links from another siteanother siteanother siteanother site
81 <input name = <input name = <input name = <input name = "howtosite""howtosite""howtosite""howtosite" type = type = type = type = "radio""radio""radio""radio"
82 value = value = value = value = "link" "link" "link" "link" /></label>/></label>/></label>/></label>
83
84 <label> <label> <label> <label>Deitel.com Web siteDeitel.com Web siteDeitel.com Web siteDeitel.com Web site
85 <input name = <input name = <input name = <input name = "howtosite""howtosite""howtosite""howtosite" type = type = type = type = "radio""radio""radio""radio"
86 value = value = value = value = "deitel.com" "deitel.com" "deitel.com" "deitel.com" /></label>/></label>/></label>/></label>
87
88 <label> <label> <label> <label>Reference in a bookReference in a bookReference in a bookReference in a book
89 <input name = <input name = <input name = <input name = "howtosite""howtosite""howtosite""howtosite" type = type = type = type = "radio""radio""radio""radio"
90 value = value = value = value = "book" "book" "book" "book" /></label>/></label>/></label>/></label>
91
92 <label> <label> <label> <label>OtherOtherOtherOther
93 <input name = <input name = <input name = <input name = "howtosite""howtosite""howtosite""howtosite" type = type = type = type = "radio""radio""radio""radio"
94 value =value =value =value = "other" "other" "other" "other" /></label>/></label>/></label>/></label>
95
96 </p> </p> </p> </p>
97
OutlineOutline
form3.html(5 of 6)
98 <p> <p> <p> <p>
99 <label> <label> <label> <label>Rate our site: Rate our site: Rate our site: Rate our site:
100
101 <!<!<!<!-------- the <select> tag presents a drop the <select> tag presents a drop the <select> tag presents a drop the <select> tag presents a drop----down down down down -------->>>>
102 <!<!<!<!-------- list with choices indicated by the list with choices indicated by the list with choices indicated by the list with choices indicated by the -------->>>>
103 <! <! <! <!-------- <option> tags <option> tags <option> tags <option> tags -------->>>>
104 <select name = <select name = <select name = <select name = "rating""rating""rating""rating">>>>
105 <option selected = <option selected = <option selected = <option selected = "selected""selected""selected""selected">>>>AmazingAmazingAmazingAmazing</option></option></option></option>
106 <option><option><option><option>10101010</option></option></option></option>
107 <o<o<o<option>ption>ption>ption>9999</option></option></option></option>
108 <option><option><option><option>8888</option></option></option></option>
109 <option><option><option><option>7777</option></option></option></option>
110 <option> <option> <option> <option>6666</option> </option> </option> </option>
111 <option><option><option><option>5555</option></option></option></option>
112 <option><option><option><option>4444</option></option></option></option>
113 <option><option><option><option>3333</option></option></option></option>
114 <option><option><option><option>2222</option</option</option</option>>>>
115 <option><option><option><option>1111</option></option></option></option>
116 <option><option><option><option>AwfulAwfulAwfulAwful</option></option></option></option>
117 </select></select></select></select>
118
119 </label> </label> </label> </label>
120 </p> </p> </p> </p>
121
OutlineOutline
form3.html(6 of 6)
122 <p> <p> <p> <p>
123 <input type = <input type = <input type = <input type = "submit" "submit" "submit" "submit" value =value =value =value =
124 "Submit Your Entries" "Submit Your Entries" "Submit Your Entries" "Submit Your Entries" />/>/>/>
125 <input type = <input type = <input type = <input type = "reset""reset""reset""reset" value =value =value =value = "Clear Your Entries" "Clear Your Entries" "Clear Your Entries" "Clear Your Entries" />/>/>/>
126 </p> </p> </p> </p>
127
128 </form></form></form></form>
129
130 </bo </bo </bo </body>dy>dy>dy>
131 </html></html></html></html>
2.6 Internal Linking
• Enables the user to jump between locations in the same document
OutlineOutline
links.html(1 of 3)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 5.6: links.html Fig. 5.6: links.html Fig. 5.6: links.html Fig. 5.6: links.html -------->>>>
6 <!<!<!<!-------- Internal Linking Internal Linking Internal Linking Internal Linking -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://"http://"http://"http://www.w3.org/1999/xhtml"www.w3.org/1999/xhtml"www.w3.org/1999/xhtml"www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title><title><title><title>Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program ---- List List List List</title></title></title></title>
11 </head> </head> </head> </head>
12
13 <body> <body> <body> <body>
14
15 <! <! <! <!-------- id attribute creates an internal hyperlink destination id attribute creates an internal hyperlink destination id attribute creates an internal hyperlink destination id attribute creates an internal hyperlink destination -------->>>>
16 <h1 id = <h1 id = <h1 id = <h1 id = "featu"featu"featu"features"res"res"res">>>>The Best Features of the InternetThe Best Features of the InternetThe Best Features of the InternetThe Best Features of the Internet</h1></h1></h1></h1>
17
18 <! <! <! <!-------- an internal link's address is "#id" an internal link's address is "#id" an internal link's address is "#id" an internal link's address is "#id" -------->>>>
19 <p><a href = <p><a href = <p><a href = <p><a href = "#bugs""#bugs""#bugs""#bugs">>>>Go to Go to Go to Go to <em><em><em><em>Favorite BugsFavorite BugsFavorite BugsFavorite Bugs</em></a></p></em></a></p></em></a></p></em></a></p>
20
21 <ul><ul><ul><ul>
22 <li><li><li><li>You can meet people from countriesYou can meet people from countriesYou can meet people from countriesYou can meet people from countries
23 around the world.around the world.around the world.around the world.</li></li></li></li>
24
25 <li><li><li><li>You have access to new media as it becomes public:You have access to new media as it becomes public:You have access to new media as it becomes public:You have access to new media as it becomes public:
OutlineOutline
links.html(2 of 3)
26 <ul><ul><ul><ul>
27 <li><li><li><li>New gamesNew gamesNew gamesNew games</li></li></li></li>
28 <li><li><li><li>New applications New applications New applications New applications
29 <ul><ul><ul><ul>
30 <li><li><li><li>For BusinessFor BusinessFor BusinessFor Business</li></li></li></li>
31 <li><li><li><li>For PleasureFor PleasureFor PleasureFor Pleasure</li></li></li></li>
32 </ul></ul></ul></ul>
33 </li> </li> </li> </li>
34
35 <li><li><li><li>Around the clock newsAround the clock newsAround the clock newsAround the clock news</li></li></li></li>
36 <li> <li> <li> <li>Search EnginesSearch EnginesSearch EnginesSearch Engines</li></li></li></li>
37 <li><li><li><li>ShoppingShoppingShoppingShopping</li></li></li></li>
38 <li> <li> <li> <li>ProgrammingProgrammingProgrammingProgramming
39 <ul> <ul> <ul> <ul>
40 <li> <li> <li> <li>XHTMLXHTMLXHTMLXHTML</li></li></li></li>
41 <li><li><li><li>JavaJavaJavaJava</li></li></li></li>
42 <li><li><li><li>Dynamic HTMLDynamic HTMLDynamic HTMLDynamic HTML</li></li></li></li>
43 <li><li><li><li>ScriptsScriptsScriptsScripts</li></li></li></li>
44 <li> <li> <li> <li>New languagesNew languagesNew languagesNew languages</li></li></li></li>
45 </ul></ul></ul></ul>
46 </li></li></li></li>
47 </ul></ul></ul></ul>
48 </li> </li> </li> </li>
49
50 <li><li><li><li>LinksLinksLinksLinks</li></li></li></li>
OutlineOutline
links.html(3 of 3)
51 <li><li><li><li>Keeping in touch with old friendsKeeping in touch with old friendsKeeping in touch with old friendsKeeping in touch with old friends</li></li></li></li>
52 <li><li><li><li>It is the technology of the future!It is the technology of the future!It is the technology of the future!It is the technology of the future!</li></li></li></li>
53 </ul></ul></ul></ul>
54
55 <! <! <! <!-------- id attribute creates an internal hyperlink destination id attribute creates an internal hyperlink destination id attribute creates an internal hyperlink destination id attribute creates an internal hyperlink destination -------->>>>
56 <h1 id = <h1 id = <h1 id = <h1 id = "bugs""bugs""bugs""bugs">>>>My 3 FavorMy 3 FavorMy 3 FavorMy 3 Favorite Bugsite Bugsite Bugsite Bugs</h1></h1></h1></h1>
57
58 <p><p><p><p>
59
60 <! <! <! <!-------- internal hyperlink to features internal hyperlink to features internal hyperlink to features internal hyperlink to features -------->>>>
61 <a href = <a href = <a href = <a href = "#features""#features""#features""#features">>>>Go to Go to Go to Go to <em><em><em><em>Favorite FeaturesFavorite FeaturesFavorite FeaturesFavorite Features</em></em></em></em>
62 </a></p></a></p></a></p></a></p>
63
64 <ol><ol><ol><ol>
65 <li><li><li><li>Fire FlyFire FlyFire FlyFire Fly</li></li></li></li>
66 <li><li><li><li>Gal AntGal AntGal AntGal Ant</li></li></li></li>
67 <li><li><li><li>Roman TicRoman TicRoman TicRoman Tic</li></li></li></li>
68 </ol></ol></ol></ol>
69
70 </body> </body> </body> </body>
71 </html></html></html></html>
2.7 Creating and Using Image Maps
• Designate certain areas of an image (called hotspots) as links– Element map
• Attribute id
– Identifies the image map
• Element area
– Defines hotspot
– Attribute shape and coords
• Specify the hotspot’s shape and coordinates
– Rectangular ( shape = “rect” )
– Polygon ( shape = “poly” )
– Circle ( shape = “circle” )
OutlineOutline
picture.html(1 of 3)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" ?> ?> ?> ?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Transitional//EN"//W3C//DTD XHTML 1.0 Transitional//EN"//W3C//DTD XHTML 1.0 Transitional//EN"//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----transitional.dtd"transitional.dtd"transitional.dtd"transitional.dtd">>>>
4
5 <!<!<!<!-------- Fig. 5.7: picture.html Fig. 5.7: picture.html Fig. 5.7: picture.html Fig. 5.7: picture.html -------->>>>
6 <!<!<!<!-------- Creating and Using Image Creating and Using Image Creating and Using Image Creating and Using Image Maps Maps Maps Maps -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title> <title> <title> <title>
11 Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program ---- Image Map Image Map Image Map Image Map
12 </title> </title> </title> </title>
13 </head> </head> </head> </head>
14
15 <body> <body> <body> <body>
16
17 <p> <p> <p> <p>
18
19 <! <! <! <!-------- the <map> tag defines an image map the <map> tag defines an image map the <map> tag defines an image map the <map> tag defines an image map -------->>>>
20 <map id = <map id = <map id = <map id = "picture""picture""picture""picture">>>>
21
22 <! <! <! <!-------- shape = "rect" indicates a rectangular shape = "rect" indicates a rectangular shape = "rect" indicates a rectangular shape = "rect" indicates a rectangular --------> > > >
23 <! <! <! <!-------- area, with coordinates for the upper area, with coordinates for the upper area, with coordinates for the upper area, with coordinates for the upper----left left left left -------->>>>
24 <! <! <! <!-------- and lower and lower and lower and lower----right corners right corners right corners right corners -------->>>>
OutlineOutline
picture.html(2 of 3)
25 <area href = <area href = <area href = <area href = "form.html""form.html""form.html""form.html" shape = shape = shape = shape = "rect""rect""rect""rect"
26 coords = coords = coords = coords = "2,123,54,143""2,123,54,143""2,123,54,143""2,123,54,143"
27 alt = alt = alt = alt = "Go to the feedback form""Go to the feedback form""Go to the feedback form""Go to the feedback form" /> /> /> />
28 <area href = <area href = <area href = <area href = "contact.html""contact.html""contact.html""contact.html" shape = shape = shape = shape = "rect""rect""rect""rect"
29 coords = coords = coords = coords = "12"12"12"126,122,198,143"6,122,198,143"6,122,198,143"6,122,198,143"
30 alt = alt = alt = alt = "Go to the contact page""Go to the contact page""Go to the contact page""Go to the contact page" /> /> /> />
31 <area href = <area href = <area href = <area href = "main.html""main.html""main.html""main.html" shape = shape = shape = shape = "rect""rect""rect""rect"
32 coords = coords = coords = coords = "3,7,61,25""3,7,61,25""3,7,61,25""3,7,61,25" alt = alt = alt = alt = "Go to the homepage""Go to the homepage""Go to the homepage""Go to the homepage" /> /> /> />
33 <area href = <area href = <area href = <area href = "links.html""links.html""links.html""links.html" shape = shape = shape = shape = "rect""rect""rect""rect"
34 coords = coords = coords = coords = "168,5,197,25""168,5,197,25""168,5,197,25""168,5,197,25"
35 alt = alt = alt = alt = "Go to the links page""Go to the links page""Go to the links page""Go to the links page" /> /> /> />
36
37 <! <! <! <!-------- value "poly" creates a hotspot in the shape value "poly" creates a hotspot in the shape value "poly" creates a hotspot in the shape value "poly" creates a hotspot in the shape -------->>>>
38 <! <! <! <!-------- of a polygon, defined by coords of a polygon, defined by coords of a polygon, defined by coords of a polygon, defined by coords -------->>>>
39 <area shap<area shap<area shap<area shape = e = e = e = "poly""poly""poly""poly" alt = alt = alt = alt = "E"E"E"E----mail the Deitels"mail the Deitels"mail the Deitels"mail the Deitels"
40 coords = coords = coords = coords = "162,25,154,39,158,54,169,51,183,39,161,26""162,25,154,39,158,54,169,51,183,39,161,26""162,25,154,39,158,54,169,51,183,39,161,26""162,25,154,39,158,54,169,51,183,39,161,26"
41 href = href = href = href = "mailto:[email protected]""mailto:[email protected]""mailto:[email protected]""mailto:[email protected]" /> /> /> />
42
43 <! <! <! <!-------- shape = "circle" indicates a circul shape = "circle" indicates a circul shape = "circle" indicates a circul shape = "circle" indicates a circular ar ar ar -------->>>>
44 <! <! <! <!-------- area with the given center and radius area with the given center and radius area with the given center and radius area with the given center and radius -------->>>>
45 <area href = <area href = <area href = <area href = "mailto:[email protected]""mailto:[email protected]""mailto:[email protected]""mailto:[email protected]"
46 shape = shape = shape = shape = "circle""circle""circle""circle" coords = coords = coords = coords = "100,36,33""100,36,33""100,36,33""100,36,33"
47 alt = alt = alt = alt = "E"E"E"E----mail the Deitels"mail the Deitels"mail the Deitels"mail the Deitels" /> /> /> />
48 </ma</ma</ma</map>p>p>p>
49
OutlineOutline
picture.html(3 of 3)
50 <! <! <! <!-------- <img src =... usemap = "#id"> indicates that the <img src =... usemap = "#id"> indicates that the <img src =... usemap = "#id"> indicates that the <img src =... usemap = "#id"> indicates that the -------->>>>
51 <! <! <! <!-------- specified image map is used with this image specified image map is used with this image specified image map is used with this image specified image map is used with this image -------->>>>
52 <img src = <img src = <img src = <img src = "deitel.gif""deitel.gif""deitel.gif""deitel.gif" width = width = width = width = "200""200""200""200" height = height = height = height = "144""144""144""144"
53 alt = alt = alt = alt = "Deitel logo""Deitel logo""Deitel logo""Deitel logo" usemap = usemap = usemap = usemap = "#pictur"#pictur"#pictur"#picture"e"e"e" /> /> /> />
54 </p> </p> </p> </p>
55 </body> </body> </body> </body>
56 </html></html></html></html>
5.8 metametametameta Elements
• Specify information about a document– Attribute name
• Identifies the type of meta element
• “keywords” ( name = “keywords” )
– Provides search engines with a list of words that describe a page
• “description” ( name = “description” )
– Provides a description of a site
– Attribute content• Provides the information search engine use to catalog pages
OutlineOutline
main.html(1 of 2)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">>>>
4
5 <!<!<!<!-------- Fig. 5.8: main.html Fig. 5.8: main.html Fig. 5.8: main.html Fig. 5.8: main.html -------->>>>
6 <!<!<!<!-------- <meta> tag <meta> tag <meta> tag <meta> tag -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://ww"http://ww"http://ww"http://www.w3.org/1999/xhtml"w.w3.org/1999/xhtml"w.w3.org/1999/xhtml"w.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title> <title> <title> <title>Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program ---- Welcome Welcome Welcome Welcome</title></title></title></title>
11
12 <! <! <! <!-------- <meta> tags provide search engines with <meta> tags provide search engines with <meta> tags provide search engines with <meta> tags provide search engines with -------->>>>
13 <! <! <! <!-------- information used to catalog a site information used to catalog a site information used to catalog a site information used to catalog a site -------->>>>
14 <meta na<meta na<meta na<meta name = me = me = me = "keywords""keywords""keywords""keywords" content = content = content = content = "Web page, design,"Web page, design,"Web page, design,"Web page, design,
15 XHTML, tutorial, personal, help, index, form,XHTML, tutorial, personal, help, index, form,XHTML, tutorial, personal, help, index, form,XHTML, tutorial, personal, help, index, form,
16 contact, feedback, list, links, frame, deitel" contact, feedback, list, links, frame, deitel" contact, feedback, list, links, frame, deitel" contact, feedback, list, links, frame, deitel" />/>/>/>
17
18 <meta name = <meta name = <meta name = <meta name = "description""description""description""description" content = content = content = content = "This Web site will"This Web site will"This Web site will"This Web site will
19 help you learn the basics of XHTML and Web page designhelp you learn the basics of XHTML and Web page designhelp you learn the basics of XHTML and Web page designhelp you learn the basics of XHTML and Web page design
20 through the use of interactive examples andthrough the use of interactive examples andthrough the use of interactive examples andthrough the use of interactive examples and
21 instruction." instruction." instruction." instruction." />/>/>/>
22
23 </head> </head> </head> </head>
24
OutlineOutline
main.html(2 of 2)
25 <body> <body> <body> <body>
26
27 <h1><h1><h1><h1>Welcome to Our Web Site!Welcome to Our Web Site!Welcome to Our Web Site!Welcome to Our Web Site!</h1></h1></h1></h1>
28
29 <p><p><p><p>We have designed this site to teach about the wonders We have designed this site to teach about the wonders We have designed this site to teach about the wonders We have designed this site to teach about the wonders
30 of of of of <strong><em><strong><em><strong><em><strong><em>XHTMLXHTMLXHTMLXHTML</em></strong></em></strong></em></strong></em></strong>. . . . <em><em><em><em>XHTMLXHTMLXHTMLXHTML</em></em></em></em> is is is is
31 better equipped than better equipped than better equipped than better equipped than <em><em><em><em>HTMLHTMLHTMLHTML<<<</em>/em>/em>/em> to represent complex to represent complex to represent complex to represent complex
32 data on the Internet. data on the Internet. data on the Internet. data on the Internet. <em><em><em><em>XHTMLXHTMLXHTMLXHTML</em></em></em></em> takes advantage of takes advantage of takes advantage of takes advantage of
33 XML’s strict syntax to ensure well XML’s strict syntax to ensure well XML’s strict syntax to ensure well XML’s strict syntax to ensure well----formedness. Soon you formedness. Soon you formedness. Soon you formedness. Soon you
34 will know about many of the great new features of will know about many of the great new features of will know about many of the great new features of will know about many of the great new features of
35 <em> <em> <em> <em>XHTML.XHTML.XHTML.XHTML.</em><</em><</em><</em></p>/p>/p>/p>
36
37 <p><p><p><p>Have Fun With the Site!Have Fun With the Site!Have Fun With the Site!Have Fun With the Site!</p></p></p></p>
38
39 </body> </body> </body> </body>
40 </html></html></html></html>
2.9 framesetframesetframesetframeset Element
• Allow browser display more than one document simultaneously– Element frameset
• Attribute cols
– Specifies the frameset’s column layout
• Attribute rows
– Specifies the number of rows and the size of each row
• Element frame
– Specifies the documents that will be loaded
– Attribute src
• Specifies URL of the page to display
OutlineOutline
index.html(1 of 2)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Frameset//EN"//W3C//DTD XHTML 1.0 Frameset//EN"//W3C//DTD XHTML 1.0 Frameset//EN"//W3C//DTD XHTML 1.0 Frameset//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----frameset.dtd"frameset.dtd"frameset.dtd"frameset.dtd">>>>
4
5 <!<!<!<!-------- Fig. 5.9: index.html Fig. 5.9: index.html Fig. 5.9: index.html Fig. 5.9: index.html -------->>>>
6 <!<!<!<!-------- XHTML Frames I XHTML Frames I XHTML Frames I XHTML Frames I -------->>>>
7
8 <html <html <html <html xmlns = xmlns = xmlns = xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title> <title> <title> <title>Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program ---- Main Main Main Main</title></title></title></title>
11 <meta name = <meta name = <meta name = <meta name = "keywords""keywords""keywords""keywords" content = content = content = content = "Webpage, design, "Webpage, design, "Webpage, design, "Webpage, design,
12 XHTML,XHTML,XHTML,XHTML, tutorial, personal, help, index, form, tutorial, personal, help, index, form, tutorial, personal, help, index, form, tutorial, personal, help, index, form,
13 contact, feedback, list, links, frame, deitel" contact, feedback, list, links, frame, deitel" contact, feedback, list, links, frame, deitel" contact, feedback, list, links, frame, deitel" />/>/>/>
14
15 <meta name = <meta name = <meta name = <meta name = "description""description""description""description" content =content =content =content = "This Web site will "This Web site will "This Web site will "This Web site will
16 helphelphelphelp you learn the basics of XHTML and Web page design you learn the basics of XHTML and Web page design you learn the basics of XHTML and Web page design you learn the basics of XHTML and Web page design
17 through thethrough thethrough thethrough the use of interactive examuse of interactive examuse of interactive examuse of interactive examples ples ples ples
18 and instruction." and instruction." and instruction." and instruction." />/>/>/>
19
20 </head> </head> </head> </head>
21
22 <! <! <! <!-------- the <frameset> tag sets the frame dimensions the <frameset> tag sets the frame dimensions the <frameset> tag sets the frame dimensions the <frameset> tag sets the frame dimensions -------->>>>
23 <frameset cols = <frameset cols = <frameset cols = <frameset cols = "110,*""110,*""110,*""110,*">>>>
24
OutlineOutline
index.html(2 of 2)
25 <! <! <! <!-------- frame elements specify which pages frame elements specify which pages frame elements specify which pages frame elements specify which pages -------->>>>
26 <! <! <! <!-------- are loaded into a given frame are loaded into a given frame are loaded into a given frame are loaded into a given frame -------->>>>
27 <frame name = <frame name = <frame name = <frame name = "leftframe""leftframe""leftframe""leftframe" src = src = src = src = "nav.html" "nav.html" "nav.html" "nav.html" />/>/>/>
28 <frame name = <frame name = <frame name = <frame name = "main""main""main""main" src = src = src = src = "main.html" "main.html" "main.html" "main.html" />/>/>/>
29
30 <noframes><noframes><noframes><noframes>
31 <body><body><body><body>
32 <p><p><p><p>This page uses frames, but your browser does not This page uses frames, but your browser does not This page uses frames, but your browser does not This page uses frames, but your browser does not
33 support them. support them. support them. support them.</p></p></p></p>
34
35 <p><p><p><p>Please, Please, Please, Please, <a href = <a href = <a href = <a href = "nav.html""nav.html""nav.html""nav.html">>>>follow this link to follow this link to follow this link to follow this link to
36 browse our site without fram browse our site without fram browse our site without fram browse our site without frameseseses</a></a></a></a>....</p></p></p></p>
37 </body></body></body></body>
38 </noframes></noframes></noframes></noframes>
39
40 </frameset></frameset></frameset></frameset>
41 </html></html></html></html>
OutlineOutline
nav.html(1 of 2)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Transitional//EN"//W3C//DTD XHTML 1.0 Transitional//EN"//W3C//DTD XHTML 1.0 Transitional//EN"//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----transitional.dtd"transitional.dtd"transitional.dtd"transitional.dtd">>>>
4
5 <!<!<!<!-------- Fig. 5.10: nav.html Fig. 5.10: nav.html Fig. 5.10: nav.html Fig. 5.10: nav.html -------->>>>
6 <!<!<!<!-------- Using images as link anchor Using images as link anchor Using images as link anchor Using images as link anchors s s s -------->>>>
7
8 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9
10 <head> <head> <head> <head>
11 <title><title><title><title>Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program ---- Navigation Bar Navigation Bar Navigation Bar Navigation Bar
12 </title> </title> </title> </title>
13 </head> </head> </head> </head>
14
15 <body> <body> <body> <body>
16
17 <p> <p> <p> <p>
18 <a href = <a href = <a href = <a href = "links.html""links.html""links.html""links.html" target = target = target = target = "main""main""main""main">>>>
19 <img src = <img src = <img src = <img src = "buttons/links.jpg""buttons/links.jpg""buttons/links.jpg""buttons/links.jpg" width = width = width = width = "65""65""65""65"
20 height = height = height = height = "50""50""50""50" alt = alt = alt = alt = "Links Page""Links Page""Links Page""Links Page" /> /> /> />
21 </a><br /> </a><br /> </a><br /> </a><br />
22
23 <a href = <a href = <a href = <a href = "list.html""list.html""list.html""list.html" target = target = target = target = "main""main""main""main">>>>
24 <img src = <img src = <img src = <img src = "buttons/list.jpg""buttons/list.jpg""buttons/list.jpg""buttons/list.jpg" width = width = width = width = "65""65""65""65"
25 height = height = height = height = "50""50""50""50" alt = alt = alt = alt = "List Example Page""List Example Page""List Example Page""List Example Page" /> /> /> />
OutlineOutline
nav.html(2 of 2)
26 </a><br /> </a><br /> </a><br /> </a><br />
27
28 <a href = <a href = <a href = <a href = "contact.html""contact.html""contact.html""contact.html" target = target = target = target = "main""main""main""main">>>>
29 <img src = <img src = <img src = <img src = "buttons/contact.jpg""buttons/contact.jpg""buttons/contact.jpg""buttons/contact.jpg" width = width = width = width = "65""65""65""65"
30 height = height = height = height = "50""50""50""50" alt = alt = alt = alt = "Contact Page""Contact Page""Contact Page""Contact Page" /> /> /> />
31 </a><br /> </a><br /> </a><br /> </a><br />
32
33 <a href = <a href = <a href = <a href = "header.html""header.html""header.html""header.html" target = target = target = target = "main""main""main""main">>>>
34 <img src = <img src = <img src = <img src = "buttons/header.jpg""buttons/header.jpg""buttons/header.jpg""buttons/header.jpg" width = width = width = width = "65""65""65""65"
35 height = height = height = height = "50""50""50""50" alt = alt = alt = alt = "Header Page""Header Page""Header Page""Header Page" /> /> /> />
36 </a><br /> </a><br /> </a><br /> </a><br />
37
38 <a href = <a href = <a href = <a href = "table1.html""table1.html""table1.html""table1.html" target = target = target = target = "main""main""main""main">>>>
39 <img src = <img src = <img src = <img src = "buttons/table.jpg""buttons/table.jpg""buttons/table.jpg""buttons/table.jpg" width = width = width = width = "65""65""65""65"
40 height = height = height = height = "50""50""50""50" alt = alt = alt = alt = "Table Page""Table Page""Table Page""Table Page" /> /> /> />
41 </a><br /> </a><br /> </a><br /> </a><br />
42
43 <a href = <a href = <a href = <a href = "form.html""form.html""form.html""form.html" target = target = target = target = "main""main""main""main">>>>
44 <img src = <img src = <img src = <img src = "buttons/form.jpg""buttons/form.jpg""buttons/form.jpg""buttons/form.jpg" width = width = width = width = "65""65""65""65"
45 height = height = height = height = "50""50""50""50" alt = alt = alt = alt = "Feedback Form""Feedback Form""Feedback Form""Feedback Form" /> /> /> />
46 </a><br /> </a><br /> </a><br /> </a><br />
47 </p> </p> </p> </p>
48
49 </body> </body> </body> </body>
50 </html></html></html></html>
2.10 Nested framesetframesetframesetframesets
• framesets within framesets
OutlineOutline
index2.html(1 of 2)
1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0"?>?>?>?>
2 <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Frameset//EN"//W3C//DTD XHTML 1.0 Frameset//EN"//W3C//DTD XHTML 1.0 Frameset//EN"//W3C//DTD XHTML 1.0 Frameset//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----frameset.dtd"frameset.dtd"frameset.dtd"frameset.dtd">>>>
4
5 <!<!<!<!-------- Fig. 5.11: index2.html Fig. 5.11: index2.html Fig. 5.11: index2.html Fig. 5.11: index2.html -------->>>>
6 <!<!<!<!-------- XHTML Frames II XHTML Frames II XHTML Frames II XHTML Frames II -------->>>>
7
8 <h<h<h<html xmlns = tml xmlns = tml xmlns = tml xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>>
9 <head> <head> <head> <head>
10 <title> <title> <title> <title>Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program Internet and WWW How to Program ---- Main Main Main Main</title></title></title></title>
11
12 <meta name = <meta name = <meta name = <meta name = "keywords""keywords""keywords""keywords" content = content = content = content = "Webpage, design, "Webpage, design, "Webpage, design, "Webpage, design,
13 XHTML,XHTML,XHTML,XHTML, tutorial, personal, help, index, fortutorial, personal, help, index, fortutorial, personal, help, index, fortutorial, personal, help, index, form, m, m, m,
14 contact, feedback, list, links, frame, deitel" contact, feedback, list, links, frame, deitel" contact, feedback, list, links, frame, deitel" contact, feedback, list, links, frame, deitel" />/>/>/>
15
16 <meta name = <meta name = <meta name = <meta name = "description""description""description""description" content =content =content =content = "This Web site will "This Web site will "This Web site will "This Web site will
17 helphelphelphelp you learn the basics of XHTML and Web page design you learn the basics of XHTML and Web page design you learn the basics of XHTML and Web page design you learn the basics of XHTML and Web page design
18 through thethrough thethrough thethrough the use of interuse of interuse of interuse of interactive examples active examples active examples active examples
19 and instruction." and instruction." and instruction." and instruction." />/>/>/>
20
21 </head> </head> </head> </head>
22
23 <frameset cols = <frameset cols = <frameset cols = <frameset cols = "110,*""110,*""110,*""110,*">>>>
24 <frame name =<frame name =<frame name =<frame name = "leftframe""leftframe""leftframe""leftframe" src =src =src =src = "nav.html" "nav.html" "nav.html" "nav.html" /> /> /> />
25
OutlineOutline
index2.html(2 of 2)
26 <! <! <! <!-------- nested framesets are used to change the nested framesets are used to change the nested framesets are used to change the nested framesets are used to change the -------->>>>
27 <! <! <! <!-------- formatting and layout of the frameset formatting and layout of the frameset formatting and layout of the frameset formatting and layout of the frameset -------->>>>
28 <frameset rows =<frameset rows =<frameset rows =<frameset rows = "175,*""175,*""175,*""175,*">>>>
29 <frame name = <frame name = <frame name = <frame name = "picture""picture""picture""picture" src =src =src =src = "picture.html" "picture.html" "picture.html" "picture.html" />/>/>/>
30 <frame name = <frame name = <frame name = <frame name = "main""main""main""main" src = src = src = src = "main.html" "main.html" "main.html" "main.html" />/>/>/>
31 </frameset></frameset></frameset></frameset>
32
33 <noframes><noframes><noframes><noframes>
34 <body><body><body><body>
35 <p><p><p><p>This page uses frames, but This page uses frames, but This page uses frames, but This page uses frames, but your browser does not your browser does not your browser does not your browser does not
36 support them. support them. support them. support them.</p></p></p></p>
37
38 <p><p><p><p>Please, Please, Please, Please, <a href = <a href = <a href = <a href = "nav.html""nav.html""nav.html""nav.html">>>>follow this link to follow this link to follow this link to follow this link to
39 browse our site without frames browse our site without frames browse our site without frames browse our site without frames</a></a></a></a>....</p></p></p></p>
40 </body></body></body></body>
41 </noframes></noframes></noframes></noframes>
42
43 </frameset></frameset></frameset></frameset>
44 </html></html></html></html>
2.11 Web Resources
• www.vbxml.com/xhtml/articles/xhtml_tables
• www.webreference.com/xml/reference/xhtml.html
