PSD to HTML/CSS: Part 2

Previously (see part 1) we discussed how to split the design into sections and we downloaded an outline/initial project files. This time we will code the HTML, the initial code anyway. For this we are going to completely ignore coding CSS and will come onto that in the next article. So let’s start by opening up “index.html” in a text editor (notepad will be fine, I prefer to us SciTE).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    
<title>Title</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</head>
<body>
    <h1><a href="http://projectdeploy.org">deploy*</a></h1>
</body>
</html>

For those not familiar with HTML, here is a brief description:

  1. Defines the type of document.
  2. Defines the document is HTML, specifically XHTML.
  3. Start the header information.
  4. Identify the content type, i.e. the document is HTML and the character set used.
  5. The title to appear in the browse title bar.
  6. A link to the CSS style sheet to use.
  7. End header information
  8. Start the main body (that is what is to be shown on the page).
  9. Display a header with a link.
  10. End the body.
  11. End the html document.

The first thing we are going to do is to change the title to something relevant. So change line 4 to something like:

<title>Thatcham Historical Society</title>

Now based on the sections we determined in the first part of this tutorial, we are going to place between the body tags, divisions (or <div> tags) to identify the different parts of the page. To make it easier, keep meaningful names. Thus we get:

<div id="wrapper">
        <div id="header">
        </div>
        <div id="main">
                <div id="navigation">                   
                </div>
                <div id="maincontent">
                        <div id="content">
                                <div id="mission">                                      
                                </div>
                                <div class="node">                                      
                                </div>
                                <div class="node">                                      
                                </div>
                                <div class="node">                                      
                                </div>
                                <div class="node">                                      
                                </div>
                        </div>
                        <div id="sidebar">
                                <div class="topblock">                                  
                                </div>
                                <div class="block first events">                                        
                                </div>
                                <div class="block enquiries">                                   
                                </div>
                                <div class="block links">                                       
                                </div>
                        </div>                  
                </div>  
        </div>
        <div id="footer">               
        </div>
</div>

That is the basic page set-up, next time we will add a little content to the page, and will look at adding styling.

Files: 
AttachmentSize
Binary Data part2tar.gz1.19 KB