TeamTreeHouse HTML Flashcards

You may prefer our related Brainscape-certified flashcards:
1
Q

What is another way of thinking about HTML?

A

HTML is just a set of tags in which content is wrapped

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

Where do you place .CSS files?

A

Usually in the same folder as your index.html but in a different file.

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

What are h tags all about?

A

h tags represent headlines, from largest to smallest and from < h1 > through < h6 >

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

Does html without a .css file have any style?

A

html has default styles w/out css

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

What is the first line in a html document?

A

< ! doctype html >

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

What is the first major tag after the < ! doctype html >

A

< head >

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

Which tag is shown in the browser tab?

A

< title >

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

Code for a stylesheet …

A

< link rel = “ stylesheet “ href = “ styles.css “ >

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

How do you code for lists

A

< ol >, < ul >

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

How do you code html for easier readability?

A

indent

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

What is another way of thinking of html?

A

think of html as a series of boxes that live within each other

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

Which tag “shows” the content?

A

< body >

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

Code for an image …

A

< img src = “https://www. … “ alt = “ some text “ >

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

Where can you find some random image to input into your webpage while working on it?

A

www.placeimg.com

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

What other use does listing a value in the < title > tag have?

A

screen readers use it for accesibility

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

Which tag is used to wrap the general content in a webpage?

A

< main >

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

What are the three main divisions of a page?

A

< header >, < main >, < footer >

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

What info is listed in the main < header > ?

A

Introductory info, name of site, company logo, main navigation which is a list of links to other pages on the site.

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

Which tag shows the bulk of content?

A

< main >

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

What info is listed in the < footer > ?

A

Copyright info, social media links, secondary navigation

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

What can be said about the image tag ?

A

It is self-closing.

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

Which tag is used for new paragraphs in html?

A

< p >

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

Code for a link to go to the top of the page …

A

< a href = “ # top “ > TOP < / a >

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

Code for a clickable image …

A

< p > < a href = “ # top “ > < img src = “ image.png “ > ME < / a > < / p >

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

Can an html element have more than one style ?

A

YES !

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

Code a new paragraph element for more than one class …

A

< p class = “ tag location “ > blah, blah < / p >

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

How do you code a class in CSS ?

A

With a dot …

.location {

background - color : # 222;

}

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

Code for a social media link in your footer …

A

< footer >

< ul >

< li > < a href = “ http://twitter.com “ > TWITTER < / a > < / li >

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

Code for a link to open in another browser window …

A

< a href = “ http://twitter.com “ target = “ _ blank “>TWITTER< / a >

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

What is each block of CSS called?

A

a rule

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

What does each CSS rule start out with?

A

a selector

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

Where can you find amazing CSS info?

A

www.css-tricks.com

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

How can you go about styling just one html element, for example just one paragraph?

A

You can use a CSS class or id selector.

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

Code for a < h2 > element with two CSS classes …

A

< h2 class = “ card title “ > BLAH < / h2 >

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

Can you use the same class on different html tags?

A

YES, YES a thousand times YES!

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

What is padding in CSS?

A

Padding is the space between content and it’s border.

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

What is margin in CSS?

A

Margin is the space between dispirate elements.

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

What is a one particular way of describing a website?

A

It is a collection of webpages.

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

How would you list a css file named resume.css from a folder named css?

A

< link rel = “ stylesheet “ href = “ css/resume.css “ >

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

Code to link to a different webpage named resume.html …

A

< li > < a href = “ resume.html “ > Experience < / a > < / li >

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

Code for a link to a different webpage named resume.html …

A

< li > learn more < a href = “ resume.html “ > view resume < / a > < / li >

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

Name the three seperate layers that make up a typical webpage?

A

Content (html), Presentation (CSS), Behavior (JS)

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

What is the most common name for the homepage of a website?

A

index.html

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

There should be only one of which tags on a webpage?

A

< html >, < head >, < body >, < h1 >

#

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

Which tags are used for lists in html?

A

< ol >, < ul >

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

Code for a nested list …

A

< ul >

< li > HOME < / li >

< li >

< ul > CONTACT

< li > PHONE < / li >

< / ul >

< / li >

< / ul >

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

What is the name for the a tag?

A

anchor tags

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

What is href stand for and what does it do?

A

href stands for hypertext reference and it changes the address in the URL bar.

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

Code for an anchor tag with a href …

A

< a href = “ https://teamtreehouse.com “ > TeamTreeHouse < / a >

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

HTML links can …

A
  1. Link a page on your site to another page on another site.
  2. Link a page on your site to another page on the same site.
  3. Link to a different location on the same page.
  4. Open a new page in a new browser window/tab.
  5. Begin composing an email in the user’s default email program.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

What is an absolute URL?

A

It is all the info to navigate to a site, i.e. https://www. ….

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

Code for a new window/tab to open …

A

< a href = “ https://www.teamtreehouse.com “ target = “ _ blank “ > HELLO < / a >

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

Code to get to the top of a page …

A

< a href = “ # top “ > TOP < / a >

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

What is meant by semantic html?

A

It means that markup describes the meaning of content and don’t make everything just < div > ‘s

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

What are the three main divisions of a typical webpage?

A

< header >, < main >, < footer >

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

What is found in a typical header?

A

Introductory content, site logo, navigation and main heading

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

What is usually found in the footer?

A

Company address, site authors, copyright info, and social media links.

58
Q

What is usually found in the < main > tag on a webpage?

A

contains content that they came for, blog entries, videos, articles, photo galleries, recipes … it changes from page to page

59
Q

What can be said about both the < header > and < footer > ?

A

They pretty much stay the same throughout the site

60
Q

List both html character entities taught to you so far …

A

& copy for copyright

& amp for ampersand

61
Q

Which html tag groups together related info?

A

< section >

62
Q

What can be said about the < article > element?

A

It should be self-containted and always contain a headline element.

63
Q

What is the element used for sidebars?

A

< aside >

64
Q

Which file does the browser open first?

A

index.html

65
Q

Which tag is used for short inline quotations?

A

< q >

66
Q

Which tag encloses related content and has no semantic meaning?

A

< div >

67
Q

Which tag do you use just after the < body > tag to enclose everything?

A

< div >

68
Q

What can generally be said about file paths?

A

They instruct one file where another file is.

69
Q

How do you reach another file in another folder?

A

Include the folder name, then a slash, then the file with the extension, i.e.

“articles/article.html”

70
Q

How to, generally speaking, link to a file that is inside a parent or root folder from w/in a subfolder?

A

You need to instruct the browser to go up one level out of the current folder and up to it’s parent folder.

71
Q

Say you are in a file, articles.html which is located in a subfolder called articles which is located in the root folder called Basics wherein your target file lives, index.html, how do you target said file?

A

< a href = “ ../ index.html “ >

72
Q

How do you go “up” a level to get to a file in a higher folder?

A

../

73
Q

To add text to an image when a user hovers over it use the ___ tag.

A

< title >

74
Q

Code for a < title > tag …

A

< img src = “ me.png “ alt = “ me “ title = “ me again “ >

75
Q

Code an image for a caption …

A

< figure >

< img src = “ me.png” …

< figcaption >

Wha happin?

< / figcaption >

< / figure >

76
Q

How do you break up a line?

A

< br >

77
Q

How do you place a thematic break using a horizontal line in your content?

A

< hr >

78
Q

Which two tags make your text stand out bolder?

A

< strong >, < em >

79
Q

Use < strong > in code …

A

< p > < strong > I am strong < / strong > < / p >

80
Q

Use < em > in code

A

< p > < em > I am different < / em > < / p >

81
Q

Which tag is used to make text not as large as it is usually?

A

< small >

82
Q

Use < small > <small>in code …</small>

A

< p > < small > I am small < / small > < / p >

83
Q

Which tag can you use when you want to style some inline text?

A

< span >

84
Q

How do you link to a section of a webpage?

A

to where you’re going to:

< main >

< section id = “ about “ >

from where you’re going:

< li > < a href = “ # about “ > ABOUT < / a > < / li >

85
Q

How do you add non-breaking space?

A

& nbsp, use as many times as you like

86
Q

Code for html comments

A

< ! - - some comment - - >

87
Q

What is one way to display a webpage from a file?

A

Just drag and drop the file onto a blank browser page.

88
Q

which tag encapsulates all that can be seen on the page

A

the < body > tag

89
Q

when an element is said to be “nested” inside another element it is said to be the …….. of the other element.

A

the child

90
Q

which tags are used as headlines?

A

< h1 > through < h6 >

91
Q

how many < h1 > can you use per page, best practice

A

one

92
Q

which tag is useful when we want to apply custom styles to an HTML element

A

< div >

93
Q

what is best practice when indenting?

A

use two spaces

94
Q

which tag is used when you want to target a specific piece of content that is inline

A

< span >

95
Q

which tag is for italics?

A

< em >

96
Q

which tag is for bold text?

A

< strong >

97
Q

which tag is for a line break and what can you say about it?

A

< br > and it is self-closing

98
Q

what html code would you use for an unordered list?

A

< ul >

< li > ……< / li >

< / ul >

99
Q

which tags would you use for an ordered list?

A

< ol >

< li > ….. < / li >

< / ol >

100
Q

code for an image tag that is has a relative path

A

< img src = “ image-location . jpg / >

101
Q

code for an image tag that has a URL for a location

A

< img src = “ https : // ….. “ / >

102
Q

what is the alt attribute in the img tag used for?

A

for assistive tech screen readers

103
Q

code for an img tag with an alt attribute

A

< img src = “ # “ alt = “ a field of yellow sunflowers “ / >

104
Q

code for a video tag

A

< video src = “ myVideo.mp4 “ width = “ 320 “ height = “ 240” controls >

Video not supported

< / video >

105
Q

code for a document type declaration

A

< ! DOCTYPE html >

106
Q

html is always saved in a file with what type of extension?

A

.html

107
Q

which tag is used for a page’s metadata?

A

< head >

108
Q

a particular tag in the < head > tag is the

A

< title >

My Code

< / title >

109
Q

how do you add links to a webpage?

A

by using the < a > anchor elements

110
Q

what is the hyperlink reference tag?

A

href

111
Q

code for a link

A

< a href = “ https://www. …” / > This is a link < / a >

112
Q

how to open a link in a new tab?

A
113
Q

usually where do webdevelopers store html files?

A

in the root directory

114
Q

code for a link with a relative path

A

< a hrekf = “ . / contact.html > Contact < / a >

115
Q

how do you turn images into links

A

by wrapping an < a > element around them

116
Q

code for an image link

A

< a href = “ https://www. …. “ target = “ _blank “ > < img src: = “https://www. … .jpg “ alt = “a red fruit” > < / a >

117
Q

what must we do to jump to different portions of a webpage?

A

we must give the target an id

118
Q

code for a jump to a spot on the same page

A

< p id = “ top “ > Top of Page < / p >

next we

< li > < a href = “ # top “ > Top < / a > < / li >

119
Q

how to write html comments

A

< ! == comments ==>

120
Q

what is one of the best references for web developers?

A

The MDN, the mozilla developer network

121
Q

code for an html table

A

< table >

< thead>

< tr >

< th > Company Name < / th>

< / tr >

< / thead >

< tbody >

< tr >

< th > Adam’s Greenworks < / th >

< td > 14 < / td >

< / tr >

< tr > …..

< / tr >

< / tr >

< / tbody >

< / table >

122
Q

how can data in an html table span columns

A

use the colspan attribute

123
Q

how to span multiple rows in an html table?

A

use the rowspan attribute

124
Q

code for a table footer

A

< / tbody >

< tfoot >

< tr >

< th > Total < / th >

< td > 22 < / td >

< / tr >

< / tfoot >

< / table >

125
Q

what is semantic

A

relating to meaning

126
Q

name of container usually used for navigational links and introductory content

A

< header >

127
Q

which element is used to define a block of navigation links?

A

< nav >

128
Q

which element is used to encapsulate the dominant content w/in a webpage?

A

< main >

129
Q

which element is used to denote a recurring common theme?

A

< article >

130
Q

what element is used to denote the content at the bottom of the webpage?

A

< footer >

131
Q

what information does a footer have?

A

contact information, copyright information, terms of use, site map, and reference to top of page link

132
Q

which element defines chpt’s, heading, or any other area of the document w/the same theme?

A

< section >

133
Q

which element holds content that makes sense on its own, i.e. blogs, comments?

A

< article >

134
Q

which element is sometimes used for additional information that can enhance another element but isn’t required to understand the main content?

A

< aside >

135
Q

which element is used to encapsulate media, such as an image, illustration or diagram?

A

< figure >

136
Q

code for a figure

A

< figure >

< img src = “ overwatch.jpg “ >

< / figure >

137
Q

which element is use to describe the media in < figure >?

A

< figcaption >

138
Q

code for a figure with a figcaption

A

< figure >

< img src = “ overwatch.jpg “ >

< figcaption > This picture shows … < / figcaption >

< / figure >

139
Q

code for a video with all attributes

A

< video src = “ coding.mp4 “ loop autoplay controls >

Video not supported

< / video >

140
Q

which media element is now deprecated?

A

< embed >

141
Q

code for an audio with an attribute

A

< audio controls >

< source src = “ song.mp3 “ >

< / audio >

142
Q
A