HTML-Tags verwenden
Einfache HTML-Tags

Das einfachste HTML-Tag ist sicherlich <br>. Damit wird ein Zeilenumbruch im Text erzeugt. Wenn du z.B. das hier als Postkartentext eingibst:

Ich wünsche Dir:
Frohe Weihnachten
Einen guten Rutsch
Alles Gute zum Geburtstag

dann sieht es in der Postkarte so aus:

Ich wünsche Dir: Frohe Weihnachten Einen guten Rutsch Alles Gute zum Geburtstag

Alle Eingaben werden nämlich erstmal als Fließtext behandelt.

Wenn Du also die Zeilenumbrüche so haben möchtest, wie du es dir vorstellst, dann setz ein <br> an die Stellen, wo ein Zeilenumbruch sein soll:

Ich wünsche Dir:<br>
Frohe Weihnachten<br>
Einen guten Rutsch<br>
Alles Gute zum Geburtstag<br>

Dann gibt es das Pärchen <b> und </b>. Alles, was zwischen <b> am Anfang und </b> am Ende steht, wird fett gedruckt. Ein Beispiel:

Ich bin mir <b>ganz sicher</b>, daß ...

erscheint in der Karte dann so:

Ich bin mir ganz sicher, daß ...

Genauso geht's mit <i> und </i> für kursive Schrift:

Ich bin mir <i>ganz sicher</i>, daß ...

erscheint in der Karte dann so:

Ich bin mir ganz sicher, daß ...

Die Tags können natürlich auch kombiniert angewendet werden:
Ich bin mir <b><i>ganz sicher</i></b>, daß ...

erscheint in der Karte dann so:

Ich bin mir ganz sicher, daß ...

Etwas komplizierter gefällig?

Mit den Tags <ul> und </ul> sowie <li> und </li> kann man eine schöne Liste erzeugen:

Ich wünsche Dir:<br>
<ul>
<li>Frohe Weihnachten</li>
<li>Einen guten Rutsch</li>
<li>Alles Gute zum Geburtstag</li>
</ul>

erscheint in der Karte so:

Ich wünsche Dir:

  • Frohe Weihnachten
  • Einen guten Rutsch
  • Alles Gute zum Geburtstag

Überschriften werden mit den Tags <h1> bis <h6> gemacht. Auch diese Tags treten als Pärchen auf, also schön wieder zumachen am Ende mit </h1> bis </h6>!

Diese Eingabe:

<h6>Alles</h6>
<h5>Gute</h5>
<h4>zu</h4>
<h3>deinem</h3>
<h2>25.</h2>
<h1>Geburtstag!</h1>

würde im Text so aussehen:

Alles
Gute

zu

deinem

25.

Geburtstag!


Die Überschriften lassen sich auch zentrieren. Das wird so gemacht:
<h3 align=center>Frohe Ostern!</h3>

sieht im Kartentext dann so aus:

Frohe Ostern!


Schriftgröße und Farben

Beides wird über das Tag <font> gesteuert. Auch dieses Tag muß am Ende wieder geschlossen werden.

Ein <font color="red">rotes</font> Wort

sieht in der Ausgabe so aus:
Ein rotes Wort

Diese Farbnamen können auf diese Weise verwendet werden:

black, rot, green, blue, cyan, magenta, yellow, darkred, darkblue, darkgreen, darkcyan, darkmagenta, darkyellow, black, gray, darkgray...
Es gibt noch viel mehr Farbnamen, aber sie können hier nicht alle dargestellt werden.

Die Schriftgröße lasst sich mit 'size=' ebenfalls über das Font-Tag steuern:

Ein <font size="7">riesiges</font> Wort

wird auf der Karte so dargestellt:

Ein riesiges Wort

Die Angaben von size= können übrigens von 1 bis 7 gehen. Möglich sind auch Angaben wie 'size=+1' (bedeutet: 1 größer als das, was drumherum ist).

Was man lieber nicht tun sollte!

Natürlich waren das nur allerste Grundlagen der HTML - Gestaltung. Es gibt noch viel mehr Tags, teilweise auch sehr komplizierte. Wenn Du mehr wissen willst, solltest du mal bei SELFHTML reinschauen. Das ist sozusagen das online-Standardwerk zu diesem Thema und uneingeschränkt zu empfehlen.

Wenn du nicht sicher im Umgang mit HTML-Tags bist, solltest du allzu komplizierte Sachen vermeiden. Spätestens, wenn in der Vorschau das Textfenster plötzlich völlig leer bleibt, kannst du sicher sein, daß etwas mit deinen Tags nicht stimmt.
Versuche nicht, irgendwelche Skripte in die Eingabefelder zu kopieren, sie werden entfernt. Warum das so ist, kannst du bei den Hinweisen nachlesen.

Und noch ein Tip: Der Text wird aus dem Eingabeformular ohne Zeilenumbrüche an den Server übertragen. Wenn du die Umbrüche selbst gestalten möchtest, musst du das also mit <br> machen. Tags wie <pre> oder <listing> führen zu unerwarteten Ergebnissen!




[ Home ]  [ Adventskalender ]  [ Postkartenversand ]  [ Fotogalerie ] 
[ Gitarren-Tabulaturen ]  [ Programmieren ]  [ Designbeispiele ]  [ Heiter bis Wolkig ] 
Keine Navigationsbuttons? Hier klicken!