HTML Lessons  

  1. HTML Introduction

  2. HTML Tags

  3. HTML Page Structure

  4. HTML Backgrounds

  5. HTML Formatting Text

  6. HTML Formatting Fonts

  7. HTML Headings

  8. HTML Entities

  9. HTML Line Breaks

  10. HTML Lists

  11. HTML HR- Horizontal Rule

  12. HTML Images

  13. HTML Links

  14. Table Introduction

  15. Table Rows & Columns

  16. Table Width

  17. Table Alignment

  18. Table Border Color

  19. Table Background Color

  20. Table Background Image

  21. Cell Alignment

  22. Cell Padding

  23. Cell Spacing

  24. Cell Spanning
 

Links

Anchor tags are used to create links. These are anchor tags:

<body><a> </a> </body>

Then we'll need to insert the href attribute. This tells the browser what the name of the page we are linking to is.

<body><a href="pagename.html"> </a> </body>

Then we need to put the text that we want to appear as a link in between the opening and closing anchor tags.

<body><a href="pagename.html"> This text is a link.</font></body>

Let's test it out.

Copy and paste the following code into a blank notepad file and save this file as page1.html.

 Next, copy and paste the following code into a new blank notepad file.

Now, save this file as page2.html. Make sure that you save it in the same directory (meaning the same folder) as the page1.html file.

The page1.html file page should look like this:

This page2.html should look like this:

Notice how when you click on the link "Go to Page 2" on page1.html the browser will take you to page2.html. And when you click on the link "Go back to page 1" on page2.html the browser will take you to page1.html.

Good for you! You have just created you very first links!

Please Note: The examples above explain how to link to another page that is located in the same page your link is in. If you want to link to a page that is in a differnt folder then you would have to add the folder name as follows:

<body><a href="foldername/pagename.html"> This text is a link.</font> </body>

Linking to another website

To link to another website you will need to include the entire url as the value of the href attribute. 

Here is an example of a link to Google's website.

<body><a href="http://www.google.com">Google</a> </body>

The result would be:

Google

Linking to an email address

You can also link directly to an email address.  Try the example below.  Once you click on the link below, your default email program will open with the email address already in the "To" box.

Contact us

The code for linking to an email is a bit different.

Below is the code for the link above.

<body><a href="mailto:info@studio6000.com"> Contact us</a> </body>

The only difference is, instead of a web address as the value of the href attribute the value will be mailto: and then the email address.

Next Lesson

© Copyright Studio6000 2006. All rights Reserved.