[go: up one dir, main page]
Scribd
Upload
40 views6 pages

WT Formating

The document describes various HTML elements that can be used to format text, including bold, italic, underline, strikethrough, monospaced, superscript, subscript, inserted, deleted, larger, smaller, div, and span. It provides code examples of how each element is written and displays the formatted text output. The div and span elements allow grouping of other elements, and can be used with CSS for styling.

Uploaded by

42z4bnwc4n
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
40 views6 pages

WT Formating

The document describes various HTML elements that can be used to format text, including bold, italic, underline, strikethrough, monospaced, superscript, subscript, inserted, deleted, larger, smaller, div, and span. It provides code examples of how each element is written and displays the formatted text output. The div and span elements allow grouping of other elements, and can be used with CSS for styling.

Uploaded by

42z4bnwc4n
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 6

Bold Text

Anything that appears within <b>...</b> element, is displayed in bold as shown below
−ExampleLive Demo
<!DOCTYPE html>
<html>

<head>
<title>Bold Text Example</title>
</head>

<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>

</html>
This will produce the following result –

Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below
−Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Italic Text Example</title>
</head>

<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>

</html>
This will produce the following result −

Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown
below −

Example
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>

<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>

</html>
This will produce the following result –

Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough,
which is a thin line through the text as shown below −Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Strike Text Example</title>
</head>

<body>
<p>The following word uses a <strike>strikethrough</strike>
typeface.</p>
</body>

</html>
This will produce the following result −

Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are
known as variable-width fonts because different letters are of different widths (for example,
the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the
same width.

Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Monospaced Font Example</title>
</head>

<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>

</html>
This will produce the following result −

Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is the
same size as the characters surrounding it but is displayed half a character's height above
the other characters.

Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Superscript Text Example</title>
</head>

<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>

</html>
This will produce the following result −

Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the
same as the characters surrounding it, but is displayed half a character's height beneath the
other characters.

Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Subscript Text Example</title>
</head>

<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>

</html>
This will produce the following result −

Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.

Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Inserted Text Example</title>
</head>

<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>

</html>
This will produce the following result −

Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.

Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Deleted Text Example</title>
</head>

<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>

</html>
This will produce the following result −

Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of
the text surrounding it as shown below −
Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Larger Text Example</title>
</head>

<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>

</html>
This will produce the following result −

Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the
rest of the text surrounding it as shown below −

Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Smaller Text Example</title>
</head>

<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>

</html>
This will produce the following result −

Grouping Content
The <div> and <span> elements allow you to group together several elements to create
sections or subsections of a page.
For example, you might want to put all of the footnotes on a page within a <div> element to
indicate that all of the elements within that <div> element relate to the footnotes. You might
then attach a style to this <div> element so that they appear using a special set of style
rules.

Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Div Tag Example</title>
</head>

<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>

<div id = "content" align = "left" bgcolor = "white">


<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>

</html>
This will produce the following result −
The <span> element, on the other hand, can be used to group inline elements only. So, if
you have a part of a sentence or paragraph which you want to group together, you could
use the <span> element as follows.

Example
Live Demo
<!DOCTYPE html>
<html>

<head>
<title>Span Tag Example</title>
</head>

<body>
<p>This is the example of <span style = "color:green">span
tag</span>
and the <span style = "color:red">div tag</span> alongwith
CSS</p>
</body>

</html>
This will produce the following result −
These tags are commonly used with CSS to allow you to attach a style to a secti

You might also like