5. HTML–FORMATTING Tutorial for Beginners

First of all it is HTML–FORMATTING Tutorial for Beginners.If you employ a applications program, you want to be at home with the power to form text daring, italicized, or underlined; these square measure simply 3 of the 10 choices obtainable to point however text will seem in HTML and XHTML.

Bold Text

Anything that seems inside <b></b> part, is displayed in daring as shown below:

<!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 turn out the subsequent result:

HTML–FORMATTING Tutorial for Beginners

Italic Text

Anything that seems inside <i>…</i> part is displayed in italicized as shown below:

<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>

This will turn out the subsequent result:

HTML–FORMATTING Tutorial for Beginners

 

Underlined Text

Anything that seems inside <u>…</u> part, is displayed with underline as shown below:

<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>

This will turn out the subsequent result:

HTML–FORMATTING Tutorial for Beginners

Strike Text

Anything that seems inside <strike>…</strike> part is displayed with strike through, that may be a skinny line through the text as shown below:

<!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 turn out the subsequent result:

HTML–FORMATTING Tutorial for Beginners

Mono spaced Font

The content of a <tt>…</tt> part is written in constant-width font. Most of the fonts square measure referred to as variable-width fonts as a result of totally different letters square measure of various widths (for example, the letter ‘m’ is wider than the letter ‘i’). during a constant-width font, however, every letter has an equivalent dimension.

<!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 turn out the subsequent result:

HTML–FORMATTING Tutorial for Beginners

Superscript Text

The content of a <sup>…</sup> part is written in superscript; the font size used is that the same size because the characters encompassing it however is displayed a character’s height on top of the opposite characters.

<!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 turn out the subsequent result:

HTML–FORMATTING Tutorial for Beginners

Subscript Text

The content of a <sub>…</sub> part is written in subscript; the font size used is that the same because the characters encompassing it, however is displayed a character’s height at a lower place the opposite characters.

<!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 turn out the subsequent result:

HTML–FORMATTING Tutorial for Beginners

Inserted Text

Anything that seems inside <ins>…</ins> part is displayed as inserted text.

<!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 turn out the subsequent result:

HTML–FORMATTING Tutorial for Beginners

Deleted Text

Anything that seems inside <del>…</del> part, is displayed as deleted text.

<!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 turn out the subsequent result:

HTML–FORMATTING Tutorial for Beginners

Larger Text

The content of the <big>…</big> part is displayed one font size larger than the remainder of the text encompassing it as shown below:

<!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 turn out the subsequent result:

HTML–FORMATTING Tutorial for Beginners

Smaller Text

The content of the <small>…</small> part is displayed one font size smaller than the remainder of the text encompassing it as shown below:

<!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 turn out the subsequent result:

HTML–FORMATTING Tutorial for Beginners

Grouping Content

The <div> and <span> parts enable you to cluster along many parts to form sections or subsections of a page.
For example, you may wish to place all of the footnotes on a page inside a <div> part to point that each one of the weather inside that <div> element relate to the footnotes. you may then attach a mode to the present <div> part so they seem employing a special set of favor rules.

<!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 turn out the subsequent result:

HTML–FORMATTING Tutorial for Beginners

(HTML–FORMATTING Tutorial for Beginners)
<!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> along with CSS</p>
</body>
</html>

This will turn out the subsequent result:

HTML–FORMATTING Tutorial for Beginners

Finally it was all about HTML–FORMATTING Tutorial for Beginners. If you liked our tutorial then see our next tutorial about HTML–PHRASE TAGS Tutorial for Beginners.

Comments

comments