How to Convert Top Header into HTML

After completing the initial design, it is time to convert the PSD files into HTML. In this step, we will do this now. Converting PSD files into HTML is the second part of our WordPress theme building project. We will try our best to make it pixel perfect. We already design our index page in Photoshop. Now it is time to make the pixel-perfect HTML file from it. Remember, our PHP file will be built on this base HTML file. So we will try to make it as simple as possible.

If you don’t read our previous article, let’s take a quick look at our design now. It is very important because you will get a quick idea of our design, that helps you to understand the design basics and clear the concept. Our final HTML copy will be looks like this picture:

Spa Website

Now Download the full PSD files from here:

Let’s start to convert the main index page into an HTML page. At first, create a new folder on your desktop and rename it as you want. We are going to create this theme for a spa website. So, let’s call it ‘spaholic’.

Then create two more folders in spaholic folder. Rename these folders as ‘images’ and ‘fonts’. Our image folder will be used to store some images that will be used to make our HTML file, and the ‘fonts’ folder will be store the custom fonts for our WordPress theme.

We are using a custom font in this theme and we prefer to pack it up with our theme instead of calling from a third party website. It will ensure the minimal loading time and HTTP request. Here is a demo path of our folder.

Spaholic theme file map

Now, Store the Seven image files in the image folder that we use in PSD file. Create two .txt file and save them as index.html and style.css. Let’s start to write up our HTML elements in the index.html file. However, before doing that, it is essential to markup the section of the files.

Okay, make sure that your index.html and the style.css file exists in your theme’s root directory. In this tutorial, our root directory is ‘Spaholic’ folder. Let’s divide the whole document into four parts.

  • Top header
  • Header
  • Content
  • Footer.

The content area is dividing into two parts, Slider, and content. We are going to create our Top Header now. In this section, we have two main elements. The first one is the website title or Logo and the second one is Social buttons and a search bar.

Putting the search button beside the Social icons is necessary. And when the user clicks on the search button, the search area will appear under the top header. We will make it works later using advanced javascript codes. Here, we just put the search button as an .html image, and later we will discuss the form while we are converting the HTML file into WordPress.

Step-1: Open your index.html file and put these html codes:

<!DOCTYPE html>
<head>
<title> Spaholic | Quality spa service </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="top-header">
<header id="site-title">
<h1>Spaholic</h1>
</header>
</div>
</body>
</html>

Now, let’s set the CSS rule for Top header. Open your style.css file and put these codes.

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td
{
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 vertical-align: baseline;
 background: transparent;
}

Now, I am going to download the font and save it in our font’s directory and then claim the @font-face rule to use these fonts in our .html document. Okay,  to download the “Tw Cen MT Condensed Extra Bold Regular” (the name is quite long to remember :)) and save it into your fonts directory. Let’s rename the font with a short name that we can easily use. In my fonts folder, I rename it as “TCCEB”. Now set up the font-face rule into style.css for further use.

@font-face {
    font-family: TCCEB;
    src:url(fonts/TCCEB.ttf);
    font-weight: bold; 
}

We have already defined the @font-face rule and now we can easily use this font in our index.html. Let’s define the style for the “top-header” section.

#top-header {
 background-color : #663399;
 color: #fff;
 height: 50px;
}

Okay, this is the style of our top header background and now we have to change the style of our “site-title” as the PSD document. Our “site-title” section is 1000 px wide and we set an auto margin to keep pace with the documents.

#site-title{
 max-width: 1000px;
 margin: 0px auto;
}

Now, we need to set the rule for the h1 tag. We also use our newly defined font in this section.

#site-title h1{
 margin: 10px auto;
 max-width: 300px;
 float: left;
 font-family: TCCEB;
}

We are going to set the site-title element as it floating at the left corner because another header element ’header-social’ section will be floated at the right corner of the ‘top-header’ section. Let’s set the header social section. Save the social button and search button as a tiny image into the image folder from PSD files. Now, added some new .html elements into the ‘top-header’ section, just after the h1 element.

<div id="header-social">
<ul>
  <li> <img src="images/search.png" alt="" width="16" height="16"> </li>
  <li> <img src="images/facebook.png" alt="" width="16" height="16"> </li>
  <li> <img src="images/google-plus.png" alt="" width="16" height="16"> </li>
  <li> <img src="images/twitter.png" alt="" width="16" height="16"> </li>
  <li> <img src="images/instagram.png" alt="" width="16" height="16"> </li>
  <li> <img src="images/pinterest.png" alt="" width="16" height="16"> </li>
  <li> <img src="images/stumbleupon.png" alt="" width="16" height="16"> </li>
</ul>
</div>

Now, set some css rule for “header-social” to get the desired result.

#header-social{
 float: right;
 margin: 20px auto;
}
#header-social ul li {
 list-style: none;
 display: inline;
}
#header-social li {
 padding-left: 5px;
}

Now, Save all files and see the result in your browser. It just looks like the .psd file, isn’t it?

Here is the full code of HTML file:

<!DOCTYPE html>
<head>
<title> Spaholic | Quality spa service </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="top-header">
<header class="site-title">
<h1>Spaholic</h1>
<div class="header-social">
<ul>
  <li> <img src="images/search.png" alt="" width="16" height="16"> </li>
  <li> <img src="images/facebook.png" alt="" width="16" height="16"> </li>
  <li> <img src="images/google-plus.png" alt="" width="16" height="16"> </li>
  <li> <img src="images/twitter.png" alt="" width="16" height="16"> </li>
  <li> <img src="images/instagram.png" alt="" width="16" height="16"> </li>
  <li> <img src="images/pinterest.png" alt="" width="16" height="16"> </li>
  <li> <img src="images/stumbleupon.png" alt="" width="16" height="16"> </li>
</ul>
</div>
</header>
</div>
</body>
</html>

And final piece of CSS for the top header:

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td
{
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 vertical-align: baseline;
 background: transparent;
}
@font-face {
 font-family: TCCEB; 
 src:url(fonts/TCCEB.ttf);
 font-weight: bold;
}
#top-header {
 background-color : #663399;
 color: #fff;
 height: 50px;
}

.site-title{
 max-width: 1000px;
 margin: 0px auto;
}
.site-title h1{
 margin: 10px auto;
 max-width: 300px;
 float: left;
 font-family: TCCEB;
}
.header-social{
 float: right;
 margin: 20px auto;
}
.header-social ul li {
 list-style: none;
 display: inline;
}
.header-social li {
 padding-left: 5px;
}

Note That, I was converting some division id into class because it is the safest way to define various sections. So the final code is recommended to make the design. However, you may need to focus on the nested HTML and CSS.

Now, we have already converted the top header into .html file, and I think you enjoy this tutorial. No more today! In the next tutorial, we are transforming the header menu and slider into .html. Till then stay healthy and happy.