1

Web Developer & Design Foundations with XHTML

Chapter 3Key Concepts

2

© 2007 Pearson Education

Learning Outcomes

• In this chapter, you will learn about:– Use the anchor tag to link from page to page– Create absolute and relative links– Create a link which opens a new browser

window– Create links internal to the same page– Create email links– Create a table on a web page– Use attributes to format tables, table rows, and

table cells– Use a table to format an entire web page

3

© 2007 Pearson Education

XHTML<a> tag

• The anchor tag• Used to specify a hyperlink reference

(href) to a web page you want to display.

• The text between the <a> and </a> is displayed on the web page

• href Attribute– used to indicate the document to link to

4

© 2007 Pearson Education

XHTML<a> tag

• Absolute link

<a href=“http://yahoo.com”>Yahoo</a>

• Relative link

<a href=“index.htm”>Home</a>

5

© 2007 Pearson Education

More on Relative Linking

• <a href="contact.htm">Contact</a>• <a href="products/collars.htm">Collars</a>• <a href="../index.htm">Home</a>• <a href="../services/bathing.htm">Dog

Bathing</a>

Relative links from the homepage: index.htm

6

© 2007 Pearson Education

Opening a Link in a New Browser Window• The target attribute can be used on

the anchor tag to open a link in a new browser window.

<a href="http://yahoo.com" target="_blank">Yahoo!</a>

7

© 2007 Pearson Education

XHTML Internal Links using the <a> tag

• A link to a part of a web page• Also called bookmarks, named fragments,

named anchors• Two components:

1. The anchor tag that identifies a bookmark or named fragment of a web page. This requires two attributes: the id attribute and the name attribute.

<a name=“top” id=“top”></a> 2. The anchor tag that links to the bookmark or named

fragment of a web page. This uses the href attribute. <a href=“#top”>Back to Top</a>

8

© 2007 Pearson Education

XHTML Email Links using the <a> tag

• An e-mail link will automatically launch the default mail program configured for the browser.

<a href=“mailto:me@hotmail.com”>me@hotmail.com</a>

9

© 2007 Pearson Education

Checkpoint 3.1

• 1. Describe when to use an absolute link. Is the http protocol used in the href value?

• 2. Describe when to use a relative link. Is the http protocol used in the href value?

• 3. What happens when a web site visitor clicks on an e-mail link?

10

© 2007 Pearson Education

XHTMLUsing Tables

• An XHTML table is composed of rows and columns -- similar to a spreadsheet.

• Each individual table cell is at the intersection of a specific row and column.

• <table> tagContains the table

Common attributes: border, width, align

• <tr> tagContains a table row

• <td> tagContains a table cell

11

© 2007 Pearson Education

XHTMLTable Example

<table border="1"> <tr> <td>Name</td> <td>Birthday</td> </tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr> <tr> <td>Sparky</td> <td>11/28</td> </tr></table>

12

© 2007 Pearson Education

XHTMLTable Example 2

<table border="1"> <tr> <th>Name</th> <th>Birthday</th> </tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr> <tr> <td>Sparky</td> <td>11/28</td> </tr></table>

Using the <th> tag

13

© 2007 Pearson Education

XHTMLCommon Table

Attributes• align

Use <div> instead to center tables (see text)

• border• bordercolor• width

– Percentage or pixels?

• bgcolor• summary• title

14

© 2007 Pearson Education

XHTMLCommon Table Cell Attributes

• bgcolor

• align

• colspan

• rowspan

• valign

• width

15

© 2007 Pearson Education

XHTMLcolspan Attribute

<table border="1"> <tr> <td colspan=“2”>

Birthday List</td></tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr></table>

16

© 2007 Pearson Education

XHTMLrowspan Attribute

<table border="1">

<tr>

<td rowspan=“2>

<img src=“cake.gif” alt=“cake” height=“100” width=“100” /></td>

<td>James</td>

</tr>

<tr>

<td>11/08</td>

</tr>

</table>

17

© 2007 Pearson Education

Checkpoint 3.2

• 1. Describe two reasons to use tables on a web page.

• 2. Describe the difference between the cellpadding and cellspacing table attributes.

• 3. Describe the method preferred by the W3C to align a table on a web page.

18

© 2007 Pearson Education

XHTML– Using a Table to

Format a Web Page<table border="0" width="80%"> <tr> <td colspan="3"><h2>This is the

banner area</h2></td> </tr> <tr> <td width="20%"

valign="top">Place Navigation here</td>

<td width="10">&nbsp;</td> <td>Page content goes here</td> </tr></table>

19

© 2007 Pearson Education

Additional Table Layouts

20

© 2007 Pearson Education

Flexible & Fixed Table Widths

• Fixed Table:– Table width attribute in pixels– http://officemax.com

• Flexible Table:– Table width attribute in percent– http://officedepot.com

21

© 2007 Pearson Education

Nested Tables

• Outer table used to configure page layout

• Inner table used to organize some information on the page

22

© 2007 Pearson Education

Checkpoint 3.3

• 1. Describe a reason to use a percentage width for a table that configures a web page layout. Provide an example of a page that uses this technique.

• 2. Describe a reason to use a fixed pixel width for a table that configures a web page layout. Provide an example of a page that uses this technique.

• 3. True or False. Tables can be nested within other tables.

23

© 2007 Pearson Education

Summary

• This chapter introduced the XHTML techniques used to create hyperlinks and tables.

• You will use these skills over and over again as you create Web pages.