One thing you will have notice, particularly if you try using code like the table that has been laid out all nicely as above, in a FUMBBL team biography (or basically anywhere else on FUMBBL for that matter), is that you get a massive gap to your table from the rest of the biography, as well as an extra two lines in each cell in the table, this is due to the FUMBBL PHP form adding a
for every line break you include in the submission, this means that html n00bs can make their team biographies, without suffering from the text all on one line syndrome that can occur if you forget the necessary line breaks when creating a html page.

In the words of Mezir “This can seriously screw up table lay-outs unless you put all the code on a single line - which then becomes a female dog to edit."

Fortunately there is a simple solution to this problem, the use of HTML comments.

Comment tags are used when you want to insert something into the source code, without it affecting the output at all. In our case, we're using it to prevent something being read once it is inserted into the code, but the principle remains the same.

HTML comments are defined by <!-- this stuff would have be commented out -->

we can use these across multiple lines, to produce something like: <!-- comment starts on this line
continues here
and finally finishes here-->

Using this method of commenting the lines, we can prevent the
tags inserted by FUMBBL from screwing up our code, they're still in the source code for the page, but because we used HTML comments, browsers simply ignore them.

Yearbooks

Yearbooks show off a team's player pictures, biographies and statistics all on one easy to find page: Yearbook for the Terrifying Anarchists of Naggaroth

Links to yearbooks are simply a link to a specific page that FUMBBL produces, namely https://fumbbl.com/FUMBBL.php?page=yearbook&team_id=yourteamIDhere.

Another thing you may have noticed, browsing through various Team Biographies, is the use of buttons to conceal parts of the text. This is achieved through client-side scripting and generally uses buttons, which look something like this:

<input type="button" value="Show Text 1" onclick="x=document.getElementById('hide1');if(x.style.display != 'none'){x.style.display = 'none';this.value='Show Text 1'}else{x.style.display = 'block';this.value='Hide Text 1';}">

The code for such a button, and it's hidden text is: <input type="button" value="Show Text 1" onclick="x=document.getElementById('hide1');if(x.style.display != 'none'){x.style.display = 'none';this.value='Show Text 1'}else{x.style.display = 'block';this.value='Hide Text 1';}"><div id='hide1' style='display:none'>Text to Show and Hide</div>

I won't go into this too much, as it's starting to get beyond basic HTML and into the regions of JavaScript coding and HTML events, which is a whole other can of worms, if you're interested enough to still be reading, then take a look at the w3schools website I linked at the start of the article.

However, note that, the <div id=hide1 style='display:none'>Text to Show and Hide</div> is simply the section of the page that is to be shown and hidden, and could in-fact be placed anywhere on the page.

Another way to do this is the use of JavaScript, like the button, and a link tag, which looks something like this:

Text to hide and show

<a style='color:#000000; cursor:pointer;' onMouseOver="this.style.color='#800000';" onMouseOut="this.style.color='#000000';" title='show/hide' onclick="obj=document.getElementById('example'); if (this.innerHTML=='show') { this.innerHTML='hide'; obj.style.display = ''; } else { this.innerHTML='show'; obj.style.display = 'none';}">hide

Editors note: We apologise for the fact that this code doesn't seem to be working here

The code for which looks like this: <p id='example'>Text to hide and show</p>
<a style='color:#000000; cursor:pointer;' onMouseOver="this.style.color='#800000';" onMouseOut="this.style.color='#000000';" title='show/hide' onclick="obj=document.getElementById('example'); if (this.innerHTML=='show') { this.innerHTML='hide'; obj.style.display = ''; } else { this.innerHTML='show'; obj.style.display = 'none';}">hide</a>

And finally, (and unofficially, as this is not officially supported at the moment, and could be removed at any time) adding: onmouseover="showTooltip('<tooltip text>');" onmouseout="hideTooltip();" to any html tag gives a nice tooltip like the ones on the new player pages and yearbooks.

That's all from me for now.
You'll notice that I basically have given very little information about how to make things look nice, instead, the latest versions of HTML recommend the use of Cascading Style Sheets to control the way things look, further reading can be found at w3schools.com, or, if there is sufficient demand, another article from me.