\

Department of Civil and Environmental Engineering
Kaufman Hall Room 135
Frank Batten College of Engineering and Technology
Old Dominion University
Norfolk, Virginia 23529-0241, USA
Tel) (757) 683-3753
Fax) (757) 683-5354


	

 
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>


Jump back to HTML Survival Kit Table of Contents (TOC) ©1995-2016
J. Yoon