Web Site Design 1 : HTML CLASS 1 | CLASS 2 | CLASS 3 | CLASS 4 | CLASS 5 | CLASS 6 | CLASS 7

CLASS 2 : Web pages as content: HTML layout elements, lists, and text controls

REVIEW

Before Marc Andreeson created the <IMG> tag in 1993 for his Mosaic browser, the Web was strictly text. Want to know what the Web looked like without images? Try entering your favorite URL into the simulator Lynx-It to see — "Lynx" is a text-only browser that originated in 1992 that's still in use today.

Even after the early versions of Netscape and Internet Explorer were released, HTML was still very no-frills — you were not able to specify custom background, link, or text colors, or change font faces, and there were no tables to allow for side-by-side presentation of content (but there were images!). Take a look at the Amazon.com Nostalgia Page to see what that company's Web page looked like in 1995 in the early days of the Web.

DOCUMENT HEADINGS

The tags H1, H2, H3, H4, H5, and H6 display headings. Level 1 headings (H1) are the most prominent headings, and level 6 headings (H6) are the least prominent. Headings are usually displayed in a bolder, larger font than normal body text. Heading elements start on a new line. All browsers add extra space before heading elements. [display]

<H1>...</H1>
Definition: First-level heading.
Attributes:

ALIGN="left|center|right"
Specifies the horizontal alignment of the headline. Default is left.

<H2>...</H2>
Definition: Second-level heading.

Attributes:

ALIGN="left|center|right"
Specifies the horizontal alignment of the paragraph. Default is left.

<H3>...</H3>
Definition: Third-level heading.

Attributes:

ALIGN="left|center|right"
Specifies the horizontal alignment of the paragraph. Default is left.

<H4>...</H4>
Definition: Fourth-level heading.

Attributes:

ALIGN="left|center|right"
Specifies the horizontal alignment of the paragraph. Default is left.

<H5>...</H5>
Definition: Fifth-level heading.

Attributes:

ALIGN="left|center|right"
Specifies the horizontal alignment of the paragraph. Default is left.

<H6>...</H6>
Definition: Sixth-level heading.

Attributes:

ALIGN="left|center|right"
Specifies the horizontal alignment of the paragraph. Default is left.

LAYOUT ELEMENTS

This section discusses the tags that display block-level elements in text, such as headings, paragraphs, block quotes, and so on. These tags control spacing and alignment of text.

<P>(...</P>)
Definition: The P tag displays a paragraph. All P elements start on a new line and are usually preceded by extra space. The closing </P> tag guarantees that the paragraph is followed by extra space. Omitting the closing </P> tag often has no effect. [display]

Attributes:

ALIGN="left|center|right"
Specifies the horizontal alignment of the contents it encloses. Default is left.

<BR>
Definition: Inserts a line break. The BR tag does not add extra space before the new line. Does not have a closing tag. [display]

<BLOCKQUOTE>...</BLOCKQUOTE>
Definition: The BLOCKQUOTE tag indents the contents it encloses. BLOCKQUOTE elements start on a new line. Many browsers add extra space before a BLOCKQUOTE element. [display]

<HR>
Definition: "Horizontal rule" — draws a horizontal line across the page. The line starts on a new line. Does not have a closing tag. [display]

Attributes:

ALIGN="center|left|right"
Specifies the horizontal alignment of lines that do not span the width of the page. Default is center.

SIZE="#"
Indicates the thickness of the line, in pixels. The default is 2 pixels.

WIDTH="#|%"
Defines the horizontal width of the line. The measurement value can be a number of pixels, for example "5", or a percentage of the page width or frame width, for example "75%". The default is 100%.

NOSHADE
Reproduces a solid line that has no shading.

<DIV>...</DIV>
Definition: Useful for applying alignment characteristics to a section of a document that contains multiple elements rather than having to apply the alignment to each element in the block. Each element starts on a new line. [display]

Attributes:

ALIGN="left|center|right"
Specifies the horizontal alignment of the block of content.

LISTS

Provide methods to lay out item or element sequences in document content. Can be nested to create outlines.

<LI>
Definition: "List item" — indicates an itemized element, which is usually preceded by a bullet, a number, or a letter. Used inside list elements such as OL and UL (see below). A single itemized element can contain other tags such as the P tag. The LI tag does not require a closing tag.

<UL>...</UL>
Definition: "Unordered list" — displays a bulleted list of elements. UL elements are indented, and usually preceded and followed by extra space. Must be used with the LI tag above. [display]

Attributes: TYPE="circle|disc|square"
Defines the type of bullet used for each list item. "Circle" specifies a hollow bullet; "disc" specifies a solid round bullet; "square" specifies a square bullet. "Disc" is the default in most browsers.

<OL>...</OL>
Definition: "Ordered list" — displays a numbered list of elements. OL elements are indented, and usually preceded and followed by extra space. Must be used with the LI tag above. [display]

Attributes:

TYPE="A|a|I|i|1"
Defines the type of numbering sequence used for each list item: "A" specifies a sequence of uppercase letters; "a" specifies a sequence of lowercase letters; "I" specifies a sequence of uppercase Roman numerals; "i" specifies a sequence of lowercase Roman numeral; "1" specifies a sequence of numbers. The default is "1".

START="#"
Indicates the starting number (or letter) for the list. The number must be a positive integer (even if the TYPE is a letter).

<DL>...</DL>
Definition: "Definition list" — displays a list of terms, which are defined with the DT tag, and definitions, which are defined with the DD tag. [display]

<DT>
Definition: "Definition term" — specifies the first, left-aligned line of the item. The DT tag must be used in a DL tag and usually immediately precedes a DD tag that provide's the term's definition. The DT tag does not require a closing tag.

<DD>
Definition: "Definition description" — specifies the second, indented line of the item. The DD tag must be used within a DL tag and usually follows immediately after a DT tag that indicates the term being defined. The DD tag does not require a closing tag.

TEXT CONTROLS

Character formatting tags. These are all inline tags that have an opening and closing tag. They do not cause a line break, and they can be used to enclose arbitrary pieces of a document.
LOGICAL vs. PHYSICAL STYLES
HTML has two types of styles for individual words or sentences: logical and physical. Logical styles tag text according to its meaning, while physical styles indicate the specific appearance of a section. For example, in the preceding sentence, the words "logical styles" was tagged as "emphasis." The same effect — formatting those words in italics — was achieved via the "italics" tag applied to the words "physical styles" that tells your browser to "put these words in italics." If physical and logical styles produce the same result on the screen, why are there both?

In the ideal SGML universe, content is divorced from presentation. Thus SGML tags a level-one heading as a level-one heading, but does not specify that the level-one heading should be, for instance, 24-point bold Times centered. The advantage of this approach (it's similar in concept to style sheets in many word processors) is that if you decide to change level-one headings to be 20-point left-justified Helvetica, all you have to do is change the definition of the level-one heading in your Web browser. Indeed, many browsers today let you define how you want the various HTML tags rendered on-screen using what are called cascading style sheets, or CSS.

Another advantage of logical tags is that they help enforce consistency in your documents. It's easier to tag something as <H1> than to remember that level-one headings are 24-point bold Times centered or whatever. For example, consider the <STRONG> tag. Most browsers render it in bold text. However, it is possible that a reader would prefer that these sections be displayed in red instead. (This is possible using a local cascading style sheet on the reader's own computer.) Logical styles offer this flexibility.

Of course, if you want something to be displayed in italics (for example) and do not want a browser's setting to display it differently, you should use physical styles. Physical styles, therefore, offer consistency in that something you tag a certain way will always be displayed that way for readers of your document.

Try to be consistent about which type of style you use. If you tag with physical styles, do so throughout a document. If you use logical styles, stick with them within a document. Keep in mind that future releases of HTML might not support certain logical styles, which could mean that browsers will not display your logical-style coding.

<B>...</B>
(<STRONG>...</STRONG>)
Definition: Boldfaces the text it encloses. [display]

<I>...</I>
(<EM>...</EM>)
Definition: Italizes (or EMphasizes) the text it encloses. [display]

<U>...</U>
Definition: Underlines the text it encloses. Gaps between words in the enclosed text are also underlined. [display]

<STRIKE>...</STRIKE>
<S>...</S>
Definition: Displays the text it encloses with a line (strike) through it. [display]

<SUB>...</SUB>
Definition: Displays text as a subscript. A subscript appears slightly below the baseline (bottom edge) and in a smaller font. [display]

<SUP>...</SUP>
Definition: Displays text as a superscript. A superscript appears slightly above the top of the preceding text and in a smaller font. [display]

<CODE>...</CODE>
<TT>...</TT>
Definition: "Teletype" — displays text in a fixed-width font. [display]

<FONT>...</FONT>
Definition: Changes the color, size, and typeface (or, font family) of the font. All text between the tags is displayed with the specified font characteristics. [display]

Attributes:

COLOR="color"
Defines the desired text color; can use either name or hexadecimal values.

SIZE="#"
Defines the size of the font, in either an absolute or relative sizing system. In the absolute system, you may specify a size in a range from 1 to 7, with a default size of 3. A value of 1 results in the smallest font, and a value of 7 results in the largest font. In the relative system, you specify the size using a plus or minus sign in front of the number to change the size with respect to the base font size, such as -1 or +2 — with 3 as the default size, the absolute equivalent of -1 is 2, while +2 equals 5. The default size is specified in the browser's prefences and, unless the user has changed these settings, roughly corresponds with 12 pt.

FACE="fontlist"
Specifies a comma-separated list of font faces. The first font in the list is used, if it is available, otherwise it uses the second font in the list if it is available, and so on. If none of the specified fonts are available, no font face change occurs. Each entry in the font list can be a specific font name, for example "helvetica", or it can be a generic font name, such as "serif", "sans-serif", "cursive", "monospace", and "fantasy". The default font is specified in the browser's prefences and, unless the user has changed these settings, is Times.

<BLINK>...</BLINK>
Definition: Makes the text it encloses blink on and off (in Netscape only). Note: Considered at this time something of a novelty tag and should be used sparingly, if at all. [display]

SPECIAL SYMBOLS & ENTITIES

To use characters not on your keyboard in HTML documents, you need to type decimal references or entity references.

Decimal references have the format &#nnn; where nnn is a number that references the character. Entity references have the format &nnn; where nnn is a text string that references the character.

In addition to entity and decimal references, HTML has reserved characters that have special meanings in HTML files, such as angle brackets. If you want to use an angle bracket in your text, you have to use a special character or entity reference; otherwise, the browser might misinterpret the character and display incorrect text or even an error message.

A few common special characters, with their corresponding decimal or entity references are as follows:

Character Decimal Entity
" &#34; &quot;
& &#38; &amp;
< &#60; &lt;
> &#62; &gt;
non-breaking space &#160; &nbsp;
¡ &#161; &iexcl;
¢ &#162; &cent;
£ &#163; &pound;
© &#169; &copy;
® &#174; &reg;
° &#176; &deg;
SKILL MASTERY

Document Headings

  1. Try each of the different heading levels to get a feel for the relative sizes.
  2. Experiment with the alignment of your headlines.
Layout Elements
  1. Try using the <P> tag with and without the closing </P> to see how the display is affected — pay special attention to the spacing before and after the contents surrounded by the tag.
  2. Use the <BR> singly and in multiples to test the effect.
  3. Practice using the <BLOCKQUOTE> tag — pay special attention to the spacing before and after the tag. Also, try nesting BLOCKQUOTE tags to see the effect.
  4. Experiment with the attributes of the <HR> tag to get a feel for what kind of control over the appearance of the line is available — pay special attention to the spacing before and after the tag.
  5. Try surrounding different sections of your document in <DIV> tags to change the alignment — pay special attention to the spacing before and after the contents surrounded by the tag.
Lists
  1. Try using the <LI> tag on its own — pay special attention to the spacing before and after the contents preceded by the tag.
  2. Create an unordered list and practice changing the attributes of the <UL> tag to vary the style of the bullets displayed — pay special attention to the spacing before and after the contents surrounded by the tag.
  3. Try nesting a <UL> tag within another <UL> tag to see the effect in the display.
  4. Create an ordered list and practice changing the attributes of the <OL> tag to vary the numbering of the list — pay special attention to the spacing before and after the contents surrounded by the tag.
  5. Try nesting a <OL> tag within another <OL> tag to see the effect in the display.
  6. Experiment with adding <BR> and <P> tags within <LI> tags to see the effect.
  7. Create a definition list and get a feel for how the <DL>, <DT>, <DD> tags work together — pay special attention to the spacing before and after the contents surrounded by the tag.
Text Controls
  1. Experiment with both logical and physical styles (<B> vs. <STRONG> and <I> vs. <EM>).
  2. Practice changing the style of your text — italics, bold, underline, strikethrough, teletype.
  3. Combine two or more styles such as, bold italics, or underlined bold — pay special attention to proper nesting of your tags.
  4. Experiment with changing the attributes of the <FONT> tag to change the appearance of your text, including color, face, and size, using both absolute and relative numbers.
  5. Practice creating subscript and superscript text.
  6. Try the <BLINK> tag — try and come up with an effective (and not annoying!) use for the tag.
  7. Practice combining all of these tags to change the font, color, size, and style of your text.
Special Symbols and Entities
  1. Practice coding some special symbols, using both decimal and entity references — pay special attention to any difference in display between the different entities.
  2. Find an online reference guide to look up some other references for other special symbols.

FURTHER READING

Document Headings

Layout Elements Lists Text Controls Special Symbols and Entities

NEXT CLASS

Web pages as containers
HTML links, images, audio and video