Lecture-4 : FORMATTING TAGS

Formatting tags are used to format the web page. These tags give a more organise and easy to read a document and make use of line break, paragraph, heading, font type, font etc tags.

HEADER TAG : These tags are used for printing headings. The tags are <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. These tags create the headlines in our web pages by displaying bold text in verity of sizes. <h1> is the highest level or biggest level heading and <h6> is the lowest level heading.

Example of Header Tag:

<html>
<body>
<h1>Heading 1 Biggest</h1>
<h2>Heading 2 smaller</h2>
<h3>Heading 3 smaller</h3>
<h4>Heading 4 smaller</h4>
<h5>Heading 5 smaller</h5>
<h6>Heading 6 smallest</h6>
</body>
</html>


Output:-



Font tag: This tag makes the text font bigger, smaller, bolder and can change the color of the text. Fonts are one of the most visual elements of our web page.

Attributes of Font
1.Font Family
2.Font Size
3.Font Color

Example:

<FONT SIZE=”10PX” COLOR=”YELLOW” FACE=”TIMES NEW ROMAN”> ENTER THE TEXT </FONT>


Text Formatting Tags

The text formatting tags are written in the following style:
<tag> text </tag>

Examples of Text Formatting Tags

Bold tag :- Makes the text look bold.
Syntax :- <B> Text </B>

Italic tag :- Makes the text look Italic.
Syntax :- <I> Text </I>

Underline tag :- Underlines the tag
Syntax :- <U> Text </U>

<BIG> & <SMALL> :- This tag makes the text look bigger and smaller
Syntax :- The text look <big> Big </big> and this look <small>small</small>

<SUB> & <SUP> :- <SUB> sets the subscripts. This puts the characters lower down than the regular text. <SUP> sets the text as superscripts, which puts the characters higher up than regular text
Syntax: <SUP> text </SUP> and <SUB> text </SUB>

Blink Tag :- It allows the tag blink
Syntax <Blink> Text </Blink>

Strong tag :- This tag usually displays the text in bold which emphasizes text strongly.
Syntax <Strong> text </strong>

Deleted text tag :- Marks text as deleted and displays as strikethrough text in browser.
Syntax <Del> text </Del>

Center tag :- This tag helps to align text which it contented in the center of web page.
Syntax <center> text </center>

Break Tag :- This tag helps to break the line and take the text following it on the next line.
Syntax text <br>

Paragraph tag :- Paragraph tags are used to define the HTML paragraph element. The paragraph element begins with the HTML <p> tag and ends with the HTML </p> tag. The HTML paragraph element should not contain tables and other block elements.
Syntax <p> text </p>

Here is a example of all these tags:

<html>
<head>
<title>Formatting text example</title>
</head>
<body>
This is Example of <b> Bold text </b> <br>
This is Example of <i> Italic text </i> <br>
This is Example of <u> Underline text </u> <br>
This is Example of <big> Big text </big> <br>
This is Example of <small> Small text </small> <br>
This is Example of <sup> superscript text </sup> <br>
This is Example of <sub> subscripts text </sub> <br>
This is Example of <blink> Blink Tag </blink> <br>
This is Example of <strong> Strong tag </strong> <br>
This is Example of <del> Deleted text </del> <br>
This is Example of <center> Centered text </center>
</body>
</html>


Output:-



Pre-formatted Text (PRE)
Pre-formatted text between the start and end PRE tag is rendered using a fixed with font, in addition white space characters are treated literally. The spacing and line breaks are rendered directly, unlike other elements, for which repeated white space characters are collapsed to a single space character and line breaks introduced automatically.
Line breaks within the text are rendered as a move to the beginning of the next line. The exceptions are line breaks immediately following the starting PRE tag or immediately preceding the ending PRE tag, which should be ignored.
• The <P> tag should be avoided, but for robustness, user agents are recommended to treat these tags as line breaks.
• Anchor elements, and character highlighting elements may be used.
• FORM elements may be included, and the fixed width font exploited to control layout (the TAB or TABLE elements give similar control for normal text though).
• Block-like elements such as headers, lists, FIG and TABLES should be avoided.
• The horizontal tab character should be interpreted as the smallest nonzero number of spaces which will leave the number of characters so far on the line as a multiple of 8. Its use is deprecated!

Example of <pre> tag:

<<html>
<head>
<title>HTML preformatted text</title>
</head>
<body>
<pre>
This is Pre tag.
</pre>
</body>
</html>


Output:-



Text Alignment

The align tag specifies to show the text on left side, right side or at center. Its default value is left. For example, <p align=”center”>This will show text in center</p>.
Its attributes are :-
• Left :- This makes the text to appear at left.
• Right :- Aligns the text to right.
• Center :- Aligns the text to center.
• Justify :- Stretches the lines so that each line has equal width.
• Initial :- Sets the property to its default.
• Inherit :- Inherits the property from its parent element.

Example:

<<html>
<head>
<title>HTML text alignment</title>
</head>
<body>
<p align="center"><b>The text is at center.</b></p>
<p align="left"><b>The text is at left.</b></p>
<p align="right"><b>The text is at right.</b></p>
<p align="justify"><b>The text is justified.</b></p>
</body>
</html>


Output:-