Ways to address src images

Question

I've looked at much of the documentation on the web about
this but I could still use a primer.
The ways that src documents are referenced in both html and
css style sheets is confusing. I've seen specs starting with "../"
and others starting with "/" while others start with the folder
name without any prefix. Can someone clarify the formats used to
refer to folders or files inside the web site area?
Also, can someone clarify when to use import vs. link rel
when referring to a style sheet?
Thanks
Tom

Answer 1

On understanding paths- this is an old thing:
There are three link methods-
Relative to Document
Site Root Relative
Absolute or Full http path
1) RELATIVE TO DOCUMENT
../folder1/page.html
or
folder1/page.html
or
page.html
can start with a folder name, a filename, or can use ../
which means "go up
one folder" � ../../../ �would mean go up three
folder levels from present
location.
Gives directions on how to get to the other file, based on
where you are
now. such as go UP one folder, then find a folder named
'folder1', then in
the 'folder1' folder get a file called page.html
A real world analogy- to get to the Post Office from the high
school, leave
the high school parking lot, go west, turn left, go south 2
blocks.
�( ***The directions are based on where you are now
With Document Relative paths and links, as long as the
relationship between
documents is kept the same and folders aren't juggled around,
the links will
work anywhere. The most portable linking method.
Say a page located here:
http://example.com/folder1/fol
der2/page.html
contains an image tag like this:
<img src="../image.jpg">
That means go up one level from where this page is, and find
image.jpg in
that directory.
http://example.com/folder1/ima
ge.jpg
2) RELATIVE TO SITE ROOT
/folder1/page.html
or
/page.html
A SITE ROOT relative path will ALWAYS start with a leading
slash �/
The leading slash means "go to root first, and then follow
this file path"
Relative to site root gives directions from the root level of
the site,
regardless of where you are starting from.
This root is the domain name, when the site is on a server.
If your site is
defined to a subfolder of a domain, do NOT use site root
relative paths in
dreamweaver. They will come out wrong, because dreamweaver
will base them on
what you've told it your site's folder is, not the real
"root" of the site,
which is at the root of the domain.
In real world, to get to Post Office, go to the City Hall
then go two blocks
east. �It doesn't matter where you are now- you have
to go the City Hall to
start following the directions.
(***the directions are based on a ROOT or ground zero point
Think of some cities like Anchorage, AK or Salt Lake City-
all street
addresses there can be read as co-ordinates from a zero
point. By just
looking at the address, you know in what corner of the city
it is.
Site Root Relative the way we use it requires that there be a
domain to be
relative to-- thus will not work to create a site on CD. And
will not work
from a Hard Drive. "Root" on a CD or HD is different. Needs
to be on a
server to work correctly. And- should not be used if your
remote site is
hosted in a subfolder of a domain, like
http://geocities.com/mysite/
The TMP files dreamweaver creates for a "preview in browser"
convert these
to document relative so they work during preview- but only
the document
that's being previewed. If you click a link on the "Preview
in Browser"
page- you will be looking directly at a file from the hard
drive- and site
root relative paths on that page won't work.
Say a page located here:
http://example.com/folder1/fol
der2/page.html
contains an image tag like this:
<img src="/folder1/image.jpg">
That means go to the site's root level on the server,
http://example.com/
then find the folder1 directory, and in that directory find
image.jpg
http://example.com/folder1/ima
ge.jpg
An example of site root links not working-
Your site is at
http://geocities.com/mysite
If you use a site root relative path in dreamweaver, the link
will come out
/image.jpg
and the image is at:
http://geocities.com/mysite/im
age.jpg
But the browser will be looking here
http://geocites.com/image.jpg
and the image isn't there...
3) ABSOLUTE
http://mydomain.com/folder1/pa
ge.html
absolute is the full http address of the file
To get to the post office, go to 113 Main Street, Anytown,
Your_State, USA.
Don't need to know anything about where you are starting
from, it's an exact
address.
Almost all people who use dreamweaver use Document Relative
paths, and let
dreamweaver manage the paths. There are exceptions but few of
them. Document
Relative is the easiest for a new user to stay out of trouble
with.
The other big concept is that site has to be properly defined
within
dreamweaver, because dw makes all links based on the
information it's been
given in the site defintion. If that info is wrong- then
links can be wrong
(especially site root relative paths)