Transcript Feb 25
CS 200 – Web Tech I
Web Site Organization – (con't)
Distinguish between <a> and <link>
Link to other web pages
<a
href="http://xxxxx">
Washington Monument
</a>
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?
<div>'s, like <div id="footer"> … </div>
What goes in the sidebar? A list of links
<div id="sidebar">
<ul>
<li><a href=" …."> … </a></li>
</ul>
</div>
What goes in the footer? A list of links
<div id="footer">
<ul>
<li><a href=" …."> … </a></li>
</ul>
</div>
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?
<link href="css/labfiveNNN.css" rel="stylesheet" type="text/css" />
Where does that line belong?
in the <head> </head> 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?
<div id="mastheadregion"><div id="masthead"></div></div>
Ask Yourself #5
Where do each of these go?
h1 { color: blue; background-color: yellow; }
<img src="akaka.jpg" />
<div id="footer">
<link rel="stylesheet" href="css/labfiveNNN.css"
type="text/css" />
Ask Yourself #5
Where do each of these go?
h1 { color: blue; background-color: yellow; }
In the CSS file
<img src="akaka.jpg" />
In an html file – specifically, the home page of this lab
<div id="footer">
In each .html file, near the bottom
<link rel="stylesheet" href="css/labfiveNNN.css"
type="text/css" />
In each .html file, within <head>
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