HTML Tutorials

Making Links in Web Pages

HTML Tutorials
By Jeffrey J. Walters

Making Links or Hyperlinks:

      Text links are commonly used on personal web pages. People often create a favorite links section for visitors to use. To make a link you need to know the URL (Uniform Resource Locator) address of the site or page you want to link to. For example, let us say we want to make a link to the National Basketball Association (NBA). We can use a search engine such as Yahoo or Google to search for the site's URL address. Once we have the address, we need the correct HTML statement. Here's an example.

National Basketball Association

And here's the code that made it.

<a href="http://www.nba.com/">National Basketball Association</a>

       Notice the three parts which make up this line of code. First, there is the <a href="http://www.nba.com/"> which begins the reference link. Notice the use of the full URL address in this case which is enclosed in quotations. Relative URL addresses may also be used. Second, there is the text which will become our link. Third, and most important, is the </a> tag which ends the reference link. Makes sense, right? You have a beginning, and end, and the stuff between which becomes linked.

       Now, what if we were to combine the unordered list statement with this reference link statement. We could create a list of links. That is what you wanted, right?

Here's the code that did it.

<ul>
<li><a href="http://www.shareware.com/">Shareware.com</a></li>
<li><a href="http://www.nba.com/">NBA</a></li>
<li><a href="http://www.bookgarden.com/">Rare Americana</a></li>
<li><a href="http://www.jjwdesign.com/">JJW Web Design</a></li>
</ul>

       Pretty simple, right? If not, maybe you should review the making lists tutorial. Notice how each link is surrounded by the <li> and </li> tags.


Image Links:

      You are not restricted much when making links. You can link images such as a JPG (JPEG) file or even a GIF file. Here's an example using my masterpiece, "image.gif".

       This link is to the Metropolitan Museum of Art. Ironic isn't it. Nevertheless, I home you can see the beginning of the link and the end in the following. If your not sure how to insert graphics into your home page, visit my tutorial on images.

<a href="http://www.metmuseum.org/"><img src="image.gif"></a>

       Normally, this would all be on one line. I had to wrap it to make it fit. Notice, that in this case you need to know two addresses. You need to know the URL address where the link will take you and the URL address of the image you are using.

       You probably noticed the blue lines around my image. That is actually the border of the image turning blue just the same way the text turns the color blue when it is a link. To remove the blue border, add the BORDER="0" attribute or option to the <img src="..."> statement. This is shown below.

And here's the code that did it.

<a href="http://www.metmuseum.org/"><img src="image.gif" border="0"></a>

Well, I hope you enjoyed this little link tutorial. Have fun creating links.


Link to this Tutorial!

Did you find this tutorial helpful? If so, please help me to share it with others by linking to it. Just place the HTML code below onto your own Web page to create a link to this tutorial.


Bookmark this Tutorial!

Bookmark this tutorial page on your favorite Social Bookmarking site.





[ Page Created December 10, 1997 ] [ Last Updated May 24, 2008 ]
Copyright ©1997-2017 Jeffrey J. Walters. All rights reserved.