Images, Media & Forms Flashcards
What is the purpose of using images in web development?
To enhance the visual appeal and user experience of a website.
What are the common image formats used in web development?
- JPEG
- PNG
- GIF
- SVG
Which image format is best for photographs?
JPEG
Which image format supports transparency?
PNG
True or False: GIF format supports animation.
True
Fill in the blank: The _______ attribute is used to specify an alternative text for an image.
alt
What is the role of the <img></img> tag in HTML?
To embed images in a webpage.
What attribute can be used to set the width of an image in HTML?
width
What attribute can be used to set the height of an image in HTML?
height
What does the ‘src’ attribute in the <img></img> tag specify?
The URL of the image.
What is the benefit of using CSS for styling images?
To separate content from design and allow for easier maintenance.
Fill in the blank: The _______ property in CSS can be used to control the display of images.
display
What is the function of the <figure> and <figcaption> elements in HTML?</figure>
To group images with their captions.
True or False: The <video> tag can be used to embed video content in a webpage.</video>
True
What attributes are commonly used with the <video> tag?</video>
- controls
- autoplay
- loop
- muted
What is the purpose of the <audio> tag in HTML?</audio>
To embed audio files in a webpage.
What attributes can be used with the <audio> tag?</audio>
- controls
- autoplay
- loop
- muted
Fill in the blank: The _______ tag is used to create forms in HTML.
form
What are the common input types in HTML forms?
- text
- password
- checkbox
- radio
- submit
What is the purpose of the ‘action’ attribute in a form?
To specify where to send the form data when submitted.
What does the ‘method’ attribute in a form define?
The HTTP method to use when submitting the form.
True or False: The ‘GET’ method appends form data to the URL.
True
True or False: The ‘POST’ method sends form data in the body of the request.
True
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?
img {
max-width: 100%;
height: auto;
}
This ensures the image scales down if needed but keeps its original proportions.
You want a background image to always cover an entire <div> but prevent distortion. Which CSS property ensures this behavior?
background-size: cover;
This makes the image cover the whole element while maintaining its aspect ratio, though some parts may be cropped.
You’re embedding a <video> inside a responsive design. What CSS rules ensure the video scales properly without overflowing?
video {
max-width: 100%;
height: auto;
display: block;
}
This makes the video adapt to the container while keeping its proportions.
What’s the best way to associate a <label> with an <input> field for accessibility and why?
<label for="email">Email:</label> <input type="email" id="email" name="email">
Using the for attribute links the label to the input, making it clickable and improving accessibility for screen readers.
How can you change the color of placeholder text inside an <input> field?
input::placeholder {
color: gray;
font-style: italic;
}
This targets the placeholder text specifically.
How do you make an <iframe> scale proportionally while maintaining a 16:9 aspect ratio?
.iframe-container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 aspect ratio */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This method ensures the <iframe> resizes dynamically while keeping its aspect ratio.
You want an image to load different versions based on screen size. How would you use the srcset attribute to display:
small.jpg for screens below 600px,
medium.jpg for screens between 600px and 1200px,
large.jpg for screens above 1200px?
<img src="large.jpg"
srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 1800w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
33vw"
alt="Responsive Image">
This allows the browser to choose the best image size based on the device width.
You have a form where inputs take full width on small screens but only 50% width on larger screens. How do you achieve this using CSS media queries?
input {
width: 100%; /* Default: full width */
}
@media (min-width: 768px) {
input {
width: 50%; /* On larger screens, inputs take half width */
}
}
This ensures the form adapts to different screen sizes.
How do you hide the default checkbox but still allow it to be checked using a custom-designed label?
<input type="checkbox" id="custom-checkbox" hidden>
<label for="custom-checkbox" class="custom-box"></label>
<style>
.custom-box {
width: 20px;
height: 20px;
display: inline-block;
border: 2px solid black;
cursor: pointer;
}
input:checked + .custom-box {
background: black;
}
</style>
The checkbox is hidden, and a styled <label> is used as a custom checkbox.</label>
How can you hide the default controls of a <video> tag and create your own play/pause button using JavaScript?
<video id="myVideo" width="400">
<source src="video.mp4" type="video/mp4">
</video>
<button id="playPause">Play</button>
<script>
const video = document.getElementById("myVideo");
const button = document.getElementById("playPause");
button.addEventListener("click", function() {
if (video.paused) {
video.play();
button.textContent = "Pause";
} else {
video.pause();
button.textContent = "Play";
}
});
</script>
This hides the default controls and adds a custom play/pause button.
