Learn HTML EASY TO UNDERSTAND Chapter 4 ~ Education

Chapter 4: Character Formattting
• Change the color and size of your text.
• Use Common Character Formatting Elements.
• Align your text. Add special characters.

• Use other character formatting elements.

In this chapter you will learn how to enhance your page with Bold, Italics, and other character formatting options.

OBJECTIVES

Upon completing this section, you should be able to

Change the color and size of your text.
Use Common Character Formatting Elements.
Align your text.
Add special characters.
Use other character formatting elements.

Bold, Italic and other Character Formatting Elements

Two sizes biggerText size can be modified with the font element and the size attribute. The size attribute can be set as an absolute value from 1 to 7 or as a relative value using the "+" or "-" sign. Normal text is size 3.
 Bold 
 Italic 
 Underline (Not recommended, as links are underlined.)
Color = #RRGGBB" The COLOR attribute of the FONT element.

E.g. this text has color

<PRE> Preformatted </PRE> >Text enclosed by PRE tags is displayed in a mono-spaced font. Spaces and line breaks are supported without additional elements or special characters.
 Emphasis  browsers usually display this as italics.
 STRONG  browsers display this as bold.
<TT> TELETYPE </TT> Text is displayed in a mono-spaced font.
<CITE> Citation </CITE> represents a document citation.

Sample Coding:
One Size Larger - Normal -
One Size Smaller 
Bold - Italics - Underlined -
Colored 
Emphasized - Strong -
<TT>Tele Type</TT> 
<CITE>Citation</CITE>
Netscape Navigator Sample

Alignment
Some elements have attributes for alignment (ALIGN) e.g. Headings, Paragraphs and Horizontal Rules. The three alignment values are: LEFT, RIGHT, CENTER.
Alignment of many other elements is not well supported, meaning that you can’t rely on getting the desired results. Proper positioning of all of the components in a web page can be achieved by using other elements to control alignment:

<DIV ALIGN="value"></DIV> Represents a division in the document and can contain most other element types. The alignment attribute of the DIV element is well supported.
<CENTER></CENTER> Will center elements.
<TABLE></TABLE> Inside a TABLE, alignment can be set for each individual cell.

Special Characters & Symbols
Special Characters and Symbols not found on the average keyboard can be inserted using special character entities.These special characters are specified in an internationally accepted character set known as the ISO-Latin-1 (ISO-8859-1).
These characters are recognized in HTML as they begin with an ampersand and end with a semi-colon e.g.&value; The value will either be an entity name or a standard ASCII character number.
The following table represents some of the more commonly used special characters. For a comprehensive listing, visit the W3C’s section on special characters at:http://www.w3.org/MarkUp/HTMLPlus/htmlplus_13.html

SPECIAL CHARACTERS:

Special Character	Entity Name	Special Character	Entity Name
ampersand	&	greater-than sign	>
asterisk	&lowast;	less-than sign	<
cent sign	¢	non-breaking space
copyright	©	quotation mark	"
fraction one qtr	¼	registration mark	®
fraction one half	½	trademark sign	™

Additional Character Formatting Elements
<STRIKE>>strike-through text </STRIKE>

<BIG> places text in a big font </BIG>

 places text in a small font 

 places text in subscript position 

 places text in superscript style position

Example 1:
<STRIKE> strike-through text </STRIKE> 

<BIG> places text in a big font </BIG> 

 places text in a small font 

 places text in subscript position Normal

 places text in superscript style position

Results 1: (viewed in Navigator )

These special formatting elements are used for technical documentation applications:

<DFN> defining instance of the enclosed term </DFN>

<CODE> used for extracts of program code </CODE>>

<SAMP> used for sample output from programs, scripts,
etc. </SAMP>

<KBD> used for text to be typed by the user </KBD>

<VAR> used for variables or arguments to
commands</VAR>

Example 2:
<DFN> defining instance of the enclosed term </DFN> 

<CODE> used for extracts of program code </CODE> 

<SAMP> used for sample output from programs, scripts, etc. </SAMP> 

<KBD> used for text to be typed by the user </KBD> 

<VAR> used for variables or arguments to commands </VAR> 

Results 2: (viewed in Navigator )

<BASEFONT>

Used to set the base font size. The size attribute is an integer value ranging from 1 to 7. The base font applies to the normal and preformatted text but not to headings, except where these are modified using the FONT element with a relative font size

</BASEFONT>

<BLOCKQUOTE>

This element is used to enclose block quotations from other works or to indent sections of a document. (It indents from both sides in a browser) This element can also contain most other formatting elements such as Headings, paragraphs, tables, etc.

</BLOCKQUOTE>

<ADDRESS>

The address element specifies information such as authorship and contact details for the current document. There is no support for an alignment attribute with the <ADDRESS> element. You will need to use some other method if you want the address displayed differently from left aligned.

</ADDRESS>

Example 3:
<BLOCKQUOTE>This is the first day of the rest of your life, make it count.</BLOCKQUOTE>

<CENTER><ADDRESS>180 Attwell Dr. Suite 130 Toronto, ON M9W 6A9</ADDRESS>
</CENTER>

<H6>Heading 6</H6>

Paragraph 6, ...

Results 3:

This is the first day of the rest of your life, make it count.

180 Attwell Dr. Suite 130
Toronto, ON
M9W 6A9

Heading 6

Paragraph 6, ...

HTML Tip
BlockQuotes can be "nested" – inserted multiple times in succession – to indent a section significantly. This technique also helps you to create more white space on the sides of your pages.

Chapter 4 – Exercise 1

In this exercise you will add special characters and formatting elements.
Procedure

Below the bottom Horizontal Rule, add © XYZ Corporation, and center it on the page.
At the end of the line you just added, insert a trade mark symbol using .
After the information you just added, add an address element and enter in your company’s address.
Your document should look similar to this sample:

© XYZ Corporation

180 Attwell Dr. Suite 130 Toronto, ON M9W 6A9

</ADDRESS>

© XYZ Corporation ™

180 Attwell Dr. Suite 130
Toronto, ON
M9W 6A9

Save your file and then Preview your document in a browser.

Chapter 4 – Exercise 2

In this exercise you will work with more formatting elements.
Procedure

Add a Block Quote under each H3 and describe a bit about the project.
Change the color of the text in the Block Quote to blue.
Decrease the size of the text in the block quote.
Your document should look similar to this:

<H3>Intranet Project</H3>

<BLOCKQUOTE>The Intranet Project plays a very important role in increasing the communication between departments and employees here at XYZ Corp.</BLOCKQUOTE>

<H4>Intranet Project Plan</H4>

Intranet Project

The Intranet Project plays a very important role in increasing the communication between departmentsand employees here at XYZ Corp.

Intranet Project Plan

Chapter 4 – Optional Exercise

This exercise provides additional practice.Procedure

Add some text about the Division or Department in the Paragraph below the H2, and try some of the other character formatting elements.
Center the address at the bottom of the page.

Review Questions

What are six elements for formatting characters?
What are two methods for centering text?
How would you add the copyright symbol to a page?
What are the steps required to change text color?

Summary

As a result of this chapter, you should be able to

Change the color and size of your text.
Use common character formatting elements.
Align your text.
Add special characters and symbols.
Use additional character formatting elements.

Education

Tuesday, 3 May 2016