ch4
Trochę ciekawostek – na weekend (czego to ludzie nie wymyślą ...
Chapter 4
Understanding the Basics of HTML
CONTENTS
How to Use the Head Section
Tip Sheet
How to Use the Body Section
Tip Sheet
How to Use Headings
Tip Sheet
How to Use the Paragraph Tag
Tip Sheet
How to Use Special Characters
Tip Sheet
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.
How to Use the Head Section
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.
Tip Sheet
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 descriptive.
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.
Figure 4.1 :
Open a new document in Notepad and type <HTML>.
To begin the head section, insert an opening tag into your HTML
document by typing <HEAD>.
Figure 4.2 :
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.
Figure 4.3 :
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.
Figure 4.4 :
Close the head section by typing </HEAD> on the
line below the title line.
Figure 4.5 :
How to Use the Body Section
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.
Tip Sheet
You can use a number of enhancements to the <BODY> tag
to control text colors and add background graphics to your HTML
document. You'll learn these cool tricks in Chapter 9 "Advanced
Graphics Techniques."
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.
Figure 4.6 :
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.
Figure 4.7 :
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.
Figure 4.8 :
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.
Figure 4.9 :
Here's what your HTML document looks like so far when viewed
with Netscape. Notice the placement of the document title and
the body text.
Figure 4.10 :
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.
How to Use Headings
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 document.
Tip Sheet
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 browsers.
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.
Figure 4.11 :
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>.
Figure 4.12 :
Any text you enter immediately after the <H1> tag will
be displayed in large bold type by a Web browser.
Figure 4.13 :
Close the heading tag by typing </H1>.
Figure 4.14 :
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.
How to Use the Paragraph Tag
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.
Tip Sheet
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.
Figure 4.15 :
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.
Figure 4.16 :
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.
Figure 4.17 :
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.
Figure 4.18 :
Continue entering new paragraphs of text, using the <P>
tag to indicate the beginning of each.
Figure 4.19 :
How to Use Special Characters
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 your text?
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 symbols.
Tip Sheet
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.
Figure 4.20 :
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 ".
Figure 4.21 :
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.
Figure 4.22 :
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.
Figure 4.23 :