Putting Images in Your Web Page


Creating and Formatting Images

Nearly any image you can get on a computer screen may be placed in a web page. Several different formats may be used with web pages, but only two are universally readable by all browsers:

Many image files are not in these two formats. After you have downloaded or drawn an image (using whatever application you like) you may convert them to the proper format as follows:

  1. Open the image in an application designed for general image handling
  2. Edit the image if needed
  3. Use "save as" to save as .gif or .jpeg files. Place in your "www" folder.


Displaying Images on Your Web Page

Where you want your image to appear, insert a command such as

<IMG SRC="images/myimage.gif">

where 'images' may be a folder in which you keep the images for your webpage. If you insert several images in sequence, the browser will arrange them to fit the screen, just like text.

Alignment - the "align" attribute is used to place images to the left, right or center.



Text Wrapping - Different browsers will do this differently, but if you do not use any image alignment, the text will not wrap. Attributes you may use (including those above) are "left, right, center, top, middle, bottom". You will have to experiment to see how they come out depending on your browser. Text wrapping is a little unruly, and you will have to use a line break with the attribute "clear=all" as done above (and below) to stop it. Be sure to view the source code to see how this was done to stop the current text from wrapping around the two images above the horizontal rule.


Background Images

You simply need to slip the image into the "body" tag:

<Body background="myimage.gif">

It's as simple as that. You should probably use either Paint or Photo to fade the image so that it does not interfere with your content.