HTML Images, HTML Tutorial, Global Guideline

Forum | Blog


Basic HTML Guide.      
 HTML Introduction.      
 HTML Entities.             
 HTML Tags Guide.      
 HTML Head.                
 HTML Meta.                
 HTML Styles.               
 HTML Formatting.       
 HTML Backgrounds.     
 HTML Attributes.         
 HTML Links.                
 HTML Tables.             
 HTML Images.
 HTML Colors.              
 HTML Fonts.               
 HTML Marquee.         
 HTML Forms.             
 HTML Frames.           
 HTML Lists.                
 HTML Scripts.           
 HTML Summary.        

HTML Tutorial >> HTML Images.

     Back             Next     

IMG tag in HTML

HTML Images are placed in Web documents using the IMG HTML tag. This html tag is empty, and therefore has no closing tag. The basic form of the html image tag is <IMG>, but just like <A>, <IMG> by itself is pointless-- it will do nothing. At the very least, you need to let the browser know where to find the image that it's supposed to place in the web document.

This HTML Tutorial section brings up an important point. Visually speaking, images are part of a web document, but in reality an HTML file and any graphics it refers to are actually all separate files. In other words, one HTML file which has five graphics within it makes a total of six files required to make the page look right. These files are all stored on a Web server, but don't have to all be in the same exact place. (Often, server administrators will set up separate directories for pictures.)
In order to make the HTML IMG tag work, you need to use an SRC attribute. SRC stands for "source" as in, "the source of this graphic." (One way to read a typical html image tag is "image source equals." You'll see what it mean in a minute.) The value of SRC for a graphic of web page is the URL of the graphic you want to have displayed on your Web page. Thus, a typical html image tag will take the form:

<IMG SRC="URL of graphic">

The URL of the graphic is just like the URLs used in the anchor tag, except in this case the location used is that of the graphic file. A graphic named "ggl.gif" located in the directory "images" on the server "" would have the
You can use either relative or full URLs to refer to the graphic file. Ok, but how does the browser know where to put a graphic once it's been loaded? In relation to the text, the browser puts a graphic wherever an html image tag occurs in the document. It will do this as though the graphic were just another piece of the text (which, in a certain way, it is). For example, if we put an image tag between two sentences, the browser would show the first sentence, then the graphic, and then the second sentence right after the graphic.

<IMG SRC="images/ggl.gif" ALT="Global Guide Line" width=50% height=50%>

Here in HTML Tutorial the value of ALT is author-defined text, enclosed in double-quotes, and ALT text can be any amount of plain text, long or short. To pick one of an infinite number of examples, a warning symbol could be marked up as follows:
<IMG SRC="ggl.gif" ALT="Global Guide Line logo">
This ALT text will have no effect whatsoever in a graphical browser with image loading turned on. So what's the point? ALT improves the display and usefulness of your document for people who are stuck with text-only browsers such as Lynx, or who have turned image loading off. Since these users cannot see graphics, the browser will substitute a marker such as "[IMAGE]" for any html image tag.

     Back             Next     

[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2021 All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 453 visitors are online now