Web Shoppe | HTML | Links and Images

Home | Coding | HTML | Links and Images

Links

To create a text link to another page, we use a tag that looks like this:

<a href="http://www.xentrik.net">Click Here</a>

Where the code says "http://www.xentrik.net" is where you put the URL you want to link to in quotes. Where it says "Click Here" you type the text you want the link to be made up of. The code above produces this: Click Here.

To make a link open up in a new browser window, add target="_blank" to the tag, like this:

<a href="http://www.xentrik.net" target="_blank">Click Here</a>

To make a link open in the top of the current browser window, to break out of frames, add target="_top".

To create a link to your email address, so that when people click it their email client pops up with your address in the "To:" field, we use this code:

<a href="mailto:kali@xentrik.net">Email Me</a>

It's exactly the same as a webpage link, except for the "mailto:" before the address. Note that there is no space between the colon and the address. Just change the "kali@xentrik.net" to your own email address, and "Email Me" to whatever text you'd like.

Images

By now you'll want to put pictures on your webpages. To do so, you'll use the following code:

<img src="image.jpg">

That's it! No closing tag is needed. The picture "image.jpg" will need to be in the same folder as the HTML page for the above code to work, however you could also use the full address, like so:

<img src="http://www.homepage.com/image.jpg">

The "img" tag stands for "image," and by now you've probably guessed that "src" is an attribute which stands for "source." It tells the browser where the image is. Two more attributes you might need are below:

<img src="image.jpg" width="100" height="30">

"Width" and "height" are not strictly necessary, however they do make your webpage load a bit faster if you put the right ones. The numbers in the quotes refer to how many pixels wide or high the image is. However, this is not a good way to simply resize your images; that should be done in a graphics editor.

All the codes above link to an image and place it on your HTML page. Much like this:

That is a picture called "image.jpg" which is 100 pixels wide and 30 pixels high.

Image Links

So now you know how to make links and images, but how do you turn an image into a link? Like this!

<a href="http://www.xentrik.net"><img src="image.jpg"></a>

It's simpler than it looks at first glance; I just put the <img> tag where I would usually put "Click Here." This is what the code would produce:

Notice the border, which is the same color as the text links on your page. This tells the viewer that the image is a link. To get rid of it, add border="0" to your <img> tag, like this:

<a href="http://www.xentrik.net"><img src="image.jpg" border="0"></a>

Which then produces this:

Hover over it. See? It's still a link, the border's just been removed. Much nicer.