How to Insert an Image in HTML ?

  • In HTML document we can use different fonts and lists.
  • For look more attractive we can add more graphics to make the document.
  • Web browsers support a number of graphic formats, there are three types of formats widely used they are Graphics Interchange Format (GIF), Joint Photographic Expert Group (JPEG), Portable Network Graphics (PNG).
  • Graphics Interchange Format (GIF) is the best format displaying images designed with a graphics program.
  • Joint Photographic Expert Group (JPEG) is the best format for photographs.
  • Portable Network Graphics (PNG) is the best format for images with transparency or the low color count.
  • In HTML document <img> tag specifies an image to be displayed.

Inserting an image with CSS

Sample Code

<!DOCTYPE html>
<html>
    <style>
        image{border:4px solid orange; width: 120px;height: 100px;}
        h1{text-transform:uppercase}
    </style>
<head>
    <title>
        HTML frame scrolling Attribute
    </title>
</head>
<body>
    <h1>Inserting Image</h1>
    <img src="wikitechy.png" alt="image is not available">
</body>
</html>

Output

Inserting an Image without the CSS

Sample Code

<!DOCTYPE html>
<head>
    <title>
        HTML frame scrolling Attribute
    </title>
</head>
<body>
    <h1>Inserting Image</h1>
    <img src="wikitechy.png" alt="image is not available" width="120px" height="100px">
</body>
</html>

Output

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like

What is a marquee tag ?

In HTML it is used to create scrolling text or image in a webpage. It scrolls either from vertically top to bottom or bottom to top or horizontally left to…
View Answer

How to Align Text in HTML ?

By using markup language, HTML is used to design webpages. It defines the link between the webpages. It defines the structure of webpages where markup language is used to define…
View Answer

How do you add buttons in HTML ?

In HTML <button> tag is used to clickable button within form on your webpage. We can put content like image or text within the <button>to</button> tag. For <button> tag we should…
View Answer