๐”‰๐”ฌ๐”ฏ๐”ช๐”ž๐”ฑt๐”ฆ๐”ซ๐”ค ๐”—๐”ฒ๐”ฑ๐”ฌ๐”ฏ๐”ฆ๐”ž๐”ฉ ๐”ฃor the f๐”ฌ๐”ฏ๐”ฒ๐”ช โ†’ l๐”ฆ๐”ซ๐”จ๐”ฐ, t๐”ž๐”Ÿ๐”ฉes, t๐”ข๐”ต๐”ฑs a๐”ซ๐”ก ๐”ชore

As some of you maybe already noticed, we have a new forum :joy:

However the new forum works very different than the old forumโ€ฆ in the new one we support different formats example given: HTML, BBCode, Markdown, Unicode,โ€ฆ

Therefore, I thought, Iโ€™m writing a tutorial, since there is unfortunately nowhere a official tutorial.

I will mainly focus on HTML, maybe also a little bit on Markdown, because this already spares paperworks.
To format you need โ€œtagsโ€

So that the forum knows, how to format something, you have to tell it the forum, this is usually done with so-called โ€œtagsโ€.
What does such a โ€œtagโ€ look like?

Well in Markdown is it different, but in HTML and BBcode the so-called โ€œtagsโ€ have to be always surrounded (encrypted).
In HTML you do this with the help of the keyboard signs <> and </>
in BBcode with [ ] and [/]

Example for โ€œboldโ€ text (bold text):
HTML: <b>sample text</b> โ†’ sampletext
BBcode: [b]sample text [/b] โ†’ sampletext
Markdown: **sample text** โ†’ sampletext

It should be noted, that the respective tags should always be written โ€œenclosingโ€.
Astonishing, uhh!

The <>-tag is opened before you write the words or the sentence and then directly closed with </> โ€ฆ
as an example for a bold (<b>) and at the same time italic (<i>) text:
It does not matter in what order this happes (so first <b> and then <i>, or first <i> and then <b> does not matter)

First we print the text in bold:

<b>sample text</b> โ†’ sample text

Around there comes the italic tag

<i><b>sample text</b></i> โ†’ sample text

โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“โ†“

<b><i>sample text</i></b> โ†’ correct

<b><i>sample text</b></i>โ†’ incorrect

So far so good, the rest should not be a problem anymore

Letโ€™s start

Headings

There are different kinds of headings

In HTML they are written by using <h1>, <h2>,<h3>, etc.
in Markdown you have to put some # at the beginning of the sentence.

<h1>example heading</h1>

Example heading

<h2>Example heading</h2>

Example heading

<h3>Example heading</h3>

Example heading

# Example heading

Example heading

## Example heading

Example heading

### Example heading

Example heading

alternatively by using Markdown

Example heading
===

Example heading

text formatting

Fracture- or handwriting

As you can see, you can also write here in fracture or in handwriting.
But this is a lot of work โ€ฆ the single letters are put together from unicode (at the end of this tutorial there will be an overview to Unicode).
Who (for whatever reason) wants to write a larger text in said writing, can do this by prescribing the whole text and use then โ€œsearch & replaceโ€ (it is still a lot work to do then).

<b>Example text</b> โ†’ Example text
**Example text** โ†’ Example text
__Example text__ โ†’ Example text
Short Cut
STRG+B = Example text

italic text

<i>Example text</i> โ†’ Example text
*Example text* โ†’ Example text
_Example text_ โ†’ Example text
Short Cut
STRG+i Example text

crossed out text

<s>Example text</s> โ†’ Example text
~~Example text~~ โ†’ Example text

Abbreviated text (with mouseover w/o abbreviation)

<abbr title=โ€œHypertext Markup Languageโ€>HTML</abbr> โ†’ <abbr title=โ€œHypertext Markup Languageโ€>HTML

code text, resp pre-formatted text

<code>Example text</code> โ†’ Example text
Example text โ†’ Example text
Short Gut
STRG+SHIFT+C Example text

larger text

<big>Example text</big> โ†’ Example text

smaller text

<small>Example text</small> โ†’ Example text

superscript text

E = MC<sup>2</sup> โ†’ E = MC2

subscript text

H<sub>2</sub>O โ†’ H2O

inserted text

Eg to emphasize something after an edit, what you have changed

<ins>Example text</ins> โ†’ Example text

deleted text

Eg to emphasize after an edit, what had been changed

<del>Example text</del> โ†’ Example text

Lists

There are unordered and ordered lists in HTML โ€“ the ones (<ul>) are marked with a symbol before it, the other (<ol>) with a number.

The lists can be arranged under structured (Lists in Lists), here an example of an unordered list with under structure

<ul>
<li>Example text 1
<ul>
<li>Under point 1</li>
<li>Under point 2</li>
</ul>

  • Example text 1
    • Under point 1
    • Under point 2

    or in Markdown โ€“ simply put a blank in front of he next point

    Example text 1
    * Under point 1
    * Under point 2
    

    Example text 1

    • Under point 1
    • Under point 2

    unordered list

    <ul>

    <li>Example text 1</li>

    <li>Example text 2</li>

    <li>Example text 3</li>

    </ul>

    • Example text 1
    • Example text 2
    • Example text 3

    or

    * Example text 1

    * Example text 2

    * Example text 3

    turns out

    • Example text 1

    • Example text 2

    • Example text 3

    ordered list

    <ol>
    <li>Example text 1</li>
    <li>Example text 2</li>
    <li>Example text 3</li>
    </ol>

    1. Example text 1
    2. Example text 2
    3. Example text 3

    or in Markdown:
    (here it does not matter which number is in front, the text will be equal which numbered)

    1. Example text 1
    1. Example text 2
    1. Example text 3

    turns out

    1. Example text 1
    2. Example text 2
    3. Example text 3

    In HTML you can also specify, from which point you like a numbering:

    <ol start=1000>

    <ol start=1000>
    <li>Example text 1</li>
    <li>Example text 2</li>
    <li>Example text 3</li>
    </ol>

    1. Example text 1
    2. Example text 2
    3. Example text 3
Tables

Tables are a little bit more complicated/ cumbersome, you should already know several tags
<table> โ†’ so the forum knows here starts a table
<th> โ†’ is practically the heading of the lines
<tr> โ†’ indicates that here a line starts
<td> โ†’ indicates, that here a cell starts
The more <th> or <td> are in a <tr>, the more columns has the table.

Example of a table with a heading row, 2 rows and 3 Columns

<table>
<tr>
<th> Column 1</th> <th>Column 2</th> <th> Column 3</th>
</tr>
<tr>
<td>Cell 1</td>``<td>Cell 2</td>``<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>``<td>Cell 5</td>``<td>Cell 6</td>
</tr>
</table>

Column 1 Column 2 Column 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

Markdown:

Here it does not matter how many โ€“ you insert, or if there are blanks before or after then| .

That | is by the way the sign, which one can inserted by clicking the ALT GR -key and the < -key on the keyboard (german keyboard at the bottom left ).

|**Column 1**|**Column 2**|**Column 3**|
| --- | --- | --- |
|Cell 1|Cell 2|Cell 3|
|Cell 4|Cell 5|Cell 6|

Column 1 Column 2 Column 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

Here you can also change the text alignment, this workes with
a colon in the 2nd row

|Left-aligned|Centered text|Right-aligned|

|:---|:---:|---:|

|Cell 1|Cell 2|Cell 3|

Left-aligned Centered text Right-aligned
Cell 1 Cell 2 Cell 3
miscellaneous

miscellaneous

Make text look like a keyboard key

<kbd>STRG</kbd> โ†’ STRG

^1234567890รŸยดโ†
TabQWERTZUIOPรœ+
CAPSASDFGHJKLร–ร„#โŽ
SHIFT<YXCVBNM,.-SHIFT
STRGโ–ALT Space ___ALT GRFNโ–คSTRG

Horizontal dividing line
<hr>
or with Markdown insert simply a โ€” in an empty line


Boxes
To insert a box, you have to put a > in front of the line
>Examplebox

Examplebox

It is possible to do this several times

Examplebox (with great effect :joy:)

Wordwrap

<br>

Pop-up boxes (to display spoiler or similar)

in HTML you use two tags
<details>to indicate, here starts such a box
<summary>to indicate, how the box should be named

pop-up boxText

by using Markdown you need just a single tag

[details="pop-up box"]

text

[/details]

pop-up box

text

Polls

Polls are also tied to the trust level a member has, that means not everyone can create one and I am not able to show you an example aufzeigen.

[poll type="regular"]

* Option 1

* Option 2

* Option 3

[/poll]

[poll type="regular"]
  • Option 1

  • Option 2

  • Option 3

[/ [poll ]
links and images

To post links and images you have to reach a specific trust level,unfortunately you arentโ€™t able to post from beginning.
You can reach this level automatically, participating on the forums and positive behaviour play a good part of it.

Everyone who reached not the matching trust level, is able to post links.
You have to post the links just in a CodeBox / preformatted text(see above under text formatting):

https://forums.funcom.com/
https://forums.funcom.com/

Images
<img> is our Image-Tag in HTML
however, this is written together with several attributes, which one should also know

src=""โ†’ this attribute indicates, from where the forum should get the image

alt="" โ†’ this attribute indicates, what should be there as text if the image, which should be uploaded, does not exist or is not available

height="" โ†’ this attribute indicates, in which height the images should be displayed

width="" โ†’ this attribute indicates which width the image should have

https://imgur.com/a/rCQlV9y here is a Conan Exils Logo, which I uploaded on imgur.
The official link from the offical webside, would be a little to long, to show you some examplesโ€ฆโ€ฆyou would quickly lose the overview.
It can also be every other images, it has simply be available via link.

<img src=โ€œhttps://imgur.cm/a/rCQlV9yโ€> โ†’ here would the image be displayed, in the present size,โ€ฆ if the image would not exist, nothing would stand there

<img src=โ€œhttps://imgur.com/a/rCQlV9yโ€ alt=โ€œlogoโ€> โ†’ here would be the images displayed, in the present size,โ€ฆ if the image would not exist, there would be the text โ€œlogoโ€ be displayed

โ€œlogoโ€

<img src=โ€œhttps://imgur.com/a/rCQlV9yโ€ alt=โ€œlogoโ€ height=โ€œ100โ€ width=โ€œ100โ€> โ†’ here would be the image displayed, in the size 100x100px,โ€ฆ if the images would not exist, the text โ€œlogoโ€ would be displayed

โ€œlogoโ€

or by using Markdown

[Conan Exiels logo](https://imgur.com/a/rCQlV9y)
Conan Exiels logo
[Conan Exiels logo](https://imgur.com/a/rCQlV9y)
Conan Exiels logo
what stands in the square bracket does not matter, this is practically the โ€œaltโ€-tag by HTML

Links

<a> is our linktag in HTML, this tag is given an attribute (href=""), so that it works.
Between <a> and </a> you have to write a text, which will appear there in a clickable form.

<a href=โ€œhttps://forums.funcom.com/โ€> Funcom Forum โ†’ Funcom Forum (this word would work as a clickable link and https://forums.funcom.com/ would pop up, when you click on it)

or with Markdown
[Funcom Forum](https://forums.funcom.com/)
Funcom Forum

Links with images

You can create of course a picture, in that way, when you click on it, a website will pop up.
Just replace the text that would normally be there with a hyperlink (<a>), with the image-tag (<img>).

<a href=โ€œhttps://forums.funcom.com/โ€><img src=โ€œhttps://imgur.com/a/rCQlV9yโ€ alt=โ€œlogoโ€></a>
โ€œlogoโ€

Now would there appear the Conan Exils Logo and when you click on the picture/logo you end up to be on: https://forums.funcom.com/

A small list of a few symbols / special characters:

ALT-Codes

What are ALT-codes?
That is a real simpel question: These are codes, that you insert with the help of the ALT-key, and then you can insert symbols in the text.
E.g.: You press down the ALT-key, then tap on the number pad e.g. 3, release the ALT- key and you get a heart โ†’ :heart: โ†’ Funcom turns some the the codes automatically into a emote โ†’ :heart:

Nummer Symbol
1 :slight_smile: :slight_smile:
2 :slight_smile: :slight_smile:
3 :heart: :heart:
4 :diamonds: :diamonds:
5 :clubs: :clubs:
6 :spades: :spades:
11 โ™‚
12 โ™€
13 โ™ช
14 โ™ซ
15 โ˜ผ
16 โ–บ
17 โ—„
30 โ–ฒ
31 โ–ผ
23 โ†จ
24 โ†‘
25 โ†“
26 โ†’
27 โ†
29 :left_right_arrow: :left_right_arrow:
176 โ–‘
177 โ–’
178 โ–“
Unicode

Also Unicode works, simply copy&paste the symbols with e.g.the following link:

https://en.wikipedia.org/wiki/Unicode
:monkey_face: :crown:โŒ˜โ– โœฒ โŽˆ ^ โŒƒ โ– โŽ‡ โŒฅ โ—† โ—‡ โœฆ โœง โ‡ง โ‡ช ๐Ÿ„ฐ :a: โ‡ช โ‡ซ โ‡ฌ โ‡ฎ โ‡ฏ :capital_abcd: :abcd: โ‡ญ :1234: :abc: :leftwards_arrow_with_hook: โ†ต โŽ โŒค โŽ† โ–ค โ˜ฐ ๐Œ† โŽ„ โ†น โ‡„ โ‡ค โ‡ฅ โ†ค โ†ฆ โŽ‹ โŒซ โŸต โŒฆ โŽ€ โŽš โŒง :arrow_upper_left: :arrow_lower_right: โ‡ค โ‡ฅ โค’ โค“ โ‡ฑ โ‡ฒ โ‡ž โ‡Ÿ โ–ณ โ–ฝ โ–ฒ โ–ผ โŽ— โŽ˜ โ†‘ โ†“ โ† โ†’ :arrow_backward: :arrow_forward: โ–ฒ โ–ผ โ— โ–ท โ–ณ โ–ฝ โ‡ฆ โ‡จ โ‡ง โ‡ฉ :arrow_left: :arrow_right: :arrow_up: :arrow_down: โŽ‰ โŽŠ โŽ™ โฐ :question: :grey_question: :information_source: ๐Ÿ›ˆ โ˜พ โ :email: :house: :house_with_garden: โŒ‚ :scissors: โœ„ โŽŒ โ†ถ โ†ท โŸฒ โŸณ โ†บ โ†ป :mag: :mag_right: :low_brightness: :high_brightness: :mute: :speaker: :sound: :loud_sound: ๐Ÿ•จ ๐Ÿ•ฉ ๐Ÿ•ช :black_medium_square: :play_or_pause_button: :previous_track_button: :next_track_button: :rewind: :fast_forward: :arrow_double_up: :arrow_double_down::world_map:๐Ÿ•ฑ:dark_sunglasses: :fire::underage:
๐„ž โ™ฉ โ™ช โ™ซ โ™ฌ โ™ญ โ™ฏ โ™ฎ
๐Ÿ—ธ๐Ÿ—น๐Ÿ—ด๐Ÿ—ต๐Ÿ—ณ๐Ÿ—ช๐Ÿ—ฃ๐Ÿ—š๐Ÿ—›๐Ÿ—‘๐Ÿ–ฐ๐Ÿ•

Fracturewriter

๐”„ ๐”… โ„ญ ๐”‡ ๐”ˆ ๐”‰ ๐”Š โ„Œ โ„‘ ๐” ๐”Ž ๐” ๐” ๐”‘ ๐”’ ๐”“ ๐”” โ„œ ๐”– ๐”— ๐”˜ ๐”™ ๐”š ๐”› ๐”œ โ„จ
๐”ž ๐”Ÿ ๐”  ๐”ก ๐”ข ๐”ฃ ๐”ค ๐”ฅ ๐”ฆ ๐”ง ๐”จ ๐”ฉ ๐”ช ๐”ซ ๐”ฌ ๐”ญ ๐”ฎ ๐”ฏ ๐”ฐ ๐”ฑ ๐”ฒ ๐”ณ ๐”ด ๐”ต ๐”ถ ๐”ท
๐•ฌ ๐•ญ ๐•ฎ ๐•ฏ ๐•ฐ ๐•ฑ ๐•ฒ ๐•ณ ๐•ด ๐•ต ๐•ถ ๐•ท ๐•ธ ๐•น ๐•บ ๐•ป ๐•ผ ๐•ฝ ๐•พ ๐•ฟ ๐–€ ๐– ๐–‚ ๐–ƒ ๐–„ ๐–…
๐–† ๐–‡ ๐–ˆ ๐–‰ ๐–Š ๐–‹ ๐–Œ ๐– ๐–Ž ๐– ๐– ๐–‘ ๐–’ ๐–“ ๐–” ๐–• ๐–– ๐–— ๐–˜ ๐–™ ๐–š ๐–› ๐–œ ๐–ž ๐–Ÿ

Script or handwriting

๐’œ โ„ฌ ๐’ž ๐’Ÿ โ„ฐ โ„ฑ ๐’ข โ„‹ โ„ ๐’ฅ ๐’ฆ โ„’ โ„ณ ๐’ฉ ๐’ช ๐’ซ ๐’ฌ โ„› ๐’ฎ ๐’ฏ ๐’ฐ ๐’ฑ ๐’ฒ ๐’ณ ๐’ด ๐’ต
๐’ถ ๐’ท ๐’ธ ๐’น โ„ฏ ๐’ป โ„Š ๐’ฝ ๐’พ ๐’ฟ ๐“€ ๐“ ๐“‚ ๐“ƒ โ„ด ๐“… ๐“† ๐“‡ ๐“ˆ ๐“‰ ๐“Š ๐“‹ ๐“Œ ๐“ ๐“Ž ๐“

Some of the Unicode symbols are used on the forum as emoji.

HTML-special characters
Code Zeichen
&nbsp; (erzwungenes Leerzeichen)
&larr; โ†
&bdquo; โ€ž
&ldquo; โ€œ
&laquo; ยซ
&raquo; ยป
&uarr; โ†‘
&rarr; โ†’
&darr; โ†“
&harr; :left_right_arrow:
&crarr; โ†ต
&lArr; โ‡
&uArr; โ‡‘
&rArr; โ‡’
&dArr; โ‡“
&hArr; โ‡”
&copy; ยฉ
&reg; ยฎ
&plusmn; ยฑ
&ne; โ‰ 
&asymp; โ‰ˆ
&cong; โ‰…
&le; โ‰ค
&ge; โ‰ฅ
&micro; ยต
&para; ยถ
&laquo; ยซ
&raquo; ยป
&frac14; ยผ
&frac12; ยฝ
&frac34; ยพ
&times; ร—
&divide; รท
&infin; โˆž
&permil; โ€ฐ
&Oshlash; ร˜
&alpha; ฮฑ
&beta; ฮฒ
&Delta; ฮ”
&delta; ฮด
&Omega; ฮฉ
&omega; ฯ‰

[top]

1 Like