This article originally appeared on the website "Professionals in Pajamas"
which has now been incorporated into Widget Inc.

HTML 101 - Part 2: The Layout

Roger L. Main

By now you've probably played around with some of the text formatting attributes of HTML, but pretty text can get pretty boring pretty quickly. In this section I'll be discussing two other elements of HTML, quite possibly making all you'll need. Every web page has them: graphics (or pictures) and tables.

In order to put a picture on to a web page you'll need to use the graphics tag (remember, everything in HTML is in tags). The graphics tag is a stand-alone tag with the following syntax:

<img src='graphics_filename.jpg'>

The "img" is what tells the browser that it will be showing a graphic. The "src" (short for "source") specifies the graphics file that you want to use. Now the graphic will appear on your webpage. You can also specify the size of the graphic by setting the "width" and "height" attributes such as in the following:

<img src='graphics_filename.jpg' width=100 height=200>

This will make the picture inhabit an area of 100 pixels by 200 pixels on the viewer's monitor, regardless of the original size of the image. The browser (and, incidently, in all of these articles I will assume "Internet Explorer" is the browser unless otherwise stated) automatically resizes the image. All browsers do a pretty shoddy job, so it's usually best to go for the default width and height of the image, which is the one the browser uses if these attributes are not specified.

Valid graphic image formats are Compuserve .Gif and .JPG (jpeg). Internet Explorer will also accept a Microsoft Bitmap (.bmp) image. Other browsers may have other proprietary formats they accept, but gif and jpg are the most commonly used because they're accepted by all major browsers.

So far there has been no mention of where things (text or images) are put on a page. If you've been adventurous you may have tried to use "left" and "top" as attributes and found out that they don't work. In order to layout objects on a page you need tables.

HTML tables are much like the tables in an accountant's ledger. They have rows, columns and cells. In HTML, however, columns are only conceptual. Everything is laid out in rows with cells within those rows. You specify that you are going to build a table with the <table> tag. It's a bracketed tag, closed with the ubiquitous "slash" character closing tag </table>.

You can specify width and height in a table, either as an absolute (as in the graphics example above) or as a percentage of the viewer's screen size, as in the following example:

<table width='80%' height='80%'>
  ...some table stuff

Inside the table you can put rows using the <tr></tr> pair:

<table width='80%' height='80%'>
  <tr>  ...  </tr>

Inside the row tags you can put cells using the <td></td> pair:

<table width='80%' height='80%'>
	<td>This cell contains text</td>
	<td><img src='graphic.jpg'></td>

Inside the table cell you can put anything - text, images, links, movies, you name it. Note, however, that while it is legal to put objects directly between table tags and between row tags, the browser will consider this to be outside the table and will place it accordingly. Also, some browsers don't require the closing row tag, but it's a good idea to get into the habit so that you also make your page compatible with those that do.

There are a plethora of attributes for these tags, too numerous to name them all, here. For a good reference to tag attributes I always recommend Index Dot HTML, where you'll find a comprehensive list of all HTML tags, their associated attributes and even browser compatability lists.

Hmmm? What was that? What's a link? I guess I did mention that, didn't I? Well, that's what I'll be talking about next month along with making your page actually do something.

Return to the main menu

© Copyright 2002-2007 Widget Inc.
All Rights Reserved

"Index Dot HTML" is copyright to Brian Wilson. Widget Inc. is not responsible for the accuracy of the content of this site. "Internet Explorer" is a registered trademark of Microsoft Corporation.