1. 1 Web Developer & Design Foundations with XHTML Chapter 3 Key Concepts

2. © 2007 Pearson Education 2 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 –Use a table to format an entire web page

3. © 2007 Pearson Education 3 XHTML tag The anchor tag 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 href Attribute –used to indicate the document to link to

4. © 2007 Pearson Education 4 XHTML tag Absolute link Yahoo Relative link Home

5. © 2007 Pearson Education 5 More on Relative Linking Contact Collars Home Dog Bathing Relative links from the home page: index.htm

6. © 2007 Pearson Education 6 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. Yahoo!

7. © 2007 Pearson Education 7 XHTML Internal Links using the 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. 2. The anchor tag that links to the bookmark or named fragment of a web page. This uses the href attribute. Back to Top

8. © 2007 Pearson Education 8 XHTML Email Links using the tag An e-mail link will automatically launch the default mail program configured for the browser. me@hotmail.com

9. © 2007 Pearson Education 9 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?

10. © 2007 Pearson Education 10 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. tag Contains the table Common attributes: border, width, align tag Contains a table row tag Contains a table cell

11. © 2007 Pearson Education 11 XHTML Table Example Name Birthday James 11/08 Karen 4/17 Sparky 11/28

12. © 2007 Pearson Education 12 XHTML Table Example 2 Name Birthday James 11/08 Karen 4/17 Sparky 11/28 Using the tag

13. © 2007 Pearson Education 13 XHTML Common Table Attributes align Use instead to center tables (see text) border bordercolor width –Percentage or pixels? bgcolor summary title

14. © 2007 Pearson Education 14 XHTML Common Table Cell Attributes bgcolor align colspan rowspan valign width

15. © 2007 Pearson Education 15 XHTML colspan Attribute Birthday List James 11/08 Karen 4/17

16. © 2007 Pearson Education 16 XHTML rowspan Attribute James 11/08

17. © 2007 Pearson Education 17 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.

18. © 2007 Pearson Education 18 XHTML– Using a Table to Format a Web Page This is the banner area Place Navigation here Page content goes here

19. © 2007 Pearson Education 19 Additional Table Layouts

20. © 2007 Pearson Education 20 Flexible & Fixed Table Widths Fixed Table: –Table width attribute in pixels –http://officemax.comhttp://officemax.com Flexible Table: –Table width attribute in percent –http://officedepot.comhttp://officedepot.com

21. © 2007 Pearson Education 21 Nested Tables Outer table used to configure page layout Inner table used to organize some information on the page

22. © 2007 Pearson Education 22 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.

23. © 2007 Pearson Education 23 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.