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>
3. <p>Building a dog house is easier if you work out what you are doing ahead of time.
4. This page will help you with the process.</p>
6. <h2>Find a plan</h2>
8. <p>The first step is to find a plan for the dog house. There are many plans on the
9. Web. But you need to choose carefully.</p>
11. <h2>Buy the materials</h2>
13. <p>Buy the wood, fasteners (nail, screws, etc.), paint, and whatever
14. the plan calls for.</p>

Here's what it looked like.

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

Aaahh! Better.

A copy of the template file, that's right.

Here's the page the template renders:

I wanted the dog house stuff to be in content region. That's about in the middle of the 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:

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.

Aaahhh! Better.

How did you know?

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

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?

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>

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.