Transcript tr - TeacherWeb

Web Developer & Design
Foundations with XHTML
Chapter 3
Key Concepts
1
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
2
–
Use
a
table
to
format
an
entire
web
page
© 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
3
© 2007 Pearson Education
XHTML
<a> tag
• Absolute link
<a href=“http://yahoo.com”>Yahoo</a>
• Relative link
<a href=“index.htm”>Home</a>
4
© 2007 Pearson Education
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>
5
© 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>
6
© 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.
7
<a href=“#top”>Back
© 2007 Pearson Education
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>
8
© 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?
© 2007 Pearson Education
9
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
Contains a table row
• <td> tag
Contains a table cell
© 2007 Pearson Education
10
<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
© 2007 Pearson Education
11
<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
© 2007 Pearson Education
12
XHTML
Common Table
Attributes
• align
Use <div> instead to center tables (see text)
• border
• bordercolor
• width
– Percentage or pixels?
• bgcolor
• summary
• title
13
© 2007 Pearson Education
XHTML
Common Table Cell Attributes
•
•
•
•
•
•
bgcolor
align
colspan
rowspan
valign
width
14
© 2007 Pearson Education
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>
© 2007 Pearson Education
15
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>
16
© 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.
17
© 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>
18
© 2007 Pearson Education
Additional Table
Layouts
19
© 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
20
© 2007 Pearson Education
Nested Tables
• Outer table
used to
configure
page layout
• Inner table
used to
organize
some
information
on the page
© 2007 Pearson Education
21
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.
22
© 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.
23
© 2007 Pearson Education