Working with Images.

We've all seen web pages that are mostly text and they are BORING using pictures in your web pages adds interest, colour, and variety to your page. You might want to have pictures that illustrate a story or perhaps have a "photo" page of your family or favourite movie star but whatever you do with images in your web page the basics will be the same.

next page

<<< This is an example image, you might use a picture like this to link between pages so visitors can click it to go to the next page in your web site. Images are an important part of your web page because they build interest, provide colour, and break up text.

Test Image

The html tag for this image looks like this >>>

<img src="images/button_next.gif" Alt="next page">

Remember that the tag is "img" and that "src" and "alt" are agruments If you don't remember this go back and read "Html tags" again before carrying on. The "src" argument tells the web browser where to load the image from and the "alt" argument tells the browser what text to show when the mouse is over the image (Tip: this text is also shown when the browser is set to not display graphics or when an image fails to load.)

Tips:

  • Use the 'Height' and 'Width' arguments to control the apperance of the image.
  • You can add (or remove) a border around your image by using the 'border' argument.
  • For large images use the 'lowsrc' with a lower quality version of the image to diaplay while the image is being downloaded by the browser.
  • Use the 'Alt' argument to provide descriptions of your graphics. Many search engines read the alt tags and they can effect your "placing" in the search engine.
  • Remember less is often more. More images increase the loading time of your web page - how many times have you been bored waiting for a web page to load? Try to avoid this happening.

1