Add standard content

Where are we?

We’ve made all the look-and-feel changes to the template. Time to add some more stuff.

This lesson’s goals

By the end of this lesson, you should what “standard content” means, and how to add it to a template.

Remember the goal

Our goal is to create a template, template.html. When we want to make a new page, we copy the template. For example, when we want to make the home page, we copy template.html to index.html.

We want to make as little work for ourselves as we can. So we should make the template as complete as possible.

Here’s the template so far. You can try it.

Template so far

Figure 1. Template so far

[SITE NAME] will be the same on every page. [SITE NAME] is an example of standard content. It’s the same on every page. The nav bar and the footer are also standard content.

We should add the standard content to the template. Then when we copy the template to make a new page, the standard content is already in place. This will save us time.

Making the changes

We need to ask Giles for some of the standard content. Giles tells us that the site will be called “Natural Reflections,” with a subtitle of “Poetry from Giles.”

Here’s the before and after HTML for that:

Before:
<title>[TITLE]</title>
...
<h1><a href="#">[SITE NAME]</a></h1>
<h2>[SUBTITLE]</h2>


After:
<title>[PAGE TITLE] | Natural Reflections</title>
...
<h1><a href="index.html">Natural Reflections</a></h1>
<h2>Poetry from Giles</h2>

Figure 2. Code changes for site name and subtitle

The <title> tag sets the text in the browser title bar, bookmarks, and search engine results. Each page should have its own title.

Line 4 has a link to index.html. We haven’t made that page yet. That’s OK. Right now, we just need to know what it will be called.

Giles says there will be six poems on the site, and gives us a list of the poems. Links to each one will go into the sidebar. He also gives us some text to put below the poetry list.

Before:
<div id="sidebar">
  <h3>[SIDEBAR HEADING]</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Purus in mollis purus</a></li>
  </ul>
  <h3>Lorem ipsum dolor</h3>
    <p>Vivamus sagittis bibendum erat. Curabitur lorem ipsum dolore
      malesuada. <a href="#">More...</a></p>
</div>


After:
<div id="sidebar">
  <h3>Poems</h3>
  <ul>
    <li><a href="i-saw-in-louisiana-a-live-oak-growing.html">I Saw in Louisiana a Live-Oak Growing</a></li>
    <li><a href="the-lake-isle-of-innisfree.html">The Lake Isle Of Innisfree</a></li>
    <li><a href="the-tiger.html">The Tiger</a></li>
    <li><a href="by-the-arno.html">By the Arno</a></li>
    <li><a href="ladybird-ladybird.html">Ladybird, Ladybird</a></li>
    <li><a href="two-of-a-trade.html">Two of a Trade</a></li>
  </ul>
  <h3>Suggestions?</h3>
    <p>Please <a href="contact.html">contact me</a> if you
    have suggestions for this site.</p>
</div>

Figure 3. Code changes for sidebar

We haven’t made the pages for the poems yet. All we need to know now are the file names, like two-of-a-trade.html. They’ll be the same on every page.

We can also fill in the About and Contact links. On every page, About will link to about.com, and Contact will link to contact.html.

Before:
<div id="menu">
  <ul>
    <li id="button1"><a href="#" title="">Home</a></li>
    <li id="button1"><a href="#" title="">Poerty</a></li>
    <li id="button2"><a href="#" title="">Link</a></li>
    <li id="button4"><a href="#" title="">About</a></li>
    <li id="button5"><a href="#" title="">Contact</a></li>
  </ul>
</div>


After:
<div id="menu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="poetry.html">Poerty</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

Figure 4. Code changes for top nav bar

Extra stuff we aren’t using has been removed.

Some footer code has been changed as well.

Before:
<p>
  Copyright © 2011. 
  <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> 
</p>


After:
<p>
  Copyright © 2011. 
  <a href="terms-of-use.html">Terms of Use</a> 
</p>

Figure 5. Code changes for the footer

There is no need for a privacy policy, since Giles isn’t gathering data about anyone. That link was removed.

Here’s the completed template:

Final template

Figure 6. Final template

Almost everything on the page has been standardized. When the template is used, whoever is working on it needs to change:

  • The content in the main content area.
  • The <title> tag.

W00f! The template is all done, ready to use.

Summary

We added content to the template that is going to be the same on every page of the site. The top nav bar, the site name, the sidebar, and other stuff.

What now?

Now someone uses the template to build out the site.


How to...

Lessons

User login

Log in problems? Try here


Dogs