Getting To Know HTML, Part 1 Getting to Know HTML by Emily Wilska In this issue: The basics, The 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 , and a closing tag, like . 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: . It should go at the top of the page, before anything else. When you're done with the page or message, type , 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 tag The 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 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 , replacing x with the size you'd like. Here are a few examples: Here's some pretty small text. Here's some medium text. Here's some large text. Note that you don't need to use a closing tag for size, but you do need one for . € 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 tag. Here are a few examples: Here's some blue text. Here's some green text. Here's some red text. 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 . 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 tag, text styles have their own separate tags, and they need both opening and closing tags. Here's what they look like: Here's some bold text. Here's some italicized text. Here's some underlined text. 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: Here's some bold, underlined text. € 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 for a line break (like a carriage return in typing) and 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. Here's my second line. Time for a new paragraph. Here's my final line. Note that when you use the tag, you don't need to use the tag. However, you can combine the two — — 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.

Getting to now HTML, Part 2 Getting to Know HTML, Part 2 by Emily Wilska In this issue: Images, Background colors, Links, The birthday card, Practice, practice, practice Last month we reviewed the basics of HTML, including tags, fonts and styles. This month, we'll take a look at adding images, background colors, and links to your Web pages and e-mail messages. And, we'll bring everything together by creating an e-mail birthday card. If you missed last month's article, or if you'd like a refresher course, choose this link: Getting to Know HTML, Part 1. Images It's easy to use HTML to add photos and other images to Web pages or e-mail messages, as long as you know the location of the pictures you'd like to add. To add an image to a Web page or e-mail message, you'd use HTML that looks like this: (Note: the tag is a one-parter; it doesn't need a closing tag.) The img refers to the image and src refers to source. As you can see, the src attribute is followed by an equal sign, and then a URL in quotes. You would replace the URL in this example with the Web address of the image you want to include. Where can you find images to use on a Web page or e-mail message? Many of your fellow MSN TV users have created great image resources you can use. This list is a good place to start: MSN TV image resources. Want to learn more about using images? This page has some helpful info: More about images € Back to top Background colors You can easily liven up the backgrounds of your Web pages and e-mail messages by adding background color. Here's how. The main part of the Web page or e-mail message you're creating is called the body. In HTML, you can specify where the body starts and where it ends by using the tag. Usually, you'll want to put this tag close to the start of your page or message, like this: To specify a background color, use the bgcolor attribute within the tag, like this: Replace colorname with the name or RBHex number (remember those from last month?) of the color you want. Check out this page for lots of color choices: HTML colors The color you specify will appear as the background for your entire Web page or e-mail message. At the end of your page or message, be sure to include a closing tag right before your closing tag. () € Back to top Links As you know, links are an easy way to jump from one place to another online. In e-mail, you can easily include a link by simply typing in a Web site address, like this: http://www.msn.com. However, to include a link without showing the entire URL, or to give a link a name or label, you'll want to use HTML. Let's say you want to add to your Web page or e-mail message a link to the New York Times Web site, and you want to call the link "Today's News." Here's how that would look in HTML: Today's News Like the src attribute, href is followed by an equal sign, and then the URL of the Web site you're linking to (don't forget the quotes). Next comes the title you'd like to give the link, and then the closing tag. Your final result will look like this: Today's News € Back to top Finally, the birthday card! Now let's bring together everything we've learned about HTML to create an e-mail birthday card. You may want to print out this article or write down these steps so you'll have them handy. Start on the Write screen in Mail. Where you'd normally type your message, type . Next, specify the background color you'd like. For this example, I'll use green, so the HTML will look like this: Choose the color and font size you'd like to write your message in. I'll use large yellow font, like this: Happy Birthday! If you'd like, you can add an image (perhaps a cake full of candles) using the tag. Feeling generous? You may want to add a link to a Web site where the birthday boy or girl can pick out a gift — perhaps something like this: Choose a present! When you're finished, type your closing and tags, in that order. Remember, the HTML tag should always be the last one on the page. To check your HTML, you may want to send the card to yourself first. If you find any mistakes or anything you'd like to change, you can go back to the message in your Sent folder, choose Forward, and make your changes. € Back to top Practice, practice, practice HTML can be tricky at first, but with a little practice, you can easily be an HTML whiz. There are tons of newsgroups, Web sites, and e-mail lists devoted to learning and using HTML. Try searching for "HTML basics" or "getting started with HTML" to find more resources. Good luck, and enjoy the wonderful, colorful, versatile world of HTML! € Back to top

	Powered by MSN TV