Adding Graphics To Your Web Page

Adding Graphics To Your Web Page

The Basic Image Tag

To add graphics, you use a tag called the Image Tag along with the SRC attribute. The IMG Tag tells the browser that it needs to show an image. The SRC Attribute tells the browser which image to show.

The above image tag is the absolute minimum you need to use to place an image on your Web page. This is providing that the image is placed in the same directory that the Web page is in. You will also need to make absolutely sure that the image name is correct. It IS case sensitive. If the name of the actual gif image is image.gif then you must make sure your SRC="image.gif" simply because SRC="ImAgE.GiF" will not work!

If your image is not in the same directory as your Web page then you will need to specify the path to the image. For example; Widgets International stores all of their images inside a directory titled /graphics/. The URL to this directory may be something like this, http://www.widgets.com/graphics/. Now the Web page that they want to place the image.gif file on is in another directory, /FAQ/ so the url to their Web Page may be something like http://www.widgets.com/FAQ/. To place the image.gif on the page their most basic IMG tag will look like this:

The / tells the browsers to start in the root directory and from there go to the specified sub-directory which in this case happens to be graphics, and then onto the image of choice which in this example is image.gif.

You may, and are advised, to use other HTML Tags around the outside of your image to help the layout and design of the page as a whole. For example you could center the image by using the <CENTER></CENTER> tag set around the outsides of your Image Tag.

Additional Attributes

Using additional attributes will give you more control of your image placement in addition to how it looks and works on your Web page. The following is a list of additional attributes you can place inside the image tags along with what they do and a visual example. (If you do not currently have images turned on in your browser I think now would be a good time to do so.) All of the following attributes will use
<IMG SRC="image.gif"> as their base image tag.

ALT ="Descriptive Text About The Image"

This is probably the most vital attribute that the image tag uses! If you add no other attribute to your image tags please add this one!

With the ALT Attribute you are specifying descriptive text that will explain what the image is. If you hover your mouse over any of the images within this tutorial you should see a little pop up that contains text. This can be used as a "cool feature" within your images. I've seen many people leave 'hidden messages' or 'cute jokes' within their ALT attributes. The problem is this is NOT what the ALT attribute is for!

Many older browsers cannot view the images on today's Web sites. These viewers depend on the ALT attribute to tell them what they may be missing. Additionally, the ALT attribute is used in browsers that actually read the text on your Web page to their owner, who happens to be blind. Without the ALT tag the sight impaired may be missing vital information they came to your site looking for! Imagine a Web site that uses all images to lead the user around the contents; graphical buttons labeled home, back, next, contents, info, etc.... If they do not leave any text links and do not use the ALT attribute within their image tags, then how are the older browsers and the handicapable browsers supposed to help the visitor navigate your site? Please use this attribute in ALL of your images!

HEIGHT ="Height of image in Pixels"
WIDTH = "Width of image in Pixels"

An Image With No Meaning
<IMG SRC="image.gif" HEIGHT="50" WIDTH="50">

The HEIGHT and WIDTH attributes allow you to actually cause your Web page to load faster! Making these two attributes the second most important attributes to add to your image tag! They also allow you to set a different size for the image then it really is.

The image shown above is 100 pixels by 100 pixels big as it was shown at the top of this page. I have defined the width and height of it to 50 pixels throughout the rest of the tutorial to save space. NOTE: This does NOT lesson the time to download the image itself! Simply because the image looks smaller does not mean it is smaller, I would have to open a graphics program and make it smaller to accomplish this.

Where the HEIGHT and WIDTH attributes do save in download time is by taking the time, needed by the browser to figure out how big the image is, out of the scenario. For example: If a browser sees an image tag that does not define the HEIGHT and WIDTH of the graphic it must then calculate the size itself before it can show the image on your page. If a browser sees an image tag with the HEIGHT and WIDTH defined it can skip this process and begin loading the graphic immediately. This only saves a small portion of a second per image but on the Internet every piece of time saved counts!

<IMG SRC="image.gif" ALIGN="TOP">
<IMG SRC="image.gif" ALIGN="MIDDLE">
<IMG SRC="image.gif" ALIGN="BOTTOM">

An Image With No Meaning The ALIGN attribute allows you to align the image properly with the text or other materials that are placed directly after the image. Aligning an image to the left or right is how many developers manage to place their images evenly within the main flow of the content that the page contains. I used align="left" to place the image on the left side of this paragraph and align="right" to place the image you see on the right side of the next paragraph.

An Image With No Meaning The right and left directives (directives are what define the attributes e.g. tell it what to do) are best understood with practice. Play with them a bit, the more you do the more you will be able to seriously appreciate how much they can help the layout of your Web site! One of the main questions asked when using the align tags, especially left and right, is how to get the next line of text to show up below the image instead of next to it. This is done by adding an attribute to the <BR> tag like this;
<BR CLEAR="ALL">.

BORDER ="Size of the border"

When an image is a clickable link and the border tag is not used many/most browsers will add a border to the graphic 1 pixel in width matching the colors of your underlined links. Many times it would nice, especially on transparent images, not to have this square border around them. The BORDER attribute allows us to remove the border, or if preferred make it larger and/or add borders to non-linked images.

The BORDER is defined using numbers; zero being no border, one meaning a border and any number higher than one makes the border larger. In the images used as the example for the BORDER attribute I defined them as 0, 5, and 10. Practicing with the BORDER tag can allow you to create the effects of a nice frame around your image.

You may use any/all of the attributes defined above within your IMG tag at the same time. As your experience with developing for the World Wide Web broadens you will find even more attributes to add to your image tag, especially when you begin exploring Java and JavaScript! Let's look at our IMG tag using all of the attributes defined above.

<IMG SRC="image.gif"
        ALT="An Image With No Meaning"
        BORDER="5"
        Height="100" WIDTH="100"
        ALIGN="BOTTOM">

Seems like a lot of work compared to <IMG SRC="image.gif"> but it's worth it!

Edit	HTML \| Home

FutureQuest Professional Web Hosting Services