This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "Hypertext Markup Language" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Speaker 1: We're gonna go over three languages that are gonna cover what we call client side development, front end development, which is front end masters read that's what it's referring to. Front, when we say front end development we're referring to, what is actually executed on your computer? Because, like what Nina was saying, you request something from the server.
[00:00:26] The server sends something back. We're gonna talk about the something sent back. Later we're gonna talk about what's actually happening on the server. That's the nodejs part of this course. But the server's actually gonna send you back like a code and then your computer or your browser rather is going to execute that code.
[00:00:45] So of that code that is being sent back to your computer, we kinda have three different pieces. We have the HTML which I'm sure many of you are familiar with, we're also gonna later talk about the CSS and the JavaScript. So the first part, HTML is kind of answers the what.
[00:01:05] It's the actual content that's on the page. So if you have a giant blog post, or a blog, the HTML's going to be like the actual words in your blog posts. It's gonna have the author's name, the date, it's kind of the what. It doesn't care about what it looks like, it just cares about what is actually on the page.
[00:01:27] The what it looks like is the CSS. And then, if you have things moving around, or you click a button and pops something up, that behavior that you're seeing, that's the JavaScript executing, that's the actual code. So HTML in and of itself is not actually code, it's called mark up, so it stands for hypertext markup language, that's because HTML doesn't execute, rather it's just kind of describing what's happening.
[00:01:58] Kind of think of it like a Word document. You don't put like, behavior into your Word document. Your Word document is not executed, it's rather just read. Same diff here with the HTML, it's just a different format for it.
>> Speaker 1: So it's gonna actually have like the words on your blog post.
[00:02:19] Doesn't have any style, that's all in the CSS. So if any of you have ever seen HTML before, it looks like a bunch of nested tags. It goes in and out a bunch like that. So you'll see a lot of that. And it starts with the most general and then it nests further and further.
[00:02:38] So let's look a little bit like this is a contrived example, this is not valid HTML, this is just kind of to show you kind of what it would look like. Like you have a car tag and so you see the car at the top and then the ending tag that's flash car that means it's the end.
[00:02:54] So everything inside of it is describing the car. Then you have the engine inside the car. So the engine is part of the car. That's why it's nested inside of it. And inside of the engine you have a transmission and radiator. So if we look at, for example, the cd-player right there.
[00:03:15] The cd-player is nested inside the stereo, so the cd-player is inherently part of the stereo and the stereo is inherently part of the car. So that's kind of how HTML works, is you're saying that this is nested inside of here so I know the cd-player is part of the stereo and the stereo is part of the car.
[00:03:36] Kind of get where I'm going with that? So if we have any sports fans particularly Seahawks fans let's look at another example. So you have a team. And on the team we have a like a couple wide receivers down there. And the wide receiver is part of the wide receivers.
[00:03:54] And the wide receiver is part of the offense. So it's just kind of that nested description further and further up. So inherently, the wide receiver is part of the offense and the offense is part of the team. Or you can ask, is this wide receiver part of the team?
[00:04:06] Yes, it's part of the team. Kind of a weird example but let's start talking about HTML now. Looks a little weird. As you'll see, they're just a bunch of abbreviations that eventually you just kind of memorize cuz you'll use them so much. So p stands for paragraph, h1 is like a really big title or header or something like that.
[00:04:33] [COUGH] And then, you'll notice on every HTML document there's a head and a body. You'll never see what's actually in the head, the head is all like the metadata. For example, when you click like a tab, if I can bring this up right here, this is what's showing up here in this tab, that's what's comes from the title.
[00:04:51] So it's not actually displayed on the page. Nothing on the head will ever be displayed on the page. It's all that kind of metadata. Like you can say, I'm about to give you an English document, and this English document is encoded this way, and it has like, these kinds of style things to apply to it.
[00:05:07] That's the kind of stuff that goes on the head. The body is actually what you're going to display. So in this case, I have a header and a paragraph. So I got down here a code pen link. Hopefully, most of you have these slides open so you can click on this.
[00:05:28] If not, I'll give you a second to, does anyone at least here in the room not have the slides open? Cuz otherwise, you can just click on the link.
>> Speaker 1: Just in case once, I will give you that link again real quick if you wanna open the slides.
[00:05:48] The slides are right here.
>> Speaker 1: Some people still typing, so I'll give you a sec.
>> Speaker 1: So we're on slide 36.
>> Speaker 1: So go ahead and just open that.