CSc 050: Pictures-Part 1: Graphics from the Web

This tutorial will introduce the basics of putting graphics on your web pages. You will also be able to take graphics from other web pages and place them in your own page.

The <img> tag

Graphics are placed into your web page by using the <img> tag, which has the following form:

<img src="[name of picture file goes here]">

The name of the picture you wish to show replaces the colored text above. Note the space between "img" and "src" above. As an example, I have a picture named "finder.gif" that I wish to put on a web page like this:

To do this, I can use the following <img> tag:

<img src="finder.gif">

You can also change the size of an image by adding the height and width attributes to the <img> tag. For example, I can make the sample picture above look bigger:

by using this <img> tag:

<img src="finder.gif" height=60 width=60>

The dimensions used in height and width are expressed in number of pixels. To find out an image's current dimensions in pixels, on a PC running Windows you can right-click on an image and select Properties.

Graphics from the Web

So you're probably wondering how to get your own pictures to put on your own pages. The easiest way is to take graphics directly from your web browser. For most browsers, this process is very easy. Once you've found a picture on a web page you'd like to have, point at it with the mouse and then right-click. Keep holding the button down until a menu appears that lets you save the picture file to your local computer. Whatever name you choose to save it as, that's the file name which goes inside the <img> tag. One more important thing: the picture must be saved to the same place as your HTML file. Not just the same storage device, but exactly the same folder or directory. The picture will not be found otherwise. This limitation is surmountable by using a path inside the <img> tag instead of just the file name. See your instructor for further details.

If you'd like to practice this, try putting the sample graphic I have above into your own web page by following the steps outlined here.

Final Thoughts

Back to Tutorial Index