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

Declaration that defines that this is an HTML5 document.

A

“!DOCTYPE html”

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

The entire document is surrounded by what?

A

html tags

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

What is the HTML links tag? And what do you use to give the link’s destination?

A

<a>Words here</a>

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

What tags is the visual part of the HTML document between?

A

Body tags

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

What do you use to make HTML headers and what range do they go through?

A

<h1>...<h6>

| Head tags</h6></h1>

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

What is the HTML paragraphs tag

A

<p></p>

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

What is the HTML links tag? And what do you use to give the link’s destination?

A

<a>Words here</a>

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

What is the HTML images tag? And what are common attributes to go with it?

A

“img” tags. The source file is defined by src. The alternative text is defined by alt. And you can choose the width and height with simply width and height.

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

What is an HTML element defined as?

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
11
Q

True or False: HTML elements can be nested

A

True

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

What is an Empty HTML element and give me an example

A

HTML elements with no content are called empty elements, they don’t use closing tags. <br></br> is an example of an empty HTML.

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

What do HTML attributes do?

A

HTML attributes provide additional information about HTML elements

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

What HTML elements can have attributes?

A

All HTML elements

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

Where are attributes specified?

A

Attributes are always specified in the start tag

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

What attribute does an “a” tag use to get the url of the page link?

A

href

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

The src attibute is commonly used for what tag?

A

The img tag

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

What is an Absolute URL/Path?

A

An absolute URL/Path links to an external image/page that is hosted on another website

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

What is a Relative URL/Path?

A

A relative URL/Path links to an image/page that is hosted within the website. You can use no slash to reach content relative to the current page, or you can use a slash for content relative to the whole domain.

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

How do you specify the height and width of an image?

A

Inside the img tag you use the width and height attributes (in pixels).

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

What is the alt attribute used for?

A

The alt attribute is a required attribute for the img tag that specifies an alternate text for an image, if the image cannot be displayed or the if they user uses a screen reader.

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

What attribute would you use to add things suck as color, font, size and more to your element?

A

The style attribute

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

What is the lang attribute and where does it go?

A

The lang attribute should always be inside the html tag, to declare the language of the Web page.

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

Can you add more than just the basics to the lang attribute?

A

Yes. You can not only include the language code, but also the country codes (i.e. “en-US”).

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

How would you make a tooltip?

A

By using the title attribute, which defines some extra information about an element, you create a tooltip for when the element is moused over.

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

What is the hr tag?

A

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

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

What tag defines a line break? Similar to an hr tag but can be used within paragraphs as well

A

The br tag.

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

What does the pre tag do?

A

The pre element defines preformatted text. This means the text inside a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.

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

What tag(s) could be used for bold-like text?

A

“b” or “strong” tags

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

What tag(s) could be used for italic-like text?

A

“i” or “em” tags

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

What tag(s) could be used for highlighted text?

A

“mark” tags

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

What tag(s) could be used for small sized text?

A

“small” tags

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

What tag(s) could be used for text that is crossed out?

A

“del” tags

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

What tag(s) could be used for underlined text (to be inserted)?

A

“ins” tags

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

What tag(s) could be used for subscript and superscript text?

A

“sub” tags for subscript.

“sup” tags for superscript.

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

What is another name for a tag in html?

A

An element

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

What is the “blockquote” element for?

A

The “blockquote” element defines a section that is quoted from another source. (Browsers usually indent this element.)

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

What tag do you use to define a short quotation?

A

“q” tag

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

What tag would you use with the title attribute to show the full name of an acronym or abbreviation?

A

The “abbr” tag

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

What does the “address” tag do?

A

The “address” tag defines the contact information for the author/owner of a document or an article. (The text in the “address” element usually renders in italic, and browsers will always add a line break before and after the address element.)

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

What happens when you use the “cite” tag?

A

The tag will usually render in italic, defining the title of a creative work.

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

In an odd situation where you would want text to be written from right to left, how would you do that?

A

By using the “bdo” (Bi-Directional Override) tag, that is built for this.

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

How do you add comments for HTML?

A

The comment tags for html are as follows:

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

HTML colors are specified with what?

A

Predefined color names, RGB, HEX, HSL, RGBA, or HSLA values

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

What does RGB stand for?

A

Red, Green, and Blue light sources

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

What does HSL stand for?

A

Hue, Saturation, and Lightness

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

What is HEX for colors?

A

Hexadecimal color is specified with: #RRGGBB (R = red) (G = green) (B = blue)

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

What does the A stand for in RGBA and HSLA?

A

For both the A stands for Alpha channel, which controls the opacity.

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

What 3 basic html attributes deal with colors and what are they used for?

A

Background Color is created with the “background-color” attribute. Text Color is created with the “color” attribute. Lastly, you can control the Border Color with the “border” attribute.

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

What tag and attributes do you use to connect with a CSS file?

A

“link” is the tag. “rel = ‘stylesheet’” is what is used to note that you are linking to a Cascading Style Sheet. “href” is where you put the file path to get to your css file.

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

Where will a linked page display by default?

A

The current browser window.

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

What attribute is used to specify where to open a link?

A

“target” attribute

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

What options does the “target” attribute have?

A

“_self” (default) opens in the same window and tab.
“_blank” opens the document in a new window or tab.
“_parent” opens the document in the parent frame.
“_top” opens the document in the full body of the window.

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

What can you use to send an email with the “href” attribute?

A

By putting “mailto:” inside the “href” attribute, followed by the email address you wish to send it to.

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

What are the 4 different stages a HTML link can be displayed at?

A

Visited, unvisited, hover, or active. (a:visited, a:link, a:hover, a:active)

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

How do HTML Bookmarks work?

A

By using an id and href attribute you link to the id whether it’s on the current page or not.
Example: (for current page)
id=”C4”
href=”#C4”

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

What attributes are required for the “img” tag?

A

src and alt

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

True of False: The “img” tag is an empty tag.

A

True.

59
Q

True or False: HTML “img” tags do not work with animated GIFs.

A

False, HTML allows animated GIFs.

60
Q

What are some common image formats?

A

APNG - Animated Portable Network Graphics - .apng
GIF - Graphics Interchange Format - .gif
ICO - Microsoft Icon - .ico, .cur
JPEG - Joint Photographic Expert Group image - .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG - Portable Network Graphics - .png
SVG - Scalable Vector Graphics - .svg

61
Q

What does the “map” tag define?

A

“map” defines an image map

62
Q

What does the “area” tag define?

A

“area” defines a clickable area inside an image map

63
Q

What does the “picture” tag define?

A

“picture” defines a container for multiple image resources

64
Q

What is an image map?

A

An image map is an image with clickable areas. The areas are defined with one or more “area” tags.

65
Q

How do you connect an “img” element with a “map” element?

A

The “img” tag uses the “usemap=#” attribute followed with the name of the map. Put “name=” in the tag of the “map” element to name the image map.

66
Q

What are the shape types of an “area” element?

A

rect, circle, poly, default

67
Q

Shape=”rect” breakdown of coordinates…

A

start-x-axis, start-y-axis, end-x-axis, end-y-axis

68
Q

Shape=”circle” breakdown of coordinates…

A

center-x, center-y, radius

69
Q

Shape=”poly” breakdown of coordinates…

A

x1, y1, x2, y2, x3, y3,…

70
Q

How do you insert a background image to your html element?

A

“background-image” style with “url(‘image_location”)

71
Q

How do you stop an image from repeating itself in its element?

A

“background-repeat: no-repeat”

72
Q

What 2 styles do you use to make an image cover the entire element it is within?

A

“background-attachment: fixed”

“background-size: cover”

73
Q

What does “background-size: 100% 100%;” do?

A

It stretches the background image to fit the entire element.

74
Q

What always needs to be the last child element of the “picture” element? And what elements would be above it?

A

“img” element. With any number of “source” elements above it.

75
Q

What tag defines an HTML table and what other tags go inside it?

A

“table” tag; with the “tr” (table row), “th” (table header), and “td” (table data/cell) tags inside.

76
Q

What attribute would you use to span multiple rows or columns?

A

“rowspan” and “colspan” attributes respectively

77
Q

What types of HTML lists are there and what are there tags?

A

Unordered (ul)
Ordered (ol)
Description (dl)

78
Q

What tags go inside list tags?

A

List Item tags (li)

For “dl” you have term names (“dt”) followed by their descriptions (“dd”)

79
Q

What options do you have for unordered list’s item marker? (list-style-type)

A

disc (default) - it looks like a bullet
circle
square
none - items will not be marked

80
Q

How to choose how an ordered list is counted?

A

The “type” attribute.
type=”1” - means numbered with numbers
type=”A” - means numbered with uppercase letters
type=”a” - means numbered with lowercase letters
type=”I” - means numbered with uppercase roman numerals
type=”i” - means numbered with lowercase roman numerals

81
Q

How would you start an ordered list at 25?

A

By adding the attribute “start”. Such as start=”25”.

82
Q

How do block-level elements work?

A

Block-level elements always start on a new line and take up the full width available.

83
Q

How do inline-level elements work?

A

Inline-level elements do no start on a new line and it only takes up as much width as necessary.

84
Q

What is a good element to use for a container?

A

The “div” tag/element

85
Q

What is the “span” element commonly used for?

A

The “span” element is an inline container used to mark up a part of a text, or part of a document.

86
Q

True or False: Multiple HTML elements can share the same class.

A

TRUE

87
Q

Can different element types share the same class?

A

Yes

88
Q

How would you give an HTML element 2 classes?

A

By adding a space between them, like so, “city main”.

This gives the element the “city” and “main” class.

89
Q

True or False: Multiple HTML elements can share the same id.

A

FALSE; you cannot have more than one element with the same id in an HTML document.

90
Q

How can you use ids to create an HTML bookmark?

A

By giving your element an id and using that id in an href of another element they will be sent to where your id is at on the page.

91
Q

What is an HTML iframe?

A

An HTML iframe is used to display a web page within a web page.

92
Q

What attributes should be used within the iframe element?

A

“src” to get the url of what will be in the iframe.

“title” to give a description for screen readers.

93
Q

True or False: Iframes do not have a border around it by default.

A

False; by default, an iframe has a border around it.

94
Q

If you are to go to an iframe from a link what attributes do you use?

A

The “target” attribute of the link must refer to the “name” attribute of the iframe.

95
Q

Is Javascript a server-side or client-side script?

A

Client-side

96
Q

What tag should be used to display a description if for some reason a browser will not support scripts?

A

The “noscript” tag

97
Q

Where is this picture file located?

img src=”../picture.jpg”

A

The picture file is located in the folder one level up from the current folder

98
Q

Where is this picture file located?

img src=”/images/picture.jpg”

A

The picture file is located in the images folder at the root of the current web

99
Q

Where is this picture file located?

img src=”images/picture.jpg”

A

The picture file is located in the images folder in the current folder

100
Q

Where is this picture file located?

img src=”picture.jpg”

A

The picture file is located in the same folder as the current page

101
Q

What 6 elements are held within the “head” element container?

A

“title”, “style”, “meta”, “link”, “script”, “base”

102
Q

True or False: the “title” element required.

A

TRUE

103
Q

What text-only element is shown in the browser’s bar, provides a name for the page when it is added to favorites, and displays a name for the page in search engine-results?

A

The “title” element.

104
Q

What does the “style” tag in the “head” container do?

A

The “style” element is used to define style information (CSS) for a single HTML page

105
Q

What does the “link” tag in the “head” container do?

A

The “link” element defines the relationship between the current document and an external resource.
It is most commonly used to link to external style sheets.

106
Q

This is the user’s visible area of a web page, what is it?

A

The viewport

107
Q

What sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

A

meta name=”viewport” content”width=device-width”

108
Q

What sets the inital zoom level when the page is first loaded by the browser?

A

meta name=”viewport” content=”initial-scale=1.0”

109
Q

What does the “script” element do?

A

The “script” element is used to define client-side JavaScripts

110
Q

What does the “base” element do?

A

The “base” element specifies the base URL and/or target for all relative URLs in a page.
There can only be one single “base” element in a document.

111
Q

What must the “base” tag have as attributes?

A

The “base” tag must have either an href or a target attribute present, or both.

112
Q

The “meta” element is typically used to specify these…

A

The “meta” element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.

113
Q

“meta” tags, define the character set used:

A

meta charset=”UTF-8”

114
Q

“meta” tags, define keywords for search engines:

A

meta name=”keywords” content=”HTML, CSS, JavaScript”

115
Q

“meta” tags, define a description of your web page:

A

meta name=”description” content=”a description here”

116
Q

“meta” tags, define the author of a page:

A

meta name=”author” content=”Author’s Name”

117
Q

“meta” tags, refresh document every X seconds:

A

meta http-equiv=”refresh” content=”X”

118
Q

“meta” tags, setting the viewport to make your website look good on all devices:

A

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

119
Q

HTML has several semantic elements that define the different parts of a web page layout, what are the 13 different elements?

A

article, aside, details, figcaption, figure, footer, header, main, mark, nav, section, summary, time

120
Q

What are the four different techniques to create a multicolumn html layout?

A

CSS framework, CSS float property, CSS flexbox, CSS grid

121
Q

Give an example of a CSS framework.

A

W3.CSS, Bootstrap

122
Q

What is Responsive Web Design?

A

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices.

123
Q

What tag do you add to the header to create a responsive website?

A

Add the ‘meta name=”viewport” content=”width=device-width, initial-scale=1.0’ tag

124
Q

What would need to be added to an image styling to have the image scale with the size of the screen?

A

width:100%

125
Q

What would need to be added to an image styling to have the image scale with the size of the screen, but not exceed the images original size?

A

max-wdith:100%;

height:auto;

126
Q

What unit can you use to have the text size follow the size of the broswer?

A

The text size can use the “vw” unit (viewport width) to follow the size of the browser window

127
Q

What do you use to change the styling for the different screen sizes?

A

Media Queries

128
Q

What does the “article” element do?

A

The “article” element defines independent, self-contained content

129
Q

What does the “aside” element do?

A

The “aside” element defines content aside from the page content

130
Q

What does the “details” element do?

A

The “details” element defines additional details that the user can view or hide

131
Q

What does the “figcaption” element do?

A

The “figcaption” element defines a caption for a “figure” element

132
Q

What does the “figure” element do?

A

The “figure” element specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

133
Q

What does the “footer” element do?

A

The “footer” element defines a footer for a document or section

134
Q

What does the “header” element do?

A

The “header” element specifies a header for a document or section

135
Q

What does the “main” element do?

A

The “main” element specifies the main content of a document

136
Q

What does the “nav” element do?

A

The “nav” element defines the navigation links

137
Q

What does the “section” element do?

A

The “section” element defines a section in a document

138
Q

What does the “summary” element do?

A

The “summary” element defines a visible heading for a “details” element

139
Q

What dos the “time” element do?

A

The “time” element defines a date/time

140
Q

What are the different tags HTML can show user input and computer code?

A

By using the “kbd”, “samp”, “code” and “var” elements

141
Q

Should you close empty elements?

A

Yes, because XML and XHTML require it and it is good practice.

142
Q

What do you replace reserved characters in HTML with?

A

With character entities (like for a non-breaking space)

143
Q

What character set is the standard for HTML5?

A

UTF-8

144
Q

What is XHTML?

A

XHTML is HTML defined as an XML application. XHTML is stricter version of HTML. XHTML stands for EXtensible HyperText Markup Language.