Scribd Logo
Upload

Welcome to Scribd!

  • 30 views

    Basic Structure of A Website: The Ultimate Web Designer - Brad Hussey

    Uploaded by

    Benvindo Xavier
    The document discusses the basic file and folder structure for organizing a website. It recommends placing files like index.html in the root folder and images, downloads, etc in their own subfolders. Index.html is the homepage file that servers automatically display. Folder and file names should only use lowercase letters, numbers and underscores to avoid issues with special characters in URLs. Maintaining a clear file structure helps ensure files can be easily linked and found.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Basic Structure of A Website: The Ultimate Web Designer - Brad Hussey

    Uploaded by

    Benvindo Xavier
    30 views23 pages
    The document discusses the basic file and folder structure for organizing a website. It recommends placing files like index.html in the root folder and images, downloads, etc in their own subfolders. Index.html is the homepage file that servers automatically display. Folder and file names should only use lowercase letters, numbers and underscores to avoid issues with special characters in URLs. Maintaining a clear file structure helps ensure files can be easily linked and found.

    Original Description:

    HTML_INTRO

    Original Title

    HTML_INTRO

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses the basic file and folder structure for organizing a website. It recommends placing files like index.html in the root folder and images, downloads, etc in their own subfolders. Index.html is the homepage file that servers automatically display. Folder and file names should only use lowercase letters, numbers and underscores to avoid issues with special characters in URLs. Maintaining a clear file structure helps ensure files can be easily linked and found.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    30 views23 pages

    Basic Structure of A Website: The Ultimate Web Designer - Brad Hussey

    Uploaded by

    Benvindo Xavier
    The document discusses the basic file and folder structure for organizing a website. It recommends placing files like index.html in the root folder and images, downloads, etc in their own subfolders. Index.html is the homepage file that servers automatically display. Folder and file names should only use lowercase letters, numbers and underscores to avoid issues with special characters in URLs. Maintaining a clear file structure helps ensure files can be easily linked and found.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 23

    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

    You might also like