Lesson 5: Displaying Images on Webpages  

     The IMG Element     

Inserting graphics and pictures into your webpages is really easy. The HTML element used for this purpose is IMG. It´s an empty (stand-alone) element, which means that it only has an opening tag and neither content nor a closing tag. There are at least two attributes you need to include inside the image tag: the SRC (source) attribute, which points to the location of the image and the ALT (alternative text) attribute, which contains the text that is displayed instead of an image in text-only browsers or in cases where the image is not available.

Here´s the basic HTML code to insert images into your webpages.

The value for the source attribute is the path to the image file relatively to the location of the current document. For example: let´s assume that the file name of the image you want to insert is "picture.jpg" and it´s stored inside the same folder as your webpage, then the path would be simply the filename only: picture.jpg

Let´s assume that the image is stored in a subfolder named "images", then the path to the image file would be: images/picture.jpg.

And finally, if the image is stored in a parent folder, the path to it would be: ../picture.jpg

The paths above are also called "relative URLs" ( URL = Uniform Resource Locator ). More about relative and absolute URLs in the next lesson, which is about hyperlinks.

Although you can include all kinds of graphic formats on your webpages, you should only use graphics with .GIF, .JPG or .PNG file name extensions, because these are most widely supported by the different web browers. The bitmap format .BMP is not commonly used but also supported by most browsers.

The GIF format is frequently used for buttons, logos and animated graphics and the JPG format is great for images, as it allows a strong file compression while keeping the image quality quite good.

To keep your website well organized it´s a good practice to create a folder only for images and store all the images for your website (buttons, logos, pictures and other graphics) inside this folder.

Watch the video now and learn how to ...

• create a folder for images
• copy some images inside this folder
• insert an image on a webpage manually
• use 1stPage2000´s wizard to ease-up the process

You´ll also discover three more attributes: WIDTH, HEIGHT and BORDER. Their functions will be explained later in this lesson.

Video button not working ? Click Here

Now do it yourself. I´m sure you have some pictures on your computer´s hard drive. Or use any of the pictures and graphics which are included in this tutorial inside the subfolder "graphics".

The example page below ("images.html") uses the same pictures, but now the path to the pictures is different, because this webpage is located on your computer´s HD, inside the tutorial´s subfolder examples and the images are located inside the subfolder images. So the relative path from the webpage to the images - from examples/ to images/ - is one folder upwards ( ../ ) first and then into the subfolder images ( images/ ) ==> ../images/

Display Example: This is how it looks like in your browser.

     The Attributes WIDTH and HEIGHT     

Although not required, these two attributes which specify the width and the height of an image are sometimes pretty useful. In case an image is not available or when users have the image display disabled in their browsers, the width and the height attribute define a white box in the size of the image, thus preserving the formatting of the remaining webpage. Otherwise, the size of this box would be determined by the alternative text for the image.

The two examples below demonstrate the difference between missing images with and without these two attributes and how this affects the formatting of the remaining content.

1. With images available

2. Missing images with attributes "width" and "height"

3. Missing images without these attributes

     The BORDER Attribute     

With the BORDER attribute inside an image tag you can add a black border around an image. The border thickness is defined by the value of the border attribute, which may take any integer number. For example: for a 5 pixels thick border you would use border="5". However, much more flexibility is given with Cascading Style Sheets, which you will learn in a later lesson.

The most important use for the border attribute is when the image is used as hyperlink. Remember that a text link has by default a blue color and a blue line under it. Images used as links have by default a blue border around them, which looks ugly in most cases. So in order to get rid of this blue border you need to add the border attribute to the image element and set its value to zero. border="0".

The most frequently used images for links are banners and buttons. As only the next lesson teaches you how to create hyperlinks, I will show you there how to use images as links and how to create a horizontal or vertical menu for your website with button images.

     How to Edit Graphics     

You see, inserting an image into a webpage is easy provided that you already have the image exactly in the right format, size and look. As this is rather an exception, you should have some basic skills in editing images. The 3 most important things you need to know are:

1. How to cut and resize pictures. I mean, you don´t want to display pictures taken with your digital camera on your webpages in their original size - one picture taken at a resolution of only 2 million pixels would fill about the space of a whole 17'' screen.
2. How to compress .jpg files. You want your webpages to load fast, so you need to take care that the file sizes of your images are as small as possible. The .jpg format offers you a very flexibel way to heavily compress your images while still keeping the quality quite good.
3. How to add text to an image. Especially if you want to use buttons as navigational links on your website, you need to label the blank buttons.
   
   

If you already know all these things - GREAT ! Go ahead with the next lesson. If not, take a short break and study the extra lesson " Basic Skills in Editing Graphics". This lesson shows you how to install and use the excellent free image editing software Gimp.

In the next lesson you´ll learn how to create hyperlinks to other webpages of your own website ( internal links ) and links to other websites on the world wide web ( external links ). You will also learn how to turn images into hyperlinks and use buttons as navigational links on your website.