Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

So if you are watching this video and you want more information, please go to Eli, the computer guy dot com.

Welcome back.

As you know, I am Eli the computer guy, and in today's class, we're going to go over the basic syntax structure of HTML.

So html hypertext markup language is the basic language that you're going to be using in order to be able to build your websites.

The nice thing about HTML is that it's very relaxed in a lot of conventions, so it doesn't care about things like capitalization or white space.

But it does care about tags within an HTML document.

Everything has to be enclosed within tags.

And so today I'm going be showing you how that tag system works and why it's important.

So there's a bit of a warning warning for the class today, especially when you go to do further research to learn more about the syntax of how to design things in HTML, there've been two major versions of HTML over the past 20 years.

There was HTML four, and there's now HTML five.

What I'm going to be showing you today is very much in the old HTML for mold, and the reason is is because I feel that this is an easier way to teach HTML two new students.

The thing is with HTML five, some of the things that will be showing you today have been deprecate ID, but but but modern Web browsers are fully understand html four.

And so what I'm showing you today will work on any modern or old Web browser.

But it is important, understand, when you go out there and you start doing some further research toe, learn about HTML.

Syntax is you will see notations talking about the differences between HTML four and HTML five.

It is important, understand, there are two different versions of HTML, but this isn't like python.

This isn't unlike other programming languages, where when a new version came out, the old way was completely deprecate ID.

We're in this weird thing with HTML, where you can code in a cm afore you can code in html five and more or less browsers will understand what is going on.

So what?

I'm going to be showing you today like gonna be showing you things like the head tag.

So in html five, you don't necessarily need to use the head tag.

But I think this is an easy way of explaining to you how an HTML page is broken broken out on.

Then in the future, you can decide, You know, basically, which way you want a coat.

So that is just a bit of a warning.

What I will be showing you today is very much in the HTML for vain, but it's going to work for most of the things that you're going to need it for.

So really, the best way to start understanding html really is to dive right in again.

This is a very, very, very simple markup language.

What I'm gonna be showing you today is the basic layout of an HTML page.

I'm going to show you the head, the body and how do you close everything in HTML tags?

I'm then going to show you how tags works.

Basically, how to open a tag and how to close a tag.

And then I'm going to be showing you some certain things, such as the fact that capitalization does not matter came out.

So this is very important when you're dealing with HTML a lot of times again.

When you're when you're reading references, you'll you'll see things that are capitalized to see things that are lower case.

It is important to understand.

In the HTML, world capitalization doesn't matter.

This is kind of one of things that screws up old timers like me because back in the day are back in the day when I learned HTML.

Whenever you're creating tags, you capitalize those tags and easy way of understanding where the tags were as you capitalized all the letters and a tag, and so you could very easily be able to see that on a pig.

Now, in the modern world of the young, kids out there have decided they don't like capitalization on.

So now tags are all in lower case.

A CZ faras Web browsers are concerned.

Web browsers honestly don't care about this.

It's all just depends on what you decide to type out.

So this is kind of one of those things again.

It's a star.

It's your your decision.

What the style is, what whether you do capitalization, whether your lower case, the main thing is, is just stick with whatever you decide to do so that it's the same within an HTML page.

Ah, the other thing that's very important is that white space does not matter.

In the HTML world Onley tags do so basically, when the Web browser is reading your HTML document.

Basically, it's formatting everything based off of these tags.

Eso if you start putting things on different lines, but you don't have tags to show, these things should be on different lines.

The Web browser would just put everything onto a single line because again, it's looking for the tags.

All all the formatting with an HTML document is all based off of tags.

If you don't put a tag in, it will not be recognized by a Web browser, and the Web browser will simply reformat everything based off of how the tags are so that let's go over the computer and I can show you how basic HTML document works.

So here we are, on my lab computer again, I use a Mac book for my lab computer.

But in order to write out this HTML document, all you need is a basic asking editor.

Eso again in the Mac world, I'm using text at it.

If you're using Windows, you can simply use note pad.

If you're using Lennox, you can use G editor them or something like that.

The important thing is whenever you save the HTML document that you always use the extension of either dot HTM or dot html so that the computer knows how to open it.

So with this, basically, I have typed out this basic little Web page here.

I have saved it to my desktop here and says it has that dot html extension.

When I double click, it opens up, and now we can see what this particular Web page looks like again.

It's not very sophisticated, but it is a weapon, so just simply says, Hello, world.

This is a test Web page.

We can expand this up here.

We can see that the title.

The title of this page is test Web page eso All of this has been encoded with with HTML.

I can also show you that If I d'oh open with an open this with Google Chrome, we can see that basically, here again, we get that test Web page we get.

Hello World.

This is a test Web page, and so again, this is the important thing with HTML.

The fact that you can open up an HTML document in any Web browser and it will be able to interpret it.

That's what makes HTML so powerful, especially from people coming from my generation.

Now the first thing on here that I want to show you is this this doc type.

So this used to be a lot more important again.

One of the things have to be thinking about when you start dealing with HTML is that HTML again was created back in the nineties, really deployed back in the nineties and back in the nineties.

It was a massive mess.

There wasn't the standardization the way that we have now again, the concept the concept of HTML was, Hey, this is a way that we can co two documents, and then all of these different Web browsers will be able to read the same document.

And of course, when the major corporations came in jail hell type.

Try to make an open standard.

Proprietary.

You've probably heard this before with other technologies, and basically they failed.

They failed, but it took him a decade to fail.

You know, again, with all these major corporations, it's been a lot of time, money and energy toe to fail sometimes and eso during the process of failing, you had a lot of issues with HTML again, certain certain Web browsers would would be able to use specific tags.

So if you wanted to do something that Netscape Navigator would understand, you would have to use different tags than if you then if people are going to your website using Internet Explorer and that type of thing, they're also different markup languages like ex HTML, that type of deal that have kind of fallen by the wayside.

So what this up here, this doc type, I honestly, I never put this into my HTML documents.

The only reason that I'm showing you this here is I realized, as a good teacher, two new students.

I should show you that this exists.

This is not something that I personally ever put into my html pages because again, at this point, we're dealing with modern browsers.

They understand how to deal with the HTML, let him giving them.

But you should realize that putting a doc type here might be important.

Yet if you're working in an enterprise environment, if you're going to be selling stuff to the public, if you're gonna be taking a test in school, make sure put a doc type.

So what?

This what this does here is this Doc type says what you're going to be seeing now is an a T M L file.

So basically, what this is telling to the Web browser is everything that follows is HTML.

It's kind of like no crap, Sherlock.

But again, that's how the standards are.

If we go over to W three schools S O W.

Three schools talks a little bit about the HTML doc type declaration and it explains a little bit more.

It shows again for HTML five again.

If you're going to do this, all you do is you put the doc type html.

But if you look back into the old days, you can see that there were these different doc types that you would have to put in in order to tell the Web browser how to interpret what it was saying again, This is kind of one of those things from the old days.

You may see this currently just because of legacy things.

Personally, I don't generally worry about the dock type and again for the Web page to work in a modern browser.

You don't normally need to put it there.

But again, if you get tested, if you have to take a test, you wanna put this doc type than HTML at the top, then what we're going to do is we're gonna come down and we're actually going to open up the HTML Web page.

So basically what we're doing is we're creating this tag.

Here's there's HTML and we close the HTML page at the end, So we open html and then we do this float forward, slash close html.

So this basically says everything between here, these two is going to be in a team.

Alice is in HTML website.

The next thing that we dio is, then we're going to create the head tags.

We're going to create the head, a component of this of this web page and what happens in the head is basically you can put an information that relates to the entire Web page.

So you know how I showed you that title before test web page.

So if we go back here, we can see and see up here where it says test Web page.

Well, that title, we actually put that in the head so you can put the title in the head.

You can put metadata in the head.

You can put script, locations, CSS information.

That's basically formatting information basically within.

And the head is where you put everything that relates to the entire web page.

So this will This will not be printed out.

Like normally on the web page itself.

Obviously, it's not printed here again.

This is just information that pertains to the whole Web, eh?

So we open the head and then we close the head.

Then what we're going to do is we're going to go to the body.

And so the body is where you put everything that's going to be written on the web page itself.

And so we go.

When we take a look at the body, we can see that I used a couple of different tags here.

So I used the 8th 1 tag S o the H one.

And again we'll talk about these tags in a future class talking about the formatting no more.

But H one is called the heading one tag s So what this says is create heading at the top layer eso heading one is like the biggest, largest type of tag on a page so we can go here and let's see if I do it eight to and I say this is on a to tag And then I closed the age too, right?

I could do file, I can do save.

And if I go here, I can refresh.

And so you say This is an eight to tag and so it's a bit smaller than what that h one tag is.

And again, this is a way to do basic formatting on Web page so you can have an h one tagging it to tag in its three tag for tag.

It goes all the way down like six or something.

But basically these air just like heading tags So you would use this you might use h one is a title for the page and then an eight to is a title for a chapter.

And a three is a title for a section, Something like that.

So what we see here is ah, you know, we're going to be typing out hello, world.

And so whatever we're gonna be typing out is in between two tags, right?

Uh, so we opened the H one tag here.

Then we print out whatever you want to print out, and then we close the H one tax.

What?

This is telling the Web browser is basically print print this text using a certain format, and then the tag is over.

Then we come down here, we open the age to tag, and then it says, print this and we're gonna close the age to tag.

And then there's the P tag.

Soapy basically stands for, like, this paragraph font.

And so, p you know, this is a test web page, and then we close the p tag.

So that's what we have here.

Right?

Then all you're gonna do is you're gonna go down and your clothes, the body, close the body tag, and then obviously you're going to close the HTML tag Um And then this is the Web page that you get now.

I want to show you a couple of things with this.

The first thing is that white space and suck does not matter and formatting right.

So I just you know, I just put in a couple of enters.