Writing your own web pages

HTML in more detail

To recap on the tags we've covered so far:

<html>...</html> begin and end a HTML document
<head>...</head> marks the head of the page
<title>...</title> indicates the title of the page
<body>...</body> marks the body of the page, which should follow the head
<h1>...</h1> marks text to be displayed as a type 1 heading (the largest)
<b>...</b> marks text to be displayed in bold
<a href="location">...</a> gives a link to another document

Headings

There are six sizes of heading available, using the codes <h1>...</h1> to <h6>...</h6>. They appear in your web browser as follows:

Heading size 1

Heading size 2

Heading size 3

Heading size 4

Heading size 5

Heading size 6

As a general rule, anything smaller than heading size 4 is readable only with difficulty.

Text effects

The following effects are some of the basic ones available:

<b>...</b> shows text in bold
<i>...</i> shows text in italic
<u>...</u> underlines text. This is considered very bad style, as people often confuse underlined text with links.
<address>...</address> shows an email address at the bottom of the page (usually in italic)
<tt>...</tt> gives text in a terminal-like font
<pre>...</pre> gives preformatted text in a terminal-like font, which will appear exactly as you type it, including line breaks, spaces and tab stops

Other effects

We've already seen the <p> tag to give a paragraph break. <br> gives a line break (the browser doesn't print a blank line but does move on to the next line of text).

<hr> gives a horizontal rule across the page, like this:

Those three tags don't require a closing tag.

To create a list of items, use the codes <ul>...</ul> to indicate the beginning and end of the list, and <li>, with no closing tag, to denote list items (a bullet will be placed by these). You can also create embedded lists. For example, the code:

<ul>
	<li>Faculty of Engineering
	<ul>
		<li>Electrical
		<li>Chemical
		<li>Civil
	</ul>
	<li>Faculty of Social Science
	<ul>
		<li>Sociology
		<li>Anthropology
		<li>Psychology
	</ul>
</ul>

will create the following:

Faculty of Engineering
- Electrical
- Chemical
- Civil
Faculty of Social Science
- Sociology
- Anthropology
- Psychology

Inserting images

Images may be inserted into your document by using the <img> tag. The basic syntax of this tag is:

<img src="image.filename" alt="Description">

The text following alt= will be displayed if a text browser is being used, or if the user has chosen to turn images off to speed up loading of the page. It's important, then, to choose a meaningful description for the image.

Next Section: Where next?
Back to Index

Rhys James Jones, rhys@sucs.swan.ac.uk