ORGANIZING A PAGE - HTML5 - page 101

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 i le 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” >
105
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. h is 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 5-10 provides a general graphic illustration of accessing resources in higher- and
lower-level folders.
.../images
images
anyFile.html
images/ images
Figure 5-10: Relative paths.