Images and Tables

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.

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!

In order to incorporate images into the web, we normally

Create a local image directory (think directories not files).
Find images.
Store images in a local directory.
Refer to images in our web page.

Creating Local Directory

Within your chosen local directory, create a subdirectory called "images" as follows

Click on the "My Computer" icon
Descend into your file hierarchy as far as the directory you created for this course.
Use the file - new - directory menu to create a new directory called "images".

Finding Images

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. Here are some starting points

Storing Images

Find an image you like
Use "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.

Referring to Images with Composer

Open this file.
Open the file in Composer
Put the cursor where you want 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.

If you want to save the file just use the file menu and save it somewhere in your "home" directory.

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

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 this customised bullet list

Another example is the following navigation bar.

This consists of a table whose cells contain links to arbitrary internet resources. Unlike the links we have seen so far, the content of each link is an image, not text.

Exercises

Create a table representing a page in a week-per-page diary.
Modify your home page to include a customised bullet list as shown above.
Finally, 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:
- Find the relevant icons (see the local images directory).
- Copy them to your own images directory.
- Open Composer -- create a table of the right shape and adjust the dimensions.
- Add the images you just saved.
- Select each image in turn and click on the LINK icon to attach an appropriate target.
- Save the result and test.

[Fri Jan 28 12:21:41 2000]