Images, Media & Forms

Question 1

What is the purpose of using images in web development?

Answer 1

To enhance the visual appeal and user experience of a website.

Question 2

What are the common image formats used in web development?

Answer 2

• JPEG
• PNG
• GIF
• SVG

Question 3

Which image format is best for photographs?

Answer 3

JPEG

Question 4

Which image format supports transparency?

Answer 4

PNG

Question 5

True or False: GIF format supports animation.

Answer 5

True

Question 6

Fill in the blank: The _______ attribute is used to specify an alternative text for an image.

Answer 6

alt

Question 7

What is the role of the <img></img> tag in HTML?

Answer 7

To embed images in a webpage.

Question 8

What attribute can be used to set the width of an image in HTML?

Answer 8

width

Question 9

What attribute can be used to set the height of an image in HTML?

Answer 9

height

Question 10

What does the ‘src’ attribute in the <img></img> tag specify?

Answer 10

The URL of the image.

Question 11

What is the benefit of using CSS for styling images?

Answer 11

To separate content from design and allow for easier maintenance.

Question 12

Fill in the blank: The _______ property in CSS can be used to control the display of images.

Answer 12

display

Question 13

What is the function of the <figure> and <figcaption> elements in HTML?</figure>

Answer 13

To group images with their captions.

Question 14

True or False: The <video> tag can be used to embed video content in a webpage.</video>

Answer 14

True

Question 15

What attributes are commonly used with the <video> tag?</video>

Answer 15

• controls
• autoplay
• loop
• muted

Question 16

What is the purpose of the <audio> tag in HTML?</audio>

Answer 16

To embed audio files in a webpage.

Question 17

What attributes can be used with the <audio> tag?</audio>

Answer 17

• controls
• autoplay
• loop
• muted

Question 18

Fill in the blank: The _______ tag is used to create forms in HTML.

Answer 18

form

Question 19

What are the common input types in HTML forms?

Answer 19

• text
• password
• checkbox
• radio
• submit

Question 20

What is the purpose of the ‘action’ attribute in a form?

Answer 20

To specify where to send the form data when submitted.

Question 21

What does the ‘method’ attribute in a form define?

Answer 21

The HTTP method to use when submitting the form.

Question 22

True or False: The ‘GET’ method appends form data to the URL.

Answer 22

True

Question 23

True or False: The ‘POST’ method sends form data in the body of the request.

Answer 23

True

Question 24

You have an <img> inside a container that has max-width: 800px. The image is larger than this container. What CSS rules should you apply to ensure the image never overflows while maintaining its aspect ratio?

Answer 24

img {
  max-width: 100%;
  height: auto;
}

This ensures the image scales down if needed but keeps its original proportions.

Question 25

You want a background image to always cover an entire `

` but prevent distortion. Which CSS property ensures this behavior?

Answer 25

`background-size: cover;` ## Footnote This makes the image cover the whole element while maintaining its aspect ratio, though some parts may be cropped.

Question 26

You're embedding a `

Answer 26

``` video { max-width: 100%; height: auto; display: block; } ``` ## Footnote This makes the video adapt to the container while keeping its proportions.

Question 27

What’s the best way to associate a `` with an `` field for accessibility and why?

Answer 27

``` Email: ``` ## Footnote Using the for attribute links the label to the input, making it clickable and improving accessibility for screen readers.

Question 27

How can you change the color of placeholder text inside an` ` field?

Answer 27

``` input::placeholder { color: gray; font-style: italic; } ``` ## Footnote This targets the placeholder text specifically.

Question 28

How do you make an `