Pin Me

Creating HTML Page Layouts

written by: Avionne Akanbi•edited by: Lamar Stonecypher•updated: 3/29/2010

If you’d like your web site to have the look and feel of a printed publication, you can create such a page layout using HTML. Find out how to use HTML tags and tables to design the layout of your web site.

  • slide 1 of 1

    Getting the "Printed" Look Online

    So you would like to create a web site from the ground up? It's best to start with the basics and keep it simple. As a graphic designer, once you learn the basic formula on how a website is created with an HTML table, you will soon have the freedom to design layouts around almost any design concept that comes to mind. Once you have grasped the simple HTML concepts and learn to easily program your web site, then you are ready to move on to advanced DHTML. But let's take one step at a time.

    Learning HTML Tables

    If you are already familiar with HTML, you will know that it is the bare programming language that is used to design a web site. We will show you an example of how to easily create a page layout with HTML. We will create 3 simple page layouts using HTML.

    The most common editor used to write HTML code is right at your fingertips on your PC. You can use Notepad or Microsoft Word to program simple HTML.

    Let's begin with creating HTML web page tables. Please type the following code into Notepad.

    <HTML>

    <title>My webpage</title>

    <table width="400px" border="1">

    <tr>

    <td>

    My Logo

    </td>

    </tr>

    <tr>

    <td>

    Left menu<br />

    Item 1<br />

    Item 2<br />

    Item 3...

    </td>

    </tr>

    </table>

    </HTML>

    The code above will produce this layout. (Click any image for a larger view.)

    Webpage 1 

    Here is yet another tag called <TH> which is used for adding headers to columns. It replaces the <TD> tags of the first row. Contents of <TH> are typically rendered in bold by browsers.

    <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="3">

    <TR>

    <TH>Title 1</TH>

    <TH>Title 2</TH>

    <TH>Title 3</TH>

    </TR>

    <TR>

    <TD>One </TD>

    <TD>Two</TD>

    <TD>Three</TD>

    </TR>

    </TABLE>

    The code above will produce this layout.

    Webpage 2 

    If you want to divide the table into different compartments, this is where the DIV tag becomes important. This is another tag that replaces the table tag. The DIV tag groups HTML elements together such as the text and images which make up the web site. The following is an example of the DIV tag in action. You can use this for more complex layouts. Tables were not originally meant to be a complex layout tool, so this is where the DIV tag is very useful.

    Using our previous HTML layout, we can use DIV and CSS to achieve a similar effect. The following code.

    <div style="width:400px">

    <div style="background-color:red">

    Main logo

    </div>

    <div style="background-color:blue;height:200px;width:100px;float:left;">

    Primary Menu<br />

    Item 1<br />

    Item 2<br />

    Item 3...

    </div>

    <div style="background-color:#eeeeee;height:200px;width:300px;float:right;">

    Body for paragraph

    </div>

    <div style="background-color:blue;clear:both">

    Bottom of website

    </div>

    The code above will produce this layout.

    Webpage 3