Inserting image in web page

By -

How to insert image in web page


यदि हमे अपने web page मे image insert करना है तो हमें <img> tag का use करना होता है और इस tag के साथ हमें इसके src(source) attribute का use करना होता है यह एक mandatory attribute है इसक बिना <img> tag image show नही कर सकता। Src attribute browser को image के path के बारे मे information provide करता है इसकी value के रूप मे image का path या image का name दिया जाता है यदि webpage और इमेज एक ही folder मे है तब हम image का name देते है अन्यथा image का full path Image के name के साथ दिया जाता है और file का extention देना आवश्यक है। 
<img> के द्वारा हम अपने web page पर निम्न format की images show कर सकते है
    GPEG  - Joint Photographic Experts Group
    PNG    - Portable Network Graphics
    GIF      - Graphics Interchange Format
    BMP    - Bitmap picture

  इसका syntax निम्न है

<img src="name of the file" />
// when both file are in same folder
    
                        Or

<img src="full path of the image file with filename" />
 //when image file in other folder

Ex - <img src="car.jpeg" />
// when both file are in same folder
    
                         Or

 <img src="D:\Image\car.jpeg">
 //when image file in other folder
<img>  tag के साथ निम्न attribute use किये जाते है

  • Src         - इसका use image का path देने के लिए जाता है

नीचे दिये गए attribute Optional है

  • Height   - इसका use image की height देने की लिए   किया जाता है

  • Width   - इसका use image की Width देने की लिए       किया जाता है

  • Alt         - इसका use image के लिए alternate Text     देने की लिए किया जाता है यह text तब show किया जाता है जब Browser image को Render (प्रस्तुत) नहीं कर पा रहा हो। 

  • Border  - इसका use image का Border देने की लिए    किया जाता है 

  • Id - इसका use image को unique Id देने की लिए      किया जाता है 

  • Class- इसका use html elements का class name  देने की लिए किया जाता है 

  • Title-  इसका use image का title देने की लिए  किया जाता है 
Ex
<img src="car.jpeg" Width="40%" Height="60%" Title="mylogo" Border="5" Id="a" Alt="my car" />

Program

<html>
<head>
<title>how can use image in webpage</title>
<style type="text/css">
#a
{
opacity:0.5;
width:40%;
height:40%;
border-style:dotted;
border-color:red;
}
#a:hover
{
opacity:50;
width:80%;
height:80%;
border-style:solid;
border-color:green;
}
</style>

</head>
<body>



<img src="rock.jpg" width="40%" alt="my image" border="8" Height="100%" ></img>

<br>
css code for image
<br>

<img src="D:\image\car.jpg"  id="a" ></img>

</body>
</html>






Comments

Post a Comment