 |
| Html Image Tag |
There are more than one images on each website. Images can
also be attached to devices and the Internet. We can also put images in the
background of a web page. We can put images in different positions. We can also
use images as a hyperlink.
How to insert images in html
Html <img> tag use to show image. We assign image
path to Src attribute. Height and width attribute use to set the width and height of image. Let’s look the code
to display image.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to Load Image From Device</title>
</head>
<body>
<h4>Image Load...</h4>
<img src="image.jpg" alt="Nature" width="200px" height="200px">
</body>
</html>
Result:
 |
| Html Image Tag example |
You can see image has loaded. Now you can change the shape
of image.
Code:
<style>
.circle{
border-radius: 100%;
}
.round-corner{
border-radius: 10%;
}
.top-right-bottom-left-round-corner{
border-radius: 0 10% 0 10%;
}
.top-left-bottom-right-round-corner{
border-radius: 10% 0 10% 0;
}
</style>
In previous code Paste this style in head tag and in body
tag paste these image code.
<img
class="circle"
src="image.jpg"
alt="Nature"
width="200px"
height="200px">
<img
class="round-corner"
src="image.jpg"
alt="Nature"
width="200px"
height="200px">
<img
class="top-right-bottom-left-round-corner"
src="image.jpg"
alt="Nature"
width="200px"
height="200px">
<img
class="top-left-bottom-right-round-corner"
src="image.jpg"
alt="Nature"
width="200px"
height="200px">
Result
 |
| Html Image Style example |
How to add image in html form folder
If image folder and web page are in same then image access
like this,
<img src="image.jpg" alt="Nature" width="200px" height="200px">
If image is in previous
folder of web page then image access like,
|
Image
Folder |
Folder A |
Folder B |
Web Page
Folder |
|
image.jpg |
../ |
../ |
index.html |
Double dot and forward slash use to go back in previous folder.
In above case in image src attribute will set like when we go back by
using double dots and forward slash and find image. If desired image is there,
then we use it and if not exists then we use again double dots and forward
slash and find image. We will continue place double dots and forward slash till
to find desired image. In our case we will find image like this,
<img src="../../Image.jpg" alt="Nature">
If image is in forward folder than web page then image
access like this
|
Web Page
Folder |
Folder A |
Folder B |
Image
Folder |
|
Index.html |
/foldername |
/foldername |
image.jpg |
In this case we use forward slash to go next folder. Src attribute
will be set like this, we move next folder and find image. If image found then its
fine. If not found then we will use again forward slash and find image. In our
case image will find after two folder. Src will be like this
<img src="Folder A/Folder B/Image.jpg" alt="Nature">
How to add background image
We can set image on the background of page. CSS will use to
set image in background. We can apply background on body, div etc. let’s look
the example.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-image: url(image.jpg);
}
div{
height: 400px;
width: 400px;
background-image: url(image2.jpg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Result:
 |
| Html Image as a background example |
Background-image property use to set image in background. If
image is repeating in background like this
 |
| Html Image as a background example |
By default background-repeat property is repeat. Background-repeat
property has following values
·
Repeat: by default
·
Repeat-x: image repeat along x-axis,
horizontally or left to right.
·
Repeat-y: image repeat along y-axis,
vertically or top to bottom.
·
None: use for removing all effect. Show only
one image.
How to align image
Images align is to change position of image. By default,
image align left side. CSS provide property to change the position of image. Float
properties provide facility to align image right side. But we cannot align
image in center. we can geometrically align image in center. Let us look the
code.
Code:
.center {
max-width: 20%;
min-width: 20%;
margin: 0 40% 0 40%;
}
.right {
float: right;
}
.right {
max-width: 20%;
min-width: 20%;
margin: 0 0 0 80%;
}
This code able to align image in center and right
When we take width in percentage then we can easily align image.
For example, width of image 20% then 20% width of
screen will cover by image. Remaining 80% width, if we want to align image in
center then 80% will divide in two equal parts like 40% 40%. Then 40% we will
use for left margin of image and 40% for right then image align in center.
For right align we can use float property.
Otherwise, we can use 80% left margin of image then image
align.
How to use image as hyperlink
We can use image as hyperlink by placing image in anchor tag.
We place image in the place of hyperlink text. Let’s see how we can this.
Code:
<a href="https://www.google.com">
<img src="image.jpg" height="300px" width="300px">
</a>
Image use in the place hyperlink text.
0 Comments
Thanks