 |
VOOZH | about |
|
VOOZH | about |
HTML is a fundamental skill for web development, and learning how to use images properly is an important part of creating engaging websites. The <img> tag allows you to embed images in your web pages, and with attributes like src, alt, width, and height, you can control how these images appear and behave on the website.
In this article, we’ve put together 30 simple multiple-choice questions (MCQs) on HTML images, perfect for beginners and advanced learners. These questions are great for students preparing for exams or placements, and anyone who wants to practice using images in HTML.
To add an image in HTML, use the <img> tag with the src and alt attributes.
<img src="image.jpg" alt="Description of the image">The essential attributes for the <img> tag are src and alt.
<img src="image.jpg" alt="Description of the image">To specify the source of an image in HTML, use the src attribute within the <img> tag.
<img src="path/to/your/image.jpg" alt="Description of the image">The purpose of the alt attribute in an image tag is to provide a text description of the image.
<img src="path/to/your/image.jpg" alt="Description of the image">The width and height attributes are used to adjust the size of an image in HTML.
<img src="image.jpg" alt="Description of image" width="300" height="200">Yes, it’s better to use CSS to style images instead of the width and height attributes. CSS allows for more flexibility and makes it easier to adapt images to different screen sizes.
If the image fails to load, the alt text is displayed as a fallback
Yes, you can link an image to another webpage by wrapping the <img> tag with an anchor <a> tag.
<a href="https://example.com/">
<img src="image.jpg" alt="Descriptive Text">
</a>
A responsive image is used to ensure that the image adjusts its size based on the screen or container size. To make an image responsive, use CSS with the max-width: 100% property.
<img src="image.jpg" alt="Descriptive Text">CSS Code:
img {
width: 100%;
height: auto;
}
@media (min-width: 600px) {
img {
width: 50%;
}
}
The srcset attribute is used to provide multiple image options for different screen sizes or resolutions.
<img src="small.jpg" srcset="medium.jpg 600w, large.jpg 1200w" alt="Descriptive Text">The <picture> element is used to specify different images for different screen sizes or formats. You define multiple <source> tags inside the <picture> element.
<picture>
<source srcset="large.jpg" media="(min-width: 800px)">
<source srcset="medium.jpg" media="(min-width: 400px)">
<img src="small.jpg" alt="Descriptive Text">
</picture>
The <figure> element is used to group an image with its caption, and the <figcaption> element provides a description for that image.
<figure>
<img src="image.jpg" alt="A descriptive image">
<figcaption>This is a caption for the image.</figcaption>
</figure>
The loading attribute in the <img> tag is used to control how images are loaded on a web page.
<img src="image.jpg" alt="A descriptive image" loading="lazy">The background-image property is used to set an image as a background in CSS.
<div class="background-image"></div>CSS Code:
.background-image {
width: 100%;
height: 400px;
background-image: url('background.jpg');
background-size: cover;
background-position: center;
}
The background-image property is used to set an image as the background of an element, while the <img> tag is used to add an image directly into the content of a page.
The object-fit property is used to control how an image or video fits within its container, maintaining its aspect ratio or filling the container in different ways.
img {
object-fit: cover; /* The image will cover the entire container */
}
The border property in CSS is used to add a border around an image.
<img src="image.jpg" alt="Description of image" class="bordered-image">CSS Code:
.bordered-image {
border: 5px solid black; /* Change the width, style, and color as needed */
}
Image maps in HTML are used to define clickable areas within an image, which linkes each area to different destinations. This is done with the <map> and <area> tags.
<img src="image.jpg" alt="Map Image" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="34,44,270,350" href="https://example.com//link1" alt="Link 1">
<area shape="circle" coords="400,300,50" href="https://example.com//link2" alt="Link 2">
</map>
The title attribute in an image tag is used to display additional information when a user hovers over the image.
<img src="image.jpg" alt="Description of image" title="This is a helpful tooltip">To center an image using CSS, use the display: block and margin: auto properties.
<img src="image.jpg" alt="Centered image" class="centered">CSS Code:
.centered {
display: block;
margin: auto;
width: 50%; /* Adjust as needed */
}
The filter property in CSS is used to apply visual effects to images, such as blur, brightness, or grayscale.
<img src="image.jpg" alt="Filtered image" class="filtered">CSS Code:
.filtered {
filter: grayscale(50%); /* Makes the image partly grayscale */
}
To make an image grayscale using HTML and CSS, apply the filter property in CSS.
<img src="image.jpg" alt="Grayscale image" class="grayscale">CSS Code:
.grayscale {
filter: grayscale(100%); /* Applies full grayscale effect */
}
To apply a hover effect on an image, use the :hover pseudo-class in CSS.
<img src="image.jpg" alt="Image" class="hover-effect">CSS Code:
.hover-effect {
transition: transform 0.3s; /* Smooth transition */
}
.hover-effect:hover {
transform: scale(1.1); /* Enlarge image on hover */
}
The <figure> element wraps the image, while the <figcaption> provides a description or title for that image, improving accessibility and context.
<figure>
<img src="image.jpg" alt="Description of the image">
<figcaption>This is the caption for the image.</figcaption>
</figure>
To provide fallback content for images, use the alt attribute in the <img> tag. The text in the alt attribute will be displayed if the image fails to load.
<img src="image.jpg" alt="This image cannot be displayed. Here is a description of the image.">SVG (Scalable Vector Graphics) images are XML-based vector images that can scale without losing quality. To use an SVG image in HTML, you can use the <img> tag, or embed the SVG directly with the <svg> tag.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Yes, images can be animated using CSS. You can use the @keyframes rule to create animations for images.
<img src="image.jpg" alt="Animated Image" class="animated-image">CSS Code:
.animated-image {
transition: transform 0.5s ease;
}
.animated-image:hover {
transform: scale(1.2);
}
To preload images in HTML use the <link> tag with the rel attribute set to "preload" and the as attribute set to "image."
HTML Code :
<link rel="preload" href="image.jpg" as="image">To create a CSS sprite with images, combine multiple images into one large image file and use the background-position property to display different parts of the image.
<div class="sprite"></div>CSS Code:
.sprite {
background-image: url('sprite.png');
width: 100px; /* Width of the sprite section */
height: 100px; /* Height of the sprite section */
background-position: -50px -50px; /* Position for the specific image */
}
To implement lazy loading for images, use the loading="lazy" attribute in the <img> tag.
<img src="image.jpg" loading="lazy" alt="Description of image">The ismap attribute in the <img> tag makes the image a server-side image map.
<img src="map.jpg" usemap="#map" ismap alt="Image map example">
<map name="map">
<area shape="rect" coords="34,44,270,350" href="link.html" alt="Link">
</map>
To create a parallax scrolling effect, we set a background image with CSS and use the background-attachment: fixed; property.
<div class="parallax"></div>CSS Code:
.parallax {
background-image: url('background.jpg');
height: 500px; /* Set height of the section */
background-attachment: fixed;
background-size: cover; /* Cover the entire section */
}