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
- When taking graphics from the Web, be aware of copyright issues. Many
pictures are proprietary, especially those from large companies, and using
them in your own pages is considered illegal. A web page will say whether
or not their graphics are copyrighted, and you can always email a web site
asking for permission to use their graphics if you have a particular favorite.
Some pictures, like this one,
contain animation. They are called animated GIF files and you
can use them in your own pages just as you would any other graphic. Check
out our animated GIF gallery for
more examples, or if you'd like to find out about making your own animated
graphics, check out our animated GIF tutorial.
- Part 2 of our image tutorial will show
you how to put other types of
graphics in your web pages, including scanned graphics and clip art.
Back to Tutorial Index