en English
af Afrikaanssq Albanianam Amharicar Arabichy Armenianaz Azerbaijanieu Basquebe Belarusianbn Bengalibs Bosnianbg Bulgarianca Catalanceb Cebuanony Chichewazh-CN Chinese (Simplified)zh-TW Chinese (Traditional)co Corsicanhr Croatiancs Czechda Danishnl Dutchen Englisheo Esperantoet Estoniantl Filipinofi Finnishfr Frenchfy Frisiangl Galicianka Georgiande Germanel Greekgu Gujaratiht Haitian Creoleha Hausahaw Hawaiianiw Hebrewhi Hindihmn Hmonghu Hungarianis Icelandicig Igboid Indonesianga Irishit Italianja Japanesejw Javanesekn Kannadakk Kazakhkm Khmerko Koreanku Kurdish (Kurmanji)ky Kyrgyzlo Laola Latinlv Latvianlt Lithuanianlb Luxembourgishmk Macedonianmg Malagasyms Malayml Malayalammt Maltesemi Maorimr Marathimn Mongolianmy Myanmar (Burmese)ne Nepalino Norwegianps Pashtofa Persianpl Polishpt Portuguesepa Punjabiro Romanianru Russiansm Samoangd Scottish Gaelicsr Serbianst Sesothosn Shonasd Sindhisi Sinhalask Slovaksl Slovenianso Somalies Spanishsu Sudanesesw Swahilisv Swedishtg Tajikta Tamilte Teluguth Thaitr Turkishuk Ukrainianur Urduuz Uzbekvi Vietnamesecy Welshxh Xhosayi Yiddishyo Yorubazu Zulu

Picture/Image/Background Tag

Published by Admin on

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

Related Posts

HTML

Other Tags in html (Theory)

 6,192 total views,  9 views today

HTML

Tags & Attributes in html (Theory)

HTML Tags Definition Types HTML Attributes Definition Types For simplicity, we can categories the html attributes in the following major group – [A]Text Attributes (a) Common Attributes: These are– action, alt, background, background-color, background-image, background-position, Read more…

HTML

Introduction of html (Theory)

 5,615 total views,  9 views today