The Basics | HTML Toolbar | Getting Started | Sample Designs | Netiquette | Related Links

Getting Started

Warning! I strongly suggest reading the netiquette portion of this web site before attempting to design an HTML post on a public newsgroup!

Ok, let's get started! Open up Outlook Express and select New Message.

There are quite a few things we can add. Backgrounds, fonts, hyperlinks, margin adjustments, colors, and even lists.

This is just a test message so please don't post it to a public newsgroup unless it is designated as a test posting site (they do exist).

Ok, window open we're ready to create. One thing I like to do in my USENET posts is distinguish a heading. You don't have to do this in your posts or e-mail, but try it for leaning sake.

Type in the heading My First HTML Message. It will show up in your standard Windows font at first, but we will fix that.

Now take your mouse and click on the left-hand part of the text (right before the M in My). Hold down the mouse button and drag it to the end of the word Message. Let's start by increasing the size. Large is a good size for a heading so with the text still selected click on the Font Size Selector and choose Large.

Now let's choose a good legible font. As I said, Verdana is a very popular font, and since you're reading it now, you choose how legible it is. Still keeping the text click on the Font Type Selector and scroll down until you see the font Verdana.

Great, now since it's a header, let's make it bold! So, keeping the text highlighted click on the B to make it bold.

Getting the hang of this? Hope so. Now let's pick a great color for our header to distinguish it and give it flare. Choose Teal from the Color Palette icon located on the HTML Toolbar. Great! Now your header should look like this:

My First HTML Message

Am I correct? Ok, now we're going to do some formatting to prepare for the background I will have you try out. You don't have to have the text highlighted, but the blinking "|" cursor needs to be on the same line as the words My First HTML Message. Once it's there, click on the right margin adjustment button. Click it once and your text should look like this:

My First HTML Message

 

Now let's add that background. This part is a little bit different that creating other types of documents. As I mentioned before, you have to tell Outlook Express a URL (http://www address) of a graphic file instead of selecting one on your hard drive. To make things easier, I'll give you one to use. You'll have to find your own backgrounds when it comes to posting messages and writing e-mail, but later on check out my related links page and you'll see some great resources.

On the Menu Bar, click on Format, then drop down to Background and finally select Picture... Copy and paste, or manually type in the following URL:

http://www.barkers.org/ie/img/oe/cookie.gif

Once you've done that, click OK. It may take a second for the image to load. Now do you see why we formatted the text a little to the right? Perfect, right?

Now select the text just right of the word Message and hit Return. It will carry you to the next line (two actual lines down). By default, Outlook Express will drop down two lines when hitting return. This is because it expecting you to write complete paragraphs. Well, we want it two lines down. This gives us a bit of space between our header and our body text. Next we have to un-do everything we've just done. It will keep the previous settings until we change them.

So click on B to return us to non-bold text, click on the color and select default color, then click on size and go to smallest. Smallest should be labeled Normal, since it is a very common size for text in news readers. But they call it smallest none-the-less (what can you do?)

On With The Typing!

Now lets type in the body of our text. Make up something--anything! This is just a test right? Now as long as you didn't click the left-margin adjustment button the text should still be aligned with the background.

Just for kicks (you wouldn't do this in normal e-mail or posts--I hope), start highlighting parts of text and make some bold, make some italics, underlined, different colors, and such.

Imagine That

You can add images to your HTML posts and e-mail too, however I strongly recommend not using images in newsgroups unless it serves a purpose (i.e a screen shot when helping out with a technical problem). Just like background images, you need to add them from a specific URL (a full Internet web address). So since I gave you that cookie, why don't we use it in your message. Haha, alternative motives!

Click on the area you want the cookie to go (you can use the left/right/center adjustments later to put it where you want vertically). But find a good place within your text and get that "|" cursor blinking there. Now click on the Image button and enter the following URL:

http://www.barkers.org/ie/img/oe/cookie.gif

There, you now have a cookie in your post. If you're sending an e-mail, maybe you can ask someone that famous kindergarten one-liner: What do you want? A cookie??? Then give it to them =).

Signing Off

Now this part is purely optional, but I'll show you how to do it just in case you think it's cool. Ever notice how some people end their message the same way...every time? This is called a signature, and you can have one too. Just be careful not to make it too long (in fact Outlook Express will even tell you when it is--not saying you have to make it as long as possible).

First you need an HTML editor, or know how to do it in a plain text editor like Notepad. But for this demonstration I will assume you have downloaded Microsoft FrontPage Express. If not, simply click on this link and you will be taken to where you need to be to download it.

First you have to think of a signature. Typically signatures include one or more of the following. Your name, a quote, your e-mail address, and maybe your homepage link.

I will use my current Signature as an example. This is what gets added on to the end of all my messages.

Sonja

Techie For Life--Because "Cute" Gets You Nowhere!

Hand woven in HTML using Microsoft Outlook Express

Want one? Well, FrontPage Express is a lot like the HTML Edit Window in Outlook Express. For this test message, you will need to move your text over using the right margin adjustment button again. Just click it once to move it over.

In my signature, I wrote out "Sonja," changed the font to Lucida Sans, Increased the font size to Largest, and turned the color turquoise. Next I hit return and used the right margin adjustment button again and typed out Techie For Life... I switched the font down to small again, the font back to Verdana, and made it bold-face. Then I dropped down another line and put the Hand woven... part in, reducing it to the smallest font.

If you notice the Microsoft Outlook Express is a hyperlink. Actually two hyperlinks. The word Microsoft leads to www.microsoft.com and Outlook Express leads to the Outlook Express part of the Internet Explorer 4.0 web site.

All I did was highlight the text with my mouse that I wanted linked, and clicked on the link button on the HTML toolbar. Then I typed in the exact URL (http:// included) and clicked ok. Wha-bang! An HTML Hyperlink in your e-mail or news post.

Now in FrontPage Express, go to File on the menu bar and save your document. The best place to save them is in a directory like c:\ or c:\temp because you will have to enter the exact location manually into Outlook Express. Save it in the C:\ directory and call it sig.htm.

Now go to the actual Outlook Express application (the 3-window program). Click on the menu bar there and select Tools. Now select News Options... If you are designing an e-mail click on Mail Options... Now an options box will show up and you will see a Tab on the top marked signature. Click on that tab and enter C:\sig.htm in the box marked file.

Congratulations! Now go back to your edit window and click on the bottom of your document. Click on the edit window primary toolbar (top icon bar) and select the Pen icon (far right). This will enter the sig.htm document into your e-mail or post.

That's it! You've made your first e-mail post! Congratulations. For more extensive information, I hope to eventually to add more, but I think creating this entire site within one day is enough for me right now. By the time Microsoft releases a final copy, I will most likely have more.

Read Up On Netiquette

IE4 Central
Copyright © 1996-2008 Barkers.org. All Rights Reserved