Chapter 3

Getting Started with HTML


CONTENTS

By the time you finish reading this book, you'll be an expert HTML author. But along the way, there's a lot to learn. This chapter will introduce you to the basics of HTML-consider it HTML boot camp.

We'll take a quick look at Notepad, which is the only tool you really need to write HTML documents. We'll also go over the fundamentals of a basic HTML document. You'll even learn how to write your first Web page!

It might be tempting to skip ahead and check out the "cool stuff" in the later chapters of this book. But if you spend some time going over the basics, it will serve you well in the long run.

Enough chatter. Let's get going.

How to Use Notepad

HTML isn't really anything more than plain text. For that reason, you don't need any special editors or compilers to create HTML files. In fact, you can create all of your HTML files with the simplest of text editors. There are many specialized HTML editors and converters available, and you may decide to choose one of them based on your particular needs. But for all the HTML examples in this book, we'll use Windows Notepad to illustrate just how simple creating HTML can be.

Figure 3.1 :

Tip Sheet

  1. To open Notepad, click on the Start button in the lower-left corner of your screen. Then choose Programs, followed by Accessories. Click on the Notepad icon.

    Figure 3.2 :

  2. Notepad begins with a blank document. You can begin typing to create a new document. To open an existing text file from disk, pull down the File menu and choose Open.

    Figure 3.3 :

  3. Choose the file name from the Open File dialog box. Notepad's Open File dialog window normally only shows files with the extension .txt. You'll want to change the Files of Type selection to All Files if you're opening or saving an HTML file, which uses the extension .htm or .html.

    Figure 3.4 :

  4. Once you've opened an existing file or begun typing a new one, you can easily edit your text. Notepad has all the basic editing functions of a word processor. For example, you can select blocks of text for cut and paste operations.

    Figure 3.5 :

  5. HTML files usually contain very long lines that will run off the edge of the page. Notepad has a feature called Word Wrap that will format these lines to fit entirely within the window, making them much easier to read. To activate this feature, pull down the Edit menu and select Word Wrap.

    Figure 3.6 :

  6. To save your HTML file, first pull down the File menu. If this is a new file that you started from scratch, choose Save As and then type a file name. Remember to use .htm or .html as the file exten-sion. (Check with your Web server administrator to find out which extension you should use.) If this is an existing file that you opened from Notepad, you can just choose Save from the File menu.

    Figure 3.7 :

How to Use Markup Tags

The use of markup tags is what separates HTML from plain old text. Markup tags are used extensively in HTML, and they provide ways to control text formatting, create links to other documents, and even incorporate images and sounds. In short, markup tags are the key to making HTML pages work.

Tip Sheet

  1. Open a new file in Notepad and type in the words a bold new frontier. In this example, we'll make this text appear in boldface type.

    Figure 3.9 :

  2. HTML markup tags are easy to create. They consist of a left angle bracket, the name of the tag, and a right angle bracket. The left and right angle brackets are also known to some as less-than and greater-than symbols. To start a boldface markup tag, type <B> where you'd like the boldface type to begin.

    Figure 3.10 :

  3. Locate the place where you'd like the boldface to stop. At this point, you need to create an ending tag for the boldface type. An ending tag looks just like a starting tag, except it is preceded by a forward slash character (/). To mark the end of the boldface tag, type </B>.

    Figure 3.11 :

  4. When viewed with a Web browser, the text between the <B> and </B> tags will appear in boldface.

    Figure 3.12 :

  5. Almost every markup tag in HTML requires both a starting tag and an ending tag. One notable exception is the paragraph marker, <P>, which does not require an ending </P> tag.

How to Write a Simple HTML Document

Now that you've learned how to create markup tags, the next step is to learn how to put them together to create a simple HTML Document. The basic HTML document contains two parts: the head and the body. The head section contains important information about the document itself, such as the title. The actual text, images, and markup tags are placed in the body section. You'll learn the specifics of both sections in the next chapter.

Tip Sheet

  1. The first markup tag in every HTML document is the <HTML> tag. This lets Web browsers know that everything in the file is HTML text. Open a new blank document in Notepad. Type <HTML> on one line, and then on the next line, close the tag by typing </HTML>. From now on, everything you type in this document should go between these two tags.

    Figure 3.14 :

  2. The head section comes next. Type <HEAD> on the line after the first HTML tag, followed by </HEAD> on the next line to create the section.

    Figure 3.15 :

  3. One of the key head elements is the title of your HTML document. To start the title tag, start a new line between the <HEAD> and </HEAD> tags and type <TITLE>. Now enter a title for your document, such as My First Web Page. Finally, end the title by typing </TITLE> on the same line.

    Figure 3.16 :

  4. The next section of your HTML document is the body. This section contains most of the elements of your document. To create the body section, type <BODY> on the next line. On the next line after that, type </BODY> to mark the end of the section. Most of your text and HTML codes will be placed between these two tags.

    Figure 3.17 :

  5. Right now, your HTML document is properly formatted, but it doesn't have any content. Fortunately, that's simple enough to change. On a new line between the beginning and ending body tags, begin typing some text, such as This is my first HTML document.

    Figure 3.18 :

  6. Save your HTML file in Notepad with a descriptive file name, such as first.htm.
  7. Using your Web browser, open your new HTML document. Because your file is on your local desktop machine and not on the Web, you'll need to use the Open File option in your Web browser. With Netscape, choose Open File from the File menu, go to the folder where you saved your document, and select it.
  8. There it is-your first HTML document. It may not look like much at this point, but you should give yourself a pat on the back. You're now officially an HTML author. Congratulations!

How to Use Special HTML Editing Software

Throughout this book, you'll learn to write HTML 3.2 documents with the simplest of tools: a text editor. Creating HTML documents with a text editor is the best way to learn the language.

However, before you continue, you should know that there are a number of specialized HTML editing programs available. Some have graphical interfaces, others feature online help. All of them make creating HTML documents much easier. Once you've mastered the HTML basics, you may want to try out one of these programs. In this section, we'll show you what you should look for in an HTML editor.

  1. Make sure the HTML editing software has support for all the HTML 3.2 features. If it doesn't, you won't be able to use all the cool HTML tricks you'll learn in this book.

    Figure 3.20 :

  2. Look for toolbars and other features that make creating HTML easier. To create a markup tag, you can click on a button instead of typing it in.
  3. Many WYSIWYG (What You See Is What You Get) HTML editors are now available. These allow you to see what your HTML document will look like as you're putting it together. This feature will save you the trouble of having to load your page with a Web browser every time you want to see how things are progressing.

    Figure 3.21:

  4. Another feature to look for is HTML syntax checking. Editors with this capability can check your document for HTML errors. Some will even fix the errors for you automatically.
  5. Many of the best HTML editors are available right on the World Wide Web as shareware. That means you can download them and try them out before buying them. There are plenty of places on the Web to find HTML editors. One of the best places to start looking is the HTML Editors section in the Yahoo directory. The full URL is http://www.yahoo.com/Computers_and_Internet /Internet/World_Wide_Web/HTML_Editors/