Web Page Making Help Page

| Preface | Introduction | HTML vs. PHP | Hosting? | Domain |

| Printing | Images Part 1 | Images Part 2 | Help Forum |

Chapter 6 - Images Part 2

HTML Coding an Image - Hotlinking

The above <img src> examples are assuming that you upload your webpage.html into the SAME exact folder as the gemelle.jpg file.

Now what happens when the image "gemelle.jpg" is at another website?

In tech terms, "What happens if the image "gemelle.jpg" is hosted at another website?"

If you choose to use an image hosted at another website, that is called "hotlinking". Some sites allow for hotlinking. Other sites don't. Why isn't it allowed at some sites? It's because every time you hotlink an image from another website, you are using THEIR bandwidth.

Let's assume that gemelle.jpg is hosted here at Designcove.com. If you want to use the image gemelle.jpg in your webpage, this would be your coding:

<img src="http://www.designcove.com/gemelle.jpg">

The words "http://www.designcove.com/gemelle.jpg" is called the URL of the image. Or some people call the URL of the image as the link to the image.

Now assume the image "gemelle.jpg" is inside a folder called "chibi". Then your URL will look like this:

<img src="http://www.designcove.com/chibi/gemelle.jpg">

Now assume the image "gemelle.jpg" is inside a folder called "level3" which is ALSO inside the "chibi" folder, then it would be this:

<img src="http://www.designcove.com/chibi/level3/gemelle.jpg">

As you can tell, the URL or link of an image can get long!

That's why it's always best to use an image that's hosted inside folders within your own webpage. It'll save you a lot of headache.

If you're looking for a FREE host that will provide hotlinking for your images, I recommend using Photobucket. Photobucket even helps generate the URL for you.

If the URL they generate for you is too long, you can always go to http://www.tinyurl.com/ to shrink the URL.

Of course, there are plenty of other FREE image hosting websites that allows hotlinking. The best place to look is to use Yahoo or Google to find those sites.

Back to Top

HTML Coding an Image - Multiple Folders

Assume this situation:

You have a "webpage.html" file.

You have an "Images" folder. The "gemelle.jpg" is inside the images folder.

You want to insert the "gemelle.jpg" into your "webpage.html" page.

What would the HTML coding be? Answer:

<img src="images/gemelle.jpg">

If you know DOS, this should look really familiar.

Now assume that "gemelle.jpg" is now inside a folder called "level2".

What would the HTML coding be for your "webpage.html"?

<img src="images/level2/gemelle.jpg">

Ok, now new scenario.

"webpage.html" is inside it's OWN folder called "Home"

"gemelle.jpg" is inside it's OWN folder called "Images"

You want to insert "gemelle.jpg" into your "webpage.html" page.

What would the code be? Answer:

<img src="../images/gemelle.jpg">

If you're wondering what "../" means. That means you need to go DOWN a level inside your original folder, and then up a level to go inside the "images" folder. (Just like DOS)

If you're confused, then take your time and re-read it again. It generally helps if you take a paper and pencil and see the connection between the two.

Understanding how folders systems work it will help you in the future if you need to trouble shoot why you have a broken image or link. ~_^

HINT: Right-mouse click over the image that's broken, it will tell you the name of the missing file and WHERE it should have been located.

The most common mistake webmasters make is being TOO dependent on the WYSIWYG Editors folder management system. Sure it's great if the system is perfect. But what happens if something breaks in the system? You'll have to resort to old fashion HTML way to troubleshoot.

So take your time to understand the folder system and if anything goes wrong with the editors, you will be able to troubleshoot and fix the problem easier. ^_^

Back to Top

Lasted Updated: December 27, 2007