How To HTML! Lesson Five

Lesson Five - Tables and Images

Lets now introduce a simple table. Tables were originally introduced into html as a tidy method of presenting data on sheets. However, later they became an indespensible tool for web designers - allowing them to add colour and style to a web page.

Exercise Five A

Open Page Two (two.htm) and add the following (additions are shown in strong):

<html>
<head>
<title>My 2nd HTML Page</title>
</head>
<body bgcolor="#ffffcc">
<h1>Page Two</h1>
<h2>Hyperlinks</h2>
<p>Welcome to Page Two.</p>
<table border="1">
<tr>
<td bgcolor="#ccffcc">
<h2>SPACE</h2>
</td>
<td>
<h2>TO RENT</h2>
</td>
</tr>
</table>
 <p><a href="index.htm">HOME</a></p>
</body>
</html>

How does it work? <table> opens a table (I included a border attribute, to show the outline of the table), <tr> opens a fresh row, <td> opens a new data cell. In the case of the first td, we added a colour attribute: bgcolor="#ccffcc", giving the background of that cell a shade of light green. You could add more cells, or even more rows, but always take care to nest your tag pairs correctly!

In the Picture?

Ok, so the website is looking a little plain, eh? Could perhaps do with a few images? To add images, you must have the images stored somewhere close to the page, either in the same folder, or in a nearby folder on the same server. Anything else is simply bad manners. For this simplified example, we are going to keep our images in the very same folder as the html pages.Freedom!

First of all we are going to need some images. So I have supplied one here. To download it, if you are using Windows 98 or later, simply move the arrow over the image, right click, and select save picture as..., and into the website folder. Otherwise, download the image HERE, and save it into your folder (File, Save as...).

Remember, whenever using images to follow the golden rule - keep file sizes low. The two main image formats used on W3 are: .jpg, and .gif. Never use bitmaps (.bmp). on a webpage.

EXERCISE FIVE B.

To start this exercise, you must have first downloaded the above image, and saved it into your website folder with the html files.

The tag that anchors an image into a website in its most basic form is:

<img src="example.jpg" />

Quite simply, img src stands for image source - telling the browser where it can find the image. NOTE. That the img src tag, like the break tag, exists on its own, and does not pair with a seperate close tag. Lets add it to Page Two - start by opening two.htm in Notepad, now add the following line:

<html>
<head>
<title>My 2nd HTML Page</title>
</head>
<body bgcolor="#ffffcc">
<h1>Page Two</h1>
<h2>Hyperlinks</h2>
<p>Welcome to Page Two.</p>
<table border="1">
<tr>
<td bgcolor="#ccffcc">
<h2>SPACE</h2>
</td>
<td>
<h2>TO RENT</h2>
</td>
<td>
<img src="biker.jpg" />
</td>
</tr>
</table>
<p><a href="index.htm">HOME</a></p>
</body>
</html>

You should now have the image on your webpage. NOTE. that you should always include the "quote" symbols in the code. The above line is the simplest, but not the best. The tag should ideally contain more information for the browser, including the size of the image, the amount of space required around it, an "alt" text for browsers not using images, an alignment, and maybe even a border!

The size of the biker image in pixels is width 199, height 132. You can find the size of images using most graphic programs, perhaps by checking the properties of an image. The result code would then be:

<p><img src="biker.jpg" width="199" height="132" alt="Biker" /></p>

Lets add these new attributes to the image source tag in the code of Page Two now. NOTE. That we are also removing the table border by replacing the table border attribute with a "0" (zero).

<html>
<head>
<title>My 2nd HTML Page</title>
</head>
<body bgcolor="#ffffcc">
<h1>Page Two</h1>
<h2>Hyperlinks</h2>
<p>Welcome to Page Two.</p>
<table border="0">
<tr>
<td bgcolor="#ccffcc">
<h2>SPACE</h2>
</td>
<td>
<h2>TO RENT</h2>
</td>
<td>
<img src="biker.jpg" width="199" height="132" alt="Biker" />
</td>
</tr>
</table>
<p><a href="index.htm">HOME</a></p>
</body>
</html>

You did not need to add all these details, but its good practice, and also helps the browser load the page faster. a very useful attribute that can also be added to the img src tag is align="left", or align="right".

IMAGES AND FOLDERS.

To embed an image into a webpage, you simply need an address. In the above example, we kept it simple - the image was in the same folder as the page. However, it is more usual to put images into a subfolder. If we had created a subfolder named, for example, photos, inside our website folder, then the basic anchor tag would have read:

<img src="photos/biker.jpg" />

However, imagine that the image was actually in a neighbouring folder called photos, and not in a subfolder inside our webpage folder. Then the tag would have been:

<img src="../photos/biker.jpg" />

When you have finished building your website on the hard drive, and wish to upload a copy to an actual web server, remember that you must replicate the folder system onto your webspace, and upload copies of your image files into the corresponding folders, otherwise browsers will not find the images where they expect them. This is a classicly common mistake made by people using wysiwyg web editing programs.


NEXT: LESSON SIX.

HOME