TeamTreeHouse HTML Flashcards
(142 cards)
1
Q
What is another way of thinking about HTML?
A
HTML is just a set of tags in which content is wrapped
2
Q
Where do you place .CSS files?
A
Usually in the same folder as your index.html but in a different file.
3
Q
What are h tags all about?
A
h tags represent headlines, from largest to smallest and from < h1 > through < h6 >
4
Q
Does html without a .css file have any style?
A
html has default styles w/out css
5
Q
What is the first line in a html document?
A
< ! doctype html >
6
Q
What is the first major tag after the < ! doctype html >
A
< head >
7
Q
Which tag is shown in the browser tab?
A
< title >
8
Q
Code for a stylesheet …
A
< link rel = “ stylesheet “ href = “ styles.css “ >
9
Q
How do you code for lists
A
< ol >, < ul >
10
Q
How do you code html for easier readability?
A
indent
11
Q
What is another way of thinking of html?
A
think of html as a series of boxes that live within each other
12
Q
Which tag “shows” the content?
A
< body >
13
Q
Code for an image …
A
< img src = “https://www. … “ alt = “ some text “ >
14
Q
Where can you find some random image to input into your webpage while working on it?
A
www.placeimg.com
15
Q
What other use does listing a value in the < title > tag have?
A
screen readers use it for accesibility
16
Q
Which tag is used to wrap the general content in a webpage?
A
< main >
17
Q
What are the three main divisions of a page?
A
< header >, < main >, < footer >
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.
19
Q
Which tag shows the bulk of content?
A
< main >
20
Q
What info is listed in the < footer > ?
A
Copyright info, social media links, secondary navigation
21
Q
What can be said about the image tag ?
A
It is self-closing.
22
Q
Which tag is used for new paragraphs in html?
A
< p >
23
Q
Code for a link to go to the top of the page …
A
< a href = “ # top “ > TOP < / a >
24
Q
Code for a clickable image …
A
< p > < a href = “ # top “ > < img src = “ image.png “ > ME < / a > < / p >
25
Can an html element have more than one style ?
YES !
26
Code a new paragraph element for more than one class ...
\< p class = " tag location " \> blah, blah \< / p \>
27
How do you code a class in CSS ?
With a dot ...
.location {
background - color : # 222;
}
28
Code for a social media link in your footer ...
\< footer \>
\< ul \>
\< li \> \< a href = " http://twitter.com " \> TWITTER \< / a \> \< / li \>
29
Code for a link to open in another browser window ...
\< a href = " http://twitter.com " target = " _ blank "\>TWITTER\< / a \>
30
What is each block of CSS called?
a rule
31
What does each CSS rule start out with?
a selector
32
Where can you find amazing CSS info?
www.css-tricks.com
33
How can you go about styling just one html element, for example just one paragraph?
You can use a CSS class or id selector.
34
Code for a \< h2 \> element with two CSS classes ...
\< h2 class = " card title " \> BLAH \< / h2 \>
35
Can you use the same class on different html tags?
YES, YES a thousand times YES!
36
What is padding in CSS?
Padding is the space between content and it's border.
37
What is margin in CSS?
Margin is the space between dispirate elements.
38
What is a one particular way of describing a website?
It is a collection of webpages.
39
How would you list a css file named resume.css from a folder named css?
\< link rel = " stylesheet " href = " css/resume.css " \>
40
Code to link to a different webpage named resume.html ...
\< li \> \< a href = " resume.html " \> Experience \< / a \> \< / li \>
41
Code for a link to a different webpage named resume.html ...
\< li \> learn more \< a href = " resume.html " \> view resume \< / a \> \< / li \>
42
Name the three seperate layers that make up a typical webpage?
Content (html), Presentation (CSS), Behavior (JS)
43
What is the most common name for the homepage of a website?
index.html
44
There should be only one of which tags on a webpage?
\< html \>, \< head \>, \< body \>, \< h1 \>
## Footnote
#
45
Which tags are used for lists in html?
\< ol \>, \< ul \>
46
Code for a nested list ...
\< ul \>
\< li \> HOME \< / li \>
\< li \>
\< ul \> CONTACT
\< li \> PHONE \< / li \>
\< / ul \>
\< / li \>
\< / ul \>
47
What is the name for the a tag?
anchor tags
48
What is href stand for and what does it do?
href stands for hypertext reference and it changes the address in the URL bar.
49
Code for an anchor tag with a href ...
\< a href = " https://teamtreehouse.com " \> TeamTreeHouse \< / a \>
50
HTML links can ...
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.
51
What is an absolute URL?
It is all the info to navigate to a site, i.e. https://www. ....
52
Code for a new window/tab to open ...
\< a href = " https://www.teamtreehouse.com " target = " _ blank " \> HELLO \< / a \>
53
Code to get to the top of a page ...
\< a href = " # top " \> TOP \< / a \>
54
What is meant by semantic html?
It means that markup describes the meaning of content and don't make everything just \< div \> 's
55
What are the three main divisions of a typical webpage?
\< header \>, \< main \>, \< footer \>
56
What is found in a typical header?
Introductory content, site logo, navigation and main heading
57
What is usually found in the footer?
Company address, site authors, copyright info, and social media links.
58
What is usually found in the \< main \> tag on a webpage?
contains content that they came for, blog entries, videos, articles, photo galleries, recipes ... it changes from page to page
59
What can be said about both the \< header \> and \< footer \> ?
They pretty much stay the same throughout the site
60
List both html character entities taught to you so far ...
& copy for copyright
& amp for ampersand
61
Which html tag groups together related info?
\< section \>
62
What can be said about the \< article \> element?
It should be self-containted and always contain a headline element.
63
What is the element used for sidebars?
\< aside \>
64
Which file does the browser open first?
index.html
65
Which tag is used for short inline quotations?
\< q \>
66
Which tag encloses related content and has no semantic meaning?
\< div \>
67
Which tag do you use just after the \< body \> tag to enclose everything?
\< div \>
68
What can generally be said about file paths?
They instruct one file where another file is.
69
How do you reach another file in another folder?
Include the folder name, then a slash, then the file with the extension, i.e.
"articles/article.html"
70
How to, generally speaking, link to a file that is inside a parent or root folder from w/in a subfolder?
You need to instruct the browser to go up one level out of the current folder and up to it's parent folder.
71
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 href = " ../ index.html " \>
72
How do you go "up" a level to get to a file in a higher folder?
../
73
To add text to an image when a user hovers over it use the ___ tag.
\< title \>
74
Code for a \< title \> tag ...
\< img src = " me.png " alt = " me " title = " me again " \> ![]()
75
Code an image for a caption ...
\< figure \>
\< img src = " me.png" ...
\< figcaption \>
Wha happin?
\< / figcaption \>
\< / figure \> ![]()
76
How do you break up a line?
\< br \>
77
How do you place a thematic break using a horizontal line in your content?
\< hr \>
## Footnote
* * *
78
Which two tags make your text stand out bolder?
**\< strong \>, \< em \>**
79
Use **\< strong \>** in code ...
\< p \> \< strong \> I am strong \< / strong \> \< / p \>
80
Use \< em \> in code *...*
\< p \> \< em \> I am different \< / em \> \< / p \>
81
Which tag is used to make text not as large as it is usually?
\< small \>
82
Use \< small \> in code ...
\< p \> \< small \> I am small \< / small \> \< / p \>
83
Which tag can you use when you want to style some inline text?
\< span \>
84
How do you link to a section of a webpage?
to where you're going to:
\< main \>
\< section id = " about " \>
from where you're going:
\< li \> \< a href = " # about " \> ABOUT \< / a \> \< / li \>
85
How do you add non-breaking space?
& nbsp, use as many times as you like
86
Code for html comments
\< ! - - some comment - - \>
87
What is one way to display a webpage from a file?
Just drag and drop the file onto a blank browser page.
88
which tag encapsulates all that can be seen on the page
the \< body \> tag
89
when an element is said to be "nested" inside another element it is said to be the ........ of the other element.
the child
90
which tags are used as headlines?
\< h1 \> through \< h6 \>
91
how many \< h1 \> can you use per page, best practice
one
92
which tag is useful when we want to apply custom styles to an HTML element
\< div \>
93
what is best practice when indenting?
use two spaces
94
which tag is used when you want to target a specific piece of content that is inline
\< span \>
95
which tag is for italics?
\< em \>
96
which tag is for bold text?
\< strong \>
97
which tag is for a line break and what can you say about it?
\< br \> and it is self-closing
98
what html code would you use for an unordered list?
\< ul \>
\< li \> ......\< / li \>
\< / ul \>
99
which tags would you use for an ordered list?
\< ol \>
\< li \> ..... \< / li \>
\< / ol \>
100
code for an image tag that is has a relative path
\< img src = " image-location . jpg / \>
101
code for an image tag that has a URL for a location
\< img src = " https : // ..... " / \>
102
what is the alt attribute in the img tag used for?
for assistive tech screen readers
103
code for an img tag with an alt attribute
\< img src = " # " alt = " a field of yellow sunflowers " / \>
104
code for a video tag
\< video src = " myVideo.mp4 " width = " 320 " height = " 240" controls \>
Video not supported
\< / video \>
105
code for a document type declaration
\< ! DOCTYPE html \>
106
html is always saved in a file with what type of extension?
.html
107
which tag is used for a page's metadata?
\< head \>
108
a particular tag in the \< head \> tag is the
\< title \>
My Code
\< / title \>
109
how do you add links to a webpage?
by using the \< a \> anchor elements
110
what is the hyperlink reference tag?
href
111
code for a link
\< a href = " https://www. ..." / \> This is a link \< / a \>
112
how to open a link in a new tab?
113
usually where do webdevelopers store html files?
in the root directory
114
code for a link with a relative path
\< a hrekf = " . / contact.html \> Contact \< / a \>
115
how do you turn images into links
by wrapping an \< a \> element around them
116
code for an image link
\< a href = " https://www. .... " target = " \_blank " \> \< img src: = "https://www. ... .jpg " alt = "a red fruit" \> \< / a \>
117
what must we do to jump to different portions of a webpage?
we must give the target an id
118
code for a jump to a spot on the same page
\< p id = " top " \> Top of Page \< / p \>
next we
\< li \> \< a href = " # top " \> Top \< / a \> \< / li \>
119
how to write html comments
\< ! == comments ==\>
120
what is one of the best references for web developers?
The MDN, the mozilla developer network
121
code for an html table
\< 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
how can data in an html table span columns
use the colspan attribute
123
how to span multiple rows in an html table?
use the rowspan attribute
124
code for a table footer
\< / tbody \>
\< tfoot \>
\< tr \>
\< th \> Total \< / th \>
\< td \> 22 \< / td \>
\< / tr \>
\< / tfoot \>
\< / table \>
125
what is semantic
relating to meaning
126
name of container usually used for navigational links and introductory content
\< header \>
127
which element is used to define a block of navigation links?
\< nav \>
128
which element is used to encapsulate the dominant content w/in a webpage?
\< main \>
129
which element is used to denote a recurring common theme?
\< article \>
130
what element is used to denote the content at the bottom of the webpage?
\< footer \>
131
what information does a footer have?
contact information, copyright information, terms of use, site map, and reference to top of page link
132
which element defines chpt's, heading, or any other area of the document w/the same theme?
\< section \>
133
which element holds content that makes sense on its own, i.e. blogs, comments?
\< article \>
134
which element is sometimes used for additional information that can enhance another element but isn't required to understand the main content?
\< aside \>
135
which element is used to encapsulate media, such as an image, illustration or diagram?
\< figure \>
136
code for a figure
\< figure \>
\< img src = " overwatch.jpg " \>
\< / figure \>
137
which element is use to describe the media in \< figure \>?
\< figcaption \>
138
code for a figure with a figcaption
\< figure \>
\< img src = " overwatch.jpg " \>
\< figcaption \> This picture shows ... \< / figcaption \>
\< / figure \>
139
code for a video with all attributes
\< video src = " coding.mp4 " loop autoplay controls \>
Video not supported
\< / video \>
140
which media element is now deprecated?
\< embed \>
141
code for an audio with an attribute
\< audio controls \>
\< source src = " song.mp3 " \>
\< / audio \>
142
