What is a Div Tag

Hi, and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott,  and I'm a trainer here at Bring Your Own Laptop. What we're gonna do in this tutorial is  create some diviv tags. Now in this exercise  what we're gonna do is create a separate file  and create just some simple box projects, um, just so  that you can really understand diviv tags  before you start flying into a full website. So if you do wanna fly into your full website,  jump ahead of this tutorial. But in this one we're gonna look at creating some boxes.

So we're gonna try  and create a structure that looks like this. Okay? It's nothing much,  but it will help us understand how did tags are created  and how you move them around in code. So we've got a red box with a yellow box inside of it  with a blue box underneath. So let's look at creating that  and we're gonna do it in a separate document. So not in our current vintage campus site.

We're gonna make a new file, okay? So file new, then go to blank HTML,  and then the layout is none. Hit create. Then I'd like you to go to file save  and let's call this one. Um, our red box Hyen demo. So Red Hyen box hyphen demo.

Okay, this is just gonna be a temporary file. We're gonna throw this away in a second once we've kind  of got the understanding of div tanks. So the first thing we need  to do is make sure there's a CSS sheet created. Now the CSS that we create  for these div tags is the exact same  ones we do for the fonts. So if you've got a file that's already got a CSS sheet,  like our index currently does,  it's got a one called Main css. If that's true, then you don't have to create a new one.

If you're doing this demo with me,  we're gonna create our own CSS sheet just for this exercise,  and we're gonna do it the exact same way we did the fonts. So over here we're gonna hit the little plus button under  sources, we're gonna go create new CSS file. Then we're gonna give it a name. We're gonna call this one red hyphen box. And okay, if I zoom out now you'll see I've got my  red box demo, do html,  but I've also got this new file called Redbox css. Okay?

So next thing we're gonna do is we're going  to create our diviv tag. So there's two parts to it. We're created it in the source code,  which is the HTML, which is in here. Then we style it in the CSS. Okay? Which at the moment has nothing in it.

So back to the source code,  and I'm gonna go to my design view. So the cursor facing in anywhere,  you can either use your insert panel, which is on the right,  it might be tied up with the uh, files panel,  or you can go to insert and down to div. It's totally up to you. Okay,  I'm gonna use the insert panel. So we're gonna use insert and click on div. If you can't see div,  it might be under some different setting here.

So make sure you're on common and then click div. All right? Um, now well forget about insert for the moment. We'll look at that in a little bit. We're gonna use IDs to style this box. Okay?

So we're gonna call this one a red hyen box. Now we've looked at tags in an earlier class  and we've looked at classes in an earlier, um,  one just before this one. So classes had remember a full stop in front of it  to make it a class. IDs have something slightly different. They have hashes in the front of it, okay? That's what makes an id.

So we don't have to add it here. Dream move is pretty clever and adds it for us. So if I leave red box there  and click okay, you'll see in my HTML, um,  it's created this div tag, okay? And it's added some placeholder text for us. If I check in the source code, so under source code code,  I've got this thing called div id, red box. Okay?

And then I've got the closing of the diviv. So there's the opening of the diviv, okay, named Red Box. And there's the closing of it  and everything inside of it at the moment is only a bit  of placeholder text content for id. Red box goes here. This is just placeholder text. You do not need to leave it there.

Um, it's just so that there's something on the screen  while you're designing. So we've created in the HTML, now we need  to style it in the CSS. And this is where it's, um, very similar to doing the fonts. I wanna make sure over here I've got my CSS selected. I'm gonna pick a selector  and it's even defaulted to red box for me. If it doesn't, okay, you can go through  and just type in, remember hash to identify, uh, an id,  and then red box.

Great. I hit enter, I hit it twice. And now we're dealing with slightly  different place down here. Earlier when we were doing fonts, we were dealing  with the text part. We're gonna be dealing with this part here. Now, the first bit, the layout that's more applicable  to a div tag, it gives us our width, our height,  and things like color and those sorts of things.

So the width for this one I've decided is  going to be in pixels. So pixels is how you'd style, um, diviv tags  unless you start getting into more complicated things like  responsive web design,  which we will look at at a later tutorial. But for the moment, let's talk to, um, an absolute size. Okay? It's still very common in web design. So we'll get a width of 400 pixels, okay?

We're gonna have a height of pixels at 400,  and I'm gonna enter, I'll zoom out  and you'll see I've got now a box that is  400 pixels by 400 pixels. Great. Now I need to play around with the background color. So let's have a look, um, through,  you can keep scrolling down until you find it. I know that it's under this one here. Okay, under background.

So we've used layout,  we've used text before. Now we're gonna skip down to background. That just slides down the list. Now, in this one, it's the top one that I really want. It's this one that says background color. So click on that and then move your cursor.

Move the little circle. I'm clicking  and dragging till it goes to the red. Hit enter and ta-da. We've got a red box that is 400 pixels by 400 pixels  that has a center color of red. Let's check it out in CSS. So in my source code  and my code, I've still got this,  just this really simple thing called red box.

Okay, this Id called red box and a closing of the div tag. Red box, no sizings, no nothing. But in my CSS, that's all the work gets done. You can see the corresponding name, red box has a width  and height and a background color. Great. So, um, it's a way of splitting these two apart  and it means that, um, it keeps the code down to nice  and small because what you can do is you can have red box on  every single page.

Okay? So you might have red box as the top box on,  uh, on all your pages. So you've got a hundred of them or a thousand of them. It means that you don't have to write red box once. And um, the red box class  or the red box id styling in here  needs to be only written once. Cut that last bit out.

That was dumb. Great. So now we've got these two, uh, this box created. Let's look at building our second box. So the second box is gonna be this blue one underneath. So we're gonna add a little extra complexity to it.

So we're gonna go to insert div  or insert div, whichever one you prefer. Now this top one becomes more important. Okay? It says where to insert it. Okay? So at insertion point, it's gonna be wherever my cursor is,  uh, flashing in my design view.

Now that can be tough because it's very hard  to get the cursor flashing in the right  tire or right place every time. So we're gonna at these ones before tag, after start of tag,  before end of tag and after tag. Now, um, if I zoom out a little bit, um, we've got,  We've got pretty much,  we've got one option in this one, okay? So, um, we've got after tag. So what it means is I have the beginning and ending tags. So let me close that and come back at here  and go to source view.

I, here's my beginning of tag  and there's my close of my tag. If I want the blue box to appear  after this one, I have to say after red box. Okay? If I want it to be inside the red box, I say  after the start of red box, it'll start  inside this guy here. So let's give that a go back to design view. I'm gonna go to insert div tag.

So at insertion point, I'm gonna say  after tag Red box, I'd like  to insert a new ID of Blue hyphen box and click okay. You'll see after red tag finishes, there is the blue box. Let's go to Cur view. You can see what happens. So there's the red open, there's the red close, and  after the close of that tag, which is there, it's the  after the, after the red box closes, the blue box starts. So it's right after it.

Now what we need to do is go back to design view  and we're gonna style this one just like we did the red box. And to do it, we're going to make sure we're in red box. CSS. We are picking a selector. It's defaulted to blue box, but if it doesn't, don't worry. You can just type in.

Maybe we've gotta start with a hash  and we're gonna start with blue box. Hit enter twice. Okay, I'm gonna start with layout. We're gonna do a width of this one is gonna be pixel width  of 600 and a height  of pixels 200. Great. So, so far we've got the shape kind of in there.

Now we'll do the background color,  which is this little tab here, background color. I'll pick a blue and move this circle around clicking  and dragging it and pick something that's blue, hit enter. Great. So we've got a red box and a blue box. So the last one we need to do is get that yellow box. Remember this guy, we need to get that yellow box  inside the red box.

So let's give that a go. So to do that, I'm gonna insert a div tag. So it doesn't really matter where your cursor is. Okay, just hit insert diviv tag. Now, not at the insertion point. I wanted, if I did before start of red box, okay,  before tag red box, it'd end up above the red box.

If I wanted it  after red box, it would end up with the blue boxes. Okay, so I want this one that says after start of red box. So after the starting of it, I would like  to put this new one cord, yellow box. Great. Let's click. Okay.

So we melt. So it's in the right place. Okay, but it has no styling yet, but there is my yellow box. Let's have a look at code view. You can see red box opens. Then before it closes, which is there,  the yellow box starts and closes.

So he is tucked up inside this one. Great. I'll put a couple of returns in just  to help you visualize it. Um, returns don't mean anything in code view. Okay? So you can kind of space things out nicely just to see, um,  uh, just to see a little easier.

So red box opens, okay, and closes here. Inside of red box is yellow, box opens and closes. All right, let's go back to the design view  and let's style this yellow box. So let's make sure in red box css,  click on the plus button. It's defaulted to try and styling two of them. I just want to style just the yellow box.

And I'd like a width, okay, of 100 pixels  And a height of 100 pixels. And I'd like to pick a background color of,  let's use a yellow. So I'm gonna slide this up the hue slider,  and then move into hip pick, enter. And fingers crossed, we,  I've got a yellow box inside my red box. Now this text here is purely just placeholder text. I can delete all of that text in there  and start adding my own content now.

Alright, so that's a kind of a basic in, uh, um,  introduction to creating div tags. Now let's look at putting that into more practical use  by actually building a website  with div tags rather than just little boxes. Alright, I'll see you in the next tutorial.