Working with Web Page Files

files Page 43 Thursday, July 27, 2006 1:45 PM

WORKING WITH 2 WEB PAGE FILES 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 ahead to Chapter 3, Basic (X)HTML W Structure, where I begin to explain the orking with Web Page Files (X)HTML code itself.

ISBN: 0-558-13856-X 43

HTML, XHTML, and CSS: Visual Quickstart Guide, Sixth Edition, by Elizabeth Castro. Copyright © 2007 by Elizabeth Castro. Published by Peachpit Press, a Pearson Company. HTML6Book Page 44 Wednesday, July 26, 2006 1:10 PM

Chapter 2

Designing Your Site Although you can just jump in and start writing Web pages right away, it’s a good idea to ﬁrst think about and design your site. That way, you’ll give yourself direction and you’ll need to reorganize less 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 ﬁles (see page 34).

✔ Tips Designing Your Site Designing Your ■ 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 surﬁng ﬁrst to get an idea of the possibilities. You might start with Yahoo Figure 2.1 Sketching out your site and thinking (http://www.yahoo.com), Google’s Web about what it might contain can help you directory (http://www.google.com/dirhp) decide what sort of structure it needs: a cen- or even your competitors. tralized, hierarchical model (top), a circular model that leads the visitor from one page to ■ There are lots of good books on Web the next (above), or some other system. design. Some of the authors I recom- ISBN: 0-558-13856-X mend are Dan Cederholm, Jeffrey Zeldman, Dave Shea, and Steve Krug.

Working with Web Page Files

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

Figure 2.2 Open your text editor or word pro- 2. Choose File > New to create a new, blank cessor and choose File > New. (Shown are document (Figure 2.2). TextEdit for Macintosh at left and WordPad for Windows on the right.) 3. Create the (X)HTML content as explained in the rest of this book, starting on page 55.

4. Be sure to save your ﬁle as directed on page 46.

✔ Tips Creating a New Web Page ■ If you like Microsoft Word, you can use it for writing (X)HTML too. Just be sure to save the ﬁle correctly (as text-only and with the .htm or .html extension). For more details, see pages 46–48. Figure 2.3 On a Macintosh, you can use Text- ■ Edit to write the (X)HTML code for your page. If you use 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 ﬁle. 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 TextEdit or WordPad, but if you want to get fancy, try BBEdit for Mac or HTML-Kit for Windows. Both display (X)HTML tags in color, and have powerful search and replace functions, syntax checkers for debugging problematic Figure 2.4 This is WordPad, one of the pro- pages, and assorted other helpful features. grams Windows users can use to create For more details, consult (X)HTML (X)HTML pages. Editors on page 434.

ISBN: 0-558-13856-X Find extra tips, the source code for examples, and more at www.cookwood.com 45

Chapter 2

Saving Your Web Page Web pages are created with a text editor or word processor but are meant to be viewed with multiple browsers on multiple platforms. To be accessible to all of these different pro- grams, Web pages are saved in a universal “text-only” format—without any proprietary Figure 2.5 An Excel worksheet has the .xlsx formatting that a word processor might other- extension and is identified with the Excel icon (top). If you double-click it, it is displayed in wise apply. Excel. A Web page file, no matter the word processor you create it with, has the .htm or So that browsers (and servers) recognize Web .html extension but is identified with the pages and know to interpret the markup they default browser’s icon. If you double-click it, it contain, as well as distinguish them from is displayed with your default browser (not the word processor). plain text files that are not Web pages, Web page files also have the .htm or .html extension. Figure 2.6 Choose File > Save As from Because of that extension, a Web page’s icon your word processor matches the system’s default browser and not or text editor. the word processor with which the file was written. Indeed, when you double-click a Web page file, it is opened in a browser, not a word processor. This is great for Web surf- ers, but it adds an extra step to editing Web pages (see page 50). In short, when you save your Web page, you must save it in text-only format with either the .htm or .html extension. Figure 2.7 In WordPad for Windows, give your file a name with the .htm or .html extension, To save your Web page: choose Text Documents next to Save as type, and then click Save. Saving Your Web Page Web Saving Your 1. Once you’ve created your Web page, choose File > Save As from your word processor (Figure 2.6).

2. In the dialog box that appears, choose Plain Text or Text Document (or however your program words it) for the format.

3. Give the document the .htm or .html extension. (This is very important!)

4. Choose the folder in which to save the Web page. ISBN: 0-558-13856-X

5. Click Save. Figure 2.8 In TextEdit for Macintosh, give your ﬁle a name, choose a location, and click Save.

Working with Web Page Files

✔ Tips ■ It doesn’t matter whether you use .htm or .html (unless you’re still on Windows 3.1! In that case, use .htm.) However, consis- tency will make it easier to remember your URLs later. ■ Some word processors (like Microsoft Word and Corel WordPerfect to name a few) offer a “Save as HTML” or “Save as Web page” option. Don’t touch it! That option is for folks who want to create a Figure 2.9 On Windows computers, choose Web page from a word processing docu- Tools > Folder Options to view this dialog box. ment without learning HTML and it Click the View tab and scroll down until you see Hide extensions for known file types. Make completely messes up hand-written code sure it is unchecked if you want to be able to (see page 48). see a file’s extension (like .html) on the Desktop. ■ Some text editors on Windows annoy- ingly add their default extension to your file name, even if you’ve already speci- fied .htm or .html. Your file, now named Saving Your Web Page webpage.html.txt won’t be properly viewed in a browser. To make matters worse, Windows often hides extensions on the Desktop so that the problem is not completely obvious, especially to the uninitiated. There are two solutions. The first is to enclose your file name in double quotes when you save your document. This should keep the extra extension from being added. Next, you can display the extensions on the Desk- Figure 2.10 Many word processors, like the top (Figure 2.9) and then select the excellent BBEdit shown, let you choose the offending extension and eliminate it. For encoding for your file, so that you can save symbols and characters from different lan- details, see my Web site (see page 26). guages in the same document. BBEdit, as of version 7, automatically saves your file with ■ When you choose a text-only format, the same encoding as you will declare in your your file is usually saved with your sys- document a little later on (page 59, to be tem’s default character encoding. If you exact). It’s a lovely feature! want to create Web pages in another encoding (perhaps to include special symbols or text in other languages), you’ll have to use a text editor that lets you choose the encoding (Figure 2.10). For more details, see Chapter 21, Symbols and Non-English Characters.

ISBN: 0-558-13856-X Find extra tips, the source code for examples, and more at www.cookwood.com 47

Chapter 2

About Microsoft Word and Web Pages Word can automatically create Web pages from existing documents, often whether you want it to or not. Its commands are particu- Figure 2.11 Don’t choose Word’s Web Page larly confusing to Web page designers who option next to Save as type! (And don’t choose Save as Web Page from the File menu!) It’s for create their own markup code—which is converting regular Word documents into Web probably you if you’re reading this book. pages and will mess up hand-coded markup. Word’s “Web Page” ﬁle type (available in the Save dialog box and in older versions of Word as the Save as Web Page menu command) means “convert the present document into HTML, adding markup where there is formatting, and saving as text-only with the Figure 2.12 Instead, ﬁrst choose Plain Text .htm extension”. There are two problems (*.txt) in the Save as type: pop-up menu and with this command. First, it converts your then... (X)HTML tags into plain text, using special symbols. Second, Microsoft adds an incredi- ble amount of proprietary code. If you’re writing your own markup with this book, you don’t want to use this option. Instead, choose File > Save As, choose Plain Figure 2.13 ...manually type the .html exten- Text (*.txt) from the Save as type box sion. Then click Save. (Figure 2.12), and then change the default .txt extension to .htm or .html (Figure 2.13).

✔ Tips ■ When you choose Plain Text (*.txt), Word gives you the option of saving your ﬁle with a different encoding. Click Other encoding and then choose the one you Figure 2.14 When you save a ﬁle in Plain Text

About Microsoft Word and Web Pages and Web About Microsoft Word (*.txt), Word gives you the option of choosing a want from the list (Figure 2.14). For different encoding. I recommend UTF-8. more details, consult Saving Your Page with the Proper Encoding on page 333. ■ Other versions of Word may have slightly different wording or dialog boxes. ISBN: 0-558-13856-X

Working with Web Page Files

Specifying a Default or “Home” Page Figure 2.15 Save the file as either index.html or default.htm in order to designate the file as the Most servers have a system for recognizing a default page that should be opened in that default page in each folder, based on the directory. name of the file. If your visitors type a URL with a directory but don’t specify a file name, the default file is used (Figure 2.16). To specify a default or “home” page: 1. First, ask your ISP how such a default page should be named. On most servers, use index.html. (Microsoft servers gener- ally use default.htm.)

2. Next, when you save your file (see page 46), use the proper name. Specifying a Default or “Home” Page Figure 2.16 When the visitor types the path to the directory, but omits the file name itself, the ✔ Tips file with the default name is used. ■ You can create a default page for any and every directory on your site. ■ The default page that you create at the top level of your Web directory is your site’s home page, the one that will appear when your visitors type your domain with no additional path information: http://www.yourdomain.com ■ If you don’t have such a default page in each directory, most servers will show a list of the directory’s contents (which you may or may not want to reveal to your visitors). To keep those prying eyes out, create a default page for every directory on your site.

ISBN: 0-558-13856-X Find extra tips, the source code for examples, and more at www.cookwood.com 49

Chapter 2

Editing Web Pages Because Web pages are most often viewed with a Web browser, when you double-click them on the Desktop, the default browser cheerily opens up and displays them. If you want to edit the Web page, you’ll have to manually open it in your word processor. Figure 2.17 Some word processors in Windows can’t automatically see (X)HTML ﬁles. Choose To edit Web pages: All Documents if necessary to view ﬁles with any extension. 1. Open your word processor.

2. Choose File > Open.

3. Navigate to the directory that contains the desired ﬁle.

4. If you don’t see your ﬁle listed, choose the All Documents option in the Files of type box (Figures 2.17 and 2.18). The name and location may vary slightly from program to program and platform to platform.

5. Then click Open. Your ﬁle is ready to edit.

Figure 2.18 Once ﬁles with any extension are ✔ Tips displayed, you can choose the desired (X)HTML ﬁle and click Open. ■ Usually, once you’ve made changes to an already saved document, you can simply choose File > Save to save the changes, Editing Web Pages Editing Web without having to worry about the format as described on page 46. ■ Right-click the Web page’s icon in Win- dows and then choose Edit to open the Web page in the default HTML editor or Open With and then the program of your choice (Figure 2.19). On a Mac, Control- click the icon in the Finder, select Open With in the pop-up menu, and then choose the desired text editor. Figure 2.19 In Windows, you can also right- click the document’s icon and then choose Edit or Open With in the pop-up menu that appears. On a Mac, Control-click the icon, ISBN: 0-558-13856-X select Open With in the pop-up menu, and then choose the desired text editor.

Working with Web Page Files

Organizing Files Before you have too many files, it’s a good idea to figure out where you’re going to put them. To organize your files: 1. Create a central folder or directory to hold all the material that will be available at your Web site. On the Mac, choose File > New Folder in the Finder (Figure 2.20). In Windows, from the Desktop, choose File > New > Folder (Figure 2.21). Give the folder a name.

Figure 2.20 On a Mac, choose New Folder, and 2. Divide the folder in a way that reﬂects then give the folder a name. Then create a separate folder for each section of your site. the organization of your Web site (Figures 2.20 and 2.22).

3. You may decide to create a separate folder for each section of your site, along with individual subfolders for images and other external ﬁles. Organizing Files 4. You can create a top-level images folder for images that are common to all areas of your Web site.

Figure 2.21 In Windows, from the desktop or the Windows Explorer, choose File > New > ✔ Tip Folder. ■ Use simple, one-word names without symbols or punctuation for your ﬁles and folders. Use all lowercase letters so that your URLs are easier to type and thus your pages are easier to reach. For more details on how to create good ﬁle names, consult File Names on page 34.

Figure 2.22 You can divide the folder into additional folders if needed.

ISBN: 0-558-13856-X Find extra tips, the source code for examples, and more at www.cookwood.com 51

Chapter 2

Figure 2.23 From the Viewing Your Page in a Browser desired browser (this is Firefox for Windows), Once you’ve created a page, you’ll want to choose File > Open File. see what it looks like in a browser. In fact, In Explorer for Windows, since you don’t know which browser your it’s called File > Open. In Explorer for Mac, it’s visitors will be using, it’s a good idea to look File > Open File. at the page in several browsers. To look at your page in a browser: 1. Open a browser.

2. Choose File > Open, Open File, or Open Page (just not Open Location), depending on the browser (Figure 2.23).

3. In the dialog box that appears, either type the location of the page on your hard disk, or click Browse to ﬁnd it Figure 2.24 In Explorer for Windows, you’ll get (Figure 2.24). an intermediary box asking if you want to type the path in by hand. If you don’t (and 4. If you’ve clicked Browse in step 3, in the why would you?), click the Browse button. new dialog box that appears, navigate to the folder on your hard disk that contains Figure 2.25 Choose the the desired Web page and click Open ﬁle that you (Figure 2.25). want to open and 5. Back in the Open dialog box, click OK. click the Open but- The page is displayed in the browser just ton (not as it will appear when you actually pub- shown). lish it on the server (see page 353).

✔ Tips ■ You can (usually) also double-click a Web page’s icon to view it in a browser. Viewing Your Page in a Browser Viewing Your ■ If your Web page does not appear in the Open dialog box, make sure that you have saved it as text-only and given it the .htm or .html extension (see page 46). ■ You don’t have to close the document in the text editor before you view it with a browser. You do have to save it. ■ Your visitors won’t be able to view ISBN: 0-558-13856-X Figure 2.26 The page appears in the browser. your Web site until you publish it (see Check it over well to see if it’s coming out the page 353). way you planned.

Working with Web Page Files

The Inspiration of Others One of the easiest ways to expand your (X)HTML ﬂuency is by looking at how other page designers have created their pages. Luckily, (X)HTML code is easy to view and learn from. However, text content, graphics, sounds, video, style sheets, and other external ﬁles may be copyrighted. As a general rule, use other designers’ pages for inspira- Figure 2.27 All browsers have a menu command that lets you view a page’s (X)HTML tion for your (X)HTML, and then create your code. The name varies from Page Source (in own content. Firefox, shown) to View Source, to just Source. To view other designers’ (X)HTML code: 1. Open a Web page with any browser.

2. Choose View > Source (in some browsers, it’s View > Page Source) (Figure 2.27). The (X)HTML code will be displayed (Figure 2.29).

3. If desired, save the ﬁle for further study. The Inspiration of Others

✔ Tips ■ You can also save the source code by selecting File > Save As or File > Save Page As in most browsers. Figure 2.28 Most browsers will also let you right-click (Control-click on a Mac) and ■ choose the Source command (however it’s Most browsers also let you right-click (or called) from the pop-up menu that appears. Control-click on a Mac) and then choose This is Explorer for Windows. a source command (of varying wording) from the pop-up menu (Figure 2.28). ■ For viewing CSS, see The Inspiration of Others: CSS on page 136.

Figure 2.29 Some browsers display the code in a speciﬁed text editor. Others let you choose between the default window in the browser (as shown) or your preferred text editor.

ISBN: 0-558-13856-X Find extra tips, the source code for examples, and more at www.cookwood.com 53