Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

FreeCodeCamp.org | Certified Full Stack Developer Curriculum > Basic HTML | Working with media > Flashcards

Basic HTML | Working with media Flashcards

1
Q

What is a replaced element?

A

An element whose content is determined by an external resource rather than by CSS itself.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is CSS used for?

A

To add styles to a web page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Name three common examples of replaced elements.

A
  • Image
  • Iframe
  • Video
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Can CSS modify the content of a replaced element?

A

No, CSS cannot directly modify the content of a replaced element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What does the image element do?

A

Embeds an image on your web page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Provide an example code for an image element.

A

<img></img>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What does the iframe element do?

A

Embeds an external site on your web page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Provide an example code for an iframe element.

A

<iframe></iframe>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What can CSS control regarding replaced elements?

A

CSS can control the positioning of the element and apply filters.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Can CSS style the contents of an embedded site in an iframe?

A

No, CSS cannot style the contents of an embedded site.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Name two other replaced elements besides image and iframe.

A
  • Video
  • Embed
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Under what circumstances can some elements behave as replaced elements?

A

When they have specific attributes, such as the input element with the type attribute set to image.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Provide an example code for an input element considered a replaced element.

A

<input></input>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Are input types like text or email considered replaced elements?

A

No, they are not considered replaced elements.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What are the three tools to consider when using media like images on web pages?

A

The size, the format, and the compression.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What does the resolution 640x480 represent?

A

640 represents the width and 480 represents the height in pixels.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Why is it important to match the image size to the styled size on a website?

A

To avoid requiring users to download unnecessary data.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is the effect of serving a larger image than the styled size?

A

It results in a larger file size and unnecessary data download.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What are two common file formats for images?

A

PNG and JPG.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What are more optimized image formats to consider instead of PNG and JPG?

A

WEBP and AVIF.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is the purpose of a compression algorithm in image processing?

A

To reduce the size of files or data.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Name a tool that can be used to compress images locally.

A

pngcrush.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What does lossless compression mean?

A

The original data can be perfectly reconstructed from the compressed data.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What happens when you compress a JPG image?

A

It results in degraded quality.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Fill in the blank: A smaller resolution results in a _______.
smaller file size.
26
True or False: JPG is a lossless format.
False.
27
What is the default copyright status of images?
All rights reserved ## Footnote This means the creator holds all copyright for the image.
28
What are the three ways to legally use an image?
1. Obtain written permission from the copyright holder 2. Purchase a license from the copyright holder 3. Use the image under fair use
29
What does fair use require?
Use of the image must be both limited and transformative ## Footnote Examples include commenting on, reviewing the art, or creating a parody.
30
What is a permissive license?
A type of license that allows use of images under certain conditions ## Footnote Examples include Creative Commons and BSD licenses.
31
What is a requirement when using images under a Creative Commons license?
Read the license to understand the specific rules ## Footnote These rules may include making your website open source or not modifying the image.
32
What characterizes images in the public domain?
No copyright attached and free to use without restrictions ## Footnote Images licensed under Creative Commons 0 are considered public domain.
33
How can you filter image results by license?
Most search engines allow filtering by license ## Footnote Sites like Pixabay and Unsplash offer free-to-use images.
34
True or False: You can use any image you find online without any restrictions.
False ## Footnote Most images are protected by copyright and have specific usage rules.
35
Fill in the blank: To use an image legally, you must either obtain permission, purchase a license, or use it under _______.
fair use
36
What are SVGs?
SVG stands for scalable vector graphic
37
How do raster formats like PNG and JPG work?
They are pixel-based, tracking color value in each pixel
38
What is a major downside of raster-based images?
They do not upscale well, leading to pixelation or blurriness
39
What is the main advantage of SVGs over raster formats?
SVGs can be scaled to any size without impacting quality
40
How do vector graphics like SVGs track data?
They track data based on paths and equations to plot points, lines, and curves
41
What format do SVGs store data in?
XML
42
How can SVGs be used in web development?
They can be used directly in code as raw HTML with the svg element
43
What is a great use case for SVGs?
For icons and custom bullet points
44
What popular icon library uses SVG images for their icons?
Font Awesome
45
Why are SVGs ideal for webpage logos?
They scale perfectly for responsive design
46
Fill in the blank: SVGs allow you to adapt your layout to any _______.
responsive design
47
True or False: SVGs cannot be programmatically changed in color.
False
48
What happens when you try to enlarge a PNG image?
It becomes pixelated or blurry
49
What should you try next time you have an SVG locally?
Open it with a text editor and play with the code
50
What do the audio and video elements allow you to do in HTML?
Add sound and video content to HTML documents.
51
Which audio formats are supported by the audio element?
* mp3 * wav * ogg
52
Which video formats are supported by the video element?
* mp4 * ogg * webm
53
How do you include audio content on a web page?
Use the audio element with the src attribute pointing to the audio file location.
54
What attribute must be added to the audio element to display playback controls?
controls
55
What does the controls attribute do in the audio element?
Enables users to manage audio playback, including adjusting volume, pausing, or resuming playback.
56
What is the purpose of the loop attribute in the audio element?
Makes the audio replay continuously.
57
What happens when the muted attribute is present in the audio element?
Starts the audio in a muted state.
58
How can you accommodate different audio file types for browser compatibility?
Use source elements inside the audio element.
59
What will the browser do when multiple source elements are provided in the audio element?
Select the first source that it understands.
60
What attributes learned for the audio element are also supported in the video element?
* src * controls * loop * muted
61
What unique attribute is available for the video element that is not available for the audio element?
poster
62
What does the poster attribute do in the video element?
Displays an image while the video is downloading.
63
What attribute can be used to set the width of the video element?
width
64
What does iframe stand for?
Inline frame
65
What is the purpose of the iframe element?
To embed other HTML content directly within an HTML page
66
What are some types of content that can be embedded using an iframe?
* Videos * Maps * Other HTML elements * Other web pages
67
What is the basic syntax of the iframe element?
68
What does the src attribute in an iframe specify?
The URL of the page you want to embed
69
What does the width attribute in an iframe define?
The width of the iframe
70
What does the height attribute in an iframe define?
The height of the iframe
71
What is the function of the allowfullscreen attribute in an iframe?
Allows the user to display the iframe in full screen mode
72
Why is it important to specify a title attribute for the iframe?
It's important for accessibility
73
How can you embed a video from YouTube using an iframe?
Copy the embed code from YouTube with the src attribute pointing to the video URL
74
What must be replaced in the YouTube URL to embed a video?
Replace https://youtu.be with https://youtube.com/embed/
75
Fill in the blank: The domain required for embedding videos with the iframe element is _______.
https://youtube.com/embed/
76
Can videos be embedded from sources other than YouTube or Vimeo?
Yes, videos can come from anywhere
77
What is an example of a video embedded from Pixabay using the iframe element?
78
What other content can be embedded using the iframe element besides videos?
* Maps * Other web pages * Direct HTML
79
What attribute must be used to embed direct HTML within the iframe element?
srcdoc

FreeCodeCamp.org | Certified Full Stack Developer Curriculum (9 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2025 Bold Learning Solutions. Terms and Conditions