More About Tags

D. More About Tags

1. Tags are XML markup

So far we have used tags that have a simple form <tag>.

In XML terms, each tag represents an "element". Elements can (but don't have to) have "attributes" defined for them, that give more information about the element.

Many HTML tags take optional attributes.

Example:

<img src="myImage.jpg" width="300" height="200" />
| | | element attribute value attribute name
name (in quotes)

If the three bars, and ONLY the three bars, are all on one line then the text is aligned correctly

2. Making Links

Links are what the web are all about...

"Relative links": to a page that is on your file system somewhere. Use them if you can. They save network resresources and make you text portable.

Examples

<a href="myLink.html">A link to a document in the same directory as this file</a>

<a href="myDirectory/myLink.html">A link to a document in a subdirectory of this file</a>

<a href="../myLink.html">A link to a document in the parent directory as this file</a>

Full link example:

<a href="http://mediaartprojects.org.uk/links.html>This is a link to an external web page</a>

You can link to a specific place within your document with an "anchor"

<a href="#AnchorName>This will be a link</a>

To a place in the same document that you have marked up with a tag like this:

<a name="AnchorName>Link will take you here</a>

3. Adding Images

The syntax is similar to making links, except that that the element is "empty", ie. it does not surround any text.

Example

The alt="description" attribute is required. It is essential for accessibility, and also if for some reason your image does not load or cannot be found
You don't have to specify the size. If you don't, you will get the exact size that you saved the image. If you do, beware of changing the proportions.
Experiment with the attribute align="left | right | center"
Experiment with creating space around your image with hspace="n" and vspace="n"

Note that these last two are useful, but are "deprecated" from the standard in favour of stylesheets.

Try making images links

4. Adding Tables

The display of HTML is very difficult to control, and so tables are very often used for layout. This is thought of as bad practice these days however when stylesheets can usually do the job much better. However, because of incompatibility between how browsers handle stylesheets, and for other reasons, you very often find yourself using tables.

Example

<table width="75%" border="1" bgcolor="#ffff66" align="center">
    <tr>
        <td>First you need to define a row</td>
        <td>Within each row you define a cell with the <td> tag</td>
    </tr>
    <tr>
        <td>You may define the width of the table</td>
        <td>as percentages or actual numbers of pixels</td>
    </tr>
</table>

And that code will look like this in a browser:

First you need to define a row	Within each row you define a cell with the <td> tag
You may define the width of the table	as percentages or actual numbers of pixels

The border = "number-of-pixels" attribute will determine if the borders of your table are visible. Set the number to 0 for an invisible border.
If you would like to set a background image for cell or a table, use background="name of your image"
Experiment with cellpadding="number-of-pixels" and cellspacing="number-of-pixels"
colspan="number-of-columns"will give you a cell that stretches across the number of columns you specified. Try also rowspan="number-of-rows
Find out how to postion text or image elements within the cells

Its best to have a really good idea of what you want your table to look like before you start!