Welcome back.
Let's build our first website.
Now I've already created a folder called Web Server because this is going to be our web server for now.
And inside of this web server we have an index HTML file, which will be the extension for creating
an HTML file.
We have script JS, which is the extension for writing JavaScript just like we have py for writing Python
and then we have style CSS for writing CSS styles.
Now in this section I'm going to be using sublime text and my AI term terminal, but you can use whatever
developer tool that you want.
I like using these ones just for the screen recordings.
They help because well, it's nice and clean.
It doesn't give me too many hints so that I can also make errors and show you along as I make errors
how I fix them.
But again, you can use Visual Studio code, whatever you prefer.
Now you see over here that all these files are empty.
But remember, a web server simply gives these three files to a browser so that the browser can display
the page.
So let's start off with HTML.
How do we write HTML?
Well, Sublime text actually lets me do something interesting here if I type in HTML and then hit tab.
It auto fills it for me.
All right, all right.
I kind of cheat it, but, hey, I don't want to bore you to death.
So this is a standard HTML file because I have the dot html extension.
If I have this type of syntax, I can write HTML and it's not that difficult.
We have opening tags and closing tags with a backslash here.
So we have the head of the website with a title.
So this is what appears on the tab.
So let's say my.
Website.
Very creative.
So that's the head and then the body.
This is what gets displayed on a website.
So in here I can say I am a web master.
Just like that.
And we've created our HTML file.
Now check this out.
If I now open index.html, if I right click here and let's say open in your window or you can even just
go and double click this file.
So if I double click this, look at that.
I am a webmaster.
Just simple text.
Nothing too crazy.
But I've just created my first website.
Let's continue with CSIS.
CSS has a different syntax than html css syntax.
Go something like this.
We can give it what html element we want to add some styling to.
In our case, let's say body.
And I can say body.
Then curly brackets.
And in here I want to have background, let's say color and we'll go with.
Hmm.
Let's go with Green.
If I save this.
And I refresh the page.
Hmm.
Nothing happened.
And this is a little small detail that, again, this isn't a web development course, so we don't need
to worry too much about.
But essentially the very first thing that happens is that the HTML file gets sent and the HTML file
is actually the only thing that gets read by the browser.
So within the HTML file, I have to say, hey, HTML.
By the way, we also have a CSS file.
Can you also use that in the website?
So we can do that in the head tag?
By using something called a link tag.
So a link tag.
We can actually remove some of this.
We simply have to say, hey, it's a type of text CSS and it has something called H ref.
H ref simply says, Hey, where is this file located?
In our case, because it's in the same folder as our indexed HTML, we can simply say it's style dot
CSS because well, just look for Solidot CSS and that's where the style file is.
And now, if you remember, we also had the relationship stylesheet that we need to include.
I just removed it so that we can see what we're writing over here.
So if we do style sheet and this is just something, a syntax that you have to get used to if you want
to include a CSS file.
If I save this and go back and refresh.
Hey, look at that.
My ugly website.
Let's make it a little bit bigger.
My ugly website with a green background color now has some style.
If I open up the developer tools once again.
And I hit refresh.
Look at that.
I get an HTML file and a CSS file.
Awesome.
So I just created my own web server.
Right.
We could even write JavaScript here.
But again, this isn't a JavaScript course, so we don't need to worry about it in this case.
Here you go.
I just wrote some JavaScript, which this is kind of like writing print in Python.
If I refresh the page one more time.
Again, JavaScript file doesn't get displayed because well, we have to again tell index HTML that we
need a JavaScript file and usually JavaScript files are contained in a script tag, usually at the bottom
of the body.
So let's close that.
And then in here, instead of using the ref, we just have to say CRC for source.
And then once again, where's the JavaScript file?
It's at script JS So if I save this and I refresh the page.
Look at that.
We're now loading the script, JJ's file and all it's doing is if we click on the console tab is there
you go it printed something in the console and console is something that JavaScript uses.
But all we care about is that we're able to serve these three files.
What we've done is created our very first server.
But you may have noticed something.
When you went up over here.
Look at the URL path that we have.
That's not what you usually type into a website, right?
I mean we saw that the website over here xkcd dot com well has the dot com uses http.
That's a real URL, right.
Well, I'm sorry to tell you that we didn't actually create a real web server because all we've done
is we've served to the browser some files from, as you can see, from our computer.
So all it's doing is the browser saying, hey, I'm going to display these files that are located right
here on your computer.
So essentially we have a web server that's also running a browser, but that's not how real life works.
Why would that be?
Well, imagine if you had your own website.
Do you really want to have people from all over the world access your website directly through your
computer, grabbing the files from your computer?
I mean, no.
Right.
There's a lot of security issues.
There's a lot of issues with performance.
You have to keep your laptop on the entire time so people can access your website.
Instead, we want a web server which, as the name suggests, serves files and specializes in serving
files to browsers.
Somewhere in the world that I don't have to worry about.
It's not on my computer.
Somebody owns that machine, somebody owns that computer, and it's on all the time so that whenever
we go to a website or a link, it's always going to be running and sending those files out.
So we're finally going to get back to Python here because what we want to do is do something more sophisticated
than just having these files on our machine.
Instead, we want to build a real server using Python that we can deploy so that people can access our
website anywhere in the world.
Now you might still be confused.
This whole process might not make complete sense to you because we're just getting started.
But don't worry, by the end of it all, it's all going to make sense.
So let's forget about the browser for now and get into building a real server, something more sophisticated
than what we've done up until now, which is just a folder with these three files and we just double
click on index.html.
I'll see you in the next video.
Bye bye.