HTML & CSS Flashcards

1
Q

What is the first thing that goes into every HTML document?

A

The DOCTYPE tag which looks like is the is in the first line of every HTML document.

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

What does HTML stand for?

A

Hyper Text Markup Language

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

What is a block-level element?

A

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

 , 
# - 
###### , 

,

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

What is an inline element?

A

an inline element does not start on a new line and only takes up as much width as necessary. Examples of inline elements: , ,

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

What would an example of a div block-level element look like?

A


## London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

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

What would an example of a span inline-level element look like?

A

My Important Heading

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

Do all html tags need to have a separate closing tag with it?

A

no, most do but there are some self closing tags as well.

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

and image tag usually consists of 3 parts, what are they and how would it look like in a proper HTML document?

A

image tags usually consists of the source attribute, the alternative text attribute and the width/height attributes. ex.

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

Attributes usually come in ____ pairs like:

A

name=”value”

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

What are the 3 types of lists, and what are their tags.

A
  • An unordered list items use plain bullets.
  • An ordered list will use different schemes of numbers to list your items. <dl> - A definition list arrages your items in the same way as they are arranged in a dictionary.</dl>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

How do list items appear in a proper html document?

A
  • list item1
  • list item2
  • list item3
    *
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

in an unordered list type, what are the possible options to style your lists?

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

in an ordered list type, what are the possible options to style your lists?

A
  • Default-Case Numerals.
  • Upper-Case Numerals.
  • Lower-Case Numerals.
  • Upper-Case Letters.
  • Lower-Case Letters.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

How is a Description list built out in an HTML Document?

A

The

<dl> tag defines the description list, the <dt> tag defines the term (name), and the </dt>
<dd> tag describes each term;
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</dd>
</dl>

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

What would a nested list look like in an HTML Document?

A
  • Coffee
  • Tea
    • Black Tea
    • Green Tea
  • Milk
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

1Footnote… ©Copyright tom 2017 How do you make that?

A

1Footnote…

©Copyright tom 2017

like that

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

How do you implement HTML character entities?

A

I will display €

I will display €

I will display €

like that

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

What is absolute position?

A

When you change position starting from the top left

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

What is relative position?

A

when you change the position starting from the default position

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

What is static position?

A

Staying in its default position

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

What do the left and right attributes do in css when dealing with absolute position?

A

top: 0px = all the way to the top bottom: 0px = all the way to the bottom right: 0px = all the way to the right left: 0px = all the way to the left

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

What do the left and right attributes do in css when dealing with relative position?

A

left: -20px; = is heading left: 0px; = This heading left: 20px = This heading

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

What is margin?

A

Margin is the distance between one element and the next.

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

What are the purposes of HTML, CSS, and JavaScript?

A

HTML is the structure of a website CSS is the styling & design of a website Javascript controls the dynamic behavior of a website

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

What does the Doctype do?

A

it tells use agents which version of HTML it’s going to be using.

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

What does the do?

A

it tells the browser what language is used

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

What does metadata do?

A

it helps search engines and other robots find and make sense of what your website is about.

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

What types of things go in the head section of an HTML document?

A

non visual content that go into making a page work

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

what is the

tag?

A

paragraph

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

What are the h1 - h6 tags?

A

header tags, to relay which sections are more important than others

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

what is the tag?

A

it is the bold tag, and is only used when you only want to have a visual change, when you want an overall importance change then you would use the tag

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

What are the building blocks of HTML pages?

A

Elements

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

How are elements represented?

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

what do HTML tags do?

A

HTML tags label pieces of content such as “heaeding”. “paragraph”. “table”… etc.

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

What does the element do?

A

it specifies a title for the document for the browser to recognize

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

How are tags used?

A

There needs to be an opening and closing tag in most cases, there are few tags that are self closing. e.g.

or

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

is the

tag block level or inline?

A

Defines a section in a document and is block level

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

is the tag block level or inline?

A

Defines a section in a document and is inline

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

how do you add a link to an HTML document?

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

how do you add a title to a link that shows when you hover over it?

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

How do you add an image to an HTML document?

A

tag, with the source file (src), alternative text (alt), width and height are provided as attributes. e.g.

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

What is an attribute?

A

Attributes provide additional information about an element.

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

Where are attributes located?

A

Attributes are always specified in the start tag

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

What would a usual attribute layout look like?

A

name=”value”

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

What is the src attribute?

A

the src attribute is the filename of the source and is used to locate an image to display.

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

What is the alt attribute?

A

The alt attribute specifies an alternative text to be used when an image cannot be displayed, whether it couldn’t be found, or is being read by a screen reader.

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

What must a list contain?

A

All lists must contain one or more list element.

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

What are the 3 types of lists?

A

an unordered list which uses bullet points
an ordered list which uses different number schemes <dl> a definition list which arranges your items in the same way as they are arranged in a dictionary?</dl>

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

How would a list generally look?

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

What attribute is used to style a list type?

A

The type attribute -

…….

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

How is a description list built out?

A

The

<dl> tag defines the description list, the <dt> tag defines the term (name), and the </dt>
<dd> tag describes each term. e.g.
<dl>
<dt>Coffee</dt>
<dd> - black hot drink</dd>
<dt>Milk</dt>
<dd> - white cold drink</dd>
</dl>
</dd>
</dl>

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

What is a nested list?

A

a list nested in another list. e.g - Coffee - Tea - black tea - green tea - Milk

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

How is a nested list build out?

A
  • Coffee
  • Tea
    • Black Tea
    • Green Tea
  • Milk
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
54
Q

How do you make a symbol thats small and higher like an exponent?

A

the tag is used to make a smaller higher symbol like an exponent. This would look like 3

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

How do you make a symbol thats small and lower like the 2 in H2O?

A

the tag is used to make a smaller lower symbol like the 2 of H2O. This would look like H2O

56
Q

How do you display special characters that you can’t type on a keyboard or is already taken by the HTML commands?

A

special characters start with an ampersand or and symbol, are followed by the characters code, and ended with a semi colon. &frac14; is the symbol used to show a quarter fraction

57
Q

What does CSS mean?

A

Cascading Style Sheets

58
Q

How does CSS save a lot of work?

A

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

59
Q

What is the proper form of a CSS rule-set?

A

A CSS rule-set consists of a SELECTOR and a DECLARATION BLOCK. e.g. h1 - selector { color:blue; } - Declaration Color - Property Blue - Value

60
Q

How does the element selector work?

A

The element selector selects elements based on the element name. e.g. you can select all

elements on a page by; p { text-align: center; }

61
Q

What format is used to call upon an ID in CSS that is defined in an HTML document?

A

you use the # before the ID name. e.g.

would be pulled up in CSS using; #fool{ }

62
Q

What format is used to call upon a Class in CSS that is defined in an HTML document?

A

you use the . before the Class name. e.g.

would be pulled up in CSS using; .fool{ }

63
Q

How do you group selectors together in CSS?

A

You group them with a comma: e.g. h1, h2, p { }

64
Q

Why would you group together selectors is CSS?

A

to save time and space, if multiple sections are going to have the same styling done to them, group them together.

65
Q

What are the 3 ways to insert a style sheet?

A

External, Internal & Inline

66
Q

How does an external Style Sheet work?

A

With an external style sheet, you can change the look of an entire website by changing just one file. Each page must include a reference to the external style sheet file inside the element, which goes inside the element.

67
Q

How does an Internal Style Sheet work?

A

An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the element, inside the

section of an HTML page.

68
Q

How do Inline Styles Work?

A

An inline style may be used to apply a unique style for a single element. This is done by adding the style attribute to the relevant element.

69
Q

What is the priority order for inline, external and internal styles?

A

Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority: 1: Inline Style 2: External and Internal Style Sheets 3: Browser Default

70
Q

What are the 5 CSS background properties?

A
  • background-color - background-image - background-repeat - background-attachment - background-position
71
Q

What are the 3 properties for a border?

A

Style, width & color

72
Q

What is the box method?

A

The element is surrounded by padding, which is surrounded by an optional border which is surrounded by margin.

73
Q

What do border properties allow you to specify in CSS?

A

Style, width and color.

74
Q

What are the three ways to specify a color in CSS?

A

Color name, RGB value, and HEX code

75
Q

When specifying values for margin or padding how are the values appropriated?

A

If there is one value given then that value is the same for top, right, left and bottom. If there are two values given the first one is for the top and bottom, and the second one is for the right and left. If all four are given then the order is top, right, bottom, left.

76
Q

How do you select all elements in a DIV for a global CSS style change?

A

div *{} selects all elements inside the div to change properties for all at once.

77
Q

What is the tag?

A

The emphasis tag is a phrase tag, it renders as emphasized text, looks like italicizing but has more backend operations like an reader bot emphasizing the word instead of it just being a visual change and not tonal.

78
Q

What is the element used for?

A

it is used to color a part of a text. e.g.

My mother has eyes.

79
Q

What is the float property mainly used for?

A

In its simplest use, the float property can be used to wrap text around images.

80
Q

How do you make a list item a link?

A
81
Q

How do you style a list in CSS?

A

ul{ list-style-type: none; }

82
Q

How do you make a horizontal Navigation Bar?

A

you use inline items. e.g. li { display: inline; }

83
Q

How would you adjust just the margin bottom value only?

A

margin-bottom: 0px;

84
Q

What is an element?

A

an article element represents a group of related content that makes sense with the context of the page

85
Q

What is a element?

A

The section element represents a group of related content that doesn’t necessarily need to make sense out of the context of the page.

86
Q

What is a element?

A

The nav element is used to mark up a collection of links to external pages or sections within the current page.

87
Q

What is an element?

A

The aside element is used to represent content that is tangibly related to the content surrounding it, but could be considered separate.

88
Q

What is a element?

A

The header element will be associated with the nearest sectioning element, usually it’s direct parent in the page structure.

89
Q

What is a element?

A

The footer element is used to represent information about a section such as the author, copyright information, or links to related web pages.

90
Q

What is CSS?

A

CSS is a language that describes the style of an HTML document, or more in detail describes how HTML elements should be displayed.

91
Q

How should the font-family property be used?

A

The font-family property should hold several font names as a “fallback” system, to ensure maximum compatibility between browsers/operating systems. e.g. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:11;width: 90%;

92
Q

How is an image embeded into the header element?

A
93
Q

How would you use a link to jump to a specific id?

A

If it’s on the same html page, Jump to Chapter 4

If it’s on a different page, Jump to Chapter 4

94
Q

What is the default link text-decoration type?

A

underlined

95
Q

How do you get rid of the underline on a link list-item?

A

text-decoration: none;

96
Q

What is a pseudo class used for?

A

A Pseudo Class is used to define a special state of an element like the style of an element when a user hovers the mouse or to show visited and unvisited links differently.

97
Q

What is the pseudo class code for controlling how a link looks when hovered.

A

a: hover {
color: hotpink;

text-decoration: underline;

}

98
Q

How do the NAV CSS codes look?

A
99
Q

How do you use a section id to quickly navigate the page?

A
100
Q

How do you create list-style-images?

A
101
Q

How do you use an image as a link?

A
102
Q

What container holds the address?

A

An address container

103
Q

How do you style the footer section?

A
104
Q

How do you create boxes and responsive web pages?

A
105
Q

How do you make boxes using div elements?

A
106
Q

How do you put an image inside a boX?

A
107
Q

What are the 5 layout properties in CSS?

A

position: static;
position: relative;
position: absolute;

Float and clear

108
Q

How does position: static; act?

A
109
Q

How does position: Absolute; act?

A
110
Q

How does position: relative; act?

A
111
Q

How are the float and clear CSS layout properties used?

A
112
Q

Explain how the clear property works in CSS

A
113
Q

How does the box model look?

A
114
Q

What is a wild card and how is it used?

A
115
Q

What is the CSS border-radius property?

A
116
Q

What does the code look like when building out a website using the box method?

A
117
Q

How do you add photos instead of bullet points in a list?

A
118
Q

How is a table built in HTML and what tags are used?

A
119
Q

How would a table look in HTML?

A
120
Q

How do you add borders to your tables in HTML?

A
121
Q

What is the border-collapse CSS property?

A

The border-collapse CSS property determines whether a table’s borders are separated or collapsed. In the separated model, adjacent cells each have their own distict borders. In the collapsed model adjacent table cells share borders. The separated model is the traditional HTML table border model.

122
Q

How do you build table cells that span multiple columns?

A
123
Q

How do you build table cells that span multiple rows?

A
124
Q

How do you make a table caption in an HTML table?

A
125
Q

How do you define a specific style to a specific HTML table?

A
126
Q

How do you create row groups in an HTML table?

A
127
Q

How do you create column groups in an HTML table?

A
128
Q

What is the HTML

summary attribute?

A
129
Q

What is the HTML

frame attribute?

A
130
Q

What are table rules?

A
131
Q

What are some ways you can format a table in CSS?

A
132
Q

How do you define an HTML table width and height?

A
133
Q

How do you position table captions?

A
134
Q

What are the CSS multi-column properties?

A
135
Q

What does the count property look like in CSS multi-column properties?

A