Back to Web Page Project
First Web Pages Project
This is for lesson three
Instructions:
Use the code below to make your lesson three. This is the starter code for the first lessons in our week two web pages.
Copy the first block of code into an external css file in your css folder called 'week2Styles' (you will need to create a new css file).
The second set of code should be copied and pasted into a html file called 'lesson03' in weekTwo folder. This is your video and map page. You may use a any mapping link you desire and you should use try to snip an image from the map site and use as the link.
You will need to add a second page with links called 'lesson04' that has links and images supporting the topic you choose in the first page.
CSS file
@charset "utf-8";
/* Our first big CSS File. */
/*starting with some div's with id's to layout our pages nicely
a cleaner version of this expected (like all the margins that are the same could be grouped
in a declaration together. */
div#MainContent {
background-color: #555;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#Header {
background-color: #9CF;
width: 860px;
margin-left: auto;
margin-right: auto;
}
#Main {
width: 960px;
margin-left: auto;
margin-right: auto;
}
#RightSideBox {
background-color: #66F;
position: relative;
width: 420px;
float: right;
margin-left: 10px;
margin-right: 10px;
padding: 20px;
text-align: center;
}
#LeftSideBox {
background-color: #9F6;
width: 420px;
float: left;
margin-left: 10px;
margin-right: 10px;
padding: 20px;
}
#Footer {
width: 600px;
background-color: black;
margin-left: auto;
margin-right: auto;
text-align: center;
color: white;
}
/* Navigation bar instructions */
#NavBar {
width: 500px;
background-color: #9C6;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: -20px;
}
.link {
text-decoration: none; font-size: x-large;
}
a:hover {
color: white; text-decoration: none;
}
/* Some styles we know already are familiar with */
h1 {
color: #003060;
text-align: center;
font-family: Georgia;
font-size: 36px;
}
body {
font-family: "Times New Roman" ;
background-image:url(boarding.JPG);
background-repeat: no-repeat;
background-position:center;
}
/* Classes use ' .' */
.mainText {
background-color:#006;
color: white;
border-style: double;
border-color: #900;
border-width: medium;
font-size: 18px;
padding: 10px;
}
.quote {
font-size: 18px;
font-style: italic;
}
html file
<!DOCTYPE html>
<!-- My second week project where I have picked a topic and have two pages linked together with a navigation bar -->
<!-- This is my first of the two pages. The second one I will create and have images and links -->
<html>
<head>
<title>My Dream Vacation: Whistler/Blackcomb </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Linking our external css file (YOU NEED TO CORRECT FOLDER LOCATION OF FILE)-->
<link href="week2Styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="Header">
<h1>My Dream Vacation: Whistler/Blackcomb</h1>
</div>
<div id="NavBar">
<a href="lesson03.html" class="link">Vids and Map</a> |
<a href="lesson04.html" class="link">Picts and Sites</a>
</div>
<div id="Main">
<p class="mainText">Whistler has remained a dream vacation for me and my family. I hope spend many a vacation there over the next few years.</p>
<!-- A floating left side div and floating right one -->
<div id="LeftSideBox">
<h2>Here is a video</h2>
<!-- Embeded iframe from a outside source will be copied here-->
<iframe width="400px" height="250px" src="http://www.youtube.com/embed/ksBZZSPbPyM" frameborder="0" allowfullscreen></iframe>
</div>
<div id="RightSideBox">
<h2>Here is a map link to Whistler, BC</h2>
<!-- An image with a click to a map link -->
<a href="http://maps.google.com/maps?q=1201+e+union+st&um=1&ie=UTF-8&hq=&hnear=0x54906ace8f6c846d:0xa1975a5a3add9aac,1201+E+Union+St,+Seattle,+WA+98122&gl=us&ei=bp0ET5KhCYmViQKz2a2pCA&sa=X&oi=geocode_result&ct=title&resnum=1&ved=0CB4Q8gEwAA">
<img width="250px" height="250px" src="map.jpg" /></a>
</div>
<div id="Footer">
<p class="quote"> Thank you for visiting my page. </p>
</div>
</div>
</div>
</body>
</html>