HTML Flashcards

1
Q

What is an absolute URL?

A

It is the full web address for a site.

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

What is a relative URL?

A

They are a shorthand way of telling the browser where to find your files.

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

What other ways can we use an anchor tag?

A
  1. Links from one website to another 2.Links from one page to another on the same website 3. Links from one part of a web page to another part of the same page 4. Links that open in a new browser window 5. Links that start up your email program and address a new email to someone
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

How do you indicate the parent folder in a path?

A

../

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

How do you indicate the child folder in a path?

A

just folder name

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

How do you indicate the grand parent folder in a path?

A

../../

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

How do you indicate the current folder in a path?

A

./

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

What are the six primary HTML elements for creating tables?

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

What purpose do the and elements serve?

A

is used to group header content in an HTML table and is used to group the body content in an HTML table

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

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

A

data with multiple dates, students, or time

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

Why are forms useful?

A

Because it allows an interaction between a user and a website/application. (Forms allow users to enter data, which is generally sent to a web server for processing and storage, or used on the client-side to update the interface in some way.

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

What attribute do you have to match between a label and an input?

A

label’s for and input’s id attribute.

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

What type of input allows you to select multiple items in a dropdown?

A

You can use tag and tags inside the tag.

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

What is the action of a form?

A

The action attribute defines the location (URL) where the form’s collected data should be sent when it is submitted

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

What is the purpose of an HTML form element?

A

To capture user input.

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

Give five examples of form control elements.

A

text input, checkboxes, radio box, select box, file select, submit and reset buttons, etc.

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

Give three examples of type attributes for HTML elements.

A

text, submit, radio, checkbox, etc.

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

Why would we choose specific element types when we have elements such as div and span which can be used for anything?

A

Div and span are just containers for the content and we use specific element in many cases because they come with more functionality. like h1 gives you larger font size, select and option tags let you select.

readability search engines etc

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

What factors contribute to a well-designed HTML doc?

A

DOCTYPE, opening and closing html tags, head body and title tags, separate css and html, js files.

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

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

A

rgb values, hex color, color names

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

What CSS properties make up the box model?

A

content, padding, border, and margin box

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

Which CSS property pushes boxes away from each other?

A

margin

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

Which CSS property pushes box content away from its border?

A

padding

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

What are three important considerations for choosing fonts?

A

Readability, demographics, accessibility, sticking with your theme of your website.

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

Why must you have backup fonts assigned when selecting custom fonts?

A

Because some browsers don’t support some fonts.

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

What purpose does the CSS Cascade serve?

A

It determines which styles can be applied to an element and the cascade controls all CSS priorities.

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

What is source order?

A

Source order is the order that your CSS rules are written in your stylesheet.

28
Q

In what situations might you need to apply styling to a single element multiple times in one stylesheet?

A
  • When you set some css property values on parent elements, their child elements gets the css inherited. If you want to style the child elements different than their parent elements, there is going to be a conflict and CSS cascade will solve the conflict.
  • Mobile responsiveness
29
Q

What is inheritance?

A

In CSS, inheritance controls what happens when no value is specified for a property on an element. Inherited properties are the computed value of the parent element. (Certain properties are passed on from parent elements to child elements). If an element does not have a direct styling applied to it, it could use its parent element’s styling.

30
Q

Why might CSS include this feature?

A

It allows us to have simpler stylesheet.

31
Q

Is inheritance a good tool to use for styling? If so, on what occasions?

A

Yes, it saves you from having to apply the same properties to different elements - simple stylesheet.

32
Q

What is the purpose of !important?

A

It is used to override every styles that are previously declared in other style sources.

33
Q

When is !important a good tool to use?

A

When you have to override an inline styling.

34
Q

What is specificity?

A

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and will be applied.

35
Q

How is specificity calculated?

A

It is calculated by the number of each selector type in the matching selector.

36
Q

Why might CSS include this feature?

A

It gives us an additional tools if we need to be more specific.

37
Q

What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?

A

type -> class -> id

38
Q

What is the CSS Cascade?

A

The cascade, and the closely-related concept of specificity, are mechanisms that control which rule applies when there is such a conflict.

39
Q

What are CSS pseudo-classes useful for?

A

It’s useful when you want to style a specific state of your selected element. (A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s)).

40
Q

What does the transform property do?

A

It allows you to visually manipulate an element by skewing, rotating, translating, or scaling!

41
Q

What is the difference between the :first-child pseudo selector and the :last-child pseudo selector?

A

The first-child pseudo selector chooses the first element among a group of sibling elements and the last-child pseudo class selects the last element among a group of sibling elements.

easier: first child selects an element that is the first child of its parent and last-child selects an element that is the last child of its parent.

42
Q

What are 3 examples of what can be done with CSS transitions?

A

control transition duration, ?, ?

43
Q

Why might transitions be a helpful effect for styling?

A

transition will look smoother

44
Q

Are all properties able to be transitioned?

A

No.

45
Q

How do block-level elements affect the document flow?

A

A block-level element always starts on a new line and takes up the full width available.

46
Q

How do inline elements affect the document flow?

A

An inline element does not start on a new line and it only takes up as much width as necessary.

47
Q

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

A

By default, a block-level element occupies the entire space of its parent element (container).

48
Q

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

A

the space bounded by the tags defining the element

height: auto, width: auto

49
Q

What is the difference between display: none and visibility: hidden?

A

display:none will not display the tag on the web page at all and visibility: hidden means the tag is not visible but space is allocated for it on the page.

50
Q

What accessibility considerations must be considered when choosing HTML elements?

A

screen readers, strong/em, alt whenever using images, how we can account for people with different needs.

51
Q

Why is it important to be mindful of what you reset with your CSS resets?

A

???

52
Q

What is an argument against using CSS resets?

A

Some people think it will make our css file longer,

slow down your page loading time.

53
Q

Why are CSS resets helpful for cross browser compatibility?

A

It is easier to changes in html/css and it ensures universal uniformity across various browsers.

54
Q

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

A

Static

55
Q

What are the box offset properties?

A

You can use the offset properties to indicate how far to move the element from where it would have been in normal flow.

56
Q

How does setting position relative on an element affect document flow and where the element appears on the page?

A

Relative positioning moves an element in relation to where it would have been in normal flow. (doesn’t affect the flow of doc)

57
Q

How does setting position absolute on an element affect document flow and where the element appears on the page?

A

The box is taken out of normal flow and no longer affects the position of other elements on the page. (does affect the flow of doc - gets deleted entirely)

58
Q

Why is it important to use a grid system for CSS layouts?

A

It is important because it ensures that a website maintains proper sizing and spatial relationships for the elements even on different devices.

59
Q

What are the three core parts of a grid system?

A

Container, row, column!

60
Q

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

A

row (left to right)

61
Q

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

A

no-wrap (all flex times will be on one line)

62
Q

What were floats originally designed for?

A

To float text around images.

63
Q

What are clears for with floats?

A

If we want to stop the following element from moving up (wrapping up the floated element), we use clear property.

64
Q

What are some of the downsides for using floats in layout design?

A

Have to use clear a lot and floats are made to used with texts.

65
Q

Why should flexbox not be used for building complete web page layouts?

A

You have to set sizing for everything. It is designed for smaller scales. For larger scales, you want to use grid system.