The Basics Of HTML (Page 2)
- Page 1 - - Page
3 - Page 4 - Page 5
The Basics of HTML
How to use the HEAD Sections <HEAD>
How to use the BODY Sections <BODY>
How to use HEADINGS <HEAD>
How to use the PARAGRAPH tag or <P>
How to use SPECIAL CHARACTER
Now that you've learned how to use markup tags and have
even written your first HTML document, you're ready to dig a little deeper and
learn the basics of the HTML language.
In this chapter, you will uncover the different sections
of an HTML document, such as the head and body, and learn what type of
information goes in each. You'll also discover how to include basic paragraphs
in your document, as well as insert headlines and special characters. So take a
deep breath and get ready to dive right in.
In the previous chapter, you took a brief look at the
<HEAD> section of an HTML document. This section of your HTML document is
relatively small, but it conveys some very important information about your
document to Web browsers and servers.
- The title tag is used extensively by Web search
engines; search engines use the text inside a title tag as a way to
determine the actual contents of your page. So make sure your title is
- Don't type any extra text in between the <HEAD>
and </HEAD> tags. In most cases, the only line you'll insert between
those two tags is your document title.
- Open a new document in Notepad and type <HTML>.
To begin the head section, insert an opening tag into your HTML document by
- The only element required in the head section is the
Title of your document. Your title should be short enough to fit in the
title bar of a typical browser window, but descriptive enough to explain
what your HTML document contains.
- Insert a title tag within the head section by typing <TITLE>,
followed by the actual title of your document. In this example, we'll name
this document HTML: Easier Than We Thought. Go ahead and type in that
title, then close the tag by typing </TITLE> on the same line.
- Close the head section by typing </HEAD>
on the line below the title line.
The body section of your HTML document contains most of
the text, graphics, hypertext links, and other information that will appear on
the page. All of your HTML formatting tags, which describe the content and
appearance of your document, are placed in the body section. These tags will be
explained in detail in the next two chapters.
- You can use a number of enhancements to the
<BODY> tag to control text colors and add background graphics to your
- Sometimes it's easier to type both the <BODY> and
</BODY> tags on separate lines right away, and then fill in the rest
of your HTML document between them.
- Insert the opening body tag by typing <BODY>
on a new line in your document. Make sure that the new body tag follows the
end of the head section of your document.
- Following the <BODY> tag, begin entering the
actual text of your HTML document. For this example, we'll just insert a
simple sentence. Type HTML is much easier than I thought.
- Close the body section of your document by typing </BODY>
on a new line. Make sure that this closing tag appears before the
</HTML> tag at the very bottom of your document.
- Here's what your HTML document looks like so far when
viewed with Netscape. Notice the placement of the document title and the
- At this point, you should save your file in Notepad.
Make sure you save it with an extension of .htm or.html (it doesn't matter
which-all browsers will handle both types). Keep this file open,
because you'll be adding to it in the next lesson.
Headings are used in HTML documents to indicate different
sections. There are six different Heading sizes, which range from very large to
very small (smaller than the default body text). You should use headings
judiciously, keeping them short and concise. The most common use for a heading
is as the first line of a home page. In essence, it becomes a headline for your
- Headings are an excellent way to break up large amounts
of text into smaller, digestible sections. But be careful not to overuse
heading tags, or they'll make your document appear confusing.
- Think of heading tags as headlines. Generally, you'll
only have one big headline for your document and a few smaller subheads to
break the document into smaller sections.
- It's a good idea to repeat the document title as a
Level 1 Heading at the very top of your page. This lets your readers know
the title of the document without having to look at the title bar of their
- Headings can be compared in many ways to outlines. When
structuring your documents with headings, use the same type of heading for
elements of equal importance.
- To insert a heading into your document, place an
opening tag anywhere in the body section. A heading tag follows the format
of <Hx>, where x is a number from 1 to 6, indicating the
size from largest to smallest. To enter a level 1 heading, which is the
largest, type <H1>.
- Any text you enter immediately after the <H1> tag
will be displayed in large bold type by a Web browser.
- Close the heading tag by typing </H1>.
- You can experiment with different sized headings by
changing the number of the heading tag to any value between 1 and 6. The
result will look something like this.
One of the most commonly used tags in HTML is the
paragraph marker, which is used to break apart blocks of text into separate
paragraphs. Any formatting that you perform in Notepad, such as placing carriage
returns, extra spaces, or tab stops, will be ignored by Web browsers. The only
way to indicate separate paragraphs is by using the paragraph marker.
Unfortunately, despite its simplicity, the paragraph marker is also one of the
most misunderstood tags in HTML.
- Rememember that in HTML 3.2, paragraph tags are
considered to be containers of text. That means each paragraph should have a
starting <P> tag and an ending </P> tag. Early versions of HTML
used the <P> tag as a paragraph separator.
- Paragraphs can contain more than plain text. You can
place images, hyperlinks, and many other HTML elements inside paragraphs as
well. You'll learn more about these elements in later chapters.
- The most important thing to remember about the
paragraph tag is that it marks the beginning of a paragraph, not the end.
The original HTML standard used the paragraph marker differently, which has
led to some confusion.
- To insert a new paragraph, type <P>
anywhere in the body section of your HTML document. This will tell the
browser to insert a line space and start a new paragraph.
- Enter the text of the paragraph after this tag.
Remember that any carriage returns or line breaks you enter into Notepad
will be ignored by a Web browser. The browser will continue to treat the
text as part of the current paragraph until it sees another <P> tag.
- You can indicate the end of a paragraph by typing
</P>. However, this tag is optional. The end of the current paragraph
is implied whenever a new paragraph marker is found by a browser.
- Continue entering new paragraphs of text, using the
<P> tag to indicate the beginning of each.
By now, you may have noticed a potential problem with
HTML. All of the markup tags are indicated by left and right angle brackets
(greater-than and less-than symbols). These characters are reserved by HTML for
use with tags. What happens when you want to include one of these characters in
That's a good question, and the problem isn't limited to
just those two symbols. A number of characters can't be typed directly into the
body text HTML, including many foreign language symbols. Fortunately, HTML
provides a solution through the use of character entities. By
using special codes, HTML can display all of the characters in the ISO-Latin-1
(ISO 8859) character set. HTML 3.2 also includes support for many mathematical
- For a complete list of named and numbered character
entities available, see the Appendix.
- One of the most commonly used special characters is the
copyright symbol (©). Placing a copyright statement at the bottom
of your Web document is a good idea and helps to remind your readers that
your material may not be reproduced without your permission.
- Netscape also supports named character entities for the
copyright and registered trademark symbols (© and ®).
However, because these names are not standard HTML, not all browsers support
them. Because the correct display of these symbols is important, it's a much
better idea to use the numbered character entities for these symbols.
- Locate your cursor at the position in the document
where the character entity for the special character is to be placed.A
character entity begins with an ampersand (&), followed by the code, and
ends with a semicolon. To place a double quote in your document, for
example, type ".
- other common character entities for characters that are
reserved for HTML tags are < for the less-than symbol; >
for the greater-than symbol; and & for the ampersand. Note
that these named character entities are case-sensitive.
- You can also use named character entities for many
foreign language symbols. For example, to create the umlaut used in the
German phrase, über alles, you would type in über alles.
- In addition to named character entities, you can use
numbered character entities. HTML uses a subset of the ISO 8859/1 8-bit
character set, and several characters, including the copyright symbol,
trademark symbol, and mathematical symbols, are available when referenced by
their numbered character entity.
- To insert a numerical character entity into HTML, type
an ampersand, followed by a pound sign, the number of the character and a
semicolon. For example, to enter the registered trademark symbol into your
document, you would type ®. You can find a partial list of
numerical character entities in the Appendix.
- Page 1 - - Page
3 - Page 4 - Page 5