HTML Images
In this chapter we will study about HTML images.
This is most important chapter in HTML because of images are used as objects to improve the design and appearance of a web page. Images can placed over a web page in many ways but <img> element is mostly used to fetch images on web pages.
Before we move ahead let’s take look on below table.
| Elements / CSS Property | Attributes / CSS Value | Narration |
| <img> | src = “Example.jpg ” | Element can be used with “SRC” attribute |
| <picture> | <source media = “ ” srcset = “ ”> | Element can used with another sub element <source> along with “media” and “srcset” attributes. <img> element must required as last childe sub element. |
| background-image | url('example.jpg') | background-image is CSS property and url('example.jpg') is the value that can be used for HTML elements. |
HTML <img> Element
<img> Element is an empty element which can be used in HTML documents with “src”, “alt”, “title”, “width” and “height” attributes. <img > tag sets the frame of image and “src” attribute fetch the image in the frame with define URL in the “src” attribute. “alt” attribute is an essential part of <img> element. Image can’t be seen by visually challenged persons. “alt” attribute value can be read by the screen reader program so they can easily know that what image is used on the web page. Sometimes due to any reason image is not loaded on the web page then alt attribute value is appears in the place of image and user can understand that what image is used on the web page.
“title” attribute enables a feature that when move the mouse over the image then image title is appears on web page.
“width” and “height” determines the dimension of the image.
Example - 1
<!DOCTYPE>
<html>
<head>
</head>
<body>
<img src = "img/progrramers.jpg" alt = "Progrramers" title = "Progrramers"
width = "530px" height = "250px">
</body>
</html>
HTML <picture> Element
<picture> is element is new added element in HTML5. It is more advance element which provides more flexibility to the developer.
Today web site means more than sharing information. Developers are showing interest to develop more flexible and beautiful concept web sites. Users also loves to be engaged with just because not only content but the manner all the contents are present on the web sites.
<picture> element is empowered with media responsive feature which provide more flexibility in specifying image resources. Basically this element used for responsive web design. <picture> used with two more sub elements <source> and <img>. Look at the below examples.
Example - 2
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media = "(min-width: 650px)" type = "image/jpeg" srcset = "img/HTML5-Tutorial1.jpg"></source>
<source media = "(min-width: 540px)" type = "image/png" srcset = "img/HTML5-Tutorial2.png" ></source>
<source media = "(min-width: 430px)" type = "image/gif" srcset = "img/HTML5-Tutorial3.gif" ></source>
<img src = "img/HTML5-Tutorial4.jpg" alt = "Progrramers" width = "80%"/>
</picture>
</body>
</html>
In above example you can see, inside <picture> tag there are four sub elements defined. Out of four sub elements three are <source> and one is <img>. <img> element must required as last childe sub element. Media attribute define inside <source> element which indentify the viewport of the device (screen size) and according to change of viewport the images get changed between the four images. You can do yourself by trying this example.
The <source> element has the following attributes:
1. srcset (required) - defines the URL of the image to fetch the image on web page
2. media - accepts only valid media query that would normally be defined in a CSS
3. sizes - defines a single width descriptor, a single media query with width descriptor, or a comma-delimited list of media queries with a width descriptor
4. type - defines the MIME (Multipurpose Internet Mail Extensions) type
Background-image
"background-image" is a CSS property. With background property image can be displayed into HTML elements. Background property can be used with “url(image_path)” value Like below example
Example - 3
<!DOCTYPE>
<html>
<head>
.main-container{
background-image: url('img/progrramers.jpg');
}
</head>
<body>
<div class = "main-container">
</div>
</body>
</html>
We will read more about background property in CSS Tutorials.
Related Topics
Post A Comment:
0 comments: