<img> tags for a self taught newbie

Discussion in 'Web Design and Development' started by AloeQ 007, Mar 28, 2010.

  1. AloeQ 007 macrumors newbie

    AloeQ 007

    Joined:
    Mar 28, 2010
    Location:
    Venice, CA
    #1
    This is my first post on this forum-which has been incredibly helpful in a number of my hang-ups lately, thx! This has probably been answered but I might have not been wording my questions correctly.

    My question has to do with <img> tags. I was under the impression at first that you could just use the name of the file.

    <img src='squiggles.jpg'/>

    I've been using Coda as my text editor and the only way I could get my images to work properly is by adding this much longer version...

    <img src='file:///Volumes/Macintosh%20HD/Users/Julie/Desktop/Staring%20Again/Homepage-Laser%20by%20Megan/Squiggles.jpg'/>

    There has to be an easier way that isn't so horrible looking! Please help and let me know what I have missed!
     
  2. spinnerlys Guest

    spinnerlys

    Joined:
    Sep 7, 2008
    Location:
    forlod bygningen
    #2
    Maybe remove the / after the <img src='squiggles.jpg'/> and is the picture in the same folder as the HTML file?

    <img src="image.jpg"> is the proper tag.

    Or if the website.html file is on www.website.com/directory/sub/ and the image.jpg file is on www.website.com/directory/sub/really/, then the image tag should look like this <img src="really/image.jpg">.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    @spinnerlys, the / is OK, though there should be a space before it for IE (<img src="" />). That's just the XHTML way so that the code is XML compliant.

    The likely issue is a matter of the path. When you just use the name of the image, it assumes that image resides in the same folder as the HTML file. If not, then you need to tell it how to get to the image. If it's inside a folder that's in the same folder as the file, then the path looks like "folder/squiggles.jpg" If the folder is a level up, then you can do "../folder/squiggles.jpg" Here's one of a number of articles that explains the difference between relative and absolute paths.
     
  4. AloeQ 007 thread starter macrumors newbie

    AloeQ 007

    Joined:
    Mar 28, 2010
    Location:
    Venice, CA
    #4
    Hey thank you for responding so fast!

    I think I'm going about this the wrong way... How would a proper css background image look? As of now I have this....

    background-image: url(file:///Volumes/Macintosh%20HD/Users/Julie/Desktop/Staring%20Again/Homepage-Laser%20by%20Megan/Squiggles.jpg)

    should I keep it in html file or change something in css? And yes I have a copy of the image in the same file as the html file I am working with
     
  5. Nermal Moderator

    Nermal

    Staff Member

    Joined:
    Dec 7, 2002
    Location:
    New Zealand
    #5
    background-image: url("Squiggles.jpg");

    That should work if the JPEG file is in the same location as your HTML.

    Neither of them are correct because there's no alt tag ;)
     
  6. AloeQ 007 thread starter macrumors newbie

    AloeQ 007

    Joined:
    Mar 28, 2010
    Location:
    Venice, CA
    #6
    Oh Thank You, Thank You, Thank You!!! It worked! I have no idea how I missed something so easy but my code now looks cleaner and that is much easier!
     
  7. bootedbear macrumors 6502

    bootedbear

    Joined:
    Sep 13, 2004
    Location:
    Austin, TX
    #7
    You don't want to use the file:// protocol if this page is going to be viewed on any other location but your own machine. It won't work anywhere else because it tells the browser to look for the file on the local machine.
     
  8. fabulous-rich macrumors newbie

    Joined:
    Dec 19, 2007
    Location:
    UK
    #8
    It strikes me that you referenced squiggles.jpg in your original code, but you then referenced Squiggles.jpg in the later version - notice the capital S. It's case-sensitive on Macs!! So <img src="Squiggles.jpg" /> would work (as long as everything's in the same folder etc) :)
     
  9. Nermal Moderator

    Nermal

    Staff Member

    Joined:
    Dec 7, 2002
    Location:
    New Zealand
    #9
    No it isn't, unless you specifically enable case-sensitivity when formatting the volume.
     
  10. Cromulent macrumors 603

    Cromulent

    Joined:
    Oct 2, 2006
    Location:
    The Land of Hope and Glory
    #10
    No. The correct tag if you remove the / is:

    <img src="image.jpg"></img>

    Always, always close tags! Or just use the short hand method which is the / at the end as posted by the OP.
     
  11. blackNBUK macrumors 6502a

    Joined:
    Feb 19, 2010
    Location:
    UK
    #11
    I think the general point still stands though. If your web-host uses Linux or BSD then getting the case right is important.
     
  12. Cromulent macrumors 603

    Cromulent

    Joined:
    Oct 2, 2006
    Location:
    The Land of Hope and Glory
    #12
    Exactly. You should always assume a case sensitive file system.
     

Share This Page