This page is to help someone who wishes to create, in its entirety, an HTML document. It also contains some tags that one might find useful when creating a new page.
Apart from what you can learn from the Basic HTML Tags Tutorial, the only additional tags that a person absolutely needs to write an HTML page are the following:
At the very top of the page you need:
<html>
<head>
<title>Put page title here</title>
</head>
<body>
At the very bottom of the page you need:
</body>
</html>
The "html" tag tells the browser to look for the various tags, and tells it that it is not dealing with a plain-text page.
I don't really know why there are "head" and "body" tags, but there are, so one must use them.
The "title" tag tells the browser what to put in the bar at the very, very top of the screen. On my machine this is the blue bar that says something like "Netscape--[Advanced HTML Stuff]". It is the "Advanced HTML Stuff" that is the title of the page; the Netscape portion of that title will appear regardless of what you put as your title.
In the top "body" tag, you can put in your font color and background information.
Different people can set their default background color to different things. If you want it to appear white for everyone, you must define the bgcolor="#ffffff".
<body text="#0000ff" link="#00ff00" vlink="#ff0000" background="http://www.spring.net/~anneh/back.jpg">
or
<body text="#0000ff" link="#00ff00" vlink="#ff0000" bgcolor="#ffcccc">
You also need to put in all of the end of line breaks by hand with:
<br>
And all of the paragraph breaks by hand with:
<p>
Without these two, the text will appear in one large block, without any paragraph breaks.
<br> will cause the text to begin directly below the previous line, and <p> will leave a blank line between the sections of text.
Example:
"The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor,<br>
and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, <p>and all the unjust accusations accompanying her rejection. He who, she had been persuaded, would avoid her as his greatest enemy, seemed, on this accidental meeting, most eager to preserve the acquaintance, and without any indelicate display of regard, or any peculiarity of manner, where their two selves only were concerned, was soliciting the good opinion of her friends, and bent on making her known to his sister."
To center things on the screen, (this will work for everything between the tags: text, images, tables, etc.)
You can make a picture also be a link to a web site by combining the links for each. The link tag (a href=) goes around the outside, with the image tag (img src=) taking the place of the words of the link:
<a href="http://www.pemberley.com/janeinfo/janeinfo.html"><img src="http://www.austen.com/images/sketch2.gif"></a>
Result:
Or, with text too:
<a href="http://www.pemberley.com/janeinfo/janeinfo.html"><img src="http://www.austen.com/images/sketch2.gif">Jane Austen Information Page</a>
Result:
You can also remove the border around the image, by adding border=0 to the inside of the image tag:
<a href="http://www.pemberley.com/janeinfo/janeinfo.html"><img src="http://www.austen.com/images/sketch2.gif" border=0>Jane Austen Information Page</a>
Result:
If you want the text to appear exactly as you type it, use these tags:
<pre> text </pre>This will use what is known as a "fixed-width font". This means that every character will be exactly as wide as every other character. This is useful if you are trying to line up text on different lines. But you must put in the end-of-line breaks yourself--you do not have to use the <br> or <p> tags to do this, just hit "Return"/"Enter" at the end of the line.
Sometimes it is hard to get things to appear exactly where you want them on a page without creating a table. The table allows you to line things up in ways that you can not do with regular tags. This is especially true with pictures. Without a table the text will tend to wrap around a graphic, but a table will keep things in better alignment.
In addition you may simply want to organise your page using tables, either way the tags for a table are:
<table> -- Starts the table
<tr> -- Starts each row
<td> -- Starts each cell
</td> -- Ends each cell
</tr> -- Ends each row
</table> -- Ends the table.
Example:
<table><tr>
<td>Row 1-Cell 1</td>
<td>Row 1-Cell 2</td>
<td>Row 1-Cell 3</td>
<td>Row 1-Cell 4</td>
</tr><tr>
<td>Row 2-Cell 1</td>
<td>Row 2-Cell 2</td>
<td>Row 2-Cell 3</td>
<td>Row 2-Cell 4</td>
</tr><tr>
<td>Row 3-Cell 1</td>
<td>Row 3-Cell 2</td>
<td>Row 3-Cell 3</td>
<td>Row 3-Cell 4</td>
</tr></table>
Result:
| Row 1-Cell 1 | Row 1-Cell 2 | Row 1-Cell 3 | Row 1-Cell 4 |
| Row 2-Cell 1 | Row 2-Cell 2 | Row 2-Cell 3 | Row 2-Cell 4 |
| Row 3-Cell 1 | Row 3-Cell 2 | Row 3-Cell 3 | Row 3-Cell 4 |
You can then add a border to the table to divide up the cells by adding the word "border" to the table tag:
<table border>
Result:
| Row 1-Cell 1 | Row 1-Cell 2 | Row 1-Cell 3 | Row 1-Cell 4 |
| Row 2-Cell 1 | Row 2-Cell 2 | Row 2-Cell 3 | Row 2-Cell 4 |
| Row 3-Cell 1 | Row 3-Cell 2 | Row 3-Cell 3 | Row 3-Cell 4 |
By specifying how wide you want your border to be, you can create some nifty borders. Here is what you can do by specifying the border width (in pixels) as 5 or as 30:
<table border=5>
Result:
| Row 1-Cell 1 | Row 1-Cell 2 | Row 1-Cell 3 | Row 1-Cell 4 |
| Row 2-Cell 1 | Row 2-Cell 2 | Row 2-Cell 3 | Row 2-Cell 4 |
| Row 3-Cell 1 | Row 3-Cell 2 | Row 3-Cell 3 | Row 3-Cell 4 |
<table border=30>
Result:
| Row 1-Cell 1 | Row 1-Cell 2 | Row 1-Cell 3 | Row 1-Cell 4 |
| Row 2-Cell 1 | Row 2-Cell 2 | Row 2-Cell 3 | Row 2-Cell 4 |
| Row 3-Cell 1 | Row 3-Cell 2 | Row 3-Cell 3 | Row 3-Cell 4 |
Here is an example of the problem of pictures and text:
Without a table:
"The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection. He who, she had been persuaded, would avoid her as his greatest enemy, seemed, on this accidental meeting, most eager to preserve the acquaintance, and without any indelicate display of regard, or any peculiarity of manner, where their two selves only were concerned, was soliciting the good opinion of her friends, and bent on making her known to his sister."
With a table:
| "The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection. He who, she had been persuaded, would avoid her as his greatest enemy, seemed, on this accidental meeting, most eager to preserve the acquaintance, and without any indelicate display of regard, or any peculiarity of manner, where their two selves only were concerned, was soliciting the good opinion of her friends, and bent on making her known to his sister." |
An image map is a single graphic which, when you point at different parts of the picture, will link you to different pages. Here is a description on how to make image maps:
© 1998, 1999, 2000 Copyright held by Ann Haker.