Lynxsia IT Solution

HTML Images

Images are very helpful for creating interactive web pages. Images increase the visualization and appearance of the web page.

<img> Tag

Use <img> tag to include image on the web page. It is an empty tag, hence no closing tag is required.

Let's see with some example

        
          <!DOCTYPE html>
          <html>
            <body>
              <img src="https://lynxsia.com/upload/logo/lynxsia-it-solutions-logo_1661513244.png">
            </body>
          </html>

Test Code Online

<img> Tag Attributes

Use <img> tag has following attributes

src: To specify the URL/path of the image.
alt: To specify the alternate text if the image failed to load.
width: To specify the width of the image.
height: To specify the height of the image.
loading: To specify whether a browser should load an image immediately or to defer loading of images until some conditions are met.

<img> Alternate Text

Let's see with some example

        
          <!DOCTYPE html>
          <html>
            <body>
              <img src="https://lynxsia.com/upload/logo/lynxsia-it-solutions-logo_1661513244" alt="Logo">
            </body>
          </html>

Test Code Online

<img> Size - Width And Height

Use width and height attribute to specify the size (in pixel).

We recommend to use style and CSS instead of width and height

Let's see with some example

        
          <!DOCTYPE html>
          <html>
            <body>
              <img src="https://lynxsia.com/upload/logo/lynxsia-it-solutions-logo_1661513244.png" width="100" height="100"><br>
              <img src="https://lynxsia.com/upload/logo/lynxsia-it-solutions-logo_1661513244.png" style="width: 100px; height: 100px;">
            </body>
          </html>

Test Code Online

<img> As A Link

Let's see with some example

        
          <!DOCTYPE html>
          <html>
            <body>
              <a href="https://lynxsia.com/">
                <img src="https://lynxsia.com/upload/logo/lynxsia-it-solutions-logo_1661513244.png" style="width: 100px; height: 100px;">
              <a>
            </body>
          </html>

Test Code Online

Animated Image

Let's see with some example

        
          <!DOCTYPE html>
          <html>
            <body>
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/300px-Rotating_earth_%28large%29.gif" style="width: 100px; height: 100px;" alt="Source Wikipedia">
            </body>
          </html>

Test Code Online

View HTML PDF Ebooks

Previous Next

How you feel about this blog:

Share this blog on:

Report Us

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Ads

HTML Images

HTML Images

<img> Tag

Let's see with some example

<img> Tag Attributes

<img> Alternate Text

Let's see with some example

<img> Size - Width And Height

Let's see with some example

<img> As A Link

Let's see with some example

Animated Image

Let's see with some example

Report Us

Solutions

Prices

Industries

Resources

Lynxsia IT Solutions