With a simple Web site, the organization of the
files is simple. As the complexity of a site grows, especially if
multiple designers and developers are involved, you need to get your
site organized in separate directories and even servers sometimes. In
this section, you’ll learn about several organizational issues and how
to deal with file organization and access.
Image organization and reference
A typical Web site will have one or more folders
(directories) dedicated to image files or types of image files. The examples haven’t used separate
folders for images and the HTML5 pages that load them; instead all the
image files are placed in the same directory as the HTML5 files. With a
large number of Web pages and images to load into the pages, a more
efficient ways to organize a site is to use separate folders for
different groupings of media. How you actually organize your images
depends on several different factors. The following are some possible
directories and subdirectories that might be used:
• Formal Classifications (Animals > Mammals > Rodentia > Myomorpha > Mus musculus > Mickey)
• Topic (Vacations > Where to Go > Where to Stay > What to Pack)
• Processes (Baking > Making Dough > Preparing Dough > Setting Oven > Timing)
Whatever organizational plan is implemented, you
need to understand how to access the images no matter how they’re
organized. All references are either to absolute or relative addresses.
Absolute reference
Any reference to an image is through a URL, whether
it’s a full listing of the address or one that references just the name
of the file. An absolute address begins with http:// and includes the full path to the HTML5 file. For example, the following is an absolute address to a file:
http://www.smashinghtml5.com/organization/graphics/faces.html
No matter where that URL is called from, it
recognizes it as the named file at the end of the URL. The same is true
with a source (src) reference to an image. If your code has the following link, no matter where the calling Web page is located, it will load nose.png.
<img src=”http://www.smashinghtml5.com/organization/graphics/nose.png”>
The calling Web page could be on an entirely different server, and it would go to the absolute address.
The advantage of using absolute addresses is that
you don’t have to worry about where a page is in your Web site. You
don’t even have to worry if it’s on the same server. However, it leaves
a good deal to be desired in terms of site organization, and then there
are those long URL names you have to get just right.
Relative reference
A relative reference is relative to the calling
page’s position on a Web site or its defined base. On your computer,
your Web page has a file position rather than an http position. For example, the following is the absolute position on the file somePage.html:
“file:///Macintosh HD/Users/billsanders/Desktop/HTML5/somePage.html”
If I have a graphic in the folder HTML5/, I can use its relative address to call it from somePage.html. For example, if I have anyGraphic.png in the HTML5 folder I just use the following relative reference:
<img src=”anyGraphic.png”>
However, if I want to organize my images into a separate folder called images, inside the HTML5 folder, I would use the relative address:
<img src=”images/anyGraphic.png”>
You can drill down as many relative levels as you want with each level separated by a forward slash (/). For example, a more complex graphic set would look like the following:
<img src=”images/animals/dogs/greaterSwissMtDogs/myDoggy.png”>
Besides “drilling down” you may also want to “drill
up.” By drilling up, you access resources in folders your calling page
is in. For example, suppose you have the following path and your HTML5
page is in the baseFolder.
topFolder/middleFolder/baseFolder
To access a graphic file in the middleFolder, you would use the following format:
<img src=”.../anyGraphic.png”>
If the graphic were in the topFolder, you would use the following format:
<img src=”../../anyGraphic.png”>
In drilling up, you don’t name the target folder your calling Web page is in; instead, you use successive ../
characters until your call is at the level you want. This means, you
can drill up to the level you want, and then drill down another branch.
For example, the following drills up to the topFolder, and then inside the topFolder drills down through the image folder to the target graphic:
<img src=”../../images/anyGraphic.png”>
Figure 1 provides a general graphic illustration of accessing resources in higher- and lower-level folders.
Figure 1: Relative paths.
Your relative position could be set to some
location other than the one where the file itself is located. The first calls the second on a different server; however, because the
first page’s base is set to the second server, the call is a relative
one. The first file is named Earth.html and is located in the domain smashingHTML5.com in the smashing folder. However, its base is set to smashingHTML5.net in the smashing folder. So, it can use a relative URL to access the file Alien.html on a wholly different server.
Base Set to a Different Server
<!DOCTYPE HTML>
<html>
<head>
<base href=”http://www.smashingHTML5.net/html5/smashing/”>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Earth</title>
</head>
<body>
<h1>This is Earth</h1>
<a href=”Alien.html”>Blast off!</a>
</body>
</html>
Web Page on a Different Server
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>The Planet Smashing</title>
</head>
<body>
<h1>Page from an Alien Server</h1>
</body>
</html>
Even though the domain for the first page (Earth.html) is smashingHTML5.com, the base is set to smashingHTML5.net. As a result, a relative link to Alien.html, which resides on smashingHTML5.net, is made without having to use an absolute address.
