Working With Text and Images

You can manipulate text with a variety of tags which determine the type face, color, size, and other attributes.

Unless you specify a type face, the default will be shown, which is Times New Roman, size 3: Times New Roman, size 3.

You can choose whatever type face (FONT FACE tag) you want, but the surfer's computer must have that font loaded, or he/she will not see it. One common font used is Arial - that is what I am using now, size 3. Here are a variety of sizes in Arial:

Arial, size 1 Arial, size 2
Arial, size 3 Arial, size 4
Arial, size 5 Arial, size 6
Arial, size 7

You can specify more than one font for the computer to look for. It will check the first, if it does not have it, it will check for the second and so on. <FONT FACE="mistral,kids,arial">text</FONT>

So, to choose Arial in size 4, you type:
<FONT FACE="Arial" SIZE="4">This is your text.</FONT>, which looks like this:

This is your text.


You can also make type bold, underline it, or italicize it. To better see the smaller sizes, it is best to bold it, so here is Arial, size 2 in bold:
<FONT FACE="Arial" SIZE="2"><B>This is your text.</B></FONT>, which looks like this:

This is your text.


To italicize, you use the I tag to italicize. Here is the code for Arial italicized:
<FONT FACE="Arial" SIZE="3"><I>This is your text.</I></FONT>, which looks like this:

This is your text.


And <FONT FACE="Arial" SIZE="3"><U>This is your text.</U></FONT>, which looks like this:

This is your text.


You can use a combination of commands, so here is the text line in red, bolded, italicized, and underlined:
And <FONT FACE="Arial" COLOR="red" SIZE="3"><B><I><U>This is your text.</U></I></B></FONT>, which looks like this:

This is your text.


(Note how the kill tags are put down in reverse order as were originally used)

Why was the word "red" used instead of hex codes? Because there are some basic colors that can be just put in by words; they are:

black maroon green
olive navy purple
teal gray silver
red lime yellow
blue fuschia aqua


Notice how some of my lines are centered? I do that with ALIGN tags which are placed into the the P (paragraph) tags. So here is the code for Arial text, size 4, and centered:
<P ALIGN="center"><FONT FACE="Arial" SIZE="4">This is your text</FONT></P> which looks like this:

This is your text.


Lines are separated by line breaks <BR> or paragraph <P> tags. <P> will place a space between lines and <BR> uses the very next line. <BR> is handy to use when you want to place certain words on certain lines. Here are examples:

I am using the
break tag
to determine
which line
the words go on.

<P ALIGN="center">I am using the<BR>
break tag<BR>
to determine<BR>
which line<BR>
the words go on.</P>


I am using

just the

paragraph tag

to separate

these lines.

<P ALIGN="center"><FONT FACE="Arial" SIZE="1"><B>I am using</FONT></B></P>

<P ALIGN="center"><FONT FACE="Arial" SIZE="1"><B>just the</FONT></B></P>

<P ALIGN="center"><FONT FACE="Arial" SIZE="1"><B>paragraph tag</FONT></B></P>

<P ALIGN="center"><FONT FACE="Arial" SIZE="1"><B>to separate</FONT></B></P>

<P ALIGN="center"><FONT FACE="Arial" SIZE="1"><B>these lines.</FONT></B></P>


Notice how the FONT attributes need to be repeated - because you started a new paragraph with each line. Have I confused you yet? Let's try other alignment tags. I am using default font because the code was getting too long.

I have aligned this line to the right.

This line is centered.

This one is to the left (default).

<P ALIGN="right"><FONT SIZE="1"><B>I have aligned this line to the right.</FONT></B></P>

<P ALIGN="center"><FONT SIZE="1"><B>This line is centered.</FONT></B></P>

<P><FONT SIZE="1"><B>This one is to the left (default).</FONT></B></P>



Just play around with the various tags and see the effects you get. That's how I learned.



Part One
Starting Out and Sound

Part Two
Working with text

Part Three
Images, HRs, Linking, and Wallpaper

Part Four
Tables are your friends

Part Five
Using Backgrounds & Borders


Main SiteGuide
Avian Critter || Canine Critter
Human Critters || Wild Critters

background/hr by me: Papagei Studios