<< .. Go to : : Home : : Exercise 4 : : Demo 4A : : Demo 4B : : Demo 4C : : Demo 4D : : Demo 4E : : TAGS : : All Class Demos .. >>

Exercise 4 Demo: Part A : Linking - Using the Anchor Tag

This is the HTML you will need for Part A of Exercise 4.

Linking: Relative and Absolute URLs

The anchor tag is written like this: <a> </a>. It requires an attribute or it is nonfunctional. It points the web visitor to another destination.

Relative URLs

The most common attribute is the Hypertext Reference (href) attribute. Its value is the page you want to link to. href="page1.html"

Between the opening and closing anchor tags you insert some text, which becomes the link that appears on the page. By default, text links appear blue and underlined.

To link to a page or file in the same website (a relative URL), the hypertext reference (href) value would be the file name of the html page you wish to access and the code would look like this:

<a href="page1.html">Page One</a>

This would create a link which opens Page 1 in the browser window.

If you are linking to a page that is within the same folder you just need the name of the page - "page.html". Do not use a long url to link to pages within a website.

Absolute URLs

To make a link that goes to a web page that is in a completely different website (an absolute URL), the href must be the complete URL. You have to give the browser complete directions to find the page you are looking for that exists somewhere else on the web.

Place text between the opening and closing anchor tags for your link. This gives you something to click onto. Your HTML code could look like this:

<a href="http://www.apple.com">Apple Computer</a>

It produces the link to Apple Computer

The only downside to an absolute URL is that it takes the visitor away from YOUR site. Not good. So what can you do? An extra trick attribute/value called target="_blank" You put this code in the <a> tag after the URL so that it looks like this:

<a href="http://www.apple.com" target="_blank">Apple Computer</a>

The Apple site opens up in a new window, leaving your site in the original browser window. Try it!

Remember that even though the opening <a> tag has attributes in it, the closing tag is simple </a>

For more about using Links go to Part B of Demo 4.

Go back to the Exercise 4 page.

© Claudia Faulk. Created in 2008. Updated 1.10