The Game Modding Community - Since 2001

Using HTML on GB (Part I)

A Tutorial for GameBanana

The definitive guide to using HTML on GAMEBANANA (GB).

On GB you can use the power of eXtensible HyperText Markup Language (XHTML) to structure text, create links, insert images, etc. in your threads and posts. If you don't know anything about XHTML don't worry - it's easy to learn the basics. This tutorial is divided into two parts to meet maximum length requirements. This is Part I but the Table of Contents and the end of the tutorial both contain links to Part II.

Table of Contents



Introduction

In the simplest terms XHTML is a way to format or "markup" text on the interweb. It tells your web browser how to structure a document similar to the way that "markup men" used to write printing instructions in the margins of paper manuscripts. Without it (or something similar) everything you see would just be plain text.

Before we get down and dirty with this most excellent markup language there are a couple of key terms we need to make sure you're familiar with:

element
Elements are the primary method used to define the structure of an XHTML document.

All elements have a start tag (a special set of characters indicating the beginning of the element) and must be properly closed with an end tag if they have content or a '/' if they do not. These "tags" are easy to find because they always involve the '<' and '>' characters. But enough talk, let's look at an example using a fake element. As previously mentioned there are two different methods of closing elements, shown here:

method one, an end tag:

<tag>*insert text and/or other tags here*</tag>

method two:

<tag />

The appropriate method depends on the element you're using. Many elements have content and therefore use method one while others are "empty" and, consequently, use method two. The best example of method two is the element used to represent images which we'll be taking a look at a bit later on.

attribute
An attribute is a piece of information about an element.

Some elements have required attributes but most are optional. If used they're always included inside the start tag of an element, like "title" in the following example:

<tag title="CSToons" />

In the above example "title" is the name of the attribute and "CSToons" is its value. You should always include the equals sign '=' between them and the attribute's value should always be surrounded by quotes. Now that you know the basic terminology and are thoroughly confused it's time to learn how to do some stuff for real!

[back to the table of contents]


Anchors

You probably click on them all the time, unless you type or copy/paste the Uniform Resource Locator (URL - aka web address) of every website you visit into your browser's address bar.

To create links on GB you can simply use the XHTML <a> anchor element and its "href" attribute, like this:

Example<a href="http://www.gamebanana.com/">GAMEBANANA</a>
<a href="http://www.gamebanana.com/">http://www.gamebanana.com</a>
<a href="http://otlowski.com/">Cookie's Site</a>

produces:

GAMEBANANA
http://www.gamebanana.com
Cookie's Site

The "href" attribute sets the web address the anchor points to and the content between the beginning and ending tags of the element is the anchor itself.

There's another major use of the <a> element - links within a document. If you clicked on any of the links to or from the Table of Contents in this tutorial you've experienced them firsthand. Here's how they're created:

Example<a id="test" href="#test">go to test</a>

produces:

go to test

Click on the link above. See how it takes you to the same line it's on? By giving the anchor a unique id on the page we can then reference it in its own (or any other anchor's) "href" attribute using the # character. Next up: images!

[back to the table of contents]


Images

You can see examples of images everywhere, the banana icon at the top of the page is an image. Images are a snap in XHTML:

Example<img src="http://files.gamebanana.com/bitpit/goombashoe.gif" alt="Kuribo Shoe" />

produces:

Kuribo Shoe

The "src" attribute sets the location on the internet to get the image from and the "alt" attribute gives a short description of the image in case it can't be displayed. Both are required, meaning they must always be included. But there is so much more you can do! Try resizing your image using the optional "width" and "height" attributes, like this:

Example<img src="http://files.gamebanana.com/bitpit/goombashoe.gif" alt="Kuribo Shoe" width="16" height="24" />

produces:

Kuribo Shoe

or like this:

Example<img src="http://files.gamebanana.com/bitpit/goombashoe.gif" alt="Kuribo Shoe" width="64" height="96" />

produces:

Kuribo Shoe

You can even "nest" an image inside of a hyperlink:

Example<a href="http://files.gamebanana.com/bitpit/meeting.jpg"><img src="http://files.gamebanana.com/bitpit/meeting.jpg" alt="StarCraft BBQ" width="320" height="240" /></a>

produces:

StarCraft BBQ

Click on the image above (a StarCraft backyard BBQ if you must know). See how it links you to the full size image file? Using resized images as links to their full size versions is a popular method for creating thumbnails.

To add a smiley to your post all you need to do is get it hosted somewhere on the interweb then use the <img /> element. For example, let's say you want to add ^_^ to your post:

ExampleHello everyone my name is Cookie <img src="http://files.gamebanana.com/bitpit/anime.gif" alt="^^" />!

produces:

Hello everyone my name is Cookie ^^!

I suggest using the intuitive smiley codes like :) for a regular smile and ;) for a wink as the alternate texts. Here's the copy & paste code for a few of my favorites:

<img src="http://files.gamebanana.com/bitpit/anime.gif" alt="^^" /> = ^^
<img src="http://files.gamebanana.com/bitpit/smile.gif" alt=":)" /> = :)
<img src="http://files.gamebanana.com/bitpit/wink.gif" alt=";)" /> = ;)
<img src="http://files.gamebanana.com/bitpit/drop.gif" alt="*O.o" /> = *O.o
<img src="http://files.gamebanana.com/bitpit/frown.gif" alt=":(" /> = :(

[back to the table of contents]


Twenty Other Elements

Now that you've mastered the hard stuff (hyperlinks and images) let's go with some easy ones. To make your text bold, italicized, underlined, stricken though, small, inserted, deleted, backwards, emphasized, strong, a subscript, a superscript, a definitional, code, sample output, keyboard input, a variable, a citation, an abbreviation, or a short quote you can use these 20 simple XHTML elements:

ExampleHey man <b>I want this text to be bold</b>.
Hey man <i>I want this text to be italicized</i>.
Hey man <u>I want this text to be underlined</u>.
Hey man <s>I want this text to be stricken through</s>.
Hey man <small>I want this text to be small</small>.
Hey man <ins>I want this text to be inserted</ins>.
Hey man <del>I want this text to be deleted</del>.
Hey man <bdo dir="rtl">I want this text to be backwards</bdo>.
Hey man <em>I want this text to be emphasized</em>.
Hey man <strong>I want this text to be strong</strong>.
Hey man <sub>I want this text to be a subscript</sub>.
Hey man <sup>I want this text to be a superscript</sup>.
<dfn>An ancient concoction of the most potent chemicals</dfn> is the definition of chemicalwarfaresoup.
<code>echo "Hello World!";</code> is PHP code.
<samp>Hello World!</samp> is sample output from the PHP code above.
<kbd>qwerty</kbd> is one of people's favorite things to type, though <kbd>asdf</kbd> is also popular.
<var>foo</var> is a famous variable in C++ used for sample code.
<cite>Hamlet V.ii</cite> is a citation from one of Shakespeare's plays.
<abbr title="et cetera">etc.</abbr> is an abbreviation.
<q>natko go home, you're drunk!</q> is a short quote.


produces:

Hey man I want this text to be bold.
Hey man I want this text to be italicized.
Hey man I want this text to be underlined.
Hey man I want this text to be stricken through.
Hey man I want this text to be small.
Hey man I want this text to be inserted.
Hey man I want this text to be deleted.
Hey man I want this text to be backwards.
Hey man I want this text to be emphasized.
Hey man I want this text to be strong.
Hey man I want this text to be a subscript.
Hey man I want this text to be a superscript.
An ancient concoction of the most potent chemicals is the definition of chemicalwarfaresoup.
echo "Hello World!"; is PHP code.
Hello World! is sample output from the PHP code above.
qwerty is one of people's favorite things to type, though asdf is also popular.
foo is a famous variable in C++ used for sample code.
Hamlet V.ii is a citation from one of Shakespeare's plays.
etc. is an abbreviation.
natko go home, you're drunk! is a short quote.

As you've probably noticed some of those elements are displayed the same way and a few may even have no visible effect at all depending on your browser and GB's current style sheet. That's primarily because some of them represent structure while others represent (or historically represented) style and a few are really not used very much. Additionally, some browsers tend to ignore or mistreat certain elements.

[back to the table of contents]


Lists

They come in quite handy for threads and there are three kinds - ordered (1, 2, 3, 4, etc), unordered (blah, blah, blah, blah, etc), and definition. To demonstrate an ordered list let's take a look at some of my favorite movies:

Example<a href="http://gamebanana.com/members/1354862">Cookie's</a> Top 10 Favorite Movies:

<ol><li>Star Wars Episode VI: Return of the Jedi</li>
<li>Indiana Jones &amp; the Last Crusade</li>
<li>Star Trek VI: The Undiscovered Country</li>
<li>Leon: The Professional</li>
<li>Star Wars Episode V: The Empire Strikes Back</li>
<li>Monty Python &amp; the Holy Grail</li>
<li>The Godfather</li>
<li>Star Wars Episode IV: A New Hope</li>
<li>The Blues Brothers</li>
<li>The Freshman</li></ol>


produces:

Cookie's Top 10 Favorite Movies:

  1. Star Wars Episode VI: Return of the Jedi
  2. Indiana Jones & the Last Crusade
  3. Star Trek VI: The Undiscovered Country
  4. Leon: The Professional
  5. Star Wars Episode V: The Empire Strikes Back
  6. Monty Python & the Holy Grail
  7. The Godfather
  8. Star Wars Episode IV: A New Hope
  9. The Blues Brothers
  10. The Freshman

The <ol> element represents an ordered list and the <li> element represents a list item. Ordered lists are very convenient because the numbering is automatic. To demonstrate the <ol> element's brother, the unordered list, let's take a look at some of the anime I've seen:

ExampleSome anime that <a href="http://gamebanana.com/members/1354862">Cookie</a> has seen:

<ul><li>Inuyasha (167 episodes)</li>
<li>Cowboy Bebop (26 episodes)</li>
<li>Nausicaä of the Valley of the Wind (movie)</li>
<li>Full Metal Alchemist (51 episodes)</li>
<li>Neon Genesis Evangelion (26 episodes)</li>
<li>Castle in the Sky (movie)</li>
<li>Trigun (26 episodes)</li>
<li>Gungrave (26 episodes)</li>
<li>.hack//SIGN (26 episodes)</li>
<li>Princess Mononoke (movie)</li></ul>


produces:

Some anime that Cookie has seen:

  • Inuyasha (167 episodes)
  • Cowboy Bebop (26 episodes)
  • Nausicaä of the Valley of the Wind (movie)
  • Full Metal Alchemist (51 episodes)
  • Neon Genesis Evangelion (26 episodes)
  • Castle in the Sky (movie)
  • Trigun (26 episodes)
  • Gungrave (26 episodes)
  • .hack//SIGN (26 episodes)
  • Princess Mononoke (movie)

The <ul> element represents an unordered list and, once again, the <li> element represents a list item. Defintion lists are a little bit different:

ExampleSome of <a href="http://gamebanana.com/members/1354862">Cookie's</a> favorite words:

<dl><dt>chemicalwarfaresoup</dt><dd>An ancient concoction of the most potent chemicals.</dd>
<dt>hurr</dt><dd>The battle cry of a legendary tribe of cannibals known for their devotion to a banana deity named Cluver.</dd>
<dt>buttsechs</dt><dd>The payment Cookie receives from Botch and GOERGE every night in exchange for his immortal soul.</dd>
<dt>cucumber</dt><dd>A green sex toy often used by $carFace for masturbation.</dd></dl>


produces:

Some of Cookie's favorite words:

chemicalwarfaresoup
An ancient concoction of the most potent chemicals.
hurr
The battle cry of a legendary tribe of cannibals known for their devotion to a banana deity named Cluver.
buttsechs
The payment Cookie receives from Botch and GOERGE every night in exchange for his immortal soul.
cucumber
A green sex toy often used by $carFace for masturbation.

<dl> represent a definition list, <dt> represents a term, and <dd> represents a term's definition.

[back to the table of contents]


Objects

I've long avoided writing a tutorial on this topic and for good reason. The <object> element represents a generic container for embedding complex data (such as audio or video) in a document. In theory that's great but in practice it rarely works as expected because some browsers do not follow the standard and there are a huge variety of object types. Many tutorials suggest using the non-standard <embed> element combined with <object> to ensure your content works properly but that approach is incorrect.

To get you going with <object> let's look at a Flash animation courtesy of an old friend (SaTaN):

Example<object type="application/x−shockwave−flash" data="http://files.gamebanana.com/bitpit/csbmembersfinal2.swf" width="400" height="300"><param name="movie" value="http://files.gamebanana.com/bitpit/csbmembersfinal2.swf" />SaTaN's Movie</object>

produces:

SaTaN's Movie

As previously mentioned the <object> element represents an object (in this case, a Flash movie). The <param /> element represents a piece of information about the object in much the same way attributes do for XHTML elements. Speaking of attributes, there are several key ones at work on this <object>: "type" provides information about the object's format, "data" provides the location of the object's data, and hopefully "width" / "height" are fairly obvious at this point. <param /> is an empty element - it conveys information to the object through its name / value pair of attributes. In this case the only paramenter being passed to our brower's Flash plug-ins is "movie" which merely provides the location of the movie.

Now let's try the same thing with an audio file:

Example<object type="audio/wav" data="http://otlowski.com/clubarfish.wav" width="200" height="16"><param name="autoplay" value="false" /><param name="controller" value="true" /></object>

produces:

If your browser uses QuickTime to play that file you should note it has a great many possible parameters all of which you can find here. "src" provides the location of the movie (I use that term losely), "controller" determines whether user controls should be displayed, and "autoplay" determines whether or not the movie should begin playing when the page loads. Before we leave the wonderful world of multimedia objects (sigh) let's look at the big kahuna - video:

Example<object type="video/mp4" data="http://otlowski.com/cartoon.mp4" width="352" height="304"><param name="autoplay" value="false" /><param name="controller" value="true" /></object>

produces:

[back to the table of contents]

Continue to Part II...


Until next time, this is Cookie hoping you learned something and inviting you to come have a cold drink at the greatest thread in the world (not to mention GB's bar):

---<Duck inn and waddle out>---

If you found this tutorial useful or otherwise enjoyed reading it please subscribe to yours truly!

Posts

1–10 of 34
1
Pages
Go to page:
1–10 of 34
1
Pages
Go to page:

Embed

Share banner
Image URL:
HTML embed code:
BB embed code:
Markdown embed code:

Credits

Original Authors
Robert Otlowski

Submitter

Cookie Monster avatar
Cookie Monster username pic Joined 5y ago
Offline

Cookie Monster avatar
Cookie Monster

Creator
Sign up to access this!
Sign up to access this!
Sign up to access this!
Sign up to access this!

Category

Details

Difficulty Level
Beginner Difficulty

Share

  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • Share on Google+

Stats

  • 12,175 Views
  • 42 Posts
  • 11y Submitted
  • 5y Modified
Sign up to access this!

Greetings! Mascot

GameBanana is one of the oldest mod sites on the net. Sign up and maximize your browsing experience.

  • Subscribe: Get notified of new submissions like this.
  • Say Thanks: Show your appreciation - send modders points.
  • Post: Give modders your thoughts on their work.
  • Vote: Help your favorite modders win monthly awards.
  • Rate: Rate mods and help them stand out.
  • Flag: Alert moderators and warn members of problems with mods.
  • Watch: Get notified when mods are updated.

Join the community! Sign up now!

Already a Bananite? Login

More from Submitter

bcp.crwdcntrl.net tracking pixel