Hello dear readers! welcome back to another section of my tutorial on Html. In my previous tutorial guide 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 a text bold, italiced, or even underlined. These are just three of the many options that is available to indicate how text can appear in Html and XHTML. Now let us 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>
<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 for a better understanding, and feel free to ask questions if you don’t understand.
Now lets talk about the next text formatting.
You can also read our tutorial post on: Html Attributes
Italic Text
Anything that appears within the <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>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word has an <i>italiced</i> format.</p>
</body>
</html>
Feel free to try the above code out using your text editor for a 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>
<html>
<head>
<title>Underline Text Example</title>
</head>
<body>
<p>The following word has an <u>underlined</u> format.</p>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding.
Strike Text
Anything that appears within the <strike>…...</strike> element will be displayed with a strike through, 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>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word has a <strike>strikethrough</strike> format.</p>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding and feel free to ask questions.
RECOMMENDED: Html Attribute 2
Monospaced Font
Anything that appears within the <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’). But in a monospaced font, 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>
<html>
<head>
<title>Monospaced Text Example</title>
</head>
<body>
<p>The following word has a <tt>monospaced</tt> format.</p>
</body>
</html>
Feel free to try the above code out using your text editor for a 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>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word has a <sup>superscript</sup> format.</p>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding and feel free to ask questions.
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be discussing about the rest of the text formatting.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.