Slide 1

DEALING WITH WEBSITE FILES

• A website consists of many files: text content, code, stylesheets, media content, and so on.
• When you're building a website, you need to assemble these files into a sensible structure on your local computer.
• Dealing with files discusses some issues you should be aware of so you can set up a sensible file structure for your website.

Slide 2

WHERE SHOULD YOUR WEBSITE FILES SAVED ON YOUR COMPUTER

• When you are working on a website locally on your computer, you should keep all the related files in a single folder that mirrors the published website's file structure on the server.
• This folder can live anywhere you like, but you should put it somewhere where you can easily find it, maybe on your Desktop, in your Home folder, or at the root of your hard drive.
• Choose a place to store your website projects. Inside your chosen place, create a new folder called websiteprojects (or similar). This is where all your website projects will live.
• Inside this first folder, create another folder to store your first website in. Call it demowebsite (or something more imaginative).

Slide 3

AN ASIDE ON CASING AND SPACING

Naming your folders and file should follow some patterns:

• Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at demowebsite/Image/MyImage.jpg and then in a different file you try to invoke the image as demo website/Image/myimage.jpg, it may not work.
• Browsers, web servers, and programming languages do not handle spaces consistently. For example, if you use spaces in your filename, some systems may treat the filename as two filenames. Some servers will replace the areas in your filenames with "%20" (the character code for spaces in URIs), resulting in all your links being broken.

Slide 4

WHAT STRUCTURE SHOULD YOUR WEBSITE HAVE

Next, let's look at what structure our demowebsite should have. The most common things we'll have on any website project we create are an index HTML file and folders to contain images, style files, and script files. Let's create these now:

1. index.html: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site.
2. images folder: This folder will contain all the images that you use on your site.
3. styles folder: This folder will contain the CSS code used to style your content (for example, setting text and background colors).
4. scripts folder: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked).