<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.

 473 total views,  2 views today

Categories: HTML

0 Comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.