| Lycos.com | Angelfire.com | WhoWhere.com | MailCity.com | Hotwired.com | HotBot.com | All Sites... |
|
|
|||
 |
Handcrafted Tripod's Better Builders Newsletter Welcome to "Handcrafted" No. 2, the second installment of the biweekly Better Builders newsletter brought to you by the folks at Tripod and Webmonkey. 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.
|
|
||
|
TODAY'S LESSON — HTML 102, the SECOND SEMESTER
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
<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:
... produces something that looks like this:
To Do Today:
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="http://www.tripod.com">Tripod</A> and
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!
HINTS, POINTERS, and TIPS o' the TRADE
Tripod and Webmonkey Resources:
To review what we've learned today, along with some additional
lowdown, take a gander at the following Webmonkey lessons:
Web colors explained; |
||||
|
||||
|
Get Tripod in:
United Kingdom -
Italy -
Germany -
France -
Spain -
Netherlands Korea - Peru - Americas - Mexico - Venezuela - Chile - Brasil |
||
|
All rights reserved. |
||