HTML Images

Web pages that have lots of text can seem rather boring. What better way to spice up your web pages by using images. In order for us to place images within any HTML document, we need to use the <img> tag. As you can clearly decipher from the name, <img> is short for image.

Adding An Image

<img src="beach.png"/>

HTML Output:

As you can see above, their is the "src" attribute. This attribute is mandatory in order for an image to show. It contains the location  of the image (relative to the HTML document). You can specify a global URL (http://www.google.com/google_logo.jpg) or you can upload the image to your web server and access it locally (/images/beach.jpg).

Some common "src" values:

Note: Image locations can not contain drive letters (i.e C:\).

 Adding Alternative Text

Depending on what browser your visitor is using, sometimes the image will not show up. You can add some alternative text to the <img> tag so it is a bit more descriptive when the image doesn't show.

<img src="beach.jpg" alt="Beach Waterfront" />

In browsers that are unable to display the image, your visitors will see the text "Beach Waterfront"  instead of the image.

Adjusting Image Height and Width

You can change how large the image will display on the screen. Even though the image may be rather large, you can scale it to fit on the screen.

<img height="40" width="75" src="/files/images/html/beach.jpg" alt="" />

Output:

Creating Image Links

One of the nice things about HTML is you can add images to your HTML documents, but creating clickable images are even better. So far we have only covered adding images to your site but what if you wanted to be able to click on that link and get redirected to another web page? In order to acheive this, all you need to do is combine the <a> tag with the <img> tag.

<a href="http://en.wikipedia.org/wiki/Beach" target="_blank">
<img src="/files/images/html/beach.jpg" alt="" /></a>

Output:

Permalink