HTML newbie with question about images

Factual Questions
1

I’m in the process of teaching myself to write basic HTML for a website i want to set up, and i’m having a bit of a problem with an image (a .gif) that i want in my webpage.

Now, i’m aware that the basic coding for inserting an image is:

<img src=“image.gif”>

as long as the .gif image is in the same folder as the HTML file. And when i have the image in the same folder, i have no problem and the image works just fine with this coding.

However, according to the book that i’ve been reading on the subject, it is possible to call up an image from another folder. I would like to do this, because having the images in a separate folder would be easy and convenient.

If i have read the instructions correctly, all i have to do in order to call up an image from a different folder is put that folder’s file extension in the HTML code.

So, for example, my HTML file’s location is:

C:\My Documents\html\american memory\main\main.html

and the image i want to use is at:

C:\My Documents\html\american memory\images\image.gif

My impression was that the appropriate coding to link to the image is:

<img src="/images/image.gif">

because the browser would automatically add the rest of the path. But when i try this, all i get is a red cross, instead of the image. The only way i can get the image to appear is to type the full path, including the C drive, which is obviously no good, because it won’t be the C drive when i upload it to a web server.

Am i doing something wrong here? Is there something i don’t get? Any help would be most appreciated.

2

Your relative addressing will only work if the .html file is in the folder one level above where you’re calling. As a general rule, it is best to use the full path, because it makes moving things around much easier.

3

Try “…/images/image.gif”

4

Thanks, Q.E.D. But what happens to the “C” and the “My Documents” when i send the files to a web server? Because i was under the impression that i could just send the “html” folder with all its contents to the server. Is that how it works?

5

As Q.E.D mentions (My post was cut off).

The path you enter would only work if the directory in question is a subdirectory of the directory where the html file is located.

So if the paths are:

c:\MyPages\MyPersonalWebPage\mypage.html

AND

c:\MyPages\MyPersonalWebPage\images\image.gif

Then a tag from “mypage.html” calling an image thusly: “/images/image.gif”

Will work.

You can go back to the server’s starting directory by calling “…/images/image.gif”.

In this case (provided that the server’s main directory points to “… \MyPages” It would call a non existing “c:\MyPages\images\image.gif” file.

6

No, you’ll have to change the adresses to that of your webserver. What I do is to upload the images to the same folder as the .html file. It’s just easier, IMO. Plus, that way, you can leave the <img src=“image.gif”> the way it is.

7

Right. I think i’m getting it now.

Thanks for the help, you guys.

8

In your example the code you used is calling a non existant diretory. Both MAIN and IMAGES anre subdirectories of “AmericanMemory”.

By calling /images/image.gif from the html file located in MAIN, you are essentially calling

C:\My Documents\html\american memory\main\images\image.gif

That’s wrong obviously.

You’d need to call “…/images.image.gif” or “…/americanmemory/images/image.gif” depending on what directory your server points to.

9

For referencing files, the web server assumes a base directory. You asked where “C:\My Documents\html\american memory\main” went. If you are correct, that is your base directory and references to files are assumed to begin with that.

The web server, when you say /images/image.gif, prepends the base directory and resolves it to c:\my documents\html\american memory\main\images\images.gif

However, if you reference the image is /images/image.gif and get nothing, it is possible that the base directory variable is different than you think.

10

Good for you!

If your host lets you, you can assign a subdomain to your images directory. Then all you’ll have to do is reference the subdomain, plus your image name.

In my homepage, i used the root as my html folder, and a sub directory called images. I gave that folder it’s subdomain status and so if you browse to http://images.fdisk.com then you could see a directory listing of all my images (if i didn’t have an index.html file in that directory).

So, in code:



<IMG SRC="http://images.fdisk.com/mom.jpg">

would find the file called MOM.JPG easily.

I know it’s a lot to type out, but if you decide to move your images folder, all you’d have to do is reassign the subdomain’s pointer.

AND, if you wanted to spread your bandwith around other sites, you can have your HTML in one site, and reference your Images in another site.

I agree. The


../

tells the OS to jump to the parent folder before continuing the rest of the path. (just like in DOS


CD..

)

11

Okay, so the vB code for CODE didn’t work out like i’d expected it to.

12

A simple way to get around the issue of conversion is to use the <base> tag in the <head> [the </base> tag is forbidden, BTW]

Then you can simply change that one line and you’re ready to export. You can set it to one point in your computer’s directory tree for testing and authoring, then change it to the corresponding point in your server’s tree when you export; e.g.

<base href=“C:\website”>
and
<base href=“http://www.lackof.edu/~numnutz/pub”>

More info