HTML HREFS - confused...

Discussion in 'HTML' started by Domestos, Apr 23, 2006.

  1. Domestos

    Domestos Guest

    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...

    --
    Thanks,
    Andy Mak
     
    Domestos, Apr 23, 2006
    #1
    1. Advertising

  2. Domestos wrote:

    > 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.

    --
    Benjamin Niemann
    Email: pink at odahoda dot de
    WWW: http://pink.odahoda.de/
     
    Benjamin Niemann, Apr 23, 2006
    #2
    1. Advertising

  3. Domestos

    frederick Guest

    Domestos wrote:
    > 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
    "src" attributes of elements such as <A> and <IMG>.

    > 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.

    --
    AGw.
     
    frederick, Apr 23, 2006
    #3
  4. Domestos

    Andy Dingley Guest

    Domestos wrote:

    > 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)
     
    Andy Dingley, Apr 24, 2006
    #4
  5. Domestos

    frederick Guest

    Andy Dingley wrote:
    > 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"!!


    --
    AGw.
     
    frederick, Apr 24, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Guest

    HTML, Scripts and HRefs, etc...

    Guest, Nov 27, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    437
    Walter Wang [MSFT]
    Nov 28, 2006
  2. Brian Vallelunga
    Replies:
    0
    Views:
    361
    Brian Vallelunga
    Jan 15, 2007
  3. Andy Fish

    alternative to javascript hrefs

    Andy Fish, Dec 18, 2003, in forum: Javascript
    Replies:
    6
    Views:
    170
    Andy Fish
    Dec 19, 2003
  4. Gagan  Diesh

    two hrefs and function call

    Gagan Diesh, Mar 15, 2005, in forum: Javascript
    Replies:
    4
    Views:
    110
    Gagan Diesh
    Mar 16, 2005
  5. Dudely
    Replies:
    1
    Views:
    125
    Thomas 'PointedEars' Lahn
    Oct 9, 2008
Loading...

Share This Page