== Step 7: ==
To include graphics, we use the <IMG> tag in this manner:
<IMG SRC="picture.gif">
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:
<IMG SRC="graphics/picture.gif">
"/" (forward slash) is for servers. For your local hard-drive, you should use "" (back slash).
SRC is an attribute of <IMG> 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 </IMG> with <IMG>.
Let us borrow the HTML code of our existing page, and in that, include the <IMG> tag too.
<HTML> <HEAD> <TITLE>This is my first, hand-coded HTML page</TITLE> </HEAD> <BODY>
<IMG SRC ="picture.gif">
Ah! This is for the first time <FONT SIZE="10pt" FACE="Verdana" COLOR="Red">I'm writing my own HTML</FONT>. The world is so different out here. Marvelous!
For more cool content, go to Bytesworth.com .
</BODY> </HTML>
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
<IMG SRC = "morelinks.gif">
We have inserted the <IMG> tag between <A> , 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):
.............. .............. <IMG SRC ="picture.gif"> .............. ..............
<IMG SRC ="morelinks.gif"> ..............
You can explore the <IMG> 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 <IMG> 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. .............. .............. <IMG SRC ="picture.gif" ALT ="Your Title in Text"> .............. ..............
<IMG SRC ="morelinks.gif" ALT ="More Links"> ..............
This sums up the <IMG> 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.
Articles Source - Free Articles
