First Web Pages Project
This is for lesson two
Instructions:
Use the code below to make your lesson two. This is the starter code for the first lessons in our week one web pages.
This first set of code below is what it looks like before we create a style sheet and move the internal styles in the 'head' tag to a new external location.
The second set of code is the new css file called week1styles.css and the lesson02.html after the changes made (in case you want to jump straigt to that point or were absent). The lesson02.html file belongs in the weekOne folder. The week1Styles.css file belongs in a new folder called 'css' at the root level with index.html.
Starter code for the lecture or video on external css
<!DOCTYPE html>
<html>
<head>
<title> Lesson Two: favorite links</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- The styles are internal if we use the style tag in the header like this. Any inline styles will overide any internal ones. And internal will overide any external ones. -->
<style type="text/css">
#container {
width:900px;
margin-left: 20px;
}
#header {
background-color:#FFA500;;
}
#footer {
background-color:#FFA500;
clear:both;
text-align:center;
}
#menu {
background-color:#FFD700;
height:200px;
width:200px;
float:left;
/* add padding here and to content*/
}
#content {
background-color:#EEEEEE;
height:200px;
width:700px;
float:left;
}
h1 {
margin-bottom:0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1> Main Title of Web Page</h1>
</div>
<div id="menu">
<!-- Add un-ordered outline tags <ul> <li> </li> </ul>
then change list items to be lesson 1 and lesson 2 links -->
<b> Menu</b> <br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content">
<h1> My favorite Links</h1>
<!-- Add ordered outline tags <ol> <li> </li> </ol>
then change list items to be your favorite links-->
</div>
<div id="footer">
Copyright © David the Teacher
</div>
</div>
</body>
</html>
Code after the lecture of video on external css
This is the css file without all the values placed in yet. You still should copy from original starter code as part of the lesson.
/*
Document : week1styles
Created on : Mar 19, 2013, 9:33:53 AM
Author : David Johns
Description:
Purpose of the stylesheet follows.
*/
root {
display: block;
}
/*below are the ids that I have moved over from the original lesson02 file
I have left style values empty for you to move over from original file*/
#container {
/* I left these values in the container to show you how to center the whole page
since everything in the container div, then the auto margins below will
center the whole page*/
width:900px;
background-color: black;
margin-left: auto;
margin-right: auto;
}
#header {
/* put the values from the original file here between the braces*/
}
#content {
}
#menu {
}
#footer {
}
/*This is an extra style element that will change all 'a href' tags to the values below*/
a {
font-size: 20px;
text-decoration: none;
color: #cf4f70;
}
a:hover {
color: white;
text-decoration: none;
}
lesson02.html file after changes during external css file lecture or video
This is the lesson 2 file after we have removed the styles and placed them into the week1Styles.css file and then linked the project pages together.
<!DOCTYPE html>
<html>
<head>
<title>Lesson Two: favorite links</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- We have added a link here to our new cascading style sheet file (.css)-->
<link href="../../css/week1styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="container">
<div>
<a href="../../index.html">Back to Menu</a>
</div>
<div id="header">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<!-- Menu area-->
<div id="menu">
<b>Menu</b><br>
<ul>
<li><a href="lesson01.html">Lesson One</a></li>
<li><a href="lesson02.html">Lesson Two</a></li>
</ul>
</div>
<!-- Main content where the external favorite links. A total of 5 should be listed-->
<div id="content">
<h1>My favorite Links</h1>
<ol>
<li><a href="http://pinterest.com/">Pininterest</a></li>
<li><a href="http://www.facebook.com/" target="_blank">Facebook</a></li>
</ol>
</div>
<div id="footer">
Copyright © David the Teacher
</div>
</div>
</body>
</html>