1. WORKING WITH WEB
PAGE FILES
HTML5 & CSS Visual Quickstart Guide
Chapter 2

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?

3. 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!

4. 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

5. 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

6. About Microsoft Word and Web Pages
•Just Say No

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

8. 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!

9. 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

10. 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