If you have followed my first four HTML lessons you are now familiar with the basic syntax of HTML. While there are HTML elements that you haven’t learned yet, it is safe to say that you know the basics and are ready to try something new and exciting.
Where’s All The Style?
You may have noticed that all of the code we’ve written so far looks incredibly boring when viewed in a web browser. We haven’t created any elegant layouts with columns, and all of our text is boring and black and rendered in an ugly default font. This is because HTML is meant to simply markup and describe content elements; it is not intended to add style to a page.
Another Language: CSS
There is a different computer language named CSS (short for cascading style sheet) that is used to add style to pages. We are not going to learn CSS in today’s lesson (but when you are ready, visit the CSS Lessons page), instead we are going to learn how to setup our HTML pages so adding style via CSS will be smooth and painless.
Our Task For Today
For today’s project, let’s imagine we need to create a webpage that has a heading, 3 columns of content, and a footer.
Meet Your Best Friend; The <div> Element
While there is not a HTML element for creating a column, the <div> element is used to divide pages into meaningful sections which can then be converted to columns through the use of CSS.
Let’s begin coding! I urge you to follow along by typing, or copying and pasting today’s code as we go (learn how to create an HTML file). We’ll start with our typical HTML starter file that we learned about in Lesson 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Layout</title>
</head>
<body>
</body>
</html>
Time To Add Content – Our First Column
Now let’s begin adding our content; we’ll start with our first section (or column) of content. Let’s place a list of links in this column; add the following code directly below our <body> start tag:
<div>
<ul>
<li><a href="#">Sample Link One</a></li>
<li><a href="#">Sample Link Two</a></li>
<li><a href="#">Sample Link Three</a></li>
<li><a href="#">Sample Link Four</a></li>
</ul>
</div>
Nothing in this code should come as much of a surprise. You should recognize the format for creating a list from Lesson 2, and the format for creating a link from Lesson 3, and as we learned just minutes ago, the <div> element is used to divide the page into meaningful sections which we can later turn into columns.
Our Second Column
Now, let’s create our second (middle) column. This column will contain our primary content, which in this case will be a few headlines and sample paragraphs of text:
<div>
<h2>Sample Heading</h2>
<p>This is a sample paragraph for our sample HTML file. In our next lesson we will learn how to style this page. This is a sample sentence to add more content.</p>
<h3>A Slightly Less Important Heading</h3>
<p> This is a sample paragraph for our sample HTML file. In our next lesson we will learn how to style this page. This is a sample sentence to add more content.</p>
</div>
Our Third Column
Next, our third column will be nearly identical to our first; a simple list of links:
<div>
<ul>
<li><a href="#">Sample Link Five</a></li>
<li><a href="#">Sample Link Six</a></li>
<li><a href="#">Sample Link Seven</a></li>
<li><a href="#">Sample Link Eight</a></li>
</ul>
</div>
Our Footer
Finally, we’ll add a footer.
<div>
<p>Copyright 2011 Learn Web Code</p>
</div>
Labeling Our <div> Elements
Now we are now going to label our <div> elements by assigning them specific classes and identifiers so adding style to our page with CSS will be quick and easy. We will utilize HTML attributes and values (Lesson 3: Attributes and Values) to accomplish this.
Label The Side Column
We’ll start with our first column; our <div> start tag for the first column will now look like this:
<div id="side-column">
We are using the “id” attribute and assigning it a value of “side-column”. This will allow us to add style to this column via CSS in our next lesson.
Label The Main Column
We will also edit the start tag for our second <div>:
<div id="main-column">
Label The Other Side Column
As you might have guessed, we’ll now edit the start tag for our third column:
<div id="side-column-two">
Don’t Forget The Footer
Finally, we’ll label our footer section:
<div id="footer">
<p>Copyright 2011 Learn Web Code</p>
</div>
That’s all for today. In our next lesson we will learn the basics of CSS so we can add style to our pages. For your reference, here is the code we put together today, in its entirety:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Layout</title>
</head>
<body>
<div id="side-column">
<ul>
<li><a href="#">Sample Link One</a></li>
<li><a href="#">Sample Link Two</a></li>
<li><a href="#">Sample Link Three</a></li>
<li><a href="#">Sample Link Four</a></li>
</ul>
</div>
<div id="main-column">
<h2>Sample Heading</h2>
<p>This is a sample paragraph for our sample HTML file. In our next lesson we will learn how to style this page. This is a sample sentence to add more content.</p>
<h3>A Slightly Less Important Heading</h3>
<p> This is a sample paragraph for our sample HTML file. In our next lesson we will learn how to style this page. This is a sample sentence to add more content.</p>
</div>
<div id="side-column-two">
<ul>
<li><a href="#">Sample Link Five</a></li>
<li><a href="#">Sample Link Six</a></li>
<li><a href="#">Sample Link Seven</a></li>
<li><a href="#">Sample Link Eight</a></li>
</ul>
</div>
<div id="footer">
<p>Copyright 2009 Learn Web Code</p>
</div>
</body>
</html>
If you prefer to watch video lessons instead of reading written lessons check out my 8 hour video course and learn pro-level HTML, CSS, and responsive design.
Im having trouble with the code that I have been tasked to do from a text book. The first thing is that Im supposed to copy a GIF. image to the work that will replace the standard bullets with small diamonds and im not sure im understanding correctly how to do it because ive tried to copy and paste but had absolutly no luck I would be eternally grateful for any help that you can offer. Thank you
Hi Ken,
The task you mentioned (replacing the standard bullet with a .GIF image file) requires CSS. There are perhaps more modern techniques, but a simple method that I recommend is targeting the list item and specifying “list-style: none; background: url(diamond.gif) center left no-repeat; padding-left: 15px;”
If that code doesn’t make much sense I suggest watching a few of my CSS tutorials. Let me know if you have any other questions.
Thanks!
Brad
Hi, when will the next lesson on this topic be released? I find your step by step instructions very easy to follow and learn.
Thanks, hope its soon..
My problem is that I’m not sure how to center align an image horizontally.
The inline attributes of “align=”left” or “align=”right” work for images and are similar to floating the image to the left or right. To center align the image, however, you have several different options. Here are the two most common methods I use:
(1) Place the image inside a DIV (or Paragraph) tag and assign the following CSS to the DIV element: “text-align: center;”
(2) Method one works well when images are inline elements (which they are by default). If you’ve made your image a block level element and given it a specific width, then you can assign the following CSS to the image itself: “margin: 0 auto;”
If you’re not familiar with how to assign CSS to elements I recommend you skim through my CSS Lesson section:
https://learnwebcode.com/css-lessons/
Thanks Brad moving to CSS lessons
Nice, keep up the good work!