Instructor: In case that you have no idea
what HTML and CSS are, you're in the right place
because in this lecture I am going to very quickly go over
the most important parts of HTML and CSS,
just by looking at the project
that we will be working on in this section,
so if you're already familiar with HTML and CSS,
then please feel free to mark this lecture as completed
and then move on straight to the next one.
This is the starter code of the project
that we will be working on in this section,
and this here is an HTML document.
All right, so an HTML document is what always holds
the content of our web pages.
In HTML we have elements which are composed of
ending tags, content, and closing tags,
in most of the cases.
We then write these elements into one another
and like this create a nested structure,
and there are different elements for different things,
such as links, paragraphs, images, sections, et cetera.
For example, the div tag here has this opening tag,
this closing tag, and this content here in between,
and in this case the content itself are
even more HTML elements, but eventually
some of these elements have some plain text content here.
For example, here, or here, or here.
Okay, so HTML elements can also have attributes,
which are these, so this is the class attribute,
the id attribute, or for example,
the source or alt attributes,
and there are a lot of different attributes.
Now, probably the most used one is actually
the class attribute, which is this one here,
and it allows us to give a certain element a name,
and ids, which have for example here,
also allow us to give elements a name,
but the difference is that an id has to be unique,
but a class name can be used over and over again
throughout the pages.
For example, we have player-name here,
and then down here again, but we have, for example,
the id name-0 only here
because down here it's called name-1.
All right, so these are elements and attributes.
Now about the structure of an HTML document.
It is always divided into two parts,
which are the header and the body,
so the body is what we just looked at,
and it contains the visible content of a web page,
and so it's basically everything that's here
enclosed into these body tags.
So that's it for the body.
Now the header is what contains additional information
about a web page, such as the title here
or even some page keywords,
and we can also do other things here.
For example, in here we import into our code
a custom font from Google fonts and also an icon font
which will give us some nice icons that we can use
to make our interface look nicer.
And in here in the next line, but also still in the head
of the HTML document, we connect our HTML file
to a CSS style sheet, which brings me to CSS.
So let us open our external CSS file,
which is this one here.
Okay, so if HTML is the content of the web page,
then CSS is the presentation, and here in the CSS
we simply write rules to style our web page.
So we have all these rules here,
so here and here and all the way,
so all this file is filled with CSS rules,
and the way we connect the HTML with the CSS is
by using, usually, class names.
We can also use ids or other selectors,
but the most common one is the class selector,
so this is the class name that we specify in the HTML.
Let's go look at that, so player-name,
and that is right here, so the rule that we just saw
here in the CSS styles all the elements
which have the class of player-name,
and this here is the class selector,
in if we go up here, we see another selector,
which, for example, we have this one here,
and this is simply, this is called a type selector
because it selects all the elements with a type of body,
so it simply selects the body of our web page.
And we also have the universal selector,
which simply selects all of the elements on the web page
and applies these styles to all of them.
Okay, so I think that is actually all I had to tell you.
I hope that you got a small idea about HTML and CSS now.
This should absolutely be enough to allow you
to follow the next lectures
where we are going to need some of these concepts.
If you want a full deep-dive training into HTML and CSS,
then of course you can try out my other course
which is called "Build Responsive Real-World Web Sites
with HTML 5 and CSS 3".