How to add structure to your website using Div Tags

Hi there, this video we're going to build a yellow box, and then a pink box, we'll try to, at least. We're going to learn to do it using something called a Div Tag. It's a division of space, and it gives us the kind of boxes that we get to put a website inside of. All right, let's jump in, and learn. 

To get started let's close down the other documents we've been working on. We're not going to use those again. I'm going to create a new one, just to kind of separate everything, and allow different bits of learning. So, 'File', 'New File'. Let's 'Save' it. Let's call this one 'divtags.html'. Don't forget the HTML. We're going to add all of that Head Tag goodness, by putting exclamation mark '!' Hitting 'Return'. Puts all that junk in. We make sure we update the title. 'Div Tags'. We put in the description, but not at the moment because it's kind of like a throw-away project, just to learn, what a Div Tag is. 

So, the Div Tag goes on the body because I want people to see it. And what do we want it to look like? In your Exercise Files, there's a folder called Wireframes, and this one here called HTML Div 1. I'm going to open that. For no reason, we just, I don't know, I drew it out on my notebook, so I figured I'd show it to you. This is what I do when I'm wireframing. 

So it's not a particularly good or exciting wireframe, right? We want a yellow box and we want a kind of a pinky box underneath. So first box, second box, that's what we're going to make. To add it, we add a tag called Div. I'm going to make some space in here in my Body. I'm going to 'Tab' across for no good reason, other than it looks nice. We're going to put in a Div Tag. 

So Div Tag starts with the angle bracket, Div, close angle bracket, '<Div>' And it's very clever, puts in our closing of that tag. And everything inside of this is going to be in my square. Let's preview what we've made so far, so let's save it. Go to Google Chrome, let's go 'File', let's go to 'Open'. Where is this? 'New', 'Open File', that's what I want. There's my new Div Tag, click 'Open', and, I've got a title but there's nothing appearing on the page. So a Div Tag without any CSS is invisible. It's there, but we haven't styled it. 

So what we need to do is tell it to do some stuff, like the yellow, and give it a size. So we do that with our CSS, we do it in the Head Tag. Remember, before the head closes, I'm going to type in, do you remember what goes up the top here? You remember, Style. And close it off. Put a 'Return' in. I'm going to put all my Styles in here. I'm going to 'Tab' in, just because it looks nice. I'm just using my Tab key. And what we'll do? 

So we need to style for the Div. Remember we had H1 before, so we're going to style this Div. And what goes next? Curly braces, '{ }', perfect. Then let's style it, let's give it a color. Now when you're styling text it's always just referred to as color. When you're trying to do a background color you have to go the full background. There it is there, you can see, background color. What color we're going to use? I'm going to put in yellow. Remember what goes at the end semicolon, save it. Let's preview it in the browser, and, nothing appears because at the moment this Div Tag is yellow, but it has no dimensions. It either needs a height , or it needs some stuff in it. 

So inside this Div, I'm going to 'Tab' across, stuff in it. If I do that, save it, go back to my browser now. At least now, with some text in it, kind of forces that Div Tag open a little smudgy bit, so I can see it. Now it doesn't know how big it is, it's just showing me enough to squeeze the text in. And it's kind of spilling across, so let's give it a height and a width. In here let's just put in a P-tag, rather than just plain old text. So we're going to put in some Body Text, remember, paragraph for P. Let's just put in 'First Box'. 'Save' it. And let's style it. 

So up here, the Div Tag is yellow. I'm going to put a 'Return' afterwards, and let's give it a width and a height. So width, I'm going to give it - what did our little style sheet say - 600 x 400. So we're going to go 600 pixels for the width. Remember, has to have px, and you have to have the semicolon. And the height, the same, it was 400, right? 400, I wrote it, Dan, come on. Now, I've saved this, let's jump into my Google Chrome. Hit 'Refresh', and hey…

So that is my structure, that could be your navigation. Pretty big navigation, but it could be the middle of your website, or your footer. It's a nice big cube that we can start putting things like H1s or P-tags in. Cool, huh. 

Basically your site’s made up of structural bits, these Div Tags, and text elements, and images that go into it, and videos, but the Div Tags are the structure. Now what we want to do is, I want to put in this second box down the bottom here. So in VS code, I'll go to down here, make a second Div. Let's just copy the first one, let's just save some time, 'Copy'. Whenever copying, make sure you grab the opening and the close. It's easy to know where the closing is. If you click on it, kind of highlights it here. Just have your cursor flashing in, like the head here. There is the closing. 

I've got to make sure I've got all of that. Copy it, so I'm just using 'Edit', 'Copy', I'm going to 'Paste' it in. The tabbing is a bit weird, and because I'm a bit OCD about this. I'm going to make it all look nice. So first box, and second box, save it. Let's preview it in a browser. Preview, got a second box; hey. 

The last thing we want to do is we want to make it a color. We want to make it this pink. So, in VS code, I'm going to go up here, and this is where we run into our first problem. We're styling this thing called Tag, an HTML tag, that's Div. The problem with it is that, this Div appears twice but we can only color it once. So we're going to learn in the next video what something called a CSS Class is. It allows us to individually attack this first box rather than the second box, and style them differently, but for the moment we've put in our Div Tag, it's awesome, now we need two different kinds of Div Tags, that have different sizes and different colors, and we'll learn how to do that with a CSS Class in the very next video.