programming4us
programming4us
WEBSITE

Smashing Html5 : Organizing a Page - Organizing Files - Relative reference

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

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.

977279-fg0510.eps

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.

Other  
  •  Smashing Html5 : Organizing a Page - Getting Your Stuff Organized (part 2) - Grouping without fracturing, Figures and captions
  •  Smashing Html5 : Organizing a Page - Getting Your Stuff Organized (part 1) - Paragraphs, divisions, and lists
  •  Smashing Html5 : Organizing a Page - A Design in Sections
  •  Smashing Html5 : The Top of the HTML5 Document
  •  The Alfa Romeo Mito – A Usable And Fun Package
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 8) - SEO Page Optimization - Edit Display Templates
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 7) - SEO Page Optimization - Edit Master Pages
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 6) - SEO Page Optimization - Upload Design Files
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 5) - SEO Page Optimization - XML Site Map, Site Design Manager
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 4) - SEO Page Optimization - Page-Level SEO, Site Collection SEO
  •  
    Top 10
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
    - Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
    - Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
    REVIEW
    - First look: Apple Watch

    - 3 Tips for Maintaining Your Cell Phone Battery (part 1)

    - 3 Tips for Maintaining Your Cell Phone Battery (part 2)
    programming4us programming4us
    Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
    programming4us
     
     
    programming4us