Table of Contents
hide
<input type=”file”>
Example : How to Browse/Choose an image/any other type of file in our html page.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
Select a file :
<input type="file" name="file1" id="file2">
<br><br>
<input type="submit" name="btn1" id="btn2" style="margin-left: 90px">
</form>
</body>
</html>
Example : How to Browse/Choose only png type of image file in our html page.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
Select a file :
<input type="file" name="file1" id="file2" accept="image/png">
<br><br>
<input type="submit" name="btn1" id="btn2" style="margin-left: 90px">
</form>
</body>
</html>Example : How to Browse/Choose Custom type or png and jpg type of image file in our html page.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
Select a file :
<input type="file" name="file1" id="file2" accept="image/png, image/jpeg">
<br><br>
<input type="submit" name="btn1" id="btn2" style="margin-left: 90px">
</form>
</body>
</html>
Example : How to Browse/Choose only .doc or .docx type of application file in our html page.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
Select a file :
<input type="file" name="file1" id="file2" accept=".doc">
<br><br>
<input type="file" name="file1" id="file2" accept=".docx">
<br><br>
<input type="file" name="file1" id="file2" accept="audio/*">
<br><br>
<input type="file" name="file1" id="file2" accept="video/*">
<br><br>
<input type="submit" name="btn1" id="btn2" style="margin-left: 90px">
</form>
</body>
</html>
Image Tag (<img> </img>)
Example : How to add image in our html page.
<!DOCTYPE html>
<html>
<body>
<h2>Images Tag</h2>
<img src="img.jpg" alt="Image Not Available this time" width="200" height="250">
<img src="img.jpg" alt="Image Not Available this time" style="width:200px; height:250px; border:0;">
<img src="img.jpg" alt="Image Not Available this time" style="width:200px; height:250px; border:0;float:left/right">
<img src="image\img.jpg" alt="Image Not Available this time" width="200" height="250">
<img src="\image\img.jpg" alt="Image Not Available this time" width="200"
height="250">
<img src="c:\img.jpg" alt="Image Not Available this time" width="300" height="350">
<img src="https:\\www.codershelpline.com\gallery\img.jpg" alt="Image Not Available this time" width="200" height="250">
<img src="img.jpg" alt="Image Not Available this time" width="200" height="250" style="float:right">
<img src="img.jpg" alt="Image Not Available this time" width="100" height="150" style="border:5px solid black">
<img src="img.jpg" alt="Image Not Available this time" width="100" height="150" style="border:5px solid black; margin:0px 150px">
<img src="img.jpg" align="right" alt="Image Not Available this time" width="100" height="150" style="border:5px solid black;">
</body>
</html>Example : How to set alignment of an image in an html page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alignment of Image</title>
</head>
<body>
<img align="left" src="images.jpg" alt="">
<img align="right" src="images.jpg" alt="">
</body>
</html>
------------------------ OR --------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alignment of Image</title>
</head>
<body>
<img style="float:left" src="images.jpg" alt="">
<img style="float:right" src="images.jpg" alt="">
</body>
</html>
------------------------ OR --------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alignment of Image</title>
</head>
<body>
<div>
Hello
<img align="top" src="images.jpg" alt="">
<img align="middle" src="images.jpg" alt="">
<img align="bottom" src="images.jpg" alt="">
World
</div>
</body>
</html>
------------------------ OR --------------------------
<!--- For Center Alignmnet of Image --->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<center><img src="images.jpg" alt="Not Found" style="width:20%;"></center>
</body>
</html>
------------------------ OR --------------------------
<!--- For Center Alignmnet of Image --->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div style="text-align: center;">
<img width="15%" src="images.jpg">
</div>
</body>
</html>
------------------------ OR --------------------------
<!--- For Center Alignmnet of Image --->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<img src="images.jpg" alt="Not Found at this time" style="width:20%;">
</body>
</html>Example : How to set Border around an image in html page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border of Image</title>
<style>
img {
border: 3px solid red;
}
</style>
</head>
<body>
<img src="images.jpg" alt="Image not found">
</body>
</html>
---------------------------- OR -----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border around Image</title>
<style>
img{
border: 1px solid red;
border-radius: 6px;
padding: 5px;
width: 150px;
}
</style>
</head>
<body>
<img src="images.jpg" alt="Image not found">
</body>
</html>Example : How to set icon/small image inside a text box in html page.
<html>
<head>
<title>ResetPage</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<input type="text" style="background-image: url('Refresh.bmp'); background-repeat: no-repeat; background-position:right/background-position: 5px 3x" placeholder="Username">
</form>
</body>
</html><html>
<body>
<input type="image" src="f:/wallpaper/11.jpg" height="45px" width="25px" border="0" alt=
"Submit"/>
</body>
</html>Example : How to create image/icon as a link/hyperlink in a html page.
<!DOCTYPE html>
<html>
<body>
<h2>Image as Link</h2>
<a href="Page1.php">
<img src="img.jpg" alt="Image Not Available this time" style="width:200px; height:250px;
border:0;">
</a>
</body>
</html>Example : How to write text over an image in a html page.
<!DOCTYPE html>
<html>
<head>
<style>
.image {
position: relative;
color: red;
}
.imgtext{
position: absolute;
top: 50%;
left: 50%;
font-size: 20px;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="image">
<img src="img1.jpg" alt="NA" style="width:100%;">
<div class="imgtext">This is text on image.</div>
</div>
</body>
</html>
---------------------------- OR -----------------------------
<!DOCTYPE html>
<html>
<head>
<style>
.image {
position: relative;
width: 100%;
}
h2 {
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
h3 {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
}
h4 {
position: absolute;
bottom: 20px;
left: 375px;
width: 100%;
}
h5 {
position: absolute;
top: 20px;
left: 375px;
width: 100%;
}
h6 {
position: absolute;
top: 50%;
left: 15%;
width: 100%;
}
</style>
</head>
<body>
<div class="image">
<img src="img1.jpg" alt="NA" width="500px" />
<h2>CodersHelpline1</h2>
<h3>CodersHelpline2</h3>
<h4>CodersHelpline3</h4>
<h5>CodersHelpline4</h5>
<h6>CodersHelpline5</h6>
</div>
</body>
</html>Example : How to create image map as a link/hyperlink in a html page.
<!DOCTYPE html>
<html>
<body>
<h1>The Image Map Effect</h1>
<img src="sun.jpg" width="250" height="175" alt="Image N/A" usemap="#map1">
<map name="map1">
<area shape="oval" coords="20,20,45,67" alt="saturn" href="sat.html">
<area shape="circle" coords="65,84,67,35" alt="jupiter" href="jpr.html">
<area shape="rectangle" coords="210,35,80" alt="moon" href="moon.html">
</map>
</body>
</html>
NB :
- The <map> tag (image map) is used to define a specific area of an image individually/separately as a large image when click on it.
- The <map> element contains a number of <area> elements, that creates the clickable areas in the image map.
- The clickable area in the image becomes a hand like shape/hyperlink area.
- Here 3 pages of html represents/contains large individual image of clickable area.
- Here, link is made using shape present on the image along with proper coordinates values.Background Color/Image Tag ()
Example : How to add background image/color in our html page.
<html>
<body background="flower1.jpg" style="height:100%; width:100%; background-
repeat:no-repeat">
<!-- OR -->
<body background="images\flower1.jpg" style="height:100%; width:100%; background-
repeat:no-repeat">
<!-- OR -->
<body background="d:\images\flower1.jpg" style="height:100%; width:100%; background-
repeat:no-repeat">
<!-- OR -->
<body style="background-image: url(images\flower1.jpg); background-repeat: no-repeat; background-
attachment: fixed; ;background-size: 100% 100%;"> //Stretch Full Image
<!-- OR -->
<body style="background-image: url(images\flower1.jpg); background-repeat: no-repeat; background-
attachment: fixed; ;background-size: cover;"> //Original Full Image
<!-- OR -->
<body style="background-color: red">
</body>
</html>
NB :
background="flower1.jpg" => This path is given when images are stored inside html file's folder.
background="images\flower1.jpg" => This path is given when images are stored inside images folder and this images folder is inside html file' folder.
background="d:\images\flower1.jpg" => This path is given when images are stored inside images folder which is itself stored inside d drive. 
0 Comments