WORKING WITH WEB

PAGE FILESHTML5 & CSS Visual Quickstart Guide

Chapter 2

Designing Your Site

• First, take some steps to plan and design

your site

• Figure out why you’re creating the site…what

do you want to convey?

• Think about your audience, and how you can

tailor your content to appeal to this audience.

• Should you add lots of graphics to make it flashy, or is

it more important that the page downloads quickly?

• How many pages will you need?

Designing Your Site, Part 2

• What structure should it have? Should your users

be able to explore it in any direction, or do you

want them to follow a certain path?

• Sketch your site on paper

• Devise a simple, consistent naming system for

your pages, images, and other files

• Don’t overdo the planning!

Creating a New Web Page

• Don’t need any special tools to create a web page; can

use any word processor or text editor

• On Windows: NotePad or WordPad (Notepad++ is better)

• On Mac: TextEdit (TextWrangler is better; BBEdit is even better, but

not free)

• On Linux: pico, nano, gedit, Kedit

• To create a new Web Page:

• Open any text editor or word processor

• Choose File > New to create a new, blank document (if necessary)

• Create the HTML content

• Save your file

Saving Your Web Page

• So browsers and web servers recognize Web page files,

they have the .htm or .html extension

• To save your file:

• Once you’ve created the file, choose File > Save As

• Choose Plain Text or Text Document (or however the program

words it) for the format

• Give the document a name and the .html extension

• Choose the folder in which to save it

• Click Save

About Microsoft Word and Web Pages

•Just Say No

Specifying a Default or “Home” Page

• Web servers have a system for recognizing a default page

in each folder, based on the name of the file

• If your visitors type a URL without a filename, the default

file is used

• To specify a default or “home” page:

• Ask your ISP how such a default page should be named.

• Most servers use index.html; Microsoft servers sometimes use

default.html

• For our purposes, index.html should always be used

Organizing Files

• Create a central folder/directory to hold all the material

that will be available at your Web site

• You may want a separate subfolder for different parts of

your site, such as a subfolder for images

• Use simple, one-word names without symbols or

punctuation for your files and folders

• Web servers don’t deal with spaces in file names the way you

might expect

• Neither do web browsers

• “Images Folder” is a bad directory name

• So is “images folder”

• “images_folder” is okay

• “images” is even better!

Viewing Your Page in a Browser

• Most of the time, you can just double-click the file and it

will open in a web browser

• Sometimes, you might have to right-click and choose a

program to open with

The Inspiration of Others

• To view other designers’ HTML code:

• Open a Web page with any browser

• Choose View > Source (in some browsers, View > Page Source)

• If you want, save the file for further study