HTML and CSS Reference
In-Depth Information
A Web page author can also create a style sheet that takes precedence over the
internal style sheets of browsers. In addition, an author can create multiple style sheets
for different output devices: one for rendering a page on a computer screen, another for
printed output, and another for rendering the page aurally. In each case, the markup of
the document content is the same, but the presentation is determined by the style sheet.
Tools for Creating HTML Documents
Because HTML documents are simple text fi les, you can create them using nothing
more than a basic text editor such as Windows Notepad. Other software programs that
enable you to create documents in different formats, such as Microsoft Word or Adobe
Acrobat, include tools to convert their documents into HTML for quick and easy pub-
lishing on the Web.
If you intend to create a large Web site incorporating dozens of Web pages, you
should invest in specialized Web publishing software to manage all of the code and
extended features of your site. Programs such as Adobe Dreamweaver and Microsoft
Expression Web are among the leaders in this fi eld.
Since this topic is focused on the HTML language itself and not how to work with dif-
ferent software programs, you'll need nothing more than a text editor and a Web browser
to complete the assignments that follow.
Entering Elements and Attributes
Now that you've had a chance to review a brief history of the Web and the role of HTML
in its development, you are ready to write your fi rst HTML document for the J-Prop Shop.
You'll start by studying the rules for entering HTML code.
Introducing HTML Tags
An HTML document is composed of
elements
that represent distinct items in the Web
page, such as a paragraph, the page heading, or even the entire body of the page itself.
Each element is marked within the HTML fi le by one or more
tags
. If an element con-
tains text or another element, it is marked using a
two-sided tag set
in which an
opening
tag
and a
closing tag
enclose the element content. The syntax of a two-sided tag set is
<element>content</element>
where
element
is the name of the element and
content
is the content of the element.
For example, the following code marks a paragraph using a two-sided tag set:
<p>Welcome to the J-Prop Shop.</p>
In this example, the
<p>
tag marks the beginning of the paragraph, the text
Welcome
to the J-Prop Shop.
is the content of the paragraph element, and the
</p>
tag marks the
end of the paragraph. Elements can also contain other elements. For example, in the
code
<p>Welcome to <em>Dave's Devil Sticks</em>.</p>
the paragraph tags enclose both the text of the paragraph and the tag set
<em> ... </em>
, which is used to mark content that should be treated by the browser
as emphasized text. Note that the
<em>
tag set must be completely enclosed, or
nested
,
within the
<p>
tags. It's improper to have tags overlap as in the following code sample:
<p>Welcome to <em>Dave's Devil Sticks.</p></em>
In this example, the closing
</em>
tag is placed
after
the closing
</p>
tag, which is
improper because one element must be completely contained within another.
