Note on Character Formating with examples

W3Schools
  • Note
  • Things to remember

Character formatting with examples

There are a number of style tags which alters the appearance or format of the text. The tags used for altering the appearance or format of the text are known as formatting tags. These tags make HTML document more attractive. Some of the tags used for formatting HTML documents are:

Opening Tag - Closing Tag

Description

<BLOCKQUOTE>…</BLOCKQUOTE>

Defines a long quotation

<BR> …

Insert a line break

<CENTER>…</CENTER

Defines centering text or paragraph

<H1>…H6> …</H1>…/H6>

Defines 1 to 6 level of headings

<HR> …

Defines horizontal rule line

<P> …</P>

Paragraph break

<PRE> … </PRE>

Defines preformatted text

Paragraph

Paragraphs are defined with the tag. It denotes a paragraph. Paragraphs allows adding text to a document in such a way that it will automatically adjust the end of the line to suit the window size of the browser in which it is being displayed. HTML automatically adds an extra blank line before and after a paragraph.

Example:

<P> This is a paragraph</P>

<P> This is another paragraph</P>

  • Heading

The heading tag is used to create heading in the document. HTML supports six different levels of headings. The highest level header format is <H1> and the lowest level is <H6>. These are generally used for major divisions or heading of the paragraph / document. Headings are not mandatory. Headings are permitted to appear in any order, but one will obtain the best results when documents are displayed in a browser if one follows these guidelines.

<H1>; should be used as the highest level of heading, <H2> as the next higher and so on.

HTML automatically adds an extra blank line before and after a heading.

Example:

<HTML>

<HEAD> <TITLE> DEMONSTRATIONOF HEADING TAGS </TITLE> </HEAD>

<BODY>

<H1> THIS IS A HEADING H1 </H1>

<H2> THIS IS A HEADING H2 </H2>

<H3> THIS IS A HEADING H3 </H3>

<H4> THIS IS A HEADING H4 </H4>

<H5> THIS IS A HEADING H5 </H5>

<H6> THIS IS A HEADING H6 </H6>

</BODY>

</HTML>

.

  • Line Breaks

A tag <BR> can be used to end line. It forces a line break. It does not add extra line spaces like <P>. <BR> is a singular tag.

  • Horizontal Rule

The <HR> Horizontal rule tag allows adding a horizontal line across the Web page. It is also a singular tag.

Text-Formatting Tags

The process of changing the appearance of the HTML document is known as text formatting or text element formatting. The Web browser only identifies the single spaces between the words or text. For giving line breaks and paragraph breaks, formatting tags are used.

OPENING TAG - CLOSING TAG

DESCRIPTION

<ABBR> …</ABBR>

Defines an abbreviation

<ACRONYM> …</ACRONYM>

Defines an acronym

<ADDRESS> …</ADDRESS>

Defines an address element

<B> or <STRONG>…</B> or </STRONG>

Defines boldface (strong) text

<BIG> …</BIG>

Defines big text

<BLOCKQUOTE> …</BLOCKQUOTE>

Defines a long quotation

<CITE>…</CITE>

Defines citation

<CODE>…</CODE>

Defines computer code text

<DEL>…<DEL>

Defines deleted text

<DFN>…</DFN>

Defines definition term

<I> or <EM>…</I> or </EM>

Defines Italic (Emphasized) text

<INS>…</INS>

Defines inserted text

<PRE> …</PRE>

Defines preformatted text

<Q> …</Q>

Defines short quotation

<SAMP> …</SAMP>

Defines sample computer code

<SMALL> …</SMALL>

Defines small text

OPEINING TAG - CLOSING TAG

DESCRIPTION

<STRIKE>…</STRIKE>

Defines strike through text

<SUB>…</SUB>

Defines subscripted text

<SUP>…</SUP>

Defines superscripted text

<TT>…</TT>

Defines teletype text

<U>…</U>

Defines underline text

<VAR>…</VAR>

Defines a variable

For example:

<HTML>

<HEAD> <TITLE> DEMONSTRATION OF TEXT FORAMTTING TAGS </TITLE </HEAD>

<BODY>

<B>THIS TEXT IS BOLD</B>

<BR><STRONG>THIS TEXT IS STRONG</STRONG>

<BR><BIG>THIS TEXT IS BIG</BIG>

<BR><EM>THIS TEXT IS EMPHASIZED</EM>

<BR><I>THIS TEXT IS ITALIC</I>

<BR><SMALL>THIS TEXT IS SMALL</SMALL>

<BR>SUBSCRIPT H<SUB>2</SUB> SO <SUB>4 </SUB> =SULPHURIC ACID

<BR>SUPERSCRIPT (A+B) <SUP>2 </SUP> =A<SUP>2</SUP>+2AB+B<SUP>2</SUP>

<BR><CODE> COMPUTER CODE</CODE>

<BR><KBD> KEYBOARD INPUT</KBD>

<BR><TT> TELETYPE TEXT</TT>

<BR> <SAMP> SAMPLE TEXT</SAMP>

<BR><VAR> COMPUTER VARIABLE</VAR>

</BODY>

</HTML>

.

  • Nested tags (Tag inside tag or multiple tag)

In the above example, we saw a line of code with nested tags. <BR> <STRONG> these are both used to insert a line break and strong or same as bold </STRONG>. When you use nested tags, you must be sure that they do not overlap each other. They must be nested exactly. For example, some parts of text may insert a line break and strong or bold the text.

  • Font Tag

The tag <FONT> is used for setting the size, color and face of any text on the Web page. This is a paired tag. It has the format of:

<FONT SIZE=”1 to 7” COLOR=”Color name” or RRGGBB” FACE=”font name”>…………. </FONT>

where, SIZE attribute can take any value from 1 to 7, with 3 being the normal default size. COLOR attribute can take any of the following standard color names like black, white, red, green, blue, yellow, gray, purple, aqua, lime, maroon, navy, silver, fuchsia, olive or teal. Color can also be specified by using the color code of RRGGBB in terms of Hexadecimal numbers. Each color can have 00 to FF range. Such as:

RRGGBB

COLOR

000000

Black

FFFFFF

White

FF0000

Red

00FF00

Green

0000FF

Blue

Face attribute is used to set the font type for the text.

Example:

<HTML>

<HEAD> <TITLE>DEMONASTRATION OF FONT TAG</HEAD>

<BODY>

<FONT SIZE=”5” COLOR=”purple” FACE=”Book Antiqua”>WRITE WHAT U LIKE</FONT>

</HTML>

(Shrestha, Manandhar and Roshan)

Bibliography

Shrestha, Prachanda Ram, et al. Computer Essentials. Kathmandu: Asmita's Publication, 2014.



  • There are a number of style tags which alter the appearance or format of the text. The tags used for alter the appearance or format of the text are known as formatting tags.
  • Under the character and text formatting here are the some of the tags that are used in: 
  1. Paragraph (Start a new paragraph)
  2. Heading (Deals with heading from H1-H6)
  3. Line breaks( Make a Straight line)
  4. Horizontal rule( Make a Horizontal rule or line)
  5. Nested tags (Tag inside tag or multiple tag)
  6. Font tag ( Deals with the font formatting)
.

Very Short Questions

0%

DISCUSSIONS ABOUT THIS NOTE

No discussion on this note yet. Be first to comment on this note