Web Site
Interactivity
 
Non-Textual Content
 
Web Site Organization
 
Ten Tips on Sites
 
Web Site Planning
 
Saving Site Files
 
For a Good Site
 
homeresearch linksstate coordinatorsonline shopcontactsitemap
N H D  C O N T E S T
Contest Section Highlights:

Photos from the 2008 National Contest
2008 National Contest Winners
Webcast of the 2008 Awards Ceremony
What are the steps to create a project?
How do I create a process paper?
How are entries judged?

A Word on Saving Web Site Files

Web Designers: Save Your Files the Right Way and Save Yourself Time and Trouble!
When you begin designing your site, start a folder on your hard drive or school network where you will store ALL the HTML files, images, and media that you plan to use in your site and nothing else . As you build your site, link ONLY to files in that folder and use relative pathnames in your links (see below for an explanation). This will make it much easier to submit your project for competitions because you can simply burn the entire folder to a CD-R without having to move individual files or break your links!

Note: If you're using web design software to build your site, the software may save your files this way automatically. It may even create relative links to images and pages for you. Check this out in advance by talking to someone who is familiar with the software.

What's a Pathname?
The links you create in your HTML files tell an Internet browser to bring in an image, another page, or media. The pathname is the part of the link that gives the browser directions to the file you want to appear. Think of it as an address. The pathname could direct the browser to look in a folder on a computer's hard drive (which is what your pages will do) or if the site is online, to a web site.

The pathname is bold in this image link:
‹img src="C:\school\nhd\cows\cheese.jpg"›
This particular pathname tells the browser to go to the hard drive of that computer (C:) to find the folder "school," then to the folder "nhd," then to the folder "cows" for an image called cheese.jpg.

What's a Relative Pathname?
If someone in your class asked you where you live, you would probably give a street address, but not your state or country. Your friends know what state you live and that you live in the USA, so you leave that out. Relative links work the same way. They tell the browser where a file is relative to the web page that needs it, rather than giving a complete address.

Look at the pathname above, written in bold. This pathname isn't relative—it's specific. It even tells the browser which drive to start in (C:), which is like telling someone the country where you live.

There's a much simpler way to write that link. Let's say you have a web page saved in the folder "cows" that needs the image "cheese.jpg," which is in the exact same folder. Because they're together, they browser doesn't need to go anywhere. Your pathname would just be the image name:

‹img src="cheese.jpg"›

Much simpler! If your web page were saved in the "nhd" folder, you would just need to tell the browser to go into the "cows" folder to find the picture:

‹img src="cows\cheese.jpg"›

The beauty of relative pathnames is that they're flexible! You can move your main web site folder anywhere and, since the files will stay in the same place relative to one another, your links will still work. Your web site folder will be like its own little self-contained world. (Specific pathnames, on the other hand, cause problems because the "address" of the files suddenly changes when you move them to a different folder.) So if you use relative pathnames, you can put your whole web site folder on a CD-R to submit for competition and your links will be problem-free!
   

About Contest Students Alumni Educators Parents Forum Press Room Sponsors Donate