Section 4 - Multi-Page Websites Flashcards

1
Q

What is the Root?

A

the starting point of a computer’s filing system (hard drive)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is an absolute file path?

A

a path relative to the root of the computer

Windows: C: Drive
Mac: Macintosh HD

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Whats an example of an absolute file path for Windows for the file cat.png in the Images folder under Project?

A

C:/Project/Images/cat.png

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is a relative file path?

A

when you specify a path relative to where you’re currently writing your code (usually shorter than absolute paths)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What type of files will usually use a relative path? (4)

A
  1. Images
  2. Sounds
  3. Movies
  4. Other HTML files
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What’s an example of a relative path?

Scenario: You’re currently in index.html, and there is another folder in the directory called Images with cat.png inside you want to specify

A

Current: index.html

Images/cat.png

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What are the special characters that let us navigate relative file paths?

A

double dot ..
single dot.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are double dots and what do they allow us to do? Where are they located in a file path? (2)

A

double dots allow us to go up a level in a relative file path, placed at the beginning of the file path

Ex:
../essay.docx

(the dot dot .. equals the parent directory above, and the file represents the file you want to access that’s above you)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What does the single dot allow us to do in a relative file path?

A

it tells us to stay in the current directory (that we’re in)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What’s an example of using the single dot file path with dog.png?

A

./dog.png

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What’s a trick you can do if you want to access anything in the current directory and same hierarchy (same parent and any child in current directory)?

A

You can omit the dot slash ./

Ex: ./dog.png = dog.png

(but doesn’t work all of the time so always use the dot slash ./ )

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

How would you type out that you want to stay in the current directory?

A

./filename.png

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

When creating image elements don’t forget the important…?

A

alt text

(goes before ending slash greater than />)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

dot slash takes us to the ____ level

A

parent level (current directory)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

dot dot slash takes us ______

A

up a level (to the Root)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is an HTML boilerplate?

A

the structure to our HTML file and what you start off with when you create a new HTML file

17
Q

At the top of every HTML file there is a ___ ___

A

doctype declaration

18
Q

What does the doctype declaration tell the browser?

A

what version of HTML the file was written in

19
Q

What’s the latest version of HTML?

A

HTML 5 (2012)

20
Q

Write out the first line in the HTML boilerplate

A

<!D0CTYPE html>

(don’t know if that’s a zero or o)

21
Q

What’s the second part of the HTML boilerplate? (write it)

A

<html>
</html>

22
Q

What is the purpose of the second part of the HTML boilerplate?

A

it’s the root of the document (everything is going between the html opening and closing tags)

<html>
[[[[[content]]]]]
</html>

Basically the buns for the burger

23
Q

What does the “lang” part of the opening html tag mean?

A

it describes the language of the text content and assists in screen readers in pronouncing words correctly

<html>
</html>

24
Q

What is the third part of the HTML boilerplate?

A

the head element <head> </head>

25
Q

What is the purpose of the head element? What does it contain?

A

important website information is placed here like helping the browser render the site

(contains no content, is not visible to the website visitor)

26
Q

What’s one of the things you should always have in the head section? Write it out

A

a meta tag for the character set encoding of the webpage

<meta></meta>

27
Q

What do meta tags ensure?

A

ensures the characters you’re using on the website display correctly

(character sets: emojis allowed to render? can have symbols like divide?

28
Q

What’s the second thing you should include in the head section?

A

the title of the website (what’s displayed in browser tabs)

29
Q

How do you add the title element?

A

<title>My Website</title>

30
Q

What do you add to the HTML boilerplate after the head section?

A

the body section

<body> </body>

31
Q

What does the body section consist of?

A

Where all the content goes (text, images, titles, links) in between body opening and closing tags

(the tofu of the website)

32
Q

How do you add the body element?

A

<body>
<h1>Hello World!</h1>
</body>

33
Q

What’s the shortcut to automatically inserting the HTML boilerplate on VS code?

A

!
then select the first option

(only works if you’ve created a .html website ie save the file as a.html)

34
Q

What does “viewport” define on a website under the meta tag?

A

defines how the website should be displayed relative to the screen it’s rendered on

(tells browser how to display your website when it opens)

35
Q

What is web hosting?

A

the process of taking your website files and putting them onto an Internet-connected Web server

36
Q

How do you add a footer?

A

<footer>
<p>Copyright Name. All Rights Reserved.</p
</footer>
</p></footer>