Vol. 1, No. 2
HTML 102, the SECOND SEMESTER

As usual, this newsletter features a valuable lesson in Web-page building excellence. But once the bell rings and class is over, stick around — we have some hard-earned "HINTS, POINTERS, and TIPS o' the TRADE" to share with you today. So keep scrolling!

In this lesson, we'll be building on the bare-bones-basic HTML you learned in lesson Numero Uno. If you missed those words of wisdom, check out the Handcrafted Archives.

Is everyone all caught up? Ok! Now that we're all on the same (Web) page, let's get started.

Thanks to the last lesson, you now know how to create a basic Web page. But that grey background is a shade depressing, no? That left-aligned text is a tad monotonous, yes? Maybe your page should feature a link or two (this being the Web and all)? Well, today's lesson just so happens to address these problems. Read on to learn how to doll up your text with some formatting, add those missing links to your page, and make everything a shade more colorful.

We'll start with something nice and easy: Text alignment.

As you may have noticed already, left-aligning your text is super easy: it's the default when you just leave the text alone. If you want to indent text while still keeping it aligned to the left (to display addresses or quotations, for example), all you have to do is place the copy within <BLOCKQUOTE> </BLOCKQUOTE> tags.

Now, say you want to center a paragraph. Simply add "ALIGN=CENTER" to your <P> tag. Rather than bracket your paragraph with <P> </P> tags, you'd use
<P ALIGN=CENTER> </P>. If you want to eliminate all the extra space that <P> tags create around text, or if you want to center something other than a paragraph (like a headline), or you're looking for an easy way to center a group of paragraphs, use the <CENTER> tag, like this:

<CENTER><H1>Hello Party People!</H1></CENTER>

Once you understand centering, aligning a paragraph to the right is a breeze. Just place <P ALIGN=RIGHT></P> around a paragraph that you want to line up with the right side of the browser window. If you want to right-align a bunch of stuff at once, use <DIV ALIGN=RIGHT> </DIV>. However, the <DIV> tag is a more recent HTML innovation than the <CENTER> tag, so people using really, really old browsers may not be able to see the stuff on the right. But since only a handful of folks are still crawling along with such antiquated browsers, you're probably safe using it. Find more info about the <DIV> tag here.

But wait, that's not all!

HTML can do a lot more than just move your text from side to side. It can also be used to organize the information within your paragraphs. To create a numbered or bulleted list, use the <OL> (Ordered List) or <UL> (Un-numbered List) tags, with <LI> (List Item) tags around the separate items of the list. For example, this HTML:

To Do Today:
<OL>
<LI>Learn HTML</LI>
<LI>Conquer the world</LI>
</OL>

... produces something that looks like this:

To Do Today:

1. Learn HTML
2. Conquer the world

If you want bullets to appear instead of numbers, use the <UL> tag instead of <OL>. (Learn more about the different things you can do with <OL>, <UL>, and <DL> tags.)

Once you have your text nice and organized, you're ready to branch out: Turn that Web page into a Web site!

To do this, you must harness the powerful (yet easy-to-learn) linking technology. But before you can do this, you need to build at least one other page to link to. You can use the alignment stuff we've covered today and create a new page (or just cut and paste our "To Do Today" list into an HTML page), and save it as "todo.html" in the same directory as your first page ("welcome.html"). If you start feeling lost or confused as you do this, take another peek at the material covered in the previous lesson.

The next step is to create a link on your Welcome page that leads to your To Do page. Open "welcome.html" and add the following "anchor" tagged text:

<P><A HREF="todo.html">Click here</A> to see the titillating contents of my "To Do" list.</P>

NOTE: The address in the quotes of the anchor tag is where you'll link when you click on the copy surrounded by the tags. If the page you want to link to is in the same directory as the one you're linking from, you can just put the filename inside the quotes (like "todo.html"). But, it you want to link to a file in another directory or another site, you've got to put the entire URL inside the quotes.

Now save and check your work. (To do this, simply select "Open" from your browser's "File" pull-down menu.) The HTML written above should appear in your browser as "Click here" in underlined, blue text. If you obey the words, "Click here" and, well, click there, "todo.html" should load. Congratulations! You are now the proud parent of a real, live, interlinking Web site!

After you finish popping the champagne and passing out the cigars, try experimenting with that anchor tag. Use it to get people to e-mail you by adding "mailto" and your e-mail address:

<P><A HREF="mailto:your_e-mail_address">E-mail me</A>!</P>

Use it to link to other sites:

<P><A href="/adm/redirect/www">Tripod</A> and
<A HREF="http://go.webmonkey.com/659">Webmonkey</A> overwhelm me with their stellar site design and exceptional content.</P>

Notice that the words "Tripod" and "Webmonkey," when viewed through your browser, are displayed in purple — at least they should be since purple indicates a visited link (and you've visited Tripod.com and Webmonkey.com, right? RIGHT!). But you don't have to live with the browser's default purple and blue links (unvisited links appear blue). In fact, you can also change that ugly grey background (another browser default). It can all be done within one tag: <BODY>. Here, let us show you.

Start by picking the colors you want to use. For a nice point-and-click interface, go to the Tripod Homepage Studio's FreeForm Page, and select "Color Palette" from the "Select Building Supplies" pull-down menu. Now click on your favorite color to get its hex value. (For a detailed explanation of what "hex value" means, go here.

For instance, plain-ol' white is "#FFFFFF," stop-light red is "#FF0000," and sherbet orange is "#FF9900." Say you want your page to have a white background, red links, and orange visited links. Your body tag would look like this:

<BODY BGCOLOR="#FFFFFF" LINK="#FF0000" VLINK="#FF9900">

Look at this issue's Lesson in Action to see what this page would look like through your browser! (BGCOLOR is the background color, LINK is the color of unvisited links, and VLINK is the color of visited links.) Try using this tag instead of the simple <BODY> tag on your "welcome.html" and "todo.html" pages. Now take a look. Ta-da! That boring, little, grey page you began today's lesson with has been transformed into an organized, linking, colorful set of pages.

Well, Dorothy, it looks as though you're not in Kansas anymore!

Keep your eyes on your inbox for the next "Handcrafted" newsletter, where we'll be showing you how to gussy-up your pages even further ... with images!

HIT US WITH YOUR BEST SHOT!
Ask us your hardest Web puzzlers, and we'll see if we can help you out. Please send any and all questions, problems, and Web mysteries to betterbuilders@tripod.com (note the excellent use of an e-mail link!), and we'll select a few to answer in each newsletter. Remember, there are no stupid questions!

HINTS, POINTERS, AND TIPS 'O THE TRADE:

We've made mistakes so you don't have to!

• If you can, take a look at your Web pages on a variety of computers (Macs, PCs), browsers (Internet Explorer, Netscape, AOL), and monitors. You'd be surprised at how that cute spring green turns distinctly split-pea-soup-ish when viewed through a different setup. While you'll never be 100-percent sure of how your pages will look to all your visitors, basic quality-assurance testing can prevent some ghastly, but easily remedied, layout or color-choice mistakes.
• The <blockquote> tag is a quick, easy way to give your text some breathing room. Just slap those blockquote tags around all your text, and your pages will have instant margins.
• Never put an unopened can of refried beans on a hot stove.

RESOURCES:

To review what we've learned today, along with some additional lowdown, take a gander at the following Webmonkey lessons:

Handcrafted Archive