HTML ESSENTIAL TRAINING Flashcards

1
Q

What is HTML?

A

HyperText Markup Language - the standard markup language for documents designed to be displayed in a web browser. It is a skeleton of a web. It can be assisted by technologies such as CSS and JS.

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

What is HTML?

A

HyperText Markup Language - the standard markup language for documents designed to be displayed in a web browser. It is a skeleton of a web. It can be assisted by technologies such as CSS and JS.

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

What is the role of HTML?

A

HTML marks up the content of a site. It tells the user’s computer what thins are. It provides access to the functionality built into the browser.

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

From which programming languages the web is made of?

A

HTML, CSS, and JavaScript.

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

Why does the Web use multiple programming languages?

A

The web is different than other types of software. You can code the website today and expect that it will still work in five years or 10 years, without any updates. Your code can easily work on an old computer or an old browser from 10 years ago. The web can run on Mac, Android, iOS, Linux, game consoles, watches, televisions, Ebook readers, etc. The web was invented to provide the way to share the content, even when our computers are different from each other.

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

What is a functionality of HTML?

A

There is no programming logic, loops, functions. HTML Is a declarative language. It’s all vocabulary.

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

Why is web or browser programming broken up into three parts?

A

to be resident to changes in technology

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

Which is the most powerful and fragile of the browser programming languages?

A

JavaScript

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

What happens when HTML is broken because of a bug in the code?

A

The browser guesses what you meant, and does its best to fix the bug itself.

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

What is a tag in HTML? Give an example

A

HTML tags are the keywords which define how web browser will format and display the content. The example:

stands for paragraph.

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

Give an example of opening and closing tags in HTML.

A
  • opening tag
  • closing tag

Hello, I am a paragraph

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

What is HTML element?

A

An HTML element is an individual component of an HTM document. It represents semantics, or meaning. For example, the title element represents the title of the document. Most HTML elements are written with s tart tag (or opening tag) and an end tag (or closing tag), with content in between.

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

Why is it important to use a closing tag and make sure all the content we want is written before it, and not after it?

A

Anything that comes after the closing tag will be displayed on the same HTML page, but it will be understood by the browser to be outside of this article. It’s after the article. It matters where we open and we close out HTML tags, and how we nest elements inside of each other. We use this to convey meaning about content and interfaces. One of the easiest mistakes in HTML you can make is to forget to include the closing tag.

This is a headline

This is paragraph

This is second paragraph

This is third…

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

What is the opening and closing tag for a paragraph?

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

What are the six headlines?

A

,

,

,

,

,

######

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

What is the hierarchy of headlines starting from the biggest to the smallest?

A

,

,

,

,

,

######

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

Which tag is used to apply visual-only italics?

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

Which tag is used to apply emphasis italics?

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

Which tag conveys importance, seriousness, urgency?

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

What tag conveys bold?

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

What are the four elements that we have to mark up text to be italicized or bolded, and which of them convey a certain meaning, and which - a human language reason for the bold or italic?

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

What are the types of lists in HTML?

A

Unordered list Ordered list Definition lists

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

Give me the example of the unordered list.

A
  • Dogs
  • Cats
  • Parrots
  • Hamsters
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Give me the example of the ordered list.

A
  1. Dogs
  2. Cats
  3. Parrots
  4. Hamsters
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Give me the example of key value pair list.

A

<dl>
<dt>term</dt>
<dd>definition</dd>
<dd>additional definition</dd>
<dt>second term</dt>
<dd>definition of second term</dd>
<dt>third term</dt>
<dd>definition of third term</dd>
</dl>

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

What tag represents a block quotation?

A

>

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

What tag represents inline quotation?

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

What tag represents a reference to a name, work, standard, URL, etc.?

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

What HTML elements are inline? Give me a few examples. What they are meant for?

A

Inline Elements: They are meant for wrapping around phrases of content that are inline with some other content.

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

What are block-level elements? Name a few examples.

A

> These elements start a new block. They are a thing on the page. A block that can be followed by another block.

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

What is the HTML tag to display the date and time?

A

May 9, 2025 7:00 am half past noon 3:45pm in NYC Wednesday, nov 4th at 7pm

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

What tag will you use when you want to show the code in the content?

A

``

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

What are the HTML entities? Name them

A

< < - less than sign > > - greater than sign

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

What is a space tag?

A
  • it has no closing tag.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

What type of spacing tag we use for the poem or irregular text in HTML?

A
hello... my world... what ever
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

What are subscripts in HTML?

A

Subscripts are characters that are set below the text baseline, and it is sometimes rendered in a smaller font. H20

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

What are the superscripts in HTML?

A

Superscripts are characters that are set half a character above the normal line, and it is sometimes rendered in a smaller font. footnote 2

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

What language will you use if you want to put complex equations on a website?

A

MathML - Markup language for math. It is more powerful than HTML.

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

What tag will you use to mark text that has a little meaning?

A

<small> </small> - to convey something that has very little prominence. <small>2019 Copyrights</small>

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

How many elements are there in the following HTML code?

The End of the World is Nigh
Musings on our Current Social Predicament, by Trans I. Tory

Random content….

A

4

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

How do we use HTML elements in combination with each other?

A

Here’s some text that should be emphasized.

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

Which two elements are used to mark-up subscript and superscript text?

A

and

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

When deciding which headline level to use (h1, h2, h3, h4, h5, h6) which of these statements is true?

A

We should use the level of headline that makes sense, based on the semantic meaning of content.

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

Which markup is correct for displaying date and time?

A

October 8, 2025

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

Which tag preserves the spaces, tabs, and line breaks within a piece of text so a poem or piece of code can be presented faithfully?

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

What is the correct structure of the HTML? Give an example.

A

The Headline

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

How does the break tag differ from most other inline and block tags?

A

It does not require a closing tag.

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

Why is it important to remember to use closing tags?

A

so it is clear where elements end

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

Which elements are used to mark-up code on screen?

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

What is the role of HTML?

A

HTML marks up the content of a site. It tells the user’s computer what thins are. It provides access to the functionality built into the browser.

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

From which programming languages the web is made of?

A

HTML, CSS, and JavaScript.

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

Why does the Web use multiple programming languages?

A

The web is different than other types of software. You can code the website today and expect that it will still work in five years or 10 years, without any updates. Your code can easily work on an old computer or an old browser from 10 years ago. The web can run on Mac, Android, iOS, Linux, game consoles, watches, televisions, Ebook readers, etc. The web was invented to provide the way to share the content, even when our computers are different from each other.

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

What is a functionality of HTML?

A

There is no programming logic, loops, functions. HTML Is a declarative language. It’s all vocabulary.

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

Why is web or browser programming broken up into three parts?

A

to be resident to changes in technology

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

Which is the most powerful and fragile of the browser programming languages?

A

JavaScript

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

What happens when HTML is broken because of a bug in the code?

A

The browser guesses what you meant, and does its best to fix the bug itself.

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

What is a tag in HTML? Give an example

A

HTML tags are the keywords which define how web browser will format and display the content. The example:

stands for paragraph.

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

Give an example of opening and closing tags in HTML.

A
  • opening tag
  • closing tag

Hello, I am a paragraph

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

What is HTML element?

A

An HTML element is an individual component of an HTM document. It represents semantics, or meaning. For example, the title element represents the title of the document. Most HTML elements are written with s tart tag (or opening tag) and an end tag (or closing tag), with content in between.

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

Why is it important to use a closing tag and make sure all the content we want is written before it, and not after it?

A

Anything that comes after the closing tag will be displayed on the same HTML page, but it will be understood by the browser to be outside of this article. It’s after the article. It matters where we open and we close out HTML tags, and how we nest elements inside of each other. We use this to convey meaning about content and interfaces. One of the easiest mistakes in HTML you can make is to forget to include the closing tag.

This is a headline

This is paragraph

This is second paragraph

This is third…

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

What is the opening and closing tag for a paragraph?

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

What are the six headlines?

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

What is the hierarchy of headlines starting from the biggest to the smallest?

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

Which tag is used to apply visual-only italics?

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

Which tag is used to apply emphasis italics?

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

Which tag conveys importance, seriousness, urgency?

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

What tag conveys bold?

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

What are the four elements that we have to mark up text to be italicized or bolded, and which of them convey a certain meaning, and which - a human language reason for the bold or italic?

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

What are the types of lists in HTML?

A

Unordered list Ordered list Definition lists

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

Give me the example of the unordered list.

A
  • Dogs
  • Cats
  • Parrots
  • Hamsters
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
71
Q

Give me the example of the ordered list.

A
  1. Dogs
  2. Cats
  3. Parrots
  4. Hamsters
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
72
Q

Give me the example of key value pair list.

A

<dl>
<dt>term</dt>
<dd>definition</dd>
<dd> additional definition</dd>
<dt>second term</dt>
<dd>definition of second term</dd>
<dt>third term</dt>
<dd>definition of third term</dd>
</dl>

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

What tag represents a block quotation?

A

>

74
Q

What tag represents a reference to a name, work, standard, URL, etc.?

A

<cite></cite>

75
Q

What HTML elements are inline? Give me a few examples. What they are meant for?

A

Inline Elements: They are meant for wrapping around phrases of content that are inline with some other content.

76
Q

What are block-level elements? Name a few examples.

A

> These elements start a new block. They are a thing on the page. A block that can be followed by another block.

77
Q

What is the HTML tag to display the date and time?

A

May 9, 2025 7:00 am half past noon 3:45pm in NYC Wednesday, nov 4th at 7pm

78
Q

What tag will you use when you want to show the code in the content?

A

``

79
Q

What are the HTML entities? Name them

A

< < - less than sign > > - greater than sign

80
Q

What is a space tag?

A
  • it has no closing tag.
81
Q

What is a relative URL?

A

It doesn’t contain any protocol or machine information. Its path generally refers to a resource on the same machine as the current document. blog/match-9.html - resource. https://awesomecats.com/people/index.html

82
Q

What are subscripts in HTML?

A

Subscripts are characters that are set below the text baseline, and it is sometimes rendered in a smaller font. H20

83
Q

What are the superscripts in HTML?

A

Superscripts are characters that are set half a character above the normal line, and it is sometimes rendered in a smaller font. footnote 2

84
Q

What language will you use if you want to put complex equations on a website?

A

MathML - Markup language for math. It is more powerful than HTML.

85
Q

What tag will you use to mark text that has a little meaning?

A

<small> </small> - to convey something that has very little prominence. <small>2019 Copyrights</small>

86
Q

How many elements are there in the following HTML code?

The End of the World is Nigh
Musings on our Current Social Predicament, by Trans I. Tory

Random content….

A

4

87
Q

How do we use HTML elements in combination with each other?

A

Here’s some text that should be emphasized.

88
Q

Which two elements are used to mark-up subscript and superscript text?

A

and

89
Q

When deciding which headline level to use (h1, h2, h3, h4, h5, h6) which of these statements is true?

A

We should use the level of headline that makes sense, based on the semantic meaning of content.

90
Q

Which markup is correct for displaying date and time?

A

October 8, 2025

91
Q

Which tag preserves the spaces, tabs, and line breaks within a piece of text so a poem or piece of code can be presented faithfully?

A
92
Q

What is the correct structure of the HTML? Give an example.

A

The Headline

93
Q

How does the break tag differ from most other inline and block tags?

A

It does not require a closing tag.

94
Q

Why is it important to remember to use closing tags?

A

so it is clear where elements end

95
Q

Which elements are used to mark-up code on screen?

A
and
96
Q

What tag represents inline quotation?

A
97
Q

Which type of element is typically a block?

A

The paragraph element creates an area on a page, rather than a portion of a line.

98
Q

What’s is a true statement about the difference between the

> element and the element?

A

> is a block-level element, while the element is inline, nested inside another block-level element. If you want to highlight a short quote, is great to use inside of a paragraph or other block-level element.> is for when you want something bigger, to really stand out.

99
Q

In the tag bellow what do we call “datetime”? March, 7, 2024

A

an attribute

100
Q

What is a true statement about HTML lists?

A

Lists can be used to mark up navigation.

101
Q

Besides visual appearance, what is most important about headline levels?

A

creating an organizational hierarchy The hierarchy created by headlines can be used for other purposes.

102
Q

When we want to convey importance, seriousness, or urgency, which element do we use?

A

The element is meant for importance.

103
Q

Which elements are used to convey meaning, instead of just typesetting convention?

A

and These tags are used to convey a sense of importance or stress when spoken.

104
Q

How do you inspect HTML in a browser developer tools?

A

Right-click on the demo code and then click INSPECT ELEMENT, or instead you can go to tools, web developer, inspector.

105
Q

What are global attributes?

A

Attributes that can be applied to any HTML element.

106
Q

What is the most commonly used global attribute?

A

The CLASS attribute - allows us to target all elements with that class in our CSS or JS.

This is me.

107
Q

What is the second most commonly used global attribute?

A

The ID attribute - allows us to target a unique element with that id in our CSS of JS.

This is me.

Id is much more specific that’s why devs prefer class over it.

108
Q

At what are Ids particularly helpful in HTML?

A

Ids are helpful for addressing particular elements with JS, or, with a targeted link. The fact that there will only ever be one element with any particular ID name, becomes useful when interacting with JavaScript or links.

109
Q

Which attribute let the user to edit page content?

A

> This is editable block.

<cite>Your name here</cite> contenteditable

110
Q

What attribute gives us a way to tell the browser what language the content is in?

A

This is me

L-A-N-G - stands for language

111
Q

Which attribute tells the browser in which direction the text flows?

A

D-I-R - dir - stands for direction.

This is me, flow from left to the right.

DIR=LTR - for scripts that run left to right. DIR=RTL - for scripts that run right to left.

112
Q

What are ARIA Roles?

A

HTML attributes that provide accessible information about the specific element. he layer of information conveyed by ARIA tells screen readers, braille displays, magnifiers and other assistive technology things they need to know to make a site fully accessible - also to the people with disabilities.

113
Q

What is DOM HTML?

A

The Document Object Model is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure whether each node is an object representing a part of the document.

114
Q

Can HTML elements be written in uppercase letters?

A

Yes, they can. When HTML was new, everyone capitalized HTML elements. However, when HTML evolved, the web industry switched to believing that it is better to write all the elements with lowercase letters. There is still millions of ancient websites out there with HTML written in all caps, and thee are billions of newer sites that never use capitals in their HTML.

115
Q

Name a few HTML Entities.

A

Entity: < < > > & & &copy - copyright character ™ - TM &star; - star sign

116
Q

How does a user gain access to the debugging features of a browser?

A

by accessing developer tools There are several ways to inspect the HTML that the browser is interpreting.

117
Q

Which of these attributes is NOT a global attribute? datetime, class, dir, lang

A

datetime The datetime attribute is only used on the time element, as a way to create a machine-readable date.

118
Q

When should we use an ARIA attribute?

A

any time the existing markup makes things confusing in the accessibility tree ARIA is used to clarify to the accessibility tree what is happening with a particular element, set of elements, or interface. If something is broken, ARIA can be a way to fix it.

119
Q

What sort of efforts require the use and understanding of ARIA attributes?

A

those involving accessibility issues It may be essential to functionality that all users can access specific content.

120
Q

Which syntax can we use to add comments to our HTML?

A
121
Q

Which code would you use to guarantee that the words “Hocus Pocus” are not split by a line break after “Hocus”?

A

Hocus Pocus The non-breaking space character entity ensures that “Hocus Pocus” will always display on the same line.

122
Q

What is non-breaking space entity in HTML?

A
123
Q

When might a good time to use Developer Tools?

A

Developer Tools give you a powerful close-up behind-the-scenes look at your material and they are always good to use at any time.

124
Q

In HTML, when would you use a character entity like the one shown below?

A

any time you want characters to appear as simple text instead of being parsed as code

125
Q

How does the id attribute differ from the class attribute?

A

An id attribute name may only be used once in a document. The id refers to one specific part of a document.

126
Q

How can we present the link in the HTML?

A
127
Q

What are absolute URLs in the HTML?

A

LinkLink Some URLs point to the home page of a site, others point to content deeper in, and all of these are called absolute URLs.

128
Q

What is HTTP?

A

HyperText transfer Protocol - is an application protocol for distributed, collaborative, hypermedia information systems that allows users to communicate data on the WWW.

129
Q

What is a relative URL?

A

It doesn’t contain any protocol or machine information. Its path generally refers to a resource on the same machine as the current document. blog/match-9.html - resource.

130
Q

Write HTML code that displays navbar with unordered list and links inside to the pages: Home, People, Prices, Contact.

131
Q

Write HTML footer with links inside to pages: Privacy Policy, Terms.

132
Q

Which HTML elements are commonly used in marking up navigation?

A

,

, * ,

133
Q

What is wrong with the following code? http:transferfink.com

A

The positions of the link text and the link address have been interchanged. The code should actually read,

[Click Me](http:transferfink.com)
134
Q

How do we make a basic link in HTML?

135
Q

Which address points to index.html file?

A

“/index.html”

136
Q

When might we use a relative URL instead of an absolute URL?

A

when a website might be moved from a staging server to a production server

137
Q

What is the tag for image in the HTML?

A

- it does not have a closing tag.

138
Q

What are the attributes of the tag?

A

The attributes are: src, height, width, alt

139
Q

What are the image formats in the HTML?

A

gif, svg, jpg, png

140
Q

What are GIF advantages and disadvantages?

A
  • does well competing large areas of a single color - limited color space of 256 colors - can do transparency, with jagged edges - can have multiple frames, and make a little movie
141
Q

What are SVG advantages and disadvantages?

A
  • it is good for icons, logos. - it is a vector file - it contains instructors for a drawing, make it square, make it this color, put it here. Because SVGs are made of vector and math, these images can be scale to be physically quite large or very small without losing the quality. They will never go pixelated because they don’t have any pixels.
142
Q

What is SVG?

A

It stands for Scalable vector graphic. It is a whole programming language for graphics. it contains instructors for a drawing, make it square, make it this color, put it here. Because SVGs are made of vector and math, these images can be scale to be physically quite large or very small without losing the quality. They will never go pixelated because they don’t have any pixels.

143
Q

What is JPG? What are advantages and disadvantages of it?

A

Image format for compressing photos. JPG can be compressed, you can pick up the balance between quality or the size.

144
Q

What is PNG? What are advantages and disadvantages of it?

A

The PNG sometimes does a better job than a GIF at compressing the kind of images that the GIF format likes, and sometimes it does a better job than a JPG than compressing the kind of images that the JPG format likes, but not always. - images that need transparency - good at compression

145
Q

What is a responsive image?

A

Responsive image is useful when we want to display a big, beautiful, high resolution image for people with big screens and then, shrink it way down for the people on phones, on small screens. We can do it with HTML this way, without using CSS or any other framework.

146
Q

What is a responsive width?What should we do if we want the browser to consider the width of the viewport and to choose a file based on the size of the screen as well as the density?

A
147
Q

What are the sizes attributes?

A

The sizes attributes are the lists which size image to use at which media query.

148
Q

What is SRCSET attribute?

A

Allows you to specify multiple files to be used based on either viewport width or image pixel width.

149
Q

What is the picture element?

A

it contains one or more elements, each referring to different images through the SRCSET attribute. This way browser can choose the image that best fits the current view and/or device. Each element has a media attribute that defines when the image is the most suitable.

150
Q

What is Figure tag?

A
  • it is good for anything that appears as a figure, illustrating something.
151
Q

What is figcaption?

A
  • it is good for demonstration of a concept which needs a caption.
152
Q

Write an example of and code.

A

Alfonso serving pancakes The figure element includes or encapsulates the caption element and other graphical elements.

153
Q

If you want to create a compact image that can display in large sizes without pixelation, which should you choose?

A

SVG Scalable Vector Graphics can scale to massive sizes and still look neat, like they were built for it.

154
Q

Which version of the image in the following code would be the slowest to load?

A

sunsetC.jpg The largest image loads the slowest.

155
Q

If you want to keep a caption with an image, which combination of elements lets you identify them as connected?

A

Surround the image with a figure element, and use the figcaption element inside of figure. is designed to contain a caption that will stay with your image.

156
Q

What is the most effective way to use bandwidth efficiently when sending images?

A

Create a set of options the browser can choose from using the srcset attribute. The srcset attribute lets the browser choose from options that fit the specific situation, minimizing bandwidth consumption while producing attractive results.

157
Q

What do you need to change to move from a resolution-based srcset to a width-based srcset?

A

Provide pixel measurements (w) instead of 1x, 2x, etc. Yes - setting the width explicitly changes srcset’s behavior.

158
Q

What are the four attributes we want to include on every img element?

A

src, alt, height, width Yes. src is short for source, and links to the file. Alt provides an alternative text experience of the image. Height and width let the browser know how much space the image needs before the file is fetched, improving performance.

159
Q

Why should you spend effort optimizing image sources and corresponding display attributes?

A

to have the best compromise between image quality and download speed. Bear in mind that there is no value in downloading data that will not be used.

160
Q

Why should you include the height and width specifications for all images?

A

to make the page layout more efficient. The size of an image can be learned before download is complete.

161
Q

How do you create an image that changes content depending on the surrounding layout?

A

Nest img, source, and srcset information inside of a picture element. The element gives you the flexibility you need to change content as well as image size.

162
Q

Which format is best suited to handle complex drawings and logos?

A

SVG is a vector graphics format for describing complex drawings.

163
Q

Why would you want to use the w specification in srcset instead of the x specification?

A

to consider both display density and window width when choosing the image source. You can specify the width of the source image in the code.

164
Q

What is the element used to place the audio?

A
165
Q

What type of attributes we can use with audio?

A

loop - when it gets to the end, it starts playing from the beginning again. - the audio is played automatically as soon as the page loads.

166
Q

Why has a closing tag?

A

So we can use the source element to specify more than one audio file:

167
Q

How to create video tag?

A

Video tag is used to embed video content in a document, such as movie clip or other video streams. Your browser does not support video tag

168
Q

What is CODEC?

A

It is a device or piece of software capable of encoding or decoding a digital stream or a signal for transmission over a data network. A codec can be for audio or video content.

169
Q

What is element in the HTML and how to use it?

A

HTML5 allows us to specify subtitles for a video using the element. The various attributes of this element allow us to specify such things as the type of content that we’re adding, the language it’s in, and of course a reference to the text file that contains the actual subtitle information.

170
Q

What is the difference between captions and subtitles?

A

Captions are designed for viewers who cannot hear the audio in the video. Subtitles are designed for viewers who can hear but do not understand the language in the video.

171
Q

Write a code example with video tag and captions.

A
172
Q

What is Embedding?

A

Placing content from one site into the body of a page on another site.

173
Q

how to embed the video on the page? Example code.

A
174
Q

How do you create a video element that specifies different resolutions of video that browsers can choose from when loading the video?

A

You can’t do this. Instead, the browser adapts to circumstances as needed.

175
Q

What should you do to create an audio player with controls?

A

Use the audio element with the controls attribute set to yes. The audio element has controls built in, which you can show just by setting the controls attribute to yes.

176
Q

You can add chapter divisions to videos by _____.

A

referencing a VTT file listing chapters HTML doesn’t have a chapter division mechanism built into it, but browsers recognize chapters from VTT files.

177
Q

Which tag must you use within a video element to tell the player where to look for captions?

A

You must specify the source for the captions in a vtt file.

178
Q

What do embedded YouTube videos, maps, and CodePen demos have in common?

A

All are services you can include in your own pages and sites with embed code based on the iframe element. Embed codes built with the iframe element make it easier combine content from other sources into your pages and apps.

179
Q

What are the options for the value of the lang attribute?

A

The lang attribute is a universal attribute, it means you can put it on any element. - language - region - script - alphabet

180
Q

Write the code If the majority of a page is written in Mexican Spanish, for instance, but there are several block quotes written in Nahuatl.

A