Lesson Twenty Three: Navigation - the Nav Element

The latest version of HTML (HTML5) allows you to use the <nav> element to structure and design portions of your pages.

You can use the new <nav> element to add a navigation bar to your webpages.

1. Enter this code just under the header element to add a navigation bar:

   <nav>
   <ul>
   <li><a href="ak1.html">HOME</a></li>
   <li><a href="">ELEPHANT</a></li>
   <li><a href="">LION</a></li>
   <li><a href="ak2.html">HIPPOPOTAMUS</a></li>
   <li><a href="">GIRAFFE</a></li>
   <li><a href="">RHINOSAURUS</a></li>
   <li><a href="">TIGER</a></li>
   <li><a class="selected" href="akblog.html">BLOG</a></li>
   </ul>
   </nav>

   
   
   
2. Consider what will happen as you enter this code to your CSS file:

   nav { border: solid 5px darkgreen; background-color: lightgreen; width: 1100px; margin-left: 100px; }
   nav ul { list-style-type: none; margin: 0px; }
   nav ul li a:link, nav ul li a:visited { color: darkgreen; font-weight: bold; margin: 2px; 5px; 2px; 5px; }
   nav ul li a:hover { color: lightgreen; background-color: darkgreen; }
   nav li { display: inline; padding: 5px 5px 5px 5px; font-size: 120%;}
   nav li .selected { background-color: lightgreen; }
   a:link { color: darkgreen; border-bottom: none; }
   a:visited { color: darkgreen; }
   a:hover { background: darkgreen; color: lightgreen; }
   a { font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; text-decoration: none; border-bottom: none; }

   
   
   Save your CSS file and then double click the HTML file to view your new navigation bar: Sample

Lesson Twenty Four: Entering a Table - the Table Element