Please read my Site Terms and Conditions before reading/following my tutorials and before saving any of the images on my site.

 

Tutorial: Creating A Mini HTML File

Have you ever noticed how long it can take to format text and insert a graphic into an email or post on a message board?

If you use a signature image or sig tag as they are sometimes called, then finding and inserting that image into each message can become frustrating. There are email programs in which you can create a signature that includes your image as well as any standard tag lines you use. However, some message boards or groups don't support images or formatted text sent in emails from from your personal account. To have your post be colorful and include your sig tag you may have to use their message editor when posting.

Following the steps to this short tutorial can help you simplify and speed up that task. In this tutorial you will learn how to create a small HTML file that you can save on your desktop and use to copy and paste your pre-made text, formatting and image into your new message.

One of the things I did to help familiarize myself with HTML was to view the code of messages I'd composed in an editor. So while composing messages in MSN groups I'd look at my finished email in HTML form before sending it. I also found out how to view the HTML code of my emails prior to sending them by selecting the view menu on the email I was composing and then choosing view, source edit. By reviewing the code of the messages I'd made I was able to learn quite a bit of useful information about HTML.

Some of the things I've learned that are applicable to this tutorial are that each format is contained in a code called a tag. If you're using a tag related to text, the text between the tag beginning and the tag ending is the text that will be affected by the tag. As an example of an HTML font format that would change the font color to a shade of purple you would use the following code:

<FONT color="#924ADC">purple text</FONT>.

In the message all that would be displayed would be the words purple text displayed in purple.

Another very useful tag to know is the paragraph tag, which looks like this: <P>text</P>. It usually includes an extra blank line/space after the paragraph. Simply knowing a few tags like this will allow you to make a very simple HTML file, which is really all we're creating.

The last tag you need to know for our tutorial is the tag used to insert an image. If you were to insert an image that was located on the world wide web at http://www.your_site.com/fairy_sig.gif then the code would look like this:

<IMG src="http://www.your_site.com/fairy_sig.gif">

If you want to have alternate text displayed if the image is unavailable for some reason (like the server is down or something), then your code would look like this:

<IMG src="http://www.your_site.com/fairy_sig.gif" alt="Fairy Signature">

Once the image is placed on a web page or sent in an email, if someone were to hover their mouse over the image it would display the text "Fairy Signature". If the image was unavailable then that text would be displayed inside a box with the red X.

Now with what I've explained so far all you have to do is type up the HTML code in a simple text program, like Notepad, and save the file with the ending ".HTML" (excluding the double quotes). To make it even more simple I'll display an example below of some code similar to that in the mini HTML file I use all the time with my fairy signature and formated text. Then you can copy it, paste it into a text editor and change the things you want to be different (like your image).

<p><font color=#A53899 size=4>text</font></p>
<img src="http://www.your_site.com/fairy_sig.gif" alt="My Signature">

This is how it would look if opened in a browser window:

text

So now that you know what the code looks like, and you probably have an idea of what you want yours to look like, all you have to do is create the file and save it. Again, I save mine to my desk top or a folder on my desk top so I can find it really quick. Then since I saved it in HTML format when I open the file it looks just like what I want my message to look like (except it says "text" where I will type my message). So after selecting the whole thing (ctrl + a), copying (ctrl + c), and pasting (ctrl + v) it into my message, I double click on the word "text" and type my message.

I hope you have lots of fun creating your own mini HTML files.