~ HTML Tutorial ~

Be sure to save this page
in your "Favorites"!

TECHNICAL TERMS:

E-mail: Electronic Mail

HTML: Hyper Text Markup Language

WWW: World Wide Web

HTTP: HyperText Transfer Protocol

GIF: Is a graphics file format abbreviated for:
Graphics Interchange Format.

JPEG: Joint Photographic Experts Group

MIDI: Musical Instruments Digital Interface

RAM - RealAudioMetafile, NOT designed for email.

WAV - WaveformAudioFileFormat (MIcrosoft)

URL: Uniform Resource Locator
-- or web address to some folks.

FTP: File Transfer Protocol

FYI: For Your Information

FAQs: Frequently Asked Questions

~ Lesson one ~
~ Email sig ~

"Further along,
we'll know all about it,
further along we'll
understand why,
Cheer up, my brother,
live in the sunshine,
You'll understand it
all bye and bye!"

OK, lets keep this lesson nice and simple.
We will start off with email sig.

Step #1

Go to your "email", then click on "settings" on the top bar, then click on "signature".
You will see the box where your codes go.
After entering the codes, click on "done", then "done" again.

Note: NEVER use the "Return/Enter" key when typing in a URL! Just let it automatically wrap around to the next line.
Make sure there is NOT a space in the URL.

Note: If you need to clean out a mess in your sig box, use "Cmd" + "A", then "Delete".

You will also need to learn CCP (Cut, Copy, Paste).
It is sooo simple to learn, and simple to use! You will avoid a lot of typos with CCP.

A large percent of "Why won't it work?" is due to typos.
The browsers are not very forgiving of typos and bad code!

So many people post "I know I entered the
right code. Why won't it work???"
Well, my friend, if you do have it right,
it will work.

Upon review, it is usually The TYPO Gremlin Struck Again!

Once you use CCP a few times, you will wonder how you ever got along without it!

Step #2

1. The very first tag you enter is the opening
HTML tag: <HTML>. Not even an space before it!!!

And the very last entry is the closing
HTML tag: </HTML>.

2. The second tag must be the opening BODY tag:
<BODY>.
Every thing in your email sig is part of the BODY.

The body tag can have several attributes.

The closing body tag: </BODY>, must go
just before the closing HTML tag!

NOTE: Only one set of HTML tags to any document !!!

Step #3

BODY Attributes

Or if you just want a solid color background:

The font colors must be compatible with
the background.

Text and images and all the rest of everything goes here...

</BODY>
</HTML>

But of course, You can use what ever background your li'lle heart desires.

Note: If the image you are tring to use is smaller than the actual page size, it will "tile".

Note: If you have trouble with a line in your background below your text (ghost bar), use <noembed> before the BODY BACKGROUND tag, and put </noembed> right after the Body tag. .

Do NOT, however, use the noembed tags when posting or all the elements will be boxed in a grey/white field. You must remember to add the noembed tags when emailing and remove them when posting.

Be sure to remove the <noembed> tags before posting, however. The "ghost bar" problem does not occur in posts, and the <noembed> tags can cause problems in posts.

Here we have learned to use "wallpaper" as the "background", change the text color, have a bgcolor - to fill in the blanks, so you don't have that default gray box to type in.

Practice it a few times, sending email to yourself, 'till you get the hang of it. Play around with the font color, etc.

The Image Tag

The image tag, IMG which appears in the BODY is a link to where the image is stored.
You should also size the image by using the height and width attributes.
This helps the browser to load faster!

The code is:

Want a border to frame the image?
Just add: border="4" to the tag.

Adding music:

This will give a speaker icon to click on.

With this tag, the song will start automatically.
You can have it loop as many times as you want.

Note: You can only have ONE autostart song tag in the sig box.
Additional songs will have to be "click on".

Here is a code for on and off button:

NOTE: Use only midis and wavs in email.

NOTE! Real Audio (rams) were NOT designed for email !!!

They were designed for Website pages.

When used in email, With autostart they tend to FREEZE UP the webtv box, and have to unplug the unit to get out of it!

This is detrimental to the box!!!

You can make a lot of enemies freezing up people's webtv box!!!

Also, when you try to use Real Audio, you are actually STEALING expensive bandwidth!!!

They are designed to be ONLY played on the Hosts Website! ( usually by clicking on )

A lot of fine Real Audio Host have had their site shut down because of bandwidth theft to the tune of several thousands of dollars per month!

And you CANNOT transload Real Audio!

If you try to transload a ram, you are actually just transloading a REFERENCE pointer file that links to the actual LIVE STREAM HOST!

So this is the order for the code:

<HTML>

other images, text, etc.

</BODY>

</HTML>

Before starting! Remember to always type <HTML> on the very first line. Not even an space before it!
Always close with </HTML> on the very last line.
If you fail to do this procedure, your work will only show up as text instead of a graphic.

You must write the URL exactly as it appears.
Lower case letters and Capitals must match exactly!

This is one reason Cut, Copy, Paste is so important!
Failure to copy this address exactly will result in a little blank box on the screen.

oops!!!

Another reason you might get a blank box instead of the image is:
Some hosts DONOT allow remote linking of some or all files !!!

It is best to Upload the image to your Scrapbook for usage.

How do you find the URL of a graphic or sound?

To Center The Graphics:

Here's how to type the tags to center a graphic.
<CENTER>
<IMG
SRC="https://members.tripod.com/~Cannonball2/gif-2/bud1.jpg" height="88" width="150">
</CENTER>

You can also align the image to the RIGHT:
<img align="right"
src="https://members.tripod.com/~Cannonball2/gif-2/bud1.jpg" height="88" width="150">

Images above the BODY

To make a Clickable Link

Use this command:
<a
href="URL of where you want to go">
Words to turn blue and click </a>

To have an image to click on, use this command:
<a
href="URL of where you want to go">
<img
src="URL of gif"></a>

To make a clickable link for your email, use this command:

<a
href="mailto:you@yourdomain"> words to click</a>

To have an image to click on for email, use this command:

And you will get this:

You can change the font color and/or size:
<font color ="???" size="???">
and it will need a closing tag </font>
Font size is from 1 (small) to 7 (large)
To center text, use this command:
<center> Text to be centered here. </center>
To make bold print: <b>Text</b>
To make italics: <i>Text</i>
To underline text: <u>Text</u>
To make a teletype look: <tt>Text</tt>
For strikethrough: <s>~~Text~~</s>
Blackface: <blackface> Text</blackface>
To make a line indent: & n b s p ;
When you type it, do not have a space between the characters.
To break to the next line: <br>
To skip a line: <p>
To skip several lines add more <br>
To have a message appear exactly as you typed it, use: <pre> at the start, and </pre> at the end.

Note: The font tag attributes in the sig box only effect the text that is in the sig box.
To have font attributes effect the text in the body of your email, you have to write your email in HTML.

Summary:
Here is a summary of everything that you've learned so far:
Where to put the HTML and BODY tags
Font colors for text
You can use the HEIGHT= WIDTH= and <CENTER> </CENTER> ALIGN tags in combination together to achieve the desired results.
To make a clickable link.
To assign attributes to text.

1. To make background a solid color:
<body bgcolor="color code or name" other body
attributes (if any) here>

2. To have graphic as background:
<noembed>
<body background="http://URL of gif" other body
attributes (if any) here>
</noembed>

3. Use attribute text color="color code or name"
Use attribute bgcolor="color code or name"

4. To use an image:
<img src="http://URL of gif or jpg" (attributes
here: height & width)>

5. To align image: <center> image </center>
and attributes align="right", align="center",
(the default is aligned left)

6. To make a link:
<a href="http://URL of where to go">Text or
Image to click on.</a>

7. To make a song play automatically:
<embed src="http://url of song"
autostart="true" loop="2">

8. To have a speaker to click on to play song:
<embed src="http://URL of song">

9. To make an email link:
<a href="mailto:Your addy">
Text or image to click</a>

10. Text styles & line breaks.

Now PRACTICE your codes on your email page
and send it to yourself.
This will let you get familiar with the codes
and also let you work out your bugs.

Here are a few tags that will not work in an email whether they are typed in the message area or actually in the signature box:

a. The body tag attributes of link or vlink. BTW the WebTV browser doesn't see the attribute of alink.

( To change the color of a link text use this code:
<a href="http://URL of link"> <font color="color of choice"> text to click on </font> </a> )

b. The body tag attributes of transition, logo, address, credits, hspace, vspace, xspeed, yspeed or instructions.

c. Any type of javascript

d. Head and title tags

e. The use of meta tags naturally since you can not use the above.

Have fun and enjoy.

HTML + CCP = FUN !!!