<input type=”file”>
Image Tag (<img> </img>)
Example : How to add image in our html page.
<!DOCTYPE html>
<html>
<body>
<h2>Images</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">
</body>
</html>
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.
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>
Example : How to set small image/icon on a button in html page.
<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 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.
598 total views, 1 views today
0 Comments