1 / 23

Web Developer & Design Foundations with XHTML

Web Developer & Design Foundations with XHTML. Chapter 3 Key Concepts. 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

colin-rhodes
Download Presentation

Web Developer & Design Foundations with XHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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. 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

  4. XHTML<a> tag • Absolute link <a href=“http://yahoo.com”>Yahoo</a> • Relative link <a href=“index.htm”>Home</a>

  5. More on Relative Linking • <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> Relative links from the home page: index.htm

  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. <a href="http://yahoo.com" target="_blank">Yahoo!</a>

  7. 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. <a href=“#top”>Back to Top</a>

  8. 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:me@hotmail.com”>me@hotmail.com</a>

  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. XHTMLUsing 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 tableCommon attributes: border, width, align • <tr> tagContains a table row • <td> tagContains a table cell

  11. XHTMLTable Example <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>

  12. XHTMLTable Example 2 Using the <th> tag <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>

  13. XHTMLCommon Table Attributes • align Use <div> instead to center tables (see text) • border • bordercolor • width • Percentage or pixels? • bgcolor • summary • title

  14. XHTMLCommon Table Cell Attributes • bgcolor • align • colspan • rowspan • valign • width

  15. XHTMLcolspan 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>

  16. XHTMLrowspan 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>

  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. XHTML– Using a Table toFormat 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>

  19. Additional Table Layouts

  20. Flexible & Fixed Table Widths • Fixed Table: • Table width attribute in pixels • http://officemax.com • Flexible Table: • Table width attribute in percent • http://officedepot.com

  21. Nested Tables • Outer table used to configure page layout • Inner table used to organize some information on the page

  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. 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.

More Related