BASIC HTML TUTORIAL FOR USE ON TOURNEY
The myleague tourney kit
format makes it easy for us to create a web page!
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.
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
<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> It will also give you spaces, you can use as many as you want!
<P> Creates a new
Creates a new paragraph
will move your paragraph</p>
to where you want it</p>
on the page</p>
Here's an unordered list
<li>makes a list with cute little dots
<li>very effective for rules
It comes out looking like this:
Here's an unordered nested list
- makes a list with cute little dots
- very effective for rules
<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
Marquees... The action text!
<marquee>Your message in here...then you must always close it
<marquee bgcolor="#xxxxxx">Then your text</marquee>
This sets a background color for your marquee. The #xxxxxx is the
hexadecimal number for your color.
<marquee behavior="alternate">This will bounce backward and forwards
<marquee direction="right">Let's go the other way!</marquee>
<marquee direction="up">How about the star wars effect!</marquee>
<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>
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><I>BOLD And Italic</I></b>
BOLD And Italic
|<b><I><U>BOLD, Italic and
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)
Comic Sans MS
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
text is red now</font>
<font color="00CC00">your text is green now</font>
Changing the size attribute
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!
text is size 5</font>
Now this is changing all 3
attributes at once!
Font size="3" ...this
is the default font size.
<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.
Aligning the Image
This tag places the image on your page. NO closing tag is needed.
<img src="http://www.ladyjm.com/lighthouse/tdcenter/ace.gif"> is the tag
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.
<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.
will appear as:
<CENTER><font size="5">King of spades</font><img src="http://www.ladyjm.com/lighthouse/tdcenter/king.gif"></CENTER>
King of spades
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.
To play a music file and show play / pause / stop
buttons in the browser, use the following code:
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
To put them on your main tourney page, put the HTML in the custom
HTML box under customize tourney layout page.
<embed src="the url of
the midi file.mid" autostart="true" loop="true" height="62" width="244"
For the music file to play continuously in the background, use the
<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
*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.