Blog

Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk

  • May 7 2013

    How to code an HTML5 webpage from a Photoshop design file: Part 1

    Are you a beginner in web development? Do you find it difficult to make pixel perfect websites? If the answer to both the question is yes, then don’t worry as we’ll help you out with this. We all know that developing websites have never been easy as there are plenty of things to keep an eye on to make a pixel perfect website. Though for experienced web developers making a pixel perfect website can be a matter of just a few hours or days (depending upon the complexity of the project), but for beginners it requires a lot of dedication, determination and devotion to learn how to code a pixel perfect web design.

    HTML5 Conversion Service

    Table of Contents

    1. The PSD Design
    2. The HTML
    3. The Header Section
    4. The Content Areas
    5. First Content Area
    6. Second & Third Content Area
    7. The Footer

    With this complete PSD to HTML5 Conversion tutorial, you and every other beginner would be able to grab the required skills in no time. But before we start, we assume that you already know the basic HTML and CSS.

    Download this PSD to HTML5 Conversion Tutorial Files Here

    So let’s start!

    The PSD Design

    Here’s the PSD Design that we will be converting today into a pixel perfect HTML5 web page.

    HTML5 from Photoshop PSD Tutorial

    In order to transform this design into an HTML5 page, we will code the header first, in which we will place the logo, the menu bar, the top link that says “check this out,” the main header image, its heading on the left, and then its description. Then we will move further and code the body section, where we will be making three different content containers and place the appropriate image with each one of them, give them the heading, text and a ‘learn more’ link at the end of each content container. And after completing all this, we will be heading ahead to make the footer area, which would also be the last part of this tutorial. So let’s proceed and turn the tough looking task into an easy one.

    The HTML

    psd to html5 conversion

     This is the entire html5 code of the design that we have displayed above. Yeah, we know it looks complicated and you might find it difficult to understand, but don’t worry as we will now explain its each and every line step by step. But as we assume that you know basic HTML and CSS, we won’t be defining the Doctype, Meta and Title Tag, and how to link the stylesheet and javascript for IE fix. Instead we’ll start with the body tag where we have made the header section.

    The Header Section

     

     First of all, open a new <header> tag inside the <body> tag to define the web browser that our header section starts from here. Then make a new <div> tag and give it a class of “wrapper.” Though we could have also used the newly introduced <section> tag here, but it doesn’t support the ‘margin: 0 auto’ property inside CSS.

     Then add the logo image in your html5 page using the <img> or image tag, and give it a class of ‘logo.’ Additionally, to make it linkable add an anchor or <a> tag to it.

     Now make a new <section> tag and give it a class of “header_right.” Within this section tag, we need to place the top link, which says “Check This Out,” which will have a colored background, rounded-border, and colored but hyperlinked text. So write a new <span> tag and give it a class of “top_link.” Now make an anchor or <a> tag and place the “Check This Out” text in-between. But as you can see in the PSD design, the text has many inequality signs in both of its side, and if you make them as it is, the web page won’t render them correctly. So instead of using the inequality signs use “<” for the left side, and “>” for the right side, as when these two codes are rendered on a web page, they get turned into the inequality signs. Now close your anchor or <a> tag, and then close the <span> tag.

     The above code displays the navigation bar on our web page. So let’s make it from the beginning, open a new <nav> or navigation tag, and then make a new <ul> or unordered list tag. Now inside this unordered list, we have to place 5 menu links so we make 5 <li> or list tags, and make 5 anchor tags, 1 inside each <li> tag, and place the appropriate link text before closing each anchor tag. Once it’s done close all the <li> or list tags, and also close the <ul> and <section> tag. But before that, don’t forget to give your last <li> tag a class of “last.” This will come handy in the CSS.

     Now we will place the main header image, which we have saved with the name of banner_img.png. So to place it on the web page, make a new <section> tag with a class of “banner_container,” and then add the image using the <img> tag by pointing to the image via its directory structure as the source.

     Now as you can see in the PSD, we have to place certain text on the left of our banner image, so make a new <section> tag and give it a class of “left_banner_content.” Then create an <h1> tag, and place the text heading inside it. But to make our heading look exactly the way it is inside the PSD, make a new <span> tag with a class of “coll” besides the heading text that says “Demonstration”. We will use this <span> tag inside the CSS file to bring the actual color effect.

    As we have placed the heading, we can now place the actual text too. So make a complete paragraph or <p></p> tag, place the entire text, which you can copy and paste from the PSD design file. After placing the text inside the paragraph tag, close all the open </section>, </div> and </header> tag. Here, we have closed the section tags twice because it the second section tag, as the first one was used to place the banner image. Now our header section is complete, and we will now code three text container sections.

     

    The Content Areas

     Now we will start working on the lower section of the PSD where we will make three different content areas, and place a logo image for each. Therefore, first off all create a <section> tag and give it an id of body_container. With this id we will stylize this entire section inside the css. Then make a <div> tag with a class of wrapper.

    First Content Area

     As we opened the body tag and also made a div tag to place our three content areas in it, now create a <section> tag and give it a class of “common_content_first.” In this class you might have noticed we have given it a unique name that ends with ‘first,’ this will help us differentiate three similar looking content areas from each other, and we can also stylize them separately inside the css.

    Now create an <h3> tag and place the heading text, which you can take from the PSD file or can also write yourself. Then before placing the main text, we now need to place the image beside it. So make an <img> tag and write the directory path of the appropriate image inside the src=”#” tag. By now we have successfully made our first content area, placed the heading and its image. So now it’s time to place the main text, for which you now need to make another <section> tag and give it a class of “coll_content.” Them make a new paragraph or <p> tag and place the text after it and close it with its end tag i.e., </p>.

    So far everything is going as we want to, but there’s still one thing left in this content area that is to make anchor text that says, ‘Learn More.’ So in order to make it, create a new <a> or anchor tag, place the URL that you want this text to link to inside the href tag, give it a class of “coll_1” then place the text and close the anchor tag. We are now almost done with our first content area, so just close the two section tags that we opened to place all our content with </section>.

    Second & Third Content Area

     In order to make the second and third content areas, you can copy the first one, and replace the image, text and anchor text link with the appropriate ones. Additionally, you also need to change the class of their first <section> tag from “common_content_first” to “common_content” and “common_content_last” so that we can stylize them separately inside the css. Then close both the content areas with two ending </section> tags respectively.

     So as of now, we have completed all the three content areas. Now you can close the <div> tag and the main <section> tag. Now we should move ahead and make the footer for our HTML page that would match the PSD design.

    The Footer

     In order to make the footer, create the newly introduced <footer> tag, and then create a <div> tag with a class of “wrapper”. Once it’s done, create a new paragraph or <p> tag and place the footer text inside it, which you can either write yourself or copy & paste from the PSD design file, and close the respective <div> and <footer> tags.

     Almost done! Now just close the main <body> tag and the <html> tag that we introduced in the beginning.

    As of now our HTML is complete, we will now work on the CSS, which we will cover in the second part.

    Posted by Charu Garg Posted in: HTML5, Tutorials Comments: 1