Directory Structure

On larger websites it's a good idea to organize your code by placing the
pages for each different section of the site into a new folder. Folders on a
website are sometimes referred to as directories.

Structure Relationships Homepages

The diagram on the right shows The relationship between The main homepage of a site
the directory structure for a files and folders on a website written in HTML (and the
fictional entertainment listings is described using the same homepages of each section in a
website called ExampleArts. terminology as a family tree. child folder) is called index.html.

The top-level folder is known In the diagram on the right, you Web servers are usually set up
as the root folder. (In this can see some relationships have to return the index.html file if no
example, the root folder is called been drawn in. file name is specified.
examplearts.) The root folder
contains all of the other files and The examplearts folder is a Therefore, if you enter
folders for a website. parent of the movies, music examplearts.com it will return
and theater folders. And the examplearts.com/index
Each section of the site is placed the movies, music and theater .html, and examplearts.com/
in a separate folder; this helps folders are children of the music will return examplearts
organize the files. examplearts folder. .com/music/index.html.

If you are working with a content Instead, these systems often Editing the template file would
management system, blogging use one template file for each change all of the pages that use
software, or an e-commerce different type of page (such as that template. Do not change
system, you might not have news articles, blog posts, or any code that is not HTML or
individual files for each page of products). you may break the page.
the website.

81 LINKS
 Parent examplearts
Grandparent
index.html
The examplearts folder is a The examplearts folder is a
parent of the music folder. images
grandparent of the dvd folder.
logo.gif
movies
cinema
index.html
listings.html
reviews.html
dvd Grandchild
index.html The dvd folder is a grandchild
reviews.html of the examplearts folder.
index.html
Child music
The music folder is a child index.html
of the examplearts folder. listings.html
reviews.html
theater
index.html
listings.html
reviews.html

Every page and every image on The path to the homepage of this You use URLs when linking
a website has a URL (or Uniform site is www.examplearts to other web pages and when
Resource Locator). The URL is .com/index.html. The path including images in your own
made up of the domain name to the logo for the site is site. On the next page, you will
followed by the path to that page examplearts.com/images/ meet a shorthand way to link to
or image. logo.gif. files on your own site.

The root folder contains: Each sub-directory contains: The movies section contains:
●● A file called index.html which ●● A file called index.html which ●● A folder called cinema
is the homepage for the is the homepage for that
entire site section
●● A folder called DVD.

●● Individual folders for the ●● A reviews page called reviews

movies, music and theatre .html
sections of the site
●● A listings page called listings
.html (except for the DVD
section)

LINKS 82
 Relative URLs

Relative URLs can be used when linking to pages within your own
website. They provide a shorthand way of telling the browser where to
find your files.

When you are linking to a page If all of the files in your site are
on your own website, you do in one folder, you simply use the
not need to specify the domain file name for that page.
name. You can use relative URLs
which are a shorthand way to tell If your site is organized into
the browser where a page is in separate folders (or directories),
relation to the current page. you need to tell the browser
how to get from the page it is
This is especially helpful when currently on to the page that you
creating a new website or are linking to.
learning about HTML because
you can create links between If you link to the same page from
pages when they are only on two different pages you might,
your personal computer (before therefore, need to write two
you have got a domain name and different relative URLs.
uploaded them to the web).
These links make use of the
Because you do not need to same terminology (borrowed
repeat the domain name in each from that of family trees) you
link, they are also quicker to met on the previous page which
write. introduces directory structure.

83 LINKS
Relative Link Type example (from diagram on previous page)

Same Folder
To link to a file in the same folder, just use the file To link to music reviews from the music homepage:
name. (Nothing else is needed.) <a href="reviews.html">Reviews</a>

Child Folder
For a child folder, use the name of the child folder, To link to music listings from the homepage:
followed by a forward slash, then the file name. <a href="music/listings.html">Listings</a>

Grandchild Folder
Use the name of the child folder, followed by a To link to DVD reviews from the homepage:
forward slash, then the name of the grandchild <a href="movies/dvd/reviews.html">
folder, followed by another forward slash, then the Reviews</a>
file name.

Parent Folder
Use ../ to indicate the folder above the current one, To link to the homepage from the music reviews:
then follow it with the file name. <a href="../index.html">Home</a>

GrandParent Folder
Repeat the ../ to indicate that you want to go up To link to the homepage from the DVD reviews:
two folders (rather than one), then follow it with the <a href="../../index.html">Home</a>
file name.

When a website is live (that For example, you may see the A forward slash will return the
is, uploaded to a web server) name of a child folder without homepage for the entire site,
you may see a couple of other the name of a file. In this case and a forward slash followed
techniques used that do not the web server will usually try by a file name will return that
work when the files are on your to show the homepage for that file providing it is in the root
local computer. section. directory.

LINKS 84