Vous êtes sur la page 1sur 17

Build a Website from Scratch with HTML & CSS

Brad Hussey
1
Website File & Folder Structure
Its 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_les
etc.
2
Build a Website from Scratch with HTML & CSS
Brad Hussey
Website File & Folder Structure
In the root folder of your site (root is the common
name for the top-level directory of a website) youll
place an HTML document called index.html
index.html is the homepagethe rst page visitors see
when they arrive at your site.
3
Build a Website from Scratch with HTML & CSS
Brad Hussey
Website File & Folder Structure
The index.html lename is set in stone because Unix-
based HTTP servers are congured to look for a
document named index.htm or index.html when no
additional lename is specied in the address bar.
http://website.com ! http://website.com/index.html
Build a Website from Scratch with HTML & CSS
Brad Hussey
4
Website File & Folder Structure
You will also have a folder reserved for your images. This
folder is usually called images or img.
5
Build a Website from Scratch with HTML & CSS
Brad Hussey
Website File & Folder Structure
Lets take a look at the typical le/folder structure of a
simple website.
6
Build a Website from Scratch with HTML & CSS
Brad Hussey
MyWebsite
7
Build a Website from Scratch with HTML & CSS
Brad Hussey
MyWebsite
index.html
8
Build a Website from Scratch with HTML & CSS
Brad Hussey
MyWebsite
index.html images
9
Build a Website from Scratch with HTML & CSS
Brad Hussey
MyWebsite
index.html images
logo.jpg
10
Build a Website from Scratch with HTML & CSS
Brad Hussey
MyWebsite
index.html images
downloads
logo.jpg
11
Build a Website from Scratch with HTML & CSS
Brad Hussey
MyWebsite
index.html images
downloads
logo.jpg
things.html
12
Build a Website from Scratch with HTML & CSS
Brad Hussey
MyWebsite
index.html images
downloads biographies
logo.jpg
things.html
13
Build a Website from Scratch with HTML & CSS
Brad Hussey
MyWebsite
index.html images
downloads biographies
logo.jpg
things.html brad.html
14
Build a Website from Scratch with HTML & CSS
Brad Hussey
website.com
index.html images
downloads biographies
logo.jpg
things.html brad.html
Lets assume this directory lives at the web address
www.website.com
15
Build a Website from Scratch with HTML & CSS
Brad Hussey
website.com
index.html images
downloads biographies
logo.jpg
things.html brad.html
Navigating to things.html within the downloads folder
would look like this:
www.website.com/downloads/things.html
16
Build a Website from Scratch with HTML & CSS
Brad Hussey
website.com
index.html images
downloads biographies
logo.jpg
things.html brad.html
Navigating to logo.jpg within the images folder
would look like this:
www.website.com/images/logo.jpg
17
Build a Website from Scratch with HTML & CSS
Brad Hussey
website.com
index.html images
downloads biographies
logo.jpg
things.html brad.html
etc.

Vous aimerez peut-être aussi