Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.2 hours
Getstartedhtmlcss
  • Overview
  • Transcript

2.1 Div Tags

In this lesson, I will show you how to layout the most basic blocks of your first web page. You will learn the difference between divs and spans, and you’ll also pick up some simple style rules along the way.

2.1 Div Tags

Welcome back. One of the most common html tags today is the div tag. That's because it's used to create web site or web page layouts. In other words, the div tag is used to take a big square that is the web browser window and break it up into smaller squares or boxes. When these boxes are spaced out evenly around the browser window, we get what's called a page layout. If you look closely, every site has a page layout. Let's look at some examples of that now. I'm going to open a new tab, and go to www.tutsplus.com. Notice the full-width box across the top? And we see another full-width box below it, followed by three boxes that are about one third of the full page width each. As I keep scrolling down, you'll see many different examples of divs in action. Notice how the page is broken up into different evenly spaced sections? That's all thanks to divs and the styles that are assigned to them. Speaking of style, the other thing you need to know about both divs and spans is that they're invisible by default. Let's take a look at an example of this. As you can see, I've taken the index.html file that we were using in our last lesson, and I've cleared everything out. The only thing we have here now is an opening and closing div tag. If I save this file with nothing but that opening and closing div tag and then come down to my desktop and double-click on index.html, we'll see a blank web page. There's nothing there. Now the div is actually there, if we right-click and go to View Page Source, we'll see that we have our opening and closing div tags actually being generated into index.html but like I said, it's invisible. So we need a way to actually show you how to style these. The technique I'm going to show you is actually called inline styling. It's highly deprecated and not used in real life web development, but for our purposes today, it'll fit perfectly. So let's go back to our text editor. Inside the opening div tag, right before the closing bracket, add a space, and type the word style. After style, type equals, and do an opening quotation marks and a closing quotation marks. Inside these quotation marks is where we'll add all of our style attributes. Sometimes you'll hear me say CSS as well. CSS stands for Cascading Style Sheets. And that's what we actually would use in real life to style this web page. So if you hear me use the word CSS, understand it's a force of habit and what I really mean is style. So let's start by adding some height. I'm going to type the property that I'd like to change, a colon, the amount that I'd like to change it, in pixels or percentage, and then a semicolon. Width is the exact same way. Now let's add some background color. Notice it follows a very simple pattern. The attribute you would like to change, a colon, the value you would like to change it to, and a semicolon, a space, and then you can start all over again. If we save this and toggle back to our web browser and hit Refresh, we see a red square that's 100 pixels high by 100 pixels wide with a red background. That's our div. So, let's walk through that again just to make sure we fully understand it. Let's toggle back, create a new div, we'll add a style attribute, we'll set the height with the same 100 pixels. The width with the same 100 pixels, but this time we'll make the background color green. We'll save that down, refresh and there's our div. The one thing you might notice is that as we create divs, they're always gonna stack. If I was to copy this red div, and paste it below the green div, we will see red, green, red. Let's save that and refresh, and we see red, green, red. Divs, by default, are block level elements, which means unless you style them otherwise, they will create a new line before they actually add anything to your page. So this begs the question, can we put a div inside of a div? And the answer is, absolutely. In fact, it happens all the time. Let's toggle back to our text editor, and we'll put a div inside this top one. So I'm gonna come here inside the opening and closing div tags, tab over twice, create a new div tag, and let's add some different style to it. So we'll give it a height of 30 pixels, a width of 30 pixels, and a background of blue. We'll save that off, toggle back and refresh, and there we have our div inside of our div. Now that we understand divs and a bit about their styling, let's use that knowledge to create a simple two column layout. I'll toggle back to my text editor, just select everything and kill it. And because we want to make a proper web page here, let's bring all of the typical HTML tags in. So for our title we'll just do My awesome site. We know we don't need anything else in the head. We'll put everything inside the body, and that, all of course is wrapped in html tags. Let's go ahead and create a div tag, and let's imagine that this div tag is gonna be the very top, or header, of our website. Usually it just includes maybe a logo and some navigation. So this will be pretty small in height. Let's go ahead and do style=height of 100px. This time we'll do the width at 100% of the screen instead of just 100 pixels, and we'll make the background black. So if I save that off, come back, and refresh, you'll get a good size nav bar up at the top. Now let's add the next two divs. I'm thinking a nice, thin sidebar along the left, as well as a place for main content on the right. So let's do our sidebar first. But since this is our sidebar let's only set the width to about 30%. And we'll make the background red. And while I'm here I just noticed that I missed that closing semi-colon at the end of black, so I'll go ahead and add that. And this last div will be our main content section. So we'll do style. Height will remain the same. The width will take up the remainder of the page, so 70%. And the background we'll set to gray. So let's save that off, toggle over, and refresh. And at first it looks like something might be broken. We have our black nav bar across the top, our red side bar on the left, but where's our gray area, our main content section? Well remember, divs are block level elements. So the grey section was actually pushed down below the red section. Let's take a look at how we can fix that. Basically, I want to tell the web browser there's no need to add a new line for either the red or the gray div. I'm perfectly fine with them being right after the black div. Since the black div is taking up 100% of the screen, it'll automatically be pushed to the new line. And I want these two to take up their own line. So I'm simply going to go into the style part of this and add a float to the left for both of these divs. I'm going to save and refresh. And there, our layout looks much better. Now we can use this layout to keep our content straight. We know anything we put in the sidebar div will stay within the red box. We know anything we put in the headline div will stay within the black box. And we know anything we put in the main content div will stay within the main content box. In future lessons, we'll actually get rid of this background, and replace it with real live HTML content, as we continue to learn more about the HTML tags. Thanks for watching.

Back to the top