Creating Your First HTML Page

[00:00:00]
>> Jen Kramer: Okay, fabulous. So let's go ahead and get started. We'll go ahead and say File > New file. File > New file, you should see a whole lot of nothing, all right? Then we're gonna go ahead and we're gonna say File > Save. And I'd liked you to save this as index.html and save that right inside of your day one folder.

[00:00:31]
So make a new file by going to File, New File, save it. File, Save. We're gonna call it something like index.html, and you're gonna save it right inside of your day one folder. Go ahead and safe, save.
>> Jen Kramer: Everybody got it? [SOUND] You've made your first web page.

[00:00:55]
You can actually display this and you'll see a whole lot of nothing. The easiest way to do this now If you come over to your index.HTML, right click if you're on a PC, if you're on a Mac, you can control click. And you'll notice the down here, you'll have this new these new buttons that are just came through from that open and browser thing that we installed.

[00:01:14]
It'll say, open in default browser or open in other browsers. Your default browser is the one that when you just click on a link somewhere on your computer, that's the browser that opens. So by default on a Mac that's Safari, by default on a PC that's Edge or Internet Explorer, depending on how old your machine is.

[00:01:33]
[COUGH] You can also choose open another browsers that will let you pick some other browser. My computer is configured to have Firefox as my default browser. So I'm just gonna go ahead and say open and default browser. And this is going to go ahead and open up Firefox for me and I see a whole lot of nothing if you got nothing, you did great.

[00:01:55]
Good job. All right, so, now that you have your file created ,now that you have saved it, make sure you have saved it. The next thing you do is a little bit weird. You're gonna type an exclamation point. A single exclamation point and hit Tab. And a whole bunch of stuff is magically going to appear

[00:02:19]
>> Jen Kramer: Did it happen?
>> Jen Kramer: Cool, go on ahead and save that and you can go ahead and look at that in your web page and you'll probably see still a whole lot of nothing.
>> Jen Kramer: That's a lot of code for nothing isn't it?
>> Speaker 2: The title is changed on the tab.

[00:02:38]
>> Jen Kramer: But if you notice the up there on the tab, yeah, the title has changed. It's now called document. The very exciting document, okay? So let's take a look at what this code is that does a whole lot of nothing. One of the things you might notice about your code is that it scrolls off the side of the page right here a little bit.

[00:02:57]
Or you may not have even noticed, it kind of looks like maybe it's fine. If yours is like mine, if you go to the view tap. Oops, make sure you are in. VsCode, go to the View tab and look for the item called Toggle Word Wrap. Toggle Word Wrap.

[00:03:16]
And that'll wrap things onto another line so you can see everything. So let's look at this line by line and figure out what we're doing here. So line one. Okay, notice that we have the numbers that go down the side. These are our line numbers, so we can talk about code.

[00:03:30]
So in line one, we have this thing here that says, doc type HTML. Does anyone know what that means? Anyone want to take a wild guess what that means? Yeah, Dave.
>> Dave: It means that the browser should think of it as HTML5.
>> Jen Kramer: Dave's been doing some research.

[00:03:46]
Yes, this is the line of code that says, we are writing HTML5. It says Hello, I'm an HTML5 document. That's all that line of code says, all right? HTML5, that implies that there are other levels of HTML right? There is in fact, in HTML 4 and HTML 3.2 and HTML 2 and HTML 1.

[00:04:04]
HTML has been around now for almost 30 years, okay. And so we are up to level five. That's what that says. Anyone want to guess what line two says? Yes?
>> Speaker 4: I'm guessing it's saying that we're writing in the English language.
>> Jen Kramer: We are definitely writing in the English language, that is part of it.

[00:04:22]
And what else? Anything else?
>> Speaker 5: Displaying in the English language too?
>> Jen Kramer: The content should probably be in English according to this. Yes?
>> Speaker 6: Does it set the default?
>> Jen Kramer: It's setting up the default and it's establishing our HTML document. So line two starts our HTML document. Where does this document end?

[00:04:46]
Anyone wanna guess, yeah?
>> Speaker 7: Line 12.
>> Jen Kramer: Line 12. Right down here. So you see how our HTML tags start with an open tag just like this. See down there at the bottom, they end with a / and the name of that tag, see how that goes? Okay, and so then these are just nested together.

[00:05:08]
We're gonna work in and work out these are like those Russian wooden nesting dolls, okay? HTML is just like that, we have different levels of tags. These things are called tags, okay? So that's the HTML tag and they are nested at various levels along the way. Now, for those of you who are online, everybody here in class, we're in Minnesota, we're in America, we speak English, our VSCode is configured to load in English.

[00:05:35]
If you have a VSCode version that's loading other languages, you may have a different character setup there for Lang. So our says EN for English, yours may say FR for French or DE for German or ES for Spanish. So that language up there is referring to the content of the document.

[00:05:55]
And very interestingly, you might've noticed before in, anybody ever looked at a page in another language other than whatever one you have specified up there? Anyone ever done that before? You ever see, maybe in Chrome, that bar across the top that says, this page is in whatever, this page is in German, would you like to translate it?

[00:06:14]
You've seen that before? That little bit of code is what drives that. So Chrome knows that you are an English speaker in the case of this classroom. It knows that that page is in German because somebody coded it and it says the Lang is DE, right? And so then it puts up the little Google Translate button for you.

[00:06:32]
How cool is that? So sweet. All right, so then we're gonna go on. Now there's two parts to our HTML document. Once we actually declare that we have one. There's the head and the body. Anyone know where the head starts? Line number?
>> Speaker 8: Line 3.
>> Speaker 2: Line 3.

[00:06:50]
>> Jen Kramer: Where does the head end?
>> Speaker 9: 8.
>> Speaker 6: Line number 8.
>> Jen Kramer: Very good, inside of the head. We have a bunch of things that are going on here. The very first line here at line 4 indicates the character set that we happen to be using. Character sets are way too complicated to talk about.

[00:07:10]
But you can kind of relate right, if you were writing in a language like Farsi or Chinese or something like that. You would have different characters on your keyboard, right?. We're using UTF-8, which works for English. The second line there, line 5, this is an indication that we're writing responsive design.

[00:07:28]
It's actually not required for what we're gonna be doing. But that's the line that says, this is a responsive design document. More on that later, maybe the weekend. And then the next one here. Actually I am not sure what this line does. Anybody know what this line does?

[00:07:46]
You guys in the back the IE Edge.
>> Speaker 2: It's just saying to us the latest rendering engine.
>> Jen Kramer: Okay, [CROSSTALK].
>> Speaker 2: And there are certain browser this will go away.
>> Jen Kramer: Yeah.
>> Speaker 2: But like IE8 or whatever it was like it would render in the old rendering engine unless you put this tag here and then it would render in the new one.

[00:08:07]
>> Jen Kramer: Okay, and then the last one, there is line 7. This is the title of our HTML document. Okay, and we saw where that displays already right here in our web browser that displays up there in the upper left corner. See, there was a document. Go on ahead and change that.

[00:08:23]
The way we change that is we're gonna add it right in between the tags here where it says document. I want you to change it to my first web page.
>> Jen Kramer: And then go on ahead and save it.
>> Jen Kramer: And refresh your web page.
>> Jen Kramer: Okay, any questions on that so far?

[00:08:48]
That's the head. So notice that none of the things that I said about the head of the document have anything to do with showing up on the web page itself, except for line 7, the title. And that only shows up in that tab part of the browser. Everything else is sort of like background about programming.

[00:09:06]
And that is why in VSCode, all we had to do is type an exclamation point and hit Tab because no one remembers how to write all this code. Nobody, if you put me in a room and ask me a quiz and said, write all that stuff at the top of the page I would fail miserably cuz I never remember where all that stuff is.

[00:09:25]
So nobody ever wants to remember how to write it. It's the same for every document you ever write. So exclamation point, tab. But remember that your document needs to be saved first. So if you're struggling with that right now, you're trying the exclamation point, you're trying the tab and nothing is working You didn't save this as an HTML document first.

[00:09:44]
You must save this as index.html, so that VSCode knows this is an HTML document. Otherwise, it won't work, make sense? Okay, good, now that we got the head out, yes, Muhammad?
>> Muhammad: So different websites, have different structures and they display different content, does that mean that the same like beginning as this?

[00:10:11]
>> Jen Kramer: All webpages will start with something like this. The heads could be much bigger, there are other things that will wind up and like tomorrow we'll add CSS to the head of this document. Sometimes there's JavaScript up there, these things that start with meta, they're called metatags. Sometimes there's other metatags.

[00:10:29]
So we can make our head really really long but this is fundamentally what you're gonna need to write a website. Great question.