41 basic structure kho tài liệu training

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

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