Transcript XHTML Hyperlinks and Tables

Web Developer Foundations:
Using XHTML
Chapter 3
XHTML Hyperlinks
and Tables
1
Learning
Outcomes

In this chapter, you will learn about:

Today: 2/3/2005:
•
•
•
•
•

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
Next Week: 2/10/2005:
• 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
2
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
Absolute link
<a href=“http://yahoo.com”>Yahoo</a>
 Relative link
<a href=“index.htm”>Home</a>

3
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>
4
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:[email protected]”>[email protected]</a>
5
End of Chapter 3 Lecture
Feb. 3, 2005

Example Web Site:
Example Links

The remainder of Chapter 3 will be
covered next week (Feb 10. 2005).
6
XHTML
Using 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> tag
Contains the table
Common attributes: border, width, align

<tr> tag

<td> tag
Contains a table row
Contains a table cell
7
<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>
XHTML
Table Example
8
<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>
XHTML
Table Example 2
Using the <th> tag
9
XHTML
Common Table Attributes

align
Use <div> instead to center tables (see text)



border
bordercolor
width




Percentage or pixels?
bgcolor
summary
title
10
XHTML
Common Table Cell Attributes
bgcolor
 align
 colspan
 rowspan
 valign

11
XHTML
colspan 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>
12
XHTML
rowspan 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>
13
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>
14
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.

15