Quick & Dirty XHTML Primer

DragonchildeGlowing Halo
Quick & Dirty XHTML Primer
Winner!
53,387 / 50,000
Staff
Joined: Nov 3, 2002
Location: Macon, GA
Posts: 3034
Posted on:
Sep 26, 2009 - 08 18

I'm sure most of you have noticed that this forum works a bit differently than the old one did. No longer are we stuck with the ancient BB code... we've stepped up to XHTML, baby!

This... can be confusing. So, I'm going to do a quick primer of the tags you'll be using most often, and hopefully this will help you post signatures, add emphasis to your posts, and overall look REALLY cool.

For a complete list of tags available on this forum, you'll find them on the Compose Tips Page (Thanks HedgeMage!) - Here are the ones you'll use most often on this forum.

Links

First, is the link. In web designer speak, we use an anchor tag for this... what it means to you is that you can format your links prettily.

You can just post the link like so: http://www.nanowrimo.org and the forum will automatically convert it for you. However, you might want to make it clickable, and pretty, so that it doesn't ugly-up your post!

Like So.

Here's how you do this:
<a href="URL">Clickable Text</a>

It's important to remember to "close your tag", that is, add a </a> at the end of the text, otherwise everything after it will be clickable. Not pretty at all. ;)

You can also do a clickable email link the same way, only instead of using a URL, you'll use the following within the quotation marks: mailto:EMAIL ADDRESS

Be wary of this one, though, as any email address you may post on the forum may be harvested by spam bots. It's generally not a wise idea to post your email address unless absolutely necessary.

Italics

Italics were updated with the new XHTML specifications. The technical term for this is "deprecated". The old tag, <i>, is no longer valid, so it doesn't work. The arcane deity known as the "W3C" decided this is so, so it is. ;)

What does this mean to you? Well, it means that to make it work, you have to get with the program, and use their new, approved tag.

Italicized Text

To do this:

<em>Italicized Text</em>

Easy-peasy! This one also needs to be closed, or your whole post will be italicized.

Bold Text

Sometimes, you just gotta shout! Like the italics, the old <b> tag was deprecated. So now, we use a new tag: <strong>.

To make your text bolder, use the following:

<strong>Bolded Text</strong>

This is also a tag that needs to be closed, or your entire post will be bolded.

Lists

The next bit of code you're like to use is a list. Sometimes, you want to order your thoughts, or you want a bulleted list. These can be simulated with regular characters, such as a dash ( - ) for a bullet, or numbering manually. However, lists offer two advantages: Prettier, easier to read formatting, and autonumbering. If you add an item in the middle of your list, the ordered list option will rearrange your numbers for you, instead of you having to go in and retype them all.

  1. This is an ordered list
  2. Your items will be numbered in order

To do this:

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

  • This is an unordered list
  • Your items will be presented with bullets

To do this:

<ul>
<li>First item</li>
<li>Second item</li>
</ul>

The construction of both of these lists is the same, with one small difference. Make sure you use the right opening and closing tags: <ol></ol> for an ordered list, and <ul></ul> for an unordered list.

Images

We know why you're all here. Admit it; you want a pretty image in your signature, or you want to post an image in your post. Well, this will tell you how to do just that!

Before I do, let me remind you of a few guidelines: Keep your images small, and don't use too many. If someone has to scroll past half a screen to get by your signature, Cybele or another moderator may ask you to remove it. Cybele has asked that signature banners be no larger than 500 x 100.

Unlike the other tags, the image tag doesn't need to be closed with a second tag. It's a standalone.

If you want to post this:

2006 Winner

Here is how you do so:

<img src="IMG URL" />

Note the little forward slash at the end. ;) That is how you denote a tag that doesn't need to be closed with a second tag.

Please note that images must be hosted elsewhere for you to link them. You can use photobucket, a private web host (some don't allow hotlinking, so check with your host - Geocities is one of these that disallows linking from elsewhere.) My personal favorite is TinyPic, because it's quick and easy, and doesn't require a link back like photobucket does.

Now, if you really want to get squirrely? You can make your PICTURES clickable, by nesting tags.

To do this:

<a href="URL you want to link to"><img src="Image URL" /></a>

There, that was your not-so-quick, not-so-dirty primer on how to use XHTML on this forum. This will actually work on any web page (except forums that have HTML disabled, of course). If you have questions, feel free to ask!
----------
Heather Dudley
Forums Moderator
Liquid Story Binder, on sale for 50% off during November!
A Dragon Writes

Home :: Info :: Zoeken :: My NaNoWriMo :: FAQs :: Fun Stuff :: Donaties/Winkel :: Forums :: Onze Programma's
Privacy Beleid :: Privacy Policy :: Voorwaarden :: Retourzendingen :: Terms and Conditions :: Codes of Conduct :: Returns Policy

Copyright © 2009 The Office of Letters and Light :: All posted novel excerpts remain copyright their authors.
Powered by Drupal