HTML REF-Character Formatting

HTML REFERENCE - Character Formatting

Logical Styles
Logical Style tags let you define to HTML how your text is to be used, not displayed. Logical tags do not give YOU the control over the appearance of the text, as the tags are interpretted by the Browsers. All tags are two-sided.

The Logical tags are:

EM.............Indicates characters are to Emphasized in some way.
STRONG...Indicates characters are to be Strongly Emphasized.
CODE........Use to show Code samples(usually Courier font).
SAMP.......Use for Example text.
DFN..........A Definition, which is used to highlight the defined word.
CITE.........A Quote or Citation.

Each item must have an open and close tag. Below is an example of a couple of the Logical Style tags.

Code as follows:
Here is a <EM>Quote</EM> about a <STRONG>ROSE</STRONG> by William Shakespeare: <CITE>"A Rose by any other name would still smell as sweet"</CITE>

EXAMPLE:
Here is a Quote about a ROSE by William Shakespeare: "A Rose by any other name would still smell as sweet"

Physical Styles
Physical Style tags let you specify how your text is to be formatted or the physical appearance of the text. If your Browser cannot interpret the tag, it may substitute the physical attribute for you. All tags are two-sided.

The Physical tags are:

B.............Bold.
I...............Italic.
TT...........Monospaced Typewriter font.
U.............Underline.
S..............Strike through.
BIG.........Bigger than the surrounding text. Multiple tags will keep increasing the text size.
SMALL...Smaller than the surrounding text.
SUB........Subscript.
SUP.........Superscript.

Each item must have an open and close tag. Below is an example of some of the Physical Style tags.

Code as follows:
Here is a <I>Quote</I> about a <BIG>ROSE</BIG> by <B>William Shakespheare</B>: <U>"A Rose by any other name would still smell as sweet"</U>

EXAMPLE:
Here is a Quote about a ROSE by William Shakespheare: "A Rose by any other name would still smell as sweet"

Creating a Quotation or Address
The "BLOCKQUOTE" tag is used to create a large quotation, unlike the "CITE" tag which just highlights smaller quotes. The "ADDRESS" tag can be used for identification of address, author, date, copyright info. or any other appropriate information or warnings you feel need to be on your page. It is usually at the bottom of a page preceeded by a rule line. Each of these tags are two-sided and must having the closing tag. You can also use the "BR" tag to break up the text in a manner of your choosing within both tag types.

Code as follows:
BLOCKQUOTE:
Here is a nursery rhyme for your enjoyment:<BLOCKQUOTE>Mary had a little lamb,<BR>who's fleece was white as snow.<BR>And every where that Mary went<BR>the lamb was sure to go.</BLOCKQUOTE>

ADDRESS:
<HR><ADDRESS>My Name<BR>author.email.address<BR>date </ADDRESS>

EXAMPLE:
BLOCKQUOTE:
Here is a nursery rhyme for your enjoyment:

Mary had a little lamb,
who's fleece was white as snow.
And every where that Mary went
the lamb was sure to go.

ADDRESS:

My Name
author.email.address
date

Breaks, Blink & Preformatted Text
Breaks, Blink and Preformatted Text let you control how your text appears on an HTML page.

BREAK lets you force a Line Feed in your text. Everywhere a "BR" tag is coded, HTML will perform a line feed. You can also instruct HTML not to Line Feed by coding the "NOBR" tag. This will insure that the entire line of text is on a single line. Use the "WBR" tag to tell the browser to break where it is appropriate instead of you coding each Break yourself. All Break tags are one sided and do not need the closing tag.

Code as follows:
Let's just keep typing <BR>and typing <BR>and typing <BR> and see what happens.<BR>

EXAMPLE:
Let's just keep typing
and typing
and typing
and see what happens.

BLINK tag causes any text between the opening and closing tags to have a blinking effect on the screen. This is an unofficial tag in Netscape and not generally documented. Be careful with BLINK because it detracts and distracts from the rest of your page. It also may not work with some browsers or with browsers that have the ability to turn Blink off. It is a two-sided tag and must have a closing tag.

Code as follows:
<BLINK>Blinking Text</BLINK>

EXAMPLE:
Blinking Text

PREFORMATTED TEXT lets you design your text and all its surrounding white spaces, exactly like you would like them to be seen. All Preformatted text is however, displayed in a Monospaced font such as Courier. It can be used to create simple tables. The "PRE" tag is a two sided tag and must have a closing tag.

Code as follows:
<PRE>

Months in each Quarter Year:
JAN   FEB   MAR
APR   MAY   JUN
JUL   AUG   SEP
OCT   NOV   DEC

</PRE>

EXAMPLE:

Months in each Quarter Year:
JAN   FEB   MAR
APR   MAY   JUN
JUL   AUG   SEP
OCT   NOV   DEC

Fonts and Font Sizes
You can customize the Fonts, Font sizes and Font colors of the text used in your HTML page, by using the "FACE", "SIZE" or "COLOR" attributes within the "FONT" tag. The "FONT" tag is two-sided and must have a closing tag. This closing is very important, because all text will be changed until the tag is closed.

The default Font size is 3. You can change the size from 3 to another number, ex: SIZE=5 or you can add or subtract value from the default..ex: SIZE=+2 which would still be 5. The Face value is any valid font name in Quotes. If the font face specified is not found, the browser will use its default. The Color value is made up of 16 Safe and many Hex colors defined more fully in Chapter 6 - Color, Marquee's, Multimedia, Images. Safe colors are those you might eaily recognize: Black, White, Grey, Silver, Blue, Navy, Teal, Aqua, Green, Olive, Lime, Yellow, Purple, Red, Maroon, Fuschia

You can also use the "BASEFONT" tag to change the font base size to another number. Ex: the default base is 3, but <BASEFONT SIZE=2> will make the base font for your document equal 2. This effects any SIZE=+ or - type settings as they will be added or subtracted from 2 instead of 3. So SIZE=+2 in this case would total a Font Size of 4.

Code as follows:
<FONT FACE="Comic sans ms" SIZE=5>Let's change Font to COMIC SANS MS and Size to 5 </FONT>

<FONT COLOR="fuchsia">Change the Font color to FUCHSIA </FONT>

EXAMPLE:
Let's change Font to COMIC SANS MS and Size to 5

Change the Font color to FUCHSIA

Alignment
Alignment can be controlled several different ways. You can control it on the Page level, individual line of text or Heading, or over a selected block of text like a paragraph, quote, image etc.

Use the "ALIGN" attribute to change the alignment of your text, headings, paragraphs, images etc. The default is Left justify, however you can specify: Left, Right or Center as your alignment value and change where your text appears on your page. Anytime a Browser does not understand or support the alignment specification, it will change to the browser default.

The "DIV" tag with a required ALIGN= attribute can be used to change the alignment for a block of text (page, heading, paragraph, quotes, images etc.) It can be used instead of coding multiple Align statements. The "DIV" tag is a two-sided tag and must have a closing tag.

In Netscape you can use the "CENTER" tag without a corresponding Align attribute to Center your text in a document. It is also two-sided and must have a closing tag. The "CENTER" tag is deprecated so don't get used to using it.

Code as follows:
<H4 ALIGN=Left>This Header is Left Justified!</H4>
<H4 ALIGN=Right>This Header is Right Justified!</H4>

<DIV ALIGN=Center>
<H5>Using DIV, everything within the tag</H5>
<H5>is aligned center without having to</H5>
<H5>code it in every Header statement!</H5>
</DIV>

EXAMPLE:

This Header is Left Justified!

This Header is Right Justified!

Using DIV, everything within the tag

is aligned center without having to

code it in every Header statement!

Chapter 4 Assignment

Next Page Previous Page Goto Top of Page