Creating Links for Your Web Site Using HTML

Without linking you would never be able to create an actual web site, just one web page. Links are what you click on in an HTML document to take you to another page of the web site, another portion of the page you're on, or another site entirely.

In order to create a link, you need to understand the concept of web site "addresses". Every web site has a base page that tells computers where it is located on the Internet. These addresses are in the form of www.zdoggtutorials.com (our address). The .com part of the address may be in the form of .net, .biz, .co.uk, or other extensions as well, but these addresses would be formatted the same way (ie. www.somesite.net, www.asite.co.uk) as the .com addresses.

Thinking of a web address as just www.zdoggtutorials.com is easy to do because that is the way most people talk of web addresses. This is not the complete address your browser uses, however. If you typed in www.zdoggtutorials.com into your browser, waited for the page to load, and looked back to your browser's command line you would see the address listed as http://www.domainstobuy.com. The http:// stands for Hyper-Text Transfer Protocol and is an essential part of the site's web address (at least when adding links in HTML). HTTP is the method that a computer uses to transfer HTML content from the web to a visitor's computer (remember, HTML is Hyper-Text Mark-Up Language - makes sense then that Hyper-Text Transfer Protocol would be invoked here, doesn't it?).

One vocabulary word worth learning at this point is URL. Web addresses are referred to commonly as URLs. URL stands for Universal Resource Locator. A site's address is called a URL because universally, the resource that is a web site is located at that address, in our case http://www.domainstobuy.com.

An Explanation of the HTML

Placement : You can use the link tags during any portion of your HTML document between the body tags. Place the first half of the tag before the text of your link and close immediately following the link text.

The Format : As with all other HTML commands, the link commands are also enclosed in <>. Link commands always start with a < and then an a, space, href, that equals sign which tells the computer to go to the site equal to what follows, the quote to signal the location of the value, the url you're linking to, and an end quote. At this point, place your link text (usually the site or page name, but can be whatever you'd like), and then close the link.

The Main URL Link Tag : TThe link tag will, when the user clicks on it, take the user to the URL specified in the tag. Text following the command will be formatted as a link and, therefore, appear different from the rest of the text. To get a sense of this, I'll add a link command here A Link Back to This Page. The link is now closed with the /a (in <>) command, so the text is back to normal.

There are more pages to a web site than just the .com main page. HTML based pages are saved with a file extension of either .html or .htm. Pages within a site begin with the same URL as the main page,but then a backslash is added, followed by the name of the HTML file. For example, the URL of this page is

http://www.domainstobuy.com/support/creating_links.php

If I wanted to link to this page of my site, I could insert the entire URL for the page into the code above and that would work fine. There is a shorthand method for doing this, however, as I've typed in the textarea below with explanation to follow.

An Explanation of the HTML

Intra-Site Linking : The placement and format of this link follows the same rules as for full URL links. The main difference here is that the shorthand saves time. It is important to remember that you can ONLY USE THIS SHORTHAND TO LINK TO PAGES WITHIN YOUR OWN SITE! Page specific links to other sites must include the full URL.

What if you had a really long page within your site and you wanted to be able to create a link that, when clicked, would take your visitors to a different area of the page they were on? HTML provides a method for doing this that includes a two part bit of code. I've shown this code in the text area below and explained the code farther on.

An Explanation of the HTML

Placement and Format : Placement and format for the link code itself are the same as the site and page specific links shown above. The naming element may also be placed anywhere within the body of an HTML document and should immediately preceed the element being named. The naming tag does NOT require a closing tag.

The Name Tag : The name tag does exactly what it says it does. It tells the computer to assign a name of your choice to any section of a document. I've placed a name tag down in my copyright status portion of this page. I'll link to it later on and you can see how this works.

The Intra-Page Link Tag : The tag used to link to another part of your page begins like the other link tags, but, after the quotation mark contains the # and then whatever name you've given the element you're linking to. This tells your visitors' computers to make the link destination equal to the element named within the tag.

The final type of link we'll discuss in this tutorial is an email link. HTML provides simple code which pops open your visitors email and inserts your address in the "to" portion of the email, allowing a quick and easy way for your visitors to contact you. The code for this is shown in the text area below. An explanation follows.

An Explanation of the HTML

Placement and Format : Like the other link tags, the email link may be placed anywhere within the body of an HTML document, with the first half of the code preceeding the text to be linked and the closing tag immediately following the linked text. You'll notice the tag begins the same as all other link tags < a, space, href, equals sign. After the equals sign, however, no quotes appear. This is important. Rather, the words (no spaces!) mailto, a colon, and your email address. This tells your visitors computers to open up the visitors' email software and address an email to the address specified upon clicking. The link will look the same as a location link, but the browser will not switch pages if the link is clicked.

The Email Tag : This tag allows users to click on a link and send you email. I'll add a link to email me now Email Me. Click the link and try it out. You'll see that you'll stay in the same spot on this page, but that your email software will open and address an email to me. Notice the look of the link is not any different from any other links we've learned about.