HTML Flashcards

1
Q

Where do you put non-visible content about the HTML document?

A

In the head element.

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

Where do you put visible content about the HTML document?

A

In the body element.

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

Where do the head and body tags go in a valid HTML document?

A

Inside the html element.

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

What is the purpose of a !DOCTYPE declaration?

A

It tells the web browser what version of HTML the page is written in. Also helps the browser to render the page correctly

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

Give five examples of HTML element types.

A

head, body, p, h1, h2, title

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

What is the purpose of HTML attributes?

A

To provide additional information about HTML elements.

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

Give an example of an HTML entity (escape character).

A

© = &-copy or &-#174

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

How do block-level elements affect the document flow?

A

Its creates a block of text with a newline before and after the element.

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

How do inline elements affect the document flow?

A

They occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.

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

What are the default width and height of a block-level element?

A

It occupies the entire horizontal space of its parent element, and vertical space equal to the height of its contents.

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

What are the default width and height of an inline element?

A

The content would define the width and the height of the element.

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

What is the difference between an ordered list and an unordered list in HTML?

A

Ordered list is a numbered list, Unordered list is a list that uses bullet points.

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

Is an HTML list a block element or an inline element?

A

A block element.

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

How do you indicate the relative link to a parent directory?

A

Use ../ to indicate the folder above the current one and then the file name.

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

How do you indicate the relative link to a child directory?

A

For a child folder, use the name of the child folder,

followed by a forward slash, then the file name.

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

How do you indicate the relative link to a grand parent directory?

A

Repeat the ../ to indicate that you want to go up
two folders (rather than one), then follow it with the
file name

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

How do you indicate the relative link to the same directory?

A

To link to a file in the same folder, just use the file

name.

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

What is the purpose of an HTML form element?

A

The form element inserts a component designed to contain controls that users can interact with to send information back to the server. Allows the user to do things as well

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

Give three examples of type attribute values for HTML input elements.

A

Text, Checkbox, Radio, Number

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

Give five examples of form control elements.

A

form, input, label, select, textarea, button, datalist

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

Is an HTML input element a block element or an inline element?

A

Inline-block: allows you to set up height and width.

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

What are the six primary HTML elements for creating tables?

A

Table, tr, td, th, thead, tbody, tfoot

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

What purpose do the thead and tbody elements serve?

A

They help to organize a long table.

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

Give two examples of data that would lend itself well to being displayed in a table.

A

Sports results, stock reports, travel timetables

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

What are the names of the individual pieces of a CSS rule?

A

Selector and Declaration? And then Property and the value? Internal CSS and External CSS?

26
Q

In CSS, how do you select elements by their class attribute?

A

selector.class{}

27
Q

In CSS, how do you select elements by their type?

A

Match the element names? Ex h1,h2,h3{}

28
Q

In CSS, how do you select an element by its id attribute?

A

specific-id {} ex. #html {}

29
Q

Name three different types of values you can use to specify colors in CSS.

A

RGB values, Hex codes, HSL, RGBA, HSLA

30
Q

Name three different types of values you can use to specify colors in CSS.

A

RGB values, Hex codes, HSL, RGBA, HSLA

31
Q

What CSS properties make up the box model?

A

Margin, Border, Padding, content

32
Q

Which CSS property pushes boxes away from each other?

A

Margin

33
Q

Which CSS property add space between a box’s content and its border?

A

Padding

34
Q

What is a pseudo-class?

A

A selector that selects elements that are in a specific state

35
Q

What are CSS pseudo-classes useful for?

A

They’re useful for changing styling of element based on state.

36
Q

Name two types of units that can be used to adjust font-size in CSS.

A

Pixels, Percentages, REMS, EMS

37
Q

What CSS property controls the font used for the text inside an element?

A

Font-family

38
Q

What is the default flex-direction of a flex container?

A

Row (left to right)

39
Q

What is the default flex-wrap of a flex container?

A

no wrap

40
Q

Why do two div elements “vertically stack” on one another by default?

A

They are block elements.

41
Q

What is the default flex-direction of an element with display: flex?

A

Row

42
Q

What is the className property of element objects?

A

It gets and sets the class attribute of the specified element.

43
Q

How do you update the CSS class attribute of an element using JavaScript?

A

element.className = ‘new class name’

44
Q

What is the textContent property of element objects?

A

It sets or returns the text content of the specified node, and all of its descendants.

45
Q

How do you update the text within an element using JavaScript?

A

element.textContent = ‘new text’

46
Q

Is the event parameter of an event listener callback always useful?

A

No

47
Q

Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?

A

More difficult, incrementing the click counter lets us easily switch the elements classes.

48
Q

Why is storing information about a program in variables better than only storing it in the DOM?

A

Its quicker and more efficient to pull information from variables.

49
Q

What does the transform property do?

A

lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

50
Q

Give four examples of CSS transform functions.

A

translate, scale, rotate, matrix

51
Q

What is a breakpoint in responsive Web design?

A

The “point” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience. We can achieve this by using media queries.

52
Q

What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?

A

Allows the content to adjust more efficiently by using the set percentage instead of px in responsive layout.

53
Q

If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?

A
54
Q

Give two examples of media features that you can query in an @media rule.

A

width and height of the viewport.
width and height of the device.
orientation (is the tablet/phone in landscape or portrait mode?)

55
Q

Which HTML meta tag is used in mobile-responsive web pages?

A

HTML Viewport Meta Tag

56
Q

What is the default value for the position property of HTML elements?

A

Position: static? Normal flow

57
Q

How does setting position: relative on an element affect document flow?

A

It doesn’t affect the position of surrounding elements. Relative positioning moves an element in relation to where it would have been in normal flow.

58
Q

How does setting position: relative on an element affect where it appears on the page?

A

This moves an element from the position it would be in normal flow, shifting it to the top, right, bottom, or left of where it would have been placed.

59
Q

How does setting position: absolute on an element affect document flow?

A

It is taken out of normal flow, meaning that it does not affect the position of any surrounding elements (as they simply ignore the space it would have taken up).

60
Q

How does setting position: absolute on an element affect where it appears on the page?

A

Absolutely positioned elements move as users scroll up and down the page

61
Q

How do you constrain an absolutely positioned element to a containing block?

A

Set it inside of the element.

62
Q

What are the four box offset properties?

A

top, right, bottom, left