Lesson Twenty: The Header Element

The latest version of HTML (HTML5) allows you to use the <|header>
element to structure and design the title portion of your page, as well as, the headings of sections and articles.

1. Enter this code just under the beginning body tag of your akblog.html file and remove the existing <h1> title:

   <header>
   <img class="floatimgleft" src="images/africa1.jpg" alt="Africa Map">
   <img class="floatimgright" src="images/africa1.jpg" alt="Africa Map">
   <h1>The Animal Kingdom Blog</h1>
   <h2>African Animals<h2>
   </header>

   
   Your page should look like this: Sample
   
   
2. Now create a CSS file named akblog.css (Note that you have already created a link to this file in your HTML file.)

   body { background-color: lightgreen; font-size: large; }
   header { 
   background-color: darkgreen;
   font-family: Georgia, "Times New Roman", Times, serif;
   color: lightgreen;
   text-align: center;
   margin-top: 40px;
   font-size: 155%;
   margin-right: auto;
   margin-left: auto; 
   }
   .floatimgright { float: right; border: solid 5px darkgreen;}
   .floatimgleft { float: left; border: solid 5px darkgreen; }

   
   
   
3. When you are confident that your code is correct:
   
   Click File, Save As and save your file in the c:\historytree folder as akblog.css.
   
   
4. Double click the akblog.html file to view your blog webpage. Sample

Lesson Twenty One: The Section, Article, and Time Elements