HTML links and tables
Download
Report
Transcript HTML links and tables
XHTML continued
• 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
1
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
2
XHTML
<a> tag
Absolute link
<a href=“http://yahoo.com”>Yahoo</a>
Relative link
<a href=“index.htm”>Home</a>
3
More on
Relative Linking
Relative links
from the home
page: index.htm
<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>
4
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>
5
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.
6
<a href=“#top”>Back to Top</a>
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>
7
Questions
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?
8
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
9
<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
10
<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
11
XHTML
Common Table Attributes
align
Use <div> instead to center tables (see
text)
border
bordercolor
width
• Percentage or pixels?
bgcolor
summary
title
12
XHTML
Common Table Cell Attributes
bgcolor
align
colspan
rowspan
valign
width
13
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>
14
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>
15
Questions
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.
16
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>
17
Additional Table Layouts
18
Flexible & Fixed Table Widths
Fixed Table:
• Table width attribute in pixels
• http://officemax.com
Flexible Table:
• Table width attribute in percent
• http://officedepot.com
19
Nested Tables
Outer table used to
configure page
layout
Inner table used to
organize some
information on the
page
20
Questions
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.
21