W ORKING WITH W EB P AGE F ILESwps.pearsoncustom.com/wps/media/objects/6904/7070222/ISY301_… ·...

43

Working w

ith Web Page Files

W

ORKING

WITH

W

EB

P

AGE

F

ILES

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 Structure

, where I begin to explain the (X)HTML code itself.

2

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

ISB

N: 0

-558

-138

56-X

HTML, XHTML, and CSS: Visual Quickstart Guide, Sixth Edition, by Elizabeth Castro. Copyright © 2007 by Elizabeth Castro.Published by Peachpit Press, a Pearson Company.

Chapter 2

44

Des

igni

ng Y

our

Site

Designing Your SiteAlthough 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

■ 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 (http://www.yahoo.com), Google’s Web directory (http://www.google.com/dirhp) or even your competitors.

■ There are lots of good books on Web design. Some of the authors I recom-mend are Dan Cederholm, Jeffrey Zeldman, Dave Shea, and Steve Krug.

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

HTML6Book Page 44 Wednesday, July 26, 2006 1:10 PM

ISB

N: 0-558-13856-X


Working with Web Page Files

45

Creating a New

Web Page

Find extra tips, the source code for examples, and more at www.cookwood.com

Creating a New Web PageYou 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.

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

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

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

■ 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 pages, and assorted other helpful features. For more details, consult (X)HTML Editors on page 434.

Figure 2.2 Open your text editor or word pro-cessor and choose File > New. (Shown are TextEdit for Macintosh at left and WordPad for Windows on the right.)

Figure 2.3 On a Macintosh, you can use Text-Edit to write the (X)HTML code for your page.

Figure 2.4 This is WordPad, one of the pro-grams Windows users can use to create (X)HTML pages.


ISB

N: 0

-558

-138

56-X


Chapter 2

46

Savi

ng Y

our

Web

Pag

e

Saving Your Web PageWeb 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 formatting that a word processor might other-wise apply.

So that browsers (and servers) recognize Web pages and know to interpret the markup they contain, as well as distinguish them from plain text files that are not Web pages, Web page files also have the .htm or .html extension.

Because of that extension, a Web page’s icon matches the system’s default browser and not 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.

To save your Web page: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.

5. Click Save.

Figure 2.5 An Excel worksheet has the .xlsx extension and is identified with the Excel icon (top). If you double-click it, it is displayed in Excel. A Web page file, no matter the word processor you create it with, has the .htm or .html extension but is identified with the default browser’s icon. If you double-click it, it is displayed with your default browser (not the word processor).

Figure 2.6 Choose File > Save As from your word processor or text editor.

Figure 2.7 In WordPad for Windows, give your file a name with the .htm or .html extension, choose Text Documents next to Save as type, and then click Save.

Figure 2.8 In TextEdit for Macintosh, give your file a name, choose a location, and click Save.

HTML6Book 6 Wednesday, July 26, 2006 1:10 PM

ISB

N: 0-558-13856-X



47

Saving Your Web Page


✔ 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 Web page from a word processing docu-ment without learning HTML and it completely messes up hand-written code (see page 48).

■ 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 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-top (Figure 2.9) and then select the offending extension and eliminate it. For details, see my Web site (see page 26).

■ When you choose a text-only format, your file is usually saved with your sys-tem’s default character encoding. If you 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.

Figure 2.9 On Windows computers, choose Tools > Folder Options to view this dialog box. Click the View tab and scroll down until you see Hide extensions for known file types. Make sure it is unchecked if you want to be able to see a file’s extension (like .html) on the Desktop.

Figure 2.10 Many word processors, like the excellent BBEdit shown, let you choose the encoding for your file, so that you can save symbols and characters from different lan-guages in the same document. BBEdit, as of version 7, automatically saves your file with the same encoding as you will declare in your document a little later on (page 59, to be exact). It’s a lovely feature!


ISB

N: 0

-558

-138

56-X


Chapter 2

48

Abou

t M

icro

soft

Wor

d an

d W

eb P

ages

About Microsoft Word and Web PagesWord can automatically create Web pages from existing documents, often whether you want it to or not. Its commands are particu-larly confusing to Web page designers who create their own markup code—which is probably you if you’re reading this book.

Word’s “Web Page” file type (available in the Save dialog box and in older versions of Word as the Save as Web Page menu com-mand) means “convert the present document into HTML, adding markup where there is formatting, and saving as text-only with the .htm extension”. There are two problems with this command. First, it converts your (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 Text (*.txt) from the Save as type box (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 file with a different encoding. Click Other encoding and then choose the one you want from the list (Figure 2.14). For 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.

Figure 2.11 Don’t choose Word’s Web Page option next to Save as type! (And don’t choose Save as Web Page from the File menu!) It’s for converting regular Word documents into Web pages and will mess up hand-coded markup.

Figure 2.12 Instead, first choose Plain Text (*.txt) in the Save as type: pop-up menu and then...

Figure 2.13 ...manually type the .html exten-sion. Then click Save.

Figure 2.14 When you save a file in Plain Text (*.txt), Word gives you the option of choosing a different encoding. I recommend UTF-8.


ISB

N: 0-558-13856-X



49

Specifying a Default or “H

ome” Page


Specifying a Default or “Home” PageMost 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 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.

✔ Tips

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

Figure 2.15 Save the file as either index.html or default.htm in order to designate the file as the default page that should be opened in that directory.

Figure 2.16 When the visitor types the path to the directory, but omits the file name itself, the file with the default name is used.


ISB

N: 0

-558

-138

56-X


Chapter 2

50

Edit

ing

Web

Pag

es

Editing Web PagesBecause 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.

To edit Web pages:1. Open your word processor.

2. Choose File > Open.

3. Navigate to the directory that contains the desired file.

4. If you don’t see your file 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 file is ready to edit.

✔ Tips

■ Usually, once you’ve made changes to an already saved document, you can simply choose File > Save to save the changes, 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.17 Some word processors in Windows can’t automatically see (X)HTML files. Choose All Documents if necessary to view files with any extension.

Figure 2.18 Once files with any extension are displayed, you can choose the desired (X)HTML file and click Open.

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, select Open With in the pop-up menu, and then choose the desired text editor.


ISB

N: 0-558-13856-X



51

Organizing Files


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

2. Divide the folder in a way that reflects 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 files.

4. You can create a top-level images folder for images that are common to all areas of your Web site.

✔ Tip

■ Use simple, one-word names without symbols or punctuation for your files 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 file names, consult File Names on page 34.

Figure 2.20 On a Mac, choose New Folder, and then give the folder a name. Then create a sep-arate folder for each section of your site.

Figure 2.21 In Windows, from the desktop or the Windows Explorer, choose File > New > Folder.

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


ISB

N: 0

-558

-138

56-X


Chapter 2

52

View

ing

Your

Pag

e in

a B

row

ser

Viewing Your Page in a BrowserOnce you’ve created a page, you’ll want to see what it looks like in a browser. In fact, since you don’t know which browser your visitors will be using, it’s a good idea to look 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 find it (Figure 2.24).

4. If you’ve clicked Browse in step 3, in the new dialog box that appears, navigate to the folder on your hard disk that contains the desired Web page and click Open (Figure 2.25).

5. Back in the Open dialog box, click OK. The page is displayed in the browser just as it will appear when you actually pub-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.

■ 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 your Web site until you publish it (see page 353).

Figure 2.23 From the desired browser (this is Firefox for Windows), choose File > Open File. In Explorer for Windows, it’s called File > Open. In Explorer for Mac, it’s File > Open File.

Figure 2.24 In Explorer for Windows, you’ll get an intermediary box asking if you want to type the path in by hand. If you don’t (and why would you?), click the Browse button.

Figure 2.25 Choose the file that you want to open and click the Open but-ton (not shown).

Figure 2.26 The page appears in the browser. Check it over well to see if it’s coming out the way you planned.


ISB

N: 0-558-13856-X



53

The Inspiration of Others


The Inspiration of OthersOne of the easiest ways to expand your (X)HTML fluency 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 exter-nal files may be copyrighted. As a general rule, use other designers’ pages for inspira-tion for your (X)HTML, and then create your own content.

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 file for further study.

✔ Tips

■ You can also save the source code by selecting File > Save As or File > Save Page As in most browsers.

■ Most browsers also let you right-click (or Control-click on a Mac) and then choose 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.27 All browsers have a menu com-mand that lets you view a page’s (X)HTML code. The name varies from Page Source (in Firefox, shown) to View Source, to just Source.

Figure 2.28 Most browsers will also let you right-click (Control-click on a Mac) and choose the Source command (however it’s called) from the pop-up menu that appears. This is Explorer for Windows.

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


ISB

N: 0

-558

-138

56-X



ISB

N: 0-558-13856-X


W ORKING WITH W EB P AGE F ILESwps.pearsoncustom.com/wps/media/objects/6904/7070222/ISY301_… ·...

Documents

Transcript of W ORKING WITH W EB P AGE F ILESwps.pearsoncustom.com/wps/media/objects/6904/7070222/ISY301_… ·...