HTML and CSS Reference
Formal Classii cations (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.
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 i le. An absolute address begins with http:// and includes the
full path to the HTML5 i le. For example, the following is an absolute address to a i le:
http : //www.smashinghtml5.com/organization/graphics/faces.html
No matter where that URL is called from, it recognizes it as the named i le at the end of the
URL. h e 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” >
h e calling Web page could be on an entirely dif erent server, and it would go to the absolute
h e 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.
A relative reference is relative to the calling page's position on a Web site or its dei ned 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 i le 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” >