HTML-Formatting | 99codes

HTML FORMATTING


On the off chance that you utilize a word processor, you should be comfortable with the capacity to make content strong, emphasized, or underlined; these are only three of the ten alternatives accessible to demonstrate how content can show up in HTML and XHTML.



Bold Text -

Anything that shows up inside <b>...</b> component, is shown in striking as appeared beneath −

Example -

<!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 produce the following result −

  • The Following word uses a bold typeface.


Italic Text -

Anything that shows up inside <i>...</i> component is shown in emphasized as appeared beneath −

Example -

<!DOCTYPE html>
<html>
   <head>
      <title>Italic Text Example</title>
   </head>

   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>

</html>

This will produce the following result −

  • The Following word uses a italicized typeface.



Underlined Text -

Anything that shows up inside <u>...</u> component, is shown with underline as appeared underneath −

Example -

<!DOCTYPE html>
<html>
   <head>
      <title>Underlined Text Example</title>
   </head>

   <body>
      <p>The following word uses an <u>Underlined</u> typeface.</p>
   </body>

</html>

This will produce the following result −

  • The Following word uses a Underlined typeface.


Strike Text -

Anything that shows up inside <strike>...</strike> component is shown with strikethrough, which is a thin line through the content as appeared beneath −

Example -

<!DOCTYPE html>
<html>

   <head>
      <title>Strike Text Example</title>
   </head>

   <body>
      <p>The following word uses an <strike>Strike</strike> typeface.</p>
   </body>

</html>



This will produce the following result −


  • The Following word uses a Strike typeface.


Monospaced Font -


The substance of a <tt>...</tt> part is written in monospaced content style. Most of the literary styles are known as factor width printed styles in light of the way that different letters are of different widths (for example, the letter 'm' is more broad than the letter 'I'). In a monospaced literary style, regardless, each letter has a comparative width.

Example -

<!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 produce the following result −

  • The following word uses a monospaced typeface.


Superscript Text -

The substance of a <sup>...</sup> component is written in superscript; the text dimension utilized is indistinguishable size from the characters encompassing it however is shown a large portion of a character's tallness over alternate characters.

Example -

<!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 produce the following result −

  • The following word uses a superscript typeface.

Subscript Text -

The substance of a <sub>...</sub> component is written in subscript; the text dimension utilized is equivalent to the characters encompassing it, yet is shown a large portion of a character's stature underneath alternate characters.

Example -

<!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 produce the following result −
  • The following word uses a subscript typeface.



Inserted Text -


Anything that shows up inside <ins>...</ins> component is shown as embedded content.

Example -

<!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 produce the following result −
  • I want to drink cola wine


Deleted Text -

Anything that shows up inside <del>...</del> component, is shown as erased content.

Example -

<!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 produce the following result −
  • I want to drink cola wine


Lager Text -

The substance of the <big>...</big> component is shown one text dimension bigger than whatever is left of the content encompassing it as appeared underneath −

Example -

<!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 produce the following result −
  • The following word uses a big typeface.


Smaller Text -

The substance of the <small>...</small> component is shown one text dimension littler than whatever is left of the content encompassing it as appeared underneath −

Example -

<!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 produce the following result −
  • The following word uses a small typeface.


Grouping Content -

The <div> and <span> components enable you to assemble together a few components to make areas or subsections of a page.
For instance, you should need to put the majority of the commentaries on a page inside a <div> component to demonstrate that the majority of the components inside that <div> component identify with the references. You may then connect a style to this <div> component with the goal that they show up utilizing a unique arrangement of style rules.

Example -

<!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>


















HTML-Formatting | 99codes HTML-Formatting | 99codes Reviewed by Arup Roy on January 31, 2019 Rating: 5

No comments:

Powered by Blogger.