HTML Flashcards

1
Q

HTML stands for

A

Hyper Text Markup Language

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

What is an HTML Element?

A

An HTML element is defined by a start tag, some content, and an end tag

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

HTML links are defined with the

A

<a> tag</a>

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

The link’s destination is specified in the _____attribute.

A

href

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

HTML elements with no content are called _____ elements.

A

empty <br></br>

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

The <br></br> tag defines a

A

line break

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

HTML attributes provide ________________ about HTML elements.

A

additional information

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

Syntax of href Attribute

A

a href=”URL”
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to.</a>

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

Syntax of src Attribute

A

img src=”source” alt=”alt text” width=”500” height=”600”
The <img></img> - embed an image. The src attribute - path to the image to be displayed.

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

The title attribute defines

A

Some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element

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

Syntax of title Attribute

A

p title=”I’m a tooltip” This is a paragraph.</p>

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

HTML headings are defined with the

A

<h1> to <h6> tags.
</h6></h1>

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

The HTML __ element defines a paragraph.

A

<p>
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.
</p>

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

_____ tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

A

<hr></hr>

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

The HTML ____ element defines preformatted text.

A

<pre>
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:
</pre></pre>

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

The HTML style attribute is used to add styles to ____

A

an element, such as color, font, size, and more.

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

Syntax of Style Attribute

A

body style=”background-color:powderblue;”

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

The CSS color property defines the______ for an HTML element

A

text color
h1 style=”color:blue;”

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

The CSS _______ property defines the font to be used for an HTML element

A

font-family
h1 style=”font-family:verdana;”

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

<b> - ___text
<strong> - ____text
<i> - ____text
<em> - ____text</em></i></strong></b>

A

Bold, Important, Italic , Emphasized

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

<mark> - \_\_\_\_text (highlighted)
<small> - \_\_\_\_text
<del> - Deleted text (\_\_\_\_\_)
<ins> - Inserted text (\_\_\_\_)</ins></del></small></mark>

A

Marked, Smaller
strikethrough, underline

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

- ____text (H2O)
- _____text (half a character above the normal line)

A

Subscript, Superscript

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

You can add comments to your HTML source by using the following syntax:

A

<!-- Write your comments here -->

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

Text Color

A

h1 style=”color:Tomato;”

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

Border Color

A

h1 style=”border:2px solid Tomato;

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

RGB color value represents ___
RGBA color value is an extension of RGB with an _____ channel (opacity).

A

RED, GREEN, and BLUE light sources.
Alpha

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

RGB Color Values
rgb(red, green, blue)

A

rgb(255, 255, 255) - white
rgb(0, 0, 0) - black

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

RGBA Color Values
rgba(red, green, blue, alpha)
The alpha parameter is a number between
___ (fully transparent)
___ (not transparent at all)

A

0.0
1.0
rgba(255, 0, 0, 0.5)

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

HEX Color Values
#rrggbb

A

#ffffff - white
#000000 = black
between 00 and ff (same as decimal 0-255).

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

HSL stands for ____
HSLA color values are an extension of HSL with an _____channel (opacity).

A

hue, saturation, and lightness.
Alpha

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

Hue is a degree on the color wheel from 0 to 360.
0, 360 is ____
120 is ___
240 is ___

A

Red
Green
Blue

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

Saturation is a percentage value
0% means a ____
100% is the ___

A

shade of gray
full color.

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

Lightness is also a percentage value.
0% means a ____
100% is the ___

A

black
white

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

Use the CSS padding property for space _______ the border

A

inside

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

Use the CSS margin property for space _____ the border

A

outside

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

Link to External CSS syntax

A

link rel=”stylesheet” href=”url”

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

HTML Links - Syntax

A

a href=”url”>link text /a
a tag defines a hyperlink.

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

HTML Links - Use an Image as a Link

A

a href=”url”
img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;”
/a

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

The ____ attribute specifies where to open the linked document.

A

target
target=”_blank”

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

An unvisited link is underlined and _____
A visited link is underlined and ____
An active link is underlined and ___

A

blue
purple
red

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

_blank - Opens the document in a ___________
_____ - Opens the document in the parent frame
___ - Opens the document in the full body of the window

A

new window or tab

_parent

_top

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

Button as a Link:

A

button onclick=”document.location=’url’“>Text /button

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

____ - Default. Opens the document in the same window/tab as it was clicked

A

_self

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

Link to an Email Address

A

a href=”mailto:someone@example.com”>Send email /a

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

Link button and colors

A

a:link, a:visited {
background-color: # ;
color: text color;
padding: 5px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}

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

____ attribute to create a bookmark:

A

id
a href=”#C4”>Jump to Chapter 4
h2 id=”C4”>Chapter 4

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

document.__________(“demo”).innerHTML = “Hello JavaScript!”;

A

getElementById

40
Q

function myFunction() {
document.getElementById(“demo”).________ = “25px”;
document.getElementById(“demo”).__________ = “red”;
document.getElementById(“demo”).______________ = “yellow”;

A

style.fontSize
style.color
style.backgroundColor

41
Q

________.getElementById(“demo”).innerHTML = “Hello JavaScript!”;

A

document

42
Q

________.getElementById(“demo”).________ = “Hello JavaScript!”;

A

innerHTML

43
Q

document.getElementById(“image”).____ = “picture.gif”;

A

src

44
Q

______ - Defines a client-side script

A

script

45
Q

________ - Defines an alternate content for users that do not support client-side scripts

A

noscript

46
Q

The HTML <head> element is a ________ for the following elements: _____, <style>, <meta></meta>, \_\_\_\_\_,

, and <base></base>.
</style>
A

container

<title>, <link></link>
</title>

47
Q

The <head> element is a container for ___________

A

metadata (data about data)

48
Q

meta name=”________” content=”________, _________”>

A

viewport
width=device-width, initial-scale=1.0

49
Q

width=device-width means

A

width of the page to follow the screen-width of the device

50
Q

The initial-scale=1.0 part sets the _________when the page is first loaded by the browser.

A

initial zoom level

51
Q

The <meta></meta> element is typically used to specify the _______ set, page description, _________, author of the document, and _________ settings

A

character
keywords
viewport

52
Q

___________ design is about creating web pages that look good on all devices!

A

Responsive web

53
Q

To create a responsive website, add the following <meta></meta> tag to all your web pages:

A

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”

54
Q

Viewport is the browser _______

1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is ______

A

window size.

0.5cm.

55
Q

With media queries you can define completely different _______ for different browser sizes.

A

styles

56
Q

The HTML <___> element is used to define keyboard input.

A

kbd

57
Q

Semantic elements = ___________

A

elements with a meaning.

58
Q

Examples of non-semantic elements: _____ and _____ - Tells nothing about its content.

A

<div>
<span>
</span></div>

59
Q

Examples of semantic elements: _____________, and <article> - Clearly defines its content.

A

<form>, <table>
</table></form>

60
Q

Reserved characters in HTML must be replaced with entities:

A

< (less than) &signlt;
&Sign#60;

> (greater than)
&Signgt;

61
Q

Symbols or letters that are not present on your keyboard can be added to ___________

A

HTML using entities.

62
Q

Emojis are characters from the _____ character set:

A

UTF-8

Smile emoji -

63
Q

A ____ is another word for a web address.

A

URL (Uniform Resource Locators)

64
Q

XHTML stands for _____ HyperText Markup Language

A

EXtensible

65
Q

An HTML form is used to collect _______

A

user input.

66
Q

The HTML ______ element is used to create an HTML form for user input:

A

form

67
Q

The HTML _______ element is the most used form element.

A

input

68
Q

<input type=”_____

A

text”>
Displays a single-line text input field

69
Q

<input type=”_______

A

radio”>
Displays a radio button (for selecting one of many choices)

70
Q

<input type=”______

A

checkbox”>
Displays a checkbox (for selecting zero or more of many choices)

71
Q

<input type=”________

A

submit”>
Displays a submit button (for submitting the form)

72
Q

<input type=”_________

A

button”>
Displays a clickable button

73
Q

In the form below, add an input field with the type “button” and the value “OK”.

form
<input _______ >
/form

A

input type=”button” value=”OK”

74
Q

The ______ attribute defines the action to be performed when the form is submitted.

A

action
<form action=”/action_page.php”

75
Q

The ______ attribute specifies where to display the response that is received after submitting the form.

A

target

76
Q

The ______ attribute specifies the HTTP method to be used when submitting the form data.

A

method

77
Q

The form-data can be sent as URL variables (with method=”____”) or as HTTP post transaction (with method=”____”).

A

get
post

78
Q

GET method examples:
<form action=”/action_page.php” target=”_blank” method=”get”

A

the form values is visible in the address bar of the new browser tab.

79
Q

POST method examples:
<form action=”/action_page.php” target=”_blank” method=”post”

A

unlike the GET method, the form values is NOT visible in the address bar of the new browser tab.

80
Q

The _________ element defines a drop-down list

A

<select

select id=”cars” name=”cars”
option value=”volvo”>Volvo</option

81
Q

The <____> element defines an option that can be selected.

By default, the ___ item in the drop-down list is selected.

To define a pre-selected option, add the ______ attribute to the option:

A

option
first
selected

option value=”fiat” selected>Fiat

82
Q

Use the _____ attribute to specify the number of visible values:

A

size

83
Q

Use the _______ attribute to allow the user to select more than one value:

A

multiple
select id=”cars” name=”cars” size=”4” multiple>

84
Q

The <________> element defines a multi-line input field (a text area):

A

textarea

textarea name=”message” rows=”1” cols=”15

85
Q

The <________> element defines a clickable button:

A

button

button type=”button” onclick=”alert(‘Hello World!’)”>Click Me!</button

86
Q

The <__________> element is used to group related data in a form.

The <______> element defines a caption for the <fieldset> element.

A

fieldset

legend

87
Q

The <_______> element specifies a list of pre-defined options for an <input></input> element.

A

datalist

<input list=”browsers” name=”browser”
<datalist id=”browsers”
<option value=”Edge”
<option value=”Firefox”

88
Q

The <________> element represents the result of a calculation

A

output

89
Q

The input type=”____” is used for input fields that should contain a color.

label is used to select text box/ checkbox directly after clicking the text with mouse

A

color

label for=”favcolor”>Select your favorite color: /label
input type=”color” id=”favcolor” name=”favcolor” value=”#ff0000”

90
Q

input type=”_____”> is used for input fields that should contain a date.

A

date
label for=”birthday”
input type=”date” id=”birthday” name=”birthday”

91
Q

The input type=”____” defines a file-select field and a “Browse” button for file uploads.

A

file

92
Q

The input type=”_________” defines a numeric input field.

A

number

93
Q

The <input></input> defines a control for entering a number whose exact value is not important (like a slider control).

A

range

94
Q

The input _______ attribute specifies that an input field is read-only.

A

readonly

input type=”text” id=”fname” name=”fname” value=”John” readonly

95
Q

The input _______ attribute specifies that an input field must be filled out before submitting the form.

A

required

<input></input>

96
Q

Multimedia on the web is sound, music, videos, movies, and _________.

A

animations

97
Q

Multimedia elements (like audio or video) are stored in _______

A

media files.

98
Q

Only _____, WebM, and ____ video are supported by the HTML standard.

A

MP4
Ogg

99
Q

Only ___, ____, and Ogg audio are supported by the HTML standard.

A

MP3, WAV

100
Q

To show a video in HTML, use the <_____> element:

The ____ attribute adds video controls, like play, pause, and volume.

A

video
controls

video width=”320” height=”240” controls
source src=”movie.mp4” type=”video/mp4”
source src=”movie.ogg” type=”video/ogg”

101
Q

To start a video automatically, use the ______ attribute:

A

autoplay

video width=”320” height=”240” autoplay

102
Q

Add muted after autoplay to let your video start playing automatically (but muted)

A

video width=”320” height=”240” autoplay muted

103
Q

To play an audio file in HTML, use the <______> element:

A

audio

audio controls
source src=”horse.ogg” type=”audio/ogg”
source src=”horse.mp3” type=”audio/mpeg”

104
Q

To play your video on a web page, do the following:

Upload the video to YouTube
Take a note of the video id
Define an <iframe> element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the player

A

iframe width=”420” height=”345” src=”https://www.youtube.com”>
/iframe

105
Q

The HTML ________ is used to locate a user’s position.

A

Geolocation API

button onclick=”getLocation()”>Try It /button

106
Q

The ___________ method is used to return the user’s position.

A

getCurrentPosition()

107
Q

In HTML, any element can be _________ and dropped.

A

dragged

108
Q

Border radius used ____

A

to change Corner of the border to curvey by increasing px