So let's get started
and let's create our first website.
And as you learned in the last lecture,
that means that we basically now create our first HTML page
because that in the end then is our website.
It's the instructions for the browser,
which the browser executes.
Later, we might add more HTML pages
because websites can be made up
of more than one HTML page.
But to get started, we're going to create one.
Now here, I'm in an empty folder on macOS.
As I said, you can also follow along on Windows or Linux.
It does not matter.
You just need some empty folder anywhere on your system.
For example, on your desktop, create a new folder there,
give it any name you want.
And in that folder,
we now want to create a new text file.
Now I'm going to show it us for both macOS and Windows.
Well, let me start with macOS.
On macOS we can simply open up the text edit app,
which is pre-installed,
and there, I will create a new document.
Now, this document might start
in this rich text mode as it is for me,
which you can tell by these strange things at the top here,
simply click on format,
make plain text or use the short cut you see here.
We need a plain text document
with no rich formatting,
with no built in styling for the text.
We need plain text.
Then we can save this file,
and save it to this empty folder you created.
And then let's name it index.html,
replace the .txt extension with .html
Now, the name in front of the extension,
index here, is generally up to you,
and you can pick any name you want,
but index is kind of a convention in web development
for the main HTML document of your website.
So for your main entry point
for your starting page for example,
you choose index as a name.
And therefore we'll name this file index HTML.
Save this.
Then here confirmed this warning and use HTML.
And we now got this HTML document added to this folder.
Now on Windows, it's basically the same,
make sure you have some empty folder,
for example on your desktop.
And then simply create a new text document
by right clicking in there,
choose New, entering this new text file.
And here again,
make sure you name this text file index.html
Now, depending on your computer configuration,
this might not really change the file extension
because you might have file extensions disabled.
If that's the case,
make sure you enable them by clicking on the View menu
in the Windows Explorer and check the box
next to file name extensions.
And once you did that, you should see the file extension
of the text file you created.
And if it's not .html and just .html,
make sure you change it to .html
It should not be .txt
It should not be .html.txt,
nothing like that.
It should end with .html
so that you have an index.html file there as well.
Now, once you got that index HTML file,
you should open it in an editor.
So on macOS, I still have this text editor open,
if you don't have that,
right click on the file
and choose open with TextEdit.app
On Windows,
also make sure you open it with a text editor
by right clicking on it.
And then also open it with Notepad
so that you open this file for editing
with a raw text editor.
Now, once you did that, once you have that file open,
we can start writing some HTML code in there,
and I'm going to do this on macOS here,
but it's exactly the same code on Windows.
In that index HTML file,
we want to add smaller than sign, then h1,
then greater than sign.
And then Hello World!
and then smaller than, forward slash, h1, greater than.
This is our first piece of HTML code.
This strange syntax here, with the angle brackets,
that is HTML code.
To be precise, we call this thing here,
this h1 thing, a HTML tag.
The HTML language has a bunch of tags.
They are all standardized.
You can't come up with your own ones, of course,
because the browser needs to be able to understand them,
and they give different instructions to the browser.
The h1 tag, for example,
gives the browser the instruction that the content
between the tags,
between the so-called opening and closing tag,
that the content between those tags should be treated
as a main heading, so as a title. So to say.
Just as in a Word document,
you might have a main title on top of your document.
So once you edit this,
make sure you save the file with a shortcut,
or by going to File, Save.
And once it is saved,
you should be able to double-click it
to automatically open it in the browser.
If that does not work,
if it's not getting open in the browser automatically,
you can always Open With, and then select a browser there,
in my case, Google Chrome.
And this now gives me this page,
and I'm zooming in a bit here so that this is bigger.
So here we see Hello World!
And if we right click, enter the browser here,
we can view the page source.
So the source code the browser evaluated
for bringing this to the screen.
And here we see this HTML code, which we wrote.
And that's our first very basic website.
If we wanted to,
we could now take this HTML file,
upload it on some rented server,
and see it out there in the web.
Now we might not want to do that because the use
of this website is kind of limited, I would argue.
But still it's our first website,
and day of an important first step.
Now, if we quickly come back to this website,
as we loaded it,
it's interesting to take another look
at the browser address bar.
In the first course section,
you'll learn that there you enter the address of a website,
the domain or IP address, typically the domain.
Here, we have neither of the two things
instead in the end here I have the path to that file,
to that website file.
The reason for that is simply
that at the moment we have no server at all.
We're just opening this HTML file with the browser,
which the browser,
since it is a tool for displaying HTML code,
is able to do.
So that is something you can do locally on your machine.
You can open HTML files with a browser,
and it will display like a website,
treat it like a website.
But this page,
this HTML page at the moment is not being served
by some server.
That's why we have neither an IP address nor a domain here
in the browser address bar.
That's just something I wanted to point out.
Soon enough we will have a local development server,
but at the moment we don't have that yet.