HTML looks better

The story so far

You know how to use several HTML tags. Headings, paragraphs, lists, and other things. The HTML doesn't look that great, however. That's what Bootstrap can fix.

Headings and paragraphs

We saw this code earlier.

  1. <h1>Building a Dog House</h1>
  2. <p>Building a dog house is easier if you work out what you are doing ahead of time.
  3. This page will help you with the process.</p>
  4. <h2>Find a plan</h2>
  5. <p>The first step is to find a plan for the dog house. There are many plans on the
  6. Web. But you need to choose carefully.</p>
  7. <h2>Buy the materials</h2>
  8. <p>Buy the wood, fasteners (nail, screws, etc.), paint, and whatever
  9. the plan calls for.</p>
Here's what it looked like.

No template

Now take the same code, with no changes, and put it in the template we made.

With a template

Aaahh! Better.

Georgina
Georgina
You put the dog house HTML in the template, yes?
A copy of the template file, that's right.

Georgina
Georgina
Where does the code go?
Here's the page the template renders:

Content region

I wanted the dog house stuff to be in content region. That's about in the middle of the HTML:

Content region HTML

Let's zoom in:

<main role="main" class="container">
    <h1>Starter template</h1>
    <p>This is not the template you're looking for. We'll add a little more.</p>
</main>

I deleted everything between <main> and </main>. Then I pasted in the dog house code.

Tables

Another example. Here's code for a table we saw earlier.

  1. <table>
  2.   <tr>
  3.     <td>DOG 101</td>
  4.     <td>Introduction to the modern dog</td>
  5.     <td>MW 9:00am - 11:00am</td>
  6.   </tr>
  7.   <tr>
  8.     <td>DOG 110</td>
  9.     <td>Dogs in the ancient world</td>
  10.     <td>M 6:30pm - 9:30pm</td>
  11.   </tr>
  12. </table>
Here's what it looked like:

No template

To use it in a Bootstrap template, we need to make one small change. Remember that Bootstrap has its own way of using HTML and CSS. You have to do things the Bootstrap way to get the right effects. Here's the new code.

  1. <table class="table">
  2.     <tr>
  3.         <td>DOG 101</td>
  4.         <td>Introduction to the modern dog</td>
  5.         <td>MW 9:00am - 11:00am</td>
  6.     </tr>
  7.     <tr>
  8.         <td>DOG 110</td>
  9.         <td>Dogs in the ancient world</td>
  10.         <td>M 6:30pm - 9:30pm</td>
  11.     </tr>
  12. </table>
The <table> tag has the CSS class table added to it.

Here's the result.

Table in template

Aaahhh! Better.

How did you know?

Adela
Adela
That looks better than it did.

But how did you know that you had to add that class?

The Bootstrap documentation's table page. It gives code you can copy and paste.

Georgina
Georgina
I just checked out that page. It has stuff that you didn't include in your code.
Good question! Yes, I left some things out. Until you get to know Bootstrap better, just copy and paste what they give you. It's safer that way.

Where did the code go?

Marcus
Marcus
I'm guessing you pasted the table HTML in the same place as before?
Right. The template has this:

<main role="main" class="container">
    <h1>Starter template</h1>
    <p>This is not the template you're looking for. We'll add a little more.</p>
</main>

I replaced the content of the <main> tag. It ended up like this:

<main role="main" class="container">
    <table class="table">
        ...
    </table>
</main>
Ray
Ray
I don't remember seeing the <main> tag before. Did we cover it?

No. You'll never need to change the <main> tag in the course, so we didn't talk about it. Better to spend our time on other things.

If you want to learn about more HTML tags, the Mozilla Developer's Network is a good place to start.

Summary

Wrap HTML in a Bootstrap template. It looks better.