Basic HTML Formatting Tags

Basic HTML Formatting Tags

We heard a lot about html and we know the full form which is hyper text markup language.Now we will talk about the basic html tags that we use for formatting our web pages.

Formatting the webpage is an important and must done thing to have webpages properly formatted.

So let’s start the html formatting tags :-

HTML formatting tags are used for formatting a text style.The following HTML tags are used to format the appearance of the text on your web page. This can jazz up the look of the web page, however, too much variety in the text formatting can also look displeasing.

Header – <h?></h?>

There are 6 levels of headings available, from h1 for the largest and most important heading, down to h6 for the smallest heading.

Bold – <b></b>

The text in between the tags will be bold, and stand out against text around it, the same as in a word processor.

Italic – <i> </i>

Also working the same way as a word processor, italics displays the text at a slight angle.

Underline – <u></u>

Again, the same as underline in a word processor. Note that html links are already underlined and don’t need the extra tag.

Strike-out – <strike></strike>

Puts a line right through the centre of the text, crossing it out. Often used to show that text i sold and no longer relevant. Also works by using

<s></s> instead.

Preformatted Text – <pre></pre>

Any text between the pre tags, including spaces, carriage returns and punctuation, will appear in the browser as it would in a text editor (normally browsers ignore multiple spaces)

Source Code – <code></code>

Text is displayed in a fixed-width font, commonly used when showing source code.

Typewriter Text – <tt></tt>

The text appears to have been typed by a typewriter, in a fixed-width font. (*)

Block Quote – <blockquote></blockquote>

Defines a long quotation, and the quote is displayed with an extra wide margin on the left hand side of the block quote.

Small – <small></small>

Instead of having to set a font size, you can use the small tag to render text slightly smaller than the text around it. Useful for displaying the ‘fine-print’.

Font Colour – <font color=”#??????”></font> (*)

Change the colour of a few words or a section of text.

Font Size – <font size=”?”></font>

Replace the ? with a number from 1 to 7 to change the size of the font. One being the smallest and seven the largest. (*)

Font Size Change – <font size=”+/-?”></font>

For an immediate change of font size with respect to the font size preceding it, this tag increase or decreases the size of the font by the number you specify.

Eg: <font size=”-1″> Some Text </font> (*)

Change Font Face – <font face=”?”></font>

To show text in a particular font, use the font name such “Helvetica” or “Arial” or “Courier”. Be aware that using some fancy font from your computer means that the person viewing that page must also have that font installed on their computer too, otherwise it will look totally different to them. (*)

Centre – <center></center>

A useful tag, as it says, it makes everything in between the tags centred (in the middle of thepage). (*)

Emphasis – <em></em>

Used to emphasize text, which usually appears in italics, but can vary according to your browser.

Strong Emphasis – <strong></strong>

Used to emphasize text more, which usually appears in bold, but can vary according to your browser.

These all are the basic html formatting tags.

We have also made a program in html for showing you how formatting tags affects the webpage. Program code is given below with its screenshot.

Program Code :-

<html>

<head>

<title>Foramtting tag</title>

</head>

<body style=”background-color:red;”>

<h1><center>Life around you</center></h1>

<center>

<p> <b>The biggest blockbuster</b></p>

<p><blockqoute>Life teaches you everything condition is “Do you want to learn.”</blockqoute></p>

<p><i>Lets start the journey of<u> life</u></i></p>

<p>The chemical formula of carbon dioxide is CO<sub>2</sub></p>

<p><font size=”5″>Market is place where  prices discount varies from <strike>20%</strike> to 60%</font><p>

<p>The 11<sup>th</sup> season of <abbr title=”Indian Premier league”> IPL </abbr>is going on.<p>

<p> <font face=”Calibri”>In this line we have used calibri font face instead of <del> The Times new Roman</del></font></p> </center>

<center><p><code>The code tag displays in this form

<p>The 11<sup>th</sup> season of <abbr title=”Indian Premier league”> IPL </abbr>is going on.<p>

<p>

<font face=”Calibri”>In this line we have used calibri font face instead of <del> The Times new Roman</del></font></p> </code></center></p>

</body>

</html>

 

OUTPUT: