How to add a Hyperlink to other Web Page

Linking in HTML code is done with the anchor tag, the <A> tag. The letter "A" in the tag is then followed by an attribute. For a link to another web page, the "A" is followed by "HREF". To set a bookmark in the same page, the "A" is followed by "NAME", which you'll see how to do later.

Take a look at this example, which is a link to the popular search engine Google:

<A HREF = "http://www.google.com/">Google Search Engine</A>

Notice where all the angle brackets (< >) are in the link. After the first one, we have the "A" part of the tag. Then we have the HREF part, signifying a link to another web page. After that comes an equals sign (=). After the equals sign comes the address of the web page itself. The address is case sensitive, so if there is a capital letter in the address, make sure to include it. This address www.google.com is different from this address www.gOOgle.com.

After the address comes the right angle bracket ( > ). Next comes the text that people see, the text you want them to click on. To close an anchor link, you use the end anchor tag. Which is this: </A>

But let's get some practical work done.

Open up your template text file. Click File > Save As from the menu in Notepad (or whatever text editor you are using). When the Save As dialogue box appears navigate to your HTML folder:

So we are going to save the new web page outside of the pages folder.

In the file name box, type index.html. Make sure the Save As Type area says All Files, if you use Windows. Before you click the Save button your Explorer window should look like this:

When the Save button is clicked, you should then have a web page called index.html in the HTML folder:

What we're going to do is to place a hyperlink on our index page. When this hyperlink is clicked we'll tell the browser to load a page called about.html. We'll save this new about page in our pages folder.

So, use your template text file to create a new web page. When you save the page, double click the pages folder to move inside it. In the file name box, type about.html. Then save your page:

So, we have a web page in the HTML folder and a web page in the pages folder. We now need to link them together.

Open up you code for the index.html page. Insert the following line between the two BODY tags:

<A HREF="pages/about.html">About this site</A>

Your code should look like this (we've added a TITLE):

Save your work and load the page in your browser. You should see this:

And that's a hyperlink! Notice that the only thing on the page viewable to the visitor is the text "About this site". The code we wrote turns it from normal text into a link that people can click on. The code itself was this:

<A HREF="pages/about.html">About this site</A>

So to turn text into a link you start with an angle bracket followed by the letter A. After a space, type HREF. An equal sign comes next. The page you want to link to goes between quotation marks. But notice we started with the folder name: pages/about.html. This says, "Look for a page called about.html. This page is in the pages folder".

Type a right-pointing angle bracket to end the first part of the link code. The text you want people to see comes next "About this site". To wrap it all up, you need the closing hyperlinks tag : </A>.

When you click your link, you should find a blank page loads in the browser. If you look at the address bar, you should see it says about.html on the end. You have successfully linked to a new page!

To get back to the index page, you need another link.

Open up your code for the about.html page. For the about page, we need to construct the correct HREF. We can't do this:

<A HREF="pages/index.html">Go to the Home Page</A>

The above HREF is pointing to an index page in the pages folder. But our index page is not in this folder. It is in the HTML folder, which is one folder up from pages. Just like we did for images, we can use two dots and a forward slash:

<A HREF="../index.html">

Two dots and a forward slash, remember, mean "Go up one folder".

So insert the following code in your about.html page:

<A HREF="../index.html">Go to the Home Page</A>

Save your work and refresh the page in your browser. Click your hyperlink on the about.html page. You should find that the index page will load. When you click the link on the index page, the about page will load.

Two new elements are the HTML5 tags FIGURE and FIGCAPTION. The first one, FIGURE, is good for things like images and other graphics, while FIGCAPTION is used to tell people what they are looking at. As an example, take a look at the following code:

<FIGURE>

<IMG SRC="york_images/york_minster.jpg">
<FIGCAPTION>A view of York Minster from a side street.</FIGCAPTION>

</FIGURE>

Here, we've surrounded the IMG code with two FIGURE tags. FIGCAPTION tags are then place under the image. This is what the above code looks like in a browser:

You can have the FIGCAPTION tags above the image, if you prefer:

<FIGURE>

<FIGCAPTION>A view of York Minster from a side street.</FIGCAPTION>
<IMG SRC="york_images/york_minster.jpg">

</FIGURE>

Notice, though, that the FIGURE and FIGCAPTIONS tags don't get formatted for you - you have to do that yourself with some CSS:

FIGCAPTION {

font-style: italic;
font-variant: small-caps;

}

Because FIGURE and FIGCAPTION are new HTML5 tags, older browsers won't know what they are. So they get rendered on the page as inline tags. What this means is you won't get an automatic line break for your figure captions: they will just be side-by-side with the images. The solution is to use the CSS property display with a value of block. Like this:

 

FIGURE, FIGCAPTION {

display: block;
font-style: italic;
font-variant: small-caps;

}

The CSS above tells the browser to render FIGURE and FIGCAPTION tags as block-level elements. Because block level elements are stacked one on top of the other, your caption will then be in the right place - above or below your images.