\
|
|
| |
|
BASEFONT (=global font size)
|
-
|
<BASEFONT SIZE=n>
|
| |
BASEFONT allows you to specify a default global
font size for a page between size 1 to 7
(7 is biggest). Unless being overriden
by <FONT>...</FONT> container,
this is the font size that all your text will be
displayed.
Font size changes achieved with
<FONT>...</FONT> container
are relative to the base font size set by
BASEFONT.
If BASEFONT is not used,
the default base font size will be 3.
Usually, you can put this tag right after
</HEAD>
tag to make a global font size definition
consistent.
Also, this BASEFONT
functionality can be more flexibly managed
by using Style sheets.
(See more on Style sheets)
|
|
|
|
|
Heading
|
-
|
|
<Hn>...</Hn>
|
| |
There are six levels of headings from H1
(the most important, largest)
to H6 (the least important, smallest).
Keep in mind that <Hn>...</Hn>
container automatically inserts a blank line after it.
|
| |
Gentlemen, Start your engines |
<H1>Gentlemen, Start your engines</H1>
|
 |
|
Gentlemen, Start your engines |
<H2>Gentlemen, Start your engines</H2>
|
|
|
Gentlemen, Start your engines |
<H3>Gentlemen, Start your engines</H3>
|
|
|
Gentlemen, Start your engines |
<H4>Gentlemen, Start your engines</H4>
|
|
|
Gentlemen, Start your engines |
<H5>Gentlemen, Start your engines</H5>
|
|
|
Gentlemen, Start your engines |
<H6>Gentlemen, Start your engines</H6>
|
|
|
|
FONT
|
-
|
|
|
<FONT SIZE=n COLOR=#rrggbb FACE=family>...</FONT>
|
| |
SIZE=n
-
"n" is an integer between 1 and 7. This sets the font to
some fixed size, whose rendering depends on the browser.
Not all browsers may render all seven sizes.
You can also use a relative scale to control the font size.
The value "+1" means one size larger than the size defined by BASEFONT tag.
The same manner, value "-3" means three sizes smaller.
If BASEFONT is not defined,
the default base font size of 3 is used.
|
| |
COLOR=#rrggbb|color alias
-
Each color value is composed of 3 values representing
the amount of red-green-blue (=RGB color) triplet,
variable=#rrggbb.
For example, RGB color for red
is #FF0000. This #FF0000 color is combination of
red=FF green=00 blue=00 where each color
value has a range of 00-FF Hexadecimal (or 0-255 in decimal system).
Frequently used RGB color combinations are shown below.
You can also use a color alias (i.e., aquamarine)
instead of the #rrggbb expression.
|
| |
FACE=Family
-
Family defines a comma-separated list of font names
the browser should search for in order of preference.
If a particular font is not available in user's computer,
next alternative(s) in the list will be used. Make it sure
to use fonts that are available across multiple platforms,
i.e., PC, Unix, Macintosh, etc.
There are
five major font family categories frequently used in
FACE definition; serif font (such as Times Roman
or Times New Roman),
sans-serif font (such as Helvetica),
monospace font (such as Courier),
cursive font (such as Zapf Chancery) and
fantasy font (hard-to-classify faces like Grunge or Western).
Typical FACE definitions are shown below.
|
<FONT FACE="Book Antiqua, Times Roman, Palatino, New Century Schoolbook, Serif">
<FONT FACE="Verdana, Tahoma, Arial, Helvetica, Geneva, Sans-Serif">
<FONT FACE="Courier, Monospace">
|
|
|
| |
|
Toto, I don't think we're in Kansas anymore |
<FONT SIZE=7 COLOR=#000060 FACE="Book Antiqua, Palatino, New Century Schoolbook, Serif">Toto, I don't think we're in Kansas anymore</FONT>
|
|
|
|
Toto, I don't think we're in Kansas anymore |
<FONT SIZE=6 COLOR=deeppink FACE="Courier, Monospace">Toto, I don't think we're in Kansas anymore</FONT>
|
|
|
|
Toto, I don't think we're in Kansas anymore |
<FONT SIZE=5 COLOR=#778899 FACE="Verdana, Tahoma, Arial, Helvetica, Geneva, Sans-Serif">Toto, I don't think we're in Kansas anymore</FONT>
|
|
|
|
Toto, I don't think we're in Kansas anymore |
<FONT SIZE=4 FACE="Arial, Tahoma, Verdana, Helvetica, Geneva, Sans-Serif">Toto, I don't think we're in Kansas anymore</FONT>
|
|
|
|
Toto, I don't think we're in Kansas anymore |
<FONT SIZE=3 COLOR=darkorange>Toto, I don't think we're in Kansas anymore</FONT>
|
|
|
|
Toto, I don't think we're in Kansas anymore |
<FONT SIZE=2>Toto, I don't think we're in Kansas anymore</FONT>
|
|
|
|
Toto, I don't think we're in Kansas anymore |
<FONT SIZE=1 COLOR=#FF0000>Toto, I don't think we're in Kansas anymore</FONT>
|
|
|
|
Physical Text Style
|
-
|
|
-
| <B>...</B> | (bold) |
| <I>...</I> | (italic) |
| <U>...</U> | (underlined) |
| <TT>...</TT> | (teletype or monospaced) |
| <STRIKE>...</STRIKE> | (strike-through) |
| <S>...</S> | (strike-through) |
| <BIG>...</BIG> | ("large" font) |
| <SMALL>...</SMALL> | ("small" font) |
|
| |
Physical style formats the text based on
font family properties (either default font or
specifically-defined), and
rendering of such font style elements depends
on user's browser and font family availability
in user's computer.
Even though much simpler than Logical Text Style tags,
the Physical text style tags *do not* gurantee
the exact text formatting results.
Bottomline is that you may save a couple of keystokes
by using Physical Style instead of using Logical Style,
but try to stick with Logical Style for consistent,
browser/user-independent text formatting.
|
|
|
|
|
Have you called your Mom lately? |
<B>Have you called your Mom lately?</B>
|
|
|
Have you called your Mom lately? |
<I>Have you called your Mom lately?</I>
|
|
|
Have you called your Mom lately? |
<U>Have you called your Mom lately?</U>
|
|
|
Have you called your Mom lately? |
<TT>Have you called your Mom lately?</TT>
|
|
Have you called your Mom lately? |
<STRIKE>Have you called your Mom lately?</STRIKE>
|
|
Have you called your Mom lately? |
<S>Have you called your Mom lately?</S>
|
|
|
Have you called your Mom lately? |
<BIG>Have you called your Mom lately?</BIG>
|
|
|
Have you called your Mom lately? |
<SMALL>Have you called your Mom lately?</SMALL>
|
|
|
|
Logical Text Style
|
-
|
|
-
| <EM>...</EM> | (emphasis) |
| <STRONG>...</STRONG> | (strong) |
| <CODE>...</CODE> | (program Code) |
| <SAMP>...</SAMP> | (sample) |
| <KBD>...</KBD> | (keyboard) |
| <DFN>...</DFN> | (defined) |
| <CITE>...</CITE> | (citation) |
|
| |
Logical style formats the text based on
how the resulting text should look like
instead of specifying font family properties for formatting.
Thus Logical sytle approach will produce
more consistent formatted text (then Physical style)
across different browsers and different
font family availability
in user's computer.
Bottomline is that you may save a couple of keystokes
by using Physical Style instead of using Logical Style,
but try to stick with Logical Style for consistent,
browser/user-independent text formatting.
|
|
|
|
|
Only dead fish go with the flow |
<STRONG>Only dead fish go with the flow</STRONG>
|
|
|
Only dead fish go with the flow |
<EM>Only dead fish go with the flow</EM>
|
|
Only dead fish go with the flow |
<CODE>Only dead fish go with the flow</CODE>
|
|
|
Only dead fish go with the flow |
<SAMP>Only dead fish go with the flow</SAMP>
|
|
|
Only dead fish go with the flow |
<KBD>Only dead fish go with the flow</KBD>
|
|
|
Only dead fish go with the flow |
<DFN>Only dead fish go with the flow</DFN>
|
|
|
Only dead fish go with the flow |
<CITE>Only dead fish go with the flow</CITE>
|
|
|
|
Superscript and Subscript
|
-
|
|
-
| <SUP>...</SUP> |
| (superscript) |
| <SUB>...</SUB> |
| (subscript) |
|
| |
Self-explanatory. You may consider reduce
super/subscript text size using
<FONT SIZE=n>...</FONT>
container for better
text formatting and readability.
|
|
|
|
|
Overworked |
<SUP>Over</SUP>worked
|
|
underpaid |
Under<SUB>paid</SUB>
|
|
Overworked |
<SUP><FONT SIZE=2>Over</FONT></SUP>worked
|
|
1,3-(CH3)2
C6H4 |
1,3-(CH<SUB>3</SUB>)<SUB>2</SUB>
C<SUB>6</SUB>H<SUB>4</SUB>
|
|
|
|
Preformatted Text
|
-
|
|
<PREP>...</PRE>
|
| |
The <PRE>
tag tells the browser that
the text enclosed by <PRE>
tag is "preformatted".
As a result, the browser will:
- leave white space intact
- render text with a fixed-pitch font (i.e., monospaced)
- disable automatic word wrap.
<PRE>
tag is used frequently to convert an existing
text file into a HTML file by enclosing text with it, kind
of a "quick and dirty" way of preserving space formats
in the text file.
<PRE> tag
will interpret the tab characters
as a single white space. Thus make it sure to convert
all existing tabs to white spaces before enclosing with
a <PRE> tag.
Else, you'll end up with badly
misaligned documents.
|
|
|
|
Temperature DO
(°C) (mg/L)
-------------------------
23.3 5.09
21.7 6.21
Time Interval: 2 hrs.
|
<PRE>
Temperature DO
(°C) (mg/L)
-------------------------
23.3 5.09
21.7 6.21
Time Interval: 2 hrs.
</PRE>
|
|
|
|
Blockquote
|
-
|
|
<BLOCKQUOTE>...</BLOCKQUOTE>
|
| |
The <BLOCKQUOTE>
tag will automatically indent
the portion of quoted text.
|
|
|
|
Her Song:
When I was young, I listened to the radio
waiting for my favorite songs....
|
Her Song:
<BLOCKQUOTE>
When I was young, I listened to the radio
waiting for my favorite songs....
</BLOCKQUOTE>
|
|
|
|
|
