Mad Irish . net

HTML Tutorial 04

30 November -0001
by: Justin
May 6, 2002

Images

Using images in a page is half of what makes HTML pages look so good. Images in a page are quite easy to produce. The easiest way to put an image into your page is to save one from online and insert it into your code. Once you get good, you can probably create your own images using a tool as simple as Paint.exe (found under Start -> Programs -> Accessories -> Paint) or a graphics editor like JASC's Paint Shop Pro or high end editors such as Adobe Photoshop

Example image In order to put an image in your page with the most ease it must be saved in the same directory as your html page. For ease of use, lets just grab my ugly mug from the 'Home' page of this site. You can click the 'Home' link above. Then, what we're going to do is right click the image of my head, a pop up menu will appear, select 'Save Picture As' from this menu, and save the image as 'jkeane.jpg' in whatever directory your HTML pages are saved in (or on your desktop if that is where you are saving your HTML pages). The next step is to insert the code that will put the image on your HTML page. In order to do this we're going to have to write up a simple HTML page and include an image tag in the code. The image tag is very simply <img> and has no closing tag. The image tag has an attribute, which is a new concept at this point. We actually used an attribute in our anchor tag early. The basic anchor tag is <a> which takes the parameter to specify the location that the anchor tag will hyperlink to, which is 'href=' and then the location of the reference. The image tag uses the attribute 'src=' or image source is equal to. This tells the browser that will display the image where to find the image in relation to the HTML page itself. Now that you've saved the image, change your code to look like this: 

<html>
<head>
<title>Image Page</title>
</head>
<body>
This is an image:<br>
<img src="jkeane.jpg"><br>
And that's it :)

</body>
</html>

What you should see when you save and refresh your code is this:

This is an image
Sample image
And that's it :)

And it is just that simple. Note that I included line breaks to insure that the text would display properly around the image.

You may also want to know that an image tag can contain other attributes. We can put a border around our image by using the 'border=' attribute, and also specify the size of the image we wish to display by using 'height=' and 'width=' attributes. Be sure that your height and width are correct or you may distort the image. Optionally you can choose to use only one of the 'height' and 'width' tags to ensure proper image ratios. All of these attributes are measured in pixels. So, lets display the image at 200 pixels wide with a 2 pixel border. Change your code to read: 

<html>
<head>
<title>Image Page</title>
</head>
<body>
This is an image:<br>
<img src="jkeane.jpg" width="200" border="2"><br> 
And that's it :)

</body>
</html>

And you should see:

This is an image
Sample image
And that's it :)

Note also, that the order in which I list attributes is unimportant, as long as all the attributes are inside the tag (between the < and >) and the '<img' is the first part of the tag you should be fine. You could list the border first, then the width, and the source last if you wanted.

Remember that unauthorized use of other peoples images is bad web etiquette and in some cases is illegal. I'm giving permission for the purposes of this lesson to use my picture, but other people may not be so nice, so don't randomly swipe pictures off of other people's web sites without at least dropping them an email and making sure its ok.

Tags