Lesson Sixteen: Ordered Lists

  1. Copy this African map image to your images folder:
    Africa Map

  2. Add two African map images to your ak2.html file using these two lines of code just under the opening body tag:
    <img class="floatimgleft" src="images/africa1.jpg" alt="Africa Map">
    <img class="floatimgright" src="images/africa1.jpg" alt="Africa Map" >

    Note: you are using the same classes (floatimgright and floatimgleft) that you used to float the gorilla images on your first page.

    Your page should look like this: Sample


  3. You can add a numbered list of Hippopotamus facts using <ol> (ordered list) tags.

    Add an ordered list of facts under your <h2> element using this code:
    <ol><h3>Here is a list of interesting facts about the African Hippopotamus:</h3>
    <li>This African creature loves the water so much that most of the time the animal is floating in a river or lake.</li><br>
    <li>The Hippopotamus loves to eat grass and will often travel many miles to consume up to 80 pounds of the stuff in a single day.</li><br>
    <li>Hippos are sometimes attacked by lions and crocodiles, so they often stay together for protection.</li><br>
    <li>The Hippopotamus can way up to 8,000 pounds.</li><br>
    <li>Most of these magnificent creatures live in the southeastern portion of Africa.</li><br>
    <li>All of these facts are from the National Geographic Website at this link: <a href="http://animals.nationalgeographic.com/animals/mammals/hippopotamus/"> National Geographic Hippopotamus Article</a></li>

  4. Add this code just under your h2 tags to bring in the Hippopotamus image and also to float the image to the right.
    <img class="floatimgright" src="images/hippo2.jpg" alt="Hippopotamus" >

    Your page should look like this: Sample

Lesson Seventeen: Unordered Lists