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:
    <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>

  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