Website Tutor - Lesson 5

	Sign In Sign-Up

Html Studio's

Lesson 5

Let's get into putting images into a web page. We're going to use this one. Once again, right click to save it off this page or copy it from the pics folder.

Chef

You specify an image with the <IMG> (image) tag.

<BODY>
<IMG>
</BODY>

We must also specify the source and the size.

<BODY>
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101>
</BODY>

Let me make the point that not only does the source specify what image, it also specifys where is the image. The above source, "chef.gif", means that the browser will look for the image named chef.gif in the same folder (or directory) as the html document itself. Below are a few diagrams.

	`SRC="chef.gif"` means that the image is in the same folder as the html document calling for it.
	`SRC="images/chef.gif"` means that the image is one folder down from the html document that called for it. This can go on down as many layers as necessary.
	`SRC="../chef.gif"` means that the image is in one folder up from the html document that called for it.
	`SRC="../../chef.gif"` means that the image is two folders up from the html document that called for it.
	`SRC="../images/chef.gif"` means that the image is one folder up and then another folder down in the images directory.
	`SRC="../../../other/images/chef.gif"` I'm not even going to try and put this into words. I hope you get the drift.

There is another way that this can be done. All references to images can have as their source the complete URL. For example: http://www.hair.net/~squiggie/LottzaStuff/other/images/chef.gif

Why, you ask, does it make so much more sense to use relative (partial) URLs as opposed to absolute (complete) URLs?? Because you can build your site locally and all the links will work. When your pages are done, you just upload the whole pile to your server and everything will work just fine. In addition, it is easier for the browser to get the images and your page will load faster. Is there ever a reason to us an absolute URL? Sure, if the image resides on a completely different server.

Another IMG attribute that deserves mention is ALT...

<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 ALT="Chef">

ALT is sort of a substitute for the image when the user is using a browser that isn't (for whatever reason) displaying images. Someone may be using a text only browser, he may have image loading turned off for speed or he may be using a screen reader (a browser where the web page is read aloud). In those cases, that ALT attribute could be very important to your visitor.

Something really neato you should know about images and their size.

Try this...

<BODY>
<IMG SRC="chef.gif">
</BODY>

As you can see, the browser figures out how big the image is all by itself. Why bother with dimensions then? Because with dimensions, the browser can simply reserve a space for the image, then load the rest of page. Once the entire page loads it can go back and fill in the images. Without dimensions, when it runs into an image, the browser has to pause loading the page, load the image, then continue loading the page. All in all, the browser functions much better with image dimensions.

Well Joe, that's all well and good <yawn>, but what's the neato part??

Check this out...

<BODY>
<IMG SRC="chef.gif" WIDTH=300 HEIGHT=101>
</BODY>

<BODY>
<IMG SRC="chef.gif" WIDTH=40 HEIGHT=200>
</BODY>

You can specify whatever dimensions you want and override the proper dimensions. Still foggy on the neato part?
Well, look at this little red dot -> It's a 1x1 square. Lookie what I can do with it though...

<BODY>
<P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=1>
<P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=2>
<P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=8>
<P ALIGN="center"><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200>
</BODY>

Pretty nifty huh?

<--BACK NEXT-->

General Table of Contents	Lessons Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10	Index and Quick Reference	HTML Guide
Website Tutor

Maintained by Nick Grant < htmlstudio@talk21.com >

HTML Studio's Main Page