HTML Beginners Tutorial
Share it:   Comparte en Del.icio.us Comparte en MySpace Comparte en Facebook Comparte en Digg Comparte en Technorati Comparte en Yahoo Comparte en MenĂ©ame
LESSON 4

In this lesson you will learn about links.

Its easy. We are going to create a link to "Open Directory Project". Type the following...

<body bgcolor="#ffffff">
Open Directory Project
</body>


Implement a pair of anchor tags.

<body bgcolor="#ffffff">
Visit <a>Open Directory Project</a>
</body>


Add the URL and thats all! "URL" means Universal Resource Locator. To avoid any confusion with the technical name asigned to URL, just remember its an address.

<body bgcolor="#ffffff">
Visit <a href="http://dmoz.org/">Open Directory Project</a>
</body>


One link more...

<body bgcolor="#ffffff">
Visit Netscape!
 </body>


<body bgcolor="#ffffff">
Visit <a href="http://home.netscape.com/">Netscape!</a>
</body>


A link for an email is almost the same, just change the URL by an email address.

<body bgcolor="#ffffff">
Send me a <a href="mailto:yo@imeil.com.mx">message!</a>
</body>


You can place an image for a link. In the example "Visit Netscape!" replace the word "Netscape!" with an <IMG /> tag.

<body bgcolor="#ffffff">
Visit <a href="http://home.netscape.com/"><img src="nav30but.gif" width="82" height="68" /></a>
</body>

Visit Visita Netscape

Something that creates a lot of confusion is the way to remove the blue border surrounding an image when you use it in a link. You can do it with this...

<body bgcolor="#ffffff">
Visit <a href="http://home.netscape.com/"><img src="nav30but.gif" width="82" height="68" border="0" /></a>
</body>


Links inside the same web page are a little difficult to explain... I will do my best effort to avoid confusing you.

First, locate the place you would like visitors to go when they click on the link. Select a word and place anchor "<a>" tags around it.

<a>Add</a> the URL and thats all!


Now assign a name...

<a name="top">Add</a> the URL and thats all!

We just established the place to use it as a reference. In other words, the place inside the page where visitors will move when they click the link.


Now implement the link...

Here is something... <a>COOL!</a>


Add the reference document (the web page name)...

Here is something... <a href="leccion4.html">COOL!</a>


And, finally, add the anchor NAME...

Here is something... <a href="leccion4.html#top">COOL!</a>

Here is something COOL!     (click it to see the effect)

You can apply this kink of links referencing any page inside your website. Just remember to follow the same instructions. Example...

<a href="leccion5.html#oList">Ordered Lists</a>

Time for a break, lets have some water, drink or something to eat... lesson 5 will wait, it has nowhere to go, don't worry Smile

[Lesson 1]   [Lesson 2]   [Lesson 3]   [Lesson 4]   [Lesson 5]   [Lesson 6]   [Comments]

Reproduction of this tutorial is not allowed, please read the following links for further information:
Term of Use / Privacy Policy