A guide to the pseudo HTML on Elftown

The limited "pseudo HTML" on Elftown allows you to format your text, insert images in your text, and to link to postings, members, wiki-pages and other web pages. The pseudo HTML works just about everywhere - in messages, postings, your description, your diary, and of course on the wiki.

For a very compact description of the pseudo HTML, see <URI:pseudo_html.html>



Table of contents

[#Introduction]
[#Formatting text]
[#Making the text larger]
[#Using the PRE, SUB and SUP tags]
[#Centering text]
[#Aligning text to the right]
[#Justifying text]
[#Making the text Bold, Italic, Underlined, Etc.]
[#Using the Hide tag]
[#Using the Box tag]
[#Creating tables]
[#Creating wiki polls]
[#Inserting other elements]
[#Inserting an image]
[#Inserting a rating box]
[#Inserting a sound]
[#Inserting a horizontal ruler]
[#Resizing images]
[#Rotating images]
[#Aligning images]
[#Flipping images]
[#Creating links]
[#Linking to a web page]
[#Linking to an Elftown wiki-page]
[#Linking to an Elftown wiki-page using an image]
[#Linking to a Wikipedia article]
[#Linking to an Elftown member]
[#Linking to a posting]
[#Linking to a poll]
[#Linking to a diary entry]
[#Linking to a guestbookmessage]
[#Linking to a private forum]
[#Linking to a public forum]
[#Linking to the news on Mainstreet]
[#Linking to any page on Elftown]
[#Linking to a private message]
[#Linking to parts of your house or wiki]
[#Linking to pages on Elfwood]
[#Linking to pages on Facebook]
[#Linking to pages on Myspace]
[#Writing tags that are shown]
[#Miscellaneous notes]
[#Paragraphs and line breaks]
[#HTML tags that don't work]
[#When the pseudo HTML doesn't do what you want]
[#Other useful pages]

Note: Click the link and you will be taken to that part of the wiki.

Introduction

What is HTML?

HTML stands for HyperText Markup Language, and is a set of "codes" - tags - that can be put in the text to indicate how the text should be displayed (bold, italics etc), that the text should be a link to somewhere, or that there should be an object (for example an image) inlined in the text.

Some tags are "single", like the <hr> tag that indicates that a horizontal line should be inserted in the text. Other tags come in "pairs", a start tag and an ending tag, that are put around the text that is to be formatted. Examples of paired tags are the <b> ... </b> and <i> ... </i> tags that indicate bold and italics in the text.

What is "Elftown’s pseudo HTML"?

The "pseudo HTML" on Elftown is a limited set of HTML tags and some Elftown specific "codes" that work in postings, on the wiki, in your description etc. The available tags and "codes" are described below.

Formatting text

You can format text with a limited number of "ordinary" HTML tags. All HTML tags aren't allowed and thus don't work, because that might make some pages look downright awful.



Making the text larger

You can make the text larger by using the header tags "h1" and "h2" (other header tags don't work):

<h1> huge header "h1" ending with </h1>
<h2> large header "h2" ending with </h2>
<h3> big header "h3" ending with </h3>

h1 looks like this

h2 looks like this

h3 looks like this

Using the PRE tag:

The PRE tag allows you to write pre-formatted text, using a fixed width font and with all spaces displayed (extra spaces are normally removed):

<pre> pre-formatting tag "pre" ending with </pre>

An example:

    This text is pre-
            formatted

   



Using the SUP tag:

The SUP tag is used to create text that is superscripted (raised):

^{sup tag "sup" ending with}

^{sup text looks like this} next to normal text


Using the SUB tag:

The SUB tag is used to create text that is subscripted (lowered):

_{sub tag "sub" ending with}

_{sub text looks like this} next to normal text




Centering text

You can centre the text using the "center" tag like this:

<center>Text to be centered </center>

An example:
Centered text



Aligning text to the right

You can align the text by using the "right" tag like this:

<right>Text to be aligned right</right>

An example:




Justifying text
Use the <justify>-tag. example:
<box200><justify>The justify tag makes both the left and the right hand columns of your text have straight, neat edges. But be warned: it might look silly if you have very thin columns, and/or use long words. How would you make columns of varying width? By sticking the text and the justify tag within a box tag. columns made with box100 and the justify tag will look silly, though. You can of course use the justify tag without the box tag.</justify></box200>






Making the text Bold, Italic, Underlined, Etc.

You can make your text bold, italic, underlined or crossed out by using the "b","i", "u" and "s" tags:

<b> bold tag "b" ending with </b>
<i> italics tag "i" ending with </i>
<u> underlined tag "u" ending with </u>
<s> strikethrough tag "s" ending with </s>
<HL> HighLighted tag "HL" ending with </HL>
<BO> black-out tag "BO" ending with </BO>
Bold text looks like this
Italic text looks like this
Underlined text looks like this
Crossed out text looks like this
Highlighted text looks like this
blacked-out text looks like this

Bold, italics, underlined, strikethrough, centred and pre-formatting can be nestled, so that you get text that is both bold and italics while also being pre-formatted or centred. You can also nestle the italics tag with the header tags, to get headers in italics.

* Remember always to put the end tags on h1, h2, pre, center, b, u, i, s, HL and BO or all the tags of that type will stop working in your text! This is one of the most common mistakes!

Using the Hide tag

The Hide tag allows you to hide things (like text and images) on your page so that you have to click the resulting "show content" link to make the hidden things visible on the page.

<hide>This a hidden text! Nothing to see here.</hide>

The above tag results in this:


The "show content" disappears once you click it. You can have many hide tags on a page and you need to click them separately to unhide everything.

Using the Box tag

The Box tag allows you to divide texts into boxes, which can particularly come in handy in case you're making some sort of list for instance.

To create a box tag, you write:
box : "minimum width" (Depends on the browser what that is.)

You can choose between:
box50, box100, box150, box200, box250, box300, box400, box500 and box3500

Example:
<box200>This is a box</box200> <box200>This is a second box</box200>


The above will look like this:



Note: When you use the box tag on a wikipage, you will see some changes appear in how you can edit the wiki:
It has now become possible to either edit the wikipage as whole (Advanced edit), or edit the wikipage through boxedit (Edit per box).
When you press one of these edits, it is also possible to switch to the other edit option. This might be useful to see how each editing page will look like.
If however you made any changes on the editing page, don't forget to submit the changes first. If you switch before you submitted the changes, the changes will be lost.

Creating tables

The table tag allows you to create columns, when you write:
<table>Column 1|Column 2 --- First data | second data</table>

It will look like this:

Column 1	Column 2
First data	second data

You write | (pipe) for a new column and --- (3 minus) for a new row.

Creating Wiki polls

There are three different types of polls that you can make on wiki-pages,
<wikipoll>, <voting> & <multivoting>

To make the poll, you simply edit the wiki and insert one of the above tags, then submit the changes. On the edited wiki, you should now see a box containing a poll - now you just need to insert your question and the answers you want people to be able to pick into the relevant boxes.

Wikipolls create polls like those in your member area - they allow people to vote for only one option, and don't show who voted for what.

Voting polls allow people to vote for only one option, but shows who voted for each option

Multivoting polls allow people to vote for multiple options in your poll, and also shows who voted for what option.

Inserting other elements

There are four "elements" you can insert into your text: images, rating boxes sounds or videos, and horizontal rulers.



Inserting an image

To insert an image into your text you add the Elftown -specific "IMG" tag at the point in your text where you want the image: <IMG:(URL to the image)>

An example:
<IMG:http://elftown.eu/img/new/elftownminibutton.gif>

The IMG tag above results in this:


The image doesn't have to be in Elftown, but it must be on the internet. You cannot use an image directly from your own computer.




Inserting a rating box

Rating boxes allow people to rate things on a scale of 1-5. There are two sizes of rating box,

<rate> will make a box like this:

<srate> will make a smaller box like this:

Note: <rate> and <srate> will not work in wiki-comments.




Inserting a sound element

You can insert a sound file onto a wikipage with the SOUND tag, <SOUND:URL.ext>

For example
<sound:stuff/Separador.mp3>
The file will start playing automatically (see Sound Example).
You can also use the sound tag in other areas of Elftown and for other types of multimedia (video files etc) but the tag will create a button instead of inlining the file. clicking the button will open the file in a new window or tab of your browser like clicking a normal URL would.





Inserting a horizontal ruler

Horizontal rulers (lines) are inserted using the "hr" tag:

<hr>


There is a horizontal ruler, below this text, if you want to see what one looks like.

---

There is no closing tag for the "hr" tag or the "IMG" tag.

Resizing images

If you want to inline images from Elftown you can change their size by writing one or two numbers before the ':' like this:
<IMG50:img/new/elftownminibutton.gif> looks like  
(keeps the current ratio between width and height, but new width will be 50px)
<IMG*50:img/new/elftownminibutton.gif> looks like  
(keeps the current ratio between width and height, but new height will be 50px)


OR to change the height/width ratio:

<IMG25*50:img/new/elftownminibutton.gif> looks like (image re-sized to 25*50)

Note: If the image isn't on Elftown, it will be resized, but not by Elftown but from the viewer's browser so viewer have to download the maybe huge image, instead of a small thumbnail image.

Rotating images

If you want to rotate an image (That image has to be on Elftown!), you can add an 'l' (left), 'r' (right) or 'a' (around) after 'img':

<imgl:img/new/elftownminibutton.gif> looks like

<imgr:img/new/elftownminibutton.gif> looks like

<imga:img/new/elftownminibutton.gif> looks like

Aligning images

You can align images by using LIMG and RIMG instead of the normal IMG-tag.

No alignment
When you don't align an image, it looks like this. Notice how the text starts at the bottom of the image, and not on the top.


Left alignment using the LIMG tag
When you write <limg50:img/drawing/1_1176987475.jpg> and some text, it will look like this:

The image is aligned to the left, the text starts at the top of the image.

And goes on here...



Right alignment using the RIMG tag
When you write <rimg50:img/drawing/1_1176987475.jpg> and some text, it will look like this:

The image is aligned to the right and again the text starts at the top of the image.

Flipping Images

If your image is upside down or the wrong way round, you can change that:

TO make the image appear upside down:

<imgh50:img/drawing/1_1176987475.jpg> will flip the image along its horizontal axis (imagine a horizontal line running through the middle of the drawing - the picture will flip around that line). It will look like this:

To make the image appear mirrored:

<imgv50:img/drawing/1_1176987475.jpg> will flip the image along its vertical axis (imagine a vertical line running through the middle of the drawing - the picture will flip around that line). It will look like this:

Creating links

Links are very simple on Elftown. You don't use the <A HREF=...> construction that you may be familiar with from HTML. How you do the link depends on the type of link.



Linking to a web page

To make a link to a web page you just write the URL to the web page. Nothing more, nothing less.

http://www.Elftown.com



Linking to an Elftown wiki-page

To make a link to a page on the Elftown wiki, you write the page name followed by @wiki within square brackets. When written correctly, the page name without the brackets and @wiki will be displayed as the link in the resulting text.

An example:
[index@wiki]

The link looks like this:
index

(Advanced: Between "@wiki" and "]" you can add "edit", version number and/or #where in page (set with ) like this: [page@wikiedit88#hint] takes you to version 88 of "page" with an edit-form at the first <#hint> in it)



Linking to an Elftown wiki-page using an image

Instead of linking to a wiki as shown above, you can link to a wiki by using an image. You could for instance use the wikibanner of a wiki to link to that wiki. By clicking on the image, you will be taken to the wiki.

To make a hyperlinked image, you have to write the following:

<wikiimg:wikiname@wiki:image-url>

An example:
<wikiimg:Elftown@wiki:img/new/elftown_v2.gif>

The link looks like this:

When you click it, it will take you to the wiki Elftown.

You can also thumbnail the image, but not in the most regular way. You have to decide which height or width you want the image to have. Y represents the height, and X the width. Once you've decided what height/width you want you need to insert that in the end of the link like this:

<wikiimg:Elftown@wiki:img/new/elftownminibutton.gif?y=20>
The height will become 20 pixels, it will look like this:


The link again leads to Elftown.

or:

<wikiimg:Elftown@wiki:img/new/elftownminibutton.gif?x=20>
The Width will become 20 pixels, and it will look like this:


This link again leads to Elftown.

You can also change both the height and the width by adding this to the end of the image url:

<wikiimg:Elftown@wiki:img/new/elftownminibutton.gif?x=50&y=50>
The width and the height will both become 50 pixels, and it will look like this:



Note: the height and width don't have to have the same value, so you could specify that your image have a height of 20 pixels and a width of 40, and it would work fine.




Linking to a Wikipedia article

You can write [[Elftown]] to make a Wikipedia-link like this Elftown

If you want to write something different than the article name, you can write like [[Elftown|The best site in the world]] and it becomes: The best site in the world




Linking to an Elftown member

To link to an Elftown member you simply write the member's name within square brackets (no @wiki this time, or it will become a link to a wiki page...)

An example:
[Kajo] 

You can also write an @ and the member number in square brackets ([@174]) to link to a member, but it will automatically change to look like above.

Each member also has a personal url that can be found on the house of the member. If the member only uses English letters, the link will be:
elftown.eu/username
Otherwise the link will be:
elftown.eu/usernumber



Linking to a posting

A link to a posting is very similar to a link to a member; the posting number within square brackets:

[2]



Linking to a poll

You can link to a poll with a link that looks like this: <poll:(poll number)>

An example:
<poll:1>

You can find the poll number right beside the poll's title.



Linking to a diary entry

You can link to a diary entry by using this syntax <diary:entry number>, or <blog:entry number>

An example: <diary:1>, <blog:1>



Linking to a guestbookmessage

You can link to a guestbookmessage by using this syntax <gb:entry number>

An example: <gb:1>



Linking to a private forum

If you have created a private forum, you can provide a link with a password to the forum to allow people to join the forum without invitation. The link looks like this: <joinforum:(forum number):(password)>

An example:
<joinforum:64:play> (Wrong secret forum password to the forum number 64)



Linking to a public forum

Write <forum:forumnumber> where "forumnumber" is a number, for example 1 for the newbie forum, and you'll will get a link looking like <forum:Elftown, newbie questions>.



Linking to the news on mainstreet

You can link to the news by using this syntax <news:news number>
The number will appear as the news title.
An example: <news:1> will show as <news:News!>



Linking to any page on Elftown

To link to a page on Elftown you can use the pseudo HTML "URL" tag: <URL:(Elftown URL)>

An example:
<URL:help.html>

This is especially helpful if you want to link to pages that don't have any special tag. To list [Hedda]'s relations for example: <URL:list_relations.html?membernr=1>

Note: Do not write <URL:http://elftown.eu/list_relations.html?membernr=1>! That will work only for people who are logged in on elftown.lysator.liu.se, but Elftown is also accessable at elftron.lysator.liu.se for example. <URL:list_relations.html?membernr=1> will work for everyone, regardless of how they are logged into Elftown.

The "Elftown URL" is the same as the URL to the page but without "http://www.Elftown.com/".
Clicking on the link will open a new window.



Linking to a private message

You can link to a message with:
[messagenumber@]
The messagenumber you want to link to can be found on top of the specific message.
It will say: 'Letter number: #'.

Note: A link to a message will only work if you are the sender or receiver of the message, of course.



Linking to parts of your house/wiki

Write [#] on the bottom of your house/wiki and you will be taken back to the top of the page.
Example: [#]

You can also have links that will take you to a specific section on your house/wiki. Just like you see on this wiki.
The link you want to be clickable is to be written like this: [#sectionname]. The name you insert there can be anything you like, but best would be if it tells you where you will be taken if you click it.
The section you want to be taken to also needs a link. You write the link above that section like this:
<#sectionname>
The links will need the same name to be able to work.
If you afterwards look at the wiki, you will only see the clickable links. The links that you wrote in the sections are not seen.

Example: Click [#Linking to a private message] and you will be taken to the section above this one.


You can also write a link to a part of a wiki somewhere else. Thus you can link to a part of a wiki by writing a link on your house/wiki.
The clickable link doesn't just contain the sectionname now, but also has to direct you to the wiki. The link therefore should be written like this:
[wikiname@wiki#sectionname]
In the section of the wiki you want to be taken to you also write:
<#sectionname>

Example: Veterans#Council leads to the retired Councilmembers on Veterans.
On that wiki you can see that there was also a link made back to the Council. That was done by writing a clickable link on Veterans and <#council> in the retired section on Council.

Note: you can not link from somewhere else to a part of your house. You can only link from your house to another part of your house.
Note2: Do note use ' in the link, or it will not work. So don't has to become dont for it to work.



Linking to pages on Elfwood

You can link to Elfwood profiles with [@ew:profile name here], E.g.: [@ew:Thomas]




Linking to pages on Facebook


You can link to Facebook user profiles and Facebook groups using the following tags: [fb@profilenumberhere] (for profiles) and [fg@groupnumberhere] (for groups)
If you have set a username on facebook, then you can use your username instead to link to your profile, e.g: [@fb:heddahenrik].

Where can I find the profile and group numbers? In the url at the top of the page. If you go to your Facebook profile, the url should end with "ref=profile&id=a big long number here", just copy that number at the end, and use that.

The same applies to groups - the url at the top of the group's page should end with "gid=group ID number here&ref=ts" Just copy the group ID number and use that.
e.g. [@fb577212311] (Hedda's Profile) & [@fg2388633706] (a group for Elftowners)



Linking to pages on Myspace

You can link to MySpace accounts like [@my:profile name here], e.g.: [@my:Elfpack]



Writing tags that are shown

If you want to write a pseudo HTML tag that will be shown instead of interpreted as a tag, just like in the examples on this page, you put the string !uQt! somewhere in the tag. An example:

<!uQt!b> [help@!uQt!wiki] <!uQt!/b> 
will look like this:

<b> [help@wiki] </b> 

instead of like this:

help  

You can also use !uQt! within an !uQt!, to have the !uQt! in the tag shown, too...

You can also put text between <qt></qt> and it will not be treated as pseudo HTML. The standard way to inline code is to use <pre><qt>this[is]=your_code;</qt></pre>

Miscellaneous notes

Case sensitivity:

Tags can be written in both uppercase and lowercase, but the whole tag must be in the same "case". That means you can write <hr> as well as <HR>, but not <Hr> or <hR>.



Paragraphs and line breaks

As you may already have noted, you don't use the paragraph or line break HTML tags (<p> and <br>) on Elftown. Instead you just write your text as you would in a text editor, using the Enter key to make line breaks as usual.



HTML tags that dont work

Here is a list of some (but not all!) of the HTML tags that cannot be used: <h4> <h5> <marquee> <font color=red> <blink>



When the pseudo HTML doesn't do what you want

There are some common mistakes that will make your pseudo HTML stop working:

Start and end tags not paired. This will cause all the tags of that type to stop working. Go through your text and check that there's an ending tag for each starting tag (and a starting tag for each ending tag). This applies to the "b", "i", "h1", and "h2" tags.

Missing "@wiki" in a link to a wiki page. This will cause the link to appear within brackets and be interpreted as a link to a member. Add @wiki after the page name within the brackets.

Other useful pages

More information about how to use the Elftown Wiki can be found on the Wiki help page.

If you want to try out the tags, I suggest that you go to the Wiki playground [edit] 1574.

See also the other help pages and the Newbie forum!



Go or return to:
-The wiki-index
-Elftown - Technical Information index
-The help index