Hello and welcome back to a very exciting section.
Why is it exciting?
Well, we finally get to code and we're going to start off by learning HTML and then finally building
our very first website.
In order for us to get started, we need to set up our environment and we do that by let's open up Google
Chrome and we're going to search for sublime text three.
This is a text editor that a lot of developers use, I myself have used it for years, absolutely love
it.
In your day to day job, you use something like this.
I highly recommend sublime text.
If you have a Mac, the version over here, if you have a PC running Windows, you'll have the download
link for Windows.
So for me, I'm going to download for the Mac.
And you can see here it's downloaded and I can drag it to my applications folder if I want and we can
double click.
And if this is your first time downloading Sublime text, you'll get something like this to give you
permission to load.
And there you go.
We have sublime text now.
What is a text editor?
A text editor is a program that allows us to write code.
You can see over here on the right hand side of sublime text that it just says plain text so I can type
anything that I want.
And there's nothing much different than if you wrote this in a word or a text file.
But the power with a text editor, especially with something like Sublime that's geared towards coding,
if you click on plain text here, you'll have a whole bunch of options of what type of code you're writing.
So in our case, we're doing HTML.
So if I click on HTML, nothing changes except for the bottom part over here.
But now if I type something, well, everything looks the same.
But if I start typing ASML.
They'll actually recognize it and help with syntax, so here now if I write HTML.
Look at that, get a nice little color completion.
So for us for now, we're going to be writing e-mail, you can see over here that there's different
options.
There's where is it?
There's access JavaScript.
We'll we'll learn later.
So we're going to be using sublime text for this.
For now, click on e-mail and let's write our very first Web page.
In order for us to have a Web page, we write a HTML, which stands for hypertext markup language.
So bear with me here.
This is going to be new.
But keep in mind that this is exactly what every single e-mail page has.
These are the set of rules that all HTML files must follow.
And it goes like this.
We define a DOCTYPE and don't worry, I'll get into what that means in the next video.
Then we have HTML and we close these tags, HTML, the second part, we have a head and a closing head.
You can see over here some patterns forming.
Don't worry, I'll get back to these tags and explaining what they do in a bit.
And then we also have body.
And then closing tax and finally here in the head.
We have something called a title tag.
OK?
So this over here is the rule that every single extremophile must follow.
Just looking at this right now without knowing any more, you can get an idea of what everything means.
So, ASML, we're defining that this is an e-mail.
We're saying that this is the head of the mall with the title and we're saying that this is the body
of the mall.
So let's try something here.
Let's save this file.
And we're going to save it.
Let's do desktop.
And we're going to call it index dot.
You can see that it's already completed the HTML syntax for us safe and we have an index file here.
Let's drag this all the way down to our Google Chrome and open it up and well, nothing happens, but
let's add a bit of text to it.
So the title I'm going to say my first website, exclamation mark, and then in the body, I'm just
going to put.
Hello there.
OK, so if I say this.
And just to show you, from now on, I'm going to be doing commands to save just a little bit faster
and now if I refresh this page.
I have hello there, and you can see the power over here of what we just did.
We have hello there as the text, which is.
In the body, and then we also have my first website as the title, and you can see over here in the
file that we're referencing and Eckstut ASML on my desktop.
So we can see here that we have a TML, we have the head, which we haven't really talked about yet,
but we see that the titles in the head kind of like a header, and then we have the body, which by
looking at this, we can assume that it's whatever shows up onto the Web page before we expand on this
and make it a little bit prettier, because now it's just a simple text.
I want to reiterate the fact that what we've just done is very similar to what a server does.
If we go back to our mockups here, you remember that when we enter Google dot com the servers, send
us an e-mail file back when we move the index indexed HTML file all the way down to Google Chrome.
That's what we just did.
We mimicked a server and we gave it to the browser to load up the file.
And because browsers are built to know what ASML files are, it can read the syntax and say, OK, this
is the HTML.
OK, you want my title to be my first website and you want my body to say hello there.
That's perfect.
These are the default e-mail rules that you'll see all the time.
It is a little bit confusing at first, but this is it.
You just have to remember that there is a tag.
So an e-mail tag, a hash tag, a title tag, a body tag.
And these tags usually have an opening and closing.
There's some exception to this rule and we'll get into that a little bit later on in the videos.
But just remember this for now.
So I want you to try creating your very first website and seeing how it works.
And once you're done with that, I want to show you that sublime text actually has a nice shortcut so
you don't have to keep writing those tags over and over it.
So the way you do that is you type in e-mail and then press the tag.
And it loads all this up for you.
OK, so now that we've done this, I want you to go off and create your very first website.
I know it's very, very simple.
You can put whatever you want in the title and you can put whatever you want in the body.
And in the next video, we're going to start expanding on our first website.
I'll see you in the next one.
Bye bye.