~ HTML Tutorial ~

TECHNICAL TERMS:

E-mail: Electronic Mail

HTML: Hyper Text Markup Language

WWW: World Wide Web

<IMG SRC=Image Source.

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 ~

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 and one set of BODY 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 you have trouble with a line in your background below your text, try using <noembed> before the BODY BACKGROUND tag, and put </noembed> right after the Body tag. .

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".

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 that links to the 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.

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

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

You can use the Search Engines to find images and sounds.

If the image is a clickon, while viewing the image, hit "Go To", "Show current". That will bring up the URL to Copy & Paste.

While viewing a webpage, if the sound is a clickon to play, while it is playing hit "Go To" & "Show Last". This will bring up the URL to Copy and Paste.

Note: it is best to upload images to your Scrapbook when using them in your email.

How to use images from Webtv ScrapBook

See graphic on a webpage that you want the URL for?
You can Validate the webpage to get URLs or the code to see "How did they do that?"

Need to see the code of an email sig, or a post?
While viewing the page, hit "Send" (in the upper right of the keyboard).
Address it to yourself. Now bring the curser down
into the "subject" line and delete what is there.
Now move the curser down into the body area and hit "Return/Enter" twice.
Now hold down "Alt" and hit "K",
Now hold down "Cmd" and hit"A", "X".
Now move curser up to "subject" line and hit "Cmd" & "V".
Now scroll down and click on "Send".
If you followed there steps, when you read the mail, you will see all the code.
That is called "Bouncing".

Although this works 99% of the time some e-mail and or posts can not be bounced.!?!

Now that you know how to get URLs of images and midis, you should learn how to "Transload" them to your site so that you are not stealing bandwidth from others.

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">

Sizing The Graphics
This is the original size of the graphic. We are going to learn how to change the size by writing these HTML tags:

You can experiment and change the WIDTH & HEIGHT numbers to whatever pleases you the most.

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:

To center text, use this command:
<center> Text to be centered here. </center>
To make bold print: Text
To make italics: Text
To underline text: Text
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: 
To skip a line: 
To skip several lines add more 
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.

Have fun and enjoy.

HTML + CCP = FUN !!!