A Web page with text
Where are we?
The foundations book explained how browsers use HTTP to get HTML files from servers. Let’s open up those files and look inside.
This chapter’s goals
By the end of this chapter, you should:
- Know what the overall structure of a Web page is.
- Know some basic HTML tags.
- Be able to create and upload HTML pages with headings, text, lists, and other stuff.
Let’s get started.
The structure of a Web page
This lesson’s goals
By the end of this lesson, you should know:
- 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
titleright.
A template
Web pages are plain text files. Most have more-or-less the same structure. Here it is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TITLE</title>
</head>
<body>
BODY
</body>
</html>
Figure 1. Standard page template
Have a look at this page in your browser.
The page is made up of tags. Tags use < and >. Most tags come in pairs, like <title></title>. The first part – <title> – opens the tag. The second part – </title> – closes the tag. You’ll see this pattern a lot. Open tag, close tag, open tag, close tag.
Exercise: Upload the template
Upload the code in Figure 1 to your server. I’ll lead you through it this time.
We’ll do the following:
- Make a file on your computer, with the template code from Figure 1 in it.
- Upload the file to your server.
- Look at the result in your browser.
Making the file
On your computer, create a new directory for each exercise. For example, within your My documents directory, you might create a directory called coredogs.
This is where all of your CoreDogs work will go. Within that, make a directory called clientcore (lowercase only!). Your work on ClientCore exercises will go here. Within clientcore, make a directory for each chapter. The directory for this chapter might be called web-page-with-text. Within that, make a directory for this exercise called upload-template.
You’ll end up with:
Try to keep things organized. It’s a little more effort at the beginning, but it will save you trouble later.
Start an editor, like Notepad++. Download and install Notepad++ if you haven’t already. It’s free.
As I’m writing this, the name of the file you want is npp.5.7.Installer.exe. Download that file, and run it. It will install Notepad++.
Remember, do not use Microsoft Word, or another word processor. Use a plain text editor. Word and other word processors add extra stuff to files, and that will mess up your work.
Run Notepad++, or another editor you choose. Notepad++ will open with an empty file.
Copy the code in Figure 1. There’s an easy way to do this that doesn’t get the line numbers. Rest the mouse anywhere in the figure. A toolbar appears in the upper right corner of the figure:
The second button will copy the code in the figure to the clipboard, without any of the line numbers. W00f!
Paste the code into Notepad++. Save the file into the upload-template directory on your computer. Call the file template.html, or some such. Remember to use only lowercase letters in the file name. This is because your Web server probably runs Unix, which is case-sensitive. It thinks that template.html and Template.html are different files.
Upload your file
Start your FTP program, like WinSCP.
Connect to your Web server. We talked about this process earlier. Here’s a reminder.
When WinSCP starts, it will show you a Login dialog. click New, and enter your connection information from the email you got from your Web hosting company. Like this:
You’ll see a split screen, like this:
If you see just one window, with no split, you probably chose the wrong interface when installing WinSCP. To fix it, click Options | Preferences (that is, click Options on the menu bar, then Preferences – at the bottom of the menu). Choose Interface. Select the Commander interface and click OK. Restart WinSCP for the changes to take effect.
Remember that only files under your Web root will be accessible on the Web. On Hostgator, the Web root is usually called www or public_html. So that’s where your file should go.
Create a new directory on your server (under your Web root) for CoreDogs projects. You might call it coredogs. Within that, create separate directories for each chapter and project. Just as you did on your PC.
To create a directory, navigate to the parent, that is, the directory that will contain your new directory. So if I wanted to create coredogs under www with WinSCP, I’d double-click on www, and create the directory there.
In WinSCP, press F7 to create a directory, or use the button at the bottom of the window:
You’ll see a dialog that lets you type the name of the directory:
Click OK, and the new directory will appear. W00f! Double-click on the directory to open it. You can create more directories under that one.
As with the files on your own computer, I recommend creating a separate directory for each book (e.g., clientcore), and within that a directory for each chapter (e.g., web-page-with-text), and within that a directory for each exercise (e.g., upload-template). That would give you a path like /www/coredogs/clientcore/web-page-with-text/basic-template. This seems like a lot of work, but it’s better than accidentally erasing things you need.
Time to upload the file. Find the file you created (maybe you called it template.html) in the left window. Remember that the left window is the file system on your computer.
WinSCP has a drop-down that gives you quick access to your Desktop, documents, drives, and such:
Use the drop down and the directory tree below it to navigate to where you stored the file you created.
Upload a file with good old drag-and-drop, from the left to the right:
You should see your file on the server. W00f!
Wow, that’s a lot to go through to upload a file.
True. But after a while it gets to be second nature. You won’t even think about it.
Can’t you just give me a script for everything? Tell me what to click, and then I’ll click it. I don’t need to actually know all this stuff about FTP. I’ll just follow the instructions.
That would be nice, but it wouldn’t work. Trying to memorize each small step is too hard, and too inflexible.
Instead, remember the larger steps that each small step is a part of. Such as:
- Large step - Connect to the server
- Small step - Start WinSCP
- Small step - Use the connect dialog
- Tiny step - Type in the server name
- Tiny step - Type in the user name
- Tiny step - Type in the password
- Tiny step - Select FTP
- Tiny step - Click the Login button
- Large step - Upload the file
- Small step - Find the file to upload in the left window
- ...
But I only do the little steps. You work out the list of steps, and I’ll just follow them. Why is that a problem?
Because things change.
Say that you switched from Hostgator to another company. Let’s call it Serverdile. They use SCP instead of FTP (FTP is a more secure version of FTP). Someone who just memorized the small steps would be stuck. S/he would get to “Select FTP” step, and would do the wrong thing. It wouldn’t work, and s/he wouldn’t know why.
Someone who knew what s/he was doing would know, “Oh, this affects the ‘Connect to server’ step. I’ll change that one thing.” Everything would be just fine.
Suppose you were hiring someone for a job. Who would you rather have as an employee?
- Someone who needed a new set of instructions every time something changed.
- Someone who could adapt to changes him- or herself, because s/he knows why the small steps are done.
The first person would need constant hand-holding. S/he would run back to you every time something changed, saying “These steps don’t work anymore. Please fix them.” Things change a lot in tech land. You would be forever fixing things for this employee.
The second person would change the instructions him- or herself. S/he wouldn’t interrupt you constantly.
Which person would be a better employee? Which one would you hire? Which one would you pay more?
If you want a job where someone tells you exactly what to do all the time, well, you might spend the rest of your life in low paying jobs. Good luck with that.
Look at the file in your browser
So you’ve uploaded the file, from your PC to your server. Other people can now see the file on the Web.
We talked earlier about the relationship between server files and URLs. Remember that for a static site, a URL is a path to a file on a server’s hard disk. That is, a path from your server’s Web root (like /public_html/) to the file. So if the file was at /public_html/mydir/evil.html on the server, its URL would be http://siteofdoom.com/mydir/evil.html.
Open up a browser. Type in the URL of the file you just uploaded. For example, if your site was drewid.com, you might enter http://drewid.com/coredogs/clientcore/web-page-with-text/upload-template/template.html.
You should see something like this in your browser:
W00f! W00f! W00fy-w00f-w00f! With w00f sauce!
Later, if you forget the basics of creating and uploading a page, come back to this exercise.
Enter the URL of your page as your solution to this exercise.
(Log in to enter your solution to this exercise.)
Nesting
So you’ve uploaded the template. Let’s have another look at it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TITLE</title>
</head>
<body>
BODY
</body>
</html>
Figure 1 (again). Standard page template
Tags are nested, that is, tags are inside other tags. It’s important to get the nesting right. Inner tags should be closed before outer tags.
Figure 2. Tag nesting
What happens if you violate nesting? Well, maybe nothing, maybe something. Different browsers handle invalid HTML differently. Sometimes it will look fine in Internet Explorer, but not in Firefox. Or it might look OK on a Mac, but not a PC. It’s hard to tell without looking at all the combinations.
Webers strive for predictability. They want to create a page once, then have it work on every browser, on every operating system. That isn’t always feasible. But the more closely you follow the rules of HTML, the better off you’ll be.
Indenting
Use consistent indenting to make HTML easier to read, and errors in markup easier to spot. (“Markup” is just another name for text with HTML tags in it.)
Figure 3. Indenting
Browsers don’t care about indenting. Both pieces of code in Figure 3 would render identically in a browser. But the first one is easier to follow.
If it looks the same to the user, why would it matter? In the end, it’s the user experience that’s key.
Can I answer that one?
Sure.
It’s change again. The one thing you can count on is change.
A page might be fine today. But tomorrow, a marketing type is going to want to change the text. And next week, it will be different again.
The easier the markup is to read, the easier it will be to change. And the fewer mistakes you’ll make.
Webers think not only about the results (that is, the HTML page), but about the work processes they use to create the results. They try to make the work processes fast and accurate. The indenting in Figure 3 would help.
DOCTYPE
Let’s look at Figure 1 again.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TITLE</title>
</head>
<body>
BODY
</body>
</html>
Figure 1 (again). Standard page template
The first line tells the browser what HTML standard we are using. The World Wide Web Consortium (W3C) is the organization that creates HTML standards. The current standard is HTML 4.01, though HTML 5 is waiting in the wings.
Line 1 says we’ll use the 4.01 standard, and we’ll be complying with it strictly. “strict” will give us the most predictable results across browsers.
The <head> section
All of the HTML is between the <html> tags on lines 2 and 10. <html> is a matched pair, as are most tags.
The code inside the <html> tag has two parts: the <head> section (lines 3 – 6), and the <body> section (lines 7 – 9). The <head> section contains metadata, that is, data describing the page.
Character set
Line 4 tells the browser what character set the page will use. A character set is a list of all of the symbols that can be used for a document. For example, the ancient Egyptians wrote hieroglyphs. Wikipedia says this means “tongue:”
Figure 4. Tongue
If you listed all of the different hieroglyphs they used, you would have their character set.
At one time, computers could only store upper- and lowercase letters (A-Z and a-z), digits (0-9), and a few symbols (&, @, !, space, etc.). This was called the ASCII character set.
The ISO-8859-1 character set improved on ASCII, with characters like é and ß. Better, but still not great. What about Cyrillic and Chinese characters? Huh? Huh?
Today, character sets like UTF-8 include thousands of symbols.
The two most common character sets on Web pages are ISO-8859-1 and UTF-8. The former works for Western languages, and many Webers use it. UTF-8 is slowly taking over, however. Everything that is in ISO-8859-1 is in UTF-8. We’ll use UTF-8.
The character set definition (line 4 in Figure 1) is typical of the tags in the head section. It tells the browser about the page, but doesn’t tell the browser what to show on the page. Line 4 tells the browser that the page could contain Chinese, Cyrillic, Greek, and other characters. But it doesn’t tell the browser what characters it will show to the user.
The <title>
Here’s Figure 1 again.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TITLE</title>
</head>
<body>
BODY
</body>
</html>
Figure 1 (again). Standard page template
Line 5 is the <title> tag. It doesn’t affect the main area of the page itself, but it does show up. But where? In line 5, the text for the title is TITLE. Have a look at the page template in Figure 1 in your browser. Where do you see TITLE?
Find it yet? I’ll wait.
Do do do do-do do do doo, do do do do doo, do-do-do-do-do do do do do-do do do doo, do, do-do do do, do, do, dum dum.
Yes, it’s in the top area of the browser’s window.
Figure 5. Page title
The title tells the user what the page is about.
The title appears in other places as well. First, if the user bookmarks the page, the title will show up in the bookmark list.
Second, the title will appear in search engine listings for the page. Suppose I want to know more about the musical episode of Buffy the Vampire Slayer, which, as everyone knows, is the best television ever.
I’m a Buffy fandog.
I just searched, and got this:
Figure 6. Buffy search
I went to the page, and saw this in the browser’s title area:
Figure 7. Browser title area
Then I looked at the page’s code. Here’s what it said:
<title>Once More, with Feeling (Buffy the Vampire Slayer) - Wikipedia, the free encyclopedia</title>
Figure 8. <title> tag
So the value in the <title> tag showed up in the browser title area, and the search results.
You may have seen search engines show “Untitled” for a page. This means that a Weber forgot a <title> tag.
Search engines also use the <title> tag to figure out what the page is about. If your title is “Dogs of Doom,” and a Googler searches for “doom dogs,” there’s a good chance Google will show your page. All because of the title.
The <title> tag is probably the most important tag in SEO, or search engine optimization. This is the art of getting your pages to rank high in search engine results.
A broken page
While researching this lesson, I came across some interesting code. I saw the following in Google:
Figure 9. Google listing
Strange title for a page! No way to know what the page would be about, just from the title.
I looked at the code of the page, and saw this:
Figure 10. Broken title
The page starts off OK, except for the missing DOCTYPE tag. It opens a title tag at (1). But then there’s a DOCTYPE! Huh? A complete page is embedded in the title tag of a page!
The real title is at (2), but the browser can’t pick it up. The code is so messed up that the browser can’t figure it out. And neither could the Google search engine.
This shows you the importance of well-formed markup, that is, markup that follows the rules of HTML. The code in Figure 10 is not well-formed. It confuses browsers. And it won’t show up right in searches, so people are less likely to find the page. I just found it by accident.
The body
Here’s Figure 1 again.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TITLE</title>
</head>
<body>
BODY
</body>
</html>
Figure 1 (again). Standard page template
The actual content of the page is in the <body> section, from lines 7 to 9. This is where the real action happens.
There isn’t much there at the moment. Let’s add some stuff in the next lesson.
Say I’m looking at a Web page. Can I check out the HTML behind it?
Yes, you can. In Firefox, press Ctrl-U (Windows) or Cmd-U (Mac). Or in the menu, View | Page source:
Try it. Bring up the template page in your browser. Now look at the page source. Compare it with Figure 1.
Summary
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
titleright.
What now?
Let’s start adding some HTML tags to the body.
Patterns
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?
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:
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.
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:
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:
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:
Figure 6. Horizontal 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:
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:
Figure 9. Accessing the pattern library
Here’s your first pattern. It’s the template from the previous lesson.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TITLE</title>
</head>
<body>
BODY
</body>
</html>
Figure 10. Standard page template (again)
Pattern: HTML page template
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:
Pattern: HTML page template
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.
Summary
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
titleright. - What patterns are.
- Patterns make your life easier.
What now?
Let’s start adding some HTML tags to the body.
Basic HTML tags
Where are we?
On the previous page, you uploaded a standard template for a Web page. Let’s add some tags to it.
Headings and paragraphs
Most documents have headings. A heading is like “Headings and paragraphs” just above. It identifies a piece of a document.
Create headings with tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The tags close in the normal way, so the full tags are <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, and <h6></h6>.
This is what they look like:
Figure 1. Heading tags
So if I’m writing an article, and I have three sections: Introduction, Evidence, and Conclusion. I would do it like this, right?
<h1>Introduction</h1>
<h2>Evidence</h2>
<h3>Conclusion</h3>
No, that’s a common mistake. The numbers in the heading tags are not the sequence of things. They’re the level in an outline.
Let’s say your article had these headings and subheadings:
You’d use HTML like this:
<h1>Introduction</h1>
<h1>Evidence</h1>
<h2>Creating the survey</h2>
<h2>Gathering data</h2>
<h2>Analyzing results</h2>
<h1>Conclusion</h1>
<h2>Humans are strange</h2>
<h2>Further research</h2>
Oh, OK, I get it. The numbers are whether it’s a heading, a subheading, a subsubheading, and so on.
Right!
So, headings separate sections of content. Most sections contain paragraphs. A paragraph is some text with white space before and after it. You’re reading a paragraph now.
Paragraphs are created with the <p></p> tag.
Here’s a page using heading and paragraph tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Building a Dog House</title>
</head>
<body>
<h1>Building a Dog House</h1>
<p>Building a dog house is easier if you work out what you are doing ahead of time. This page will help you with the process.</p>
<h2>Find a plan</h2>
<p>The first step is to find a plan for the dog house. There are many plans on the Web. But you need to choose carefully.</p>
<h2>Buy the materials</h2>
<p>Buy the wood, fasteners (nail, screws, etc.), paint, and whatever the plan calls for.</p>
</body>
</html>
Figure 2. Page using headings and paragraphs
You can show the page in your browser.
An <h1> is used to show the user the name of the page. This is the same as the <title> on this page, but isn’t always. For example, the page you’re reading now has <h1>Basic HTML tags</h1> for the user, but <title>Basic HTML tags | CoreDogs</title> for the browser title and search engines. This page’s title is the heading with the site name appended to it.
“Appended” means “added to the end.”
On the dog house page, <h2> is used to start the major sections of the page. You don’t have to use heading tags this way. The browser doesn’t know anything about sections and subsections. You tell it to show a heading, and it will do so. You could have HTML like this.
<h5>Building a Dog House</h5> <h1>Building a dog house is easier if you work out what you are doing ahead of time. This page will help you with the process.</h1> <h3>Find a plan</h3> <h2>The first step is to find a plan for the dog house. There are many plans on the Web. But you need to choose carefully.</h2>
Figure 3. Strange headings
The browser will do exactly what you tell it to, but it would look strange to the user.
Exercise: Try the strange headings
Create a Web page using the markup in Figure 2, but change it to use the markup in Figure 3. What do you think of the result?
(Log in to enter your solution to this exercise.)
A question.
Yes?
Do you use <h1> and <p> in CoreDogs?
Yes. If you look at the source code for this page, you’ll see them.
OK. But the fonts on the dog house page look nothing like the fonts on this page. How can they be the same tags?
The HTML tags are semantic. For example, <h1> says to “make a major heading.” But the tag doesn’t say exactly how to make a major heading, that is, what fonts, colors, etc. to use. It’s up to the browser to figure out how.
From reading books and magazines, we’re used to the concept of headings. And we’re used to them being in a larger font, and maybe bold. What you see when you look at the dog house page are the browser’s defaults for making headings and paragraphs. The defaults match our expectations.
However, Webers routinely change the way HTML tags are rendered. They explicitly tell the browser what font to use for <h1>, <p>, and so on.
That’s what I did with CoreDogs. The typeface for an <h1> is Trebuchet, Helvetica, or a generic sans serif, depending on your computer (most people will see Trebuchet). The font size is 24 pixels. We’ll talk more about typefaces and font sizes later.
The technology to change the way browsers display <h1> and other tags is cascading style sheets (CSS). It’s a key Web tech. You’ll start learning about it later in this chapter.
Pattern: Headings and content
Line breaks
Sometimes you want a paragraph to spread over several lines, without chunks of white space. Limericks have this formatting. For example:
<h1>In honor of Jim Porter</h1> <p>Kieran wrote this for Jim's birthday.</p> <p> There once was a Porter named Jim,<br> Whose voice filled the church to the brim.<br> But his puns were so bad,<br> He was bound and gagged,<br> Until it was time for the hymn.<br> </p>
Figure 4. The <br> tag
You can see the page.
The <br> tag at the end of each line breaks the line there, and continues at the beginning of the next line. It’s different from the <p> tag, because it doesn’t add white space above and below the line.
Exercise: Break tags on the same line
Create a page with the markup in Figure 4. Put the markup for the limerick all on one line, like this:
<p>There once was a Porter named Jim,<br>Whose voice filled the church to the brim.<br>But his …
How does it look in a browser? Is it any different from my page?
(Log in to enter your solution to this exercise.)
Indenting
There are many ways to indent content. A simple way that just uses HTML is to use the <blockquote> tag.
Here’s Jim’s code, with the limerick indented.
<h1>In honor of Jim Porter</h1> <p>Kieran wrote this for Jim's birthday.</p> <blockquote> There once was a Porter named Jim,<br> Whose voice filled the church to the brim.<br> But his puns were so bad,<br> He was bound and gagged,<br> Until it was time for the hymn.<br> </blockquote>
Figure 5. The <blockquote> tag
You can try it.
Add horizontal lines
You can add simple lines with the <hr> tag. hr stands for “horizontal rule.”
Webers sometimes use them to separate parts of a page. For example, many pages have footers, giving copyright and other information. I might add the following to the limerick page:
<hr> <p>© 2010, CoreDogs.</p>
Figure 6. The <hr> tag
You can see it in action.
HTML entities
There’s something strange in Figure 6. What’s that © thing in line 2?
This is called an HTML entity. It’s a code for a special character of some sort. For example, © renders as ©.
HTML entities are useful things. For example, suppose you wanted to write a page about HTML. You wanted to display this:
The
<p>tag renders a paragraph.
You type the following into your HTML file:
<p>The <p> tag renders a paragraph.</p>
See the problem? The browser hits the second <p> – the one between the words “The” and “tag” – and it starts a new paragraph. Ack!
You can use HTML entities instead, like this:
<p>The <p> tag renders a paragraph.</p>
< renders as <, and > renders as >. Now the content will look right.
Another useful entity is . It’s a nonbreaking space. Normally browsers collapse spaces together. Suppose you put six spaces together in your HTML, like this:
The browser will display them as one space:
Mostly harmless
Use several when you want several spaces. This:
<p>Mostly harmless</p>
will show as:
Mostly harmless
Wikipedia has a list of HTML entities.
Summary
The chapter is about creating HTML pages with plain text. This lesson covered the heading, paragraph, line break, block quote, and horizontal rule tags. We also talked about HTML entities.
What now?
Let’s look at some tags you can use to do simple font work.
Simple font tags
Where are we?
You know how to create a Web page with headings, paragraphs, line breaks, and other things. Let’s have a look at some simple tags for font rendering.
Note that most font work is done in CSS. We’ll look at that in the next lesson. The tags here only give you limited control.
Strong
The <strong> tag makes text grab the reader’s attention. <strong> usually makes text bold. I say “usually,” because a Weber can change this (though few do).
Here’s an example:
<p>"Sir, I am a <strong>dog</strong>, not a cat!" said the Scottie.</p>
“Sir, I am a dog, not a cat!” said the Scottie.
Sometimes I use <strong> when introducing a new term, like cascading style sheets.
Emphasized
The <em> tag usually makes text italic. I use <em> when something is important, or to add stress to mimic speech.
An example:
<p>"But are you <em>happy</em>?" asked the cow.</p>
<p>"Yes," replied the dog. "<em>Very</em> happy."</p>
“But are you happy?” asked the cow.
“Yes,” replied the dog. “Very happy.”
You can imagine a cow and a dog talking, with stresses on the italicized words.
Exercise: How many dogs does it take ...
Create a page that looks something like this when rendered.
When you have finished, compare the HTML source code of my solution with yours. Look at the way my HTML is laid out, especially the indenting.
Upload your solution to your server, and enter the URL below.
[solution]You can try my solution
(Log in to enter your solution to this exercise.)
Summary
In this lesson, we talked about basic font manipulation with <strong> and <em>.
What now?
These tags let you do a little basic font work. Let’s see how you can take it further, and change typefaces, colors, and other stuff.
Adding style with CSS
Where are we?
You know what the structure of a Web page is, and how to use some simple tags to add content. But the pages you’ve created so far are, well, plain. Time to fix that.
This page is about typography, the way that text looks.
This lesson’s goals
By the end of this lesson, you should:
- Understand the elements of font styling.
- Be able to style text.
- Be able to change background colors.
- Know how typography affects the mood of text.
Elements of fonts
Most people use the word “font” in an imprecise way, without understanding all the different things that go together to make up a font. That’s OK, but when you do Web work, it helps to understand the pieces.
The font of a character depends on its typeface, weight, variation, color, and other things. Let’s look at the main properties.
Typeface
Typeface is what many people mean when they talk about fonts. Typeface is the basic shape of a character. The shape is modified with bolding, underlining, and other things, to create fonts.
Here are some common typefaces on a Windows PC:
Figure 1. Typefaces
One way typefaces differ is whether they are serif or sans serif. Times New Roman is a serif typeface. Let’s zoom in on a word:
Figure 2. Serif typeface
You can see that there are decorations on the characters. The decorations are called serifs.
Arial is a sans serif typeface. “Sans” means “without.” Let’s zoom in on a word:
Figure 3. Sans serif typeface
You can see that it doesn’t have those decorations.
Serif fonts can improve readability, because they give your eyes extra horizontal lines through the text. However, this only works at medium to large font sizes. At smaller sizes, the serifs can make these fonts difficult to read on a computer screen.
Many Web pages uses sans serif fonts for regular body text. Serif fonts, if used at all, are reserved for headings.
So one way typefaces differ is whether they are serif or sans serif.
Another way they differ is whether they are fixed or proportional.
Figure 4. Fixed vs. proportional
On the top line, each character takes the same amount of horizontal space. The “l” and the “o” in “love,” for example, have the same width. The typeface has serifs on the l to make it wider. This is a fixed typeface, or fixed space typeface.
On the bottom line, the “l” in “love” takes less horizontal space than the “o.” This is a proportional typeface.
Serif fonts can be proportional. Compare the widths of the “i” and the “m” in Figure 2.
Figure 2 (again). Serif typeface
There are also “cursive” and “fantasy” typefaces. Here are some examples.
Figure 5. Cursive and fantasy typefaces
You wouldn’t use them for large blocks of text. They’re for headings and other things you want to draw attention to.
The typefaces in Figure 1 are for Windows. Macs and Linux machines don’t always have the same typefaces. So if you use Windows typefaces on a Web page, the page might not look right on a Mac. We’ll see how to deal with this later.
It’s not worth being picky about the correct use of the words “font” and “typeface,” because most people don’t know or care about the difference. I use the term “font” mostly, even when I’m talking about typefaces. I only use “typeface” when I need to be precise.
Size
There are many ways of specifying font size: points, ems, and others. We’ll use pixels; it’s the simplest thing to do. A pixel is a dot on your screen. We’ll talk more about pixels later.
I find 14 pixels to be a good base size.
Here’s some text in different sizes.
Font size: 10px.
Font size: 14px.
Font size: 18px.
Font size: 24px.
Font size: 48px.
Weight
Weight refers to how bold the font is. Most people stick to two choices: bold and normal.
Variations
There are other font variations. Some people like to use small caps for headings:
Figure 6. Small caps
Color
Color is a complex topic. We’ll talk more about it in the chapter on images. For now, just know that there are some common color codes you can use on the Web.
You can see a color chart. Here’s a sample:
Figure 7. Color sample
Colors have names and codes. The names won’t always work, so we’ll use the codes. You could try to work out the codes yourself. But most people find a color they like on a color chart, and copy-and-paste the color code.
Styling fonts
You’ve seen how fonts vary, with different typefaces, weight, size, color, and so on. How do you actually get those effects on the screen?
Here’s a page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>A page</title>
</head>
<body>
<h1>A page</h1>
<p>This is a page.</p>
<p>It is <strong>not</strong> a dog.</p>
<h2>This is subheading.</h2>
<p>That subheading is not a dog, either.</p>
</body>
</html>
Figure 8. A page with no styling
It looks like this is my browser:
Figure 9. Page rendered
You can see the page in your browser.
Let’s add some new stuff to the <head> of the page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>A page</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #F5F5DC;
}
h1 {
color: #660000;
}
h2 {
color: #006600;
}
p.important_note {
color: red;
font-weight: bold;
font-variant: small-caps;
font-style: italic;
}
</style>
</head>
<body>
<h1>A page</h1>
<p>This is a page.</p>
<p>It is <strong>not</strong> a dog.</p>
<h2>This is subheading.</h2>
<p class="important_note">That subheading is not a dog, either.</p>
</body>
</html>
Figure 10. Styled page
It looks like this:
Figure 11. Styled page rendered
You can see the page in your browser.
Lines 6 to 24 tell the browser that I want to change the way the page looks. The technology for this is called CSS, for cascading style sheets. Lines 7 to 23 are called a style sheet.
A style sheet uses rules. The syntax of the rules is not the same as HTML tags. The official standards for CSS are separate from the official standards for HTML.
Here’s the first rule:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #F5F5DC;
}
This part:
body {
is a selector. It tells the browser what the rule applies to.
This rule applies to the <body> tag, which includes all of the content of the page. The <body> is the container of the page’s <h1>, <h2>, and <p> tags. Rules applied to containers apply to their contents as well.
font-family changes the typeface:
font-family: Arial, Helvetica, sans-serif;
Recall that different computers have different typefaces installed. Arial is a standard Windows typeface. But what if the user has a Linux machine? There’s a good chance that the computer won’t have Arial.
In that case, the browser goes down the list, and chooses the first typeface that is installed on the machine. So, the browser will look for Arial first. If that isn’t on the computer, the browser will look for Helvetica. That’s a standard Mac typeface. If the browser can’t find that either, it will look for sans-serif. This isn’t an actual typeface, but instead tells the browser “use the system’s default sans serif typeface, whatever it is.”
If a typeface name contains spaces, you need to put quotes around it, like this:
font-family: "Trebuchet MS", Helvetica, sans-serif;
Here’s that rule again:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #F5F5DC;
}
We’ve talked about the first bit, the font-family.
The next style is:
font-size: 14px;
This sets the page’s default font size to 14 pixels. Some tags will adjust this. <h1> will choose something bigger, for example.
The last style in the body rule is:
background-color: #F5F5DC;
This sets the background color on the page. Where did that strange code come from, the #F5F5DC? I started by looking at the color chart. I found a color I wanted – beige – and wrote down its color code. Then I used the code as the background-color.
Let’s look at the stylesheet again:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>A page</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #F5F5DC;
}
h1 {
color: #660000;
}
h2 {
color: #006600;
}
p.important_note {
color: red;
font-weight: bold;
font-variant: small-caps;
font-style: italic;
}
</style>
</head>
<body>
<h1>A page</h1>
<p>This is a page.</p>
<p>It is <strong>not</strong> a dog.</p>
<h2>This is subheading.</h2>
<p class="important_note">That subheading is not a dog, either.</p>
</body>
</html>
Figure 10 (again). Styled page
We covered the body rule in lines 7 to 11. It was a long discussion, because everything was new.
The next rule is:
h1 {
color: #660000;
}
The rule applies to all <h1> tags on the page. It leaves everything alone (typeface, weight, etc.), except for the color. 660000 is a dark red that I like for headers, so I used it here.
The next rule is:
h2 {
color: #006600;
}
Like the previous one, it just changes a tag’s color, this time to a dark green. All of the <h2>s on the page will be dark green.
The last rule is a little different. Sometimes you want to give text on a page a special look. For example, you might want all <p> text to look the same, except when you want to draw the user’s attention to something special. Maybe you want text like “On sale! Today only!” to stand out.
Here’s the rule:
p.important_note {
color: red;
font-weight: bold;
font-variant: small-caps;
font-style: italic;
}
The period (.) after the p creates a CSS class. A class is a rule that I can apply selectively. I can use it on some <p>s, and not others.
The class is named important_note. I made up that name. I could have called it read_me_now, or something else.
Now I have two styles for <p> tags: the regular style, and the important_note note style. I choose when I want to use one with the class attribute of the <p> tag. For instance:
<p>It is <strong>not</strong> a dog.</p>
<p class="important_note">That subheading is not a dog, either.</p>
The first paragraph uses the regular style. The second applies the important_note class.
You can also define classes like this:
.important_note {
color: red;
font-weight: bold;
font-variant: small-caps;
font-style: italic;
}
The p is gone from the selector. You can apply this class to any tag. E.g.:
<h2 class="important_note">Warning! Cat detected!</h2>
All of the style rules are inside these lines:
<style type="text/css">
...
</style>
Do I have the include those?
Yes. <style> is an HTML tag. It tells the browser that you’re going to be adding some style rules. Don’t forget the <style> tag.
Exercise: Style a joke
Make a page that looks like this:
Hints:
- I used the color gold from the color chart.
- I used only
<h1>and<p>in the<body>. - I defined a class called
attributionfor the last line.
Upload your solution to your server. Put the URL below.
(Log in to enter your solution to this exercise.)
Font types in CSS
Several different CSS properties set font types. Sometimes you use font-style:
font-style: italic;
No prizes for guessing what that does.
Sometimes you use font-variant:
font-variant: small-caps;
Lowercase characters use the shape of uppercase characters, but at a smaller size. An interesting effect.
Sometimes you use font-weight:
font-weight: bold;
I wonder what that does? Hmm… You can also use
bolderandlighter.
Sometimes you use text-decoration:
text-decoration: line-through;
Puts a
line through the text.
When I want to, say, put a line through some text, I often forget whether I need to use text-decoration, font-variant, or something else. I look it up. A good place to start is the SitePoint reference.
Text alignment
Left alignment
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Right alignment
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Center alignment
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
There’s only one property here:
text-align: left;
... or right or center. That’s it. For example:
h1 {
text-align: center;
}
... would center all <h1>s.
Here’s another example:
p.aside {
text-align: right;
}
This creates a class called aside. Use it like this:
<p class="aside">Dogs are cool!</p>
Here’s how it renders:
Dogs are cool!
Exercise: Report template
Make a Web page that’s a template for company reports. Here’s a screenshot (made narrow to fit):
Figure 1. Report template
The typeface is Verdana. The color for the background is #FFFFCC. The heading colors are #660000 and #006600. The font is 14px high.
Upload your solution to your server. Put the URL below.
(Log in to enter your solution to this exercise.)
Aesthetics
We’ve looked at the many different ways you can control typography. They affect how readable the text is.
But there are aesthetic aspects to fonts as well. Aesthetics is about the moods that fonts evoke. At least that’s how I’ll use the term.
Match the mood of a font to the text. Here are some headings for pages advertising different events.
Figure 12. Font moods
You can see which fonts match which events.
Going deeper
- Text spacing in CSS. This article explains how to control the whitespace around letters, words, and lines.
- Safe typefaces. This article lists typefaces that are available on Windows, Macs, and Linux machines. It explains that you can create graphics to include unusual fonts in your Web pages.
Summary
In this lesson, you learned about fonts, and how to style them with CSS. You learned to use classes to apply different styles to different page elements.
What now?
There are a lot of options with CSS. You can do almost anything!
Too much information!
I’m feeling overwhelmed here.
Me, too. There are so many choices!
I hear you.
Some people get into typography in a big way. But most have some simple rules that work most of the time.
Here are some things that I often do.
- Use a 14px font for most text.
- Use larger fonts for headings.
- Use smaller fonts for support text, like help messages.
- Use a sans serif typeface for everything.
- Left-align everything.
Pattern: Basic text styling
I vary these rules depending on the site. For instance, I might switch to serif headings, if that matches the mood of the site.
You might find some colors, typefaces, etc., you like. Keep a note of them. When you start a new project, you’ll have something good to start with.
What now?
This lesson gave you some useful guidelines. Hmm. Maybe we should remember them.
Patterns again
Where are we?
You’ve learned about paragraphs, headings, horizontal rules, CSS, and other stuff. You’ve seen some basic guidelines that I use when I format a new page.
This lesson’s goals
Let’s talk a little more about patterns.
Patterns
In the previous lesson, I showed you some rules that I often use for formatting text. Like “Use a 14px font for most text,” and “Use larger fonts for headings.” was that helpful?
Yes, very.
Why?
There are lots of CSS rules. You can use them in a bazillion different combinations. It was making my brain hurt.
You gave us a…, well, some CSS rules that work OK.
Where did I get those rules?
You said that you’d used them in the past, that they worked for you.
Right!
Remember that a pattern is a way of solving a problem that someone has found useful. Instead of working out the solution to a problem all over again, sometimes you can just grab a pattern than works.
CoreDogs has a pattern library. To get to it, click on the Tools tab, and then the Patterns tab:
Figure 1. Accessing the pattern library
Look at the Basic text styling pattern. It uses the guidelines from the previous lesson. The pattern includes helpful tips, like using quotes around typefaces that have spaces in their names.
Also look at the Title – Details pattern. It tells you how to use section headings. The pattern uses CSS margins. We haven’t covered that yet; that comes later. But you should be able to follow the pattern.
Some patterns are often used together, or are alternatives to each other. Both of the patterns just mentioned link to each other in Related patterns.
Figure 2. Related patterns
Adjusting patterns
Patterns are shortcuts, right?
Yes.
But is using someone else’s shortcut always a good idea? It might not do exactly what you want.
Good point!
You usually need to adjust patterns, so they make sense for your use case (that is, the site you are working on at the moment). For example, the Title – Details pattern uses the same color for text and titles.
Figure 3. Title text and detail text are the same color
But maybe you want different colors.
Say you’re making a site for a school that has the color scheme blue and white. These colors are part of its branding (we talked about branding earlier). You might want the text to look like this:
Figure 4. New colors
So you need to adjust the pattern.
What this means is that you can’t just throw the pattern in without understanding it. You need to understand it, so you can change it to fit the job.
Patterns are not like Lego bricks that you can snap together. They’re more like cookie cutters.
Figure 5. A cookie cutter
Image from WikiHow.
You can just stamp out the basic shape. But if you need to, you change the shape before you put the cookie into the oven. Maybe trim off the edges of the hat, and round out the head.
Figure 6. Original and changed cookie
Adjust patterns as you need to, to fit the goals of your project.
Other pattern libraries
The CoreDogs pattern library was created to help you learn Web tech. The patterns are basic, and easy to use.
Professional Webers might prefer other libraries. The Yahoo pattern library is an example.
Summary
- A pattern is a proven way of solving a problem.
- Reusing good patterns makes it easier and faster to create a good Web site.
- CoreDogs has a useful collection of patterns.
- You need to understand how each pattern works, so you can adjust it as needed.
What now?
Let’s see how you make lists of stuff.
Making lists
Where are we?
You know the structure of an HTML page. You know about headings, paragraphs, indenting, emphasis, and other stuff. You know some basic CSS styling.
Let’s look at HTML tags that make lists. There are two types of lists: unordered and ordered.
Unordered lists
Unordered lists look like this:
- An item
- Another item
- Yet another item
They’re called “unordered” because they just show bullets in front of each item, rather than numbers.
The list above can be made like this:
<ul> <li>An item</li> <li>Another item</li> <li>Yet another item</li> </ul>
Figure 1. An unordered list
Pattern: Lists
Notice that the <li> tags are nested inside the <ul> tags. It’s important to get the nesting right.
Also notice the indenting. The visual layout of the code matches the nesting of the HTML tags. The indenting makes the page easier to change. If you need to add things in the middle of the list, for example, the indenting will help you figure out exactly where your new data needs to go.
Exercise: Unordered list of dog breeds
Find a list of dog breeds on the Web. Create a Web page with a list of five of your favorites. List them alphabetically.
Upload your page to your server, and add a link below.
(Log in to enter your solution to this exercise.)
Ordered lists
The code for an ordered list is very similar. Change the <ul> to an <ol>, and you’ve got it.
<ol> <li>An item</li> <li>Another item</li> <li>Yet another item</li> </ol>
Figure 2. An ordered list
Pattern: Lists
This looks like:
- An item
- Another item
- Yet another item
Exercise: Ordered list of dog breeds
Find a list of dog breeds on the Web. Create a Web page with a list of five of your favorites. List them in your order of preference: favorite first, next favorite second, etc.
Upload your page to your server, and add a link below.
(Log in to enter your solution to this exercise.)
Nested lists
Lists can be nested, that is, one list can be entirely inside another list. Here’s some code.
<ul>
<li>19th century
<ul>
<li>1836: Eunice (mastiff) crowned Bitch of New South Wales.</li>
<li>1840:
<ol>
<li>Isaac (lab) eats 15 pounds of figs at Moreton Bay.</li>
<li>Thark (sheltie) barks for 17 hours nonstop. Riots in Port Jackson.</li>
</ol>
</li>
<li>1895: Booblo (Welsh terrier) marks Barton as future PM.</li>
</ul>
</li>
<li>20th century
<ul>
<li>1915: Groft (border collie) rescues sausages under fire.</li>
<li>1967: Lilabeth (portuguese water dog) directs shark to prime ministerial snack.</li>
<li>1975:
<ol>
<li>Goofer (collie) bites PM.</li>
<li>Goofer (collie) bites PM again.</li>
<li>Kerr (govenor general) bites PM.</li>
<li>Goofer (collie) becomes PM.</li>
</ul>
</li>
</ul>
Figure 3. Nested lists
Here’s how it renders:
- 19th century
- 1836: Eunice (mastiff) crowned Bitch of New South Wales.
- 1840:
- Isaac (lab) eats 15 pounds of figs at Moreton Bay.
- Thark (sheltie) barks for 17 hours nonstop. Riots in Port Jackson.
- 1895: Booblo (Welsh terrier) marks Barton as future PM.
- 20th century
- 1915: Groft (border collie) rescues sausages under fire.
- 1967: Lilabeth (portuguese water dog) directs shark to prime ministerial snack.
- 1975:
- Goofer (collie) bites PM.
- Goofer (collie) bites PM again.
- Kerr (govenor general) bites PM.
- Goofer (collie) becomes PM.
Figure 4. Rendered nested lists
Notice that:
- Lists can be nested to any depth.
- Ordered lists can be nested inside unordered lists. The reverse is also true; unordered lists can be nested inside ordered lists.
- Inner lists are completely contained within
<li>tags of outer lists.
- The indenting is essential in figuring this out. Not for the computer, but for a person trying to update the list.
Styling lists
You can style lists with CSS. You can apply all of the font styles we looked at earlier: font-family, color, and so on.
Exercise: Styling lists
Make a page like this:
The background color of the page is #FFFFEE. The silly text is #FF1493. The silly typeface is Comic Sans MS. The rest of the page is Arial. The base text size for the body is 14 pixels.
Hint: create two different classes for the <ul> tag, plus a rule for the <body> tag.
Upload your page to your server, and add a link below.
(Log in to enter your solution to this exercise.)
List bullets
You can change the bullets in unordered lists. The “bullets” are the symbols on the left of each list item. Change them with list-style-type, like this:
list-style-type: circle;
You can use disc, circle, square, or none.
Here’s some code. You can see it in action.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Styling lists</title>
<style type="text/css">
li {
list-style-type: square;
}
</style>
</head>
<body>
<h1>Styling lists</h1>
<ul>
<li>Affenpinscher</li>
<li>Afghan hound</li>
<li>Airedale terrier</li>
<li>Akita</li>
</ul>
</body>
</html>
Figure 5. Styling list items
Exercise: Styling lists again
Make a page like this:
The bullet in the silly list is different.
Upload your page to your server, and add a link below.
(Log in to enter your solution to this exercise.)
Going deeper
SitePoint has a nice CSS list reference page, if you want to know more about styling lists.
Summary
In this lesson, you learned:
- The basic structure of an HTML page.
- A set of basic HTML tags, including headings, paragraphs, emphasis, and lists.
- How HTML entities can be used for special symbols (like ©) as well as to show HTML code.
- The importance of correct indenting in helping Webers do their work accurately.
- How to use CSS to style fonts and change list bullets.
What now?
You know how to make Web pages with text. You know how to make them look good, with colors, fonts, and other things.
But what about the words themselves? The next lesson is about writing for the Web.
Writing for the Web
Where are we?
You know how to make Web pages with text. You know how to make them look good, with colors, fonts, and other things.
But what about the words themselves? That’s what this lesson is about.
This lesson’s goals
By the end of this lesson, you should:
- Know that you are writing for site users and owners, but the users come first.
- Know some guidelines for writing for the Web.
The Web is text (mostly)
Much of the information on a Web site is in text. Some is in images; we’ll talk about that later. But getting the text right is important.
Most of the ideas on this page come from two excellent books:
(Click to buy from Amazon.com.)
(Click to buy from Amazon.com.)
Who are you writing for?
You’re writing for two stakeholders:
- Site users
- Site owners
Most users don’t “surf.” They spend time on a site because it helps them. Find a product, learn about a band, laugh at fails.
Owners spend money on a site because they have information they want users to see. Stuff on sale, tips on playing a game, when the book club meets.
The interests of users and owners may conflict. Say there’s a page about an MP3 player. Some users want just the basic facts about the product. Some owners want users to read a thousand words on why this is the best MP3 player ever.
On the Web, users are in control. If they don’t want to read a thousand words? They go to another Web site.
Site owners are not in control of user’s time. Someone will keep reading a Web page only if s/he keeps getting value from doing that.
Part of the writer’s job is to write for users, while still conveying the owners’ key messages.
A passel of guidelines
Here are some guidelines for writing Web text.
Less text
Drop as many words as you can. Use simple words. Write “use simple words,” not “Avoid unnecessary linguistic complexity in the presentation of textual information.”
Keep sentences and paragraphs short.
Active voice
Sentences have subjects and objects. Here’s a sentence:
The dog liked the bone.
The dog is the subject, the thing the sentence is about. The bone is the object.
Active voice means the subject comes first in the sentence, as in “The dog liked the bone.” Passive voice puts the object first:
The bone was liked by the dog.
Here’s another sentence pair:
Head bangers like this product.
This product is liked by head bangers.
You can use passive voice sometimes, but not a whole page of it. It’s harder to read, because your brain has to do more work to figure out what a passive voice sentence means.
Less happy talk
Here’s some happy talk:
Welcome! And best wishes from everyone at X Corp.! We’re glad you’re here at our site. Thank you for coming. We value you, and just want the opportunity to make your life better, with our fine line of products. They’re great! And if you use them, you’ll be great, too! Everyone will like you. We’ll like you, and be your best friend forever. You’re in for a great experience on our site. Have a nice time!
It doesn’t help the user much.
Here’s the happy talk from the CoreDogs home page:
Figure 1. CoreDogs home page happy talk
This is the only thing on the page that isn’t about CoreDogs. I could get rid of it, but that dog is very cute.
Eliminate instructions
Here’s the search field on this page:
Figure 2. Search form
You know how to use this. No instructions needed.
The tree menus:
Figure 3. Tree menus
You already know what the + and – do.
Search and the tree menu don’t need instructions because you’ve seen them before. When there’s something different on your site, you might need to add instructions.
But don’t push instructions on the user. Let the user decide whether to see them. Here’s a widget you’ve seen on the exercise pages:
Figure 4. Public widget
To get help, click on the help dog – but you decide whether you want it.
CoreDogs has a help section section. It isn’t forced on you. You decide whether you want to use it.
Write for scanning
Write so users can quickly look over the page, without having to read it all.
- Start a long page with a short summary.
- Put stuff people look for most often at the top of the page.
- Use section headings. Make them different from normal text. Change the font size, weight, color, etc. Think about having a table of contents for a long page.
- Make links look like links. Underlining is good. Don’t underline anything but links.
Use lists
Make lists look like lists, rather than putting them in text.
Here is a list:
There is the blue thing. And then the red thing. The red thing is way cool! Really, it is. Third, there’s the brown thing. Last, but not least, the green thing.
Do this instead:
- Blue thing.
- Red thing – way cool!
- Brown thing.
- Green thing.
Sans serif
Use it. People like it better.
Color contrast
Make the text color easy to read on the background color.
Text size
Older people have trouble with small font sizes. I use 14px as a rule. Larger for headings, of course.
Going deeper
Jakob Nielsen has a well-regarded piece on writing for the Web.
Julie Meloni wrote a short article on writing for the Web. It’s based on Nielsen’s work.
Summary
You are writing for site users and owners, but the users come first.
Guidelines for Web writing:
- Less text
- Active voice
- Less happy talk
- Eliminate instructions
- Write for scanning
- Use lists
- Sans serif
- Color contrast
- Text size
What now?
Time to work on your eMe site.
eMe: Some text pages
Where are we?
You’ve learned some text tags, and a little about styling. You know how to make lists. You’ve read about writing for the Web.
Pages about stuff
Earlier, you thought about stuff you would put on your Web site. Time to make some pages. Create at least two.
If you can’t think of anything, write some pages about yourself. One about your history. Where you were born, schools you went to, like that. The second page could be about your interests. Hobbies, music you like, games you like, etc.
Create a few more pages, if you want. Go over your list of interesting stuff.
Styling
All the pages should use the same style rules. Pick a typeface you like, colors, and so on. You can start with the basic text styling pattern, or start from scratch. Mess around, and find something you like.
External style sheets
Say you make four pages. They all have the same styles. One way to do this is to get the style right on one page, then copy-and-paste the <style> section into the other pages.
The problem is this: what if you decide to change the styles? Suppose you set the background color of all the pages to #FFFFC0, a brightish yellow. Then you decide you like #FFFFEE better. It’s a very pale yellow. You would have to open every HTML file, and make the same change. It would be easy to make a mistake.
You’ll learn more about color codes later.
There’s a better way:
- Create a separate file that contains only CSS styles.
- In all the HTML files, add a link to the CSS file.
For example, suppose I had this page. Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>A page</title>
<style type="text/css">
body {
background-color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FEFEF2;
}
h1 {
color: #FFD700;
}
</style>
</head>
<body>
<h1>A page</h1>
<p>This is a page.</p>
</body>
</html>
Figure 1. A page
The first thing I do is remove all the CSS rules, and put them in a separate file. I’ll call the file styles.css, though I could call it whatever I like. Usually I give the file a .css extension, though I don’t have to. I’ll put the file in the same directory as the page.
I could put it in another directory. We’ll see that later.
Here is styles.css:
body {
background-color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FEFEF2;
}
h1 {
color: #FFD700;
}
Figure 2. styles.css
Notice that the <style> tag isn’t there. It’s HTML, and does not belong in the file.
Now, I delete the <style> section from page.html, and replace it with this:
<link rel="stylesheet" type="text/css" href="styles.css">
I put the name of the file I just created in the href attribute. Don’t forget the extension.
Here’s what the HTML file looks like now.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>A page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>A page</h1>
<p>This is a page.</p>
</body>
</html>
Figure 3. HTML file with external style sheet
The page will look the same as before. Have a look.
Reusing the style sheet
I can use this line in as many files as I like:
<link rel="stylesheet" type="text/css" href="styles.css">
I could have a hundred pages using the styles, if I want.
The <body>’s background color is black. You can see that in line 2 of styles.css:
background-color: black;
Suppose I want the background on all pages to be dark gray. I change this one line in styles.css:
background-color: #404040;
Every file that links to styles.css will change. If that’s 100 pages, then 100 pages change. W00f!
eMe: Text pages with external styles
Write some pages about something on your interesting stuff list. Create at least two, but more if you like.
Make sure all the pages use the same style rules. Use an external style sheet. You can put all the files in the same directory.
Upload your files to your server. Put the URLs of the files below.
(Log in to enter your solution to this exercise.)
Summary
- Using an external style sheet lets you change many pages at once.
What now?
Time for some more exercises.
Exercises: A Web page with text
You should do the four recommended exercises. Do the optional exercises if you want more practice.
Exercises in the Explore section are more challenging. You may need to use HTML and CSS we haven’t covered yet. Get ready to Google!
Recommended
Exercise: Product description
Create a page that looks like this, using CSS styles:
Upload your solution to your server. Put the URL below.
(Log in to enter your solution to this exercise.)
Exercise: Cats and dogs
Create a page that looks like this, using CSS styles:
Upload your solution to your server. Put the URL below.
(Log in to enter your solution to this exercise.)
Exercise: Metaphor
Create a page that looks like this, using CSS styles:
Upload your solution to your server. Put the URL below.
(Log in to enter your solution to this exercise.)
Exercise: Bar jokes
Create a page that looks like this, using CSS styles:
Upload your solution to your server. Put the URL below.
(Log in to enter your solution to this exercise.)
Optional
Exercise: Studying advice
Create a page that looks like this:
Match the colors approximately. Use any sans serif font. Use at least one CSS class (I used more in my solution).
I made my browser narrow to make the screenshot above, so I could fit it in this page. You don’t need to have this width.
Upload your solution to your server. Put the URL below.
(Log in to enter your solution to this exercise.)
Explore
These challenging exercises may use HTML and CSS that you haven’t seen yet. Get ready to Google!
Exercise: Friendly formulas
Make a page that looks like this:
Upload your solution to your server. Enter the URL below.
(Log in to enter your solution to this exercise.)
Exercise: Text shadow
Make a page like this:
Do not use a graphics program! Use HTML and CSS only.
Upload your solution to your server. Enter the URL below.
(Log in to enter your solution to this exercise.)
Exercise: Backwards text
Make a page like this:
Type the text into your HTML in the normal way! Copy-and-paste this into your solution:
Hey!
This is reversed!
Flip it around, willya, buddy?
Upload your solution to your server. Enter the URL below.
(Log in to enter your solution to this exercise.)
Exercise: Ticking noise
Make a page showing the YouTube video, “Potter Puppet Pals: The Mysterious Ticking Noise.” Your page should look like this:
Upload your solution to your server. Enter the URL below.
(Log in to enter your solution to this exercise.)