Graphics And Pictures
 

Introduction

Colors, images, pictures, and graphics bring a lot of flavors to a web page. As you already know, a web page is in fact a text file equipped with HTML tags that a browser is asked to analyze, interpret, and render a result. Unlike in a word processor, a picture cannot be included on a web file. Instead, you tell the browser where the image is located, the browser will try to find it and then display it. This, of course means if you provide the wrong address, I mean if you don't clearly state where the picture is located, or if the browser doesn't find the picture where you said it was, there would be an error on your page.

There are two primary sources you can use to direct the browser as to where the picture is: the graphics could be on your server or on another server on the Internet. Either way you have to clearly provide the address.

If you will use a picture on your server, you should store it first. There are various ways you can collect picture for your web pages. You can get them from various pages on the Internet. You can use a (commercial) graphics software to create your own pictures. You can buy a graphics package that ships with a lot of pictures ready to be used. Make sure the picture is in a format (it has a file extension) that the browser can read (supports).

Once you have the picture, or to use a picture on your web page, you use the <img src="Location"> combination tags.

The Image Source

The first and most important information the browser needs to know about the image you want to insert is its (physical) location. To provide it, you give the source with <img src="URL">. URL means the name of the image you provide, including its extension
Here is an example:
<img src="img1a.jpg">

The ALT Attribute

The image tag uses a lot of attributes to give it particular specifications.
Since the graphics you use usually download relatively slowly depending on the machine used by your visitors, it is recommended to provide an alternative text to let the user know what is coming up. This alternative text also helps in case your source is not correct or the image is not available. This same alternative text pups up when a user places the mouse pointer on the image.
To provide the alternative text, you use the ALT attribute. Here is an example:
<img src="image.jpg" alt="Real Madrid">

The ALIGN Attribute

When you type a text close to the graphic you use, sometimes you want the text to have a particular relative position with respect to the image. That's when you use the ALIGN attribute. You can relatively align your text to the top, middle, bottom, right, or left. I encourage you to experiment with all of them. Here is an example:
<img src="image.jpg" align="top">

The Image Dimensions

You have probably realized that when a web page with undocumented graphics downloads on your browser, the text seem to animate, that's because the browser doesn't know and can't predict the height and the width of your image. To help the browser, you specify the height and the width of the image, in pixels.
Here is an example: <img src=image.jgp" height="48" width="34">.

The BORDER Attributes

You can surround your image with a border specified in pixels. Here is an example: <img src=image.jgp" border="2">
4. Background Graphics: You can also use an image or graphics as a background for your web page.
Let's say we want to use this graphics as our background. First make sure you know the directory where this image is stored. Then you need to specify it in the <body> tag with <body background="bgimg.jpg">
If you don't want the background graphics to move when the user scrolls down and up, provide a bgproperties attributes as "fixed".
An example is: <body background="bgimg.jpg" bgproperties="fixed">
 

 

Practical Learning: Graphics - Pictures
  1. Start your text editor.

  2. The image is inserted in a file using the <img> tag. The src attribute of the <img> tag allows you to specify the location of the graphic file. Here is an example. Type:
     

    <html>
    <head>
    <title>HTML Graphics</title>
    </head>
    <body>

    <img src="flowers.gif">Some flowers to brighten your day.

    </body>
    </html>
  3. Save the file as graphics.htm in the C:\projects folder

  4. Preview the file in the browser. Bring back your text editor.

  5. By default, the browser displays an image without showing its limits. If you would like to show the borders of the image, use the border attribute and specify, in pixel, how much border you would like to display.
    To see an example, change the <img> tag as follows:

    <img src="flowers.gif" border="2">
  6. Save the file and preview it in the browser.

  7. When you declare a picture on a web page, sometimes the picture can't display, for various reasons. Many times, the users would like to have some information about the graphic you are displaying. To provide an alternative to the first problem and to help with the second problem, you use the alt attribute. The alt attribute displays an alternative text.
    To see an example, change the <img> tag as follows: 
     

    <img src="flowers.gif" alt="Artist Drawing Flowers">
  8. Save the file and preview it in the browser.

  9. Position the mouse on the picture and notice that a few words come up.

  10. Bring back your text editor.

  11. Some graphics are very large and they take time to display. You have the option of "reserving" an amount of space for them while they are coming. This is done using the width and the height attributes of the <img> tag. In this case, somehow you would need to know the dimensions of the image.
    To see an example, change the <img> tag on the file as follows (the file is given a wrong name on purpose, to illustrate a point):
     

    <img src="flowers1.gif" alt="Artist Drawing Flowers" width="185" height="105">
  12. Save the file and preview it in the browser.
  13. Notice that the file doesn't display but you can the box it would have used.
    To correctly display the image, change the <img> tag as follows:
     

    <img src="flowers.gif" alt="Artist Drawing Flowers" width="185" height="105">
  14. Text that displays close to an image is positioned relative to the image. By default, the picture aligns with the lower border of the picture. You can control this using the align attribute of the <img> tag like this align="Alignment". The align attribute could be set as top, texttop, left, right, bottom, absbottom, middle, absmiddle, or baseline.
    As an example, make the following change to the file:
     

    <img src="flowers.gif" alt="Artist Drawing Flowers" width="185" height="105" align="middle">Some flowers to brighten your day.
 
Previous Copyright © 2000-2004 FunctionX, Inc. Next