HTML 004 - Images
PDF

If you have been going through the series of tutorials you will want to open up your HTML page in your text editor now. If you are just coming in you can still follow along easily. Just open up a text editor and begin the tutorial.

Images

Images are used in almost every single website today. In order to have an image on your website you must use an image tag. Unlike most tags the image tag does not have a closing tag. Instead it acts much like <br />. Here is a sample of an image tag:

<img src="http://www.darkscarab.com/images/wallpapers/Blades/Blue.jpg" alt="Blue Blades"/>

As you can see the basic image tag begins with "<img" and ends with "/>". This is how you open and close an image tag. The attribute src="" stands for source, meaning the source of the image. This is just where the image URL is placed. The attribute alt="" is mainly a backup in case the image you selected does not work. Let me show you what I mean. Make sure your coding look like this:

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<a href="http://www.darkscarab.com">Dark Scarab</a>
</body>
</html>

Below the link we made in the previous tutorial let's create an image. First add the image tag.

<img />

After that we need the source. The source is the URL that the image is located at. Just like any URL you have to have the full file path and then the picture's name at the end. If you want to use your own image you can but if you do not have a URL it might not work. Otherwise you can use mine. Your whole file should look like this:

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<a href="http://www.darkscarab.com">Dark Scarab</a>
<img src="http://www.darkscarab.com/images/wallpapers/Blades/Blue.jpg" />
</body>
</html>

Now save your file and open it up in your web browser. You should see our link and then the image appear below or next to it depending on how large your image is. Now add in the alt="" attribute and remove a couple characters on your image URL.

<img src="http://www.darkscarab.com/images/wallpapers/Blades/Blue.j" alt="Blue Blades" />

Save your file and refresh your browser. You should see that the browser was unable to find the image so it replaced it with the text defined by the alt="" attribute. If you remove the alt="" attribute and try it again you should see that nothing appears or an empty box is placed where the image should be.

If you fix the image tag so the image works again you can change the size of your image. This is done with the use of the width="" and height="" attributes. If you define just one of these the browser will automatically resize the image to the correct proportion. Your image can be stretched without the correct aspect ratio if you define both the height and the width. If you only have to fit your image within one of the directions you only have to define one.

<img src="http://www.darkscarab.com/images/wallpapers/Blades/Blue.jpg" alt="Blue Blades" width="300px"/>

The width and height attributes are always defined in pixels. In the coding above I have restricted the image to a height of 300px, which is 300 pixels. Add the width attribute to your file, save it, and refresh your browser. You should see the image change its size. The height attribute is defined in the same way. You can test this out on your own.

At this time we can insert an image into our HTML page, change the size, and define an alternate value in case the image doesn't work. But, let's say we want our image in a certain position compared to a bunch of text in our page. Right now our image will be placed directly to the right of the link because the coding is right after the link (unless the image is too big to fit on the same line). We can move the image to the very right of the browser page with the align attribute.

<img src="http://www.darkscarab.com/images/wallpapers/Blades/Blue.jpg" alt="Blue Blades" width="300px" align="right"/>

If you test your page out in your browser you should see that our image moves all the way to the right of your browser's screen. You can also move the image vertically compared to the text by entering top, bottom, or middle. If you want the image to the left of our text though, you must move the whole image tag and everything in it so that it appears before the link in the file. This will make the image render to the left of your link.

Image Links

Now that you know how to create links and images you can easily create an image link. In our coding we have a link and an image:

<html>
<head>
<title>My Web Page</title>
</head>
<body>
<a href="http://www.darkscarab.com">Dark Scarab</a>
<img src="http://www.darkscarab.com/images/wallpapers/Blades/Blue.jpg" alt="Blue Blades" width="300px" align="right"/>
</body>
</html>

In order to make an image link all that needs to be done is remove the text between the anchor tags and replace it with our image tag:

<a href="http://www.darkscarab.com"><img src="http://www.darkscarab.com/images/wallpapers/Blades/Blue.jpg" alt="Blue Blades" width="300px" align="right"/></a>

Go ahead and change your HTML coding to this. If you have a different image URL then that is just fine. Save your file, refresh your browser and your image should now be a link. You image will probably have a border around it showing that it is a link.

In many cases web designers don't like the border around their images. To change this we can use the border attribute. The border attribute is defined in pixels and is used to tell the browser the size of your border. If you want to make the border go away you just define the border attribute with ‘0px'.

<a href="http://www.darkscarab.com"><img src="http://www.darkscarab.com/images/wallpapers/Blades/Blue.jpg" alt="Blue Blades" width="300px" align="right" border="0px"/></a>

The coding above removes the border around the image link.

Background Image

As a final note you can also use any image as a background image. This is quite simple and it also quite common especially on MySpace. All you have to do is add the background="" attribute to the <body> tag. All you have to do is define the attribute with the image URL. Below I have chosen my red Blades image to be the background.

<html>
<head>
<title>My Web Page</title>
</head>
<body background="http://www.darkscarab.com/images/wallpapers/Blades/Red.jpg">
<a href="http://www.darkscarab.com"><img src="http://www.darkscarab.com/images/wallpapers/Blades/Blue.jpg" alt="Blue Blades" width="300px" align="right"/></a> </body>
</html>

If you make your HTML coding something like the above you will see that page will have the image in the background and the image link in front of it to the very right of your screen.