Once upon a time, in the dark ages of the Early Internet, there were no images on the web pages (in fact, this is poetic – no images, on the web pages). There were just links. Hyperlinks, hyperlinks everywhere, and not an image to click.
But as the Internet and the browsing technology improved, web developers were able to incorporate images, and as the HTML matured, images could also be used as Hyperlinks. And now some developers develop imageless web sites just as some “arty” filmmakers want to make black and white silent movies.
Graphics enhance the look of a page, they make it more informative [One picture is worth a thousand words, etc.], and they give your page an identity.
But don’t go over board – the total size of one page should not, ideally, exceed 25 KB. There are many other issues involved with web-based graphics, but at this moment, we are just covering the HTMLization of graphic files.
Assuming that you know a wee bit about basic HTML Tags, you would use the following TAG definition to insert and image into a web page:
<img src=”graphics/imaginary.gif”>
Ok, try to use tags in the small caps, as soon there will come a time when uppercased tags will be loathed by the browsing and developing protocols.
You notice that an <img> tag does not have an accompanying tag, which, almost all HTML tags have.
src is the source of the image file you feel like inserting. Take care, that if the image file is not stored in the same folder where your web page is, you specify the complete path of the file.
Here, I have used the path “graphics/imaginary.gif”, as by habit, I store all my image files in a folder called “graphics”. Of course first I create this folder on the server, which, tells you that you can name the folder anything as long as you can use it. My experience has taught me another thing: be careful about getting mixed up with uppercase and lowercase alphabets while naming your files and folders. “imaginary.gif” is different from “IMAGINARY.GIF” or “Imaginary.gif” Unix, especially, is very temperamental about such issues and hence gives you a royal snub at the slightest aberration.
Moving further, you can add the “width” and “height” attributes too, to the image tag in the following manner:
<img src=”graphics/imaginary.gif” width=”115″ height=”100″>
This you can use for displaying thumbnails of larger images. It is advisable to specify the dimensions of the image because then the browser loads them faster.
Two more attributes are align, valign and alt.
align can have the following values: 1. center, 2. left, 3. right..
valign is for vertical alignment and can hold values such as 1. top, 2. bottom, 3. absmiddle.
But do remember if the alignment is coming from the top (a centrally aligner table cell in which you are inserting the image, or a left aligned <div> tag), the “align” attribute of the <img> tag doesn’t work.
These are the elementary values that are used by 99.99% web pages. There are a couple of geeky values I cannot recall.
The alt attribute is used to provide the “alternate” text. What happens is, some people don’t appreciate your inclination towards graphics. They turn graphics off on their browser settings so that image files are not loaded – this speeds up the loading of the web page. So in such scenario, the text supplied within the “alt” tag shows up, and tells the visitor what the image cannot.
So now we re-write the <img> tag using all the attributes we have learnt here.
<img src=”graphics/imaginary.gif” width=”115″ height=”100″ align=”left” valign=”absmiddle” alt=”There is an image of a stripper here!”>
Images can also be used in place of the text being displayed as a hyperlink in the following manner:
<a href=”http://www.sheddingpets.net”><img src=”graphics/imaginary.gif” border=”0″ width=”115″ height=”100″ align=”left” valign=”absmiddle” alt=”There is an image of a stripper here!”></a>
Quietly I’ve introduced another attribute in the <img> tag here, viz., “border”. Actually, when you use an image as a hyperlink, it is enclosed within an annoying border if you do not use border=”0″.
There are mainly two graphic formats used for the web pages: .GIF and .JPG. Other formats, like .WMF, .PNG, .BMP, .TTF are there, but they are not very popular. Vector graphics (probably .PNG) are going to be used extensively in the near future, as they don’t distort with increase-decrease in size.
.GIF files are used for basic animations and images with transparent backgrounds. .JPG files are used for photographs (for instance, a photograph of terrorist).
Well, by now you know how to utilize the potential of graphics while building a web page. You can create your own graphic images (you can use tools like Photo Shop, Paint Shop Pro, Corel Draw, etc.,), get them scanned, or steal them from other web sites. A safer option, if right now you can’t create your own images and just want to use them in your HTML, is to go to http://www.google.com and search for “free graphic images”, or something like that. There are hordes of sites eagerly giving out free images.
Again, do not freak out on graphic files. Use them consciously, and where there are necessary. Keep in mind that if your web page has good information and if the visitors are coming for that information, don’t make them load twenty images before they can view the information. If takes two long, they’ll leave.
So all the best, and as usual, you can write to me if you want to know more.
Amrit Hallan is a freelance copywriter,
and a website content writer. He also dabbles
with PHP and HTML. For more tips and tricks in
PHP, JavaScripting, XML, CSS designing and
HTML, visit his blog at
http://www.aboutwebdesigning.com
