Voiceover: In this video, we'll create a new project
in Brackets and talk about
the common structure of any HTML document.
Let's start by creating an empty folder
where we will put our first HTML file.
I'll create this folder right here on my desktop.
But you can create your working folder wherever you like.
We'll call this one "blog post,"
because as I showed you before, we will start
by building a simple blog post web page.
I'll leave it empty and just leave it here.
And now let's finally open up Brackets, just our coding.
Now by clicking on this button here,
we can open the folder we just created.
So it's this blog post folder right here.
Brackets now uses this folder as our project folder.
So all files contained in this folder
will be part of our project.
Now we are able to create an empty file.
And for that, just hit the File menu and then New.
And that's it.
Very simple.
Now let's save it, and give it a name.
File, Save.
And we're going to call it index.html.
So that the computer recognizes it as an HTML document.
Index.html is a standard name for
the main HTML file of any project.
So as I mentioned before, HTML documents
are described by elements.
Now all HTML documents have a common structure
where the HTML element is the first one, always.
So we'll start with this one, HTML, and close it.
And now, you see Brackets helps us here
and closes the tag automatically for us.
Pretty useful.
Now inside the HTML element,
there are always two key elements in every structure.
It's the head and the body.
These are the main components of any web page.
So let's just put them into the HTML element.
So head, and Brackets also helps us with this.
It automatically recognized what we want to write.
So now I just hit Return and close the tag.
And like magic, the other closing tag appears.
So the head and the same thing for the body tag.
And save it.
You can also hit Command S or Control S
in a Windows machine.
The head element can include a title for your web site.
CSS styles, some information for the browser
or for search engines and more.
We'll work on all of that later.
The body element is where all the visible stuff
of your web page goes, like all the content
such as text, links, images, lists, and many more elements.
So just a very basic structure of an HTML document,
but actually, there is one thing missing here,
and that's the so-called doctype.
The doctype declaration must be the very first thing
in your HTML document, even before the HTML tag.
So let's just put it here.
It goes like this.
Doctype...
Sorry.
Doctype then HTML.
This is technically not an HTML element,
but an instruction to the browser about what version
of HTML the page is written in.
So with this declaration, I just told the browser
that this file will be an HTML5.
And save our document again.
And speaking of saving,
let's install our very first Brackets extension.
I will just hit this button here like I showed you before.
And here clicking on the Available tag
and we'll write "Autosave."
This little extension takes care of saving
all our files whenever we leave
the Brackets up, which is very useful.
So I already have it installed
but you can just click here on this install button.
Now we know how to create
the basic structure of an HTML element.
In the next video, we finally start to code
some visible stuff for our first web page.