Hyperlinks and Images

• Description : In this tutorial you will learn how to create links to other pages and sites as well as how to add images to your pages.
• Language : HTML
• Date Added : 30th September, 2009

In this tutorial you will learn how to create links to other pages and sites as well as how to add images to your pages.

First let's look at hyperlinks. Often images and hyperlinks are used in conjunction with each other. Below is the code for a hyperlink:

Code :

<a href="theURL.html">The Link Text Here</a>

Output:

The Link Text Here

That is the basic structure of the hyperlink. Whatever is in between the speech marks after href parameter is where the site will link too. If it's linking to a page on your site you can just use a filepath like above, you could also link it to google using the full URL.

Now to tackle images. Below is the basic structure of an image:

Code :

<img src="http://t0.gstatic.com/images?q=tbn:2udwgAymZRfC1M:http://cuteable.com/wp-content/photos/0707/072107_rawr_01.jpg" alt="The Image Text" />

Output:

The image destination, or source, is defined using the src parameter. The alt parameter will define what text is displayed when you hover over the image. We can use images and hyperlinks together to make an image link to another page, this is how:

Code :

<a href="thePage.html"><img src="http://t0.gstatic.com/images?q=tbn:2udwgAymZRfC1M:http://cuteable.com/wp-content/photos/0707/072107_rawr_01.jpg" alt="The Image Text" /></a>

Output:

So that concludes another tutorial but in the next tutorial we will cover tables!

Previous		Next

Login Required