Saturday 15 September 2012

HTML text formatting


Text formatting refers to the act of making text on the web page appear as desired. eg., making text italics, bold etc.

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

This is how the output will appear:

This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This is subscript and superscript

  • Pre-formatted text can be displayed using the tag <pre> </pre>. Text inside these tabs appear as such (with the same style) in the webpage.
  • Abbreviation tag:
    The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
    on moving the cursor over WHO on the browser, u'll see the abbreviation appear.

  • Quotation:

<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

<p><b>Note:</b> The browser inserts white space before and after a blockquote element. It also inserts margins.</p>

A short quotation:
<q>This is a short quotation</q>

<p><b>Note:</b> The browser inserts quotation marks around the short quotation.</p>

Output:

A long quotation:
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
Note: The browser inserts white space before and after a blockquote element. It also inserts margins.
A short quotation: This is a short quotationNote: The browser inserts quotation marks around the short quotation.

No comments:

Post a Comment