aspelta's guide to creating character layouts
introduction
The aim of this guide is not to throw a load of HTML codes at you and wave you on your merry way. I will be attempting to teach you a little about how character layouts are put together, and also how to enhance the aesthetics.

There are two basic types of layout - the expanding table and the scrollbox. The expanding table is the easiest to construct and, in my opinion, the easiest and nicest to use too. Most layouts are accompanied by a picture, but not all, and you don't need a picture to make your layout look good. Colours are very important. Most psychologists view colour psychology with skeptisim, but there's no doubt that people suit certain colours and that they associate colours with certain things - such as red with love, blue with water, yellow with sunshine, etc. You can read more about colour psychology by clicking here.

When making a layout, you must consider:
• That it must be functional in all the main browsers: Internet Explorer, Mozilla Firefox, Safari and Google Chrome.
• That it must fit within the site layout and preferrably shouldn't clash too much with it.
• That it should be easy on the eye; people don't care how beautiful your picture is if they can't read what's written underneath.
• That different people have different screen brightness, so even if it looks fine to you, it may not to someone else.

picture
Never just throw a picture on a piece of HTML without considering it. Pictures create a large amount of (often unnecessary) hassle. A skilled HTMList will be able to knock up an attractive layout in a few minutes, but even a quick photomaniper can spend half an hour or more just touching up a photo. Be sure that you really want the picture and that the picture you've selected is suitable for your needs, since a lot of time can be wasted messing around in Photoshop on something which won't actually look that great as a character layout.

The first consideration with a picture is how you want the overall layout to look. Will the picture go at the top of an expanding table or beneath one? Will it sit inside an expanding table with text aligned around it, or will it be a background for a scrollbox, or sit on top of/beneath/next to a scrollbox? Design how you want the layout to look in your head before you even open your photoediting program. This will help you to focus your editing.

Then, the picture itself. Do you want the whole picture or just part of it? If you only want part of it, will it still be big enough? If you want the image to sit at the top/bottom of a layout or as a background, the width should probably be no smaller than 400 pixels and no larger than 700. 500-600 is a good size. Shaman's "blue box" background is 755 pixels wide, so you definitely don't want it larger than that. Images with text aligned around them should be smaller - maybe only 200 pixels in width. I would generally advise against portrait over landscape images, since it requires people to scroll down further to get to your text (which may irritate them), but if you go for a portrait it's worth considering having a scrollbox next to it instead of an expander underneath it (in which case you only want a small width - maybe about 300 pix - but a taller height). If you're stuck on an expanding table with a portrait image, remember not to make it too tall.

Where is your picture coming from? Photography is a fun hobby I would recommend to anyone, but if you're not that way inclined you need to consider where you're getting your images from and how to properly credit the photographer. Refer to the guide to copyrights and stock for more info on this.

Photoediting - is it really necessary? You can ruin a photograph by messing around with it, but on the other hand, a little increased contrast can go a long way. Photoediting software doesn't have to be expensive; many websites such as DeviantArt and PhotoBucket now have online editing programs, and GIMP is free to download. I personally own a variety of photoediting programs, including the professional Adobe Photoshop CS3 package, but my favourite is the (relatively) cheap and cheerful Adobe Photoshop Elements 7 (also recommend version 4 which does more or less the same things at more or less half the price). Since this is now a few years old you can get it cheaper, and I would really recommend it if you're planning on touching up lots of photos.
When editing, bear in mind your layout design. It's often nice to have the image fading into the background colour of the table, or to have borders.

creating an expanding box
introduction to HTML
HTML stands for Hyper Text Mark-Up Language, and is the most basic code used to create websites. Table websites are the simplest web designs, and are generally only used by amateurs, but they are suitable for fun little character layouts.

HTML begins and ends with "tags". You must always close a HTML tag. You should also be aware that some HTML codes do not work in all browsers. Most codes used on Shaman should work in all browsers, since the codes you'll be using are only simple anyway.

A tag looks like this:
<HTML>

And a close tag looks like this:
</HTML>

Close tags are the same as unformatted open tags, but with a / before the text. In this guide, HTML will always be coloured blue and the bits you can edit will be coloured green. You can copy any of the codes in this guide and use them any time, but the purpose of this guide is to teach you how to write it yourself.

HTML is not case sensitive, so it doesn't matter if you use caps or not.

introduction to tables
Most tables consist of columns and rows. In HTML it's slightly different, because web developers like to be special; HTML tables consist of rows and boxes. In your average character layout you only need one row and one box, because all you want is a coloured background, but I'm going to teach you how to construct any kind of layout you want using a table. That way you can apply it to other things, like territory layouts, which work in the same way.

First, we start with the basic table tag:
<table> </table>

If you just use that code, it won't work. All that code does is tell the computer that you're creating a table; next you need to tell it what you want in the table - ie, the rows and boxes. The code to start a row is <tr> (TR as in table row) and the code for a box is <td> - don't forget to close the tags!
So your basic character layout would look like this:

<table><tr><td>Your post goes here.</td></tr></table>

Notice the order of the close tags? Close the one most recently started first, so that the open and close tags both sit inside the previously made tags. In this case, the box tag sits inside the row tag, which sits inside the table tag. Your text goes inside the box, so between the <td> </td> tags.

adding to the 'table' tag
The code above is the absolute foundation of all table layouts. Just using that won't make a layout of any sort, since it will be invisible and have no defined dimensions, so it will simply adopt the dimensions of the site layout. To start "decorating" your layout, you need to add formatting to it. Formatting means making changes to the default settings. A default table has no background colour, no borders and no defined dimensions (width/height). Let's change that.
Some formatting goes into the <table> tag, but some goes into the other tags. It's simply a case of memorising which "add-ons" fit into which tags.

These "add-ons" all go into the table tag:
• width=ADD NUMBER HERE
• bgcolor=# ADD HEX CODE HERE
• background=ADD IMG URL HERE
• border=ADD NUMBER HERE
• bordercolor=# ADD HEX CODE HERE

First, let's look at width. Width is measured in pixels (px); pixels are the dots of colour on your screen which make up images. Your screen resolution is measured in pixels, too - so if your screen resolution is 800 x 600, then an image 800 pixels wide and 600 pixels tall would fill your screen. An image larger than that will cause scrollbars to appear at the side and bottom of your screen. Shaman's blue expanding box on the main site layout is 755 pixels in width, so your table should be smaller than this, otherwise it will stretch the site layout. I recommend no smaller than 400 and no larger than 700. 500-600 is usually a good size. Let's add a width of 500 pixels.

<table width=500><tr><td>Your post goes here.</td></tr></table>

Simples! If you've used HTML before, you may notice that some HTML codes also include "speech marks". This is purely optional. I personally learnt HTML using speech marks so I still use them now, but it may be easier for you to learn without them so that you don't have to figure out where they go. Speech marks also create problems if you forget to put them both in - they work the same as tags; you need an opening mark and a closing one. If you forget the closing one, then your HTML won't work. I have omitted speech marks in this guide to keep things simple. If you do use speech marks, the opening mark should be placed after the equals mark and the closing one at the end of your add-on, so it would look like this:

<table width="500"><tr><td>Your post goes here.</td></tr></table>

The computer automatically counts the width in pixels so you don't need to tell it that that's what you're measuring it in. Notice that even though you've changed the open tag, the close tag remains the same? You don't need to add formatting to the close tag. The close tag is basically the basic open tag, without the add-ons, but with the forwards slash.

Next - a nice background colour. You can describe the colour using names the computer recognises (such as blue, white, yellow, etc), but the best and most common method of colouring tables is to use hex codes. Hex codes are always 6 digits long and only contain the following characters: 0123456789ABCDEF. Using these 14 characters, we can describe any colour in the rainbow. The 6 digits of a hex code are split into 3 sets of 2, which each describe the primary colours in computer monitors: red, green and blue. Imagine your computer is an artist with a mixing palate. Take the hex code #01F32D. The 01 tells the computer how much red to put on the palate; the F3 tells the computer how much green to put on the palate; and the 2D tells the computer how much blue to put on the palate. The computer then mixes these together and generates a colour. If you set all six digits to the highest intensity, #FFFFFF, you get white. Likewise, if you set them to the lowest intensity, #000000, you get black. For the most part you don't need to know about how hex codes work, but if you're interested you can read about it here. All you really need to know is what a hex code is, and if you know that a hex code always has 6 digits, you're more likely to be able to spot a missing/extra digit in a layout which isn't working. Most photoediting programs will have an eyedropper tool which will enable you to pick out a colour from an image. If you're using a picture with your layout, I strongly recommend using this eyedropper tool to pick out a suitable colour from the image itself. Taking hex codes directly from the pic always looks better than if you simply guess.
For the background, always pick a colour which is easy on the eye - i.e., not too bright and which compliments the picture (if you're using one). Let's make our table white.

<table width=500 bgcolor=#FFFFFF><tr><td>Your post goes here.</td></tr></table>

Now our table is starting to take on some form! Here's what it looks like when I add some text:

Goooooooooooood morning, Shaman! So here’s the 411. The seventh curse was Mallos – he’s come back in all his flaming glory burning for revenge and his place as King and God. All that’s standing between him and the world is an oversized lioness, a four-foot high blonde who jumps at shadows and a couple of flea-infested rats. Oh, yeah. And us. What’s left of us, anyway. Shaman has split in two – half are swayed by Mallos’ (admittedly convincing) arguments, half stand by Aura’s morals. Families have been ripped apart by differing opinions as much as by the actual fighting, which is no longer restricted to the battleground – now, the whole world is a warzone. The two rising empires of per-aa nakht and set-merut have wiped out traditional homes and with them, all sense of normality. Whether on the front or in the spy game, people are dying daily. The new generation of fighters being groomed are already forgetting the cause, so it has been simplified into two words. Freedom or power. Aura or Mallos. There is no neutrality. No middle ground. Make a decision, but make it wisely.

See how easy that was? Now let's add a border.

The border code, border=, requires a number. The number indicates the thickness in pixels of the border. 1 or 2 pixels is usually thick enough for a standard layout border. I'm going to set mine to 2.

<table width=500 bgcolor=#FFFFFF border=2><tr><td>Your post goes here.</td></tr></table>

That looks like this:

Goooooooooooood morning, Shaman! So here’s the 411. The seventh curse was Mallos – he’s come back in all his flaming glory burning for revenge and his place as King and God. All that’s standing between him and the world is an oversized lioness, a four-foot high blonde who jumps at shadows and a couple of flea-infested rats. Oh, yeah. And us. What’s left of us, anyway. Shaman has split in two – half are swayed by Mallos’ (admittedly convincing) arguments, half stand by Aura’s morals. Families have been ripped apart by differing opinions as much as by the actual fighting, which is no longer restricted to the battleground – now, the whole world is a warzone. The two rising empires of per-aa nakht and set-merut have wiped out traditional homes and with them, all sense of normality. Whether on the front or in the spy game, people are dying daily. The new generation of fighters being groomed are already forgetting the cause, so it has been simplified into two words. Freedom or power. Aura or Mallos. There is no neutrality. No middle ground. Make a decision, but make it wisely.

Hmm. I don't much like the colour. I think I'll set the colour to brown. Setting the border colour works in the same way as setting the background colour. Little tip for the Brits: don't forget to spell 'colour' the American way!

<table width=500 bgcolor=#FFFFFF border=2 bordercolor=brown><tr><td>Your post goes here.</td></tr></table>

Goooooooooooood morning, Shaman! So here’s the 411. The seventh curse was Mallos – he’s come back in all his flaming glory burning for revenge and his place as King and God. All that’s standing between him and the world is an oversized lioness, a four-foot high blonde who jumps at shadows and a couple of flea-infested rats. Oh, yeah. And us. What’s left of us, anyway. Shaman has split in two – half are swayed by Mallos’ (admittedly convincing) arguments, half stand by Aura’s morals. Families have been ripped apart by differing opinions as much as by the actual fighting, which is no longer restricted to the battleground – now, the whole world is a warzone. The two rising empires of per-aa nakht and set-merut have wiped out traditional homes and with them, all sense of normality. Whether on the front or in the spy game, people are dying daily. The new generation of fighters being groomed are already forgetting the cause, so it has been simplified into two words. Freedom or power. Aura or Mallos. There is no neutrality. No middle ground. Make a decision, but make it wisely.

Do you see how there's a double border effect? This is because the computer puts a border around the outside of the table, but also around the outside of the box within the table. If I create a table with two boxes and two rows, you'll see what I mean:

box 1	box 2
box 3	box 4

I want to collapse the borders, so that the two lines become one. To do this, I need to add a slightly more complex-looking add-on to my table code. You will never need to edit this code - only add it in if you want to collapse the borders, or take it out if you don't - and it would take a long time to explain it so I'm not going to bother. Simply take this code and run with it. The code is: style=border-collapse:collapse. If we add it into our layout, it looks like this:

<table width=500 bgcolor=#FFFFFF border=2 bordercolor=brown style=border-collapse:collapse><tr><td>Your post goes here.</td></tr></table>

Goooooooooooood morning, Shaman! So here’s the 411. The seventh curse was Mallos – he’s come back in all his flaming glory burning for revenge and his place as King and God. All that’s standing between him and the world is an oversized lioness, a four-foot high blonde who jumps at shadows and a couple of flea-infested rats. Oh, yeah. And us. What’s left of us, anyway. Shaman has split in two – half are swayed by Mallos’ (admittedly convincing) arguments, half stand by Aura’s morals. Families have been ripped apart by differing opinions as much as by the actual fighting, which is no longer restricted to the battleground – now, the whole world is a warzone. The two rising empires of per-aa nakht and set-merut have wiped out traditional homes and with them, all sense of normality. Whether on the front or in the spy game, people are dying daily. The new generation of fighters being groomed are already forgetting the cause, so it has been simplified into two words. Freedom or power. Aura or Mallos. There is no neutrality. No middle ground. Make a decision, but make it wisely.

I'm not sure about that white background after all now. Say I want a textured colour instead. You can create a textured effect by texturing a colour in a photoediting program, uploading it to the internet and then setting the image as a repeating background on your table. Repeat is the default setting for image backgrounds on tables, so all you have to do is set it as the background. Now, you can't have a colour background and an image background, so first we have to remove the colour.

<table width=500 border=2 bordercolor=brown style=border-collapse:collapse><tr><td>Your post goes here.</td></tr></table>

Now, let's add the image.

<table width=500 border=2 bordercolor=brown style=border-collapse:collapse background=http://i.imgur.com/QpwuHbz.jpg><tr><td>Your post goes here.</td></tr></table>

Goooooooooooood morning, Shaman! So here’s the 411. The seventh curse was Mallos – he’s come back in all his flaming glory burning for revenge and his place as King and God. All that’s standing between him and the world is an oversized lioness, a four-foot high blonde who jumps at shadows and a couple of flea-infested rats. Oh, yeah. And us. What’s left of us, anyway. Shaman has split in two – half are swayed by Mallos’ (admittedly convincing) arguments, half stand by Aura’s morals. Families have been ripped apart by differing opinions as much as by the actual fighting, which is no longer restricted to the battleground – now, the whole world is a warzone. The two rising empires of per-aa nakht and set-merut have wiped out traditional homes and with them, all sense of normality. Whether on the front or in the spy game, people are dying daily. The new generation of fighters being groomed are already forgetting the cause, so it has been simplified into two words. Freedom or power. Aura or Mallos. There is no neutrality. No middle ground. Make a decision, but make it wisely.

Notice how it doesn't matter where in the table tag you put each line of code. There doesn't have to be a specific order.

The image starts in the top left-hand corner and repeats from there. If your image is larger than the table it will be cut off on the right-hand side and the bottom. I would advise against using photos (or anything other than a textured colour, really) as a background image, since they don't work very well on expandables... every post you write would have to come to a specific length to match the image dimensions, and it just isn't worth the hassle.

formatting text
My layout looks pretty good, but the colour of the text clashes with it. I'm going to create a new tag to format text with. Here's the basic font tag:
<font> </font>

Just like with tables, simply putting that in your text won't do anything to edit it. You need to put in the add ons to tell the computer what it is about the text you want to edit. The font tag needs to go inside the box in the table, since that's where my post will go. Remember that rule about closing recent tags first? That applies here.

These "add-ons" all go into the font tag:
• color=# ADD HEX CODE HERE
• face=ADD FONT HERE
• size=ADD NUMBER HERE
• style=font-size:ADD NUMBER HEREpt
• style=line-height:ADD NUMBER HEREpx
• style=letter-spacing:ADD NUMBER HEREpx

My first priority is to change the font colour. I'm going to use the hex code for black.

<table width=500 border=2 bordercolor=brown style=border-collapse:collapse background=http://i.imgur.com/QpwuHbz.jpg><tr><td><font color=#000000>Your post goes here.</font></td></tr></table>

Goooooooooooood morning, Shaman! So here’s the 411. The seventh curse was Mallos – he’s come back in all his flaming glory burning for revenge and his place as King and God. All that’s standing between him and the world is an oversized lioness, a four-foot high blonde who jumps at shadows and a couple of flea-infested rats. Oh, yeah. And us. What’s left of us, anyway. Shaman has split in two – half are swayed by Mallos’ (admittedly convincing) arguments, half stand by Aura’s morals. Families have been ripped apart by differing opinions as much as by the actual fighting, which is no longer restricted to the battleground – now, the whole world is a warzone. The two rising empires of per-aa nakht and set-merut have wiped out traditional homes and with them, all sense of normality. Whether on the front or in the spy game, people are dying daily. The new generation of fighters being groomed are already forgetting the cause, so it has been simplified into two words. Freedom or power. Aura or Mallos. There is no neutrality. No middle ground. Make a decision, but make it wisely.

Now I want to change the font. In HTML, text is called 'font' and font is called 'face', just to confuse you. The type of font you use should be readable and also a standard on most computers - if you don't use a standard font, then it'll people who don't have that font will just see the default for the page (which is verdana). Here's some standard fonts you can use:

Verdana | Times or Times New Roman | Tahoma | Arial | Georgia | Garamond

I nearly always use Times as my font. To change the font, simply add face= to your font tag.

<table width=500 border=2 bordercolor=brown style=border-collapse:collapse background=http://i.imgur.com/QpwuHbz.jpg><tr><td><font color=#000000 face=Times>Your post goes here.</font></td></tr></table>

Goooooooooooood morning, Shaman! So here’s the 411. The seventh curse was Mallos – he’s come back in all his flaming glory burning for revenge and his place as King and God. All that’s standing between him and the world is an oversized lioness, a four-foot high blonde who jumps at shadows and a couple of flea-infested rats. Oh, yeah. And us. What’s left of us, anyway. Shaman has split in two – half are swayed by Mallos’ (admittedly convincing) arguments, half stand by Aura’s morals. Families have been ripped apart by differing opinions as much as by the actual fighting, which is no longer restricted to the battleground – now, the whole world is a warzone. The two rising empires of per-aa nakht and set-merut have wiped out traditional homes and with them, all sense of normality. Whether on the front or in the spy game, people are dying daily. The new generation of fighters being groomed are already forgetting the cause, so it has been simplified into two words. Freedom or power. Aura or Mallos. There is no neutrality. No middle ground. Make a decision, but make it wisely.

Yeah! Now, font size. You can edit font size in one of two ways. The less scary-looking code is size=; with those code, you have up to 7 font sizes, and you edit them by simply inserting a number 1-7. I recommend size 2 for normal body text in layouts. Here's what the different sizes look like:

One Two Three Four Five Six Seven

Example code: <font color=#000000 face=Times size=2>Your text goes here.</font>

However, if you want more control over your font size, you're better off using the style=font-size:NUMBERpt code. Pt is an abbreviation for point, and is the same unit of measurement used in software such as Microsoft Word and Adobe Photoshop. Using pt, you can get any size text you want.

8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt16pt

See the greater degree of control? Example code: <font color=#000000 face=Times style=font-size:12pt>Your text goes here.</font>

Next, let's look at the line height. Remember in primary school when you practiced handwriting between those neat little lines? Webpages have those lines too, except they're invisible. You can edit the height of these lines. It's possible to achieve an "overlap text" effect by simply making the line height smaller than the height of the text. However, for the best effect the line height should always be the same height or taller than the text height. Unless you're messing with font size or you're making a pretty footer/header, you shouldn't need to mess with the line height on this game - our default setting is always adequate. However, it is nice to be able to change the line height, especially when making footers/headers. The code you need is style=line-height:NUMBERpx. Px is an abbreviation of pixel, and is inter-changeable with pt.

Here's an example of some text with the line height of 8pt. Doesn't look fantastic, does it? That's because the line height is too small for the font size.

This is an example of some text with the line height of 11pt. This is the default for Shaman. Nice & readable!

Here's an example of some text with the line height of 20pt. Too big a gap!

Example code: <font color=#000000 face=Times style=font-size:12pt style=line-height:11px>Your text goes here.</font>

There are also some very basic text formatting codes:

• Embolden text: <b>Your text goes here.</b>
• Italicise text: <i>Your text goes here.</i>
• Underline text: <u>Your text goes here.</u>

adding an image
The image code is one of the easiest. First, take the image you want and upload it to a server. You can use TinyPic, PhotoBucket or, if you ask nicely, you can use Shaman's server space by asking on the Chat board. Images uploaded to Shaman maintain their quality better than those uploaded to TinyPic or PhotoBucket, but it does involve a moderator signing in and uploading it for you, since you can't do it yourself.

The basic image code is:

<img src=http://www.shamanrpg.com/images/v8/bigbutton.jpg>

That's all there is to it! You can place the image inside your table, just above it or just under it. Play around with the position and see what looks best. Don't forget to swap our URL (http://www.shamanrpg.com/images/v8/bigbutton.jpg) for the URL of your image.

altering alignment
Alignment is from what direction your text comes from. There are four alignments: left, right, center and justify.

This is left aligned text.
<div align=left>Your text goes here.</div>