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

  • Apr 17 2013

    PSD to HTML 5 Conversion Tutorial: How to add image links

    Tutorial explaining Image conversion to Html / Css coding

    Table of Contents

    1. Files, Folders and Directory
    2. The HTML or index.html File
    3. The HTML Code Step by Step
    4. The CSS File or Style.css
    5. The CSS Step by Step

    Are you wondering about learning PSD to HTML conversion? Yeah you probably are, but don’t worry and wander here and there anymore in search of detailed tutorial to learn the process of converting a PSD into an HTML web page. That’s because, we have come up with a great tutorial made only for you that will boost your confidence to start your stint in PSD to HTML 5 Conversion.

    So let’s begin!

    Here’s our PSD file that we will be converting today into an HTML5 web page, for which we will be using Adobe Dreamweaver CS6, Adobe Photoshop CS6 and Firebug Mozilla Firefox plugin.

    The below image is just a sample image for the project

    How to add image links

    However, if you don’t have the latest version then you need not to worry as this can also be done using the older version of Adobe Dreamweaver or you can also choose any of your favorite code editors like Notepad++ for Windows and Coda for Macintosh.

    Here’s the HTML of the design we have showcased above. It really looks like very typical to understand at first, but don’t worry as we will explain it to you step by step.

    Download this PSD to HTML5 Conversion Tutorial Files Here

    First of all let’s make the folder and directory structure.

    Files, Folders and Directory

    Create a new folder on your desktop, and name it whatever you want to. Inside that particular folder make another folder and re-name it as ‘Common.’ This is where we will be placing our CSS, Images, Fonts, and JavaScript. Once you have created the common folder, go inside it and make four new folders, namely; CSS, Image, Fonts, and js. Here ‘js’ stands for JavaScript.

    Now as we have created all the required folders and directory structure, you need to place all your images that will be used in the html document inside the images folder, the style.css file will come inside css folder, the font files will come inside fonts folder, and the JavaScript or js file will be placed inside js folder. Additionally, our main html file will come inside the root folder that is ‘xhtml.’

    The HTML or index.html File

    The HTML Code Step by Step

     Define your Doctype. This is very crucial so that the web browsers know what type of document to expect. Before HTML5 came into existence, a web developer had to make a reference to a ‘Doctype,’ but not anymore, all thanks to the latest W3C recommended HTML5. So go ahead and define your HTML5 based doctype like we did.

     Now write your first ever HTML tag. This tag informs the browser that this is an HTML document, and it also represents the root of an HTML page. Consider this as the beginning of your HTML page as all other HTML elements come inside it only. The noticeable thing in HTML is that every open tag needs to be closed with a closing tag, like < / >.

    However there are certain self closing tags also, like the < img > tag used for images. But things have changed slightly as since HTML5 came into existence you can leave your tags unclosed as web browsers have become so smart that they do this on their own. However, in web developers industry, we don’t consider it a good practice, but we leave it on you just do it like you want to.

     Write this tag to open the header section of the webpage. Here you can define your Meta tags, which includes; keyword and description tags, along with the JavaScript, Cascading Style Sheets or CSS, Title, Link, etc.

     Define your HTML page’s ‘Charset.’ This Charset attribute indicates the character encoding for the HTML page.

     Open and close the title tag with the site title in-between, which could be anything related to the website you are designing, like here we have used ‘Conversion,’ as this is a PSD to HTML5 Conversion tutorial.

     Now with the link tags, link all your style sheets one by one. Oh! You might be thinking how and where did it come from when we haven’t even written a style sheet yet. Yes you right, but don’t worry as we will do it soon. Here the ‘rel’ attribute states the relationship between the current and the linked document. This attribute is used only with the ‘href’ attribute. In the href attribute specifiy your style sheet file with its exact location like we did.

     This is a conditional comment. Conditional comments are used to render certain unsupported HTML codes in Microsoft Internet Explorer using JavaScript and CSS. Here we have defined if the web browser is IE (Internet Explorer) than the browser should detect and use the JavaScript stored in the given location to render the page properly.

     That’s it, our header section is complete now. So just close it with the closing header tag like we did.

    Now write and open a body tag. This is where the main content of the web page comes in.

    Now write your first div tag. The noticeable thing here is that we have also specified a class named ‘Wrapper’ to it.

    Now let’s use one of the newest tags introduced with an all new HTML5. So write and open the section tag and specify an id named as ‘main.’ A section tag is used to define a particular section in an HTML5 document such as headers, footers, chapters, etc.

    Now we have to write the Heading for which an H1 to H6 tags can be used. However, as it’s the main heading, therefore it should come inside an h1 tag. So go ahead and open and close the h1 tag, like we did, comprising the heading in-between.

    Write another section tag and give it a class named link_box. We are doing this because in this section we would be placing the images that would be linked to a particular website i.e., http://www.seosemanticxhtml.com. But you are free to link your images to any site.

    Now we have to place images using the < img > tag. But to make them linkable, open and close a hyperlink tag comprising the href attribute, and < img > tag in between. Remember in an image tag, you also need to define the source of your image file. Though we haven’t specified any alt attribute to the image, but you are free to do that.

    An alt tag is a crucial tag when it comes to an image used in an HTML document, as without it the search engines’ crawlers won’t be able to crawl or read your image.

    Place another image that is a PSD logo, like we did in the previous step using the hyperlink tag and image tag.

    Place the third image that is a scissor like we did in the last two steps. However, here you also need to define a class attribute, which will come into play in the CSS.

    Write another hyperlink tag and place your fourth and last image using the image tag.

    Now as all our images are well placed, our HTML is almost done. So close all the open tags now, which includes; two section tags, a div tag, the body tag and the html tag like we have done, and then move on to writing Cascading Style Sheet for it.

    The CSS File or Style.css

    The CSS Step by Step

    The Star or ‘*’ used at the beginning of this code defines the entire web page. And using it we have set the margin and padding of the layout to 0. So go ahead and write this just like that.

    Now we need to define whether the images placed in HTML should carry a border or not. So specify the image border as none. The noticeable thing here is the ‘fieldset’ and ‘:focus.’ Fieldset is an HTML tag, which is used to group related elements in an HTML form. Whereas ‘:focus’ is a CSS selector, which is used to select the element that has focus. Though neither we have made any html form in the above html and nor we have anything that should be in focus, but it’s a good practice to write these two little things in each and every CSS file you make.

    Now let’s stylize the body of the web page we just created above. Here we have kept the default font-size of the text used in the body at 12px, font-family as Arial, Helvetica and sans-serif because if in case the user’s browser fails to render the Arial font properly, then Helvetica will ride over it, and if Helevetica is also not supported then sans-serif will replace it.

    Remember, in our HTML we give our div tag a class named wrapper, that’s what it is. Here we have to specify the width of our layout in pixels, and set its margin. Additionally, always keep in mind that in CSS a class is denoted by a period or (.), and an id is denoted by ‘#’ a hash or the pound sign.

    In the first section tag that we wrote in our HTML we specified an id to it i.e., id=”main”. Here we need to stylize that id by defining its floating position, width in pixels, the background image and its repetition.

    Now let’s stylize our heading or H1 tag that we used in the HTML using text-align, font-size, line-height, font-weight, text-align, text-transform, color, and the font-family properties of the CSS.

    Here comes the link box we made in another section tag in the HTML, but remember it was placed under the main section tag which is denoted by the id=”main”. So we have written the id, and then come the class i.e., ‘link_box’ to specify their style.

    Now we have to position our images that we placed in the HTML. That’s what we have done above using the float and margin properties of CSS. Now we are done with the codes, so go ahead and just try to check the html file in a web browser. If you find any errors then please check your code once again to ensure that it looks exactly the way we have shown it here.

    Though this is just the beginning of a PSD to HTML tutorials, there’s many more to come so Subscrib our blog to get the best of HTML tutorials on the internet.

    Posted by ajeet Posted in: HTML5, PSD to HTML, Tutorials Comments: 0