Monday, June 5, 2017

Html Formating


Hello guys,evening…..its realy been a while,well lemme go straight to the tutorial for today.In my previous tutorial I made mention of the topic I will be treating in my next tutorial which is HTML formatting,
If you use a word processor, you must be familiar with the ability to make text bold, italiced, or underlined.This are just three of the many options available to indicate how text can appear in HTML and XHTML. Now let talk about how to make a text bold.

Bold Text
Any thing that appears within <b>…..</b> element, is displayed in bold as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word has a <b>bold</b> format.</p>
</body>
</html>

You can try that out using your text editor to see the result for ypur selfs and for better understanding, and feel free to ask questions if you don’t understand.
Now lets talk about the next text formatting

Italic Text
Anything that appears within <i>……</i> element is displayed in italiced as shown below

Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word has an <i>italiced</i> format.</p>
</body>
</html>
You can also try that out using your text editor for better understanding,

Underlined Text
Anything that appears within <u>……</u> element is displayed with underline as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Underline Text Example</title>
</head>
<body>
<p>The following word has an <u>underlined</u> format.</p>
</body>
</html>

You can also try that out using your text editor for better understanding,

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
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word has a <strike>strikethrough</strike> format.</p>
</body>
</html>

You can also try that out using your text editor for better understanding and feel free to ask questions.

Monospaced Font
Anything that appears within <tt>…..</tt> element is displayed in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths(for example, the letter ‘h’ is wider than the letter ‘I’). In a monospaced font, however, all letters has the same width.

Example
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Text Example</title>
</head>
<body>
<p>The following word has a <tt>monospaced</tt> format.</p>
</body>
</html>

You can also try that out using your text editor for better understanding and feel free to ask questions.

Superscript Text
The content of a <sup>……</sup> element is displayed in superscript as shown below.

Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word has a <sup>superscript</sup> format.</p>
</body>
</html>

You can also try that out using your text editor for better understanding and feel free to ask questions.
Well that’s it for this tutorial, the rest of the text formatting will be discussed in my next tutorial. Bye for now and GOODLUCK!!

Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration , Html Basic Tags , Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2

Share:

0 comments:

Post a Comment