Further HTML

More HTML - with added Tables and Forms!

In the previous page you saw how HTML can be used to create simple web pages with pictures, background colours and different fonts. However, to make web pages look a little more attractive you can use HTML tags to govern the layout of the text and pictures on the page. You can also add special buttons and text boxes to accept input from the user.

Tables

Marble World

Links

Photos

News

Down-
loads

Welcome to the newly updated Marble World Web Site!

You will notice a new, more modern layout with an improved gallery of YOUR marble photos, and all the latest news in the crazy world of Marbles.

The imaginary web page shown here on the left has been made out of a single, large table that takes up the whole of the page.
The table consists of 2 rows and 2 columns: making 4 individual table cells.

To define a table you use (surprisingly) the <table> tag. With a <tr> tag to define each row of the table.
Now each cell on a row has to be defined ... and to do that you use the <td> tag.

The code (without the colour and font definitions) for the table is shown on the right.
If you view the source HTML of any of the pages on this site you will see that they use a lot of tables for layout.

<table width="100%" border="1">

<tr>
<td width="25%">
<img src="balls.gif">
</td>

<td>
Marble World
</td>
</tr>

<tr>
<td width="25%">
<p>Links</p><p>Photos</p><p>News</p><p>Down-<br>loads</p>
</td>

<td>
<p><b>Welcome to the newly updated Marble World Web Site!</b></p>
<p><i>You will notice a new, more modern layout with an improved gallery of <b>YOUR</b> marble photos, and all the latest news in the crazy world of marbles.</i></p>
</td>
</tr>

</table>

Tables are the most common way to define the layout of your screen. You can merge table cells; have tables within other tables; and vary the spacing and size of the table cells. They enable you web page to load quickly and adapt to different screen sizes.

Forms

<p align="center">Information Page</p>
<p>Name: <input type="text"></p>

<p>Marble Preference:<select name="select">
<option>pea</option>
<option>alley</option>
<option>king</option>
<option>ball bearing</option>
</select></p>

<p align="center">Male
<input type="radio" value="radiobutton">
<input type="radio" value="radiobutton">
Female</p>

<p>I am a member of Marbles Anonymous
<input type="checkbox" value="checkbox">
</p>

<p align="center">
<input type="submit" name="Submit" value="Submit">
</p>

Forms can be used to collect data from the user. In this example there is a form shown in pink on the right (the HTML code for this form is given on the left).

The users' name can be entered into a text box - defined by the <input type="text"> tag.
The user can select their marble preference from a drop-down list <select> and <option> of different marble options.
Radio buttons <input type="radio"> are used for mutually exclusive data (you cannot enter a value of both male and female).
The checkbox <input type="checkbox"> accepts data that is either true or false.

... and the button can be pushed!

Information Page

Name:

Marble Preference:

Male Female

I am a member of Marbles Anonymous

Of course you need some program code (maybe written in JavaScript or Perl) to do something with the data once it has been submitted by the user. It may be needed to collect details about an order (such as a book from Amazon); or the criteria for a search (e.g. Yahoo) of internet web sites.

The web pages on this site use forms for the little test questions at the bottom of most of the pages. On many of the pages (particularly the ICT ones) the user selects the correct answer from a list and presses a button to find out which ones were right and also to find out a final score for that page.

If you look at the code for my pages you will see that the data submitted by the user is handled by one or two (depending on the page) small routines written in JavaScript.