HTML HREFS - confused...

[Domestos]

Hi all,

I've read till I am blue in the face examples and thoughts on proper use of
the HREF tag.

My prblem is thus.

I develop and test locally and post the development to a website like most
of us...

my local development 'index.html' exists at...

http://localhost/dev/mywebsite/index.html

however,

My webpage exists at

http://www.mywebsite.com/index.html

How do i use HREF for local links i.e. graphics in the root/GFX folder
etc..so they work on both my development area and my website without
changing them everytime I upload them online. I'm really confused.... does
BASE HREF have a part to play?

My webpages are developed dynamically through php so I need them to work
through that too...

 

[Benjamin Niemann]

I've read till I am blue in the face examples and thoughts on proper use
of the HREF tag.

HREF *attribute*, not tag...

My prblem is thus.

I develop and test locally and post the development to a website like most
of us...

my local development 'index.html' exists at...

http://localhost/dev/mywebsite/index.html

however,

My webpage exists at

http://www.mywebsite.com/index.html

How do i use HREF for local links i.e. graphics in the root/GFX folder
etc..so they work on both my development area and my website without
changing them everytime I upload them online. I'm really confused.... does
BASE HREF have a part to play?

a) Use relative URLs, e.g. in document 'foo/bar.html' use
'../gfx/myself.jpeg' to access 'gfx/myself.jpeg'. Not the best solution,
because you have to track the 'directory depth' of the document in order to
get the right number of '../' in the URL. And if you move a document to a
different directory...

b) Configure your local webserver to use virtual hosts, setup a local domain
(if you only work on one computer, editing /etc/hosts or hosts.txt
somewhere below C:\windows should be sufficient), so you can access the
local version via something like 'http://mywebsite-dev/index.html'. Then
you can use URLs relative to the document root, e.g. '/img/myself.jpeg', no
matter how deep you are in the directory structure.

I prefer b)...

My webpages are developed dynamically through php so I need them to work
through that too...

This should not make a difference.

 

[frederick]

I've read till I am blue in the face examples and thoughts on proper use of
the HREF tag.

There's no such thing as an HREF tag! You probably mean the "href" and

I develop and test locally and post the development to a website like most
of us...
my local development 'index.html' exists at...
http://localhost/dev/mywebsite/index.html
however,

My webpage exists at
http://www.mywebsite.com/index.html

How do i use HREF for local links i.e. graphics in the root/GFX folder
etc..so they work on both my development area and my website without
changing them everytime I upload them online. I'm really confused.... does
BASE HREF have a part to play?

Your local directory structure should mirror that of your web server;
you could also make use of <BASE href="[whatever]">, but it's not
normally necessary.

If you wanted to use a local directory "P:\Web design" for your work,
for example, then that would be equivalent to the root directory of
your site up at "http://www.example.com". So your index page would be
"P:\Web design\index.html" locally, and
"http://www.example.com/index.html" remotely.

To get images and so on to work correctly, use relative URLs. Thus if
you have an image file locally at "P:\Web design\images\foo.jpg", then
when editing index.html you'll use HTML that's something like this:
<IMG src="images/foo.jpg" height="74" width="83" alt="whatever"
title="fred">
When you upload your image you'll then make sure that it goes into a
directory named "images" on your web server.

If the HTML file isn't in your project's root directory, then you'll
need to prefix the image's URL with "../" for every directory you're
down the ladder. For example, to insert an image stored locally at
"P:\Web design\resources\images\bar.jpg" into an HTML file stored
locally at "P:\Web design\marketing\sales\new\2006.html", then you'll
use code something like this:
<IMG src="../../../images/foo.jpg" height="74" width="83"
alt="whatever" title="fred">

By doing it this way, your pages will display as intended both locally
and remotely. You'll have to keep count of how many folders you're
going up or down the ladder, although if you're using a decent HTML
editor it should handle this for you.


BTW, I've used Microsoft Windows paths above for the local paths, but
it should be obvious enough how to convert them to something meaningful
if you're using a Linux-based system or whatever else.

 

[Andy Dingley]

I've read till I am blue in the face examples and thoughts on proper use of
the HREF tag.

You probably have trouble with "URIs" rather than href itself.

href and src are used confusingly in HTML. <img> has src, <a> has href.
Try thinking of them as src for "Stuff I'm using right now on this
page" and href for "Stuff I might use, if the use selects that link and
goes somewhere"

href is an attribute, not a tag. In this newsgroup we care.

my local development 'index.html' exists at...

URIs (roughly) come in three sorts. Absolute, relative, and
root-relative.

A page of
http://example.com/pages/index.htm
might use any of the following URIs to point to an image in the same
location.

Absolute
http://example.com/images/foo.jpg

Relative
.../images/foo.jpg
another_image_directory_under_pages/bar.jpg
bat.jpg

Root-relative
/images/foo.jpg

They all work equally well, but their portability (robustness when the
source page is moved) varies. They all break if you move the image
resource.

Absolute always points to the same site. Doesn't care where you use it
from. Handy for referring to external sites, and will keep working
between your "dev" and "live" sites.

Relative is what you should use instead for referring to assets on your
own site. It "follows" whichever host you're currently loading the page
from. It also follows the page's directory around (handy for lots of
directories and images kept with their pages).

Root-relative paths are relative for the host, but absolute for the
path on that host. For moving servers they work like relative URIs, but
for moving pages around they keep pointing to the same place on the
server. Handy for "site furniture" that's shared between many pages,
rather than the page-specific assets.


In general, set your server up with an "images" directory (or somesuch
name) and keep the shared stuff in there (logos, page background)
referring to it with root-relative URIs.

Use lots of directories and lots of default pages (index.htm or
equivalent). Make most page URIs of the form
"http://example.com/pages_about_fish/" and don't bother specifiying the
default page name.

Place page-specific images into the directory with their page. Use
relative URIs (probably just "mullet.jpg") to refer to them from the
<img src="" > attribute..

Only use absolute URIs for external links <a href="http://google.com" >

Always use absolute URIs for external links.

My webpage exists at
http://www.mywebsite.com/index.html

That's not your site, is it ? Use "example.com" if you want an
example, otherwise use the real site so that we can see the real
problem.

If "mywebsite.com" really is your work, then it's cluelessness beyond
_any_ help whatsoever. Technical "shiny things" grabbing of the newset
toy in the box, used for an _entirely_ inappropriate purpose (the AJAX
nav menu)

 

[frederick]

If "mywebsite.com" really is your work, then it's cluelessness beyond
_any_ help whatsoever. Technical "shiny things" grabbing of the newset
toy in the box, used for an _entirely_ inappropriate purpose (the AJAX
nav menu)

When will people learn that the user shouldn't be seeing link addresses
of the sort "http://www.mywebsite.com/#"?! The only link that's
different is the link "back" to the home page!

Rather amusingly, the site uses the slogan "Experts in Direct
Navigation"!!