Section 4: HTML 5

Question 1

Text Editor

Answer 1

Allows you to write and save code as files. It’s your “DAW” only for developers instead of music production. It’s your workshop.

Since you are making files such as .html, .css, etc. your computer is then technically a server!

Question 2

< !DOCTYPE html >

Answer 2

Tells whatever web browser that will be using your code that the file is HTML5 and that it needs to use it properly.

Question 3

If you have a question and don’t understand something, what 4 steps should you do?

Answer 3

1. Try Rubber Ducking: Get a desk toy, and work the problem out and how to solve it to them…This works…It’s weird, but it works…
2. Use google and websites like stackoverflow to find your answer.
3. Reach out to the community (you have the discord community in this course as a resource for life now)
4. Still don’t have the answer? Go back through steps 1-3 and see if you missed something

Question 4

< h1 >< /h1 >

Answer 4

header

This goes all the way from < h1 >< /h1> to < h6 >< /h6 >, becoming smaller with each one.

Question 5

< p >< /p >

Answer 5

paragraph

developers are lazy, so if you type “lorem” and hit tab, it will put in jibberish for you…

Question 6

tag vs element

Answer 6

a tag is just something in an opening/closing tag for ex:
< p > or < /p >

An element is the tags and everything inside of them including the tags, attributes (ex: class=”foo”), and content (ex: this is a paragraph.)
Ex of an element: < p class=”foo” >This is a paragraph.
< /p >

Source for more info: https://www.tutorialrepublic.com/html-tutorial/html-elements.php

Question 7

< strong >< /strong >

Answer 7

bold

Used to be < b >< /b > but that isn’t really used anymore even though it still kinda works…

Question 8

< em >< /em >

Answer 8

italicize

Used to be < i >< /i > but that’s not used anymore even though it still kind of works…

Question 9

< ol >< /ol >

Answer 9

ordered list

ex.
1.
2.
3.

Question 10

< ul >< /ul >

Answer 10

unordered list

ex:
*
*
*

Question 11

< li >

Answer 11

list item

Usually nested under a < ol > or < /ol >< ul >< /ul >

Question 12

self-closing tags

Answer 12

tags that don’t have a closing tag.

ex: < br >, < hr >, < img >

Question 13

< img >

Answer 13

image tag

< img >

“src” is the photo file
“alt” is text that shows up if photo doesn’t work on website
“width” is the width of the photo
“height” is the height of the photo

ex:

< img src=”turtle.png” alt=”turtle” width=”400px” height=”400px” >

Question 14

attribute

Answer 14

some html tags can have attributes which add certain properties to the tag.

Ex: “src” in < img >

Question 15

value

Answer 15

An attribute will always have a value attached to it. A value is a file or “shortcut” of sorts to say where that source is coming from (this can be an image file/link, class value, ID value, etc)

Ex: < img src=”smiley face.gif” >
the img tag has src as an attribute with the value of “smiley face.gif”.

Question 16

< br > and < hr >

Answer 16

< br > is a break in the page

< hr > is a horizontal line break in the page

Question 17

< a >< /a >

Answer 17

anchor tag

Allows you to add a link.
Has an attribute called “href” which stands for Hyper Text Reference, which allows you to link to something inside the anchor tags.
Ex: < a href=”google.com” >Go to Google!< /a >

Question 18

html tab shortcut

Answer 18

type html and then hit tab and it will give you an already made template for starting an html project!

Question 19

index.html

Answer 19

Why use index.html as the home page instead of home.html, etc?

Servers by default return index.html first which is what you want. This is a common practice by a lot of developers.

Question 20

Relative vs Absolute Paths

Answer 20

Relative:
file:///C:/Users/Joe/Desktop/index.html
Uses the “file” protocol, which means this webpage cannot be accessed outside your computer and its directory (such as if you saved it to the Desktop)

Absolute:
https://www.google.com/
Uses the “https” protocol, which is how you access files over the internet