HTML Basics Flashcards
anatomy of website
content in .html file
html tags for structure
CSS code for styling in .css file
JavaScript for behavior and interactivity
browser to display website
what does html stand for
HyperText Markup Language
<h1> heading </h1>
what is <h1> here
element name and open tag (no attributes)
<h1> heading </h1>
what is </h1> here
closing tag
how to comment
<!-- comment -->
<h1>top level header</h1>
<h2>header level 2</h2>
<h3>header level 3</h3>
<h4>header level 4</h4>
<h5>header level 5</h5>
<h6>header level 6</h6>
what kind of elements are these
<header></header>
elements
<p> text</p>
what kind of element is this
paragraph
what is an absolute url
linking to an external website/location
what does an absolute url usually start with
http:// or https://
when do we use linking to an absolute url
external websites
CDNs (content delivery networks): stylesheets, fonts, etc
media hosted outside of your project’s file
what is a relative url
linking to something within your project directory
what does this mean with a relative url:
/ :
go up to the root directory (top level) & start looking there
what does this mean with a relative url:
../ :
go up one level & start there (../../ etc.)
if the path for img is:
<img></img>
where is pic.jpg located
located in the same folder as the current document
if the path for img is:
<img></img>
where is pic.jpg located
located in the folder one up from the current document
if the path for img is:
<img></img>
where is pic.jpg located
located in the img folder at the root level
if the path for img is:
<img></img>
where is pic.jpg located
located in the img folder thats in the same folder as the current document
<h1></h1>
top level header
<h2></h2>
header level 2
<header> </header>
header element
<nav> </nav>
nav bar element
<main> </main>
main content of the page
<section> </section>
group of related content split into a section
<aside> </aside>
sidebar
<article> </article
</article>
textual article
<footer> </footer>
footer (bottom of the page)
sectioning elements: selecting by element name
selects all elements of same type
html:
<p> </p>
css:
p {
//declarations
}
*styles all <p> elements
sectioning elements: selecting by relationship (direct descendant)
selecting element by selecting their parent element
syntax: parent > child { }
<section>
<p>text text text</p>
</section>
what would the css look like if you selected via relationship?
section > child {
//declarations
}
*works bc child is direct descendant of parent
selecting elements: selecting by relationship (not direct descendant)
selecting element by their “grandparent”
syntax: grandparent child { }
<section>
<article>
<p>text text text</p>
</article>
</section>
what would the css look like if you selected via not direct relationship?
section p {
//declarations
}
selecting elements: selecting by relationship (sibling)
selecting element by selecting their next sibling element
syntax: sibling + next sibling
<section>
<p>text text text</p>
<p>text text text</p>
</section>
what would the css look like if you selected via sibling?
p + p {
}
selecting elements: selecting by id
hi { }
id –> special attribute used to name single instance of element
ex) <p id="hi"></p>
selecting by id syntax
id-name {}
selecting elements: selecting by class
class –> special naming attribute, can be assigned to multiple elements
ex) <p class="hey"></p>
<p class="hey"></p>
.hey {}
can you combine ids and classes?
id-name.class-name {}
yes, elements can have an id and class, and can be combined in css
what is the order of priority styling methods?
inline code in html file
id selectors
class selectors, attribute selectors, psuedo-class selectors
normal element tag name
* –> selects all elements
<div> </div>
block level container –> groups together large area of elements
block element –> entire width of parent container, starts on new line
<span></span>
inline level container –> groups smaller sections of elements, no new line & only takes up as much width as content inside
