Monday, June 5, 2017

Html Formating


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>

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>

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>

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>

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>

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>

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.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.