Tuesday, February 28, 2012

Knowing your HTML tags: Anchor Tags


If you have ever worked with HTML, you know the frustrations that come with setting up each page and making sure they all link together. I am going to show you how to understand how the pages link, and we will break down the line of code to understand what each part means.
The first thing we want to look at is the basic structure of the link itself.

<a href=”index.html”>Home</a>

The parts of the link that are highlighted in red are the tags. You need one at the beginning, and one at the end to close the tag. It will not work unless you close the tag. This specific tag is an anchor. It is working to make the pages link together.

<a href=”index.html”>Home</a>

This next highlighted part is the attribute. This attribute specifies the page that it will be linked to. So, if we were adding this line of code to our “About” page, this link would take us to the “Home” page (index.html).

<a href=”index.html”>Home</a>

Our “Home” page text file is called “index.html”. Make sure you put the exact name of the text file you are linking to or it will not recognize it and it will not work. Remember to surround it in quotes too.

<a href=”index.html”>Home</a>

For this example, I am linking my “About” page to my “Home” page. This line of code is in my “About” text file. The highlighted text is what will appear on my page when viewed in a browser. You can put anything you want here. Depending on how you style your links in your style sheet (CSS), the word “Home” will appear that way. None of the other text shown here will appear.
So there you have it! Linking your pages together is as simple as adding this line of code to your html text file and changing the names around. Now that you know all of the parts of this tag, it should make linking the pages together a little easier.

No comments:

Post a Comment