`, ``, ``, ``, `` tags, but NOT the ``, ``, or `` tags.
-This means we have to learn the foundational tags that the standard outlines. Let's dive into that.
+This means we have to learn the foundational tags that the standard outlines. Let's dive into that. (by the way we will be working with html5, which is just a version of HTML that uses a certain standard)
We will start with HTML headings. Let's try out all the heading sizes supported by html5. Try typing the code below into your `page.html` file. (Don't copy paste! It's easier to remember the syntax when you type)
@@ -124,6 +124,86 @@ Do you notice anything? The font size gets smaller to indicate that certain text
This isn't a coincidence: HTML is structured in such a way where information and tags are ranked one above the other according to importance. This is called the `HTML Hierarchy` (Fancy word alert! Remember this, it will come up again later)
+### Paragraphs and images
+
+> Checkpoint alert! If you fell behind no worries, just copy the [code found here](checkpoints/01/page.html) into your `page.html`
+
+What if you wanted to write lengthier text? Say you wanted to write a book or a paragraph that explains why Matt is so great and how he was cheated out of his own html tag. Or maybe we want to serenade Chase about how he's such a cool person and a fantastic teacher.
+
+Let's add the following code to our `page.html` file
+
+```html
+This is a paragraph, wow!
+Let's write about Matt and Chase now.
+What if you wanted to write lengthier text? Say you wanted to write a book or a paragraph that explains why Matt is so great and how he was cheated out of his own html tag. Or maybe we want to serenade Chase about how he's such a cool person and a fantastic teacher.
+```
+
+This should result in something like:
+
+
+Note how the paragraphs naturally have line breaks between them, even though we don't have any in our code. This is a great example of how HTML is _telling_ the browser how to display your information.
+
+---
+
+Let's add more content. What if we want an image? Here's an image of the [matt](https://avatars0.githubusercontent.com/u/14893287?s=400&u=7a0d69cf5f16e415439c20017f85f9c8dc4582d1&v=4)!
+
+Let's add the following code into our `page.html` file. It's okay to copy and paste here, since the link is so long
+```html
+
+```
+You should now have a picture of matt on your webpage.
+
+### Links (or more formally known as Anchors)
+> Checkpoint alert! If you fell behind no worries, just copy the [code found here](checkpoints/02/page.html) into your `page.
+
+What if we wanted to add a hyperlink to our webpage? Maybe a link to the [ACM TeachLA website](https://teachla.uclaacm.com/)?
+
+We can do this with the `` tag. Let's add it to our `page.html`
+```html
+A link to the ACM TeachLA website!
+```
+
+You should now have that familiar blue underlined text we all know as links!
+
+
+
+But wait, why do the HTML tags for `![]()
` and `` have things inside of the tags? What are `href` and `src`?
+
+These are known as HTML **attriutes**, which you can think of little nametags you add to HTML tags. For example the `href` and `src` attributes tell their html tags where to look to find the webpage or image respectively. In english `` would roughly translate to "put a link that points to the teachLA website".
+
+We'll cover more about attributes later today.
+
+### Explicit HTML structure
+> Checkpoint alert! If you fell behind no worries, just copy the [code found here](checkpoints/03/page.html) into your `page.
+
+Remember when we talked about the HTML hierarchy? Let's bring that back again.
+
+There are some special tags in HTML, ones that delinate specific sections of a webpage. You don't need to copy any of this down in `page.html` but it's usefuly just to follow along with the images below.
+
+```html
+
+
+
+ This is some text in the header
+
+ This is some text in the main body
+
+
+
+```
+In the html hierarchy, the `` tag tells the browser: "Hey the webpage begins here! Everything surrounded by the `` tags is part of the webpage"
+
+The `` tag tells the browser where to loook for the main content. Everything that the user will end up seeing should be in the `body` tag.
+
+`` and `
`, ``, `` tags, but NOT the ``, ``, or `` tags.
-This means we have to learn the foundational tags that the standard outlines. Let's dive into that.
+This means we have to learn the foundational tags that the standard outlines. Let's dive into that. (by the way we will be working with html5, which is just a version of HTML that uses a certain standard)
We will start with HTML headings. Let's try out all the heading sizes supported by html5. Try typing the code below into your `page.html` file. (Don't copy paste! It's easier to remember the syntax when you type)
@@ -124,6 +124,86 @@ Do you notice anything? The font size gets smaller to indicate that certain text
This isn't a coincidence: HTML is structured in such a way where information and tags are ranked one above the other according to importance. This is called the `HTML Hierarchy` (Fancy word alert! Remember this, it will come up again later)
+### Paragraphs and images
+
+> Checkpoint alert! If you fell behind no worries, just copy the [code found here](checkpoints/01/page.html) into your `page.html`
+
+What if you wanted to write lengthier text? Say you wanted to write a book or a paragraph that explains why Matt is so great and how he was cheated out of his own html tag. Or maybe we want to serenade Chase about how he's such a cool person and a fantastic teacher.
+
+Let's add the following code to our `page.html` file
+
+```html
+This is a paragraph, wow!
+Let's write about Matt and Chase now.
+What if you wanted to write lengthier text? Say you wanted to write a book or a paragraph that explains why Matt is so great and how he was cheated out of his own html tag. Or maybe we want to serenade Chase about how he's such a cool person and a fantastic teacher.
+```
+
+This should result in something like:
+
+
+Note how the paragraphs naturally have line breaks between them, even though we don't have any in our code. This is a great example of how HTML is _telling_ the browser how to display your information.
+
+---
+
+Let's add more content. What if we want an image? Here's an image of the [matt](https://avatars0.githubusercontent.com/u/14893287?s=400&u=7a0d69cf5f16e415439c20017f85f9c8dc4582d1&v=4)!
+
+Let's add the following code into our `page.html` file. It's okay to copy and paste here, since the link is so long
+```html
+
+```
+You should now have a picture of matt on your webpage.
+
+### Links (or more formally known as Anchors)
+> Checkpoint alert! If you fell behind no worries, just copy the [code found here](checkpoints/02/page.html) into your `page.
+
+What if we wanted to add a hyperlink to our webpage? Maybe a link to the [ACM TeachLA website](https://teachla.uclaacm.com/)?
+
+We can do this with the `` tag. Let's add it to our `page.html`
+```html
+A link to the ACM TeachLA website!
+```
+
+You should now have that familiar blue underlined text we all know as links!
+
+
+
+But wait, why do the HTML tags for `![]()
` and `` have things inside of the tags? What are `href` and `src`?
+
+These are known as HTML **attriutes**, which you can think of little nametags you add to HTML tags. For example the `href` and `src` attributes tell their html tags where to look to find the webpage or image respectively. In english `` would roughly translate to "put a link that points to the teachLA website".
+
+We'll cover more about attributes later today.
+
+### Explicit HTML structure
+> Checkpoint alert! If you fell behind no worries, just copy the [code found here](checkpoints/03/page.html) into your `page.
+
+Remember when we talked about the HTML hierarchy? Let's bring that back again.
+
+There are some special tags in HTML, ones that delinate specific sections of a webpage. You don't need to copy any of this down in `page.html` but it's usefuly just to follow along with the images below.
+
+```html
+
+
+
+ This is some text in the header
+
+ This is some text in the main body
+
+
+
+```
+In the html hierarchy, the `` tag tells the browser: "Hey the webpage begins here! Everything surrounded by the `` tags is part of the webpage"
+
+The `` tag tells the browser where to loook for the main content. Everything that the user will end up seeing should be in the `body` tag.
+
+`` and `
` tags, but NOT the ``, ``, or `` tags.
-This means we have to learn the foundational tags that the standard outlines. Let's dive into that.
+This means we have to learn the foundational tags that the standard outlines. Let's dive into that. (by the way we will be working with html5, which is just a version of HTML that uses a certain standard)
We will start with HTML headings. Let's try out all the heading sizes supported by html5. Try typing the code below into your `page.html` file. (Don't copy paste! It's easier to remember the syntax when you type)
@@ -124,6 +124,86 @@ Do you notice anything? The font size gets smaller to indicate that certain text
This isn't a coincidence: HTML is structured in such a way where information and tags are ranked one above the other according to importance. This is called the `HTML Hierarchy` (Fancy word alert! Remember this, it will come up again later)
+### Paragraphs and images
+
+> Checkpoint alert! If you fell behind no worries, just copy the [code found here](checkpoints/01/page.html) into your `page.html`
+
+What if you wanted to write lengthier text? Say you wanted to write a book or a paragraph that explains why Matt is so great and how he was cheated out of his own html tag. Or maybe we want to serenade Chase about how he's such a cool person and a fantastic teacher.
+
+Let's add the following code to our `page.html` file
+
+```html
+This is a paragraph, wow!
+Let's write about Matt and Chase now.
+What if you wanted to write lengthier text? Say you wanted to write a book or a paragraph that explains why Matt is so great and how he was cheated out of his own html tag. Or maybe we want to serenade Chase about how he's such a cool person and a fantastic teacher.
+```
+
+This should result in something like:
+
+
+Note how the paragraphs naturally have line breaks between them, even though we don't have any in our code. This is a great example of how HTML is _telling_ the browser how to display your information.
+
+---
+
+Let's add more content. What if we want an image? Here's an image of the [matt](https://avatars0.githubusercontent.com/u/14893287?s=400&u=7a0d69cf5f16e415439c20017f85f9c8dc4582d1&v=4)!
+
+Let's add the following code into our `page.html` file. It's okay to copy and paste here, since the link is so long
+```html
+
+```
+You should now have a picture of matt on your webpage.
+
+### Links (or more formally known as Anchors)
+> Checkpoint alert! If you fell behind no worries, just copy the [code found here](checkpoints/02/page.html) into your `page.
+
+What if we wanted to add a hyperlink to our webpage? Maybe a link to the [ACM TeachLA website](https://teachla.uclaacm.com/)?
+
+We can do this with the `` tag. Let's add it to our `page.html`
+```html
+A link to the ACM TeachLA website!
+```
+
+You should now have that familiar blue underlined text we all know as links!
+
+
+
+But wait, why do the HTML tags for `![]()
` and `` have things inside of the tags? What are `href` and `src`?
+
+These are known as HTML **attriutes**, which you can think of little nametags you add to HTML tags. For example the `href` and `src` attributes tell their html tags where to look to find the webpage or image respectively. In english `` would roughly translate to "put a link that points to the teachLA website".
+
+We'll cover more about attributes later today.
+
+### Explicit HTML structure
+> Checkpoint alert! If you fell behind no worries, just copy the [code found here](checkpoints/03/page.html) into your `page.
+
+Remember when we talked about the HTML hierarchy? Let's bring that back again.
+
+There are some special tags in HTML, ones that delinate specific sections of a webpage. You don't need to copy any of this down in `page.html` but it's usefuly just to follow along with the images below.
+
+```html
+
+
+
+ This is some text in the header
+
+ This is some text in the main body
+
+
+
+```
+In the html hierarchy, the `` tag tells the browser: "Hey the webpage begins here! Everything surrounded by the `` tags is part of the webpage"
+
+The `` tag tells the browser where to loook for the main content. Everything that the user will end up seeing should be in the `body` tag.
+
+`` and `
This is a paragraph, wow!
+Let's write about Matt and Chase now.
+What if you wanted to write lengthier text? Say you wanted to write a book or a paragraph that explains why Matt is so great and how he was cheated out of his own html tag. Or maybe we want to serenade Chase about how he's such a cool person and a fantastic teacher.
+``` + +This should result in something like: + + +Note how the paragraphs naturally have line breaks between them, even though we don't have any in our code. This is a great example of how HTML is _telling_ the browser how to display your information. + +--- + +Let's add more content. What if we want an image? Here's an image of the [matt](https://avatars0.githubusercontent.com/u/14893287?s=400&u=7a0d69cf5f16e415439c20017f85f9c8dc4582d1&v=4)! + +Let's add the following code into our `page.html` file. It's okay to copy and paste here, since the link is so long +```html +
+```
+You should now have a picture of matt on your webpage.
+
+### Links (or more formally known as Anchors)
+> Checkpoint alert! If you fell behind no worries, just copy the [code found here](checkpoints/02/page.html) into your `page.
+
+What if we wanted to add a hyperlink to our webpage? Maybe a link to the [ACM TeachLA website](https://teachla.uclaacm.com/)?
+
+We can do this with the `` tag. Let's add it to our `page.html`
+```html
+A link to the ACM TeachLA website!
+```
+
+You should now have that familiar blue underlined text we all know as links!
+
+
+
+But wait, why do the HTML tags for `