Texte Formatieren in HTML
Texte formatieren in HTML
Heute erkläre ich Ihnen, wie man in HTML Texte formatieren kann. Ich werde bewußt noch nicht auf CSS eingehen. CSS möchte ich Ihnen später in einer anderen Rubrik näher erklären. Ich werde Ihnen die veraltete Standardversion näherbringen. Das sind absolute Basics, die jeder HTML Programmierer zumindest kennen sollte. Ich möchte dies aber Schritt für Schritt machen, um niemanden zu verwirren.
Beginnen wir mit den üblichen Textformatierungen:
Fettdruck mit dem bold-Tag:
Um einen Fettdruck zu erzeugen, können Sie die <b>-Tags verwenden <small>(b ist die Abkürzung für bold: Fettdruck)</small>
Beispielcode:
<pre><html>
<body>
In diesem Text <b>wird dieser Bereich fettgedruckt</b>
</body>
</html></pre>
In dem Beispielcode wird der Text zwischen den b-Tags fettgedruckt angezeigt.
Achten Sie darauf, daß es einen Anfangstag gibt und ein Endtag. In das Endtag muss
zwingenderweise der Schrägstrich. Das zeigt dem Browser, daß der fettgedruckte Bereich zu Ende ist.
Experimentieren Sie ein wenig mit den Tags.
Unterstrichener Text mit dem underlined-Tag:
Als nächstes möchten wir den Text unterstreichen.
Beispielcode:
<pre><html>
<body>
In diesem Text <u>wird dieser Bereich unterstrichen</u>
</body>
</html></pre>
Um einen Bereich zu unterstreichen können Sie das u-Tag (u für underlined) verwenden.
Schrägschrift mit dem itallic-Tag:
Nun möchten wir eine Schrägschrift (auch als itallic bekannt) zum Einsatz bringen:
Beispielcode:
<pre><html>
<body>
In diesem Text <i>ist dieser Bereich in einer Schrägschrift</i>
</body>
</html></pre>
Mit den i-Tags können Sie einen Text in eine Schrägschrift setzen.
Schriftgröße, Schriftart und Schriftfarbe mit dem Font-Tag:
Um die Schriftgröße, Schriftart oder Schriftfarbe eines Textes zu ändern müssen wir das font-Element
verwenden.
Um bspw. die Schriftgröße zu ändern, können Sie folgenden Code verwenden:
Beispielcode:
<pre><html>
<body>
In diesem Text <font size="9">ist dieser Bereich groß geschrieben</font>
</body>
</html></pre>
Um bspw. die Schriftfarbe zu ändern, können Sie folgenden Code verwenden:
Beispielcode:
<pre><html>
<body>
In diesem Text <font color="red">ist dieser Bereich rot geschrieben</font>
</body>
</html></pre>
Zu den Farben wird es ein weiteres Tutorial geben. Die Farben sollte man prinzipiell in einem hexadezimal Code angeben, da dieser Code von allen Browsern korrekt interpretiert wird. Das würde nun allerdings den Rahmen sprengen.
Um den Text in einer anderen Schriftart darzustellen, können Sie folgenden Code verwenden:
Beispielcode:
<pre><html>
<body>
In diesem Text <font face="arial, times new roman">ist dieser Bereich in der Schriftart Arial, oder Times New Roman</font>
</body>
</html></pre>
Sie müssen mit den Schriftarten vorsichtig sein, da nur diese angezeigt werden, die auf dem Rechner des Besuchers installiert sind. Deshalb ist es sinnvoll, mehrere Standardschriftarten der Reihe nach (mit Kommas getrennt) dem Browser im font face anzubieten. Der Browser checkt die Schriftarten der Reihe nach. Die erste Schriftart, die auf dem Zielrechner installiert ist, wird dann angezeigt.
Selbstverständlich können Sie alles miteinander kombinieren:
Beispielcode:
<pre><html>
<body>
In diesem Text <font size="2" color="blue" face="arial, times new roman">ist dieser Bereich wild formatiert</font>
</body>
</html></pre>
Textabsätze: zentriert, rechtsbündig, linksbündig, blocksatz mit dem align-Tag:
Um einen Text zu zentrieren können Sie das align-Element in einem p-Tag (Paragraph) verwenden.
Beispielcode:
<pre><html>
<body>
<p align="left">Dieser Text wurde nach links gesetzt.</p>
<p align="center">Dieser Text wurde zentriert.</p>
<p align="right">Dieser Text wurde nach rechts gesetzt.</p>
</body>
</html></pre>
Text vergrößern mit dem big-Tag:
Um einen Textbereich einfach nur größer als den umliegenden Text zu machen können Sie das big-Tag verwenden:
Beispielcode:
<pre><html>
<body>
<big>Dieser Bereich ist größer</big> als der restliche Text
</body>
</html></pre>
Text verkleinern mit dem small-Tag:
Um ihn kleiner zu machen, als den umliegenden Text, können Sie das small-Tag verwenden:
Beispielcode:
<pre><html>
<body>
<small>Dieser Bereich ist kleiner</small> als der restliche Text
</body>
</html></pre>
Text hochstellen mit dem sup-Tag:
Um einen Textereich hochzustellen können Sie das sup-Tag verwenden. Ein bekanntes Beispiel ist der Staz des Pythagoras: a2 + b2 = c2
Beispielcode:
<pre><html>
<body>
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
</body>
</html></pre>
Text tiefstellen mit dem sub-Tag:
Sie können auch einen Text tieferstellen. Verwenden Sie dazu das sub-Tag:
Beispielcode:
<pre><html>
<body>
<sub>Dieser Text ist tiefer</sub> als der Rest.
</body>
</html></pre>
Text durchstreichen mit dem strike-Tag:
Um einen Text durchzustreichen verwenden Sie das s-Tag:
Beispielcode:
<pre><html>
<body>
<s>Dieser Text ist durchgestrichen</s>.
</body>
</html></pre>
Im nächsten HTML-Tutorial gehen wir ans eingemachte. Ich möchte Ihnen zeigen, wie Sie Ihren Text suchmaschinenoptimiert codieren.
Dies ist sehr aufwendig, aber auch sehr effektiv.
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
