HTML Basics

Question 1

anatomy of website

Answer 1

content in .html file
html tags for structure
CSS code for styling in .css file
JavaScript for behavior and interactivity
browser to display website

Question 2

what does html stand for

Answer 2

HyperText Markup Language

Question 3

<h1> heading </h1>

what is <h1> here

Answer 3

element name and open tag (no attributes)

Question 4

<h1> heading </h1>

what is </h1> here

Answer 4

closing tag

Question 5

how to comment

Answer 5

<!-- comment -->

Question 6

<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

Answer 6

<header></header>

elements

Question 7

<p> text</p>

what kind of element is this

Answer 7

paragraph

Question 8

what is an absolute url

Answer 8

linking to an external website/location

Question 9

what does an absolute url usually start with

Answer 9

http:// or https://

Question 10

when do we use linking to an absolute url

Answer 10

external websites

CDNs (content delivery networks): stylesheets, fonts, etc

media hosted outside of your project’s file

Question 11

what is a relative url

Answer 11

linking to something within your project directory

Question 12

what does this mean with a relative url:

/ :

Answer 12

go up to the root directory (top level) & start looking there

Question 13

what does this mean with a relative url:

../ :

Answer 13

go up one level & start there (../../ etc.)

Question 14

if the path for img is:

<img></img>

where is pic.jpg located

Answer 14

located in the same folder as the current document

Question 15

if the path for img is:

<img></img>

where is pic.jpg located

Answer 15

located in the folder one up from the current document

Question 16

if the path for img is:

<img></img>

where is pic.jpg located

Answer 16

located in the img folder at the root level

Question 17

if the path for img is:

<img></img>

where is pic.jpg located

Answer 17

located in the img folder thats in the same folder as the current document

Question 18

<h1></h1>

Answer 18

top level header

Question 19

<h2></h2>

Answer 19

header level 2

Question 20

<header> </header>

Answer 20

header element

Question 21

<nav> </nav>

Answer 21

nav bar element

Question 22

<main> </main>

Answer 22

main content of the page

Question 23

<section> </section>

Answer 23

group of related content split into a section

Question 24

<aside> </aside>

Answer 24

sidebar

Question 25

<article> </article
</article>

Answer 25

textual article

Question 26

<footer> </footer>

Answer 26

footer (bottom of the page)

Question 27

sectioning elements: selecting by element name

Answer 27

selects all elements of same type

html:

<p> </p>

css:
p {
//declarations
}
*styles all <p> elements

Question 28

sectioning elements: selecting by relationship (direct descendant)

Answer 28

selecting element by selecting their parent element

syntax: parent > child { }

Question 29

<section>
<p>text text text</p>
</section>

what would the css look like if you selected via relationship?

Answer 29

section > child {
//declarations
}

*works bc child is direct descendant of parent

Question 30

selecting elements: selecting by relationship (not direct descendant)

Answer 30

selecting element by their “grandparent”

syntax: grandparent child { }

Question 31

<section>
<article>
<p>text text text</p>
</article>
</section>

what would the css look like if you selected via not direct relationship?

Answer 31

section p {
//declarations
}

Question 32

selecting elements: selecting by relationship (sibling)

Answer 32

selecting element by selecting their next sibling element

syntax: sibling + next sibling

Question 33

<section>
<p>text text text</p>
<p>text text text</p>
</section>

what would the css look like if you selected via sibling?

Answer 33

p + p {
}

Question 34

selecting elements: selecting by id

Answer 34

hi { }

id –> special attribute used to name single instance of element

ex) <p id="hi"></p>

Question 35

selecting by id syntax

Answer 35

id-name {}

Question 36

selecting elements: selecting by class

Answer 36

class –> special naming attribute, can be assigned to multiple elements

ex) <p class="hey"></p>
<p class="hey"></p>

.hey {}

Question 37

can you combine ids and classes?

Answer 37

id-name.class-name {}

yes, elements can have an id and class, and can be combined in css

Question 38

what is the order of priority styling methods?

Answer 38

inline code in html file
id selectors
class selectors, attribute selectors, psuedo-class selectors
normal element tag name
* –> selects all elements

Question 39

<div> </div>

Answer 39

block level container –> groups together large area of elements

block element –> entire width of parent container, starts on new line

Question 40

<span></span>

Answer 40

inline level container –> groups smaller sections of elements, no new line & only takes up as much width as content inside