Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

Working with Web Page Files

  • Print
  • + Share This
It's important to know how to create the files in which you'll use code before you start writing (X)HTML elements and attributes. Elizabeth Castro explains how to create, edit, and save Web page files in this sample chapter.
This chapter is from the book

Before you start writing (X)HTML elements and attributes, it's important to know how to create the files in which you'll use such code. In this chapter, you'll learn how to create, edit, and save Web page files. I'll also touch on some design and organizational considerations.

If you can't stand waiting any longer, and already know how to create the actual files, skip on ahead to Chapter 3, Basic (X)HTML Structure, where I begin to explain the (X)HTML code itself.

Designing Your Site

Although you can just jump in and start writing Web pages right away, it's a good idea to first think about and design your site. That way, you'll give yourself direction and save reorganizing later.

To design your site:

  1. Figure out why you're creating this site. What do you want to convey?

  2. Think about your audience. How can you tailor your content to appeal to this audience? For example, should you add lots of graphics or is it more important that your page download quickly?

  3. How many pages will you need? What sort of structure would you like it to have? Do you want visitors to go through your site in a particular direction, or do you want to make it easy for them to explore in any direction?

  4. Sketch out your site on paper.

  5. Devise a simple, consistent naming system for your pages, images, and other external files (see page 32).

Figure 01Figure 2.1 Sketching out your site and thinking about what it might contain can help you decide what sort of structure it needs: a centralized, hierarchical model (top), a circular model that leads the visitor from one page to the next (above), or some other system.


  • Don't overdo the design phase of your site. At some point, you've got to dig in and start writing.

  • If you're not very familiar with the Web, do some surfing first to get an idea of the possibilities. You might start with Yahoo ( or Google ( or even your competitors.

  • There are lots of good books on Web design. You might ask people for recommendations on my Question and Answer board (see page 24).

Creating a New Web Page

You don't need any special tools to create a Web page. You can use any word processor, even WordPad or SimpleText, which are included with the basic Windows and Macintosh system software.

To create a new Web page:

  1. Open any text editor or word processor.

  2. Choose File > New to create a new, blank document (Figure 2.2).

    Figure 02Figure 2.2 Open your text editor or word processor and choose File > New. (Shown are Simple-Text for Macintosh at far left and WordPad for Windows.)

  3. Create the (X)HTML content as explained in the rest of this book, starting on page 59.

  4. Be sure to save your file as directed on page 50.


  • If you like Microsoft Word, you can use it for writing (X)HTML too. Just be sure to save the file correctly (as Text Only and with the .htm or .html extension). For more details, see pages 50–52.

  • If you use FrontPage, Dreamweaver, or some other Web page editor to start your pages, you can still tweak the (X)HTML code by hand. Just choose File > Open from your text editor of choice and open the file. Then use the rest of this book to add your own (X)HTML tags and create the (X)HTML page you want.

  • You can use SimpleText or WordPad, but if you want to get fancy, try BBEdit for Mac or HomeSite for Windows. Both display (X)HTML tags in color, and have powerful search and replace functions, syntax checkers for debugging problematic pages, and assorted other helpful features. For more details, consult (X)HTML Editors on page 462.

    Figure 03Figure 2.3 This is SimpleText's document window where you'll write the (X)HTML code for your Web page.

    Figure 04Figure 2.4 This is WordPad's document window where Windows users can create (X)HTML pages.

  • + Share This
  • 🔖 Save To Your Account