HTML

HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. More relevantly to the average waja user, HTML codes are what players primarily use to customize their forum posts, cave descriptions, cave rules, groups, and anywhere else permitted by the site. It allows you to do a variety of things, such as posting images, linking to pages, and editing the appearance of your text.

Basics

Here is a basic guide of HTML and CSS that can be used in your cave description or in posts on the forums to customize them. This is by no means a comprehensive list of what is usable on wajas, as there are many other codes and ways of coding than are shown here.

Copy the codes exactly and edit the text as indicated.

Editing Text Appearance

It should be noted that most style codes can be used as either <p style=""> </p> or <a style=""> </a> (most notable exceptions being the width and text-align attributes, which can only be used with <p style=""> </p>). Using the <p style=""> </p> version will separate the text that it edits from any text around it by padding and linebreaks, whereas <a style=""> </a> version will not separate the edited text from the text around it and is more facilitative of flowing text. <a style=""> </a> will only affect a single line of text. If you want to add a background colour to make it look like a textbox, you need to use <p style=""> </p>.

DISCLAIMER: Please use these sparingly and tastefully, as overuse of large or brightly colored text is obnoxious and could get you in trouble.

How to make text Bold

<b>Your Text Goes Here</b>

How to Italicize text

<i>Your Text Goes Here</i>

Underlining Text

<a style="text-decoration:underline;">Your Text Goes Here</a> <p style="text-decoration:underline;">Your Text Goes Here</p>

Over-lining Text Text

<a style="text-decoration:overline;">Your Text Goes Here</a> <p style="text-decoration:overline;">Your Text Goes Here</p>

Striking Through Text

<a style="text-decoration:line-through;">Your Text Goes Here</a> <p style="text-decoration:line-through;">Your Text Goes Here</p>

Changing Text Color

<a style="color:#HEXCODE;">Your Text Goes Here</a> <p style="color:#HEXCODE;">Your Text Goes Here</p>

(Replacing HEXCODE with the hex code of the color you want the text to be.)

Adding Background Color to Text

<a style="background-color:#HEXCODE;">Your Text Goes Here</a> <p style="background-color:#HEXCODE;">Your Text Goes Here</p>

(Replacing HEXCODE with the hex code of the color you want the area around the text to be.)

Adding Background Image to Text

<a style="background-image:url(IMAGEURL);">Your Text Goes Here</a> <p style="background-image:url(IMAGEURL);">Your Text Goes Here</p>

(Replacing IMAGEURL with the url of the image you wish to use.)

Adding a Border Around Text

<a style="border:SIZEpx STYLE #HEXCODE;">Your Text Goes Here</a> <p style="border:SIZEpx STYLE #HEXCODE;">Your Text Goes Here</p>

(Replacing SIZE with a thickness in pixels that you want the border to be, HEXCODE with the hex code of the color you want the border to be, and STYLE with the style of border you want. Examples of possible border styles include dotted, dashed, solid, double, ridge, groove, inset, or outset.

You can also modify borders individually by using border-left, border-right, border-top and border-bottom instead of border.)

Changing Text Alignment

<p style="text-align:ALIGNMENT;">Your Text Goes Here</p>

(Replacing ALIGNMENT with either left, right, or center)

Changing Paragraph Width

<p style="width:SIZEpx;">Your Text Goes Here</p>

(Replacing SIZE with the number of pixels you want the text to stay on one line before wrapping to the next line. Maximum comfortable width on Wajas forums is 400px, assuming you have not set the padding.)

Centering Paragraphs

<p style="margin:auto;">Your Text Goes Here'</p>

(If you add this in, it will automatically center your paragraph. So, if you have a paragraph which is 300px wide on the forums and add this to the code it will automatically appear in the middle of the post rather than off to the left.)

Changing Text Font

<a style="font-family:FONTNAME;">Your Text Goes Here</a> <p style="font-family:FONTNAME;">Your Text Goes Here</p>

(Replacing FONTNAME with the name of the font which you want to use, such as verdana or times. NOTE: Only basic, web-friendly fonts will work.)

Changing Text Size

<a style="font-size:SIZEpx;">Your Text Goes Here</a> <p style="font-size:SIZEpx;">Your Text Goes Here</p>

(Replacing SIZE with a numerical value for the text in pixels, such as 15 or 30. You can also use pt instead of px. If you use pt, the font sizes work like those in word documents (so 10pt, 14pt, 32pt etc) and can be easier to work with than pixels.)

Combining Codes

To combine codes, you simply need to combine the parts within the quotation marks of the style code (except for bold and italics, which need to be placed directly around the text you want to be bold or italicized).

For an example, we want to make text that is pure red, in the verdana font, and bold. To do this, we will take the individual parts

font-family:verdana;

and

color:#FF0000;

and put them side by side inside the quotation marks of the style code. To make the text bold, we will put the open bold tag <b> right before what we want our text to say and the close bold tag </b> right after our text but before the </a>

This gives us: <a style="font-family:verdana;color:#FF0000;"> <b>Your Text Goes Here</b> </a> <p style="font-family:verdana;color:#FF0000;"> <b>Your Text Goes Here</b> </p>

Please note that if you are changing the alignment of the text as well as other attributes of the text, you will need to use the <p style=""> </p> code rather than the <a style=""> </a> code, as using the latter will cause the alignment to not show up. If you also wanted to center the text above, you would need to change the code to the following:

<p style="text-align:center;font-family:verdana;color:#FF0000;"><b>Your Text Goes Here</b></p>

Links and Images

How to post a link

<a href="Link URL Goes Here">What you want the link to say goes here</a>

How to post an image

<img src="Image URL Goes Here">

How to resize an image

<img src="Image URL Goes Here" width="FIRSTNUMBER" height="SECONDNUMBER">

(replacing FIRSTNUMBER with a numerical value for the width in pixels, and SECOND NUMBER with a numerical value for the height in pixels)

You do not need to put both width and height in. If you enter the desired width and do not include height at all, the image will automatically resize the image and the height will be changed to maintain the proportions of the image.

How to add mouse-over text to an image

<img src="Image URL Goes Here" title="Mouseover text goes here">

Mouse-over text will appear when someone viewing your image hovers their cursor over it.

How to post an image that links to a page

<a href="Link URL Goes Here"><img src="Image URL Goes Here"></a>

The "Link URL" is the address of the page you want the link to go to. The "Image URL" is the location of the image.

Where to find the Link URL

It will be in the address bar of your browser when you're on the page you want the link to go to.

Where to find the image URL

For Firefox, right click on the image and select "copy image location". For Internet Explorer, right click on the image and select "properties". Copy the address listed after "Address(URL)". For Google Chrome, right click and select "copy image URL".

If you paste the Image URL in the address bar of your browser and press enter, you should come up with a page featuring nothing but the image in question.

Remember! If you want to post an image off the Custom Demo, you must save the finished image to your computer and then upload it to an image hosting site. Linking to the custom demo image directly will cause it to show up incorrectly to other users because that image isn't stored on the server and ceases to exist when you leave the Custom Demo page. You must save your completed design to your computer, upload it to an image hosting site, and use the Image URL provided there.

Tips and Troubleshooting

• Only edit the text where indicated. Everything else is code and needs to be copied exactly. Do not remove the quotation marks in codes where they are present, as they are part of the code.

• Make sure you close your codes correctly. If you accidentally leave a less than sign (<) open without a greater than sign (>) to close it, the site will eat everything in your post after the less than sign appeared. It's always a good idea to copy your post into a wordpad document so that if the site times out or there's a mistake in your html, you won't lose your post.

• Remember, if you're posting an image from your computer, you must upload it to an image hosting site first. Examples of some free image hosting sites are photobucket.com and tinypic.com. You'll want to copy the image's address given to you by the site (it's usually the "direct link" address).

• You also cannot post images directly from the Custom Demo without first saving them to your computer and uploading them to an image hosting site. Linking to the custom demo image directly will cause it to show up incorrectly to other users because that image isn't stored on the server. You must save your completed design to your computer, upload it to an image hosting site, and use the Image URL provided there.

• Many image hosting sites provide an HTML code for you to copy paste to make your image show up, but it isn't recommended that you just copy-paste this. More often than not it includes a code that makes it link back to their website, which is annoying and prevents you from linking the image to somewhere else. When people see that your image is clickable, they will expect it to take them to somewhere relevant (such as the waja's page or your cave), not back to the image hosting site.

• If an image is already stored on the Wajas.com server, feel free to link to it there. There's no need to use an image hosting site to upload a picture of a waja that already exists. Simply go to the waja's page and use the image URL of its picture. See the "Where to find the image URL" section above for more information on where to find the Image URL of images that are already uploaded to the internet.

• When posting on the forums, do not press the "Preview" button. This can cause HTML to mess up and not show up properly or at all.

• If something didn't work right, check and double check your HTML. Did you properly close your codes? Did you type them correctly in the first place (Did you typo a part, such as saying "a herf" instead of "a href", for example)? Did you make sure both URLs were correct, and each in the place they were supposed to go (image URL in the image URL spot and website address in the link URL spot)? If the code required a hex, number, or font name, did you make sure to enter a valid one?

• If you're still having trouble, feel free to post on the Help forum with your problem and other users will be happy to assist you.

• If you want to test out your HTML, you can use the Official Testing Thread. You can also create a temporary Cave Group and use its description to test your HTML.

• You must edit p styles into posts. If you enter p styles and then submit your post, they will disappear. Rather, submit your post, and then click on the edit button. You can then enter your p styles and submit them, and they will display. A styles do not need to be edited in and can be submitted when creating a post.

Areas HTML is Limited or Unusable

Currently, no HTML works in private messages, titles or names of wajas and groups, or in usernames of players. You can no longer use HTML in forum signatures or the titles of threads, though those who have not edited their signature or thread's title since this feature was removed may still have it so long as they do not edit it.

Cave descriptions and waja pages used to be much more highly customizable, but since the LM27 virus of 2007 they are now limited to more basic HTML.