Section 4: HTML 5 Flashcards
Text Editor
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!
< !DOCTYPE html >
Tells whatever web browser that will be using your code that the file is HTML5 and that it needs to use it properly.
If you have a question and don’t understand something, what 4 steps should you do?
- 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…
- Use google and websites like stackoverflow to find your answer.
- Reach out to the community (you have the discord community in this course as a resource for life now)
- Still don’t have the answer? Go back through steps 1-3 and see if you missed something
< h1 >< /h1 >
header
This goes all the way from < h1 >< /h1> to < h6 >< /h6 >, becoming smaller with each one.
< p >< /p >
paragraph
developers are lazy, so if you type “lorem” and hit tab, it will put in jibberish for you…
tag vs element
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
< strong >< /strong >
bold
Used to be < b >< /b > but that isn’t really used anymore even though it still kinda works…
< em >< /em >
italicize
Used to be < i >< /i > but that’s not used anymore even though it still kind of works…
< ol >< /ol >
ordered list
ex.
1.
2.
3.
< ul >< /ul >
unordered list
ex:
*
*
*
< li >
list item
Usually nested under a < ol > or < /ol >< ul >< /ul >
self-closing tags
tags that don’t have a closing tag.
ex: < br >, < hr >, < img >
< img >
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” >
attribute
some html tags can have attributes which add certain properties to the tag.
Ex: “src” in < img >
value
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”.
< br > and < hr >
< br > is a break in the page
< hr > is a horizontal line break in the page
< a >< /a >
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 >
html tab shortcut
type html and then hit tab and it will give you an already made template for starting an html project!
index.html
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.
Relative vs Absolute Paths
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
