|
So you want to create your own
cool profile on Where's George?
Good! Hopefully these very
basic instructions will help. If you need (or want)
more in-depth HTML instruction visit the links at the bottom of this page.
HTML stands for Hypertext Markup Language,
it's essentially a language code that enables internet browsers such as
Internet Explorer or Netscape to present web pages in a way that is relatively
consistent with the way the designer created them. I say, "relatively
consistent" because pages may appear differently -- depending on the
site visitor's display settings and installed fonts.
The various elements of an HTML document
are denoted by using tags which consist of a less than sign [<]
says that you're starting an HTML tag, then name the tag, and end with
a greater than sign [>] to close the tag. Many tags don't
require a an absolute closure by using the forward [/] slash, but
it's better to get in the habit of always using it rather than trying to
remember which tags require it and which don't.
Use Windows notepad or any word processing
software to write the HTML for your profile. Once you've got it written,
simply copy and paste the tags into the appropriate space on the WG Profile
form. After you've finished you can display your profile. If
it doesn't look the way you intended just hit the back button on your browser
window and review and edit what you've done. Finally, be sure to
test any links you've given. The most common error is forgetting
to close a tag. When you've got your profile looking really
cool, be sure to share your pride and joy by posting a link to it (the
link address is at the bottom of your profile -- use the copy & paste
technique described in Linking
WG Hits)!
To jazz up your WG profile the main HTML
elements you'll be interested in are:
| Font Color - select
your favorite, but I would suggest you limit the number different of colors
you use in your profile.
The beginning of the tag is
<font color="#hexadecimal number for
the color you want">
to end the font color, close with the
</font> tag. In this case you MUST use the number sign # and the
hex number must be within quotation marks. |
Formatting - font size,alignment,
spacing and using bold and italic text.
Font size can be controlled by using the
heading# code -- where # is a number between 1 (largest) and 6 (smallest.)
In this instance you do not use the number sign, just the number you've
selected.
Alignment is left (default), center, or
right.
Use <P> to create a full line
break between paragraphs. |
Image Source1
You'll need to have your image stored on
another site... you can get free web space at xoom.com
or fortunecity.com
store the image you want to use there, then link it to your WG Profile.
There are several parts to this tag command. |
| <font color="#FF0000">would
show all red text within the tags </font> some very common colors are:
"#FF0000" for red
"#3333FFF" for
blue
"#FFCC00" for gold
"#009900" for green
"#999999" for gray
-
which looks very pleasing on the black background
see
the color chart at xoom for more color choices. |
<h1> begins the largest
font size </h1> ends it, and it looks like this:
h1 Example
<h3>begins the midsize font
</h3> ends it, and it looks like
h3 example
use <b> to say whatever you want</b>
in bold text.
use <i> to say whatever you want</i>
for italic text.
You can combine font tags too!
<b><i> say whatever you want</b></i>
to look like this. |
<img> says it's an image,
(must be .gif or .jpg format)
<src> gives the URL address where the
image is stored;
<height#> and <width#> give the
size(# indicates the size in pixels);
you can also indicate a specific alignment
<align=top, bottom, left, center, right>
You should also give alternate text for
folks who view without images <alt="name of your image">
Here's how you put it all together:
<img SRC= "http://www.xoom.com/your
user_name/your_image_name.gif" ALT="your_
image_ name" height=120 width=217></h1></center>2
(use no spaces in this tag!) |
Putting it all
together!
You ask, "How
can I do that?" Here's the code:
<center> <h3>
<b><i><font face="Arial,Helvetica"> <font color="#3333FF">Putting
it all together! </font></font></i></b></h3></center>
Notice: I centered
the text, made it h3, made it bold italic, then named my font face and
color *** then wrote the text *** and lastly closed the font commands in
the reverse order they were entered. [one "/font" ends the color selection,
the second "/font" ends the font face]
You don't need designate a specific font face,
your text will appear with whatever the default font is selected in your
viewer's browser, just like this paragraph. Arial and Helvetica are
two very common font faces I think are easier for the visually impaired,
or folks with aging eyes like mine. Compare the text in this paragraph,
and the text on the rest of this page -- both are at 12 point. |
Another HTML tag you might
want to use is one that will create a text link within your profile, one
or more in addition to the one that Hank has for you at the bottom of your
profile.
<a(anchor)href(says look at the following
the URL address)=(which is the site you're linking to)</a>ends the anchor
Here's how it would look:
<a href="http://www.siteyouarelinkingto.com>
Text you'll use to be the link</a>
(use no spaces in this tag!) |
1 Unless you
are using an image that you created, be sure to give credit and a link
back to the source (even ones from a free site). Never link to an
image on a site that is not yours. For more information on copying
and linking to images and net etiquette see:
2 A word of
caution on naming conventions, you may not have spaces on your image names,
if you want a space use the underscore. You may use spaces in the
ALT text.
One last note, on my WG
Profile I used a font called "Georgia" which is available free
from
Microsoft's
site. If you use a font that is different than the
default fonts (variable or fixed width) be aware that viewers may or may
not see the font you've selected unless it's already installed on their
computer. In your HTML you'll have to identify the font using the
tag <font face="Arial,Helvetica"> where the font name is between
the quotation marks. If you're using a non-standard font true type
font it would be a good idea to offer a source (MS site linked above) for
the font. |
Links