Chapter: 11th Computer Applications : Chapter 11 : HTML - Formatting text, Creating Tables, List and Links
Text Formatting Tags of HTML
Text
Formatting Tags of HTML
In
the previous chapter you learnt how to create a web page with basic elements.
In this section, you are going to learn about how to format the text such as
making bold, italic, underline, changing font style, font size, font color and
more. Formatting text is very important as well as interesting task in creating
web pages. Formatting is purely based on your imagination and creativity.
1. Bold, Italics, Underline
<b>, <i>, <u> are the tags to make the text as
bold, italic and underline. These are all
container tags. You know well about container tags. All container tags
required a closing tag. These tags are otherwise known as “Physical Style” tags.
Illustration 11.1 Text Formatting
<html>
<head>
<title> Text
Formatting </title>
</head>
<body>
<h1 align =
center> Kancheepuram </h1>
<b>
Kanchipuram is part of Tondaimandalam </b> <br> <i>
Kanchipuram is 72 km away from Chennai </i> <br>
<u> It is the
administrative headquarters of Kancheepuram District. </u>
<br>
<b><i>
Kanchipuram is well-connected by road and rail. </i> </b>
<p> Chennai
<b> International Airport </b> is the nearest domestic and
international airport to the town, which is located at Tirusulam in Kanchipuram
district. </p>
</body>
</html>
Output will be:
2. <strong> and <em> tags
In
addition to bold and italic tags i.e. <b> and <i>, HTML provides
<strong>, <em> tags to make the text as bold and italics. These
tags are container tags.
<strong>
Important text
The
<strong> tag is a phrase tag. It is used to define important text. This
tag displays the text as bold.
<em> -
Emphasized text
The
<em> tag is used to emphasize the text. That means, when you use this
tag, the text will be in italics.
Visually
these two tags display the contents as very similar as <b> and <i>
respectively.
But,
technically the meaning of <strong> and <em> is “Important” not
just bold and italics.
Illustration 11.2 Usage of <strong> and <em> tags
<html>
<head>
<title>
Additional Text Formatting Tags </title> </head>
<body>
<strong> Welcome to Tamilnadu </strong> <br>
<em> Welcome to Tamilnadu </em>
</body>
</html>
Output will be:
3. <big> and <small> tags
The
<big> tag is used to define
the text bigger in size than the normal size. It is often used to call
attention a text.
The
<small> tag is used to define
the text smaller than the current size.
These
two tags are container tags.
Illustration 11.3 Usage of <big> and <small>
<html>
<head>
<title> Small
and Big tags </title>
</head>
<body>
Govenment of
Tamilnadu <br>
<big> Madurai Corporation
welcomes you </big> <br>
<small> Thank you! Visit again </small>
</body>
</html>
Output will be:
4. Highlighting text
Highlighting
is an important formatting feature is used to call attention to the reader. The
<mark> tag is used to
highlight the text in HTML. This is also a container tag. Whatever the text
given between <mark> and </mark> will be displayed as highlighting
with default color (mostly yellow).
Illustration 11.4 Usage of <mark>
<html>
<head>
<title>
Highlighting text </title>
</head>
<body>
A Computer is an <mark> electronic </mark> device </body>
</html>
Output will be:
5. Subscript and Superscript
A
Subscript is a way to display a character or a number below the normal line of
type. For example: The scientific notation for water is H2O. It
should be written as H2O. Here, 2 is appearing below the normal
line. This is called subscript.
A
Superscript is also a way to show a character or a number above the normal line
of type. For example: The familiar algebra equation “a plus b the whole square”
should be written as (a+b)2. Here, the square value 2 is appearing above the
normal line. This is called superscript.
Usually,
the subscript and the superscript character or number is smaller than the rest
of the text.
In
HTML, the <sub> and <sup> tags are used to create
subscript and superscripts respectively. As like as other formatting tags, this
is also a container tag.
The
text or number given between <sub>
and </sub> will be displayed
as subscript. Same as subscript, the text or number given between <sup> and </sup> will be displayed as superscript.
Illustration: 11.5 Usage of <sub> and <sup>
<html>
<head>
<title>
Subscript and Superscript </title>
</head>
<body>
The scientific
notation of Water is H<sub>2</sub>O <br>
(a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup>
</body>
</html>
The output will be:
6. Inserting and Deleting
The
text what you see on browser cannot delete or insert. But you can show a text
as deleted or inserted. <del>
and <ins> tags are used to
markup a segment of text as deleted or inserted respectively. These two tags
are container tags.
The
text what you specify between <del>
and </del> will be displayed
as strike through.
The
text you specify between <ins>
and </ins> will be shown as
underlined.
Illustration: 11.6 Usage of <del> and <ins>
<html>
<head>
<title>
Inserting and Deleting text </title>
</head>
<body>
I am coming from <del> Madras</del> <ins> Chennai </ins>
</body>
</html>
The output will be:
7. Strike through:
To
display a text as wrong text, the <s>
tag can be used to show the text as strike through style. The <s> and <del> tags are display the text in similar way. This is also
a container tag. The text you specify between <s> and </s>
will be display in strike through style.
8. Comparison of tags:
A
few tags do the same things you have learned so far. For example, <b> and <strong>, <i> and <em>, <u> and <ins> and so on. These tags may
be shows the same output, but the usage
of tags are varying. The following table shows the usage of this kind of tags.
While writing HTML document, you should use the appropriate
tags according to its usage. If you want show a text as underlined use <u> instead of <ins>.
9. The Center Tag
Paragraphs
can be centered with Align attribute with <p> tag. But for non-paragraph
text contents can be centered with <center> tag. The <center> tag
is used to centralize a segment of text. It is a container tag. That means,
what you type between <center> and </center> will be displayed in
the center of the browser.
Illustration 11.7 Center the text
<html>
<head>
<title>
Center the text </title>
</head>
<body>
<h1 align =
center> Thiruvallur </h1>
<center> Thiruvallur was
originally known as Thiruvallur which specifies the sleeping position of the holy lord <b> "Balaji" <b>,
in the
<b> <u> Veeraragava swamy
temple of Thiruvallur. </b>
</u> </center> </body>
</html>
Output will be
Related Topics