View
219
Download
0
Category
Preview:
Citation preview
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"> </td> <td>Page content goes here</td> </tr></table>
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.
Recommended