Web Development & Design Foundations with XHTML Chapter 7 Key Concepts

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

Opening a Link in a New Browser Window The target attribute on the anchor element opens a link in a new browser window or new browser tab. Yahoo! 3

XHTML Linking to Fragment Identifiers A link to a part of a Web page Also called named fragments, fragment ids Two components: 1.The element that identifies the named fragment of a Web page. This requires the id attribute. ….. 2. The anchor tag that links to the named fragment of a Web page. This uses the href attribute. Back to Top 4 Note the use of the # in the anchor tag!

Hands-On Practice 7.1 Pages Chapter7/starter1.html Chapter7/favorites.html

CSS Pseudo-classes Pseudo-classes and the anchor element ◦ link – default state for a hyperlink ◦ visited –a hyperlink that has been visited ◦ focus – triggered when the hyperlink has focus ◦ hover – triggered when the mouse moves over the hyperlink ◦ active – triggered when the hyperlink is being clicked a:link {color:#000066;} a:visited {color:#003366;} a:focus {color:#FF0000;} a:hover {color:#0099CC;} a:active {color:#FF0000;} a:link {color:#000066;} a:visited {color:#003366;} a:focus {color:#FF0000;} a:hover {color:#0099CC;} a:active {color:#FF0000;}

CSS Pseudo-classes a:link { background-color: #ffffff; color: #ff0000; } a:visited { background-color: #ffffff; color: #00ff00; } a:hover { background-color: #ffffff; color: #000066; text-decoration: none; } 7

Styling CSS “buttons” 8

CSS “buttons” #button a { border: 2px inset #cccccc; padding: 3px 15px; color: #FFFFFF; background-color: #000066; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; text-align: center; text-decoration:none; } #button a:link { color: #FFFFFF; } #button a:visited { color: #CCCCCC; } #button a:focus { color: #DDA0DD; background-color:#000000; border:2px outset #000000; } #button a:hover { color: #66CCFF; border:2px outset #cccccc; } #button a:active { color: #DDA0DD; border:2px outset #000000; } 9 CSS Buttons! Home Products Services Contact About

Hands-On Practice 7.2 Pages Chapter7/link1.html Chapter7/link2.html Chapter7/link3.html

Navigation Layout Using Lists Navigation hyperlink areas are sematically “lists" of links Some web design gurus argue that navigation links should be configured using XHTML list elements Use the list-style-image property to configure the “bullet" list-style-image:url(arrow.gif). 11

CSS & XHTML Navigation List CSS: div#leftcolumn ul { list-style-image:url(arrow.gif); } div#leftcolumn a { text-decoration:none; } XHTML: Home Spring Summer Fall Winter 12 twocolumn1.html

Examples Chapter7/twocolumn.html Chapter7/arrow.gif Chapter7/twocolumn1.html

CSS & XHTML Navigation List XHTML: Home Spring Summer Fall Winter CSS: div.nav li { display:inline; list-style-type:none; } div.nav a { padding:5px; background-color:#e8b9e8; color:#000066; text-decoration:none; font-family:Verdana, Arial, sans-serif; text-align:center; } div.nav a:link {color:#000066; background-color:#e8b9e8; } div.nav a:visited {color:#000000; background-color:#cc66cc; } div.nav a:focus {color:#cccccc; background-color:#000000} div.nav a:hover {color:#ffffff; background-color:#cc66cc; } div.nav a:active {color:#cccccc; background-color:#cc66cc; } CSS: div.nav li { display:inline; list-style-type:none; } div.nav a { padding:5px; background-color:#e8b9e8; color:#000066; text-decoration:none; font-family:Verdana, Arial, sans-serif; text-align:center; } div.nav a:link {color:#000066; background-color:#e8b9e8; } div.nav a:visited {color:#000000; background-color:#cc66cc; } div.nav a:focus {color:#cccccc; background-color:#000000} div.nav a:hover {color:#ffffff; background-color:#cc66cc; } div.nav a:active {color:#cccccc; background-color:#cc66cc; } home0.html

Example Chapter7/home0.html Chapter7/wildflower0.css