STEP 4 (Header)

Ahhhhhh finally at the coding phase. Let’s start by putting together the header part of the website. Please note that I will be doing most of the technical explanations during the CSS coding phase because looking at just the markup may not make perfect sense to you yet. So here I am just stating what I am doing and not really why I am doing it until later.
Within the header div add the logo image tag inside an anchor tag. It is a standard practice to have the logo link back to the home page. Give the image tag an id of logo and don’t forget to add in an alt attribute for accessibility standards. Then let’s add a heading 1 tag and give it an id of tagline. Some people may ask why isn’t the logo in heading 1 tag instead? Because usually the tagline is what describes the site and not the company name. Therefore having the first heading 1 tag on a sentence that is keyword relevant is more significant to SEO.
*Please note for each element tag we create, close it out right away and comment it as a closing element tag. This is to make it easier to follow along in this tutorial without me having to tell you to close at each tag at different areas.

HTML:

<div id="wrapper">
	<div id="header">
    	<a href="#" title="Home"><img src="images/logo.png" width="474" height="52" alt="Logo" id="logo" /></a>
        <h1 id="tagline">I sell innovation to the world.  I'm a Mac...</h1>

       </div><!--close header-->
</div><!--close wrapper-->

Next let’s add in the login links and icon on the top right. Start by creating a div with an id of login and within it add an image tag for the icon you see in the final design. After that add 2 anchor tags to accommodate for the login and register links.

HTML:

<div id="wrapper">
	<div id="header">
    	<a href="#" title="Home"><img src="images/logo.png" width="474" height="52" alt="Logo" id="logo" /></a>
        <h1 id="tagline">I sell innovation to the world.  I'm a Mac...</h1>

        <div id="login">
        	<img src="images/loginIcon.png" width="32" height="30" alt="Login" />
            <a href="#" title="Login">Login</a> | <a href="#" title="Register">Register</a>
        </div><!--close login-->

       </div><!--close header-->
</div><!--close wrapper-->

Next we need to add the meta information that consist of the shopping cart icon, the quantity statement, the RSS feed icon, and the horizontal divider. Create a div with an id of meta. Within it, add an image tag to load the shopping cart icon. Then a paragraph tag to contain the quantity statement. After that an anchor tag to house the RSS icon link. At this point you want to close out the meta div and after that an image tag to load the divider.

HTML:

<div id="wrapper">
	<div id="header">
    	<a href="#" title="Home"><img src="images/logo.png" width="474" height="52" alt="Logo" id="logo" /></a>
        <h1 id="tagline">I sell innovation to the world.  I'm a Mac...</h1>

        <div id="login">
        	<img src="images/loginIcon.png" width="32" height="30" alt="Login" />
            <a href="#" title="Login">Login</a> | <a href="#" title="Register">Register</a>
        </div><!--close login-->

        <div id="meta">
        	<img src="images/cartIcon.png" width="63" height="51" alt="Shopping Cart" />
            <p>2 items in cart.</p><a href="#" title="RSS Feed">RSS Feed</a>
        </div><!--close meta-->
        <img src="images/divider.png" width="349" height="18" alt="Divider" id="divider" />

       </div><!--close header-->
</div><!--close wrapper-->

Moving on we have the search bar underneath the divider. Here you want to create a form with an id of search. Within a fieldset tag add a paragraph tag with an id of searchfield. Following that a label tag with the value Search:. After closing the label tag, add a line break and add the input tag. Now we add the submit button by adding another input tag with the type set to submit. Close the fieldset tag and form tag and we’re done here.

HTML:

<div id="wrapper">
	<div id="header">
    	<a href="#" title="Home"><img src="images/logo.png" width="474" height="52" alt="Logo" id="logo" /></a>
        <h1 id="tagline">I sell innovation to the world.  I'm a Mac...</h1>

        <div id="login">
        	<img src="images/loginIcon.png" width="32" height="30" alt="Login" />
            <a href="#" title="Login">Login</a> | <a href="#" title="Register">Register</a>
        </div><!--close login-->

        <div id="meta">
        	<img src="images/cartIcon.png" width="63" height="51" alt="Shopping Cart" />
            <p>2 items in cart.</p><a href="#" title="RSS Feed">RSS Feed</a>
        </div><!--close meta-->
        <img src="images/divider.png" width="349" height="18" alt="Divider" id="divider" />

        <form action="" method="post" id="search">
        	<fieldset>
                    <p id="searchfield"><label for="search">Search:</label><br />
                        <input type="text" name="search" value="" />
                    </p>
          </fieldset>
                    <input type="submit" value="Submit" name="submit" class="button"/>
        </form>

       </div><!--close header-->
</div><!--close wrapper-->

Next we have the navigation. We simply add an unordered list with 3 anchor tags inside the list tags. Like so…

HTML:

<div id="wrapper">
	<div id="header">
    	<a href="#" title="Home"><img src="images/logo.png" width="474" height="52" alt="Logo" id="logo" /></a>
        <h1 id="tagline">I sell innovation to the world.  I'm a Mac...</h1>

        <div id="login">
        	<img src="images/loginIcon.png" width="32" height="30" alt="Login" />
            <a href="#" title="Login">Login</a> | <a href="#" title="Register">Register</a>
        </div><!--close login-->

        <div id="meta">
        	<img src="images/cartIcon.png" width="63" height="51" alt="Shopping Cart" />
            <p>2 items in cart.</p><a href="#" title="RSS Feed">RSS Feed</a>
        </div><!--close meta-->
        <img src="images/divider.png" width="349" height="18" alt="Divider" id="divider" />

        <form action="" method="post" id="search">
        	<fieldset>
                    <p id="searchfield"><label for="search">Search:</label><br />
                        <input type="text" name="search" value="" />
                    </p>
          </fieldset>
                    <input type="submit" value="Submit" name="submit" class="button"/>
        </form>

        <ul id="nav">
            <li><a href="#" title="Home">HOME</a></li>
            <li><a href="#" title="Shop">SHOP</a></li>
            <li><a href="#" title="Contact">CONTACT</a></li>
        </ul>

       </div><!--close header-->
</div><!--close wrapper-->

And there you have completed the header section of the site. Moving along in the next step we’ll tackle the content area of the site.

STEP 5 (Content)

In the content section we want to separate the main content and the sidebar on the right. I have decided to make a left column and a right column. Let’s also create a container to serve as the main content container by creating a div with an id of content and give it a class called group. I will explain later in the CSS part what this class is for.
Then create a div with an id of leftCol and within it add a heading 2 tag and an image tag. The heading 2 tag will contain the main heading and the image tag will contain the Macbook Air image. Close out the div and let’s create another div with an id of rightCol1. Take note of the “1″ at the end. Within that, create an image tag that will contain the star icon you see in the design. Then add the paragraph tag for the heading for that. After that, add another image tag to load the keyboard and mouse image. Next add an anchor tag for the button visitors will use to add the item to their cart. At this point we are done with the rightCol1. Add another div with an id of rightCol2 and repeat the same steps as rightCol1 except just change the text and the image according to the design you have in Photoshop. Your code should now look like this.

HTML:

<div id="wrapper">
	<div id="header">
    	<a href="#" title="Home"><img src="images/logo.png" width="474" height="52" alt="Logo" id="logo" /></a>
        <h1 id="tagline">I sell innovation to the world.  I'm a Mac...</h1>

        <div id="login">
        	<img src="images/loginIcon.png" width="32" height="30" alt="Login" />
            <a href="#" title="Login">Login</a> | <a href="#" title="Register">Register</a>
        </div><!--close login-->

        <div id="meta">
        	<img src="images/cartIcon.png" width="63" height="51" alt="Shopping Cart" />
            <p>2 items in cart.</p><a href="#" title="RSS Feed">RSS Feed</a>
        </div><!--close meta-->
        <img src="images/divider.png" width="349" height="18" alt="Divider" id="divider" />

        <form action="" method="post" id="search">
        	<fieldset>
                    <p id="searchfield"><label for="search">Search:</label><br />
                        <input type="text" name="search" value="" />
                    </p>
          </fieldset>
                    <input type="submit" value="Submit" name="submit" class="button"/>
        </form>

        <ul id="nav">
            <li><a href="#" title="Home">HOME</a></li>
            <li><a href="#" title="Shop">SHOP</a></li>
            <li><a href="#" title="Contact">CONTACT</a></li>
        </ul>
    </div><!--close header-->
    <div id="content" class="group">
    <div id="leftCol">
    	<h2>Introducing the all new Macbook Air! Everything you need in a notebook without the weight...</h2>
        <img src="images/macair.jpg" width="586" height="320" alt="Macbook Air" />
    </div><!--close leftCol-->

    <div id="rightCol1">
    	<img src="images/star.png" width="62" height="60" alt="Star" />
        <p>SAVE 20% on our COMBO deal!</p>
        <img src="images/keyboardmouse.jpg" width="138" height="138" alt="Mouse and Keyboard" id="mousekeyboard" />
        <a href="#" title="add to cart">Add to Cart</a>
    </div><!--close rightCol1-->

    <div id="rightCol2">
    	<img src="images/figure.png" width="67" height="74" alt="Figure" />
    	<p>Learn to use the Mac!</p>
        <img src="images/learnMac.jpg" width="157" height="171" alt="Learn the Mac" id="learnMac" />
        <a href="#" title="learn the Mac">Click and Learn</a>
    </div><!--close rightCol2-->
    </div><!--close content-->
</div><!--close wrapper-->