Tutorial: Systemvorstellung optisch ansprechender machen, ein kleiner HTML Leitfaden Einstellungen

[hamuchen]

Einleitung

Ihr fragt euch, wie ihr eure Systemvorstellung optisch ansprechender gestalten könnt? Dann seid ihr hier genau richtig. Denn dies solle ein kleiner Leitfaden dafür sein.

Da das Forum - wie fast jede Internetseite - aus HTML zusammengesetzt ist, wäre es gut, wenn ihr schon ein paar Vorkenntnisse in diese Richtung hast. Wobei das bisschen HTML dieser Formatierung nicht wirklich schwer zu lernen ist. Sogar Anfänger sollten damit zurecht kommen.

Die Vorbereitung

Es gibt ein paar grundlegende Dinge, die zu klären sind. Als erstes müsst ihr den Beitrag im richtigen Antwortmodus (Add Reply) und nicht mit der Schnellanwort (Fast Reply erstellen. Da müsst ihr dem Forum mitteilen, dass ihr euren Beitrag in HTML schreibt, dabei gibt es zwei Unterschiede.
Zunächst ist in jedem Beitrag HTML aus. Um dies einzuschalten, müsst ihr es folgendermaßen auswählen.



Der Unterschied zwischen "Raw" und "Auto" ist einzig und allein der, dass ihr beim Raw-Modus jeden Absatz einzeln kennzeichnen müsst. Leider spinnt der Auto-Modus manchmal, außerdem will ich mir nicht in mein html reinfuschen lassen, also benutze ich mal den Raw-Modus.

Die HTML-Befehle

Teil I: Grundlagen

Nun sind eigentlich schon alle Einstellungen vorgenommen und man kann anfangen mit HTML zu arbeiten. Dazu fangen wir mal einfach an.

Um einen neuen Absatz zu machen, gibt es folgenden Befehl:

QUELLTEXT

<br/>

Da ihr ja den Raw-Modus gewählt habt, müsst ihr das wirklich bei jedem kleinen Absatz am Ende der Zeile machen.

Um einen so schön weiß hinterlegten Text zu machen, schließt ihr den Text in folgende Bezeichner ein:

QUELLTEXT

<p>Hier kommt der Text rein</p>

Da HTML überzählige Leerzeichen einfach verschluckt, müsst ihr für mehrere Leerzeichen hintereinander diese Buchstabenfolge eingeben:

Dies waren die grundlegenden Befehle. Hiermit kann man schon mal ein wenig arbeiten, aber so richtig super wird das auch noch nicht. Da fehlt noch was. Und dazu kommen wir jetzt.

Teil II: Überschriften

Um schöne Überschriften zu gestalten, müsst ihr auch nur die Forensoftware richtig nutzen. Denn hier sind schon verschiedene Styles festgelegt.

QUELLTEXT

<h1>Überschrift 1</h1>

Überschrift 1

QUELLTEXT

<h2>Überschrift 2</h2>

Überschrift 2

QUELLTEXT

<h3>Überschrift 3</h3>

Überschrift 3

QUELLTEXT

<h4>Überschrift 4</h4>

Überschrift 4

QUELLTEXT

<h5>Überschrift 5</h5>

Überschrift 5

QUELLTEXT

<h6>Überschrift 6</h6>

Überschrift 6

Die ersten zwei Überschriften sind ganz nett, aber ich finde die Nummer 3 und 4 besonders Ansprechend. Deswegen nehme ich sie auch immer. Aber probiert ruhig weiter aus. Sonst sieht ja hier alles gleich aus und das ist ja auch langweilig.

Teil III: Eine Tabelle

Um jetzt noch eine Tabelle zu erstellen, sollten schon ein paar mehr Kenntnisse vorhanden sein. Ich benutze immer folgende Tabelle und erweitere sie immer um den unteren Part. Hier sollte schon ein bisschen mehr Ahnung vorhanden sein, darum spare ich mir mal die Erklärungen!

QUELLTEXT

<table width="90%" boarder="0"> <tr> <th>Überschrift 1. Spalte</th> <th>Überschrift 2. Spalte</th> </tr> <tr> <td><b>Text</b></td> <td>Text</td> </tr> <tr> <td><b>Text</b></td> <td>Text</td> </tr> </table>

Dabei kommt folgendes raus:

Überschrift 1. Spalte	Überschrift 2. Spalte
Text	Text
Text	Text

Teil IV: Bildergalerie

Um eine Bildergalerie zu erstellen hab ich mir folgenden Maske gebastelt:

QUELLTEXT

    <table width="90%" boarder="0">       <tr>         <td width="30%">Bild 1</td>         <td width="30%">Bild 2</td>         <td width="30%">Bild 3</td>       </tr>       <tr>         <td><i>Kommentar Bild 1</i></td>         <td><i>Kommentar Bild 2</i></td>         <td><i>Kommentar Bild 3</i></td>       </tr>       <tr>         <td>Bild 4</td>         <td>Bild 5</td>         <td>Bild 6</td>       </tr>       <tr>         <td><i>Kommentar Bild 4</i></td>         <td><i>Kommentar Bild 5</i></td>         <td><i>Kommentar Bild 6</i></td>       </tr>     </table>

Bild 1	Bild 2	Bild 3
Kommentar Bild 1	Kommentar Bild 2	Kommentar Bild 3
Bild 4	Bild 5	Bild 6
Kommentar Bild 4	Kommentar Bild 5	Kommentar Bild 6

Schlussworte

Für weitere Tipps, was ich hier noch einfügen sollte, könnt ihr mir einfach eine schicken!

Ihr könnt übrigens auch weiterhin den normalen Forencode benutzen, wenn ihr HTML eingeschaltet habt.

Ich hoffe ich konnte euch hiermit ein wenig weiterhelfen und wünsche weiterhin viel Spaß im Forum!

MfG
hamuchen