HTML and CSS Training
Lesson Two: Entering the content HTML to the body element

  1. In lesson one you added text to the head element of your html, and you added a title in the body element; now you will add subject text and a few images to the body element.
  2. Make a sub directory (folder) in your historytree folder called images.
  3. Open your images folder and copy these images into the folder:


    Child Laborer Mummy Saber Tooth Indian Mayan Compass

  4. Open Notepad and add the following additional text to the mission.html file between the h1 and body tags 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>
<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>
<h2>Our Motto</h2>
<p>Using <em>Technology </em>to teach traditional subjects and using <em> Traditional</em> subjects to teach technology.
</p>
<h2>Our Logo</h2>
<img src="images/compass.png" alt="Company Logo">
<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>
<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.
<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"></p>
</body>
</html>

    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.

  5. 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

Lesson Three: Entering Dividers - Divs