Section 4 - Multi-Page Websites Flashcards
What is the Root?
the starting point of a computer’s filing system (hard drive)
What is an absolute file path?
a path relative to the root of the computer
Windows: C: Drive
Mac: Macintosh HD
Whats an example of an absolute file path for Windows for the file cat.png in the Images folder under Project?
C:/Project/Images/cat.png
What is a relative file path?
when you specify a path relative to where you’re currently writing your code (usually shorter than absolute paths)
What type of files will usually use a relative path? (4)
- Images
- Sounds
- Movies
- Other HTML files
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
Current: index.html
Images/cat.png
What are the special characters that let us navigate relative file paths?
double dot ..
single dot.
What are double dots and what do they allow us to do? Where are they located in a file path? (2)
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)
What does the single dot allow us to do in a relative file path?
it tells us to stay in the current directory (that we’re in)
What’s an example of using the single dot file path with dog.png?
./dog.png
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)?
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 would you type out that you want to stay in the current directory?
./filename.png
When creating image elements don’t forget the important…?
alt text
(goes before ending slash greater than />)
dot slash takes us to the ____ level
parent level (current directory)
dot dot slash takes us ______
up a level (to the Root)
What is an HTML boilerplate?
the structure to our HTML file and what you start off with when you create a new HTML file
At the top of every HTML file there is a ___ ___
doctype declaration
What does the doctype declaration tell the browser?
what version of HTML the file was written in
What’s the latest version of HTML?
HTML 5 (2012)
Write out the first line in the HTML boilerplate
<!D0CTYPE html>
(don’t know if that’s a zero or o)
What’s the second part of the HTML boilerplate? (write it)
<html>
</html>
What is the purpose of the second part of the HTML boilerplate?
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
What does the “lang” part of the opening html tag mean?
it describes the language of the text content and assists in screen readers in pronouncing words correctly
<html>
</html>
What is the third part of the HTML boilerplate?
the head element <head> </head>
What is the purpose of the head element? What does it contain?
important website information is placed here like helping the browser render the site
(contains no content, is not visible to the website visitor)
What’s one of the things you should always have in the head section? Write it out
a meta tag for the character set encoding of the webpage
<meta></meta>
What do meta tags ensure?
ensures the characters you’re using on the website display correctly
(character sets: emojis allowed to render? can have symbols like divide?
What’s the second thing you should include in the head section?
the title of the website (what’s displayed in browser tabs)
How do you add the title element?
<title>My Website</title>
What do you add to the HTML boilerplate after the head section?
the body section
<body> </body>
What does the body section consist of?
Where all the content goes (text, images, titles, links) in between body opening and closing tags
(the tofu of the website)
How do you add the body element?
<body>
<h1>Hello World!</h1>
</body>
What’s the shortcut to automatically inserting the HTML boilerplate on VS code?
!
then select the first option
(only works if you’ve created a .html website ie save the file as a.html)
What does “viewport” define on a website under the meta tag?
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)
What is web hosting?
the process of taking your website files and putting them onto an Internet-connected Web server
How do you add a footer?
<footer>
<p>Copyright Name. All Rights Reserved.</p
</footer>
</p></footer>
