- Introduction To HTML
- HTML Elements And Tags
- HTML Basic Examples
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Styles
- HTML Formatting Elements
- HTML Quotation
- HTML Comments
- HTML Colors
- HTML Styles - CSS
- HTML Links
- HTML Images
- HTML Tables
- HTML Lists
- HTML Block And Inline
- HTML Class
- HTML Id
- HTML Iframes
- HTML JavaScript
- HTML File Paths
- HTML Head
- HTML Layout
- HTML Responsive
- HTML Computer Code
- HTML Semantic
- HTML Forms
- HTML Form Attributes
- HTML Form Elements
- HTML Input Types
- HTML Input Attributes
- HTML Input Form Attributes
- HTML Canvas
- HTML SVG
- HTML Media
- HTML Video
- HTML Audio
- HTML YouTube
HTML Images
Images
A web page's appearance and design can be enhanced with images.
<html>
<body>
<h2>HTML Image</h2>
<img src="images/flowers.jpg" alt="Flowers" width="500" height="333">
</body>
</html>
HTML Image Maps
An image map is defined by the HTML "map" tag. An image map is a picture with areas that can be clicked. One or more <area> tags are used to define the areas.
Try clicking on the computer, phone, or coffee cup in the illustration below:
<map name="workmap">
<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="Coffee" href="coffee.htm">
</map>
HTML Background Images
Use the CSS background-image property and the HTML style tag to add a background picture to an HTML element:
<html>
<body>
<h2>Background Image</h2>
<p>A background image for a div element:</p>
<div style="background-image: url('images/flower.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>
<p>A background image for a p element:</p>
<p style="background-image: url('images/flower.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>
</body>
</html>
Background Image On A Page
You must specify the background image on the <body>
element if you want the background picture to appear on the entire page:
<html>
<head>
<style>
body {
background-image: url('images/flower.jpg');
}
</style>
</head>
<body>
<h2>Background Image</h2>
<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.covers the wholw page as a background image</p>
</body>
</html>
HTML Picture Element
The HTML "picture" element enables you to show various images for various screens or devices.
HTML's <picture>
tag Element
Web designers have increased flexibility in identifying image resources thanks to the HTML <picture>
element.
The <picture>
element contains one or more <source>
elements, each of which uses the srcset attribute to link to a distinct image. By doing this, the browser will be able to select the image that best suits the active view and/or device.
The media attribute of each <source>
element specifies when the image is the most appropriate.
<source media="(min-width: 650px)" srcset="images/flower.jpg">
<source media="(min-width: 465px)" srcset="images/flower.jpg">
<img src="img_girl.jpg">
</picture>
When To Use The Picture Element
Utilizing the Picture Element
The <picture>
element has two key purposes:
1. Bandwidth
It is not essential to load a large image file if you are using a device or screen that is small. Any subsequent <source> elements will be disregarded by the browser, which will only use the first one with the correct attribute values.
2. Format Support
Not all picture formats may be supported by all browsers or devices. You can add photos of any format using the <picture> element, and the browser will use the first format it recognises and disregard any subsequent components.
<source srcset="images/img_avatar.png">
<source srcset="images/flower.jpg">
<img src="images/img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP