Louella's Newsletter

How did your newsletter turn out? Let's work on Louella's website newsletter on the family Christmas feast for the relatives who couldn't make it there. We'll be working through this example for several chapters, so get your puzzleform.html file in Notepad and copy the changes as we make them. Save the file as newsletter.html.

I'll show the table we're going to develop after each step at first, then let you fill in the described changes with a copy of the finished table at the end of the page in the last chapters. Be sure to use your browser to view the file to see that your changes match the newsletter on the screen. You can click on the Back button on your browser to return to this tutorial after clicking on your newsletter.html icon to tell the browser to load the edited file. First, we need a little text.


Louella's Tattle and Tips
Ruthann gets arrested!
Ruthann got into big trouble this year! She was building up her usual head of Christmas cheer right on schedule for the feast, when her cheap husband Sam decided to save a few pennies by buying presents from unorthodox sources.
Ruthann started making her fancy fruitcakes for Christmas presents and soaking them in extra rum as usual. The smell soon brought their cat Fluffy to investigate. What happened next isn't clear. Sam claims that the cat knocked a cake off the counter next to the floor heater. Ruthann suspects it was Sam getting an early start on his cake.
Whoever was responsible for it, the flaming fruitcake set off the kitchen fire alarm and brought the neighbors and the volunteer fire department on the run. The police naturally showed up to investigate the commotion. When a neighbor opened the broom closet to help clean up the mess, a police officer saw (continued on page 2)
Crafting Tip
Got a lot of green tomatoes snatched off the vine before frost hit? Cover them with a festive assortment of left-over house paint and heap them high in a pretty bowl like Christmas ornaments. Eat your heart out, Martha!
Quote of the Feast
The biggest turkeys do their gobbling on Christmas.
Said by Grandma Willa to Uncle Roy after he spilled giblet gravy on her best crocheted tablecloth. He's rightly ashamed of himself.
Most Original Christmas Present
Little Will's giant windchimes, made from recycled CD's which proved to have some naughty pictures on them. His mother is discreetly investigating the source of his creativity.


Tip: You may be able to save yourself some typing by copying this text off the screen. Put the cursor before the L in the word Louella's at the start of the text and hold the left mouse button down as you move the cursor to the space after the period following the word creativity. If the text is highlighted (changes color), right click to get the pop-up menu and click on Copy. Go to Notepad and click on the spot where you want the text to go, then right click for the pop-up menu and click Paste. This is a slick trick to move text that we'll be using often.

Now, that's pretty colorful to start with, but it does run on in more ways than one. It's easier to read short lines of text than long ones stretching across the page. Let's put this text in a table with width=100%, border=1, cellpadding=10 (to add some blank space around the text so it doesn't crowd against the border lines) and split it into two columns.

Louella's Tattle and Tips
Ruthann gets arrested!
Ruthann got into big trouble this year! She was building up her usual head of Christmas cheer right on schedule for the feast, when her cheap husband Sam decided to save a few pennies by buying presents from unorthodox sources.
Ruthann started making her fancy fruitcakes for Christmas presents and soaking them in extra rum as usual. The smell soon brought their cat Fluffy to investigate. What happened next isn't clear. Sam claims that the cat knocked a cake off the counter next to the floor heater. Ruthann suspects it was Sam getting an early start on his cake.
Whoever was responsible for it, the flaming fruitcake set off the kitchen fire alarm and brought the neighbors and the volunteer fire department on the run. The police naturally showed up to investigate the commotion. When a neighbor opened the broom closet to help clean up the mess, a police officer saw (continued on page 2)
Crafting Tip
Got a lot of green tomatoes snatched off the vine before frost hit? Cover them with a festive assortment of left-over house paint and heap them high in a pretty bowl like Christmas ornaments. Eat your heart out, Martha!
Quote of the Feast
The biggest turkeys do their gobbling on Christmas.
Said by Grandma Willa to Uncle Roy after he spilled giblet gravy on her best crocheted tablecloth. He's rightly ashamed of himself.
Most Original Christmas Present
Little Will's giant windchimes, made from recycled CD's which proved to have some naughty pictures on them. His mother is discreetly investigating the source of his creativity.

That split the text nicely, but it also changed its appearance on the Netscape browser. I've been using a kind of type, called a font, called Arial in size 3 for the type on my page. The table went back to the default font variety and size used on a page if you don't specify a different font. The old-fashioned way of using a new font and font size is to surround your text with code like this:

<font face="Arial" size=3>Put your text in here</font>

That <font> tag still works but is being replaced by a cascading style sheet code that goes between the <HEAD> tags of your page. You can set the font for all the cells in your table with one little block of code and not have to remember to type the <font> and </font> tags around it.

<HEAD>
<TITLE>Louella's Christmas Newsletter</TITLE>
<style type="text/css">
td {
font-family:Arial;
font-size:12pt;
}
</style>
</HEAD>

You would use your own page title for your newsletter, of course. This bit of code tells the browser to set all text in a <td> tag to the Arial font in the 12 point size. You can see what fonts your computer has by looking for a folder named fonts. Windows Help tells you to click the start button, go up to Settings to get that menu, click Control Panel on the menu, then look for the folder named Fonts and double-click on it. A window will open with the fonts listed under their icons. Click on the icon for various fonts to see a sample displayed. Since I don't want to change the font for this whole page, permit me to use the old-fashioned way of using <font> tags. Our table then looks like this:

Louella's Tattle and Tips
Ruthann gets arrested!
Ruthann got into big trouble this year! She was building up her usual head of Christmas cheer right on schedule for the feast, when her cheap husband Sam decided to save a few pennies by buying presents from unorthodox sources.
Ruthann started making her fancy fruitcakes for Christmas presents and soaking them in extra rum as usual. The smell soon brought their cat Fluffy to investigate. What happened next isn't clear. Sam claims that the cat knocked a cake off the counter next to the floor heater. Ruthann suspects it was Sam getting an early start on his cake.
Whoever was responsible for it, the flaming fruitcake set off the kitchen fire alarm and brought the neighbors and the volunteer fire department on the run. The police naturally showed up to investigate the commotion. When a neighbor opened the broom closet to help clean up the mess, a police officer saw (continued on page 2)
Crafting Tip
Got a lot of green tomatoes snatched off the vine before frost hit? Cover them with a festive assortment of left-over house paint and heap them high in a pretty bowl like Christmas ornaments. Eat your heart out, Martha!
Quote of the Feast
The biggest turkeys do their gobbling on Christmas.
Said by Grandma Willa to Uncle Roy after he spilled giblet gravy on her best crocheted tablecloth. He's rightly ashamed of himself.
Most Original Christmas Present
Little Will's giant windchimes, made from recycled CD's which proved to have some naughty pictures on them. His mother is discreetly investigating the source of his creativity.

Here's the code that produced it. Note that I've slipped in some <BR> codes. They are line break codes that divide the text into new lines. Without them, the text would run together into one block. The browser will ignore the "Enter" codes and extra blank lines and spaces you used when you typed the text into your file so that it can allow the text to flow together to fill the available space on your page. If you want the browser to separate your text into individual lines and paragraphs, you have to tell it where to make the appropriate line breaks.

<table width=100% border=1 cellpadding=10>
<tr>
<td>
<font face="Arial" size=3>
Louella's Tattle and Tips
<br>
Ruthann gets arrested!
<br>
Ruthann got into big trouble this year! She was building up her usual head of Christmas cheer right on schedule for the feast, when her cheap husband Sam decided to save a few pennies by buying presents from unorthodox sources.
<br>
Ruthann started making her fancy fruitcakes for Christmas presents and soaking them in extra rum as usual. The smell soon brought their cat Fluffy to investigate. What happened next isn't clear. Sam claims that the cat knocked a cake off the counter next to the floor heater. Ruthann suspects it was Sam getting an early start on his cake.
<br>
Whoever was responsible for it, the flaming fruitcake set off the kitchen fire alarm and brought the neighbors and the volunteer fire department on the run. The police naturally showed up to investigate the commotion. When a neighbor opened the broom closet to help clean up the mess, a police officer saw (continued on page 2)
<br> </font>
</td>
<td>
<font face="Arial" size=3>
Crafting Tip
<br>
Got a lot of green tomatoes snatched off the vine before frost hit? Cover them with a festive assortment of left-over house paint and heap them high in a pretty bowl like Christmas ornaments. Eat your heart out, Martha!
<br>
Quote of the Feast
<br>
The biggest turkeys do their gobbling on Christmas.
<br>
Said by Grandma Willa to Uncle Roy after he spilled giblet gravy on her best crocheted tablecloth. He's rightly ashamed of himself.
<br>
Most Original Christmas Present
<br>
Little Will's giant windchimes, made from recycled CD's which proved to have some naughty pictures on them. His mother is discreetly investigating the source of his creativity.</font>
</td>
</tr>
</table>

However, the titles and paragraphs are still running together. It would look better if we had something to separate them. To get a line break and one blank line, use the <p> paragraph tag. For more than one blank line, you'll need to use several <br> tags together. Multiple <p> tags are condensed into a single <p> tag. Also, we can use the <hr> tag to make a horizontal line between lines of text. Let's add some <p> tags and <hr> tags to our code.

Louella's Tattle and Tips

Ruthann gets arrested!

Ruthann got into big trouble this year! She was building up her usual head of Christmas cheer right on schedule for the feast, when her cheap husband Sam decided to save a few pennies by buying presents from unorthodox sources.

Ruthann started making her fancy fruitcakes for Christmas presents and soaking them in extra rum as usual. The smell soon brought their cat Fluffy to investigate. What happened next isn't clear. Sam claims that the cat knocked a cake off the counter next to the floor heater. Ruthann suspects it was Sam getting an early start on his cake.

Whoever was responsible for it, the flaming fruitcake set off the kitchen fire alarm and brought the neighbors and the volunteer fire department on the run. The police naturally showed up to investigate the commotion. When a neighbor opened the broom closet to help clean up the mess, a police officer saw (continued on page 2)

Crafting Tip

Got a lot of green tomatoes snatched off the vine before frost hit? Cover them with a festive assortment of left-over house paint and heap them high in a pretty bowl like Christmas ornaments. Eat your heart out, Martha!


Quote of the Feast

The biggest turkeys do their gobbling on Christmas.

Said by Grandma Willa to Uncle Roy after he spilled giblet gravy on her best crocheted tablecloth. He's rightly ashamed of himself.


Most Original Christmas Present

Little Will's giant windchimes, made from recycled CD's which proved to have some naughty pictures on them. His mother is discreetly investigating the source of his creativity.

<table width=100% border=1 cellpadding=10>
<tr>
<td>
<font face="Arial" size=3>
Louella's Tattle and Tips
<p>
Ruthann gets arrested!
<p>
Ruthann got into big trouble this year! She was building up her usual head of Christmas cheer right on schedule for the feast, when her cheap husband Sam decided to save a few pennies by buying presents from unorthodox sources.
<p>
Ruthann started making her fancy fruitcakes for Christmas presents and soaking them in extra rum as usual. The smell soon brought their cat Fluffy to investigate. What happened next isn't clear. Sam claims that the cat knocked a cake off the counter next to the floor heater. Ruthann suspects it was Sam getting an early start on his cake.
<p>
Whoever was responsible for it, the flaming fruitcake set off the kitchen fire alarm and brought the neighbors and the volunteer fire department on the run. The police naturally showed up to investigate the commotion. When a neighbor opened the broom closet to help clean up the mess, a police officer saw (continued on page 2)
<p> </font>
</td>
<td>
<font face="Arial" size=3>
Crafting Tip
<p>
Got a lot of green tomatoes snatched off the vine before frost hit? Cover them with a festive assortment of left-over house paint and heap them high in a pretty bowl like Christmas ornaments. Eat your heart out, Martha!
<p>
<hr>
<p>
Quote of the Feast
<p>
The biggest turkeys do their gobbling on Christmas.
<p>
Said by Grandma Willa to Uncle Roy after he spilled giblet gravy on her best crocheted tablecloth. He's rightly ashamed of himself.
<p>
<hr>
<p>
Most Original Christmas Present
<p>
Little Will's giant windchimes, made from recycled CD's which proved to have some naughty pictures on them. His mother is discreetly investigating the source of his creativity.</font>
</td>
</tr>
</table>

That's much more readable, but we can explore a few more changes. For example, we could put the three topics in the right column into separate cells and use different colors or backgrounds to accent them. That would be splitting that column into three rows. We would have to tell the browser to let the left cell stretch down three rows to keep it the same length beside the three new cells (each in its own row) in the right column. We'll explore how to do that in the next chapter, Long Rows and Columns.

HTML Puzzles

Last update: August 12, 2001

Hosted by www.Geocities.ws

1