Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Using Graphics : Page 6

Just having a collection of Web-ready graphics is a good start. Now you have to learn how to use them effectively on your Web pages.


advertisement

Storing Image Files

Just as you do with .html files, you need to have a logical file structure for saving and calling your image files, as well as a logical naming convention for the files.

The images themselves aren't actually placed in the .html file that displays them. Instead the file will call the images by name. The names can include either a full, exact path, or a relative path.



File Hierarchy

There are no hard-and-fast rules for file structure; HTML is flexible enough to accommodate many different storage schemes. But we heartily recommend the following simple approach:

  • If all of your site's HTML files reside in one directory, and if you have just a handful of image files, store your HTML files and image files in the same directory:

    www
      home
        index.html
        logo.gif
        photo.jpg

    Referencing image files in the above directory setup is simple. For example, to reference logo.gif from index.html, you would enter: <img src="logo.gif">.

  • For any other situation than the above, store all of your image files in a separate image directory:

    www
      home
        index.html
      page1>
        page1.html
        links1.html
      images
        logo.gif
        photo.jpg
        thing.png

    Referencing image files in the above directory setup is just a tad more subtle. To reference logo.gif from page1.html, you would enter: <img src="../images/logo.gif">.

    The .. moves you up one level, from page1 to www. Then, the /images/ moves down from www to the images directory.

Image-File Naming Guidelines

There are no etched-in-stone rules for naming image files. But here are some useful guidelines:

  • Use the 8.3 naming convention. That is, limit the first part of your filename to a maximum of 8 characters and append to this a 3-character extension. For example: myimage.gif, a.jpg, alleight.png, etc. These are all 8.3 no-nos: mycoolimage.gif, a.jpeg, all_eight.png.

    Why? Because some of your users might be on platforms that do not support long filenames (Windows 3.x, for example).

  • Use all lowercase letters.

    Why? Because some servers (UNIX, for example) are filename case-sensitive and it's all too easy to make an upper/lower-case mistake when entering a filename in your HTML docs.

  • Do not use spaces or punctuation marks, except for underscores _ and dashes - .

    Why? Because some servers might have trouble decoding these special characters.


Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date