Session 3

WWW WORKSHOP

SESSION 3
FURTHER HTML STRUCTURES

Images
Tables
Images and Tables Together

Images

One of the more obvious features of Internet pages is that they are multimedia, containing not just text, but other kinds of material such as sounds and images. In order to incorporate images into the web pages that we compose, we need to address two namely, where do images come from, and once we have them, what must we do to display them on pages?

Where Images Come From

In order to include an image in a hypertext, it is first necessary to know have the URL of an image file (this will usually have the suffix ".gif" or ".jpg"). Extensive image resources are available on the Web (see the links page).

Warning: Some files (e.g. ) are very small and do not take long to load. Beware of huge images which look wonderful but take ages to load. They just put people off!

For this session, we will need to download some (small!) images, but before doing so, we will create a local directory (i.e. folder) in which to keep them. I strongly recommend that you begin to think about a file organisation structure that is useful for supporting a simple website. A useful rubric is to "think directories, not files".

In accordance with that rubric, we already created a home directory called "home" in the last session in which all your web pages can be stored. Now we'll create a directory called "images" within home specifically for holding images. Here's how to do it:

Click on the "My Computer" icon
Descend into your file hierarchy until you find "My Documents".
Within "My Documents" create a New Folder ("file" menu) called "mywww"
Within "mywww" create the directory "images".

Now we will access some handy images as follows

First we go here and click on any of the links you like. A wider (but non-local and therefore, slower) selection is to be found at http://www.iconbazaar.com.
Using "save as" to save the image file locally in your newly created images directory.

We are now in a position to create a page containing images using Composer.

Handling Images with Composer

Open this file and save it locally in "imagelist.html" inside your new "home" directory.
Open the file in Composer
Put the cursor where you wannt the image to go.
Click the image icon to create images
A dialogue box appears. You must supply a URL containing the image. Press "choose file", find the image directory you just created, and select one. The address appears in the location box (you could have typed it directly if you'd wanted to.
Hit OK

The image now appears on the web page underneath the cursor. You can now manipulate the image by

Selecting it: you can now cut and paste it in the usual way.
Alternatively, you can change its size by dragging a border.
Select the image again. Press the "image" button. The dialogue box reappears.
There is a row of buttons for text alignment. You can try these out by pressing, and then using the "apply" button. Note that the rightmost two deal with the flow of text around images. The effect can only be seen in the browser, not the editor.
Finally notice the "alt text/low res." button. These allow the author to provide an alternative rendering for browsers that cannot or do not display images.

Tables

A table is a grid of rows and columns containing text or other kinds of data.
Tables are useful for presenting information you want to display in a grid, such as a calendar, or in a spreadsheet, such as financial data.
Tables can also be used to control where objects are placed on the page. For instance, if the entire page is divided up into four quadrants (i.e. a 2x2 table), the contents of each quadrant will appear in a known position.

How to Create Tables

The easiest way top create a table is by using a fixed-width font.

Open a new file ("file" menu) in Composer.
Select a fixed width font.
Type out the table directly, using the space key and newlines to obtain the formatting you want.

The problem with tables written in this way is that they are very sensitive to changes in font, contents etc.

Reopen the file in Composer.
Change the font as follows:
- Go the the edit menu. Choose "select all"
- Change to another font (e.g. Times New Roman")
Observe what happens to the format of the table.

Inserting a Table Structure

A more robust and flexible kind of table can be produced using the built in "table" structure.

Reopen the file in Composer
Place the cursor where you want to insert a table.
Click on the "insert table" icon (towards the right of the tool bar.
The "new table properties" dialogue box appears.
Choose the number of rows and columns you want. N.B. These figures can be modified later.
Click OK

Now that the table is there, you can go about filling it. Put the contents you want into the cells you want. Within cells, anything goes. You might wish to try

Text
Images
Subtables.

You can of course cut and paste from other parts of the page if you wish.

Inserting Rows or Columns

To add an extra row or column:

Place the cursor in the cell above where the extra row should go, or to the left of where the extra column should go
Go the "insert" menu. After selecting "table", and choose "row", "column" or "cell". The last of these inserts a single cell to the right of the cursor.

Changing the Width of a Table

Place the cursor carefully on the left or right boundary of the table.
When the cursor becomes a double arrow drag the table border where you like.

Selecting and Deleting Tables

To select a table: click in the table and then choose Select Table from the Edit menu. You can cut or copy the table to paste somewhere else in your document.
To delete a table: click in the table and then choose Delete Table from the Edit menu.

Setting Table Properties

Click in the table.
Choose Table Properties from the Format menu (Table Info on MacOS) and then select the Table tab.
In the Table Properties dialog, set the properties you want.

More About Tables

More about tables is to be found in Netscape's built in help feature.

Click the help menu
Select "Contents"
Find relevant sections on tables

Exercise

Create a table representing a page in a week-per-page diary. <.a>

Tables and Images Together

One extremely useful feature of tables is that they provide a way of controlling exactly how items will relate to each other on the page. A simple example of this is the following navigation bar.

Another example of something useful to be done with tables and images is this customised bullet list

Exercise

The aim of this exercise is to reproduce the navigation bar above and place it inside a file ("navbar.html". I suggest that you create a special directory within your home directory for items like this. One way to make the item is as follows: