Webpage Creation

The Destination Anchor Tag

Fantastic... Now we have a webpage to work with lets get busy.

We are now going to tackle the Destination Anchor (<a href=" "> </a>) tag.

This tag is very important, as it's the way you navigate between different pages or sites etc.
We have used them for navigating between steps here, you can see them at the bottom of the page.

Before we do this however, we must create a page to link to.
Re-open your blank.html in a new text editor window, enter the following html code, and save it as mysecondpage.html.
If you want to be really flash, put a title for the page between the <title> </title> tags too.

<html>
<head>
<title>My Title</title>
</head>
<body>

<p>My second page.</p>

</body>
</html>

Don't forget to save this file as mysecondpage.html, and close the text editor.

In your first text editor, underneath all of your previous work, enter the following:
<a href="mysecondpage.html">My second Page</a>
Now save the changes.
Clicking on the link My second page will open the mysecondpage.html file.

Refresh your web browser or click here to see the results.

An explanation of the Destination Anchor tag:
As you can see, there are three parts to this tag, the actual anchor tag code, the URL nested within it and the link name, also nested within.

1)	The tag code	<a href=" "></a>	The part that tells the browser what it has to do when the link name [in this case "My second page"] is clicked on.
2)	The URL part	mysecondpage.html	The address of where we want to go when the link name is clicked on.
3)	The link name	My second page	A friendly name for the link, this should be descriptive, so the "surfer" knows where they are going.

We can do a lot more with Destination Anchor tags, however we'll leave that until later, for the moment we just want a basic understanding and one that works.

The Image Source Tag

For a bit of light relief we will now deal with putting pictures on your page. You do this by using the image source (<img src=" "></a> ) tag. The name of the picture will go inside the quotes, as with the Desitination Anchor tag.

To do this you will need a picture to use, your in luck, there's loads on the internet, or you can use this one:

Save as mypic.gif

With your mouse, right click on the picture and select Save picture as, call it mypic.gif and save it. Remember where you put it though, as your going to be writing code to display it.

Note: It is generally a good idea to keep all your images in a seperate directory to all your html files. You can call this directory images, which would mean that any reference to the image must be prefixed with the directory path. i.e. <img src="images/mypic.gif"></a>

Ok, now you've done that, underneath all the other code you've written on myfirstpage.html start a new line and type:
<img src="images/mypic.gif"></a> Note: if you have not put the image in an images folder as above, then this would be <img src="mypic.gif"></a>

Refresh your web browser or click here to see the results.

Note:

If you do not see your image, it is more than likely that you have either misspelled the image name/path.
Or the directory path is incorrect, also, make sure that everything is in the same case.
(although in a Windows environment this is not so important, but a good rule to stick to).
Knowing where your files are is very important. Try and keep them all in one directory/subdirectories.

Attributes Again

We are now going to look at the attribute background="x", where "x" would be a picture name, and the path to it.
background="mypic.gif" or background="images/mypic.gif"
This can also be used in several other tags, but try it in the <body> tag and see what happens.
<body background="images/mypic.gif">

Take a look at what you have done so far, then we'll move on to Step 4.

Seven easy steps - start from the begining or skip to the section you want:
Index	Step 1	Step 2	Step 3	Step 4	Step 5	Step 6	Step 7

More Help