HTML Images


HTML Images

Step by Step Describe of HTML IMages Content

  1. Images
  2. Image Map
  3. Background Images
  4. The Picture Element

Images - HTML Images

HTML images are used to make web page design look nice and beautiful.

That means HTML Page has Design Improvement of Web Page.

Image in HTML is defined by <img> tag. Through this you can add image to web page.

The special thing about this tag is that it does not have any closing tag. But the attribute is used in it.

Which makes the image look attractive and user experience is good.

<img> tag has two required Attribute:

  1. src - specifies the path of the image.
  2. alt - specifies an alternative text for the image.

Syntax of HTML Images:

<img src =" url " alt =" alternatetext ">

Example:

<! DOCTYPE html>
<html>
     <head>
          <title> Image attributes </title>
     </head>
<body>
     <h2>We have defined 360 pixels of the image.</h2>
     <img src = "imagename.jpg" alt = "logo" style = "width: 360px; height: 360px;">
</body>
</html>

Note : हमेशा यह ध्यान रखें की image उसी folder में हो जिसमें code हो क्योंकि ऐसा नहीं हुआ तो image upload नहीं होगी। (इस code को रन करने से पहले)

Output:

We have defined 360 pixels of the image.

logo

src attribute: specifies the image's URL or filename.

alt attribute: This is also called alternative text.Which means that when the image is not uploaded due to any reason, then at that time it is text show.

Due to no image upload:

  • Internet speed is slow, then
  • If there is an error in the src attribute, then
  • or the user has locked images

Width and Height:

You can also use the style attribute if you want to change the height and width of the image.


Images - HTML Images

HTML Images का उपयोग इसलिए किया जाता हैं, ताकी Web Page का Design देखने में आच्छा और सुंदर दिखें।

मतलब की HTML Images से Web Page का Design Improve होता हैं।

HTML में Image को <img> tag द्वारा Define किया जाता हैं। इसके द्वारा आप image को web page में add कर सकते हो।

इस tag की खास बात यह है कि इसका कोई closing tag नहीं होता हैं। परन्तु इसमें attribute का उपयोग किया जाता हैं।

जिससे Image देखने में attractive लगती है और user experience अच्छा होता हैं।

<img> tag में दो आवश्यक Attribute हैं:

  1. src - Image का path specify करता हैं।
  2. alt - Image के लिए एक Alternative Text specify करता हैं।

Syntax of HTML Images:

<img src =" url " alt =" alternatetext ">

उदाहरण:

<! DOCTYPE html>
<html>
     <head>
          <title> Image attributes </title>
     </head>
<body>
     <h2>We have defined 360 pixels of the image.</h2>
     <img src = "imagename.jpg" alt = "logo" style = "width: 360px; height: 360px;">
</body>
</html>

Note : हमेशा यह ध्यान रखें की image उसी folder में हो जिसमें code हो क्योंकि ऐसा नहीं हुआ तो image upload नहीं होगी। (इस code को रन करने से पहले)

Output:

We have defined 360 pixels of the image.

logo

src attribute द्वारा image का URL या file का नाम specify किया जाता हैं।

alt attribute को alternative text भी कहा जाता हैं। जिसका मतलब होता है कि जब किसी कारण image upload ना हो तो उस समय यह text show होता हैं।

Image upload ना होने के कारण:

  • Internet की speed धीमी होना, तब
  • यदि src attribute में कोई error हो, तब
  • या user ने images बंद रखी हों

Width और Height:

यदि image की height और width को change करना हो तो आप style attribute का भी प्रयोग कर सकते हो।



The Images is in Another Folder

If so, you can use this given code.

Syntax:

<img src="/folder name/imagename.jpg" alt="logo">

Example:

<! DOCTYPE html>
<html>
     <head>
          <title> Images in Another Folder </title>
     </head>
<body>
     <h2>Images in Another Folder</h2>
     <img src="/images/techbyantimshinde.jpg" alt="logo" style = "width: 360px; height: 360px;">
</body>
</html>

Output:

Images in Another Folder

logo

Image दूसरे folder में हो तो

यदि ऐसा हो तो आप इस दिये हुए code का उपयोग कर सकते हो

Syntax:

<img src="/folder name/imagename.jpg" alt="logo">

Example:

<! DOCTYPE html>
<html>
     <head>
          <title> Images in Another Folder </title>
     </head>
<body>
     <h2>Images in Another Folder</h2>
     <img src="/images/techbyantimshinde.jpg" alt="logo" style = "width: 360px; height: 360px;">
</body>
</html>

Output:

Images in Another Folder

logo


Images on Another Server or Website

If your image is in a server and you want to access that image, then use this code:

Example:

<! DOCTYPE html>
<html>
     <head>
          <title> Images on Another Server/Website </title>
     </head>
<body>
     <h2>Images on Another Server/Website</h2>
     <img src="https://techbyantimshinde.blogspot.com/AAh5pFP.png" alt="logo" style="width: 360px; height: 360px;">
</body>
</html>

Output:

Images on Another Server/Website

logo

किसी अन्य सर्वर या वेबसाइट पर Images

यदि आपकी image किसी Server में हैं और उस image को access करना चाहते हो तो इस code का उपयोग करें:/p>

Example:

<! DOCTYPE html>
<html>
     <head>
          <title> Images on Another Server/Website </title>
     </head>
<body>
     <h2>Images on Another Server/Website</h2>
     <img src="https://techbyantimshinde.blogspot.com/AAh5pFP.png" alt="logo" style="width: 360px; height: 360px;">
</body>
</html>

Output:

Images on Another Server/Website

logo


Images HTML Links

Using links for images is a very common thing.

You can reach the destination by clicking on the image by linking the image.

In image links the <img> tag is used with <a>.

Example:

<! DOCTYPE html>
<html>
     <head>
          <title> Images HTML Links </title>
     </head>
<body>
     <h2>Images HTML Links</h2>
     <a href="https://techbyantimshinde.blogspot.com/">
          <img src="https://techbyantimshinde.blogspot.com/images/technical-supoort-computer.jpg" alt="Images HTML Links" style ="width: 360px; height: 360px;">
     </a>
</body>
</html>

Output:

Images HTML Links

imageLinks

Images HTML Links

Images के लिए links का use करना, बहुत ही common बात हैं।

आप image को links द्वारा image को click करके destination तक पहुच सकते हो।

Image links में <img> tag का प्रयोग <a> के साथ किया जाता हैं।

Example:

<! DOCTYPE html>
<html>
     <head>
          <title> Images HTML Links </title>
     </head>
<body>
     <h2>Images HTML Links</h2>
     <a href="https://techbyantimshinde.blogspot.com/">
          <img src="https://techbyantimshinde.blogspot.com/images/technical-supoort-computer.jpg" alt="Images HTML Links" style ="width: 360px; height: 360px;">
     </a>
</body>
</html>

Output:

Images HTML Links

imageLinks


HTML Floating Images:

Float in HTML is a CSS property using which images are float to the left or right.

Example:

<! DOCTYPE html>
<html>
     <head>
          <title> HTML Floating Images </title>
     </head>
<body>
     <h2>HTML Floating Images</h2>
     <img src="techbyantimshinde.png" alt = "logo" style = "float: right; width: 70px; height: 70px;">
     <img src="computer.png" alt = "logo" style = "float: left; width: 70px; height: 70px;">
</body>
</html>

Output:

HTML Floating Images

logo logo

HTML Floating Images:

HTML में float एक CSS property है जिसके उपयोग से Images को left या right में float कराया जाता हैं।

उदाहरण:

<! DOCTYPE html>
<html>
     <head>
          <title> HTML Floating Images </title>
     </head>
<body>
     <h2>HTML Floating Images</h2>
     <img src="techbyantimshinde.png" alt="logo" style="float: right; width: 70px; height: 70px;">
     <img src="computer.png" alt = "logo" style = "float: left; width: 70px; height: 70px;">
</body>
</html>

Output:

HTML Floating Images

logo logo

What is HTML Image Map?

You can create a clickable area on an image using the HTML Image Map.

The HTML Image map is defined with the <map> tag.

Areas are defined with one or more <area> tag.

Example:

<! DOCTYPE html>
<html>
     <head>
          <title>HTML Image map</title>
     </head>
<body>
     <h2>HTML Image map</h2>
     <p>Click on the Laptop, the Diary, or the Pen to go to a new page and read more about the topic:</p>

     <img src="image map.jpg" width="600px;" height="400px;" alt="image map" usemap="#workmap">

     <map name="workmap">

          <area shape="rect" coords="00,44,250,300" alt="laptop" href="laptop.html">
          <area shape="circle" coords="450,100,80,35" alt="diary" href="diary.html">
          <area shape="circle" coords="400,250,50" alt="pen" href="pen.html">

     </map>

</body>
</html>

Output:

Image Maps

Click on the Laptop, the Diary, or the Pen to go to a new page and read more about the topic:

image map laptop diary pen

How Does it Work?

The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute:

<img alt="image map" src="image map.jpg" usemap="#workmap">

The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.

HTML Image Map Create

Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image by using the required name attribute:

<map name="workmap">

The name attribute must have the same value as the <img>'s usemap attribute.

HTML Image Map क्या हैं?

HTML Image Map का उपयोग करके आप एक Image पर click करने योग्य area बना सकते हैं।

HTML Image map को <map> tag से Define किया जाता हैं।

Areas को एक या अधिक <area> tag के साथ परिभाषित किया गया हैं।

उदाहरण:

<! DOCTYPE html>
<html>
     <head>
          <title>HTML Image map</title>
     </head>
<body>
     <h2>HTML Image map</h2>
     <p>Click on the Laptop, the Diary, or the Pen to go to a new page and read more about the topic:</p>

     <img src="image map.jpg" width="600px;" height="400px;" alt="image map" usemap="#workmap">

     <map name="workmap">

          <area shape="rect" coords="00,44,250,300" alt="laptop" href="laptop.html">
          <area shape="circle" coords="450,100,80,35" alt="diary" href="diary.html">
          <area shape="circle" coords="400,250,50" alt="pen" href="pen.html">

     </map>

</body>
</html>

Output:

Image Maps

Click on the Laptop, the Diary, or the Pen to go to a new page and read more about the topic:

image map laptop diary pen

How Does it Work?

The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute:

<img alt="image map" src="image map.jpg" usemap="#workmap">

The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.

HTML Image Map Create

Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image by using the required name attribute:

<map name="workmap">

The name attribute must have the same value as the <img>'s usemap attribute.


What is HTML Background Images?

Background Image is used in HTML to make any website or blog more attractive.

You can define a background-image in your website's body or any HTML element using CSS.

HTML style attribute and CSS background-image property are used to add background image.

Add a background-image on a HTML element

Example:

Background image for a <div> element:

<div style="background-image: url('https://images.indianexpress.com/2019/03/baby-sit-up.jpg'); width:200px; height:200px;"> </div>

Background image for a <p> element:

<p style="background-image: url('https://images.indianexpress.com/2019/03/baby-sit-up.jpg'); width:200px; height:200px;"> </p>

Specify the background image in the <style> element

You can also specify the background image in the <style> element, in the <head> section:

Example:

<style>
     div {
         background-image: url('techbyantimshinde.jpg');
     }
</style>

Other CSS Property is used for the background image.

  1. Background Repeat
  2. Background Cover
  3. Background Stretch

Background Repeat

Example:

<style>
     div {
         background-image: url('techbyantimshinde.jpg');
         background-repeat: no-repeat;
     }
</style>

Background Cover

you can set the background-size property to cover of background image.

you can set the background-attachment property to fixed of background image.

Example:

<style>
     div {
         background-image: url('techbyantimshinde.jpg');
         background-repeat: no-repeat;
         background-size: cover;
         background-attachment: fixed;
     }
</style>

Background Stretch

You can set the background-size property to 100% 100% for background image to stretch to fit.

Example:

<style>
     div {
         background-image: url('techbyantimshinde.jpg');
         background-repeat: no-repeat;
         background-attachment: fixed;
         background-size: 100% 100%;
     }
</style>

HTML Background Images क्या हैं?

HTML में Background Image का उपयोग किसी भी website या blog को और आकर्षक बनाने के लिए किया जाता हैं।

CSS का उपयोग करके आप अपनी वेबसाइट की body या किसी भी HTML element में background-image को डिफाइन कर सकते हैं।

Background Image जोड़ने के लिए HTML style attribute और CSS background-image property का उपयोग किया जाता हैं।

एक HTML Element पर एक background-image add करना

उदाहरण:

Background image for a <div> element:

<div style="background-image: url('https://images.indianexpress.com/2019/03/baby-sit-up.jpg'); width:200px; height:200px;"> </div>

Background image for a <p> element:

<p style="background-image: url('https://images.indianexpress.com/2019/03/baby-sit-up.jpg'); width:200px; height:200px;"> </p>

<style> element में background image Specify करें

आप background image में <style> Element, <head> Section को specify कर सकते हैं:

उदाहरण:

<style>
     div {
         background-image: url('techbyantimshinde.jpg');
     }
</style>

Background Image के लिए Other CSS Property का उपयोग किया जाता हैं।

  1. Background Repeat
  2. Background Cover
  3. Background Stretch

Background Repeat

Example:

<style>
     div {
         background-image: url('techbyantimshinde.jpg');
         background-repeat: no-repeat;
     }
</style>

Background Cover

आप background image को cover करने के लिए background-size property सेट कर सकते हैं।

आप background image को फिक्स्ड करने के लिए background-attachment property सेट कर सकते हैं।

Example:

<style>
     div {
         background-image: url('techbyantimshinde.jpg');
         background-repeat: no-repeat;
         background-size: cover;
         background-attachment: fixed;
     }
</style>

Background Stretch

आप फिट करने के लिए stretch background image के लिए background-size property को 100% 100% पर सेट कर सकते हैं।

Example:

<style>
     div {
         background-image: url('techbyantimshinde.jpg');
         background-repeat: no-repeat;
         background-attachment: fixed;
         background-size: 100% 100%;
     }
</style>