images not appearing

[Emalia Suahero]

I used notepad++ on my school's computer to learn basic html coding. I
have a mac, so downloaded textwrangler to use at home and practice
building a website for fun. I am trying to insert a image and use the
tag
<img src="iguana.jpg" height="240" width="284"/>
The image appeared at school. Using notepad++, pc, windows, firefox
but on my home computer textwrangler, mac, os, firefox, it shows a box
with a ripped piece of paper in the upper left hand corner. What might
be happening?

[Thomas Humiston]

Emalia,

Good question, and it's fair to ask whether TextWrangler had anything to do with it. The answer is no, but we can still talk about how to fix it.

The short answer: On your home computer, the image is not in a place where the HTML file expects to see it. You need to either move the image file or change the "src" attribute of your IMG tag.

A longer answer: The path src="iguana.jpg" means that the image must be in the same location as the page itself, not in a different folder. So even if the page is sitting right on the desktop and the image is, say, in a folder on the desktop, the page won't be able to see it.

Some examples should illustrate the idea:

So let's say you wish to store all the images of your page (or entire website) in one place (and grouping files by type in this way is generally a good idea). With a folder called "images" sitting in the same location as your HTML file, the IMG tag would look like this:

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

Another approach is to have two folders next to each other, one for HTML files and one for images. In this case your IMG tag needs to tell the browser to go *outside* its own folder first, and *then* into the images/ folder. Using "../" means "go up a level":

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

You can go up or down the folder structure as many times as needed:

<img src="../../../users/goldilocks/thirdbed/sleepytime.gif">

I hope this helps!
- Thomas

P.S. I highly recommend the following easy tutorials:
http://www.w3.org/MarkUp/Guide/Overview.html
http://www.w3.org/Style/Examples/011/firstcss

[Thomas Humiston]

Oops, this should have said, "In this case, your IMG tag needs to tell the browser to *look outside the folder that holds the HTML file*, and then into the images/ folder."

Also, if you've misspelled the image name or left off one of the quotation marks or brackets, that would break the image as well.

- TH

[Kendall Conrad]

Thomas covered some common issues that could be responsible. Another common issue that can come up is the case of the file name. Windows doesn't care about case, but Mac does in some cases. Since the src attribute has all lower case, make sure the actual file name also is lower case.

-Kendall

[Luke Jensen]

Emalia, I had this same issue, but on textwrangler you can not use quotes, dp <img src=iguana.jpg/> That should work.

Let me know if that works,

Luke