Forums » Mechanics, Logistics, and Other Technical Stuff: » Tech Help & Site Bug Reports

Quick & Dirty HTML Primer

Display mode:

Dragonchilde 8 months ago

Quick & Dirty HTML Primer

9322 words so far

Role admin
Location Macon, GA
Joined November 4, 2002
Posts 2810

Unlike many forums on the web, we do not use the [BB CODE] specification. Here, we use good old-fashioned HTML.

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.

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, , 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:
Italicized Text
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 tag was deprecated. So now, we use a new tag: .

To make your text bolder, use the following:
Bolded Text

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.

This is an ordered list

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, a moderator may ask you to remove it. HQ has asked that signature banners be no larger than 500 pixels wide x 100 high and 30kb in size- and that's the combined total of images in your signature. You can add signatures under My NaNoWriMo => Edit User Settings [NOTE: THIS FEATURE IS NOT YET AVAILABLE.]

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!

Deadly Ernest 7 months ago

Quick & Dirty HTML Primer

Who's online