1 XHTML continued Use the anchor tag to link from page to pageUse the anchor tag to link from page to page Create absolute and relative linksCreate absolute and relative links Create a link which opens a new browser windowCreate a link which opens a new browser window Create links internal to the same pageCreate links internal to the same page Create linksCreate links Create a table on a web pageCreate a table on a web page Use attributes to format tables, table rows, and table cellsUse attributes to format tables, table rows, and table cells Use a table to format an entire web pageUse a table to format an entire web page

2 XHTML tag The anchor tag The anchor tag Used to specify a hyperlink reference (href) to a web page you want to display. Used to specify a hyperlink reference (href) to a web page you want to display. The text between the and is displayed on the web page The text between the and is displayed on the web page href Attribute href Attribute used to indicate the document to link toused to indicate the document to link to

3 XHTML tag Absolute link Absolute link Yahoo Yahoo Relative link Relative link Home Home

4 More on Relative Linking Contact Contact Collars Collars Home Home Dog Bathing Dog Bathing Relative links from the home page: index.htm

5 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. The target attribute can be used on the anchor tag to open a link in a new browser window. Yahoo! Yahoo!

6 XHTML Internal Links using the tag A link to a part of a web page A link to a part of a web page Also called bookmarks, named fragments, named anchors Also called bookmarks, named fragments, named anchors Two components: 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. 2. The anchor tag that links to the bookmark or named fragment of a web page. This uses the href attribute. Back to Top 2. The anchor tag that links to the bookmark or named fragment of a web page. This uses the href attribute. Back to Top

7 XHTML Links using the tag An link will automatically launch the default mail program configured for the browser. An link will automatically launch the default mail program configured for the browser.

8 Questions 1. Describe when to use an absolute link. Is the http protocol used in the href value? 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? 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 link? 3. What happens when a web site visitor clicks on an link?

9 XHTML Using Tables An XHTML table is composed of rows and columns -- similar to a spreadsheet. 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. Each individual table cell is at the intersection of a specific row and column. tag tag Contains the table Common attributes: border, width, align tag Contains a table row tag Contains a table row tag Contains a table cell tag Contains a table cell

10 XHTML Table Example Name Name Birthday Birthday James James 11/08 11/08 Karen Karen 4/17 4/17 Sparky Sparky 11/28 11/28 </table>

11 XHTML Table Example 2 Name Name Birthday Birthday James James 11/08 11/08 Karen Karen 4/17 4/17 Sparky Sparky 11/28 11/28 </table> Using the tag

12 XHTML Common Table Attributes align align Use instead to center tables (see text) border border bordercolor bordercolor width width Percentage or pixels?Percentage or pixels? bgcolor bgcolor summary summary title title

13 XHTML Common Table Cell Attributes bgcolor bgcolor align align colspan colspan rowspan rowspan valign valign width width

14 XHTML colspan Attribute Birthday List Birthday List </tr> James James 11/08 11/08 Karen Karen 4/17 4/17 </table>

15 XHTML rowspan Attribute James James 11/08 11/08 </table>

16 Questions 1. Describe two reasons to use tables on a web page. 1. Describe two reasons to use tables on a web page. 2. Describe the difference between the cellpadding and cellspacing table attributes. 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. 3. Describe the method preferred by the W3C to align a table on a web page.

17 XHTML– Using a Table to Format a Web Page This is the banner area This is the banner area Place Navigation here Place Navigation here Page content goes here Page content goes here </table>

18 Additional Table Layouts

19 Flexible & Fixed Table Widths Fixed Table: Fixed Table: Table width attribute in pixelsTable width attribute in pixels Flexible Table: Flexible Table: Table width attribute in percentTable width attribute in percent

20 Nested Tables Outer table used to configure page layout Outer table used to configure page layout Inner table used to organize some information on the page Inner table used to organize some information on the page

21 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. 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. 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. 3. True or False. Tables can be nested within other tables.