HTML is Like Lego

HTML is a lot like Lego – you start with the idea, your content, and then you start stacking and connecting one block on top of another, one at a time, different blocks of various shapes, colors, and sizes until your final creation has been brought to life. Building web pages can inspire the same excitement, wonder, and joy you get from creating something with Lego and works much the same way. All the skills you learned playing Lego as a kid you will be able to transfer to building awesome websites.

Building Blocks of HTML

In this tutorial I am going to show you the building blocks of HTML. Just like Lego, in HTML there are different types of blocks (headings, paragraphs, lists, links) for different types of things you want to build. You have already learned the different types of blocks you can choose from and what type of block to choose. Now I am going to teach you how blocks work and how to stack them together.

If you have not done so already, I recommend reading the first few tutorials before this one. I am going to assume that you are familiar with the topics that we learned prior to this article.

Everything in HTML is a Box

Have you ever noticed that there are a lot of rectangles, squares, and straight lines on the web pages you come across as you browse the internet? HTML makes it really easy to create blocks and boxes. In fact, a lot of HTML elements are some type of box. We can think of HTML elements as blocks and boxes as containers.

Let's look at an HTML heading tag like the <h3></h3> tag.

<h3>This is a Heading</h3>

The <h3></h3> heading tag in the example above is actually a container. It is an HTML container with text content inside it. If I add a border to this heading, you will be able to see the container's dimensions. All HTML block elements have a width, height, padding, and margin.

example1

I am going to show you how to change the width, height, margin, and padding on an HTML block element. It's like designing your Lego block. Let's start with out <h3></h3> heading tag.

Open your text editor and create a new text document. Name it webpage.html and save it in a safe place. Add a new heading and a paragraph to your document like the example below. Save your file and open it in your web browser.

<h3>My New Heading</h3>
<p>This is my new Paragraph. Creating web pages is exciting and fun. This is awesome!</p>

Let's add a border to our heading and paragraph, but before we do that, I am going to teach you a new HTML tag, the <style></style> tag.

CSS Styles

The HTML <style></style> tag is a bit different than the tags that you have learned so far. The style tag is a special container for information about how we would like to style, display, and layout our HTML elements. The style tag is a container for CSS (Cascading Style Sheet) declarations. CSS is different from HTML – it's the presentation layer of your web page. I will show you more about CSS in another tutorial, don't worry. All we need to know right now is that the HTML <style></style> tag is for holding your CSS.

CSS is like choosing the right block with the color, size, width, height, and shape that you want. With CSS you get to create your own HTML Lego blocks to build your web page with. It's like having your own Lego factory that makes the block you need on demand. (Imagine if you had THAT as a kid!)

Copy and paste the example below into your website.html file to see the results. Don't worry, I am going to explain exactly what is happening as we go along.

<style>
h3{
border:1px dotted red;
}

p{
border:1px dotted blue;
}
</style>

<h3>My New Heading</h3>
<p>This is my new Paragraph. Creating web pages is exciting and fun. This is awesome!</p>

Save your webpage.html file and refresh your web browser. You should should see something like the example below:

example2

Now that our HTML heading and paragraph elements have borders, you can see exactly what your HTML block elements look like. This is very useful for changing things like the padding, margins, width and height. Let's play around a little bit and make some changes to our HTML element styles. Let's add some padding to our heading element.

Padding

Padding is the amount of space inside and HTML element container. We are going to add some padding to our heading. View line #4 in the example below:

<style>
h3{
border:1px dotted red;
padding-top:50px;
}

p{
border:1px dotted blue;
}
</style>
example3

As you can see, we have created a big "space" above our text content inside our <h3></h3> heading tag. We can add padding to all 4 sides of the heading element. View the example below:

<style>
h3{
border:1px dotted red;
padding-top:50px;
padding-right:50px;
padding-bottom:20px;
padding-left:150px;
}

p{
border:1px dotted blue;
}
</style>
example4

We can change the padding on HTML elements to our liking. In the next example, I am going to show you how to adjust the margins (the space around HTML elements.

Margin

Margin is the space around an HTML element. Copy the example below into your webpage.html file and view the results.

<style>
h3{
border:1px dotted red;
padding:20px;
margin-top:50px;
}

p{
border:1px dotted blue;
}
</style>
example5

We can add margin to all 4 sides of our HTML element. View the example below:

<style>
h3{
border:1px dotted red;
padding:20px;
margin-top:50px;
margin-right:30px;
margin-bottom:100px;
margin-left:50px;
}

p{
border:1px dotted blue;
}
</style>
example6

Margin effects the space around our HTML element. Using margin we can specify how much space separates items like headings and paragraphs. Using padding and margin, we can adjust the layout and position of our HTML elements and content. You can add padding and margin to almost any HTML element, giving you precise control over the positioning and layout of your content.

Experiment with different values for the margin and padding on your elements. Play around, have fun.

Width & Height

Just like margin and padding, width and height give us another way to control the layout of our HTML elements. The work exactly as they sound. Try the example below:

<style>
h3{
border:1px dotted red;
width:400px;
height:40px;
}

p{
border:1px dotted blue;
width:200px;
}
</style>
example7

Bringing it All Together

Here is an example of using our CSS padding, margin, width, and height to stack our HTML blocks in a meaningful way. In the example below, I am going to use our new tools to layout our content in a more organized, styled manner. This will give you an idea of how you can use these tools to craft your design and layout as you are creating web pages.

Copy and paste the example below into your webpage.html file, save it and view the results.

<style>
h3{
border-top:5px solid lightgrey;
border-bottom:5px solid lightgrey;
width:300px;
margin-top:50px;
margin-right:0px;
margin-bottom:5px;
margin-left:30px;
padding-top:5px;
padding-bottom:5px;
}

p{
width:300px;
margin-top:10px;
margin-right:0px;
margin-bottom:20px;
margin-left:30px;
}
</style>

<h3>My New Heading</h3>
<p>This is my new Paragraph. Creating web pages is exciting and fun. This is awesome!</p>

<h3>My New Heading</h3>
<p>This is my new Paragraph. Creating web pages is exciting and fun. This is awesome!</p>
example8

In the example above I have added a couple of borders, some padding, margin, and widths to our heading and paragraph elements. You can see hows this has helped transform our HTML page from the default browser styling into something more readable and eye friendly.

Wrapping Up

Play around with different values for the padding, margins, widths, and heights. Experiment and have fun. HTML is all about playing with the tools you learn and seeing what you can create. This article has covered a lot of new ground – but never fear. We are going to be revisiting topics like CSS and positioning in a future tutorial.

You have made it this far, give yourself a pat on the back. Congratulations! You are learning how to master HTML! (and even a little CSS)

View Demo Download Tutorial Files

This website was made on a 13" MacBook Pro and 23" ACD, hand–coded in Coda, designed in the browser (Safari 5.03 to be exact) using CSS3, HTML5, and jQuery 1.5. © Copyright Joshua Gatcke http://www.99lime.com 2011–2012. All Rights Reserved.