Scribd
Upload
59 views34 pages

Outline: 2001 Prentice Hall, Inc. All Rights Reserved

The document outlines Chapter 5 of a book on XHTML and provides examples of creating tables, forms, and other XHTML elements. It introduces basic and intermediate table design using tags like <table>, <tr>, <td>, <th>, and attributes like border, width. It demonstrates creating text boxes, checkboxes, buttons and other form elements. The examples show how to structure an XHTML form and include hidden values, labels, and attributes like type, name.

Uploaded by

niceboy797
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
Download as ppt, pdf, or txt
59 views34 pages

Outline: 2001 Prentice Hall, Inc. All Rights Reserved

The document outlines Chapter 5 of a book on XHTML and provides examples of creating tables, forms, and other XHTML elements. It introduces basic and intermediate table design using tags like <table>, <tr>, <td>, <th>, and attributes like border, width. It demonstrates creating text boxes, checkboxes, buttons and other form elements. The examples show how to structure an XHTML form and include hidden values, labels, and attributes like type, name.

Uploaded by

niceboy797
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
Download as ppt, pdf, or txt
Download as ppt, pdf, or txt
You are on page 1/ 34

Chapter 5 - Introduction to XHTML: Part 2

Outline
5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 5.9 5.10 5.11 Introduction Basic XHTML Tables Intermediate XHTML Tables and Formatting Basic XHTML Forms More Complex XHTML Forms Internal Linking Creating and Using Image Maps <meta> Tags frameset Element Nested framesets Internet and World Wide Web Resources

2001 Prentice Hall, Inc. All rights reserved.

2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 5.1: table1.html <!-- Creating a basic table --> -->

Outline
Table1.html

<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>A simple XHTML table</title> </head> <body>

The border attribute gives the size in pixels of the tables border. The width attribute gives the width of the table.

<!-- The <table> tag opens a table --> <table border = "1" width = "40%" summary = "This table provides information about the price of fruit">

<!-- The <caption> tag summarizes the table's <!-- contents (this helps the visually impaired) --> <caption><strong>Price of Fruit</strong></caption>

The summary attribute --> describes the tables contents.

<!-- The <thead> is the first section of a --> <!-- table. It formats the table header --> <!-- area. <th> inserts a heading cell. --> <thead> <tr> Text placed in <th>Fruit</th> <th>Price</th> rendered bold and </tr> </thead>

a table header is centered in the cell.

2001 Prentice Hall, Inc.


All rights reserved.

3
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 <!-- All table content goes is enclosed within <!-- <tbody>. <tr> inserts a table row. <td> <!-- inserts a data cell. <tbody> <tr> <td>Apple</td> <td>$0.25</td> </tr> --> --> -->

Outline
Table1.html

<tr> <td>Orange</td> <td>$0.50</td> </tr>


<tr> <td>Banana</td> <td>$1.00</td> </tr> <tr> <td>Pineapple</td> <td>$2.00</td> </tr> </tbody>

The body of the table is placed between the tbody tags.

Table rows are created using the tr element

Data placed between td tags are placed in an individual cell.

<tfoot> <tr> <th>Total</th> <th>$3.75</th> </tr> </tfoot>


</table>

The table footer belongs at the bottom of the table. It formats text in a similar manner to a table header.
2001 Prentice Hall, Inc.
All rights reserved.

4
67 68 69 </body> </html>

Outline
Table1.html

Program Output Table Caption

Table header

Start of table body

End of table body


Table footer
2001 Prentice Hall, Inc.
All rights reserved.

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

Outline
Table2.html

The span attribute indicates width of the data cell in number of columns.

The align attribute is used to horizontally align data in a cell.

2001 Prentice Hall, Inc.


All rights reserved.

6
30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 <!-- rowspans and colspans merge the specified <!-- number of cells vertically or horizontally <tr> --> -->

Outline

Table2.html <!-- Merge two rows --> <th rowspan = "2"> <img src = "camel.gif" width = "205" height = "167" alt = "Picture of value a camel" /> The of the colspan attribute gives </th>

the amount of columns taken up by the cell.

<!-- Merge four columns --> <th colspan = "4" valign = "top"> <h1>Camelid comparison</h1><br /> <p>Approximate as of 8/99</p> The vertical alignment of data in a cell can </th> </tr> be specified with the valign attribute.
<tr valign = "bottom"> <th># of Humps</th> <th>Indigenous region</th> <th>Spits?</th> <th>Produces Wool?</th> </tr> </thead>

<tbody>
<tr> <th>Camels (bactrian)</th> <td>2</td> <td>Africa/Asia</td> <td rowspan = "2">Llama</td> <td rowspan = "2">Llama</td> </tr>

The value of the rowspan attribute gives the amount of rows taken up by the cell.

2001 Prentice Hall, Inc.


All rights reserved.

7
65 66 67 68 69 70 71 72 73 74 75 76 77 <tr> <th>Llamas</th> <td>1</td> <td>Andes Mountains</td> </tr> </tbody> </table> </body> </html>

Outline
Table2.html

Cell spanning the size of two rows.

Program Output Cell spanning the size of four columns.

2001 Prentice Hall, Inc.


All rights reserved.

8
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 5.3: form.html --> <!-- Form Design Example 1 --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Forms</title> </head> <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <!-- This tag starts the form, gives the method of <!-- sending information and the location of form <!-- scripts. Hidden inputs contain <!-- non-visual information <form method = "post" action = "/cgi-bin/formmail"> <p> --> --> --> -->

Outline
Form.html Each form must begin and end with form tags.

The method attribute specifies how the forms data is sent to the Web server. The post method appends form data to the browser request. The value of the action attribute specifies the URL of a script on the Web server.

<input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p> A hidden value for the type

Input elements are used to send data to the script that processes the form.

attribute sends data that is not entered by the user.

2001 Prentice Hall, Inc.


All rights reserved.

9
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <!-- <input type = "text"> inserts a text box --> <p><label>Name: <input name = "name" type = "text" size = "25" maxlength = "30" /> </label></p> <p>

Outline
Form.html

The size attribute gives the number of characters visible in the text box.

<!-- input types "submit" and "reset" insert --> <!-- buttons for submitting and clearing the --> <!-- form's contents --> <input type = "submit" value = The maxlength attribute gives the maximum "Submit Your Entries" /> number of characters the user can input. <input type = "reset" value = "Clear Your Entries" /> </p> </form> </body> </html>

The value attribute displays a name on the buttons created.

The label element describes the data the user needs to enter in the text box.

2001 Prentice Hall, Inc.


All rights reserved.

10

Outline

Program Output

Text box created using input element.

Submit button created using input element.

Reset button created using input element.

2001 Prentice Hall, Inc.


All rights reserved.

11
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 5.4: form2.html --> <!-- Form Design Example 2 --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Forms</title> </head> <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <form method = "post" action = "/cgi-bin/formmail"> <p> <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p> <p><label>Name: <input name = "name" type = "text" size = "25" /> </label></p>

Outline
Form2.html

2001 Prentice Hall, Inc.


All rights reserved.

12
35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 <!-- <textarea> creates a multiline textbox --> <p><label>Comments:<br /> <textarea name = "comments" rows = "4" cols = "36"> Enter your comments here. </textarea> </label></p> <!-- <input type = "password"> inserts a --> <!-- textbox whose display is masked with --> <!-- asterisk characters --> <p><label>E-mail Address: <input name = "email" type = "password" size = "25" /> Setting </label></p> <p> <strong>Things you liked:</strong><br />

Outline
Form2.html

The textarea element renders a text area when the page is displayed. The size of the text area can be specified with the rows and cols attribute.

an input elements type attribute to checkbox will create a checkbox.

<label>Site design <input name = "thingsliked" type = "checkbox" value = "Design" /></label>
<label>Links <input name = "thingsliked" type = "checkbox" value = "Links" /></label>

Checkboxes that belong to the same group must have same value in the name attribute.

<label>Ease of use <input name = "thingsliked" type = "checkbox" value = "Ease" /></label>
<label>Images <input name = "thingsliked" type = "checkbox" value = "Images" /></label>

2001 Prentice Hall, Inc.


All rights reserved.

13
69 70 71 72 73 74 75 76 77 78 79 80 81 82 <label>Source code <input name = "thingsliked" type = "checkbox" value = "Code" /></label> </p> <p> <input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> </p>

Outline
Form2.html

</form>
</body> </html>

Program Output

Text area created with input element.

Checkbox options created with input element.

2001 Prentice Hall, Inc.


All rights reserved.

14
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 5.5: form3.html --> <!-- Form Design Example 3 --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Forms</title> </head> <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <form method = "post" action = "/cgi-bin/formmail"> <p> <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p> <p><label>Name: <input name = "name" type = "text" size = "25" /> </label></p>

Outline
Form3.html

2001 Prentice Hall, Inc.


All rights reserved.

15
35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 <p><label>Comments:<br /> <textarea name = "comments" rows = "4" cols = "36"></textarea> </label></p> <p><label>E-mail Address: <input name = "email" type = "password" size = "25" /></label></p> <p>

Outline
Form3.html

<strong>Things you liked:</strong><br />


<label>Site design <input name = "things" type = "checkbox" value = "Design" /></label> <label>Links <input name = "things" type = "checkbox" value = "Links" /></label> <label>Ease of use <input name = "things" type = "checkbox" value = "Ease" /></label> <label>Images <input name = "things" type = "checkbox" value = "Images" /></label> <label>Source code <input name = "things" type = "checkbox" value = "Code" /></label> </p>

2001 Prentice Hall, Inc.


All rights reserved.

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

Outline
Form3.html

The checked attribute will mark this radio option by default.

An input element with type value equal to radio creates radio buttons.

2001 Prentice Hall, Inc.


All rights reserved.

17
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 <p> <label>Rate our site:

Outline

<!-- The <select> tag presents a drop-down --> Form3.html <!-- list with choices indicated by the --> <!-- <option> tags --> <select name = "rating"> <option selected = "selected">Amazing</option> <option>10</option> <option>9</option> <option>8</option> The select element <option>7</option> creates a drop down list. <option>6</option> <option>5</option> <option>4</option> <option>3</option> <option>2</option> The selected attribute selects a <option>1</option> default value for the drop down list. <option>Awful</option> </select> </label> </p> <p>

<input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> </p> </form> </body> </html>

The option tag is used for each option in the drop down list.

2001 Prentice Hall, Inc.


All rights reserved.

18

Outline
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.
2001 Prentice Hall, Inc.
All rights reserved.

19

Outline
Program Output

2001 Prentice Hall, Inc.


All rights reserved.

20
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 5.6: links.html --> <!-- Internal Linking --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - List</title> </head> <body>

Outline
Links.html

To internally link, place a # sign in front of the name of the desired anchor element within the page.

<!-- <a name = ".."></a> creates an internal hyperlink --> <p><a name = "features"></a></p> <h1>The Best Features of the Internet</h1>

<!-- An internal link's address is "#linkname" --> <p><a href = "#ceos">Go to <em>Favorite CEOs</em></a></p>
<ul> <li>You can meet people from countries around the world.</li> <li>You have access to new media as it becomes public: <ul> <li>New games</li> <li>New applications <ul> <li>For Business</li> <li>For Pleasure</li> </ul> </li>

2001 Prentice Hall, Inc.


All rights reserved.

21
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 <li>Around the clock news</li> <li>Search Engines</li> <li>Shopping</li> <li>Programming <ul> <li>XHTML</li> <li>Java</li> <li>Dynamic HTML</li> <li>Scripts</li> <li>New languages</li> </ul> </li> </ul> </li> <li>Links</li> <li>Keeping in touch with old friends</li> <li>It is the technology of the future!</li> </ul> <!-- Named anchor --> <p><a name = "ceos"></a></p> <h1>My 3 Favorite <em>CEOs</em></h1> <p>

Outline
Links.html

An anchor named ceos will be created at this point on the page. This anchor does not link and will not be seen on the page. However, other anchors can refer to this anchor and link to it.

<!-- Internal hyperlink to features --> <a href = "#features">Go to <em>Favorite Features</em> </a></p>

2001 Prentice Hall, Inc.


All rights reserved.

22
66 67 68 69 70 71 72 73 <ol> <li>Bill Gates</li> <li>Steve Jobs</li> <li>Michael Dell</li> </ol> </body> </html>

Outline
Links.html

Program Output

Clicking on this internal link will bring the user to the bottom of the page where My 3 Favorite CEOs is located.

2001 Prentice Hall, Inc.


All rights reserved.

23
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <?xml version = "1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 5.7: picture.html --> <!-- Creating and Using Image Maps --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Internet and WWW How to Program - Image Map </title> </head> <body> <p>

Outline
Picture.html

The area element is used to create hotspots.

<!-- The <map> tag defines an image map --> <map id = "picture">

The shape attribute defines a shape for the hotspot.

<!-- The "shape = rect" indicates a rectangular --> The first two integers of the <!-- area, with coordinates for the upper-left --> coordinate attribute define the (x,y) <!-- and lower-right corners --> <area href = "form.html" shape = "rect" coordinate of the upper-left hand coords = "2,123,54,143" corner of the rectangle. alt = "Go to the feedback form" /> The last two integers define the <area href = "contact.html" shape = "rect" coords = "126,122,198,143" (x,y) coordinate of the lower-right alt = "Go to the contact page" /> hand corner of the rectangle. <area href = "main.html" shape = "rect" coords = "3,7,61,25" alt = "Go to the homepage" /> <area href = "links.html" shape = "rect" coords = "168,5,197,25" 2001 Prentice Hall, Inc. alt = "Go to the links page" /> All rights reserved.

24
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 <!-- Value poly creates a hotspot in the shape --> <!-- of a polygon, defined by coords --> <area shape = "poly" alt = "E-mail the Deitels" coords = "162,25,154,39,158,54,169,51,183,39,161,26" href = "mailto:deitel@deitel.com" /> <!-- The "shape = circle" indicates a circular <!-- area with center and radius listed <area href = "mailto:deitel@deitel.com" shape = "circle" coords = "100,36,33" alt = "E-mail the Deitels" /> </map> --> -->

Outline
Picture.html

Assigning poly to the shape attribute creates a polygon with coordinates defined by the coords attribute.

<!-- <img src =... usemap = "#id"> indicates that the --> Assigning circle to the shape <!-- indicated image map is used with this image --> attribute creates a circle, with <img src = "deitel.gif" width = "200" height = "144" a center and radius specified alt = "Deitel logo" usemap = "#picture" /> by the coords attribute. </p> </body> </html>

The image map assigned to the usemap attribute will be used with the image.

The # in front of the name of the image map indicates that an internal image map is being used.

2001 Prentice Hall, Inc.


All rights reserved.

25

Outline
Program Output Selecting the Feedback hotspot links to the page below.

Hotspots created using the area element.

2001 Prentice Hall, Inc.


All rights reserved.

26
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 5.8: main.html --> <!-- <meta> tag --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> <!-- <meta> tags give search engines information --> <!-- they need to catalog your site --> <meta name = "keywords" content = "Webpage, design, XHTML, tutorial, personal, help, index, form, contact, feedback, list, links, frame, deitel" /> <meta name = "description" content = "This Web site will help you learn the basics of XHTML and Webpage design through the use of interactive examples and instruction." /> </head> <body>

Outline
Main.html The meta element provides information to search engines about the document.

The name attribute describes the type of meta element.

The content attribute provides the information search engines use to catalog pages.

<h1>Welcome to Our Web Site!</h1>


<p>We have designed this site to teach about the wonders of <strong><em>XHTML</em></strong>. <em>XHTML</em> is better equipped than <em>HTML</em> to represent complex data on the Internet. <em>XHTML</em> takes advantage of XMLs strict syntax to ensure well-formedness. Soon you will know about many of the great new features of <em>XHTML.</em></p>

2001 Prentice Hall, Inc.


All rights reserved.

27
36 37 38 39 40 <p>Have Fun With the Site!</p> </body> </html>

Outline
Main.html

2001 Prentice Hall, Inc.


All rights reserved.

28
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!-- Fig. 5.9: index.html --> <!-- XHTML Frames I --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Main</title> <meta name = "keywords" content = "Webpage, design, XHTML, tutorial, personal, help, index, form, contact, feedback, list, links, frame, deitel" />

Outline
Index.html

The frameset element informs the browser that the page contains frames.

<meta name = "description" content = "This Web site will help you learn the basics of XHTML and Web page design through the use of interactive examples The cols and instruction." /> </head> <!-- The <frameset> tag sets the frame dimensions <frameset cols = "110,*">

<!-- Individual frame elements specify which pages --> <!-- appear in a given frame --> <frame name = leftframe" src = "nav.html" /> <frame name = "main" src = "main.html" />

attribute gives the width of each frame. The first vertical frame created is 110 pixels from the left of the browser. The second vertical --> frame fills the rest of the browser, as indicated by the * value.

The frame element loads documents into the frameset. The src attribute indicates the document to be loaded.

Nav.html is loaded into the left frame and main.html is loaded into the right frame.
2001 Prentice Hall, Inc.
All rights reserved.

29
30 31 32 33 34 35 36 37 38 39 <noframes> <p>This page uses frames, but your browser does not support them.</p> <p>Please, <a href = "nav.html">follow this link to browse our site without frames</a>.</p> </noframes> </frameset> </html>

Outline
Index.html

The noframes element provides an option for browsers that do not display frames.

Left frame (leftframe)

Right frame (main)

2001 Prentice Hall, Inc.


All rights reserved.

30

Outline

Program Output

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

2001 Prentice Hall, Inc.


All rights reserved.

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

Outline
Nav.html

The target attribute specifies where the document linked by the anchor should display.

The document will open in the frame called main.

2001 Prentice Hall, Inc.


All rights reserved.

32
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <a href = "header.html" target = "main"> <img src = "buttons/header.jpg" width = "65" height = "50" alt = "Header Page" /> </a><br /> <a href = "table1.html" target = "main"> <img src = "buttons/table.jpg" width = "65" height = "50" alt = "Table Page" /> </a><br />

Outline
Nav.html

<a href = "form.html" target = "main"> <img src = "buttons/form.jpg" width = "65" height = "50" alt = "Feedback Form" /> </a><br /> </p>
</body> </html>

Other values of target can be specified to load documents onto a new browser window, into the same frame that the anchor appears in and onto a full browser window, removing all frames.

2001 Prentice Hall, Inc.


All rights reserved.

33
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!-- Fig. 5.11: index2.html --> <!-- XHTML Frames II --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Main</title> <meta name = "keywords" content = "Webpage, design, divided XHTML, tutorial, personal, help, index, form, contact, feedback, list, links, frame, deitel" /> <meta name = "description" content = "This Web site will help you learn the basics of XHTML and Web page design through the use of interactive examples and instruction." /> </head> <frameset cols = "110,*"> <frame name = "nav" src = "nav.html" />

Outline
Index2.html

The vertical frame on the right is into two horizontal frames.

The rows attribute works in a similar manner to the cols attribute, except the rows attribute gives the height of each frame.

<!-- Nested framesets are used to change the --> <!-- formatting and spacing of the frameset --> <!-- as a whole --> <frameset rows = "175,*"> <frame name = "picture" src = "picture.html" /> <frame name = "main" src = "main.html" /> </frameset>

2001 Prentice Hall, Inc.


All rights reserved.

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

Outline
Index2.html

Program Output

The nested frame element splits the right vertical frame into two horizontal frames.

2001 Prentice Hall, Inc.


All rights reserved.

You might also like