Web Developer Foundations Using XHTML Chapter 3 XHTML

Web Developer Foundations: Using XHTML Chapter 3 XHTML Hyperlinks and Tables 1

Learning Outcomes n In this chapter, you will learn about: n Today: 2/3/2005: • • • n 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 n n 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 n used to indicate the document to link to Absolute link <a href=“http: //yahoo. com”>Yahoo</a> n Relative link <a href=“index. htm”>Home</a> n 3

XHTML Internal Links using the <a> tag n n n 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 n 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> 5

End of Chapter 3 Lecture Feb. 3, 2005 n Example Web Site: Example Links n The remainder of Chapter 3 will be covered next week (Feb 10. 2005). 6

XHTML Using Tables n n n 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 n <tr> tag n <td> tag Contains a table row Contains a table cell 7

<table border="1"> <tr> <td>Name</td> <td>Birthday</td> </tr> <td>James</td> <td>11/08</td> </tr> <td>Karen</td> <td>4/17</td> </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> <td>James</td> <td>11/08</td> </tr> <td>Karen</td> <td>4/17</td> </tr> <td>Sparky</td> <td>11/28</td> </tr> </table> XHTML Table Example 2 Using the <th> tag 9

XHTML Common Table Attributes n align Use <div> instead to center tables (see text) n n n bordercolor width n n Percentage or pixels? bgcolor summary title 10

XHTML Common Table Cell Attributes bgcolor n align n colspan n rowspan n valign n 11

XHTML colspan Attribute <table border="1"> <tr> <td colspan=“ 2”> Birthday List</td> </tr> <td>James</td> <td>11/08</td> </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> <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"><h 2>This is the banner area</h 2></td> </tr> <td width="20%" valign="top">Place Navigation here</td> <td width="10">  </td> <td>Page content goes here</td> </tr> </table> 14

Summary This chapter introduced the XHTML techniques used to create hyperlinks and tables. n You will use these skills over and over again as you create Web pages. n 15