The Pieces and Parts of a Web Page

The Pieces and Parts of a Web Page

You'll learn how to understand and write HTML commands soon. The important point to note right now is that creating a web page is just a matter of typing some text. You can type and save that text with any word processor or text editor you have on hand. You then open the text file with any HTML-compatible software (web browser) to see it as a web page.

Watch Out! I encourage you not to try creating your first HTML page with Microsoft Word, or any other HTML-compatible word processor; most of these programs attempt to rewrite your HTML for you in strange ways, potentially leaving you totally confused. It's fine to use a web development tool such as Microsoft FrontPage or Macromedia Dreamweaver, but be sure to switch the view so that you're editing the raw HTML code.

When you want graphics, sound, animations, video, and interactive programming to appear on a web page, you don't insert them into the text file directly, as you would if you were creating a document in most print-oriented page layout programs, such as Microsoft Word and Adobe Acrobat. Instead, you type HTML text commands telling the web browser where to find the media files. The media files themselves remain separate, even though the web browser makes them look as if they're part of the same document when it displays the page.

For example, the HTML document in Listing 1.1 directly references four separate graphics images. Figure 1.3 shows these four image files being edited in the graphics program Microsoft Photo Editor, which ships standard with Microsoft Office.

Figure 1.3. Although text and graphics appear integrated in Figure 1.1 and Figure 1.2, the graphics files are actually stored, and can be edited, separately.

You could use any graphics program you like to modify or replace these images at any time, even the simple Paint program that comes standard with all versions of Windows. Changing the graphics can make a big difference in how the page looks, even if you don't make any changes to the HTML text file. You can also use the same image on any number of pages while storing only one copy of the graphics file. You'll learn much more about incorporating graphics files into web pages in Part III, "Creative Web Page Design."

Did you Know?. There are two basic approaches to making an HTML page: You can type the text and HTML commands yourself with a text editor, or you can use graphical software that generates the HTML commands for you. You will be able to follow along with this book and learn HTML much more easily if you work with an editor that shows the actual HTML text. Any word processor or text editor you already haveeven the Windows Notepad or Macintosh TextEdit editorwill do nicely. In fact, I encourage you to use a simple text editor starting out, just to keep things simpleword processors like to include formatting information that can be tricky to remove if you aren't careful. For now, I recommend that you do not use a graphical, what-you-see-is-what-you-get (WYSIWYG) web page editor such as Microsoft FrontPage or Macromedia Dreamweaver unless you commit to using a view within the tool that allows you to edit the code directly. You'll likely find it easier and more educational to start out with a simple text editor while you're just learning HTML, and then progress to visual tools after you have a better understanding of what's going on under the hood of your web pages. But as I said, most visual tools also offer a code view that serves as a text editor within the visual tool, which is certainly okay to use.