HTML IMG

HTML IMAGES>



In HTML, it is very necessary to make images beautiful, as well as to portray many complex concepts in a simple way on your web page. We will explain you through simple steps to use images in your web pages.

Html img syntax

In the HTML document, the images are displayed using the <img> tag.
The <img> tag is an empty tag, it only has attributes and does not use any closing tags.
The source <src> in the HTML images specifies the image's URL (web address):
<img src="url">
Example-


<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="body_building.jpg alt="body" >
</body>
</html>


Result-
HTML Image
body


In the HTML image tag, you can use PNG, JPEG or GIF image file based on your comfort, but you should ensure that you are specifying the name of the correct image file in the src attribute.


Alt attribute

The Alt attribute in the HTML image tag provides an alternative text for an image, if the user can not see this image for some reason, the reason for not loading the image, slow connections, due to an error in the src attribute, or Then the user uses the screen reader
The value of the alt attribute in the HTML image tag should describe the image:
Example-



<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<img src="facebook.jpg" alt="facebook.com" width="460" height="345">
</body>
</html>


Result-
Alternative text
HTML Img Example


If for some reason a browser can not find an image, then this alt display will display the value of the attribute:
Example-



<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<img src="facebk.jpg" alt="facebook.com" width="460" height="345">
</body>
</html>




Image size - width and height

You can set the width and height attributes in the HTML Image tag. You can set the original size, width and height accordingly.
You can use style attributes for this.
Example-



<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<img src="body_building.jpg" alt="bodybuilding" style="width:500px; height:600px;">
</body>
</html>





And we can alternatively, using width and height attributes, also:
Example-


<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<img src="body_building.jpg" alt="bodybuilding" width="500" height="600">
</body>
</html>




Width and height attributes in HTML always define the image in pixels.



Width and height, or style?
The width, height, and style features are valid in HTML5.
However, we recommend that you use the style feature. Because the sheets of styles prevent images from changing the size of the images:

In this Example The width in the image below is set to 128 pixels, but still the stylesheet overrides it, and sets the width to 100%. -


<!DOCTYPE html>
<html>
<head>
<style>
/*This stylesheet sets the width of all images to 100%: */
img {
    width:100%;
}
</style>
</head>
<body>
<h2>Styling Images</h2>
<p>The width in the image below is set to 128 pixels, but still the stylesheet overrides it, and sets the width to 100%.</p>
<img src="instagram_icon.jpg" alt="instagram.comwidth="128" height="128">
<p>The image below uses the style attribute, where the width is set to 128 pixels which overrides the stylesheet:</p>
<img src="instagram_icon.jpg" alt="instagram.com" style="width:128px; height:128px;">
</body>
</html>





Images in another folder

In HTML, the web browser is expected to find an image in the same folder as the Web page.
You may know, it is common to store images in sub-folders. And then you have to include the name of the folder in the src attribute:
Example-


<!DOCTYPE html>
<html>
<body>
<h2>Images on Another Server</h2>
<img src="https://www.webstudy.com/folder/img_name.jpg" alt="Webstudy.ooo" style="width:104px; height:142px;">
</body>
</html>





Explain Example-
  • www.webstudy.ooo - this is the name of your server where the file is.
  • Folder - this is the name of your folder within which your file is.
  • Image_name.jpg - this is the name of your file that you have to see.



Images on other servers

Some websites store their images in HTML
In fact, you can access your favorite images from any web address in the world:
Example-


<!DOCTYPE html>
<html>
<body>
<h2>Images on Another Server</h2>
<img src="https://www.webstudy.com/folder/img_name.jpg" alt="Webstudy.ooo" style="width:104px; height:142px;">
</body>
</html>



Animated Images

In HTML, allows animated GIFs:
Example-


<img src="gaming.gif" alt="Computer Man" style="width:48px; height:48px;">




Image as a link

To use an image as a link in HTML, place it inside the <img> tag <a> tag:
Example-


<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<p>The image is a link. You can click on it.</p>
<a href="www.webstudy.ooo">
  <img src="webstudy.jpg" alt="HTML tutorial" style="width:42px; height:42px; border:0;">
</a>
<p>"border:0;" to prevent IE9 from displaying a border around the image.</p>
</body>
</html>





Floating image

Use the CSS float property to move the image in HTML.
Example-


<!DOCTYPE html>
<html>
<body>
<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>
<p>
<img src="webstudy.jpg" alt="study web" style="float:right; width:42px; height:42px;">
Use the CSS float property to move the image in HTML. Use the CSS float property to move the image in HTML.
<p><strong>Float the image to the left:</strong></p>
<p>
<img src="webstudy.jpgalt="study webstyle="float:left; width:42px; height:42px;">
Use the CSS float property to move the image in HTML. Use the CSS float property to move the image in HTML.
</p>
</body>
</html>






Image map

The <Map> tag in the HTML image defines an image map. You may be thinking the image is a map, it is an image of a special part of an image or clickable areas on the map.
Example-


<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<img src="web.jpg" alt="web" usemap="#web" width="400" height="379">
<map name="web">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>






The name of the tag in the <Map> tag is linked to the <img> usemap attribute and it creates a connection between the image and the map.
And there are many <area> tags in the <Map> element, as you have seen in the example, which defines clickable areas in the image-map.


background image


To add a background image to an element in HTML, we have to use CSS property background-image:
Example-


<!DOCTYPE html>
<head></head>
<html>
<body style="background-image:url('orel.jpg')">
<h2>Background Image</h2>
</body>
</html>




<Picture> Elements

While designating image resources, HTML5 has introduced the <picture> element in it to add more flexibility to HTML5.
This <Picture> element also contains many <source> elements, in which each individual mentions different image sources. In this way the browser can choose the image that is suitable for the current view and / or device.
In <picture> there are attributes in each <source> element when their image proves to be most appropriate.
Example-


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The picture Element</h2>
<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>





Html img syntax- In the HTML document, the images are displayed using the tag. The tag is an empty tag, it only has attributes and does not use any closing tags. The source in the HTML images specifies the image's URL (web address):

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget