HTML Text Formatting tags and Preformatted tag



HTML Text Formatting Elements

<b>             Defines bold text
<i>              Defines italic text
<u>            Defines underlined text   
<em>          Defines emphasized text
<small>       Defines smaller text
<strong>     Defines important text
<sub>         Defines sub-scripted text
<sup>         Defines super-scripted text
<mark>       Defines marked/highlighted text

Sample 01

<html>
<head>
                   <title>Bold Italic Underline</title>
</head>
<body style="background-color:gold;">
<b>Sharp Land</b><br/>
<u>Sharp Land</u><br/>
<i>Sharp Land</i><br/>
</body>

</html>

Tag Nesting

We can nest tags as below tag nesting produces the combined result. But, following the order of tags used is important.

Example : <b><u><i>Sharp Land</i></u></b> is right

Example : <b><u><i>Sharp Land</b></u></i> is wrong


Sample 02

          <html>
                   <head>
                    <title>Tag Nesting</title>
</head>
<body style="background-color:gold;">
                    <b><u><i>Sharp Land</i></u></b>
</body>

</html>


Sample 03: Superscript and Subscript

<html>
<head>
<title>Superscript and Subscript</title>
</head>
<body style="background-color:gold;">      
<big>10</big><sup>th</sup>
                   <br>
<big>H</big><sub>2</sub><big>O</big>
</body>

</html>

HTML <q> for Short Quotations
The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.

Sample 04

<html>
<head>
          <title>Quotation marks</title>
</head>
<body style="background-color:gold;">
          <p>WWF – World Wildlife fund's goal is to:
          <q>Build a future where people live in harmony with nature.</q>
          </p>
</body>
</html>

HTML <blockquote> for Long Quotations
The HTML <blockquote> element defines a quoted section. Browsers usually indent <blockquote> elements.

Sample 05

 <html>
<head>
          <title>Block Quoted Section</title>
</head>
<body style="background-color:gold;">
          <p>Here is a quote from WWF's website:</p>
          <blockquote>
          For 50 years, WWF has been protecting the future of nature.
          The world's leading conservation organization,
          WWF works in 100 countries and is supported by
          1.2 million members in the United States and
          close to 5 million globally.
          </blockquote>
</body>
</html>

HTML <abbr> for Abbreviations
The HTML <abbr> element defines an abbreviation or an acronym. Marking abbreviations can give useful information to browsers, translation systems and search-engines.

Sample 06

<html>
<head>
          <title>Abbreviation Sample</title>
</head>
<body style="background-color:gold;">
          <p>
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</p>
</body>
</html>

HTML <address> for Contact Information
The HTML <address> element defines contact information (author/owner) of a document or article.
The <address> element is usually displayed in italic. Most browsers will add a line break before and after the element.

Sample 07

<html>
<head>
          <title>Address tag Example</title>
</head>

<body style="background-color:gold;">
          <address>
          Sharp Land<br/>
          Software Training Division<br/>
          Opp.Fire Service,West Car Street,<br/>
          Dindigul - 624001<br/>
          www.sharpland.in
          </address>
          <br/>
          <address>
          Sharp Land<br/>
          Software Training Division<br/>
          Near Century Book House,<br/>
          AMC Road, Dindigul - 624003<br/>
          www.sharpland.net
          </address>
</body>
</html>

The HTML <pre> Element
Suppose if we wish to display lines as below with needed line breaks, generally HTML displays that in single line without line breaks.

The woods are lovely, dark and deep,  
But I have promises to keep,  
And miles to go before I sleep,  
And miles to go before I sleep.

The HTML <pre> element defines preformatted text.  The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

Sample 08

<html>

<head>
          <title>Sharp Land </title>
</head>

<body>

<h3>Stopping by Woods on a Snowy Evening</h3>       
<pre>
The woods are lovely, dark and deep,  
But I have promises to keep,  
And miles to go before I sleep,  
And miles to go before I sleep.
</pre>
By Robert Frost,
</body>

</html>


No comments:

Post a Comment