TeamTreeHouse HTML Flashcards
What is another way of thinking about HTML?
HTML is just a set of tags in which content is wrapped
Where do you place .CSS files?
Usually in the same folder as your index.html but in a different file.
What are h tags all about?
h tags represent headlines, from largest to smallest and from < h1 > through < h6 >
Does html without a .css file have any style?
html has default styles w/out css
What is the first line in a html document?
< ! doctype html >
What is the first major tag after the < ! doctype html >
< head >
Which tag is shown in the browser tab?
< title >
Code for a stylesheet …
< link rel = “ stylesheet “ href = “ styles.css “ >
How do you code for lists
< ol >, < ul >
How do you code html for easier readability?
indent
What is another way of thinking of html?
think of html as a series of boxes that live within each other
Which tag “shows” the content?
< body >
Code for an image …
< img src = “https://www. … “ alt = “ some text “ >
Where can you find some random image to input into your webpage while working on it?
www.placeimg.com
What other use does listing a value in the < title > tag have?
screen readers use it for accesibility
Which tag is used to wrap the general content in a webpage?
< main >
What are the three main divisions of a page?
< header >, < main >, < footer >
What info is listed in the main < header > ?
Introductory info, name of site, company logo, main navigation which is a list of links to other pages on the site.
Which tag shows the bulk of content?
< main >
What info is listed in the < footer > ?
Copyright info, social media links, secondary navigation
What can be said about the image tag ?
It is self-closing.
Which tag is used for new paragraphs in html?
< p >
Code for a link to go to the top of the page …
< a href = “ # top “ > TOP < / a >
Code for a clickable image …
< p > < a href = “ # top “ > < img src = “ image.png “ > ME < / a > < / p >
Can an html element have more than one style ?
YES !
Code a new paragraph element for more than one class …
< p class = “ tag location “ > blah, blah < / p >
How do you code a class in CSS ?
With a dot …
.location {
background - color : # 222;
}
Code for a social media link in your footer …
< footer >
< ul >
< li > < a href = “ http://twitter.com “ > TWITTER < / a > < / li >
Code for a link to open in another browser window …
< a href = “ http://twitter.com “ target = “ _ blank “>TWITTER< / a >
What is each block of CSS called?
a rule
What does each CSS rule start out with?
a selector
Where can you find amazing CSS info?
www.css-tricks.com
How can you go about styling just one html element, for example just one paragraph?
You can use a CSS class or id selector.
Code for a < h2 > element with two CSS classes …
< h2 class = “ card title “ > BLAH < / h2 >
Can you use the same class on different html tags?
YES, YES a thousand times YES!
What is padding in CSS?
Padding is the space between content and it’s border.
What is margin in CSS?
Margin is the space between dispirate elements.
What is a one particular way of describing a website?
It is a collection of webpages.
How would you list a css file named resume.css from a folder named css?
< link rel = “ stylesheet “ href = “ css/resume.css “ >
Code to link to a different webpage named resume.html …
< li > < a href = “ resume.html “ > Experience < / a > < / li >
Code for a link to a different webpage named resume.html …
< li > learn more < a href = “ resume.html “ > view resume < / a > < / li >
Name the three seperate layers that make up a typical webpage?
Content (html), Presentation (CSS), Behavior (JS)
What is the most common name for the homepage of a website?
index.html
There should be only one of which tags on a webpage?
< html >, < head >, < body >, < h1 >
#
Which tags are used for lists in html?
< ol >, < ul >
Code for a nested list …
< ul >
< li > HOME < / li >
< li >
< ul > CONTACT
< li > PHONE < / li >
< / ul >
< / li >
< / ul >
What is the name for the a tag?
anchor tags
What is href stand for and what does it do?
href stands for hypertext reference and it changes the address in the URL bar.
Code for an anchor tag with a href …
< a href = “ https://teamtreehouse.com “ > TeamTreeHouse < / a >
HTML links can …
- Link a page on your site to another page on another site.
- Link a page on your site to another page on the same site.
- Link to a different location on the same page.
- Open a new page in a new browser window/tab.
- Begin composing an email in the user’s default email program.
What is an absolute URL?
It is all the info to navigate to a site, i.e. https://www. ….
Code for a new window/tab to open …
< a href = “ https://www.teamtreehouse.com “ target = “ _ blank “ > HELLO < / a >
Code to get to the top of a page …
< a href = “ # top “ > TOP < / a >
What is meant by semantic html?
It means that markup describes the meaning of content and don’t make everything just < div > ‘s
What are the three main divisions of a typical webpage?
< header >, < main >, < footer >
What is found in a typical header?
Introductory content, site logo, navigation and main heading
What is usually found in the footer?
Company address, site authors, copyright info, and social media links.
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
What can be said about both the < header > and < footer > ?
They pretty much stay the same throughout the site
List both html character entities taught to you so far …
& copy for copyright
& amp for ampersand
Which html tag groups together related info?
< section >
What can be said about the < article > element?
It should be self-containted and always contain a headline element.
What is the element used for sidebars?
< aside >
Which file does the browser open first?
index.html
Which tag is used for short inline quotations?
< q >
Which tag encloses related content and has no semantic meaning?
< div >
Which tag do you use just after the < body > tag to enclose everything?
< div >
What can generally be said about file paths?
They instruct one file where another file is.
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”
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.
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 “ >
How do you go “up” a level to get to a file in a higher folder?
../
To add text to an image when a user hovers over it use the ___ tag.
< title >
Code for a < title > tag …
< img src = “ me.png “ alt = “ me “ title = “ me again “ >
Code an image for a caption …
< figure >
< img src = “ me.png” …
< figcaption >
Wha happin?
< / figcaption >
< / figure >
How do you break up a line?
< br >
How do you place a thematic break using a horizontal line in your content?
< hr >
Which two tags make your text stand out bolder?
< strong >, < em >
Use < strong > in code …
< p > < strong > I am strong < / strong > < / p >
Use < em > in code …
< p > < em > I am different < / em > < / p >
Which tag is used to make text not as large as it is usually?
< small >
Use < small > <small>in code …</small>
< p > < small > I am small < / small > < / p >
Which tag can you use when you want to style some inline text?
< span >
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 >
How do you add non-breaking space?
& nbsp, use as many times as you like
Code for html comments
< ! - - some comment - - >
What is one way to display a webpage from a file?
Just drag and drop the file onto a blank browser page.
which tag encapsulates all that can be seen on the page
the < body > tag
when an element is said to be “nested” inside another element it is said to be the …….. of the other element.
the child
which tags are used as headlines?
< h1 > through < h6 >
how many < h1 > can you use per page, best practice
one
which tag is useful when we want to apply custom styles to an HTML element
< div >
what is best practice when indenting?
use two spaces
which tag is used when you want to target a specific piece of content that is inline
< span >
which tag is for italics?
< em >
which tag is for bold text?
< strong >
which tag is for a line break and what can you say about it?
< br > and it is self-closing
what html code would you use for an unordered list?
< ul >
< li > ……< / li >
< / ul >
which tags would you use for an ordered list?
< ol >
< li > ….. < / li >
< / ol >
code for an image tag that is has a relative path
< img src = “ image-location . jpg / >
code for an image tag that has a URL for a location
< img src = “ https : // ….. “ / >
what is the alt attribute in the img tag used for?
for assistive tech screen readers
code for an img tag with an alt attribute
< img src = “ # “ alt = “ a field of yellow sunflowers “ / >
code for a video tag
< video src = “ myVideo.mp4 “ width = “ 320 “ height = “ 240” controls >
Video not supported
< / video >
code for a document type declaration
< ! DOCTYPE html >
html is always saved in a file with what type of extension?
.html
which tag is used for a page’s metadata?
< head >
a particular tag in the < head > tag is the
< title >
My Code
< / title >
how do you add links to a webpage?
by using the < a > anchor elements
what is the hyperlink reference tag?
href
code for a link
< a href = “ https://www. …” / > This is a link < / a >
how to open a link in a new tab?
usually where do webdevelopers store html files?
in the root directory
code for a link with a relative path
< a hrekf = “ . / contact.html > Contact < / a >
how do you turn images into links
by wrapping an < a > element around them
code for an image link
< a href = “ https://www. …. “ target = “ _blank “ > < img src: = “https://www. … .jpg “ alt = “a red fruit” > < / a >
what must we do to jump to different portions of a webpage?
we must give the target an id
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 >
how to write html comments
< ! == comments ==>
what is one of the best references for web developers?
The MDN, the mozilla developer network
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 >
how can data in an html table span columns
use the colspan attribute
how to span multiple rows in an html table?
use the rowspan attribute
code for a table footer
< / tbody >
< tfoot >
< tr >
< th > Total < / th >
< td > 22 < / td >
< / tr >
< / tfoot >
< / table >
what is semantic
relating to meaning
name of container usually used for navigational links and introductory content
< header >
which element is used to define a block of navigation links?
< nav >
which element is used to encapsulate the dominant content w/in a webpage?
< main >
which element is used to denote a recurring common theme?
< article >
what element is used to denote the content at the bottom of the webpage?
< footer >
what information does a footer have?
contact information, copyright information, terms of use, site map, and reference to top of page link
which element defines chpt’s, heading, or any other area of the document w/the same theme?
< section >
which element holds content that makes sense on its own, i.e. blogs, comments?
< article >
which element is sometimes used for additional information that can enhance another element but isn’t required to understand the main content?
< aside >
which element is used to encapsulate media, such as an image, illustration or diagram?
< figure >
code for a figure
< figure >
< img src = “ overwatch.jpg “ >
< / figure >
which element is use to describe the media in < figure >?
< figcaption >
code for a figure with a figcaption
< figure >
< img src = “ overwatch.jpg “ >
< figcaption > This picture shows … < / figcaption >
< / figure >
code for a video with all attributes
< video src = “ coding.mp4 “ loop autoplay controls >
Video not supported
< / video >
which media element is now deprecated?
< embed >
code for an audio with an attribute
< audio controls >
< source src = “ song.mp3 “ >
< / audio >
