Text in HTML

von Thomas Salvador.

  1. Tags, Attribute, Plattformunabhängigkeit
  2. Grundstruktur von HTML-Dateien
  3. Text in HTML
  4. Grundlegende Gestaltungselemente in HTML
  5. Blockorientierte Elemente in HTML
  6. Listen und Glossare in HTML
  7. Verweise und Protokolle in HTML
  8. Grafik in HTML
  9. Farben in HTML
springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]

Inhalt oder neudeutsch Content ist das, was einer WebSite meiner Meinung nach ihre Existenzberechtigung gibt. Sie mag so hübsch sein, wie sie will, bringt sie mir keinen Nutzen, kann sie wegen mir sterben, natürlich nur rein egoistisch gesprochen.

Eine andere Meinung besagt, dass die Besucher die Existenzberichtigung geben, denn auch eine "nützliche" inhaltvolle Site ist sinnlos, wenn keiner sie besucht, das ist schon richtig.

D.h.wird sie besucht, darf sie leben, wird sie nicht besucht, ist sie eh schon tot oder hat nie gelebt.

Meine Sicht sah schlicht vor, dass der Nutzen Besucher impliziert, was so einfach nicht stimmt. Aber das ist ein anderes Thema, zu dem wir sicherlich auch noch kommen werden.

Inhalt im Hyperraum ist im wesentlichen textueller Natur, womit wir schon beim Thema dieses Abschnittes sind: Text in HTML. Ergänzende Inhalte wie Grafiken usw. besprechen wir später.

Fließtext

HTML ist eine free-form-Sprache, d.h. (bis auf wenige Ausnahmen) können Sie mit Leerzeichen und Leerzeilen umgehen, wie auch immer Sie möchten. Insbesondere erlaubt dies, verschachtelte Strukturen, wie wir Sie später kennenlernen werden, übersichtlich in der HTML-Datei darzustellen, was die Erzeugung der Dokumente vereinfacht.

Die Ausgabe, d.h. die Darstellung durch einen Browser, ist davon nicht betroffen. (Wenn Sie Textsatzsysteme, wie etwa TeX, kennen, erzähle ich Ihnen hier sicher nichts Neues.)

Dies heißt nichts anderes, als dass der Browser selber entscheidet, wann eine Zeile umgebrochen wird. Dies ist auch wichtig und hat mit der Plattformunabhängigkeit zu tun.

Zum einen können Browser konfiguriert werden, nicht zuletzt in den zu verwendenden Schriften und Schriftgrößen. Im Textmodus arbeitende Browser können i.a. weniger Zeichen pro Zeile darstellen, als im Grafikmodus arbeitende (Stichwort: Proportionalschrift).

Schließlich kann der Autor eines HTML-Dokumentes nicht einmal Annahmen darüber machen, bei welcher Auflösung und bei welcher Fenstergröße der Browser des Nutzers betrieben wird.

Daher passt sich die Ausgabe der jeweiligen Umgebung an. Dies können Sie sofort ausprobieren, indem Sie Ihre Fenstergröße verändern. Sie werden sehen, dass der Text entsprechend anders umgebrochen wird.

Für den HTML-Autor bedeutet dies i.w., dass er seinen Text schreiben kann, wie er möchte. Es gibt keine maximalen Zeilenlängen, mehrfache Leerzeichen und mehrfache Leerzeilen werden ignoriert. Dabei wird der Zeilenumbruch in der HTML-Datei als Leerzeichen gewertet, d.h. folgende Fragmente erzeugen alle die absolut gleiche Ausgabe:

Beispiel: "Fließtext"

<body>
Formatierung
   ist nicht
wichtig.
</body>
<body>Formatierung ist nicht wichtig. </body>
<body>Formatierung
         ist         nicht       wichtig.
</body>

Wir werden noch Möglichkeiten kennenlernen, wie wir die Ausgabe beeinflussen können.

Beispiel: "Fließtext II"

<body>
Formatierung
   ist auch nicht
unwichtig
.
</body>

erzeugt eine andere Ausgabe, genauer wird zwischen "wichtig" und "." ein Leerzeichen eingefügt.

Das liegt am Zeilenumbruch, da dieser wie ein Leerzeichen interpretiert wird.

Textstil

Bei Textstilen unterscheidet man zwischen festen und logischen Stilen.

Logische Stile sind vom Browser bzw. vom Benutzer wählbare Stile für logische Ausgaben, d.h. es bleibt dem Benutzer überlassen, wie er Ausgaben dargestellt bekommt, die z.B. hervorgehoben, Tastatureingaben oder Zitate sein sollen.

Feste Stile sind dagegen nicht einstellbar, d.h. der Benutzer sieht es genau so, wie es Autor vorgesehen hat. Ein Beispiel ist hier fette Schrift. Wenn etwas als fett deklariert wurde, sieht es der Benutzer (i.a.) fett, und kann dies nicht ändern.

Es liegt auf der Hand, dass feste Stile (wie auch einiges andere) den Aufgaben einer Dokumentbeschreibungssprache nicht entspricht, ja sogar die Plattformunabhängigkeit verletzt, da z.B. im Textmode arbeitende Browser fett i.a. nicht darstellen können.

Dennoch sollten nach Meinung des Autors diese Stile eingesetzt werden. Es wäre erheblich fataler, wenn man hierfür logische Stile missbrauchen würde.

Ist etwa etwas wichtig und Sie möchten es hervorheben, verwenden Sie z.B. strong. Möchten Sie es ohne jede logische Bedeutung fett haben b.

Feste Textstile

HTML bietet die üblichen Stile an:

b
Setzt Text fett (bold):
<b>fett</b>

liefert

fett
i
Setzt Text kursiv (italic):
<i>kursiv</i>

liefert

kursiv
u
Setzt Text unterstrichen (underlined):
<u>unterstrichen</u>

liefert

unterstrichen
tt
Setzt Text dickengleich (teletype, monospaced):
<tt>Schreibmaschine</tt>

liefert

Schreibmaschine
strike, Kurzform s
Setzt Text durchgestrichen (strike-through):
<strike>durchgestrichen</strike> und <s>durchgestrichen</s>

liefert

durchgestrichen und durchgestrichen

Diese Stile lassen sich freilich auch kombinieren, wobei aber die Blockeigenschaft der Tags beachtet werden muss.

Beispiel: "Kombination fester Textstile"

Man <b>kann <i>die</i> <u>Stile</u>
auch</b> <i>beliebig</i> <u><tt>kombinieren</tt></u>.

liefert

Man kann die Stile auch beliebig kombinieren.

Demnach wäre <u><tt>kombinieren</u></tt> falsch, da der zuletzt geöffnete Block (hier: tt) zuerst wieder zu schließen ist.

Hochgestellte und tiefgestellte Schrift wird nicht von allen Browsern unterstützt und führen zudem zu unterschiedlichen Zeilenabständen, was meiner Meinung nach ausgesprochen häßlich ist. Aber manchmal kommt man nicht herum.

sub
Setzt Text tiefgestellt (subscript):
Wasser: H<sub>2</sub>O

liefert

Wasser: H2O
b
Setzt Text hochgestellt (superscript):
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>

liefert

a2 + b2 = c2

Logische Textstile

HTML bietet einige logische Stile an, die man bitte auch nur im logischen Zusammenhang verwendet. Schauen Sie sich die folgenden Beispiele an, warum das so außerordentlich wichtig ist.

strong
Hervorhebung (meist fett dargestellt):
<strong>Wichtig!</strong>

liefert

Wichtig!
em
Hervorhebung (meist kursiv dargestellt):
<em>Wichtig!</em>

liefert

Wichtig!
cite
Hervorhebung für Zitate (Buch-, Film-, ...), meist kursiv dargestellt:
s. <cite>A.U.Tor, Das A vor dem U</cite>

liefert

s. A.U.Tor, Das A vor dem U
code
Hervorhebung für Quellcode, meist monospaced dargestellt:
<code>function ok: boolean;</code>

liefert

function ok: boolean;
samp
Hervorhebung für Beispiele und Meldungen, meist monospaced dargestellt:
<samp>Access denied.</samp>

liefert

Access denied.
kbd
Hervorhebung für Benutzereingaben, meist monospaced (und manchmal zusätzlich fett) dargestellt:
command: <kbd>exit</kbd>

liefert

command: exit
var
Hervorhebung für Variablen, meist kursiv:
<var>eineVariable</var>

liefert

eineVariable
dfn
Hervorhebung für Definitionen, meist kursiv, manchmal normal:
<dfn>Antwort auf alle Fragen = 42</dfn>

liefert

Antwort auf alle Fragen = 42

Darüber hinaus gibt es Stile, die sich auf ganze Textblöcke beziehen. Diese werden wir später noch kennenlernen.

Unterschied zwischen festen Textstilen und logischen Textstilen

Warum also ist es wichtig, logische Stile nicht als Ersatz von festen Stilen zu nutzen?

Es ist wichtig, weil logische Stile eine konkrete Bedeutung zuweisen.

Sie sehen zum Beispiel, dass mehrere dieser Stile etwas dickengleich, fett oder kursiv darstellen.

Aber die Beudetung ist jeweils eine andere. Einmal ist etwas ein Zitat, dann eine Variable, dann eine Definition.

Vergleichen Sie nun b und strong. Optisch ist das Ergebnis meist gleich, da strong üblicherweise fett gesetzt wird.

Der Unterschied ist aber, dass Sie mit ihm den Text hervorgehoben haben. Er könnte deshalb nicht nur ganz anders dargestellt werden, er wird zum Beispiel von einem Screenreader sicherlich auch anders betont vorgelesen.

Blinken

Beispiel: "Blinkender Text"

Dieser Text <blink>blinkt</blink>...

liefert

Dieser Text blinkt...

Der IE interpretiert <blink> übrigens nicht. Abgesehen davon, dass IE-Benutzer es nicht sehen, ist es kein Standard.

Es liegt also generell am Browser, ob es umgesetzt wird.

Textgröße

<font size="XX"> Text </font>

wobei XX die Größe ist. Diese Größe kann absolut und relativ angegeben werden. Dabei bedeutet absolut, dass genau diese Größe gesetzt wird, und relativ, dass die aktuelle Größe um den angegebenen Wert vergrößert bzw. verkleinert wird.

Beispiel: "Absolute Größe"

<font style="font-size:120%">5</font> Einheiten
<font style="font-size:150%">7</font> Einheiten

liefert

5 Einheiten 7 Einheiten

Üblicherweise werden Größen von 1 bis 7 Einheiten ausgewertet. Noch größere Einheiten werden wie 7 Einheiten dargestellt.

Der Autor empfiehlt die Verwendung von relativen Größen.

Beispiel: "Relative Größe"

normal
<font size="+2">zwei Einheiten gr&ouml;&szlig;er</font>
normal

liefert

normal zwei Einheiten größer normal

Sie sehen, dass das"+" zwingend ist, um die relative Größe +2 von der absoluten Größe 2 zu unterscheiden.

Ist das Wort größer komisch geschrieben? In Abschnitt über Sonderzeichen steht warum (s.u.).

Textfarbe

<font color="#rrggbb"> Text </font>

Beispiel: "Textfarben"

<font color="#ff0000">R</font>
<font color="#00ff00">G</font>
<font color="#0000ff">B</font>-Raum
<font color="#800000">R</font>
<font color="#008000">G</font>
<font color="#000080">B</font>-Raum (dunkler)

liefert

R G B-Raum R G B-Raum (dunkler)

Auch hier kann alternativ jeweils auch ein Farbname, wie im Abschnitt Farben beschrieben.

normal <font color="red">rot</font> normal

liefert

normal rot normal

Schriftart

Mit

<font face="fontnamen"> elemente </font>

schlagen Sie vor, dass die HTML-Elemente elemente in einer Schriftart dargestellt werden soll, die so bestimmt wird: fontnamen ist eine Liste von Namen von Schriftarten.

Die erste verfügbare Schriftart wird verwendet. Ordnen Sie also nach Ihren Prioritäten!

Ist keine davon verfügbar, wird die Voreinstellung des Benutzers verwendet.

Beachten Sie bitte zweierlei. Schließen Sie die Liste in Anführungsstriche ein und trennen Sie die Namen mit einem Komma voneinander. Dann kann praktisch nichts schiefgehen.

Beispiel:

<font face="arial,helvetica,sans-serif">elemente</font>

Darstellung von Sonderzeichen

Wie bereits erwähnt baut HTML auf dem standardisierten ISO-8859-1 Zeichensatz (ISO-Latin-1) auf. Dieser Zeichensatz besteht aus 256 Zeichen, wobei die ersten 128 Zeichen denen des ASCII-Zeichensatzes entsprechen.

Einige Zeichen aus diesem haben in HTML eine besondere Bedeutung, weshalb sie im Fließtext nicht auftreten können. Wir kennen bereits zwei: die spitzen Klammern, die in HTML verwendet werden, um Tags zu begrenzen.

Die Ersatzdarstellungen beginnen mit einem Ampersand (&), gefolgt von dem Namen des Zeichens (genauer einer Abkürzung) und einem Semikolon. Wichtig ist, dass bei Ersatzdarstellung im Gegensatz zu Tags die Groß- und Kleinschreibung beachtet werden muss.

Da die Darstellungen mit dem Ampersand beginnen, hat dieses Zeichen selbst eine besondere Bedeutung. Schließlich haben Anführungsstriche eine Bedeutung, da sie z.B. verwendet werden, um in Tags Attributen einen Wert zuzuweisen. Außerhalb von Tags muss es daher maskiert werden. Die Ersatzdarstellungen für diese Zeichen sind

Darstellung in HTML Zeichen
&amp; &
&lt; <
&gt; >
&quot; "

Ganz ähnlich funktioniert dies für alle nicht-standardisierten Zeichen, d.h. insbesondere nationale Sonderzeichen. Für deutsche Texte sind die Umlaute und das Scharfe-S besonders wichtig:

Darstellung in HTML Zeichen
&auml;, &Auml; ä , Ä
&ouml;, &Ouml; ö , Ö
&uuml;, &Uuml; ü , Ü
&szlig; ß

Häufiger verwendet werden auch folgende:

Darstellung in HTML Zeichen
&copy; ©
&reg; ®
&nbsp;

HTML unterstützt eine Vielzahl von nützlichen Zeichen und Symbole, darunter auch griechische und mathematische Zeichen, Pfeile und Symbole.

Das &nbsp; kennen wir schon aus Ausgabe #2 des WebDesign Newsletters. Es ist ein spezielles Leerzeichen.

Wir haben gerade gesehen, dass der Browser, den Fließtext selbst umbricht. Dies geschieht nun sinnvollerweise nicht mitten im Wort :-), sondern an Leerzeichen. Mit Hilfe des geschützten Leerzeichens können Sie ein Umbrechen dort verhindern.

Beispiel:

Möchten Sie etwa nicht, dass mitten in einem Namen umgebrochen wird, schreiben Sie:

Vorname&nbsp;Nachname

Völlig analog verhindert

Anno&nbsp;1999

dass die Jahreszahl in eine neue Zeile kommt.

Darüber hinaus wird im Fließtext höchstens ein Leerzeichen ausgegeben, d.h., darauf folgende Leerzeichen werden ignoriert.

Durch &nbsp; können Sie auch mehrfache Leerzeichen erzwingen.

Es sei hier nur erwähnt, dass man die Zeichen auch über Nummern ansprechen kann. Dabei wird nach dem Ampersand, ein Gatter (oder Doppelkreuz, #), gefolgt von Nummer und Semikolon gesetzt; z.B. gibt &#163; das Pfundzeichen (£).

Dies ist übrigens auch bei den bereits vorgestellten, benannten Zeichen möglich, dem Autor erscheint die Nutzung des Namens sinnvoller.)

Sind die Zeichen auf dem anzeigenden Browser nicht verfügbar, wird etwa eine Schrift verwendet, die diese Zeichen nicht kennt, so wird dies üblicherweise durch ein kleines leeres Zeichen angezeigt, oder es wird stillschweigend ein anderes Zeichen ausgegeben.

springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]