Links between pages

Save lists.html as links.html.

In the unordered (bullet list) add a tags around the word links.  Put them inside the li tags though so it looks like this:


Save and view but the text will probably look the same and there is no link (in some browsers there may be a link but try it and it will not work).

Attributes and values

You used attributes for images in the introductory tutorial but they were not explained.  Attributes are extra information contained inside the opening tag.  Change your second list item to this by adding the a tags but also an href attribute:

<li><a href="media.html">media</a></li>

The new attribute href is the weird name given to where the link should lead (the file name).  The bit in the double quotes after the equals is the value for this attribute.  So href is set equal to media.html

Save the file and view it in a browser.  The link should now be visible but it will not work (try it) as there is no page of that name (yet).


Another potentially useful attribute is title.  This is some extra text which will pop up if you hover over the link.  Change your third bullet list item to this:

<li><a href="tables.html" title="This link leads to a page with a table in it">tables</a></li>

Save and view.  Try hovering over the link in the browser.  You can add these titles to almost any HTML element.

More links

Make your fourth list item into a link as well.  Give it an href attribute with the value of head.html.  Add a title to this link (the page will be about the head element and what should go in it). 

Now delete the first item in the list as it would just be a link to the current page (without an href it is pointless anyway).

Change the heading and the list text in your your numbered list so it has links to the previous pages you created like this:

Links in the list

The href values should be textonly.html, textemphasis.html and lists.html.  No need to add titles unless you want to.

These numbered links should work so test them the Back button in your browser to return to the links page every time).

Links to other sites

To make a link to another site you can just copy the URL from a browsers address bar and paste it in as the value for the href.  Make a fourth link in the numbered list:

<a href="">YWS</a>

If your browser takes the http:// away you might need to add it manually.