Using HTML on FPSB
On FPSB you can use the power of eXtensible HyperText Markup Language (XHTML) 1.0 Transitional to structure text, create links, insert images, embed audio / video, etc. in your threads and posts. If you don't know anything about XHTML don't worry - it's easy to learn.
Table of Contents
- Introduction
- Links (Anchors)
- Images
- Twenty-one Other Elements
- Lists
- Tables
- Audio / Video (Objects)
- Headings
- Field Sets
- Block-like Quotes
- Style
- Elements Not Included & Why
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 "height" in the following example:<tag height="52" />
In the above example "height" is the name of the attribute and "52" 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 FPSB you can simply use the XHTML <a> anchor element and its "href" attribute, like this:
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:
Click on the link above. See how it takes you to the same line it's on? By giving the anchor a name 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 banner at the top of the page is an image. Images are a snap in XHTML: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:
or like this:
You can even "nest" an image inside of a hyperlink:
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:
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://dropbox.hazardstrip.com/anime.gif" alt="^_^" /> =
<img src="http://dropbox.hazardstrip.com/smile.gif" alt=":)" /> =
<img src="http://dropbox.hazardstrip.com/wink.gif" alt=";)" /> =
<img src="http://dropbox.hazardstrip.com/drop.gif" alt="*O.o" /> =
<img src="http://dropbox.hazardstrip.com/frown.gif" alt=":(" /> =
[back to the table of contents]
Twenty-one 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, bigger, smaller, mono spaced, inserted,code, a sample, keyboard input, a variable, a citation, an abbreviation, an acronym, or a short quoteyou can use these 21 simple XHTML elements:
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. That's primarily because some of them represent structure while others represent style. 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: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:
The <ul> element represents an unordered list and, once again, the <li> element represents a list item. Defintion lists are a little bit different:
<dl> represent a definition list, <dt> represents a term, and <dd> represents a term's definition.
[back to the table of contents]
Tables
In XHTML the <table> element represents a table (gasp!), however, there are many related elements that aren't quite as easy to remember. Some of them are widely used and supported, others are not. We will take a look at all of them because we have nothing better to do. Now, for a very simple table:<table> represents a table, <tr> represents a table row, and <td> represents a table data "cell." Additionally, the "border" attribute of the table element provides the thickness (in pixels) of its border. I used it here because sometimes the default is zero and borders help with visualization. Every table must have at least one row and every row must have at least one cell. To get a better idea of how you can combine these three basic elements let's take a look at a bigger one:
You may be wondering why there are no line breaks up there to make the markup easier to read. This is an unfortunate side effect of a convenient forum feature. Whenever you create a new line character (most often by pressing the Enter key) FPSB converts it to an XHTML <br /> (break) element. That's very convenient most of the time but unfortuately when you're creating a table, list, or other complex structure it becomes downright annoying because it creates tons of blank lines if you're not careful.
Now that you (hopefully) have a good grasp of rows and data cells let's add some header cells:
The <th> represents a table header cell (as opposed to a data cell). Now let's add a caption:
The <caption> element represents a table caption and, if used, should appear immediately after the <table> element. There's also a fancy way to structure your table with a header, footer, and one or more body sections. Shazam:
<thead> represents a table header, <tfoot> represents a table footer, and <tbody> represents a table body section. If used <thead> and <tfoot> should appear after <caption> (if there is one) or <table> and be followed directly by one or more <tbody> elements. Additionally, they each require at least one row.
You may have noticed something missing thus far in our table discussion: any mention of columns. Fear not, for the interweb faerie considered this when designing HTML:
You might be asking yourself: what is the point of that? The answer is that it's a mechanism for grouping related columns similar to how <tbody> can be used to group related rows. <colgroup> represents a group of columns and (strangely enough) <col /> represents a column. Before you fall asleep there are a couple of important attributes that you'll probably end up using on FPSB someday:
I found these very confusing when I first learned HTML but they're essential if you want to do fancy things with your profile layout. "colspan" signifies how many columns a cell spans and "rowspan" signifies how many rows a cell spans. I find the best thing to do is draw out what you want on a piece of paper (old school or no school baby) then write the XHTML table structure that corresponds to it by trial and error.
[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. 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):
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.
So far, so good. Unfortunately not all applications are as easy to work with as Flash plug-ins. Let's try the same thing with an audio file using the QuickTime plug-in:
If you're looking at that and thinking: "What a mess!" you're completely right. Because different browsers do not follow the same rules for using the <object> element the above workaround is necessary to make sure the embedded audio works correctly.
As you can see there are actually two <object> elements at work here - an outer one with "classid" and "codebase" attributes and an inner one with the "type" and "data" attributes we've already had experience using. The outer <object> is necessary to satisfy Internet Explorer (IE) which looks for a non-standard "classid" value as are the "<!--[if !IE]>-->" and "<!--<![endif]-->" to keep IE from thinking there are two objects.
QuickTime 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:
[back to the table of contents]
Headings
There are six simple heading elements that you can use to including headings for different parts and levels of your threads or posts. For example, the word "Headings" above (in yellow) is a level 2 heading. There isn't much to these elements so let's go ahead with an example that covers them all:As you can see <h1> is the biggest / most important followed by <h2> and so on down to the smallest / least important <h6>.
[back to the table of contents]
Field Sets
I hesitated to include field sets because their primary purpose is to group form fields and forms are not covered in this tutorial. However, I've received many requests for it and, as you can see, I used it myself in the "Examples" here. In fact that's going to make the following example look a little bit funny:Apologies if that looks confusing but having used the <fieldset> element for all the other examples in this tutorial I didn't want to change things up, especially for the <fieldset> element itself. <legend> represents a (surprise!) legend for the fieldset and, if used, should appear immediately after the fieldset start tag as shown above.
[back to the table of contents]
Block-like Quotes
In Twenty-one Other Elements we saw how to include a short quote using the <q> element. But what if you have a longer quotation? FPSB has its own way of quoting people's posts but if you happen to have another kind of long quote you want to include you can use the <blockquote> element, like this:Most browsers indent the content of the <blockquote> element to separate it from the main text. Just don't forget that you can and should use the <q> element instead for simpler, non-block-like quotes.
[back to the table of contents]
Style
You may have noticed something missing from this tutorial: style (fonts, colors, backgrounds, spacing, etc.). That's because the best way to style XHTML documents is by using Cascading Style Sheets (CSS). CSS, in addition to being a popular video game, is also a popular style sheet language. Since it's quite extensive rather than trying to stuff another language in here I'm currently working on a separate tutorial for it called Using CSS on FPSB.If you're really interested in pimping out your threads and posts you should keep a googly eye out for it ;).
[back to the table of contents]
Elements Not Included & Why
You may or may not have heard of other HTML elements not covered in this tutorial. The focus of Using HTML on FPSB is valid XHTML 1.0 Transitional elements that are particularly useful on FPSBANANA, however, rather than leave your curiosity unsatisfied I've provided a comprehensive list of other elements (some XHTML 1.0 Transitional, some not) and explanations of why they were not included.<html>, <head>, <title>, <style>, <meta />, <link />, <base />, <body>
<html>, <head>, and <body> define the high level structure of an HTML document and the other elements listed are only allowed inside of the <head> element. You do not have access to that level of the pages of FPSB, so there's no reason to include them in this tutorial.<frameset>, <frame />, <iframe>, <noframes>
<frameset> and <frame /> are not XHTML 1.0 Transitional elements - they have their own version of XHTML 1.0 - Frameset. Additionally, frames are an advanced feature and iframes in particular have been known to cause a lot of trouble on forums.<div>, <span>
Divisions and spans are key generic container elements, however, their primary uses relate to style and scripts neither of which are part of this tutorial. If you're interested in them check out Using CSS on FPSB - these two elements are spattered across it like the plague.<map>, <area>
Client-side image maps are an advanced, seldom used, and somewhat awkward feature of HTML. Therefore I chose not to cover them in this tutorial.<form>, <label>, <input />, <select>, <optgroup>, <option>, <textarea>, <button>
Forms are a somewhat advanced feature of HTML and usually require the use of a script or web server in order to be useful, therefore, I chose not to include them in this beginner level tutorial.<script>, <noscript>
Scripts are not allowed in the FPSB forums. I realize they may be allowed on other parts of the site but this tutorial is for beginners and using the script element would involve teaching a scripting language. Therefore, it's out of scope.<hr />
Horizontal rules look like crap, at least on the forums. What's more, noobs have a terrible tendency to overuse this element and that's the main reason I chose not to include it.<br />
This element represents a line break. However, FPSB inserts a line break whenever you enter a new line character by pressing the Enter key on your keyboard so there isn't a great deal of use for this element in the forums.<p>
The <p> element represents a paragraph and is usually extremely useful in HTML. Unfortunately on a site that inserts line breaks for you the paragraph element is usually more trouble that it's worth.<pre>
The <pre> element represents pre-formatted text. This is normally handy for including text that already has whitespace in it that you don't want to lose. But, as with <br /> and <p> it's problematic on a forum because any new line character will be converted to the <br /> element anyway - even inside of <pre>. The result is double spacing that, in my opinion, renders this element problematic at best.<address>
This element represents information about the author and is rarely used except at the document level. Hence why I've chosen not to include it, at least for now.<applet>, <font>, <basefont />, <u>, <s>, <strike>, <menu>, <dir>, <center>, <isindex />
These elements, while technically valid in XHTML 1.0 Transitional, have been deprecated. You can (and should) use other elements or Cascading Style Sheets (CSS) instead.<xmp>
This element was removed from HTML in 1997. It is not part of XHTML 1.0 Transitional and should therefore not be used on FPSB. If you're trying to show markup without it being interpreted as such you should simply replace all less than < characters with < and all ampersand & characters with & - these are character references that browsers will not confuse with element start tags and other character references, respectively.[back to the table of contents]
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 FPSB's bar):
---<Duck inn and waddle out>---
If you found this tutorial useful or otherwise enjoyed reading it please add it to your favorites!
Back | POSTED BY Robert Otlowski
president@alum.rpi.edu | Robert Otlowski | rpipresident@gmail.com