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:
- Double click the Power Point short cut to open the program.
- Click on Design then page setting.
- Set the width to 1.5 and the height to 1.
- Click on Insert then picture.
- Find the compass.png image in your c:\historytree\images folder.
- Double click the image and fit the image to the Power Point window.
- 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.