Images in HTML5

How to display images using HTML5?

HTML images:

We can insert the images using HTML using tag <img>. The images are used to beautify the webpage.

Syntax of the Images

<img src="url"/>

Inserting an image

We can insert the images using HTML by the tag <img>

    <h4>Inserting KidsFunda logo</h4>
    <img src="images/KidsFundaLoga.png" />

Inserting image

In the above code snippet we have defined how to add the image in the html page. In order to use the image we should use the <img> tag.

output

How to apply the image width and height:

In order to set the image width and height we have to follow this approach

    <h4>Inserting KidsFunda logo</h4>
    <img src="images/KidsFundaLoga.png" width="75" height="50" />

Image width and height

In the above code snippet we have defined the image properties as width and height we have taken width as "75" and height as "50" to the image to apply the width and height.

output

Image as a link:

We can use images as link by using <a> tag

        <a href="http://www.dotnetfunda.com">
            <img src="images/KidsFundaLoga.png" />
        </a>

Image link

In the above code snippet we have defined the image as using a link. In the body section we have taken the a tag to define the link we have given the link as www.dotnetfunda.com and in that a tag we have given the image as kids funda logo which displays the image as a link to the dotnetfunda.com

output

Image float:

The image float is sused to float the image left and right

<p> The image is floated right</p>
<img src="images/KidsFundaLoga.png" style="float:right;" />

Image float

In the above code snippet we have defined the image to float towards right by using style as float right

output

Image border:

We can apply the border to the image by using style as border

<p> The image with yellow border</p>
<img src="images/KidsFundaLoga.png"  style="border:3px solid yellow;" />

Image Border

In the above code snippet we have taken the image as border by giving the style as border. We have taken image as kidsfunda logo and stule as bourder of 3 px solid yellow color.

output

Backgroundimage:

This is used to set the background image to the html page

    <style>
        body {
            background-image: url('images/KidsFundaLoga.png');
        }
    </style>                                                                                                 
<body>
 <h1 style="color:white;">Welcome to TechFunda!</h1>
</body>

Background -image

In the above code snippet we have defined the background image. we have used style to set the background -image property and we are having the <h1> tag as welcome to techfunda with color as white color.

output

Image in horizontal:

In order to use the image as horizontal we have to use the repeat x tag

    <style>
        body {
           
            background-image: url('Scorpio--621x414.jpg');
            background-repeat: repeat-x;
            background-size: 80px 60px;
        }
    </style>

<body>
    <h1 style="color:orange;">Welcome to TechFunda!</h1>
</body>

Image horizontal

In the above code snippet we have defined how to arrange the image in horizontal we have taken background image property as repeat-x.

output

Image-Vertical:

This is used to arrange the image in vertical position. We have to use the property repeat-y.

    <style>
        body {
            background-image: url('apple.jpg');
            background-repeat: repeat-y;
            background-size: 80px 60px;
        }
    </style>

<body>
    <h1 style="color:orange;">Welcome to TechFunda!</h1>
</body>

Image vertical

In the above code snippet we have defined the image in vertical position we have to use the repeat-y property to use the image in vertical position.

output