Let's Learn A Little About 
&
What's Inside Your Stationery
and Webpage Documents
?
Many of you
are already familiar with viewing
the
source codes from
making stationery for Outlook Express.
Some of you may just
be getting started. For those of you who
do not have Preview
set up in the toolbar in Outlook Express,
please click the
link for setting
up
Preview in OE to find out more .
The
best way to know how to adapt your script document
for using applets in your stationery and
webpages, is to know what some of the basic tags
that are being used are and where to insert them.
Let's examine a basic script. This is by no means a
class in html. What I am trying to accomplish is to teach
you just enough for you to know how to change the
scripts that you use and how to add tags to it. My hope is
that you will be able to better understand the basic outline
of the documents. This information should be helpful
to you in making stationery and in designing a basic webpage,
since the two are very similar. This may seem a little
vague.....
I plan
on taking some of the more difficult things and doing separate
pages to explain them more thoroughly.
Bear
with me......Those pages will follow shortly.
and
the list of common tags that I
use. Save the list somewhere on you computer where you
can access it quickly and
easily. You will be able to use it for
copying/pasting tags into your documents.
You
can add new tags to it as you learn
them.....
not
all the possible tags are included here.....these are just the
basics. Notice that most tags have both an opening tag
<HTML> a closing tag </HTML> . These tags
enclose all parts of the document that apply to that particular
tag. You will find this information helpful when cleaning
scripts for reuse in Outlook Express
stationery.
<HTML></HTML>
The html tags enclose the
entire document.
<HEAD></HEAD>
The head tag contains the
title tags and style tags.
<TITLE>title goes
here</TITLE>
<!--This is a comment tag. It is used when you
want to place a remark or notation inside the document without it
being visible to the person viewing
it-->
<STYLE>
Inside the style tags you will find rules
for the various tags (divs, tables, tds, marquee, etc.) used
inside the body of the document such as scrollbars,
fonts, and borders. Each rule will begin with Location { and be separated by a : and a ; and each
will end with a } if a specific table
or div is to have a specific rule, a class=identifying name bit
will be inserted in the table or div to define it. the code
will be preceded by a .identifying
name. You would see for example
.....
<TABLE class=table1
......etc.></STYLE>
Here are some examples of using the
style tag in this
manner....
<STYLE>
BODY { SCROLLBAR-3DLIGHT-COLOR: #FAEC90;
SCROLLBAR-ARROW-COLOR:
#FAEC90;
SCROLLBAR-BASE-COLOR: #7D749C;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
SCROLLBAR-FACE-COLOR:#7D749C;
SCROLLBAR-HIGHLIGHT-COLOR:
#FAEC90;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #7D749C;
BORDER-BOTTOM: #908FB1
10px ridge;
BORDER-LEFT: #908FB1 10px ridge;
BORDER-TOP: #908FB1
10px ridge;
BORDER-RIGHT: #908FB1 10px ridge;
FONT-FAMILY: "Lucida
Handwriting";
COLOR: #FAEC90; FONT-SIZE: 14pt;
FONT-WEIGHT:bold
}
</STYLE>
<STYLE>
TD {BORDER-BOTTOM: #908FB1 3px dotted;
BORDER-LEFT: #908FB1 3px dotted;
BORDER-TOP: #908FB1 3px
dotted;
BORDER-RIGHT: #908FB1 3px dotted }
.table1 {BORDER-BOTTOM: #908FB1 10px ridge;
BORDER-LEFT: #908FB1 5px ridge;
BORDER-TOP: #908FB1 10px
ridge;
BORDER-RIGHT: #908FB1 10px ridge }
</STYLE>
<!--For borders
you can choose from outset, inset, groove, solid, double, dashed,
dotted or ridge.-->
Click on the link
to see some examples
The body
tag is used to define the background image that will be used and
the main background color. You will notice that the
closing </BODY> is near the end of the document. That is
because the body houses most parts of the page.
<BODY
background="your pathway/background image.jpg"
bgColor=#ffff40>
Next
we have a basic music tag.....sometimes you may even see two of
these.....one will nearly always be a midi and the other a
wav. It is not a good idea to put 2 of the same type files
together, since they will cause a conflict in the player on most
computers. In the text, the volume is normal, and the
loop setting is infinite which means it will play over and over
forever. You can define the loop by using a specific number
and change the volume also. The style=display:none means
that the player will not display when the music
plays.....
<BGSOUND src="your pathway/music file.mid" volume=0
loop=infinite balance=0 loop=0
style="DISPLAY:none>
In the
following background sound tag, the file used is a wav file, the
volume is cut in half and it is defined and will play in the loop
only 3 times.
<BGSOUND src="your pathway/music file.wav" volume=-500
loop=3>
There
are other music tags that you can use including
embedded sounds
and asfs, but I will not get into those
at this
time. You can learn about these players and
others in our other tutorial section at this
link
The background tag has no
closing.
There are several ways to define an image
tag. The first way being the simplest wayto center an
image. Next you see the same tag with align=baseline which
will center the image also. And another way would be to
place it on the screen using a style="code to define exactly where
the image will be placed". Sometimes, in more complicated
stationerys or webpages, you will find the image placed within the
<script></script> section. The image
tag is another tag that has no closing
charachters.
<CENTER><IMG
scr="your pathway/image name.jpg"
height=300 width=300></CENTER>
<IMG scr="your pathway/image name.jpg" height=300
width=300 align=baseline>
<IMG scr="your pathway/image name.jpg" style="HEIGHT:
300px; WIDTH: 300px; TOP: 50px; LEFT: 200px; POSITION:
absolute">
You may
also see the font defined beside each text instead of in the
<style> tags. It can b e used to define different
colors or text sizes or styles on a page by using font tags as in
the example below.....
<FONT face=Lucida Sans
color=#ffffff size=4>text goes here</FONT>
Some other
basic and common tags we would use would be
......
<B> bold text </B>
<I> Italicized text
</I>
<BR> break or
new line
space
<DIV><B><I><FONT face="Lucida Sans"
color=#800080 size=4>text goes
here</FONT></I></B>
In addition
to using the <STYLE></STYLE> tags to define
the style, you may see the information inserted into the tag you
want to define. for example using style=
<DIV style="BORDER-BOTTOM: #908FB1 10px ridge;
BORDER-LEFT: #908FB1 10px
ridge;
BORDER-TOP: #908FB1 10px ridge;
BORDER-RIGHT: #908FB1
10px ridge;
WIDTH: 600px;
HEIGHT:
600px">
The next
tag is used to surround a paragraph and align the text. It
can always be used to insert a double line instead of using <BR> twice. However, using more
than one <P></P> tag
together will still only produce a double line, whereas the
<BR><BR><BR> when used in sequence will
accumulate that number of lines. You can also use align=left
or align=right for placement.
<P
align=center>paragraph text goes
here</P>
<MARQUEE direction=left
width=400 height=400 scrollDelay=80
scrollAmount=1>marquee message goes
here</MARQUEE>
<!--you can also use behavior=alternate
to make the image bounce back and forth or
direction=right to change the
direction. An image tag can also be inserted into the
marquee tags instead of using
text-->
<MARQUEE direction=left
width=400 height=400 scrollDelay=80
scrollAmount=1><IMG src="your image goes here"
border=0 height=150 width=150> </MARQUEE>
