From Scratch: Meet Div!
Enough theory. To become a better golfer, play golf. The same is true of computers. The more you play, the better you get. So today, we play. It’s lab time nerds!
Remember these: { } ? Those terrifying bits of punctuation were called braces, and they were used to denote an object. Remember objects? Building our own was fun, but computers have some built in objects that we can play with. We’ll start with a versitile object called a div. Divs are just rectangles, but they are the building blocks of the web. Want a blue square? Simple.
div
{
width:100px;
height:100px;
background-color:blue;
}
Boom. That’s how easy. But… where’s the square. That code describes a square, but that doesn’t mean we can see it yet. We can describe objects, but to see them we will need to represent them. Reread that last sentence.
Side note: The letters “px” mean pixels. The square will be 100 pixels by 100 pixels. Not sure what a pixel is? Consider Googling it.
Braces are one way of representing an object in code. Today we’re going to learn another way, called a tag. Tags go <>. Actually, tags go <></>. Object descriptions begin with an open { and end with a close }. Object representations begin with an open <tag> and end with a close </tag>. We use braces to describe objects, and we use tags to represent objects. Reread that last sentence, and observe:
<style>
div
{
width:100px;
height:100px;
background-color:blue;
}
</style>
<div>Hi</div>
This bit of code would a blue box that’s politely greeting you in a comforting tone. Now it’s your turn. Make that little blue div a reality. Open up notepad and copy the code into a new file. You don’t need to use notepad, but you need to use a simple text editor. No Word. I mean it. Save the file on your desktop and call it frankrocks.html . If you double-click it, it should open up and display in your web browser. What fun we’re having.
Let’s talk about how this works. Tags represent objects, and there are two tags displayed (style and div) so we have two objects. Two sets of tags, two objects. We have a style object and a div object. Style objects are invisible, but contain information on what other objects should look like. In this case, the style object describes what the div should look like. Divs have many style properties, none of which we will discuss now.
Good day sir.
-Fk