Web Development & Design Foundations with XHTML Chapter 7 Key Concepts

2 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 named anchor 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 both screen and print display Utilize the “cascade” in CSS

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

4 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!

5 XHTML Internal Links using the element 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

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

7 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; }

8 Styling CSS “buttons”

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

10 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:.navBar { text-decoration:none; list-style-image:url(arrow.gif); XHTML: Home Spring Summer Fall Winter twocolumn1.html

CSS & XHTML Navigation List CSS:.nav { padding: 5px; background-color:#cc66cc; color:#000066; font-family:Verdana, Arial, sans-serif; text-align:center; }.nav li { display:inline; list-style-type:none; } a.nav { text-decoration:none; } XHTML: Home Spring Summer Fall Winter 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.

14 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!

15 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;

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

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 The Cascade

18 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

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