MCQs Of Class 6: Adding Images to Web Pages

 Multiple Choice Questions (MCQ -6)

Adding Images to Web Pages

1. Which HTML tag is used to insert an image into a web page?
• a) <image>
• b) <img>
• c) <pic>
• d) <src>
• Answer: b) <img>
2. Which attribute is used to specify the source of an image in HTML?
• a) href
• b) src
• c) link
• d) url
• Answer: b) src
3. What does the alt attribute in the <img> tag provide?
• a) The image's file format
• b) A title for the image
• c) A description that appears if the image cannot be displayed
• d) A hyperlink to another page
• Answer: c) A description that appears if the image cannot be displayed
4. Which of the following is true about the width and height attributes in the <img> tag?
• a) They are required attributes for the <img> tag.
• b) They can be used to set the image size in pixels.
• c) They automatically adjust the image size to fit the screen.
• d) They are used to link the image to another page.
• Answer: b) They can be used to set the image size in pixels.
5. What is the purpose of the srcset attribute in the <img> tag?
• a) To define the fallback image in case the original fails to load
• b) To specify multiple image sources for different device resolutions
• c) To add a caption to the image
• d) To link the image to an external website
• Answer: b) To specify multiple image sources for different device resolutions
6. Which of the following is NOT a valid image format for the web?
• a) JPEG
• b) PNG
• c) SVG
• d) DOCX
• Answer: d) DOCX
7. Which CSS property is commonly used to make an image responsive?
• a) display: block;
• b) max-width: 100%;
• c) position: relative;
• d) visibility: hidden;
• Answer: b) max-width: 100%;
8. In the <picture> element, what does the <source> tag do?
• a) Provides an alternative text for the image
• b) Specifies different images based on the screen size or type
• c) Sets the background color of the image
• d) Links the image to another webpage
• Answer: b) Specifies different images based on the screen size or type
9. What happens if the alt attribute is not included in the <img> tag?
• a) The image will not display
• b) A default image will be shown
• c) Screen readers will skip the image, making it less accessible
• d) The image will automatically link to the homepage
• Answer: c) Screen readers will skip the image, making it less accessible
10. Which attribute would you use to ensure an image opens in a new tab when clicked?
• a) rel="_new"
• b) target="_blank"
• c) href="_tab"
• d) link="_new"
• Answer: b) target="_blank"

11. Which HTML element is used to provide a fallback image when using the <picture> element?
• a) <img>
• b) <source>
• c) <fallback>
• d) <alt>
• Answer: a) <img>
12. What does the title attribute do when used with an <img> tag?
• a) Displays a tooltip when the mouse hovers over the image
• b) Replaces the alt text
• c) Changes the image format
• d) Aligns the image to the center of the page
• Answer: a) Displays a tooltip when the mouse hovers over the image
13. How do you ensure an image is displayed proportionally when resized?
• a) Set only the width attribute
• b) Set only the height attribute
• c) Set both width and height attributes to auto
• d) Set either width or height, and the other dimension will adjust automatically
• Answer: d) Set either width or height, and the other dimension will adjust automatically
14. Which HTML attribute should be used to provide a description of an image to search engines?
• a) description
• b) alt
• c) title
• d) caption
• Answer: b) alt
15. Which file format is best for images with transparent backgrounds?
• a) JPEG
• b) PNG
• c) BMP
• d) TIFF
• Answer: b) PNG
16. When using the srcset attribute, what does the w descriptor specify?
• a) The width of the image in pixels
• b) The height of the image in pixels
• c) The weight of the image file
• d) The width of the viewport
• Answer: a) The width of the image in pixels
17. What is the purpose of the lazy attribute in the <img> tag?
• a) To load the image after the entire page has loaded
• b) To prevent the image from being displayed
• c) To optimize image loading by loading only when the image is in the viewport
• d) To delay the image loading until a specific event occurs
• Answer: c) To optimize image loading by loading only when the image is in the viewport
18. What does the object-fit CSS property do when applied to an image?
• a) It resizes the image to fit the container's dimensions.
• b) It changes the image format.
• c) It defines how the content of the image should be resized to fit the container.
• d) It aligns the image to the center of the container.
• Answer: c) It defines how the content of the image should be resized to fit the container.
19. How can you center an image horizontally using HTML or CSS?
• a) Set the align attribute to center
• b) Use text-align: center; on the parent element
• c) Use margin: auto; on the image
• d) Both b and c
• Answer: d) Both b and c
20. Which attribute is used to specify a URL to open when an image is clicked?
• a) src
• b) href
• c) onclick
• d) link
• Answer: b) href

21. Which HTML element is used to define multiple sizes of the same image for different screen sizes or resolutions?
• a) <img>
• b) <source>
• c) <picture>
• d) <link>
• Answer: c) <picture>
22. Which attribute in the <img> tag specifies the width of an image in relation to its natural size?
• a) width
• b) max-width
• c) src
• d) aspect-ratio
• Answer: a) width
23. What happens when the src attribute of an <img> tag is left empty?
• a) A broken image icon is displayed.
• b) The browser loads a default image.
• c) The browser shows a blank space.
• d) The alt text is displayed in place of the image.
• Answer: a) A broken image icon is displayed.
24. Which of the following is NOT an advantage of using vector images (e.g., SVG) on web pages?
• a) Scalability without loss of quality
• b) Smaller file size for complex images
• c) Ability to edit image colors via CSS
• d) Smaller file size for simple graphics
• Answer: b) Smaller file size for complex images
25. When using the <img> tag, which attribute is used to specify the path to the image file?
• a) href
• b) src
• c) link
• d) path
• Answer: b) src
26. Which of the following methods can be used to display an image as a background in HTML?
• a) Using the <img> tag
• b) Using the background-image CSS property
• c) Using the src attribute in the <div> tag
• d) Using the picture tag
• Answer: b) Using the background-image CSS property
27. Which CSS property can be used to prevent an image from being dragged by the user?
• a) user-select: none;
• b) pointer-events: none;
• c) draggable: false;
• d) user-drag: none;
• Answer: d) user-drag: none;
28. What will happen if you use a non-existent image URL in the src attribute of an <img> tag?
• a) The page will not load.
• b) A broken image icon will be displayed.
• c) The browser will search for a similar image.
• d) The browser will ignore the <img> tag.
• Answer: b) A broken image icon will be displayed.
29. Which attribute in the <img> tag is primarily used for search engine optimization (SEO)?
• a) title
• b) alt
• c) src
• d) class
• Answer: b) alt
30. To make an image responsive in HTML, which CSS property is most commonly used?
• a) position: relative;
• b) max-height: 100%;
• c) width: 100%;
• d) display: block;
• Answer: c) width: 100%;

31. Which HTML attribute is used to prevent an image from being displayed in a browser?
• a) hidden
• b) display
• c) visibility
• d) none
• Answer: a) hidden
32. When using the srcset attribute, what does the x descriptor specify?
• a) The exact width of the image in pixels
• b) The pixel density of the image
• c) The height of the image
• d) The aspect ratio of the image
• Answer: b) The pixel density of the image
33. Which HTML attribute is necessary to load an image only when it is in the viewport?
• a) loading="lazy"
• b) lazyload="true"
• c) viewport="true"
• d) defer="true"
• Answer: a) loading="lazy"
34. Which CSS property can be used to control how an image fits within its container, especially when the image is larger than the container?
• a) fit-content
• b) object-fit
• c) background-size
• d) overflow
• Answer: b) object-fit
35. Which HTML element should you use to group a set of images together for better layout control?
• a) <div>
• b) <figure>
• c) <section>
• d) <img>
• Answer: a) <div>
36. How do you add a caption to an image in HTML?
• a) Using the alt attribute
• b) Using the <caption> tag
• c) Using the <figcaption> tag inside a <figure> tag
• d) Using the title attribute
• Answer: c) Using the <figcaption> tag inside a <figure> tag
37. Which of the following formats is generally best for photographs on the web?
• a) GIF
• b) PNG
• c) SVG
• d) JPEG
• Answer: d) JPEG
38. What is the correct syntax to use an image as a link in HTML?
• a) <a src="image.jpg">Link</a>
• b) <a href="url"><img src="image.jpg" alt="description"></a>
• c) <img href="url" src="image.jpg">
• d) <img src="image.jpg" link="url">
• Answer: b) <a href="url"><img src="image.jpg" alt="description"></a>
39. What is the main purpose of the usemap attribute in the <img> tag?
• a) To define a clickable area on the image
• b) To apply a CSS map to the image
• c) To define a series of image links
• d) To link the image to a map API
• Answer: a) To define a clickable area on the image
40. Which attribute in the <img> tag is used to define the relationship between the current document and the linked image?
• a) rel
• b) role
• c) alt
• d) target
• Answer: a) rel

41. Which of the following is the correct way to specify an image's dimensions in pixels using the <img> tag?
• a) <img src="image.jpg" width="300px" height="200px">
• b) <img src="image.jpg" width="300" height="200">
• c) <img src="image.jpg" dimensions="300x200">
• d) <img src="image.jpg" size="300x200">
• Answer: b) <img src="image.jpg" width="300" height="200">
42. Which of the following HTML attributes is used to specify a default image when the specified image cannot be loaded?
• a) default
• b) placeholder
• c) onerror
• d) alt
• Answer: c) onerror
43. Which image format is best suited for logos or images with solid colors and simple shapes?
• a) JPEG
• b) GIF
• c) PNG
• d) BMP
• Answer: c) PNG
44. What is the purpose of the alt attribute in the <img> tag?
• a) To provide a description of the image for screen readers
• b) To change the size of the image
• c) To set the alignment of the image
• d) To display a tooltip when the image is hovered
• Answer: a) To provide a description of the image for screen readers
45. Which HTML element can be used to define a clickable area inside an image?
• a) <area>
• b) <map>
• c) <click>
• d) <region>
• Answer: a) <area>
46. Which CSS property is often used to make an image responsive by ensuring it scales to the width of its container?
• a) min-width
• b) max-width
• c) width: 100%;
• d) height: auto;
• Answer: c) width: 100%;
47. When using the <picture> element, what is the purpose of the <source> tag?
• a) To define different image formats for different devices
• b) To add alternative text to an image
• c) To specify an image's dimensions
• d) To preload an image
• Answer: a) To define different image formats for different devices
48. How can you make an image accessible for visually impaired users?
• a) By using the title attribute
• b) By setting the width and height attributes
• c) By including an alt attribute with a descriptive text
• d) By using high-resolution images
• Answer: c) By including an alt attribute with a descriptive text
49. What will happen if an image’s alt attribute is empty or missing?
• a) The browser will not display the image.
• b) The browser will display a broken image icon.
• c) The image will be displayed without any alternative text.
• d) The browser will show the image's file path.
• Answer: c) The image will be displayed without any alternative text.
50. Which attribute should be used to specify the URL of an image to be used as a fallback when using the <picture> element?
• a) fallback-src
• b) default-src
• c) src
• d) img
• Answer: c) src

51. Which HTML attribute is used to make an image a clickable link?
• a) href
• b) src
• c) link
• d) alt
• Answer: a) href
52. What happens if the width and height attributes of an <img> tag are not specified?
• a) The image will not be displayed.
• b) The image will use its original dimensions.
• c) The image will automatically fit to the size of its container.
• d) The image will be stretched to fill the page.
• Answer: b) The image will use its original dimensions.
53. Which of the following is a valid reason for using the srcset attribute in an <img> tag?
• a) To load multiple images at once
• b) To specify alternative images for different screen sizes or resolutions
• c) To define multiple image formats
• d) To add additional descriptive text to the image
• Answer: b) To specify alternative images for different screen sizes or resolutions
54. Which CSS property is used to control the appearance of an image's border?
• a) border-style
• b) border-radius
• c) border-image
• d) border-color
• Answer: c) border-image
55. What is the purpose of the crossorigin attribute in the <img> tag?
• a) To load images from different domains with CORS (Cross-Origin Resource Sharing) support
• b) To prevent images from being copied
• c) To ensure images are loaded asynchronously
• d) To add security to the image loading process
• Answer: a) To load images from different domains with CORS (Cross-Origin Resource Sharing) support
56. Which HTML tag is used to include a vector graphic on a webpage?
• a) <img>
• b) <svg>
• c) <graphic>
• d) <picture>
• Answer: b) <svg>
57. How can you add a caption below an image in HTML?
• a) Use the <caption> tag directly after the <img> tag
• b) Wrap the <img> tag inside a <figure> tag and use the <figcaption> tag for the caption
• c) Use the alt attribute for the caption
• d) Use the title attribute for the caption
• Answer: b) Wrap the <img> tag inside a <figure> tag and use the <figcaption> tag for the caption
58. Which image format supports both lossless compression and transparency?
• a) JPEG
• b) PNG
• c) GIF
• d) BMP
• Answer: b) PNG
59. What does the loading attribute in the <img> tag do when set to "lazy"?
• a) It loads the image immediately.
• b) It delays loading the image until the user clicks on it.
• c) It loads the image only when it is in the viewport.
• d) It prevents the image from loading.
• Answer: c) It loads the image only when it is in the viewport.
60. Which attribute in the <img> tag is used to specify an image map that defines clickable areas?
• a) usemap
• b) map
• c) area
• d) coords
• Answer: a) usemap

61. Which HTML attribute should be used to specify the path to an image file?
• a) href
• b) src
• c) alt
• d) link
• Answer: b) src
62. Which HTML element is used to provide different image resources for different screen sizes or devices?
• a) <img>
• b) <source>
• c) <picture>
• d) <figure>
• Answer: c) <picture>
63. What happens if the alt attribute is not provided for an image?
• a) The image will not be displayed.
• b) The browser will display a broken image icon.
• c) Screen readers may not be able to describe the image to visually impaired users.
• d) The image will have a default description of "Image."
• Answer: c) Screen readers may not be able to describe the image to visually impaired users.
64. Which of the following image formats is best suited for animated images?
• a) JPEG
• b) PNG
• c) GIF
• d) SVG
• Answer: c) GIF
65. What is the purpose of the title attribute in the <img> tag?
• a) To specify the URL of the image
• b) To provide additional information that appears as a tooltip when the image is hovered
• c) To set the title of the image in the browser's title bar
• d) To define the image's dimensions
• Answer: b) To provide additional information that appears as a tooltip when the image is hovered
66. How can you make an image a clickable link to another webpage?
• a) Wrap the <img> tag inside an <a> tag
• b) Add an href attribute directly to the <img> tag
• c) Use the src attribute in the <img> tag
• d) Use the link attribute in the <img> tag
• Answer: a) Wrap the <img> tag inside an <a> tag
67. Which attribute in the <img> tag can be used to specify the image's aspect ratio for better layout control?
• a) aspect-ratio
• b) preserveAspectRatio
• c) ratio
• d) srcset
• Answer: b) preserveAspectRatio
68. How do you prevent an image from being displayed entirely in HTML?
• a) Omit the src attribute
• b) Set the display property to none in CSS
• c) Use the hidden attribute in the <img> tag
• d) Set the visibility attribute to hidden
• Answer: c) Use the hidden attribute in the <img> tag
69. What is the default value of the loading attribute in the <img> tag?
• a) lazy
• b) eager
• c) defer
• d) immediate
• Answer: b) eager
70. Which HTML tag can be used to define an image caption that provides a description or context?
• a) <caption>
• b) <figcaption>
• c) <description>
• d) <summary>
• Answer: b) <figcaption>

71. Which attribute is used to specify the alternative text for an image in HTML?
• a) title
• b) alt
• c) desc
• d) label
• Answer: b) alt
72. What does the object-fit CSS property do for images?
• a) Controls the image's alignment
• b) Sets the image's border style
• c) Defines how an image should be resized to fit its container
• d) Adjusts the image's opacity
• Answer: c) Defines how an image should be resized to fit its container
73. Which attribute in the <img> tag is used to specify the image's width and height in a responsive design?
• a) width and height
• b) max-width and max-height
• c) min-width and min-height
• d) responsive-width and responsive-height
• Answer: b) max-width and max-height
74. Which of the following tags is used to define an image map in HTML?
• a) <img>
• b) <map>
• c) <area>
• d) <coords>
• Answer: b) <map>
75. What will happen if you use an invalid URL in the src attribute of an <img> tag?
• a) The browser will display the image as a broken link.
• b) The browser will show the URL as text.
• c) The browser will not render the image and will leave the space empty.
• d) The image will be replaced with a default placeholder.
• Answer: c) The browser will not render the image and will leave the space empty.
76. Which CSS property can be used to add a border around an image?
• a) border-style
• b) border-width
• c) border-color
• d) border
• Answer: d) border
77. What is the purpose of the sizes attribute in the <img> tag?
• a) To specify the image's dimensions in different viewports
• b) To define different image sizes for responsive images
• c) To control the image's loading behavior
• d) To apply different CSS styles to the image
• Answer: b) To define different image sizes for responsive images
78. How can you make an image fit its container while maintaining its aspect ratio?
• a) Set width and height to auto
• b) Use object-fit: contain
• c) Use object-fit: cover
• d) Set max-width to 100% and height to auto
• Answer: b) Use object-fit: contain
79. Which HTML attribute is used to specify the relationship between the current document and the linked image when using <map>?
• a) usemap
• b) map
• c) link
• d) relationship
• Answer: a) usemap
80. What is the purpose of the aria-label attribute when used with images?
• a) To provide a label for the image for screen readers
• b) To set the image's alt text
• c) To provide a visual label displayed on the image
• d) To specify the image's file name
• Answer: a) To provide a label for the image for screen readers

******************************************************