Link Bar
Many of you have doubtless visited Websites that have a nifty little colored bar along one side of the page, which show links to other sites or other sections in the documents. This is how it's done:
| Callout Box |
|
This is how you make a cute little callout box which you can fit in a column along the side of your page. Note the center-alignment of the title. |
Tonight's lab treats the topics of Tables and Images. As you read over these notes, I encourage you to look at the HTML source to see how the various formats were accomplished.
Tables
Tables are one of the most useful and flexible of the markups specified in the HTML standard. In addition to the obvious spreadsheet-like tables that you see occasionally, tables can be used to cut up your document into smaller pieces, make colored sections, "navigation bars", and callout boxes.
Please refer also to the section on tables in the HTML 4.0 docs from W3C (this is section 11 in the table of contents).
In your report you will be required to use tables somewhere. Hopefully, these notes will give you some ideas on where and how you can creatively use tables.
Document Formatting
As you can already see, the whole of this document (with the exception of the title) is formatted as one large table with a single row and two cells. The left-hand cell is the link-bar and the right-hand cell is the content of this page.
Colored Sections
|
Navigation Bars
A popular use for tables is to make a navagation bar which contains links
(somewhat similar in concept to the link-bar idea).
| Document Formatting | Colored Sections | Navigation Bars | Callout Boxes | Spreadsheet |
Callout Boxes
Yet another use for tables is to make little callout boxes which have a title and some text. These are commonly found in columns on the side of the page. Have a look at this little box over to your left for an idea.
Spreadsheet
Lastly, there is the classic spreadsheet look for tables. The standard
defines a number of tags that you can use to define headers, make cells span
more than one row, make cells span more than one column, and so forth.
| Year | Humidity | Recorder |
|---|---|---|
| 1960 | 10.2 | Jones |
| 1970 | 12.0 | Lopez |
| 1980 | 9.1 | Kasparov |
| 1990 | 11.8 | Schikedanz |
Images
Part of the title of this course is the word "Multimedia" so let's discuss a few mult-med items here.
You may also refer to the section "Objects, Imaegs, and Applets in the W3C docs, especially the sections on the IMG tag, which gives you information on specifying attributes for images, and the section entitled Visual Presentation of Images, which tells you how to specify borders, whitespace, alternate text, and the like. You will also find information here on how to make image maps, which we will probably not cover in the lab.
Alternate Text
The IMG tag contains an attribute called alt for specifying alternate text. In graphical browsers, this text will pop up in a little yellow window when you fly the mouse over the image. In non-graphical browsers, this text will be displayed in place of the image. It is considered courteous to supply alternate text.
Example: Rest the mouse pointer over this image:
Sizing Images
The height and width of an image can be specified by supplying pixel or percentage values to attributes by the same name.
Previous example resized:
Positioning Images
Images can be positioned using the align
Linked Images
Just like text, images can be surrounded with <a href="JUMP"> and </a> tags to make them clickable. Consider the following example:
Click on this image to jump to the HTML 4.0 validator:
Note that unless overridden, linked images are displayed with a border which changes colors when clicked.