File Structure and Character Sets

Organizing your files for this class, and web design in general, is extremely important. Every web page you create will point to other web pages and resources using file paths. If you move files around or rename them, these pointers will break. Broken links are pretty easy to fix, but you'll save yourself a lot of headache in the long run by being organized.

File Naming

URLs (web addresses) are case sensitive, and only understand certain characters.

Allowed Characters:

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 - _ . ~

Reserved Characters (don't use):

! * ' ( ) ; : @ & = + $ , / ? % # [ ]

Accented letters, non-latin symbols, and the reserved characters should always be avoided.

The most conspicuous thing missing from the list of legal characters is spaces. Avoid using spaces in your file and folder names. dashes-and_underscores are a great substitute.

When creating a new web site, your first file should always be index.html. This is the first file a browser looks for when visiting a web site.

Folder Structure

Set up your folder structure for Web I as follows (We'll walk through setting this up initially):

Web 1/
├── assignments/
│   └── assignment-name/
│      ├── offline-files/
│      └── assignment-name/
│         ├── img/
│         └── style/
├── lessons-and-demos/
|   ├── intro-html/
|   └── intro-css/
└── www/
    ├── assignment-name/
    ├── assignment-name/
    └── index.html

Topics will be easy for you to reference later if they're organized into named folders. You can number them if you want.

  • assignments/ - each homework assignment or project gets a folder. These are the folders you'll turn in with each assignment.
  • offline-files/ - if your project includes high resolution images, psd files, or anything else that belongs to the assignment but not on the web pages, keep it separate so it stays offline.
  • lessons-and-demos/ - notes you take during lessons in class, demo files we create together, and demo files you download from the class web site for reference later. It might help to prefix the topic name with a number (e.g. 01-intro-html/) to that they display in order on your computer.
  • www/ - this folder contains only the final version of each product and none of the offline files. You'll copy this onto your server.

Character Sets

All of our HTML files will include a meta tag like this:

<meta charset="UTF-8">

And all of our CSS files will include this line at the top:

@charset "UTF-8";

This is a bit of an aside, and you don't need to know all of the (really boring) details about character sets and text encoding, but I should explain the basic idea since you'll see this a lot.

At their lowest level, computers handle everything in binary (0s and 1s). But humans read in letters and symbols, so we need to translate.

A plain text file, like the ones we're creating, is stored on your hard drive as a long string of bits. The letter a is actually stored as 01100001.

The charset declaration tells the computer to make sure it's using the proper dictionary for translating those bits into human-readable characters we can work with.

UTF-8, or "Unicode" is an international standard created to bring all the world's living languages under one dictionary.

To be completely correct, the "Character Set" is Unicode, and the "Encoding" is UTF-8. Technically they are not exactly the same thing, but for our purposes I'll use the terms interchangeably.

Currently the Unicode standard includes over 110,000 characters, and UTF-8 has room for 1,114,112! That's plenty of dictionary space for symbols, accented letters, emoji, and all other non-latin characters.