B.4 The Minimal HTML Document | JavaScript by Example (2nd Edition)

 <HTML> <HEAD>  <TITLE>  Simple HTML Document. Only the browser sees this title <  /TITLE>  </HEAD> <BODY>  <H1>  Sample Heading -- You and I see this heading  </H1>   <P>  This is a sample text representing a paragraph. It will ignore spaces and keep on being one paragraph  <P>  This is another paragraph </BODY> </HTML>

B.4.1 Headings

Don't confuse these with <HEAD> , which is not visible to the end user . The heading is at the top of the Web document. Think "Headline." There are six heading tags ordered by size: <H1> is the largest and <H6> the smallest. According to the original rules it isn't fair to pick and choose headings by appearance. <H1> is a primary heading <H2> a secondary heading, etc. Those who have been doing this a long time claim it is virtually impossible to distinguish between <H4>, <H5> , and <H6>.

There are a million ways to solve the heading problem. In some fonts, <H1> is so huge you would only use it for something of great importance, such as "War is Declared." Because HTML now interacts with Web tools like Java and XML, the <P> tag now requires a matching </P> tag. Strictly speaking, this is not an HTML requirement because it is not HTML that is having trouble knowing that the paragraph has finished.

B.4.2 Tags to Separate Text

NOTE : Formerly these did NOT require end tags.

<P>

This tag separates text into paragraphs ”a hard return with space (line feed). Originally this tag came after the paragraph, but since we use monitors and not actual print devices we don't need to signal a hard return. So now <P> indicates to the browser that what follows is a paragraph.

<BR>

This breaks text into lines ”a hard return with no space between lines.

<HR>

This is a horizontal rule ”a graphic representation of a line to separate text areas.

B.4.3 Lists

Lists are perennial favorites of organizations. When the Web began , they represented ways to break up text in a helpful fashion. They could (and still can) be used for definitions, tables of contents, or just plain lists. The numbered list is a favorite of the academic community; the bulleted list that of the military; otherwise , they are really self-explanatory.

There are two types of lists:

Ordered (numbered) list

<OL>

<LI> Item number one

<LI> Item number two

</OL>
Unordered (bulleted) list

<UL>

<LI> First item

<LI> Next item

</UL>

Lists are old fashioned. Use them with discretion. Avoid long lists; instead block topics as subpage(s). Use tables or links (or both) where possible.

The <LI> tag has suffered the same fate as the <P> tag. You must use an </LI> tag to be truly up to date. Originally there were several subcategories of lists, but they've pretty much done away with most of them.

B.4.4 Tables for Fun and Profit

Tables are scary when you look behind the scene and see all those tags and indents. To make a table, use the same principle as the traveler on the 1,000-mile journey: one step at a time. This overview covers simple tables, the kind that replaced preformatted <PRE> text. Though complicated they are no more exasperating than counting all the spaces between words in preformatted text to make the results come out even.

The Basic Table Tags:

<TABLE> </TABLE>	Defines table
<TR> </TR>	Defines table row
<TD> </TD>	Defines table cell (data)

The principle is the same as with the HTML document as a whole: The table <TABLE> contains rows <TR> , which contain data cells <TD> .

Tailoring Tables:

You can use many of the same tag elements you use to tweak other page elements. The ALIGN= command puts items including tables to left, right, or center on page.

Some browsers allow you to add color to the background (Netscape, Internet Explorer). The same is true of background images, but Netscape and IE treat them differently.

Similar rules guide formatting of table rows and cells. You can adjust text position and background in these units.

How Table Tags Are Used:

This will yield a simple table with two rows and two cells.

<TABLE>

<TR><TD>data</TD><TD>maybe a picture</TD></TR>

</TABLE>

By adding spacing, alignment, color, and other tags, you can manipulate tables. You can enlarge the table by increasing the number of rows or data cells. You can specify header rows, make data cells span more than one row and/or column, put background colors, borders, and more. It's all in the details.