Acme Web Design Info Logo Everything your mother didn't teach you about the web Hand pulling Acme Web Design package

Acme Web Design Info

Build Your First Web Page with HTML

The Tag that Changed the World

I'm talking about the hyperlink tag. Without hyperlinks, the Internet would be a fraction of what it is today, and it would be much, much harder to track down information. Search engines like Google, Yahoo and MSN all use hyperlinks to create their indexes, and you and I use hyperlinks every time we use the Internet. It would be impossible not to.

For those of you who are unfamiliar with the term, a hyperlink is a portion of a document that when clicked, causes the browser to jump to another area of the same document or a different document. A hyperlink looks like this when displayed.

Like everything else we have learned so far, hyperlinks are very easy to create. Here is what the HTML code for a hyperlink looks like:

<a href="http://www.acme-web-hosting.info/">The Acme Web Design Web Site</a>

The code above produces the following result:

As you can see, the text of the hyperlink falls between the <a> and </a> tags. The <a> tag above has an attribute called href. The value for the href attribute in this example is the URL for the Acme Web Design home page. This attribute tells the browser where it should go when the user clicks the hyperlink. For those of you who are unfamiliar with the term URL, let me briefly go over what a URL is.

The URL for a web site can typically be seen in the address bar on the top of a web browser. Another term people commonly use when referring a URL is a Web Address. Most URL's start with something that looks like this: "http://www.", followed by the domain name, which looks like this: "acme-web-design.com". I'm not going to go into great detail about how URL's work in this tutorial, but all you need to know at this point is that a URL tells your browser where to find the information to display.

A very easy way to create hyperlinks to your favorite pages is to copy the URL in the address bar of your browser and paste it into the href attribute of an <a> tag.

As I mentioned above, you can also create a hyperlink that jumps to another section of the same page. To do this, you need to use two <a> tags, one for where you want the link to take the browser, and one for the actual link. It's actually very simple, check it out:

Add an anchor where you want the browser to go and give it a name using the name attribute:

<a name="top"></a>

The create a link to go to that area of the page by using the name as a reference:

<a href="#top">Back to the top of the page</a>

Notice that when you use the href attribute to refer to another area of the same page, you must add the # character before the name.

I have already placed an anchor called named top at the top of this page, so when you click this link, it will take you to the top of the page.

To see the <a> tag in action, copy the code below and paste it into your "hello.html" file between the <body> and </body> tags. Save the file and then open it in your browser by double-clicking.

Let's finish up this tutorial with a quick wrap-up, shall we?




<< BACK NEXT: Putting it all Together NEXT >>
BACK: Tables


Link to this page and help others find this stuff!

Copy and paste this code:

Friendly Linking