|
||
|
Vol. 1, No. 1 Hello and welcome to the inaugural issue of Handcrafted, the Better Builders biweekly newsletter!
This newsletter is the result of a meeting of the minds at Tripod
and Webmonkey. It's
been specially crafted for all you Better Builders out there who are
looking to learn new ways to improve, fine-tune, and expand your Web sites.
In the newsletters that follow, we'll be profiling the sites of our
favorite bar-raising Builders, dishing out tips and gossip and — most
importantly — serving up valuable lessons designed to encourage
excellence in Web site building.
Today, we'll let the games begin with a basic lesson in HTML. It may be a
review for some of you, but we want to make sure everyone's up to speed
before we tackle more nitty-gritty Web design topics in the lessons to come.
But if you need to tweak the pages generated by Site Builder, or if you want
to create a Web page that's entirely unique, you should learn the basics of
HTML (hyper-text mark-up language), the code used to build Web pages. Whether you become
totally fluent in this language, or learn just enough to get around
(¿Donde esta el baño?), you'll improve your Web design skills immensely.
Luckily, HTML is falling-off-a-log easy to master. Here, let us show you.
HTML is all about tags. Tags tell a browser how to display the text or
images on your Web page. HTML tags are often named intuitively (like "blockquote"), or
they're abbreviations (such as "p" for paragraph). To make sure browsers
don't confuse your tags with your text, you need to place them in brackets, < >, like so: <BLOCKQUOTE>.
Some tags tell the browser
how to format your Web page (<P> begins a new paragraph, for example), and
other tags indicate the actual appearance of your words (<B> makes text
bold, <I> italicizes your text).
Tags, like socks, usually come in pairs (though, as with most languages,
there are exceptions to this rule — the <BR> tag, which indicates a line
break, stands alone like a sock that's lost its mate in the dryer).
Say you use the bold tag, <B>. The browser will bold-ify every bit of text that
follows this tag until you tell it to stop with a close tag: </B>. The
slash before the "B" is what distinguishes a closing tag from an opening tag.
To tell a browser that the document is indeed an HTML page, and should be
read as such, you need to sandwich the entire document with HTML tags.
The stuff that comes in between these tags is divided into two sections —
the header and the body.
The header, which is enclosed by the <HEAD> and </HEAD> tags, contains
information about your Web page that isn't going to appear on the page
itself, such as the title of the page. The body, which lies between the <BODY> and </BODY>
tags, is where you put all the stuff you see on the page.
So, a super basic HTML document will look something like this:
<HTML>
<BODY>
<p>Welcome to this <I>very special</I> Web page.</p>
<p>
Why is this page so special, you ask? Well, it just so happens to be my
very first foray into the wild, wide world of HTML! Can you feel the magic?<br>
</BODY>
You can view this page in this week's Lesson in Action.
[Note the difference between what the <P> the <BR> tags do: there's a whole
line of blank space after a <P> tag, while text coming after a <BR> tag
comes directly below the previous line.]
Sounds easy, no? Almost suspiciously easy. But if you don't believe me,
just try it yourself.
Simply copy the code above and paste it into any word-processing program (a
simple program like Notepad or SimpleText will do nicely, but you can also
use something excessive like Microsoft Word).
Next, save the whole thing as "welcome.html" or "whatever-you-want.html" —
the ".html" extension lets browsers know that this document is indeed an
HTML document, and is thus ready, willing, and able to be displayed by the
browser. If you're using a fancy-pants word processing program like MS
Word, make sure you save it as "Text Only" or "Plain Text." High-end
formatting can sometimes mess up your plain and simple HTML documents.
To see the page at work, launch your browser, select the "Open" option
under the "File" pull-down menu, and navigate to where you saved the
welcome.html document. To share your creation with the world, upload it to
your site using Tripod's Filemanager or an FTP program.
If you want more info about FTP, go
here
if you're using a PC, or here for Mac.
And voila! You have now created a Web page from scratch. It may be basic,
and pretty darn ugly, but it's your very own.
Tune in next time, and we'll show you how to start beautifying your page
with images and color. Don't miss it!
RESOURCES:
To review what we've learned today, along with some additional
lowdown, take a gander at the following Webmonkey lessons:
HTML basics (<HEAD>, <BODY>, etc.)
Learn more about Headlines (<H1>, <H2>, etc.)
More info about paragraphs (<P>)
More examples of bold and italic text (<B>, <I>) |
||
|
Subscribe/Unsubscribe
Handcrafted Archive |
