1. Class 11

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

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

4. Navigation LayoutUsing Lists Navigation hyperlink areas are semantically “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). 4

5. CSS & XHTML Navigation List CSS: div#leftcolumnul { list-style-image:url(arrow.gif); } div#leftcolumn a { text-decoration:none; } XHTML: <div id="leftcolumn"><ul> <li><a href="home.html">Home</a></li> <li><a href="spring.html">Spring</a></li> <li><a href="summer.html">Summer</a></li> <li><a href="fall.html">Fall</a></li> <li><a href="winter.html">Winter</a></li> </ul> </div> 5 twocolumn1.html

6. Display Property Configures how and if an element is displayed display:none ; The element will not be displayed. display:block ; The element is rendered as a block element – even if it is actually an inline element,such as a hyperlink. display:inline; The element will be rendered as an inline element – even if it is actually a block element – such as a <li>. 6

8. Z-Index Property Modifies the stacking order of elements on a Web page. default z-index value is “0” Elements with higher z-index values will appear stacked on top of elements with lower z-index values rendered on the same area of the page. 8

9. Three ColumnPage 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! 9

10. 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; Three Column Layout 10