YOUR FIRST HTML PAGE - IV

In the preceding sections, you learnt how to come up with an elementary HTML page. You learnt the tags that are the backbone of an average HTML page, namely, , , , ,

and .

Assuming you could assimilate the gushing fountain of wisdom in the previous articles, we move onto the streams of more evolved tags. Let's start with graphics.

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.


Step 7:

To include graphics, we use the tag in this manner:



Where "picture.gif" is some graphic file that you already have in the same folder. If the graphic file is not present in the same folder as your HTML page, then you have to specify the entire path of the file being used. For example, if your HTML file is in the root directory, and "picture.gif" is in a sub-directory - graphics - of your root-directory, the syntax turns out to be:



"/" (forward slash) is for servers. For your local hard-drive, you should use "" (back slash).

SRC is an attribute of and it stands for "source".

There are primarily two graphic file formats prevalent on the web, namely, GIF and JPG. GIF files use lesser colors, and hence are smaller in size and load quicker, and further, animated graphics can be created out of GIF files. JPG files are more refined, and we use them to display graphics that require clarity and greater pixel density, for instance, a photograph. More efficacious formats are being developed in the meantime to suit Internet compatibility.

In some tags, you don't have to use the closing tag. We don't use with .

Let us borrow the HTML code of our existing page, and in that, include the tag too.

Ah! This is for the first time I'm writing my own HTML. The world is so different out here. Marvelous!

For more cool content, go to Bytesworth.com .

Save and refresh your page.

You might have observed that on many web pages, they use fancy graphics to show various links, as you can see the fancy gray buttons on this web site. We perform this by



We have inserted the tag between , so instead of the text link, now we have a graphic link.

Our modified HTML source page, looks like this (repetitive code has been replaced by dots):

..............
..............

..............
..............


..............

You can explore the tag further on your own, but there is another crucial attribute of this tag that we are going to cover before moving on to the next section - the ALT attribute - alternative.

We use the ALT attribute inside to insert text that gets displayed or sounded when the cursor is hovered over the image, or while the image is being loaded, or when the graphics display has been disabled in the browser, or when your site is being viewed on a non-graphics browser, or when visually challenged people are browsing on a voice-enabled browser.
..............
..............

..............
..............


..............

This sums up the tag. It's an important tag, and hence, has taken up an entire chapter. You'll find yourself implementing it again and again, but please don't over-do it.

We move on to tables now.

About the Author

Amrit Hallan is a freelance web designer. For all web site
development and web promotion needs, you can get in touch with
him at http://www.bytesworth.com. For more such articles,
visit http://www.bytesworth.com/articles and
http://www.bytesworth.com/learn You can subscribe to his
newsletter [BYTESWORTH REACHOUT] on Web Designing Tips & Tricks
by sending a blank email at Bytesworth-subscribe@topica.com

development graphics