It is not always easy to convey information in simple and consice terms. Keeping your message simple, readable, and not distracting the reader with heavily formatted type increases your chances of allowing your message to reach the reader.
Short paragraphs with a lot of white space can help, as well.
What follows are rules of the road for formatting type in HTML pages. It is rather lengthy and does have a tendancy to be heavily formatted. It may help to jump to a particular topic of interest using the unabridged index.
HTML allows for six (6) levels of headings. Remember that each user can configure their browser to display some aspects of HTML in different ways. Also window sizes are different so text may not flow exactly as you may expect.
The code for headings is enclosed with <H1>...</H1> tags.
<HTML> <HEAD> <TITLE> Example of Headings </TITLE> </HEAD> <BODY> <!-- This text is commented out --> <H1>This is Heading Level 1</H1> <H2>This is Heading Level 2</H2> <H3>This is Heading Level 3</H3> <H4>This is Heading Level 4</H4> <H5>This is Heading Level 5</H5> <H6>This is Heading Level 6</H6> <P>This is normal paragraph type</P> </BODY> </HTML>
This is normal paragraph type
HTML allows text to be stylized using physical style tags, logical style tags, and with some other, special HTML tags.
Physical style tags indicate how the text is to be formatted (bold, italic).
Logical style tags indicate how the text is to be applied (citation, code). This is not very clear until you see the examples.
Physical style tags indicate how text is to be displayed as follows:
Logical style tags indicate how text is to be used as follows:
This is CODEd type.
Your browser will generally strip any extra white space in a file.
This line would appear the same as this line except for the <PRE>...</PRE> tagsText formatted within the <PRE>...</PRE> tags will be displayed in a monospaced font like Courier. It is like doing tables of type on a typewriter or ASCII graphics on a dot-matrix printer:
THINK DOT MATRIX: 12345678901234567890123456789012345678901234567890 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX X X X TTTTT H H I NN N K KK X X T H H I NNN N K KK X X T HHHH I N NN N KKK X X T H H I N NNN K KK X X T H H I N NN K KK X X X X DDD OO TTTTT X X D D O O T X X D D O O T X X DDD OO T X X X X MMM MMM AA TTTTT RRRR I X X X X M MMM M A A T R R I X X X X M M M AAAA T RRRR I X X X M M A A T R RR I X X X X M M A A T R R I X X X X X XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXThe code samples in other parts of this page were done using the <PRE>...</PRE> tags.
A special character is any character that requires a key combination anything more complex than holding down the shift key to be produced. Getting special characters to display properly involves the use of character entities. There are two forms of character entities: numbered entities and named entities.
Numbered entities have a hash (or pound sign) followed by a number to identify the character. Like named entities, they also start with an amperstand and end with a semicolon. Examples:
& produces & (Amperstand) " produces " (Quotation mark) © produces © (Copyright) ® produces ® (Registered trademark)
Named entities have a special name for the character they represent. They start with an amperstand and end with a semicolon. Examples:
& produces & (Amperstand) " produces " (Quotation mark) © produces © (Copyright) ® produces ® (Registered trademark)
The characters used to define HTML tags have special codes. The characters: <, >, &, and " are used in the HTML tags and, if typed as ASCII characters in a line of type, will confuse Web browsers that are trying to interpret HTML tags. For these codes to be reproduced correctly, even with the <PRE>...</PRE> tags, codes must be used. Numbered entities will work, but the named entities have a shorthand for these characters. They also start with an amperstand and end with a semicolon. Examples:
< produces < (Less than) > produces > (Greater than) & produces & (Amperstand) " produces " (Quotation mark)
Web browsers ignore white space in HTML code. If you include extra spaces or returns in your file, they will be condensed into a single space. In order to force a line break, the <BR> tag can be used. Simply add this tag where you want the break to occur. Example:
This line will break as follows:<BR> Forcing line breaks<BR>is really<BR>simple stuff!
This line will break as follows:
Forcing line breaks
is really
simple stuff!
The <ADDRESS> tag is used to sign-off on Web pages. They usually go at the bottom of the page and contain the name of the Webmaster (or company that created the page), a contact person, the date the last time the page was updated, copyright notices, and anything else that seemed important at the time the page was done. They are usually offset by a horizontal rule. Example:
<ADDRESS> <HR> <BR> Last updated 1 December 1996<BR> Created by Ken Kaleta: kenk@servtech.com<BR> Copyright Ken Kaleta 1996 all rights reserved </ADDRESS>
Result:
Although <CITE>...</CITE> and <CODE>...</CODE> will bring emphasis to short quotes, bits of code, math equations, book and magazine titles and the like, HTML employs the <BLOCKQUOTE>...</BLOCKQUOTE> tags for longer quotes. Generally, the format is to give the quote some space above and below, and to indent the text. Line breaks <BR> can be used to force breaks. The following poem is within <BLOCKQUOTE>...</BLOCKQUOTE> tags:
There are little eyes upon you
and they're watching night and day;
There are little ears that quickly
take in every word you say;
There are little hands all eager
to do everything you do;
And a little child who's dreaming
to be as nice as you.
You're the little child's idol,
You're the wisest of the wise;
From these little eyes,
No suspicions ever rise.
There's a little wide-eyed child
who believes you're always right;
Who's ears are always open
and who watches day and night;
You are setting an example
Everday in all you do;
for the little child is waiting
to grow up to be like you.
S.H.Podlas
The <BLINK>...</BLINK> tags will set type to blink. This is
often very annoying and should be avoided. The following type is set to blink:
HTML supports several kinds of lists including:
Usage: Lists that are numbered or lettered. Also for outlines.
Tags: <OL>...</OL>
List elements defined by: <LI>
Attributes:
<HTML> <HEAD> <TITLE> Example of simple ordered list </TITLE> </HEAD> <BODY> <P>Example of ordered list: <OL> <LI>First element in the list <LI>Second element in the list <LI>Third element in the list <LI>Fourth element in the list </OL> </P> </BODY> </HTML>Result:
Example of ordered list:
<HTML> <HEAD> <TITLE> Example of nested ordered list using TYPE and START with COMPACT </TITLE> </HEAD> <BODY> <P>Example of ordered list: <OL COMPACT TYPE=A START=8> <LI>Eighth element <LI>Ninth element <OL TYPE=a> <LI>First nested <LI>Second nested <LI>Third nested <LI>Fourth nested </OL> <LI>Tenth element <LI>Eleventh element </OL> </P> </BODY> </HTML>Result:
Example of ordered list:
<HTML> <HEAD> <TITLE> Example of outline </TITLE> </HEAD> <BODY> <P>Example of ordered list: <OL TYPE=I START=11> <LI>Point Eleven <LI>Point Twelve <OL TYPE=a> <LI>Sub point 1 <LI>Sub point 2 <LI>Sub point 3 <LI>Sub point 4 </OL> <LI>Point Thirteen <LI>Point Fourteen </OL> </P> </BODY> </HTML>Result:
Example of ordered list:
Usage: Lists that are bulleted.
Tags: <UL>...</UL>
List elements defined by: <LI>
Attributes:
<HTML> <HEAD> <TITLE> Example of simple unordered list </TITLE> </HEAD> <BODY> <P>Example of unordered list: <UL> <LI>First element in the list <LI>Second element in the list </UL> </P> </BODY> </HTML>Result:
Example of unordered list:
<HTML> <HEAD> <TITLE> Example of nested unordered list </TITLE> </HEAD> <BODY> <P>Example of unordered list: <UL TYPE=DISC> <LI>First element in the list <LI>Second element in the list <UL TYPE=CIRCLE> <LI>Sub list 1 <LI>Sub list 2 <UL TYPE=SQUARE> <LI>Sub sub list 1 <LI>Sub sub list 2 <LI>Sub list 3 </UL> <LI>Third element in the list </UL> </UL> </P> </BODY> </HTML>Result:
Example of unordered list:
Usage: Short lists of items usually with no bullets or other markings.
Note: MENU lists are not commonly used and no longer exist in HTML 3.2.
It is probably best to avoit them.
Tags: <MENU>...</MENU>
List elements defined by: <LI>
Attributes: None
Examples:
<HTML> <HEAD> <TITLE> Example of menu list </TITLE> </HEAD> <BODY> <P>Example of menu list: <MENU> <LI>First element in the list <LI>Second element in the list <LI>Third element in the list <LI>Fourth element in the list </MENU> </P> </BODY> </HTML>Result:
Example of menu list:
Usage: Short lists of items usually with no bullets or other markings.
Note: DIRectory lists are not commonly used and no longer exist in HTML 3.2.
It is probably best to avoid them.
Tags: <DIR>...</DIR>
List elements defined by: <LI>
Attributes: None
Examples:
<HTML> <HEAD> <TITLE> Example of directory list </TITLE> </HEAD> <BODY> <P>Example of directory list: <DIR> <LI>First element in the list <LI>Second element in the list <LI>Third element in the list <LI>Fourth element in the list </DIR> </P> </BODY> </HTML>Result:
Example of directory list:
Usage: Kind of like a dictionary. Each item in the list has two parts, the term
and the definition. They are also called definition lists.
Tags: <DL>...</DL>
List elements defined by: <DT> for the TERM, <DD> for the DEFINITION
Attributes:
<HTML> <HEAD> <TITLE> Example of glossary list </TITLE> </HEAD> <BODY> <P>Example of glossary list: <DL> <DT>Red<DD>Primary <DT>Blue<DD>Primary <DT>Yellow<DD>Primary <DT>Orange<DD>Red and Yellow <DT>Green<DD>Blue and Yellow <DT>Purple<DD>Red and Blue </DL> </P> </BODY> </HTML>Result:
Example of glossary list:
<HTML> <HEAD> <TITLE> Example of glossary list </TITLE> </HEAD> <BODY> <P>Example of glossary list: <DL COMPACT> <DT>RGB <DD>Red, Green, Blue <DT>HSV <DD>Hue, Saturation, Value <DT>CMYK <DD>Cyan, Magenta, Yellow, Black <DT>LAB <DD>Color space that includes all of the above </DL> </P> </BODY> </HTML>Result:
Example of glossary list:
You can specify a relative or absolute SIZE to a font. The valid SIZEs are 1 to 7.
The default is 3. Using the + or - characters will increase or decrease the SIZE by
that amount. The sizes are shown below:
Text can be aligned using the LEFT, CENTER, and RIGHT attributes. The default is LEFT.
Examples are as shown:
Code: <P ALIGN=CENTER><I>CENTER THIS TYPE</I></P>
Results:
CENTER THIS TYPE
Yes, you can change the color of type in your Web page. Remember, each Web browser will be configured a little differently and what you see on your machine is not what someone else will see. Links that have been explored and links that have not been explored often have different colors and changing the text color may annoy or confuse your readers. That is all I have to say about it here. For more information, you will have to check out the section on color.