Adding Graphics To Your Web Page
Posted on 05 December 2003 09:11 AM
The Basic Image Tag
To add graphics, you use a tag called IMG (image) along with the SRC (source) attribute. The IMG tag tells the browser that it needs to show an image. The SRC attribute tells the browser which image needs to be shown.
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. NOTE: It IS cASe-SeNSiTiVe. If the name of the actual gif image is image.gif then you must make sure your SRC="image.gif" as 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: The company Example International stores all of their images inside a directory titled /graphics/. The URL to this directory may be something like this: http://www.example.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.example.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 subdirectory, 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:
Using additional attributes will give you more control of your image placement in regards 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, now would be a good time to do so.) All of the following attributes will use
ALT ="Descriptive Text About The Image"
<IMG SRC="image.gif" ALT="An Image With No
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. (Note: Some browsers do not display ALT text when the image is available.) This can be used as a "cool feature" within your images. Although it is not what the ALT attribute is intended for, many people leave 'hidden messages' or 'cute jokes' within their ALT attributes.
More importantly, 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 for 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? Also, if used correctly, the ALT tag serves to describe a "missing" (ie typo in filename, etc) image that was intended to be displayed.
The HEIGHT and WIDTH attributes allow you to actually help 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 which is used throughout this tutorial is really 100 pixels by 100 pixels, just as it was displayed at the top of this page. However, the width and height of that same image have been defined as 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. To truly make it smaller, the size of the image would need to be adjusted through a graphics program.
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 may only save a small portion of a second per image, but on the Internet every piece of time saved counts!
The ALIGN attribute allows you to align the image properly with the text or other materials that are placed directly around 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. For example, align="left" was used to place the image on the left side of this paragraph and align="right" was used to place the image you see on the right side of the next paragraph.
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, and 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:
BORDER ="Size of the border"
When an image is a clickable link and the border tag is not used, many browsers will add a border to the graphic 1 pixel in width matching the colors of your underlined links. Many times it would be 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. Through using the BORDER attribute, you can also add borders to non-linked images.
The BORDER is defined using numbers--zero indicating no border, one meaning a tiny border. Any number higher than one makes the border larger. The borders for the images used in the examples above were defined as 0, 5, and 10. (Note: A small border was part of our actual image. Defining the border as "0", in this case, says not to display an additional (HTML) border on the image.) Practicing with the BORDER tag can allow you to create the effects of a nice frame around your image.
Seems like a lot of work compared to <IMG SRC="image.gif">, but it's worth it!