Textelemente

In dieser Lektion finden Sie die verschiedenen Textelemente von HTML.

  1. Überschriften
  2. Absatz und Umbruch
  3. Physische Texthervorhebung
  4. Logische Texthervorhebung
  5. Schriftgröße
  6. Schriftfarbe
  7. Schriftart
  8. Trennlinien
  9. Maskierung von Sonderzeichen

Überschriften

Im der ersten Lektion habe ich Ihnen schon gezeigt, wie man Überschriften einfügt deshalb folgt hier nur eine Zusammenfassung.

Überschriften Tag:

<h1>Überschrift</h1> Überschrift Größe 1

Überschrift Größe 1
                : bis
<h6>Überschrift</h6> Überschrift Größe 6
Überschrift Größe 6
<hx align=left>Überschrift<hx> Überschrift Größe x links ausgerichtet

links
<hx align=center>Überschrift<hx> Überschrift Größe x zentriert ausgerichtet

zentriert
<hx align=right>Überschrift<hx> Überschrift Größe x rechts ausgerichtet

rechts
Überschriften können auch mit verschiedenen anderen Tags kombiniert werden z.B. können Sie eine physische Texthervorhebung verwenden:
<h1><i>Überschrift</i></h1> Überschrift Größe 1 kursiv

Überschrift Größe 1 kursiv
<h1><b>Überschrift</b></h1> Überschrift Größe 1 fett

Überschrift Größe 1 fett
<h1><u>Überschrift</u></h1> Überschrift Größe 1 unterstrichen

Überschrift Größe 1 unterstrichen
oder Sie verwenden eine logische Texthervorhebung:
<h3><tt>Überschrift</tt></h3> Überschrift Größe 3 dicktengleich

Überschrift Größe 3 dicktengleich
<h3><dfn>Überschrift</dfn></h3> Überschrift Größe 3 Definition

Überschrift Größe 3 Definition
oder Sie gestalten die Überschrift farbig mit den Schriftfarbe Tag
<h1><font color="#FF0000">Überschrift</font></h1> Überschrift rot

Überschrift rot
Weitere Beispiele
Zurück zum Anfang

Absatz und Umbruch

Wie Sie schon in der ersten Lektion gesehen haben, wird für einen Absatz das Tag <p> verwendet.
<p>Hier folgt der Text.</p> In Start- und Endtag eingefaßter Text
In dem Absatz Tag können Sie wie in einer Überschrift den Zusatz align=xxxx einfügen. Das Endtag </p> können Sie auch weglassen, da viele Browser nicht überprüfen ob es vorhanden ist. Ich empfehle empfehle Ihnen aber immer das Endtag mit einzufügen, da z.B. viele Editoren die eine WYSIWYG ähnliche Anzeige verwenden sich massiv beschweren das der Quelltext nicht korrekt ist. Als Ergebnis erhalten Sie dann in diesen Editoren den Quelltext angezeigt.
<p align=left>Dieser Text wird links ausgerichtet<p> Dieser Text wird links ausgerichtet
<p align=center>Dieser Text wird zentriert ausgerichtet<p> Dieser Text wird zentriert ausgerichtet
<p align=right>Dieser Text wird rechts ausgerichtet<p> Dieser Text wird rechts ausgerichtet
Um innerhalb eines Textbereiches einen neuen Absatz einzufügen, verwenden Sie einfach das Starttag ohne Endtag.
<p>Hier folgt ein Text.<p>Dieser Text wird als neuer Absatz angezeigt.</p>
Hier folgt ein Text.

Dieser Text wird als neuer Absatz angezeigt.

Da Browser Absätze, Umbrüche und Tabulatoren die Sie in dem reinen Quellcode verwenden nicht anzeiget, müssen Sie müssen Sie dem Browser mitteilen das nun z.B. ein Zeilenumbruch erfolgen soll. Dazu wird das Tag <br> verwendet. Das Tag <br> ist eines der Tags, die kein Endtag verwenden.
<p>Hier folgt ein Text.<br>Dieser Text wird immer in der nachfolgenden Zeile angezeigt</p>
Hier folgt ein Text.
Dieser Text wird immer in der nachfolgenden Zeile angezeigt
Wie Sie aus diesen Beispielen erkennen können, können Sie in dem Quellcode eines HTML-Textes so viele normale Umbrüche, Absätze und Tabulatoren verwenden, wie Sie wollen. Ein Browser wird Ihnen das Dokument aber so anzeigen, wie Sie es mit den Tags festgelegt haben.
Beispiel

<p align=left>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.<br>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.<br>Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi.</p>

wird von einem Browser genauso angezeigt, als hätten Sie den Text wie folgt eingegeben:

<p align=left>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.<br>
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<p>
Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.<br>
Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi.
</p>

aber wie Sie unschwer erkennen werden, läßt sich das Zweite Beispiel viel besser Lesen als das erste. Verwenden Sie deshalb in Ihren Dokument so viele normale Absätze, Umbrüche und Tabulatoren wie Sie möchten. Ein Beispiel wie man Tabulatoren zum Strukturieren eines Dokumentes einsetzen kann finden Sie im Abschnitt über Listen und Tabellen.

Weitere Anzeigebeispiele
Zurück zum Anfang

Physische Texthervorhebung

Im folgenden Abschnitt zeige ich Ihnen die verschiedenen physischen Texthervorhebungen. Physische Texthervorhebungen werden verwendet um Text hervorzuheben. Der unterschied zur Logischen Texthervorhebung, besteht darin das Sie mit der physischen Texthervorhebung der Text egal welche Schriftart in einem Browser eingestellt ist oder welcher Browser verwendet wird die Hervorhebung immer gleich aussieht während logische Texthervorhebungen von Browsern unterschiedlich angezeigt werden können.
z.B. zeigt der MS-Internet-Explorer 3.0 einen Text der in das <dfn>(logisch) DefinitionsTag</dfn> eingefaßt ist kursiv an, während Netscape 3.0 dasselbe als normalen Text anzeigt.
Ein in das Tag für Fett eingefaßter Text <b>(physisch) Fett</b> in beiden Browsern als fetter Text angezeigt wird.

Zuerst die Tags für HTML-Standard 2.0 Diese Tags werden normalerweise von allen Browsern interpretiert.

Text fett (bold) <b>Text</b> Text
Text kursiv (italic) <i>Text</i> Text
Text dicktengleich (Schreibmaschine) <tt>text</tt> Text
Die Tags für den HTML-Standard 3.0 Diese Tags werden von den meisten Browsern angezeigt.
Text unterstrichen (underline) <u>Text</u> Text
Text durchgestrichen (strikeout) <strike>Text</strike> Text
Text etwas größer als normal (big) <big>Text</big> Text
Text etwas kleiner als normal (small) <small>Text</small> Text
Text tiefgestellt (subscript) <sub>Text</sub> Text
Text hochgestellt (superscript) <sup>Text</sup> Text
Das folgende Tag wird nur von Netscape verwendet
blinkender Text <blink>Text</blink> blinkender Text
Das folgende Tag wird von MSIE und Netscape 3.0 verwendet
Text durchgestrichen (strikeout) <s>Text</s> Text
Die verschiedenen Tags, können auch verschachtelt werden. z.B.
Text fett und kursiv <b><i>Text</i></b> Text
Text kursiv und unterstrichen <i><u>Text</u></i> Text
Zurück zum Anfang

Logische Texthervorhebung

Es folgen nun die logischen Texthervorhebungen.

Zuerst die Tags für HTML-Standard 2.0 Diese Tags werden normalerweise von allen Browsern interpretiert.

Text als wichtig markieren (strong) <strong>Der Text wird meistens fett dargestellt</strong> Der Text wird meistens fett dargestellt
Text gefühlsbetont dargestellt (emphatisch) <em>Text wird meistens kursiv dargestellt</em> Text wird meistens kursiv dargestellt
Zitat (cite) <cite>Nichts kann mehr zu einer Seelenruhe beitragen, als wenn man gar keine Meinung hat. (Lichtenberg)</cite> Nichts kann mehr zu einer Seelenruhe beitragen, als wenn man gar keine Meinung hat. (Lichtenberg)
Variable (variable) <var>Variable</var> Variable
Tastatur (keyboard) <kbd>Text</kbd> Text
Beispiel (sample) <samp>Beispiel</samp> Beispiel
Quellcode (code) <code>Wird z.B. verwendet um Quellcode anzuzeigen</code> Wird z.B. verwendet um Quellcode anzuzeigen
Die Tags für den HTML-Standard 3.0 Diese Tags werden von den meisten Browsern angezeigt.
Definition (definition) <dfn>Definition</dfn> Definition
Zurück zum Anfang

Schriftgröße

Mit <font size=(Größe)>Textabschnitt</font> können Sie die angezeigte Schriftgröße für einen einen Textabschnitt festlegen. Die Größe, ist dabei ein absoluter (1..7) oder ein relativer(-7 ..+7) Wert. Weiterhin ist die Schriftgröße abhängig von der im Browser eingestellten Schriftgröße, diese im Browser festgelegte Größe hat als Normalschriftgröße den Wert 3. den Wert 3. Wert 3. Das bedeutet, das alle Werte sich auf diese diese Normalschriftgröße beziehen.

<font size=7>Ziemlich großer Text</font> Ziemlich großer Text
<font size=1>Ziemlich kleiner Text</font> Ziemlich kleiner Text
<font size=-2>Text kleiner als normal</font> Text kleiner als normal
<font size=+2>Text größer als normal</font> Text größer als normal
Sie können die Normalschriftgröße für einen Textabschnitt auch verändern, verwenden Sie dazu das <basefont size=(Größe)> Tag. Weiterhin können Sie das <font size=..> Tag auch mit den in den nächsten Abschnitten vorgestellten Tags für Schriftfarbe und Schriftart kombinieren.

Weitere Anzeigebeispiele
Zurück zum Anfang

Schriftfarbe

Mit dem <font color="Wert">Textabschnitt</font> können Sie die Schriftfarbe eines Textabschnittes festlegen.

<font color="red">roter Text</font> roter Text
<font color="#FF0000">ebenfalls roter Text</font> ebenfalls roter Text
Dazu können Sie entweder einen Farbnamen oder einen Hexadezimalen Farbwert verwenden.
Das <font color=..> Tag auch mit den Tags für Schriftgröße und Schriftart kombinierbar.
<font size=4 color="blue">Textabschnitt Größe 4 und in Blau.</font> Weiter mit normalen Text Textabschnitt Größe 4 und in Blau.
Hinweis zu den Farbnamen
Nicht jeder Browser unterstützt die Farbnamen.

Weitere Anzeigebeispiele
Zurück zum Anfang

Schriftart

Mit dem <font face="(Schriftname)">Textabschnitt</font> können Sie die Schriftart für einen Textabschnitt festlegen. Sie können auch mehrere Schriftarten festlegen dazu trennen Sie einfach die verschiedenen Schriftnamen durch ein Komma. Der Browser wird dann versuchen die erste Schriftart zu verwenden, ist diese nicht vorhanden so wird er versuchen die nächste Schriftart zu verwenden, ist keine der eingetragenen Schriftarten vorhanden so wird die Schrift wie im Browser festgelegt angezeigt.

Das <font face=..> Tag auch mit den Tags für Schriftgröße und Schriftfarbe kombinierbar.

Weitere Anzeigebeispiele

<font size=4 face="Wide Latin,Adelon,Arial" color="blue">Textabschnitt Größe 4, in der Schriftart Wide Latin (wenn Wide Latin nicht vorhanden ist dann in Adelon, wenn Adelon auch nicht vorhanden ist dann in Arial) und in Blau.</font> Weiter mit normalen Text

Textabschnitt Größe 4, in der Schriftart Wide Latin (wenn Wide Latin nicht vorhanden ist dann in Adelon, wenn Adelon auch nicht vorhanden ist dann in Arial) und in Blau. Weiter mit normalen Text

Weitere Anzeigebeispiele
Hinweis zum Verwenden von Schriftarten:
Da Sie nicht wissen können welche Schriftarten jemand verwendet, wenn er Ihr Dokument betrachtet, sollten Sie mit der Verwendung einer Schriftart als Gestaltungsmittel sparsam umgehen.
Außerdem müssen die Namen der Schriftarten exakt angegeben werden.

Zurück zum Anfang

Trennlinien

Mit Trennlinien können Sie einen Text optisch auflockern.
Um eine Trennlinie zu erzeugen fügen Sie einfach das Tag <hr> ein.
Um einen nicht schattierte Trennlinie zu erzeugen fügen Sie in das <hr> Tag folgendes ein noshade Ihr Tag sieht nun so aus <hr noshade>. Der Unterschied zwischen einer normalen Trennlinie und einer nicht schattierten Trennlinie besteht darin das die normale Trennlinie einen Dreidimensionalen Effekt hat und eine nicht schattierte Trennlinie massiv angezeigt wird.

Beispiel

einfache Trennlinie <hr>

nichtschattierte Trennlinie <hr noshade>
Sie können auch die Dicke einer Trennlinie bestimmen, verwenden Sie dazu size=(wert). Beispiel

Trennlinie Dicke 5 Pixel
<hr size=5>

Trennlinie Dicke 20 Pixel
<hr size=20>
Weiterhin können Sie die Breite ein Trennlinie bestimmen. Diese Angaben können in Prozentwerten oder in Pixel erfolgen. Die Prozentwerte beziehen sich dabei auf die Breite des Anzeigebereiches eines Browsers. Beispiel

Trennlinie Breite 100 Pixel
<hr width=100>

Trennlinie Breite 400 Pixel
<hr width=400>
Trennlinie Breite 50%
<hr width=50%>
Trennlinie Breite 80%
<hr width=80%>
Sie können auch die Ausrichtung einer Trennlinie festlegen. Dies ist aber nur sinnvoll bei Trennlinien mit einer Breitenangabe. Beispiel

Trennlinie 100 Pixel links ausgerichtet
<hr width=100 align=left>

Trennlinie 50% Prozent rechts ausgerichtet
<hr width=50% align=right>
Zusätzlich können Sie eine Farbangabe in der Trennlinie angeben. Diese farbige Trennlinie werden aber momentan nur vom MSIE angezeigt! Beispiel

Trennlinie rot
<hr color="red">

Trennlinie blau
<hr color="blue">
Trennlinie schwarz
<hr color="#000000">
Sie können auch die verschiedenen Angaben miteinander kombinieren. Beispiel

Trennlinie Höhe 100 Pixel Breite 100 Pixel
<hr size=100 width=100>

nichtschattierte Trennlinie Höhe 50 Pixel Breite 50 Pixel
<hr noshade size=50 width=50>
rote Trennlinie Höhe 100 Pixel Breite 100 Pixel rechts ausgerichtet
<hr size=100 width=100 align=right color="red">
blaue Trennlinie Höhe 100 Pixel Breite 100 Pixel links ausgerichtet
<hr size=100 width=100 align=left color="blue">

Weitere Anzeigebeispiele
Zurück zum Anfang

Maskierung von Sonderzeichen

Sie sollten darauf achten, das Sie Sonderzeichen wie Umlaute usw. immer HTML-Konform maskieren. Das ist deshalb wichtig, damit Ihre Seiten immer korrekt angezeigt werden da z.B. der Zeichensatz eines UNIX-Rechners von dem eines PC abweichen kann oder ein anderssprachiges Betriebssystems dann statt eines ä ein anderes Zeichen anzeigt.

Hier nun die wichtigsten Konvertierungen

Ä=&Auml;
a=&auml;
Ö=&Ouml;
ö=&ouml;
Ü=&Uuml;
ü=&uuml;
ß=&szlig;
©=&copy;
„=&#132;
”=&#147;
»=&#187;
«=&#171;
Diese hier sind besonders wichtig, da sie in HTML eine Sonderstellung einnehmen.
&=&amp;
<=&lt;
>=&gt;
Zurück zum Anfang