XHTML 1.0 Tutorial Part V

In this lesson we will be looking at...

Internal linking | XHTML tables | XHTML forms | Frames

Internal Linking

Previously we only linked to other pages. Sometimes, though, if a document has many sections, you may wish to link to a section in the same page. Here we will learn how.

Firstly, we must create an anchor element within the page to create a 'hot-spot'. We do this with the syntax:

<a name="somename"></a> or <a name="somename" />

The anchor is an empty element in this case, so remember to close it using either of the methods shown above

Example:

We will create an anchor element and place it at the end of this page before the closing body tag, and call it demo:

<a name="demo"></a>

Now we make a hyperlink to this 'hot-spot' in a similar way to normal links, but with an important difference: the href attribute will contain the hash sign [#] and the anchor name, like this:

<a href="#demo">Click here to go to the end of the page</a>

Click here to go to the end of the page

Notice the url of the link contains the page name, plus #demo. We can extend this to link to certain sections of other pages too, for instance, changing the href to href="tutorial3.html#background" will take you to the first CSS tutorial, and the section on background colours.

XHTML Tables

XHTML tables look very daunting at first impression, but are easy to get the hang of once you understand the syntax. (It's taken me longer to write out this section than it will for you to learn it, I reckon!). We will start with a simple table.

Example:

source code for table

Which gives:

Star Constellation
Vega Lyra
Deneb Cygnus
Altair Aquila
Rigel Orion

Let's go through this example bit by bit. The first tag is the table tag, which tells the browser a table is following. This encloses all the table data and heading cells.

The next tag is the thead tag, which stands for table header. Our column headings are Star and Constellation. We put these two headings within the thead tag. Each of these are further enclosed by a tr tag, and then by their own th tag. Confused? It'll all make sense soon, I promise.

The thead tag merely informs the browser that heading data will follow. It doesn't actually do anything as such, but if you want the columns to have headings, it is required for the table to render correctly. Most browsers render the contents of thead in a bold font.

Next we have the tr tags. This stands for table row. So, everything between the <tr> tags will be on one row.

Now, each row will have some number of cells. For simplicity, we have only used two cells per row, i.e. two columns. So within the tr tags we will have two th tags. Each th tag will have the data for the heading cell within the table, like so:

Star Constellation

Now that the column headings are done, we will put some data into the next row's cells. We start the main body of the table with the <tbody> tags. Just like the thead tags, this element merely informs the browser that the body of the table is following.

Next we have the tr tags. Again, this denotes rows, just as before. Within the tr tags we will insert some table data. We do this by enclosing the data within td tags, which stands for table data, and placing this within one set of tr tags, to form the first row of our table, as follows:

Vega Lyra

Now we can carry on until we have entered all our data. Then we end our tbody, and finally we close the table tag. And that's all there is to it! Look over the code and the explanations again if it still doesn't make sense, and try playing around with the coding in your text editor - the best way to learn XHTML (or indeed any other computer language) is to try it out yourself.

Sometimes you may wish to create a table merely for laying out forms, images etc. In this case you can omit the thead and tbody sections. Just use tr and td within the table tags.

You can also add a table footer at the end of the table, using <tfoot> and <th> as above. For instance, you might use the table to display calculations, in which case you can use the footer to store the results.

More table features

You can create a caption for the table by adding the caption element after the <table> tag and before any table headings or data. Like below:

Table Source Code

Gives:

Our XHTML table

The caption element has caused our table to have the title 'Some bright stars'. Most browsers place the caption text at the top of the table, regardless of wether you place the caption tags at the beginning of the table or at the end. Notice that we have used the summary attribute in the table tag. Like the alt attribute for images, the summary attribute provides information about the table, which improves accessibility. Again, the summary attribute is read out by screen-readers.

We have also used the width attribute. This specifies the width of the table. It can either be expressed in percentages, as above, or in pixels, in which case we merely write the number of pixels, e.g. width="400" would give a table 400 pixels wide. When using percentages, the table width will adjust as you resize the browser window. We have set the table to span 50% of the screen width as you can see above. Now we have resized the window, note how the table size has also changed (in this case the browser has set the table width to above 50% of the screen width, even though we have specified 50%, otherwise the text wouldn't fit the cells):

Resizing the window

You can also use the width attribute for td elements. Remember though, that most browsers will take the width specified for the first cell in a column and use this width for all cells below it.

You can also set the border width using the border attribute. We will learn a more customisable way to do this in the next lesson.

Merging rows and columns

Columns and rows can be merged using the td attributes of rowspan and colspan. We will first demonstrate the colspan attribute.

Example:

Merged Columns Demo
Merged Columns Code

Here we have used the attribute colspan with a value of 2. This means the cell is set to span 2 columns (or merge 2 columns together). This attribute can be used for both td and th elements. Let's try a more advanced example.

Merged Columns Demo
Merged Columns Code

Here we have made 2 th cells, which span 2 columns each. Let us now look at merging rows.

Example:

Merged Rows Demo
Merged Rows Code

We have created a cell that spans three rows, and another cell below it that spans both columns. The table originally has two columns. Therefore two td cells are initiated in the first table row. However, since we have caused the first td to span three rows, the subsequent 2 rows only have one td element in each row.

Note that the merged cell in this example counts as part of the first row.

We then added another cell at the end of the first three rows. This cell is set to span both of the columns, which is why, again only 1 td element is present. Otherwise, if it wasn't merged, we would have had to include another td element to balance the table.

XHTML Forms

We will take a look at how to create XHTML forms, which can be used for user input. Please note we will only learn how to make the forms, not process them. In order to use the data inputted through a form, we need to use a client-side scripting language, such as JavaScript, or a server-side language - I recommend PHP.

Form elements can take one of the three types:

All forms elements must be within a <form> tag, for example:

<form name="myform" method="post" action="somepage.php">
...your form elements...
</form>

The name atribute specifies a name for the form to be indentifed by. action specifies the form handler, i.e. the page that will process the script. If your form is not to be processed by a server-side form handler then set the action to action="". method states the method by which the input values will be sent to the server. post means the data will be sent through the http request. The get method appends the input values to the url. You may have seen urls such as www.somepage.com/process.php?user=name&choice=somechoice. The text following the ? is the data sent to the server by the get method. The get method is limited to 1024 characters. If the data sent exceeds this limit, the method will default to post.

Text Fields

We will start with text inputs. These take the syntax:

<input type="text" name="fieldname" />

We can give them a label with the <label> tag:

<label>Username: <input type="text" name="fieldname" /></label>

Example:

We can specify a default value by assigning a value attribute: value="defaulttext" and a length with the size attribute. In this case we have set size to "40" and value to "Hello World":

Password Fields

Next we have the input password field:

<label>Password: <input type="password" name="fieldname" /></label>

This is the same as a text input, but the content is masked with asterisks.

Buttons

Buttons are made in a similar way:

<input type="button" name="abutton" value="Submit" />

The value attribute is the text that will be displayed on the button; setting the value to "This is a button" produces:

Submit buttons

This is similar to the standard button. When a submit button is clicked, the page will redirect to whatever page has been specified in the form's action attribute.

<input type="submit" name="submit" value="Submit the Form" />

Because no form handler has been set for this form, clicking the submit button will normally just take you back to the originating page.

Reset button

Again, this is similar to making a normal button. Clicking a reset button will cause all values entered into the form to clear, or reset to whatever value was declared in any value attributes. Try entering some values in the text fields, then click the reset button below:

<input type="reset" name="clear" value="Clear the Form" />

Radio Buttons

Radio buttons are used when you want the user to only select one from a list of choices.

Example:

<p><strong>Please select your age:</strong></p>

<label>11 or under:
<input type="radio" name="age" value="11-" /></label>
<label>12-24:
<input type="radio" name="age" value="1224" /></label>
<label>25-39:
<input type="radio" name="age" value="2539" /></label>
<label>40+:
<input type="radio" name="age" value="40+" /></label>

Gives:

Please select your age:

Radio buttons in one group must all have the same name, else the user will be able to select more than one button. The values must all be unique.

Checkboxes

These are made in a similar way to radio buttons. In this case, you would use them to enable a user to select more than one choice.

Example:

<p><strong>Which colours do you like?</strong></p>

<label>Red
<input type="checkbox" name="colour" value="red" /></label>
<label>Orange
<input type="checkbox" name="colour" value="orange" /></label>
<label>Yellow
<input type="checkbox" name="colour" value="yellow" /></label>
<label>Green
<input type="checkbox" name="colour" value="green" /></label>
<label>Blue
<input type="checkbox" name="colour" value="blue" /></label>
<label>Indigo
<input type="checkbox" name="colour" value="indigo" /></label>
<label>Violet
<input type="checkbox" name="colour" value="violet" /></label>

Produces:

Which colours do you like?

You can make selection/s checked by default by adding the attribute selected="selected" to the input tag. This also works for radio buttons, but remember that only one radio button can be selected at any one time.

Select options

This is a drop down list. A user may select one option from a given list.

Example:

<p><strong>Please choose your favourite city:</strong></p>
<select name="cities">
<option value="london">London</option>
<option value="dublin">Dublin</option>
<option value="paris">Paris</option>
<option value="oslo">Oslo</option>
<option value="helsinki">Helsinki</option>
<option value="geneva">Geneva</option>
</select>

Gives:

Please choose your favourite city:

Adding the size attribute to the select tag (NOT the options tag) enables more than one option to be displayed at a time. Here we have set the select element's size to size="4":

Please choose your favourite city:

Textareas

If we wish to enable the user to enter large blocks of text, for instance, the comments input on a feedback form, rather than using input type="text", which will only enable a user to view a sentence or so at a time, we can use the <textarea> element.

Example:

<textarea name="comments" rows="10" cols="30"></textarea>

Gives:

You can set some default text to display within the textarea by adding the desired text between the start and end tags, like this:

<textarea name="comments" rows="10" cols="30">Please enter your comments here
</textarea>

Any whitespace, such as tabs, will also show up in the browser, so bear this in mind when writing in any default text.

The rows attribute specifies the number of lines of text the textarea will display before scrolling (in simple words, the height of the textarea in lines). The cols attribute shows the length of the textarea in letters (textareas use a monospace font by default).

Frames

Sometimes you may wish to display two web pages together; a navigation bar, or a header, together with the main content pages, for instance. To do this, we use XHTML frames.

Say we have two pages, navigation.html and main.html. We want the navigation page to display on the left hand side of the page, and the the main page to take up the rest of the space. First we have to make the page that holds these two documents together in a frameset, which will look something like this:

frames demo

This is how we do it:
frame source

Notice how we have specified the document type in this file as frameset.

The frameset tag tells the browser that a frameset follows. cols="160, *" tells the browser that the layout is two columns (we could also set it as rows="160, *" to produce two rows instead), of which the first column is 160 pixels, and the second column takes up the remaining space on the page (denoted by *).

Now we tell the browser which pages we wish to use as the framed pages. The first one we will use is the navigation bar. This will take up 160 pixels, as stated in the framset tag. We use the frame tag to add the frame. We use the src attribute to give the url (absolute or relative) of the page we wish to use. In this case it's navigation.html. We also give each frame a name, which is used for linking or identifying purposes, as we shall see later on. In this case we call it simply nav.

Try to use simple, easy-to-remember names when naming your frames.

We has also added the scrolling attribute. We can set this to no, which prevents the user from scrolling down the page (this is useful when we don't wish to display frame borders). If you don't want to prevent the user from scrolling, simply leave this attribute out.

frame tags are empty elements, so remember to close them, either by making them a self-closing tag, as above, or by explicitly closing the tag.

The second frame contains the page main.html and spans the remainder of the page, as stated above. We call this frame main. Now we have stated both frames in the page. However, some older browsers and pocket PC/mobile devices do not support frames, so we have to make provision for them to view our site. We do this using the noframes element. We can then provide a link to the main page (be sure you include some way of navigating from the main page if you do this), provide a full non-framed version of our site, or by linking to a site where the user can download a frames-enabled browser. If a browser cannot display frames, then this alternate content will be shown by the browser. Otherwise, the browser ignores the contents of the noframes tag.

We could also make a page with three frames, like so:

three frames demo

To do this, we simply change cols="160,*" to cols="160,*,160" (or whatver column width values you want), and add another frame tag (in this case we've just C+P'd <frame src="navigation.html" name="nav" scrolling="no" noresize="noresize" /> after the 2nd frame element). We have also used the noresize="noresize" attribute. This prevents the user from resizing the frame.

We could also do three rows...

three rows

rows source code

Or a row and a column...

nested frames
nest frames source code

Here we have originally created a frame with two columns. The first column is the navigation bar. The next column is then spilt into two further frames. This is known as nested frames.

Link for another frame

If we click on a link in the navigation bar, by default, it will load in the same frame. However, we can make the linked page load in the main frame, by tagging target="main" onto the end of any hyperlink we wish to load in the frame named main. Like this:

Example:

<a href="somerandompage.html" target="main">cool link</a>

We can then use this syntax to make a hyperlink open in any frame in the document. To override the frames and make the page load in the full browser window, we can use the preset value of _top, like this:

<a href="somerandompage.html" target="_top">cool link</a>

In the next tutorial, we will look at formatting borders, creating a style class and the block model.