<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Video Summary
In this video, I’m gonna go over the HTML Boilerplate and go over each individual sections. And then we’ll slowly build upon this. I understand that in a previous video and the slides I went through what the HTML the head is, but I wanted to show more of a visual aspect and kind of explain things a little bit deeper. So again, up here, the doctype says HTML, that’s basically just the single line of code that we have that just says, this is an HTML document. Now these things in green, if you look over here, if you have a pointing, you know, point pointing left arrow bracket and exclamation point and then to two dashes, and you have two dashes, and that right there, it basically just hides that line of code. So we’re gonna get into that a little bit, but that’s why these are green, and I’m gonna show you the like, why that’s kind of important as we go on.
Alright, so they, like I said before the HTML anything between here is what the website wrote will be on the website, or on the web page, more specifically. Now the head is basically the like the website’s header that’s not getting displayed to the user who’s, you know, viewing that webpage on a browser like Chrome, right? So the metadata is basically there’s just pieces of information that we want to give the browser or web server that we want to access these features with this web page. So if you look down here, and you see link, and it says our URL equals stylesheet. That means that this link is set up to connect to a CSS sheet now these years you can link to JavaScript pages, you can link to PHP pages, bunch of different coding languages all get tied in between the head right now here with the meta the name equals description, and then you have content. This is where we would put in information about what the web page is about. That’s where we can kind of get some good SEO content on there to give Google and other search engines an idea of what is happening with the site. The good news is we as WordPress developers, we don’t have to really worry about everything’s already connected for us. And we have plugins if we need to extend that functionality a little bit further. But just to go over what the head is. That is what we’re looking at. Now the body. The body is where we put in all these different HTML elements, like the headings, the paragraphs, the pictures, everything like that. So what we’re seeing down here as well as the script, this is where we would put in which where we would link to JavaScript pages. Where we have JavaScript, Chrome or JavaScript code that is manipulating and interacting with a web page. And the reason why I put that at the bottom is, is that we want to have all the web page elements there and then we want to have that code manipulate the elements of its already threat. Okay, so we’re not using JavaScript. So I’m going to go in and I’m going to delete this. Alright, so what I’m going to do now is I’m just going to put in a simple h1 tag, which is the heading one. And in the future videos, I’m going to go through each individual element that we need to worry about, and then explain each one but just for the time being, I want to show you what is happening with when we go through the whole boilerplate. So now I have an h1 tag as between the body right and as you can see, I have the arrow the h1, the actual text for that tag, and then the other right arrows then left arrow forward slash h1. So basically what we’re saying is everything in between here we want as a heading one. So I’m gonna type in is this is a heading one. Alright, so what I’m gonna do now is I’m gonna click Save or Ctrl or Command as, and what I’m gonna do is I’m gonna go over here, and I’m gonna find where I set up that where I set up where I saved the home html doc, right? What I’m going to do is I’m gonna open this up with Chrome.
Now, I’m going to save, come back over here, and I’m going to refresh. And now we have this as a heading one. But what we want to do is go back to Visual Studio code and make sure that even though we change this both to an h2 tag, we didn’t change the tax. So we want to make sure that this is a number two. So I’m gonna save this. I’m gonna go over to this page and refresh it. And now I have that there. So as you can see, we’re adding these elements and they’re kind of in there’s basically stacking on each other. So now let’s say if I want a paragraph, let’s just say I don’t want this H2 Heading.
Maybe I just want to explain what the headings about so now I’m going to type this out and what’s nice about Visual Studio code is is it once you figure out what your tag is, it puts the like the enclosing tag right with that, which is really nice when you’re actually having to build code from scratch. We’re not going to have to do that. But it is nice when you’re using Visual Studio code. So let’s just say this is a paragraph.
And just for time sake, let’s use let’s just put a bunch of these. Right and also to here, here’s a good thing to know too is that you can keep going in and you’d have the super long sentence. You don’t really have to do that. The way that these these tags are set up, is that basically we’re saying from the start of this tag to the end of this tag for P for paragraph is that everything in here will be viewed as a paragraph. So now we can actually like I would we just did as we entered everything down to a new line. So that way it’s easier to read but it will still read the same on the website, so don’t worry that if I entered right here, I’m going to have three lines, right? It depends on how big the webpages and how the intersection is. So let me show you. So now, we come over here we hit refresh. Now we just had this super long line of a paragraph. Now unless we designate a break in here, it will basically this paragraph or this like paragraph line will keep going until it hits the end of the the end of the page and then we’ll jump back to here. All right. So I’m going to get into more of the elements right now but I did want to start off by showing you that this is the this is the boilerplate. This is how we are this is how we build different elements to build a web page. But we’re going to hop over to code pen because it’s going to be a lot easier for you guys to follow along. And that’s where we can really just isolate each individual element and what it does and what we can do with it.