Web Development & Design Foundations with XHTML Chapter 7 Key Concepts

Learning Outcomes In this chapter, you will learn how to : Code relative hyperlinks to Web pages in folders within a Web site Configure a hyperlink to a fragment identifier internal to a Web page Add interactivity to Web pages with CSS pseudo-classes Configure a navigation layout list with CSS Configure three-column page layouts using CSS Configure CSS for screen, print, and mobile device display Utilize the “cascade” in CSS 2

More on Relative Linking Contact Collars Home Dog Bathing 3 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! 4

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 5 Note the use of the # in the anchor tag!

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

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

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

Checkpoint State a reason to use an unordered list to configure navigation links. 2. You are using CSS pseudo-classes on a Web page to configure the navigation links to look like buttons. You want the “regular” links in the Web page content to be configured as they normally would (not look like a button). Describe how you could configure the styles and XHTML to accomplish this.

Three Column Page Layout A common Web page layout consists of a header across the top of the page with three columns below: navigation, content, and sidebar. If you are thinking about this layout as a series of boxes—you’re thinking along the right lines for configuring pages using CSS! 14

Three Column Layout container sets default background color, text color, and an minimum width Left-column navigation ◦ float: left; ◦ width:150px; Right-column content ◦ float: right; ◦ width:200px; Center column – uses the remaining screen room available room after the floating columns display ◦ margin: 0 200px 0 150px; Footer – clears the float ◦ clear:both; 15

CSS Styling for Print Create an external style sheet with the configurations for browser display. Create a second external style sheet with the configurations for printing. Connect both of the external style sheets to the web page using two elements. 16

CSS Styling for the Mobile Web eMarketer.com predicts million mobile Internet users by 2013 Three Approaches to Mobile Web: ◦ Develop a new mobile site with a.mobi TLD ◦ Create a separate Web site hosted within your current domain targeted for mobile users ◦ Use CSS to create a style sheet to configure your current Web site for display on mobile devices.

Mobile Web Limitations Small Screen Size Low bandwidth Limited fonts Limited color Awkward controls Lack of Flash support Limited processor and memory Cost per kilobyte

Design Techniques for Mobile Web One column design Avoid floats, tables, frames Descriptive page title Descriptive heading tags Optimize images Descriptive alt text for images Elminate unneeded images Navigation in lists Provide “Skip to Content” hyperlink Provide “Back to Top” hyperlink Notice the overlap between between these techniques and designing to provide for accessibility?

The Cascade This “cascade” applies the styles in the order of precedence. Site-wide global styles can be configured in the external CSS. Styles can be overridden when needed for a specific page or element.

Checkpoint State an advantage of using CSS to style for print. 2. Describe how to choose whether to configure an XHTML tag, create a class, or create an id when working with CSS. 3. List the following terms in the order that the properties and attributes are applied when using CSS.  Inline styles  External styles  XHTML attributes  Embedded styles 21

Summary This chapter introduced you to a variety of topics related to hyperlinks, lists, and layout. 22