Person Roxanne
Person Cassandra

HTML für Foren

Auf dieser Seite haben wir euch einige Html-Codes für die Foren zur Verfügung gestellt. Mit diesen könnt ihr ganz einfach eure Gesuche oder sonstige Forenbeiträge wunderschön gestalten. Alles was ihr dafür tun müsst ist den Code zu kopieren - eventuell in einem Textprogramm zu überabeiten und eurem Geschmack anzupassen (z.B. Farben wechseln durch Hexcodes) - und in eurer Forenbeitrag einzufügen.
Aber Achtung: Davor müsst ihr auf folgendes Symbol (den HTML Button) im Texteditor klicken, woraufhin sich ein kleines Fenster öffnet.

Austesten und umändern kann man die Codes hier im TryIt-Editor.


htmltutorial.png
Bildschirmfoto_2016-07-01_um_010528.png


Tabellen

Tabelle (2 Spalten & 2 Zeilen) 

<table border="0"><tbody>
<tr>
<td>1. Zeile, 1. Spalte</td>
<td>1. Zeile, 2. Spalte</td>
</tr>
<tr>
<td>2. Zeile, 1. Spalte</td>
<td>2. Zeile, 2. Spalte</td>
</tr>
</tbody></table>
<p style="text-align: center;">
<div></div> 

Beispiel mit table border= "1"  
 

1. Zeile, 1. Spalte 1. Zeile, 2. Spalte
2. Zeile, 1. Spalte 2. Zeile, 2. Spalte 


Stellt man den border von 0 auf 1 sieht 
man im Endergebnis einen Rahmen. 
lässt man es unverändert auf 0 dann
hat man keinen Rahmen bzw. einen
unsichtbaren.



Allgemeines

Zentrieren
 <center> Dein Text </center>


Cardinalschrift
<h1> Text </h1>

Bad Script
<h2> Text </h2>

Moo-Moo Schrift
<h3>Text</h3>


Trennlinie
<hr>

Spoilerwarnugnen
[funktioniert ohne Html Button; nur ohne Absätze im Text]
#SPOILER# Dein versteckter Text #ENDSPOILER#
[Beispiel unten bei Vorlagen]

Ein Beitrag im Briefdesign
Im Editor auf den Zitatbutton klicken und drauflosschreiben. Sobald man
auf Vorschau klickt sieht man dann wie es aussehen würde.
[Beispiel unten bei Vorlagen]

Automatisches Verlinken
[funktioniert ohne Html Button]
@Username



Schriftarten

Im Laufe der Zeit haben wir viele verschiedene Schriften installiert. Die <h1-h3> 
Möglichkeiten sind dabei quasi nur Überschriften bzw. "Abkürzungen".


<span style="font-family: 'Schriftart';">TEXT</span>

Anstelle von Schriftart fügt ihr einfach den Namen der
folgenden Schriften ein, genau so wie sie aufgelistet sind. Je nachdem
welche Schrift verwendet wird, müsstet ihr dann die Schriftgröße anpassen:



Sacramento
Homemade Apple
Raleway
Cinzel
Swanky and Moo Moo
Bad Script
Old Typewriter
Cardinal

 

Div.Boxen

Die Sachen, die ihr in den Codes verändern könnt werde ich euch markieren.
Dazu gehören meistens immer die Hintergrund- und Rahmenfarbe. Diese könnt ihr mit einfachen
Hexcodes austauschen.
Die Schriftfarbe müsst ihr im Nachhinein der Hintergrundfarbe selbst anpassen.



<div style="border: 3px solid #f5a9a9; padding: 15px;">
DEIN TEXT
</div>

<div style="border: 3px dotted #f5a9a9; padding: 15px;">
DEIN TEXT
</div>

<div style="border: 3px dashed #f5a9a9; padding: 15px;">
DEIN TEXT
</div>

<div style="padding: 20px; border: 10px double #FFFFFF;">
DEIN TEXT
</div>



<div style="background-color: #f5a9a9; padding: 10px;">
DEIN TEXT
</div>
 

<div style="border: 3px solid #f5a9a9; padding: 15px; background: #FFFFFF;">
DEIN TEXT
</div> 

<div style="background: #D3D3D3; border: 3px dotted #808080; padding: 15px;">
DEIN TEXT
</div>

<div style="background-color: #f5a9a9; padding: 20px; border: 10px double #FFFFFF;">
DEIN TEXT
</div>







Scrollboxen


Der Code:

<div class="notespaper">
<div style="background: #f5a9a9; border: 1px solid #FFFFFF; text-align: center;">
DEIN TEXT
</div></div>


_____

Wenn ihr den Code kopiert und einfügt und anschließend in dem Kasten schreibt, dann wird sich der Kasten im Editor automatisch verlängern. Davon nicht beirren lassen, wenn ich es dann abschickt oder speichert dann wird der Kasten eine scrollbare Box sein.

Die Farbe vom Hintergrund und Randfarbe könnt ihr jederzeit selbst ändern.












 


Der Code:

<div class="meine2Class">
<div style="background-color: #90ca9f; text-align:center; padding:5px; border:8px double #1E4629;">
DEIN TEXT
</div></div>

_____

Wenn ihr den Code kopiert und einfügt und anschließend in dem Kasten schreibt, dann wird sich der Kasten im Editor automatisch verlängern. Davon nicht beirren lassen, wenn ich es dann abschickt oder speichert dann wird der Kasten eine scrollbare Box sein und Breite und Länge werden sich automatisch anpassen.


















Der Code

<div class="meineAClass">
<div style="background: #808080; border: 3px solid #D3D3D3; padding: 5px; text-align: center;">
DEIN TEXT

</div></div>

_____

Wenn ihr den Code kopiert und einfügt und anschließend in dem Kasten schreibt, dann wird sich der Kasten im Editor automatisch verlängern. Davon nicht beirren lassen, wenn ich es dann abschickt oder speichert dann wird der Kasten eine scrollbare Box sein und Breite und Länge werden sich automatisch anpassen.



























Der Code

<div class="akte"><div style="background: #7ab6dbpadding:20px; text-align: center;">
DEIN TEXT

</div></div>

_____

Wenn ihr den Code kopiert und einfügt und anschließend in dem Kasten schreibt, dann wird sich der Kasten im Editor automatisch verlängern. Davon nicht beirren lassen, wenn ich es dann abschickt oder speichert dann wird der Kasten eine scrollbare Box sein und Breite und Länge werden sich automatisch anpassen.
































Vorlagen

Postfach WhatsApp-Code


Bildschirmfoto_2018-03-09_um_211635.png Weniger Details 
(Einfach)

CODE
Bildschirmfoto_2018-03-10_um_005337.png Mehr Details
(Fortgeschritten)

CODE
Bildschirmfoto_2018-03-09_um_212412.png Gruppenchat
(Fortgeschritten)

CODE
Bildschirmfoto_2018-03-10_um_015021.png

WA-Basic

CODE





Medien & Netzwerke

Roxy Powergir1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
     CODE     





Spoileralert
spoilerallerrttt.png


Briefdesign

Bildschirmfoto_2017-08-30_um_211543.png