File Structure and Character Sets

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/
│       ├── img/
│       └── style/
├── lessons-and-demos/
│   ├── intro-html/
│   └── intro-css/
├── offline-files/
└── 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/) so 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 136,000 characters, but 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.