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 ... 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... 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