JavaScript Editor Source code editor     Website development 

Main Page

Previous Section Next Section

Understanding HTML

HTML is the payload that is transmitted through the processes of HTTP. As you learned earlier in this hour, an HTML document includes text, formatting codes, references to other files, and links. When you inspect the contents of a basic HTML document using a text processing application such as Windows Notepad or Unix's vi, you'll find that the document is actually an ordinary text file. The file contains any text that will appear with the page, and it also includes a number of special HTML codes called tags. Tags are instructions to the browser. They do not appear as written on the Web page, but they affect the way the data appears and the way the page behaves. The HTML tags supply all the formatting, file references, and links associated with a Web page. Some important HTML tags are shown in Table 17.2.

Table 17.2. Some Important HTML Tags




Marks beginning and end of HTML content in the file.


Marks the beginning and end of the header section.


Marks the beginning and end of the body section, which describes the text that will appear in the browser window.

<H1>, <H2>, <H3>,<H4>, <H5>, and <H6>

Mark the beginning and end of a heading. Each heading tag represents a different heading level. <H1> is the highest level.


Marks the beginning and end of a section of bold text.


Marks the beginning and end of a section of underlined text.


Marks the beginning and end of a section of italicized text.


Marks the beginning and end of a section with special font characteristics. See Table 17.3 for some of the available font attributes.


Marks the beginning and end of a hypertext link. The link destination URL appears inside the first <A> tag as a value for the HREF attribute (as described later in this section).


Specifies an image file that should appear in the text. The file URL appears in the tag as a value for the SRC attribute. (You'll learn more about attributes later in this section.)

Of course, there is much more to HTML than a single table can convey. Many tags apply to a block of text. If so, the tag appears at the beginning and the end of the block. The tag at the end of the block includes the slash character (/) to signify that it is an end tag. In other words, the callout for an H1 heading would be tagged as follows:

<H1>Dewey Defeats Truman</H1>

An HTML document is supposed to begin with a <!DOCTYPE> declaration. The !DOCTYPE defines the version of HTML used for the document. For HTML 4.0, the !DOCTYPE command is


(Web pages that use special browser extensions might specify a different document type.)

Most browsers don't require the !DOCTYPE statement, and many HTML tutorials don't even discuss the !DOCTYPE.

Following the !DOCTYPE statement is the <HTML> tag. The rest of the document is enclosed between the <HTML> tag and a corresponding </HTML> tag at the end of the file. Within the beginning and ending <HTML> tags, the document is divided into the following two sections:

  • The head (enclosed between the <HEAD> and </HEAD> tags) contains information about the document. The information in the head does not appear on the Web page, although the <TITLE> tag specifies a title that will appear in the title bar of the browser window. The <TITLE> is a required element. Other elements of the <HEAD> section are optional, such as the <STYLE> tag for information on document styles. See an HTML text for more on <STYLE>.

  • The body (enclosed between the <BODY> and </BODY> tags is the text that actually appears on the Web page and any HTML tags related to that text.

A very simple HTML document is as follows:

<TITLE> Ooh This is Easy </TITLE>

If you save the preceding HTML to a text file and then open the file with a Web browser, Easy! will appear in the browser window. The title bar will include the title Ooh This is Easy (see Figure 17.4).

Figure 17.4. A very easy Web page example.


You can spice up the page with additional text and formatting in the body section. The following example adds the <H1> and <H2> tags for headings, the <P> tag for a paragraph, the <B> tag for bold, the <I> tag for italics, and the <FONT> tag for font information. Note that the <FONT> tag includes an attribute. Attributes are parameters enclosed within the tag that provide additional information. See Table 17.3 for other font attributes.

<TITLE> Ooh This is Easy </TITLE>
<H1>The Easy and Hard of HTML</H1>
<P><U>Webster's Dictionary</U> defines HTML as <I>"a small snail found
originally in the Archipelago of Parakeets." I borrow from this theme in
my consideration of HTML.</P><H2>HTML is Easy</H2>
<P>HTML is easy to learn and use because everyone reacts to it
energetically. You can walk into a bar and start speaking HTML, and the
man beside you will <B>happily</B> tell you his many accomplishments.</P>
<H2>HTML is Hard</H2>
<P>HTML is hard because the options are bewildering. You never know when
to use <FONT SIZE=1>small text</FONT> and when to use <FONT SIZE=7>big

The preceding example appears in the browser as shown in Figure 17.5.

Figure 17.5. Expanding the easy example.


Table 17.3. HTML <FONT> Tag Attributes




Relative font size setting. Values vary from 1 to 7: <FONT SIZE=7>.


Language code denoting the language in which the text is written.


Typeface setting: <FONT FACE="Arial">.


Color of the text: <FONT COLOR="RED">.

As you learned earlier in this hour, the hypertext link is a very important element of Web design. A link is a reference to another document or another part of the current document. If the user clicks on the highlighted text of the link, the browser immediately opens the document referenced in the link. The effect is that the user appears to lilt through an endless garden of colorful and informative content.

By the way

It is occasionally worth remembering that the term browser originally referred to a giraffe or a large dinosaur eating leaves out of the trees.

A link appears in the HTML file as a tag. The simplest form of a link uses the <A> tag with the URL of the link destination given as a value for the HREF attribute. For instance, in the preceding example, if you would like the words "Archipelago of Parakeets" to appear as hypertext with a link to a Web site that tells about the archipelago, enclose the words within <A> tags as follows:

originally in the <A HREF=> Archipelago of
Parakeets</A>. I borrow from this theme

The versatile HTML format includes many additional options that cannot be included in this brief introduction. You can place a hotspot link inside a picture. You can create your own style sheets with special tags for preformatted paragraph styles. You can structure the Web page with tables, columns, forms, and frames. Or you can add radio buttons, checkboxes, and pull-down menus. In the early days of HTML, designers coded all the HTML directly into their documents using text editors (as described in the preceding examples). Professional Web designers now work with special Web development applications, such as Dreamweaver or FrontPage, that hide the details of HTML and let the designer view the page as it will appear to the user.

Static, preformed HTML documents like those described in this section are still widely used, but many Web sites today use Dynamic HTML techniques to generate the Web content at the time of the request. You'll learn more about Dynamic HTML later in this hour.

    Previous Section Next Section

    JavaScript Editor Source code editor     Website development