BASIC STRUCTURE OF A WEBSITE

THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

File & Folder Structure of a Website

It’s important to keep the contents of your website organized.

Folders should have simple one word names. Multi-word
names can be faked by using the underscore “_” character, like
so:

product_images
course_files

etc.
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

File & Folder Structure of a Website

In the root folder of your site (“root” is the common name for
the top-level directory of a website) you’ll place an HTML
document called index.html

index.html is the homepage—the first page visitors see when

they arrive at your site.
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

File & Folder Structure of a Website

The index.html filename is set in stone because Unix-based

HTTP servers are configured to look for a document named
index.htm or index.html when no additional filename is
specified in the address bar.

http://website.com → http://website.com/index.html
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

File & Folder Structure of a Website

You will also have a folder reserved for your images. This
folder is usually called images or img.

Let’s take a look at the typical file/folder structure of a simple

website…
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

MyWebsite
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

index.html

MyWebsite
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

index.html images

MyWebsite
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

logo.jpg

index.html images

MyWebsite
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

logo.jpg

index.html images

downloads

MyWebsite
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

logo.jpg

index.html images

things.html

downloads

MyWebsite
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

logo.jpg

index.html images

things.html

downloads biographies

MyWebsite
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

logo.jpg

index.html images

things.html brad.html

downloads biographies

MyWebsite
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

logo.jpg

index.html images

things.html brad.html

downloads biographies

website.com

Let’s assume this directory lives at the web address www.website.com

 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

logo.jpg

index.html images

things.html brad.html

downloads biographies

website.com

Navigating to things.html within the downloads folder would look like

this:

www.website.com/downloads/things.html
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

logo.jpg

index.html images

things.html brad.html

downloads biographies

website.com

Navigating to logo.jpg within the images folder would look like this:

www.website.com/images/logo.jpg
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

File & Folder Naming Conventions

The name of any file or folder you create as part of your

website structure will eventually become part of a URL.

URLs have some restrictions as far as the characters that can

be used within them, so it’s important to be aware of them.
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

These characters are not allowed in URLs

TAB    SPACE    “    <    >    [    ]  

{    }    \    ^    `    |    ~
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

Special characters used in URLs

@    =    &    %    #    /    ?    :    ;
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

Spaces are NOT ALLOWED in URLs

Fake spaces by using the underscore “_”, like so:

my_website
cute_dog
awesome_things
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

URLs are mostly case-sensitive

If you have an image called logo.jpg and you reference it in your
HTML as Logo.jpg the server probably won’t find it.
 BASIC STRUCTURE OF A WEBSITE
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY

The best approach

It’s widely accepted among most professional web developers to
use only lower-case alphanumeric characters and the underscore
when naming files & folders.

So, instead of this:

My Best Website

Use this instead:

mybestwebsite

or:
my_best_website
 CLEAR AS MUD?

BASIC STRUCTURE OF A WEBSITE

THE ULTIMATE WEB DESIGNER • BRAD HUSSEY