Basic Web Page Writing Step 10
Adding A Graphic
In step 9 you used the Ordered List option to create a numbered list. At this point it would be nice to add some pictures to your page to dress it up a bit and provide more information that just text can give. You know the saying, "A Picture is Worth A Thousand Words".
This step will introduce IMG SRC=" " tag which will allow you to place a picture on you page First you'll see a little bit about Graphic Images.
A Bit About Graphic Images First
The Graphic Format Used On The Web
There are many file formats that are used for graphic images. They include:
- *.PIC
- *.GIF
- *.TIFF(TIF)
- *.BMP
- *.PCX
- *.JPEG(JPG)
The format used for your graphic image should be readable by browsers and be universal so that both Macintosh and Window Based computers can read them. The most commonly used format is the GIF or Graphic Interchange Format. The other file format used on the web is the JPG but there are still some browsers that will not display them.
Things To Consider When Using A Graphic
- Large Images take a long time to load.
- Don't make the images to wide.
- A small image such as a small dot can appear several times on the same page without adding much download time.
- Be sure the graphic adds meaning to the document.
- Don't over do graphic images on a page. They take up time and some people view only in text mode.
Graphic Programs That Are Useful
There are many graphic programs available that will convert from one format to another and also allow you to create your own. Some are listed below and will be linked in another step.
- WinGif v1.4
- Lview v3.1
- Paint Shop Pro V3.0
- PhotoShop
These are only a few, there are many more available.
Placing A Graphic Image In Your Page
You will first need a graphic image to use. If you do not have one available, you can download
from here and use it. It is the one that will be used in the examples that follow.
How to Download A Graphic
Follow these steps to save a graphic picture that you can use in your web page.
- Go to the web browser window containing this page.
- If you are unfamiliar with saving graphics files to your hard drive, see the instructions for saving images from a web page.
- The picture below is a copy of a US Flag. Click on it once to display/download the GIF file to your computer.
- Save it in the same directory as your HTML text file as a file named usflag.gif
Placing The Image On Your Page
Now that you have an image to use, it's time to place an image on your page. The image can be in the same directory as your *.htm file or it can be on some other server on the net. You will see how to use another server's file later.
The HTML tag for placing an image on your page is <IMG SRC="IMAGE.GIF"> where IMAGE.GIF is the name of the graphic to be placed. Be sure to use SRC and not SCR.
The following would place the USFLAG.GIF on your page.
<IMG SRC="USFLAG.GIF">
Which would produce:
Aligning your Graphic
You can also use the ALIGN command like you did with HEADERS and TEXT in step #5. Just enclose the IMG SRC= tag inside paragraph tags.
CENTERED
<P ALIGN=CENTER>
<IMG SRC="usflag.gif">
</P>
would place the graphic in the center of your page.
OR TO THE RIGHT
<P ALIGN=RIGHT>
<IMG SRC="usflag.gif">
</P>
would place the graphic an the right edge of your page.
You can see how placing a graphic image in your page can make it look better and show even more information. They are the key to a really good looking page. As mentioned in step 7 on Line and Dividers, the fancy lines that you see on some web pages are just graphic images, like the one below.

Try using the USFLAG.GIF in your page, or any other graphic you have around.
In step 11 you will start mixing graphic images with text to create "in-line images".
STEP 11 -- In-line Images
created by Larry Curreri,
© 1996 l_curreri@yahoo.com
Visit My Home Page
last modified: January 14, 2002
This page hosted by
Get your own Free Home Page