Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Coding > HTML > Flashcards

HTML Flashcards

1
Q

What does HTML stand for?

A

HyperText Markup Language

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

What is a markup language?

A

a computer language that defines the structure and presentation of raw text

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

What is HyperText?

A

text displayed on a computer or device that provides access to other text through links, also known as hyperlinks

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

What is HTML composed of?

A

Elements

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

What is the HTML element for paragraph?

A

<p> (opening tag)

| </p>

(closing tag)

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

What is an HTML element made of?

A

a tag and content

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

How is HTML organised in relationships?

A

as a collection of family tree relationships

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

What is an element called when it is contained within another element?

A

The child of that element, and the child element is nested inside the parent element

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

The child element is ____ inside the parent element?

A

Nested

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

What is the relationship between elements and their ancestor and descendent elements known as?

A

Hierarchy

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

What are elements at the same level called?

A

Siblings

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

How many headings / heading elements are there in HTML?

A

6

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

What are the 6 headings in HTML?

A

< h1 > — used for main headings. All other smaller headings are used for subheadings
< h2 > < h3 > < h4 >< h5 > < h6 >

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

What are the 6 headings in HTML?

A

<h1> — used for main headings. All other smaller headings are used for subheadings
</h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

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

Why is <div> useful?</div>

A

It it useful for grouping elements together

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

What is the < div > element short for, and what does it do?

A

<div> is short for division and a <div> contains or divides the page into sections</div></div>

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

Do <div>s have a visual representation?</div>

A

No

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

How do <div>s help with style?</div>

A

<div>s allow you to group HTML elements to apply the same styles for all HTML elements inside</div>

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

How do you ensure readability with <div>s?</div>

A

Add two spaces of indentation

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

What is an attribute?

A

Attributes are content added to the opening tag of an element

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

What two parts are attributes made up of?

A

the name of the attribute

the value of the attribute

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

What does the id attribute do?

A

specify different content

come back to add more

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

What do attributes do?

A

Attributes can be added to the opening tag of an HTML element to change its default behavior or provide additional data about it

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

What do attributes consist of?

A

Attributes consist of a name and a value in the format name=”value”:

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

How do you display text in HTML?

A

with a paragraph < p > or a span < span >

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

What is <span> used for?</span>

A

<span> are used to separate small pieces of content that are on the same line as other content</span>

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

When is it best to use < span > < /span > ?

A

when you want to target a specific piece of content that is inline, or on the same line as other text

(use < div > when want to divide your content into blocks)

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

What HTML tag emphasises text?

A

< em >

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

What HTML tag highlights important text?

A

< strong >

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

How is < em > usually manifested in a browser?

A

in italics

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

How is < strong > usually manifested in a browser?

A

in bold

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

Does the spacing between code in an HTML file affect the positioning of elements in the browser?

A

No

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

How do you modify spacing of your code in the browser?

A

Use HTML line break element - < br >

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

What is unique about < br >

A

it is only composed of a starting tag (no closing tag - < /br > does NOT exist)

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

What is the HTML tag for an unordered list?

A

<ul> </ul>

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

What tag must be used with the unordered list < ul > < /ul> ?

A

the list item tag < li >

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

What is different about ordered lists <ol> compared to unordered lists </ol><ul>?</ul>

A

Ordered lists are numbered

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

What tag do you use to add images?

A

< img >

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

What is the closing tag for <img></img>?

A

Trick question, <img></img> is a self-closing tag - the end of the <img></img> tag has a forward slash <img></img>, but not always

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

What is <img></img>’s required attribute?

A

src

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

What is src, <img></img>’s required attribute?

A

the image source

<img></img>

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

What does URL stand for?

A

uniform resource locator (URL)

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

What does the alt attribute mean?

A

alternative text

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

How do you use the alt attribute with <img></img>

A

the alt attribute can be added to the image tag just like the src attribute, and the value of alt should be a description of the image:
<img></img>

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

Give 3 purposes of the alt attribute

A
  1. If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. This is made possible by the description you provide in the alt attribute.
  2. Visually impaired users often browse the web with the aid of screen reading software. When you include the alt attribute, the screen reading software can read the image’s description out loud to the visually impaired user.
  3. The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot “see” the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

When should you not use the alt attribute?

A

When the image on the web page is not one that conveys any meaningful information to a user

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

What is the element for videos in HTML?

A

< video >

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

How does the < video > element differ from the < img > element?

A

The < video > element requires a closing tag - < /video >

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

How do you tell the browser to include basic video controls?

A

with the controls attribute

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

What is this: < !DOCTYPE html >

A

document type declaration

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

Why do we need to write a document type declaration with HTML?

A

to let web browsers know that we are using HTML

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

How do you save HTML code as a file?

A

with the .html file extension

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

What is the < html > element?

A

html

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

What does the < head > element contain?

A

metadata for a web page

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

what is metadata in HTML?

A

Metadata is information about the page that isn’t displayed directly on the web page

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

What does a browser’s tab display?

A

what’s written inside the < title > element

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

Where does the < title > tag go?

A

always inside the < head >, as metadata

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

How do you link to other web pages?

A

using the anchor element - < a >

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

What is needed to complete the anchor - < a > - element?

A

an href attribute

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

what does href stand for?

A

hyperlink reference

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

What does the target attribute do?

A

specifies how a link should open

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

what is needed for a link to open in a new window?

A

the target attribute requires a value of _blank

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

in multi-page static websites, where are HTML files stored?

A

in the root directory / a main folder where all the html files are stored

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

What is a relative path?

A

A relative path is a filename that shows the path to a local file - a file on the same website (such as ./index.html) - versus an absolute path (a full URL).

The ./ in ./index.html tells the browser to look for the file in the current folder.

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

How do you turn an image < img > into a link?

A

by wrapping the < img > element with the anchor < a > element

eg:

<a><img></img></a>

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

what tools are available to visualise relationships between elements?

A

whitespace and indentation

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

Why is whitespace useful?

A

because space in the code doesn’t translate to space in the body of the web page

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

How does the World Wide Web Consortium suggest creating indentation in your code?

A

With two spaces

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

How do you code comments into HTML?

A

< !– opens comments and is closed by – >

69
Q

How many < body > elements can there be in an HTML document?

A

Only 1

70
Q

What should always be your first line of code in an HTML document?

A

< !DOCTYPE html >

71
Q

How do you create a deadlink?

A

href = “#”

72
Q

What element do you use to create a table?

A

< table >

73
Q

How do you create rows in a table in HTML?

A

using the table rows element - < tr >

74
Q

What is the table data element?

A

< td >

75
Q

How do you create a table heading?

A

< th >

76
Q

Where do you put table headers?

A

within a table row

77
Q

what values can the scope attribute take?

A

row (row) or column (col)

78
Q

How were table borders made in older versions of HTML?

A

by using a border attribute and setting it equal to an integer
eg: < table border = “1” >
where the integer is the thickness of the border

79
Q

How can data span columns?

A

Using the span column attribute - colspan

80
Q

How does the colspan attribute work?

A

the colspan attribute accepts an integer (≥1) to denote the number of columns it spans across

81
Q

How can table data span multiple rows?

A

using the rowspan attribute, which accepts an integer (≥1) to denote the number of rows it spans across

82
Q

how do you section off a long table with lots of data

A

with the table body element < tbody >

83
Q

What should the < tbody > element contain?

A

all the table’s data, excluding the table headings

84
Q

How do you section off table heads?

A

using the table head < thead > element

85
Q

How do you section off the bottom part of a long table?

A

with the table footer element - < tfoot>

86
Q

What do table footers usually contain?

A

sums, differences, and other data results

87
Q

What does CSS stand for?

A

Cascading Style Sheets

88
Q

with < form > what does the action attribute do?

A

determines where the < form > information is sent

89
Q

Why are HTTP verbs capitalised

A

out of convention

eg. < form action=”/example.html” method=”POST” > < /form >

90
Q

What does the method attribute do in an HTTP < form >

A

the method attribute is assigned a verb that is included in the HTTP request

91
Q

What does < input >’s type attribute do?

A

determines how the input renders on the page, and what kind of data the input can accept

92
Q

what is the default value of the type attribute?

A

“text”

type = “text”

93
Q

Why does < input > need a < label >?

A

So that users can can properly identify an < input >

94
Q

What does an < input > need to be associated with a < label > ?

A

an id

95
Q

What is the password attribute for < input >?

A

type=”password”

96
Q

What does < input type=”password” > do?

A

replaces input text with another character, like an asterisk * or dot • - so sensitive material like passwords are hidden

97
Q

What does the step attribute do inside < input >

A

Puts arrows inside the input box so that the user can click the arrows to go up or down

98
Q

What does < input type=”range” > (setting type to range) do?

A

Gives users a slider in the input box

99
Q

How do you set minimum and maximum values for the type=”range”

A

with min and max attributes

100
Q

How do you make a checkbox with < form > ?

A

With type=”checkbox”

101
Q

Where are radio and checkbox buttons’ values displayed?

A 
in the label part of the code
eg: 
< form >
  < p>What is sum of 1 + 1?<p></p>
  < input type="radio" id="two" name="answer" value="2" >
  < label for="two">2
  < br >
  < input type="radio" id="eleven" name="answer" value="11" >
  < label for="eleven">11
< /form >
102
Q

What does a radio button do?

A

Allows users to choose only one option from given buttons

103
Q

How do you group radio buttons together?

A

By giving them the same name attribute

104
Q

How do you make a dropdown menu instead of, eg, radio buttons?

A 
With < select > and < option >
eg:
< select name="bun" id="bun" >
  < option value="sesame">Sesame
  < option value="potato">Potato
  < option value="cake">Cake
< /select >
105
Q

What do you use if you have a really long drop down?

A

the < datalist > element

106
Q

What element is < datalist > used with?

A

the < input type=”text” > element

107
Q

What is the input < textarea > used for?

A

to create bigger text fields for users to write into (as opposed to the more simple < input >

108
Q

How do you determine the size of < textarea >

A

with rows ( rows=”x” )and columns ( cols=”x” )

109
Q

How do you allow users to submit information with < input >?

A

make a submit button by coding: < input type=”submit” >

110
Q

What happens if you don’t assign a value to a submit button?

A

The default text appears within the submit button, which is Submit

111
Q

What is server-side validation?

A

when data is sent to another machine (typically a server) for validation

112
Q

What is client-side validation?

A

validation that occurs before data is sent to the server

113
Q

How do you enforce non-optional fields in a form?

A

with the attribute ‘required’ which is written within the < input >

114
Q

How do you set a minimum number of characters for a text field?

A

with the minlength attribute

115
Q

How do you set a maximum number of characters for a text field?

A

with the maxlength attribute

116
Q

Where do minlength and maxlength attributes go?

A

within < input >
eg:
< input minlength=”5” maxlength=”250” >

117
Q

What does regex stand for?

A

regular expression

118
Q

What is the pattern= attribute used for?

A

to assign guidelines such as regex for input fields, ie only using certain characters a-zA-Z

119
Q

What is the benefit of using the < label > element?

A

clicking on the < label > element on the page will focus on the text field of the associate < input > element

120
Q

How do you associate a < datalist > element with an < input > element?

A

the < input >’s list attribute value must match the id= of the < datalist > element

121
Q

What happens if < input > is missing the name= attribute?

A

the information in the input form will not be submitted

122
Q

How do you render a dropdown list in a < form >?

A

add a < select > element with < option > < /option > elements nested inside

123
Q

Where in a form does the placeholder attribute go?

A

within < input >
eg:
< input id=”name value=”name” type=”text” placeholder=”Adam Smith” >

124
Q

What does semantic mean?

A

relating to meaning

125
Q

What does semantic HTML do?

A

provides context about what information is inside of the code, for example, < header > provides more context than < div >

126
Q

Why use semantic HTML?

A

accessibility, SEO, and easier to understand

127
Q

What does < nav > do?

A

Defines blocks of navigation links - menus, tables of contents, etc

128
Q

What are some of the semantic structural elements?

A

< header >< nav >< main >< footer >

129
Q

What does < footer > contain?

A 
contact information
copyright information
terms of use
site map
reference to top of page links
130
Q

Give two semantic elements that can do into the body section?

A

< section > and < article >

131
Q

What does < section > do?

A

defines elements in a document with the same theme

132
Q

What does the < article > element do?

A

holds content that makes sense on its own, such as articles, blogs, comments, etc

133
Q

What is the < aside > element for?

A

used to mark additional information that can enhance another element but isn’t required in order to understand the main content

134
Q

Give some uses for the < aside > element

A

bibliographies, endnotes, comments, pull quotes, editorial sidebars, additional information

135
Q

What is < figure > used for?

A

for encapsulating media such as an image, illustration, diagram, code snippet, which is referenced in the main flow of the document

136
Q

How do you add a caption to a < figure >?

A

with the element < figcaption >

137
Q

Why is < figcaption > better than using plain text with < p >

A

because text written in < figcaption > moves with the < figure >

138
Q

How do you embed audio into a document?

A

With the < audio > element, which uses src= just like < img >, but with a new < source >

139
Q

Where do audio attributes go?

A

Within the opening tag of < audio autoplay controls >

140
Q

How do you use < source > with < audio >

A

< audio controls >< source src=”” type =”audio/mp3”>

141
Q

What attributes can be used with < video >?

A

< video controls autoplay loop >
controls adds play and pause buttons to the video, as well as volume control and a fullscreen button
autoplay plays the video as soon as the page is loaded
loop loops the video on repeat

142
Q

What does the < address > element do to text?

A

makes it italic

143
Q

What semantic element can you use to show time in HTML?

A

< time >

144
Q

What semantic element can you use to show that text is an abbreviation?

A

< abbr > < /abbr >

145
Q

What element do you use to show that some text is a detailed description?

A

< details > < / details >

146
Q

What does the < details > element do?

A

creates a dropdown button which expands to show the details inside the element

147
Q

What can you use to add a descriptive summary to < details >

A

the < summary > element
eg:
< details > < summary > summary goes here < /summary > < /details >

148
Q

How do you group an image and its caption together?

A

with < figure >

149
Q

What does the for=”” attribute link to?

A

the id=”” attribute

150
Q

What does the id=”” attribute in < input > link to in < label >?

A

the for=”” attribute

151
Q

How do you code so that radio or checkbox buttons are ticket by default?

A

with the checked attribute

< input type=”radio” checked >

152
Q

How do you link radio buttons together?

A

by giving them the same name=”” attribute

153
Q

What is a class attribute? ( class=””)

A

a class attribute specifies one or more class names for an HTML element

154
Q

How do you code an element to have two or more classes?

A

within the same class attribute in separate quotation marks

class = “hello-world” “coding-is-fun”

155
Q

What tag can you use to underline text?

A

< u >

156
Q

What tag can you use to strike through text?

A

< s >

157
Q

What is the tag used to create a horizontal line?

A

< hr >

158
Q

What is the tag for adding JavaScript in HTML?

A

< script >

159
Q

how do you create linked sections on a webpage?

A

using <a> tags and adding ids to the elements you wish to jump to</a>

160
Q

what does the defer attribute do?

A

it specifies that scripts should be executed after the HTML file is completely parsed

161
Q

what does the async attribute do?

A

loads and executes JavaScript asynchronously with the rest of the page

162
Q

how is the async attribute different to the defer attribute

A

with the async attribute, the script does not wait until the entire page has parsed, but executes as soon as it is downloaded

163
Q

when is the async tag useful?

A

for scripts that are independent of other scripts and don’t rely on other scripts to function

164
Q

what is each point on a DOM called?

A

a node

165
Q

what does DOM stand for

A

document object model

166
Q

what is a node in a DOM?

A

an intersecting point in a tree that contains data

167
Q

what is the top most node called in the DOM?

A

root node

168
Q

what would document.parentNode return?

A

null - the document element is the root node

169
Q

what is appending?

A

assigning a new element to be the child of an element that already exists on the DOM

Coding (8 decks)

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