FOREVERSPADES ~ BASIC HTML TUTORIAL FOR TDs

BASIC HTML TUTORIAL FOR USE ON TOURNEY PAGES

My goal is to give you the most common, most basic HTML codes so you can create your own pages. There are many sites on the internet for more advanced HTML, but sometimes all that information can be overwhelming. If you have any questions not answered here, e-mail me at jm468@casesladder.com

The myleague tourney kit format makes it easy for us to create a web page!

There's actually just few tags you'll need to know to get you started. Tags are instructions that tell your browser what to show on a web page. They break up your document into basic sections. All tags start with a <(left bracket) and end with a > (right bracket). All HTML (HyperText Markup Language) tags are enclosed within <> brackets. Anything that is written between the < and > brackets will be invisible, and not appear on your page.
Since our tourney pages are already set up it's not necessary to start and end with the <HTML> </HTML> tags that you would start a regular web page with. You are actually adding text and HTML to an existing webpage. As you learn to add pictures, music and fancy stuff to your custom rules section, you will realize that you are creating a mini-webpage. You are already starting at the <BODY> of the page.

How to Copy & Paste

What is a URL?

Before we move on, a great tip is to type all of your rules into notepad, word pad or a similar text program, because that rules box is small and not easy to keep track of codes and alter them in that little area. Also you can keep a copy of all your different tourney HTML in your docs file for later use, and just whip one out when you need it! You don't have to re-create it, just copy and paste!

Now for the basic tags

<CENTER>Everything you want centered goes in here </CENTER>

This is a line break, it sends the text to the next line.
 It will make your rules look nice and tidy on the page.
 
 
 It will also give you spaces, you can use as many as you want!

Creates a new paragraph

Creates a new paragraph

will move your paragraph

to where you want it

on the page

Here's an unordered list

<ul>
<li>makes a list with cute little dots
<li>very effective for rules
</ul>

It comes out looking like this:

makes a list with cute little dots
very effective for rules

Here's an unordered nested list

<ul>creates an indented list
<ul>as you can see
<ul>then at the end count how many <ul>'s you used and close them, or your text will stay lining up where you indented to.
</ul> </ul> </ul>

Comes out looking like this:

then at the end count how many <ul>'s you used and close them, or your text will stay lining up where you indented to.

Marquees... The action text!

<marquee>Your message in here...then you must always close it with </marquee> This is a very cool way to bring attention to something important on your page!

<marquee bgcolor="#xxxxxx">Then your text</marquee>
This sets a background color for your marquee. The #xxxxxx is the hexadecimal number for your color.
Theres a link for the hex color chart on the customize tourney layout page and on the main ForeverSpades TD Help Center Page.

<marquee behavior="alternate">This will bounce backward and forwards continuously</marquee> hehe isn't this fun!

<marquee direction="right">Let's go the other way!</marquee> It's ok to be different... I always say!

<marquee direction="up">How about the star wars effect!</marquee> weeeeeeeee

<marquee behavior=scroll direction="up" scrollamount="1">When I used the upward scroll direction I wanted to slow it down...and use if you want to list more than 1 line</marquee>
This is a alot easier to read
especially if you want them to follow your rules!
This is 1, it's the slowest
the higher the number the faster it scrolls

Here are some font effect tags, to change the way the default text will look on your page.The tags can be used alone for a single effect. Or can be used together for a different effect.These tags are always used in pairs. and notice the nesting of tags within each other.

BOLD
BOLD

ITALIC
ITALIC

Underlined
Underlined

BOLD And Italic
BOLD And Italic

BOLD, Italic and Underlined
BOLD, Italic and Underlined

The font attributes are Face, Color and Size.

To change any of the font attributes at any time within your page, simply use the tag. The text that follows will remain changed until you close with the tag.
Note* Font face and color depends entirely on the computer and browser that is being used to view your page. So, if you have downloaded a totally cool font that you love, and use it on your page....there is a chance that the visitors to your page may not be able to see it, and their browser may display the default font! Please be aware of this when designing your page. If a particular "rare" font is needed for your page title, for example, then it may actually be a good idea to create a graphic for it instead!
Here are some font faces that most computers can see.

your text

Times New Roman (usually the default face)
Arial
Arial Black
Verdana
Comic Sans MS
Courier New
Impact
lucida sans
Helvetica

There are tons more fonts! But again, keep in mind what most will be able to see, also how easy they are to read! We want them to be able to read "your rules". Most of our league players have yahoo messenger, feel free to try any fonts available on messenger, as they are more likely to be downloaded on our members computers.

Changing the color attribute

your text is red now
your text is green now

The number is the hexadecimal number for your color. There's a link for the hex color chart on the customize tourney layout page and on the main ForeverSpases TD Help Center page. Use it when you can because Internet Explorer users and Netscape users see different colors on their computers. Also if someone has their computers set to 256 colors, this color chart a palette of the 216 Browser Safe Colors, and you better your chances of them all seeing the same thing!

Changing the size attribute

your text is size 5

Font size="1"
Font size="2"
Font size="3" ...this is the default font size.
Font size="4"
Font size="5"
Font size="6"
Font size="7"

Now this is changing all 3 attributes at once!


Changing the font face, color and size.
Changing the font face, color and size.

Adding images to your page

There are hundreds of graphics collections on the Internet - many of them offering free graphics. To put graphics onto your page, you must first save the file to your computer, and upload it to your web host.

How to Save images to your computer
Image Tags

<img src="filename">
This tag places the image on your page. NO closing tag is needed.
For example,
<img src="http://www.foreverspades.com/tdcenter/ace.gif"> is the tag for

Aligning the Image

When you enter the tag for an image, you need to use attributes or tags to define where you want the image to appear.

If you have a line of text, and then an image on the same line, that is where it will appear.
For example,
King of spades<img src="http://www.foreverspades.com/tdcenter/king.gif"> will appear as:
King of spades

If you place the image on its own line, it will automatically default to the left hand margin.
For example, <img src="http://www.foreverspades.com/tdcenter/king.gif"> will appear as:

To center the image, or even the text and image, just place it all in the centering tags.
<CENTER><img src="http://www.foreverspades.com/tdcenter/king.gif"></CENTER>

will appear as:

or...
<CENTER>King of spades<img src="http://www.foreverspades.com/tdcenter/king.gif"></CENTER> King of spades

also...
Use to send the image to the next line.
<CENTER>King of spades <img src="http://www.foreverspades.com/tdcenter/king.gif"></CENTER>
King of spades

Adding Tunes to your page!

To use a music file, you must first save the file to your computer in the same way as you would a graphics file, and upload to your Web Host.

How to Save music to your computer

There are 2 codes to get music on your tourney page.

To put them on your rules page, simply put the HTML in the customize rules box.
To put them on your main tourney page, put the HTML in the custom HTML box under customize tourney layout page.

To play a music file and show play / pause / stop buttons in the browser, use the following code:

For the music file to play continously in the background, use the following:
<bgsound src="the url of the midi file.mid" loop="-1">

If you want it to just play once, leave out the loop="-1"
There are some links for MIDI sites back at the TD Help Center

That's about it! The more you practice the more comfortable you feel with it. I have found it to be a lot of fun creating tourneys. Remember the TD sets the mood for tournament and the more fun, and exciting you can make your tourneys, the more players will have fun too! For more advanced HTML and other tricks you can do, check out the HELPFUL LINKS on the main page of the
ForeverSpades TD Help Center!

*Please note: I do not claim to be a professional at HTML, this was written to give TD's some basics that can be used on a tourney page.

I wish to acknowledge and sincerely thank
l_artiste_l
who has worked many long, hard hours creating this page
and has so graciously given me permission to use and adapt it for ForeverSpades League use.