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.

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.

 

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>

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

 


<P> Creates a new paragraph

 

Creates a new paragraph

<p align=left>
 

will move your paragraph</p>

<p align=center>

to where you want it</p>

<p align=right>
 

on the page</p>

 


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: 

 
    creates an indented list
      as you can see
        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 TD 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 <BR>I wanted to slow it down...and use<BR>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.

<b>BOLD</b>
BOLD
<I>ITALIC</I>
ITALIC
<U>Underlined</U>
Underlined

 
<b><I>BOLD And Italic</I></b>
BOLD And Italic
<b><I><U>BOLD, Italic and Underlined</U></I></b>
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 <font> tag. The text that follows will remain changed until you close with the </font> 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.

<font face="fontname">your text</font>

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

<font color="FF0000">your text is red now</font>
<font color="00CC00">your text is green now</font>

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 TD 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

<font size="5">your text is size 5</font>

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!

<font face="Comic Sans MS" color="#CC33FF" size="5">
Changing the font face, color and size.</font>
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.

 
Image Tags

<img src="filename">
This tag places the image on your page. NO closing tag is needed.
For example, 
<img src="http://www.ladyjm.com/lighthouse/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, 
<font size="5">King of spades</font><img src="http://www.
ladyjm.com/lighthouse/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.
ladyjm.com/lighthouse/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.ladyjm.com/lighthouse/tdcenter/king.gif"></CENTER>

will appear as:
 

or...
<CENTER><font size="5">King of spades</font><img src="http://www.ladyjm.com/lighthouse/tdcenter/king.gif"></CENTER>
King of spades


also...
Use <BR> to send the image to the next line. 
<CENTER><font size="5">King of spades</font><BR><img src="http://www.ladyjm.com/lighthouse/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. 
 

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:

<embed src="the url of the midi file.mid" autostart="true" loop="true" height="62" width="244" controls="console">

For the music file to play continuously 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"
 


 


 

 

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
TD 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 my league use.
Jan



(Thank you Jan for permission to use this page)
Carla