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.
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 :
- If you're going to create several HTML files in Notepad, it
will help to first create a simple HTML template with just the
basic required HTML codes. By opening this file instead of starting
from scratch, you can save a lot of time. (You'll learn the basic
HTML codes later in this chapter.)
- Remember, HTML files are simple text, so you can use any program
that can save files in plain text format. This includes Word Pad
and even elaborate word processors such as Microsoft Word and
WordPerfect.
- 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 :
- 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 :
- 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 :
- 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 :
- 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 :
- 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 :
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.
- For a complete list of markup tags available in HTML 3.2,
refer to the Appendix in this book.
- Markup tags are not casesensitive. For example, the body element
tag (which you'll learn about in the next lesson) can be typed
as <BODY>, <body>, or even <BoDy>.
Figure 3.8 :
- 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 :
- 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 :
- 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 :
- When viewed with a Web browser, the text between the <B>
and </B> tags will appear in boldface.
Figure 3.12 :
- 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.
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.
- You might want to use this simple HTML document as a template
for future documents you create. Instead of starting from scratch
each time, you can open this document, replace the title and the
text you used above, and save the file under a new name.
- Before you move on to the next page, take a moment to review
everything you've learned so far. HTML is simple to use, but memorizing
the basics will save you a lot of time and frustration.
Figure 3.13 :
- 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 :
- 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 :
- 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 :
- 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 :
- 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 :
- Save your HTML file in Notepad with a descriptive file name,
such as first.htm.
- 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.
- 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!
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.
- Many of the best HTML editors avail-able on the Internet are
shareware. Shareware is a type of software marketing that allows
you to try the soft-ware before you purchase it. If you decide
that you like the software and want to keep it, you pay the author
directly, according to the documentation supplied with the program.
If you don't like the program, simply delete it and forget it.
Shareware is a great way to find a program that's right for your
tastes.
- Even if your favorite HTML editor doesn't support the latest
HTML tags and features, you can always add them later using Notepad.
Because HTML files are plain text, you can work on your HTML documents
with just about any editor you like.
Figure 3.19 :
- 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 :
- 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.
- 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:
- 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.
- 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/