Creating Page Layout Using HTML Tags: Give Your Website a Print Look

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.

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

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

The code above will produce this layout.

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.