CS 200 – Web Tech I Web Site Organization – (con't)

Distinguish between and Link to other web pages Washington Monument Link to an external style sheet (in a folder called css) <link href="css/labfivennn.css" type="text/css" rel="stylesheet" />

Review – Putting the pieces together

Ask Yourself #1 … In the HTML file  How do you get sections (masthead, sidebar, content, and footer) on the page?  What goes in the sidebar?  What goes in the footer?

Ask Yourself… In the HTML file  How do you get sections on the page? 's, like …  What goes in the sidebar? A list of links …  What goes in the footer? A list of links …

Ask Yourself (#2)... In the CSS file  How do you make h1 a blue color with yellow background?  How do you make the sidebar links have no bullets and no underlining?  How do you make the footer links horizontal with no bullets and no underlining?

Ask Yourself (#2)... In the CSS file  How to make h1 a blue color with yellow background? h1 { color: blue; background-color: yellow; }  How to make the sidebar links have no bullets and no underlining? #sidebar a { text-decoration: none; } #sidebar ul { list-style-type: none; }  How to make the footer links horizontal with no bullets and no underlining? #footer a { text-decoration: none; } #footer ul { list-style-type: none; } #footer ul li { display: inline; }

Ask Yourself #3  How do you connect the.css file to an html page?  Where does that line belong?

Ask Yourself #3  How do you connect the.css file to an html page?  Where does that line belong? in the section of the html page

Ask Yourself #4 How can the masthead appear on all pages?  What part goes in the CSS file?  What part goes in the HTML file?

Ask Yourself #4 How can the masthead appear on all pages?  What part goes in the CSS file? #mastheadregion { width: 100%; background-color: blue; … } #masthead { background-image: url(“../images/mastheadNNN.jpg"); }  What part goes in the HTML file?

Ask Yourself #5 Where do each of these go?  h1 { color: blue; background-color: yellow; } 

Ask Yourself #5 Where do each of these go?  h1 { color: blue; background-color: yellow; } In the CSS file  In an html file – specifically, the home page of this lab  In each.html file, near the bottom  In each.html file, within

Schedule Today & Tuesday. Finish Lab 05 Homework 05 Thursday Test #2 Suggestion: Review Homework 3, 4, and 5 (in Laulima) to prepare for Test #2