Lesson Three: Entering Dividers - Divs

The logo is too big for the Mission Statement page, so lets go ahead and change its size.
Hopefully, you have already taken the Power Point lessons and you are already skilled at resizing images. If not, just use the following steps:
1. Double click the Power Point short cut to open the program.
2. Click on Design then page setting.
3. Set the width to 1.5 and the height to 1.
4. Click on Insert then picture.
5. Find the compass.png image in your c:\historytree\images folder.
6. Double click the image and fit the image to the Power Point window.
7. Save the file in the images folder as compass2 (be careful to save as a jpg image.)

Open Notepad and add the following additional text to the mission.html file as displayed below (actually typing the text is recommended.)
Practice with Dance Mat Typing

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The History Tree Mission Statement</title>
<link rel="stylesheet" type="text/css" href="mission.css">
</head>
<body>
<h1>The History Tree Mission Statement</h1>

<div>
<h2>Our Mission</h2>
<p><em>The History Tree </em> is a company that is devoted to the full implementation of educational technology. We employ constructivist principles in our programs and implementations.</p>
</div>

<div>
<h2>Our Motto</h2>
<p>Using <em>Technology </em>to teach traditional subjects and using <em> Traditional </em>subjects to teach technology.</p>
</div>

<div>
<h2>Our Logo</h2>
<img src="images/compass2.jpg" alt="Company Logo"><p>
<p>Our logo (the historic map under a compass) symbolizes our desire to help students, and educators to find their way in the complex world of technology.</p>
</div>

<div>
<h2>Here are some of our friends:</h2>
<p>We Love History: the people, the places, the buildings and ancient sites, the creatures, the art - all of it - all of the History.</p>
<img src="images/miss1.png" alt="Child Laborer">
<img src="images/miss2.png" alt="Mummy">
<img src="images/miss3.png" alt="Saber Tooth">
<img src="images/miss4.png" alt="Indian">
<img src="images/miss5.png" alt="Mayan">
</div>

</body>
</html>

Notice that in the <img element the code now calls the new compass2.jpg. Notice also the new <div> tags that have been added.
Important Note: Only use save as the first time that you save an HTML file. If you use save as a second time Microsoft will put another html extension on your file. It will look like this: file.html.html. It will no longer run.
When you are confident that your code is correct click File, Save to save your file. Double click the mission file to view your Web page: Sample

You won't see the difference that the divs make until later, but they are very powerful.

Lesson Four: Adding the Design with CSS

Coding

Lesson Three: Entering Dividers - Divs