Y'know, I just got through searching for a moderator to point out a typo in the first post, and then I caught the typo in my own. A file does not have to be loaded loaded twice :(
There are three kinds of links: relative links
or, for that matter,
These forms are interpreted by the browser (or by any other program, such as a text editor, that has "web preview" functionality). Assuming your html document is
then the three links above would mean
/dir1/styles/stylesheet.css absolute links:
That form means what it looks like: "go out on the internet and find this URL". You'd never use it for links to supporting files on your own site. OK, almost never. site-relative or site-absolute
(I've seen both forms and they mean the same thing)
This form only works on a server.
Well, theoretically it would work on your local computer-- but only if you kept your files at the very top level of some directory (details depend on your operating system). On a server, it means
example.com/styles/stylesheet.css no matter where the original html file is located
. That's the magic of the leading slash. Use this form for files that don't move, for cross-directory links on your site, and for all links in error documents.
For this form to work on your local machine, you need to install a pseudo-server like MAMP, WAMP or, uhm, I forget what it's called in Linux but something tells me you're not a Linux person so that's OK. There are free forms of each one and they're easy to use. You can then make a local copy of your site that will look and behave exactly
like the real thing, including haha
server-side includes, php, htaccess (assuming Apache) and everything else you want. You probably won't do this if you have an ecommerce site with thousands of pages, but for anything smaller it's invaluable.