See more about:

This lesson’s goals

By the end of this lesson, you should know:

  • What patterns are.
  • How patterns make your life easier.

What’s a pattern

Some situations come up again and again. For example, a bunch of people need to make a choice. Eat all the dog food now, or save some for later? Which movie should we watch? Pirates or ninjas?

Pirates or ninjas?

Figure 1. Pirates or ninjas?

People have come up with different ways of solving the “group makes a choice” problem. One way is for each person to vote:

Direct voting

Figure 2. Direct voting

This is a pattern, that is, a common way of solving a common problem. We could describe the pattern like this:

Goal: Group decision

Pattern: Direct voting

Works well: When there are a few voters.

Another pattern is to have the people elect representatives. The representatives make the choice on behalf of everyone.

Representative voting

Figure 3. Representative voting

The pattern is:

Goal: Group decision

Pattern: Representative voting

Works well: When there are many voters.

So direct voting and representative voting are common ways of solving a common problem. They’re useful in different situations. One is better when there are just a few voters. One is better when there are lots of voters.

Web patterns

There are patterns for Web sites, too. Suppose an organization called Public Opinion hires you to:

Make a Web site about the pirates versus ninjas debate. It will have four pages. The first one will be the home page, telling people what the site is for. There’ll be a page about pirates. There’ll be another page about ninjas. And the last page will let people vote.

We want everyone to know that Public Opinion owns the site. And that each page is copyrighted.

Also, make it easy for people to get from one page to another.

How do you get started? One way is to look at the goals, and think about patterns. For example, how to let everyone know that its Public Opinion’s site? One way is with a header on every page, like this:

Header pattern

Figure 4. Header pattern

People are used to this pattern. A lot of Web sites use it, including CoreDogs. The pattern is a solution to a common problem: tell people what a site is and who owns it.

Another goal is to tell people that each page is copyrighted. A common pattern for that is to put a copyright notice in the footer of every page:

Footer pattern

Figure 5. Footer pattern

Again, we have a common solution to a common problem. How to show a copyright statement? Put it in the footer of every page. Lots of sites do this. Including CoreDogs.

Now, how about this goal: “make it easy for people to get from one page to another.” A common pattern is the nav bar, short for navigation bar. You’ve seen lots of these:

Horizontal nav bar pattern

Figure 6. Horizontal nav bar pattern

Vertical nav bar pattern

Figure 7. Vertical nav bar pattern

Either one would work.

You’ll learn how to make all of these pieces in CoreDogs. Put the pieces together, and you have an entire design:

Complete page design

Figure 8. Complete page design

Patterns rule!

Patterns let you do Web work more quickly. You don’t have to relearn all of the time. You learn how to make a nav bar once, and you can use the pattern on site after site.

Patterns make it easier to design sites. You don’t have to think up new solutions to the problem of letting people jump from page to page easily. You already know that nav bars will do this. You can say to yourself, “Self, I’ll put a horizontal nav bar in here,” and leave the details for later.

Patterns make it easier for Web workers to talk to each other. Say “horizontal nav bar,” and every Web designer will know what you mean.

The CoreDogs pattern library

As we go through CoreDogs, we’ll take useful patterns, and add them to a library. When you create a page or a site, you can borrow patterns from the library.

To get to the library, click on the Tools tab, and then the Patterns tab:

Tools tab

Patterns tab

Figure 9. Accessing the pattern library

Here’s your first pattern. It’s the template from the previous lesson.

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Figure 10. Standard page template (again)

To make a simple Web page, begin with this pattern. Copy-and-paste the code into your editor, and get started.

Notice that this template has several different tags in it: <html>, <head>, <body>, and others. Individual HTML tags aren’t very useful by themselves. It’s when tags are combined into patterns that they start to do useful work.

You saw this just above:

It tells you that a pattern for what you just read about is in the pattern library. In this case, the code in Figure 10 is in the library.

Remember: patterns are your friends.


You learned about:

  • The structure of a Web page.
  • What character sets are.
  • Indenting, which makes it easier to change a page.
  • Why it’s important to get the title right.
  • What patterns are.
  • Patterns make your life easier.

What now?

Let’s start adding some HTML tags to the body.


How to...