How to Add Links in Web Pages


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.

Would you like Sagapixel to work for you?

Related Posts

html lists

Making Lists in HTML

Unordered Lists or Bulleted Lists:       There are several different types of lists which can be made with HTML. Whether your

Read More »
Call Now Button