Mar 16 2010
Placing an image on a webpage
The tag for putting a picture on your web page is:
<IMG SRC=”graphicfilename.gif”>
It is a single tag, requiring no end tag. The IMG means “image”
and SRC means “source”. SRC is an attribute of IMG, it tells the
browser where to find the graphic.The stuff in the quotation marks is
the file name of your graphic.
Don’t Forget Format
The majority of graphic formats supported on the web are either in gif
or jpg format. When putting your graphic name in the IMG SRC tag always
include the format it is in and always enclose it in quotation marks.
Example:“buttonA.gif” Note the dot between the name and format and
that there are no spaces.
Putting Your Files In The Same Place
Put your graphics in the same folder (directory) as the html file, for
instance if you keep your html document in a folder called “my pages”,
keep your pictures in that folder too otherwise they won’t show up on
your web page because the browser will not be able to find them. The same
thing goes with other web pages that are linked together, keep them in
the same place.
Each Graphic Has Its Own IMG SRC
Each graphic you want to put on a page will have its own IMG SRC tag:
<IMG SRC=”buttonA.gif”> <IMG SRC=”buttonB.gif”>
Result:
To put the graphics further apart from each other add this:
between the two tags:
<IMG SRC=”buttonA.gif”> <IMG
SRC=”buttonB.gif”>
Result:
See the little space between the buttons? This is what
does. It is a space equivalent to one character or letter. The more you
use the wider the space will be. You can also use it to indent your sentences
or for a larger space between words or letters.
To put a graphic on a new line use either the <BR> or <P>
tags:
<IMG SRC=”buttonA.gif”> <P> <IMG SRC=”buttonB.gif”>
Result:
Remember the CENTER tags? Use them to center your graphics on the web
page:
<CENTER>
<IMG SRC=”buttonA.gif”></CENTER><IMG SRC=”buttonB.gif”>
Result:
Notice how the first graphic is enclosed in the beginning and end CENTER
tags. If you wanted to center the second graphic as well, the end CENTER
tag (you know, the one with the / ) wouldn’t come until after
the second graphic. Remember that from the first lesson?
Background
To add a textured background on your web page you will need background wallpaper
which is actually a graphic repeated over and over until the screen is filled.
There are a lot of places on the web where you can get backgrounds for free.
Now that you have a background this is how to put it on your page:
<BODY BACKGROUND=”graphicname.jpg”>
BACKGROUND is an attribute which goes in the beginning <BODY>
tag. Substitute “graphicname with the file name of the graphic, don’t
forget the format or to enclose it in quotes.
If all you want is to change the color of the web page use the BGCOLOR
attribute in the BODY tag:
<BODY BGCOLOR=”#00FFFF”>
Don’t forget to enclose the color code in quotation marks.