How to Display Different Font Styles on a Web Page

The following example code demonstrates How to Display Different Font Styles on a Web Page.

How to Create a Multi-Page Document in HTML

When we don’t want to use CSS for styling fonts, we can use the <font> tag. We can use the font tag to specify the font type, color, and size. As can be seen, the <font> tag is used in this example. Also, the <img> tag is also described. We use the <img> tag to display an image. Furthermore, the important attributes of the <img> tag are src, alt, width, and height. In order to display the image, src attribute is necessary. Whereas, other attributes are optional.

image.html

<html>
  <head>
     <title>Font Style and Images</title>
     <style>
        li{
             font-size: 20px;
             color: #800000;
		 padding: 10px;
          }
        div{
		margin: 10px;
		padding: 10px;
            border: 3px #800000 solid;
       }
       ul{
		padding: 10px;
            margin-left: 20px;            
       }
       p{
          font-size: 18px;
          text-align: justify;
          color: #3a3a3a;
       }
     </style>
  </head>
  <body bgcolor="#F4E5F7">
      <center><h1>Font Style and Images</h1></center>
      <div>
           <h2>Font Style</h2>
           <p>The &lt;font&gt; tag is used to display text in different fonts.</p>
           <h3>&lt;font&gt tag has three attributes</h3>
           <ol>
               <li>face</li>
               <li>size</li>
               <li>color</li>
           </ol>
           <h3>Example</h3>
           <p><font face="courier" size="20" color="blue">A text with a font style</font></p>
           <h2>Image Tag</h2>
           <p>&lt;img&gt tag is used to display images on the web page</p>
           <h3>&lt;img&gt tag has several attributes</h3>
           <ol>
               <li>src (Mandatory)</li>
               <li>alt</li>
               <li>width</li>
               <li>height</li>
           </ol>
           <h3>Example</h3>
           <img src="back.jfif" alt="An Image" width="300" height="150"/>
           <p></p>
           
      </div>
      <div>
          <a href="home.html">Home</a>
      </div>
      <div style="padding: 20px;">
          <a href="formatting.html">Formatting Tags</a><br/>
          <a href="marquee.html">Marquee</a><br/>
          <a href="othertags.html">Other Tags</a><br/>
      </div>
   </body>
</html>

Output

**An Example Demonstrating How to Display Different Font Styles on a Web Page**

The use of the Marquee Tag is available Next.

https://www.programmingempire.com/how-to-display-different-font-styles-on-a-web-page/

Further Reading