What are various text formatting used in HTML document? Explain with example?
HTML uses a number of elements to format the text. You can
change the heading styles, make paragraphs, add list, change font color and size
etc. The elements that are available to perform such formatting are classified
into following categories.
·
Inline elements
·
Bloke-level elements
INLINE
ELEMENTS
Inline elements are those elements that are used to format
some words, single word or even a single character in a sentence on a webpage.
They do not have a line break before and after them. Sometimes it is also
referred to as character formatting.
Inline elements can be further categorized into two
categories.
·
Physical Inline elements
·
Logical Inline elements
PHYSICAL
INLINE ELEMENTS
It specify what final appearance of the contained text
should look like. The various physical inline elements are:
|
ELEMENTS
|
PURPOSE
|
EXAMPLE
|
RESULT
|
|
<I>………</I>
<B>………</B>
<U>………</U>
<SUB>………</SUB>
<SUP>………</SUP>
<STRIKE>…</STRIKE>
<TT>………</TT>
<small>………</small>
<big>………</big>
|
Italicize text
Bold text
Underline text
Subscript text
Superscript text
Strike through text, used to show
corrections.
Type writer font
Smaller font
Bigger font
|
<I>text</I>
<B>text</B>
<U>text</U>
H<SUB>2</SUB>O
Y=x<SUP>2</SUP>
<STRIKE>Mistake
</STRIKE>
<TT>Fixed width text</TT>
<small>small size
</small>
<small>Bigger size
</small>
|
Text
Text
Text
H2O
Y=x2
Fixed width Text
Small size
Bigger size
|
Example:-
<Html>
<head>
<title> Physical Inline Elements</title>
<Head>
<body>
GOOD MORNING
<i>INDIA</i>
<b>IS KNOWN FOR</b>
<u>DIFFERENT CULTURES</u>
S<sub>2</sub>O
<strike>IS</strike>
<tt>SULPHUR </tt>
<small>DIOXIDE</small>
<big>which is used for many purposes.</big>
y=x<sup>2</sup> is a equation.
</body>
</html>
LOGICAL
INLINE ELEMENTS
Logical Inline Elements implicitly describe the text
according to its meaning. They tell the browser that the text contained is
different from ordinary text but it is up to the browser how to display text.
|
ELEMENTS
|
PURPOSE
|
EXAMPLE
|
RESULT
|
|
<def>…</def>
<em>…</em>
<cite>…</cite>
<code>…</code>
<samp>…</samp>
<strong>…</strong>
<KBD>…</KBD>
<var>…</var>
<acronym>..</acronym>
|
Definition of words, typically
displayed in italics.
For emphasizing important parts of
document.
Citation
For coding
For sample
Text
For strong emphasis.
For text as Keyboard input.
For indicating variable
For specifying text as acronyms
|
<def>Visual Basic</def>
<em>Deadline is
25.10.2007</em>
<cite>Text</cite>
<code>
for(i=0;i<=5;i++)
cout<<i;
</code>
<samp>Internet in a
day</samp>
<strong>Important
data</strong>
Clear
Screen--<kbd>cls</kbd>
<var>Int p;</var>
<acronym> WAP</acronym>
|
Visual
Basic
Deadline is 25.10.2007
Text
for(i=0;i<=5;i++) cout<<> Int p;
Internet
in
a day
Important
data
Clear Screen—cls
Int p;
WAP
|
Example :-
<html>
<head>
<title> Logical Inline Elements</title>
<Head>
<body>
<em>Deadline is 25.10.2011</em>
<def>INTERNET PROGRAMING</def>
<samp>Have a nice day</samp>
<strong>Important day is Tuesday</strong>
<code>
for(j=0;j<=5;j++)
cout<<j;
</code>
<var>Int r;</var>
Clear Screen--<kbd>cls</kbd>
DOCOMO<Acronym> Do Communication On
Mobile</Acronym>
</body>
</html>
BLOCK LEVEL
ELEMENTS
Block level elements render any applicable formatting and
insert an additional line break or carriage return before and after the block
i.e. they all start on their own new line.The block level elements are :
HEADINGS (<H1>, <H2>……., <H6>)
Headings are used to create headlines in documents such as
title of the page.HTML supports six heading levels
<H1>,<H2>,<H3>,<H4>,<H5> and <H6>.
Example:-
<html>
<head>
<title> Applying headings</title>
</Head>
<body>
<h1> BCA </h1>
<h2> BCA </h2>
<h3> BCA </h3>
<h4> BCA </h4>
<h5> BCA </h5>
<h6> BCA </h6>
</body>
</html>
PARAGRAPH TAG (<P>)
Paragraph tag <p> is used to divide the document looks
like a single large paragraph into sections, So to make it editable easily.
Example:-
<html>
<head>
<title>About Paragraph</title>
</Head>
<body>
<p>Look into my eyes - you will see, what you mean to
me </p>
<p align="right">Search your heart - search
your soul, and when you find me there you'll search no more </p>
</body>
</html>
LINE BREAK TAG (<BR>)
<BR> tag ends the line at the position where you place
it and takes the cursor to the beginning of the new line.
Example:-
<html>
<head>
<title>About break</title>
</head>
PGGC-46=<br>
BCA<br>
BA<br>
B.COM<br>
M.COM<br>
</body>
</html>
HORIZONTAL RULE TAG (<HR>)
The <HR> is used to insert horizontal line in the
document. It is mostly used to separate document sections.
Example :-
<Html>
<head>
<title>Horizontal line</title>
</head>
It is used to insert horizontal line
<hr>
</body>
</html>
ADDRESS TAG (<ADDRESS>)
The <address> tag is used to indicate the name,
address and e-mail addresses of the owner of the webpage. It generally displays
its contents in italics.
Example :-
<Html>
<head>
<title>Address tag</title>
</Head>
<adress>
VIKAS BAILWAL<br>
#511/2, SECTOR-41A, CHANDIGARH</br>
Chandigarh.
</address>
</body>
</html>
BLOCKQUOTE TAG (<BLOCKQUOTE>)
The <BLOCKQUOTE> tag is used to represent large
quotations in a separate block in the browser’s window.
Example:-
<html>
<head>
<title>Quotation</title>
</head>
<blockquote>
"When there is a will<br>
there is a way"
</blockquote>
</body>
</html>
Comments
Post a Comment