Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P20 ppt

<nobr> and <wbr>
Now begin adding the content. You're undertaking a literary endeavor, so starting the page
with a nice quote about old books would be a nice touch. Because you're adding a quote, you
can use the
<blockquote> tag to make it stand out as such. Also, the name of the poem is a
citation, so use
<cite> there, too.
Insert the following code on the line after the level 1 heading:
Input
<blockquote>
"Old books are best how tale and rhyme<br />
Float with us down the stream of time!"<br />
- Clarence Urmy, <cite>Old Songs are Best</cite>
</blockquote>

Immediately following the quote, add the address for the bookstore. This is a simple
paragraph with the lines separated by line breaks, like the following:
Input
<p>The Bookworm Bookshop<br />
1345 Applewood Dr<br />
Springfield, CA 94325<br />
(415) 555-0034
</p>

Adding the Table of Contents
The page you're creating will require a lot of scrolling to get from the top to the bottom. One
nice enhancement is to add a small table of contents at the beginning of the page, listing the
sections in a bulleted list. If a reader clicks one of the links in the table of contents, he'll
automatically jump to the section that's of most interest to him. Because you've created the
anchors already, it's easy to see where the links will take you.
You already have the heading for the table of contents. You just need to add the bulleted list

and a horizontal rule, and then create the links to the other sections on the page. The code
looks like the following:
Input
<a name="contents"><h2>Contents</h2></a>
<ul>
<li><a href="#about">About the Bookworm Bookshop</a></li>
<li><a href ="#recent">Recent Titles</a></li>
<li><a href ="#upcoming">Upcoming Events</a></li>
</ul>
<hr />

file:///G|/1/0672328860/ch06lev1sec11.html (3 von 12) [19.12.2006 13:48:49]
<nobr> and <wbr>
Figure 6.16 shows an example of the introductory portion of the Bookworm Bookshop page as
it appears in a browser.
Output
Figure 6.16. The top section of the Bookworm Bookshop page.
[View full size image]

Creating the Description of the Bookstore
Now you come to the first descriptive subheading on the page, which you've added already.
This section gives a description of the bookstore. After the heading (shown in the first line of
the following example), I've arranged the description to include a list of features to make
them stand out from the text better:
Input
<a name="about"><h2>About the Bookworm Bookshop</h2></a>
<p>Since 1933, The Bookworm Bookshop has offered
rare and hard-to-find titles for the discerning reader.
The Bookworm offers:</p>
<ul>

<li>Friendly, knowledgeable, and courteous help</li>
<li>Free coffee and juice for our customers</li>
<li>A well-lit reading room so you can "try before you buy"</li>
<li>Four friendly cats: Esmerelda, Catherine, Dulcinea and Beatrice</li>
</ul>
file:///G|/1/0672328860/ch06lev1sec11.html (4 von 12) [19.12.2006 13:48:49]
<nobr> and <wbr>

Add a note about the hours the store is open and emphasize the actual numbers:
Input
<p>Our hours are <strong>10am to 9pm</strong> weekdays,
<strong>noon to 7</strong> on weekends.</p>

Then, end the section with links to the Table of Contents and the top of the page, followed by
a horizontal rule to end the section:
Input
<p><a href="#contents">Back to Contents</a> | <a href="#top">Back to Top</a></p>
<hr />

Figure 6.17 shows you what the About the Bookworm Bookshop section looks like in a
browser. Fonts and Font Sizes
Output
Figure 6.17. The About the Bookworm Bookshop section.
[View full size image]

Creating the Recent Titles Section
file:///G|/1/0672328860/ch06lev1sec11.html (5 von 12) [19.12.2006 13:48:49]
<nobr> and <wbr>
The Recent Titles section itself is a classic link menu, as I described earlier in this section.
Here you can put the list of titles in an unordered list, with the titles themselves as citations,

by using the
<cite> tag. End the section with another horizontal rule.
After the Recent Titles heading (shown in the first line in the following example), enter the
following code:
<a name="recent"><h2>Recent Titles (as of 11-Jan-2006)</h2></a>
<ul>
<li>Sandra Bellweather, <cite>Belladonna</cite></li>
<li>Jonathan Tin, <cite>20-Minute Meals for One</cite></li>
<li>Maxwell Burgess, <cite>Legion of Thunder</cite></li>
<li>Alison Caine, <cite>Banquo's Ghost</cite></li>
</ul>
<hr />

Now add the anchor tags to create the links. How far should the link extend? Should it include
the whole line (author and title) or just the title of the book? This decision is a matter of
preference, but I like to link only as much as necessary to make sure that the link stands out
from the text. I prefer this approach to overwhelming the text. Here, I linked only the titles of
the books. At the same time, I also added links to the Table of Contents and the top of the
page:
Input
<a name="recent"><h2>Recent Titles (as of 11-Jan-2006)</h2></a>
<ul>
<li>Sandra Bellweather, <a href="belladonna.html">
<cite>Belladonna</cite></a></li>
<li>Johnathan Tin, <a href="20minmeals.html">
<cite>20-Minute Meals for One</cite></a></li>
<li>Maxwell Burgess, <a href="legion.html">
<cite>Legion of Thunder</cite></a></li>
<li>Alison Caine, <a href="banquo.html">
<cite>Banquo's Ghost</cite></a></li>

</ul>
<p><a href="#contents">Back to Contents</a> | <a href="#top">Back to Top</a></p>
<hr />

Note that I put the <cite> tag inside the link tag <a>. I could have just as easily put it outside
the anchor tag; character style tags can go just about anywhere. But as I mentioned once
before, be careful not to overlap tags. Your browser might not be able to understand what's
going on, and it's invalid. In other words, don't do the following:
<a href="banquo.html"><cite>Banquo's Ghost</a></cite>

Take a look at how the Recent Titles section appears. An example is shown in Figure 6.18.
Output
Figure 6.18. The Recent Titles section.
file:///G|/1/0672328860/ch06lev1sec11.html (6 von 12) [19.12.2006 13:48:49]
<nobr> and <wbr>
[View full size image]

Completing the Upcoming Events Section
Next, move on to the Upcoming Events section. In the planning stages, you weren't sure
whether this would be another link menu or whether the content would work better solely on
this page. Again, this decision is a matter of preference. Here, because the amount of extra
information is minimal, creating links for just a couple of sentences doesn't make much sense.
So, for this section, create an unordered list using the
<ul> tag. I've boldfaced a few phrases
near the beginning of each paragraph. These phrases emphasize a summary of the event
itself so that the text can be scanned quickly and ignored if the readers aren't interested.
As in the previous sections, you end the section with links to the top and to the contents,
followed by a horizontal rule.
<a name=upcoming"><h2>Upcoming Events</h2></a>
<ul>

<li><b>The Wednesday Evening Book Review</b> meets, appropriately, on
Wednesday evenings at 7 pm for coffee and a round-table discussion.
Call the Bookworm for information on joining the group.</li>
<li><b>The Children's Hour</b> happens every Saturday at 1 pm and includes
reading, games, and other activities. Cookies and milk are served.</li>
<li><b>Carole Fenney</b> will be at the Bookworm on Sunday, January 19,
to read from her book of poems <cite>Spiders in the Web.</cite></li>
<li><b>The Bookworm will be closed</b> March 1st to remove a family
of bats that has nested in the tower. We like the company, but not
the mess they leave behind!</li>
</ul>
<p><a href="#contents">Back to Contents</a> | <a href="#top">Back to
Top</a></p>

Signing the Page
file:///G|/1/0672328860/ch06lev1sec11.html (7 von 12) [19.12.2006 13:48:49]
<nobr> and <wbr>
To finish, sign what you have so that your readers know who did the work. Here, I've
separated the signature from the text with a rule line. I've also included the most recent
revision date, my name as the Webmaster, and a basic copyright (with a copyright symbol
indicated by the numeric escape
&#169;):
Input
<hr />
<address>
Last Updated: 11-Jan-2006<br />
Webmaster: Laura Lemay
<a href="mailto:"></a><br />
&#169; copyright 2006 the Bookworm<br />
</address>

Figure 6.19 shows the signature at the bottom portion of the page as well as the Upcoming
Events section.
Output
Figure 6.19. The Upcoming Events section and the page signature.
[View full size image]

Reviewing What You've Got
file:///G|/1/0672328860/ch06lev1sec11.html (8 von 12) [19.12.2006 13:48:49]
<nobr> and <wbr>
Here's the HTML code for the page so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html>
<head>
<title>The Bookworm Bookshop</title>
</head>
<body>
<a name="top"><h1>The Bookworm: A Better Book Store</h1></a>
<blockquote>
"Old books are best how tale and rhyme<br />
Float with us down the stream of time!"<br />
- Clarence Urmy, <cite>Old Songs are Best</cite>
</blockquote>
<p>The Bookworm Bookshop<br />
1345 Applewood Dr<br />
Springfield, CA 94325<br />
(415) 555-0034
</p>
<a name="contents"><h2>Contents</h2></a>
<ul>

<li><a href="#about">About the Bookworm Bookshop</a></li>
<li><a href="#recent">Recent Titles</a></li>
<li><a href="#upcoming">Upcoming Events</a></li>
</ul>
<hr />
<a name="about"><h2>About the Bookworm Bookshop</h2></a>
<p>Since 1933, the Bookworm Bookshop has offered
rare and hard-to-find titles for the discerning reader.
The Bookworm offers:</p>
<ul>
<li>Friendly, knowledgeable, and courteous help</li>
<li>Free coffee and juice for our customers</li>
<li>A well-lit reading room so you can "try before you buy"</li>
<li>Four friendly cats: Esmerelda, Catherine, Dulcinea and Beatrice</li>
</ul>
<p>Our hours are <strong>10am to 9pm</strong> weekdays,
<strong>noon to 7</strong> on weekends.</p>
<p><a href="#contents">Back to Contents</a> | <a href="#top">Back to
Top</a></p>
<hr />
<a name="recent"><h2>Recent Titles (as of 11-Jan-2003)</h2></a>
<ul>
<li>Sandra Bellweather, <a href="belladonna.html">
<cite>Belladonna</cite></a></li>
<li>Johnathan Tin, <a href="20minmeals.html">
<cite>20-Minute Meals for One</cite></a></li>
<li>Maxwell Burgess, <a href="legion.html">
<cite>Legion of Thunder</cite></a></li>
<li>Alison Caine, <a href="banquo.html">
<cite>Banquo's Ghost</cite></a></li>

</ul>
<p><a href="#contents">Back to Contents</a> | <a href="#top">Back to
Top</a></p>
<hr />
<a name="upcoming"><h2>Upcoming Events</h2></a>
<ul>
file:///G|/1/0672328860/ch06lev1sec11.html (9 von 12) [19.12.2006 13:48:49]
<nobr> and <wbr>
<li><b>The Wednesday Evening Book Review</b> meets, appropriately, on
Wednesday evenings at 7 pm for coffee and a round-table discussion.
Call the Bookworm for information on joining the group.</li>
<li><b>The Children's Hour</b> happens every Saturday at 1 pm and includes
reading, games, and other activities. Cookies and milk are served.</li>
<li><b>Carole Fenney</b> will be at the Bookworm on Sunday, January 19,
to read from her book of poems <cite>Spiders in the Web.</cite></li>
<li><b>The Bookworm will be closed</b> March 1 to remove a family
of bats that has nested in the tower. We like the company, but not
the mess they leave behind!</li>
</ul>
<p><a href="#contents">Back to Contents</a> | <a href="#top">Back to
Top</a></p>
<hr />
<address>
Last Updated: 11-Jan-2006<br />
WebMaster: Laura Lemay <br />
&#169; copyright 2006 the Bookworm<br />
</address>
</body>
</html>

Now you have some headings, some text, some topics, and some links, which form the basis
for an excellent web page. With most of the content in place, now you need to consider what
other links you might want to create or what other features you might want to add to this
page.
For example, the introductory section has a note about the four cats owned by the bookstore.
Although you didn't plan for them in the original organization, you could easily create web
pages describing each cat (and showing pictures) and then link them back to this page, one
link (and one page) per cat.
Is describing the cats important? As the designer of the page, that's up to you to decide. You
could link all kinds of things from this page if you have interesting reasons to link them (and
something to link to). Link the bookstore's address to an online mapping service so that
people can get driving directions. Link the quote to an online encyclopedia of quotes. Link the
note about free coffee to the Coffee Home Page.
I'll talk more about good things to link (and how not to get carried away when you link) in
Lesson 16, "Writing Good Web Pages: Do's and Don'ts." My reason for bringing up this point
here is that after you have some content in place on your web pages, there might be
opportunities for extending the pages and linking to other places that you didn't think of when
you created your original plan. So, when you're just about finished with a page, stop and
review what you have, both in the plan and in your web page.
For the purposes of this example, stop here and stick with the links you have. You're close
enough to being done, and I don't want to make this lesson any longer than it already is!
Testing the Result
Now that all the code is in place, you can preview the results in a browser. Figures 6.16
through
6.19 show how it looks in a browser. Actually, these figures show what the page
looks like after you fix the spelling errors, the forgotten closing tags, and all the other strange
file:///G|/1/0672328860/ch06lev1sec11.html (10 von 12) [19.12.2006 13:48:49]
<nobr> and <wbr>
bugs that always seem to creep into an HTML file the first time you create it. These problems
always seem to happen no matter how good you are at creating web pages. If you use an

HTML editor or some other help tool, your job will be easier, but you'll always seem to find
mistakes. That's what previewing is forso you can catch the problems before you actually
make the document available to other people.
Getting Fancy
Everything I've included on the page up to this point has been plain-vanilla HTML 2.0, so it's
readable and will look pretty much the same in all browsers. After you get the page to this
point, however, you can add additional formatting tags and attributes that won't change the
page for many readers, but might make it look a little fancier in browsers that do support
these attributes.
So, what attributes do you want to use? I chose two:
● Centering the title of the page, the quote, and the bookstore's address
● Making a slight font size change to the address itself
To center the topmost part of the page, you can use the
<div> tag around the heading, the
quote, and the bookshop's address, as in the following:
Input
<div style="text-align: center">
<a name="top"><h1 style="font-variant: small-caps">The Bookworm: A Better Book
Store</h1></a>
<blockquote>
"Old books are best how tale and rhyme<br />
Float with us down the stream of time!"<br />
- Clarence Urmy, <cite>Old Songs are Best</cite>
</blockquote>
<p>The Bookworm Bookshop<br />
1345 Applewood Dr<br />
Springfield, CA 94325<br />
(415) 555-0034
</p>
</div>

I've also used the style attribute to change the text in the <h1> tag to small caps. To change
the font size of the address, add a
style attribute to the paragraph containing the address:
Input
<p style="font-size: 150%">The Bookworm Bookshop<br />
1345 Applewood Dr<br />
Springfield, CA 94325<br />
(415) 555-0034
</p>

file:///G|/1/0672328860/ch06lev1sec11.html (11 von 12) [19.12.2006 13:48:49]
<nobr> and <wbr>
Figure 6.20 shows the final result, with attributes. Note that neither of these changes affects
the readability of the page in browsers that don't support
<div> or <font>; the page still works
just fine without them. It just looks different.
Output
Figure 6.20. The final Bookworm home page, with additional
attributes.
[View full size image]

When should you use text-formatting attributes? The general rule that I like to follow is to use
these tags only when they won't interfere with other browsers, generally older ones. Similarly,
although HTML 4.01 officially encourages web page authors to use style sheets rather than
text formatting tags such as
font and attributes such as align, support for style sheets still
isn't yet universal. So, for the time being, if you want to spiff up the appearance of your text,
you must continue to use these tags and attributes.
You'll learn more about formatting tags and attributes, as well as how to design well with

them, in
Lesson 15, "Creating Applications with Dynamic HTML and AJAX."


file:///G|/1/0672328860/ch06lev1sec11.html (12 von 12) [19.12.2006 13:48:49]