2-Header

Video

Steps

Let's work on the items that will go inside the <header> tag now.
First, the login menu. Our end goal, after adding CSS, will be something like this:

Let's add some code to stub out the menu.

<body>
     <header>
         <!--Login menu-->
         <nav>
             <ul>
                 <li><a href="#"><img src=""></a></li>
                 <li><a href="#"><img src=""></a></li>
                 <li><a href="#"><img src=""></a></li>
                 <li><a href="#"><img src=""></a></li>
                 <li><input type="search" id="search" placeholder="Search"></li>
             </ul>
         </nav>
         <!--Navigation Menu-->
     </header>

If you ran the app right now, it should look like this:
Isn't it gorgeous?

Let's start to fill in details for each one of the list items, seen in the code as <li>. The big three of Facebook, Twitter, and Google Plus (poor Google Plus) are good for now:

<!--Login menu-->
<nav>
     <ul>
         <li><a href="#"><img src="img/facebook_20.png" alt="Facebook" border="0" class="socialIcon" /></a></li>
         <li><a href="#"><img src="img/twitter_20.png" alt="Twitter" border="0" class="socialIcon" /></a></li>
         <li><a href="#"><img src="img/google_plus_20.png" alt="Google Plus" border="0" class="socialIcon" /></a></li>
         <li><a href="#"><img src=""></a></li>
         <li><input type="search" id="search" placeholder="Search"></li>
     </ul>
</nav>

Please note: These links will not go anywhere. The reason is the octothorpe symbol aka hashtag, pound sign, number sign, sharp sign, etc. You can find it in the <a href> tag above. If you want it to work, replace the # with a URL.
We're calling the image from the img folder. We're also adding alt here. Doing so will provide a clear text alternative of the image for screen reader/visually impaired users.
We're also setting up a class for future use with our CSS.

Let's add details for the login and basket:

<header>
     <!--Login menu-->
     <nav>
         <ul>
             <li><a href="#"><img src="img/facebook_20.png" alt="Facebook" border="0" class="socialIcon" /></a></li>
             <li><a href="#"><img src="img/twitter_20.png" alt="Twitter" border="0" class="socialIcon" /></a></li>
             <li><a href="#"><img src="img/google_plus_20.png" alt="Google Plus" border="0" class="socialIcon" /></a></li>
             <li><a href="#" class="active">Login</a></li>
             <li><a href="#">My Basket</a></li>
             <li><input type="search" id="search" placeholder="Search"></li>
         </ul>
     </nav>
     <!--Navigation Menu-->
</header>

Then, we can add some nav items for the menu.

    <!--Navigation Menu-->
    <h1>Fromage</h1>
    <h2>Market</h2>
    <nav>
        <ul>
            <li><a href="#">Shop Now</a></li>
            <li><a href="#">Cheese 101</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Recipes</a></li>
        </ul>
    </nav>
</header>

If you run the app, here's how it should look up to this point.
Looks a bit better, but this isn't the '90s.
Let's work on the sidebar next.

Previous1-Adding HTML Next3-Sidebar

Last updated 7 years ago