Lesson 4: Formatting
HTML Formatting list with examples
The most common formatting options that most of us are familiar with are bold, underlined, and italics. These are some of how the appearance of text can be altered for different user experiences and perceptions. HTML and XHTML support several forms of text formattiɴg, which shall be discussed in detail in this chapter
Bold text
In order to bold text, the <b>…</b> tags are used. Any content that lies between the opening and closing tag is formatted accordingly. Sample code to illustrate how these tags work is given below for your reference<!doctype html>
<html>
<head>
<title>bold text demo</title>
</head>
<body>
<p>Example: <b>bold</b> text.</p>
</body>
</html>
The webpage corresponding to this code shall look like the image shown below
Italic text
In order to italicize text, the <i>…</i> tags are used. Any content that lies between the opening and closing tag is formatted accordingly. The sample code to illustrate how these tags work is given below for your reference.<!doctype html>
<html>
<head>
<title>Italic text demo</title>
</head>
<body>
<p>Example: <i>Italic</i> text.</p>
</body>
</html>
The webpage corresponding to this code shall look like the image shown below.
Underlined text
In order to underline text, the <u>…</u> tags are used. Any content that lies between the opening and closing tag is formatted accordingly. Sample code to illustrate how these tags work is given below for your reference.
<!doctype html>
<html>
<head>
<title>Underline text demo</title>
</head>
<body>
<p>Example: <u>Underline</u> text.</p>
</body>
</html>
The webpage corresponding to this code shall look like the image shown below.
Strike text
In order to strike text, the <strike>…</strike> tags are used. Any content that lies between the opening and closing tag is formatted accordingly. Sample code to illustrate how these tags work is given below for your reference.
<!doctype html>
<html>
<head>
<title>Strike text demo</title>
</head>
<body>
<p>Example: <strike>Strike</strike> text.</p>
</body>
</html>
The webpage corresponding to this code shall look like the image shown below.
ᴍonospaced text
In order to bold text, the <tt>…</tt> tags are used. Any content that lies between the opening and closing tag is formatted accordingly. Sample code to illustrate how these tags work is given below for your reference.
<!doctype html>
<html>
<head>
<title>monospaced text demo</title>
</head>
<body> <p>example: <tt>monospaced</tt> text.</p> </body>
</html>
The webpage corresponding to this code shall look like the image shown below.
Superscript text
In order to format text as superscript, the <sup>…</sup> tags are used. Any content that lies between the opening and closing tag is formatted accordingly. Sample code to illustrate how these tags work is given below for your reference.
<!doctype html>
<html>
<head>
<title>Superscript text demo</title>
</head>
<body> <p>Example: <sup>Superscript</sup> text.</p> </body>
</html>
The webpage corresponding to this code shall look like the image shown below.
Subscript text
In order to format text for it to appear as subscript, the <sub>…</sub> tags are used. Any content that lies between the opening and closing tag is formatted accordingly. Sample code to illustrate how these tags work is given below for your reference.
<!doctype html>
<html>
<head>
<title>Subscript text demo</title>
</head>
<body>
<p>Example: <sub>Subscript</sub> text.</p>
</body>
</html>
The webpage corresponding to this code shall look like the image shown below.
Inserted text
In order to format text so as it appears as inserted text, the <ins>…</ins> tags are used. Any content that lies between the opening and closing tag is formatted accordingly. Sample code to illustrate how these tags work is given below for your reference.
<!doctype html>
<html>
<head>
<title>Inserted text demo</title>
</head>
<body>
<p>I want to learn <del>java</del> <ins>html</ins></p>
</body>
</html>
The webpage corresponding to this code shall look like the image shown below.
deleted text
To format text so as it appears as deleted text, the <del>…</del> tags are used. Any content that lies between the opening and closing tag is formatted accordingly. Its usage has been demonstrated in the previous example
Larger text
In order to format text so as it appears as larger text, the <big>…</big> tags are used. Any content that lies between the opening and closing tag is formatted Any content that lies between the opening and closing tag is formatted in such a manner that its font size is larger than that of other text in the same html document. Sample code to illustrate how these tags work is given below for your reference.
<!doctype html>
<html>
<head>
<title>Larger text demo</title>
</head>
<body>
<p>Example: <big>big</big> text.</p>
</body>
</html>
The webpage corresponding to this code shall look like the image shown below.
Small text
In order to format text so as it appears as smaller text, the <small>…</small> tags are used. Any content that lies between the opening and closing tag is formatted Any content that lies between the opening and closing tag is formatted in such a manner that its font size is smaller than that of other text iɴ the same html document. Sample code to illustrate how these tags work is given below for your reference.
<!doctype html>
<html>
<head>
<title>Smaller text demo</title>
</head>
<body>
<p>Example: <small>Small</small> text.</p>
</body>
</html>
The webpage corresponding to this code shall look like the image shown below.
grouping content
An html document can be organized into sections and sub-sections using the <div>…</div> and <span>…</span> tags. For instance, all the tags that belong to the footnotes section can be put together inside a <div>…</div> to indicate that they are all part of the footnotes section. moreover, then you may apply specific formatting rules to that division or section. This allows you to have more control over the formatting of different sections of the html document. The sample code given below demonstrates the behavior of the <div> tags.
<!doctype html>
<html>
<head>
<title>div demo</title>
</head>
<body> <div id = "main" align = "middle" > <a href = "/index.htm">home</a> |
</div> <div id = "other" align = "left" bgcolor = "white"> <h5>text</h5> <p>Extra content…</p>
</div> </body>
</html>
The webpage corresponding to this code is shown below.
While <div> is used to group elements together, <span> is used to group inline elements together. For instance, a part of a paragraph can be grouped to behave differently. Sample code given below illustrates how span differs from div.
<!doctype html>
<html>
<head>
<title>Span demo</title>
</head>
<body> <p>Example: <span style = "color:green">span 1</span> and <span style = "color:red">span 2</span> text.</p> </body>
</html>
The webpage corresponding to the code is shown below.
0 टिप्पणियाँ