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 Page Files orking with Web (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 writ- ing 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 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 sys- tem for your pages, images, and other external files (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 surfing first 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. 44 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 45 Wednesday, July 26, 2006 1:10 PM 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 proces- sor, 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 file as directed on page 46. ✔ Tips Page Creating a New Web ■ 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 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 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 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 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 46 Wednesday, July 26, 2006 1:10 PM 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 file a name, choose a location, and click Save. 46 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 47 Wednesday, July 26, 2006 1:10 PM 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 Web Saving Your 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 dou- ble 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.