Back to Web Page Project
First Web Pages Project
This is for lesson five
Instructions:
Use the code below to make your lesson five. This is the starter code for the week three assignment.
Copy the block of code into a html file called 'lesson05' in weekThree folder. This html file links to a twitter-bootstrap css file that has been downloaded already on the saasmath server.
You will need to add a second page called 'lesson06' using the same css file, nav bar info, and layout. Note: if you are not part of the Seattle Academy class, you will need to download the twitter-bootstrap files.
html file
<!DOCTYPE html>
<html>
<head>
<title>Week Three Subject Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Link to a downloaded twitter bootstrap cascading style sheet full of many features-->
<link href="http://www.electricteaching.com/math/css/bootstrap.css" rel="stylesheet">
<!-- This is an internal style block of code to override some of the bootstrap style values-->
<style type="text/css">
.navbar .nav > li > a {
color: #84B1DB; /*nav color*/
text-shadow: none;
}
.navbar .nav > li > a:hover {
color:white;
background: #A2A2A2;
}
.myclass {
color: #FF0000;
background-color: #99ffcc;
}
</style>
<script src="http://www.electricteaching.com/math/js/jquery.js"></script>
<script src="http://www.electricteaching.com/math/js/bootstrap.js"></script>
</head>
<body>
<!-- The container class from bootstrap is a width of 1000 pixels.
It has all the padding other values to help make the content look its best in many different browsers.-->
<div class="container">
<!-- navbar class has many types, this is the first one you can use. we will explore other in class or video lesson-->
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="http://seattleacademy.org/">Seattle Academy</a>
<ul class="nav">
<li class="active"><a href="../../index.html">Main page</a></li>
<li ><a href="lesson05.html">First page</a></li>
<li><a href="lesson06.html">Second page</a></li>
</ul>
</div>
</div>
<!-- An example of the many classes (another identification element) that are inside the bootstrap library-->
<div class="alert alert-success">
This site is under development!
</div>
<h1>Typical header</h1>
<!-- You can do columns by putting spans inside of rows. -->
<div class="row">
<div class="span3">
<p>This is our first span3 div (300 px width) in our row. This span has many values (like padding and margins) to make the text look good inside. </p>
</div>
<div class="span9 myclass">
<p>This is our first span9 div (900 px width) in our row. <br>
It is very important to remember how many pixels you have in the outside divs like container to be sure these divs will fit in a single row.</p>
</div>
</div>
</div> <!-- closing container -->
</body>
</html>