|
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
|