Lesson Two

Now that you can construct a basic web page its time to put a bit more life into it. Pictures or even animated gifs as above can be inserted at any place within the document using the tag. (The exact directory of the image needs to be inserted. When creating several html pages with many images it is best to save them all in one folder in that way you will not have to insert a full path name to another area of your drive. For example I have saved all my html pages in a folder called HTML and within that folder I have another folder called images and within that folder another called photos. So to insert a photo in one of my html pages the pathname would look like this .)
Images can be aligned to the right, left or centre of the text. So our document will look something like this.
(From now on I will omit the html, title and head tags in examples.)

This is the bandstand found near Pickie fun park

Here it is on the left of the document.
Have a look at the results here
There are a few elements still missing from our image tags that we have to include so that we will have a uniform display in all browsers.
It is always best to include the dimensions of your image using: width="" and height=""
You also have to set a border property and if you are not using one set it to zero: border="0"
In case your image fails to load it is always essential to give your image a name: alt="bandstand"
So if we put all these into the tag it will look something like this:
band stand

Background Images

There are several ways to include a background image into a document the most basic being including the background property in the body tag. (I will cover background images in tables and style sheets in later lessons.)
A simple but effective background border image
View the results here.
This background is only a few pixels high but over 980 pixels long and because all background images in the body tag are repeated it results in the left border image.
When using images it is very important to take download times into consideration. Generally speaking the largest image you should use is 20 kilobytes. A way to get around this problem is to have a small lower quality image (thumbnail) linking into the full high detailed image so the user can decide whether to download it or not.


Once you have your page design established you need to link into other pages. This is done by using an anchor tag and providing the address to be linked to. For example
. However if you are linking to a document within your own folder will suffice. After you declare your link you need to provide the name of the location and close the tag so the result would look like this:
An excellent search engine An excellent search engine

No problems there but what if you want to link to an area on the same page? Easy enough just decide on a relavent name for the section you want to link to and place a # in front of it. Then in the area you want to link to insert a tag. The result will look like this.

List of details
Lots of text here...
blah blah blah
In the next lesson we will cover more detailed aspects of formatting the document including different text effects and tables.