Friday, June 7, 2019

HTML font and text formatting tags

I hope you read my HTML basic article.


Font and Text Formatting Tags



Let’s learn some additional tags. 

Fonts tags

  • <font> -- </font> specifies the font face, font size and font color of text.

            Attribute for <font> tag:
                      Face=”” - specifies the font of the text.
size=”” - specifies the size of the text.
color=”” - specifies the color of the text.

Exercise code
<html>
            <head>
                        <title>Tags</title>
            </head>
            <body>
                        <p>
                            <font face=”Arial” size=”5px” color=”red”>
                             Your name</font>                                  
                        </p>
            </body>
</html>

Text formatting tags

  • <b> -- </b> or <strong> -- </strong> : Bold the text
          Exercise code
           <html>
                  <head>
                        <title>Tags</title>
                  </head>
                  <body>
                        <p><b>Your name</b></p>
                        <p><strong>Your name</strong>
                        </p>
                  </body>
             </html>
  • <i> -- </i> or <em> -- </em> : Italic or Emphasized the text
          Exercise code
           <html>
                   <head>
                         <title>Tags</title>
                   </head>
                   <body>
                         <p><i>Your name</i></p>
                         <p><em>Your name</em></p>
                   </body>
             </html>
  • <u> -- </u> or <ins> -- </ins> : Underline the text or Inserted text
             Exercise code
             <html>
                   <head>
                          <title>Tags</title>
                   </head>
                   <body>
                          <p><u>My self</u></p>
                          <p><ins>My self</ins></p>
                   </body>
              </html>
  • <strike> -- </strike> or <del>  -- </del> : Puts a line right through the center of the text or Deleted text  
       Exercise code
             <html>
                   <head>
                          <title>Tags</title>
                   </head>
                   <body>
                          <p><strike>Hello World</strike>
                          </p>
                          <p><del>Hello World</del></p>
                   </body>
              </html>
  • <center> -- </center> : Makes everything in between the tags centered.
               Exercise code
              <html>
                    <head>
                          <title>Tags</title>
                    </head>
                    <body>
                           <p><center>My self</center></p>
                    </body>
              </html>
  • <mark> -- </mark> : Mark or highlighted text
              Exercise code
             <html>
                    <head>
                          <title>Tags</title>
                    </head>
                    <body>
                          <p>I am in<mark> Your 
                                 Village</mark></p>
                    </body>
              </html>
  • <small> -- </small> : Smaller text
              Exercise code
             <html>
                     <head>
                          <title>Tags</title>
                     </head>
                     <body>
                          <p><small>Your name</small></p>
                     </body>
               </html>
  • <sub>  -- </sub> : Subscript the text        
                Exercise code
               <html>
                      <head>
                             <title>Tags</title>
                      </head>
                      <body>
                             <p>10<sub>2</sub></p>
                      </body>
               </html>
  • <sup> -- </sup> : Superscript the text
                Exercise code
               <html>
                     <head>
                            <title>Tags</title>
                     </head>
                     <body>
                             <p>1<sub>st</sub></p>
                     </body>
                </html>

Let’s do the exercise to practice what you learned in that blog.

Exercise code
<html>
            <head>
                        <title>Font and Text formatting tags</title>
            </head>
            <body>
                        <h1><center>Subscript or Superscript</center></h1>
                        <p><font size=”12px” face=”Arial” color=”black”> A <strong>subscript or superscript</strong> is <mark>a character (number, letter or symbol) that is (respectively) set slightly below or above the normal line of    type</mark>. It is usually <small>smaller </small>than the rest of the text. Perhaps the most familiar example of <del>superscripts</del>subscripts is in chemical formulas. For example, the molecular formula   for <ins>glucose</ins> is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>.  <strike>Subscript</strike> Superscripts are used for the standard abbreviations for <b>service mark</b> <sup>SM</sup> and <i>trademark</i> <sup>TM</sup>. The signs for <u>copyright</u> © and <em>registered trademark</em> ® are also sometimes superscripted</font> </p>
            </body>
</html>

I hope you got HTML text formatting and font tags and now you can create simple web page with text formatting.

See you soon with the HTML list.      






No comments:

Post a Comment