Rookie question #2: How to reference the localhost folders

mike123abc · February 13th, 2012, 06:06 AM

Hi,

I am in the development stage, so I dont't have an "actual" website URL. And I want to reference a file in the localhost folder structure, such as in

Code:

<img src="localhost/images/Logo.png" />

I looked on w3schools, but I didn't find anything helpful (not badmouthing w3schools !).

And,

when I'll finally move the pages to the real website, will I have to change all such references ? That'd be beastly !

Thanks,

Mike

Imar · February 13th, 2012, 06:10 AM

You can use relative links, which would work locally and when deployed to a server. Let's say your site / pages are located at C:\Site.

Inside this folder, create an HTML file and a sub folder called Images. You can now refer to the images in the sub folder from the HTML file in C:\Site like this:

<img src="Images/Whatever.gif" />

If you create another folder such as About and create a new HTML file in there, you can refer to the Images folder from that new HTML file like this:

<img src="../Images/Whatever.gif" />

../ goes "up" one level (e.g. from C:\Site\About into C:\Site) and then into the Images folder again.

Hope this helps,

Imar

mike123abc · February 13th, 2012, 06:24 AM

Sorry Imar,

I guess you explained it quite clearly, but I feel I should elaborate:

My server is ubuntu linux.

The localhost is actually located at /var/www/Website/htdocs. From this directory down begins my site folder structure (localhost/images, localhost/stylesheets etc.)

In localhost is the index.php page which is now my main page.

So how would I refer to image Whatever.png located in localhost/images/ from index.php ?

I got the rest of your explanation with ../images etc. :-)

Thanks for the patience,

Mike

mike123abc · February 13th, 2012, 06:46 AM

Ok,

so I tried to use

Code:

<img src="images/Logo.png" />

which I think you actually told me to do. It doesn't work, either.

Help !

Mike

Imar · February 13th, 2012, 06:53 AM

Linux is case sensitive, so make sure the folder and file names match exactly with your code.

Other than that, I don't see why this doesn't work if locahost is a folder with your HTML / PHP file and a sub folde called images.

Cheers,

Imar

mike123abc · February 13th, 2012, 08:17 AM

I had made a stupid mistake:

Code:

<td>img src=...</td>

vs.

<td><img src=... /></td>

No wonder it kept appearing like text !

Mike

PS. And it works both with "src=/images/..." and "src=images/...". Good to know ! I prefer "http://p2p.wrox.com/images/..." though, it makes more sense.

Imar · February 13th, 2012, 08:43 AM

Yes, /images and images work from a file in the root. /images still works from a file at /whatever/something.html as it still points to the root. Using just images makes it easier to move the html and the images folder to a different location in your site.

Using the full domain also works but makes it extremely hard to rename the domain or reuse your content elsewhere

Cheers,

Imar