This chapter describes the basic syntax and structure of HTML documents. This is intended as a starting point for writing your own HTML documents.
HyperText Markup Language (HTML) is a set of tags that mark how text is organized and displayed in web browsers such as Netscape Navigator. HTML documents are files containing text and tags written for the HyperText Transport Protocol (HTTP)--the protocol for the World Wide Web.
HTML tags define both the structure of a web page and the way the marked text displays in a browser such as Netscape Navigator. Tags mark the start and the end of text. For example, you can use the H1 tag to mark text as a first-level heading:
When a web browser such as Netscape Navigator displays that text, it appears in a large font, as shown in the following figure:
Because there are many different web browsers for various platforms, HTML documents appear different depending on the browser you use. Even if all of your readers use Netscape Navigator, they all might not see your HTML page in the same way because they can configure Netscape Navigator to use different fonts and to override your color settings. The following figure shows how the same web page can have a different appearance when viewed in Netscape Navigator with two different configurations.
Netscape Navigator lets you view the HTML source of any web page. While viewing a page, choose View|Document Source from the menu. The Navigator then displays the HTML tags and text.
While you're learning to create HTML documents, you might find it helpful to view the source of several documents to see how other authors marked their text.
Chapter 6 lists all of the HTML tags that Netscape Navigator supports.
When you write HTML documents, you use tags enclosed in angle brackets to mark the beginning and ending of text elements. Ending tags differ from beginning tags only in that they use a slash before the tag name. For example, to specify a first-level heading, you type <H1> at the beginning of the heading text and </H1> at the end, as shown here:
<H1>This is a heading</H1>
Tags can appear on the same line as the embedded text or they can appear on separate lines. The line
<H1> HTML is fun to write! </H1>
is the same as
HTML is fun to write!
Some tags have attributes that modify the tag. For example, the FONT tag has an attribute that modifies the size of the font. Tag attributes appear inside the angle brackets for the beginning tag:
This text appears in a larger font.
Tags are case-insensitive: <HEAD> is the same as <head> and <Head>, but most authors use all uppercase letters to make tags stand out from the text. All examples in this book use uppercase letters for tags and tag attributes.
All HTML files have the same basic structure: each document has a header and either a body or a frameset section. Most web pages use the body section. See Chapter 3 for information on using the FRAMESET tag. The following HTML example shows the basic structure of a document:
<HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML>
The HEAD section of an HTML document contains a title and any META tags that define the content of the document. The BODY section of the document contains the HTML tags and text that users see when they go to your web page.
The following HTML example is a sample web page. The figure shows the basic page in Netscape Navigator.
The HTML source for Figure 1.2
<HTML> <HEAD> <TITLE>My first HTML document!</TITLE> </HEAD> <BODY> <H1>Keep headings short and simple</H1> You can do basic formatting in HTML documents. <H2>Text formatting</H2> <P>You can <EM>emphasize</EM> text. Most browsers show emphasis with italics.</P> <P>You can do <STRONG>strong emphasis</STRONG>, which is bold in Netscape Navigator. You can list items two ways: ordered and unordered.</P> <H3>Ordered lists</H3> Ordered lists typically use numbers to show a sequence in the items. <OL> <LI>You use OL to start an ordered list. <LI>You enclose the list items with the LI tag. <LI>Netscape Navigator doesn't require a closing LI tag. </OL> <H3>Unordered lists</H3> Unordered lists typically use bullets or hyphens to show that the items have no order and are equal in importance. <UL> <LI>Instead of OL you use UL for the tag. <LI>You use the same LI for items in the list. </UL> <HR> Creating HTML is easy once you know the types of tags you can use and how they usually appear to the user. </BODY> </HTML>
A simple Web page using various HTML tags
All HTML tags are listed in Chapter 6. This section contains several tables that organize many of the HTML tags into groups based on the tag's function.
Character tags format characters or words in your document.
There are several ways you can create lists. The following table lists the tags that create lists. To create an item within a list, you use the LI tag with all of the lists except the DL list, which uses DD and DT tags.
Tables are a handy way to display information in your web pages.
Forms let you get information from your readers. See Chapter 4, "Forms" for more detailed information on forms.
Frames let you display more than one HTML page in a single Navigator window. See Chapter 3, "Advanced HTML topics" for more detailed information on frames.