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

Answer 25

textual article

Answer 26

footer (bottom of the page)

Question 27

sectioning elements: selecting by element name

Answer 27

selects all elements of same type html:

css: p { //declarations } *styles all

elements

Question 28

sectioning elements: selecting by relationship (direct descendant)

Answer 28

selecting element by selecting their parent element syntax: parent > child { }

Question 29

text text text

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

text text text

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

text text text

text text text

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

Answer 33

p + p { }

Question 34

selecting elements: selecting by id

Answer 34

id --> special attribute used to name single instance of element ex)

#hi { }

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)

.hey {}

Question 37

can you combine ids and classes?

Answer 37

yes, elements can have an id and class, and can be combined in css #id-name.class-name {}

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

Answer 39

block level container --> groups together large area of elements block element --> entire width of parent container, starts on new line

Answer 40

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