Before we dive into JavaScript in too much detail, we want to take a few minutes to introduce HTML and CSS in really basic fashion. Now, if you are already comfortable with HTML and CSS, you can skip this particular video. But if you don't have much experience with either of these, then you might want to stick around. In no way in a single video, can we cover all the details of HTML and CSS, but it is important for you to understand some basics, because you will be working with HTML and CSS a bit as you learn JavaScript, since that is the environment in which we will be teaching JavaScript. Now simply put HTML is simply determines the structure of a page which you see in the browser. How That content is structured, so that it can be shown to you, where CSS determines how that content should look.

Now HTML has some default characteristics that determine how things look. But CSS can really override those and do so much more than what happens by default with HTML. Now, quick few concepts and then we'll look at a sample HTML page. In fact, we'll look at the page that is causing this to display on the screen which you were seeing now. Now, as mentioned, HTML determines structure. Now the way it determines structure is you enclose content in what we call tags, a tag is structured like this.

The name of the tag is in between the less than and greater than symbols in online Almost every instance, HTML tags have a closing tag. So everything in between will be structured according to the tag name. For example, you can have an h1 tag, which is a header. You can have a p tag, which is a paragraph, you can have an article tag which designates that content to be an article, you can have an img tag which says there should be an image. So it defines the structure. Now, as mentioned, HTML also includes some default formatting.

When the browser sees an h1 tag, for example, it does certain things with it, it makes it larger it, it bolds it. Those things are done by default. Well, CSS expands on the formatting and really controls the look of the page where things are, the color, the size, the font, so many things like that are controlled by CSS. Now, let's take a quick look. Look at this page. Here is the HTML.

HTML is hierarchical meaning. Tags can contain child tags and so on. For example, the body tag is what is used to define the structure of the body of the page. Here's the closing body tags. So everything in between helps lay out that page. We have a header, we have a footer.

We also have a div tag in the middle, which displays the content. Now there is an h1 in there, HTML CSS primer. Here's the h1 displaying right here. And then we have some bullet items. Those bullet items are accomplished using a ul tag and then Li tags in between for each for each bulleted item. So that's the basic structure You can see there's more to tags than simply the name of the tag name.

There are also attributes that can go with those tags. describing all that would require us to get into a lot more detail with HTML, which we won't in this course, since we're concentrating on JavaScript. Now, this HTML page also has a style sheet attached to it using this tag right here. The style sheet is the CSS. So if I opened up the CSS, we can see that it's helping to style certain elements on the page. The footer, the image that appears in the footer, it says it should be a width of 300 pixels.

Here's that image down here. Content is the main part of the page. And there's an h1 tag in that content. So we're defining that we're adding some padding or making it aligned to the center the font size of 48. The color, we define a color here. And we also define what type of font it should have the bullets.

This helps define what the individual bulleted items should look like, once again, another font size, a font, if there's a margin, and some padding, so some basic formatting, which we've added to make this page look like it does. So HTML determines the structure. css determines the look. Alright, let's move on to JavaScript topics.