HTML Workshop FAQ

Frequently Asked Questions (FAQ)

What's a FAQ?

This is the document that contains the LINKS to the questions most frequently asked of the HTML Workshop. More than likely, you will find your answer right here so, when you're looking for an answer to a question or problem...

ALWAYS LOOK HERE FIRST!!!!!!!

If you can't find what you're looking for, check out the link for the entire Help Index. That's got EVERYTHING!!!

For Complete Beginners: Video Guides from VideoJug

What's Inside My Computer?

How Not To Get Your Computer Fried In A Storm

What Is The Internet?

Internet Terminology Explained

HTML

What the heck is HTML? CSS? A URL?

Common HTML tags you can use on Eons

Beginner's Guide to HTML: A Lesson From VideoJug

Page Backgrounds and Design

Spice up your profile with "The Skinner"!!!

Don't want to work hard? Here's our Profile Design Gallery

Page Design Tips

Column stacking and/or overlapping problems

Advanced CSS...Not for the fainthearted. (A doctor's note will be required...)

Page Elements

Place pictures or graphics in your profile, messages, replies and announcements

Align pictures and graphics

Place text and graphic links into your profile, PMs and posts

How to create or change the banner at the top of your profile

Colors

See the 216 browser-safe colors you are DEFINITELY able to use on Eons pages

Check out over 1,000 colors you MAY be able to use on Eons pages

Change the look of your text

Extra Goodies

How to add a music player to your profile

How to add audio to your profile, posts and PMs

How to place a border around pictures

Learn about Marquee tags and what do they do!

How to post a YouTube video

Playing your own videos on Eons

Final Thoughts

The Manager and Moderators of the Workshop will add to the FAQ from time to time as questions and issues become more common. Check back occasionally...

Posted by BluesPlayer

What the heck is HTML?

The Three Definitions You Need To Know

1. HTML: Hypertext Markup Language

This is the "computerese" that the Internet uses to display web pages. The word "hypertext" refers to the fact that you can make a web page link to any other web page by using the HTML language. While you will get to see how these links are created later on, just know that the original intent of HTML was to create these connections.

Somewhere along the way, HTML developers thought it would be nice to have the language do a whole lot of other things...especially make web pages look pretty. So we now have an array of commands built into HTML that lets us do exactly that...and much more.

HTML commands are called "tags" and virtually all of them come in pairs, that is, they have an opening tag and a closing one. In between goes the rest of the HTML code that tells the computer's browser how you want that command executed. Let's look at a simple one: the BOLD tag, which turns your text from regular to bold...

This text will now be in a BOLD face type

... results in...

This text will now be in a BOLD face type

The Bold Tag is written as ""; it is followed by the text you want in the bold face type and then closed with the "" tag. You will notice that all HTML tags are enclosed with the "<" and ">" characters and that a closing tag will contain a "/" right before the original tag's name. If a tag REQUIRES a closing tag, you must provide one or else the original tag's influence continues to the end of the page. You probably won't like the result....

Then again, some tags are completely self-contained and don't need a closing tag. Here's the Image Tag that places a picture or graphic on your profile page or in a PM or post...

<img src='http://www.mysite.com/picture1.jpg'>

As you can see, this simple "<img>" tag refers to the "src" or SOURCE of the picture and does not need a corresponding closing tag. This tag can be used anywhere on Eons. There's plenty of help here on the Workshop to teach you all the tags you need to know, but now that the mystery is gone, you will be able to understand those instructions a whole lot easier.

2. CSS: Cascading Style Sheets

This part is definitely NOT easy and that's why we have no intention of teaching you CSS (Cascading Style Sheets). This is special code used on HTML pages that control the look and feel of whole pages and their sections quickly and easily. The code is called "cascading" because the influence of the code at the beginning of the page "flows down" to all the sections of the page unless you specify a different "style" for a section. CSS is basically HTML on steroids and contains a lot of weird looking codes that you don't have to be concerned about.

With the creation of the Eons Profile Skin Editor (we call it "The Skinner"), you will not have to do ANY CSS coding on your pages the way you used to. All the usual options to control your profile page are now done directly in The Skinner and NOT in your My History section as you did before. For more information on The Skinner, see that section in this FAQ.

In the future, we will use CSS in the Workshop to OVERRIDE additional CSS that Eons employs so that you can create even more unique and colorful profiles. However, unless you are an experienced CSS guru, the Workshop does NOT recommend writing your own CSS code. We have no idea what will happen if you do.

3. URL: Uniform Resource Locator

This is just a fancy name for a web address...the "location" of a picture, graphic, audio track, video, etc. The URL ALWAYS starts with "http://" followed by the address "www.something.something". On the Workshop, you will see code snippets like...

<img src='... your url ...'>

Using the Image Tag above, you can see how you will substitute your exact URL into the code. An example for Photobucket would look like...

<img src='http://www.photobucket.com/mypictures/ocean.jpg'>

URLs are used all over Eons to display pictures, images, banners and so much more. Just know that when you see "your url", just substitute the location of your file. If you don't get the results you expected, you probably left out the surrounding quotation marks or mistyped the correct URL or left out the "http://" part of the address. Please check your work.

Common HTML Tags You Can Use On Eons

The nice thing about HTML is that the tagging is written in English that pretty much describes the function of the tag(s)! Here are a few examples...

1. Tags That Change Text

... makes the text bold between the opening tag and the closing tag .

... underlines the text between the opening tag and the closing tag .

... italicizes the text between the opening tag and the closing tag .

<center>...</center> centers anything between the opening tag <center> and the closing tag </center>.

<hr> draws a horizontal line (rule) between sections of text. We use this in the Workshop Announcement.

... changes the color of your text.

... changes the size of your text.

... changes the font family of your text.

Remember that you can use the tags in combination...

..........

changes the color and size of your text AND makes it bold.

2. Tags That Work With Pictures and Graphics

<img src=�http://... your url ...�> will link a picture/graphic so that it will appear in your profile, announcement, message or reply.

The following are not tags but ATTRIBUTES (optional controls) of the Image Tag:

ALIGN='left' aligns text or picture to a margin on the left side of the page or column and allows the text to FLOW around it

ALIGN='right' aligns text or picture to a margin on the right side of the page or column and allows the text to FLOW around it.

WIDTH='nnn' controls the width of the image. This is a VERY IMPORTANT ATTRIBUTE for all images, graphics and other page elements!!! You must make sure that your image falls within the column width limits on your page or in a comment.

HEIGHT='nnn" controls the height of the image.

3. Tags That Create Links

<a href=�http://... your url ...'> will establish a clickable link to a webpage, picture, video, etc. located elsewhere on the internet. When you use this tag, Eons will display the hyperlink as "View Link" on your page or in your post/PM. Example:

<a href=�http://www.cnn.com/articles/123456.html'>

<a href=�http://... your url ...>...The NAME of your link...</a> will establish a clickable link to a webpage, picture, video, etc. located elsewhere on the internet. When you use this tag, Eons will display the custom name that you entered in the tag for the link on your page or in your post/PM. Example:

<a href=�http://www.cnn.com/articles/123456.html'>Food</a>

<a href=�http://... your link url ...><img src=�http://... your image url ...�></a> will establish a clickable link to a webpage, picture, video, etc. located elsewhere on the internet. When you use this tag, Eons will display the GRAPHIC that you entered in the IMG tag for the link on your page or in your post/PM. Example:

<a href=�http://www.cnn.com/articles/123456.html'><img src='http://www.cnn.com/applepic.jpg'></a>

4. Learning More

There are a lot more tags you can use on Eons but these are the most important ones. If you really want to learn a lot more HTML on your own, please visit:

W3Schools - The HTML Course

There you will find TONS of information on all HTML commands plus reference charts an lots of great examples. Have fun!!!!!

SPECIAL NOTE: On Eons, always use a single quote [ ' ] instead of double quote [ " ] when needed in a tag. Remember.......

Spice Up You Profile With "The Skinner"

In days of yore (well, before March, 2008), members had to learn some special CSS coding to make their profiles a lot more interesting. Colors, backgrounds, font changes, etc. were all done through this code which was always inserted at the end of the Edit Places box in the My History section of a profile page. While easy for some, this method was complex and cumbersome for a majority of the Eons community.

In response to the fact that members still wanted a lot of control over their profiles within the structure of the new Eons "look and feel", Eons created the Profile Skin Editor, or as we call it, The Skinner. This screen, available through a link on your profile page, enables you to quickly and easily override the Eons standard background and color scheme in favor of your own as well as control fonts, colors and boxes on your page.

The whole intent is for you to be able to control the look and feel of your profile WITHOUT ANY HTML/CSS CODING...AT ALL...EVER!!!

Version 2 (March 5, 2008)

Here's how you use The Skinner...

1. Go to your profile page.

2. Inside your Member Box (the one with your picture in it), you will see a whole bunch of links. At the end of that list is one that says "Edit My Skin"...Click on it.

Were working on a complete tutorial at this time. For now, please refer to The Workshop posts for information on the Profile Skin Editor.

Stay tuned for more on The Skinner.

PS: Our sincerest thanks go out to Tallbob for inventing this utility for all of us.

Page Design Tips

When a bunch of us were asked to judge the first "jazzy profile" contest, we actually had to sit down and figure out some good criteria upon which to base our decision. What follows is some of that thought process. Use it or reject it...we are NOT infringing upon anyone's right to do anything they want with their profiles. This is just a general set of guidelines for those who want a little guidance on the subject or page design.

1. LOOK AND FEEL

Positives:

- Colorful with good separation of headings and questions. Nice (not too busy or harsh) background image or good choice of color combinations that are pleasing and alluring.

- Readable text over color and/or background image. If you can't read the text on the page, forget it. If the page scrolls up and the text is unreadable over parts of your background, forget it. The text MUST be readable!!!

- Unique. Something that's different from the masses. Doesn't have to be a background image. Show a style that reflects YOU as the the owner of the page. Doesn�t even have to be an odd color as long as everything �fits� together.

- Banner. Create a really nice one. Lots of instruction on this topic in the group.

- Good left, right, center balance. Use of widget movement to balance the page. Judicious text lengths to keep everything fairly even.

- Uses a lot of Eons capabilities (photos, videos, blogs, etc.). Don't have to use them all but a healthy number reflect an understanding of the site itself and how to apply the available tools to enhance the page.

- Uses images and audio. Gotta have pictures...just gotta. Audio is good too but its use AND VOLUME must be tempered with an appreciation of the listener.

- Fun, interesting widgets. A good selection not only reflects upon the owner but also a desire to search for objects of interest either on the web or in other's profiles. Shows that you're interested in creating a good page.

- Animation. Some is OK. Also shows dedication to the site.

Negatives:

- Clashing color choices. Have you seen some of them out there? Aaaahhhh!!!!! Come on, gang. Don't scare people off the minute the page loads. Please have some mercy on the rest of us. Black can be a GREAT background but only if you apply the right colors over it. Think of the page as an advertisement. What makes YOU look twice and really read an ad versus recoiling in horror at first sight? Apply the same principle to your page.

- Standard Eons background. If you're going to add stuff to your page, make the whole thing look really cool!!!.

- Text unreadable over background image. As mentioned before, if the text can't be read, why did you type it in the first place?

- Conflicting audio. You cannot have a jukebox AND a video's audio BOTH starting when the page loads.

- Columns/images overflow. You have to read the Maximum Column Widths document in the HTML Group's Files Section. If you have pictures, text, widgets, graphics, etc. overflowing columns into the next, well...it's just bad form and a lack of attention to detail.

- Bad HTML coding appearing in banner or text areas. After you've applied some coding, you have to check to make sure that it works right. If it doesn't, sometimes the actual bad tags appear on your page or in your banner as weird text. Check your work! View it �as a public profile�.

- Too much animation. Tons of glitter, marquees and animated GIFs equals a confusing and daunting display. Especially stay away from the kind of thing that can cause seizures in various mammals�including Eons members.

- Too many fonts. Pick one for your text and one or two others for headings. More than that gets confusing.

- Lack of personal photo. Doesn't have to be a picture of you, but something other than a stock Eons profile photo is the minimum you would expect in a pimped profile.

- Page elements in the wrong places. Example: Friends, Favorites, etc., always in the RIGHT column, now appear on the left side under Photos and Videos. This is typically caused by importing a MySpace layout. BIG NO NO!!!!

- Graphics that obscure or override navigation buttons. We�ve seen this from time to time. Some �falling� animated graphics mask the basic Eons functional buttons (Send a PM, etc.) and render them unusable. Not a good thing.

2. INFORMATION

Positives:

- About Me should be succinct but more than two sentences. You don't need to tell your entire life's story in the About Me box. Then again, "This is me." just doesn't cut it. The challenge: How would you describe yourself to the reader in 30 seconds? Get people interested.

- Interesting. Your About Me box should entice the reader to check out more of your page which should have some interesting, unique elements on it. Use your imagination.

- Amusing. Tell a joke. Make us laugh. Monty Python freaks should fart in our general direction! Come on guys!!! Lighten up a bit and show some happiness about making it this far! Rejoice! Celebrate! Even for those who have suffered losses (and I know because my first wife died of cancer at age 34...), share yourself with your new friends!

- Uses LifePath. OK, not everyone's going to use this feature, but it does add interest to the page.

- Interests, Activities and Questions of the Day at least partially filled in. Using these elements show that you're really interested in Eons and are willing to tell your friends more about yourself. A "snazzy" page is more than just glitz.

Negatives:

- Long and wordy. Big No No. Use the Blog feature to write your tomes. That's what it's there for.

- Bad spelling and grammar. Ouch. Double ouch. Can't expect people to stay interested if you can't spell. Worse... People will get turned off to your page right away. If you have to, type your stuff into MS Word or anything else with a spellchecker. Then copy and paste it onto your page. Bad spelling and grammar shows lack of attention to detail.

3. EXECUTION

- Everything on your page should work. Can't believe I even had to say this one. Widgets, graphics, jukeboxes, etc. ALL must work. Check your page. Fix broken links. Resize graphics. Do what it takes to make the page right. All the instructions are on the HTML Group.

- Correctly sized banner. Gotta fit in the 974 x 100 space. People are experimenting with bigger banners now; that will not be counted against them unless they look way out of place or have other associated problems. For regular banners, the picture/graphics should fill the box and not partially repeat. For intentionally repeating images in a banner, the last one should not be cut off. Attention to detail is the key. The use of a photo where you only see the top of a person's head doesn't look good..

- Loads quickly; little or no hesitation from too many external links. THIS IS THE BIG ONE!!! We have talked extensively how we have to be mindful of friends who still have dialup service. When you have tons of graphics, videos and audio on your page... IT ALL LOADS WITH THE PAGE!!! This can appear to the reader (even those on broadband) as a "locked" computer because IT TAKES SO MUCH TIME TO LOAD! That is why it has always been recommended NOT to start audio automatically on page loading but let the user start the player manually if they want to hear your selections. Not many people do this but it is good practice. Likewise, using multi-megabyte images instead of small JPG's and GIF's slows down page loading. This should also be avoided as should using many, many images and widgets from lots of Internet sites. Remember, Eons has to go out, find all that stuff and load it EVERY TIME!!!

4. Want a great page? Simple�

Make it look nice. Use good colors and/or backgrounds with readable text.
Have lots of interesting personal information in the different sections.
Use the basic Eons features to their maximum advantage.
Keep images and graphics to an acceptable level.
If you like a lot of stuff, change the pictures and widgets every so often.
Pay attention to detail (visible code, column widths, spelling, etc.).
Let users start the audio and video themselves.
MOST IMPORTANT - Have fun!!!

Column Stacking or Overlapping Problems

You may be having a problem with a column appearing under another or overlapping columns. When this occurs it's because...

...one or more of the entries in a column is too wide!!

It could be a graphic, a picture, a widget, a jukebox...or ALL of them!!! The problem element may be in your widget area, your Activities section...ANYWHERE!!! To fix the problem...

1. Print out the Maximum Column Widths document available in our Files area or click HERE. This will tell you how wide a page element can be for the column it's in.

2. Check the "width=" attribute for each element and compare them to the maximum width for the column you're having the problem with. If you see something that says "width=420" (or any number larger than the maximum), then that's the culprit...although there may be more than one.

You should also check any graphics files you placed with the IMG tag plus audio jukeboxes and videos embedded in your Activities or QOD areas. Large widths in any of those spots may also cause a problem.

In the future, make sure you check the width attribute before adding any page elements to avoid this problem.

PS: Thanks to Daydreamin for coming up with the original document!!!

Place pictures or graphics in your profile, messages, replies and announcements

This FAQ is intended to give you some basic instruction in using graphics and pictures on Eons. For a complete discussion of this topic, please refer to our Workshop Help Index.

That said, here are a few things you need to know...

1. The Original

Your original graphic/picture can be from any source.
The original image must reside on YOUR COMPUTER!!!
It MUST BE a file with a JPG or GIF extension. BMP's and TIFF's are way too big.
Speaking of BIG, your file should be no larger than 100K-200K. In fact, it should be more like 25K-30K. DO NOT USE HIGH RESOLUTION IMAGES!!! They take waaaaay to long to load on a page. This means that 1MB files are out of the question!!!
If the file is too big, you must...

2. RESIZE!!!!!!

Our Help Index can provide you with links to resizing tools but you probably already have one like...
- Microsoft Office Picture Manager
- Adobe Photoshop
- The software that came with your digital camera
Use the software to resize the picture to a JPG of 640 x 480 resolution. This will make it big enough to look good when someone wants to zoom in on the image yet small enough to load quickly.

3. Upload

To your Photo Area
- On your Profile Page, go to your Photo Area
- Click on the Upload and Edit tab
- Use the Browse Button to find the picture on your computer
- Give it a title
- Click on Upload New Photo
- {Optional: You can rearrange your photos from the Reorder My Photos tab}
To another web site (Use this technique when you don't want all those graphics and pictures cluttering up your Photo Area!!!)
- Almost everyone uses Photobucket so we will too.
- Go to www.photobucket.com and create a free account.
- Use their upload tool to upload your photos and graphics to the site.
- That's it....

4. Use the Image

The IMAGE tag will link a picture/graphic so that it will appear in your profile, announcement, message or reply.

<img src=�http://... your url ...�>

You can place the tag ANYWHERE on your profile or in a PM, post or reply.
The URL is listed next to your picture in your Eons Photo Area
The URL is under the picture in your Photobucket album
If your picture is small, all you need is this tag.
If your picture is larger, you may need a more robust tag...

<img src=�http://... your url ...� width='nnn'>

You MUST make sure that the width of your image DOES NOT EXCEED the limits of the column it's in!!! For more information see the Column Stacking or Overlapping Problems section of this FAQ.

Align Pictures and Graphics

The basic HTML Image tag will link a picture/graphic so that it will appear in your profile, announcement, message or reply....

<img src=�http://... your url ...�>

...while specific ATTRIBUTES (optional controls) of the Image Tag give you more control of the image:

ALIGN='left' aligns the picture to the left side of the page or column and allows the text to FLOW around it.

<img src=�http://... your url ...� ALIGN='left'>

ALIGN='right' aligns picture to the right side of the page or column and allows the text to FLOW around it.

<img src=�http://... your url ...� ALIGN='right'>

WIDTH='nnn' controls the width of the image. This is a VERY IMPORTANT ATTRIBUTE for all images, graphics and other page elements!!! You must make sure that your image falls within the column width limits on your page or in a comment.

<img src=�http://... your url ...� WIDTH='nnn'>

HEIGHT='nnn" controls the height of the image.

<img src=�http://... your url ...� HEIGHT='nnn'>

And you can use them in combination...

<img src=�http://... your url ...� WIDTH='300' HEIGHT='200'>

<img src=�http://... your url ...� WIDTH='300' ALIGN='left'>

You can also use standard CENTER tag to center a picture...

<CENTER><img src=�http://... your url ...�></CENTER>

Place text and graphic links into your profile, PMs and posts

Lots of times, you want to add a link to a page, video, news story, etc. on your profile or in a PM or post. To do this, we use the ANCHOR ("a") Tag. The Anchor Tag always includes an "href" attribute which provides your browser with the "hyperlink reference" or address that you want to link to. Of course, this address is always a URL.

The basic Anchor Tag will establish a clickable link to a webpage, picture, video, etc. located elsewhere on the internet....

<a href=�http://... your url ...'>

When you use the Anchor Tag in this manner, Eons will display the hyperlink as "View Link" on your page or in your post/PM. For example:

<a href=�http://www.cnn.com/articles/123456.html'>

... will result in...

Please read this great article from CNN...

View Link

This is the most basic form of the tag. If you want to give the link a bit more style, we can get Eons to display the custom name that you entered in the tag for the link...

<a href=�http://... your url ...>...The NAME of your link...</a>

...will establish a clickable link to a webpage, picture, video, etc. located elsewhere on the internet with THE NAME YOU GIVE TO IT. For example...

<a href=�http://www.cnn.com/articles/123456.html'>Good Food</a>

... will result in...

Please read this great article from CNN...

Good Food

That's a whole lot better...but we can go one step further. If you want to put a PICTURE in the link, you can a\dd an Image Tag...

<a href=�http://... your link url ...><img src=�http://... your image url ...�></a>

This tag will also establish a clickable link to a webpage, picture, video, etc. located elsewhere on the internet but this time Eons will display the GRAPHIC that you entered in the IMG tag for the link on your page or in your post/PM. Example:

<a href=�http://www.cnn.com/articles/123456.html'><img src='http://www.cnn.com/applepic.jpg'></a>

... will result in...

Click on the apple below to read this great article from CNN...

{ ...make believe there's a picture of an apple here...a big, red, juicy one...}

Come on! Use your imagination!!!

How to create or change the banner at the top of your profile

1. INTRODUCTION

Your banner is the space right above your name and picture; it goes all the way across the page. The banner itself is a placeholder for any image that is 974 pixels wide and 100 pixels high. Anything bigger gets chopped off; anything smaller gets repeated. Eons does this automatically.

The first step in creating a banner is deciding what you want. You can have a repeating pattern across the space or one solid block made up of one or more images. So once you have decided, you have to create or modify the image you want to use.

PS: In this FAQ, "image", "picture and "graphic" are used interchangeably.

2. CREATING YOUR BANNER: REPEATING IMAGE

The easiest way to create your banner is to pick a small graphic or image that you like and wish to have repeated across the banner space. Find the picture/image/graphic and OPEN IT using any photo editor. Adobe Photoshop, MS Office Picture Manager, the software that came with your digital camera or the free image editor available via the links in our Help Index are all options.

Once you have the picture in the editor, RESIZE it so that it is 100 PIXELS HIGH. Make sure that you keep the same ASPECT RATIO so that the width of the picture changes in proportion to the height. You don't want a distorted image. I can't give you specific "click by click" instructions because there are sooooo many editors out there. Take some time and make it work. SAVE the modified image as a JPG file under a different name!!!

Things that work great are flowers, clouds, water, etc...anything that seamlessly repeats itself.

3. CREATING YOUR BANNER: SINGLE IMAGE

This where you can get very fancy and creative. However, you will need more than a photo editor program; you will have to have one that lets you CREATE images from scratch. If you have such a program (like Photoshop), perform the following steps...

1. Open the program

2. Create a NEW blank image 974 pixels wide by 100 pixels high

3. Save the blank image; that's your template that you can use over and over again

4. Load it up...that is, add whatever you want to the blank image: color, pictures, text, transparencies, overlays, glitter, it doesn't matter. Be as simple or as wild as you want to be. Just make sure it's 974 x 100!!!

5. Save the image as a JPG file under a new name.

You're done.

4. GETTING YOUR BANNER ON TO EONS: DIRECT UPLOAD TO YOUR PHOTO AREA

The first method for displaying your banner is to upload it to Eons like any other photo. This is done through the "Edit My Photos" link on your profile page. Just follow the instructions to upload a picture. After you have done that, click the tab "Edit Profile Banner" in the same photos section. You will now see all of your uploaded images. Just click on the image you just uploaded and save it as your banner. Eons will repeat the photo across the whole banner space or display the big single banner you created.

Pros - Simple; easy

Cons - The banner image is mixed in with your uploaded photos

5. GETTING YOUR BANNER ON TO EONS: WEB LINK

The other method for displaying your banner is to copy the image file to another location on the web and then link it, that is, tell Eons where to find it. For this, click the "Edit My Photos" link on your profile page and then click on the "Edit Profile Banner" tab. You will see a section labeled "Or use an image stored on another web site". Under that section name will be an empty box. Click in the box and type in the address (url) of your banner image. It should look something like...

http://www.att.net/johnspace/pictures/eonsbanner.jpg

...or...

http://i192.photobucket.com/albums/z222/johnspace/eonsbanner.jpg

The first example is some private space on the web that you use for your own personal files. It could be supplied by your ISP. The second show the use of something like PhotoBucket. Doesn't matter. After you enter the url, click "Use This As My Banner Photo". You're done. If the banner doesn't show up, you typed in the wrong url or left off the "http://".

Pros - The banner image is NOT mixed in with your uploaded photos

Cons - Need other web space to store the image; have to know the correct url of the image

Learn About Marquee Tags and What They Do!!!

1. Introduction

Marquees are messages that move or scroll on the page. They're a "fun" element and can be used anywhere on Eons. There are a bunch of messages regarding marquee coding. So you don't have to go searching, the mountain comes to Mohamed. Here are all the marquee instructions in one place...

2. The Basic Marquee Tag

It's very simple. It starts with a <marquee> tag and ends with a </marquee> tag, like this...

<marquee>This is my marquee</marquee>

Remember that everything starts with a <marquee> tag and ends with a closing </marquee > tag.

3. Some Simple Adjustments

Adding width='50%' to the opening marquee tag will adjust the width the marquee uses to 1/2 the normal space. Use any number from something reasonably small to 100% (the default)...

<marquee width='50%'>This is my marquee</marquee>

Adding behavior='alternate' to the opening marquee tag will cause the marquee to alternate directions (bounce back and forth) ...

<marquee behavior='alternate'>This is my marquee</marquee>

Adding scrollamount='30' to the opening marquee tag will cause the marquee to speed up (the bigger the number the faster it goes)...

<marquee scrollamount='30'>This is my marquee</marquee>

Adding scrolldelay='200' to the opening marquee tag will delay the speed of the marquee (the bigger the number, the slower it goes)...

<marquee scrolldelay='200'>This is my marquee</marquee>

Adding direction='right' to the opening marquee tag will change the horizontal direction of the marquee from left to right...

<marquee direction='right'>This is my marquee</marquee>

4. Playing With Colors and Emphasis

To make the background of the marquee a different color (make a colored stripe, add bgcolor=yellow (or any lighter color) to the opening "marquee" tag...

<marquee bgcolor=yellow>This is my marquee</marquee>

Adding a separate bold tag AFTER the opening marquee tag and a closing bold tag right before the closing marquee tag makes the marquee text bold...

<marquee>This is my marquee message</marquee>

To make the text a different color, use a <font color=red> (or any color) tag after the opening "marquee" tag and the close the font tag before the closing marquee tag...

<marquee>This is my marquee message</marquee>

5. Using Multiple Changes

You can stack a lot of these parameters. This is a BOLD red marquee...

<marquee>This is my marquee message</marquee>

This is a fast, side-to-side, BOLD red marquee...

<marquee behavior='alternate' scrollamount='30'>This is my marquee message</marquee>

Want it bigger? Add an set of h1 tags before and after the marquee tag. This is a BOLD red
Header 1 marquee...

<h1><marquee>This is my marquee message</marquee></h1>

Playing You Own Videos On Eons

1. Introduction

Eons will let you play videos from sites OTHER THAN YouTube...you just gotta know how to do it...and it's real easy! These instructions will cover the two basic video players out there: Windows Media Player and Quicktime. If you want to fool around with RealPlayer or something else, give it a try and let us know how you make out. However, all basic videos will work on WMP while Quicktime movies will play on the Apple player.

Using one of your own videos involves a three step process: 1. Have the video ready in an acceptable format; 2. Upload the video to the web; and 3. Embed the player's code onto your web page.

A few caveats...

DO NOT try to post a HUGE video. Anything over 3-5 minutes and 15-20MB just doesn't belong on your page. It will take way too much time to load.
Read the Maximum Column Width document on the Workshop. Your video CANNOT BE WIDER than the column you're trying to put it in.
YOU CANNOT PUT A VIDEO IN YOUR "ABOUT ME" SECTION!!!!!!!

2. Your Video File

First thing you've got to have is a video to post in the first place. It can come from anywhere as long as it currently resides on your computer or a website somewhere already on the web. Make sure the file is in a standard video format: AVI, MPG, MPEG, WMV or MOV. This will make life a whole lot easier.

3. The Upload

If it's on your machine, you have to upload it to the web. This is typically done with a program that runs what is called File Transfer Protocol or FTP. There are a lot of free ones on the web, like FileZilla, so just pick one. Click HERE for a quick video introduction to FTP.

Once your video file is on the web, you can use its URL un the EMBED command in a player.

4. Embedding Windows Media Player

Microsoft's Windows Media Player works on video files with the .avi, .mpg, .mpeg and .wmv extensions. Just copy and paste this code onto your page; fill in the URL of your video in both places.

MAKE SURE THE WIDTH IS SMALLER THAN THE COLUMN YOU PUT IT IN!!!

5. Embedding the Quicktime Player

Apple's Quicktime Player works on video files with the .mov extension. Just copy and paste this code onto your page; fill in the URL of your video in both places.

MAKE SURE THE WIDTH IS SMALLER THAN THE COLUMN YOU PUT IT IN!!!

End of FAQ