Getting to Know HTML by Emily Wilska In this issue: The basics, The <font> tag, Text size, Text color, Text style, Line breaks & paragraphs, Learning more Back in the early days of the Internet, things were pretty dull. Web pages didn't have sounds or images, color was hard to come by, and e-mail messages were strictly text. Thankfully, we've come a long way in the past 10 years or so, largely thanks to developments like HTML.

HTML, or Hyper Text Markup Language, is the basis of many Web pages. By using HTML, anyone who creates a Web page can add color, images and sounds, as well as different styles and sizes of text.

With MSN TV, you can use HTML to liven up both Web pages you create with Page Builder and e-mail messages you send. This month, we'll take a look at some HTML basics. Next month, we'll explore how to add even more excitement to your messages with images, background colors, and links, and we'll put all of this together to create an e-mail birthday card. (Remember, you can use HTML on any Web page you create, too.)

The basics
The building blocks of HTML are called tags. Tags tell browsers and e-mail programs how to display Web pages and e-mail messages — what kind of text to use, what the background color should be, where images appear, and so on. Most tags in HTML are two-parters: there's an opening tag, such as <font>, and a closing tag, like </font>. The opening tag tells the browser or mail program to start showing something, while the closing tag is the signal to stop showing it. Think of them as green lights and red lights; in order for things to flow smoothly, it's important to have both.

To start creating a page or message using HTML, type this tag: <html>. It should go at the top of the page, before anything else. When you're done with the page or message, type </html>, the red light indicating that there's no more HTML to follow.

For now, we'll focus on tags related to text: font size, color, style, and line and paragraph breaks.
€ Back to top

The <font> tag
The <font> tag is one of the most important, since it provides info on the style, size and color of the text. Within or following the font tag, you can list several different attributes, or specifications on what you want your text to look like.

As you'll see below, some of these attributes need to be included within the <font> tag, while others stand alone as separate tags. Let's look at text size first.
€ Back to top

Text size
You can specify how large or small you'd like your text to be by using numbers. A size 1 font will be tiny, while a size 7 will be pretty large. On most browsers and mail programs, 7 is the largest font possible.

To specify a font size, type <font size=x>, replacing x with the size you'd like. Here are a few examples:

> <font size=2>Here's some pretty small text.</font>
> <font size=4>Here's some medium text.</font>
> <font size=6>Here's some large text.</font>

Note that you don't need to use a closing tag for size, but you do need one for <font>.
€ Back to top
Text color
To specify text color, you'll use what's called an RGBhex number, which is a combination of six numbers and/or letters. Each color has its own RGBhex number. As with text size, you need to specify text color within the <font> tag. Here are a few examples:

> <font color="0000FF">Here's some blue text.</font>
> <font color="008000">Here's some green text.</font>
> <font color="FF0000">Here's some red text.</font>

Note that the RGBhex number for each color must be placed inside quotation marks. Also, as with text size, you don't need a closing tag for color, but you do need one for <font>. Finally, unless you've got an amazing memory (and lots of time to spare), you probably won't want to memorize the code for each color. Instead, try using an HTML color chart; here's one to get you started: http://www.eskimo.com/~bloo/indexdot/color/x11alpha.htm
€ Back to top
Text style
There are three main text styles: bold, italic and underlined. (The style will be plain if you don't specify anything else.) Unlike text size and color, which need to be specified within the <font> tag, text styles have their own separate tags, and they need both opening and closing tags. Here's what they look like:

> <b>Here's some bold text.<b>
> <i>Here's some italicized text.<i>
> <u>Here's some underlined text.</u>

You can combine text styles by using what are called nested tags. To nest tags, use an opening tag for each style you want, type your text, and then use a closing tag for each style. It's best to close your tags in the opposite order you opened them — think last one in, first one out. Here's an example:

> <b><u>Here's some bold, underlined text.</u></b>

€ Back to top
Line breaks and paragraphs
On Web pages or e-mail messages created with HTML, text will flow together in one long chunk unless you indicate where you'd like line breaks or new paragraphs to appear. The tags for these are quick and painless: use <br> for a line break (like a carriage return in typing) and <p> for a new paragraph. Both of these tags are loners: they don't need closing tags. Here's how they work:

> Here's my first line of text. I'm ready for a new line.<br>
> Here's my second line. Time for a new paragraph.
> <p>

> Here's my final line.

Note that when you use the <p> tag, you don't need to use the <br> tag. However, you can combine the two — <p><br> — for extra space between two lines of text.
€ Back to top
Learning more
Next month, we'll look at adding images, background colors and links, and you'll get the chance to show off your skills by creating an e-mail card. If you're curious to learn more in the meantime, check out these sites:'

- WC3's HTML basics: http://www.w3.org/MarkUp/Guide/
- Guide to HTML for WebTV E-mail: http://www.geocities.com/ResearchTriangle/8795/howto.webtv.html

Finally, many of your fellow MSN TV users are HTML whizzes, so you may want to look for newsgroups devoted to using HTML on MSN TV, where you're sure to find lots of helpful information.

Have fun and stay tuned for next month's HTML lesson!
€ Back to top