typo.goemo.de - Typo & HTML

Textauszeichnungen (Zeichenformate)

Grundsätzlich muss in HTML zwischen physischen und logischen Textauszeichnungen unterschieden werden. Physische Auszeichnungen legen die Art der Wiedergabe genau fest (kursiv, fett, etc.). Logische Auszeichnungen beschreiben die Bedeutung des Texts (Code, Hervorhebung, etc.) und überlassen es dem Browser, wie er diese Auszeichnungen darstellt.

Oftmals werden beide Verfahren zum gleichen Ergebnis führen. Unterschiede werden sich aber in text-orientierten Umgebungen bemerkbar machen, da diese keine physischen Formate erkennen.

Mit den physischen Textauszeichnungen läßt sich ein HTML-Dokument im Browser besser kontrollieren. Zudem werden Ihnen mehr gestalterische Möglichkeiten geboten. Je nach dem Publikum, für das Sie Ihre Web-Site gestalten, sollten Sie die Vor- und Nachteile der unterschiedlichen Formatierungsbefehle gegeneinander abwägen.

Die wichtigsten physischen Textauszeichnungen:

<i> ... </i> = der Text wird kursiv gestellt
<b> ... </b> = der Text erscheint fett
<u> ... </u> = der Text wird unterstrichen
<blink> ...</blink> =für blinkenden Text
<strike> ...</strike> =~~der Text wird durchgestrichen~~
<sup> ...</sup> = ^{der Text wird hochgestellt}
<sub> ...</sub> = _{der Text wird tiefgestellt}

Beispiel: Physische Textauszeichnungen

<html>
<head>
<title>Textauszeichnungen</title>
</head>

<body>
<b>Ein sonniger Tag gefolgt von</b><br>
<i>einer sternenklaren Nacht,</i><br>
<u><b>was einen kühlen Morgen nach sich zieht.</b></u><br>
Das <sub>Tief</sub> kommt hinten nicht mehr <sup>hoch</sup>.
</body>
</html>

Das sieht im Browser so aus:

Achtung: Das <blink>-Tag

Das <blink>-Tag für blinkenden Text funktioniert nur bei Netscape. Daher sollte auf dessen Verwendung verzichtet werden

Logische Textauszeichnungen haben den Vorteil, daß sie auch in text-orientierten Umgebungen angezeigt werden. Wenn Sie einen wissenschaftlichen Text oder einen reinen Informationstext verfassen, sollten Sie die HTML-Befehle für die logischen Textauszeichnungen verwenden.

Die wichtigsten logischen Textauszeichnungen:

<strong> ... </strong> =der Text wird hervorgehoben, meist fett
<em> ... </em> = der Text wird hervorgehoben, meist kursiv
<tt> ... </tt> = für dicktengleiche Schrift (nicht Proportionalschrift)
<cite> ...</cite> = für Zitate geeignet, meist durch kursive Darstellung

Schriftgestaltung

Schriftart

Sie können die Schriftart über den <font>-Tag festlegen. Dazu geben Sie im face-Attribut die gewünschte Schriftart an:

<font face="arial"></font>

Beachten Sie dabei besonders, ob die Schriftart auch auf allen Computern Ihrer Besucher vorhanden ist. Um sicher zu gehen, dass auch der gewünschte Effekt erzielt wird, kann man auch mehrere Schriftarten angeben. Dann versucht der Browser zuerst die 1. angegebene Schrift und dann die nachfolgenden, bis er auf dem Rechner eine installierte Schriftart gefunden hat.

Für Windows kann man von dem Vorhandensein von Arial, Times und ab Internet Explorer 5 auch von Verdana ausgeben. Auf dem Mac ist Helvetica verfügbar.

<font face="verdana, arial, helvetica">Text in der gewünschten Schriftart</font>

Schriftgröße

Mit dem HTML-Befehl <font size="Zahlenwert 1-7"> ... </font> kann die Schriftgröße verändert werden. Diese Anweisung wird von Netscape Navigator und dem Internet Explorer ab Version 2.0 ausgewertet. Die Abstufungen von 1 bis 7 sind relative Werte zur im Browser eingestellten Schriftgröße. Der Wert 3 entspricht ihr genau, die Abstufungen 1 und 2 sind kleiner, die Werte 4 bis 7 vergrößern die Schrift.

Beispiel: Schriftgrößen

<html>
<head>
<title>Textauszeichnungen</title>
</head>

<body>
<font size="1">Klein aber fein</font><br>
<font size="2">A little bit more</font><br>
<font size="3">Entspricht der Einstellung im Browser</font><br>
<font size="4">Es geht bergauf</font><br>
<font size="5">Und noch eine Stufe</font><br>
<font size="6">Ein Ende ist abzusehen</font><br>
<font size="7">The King Size</font><br>
</body>
</html>

Das Ergebnis sieht so aus:

Schriftfarbe

Mit Hilfe des Attributs color im <font>-Tag können Sie beliebigen Textpassagen eine eigene Farbe zuweisen. Diese Anweisung ist unabhängig von der Einstellung der Schriftfarbe, die im body-Tag mit dem Attribut text festgelegt werden kann (Dazu kommen wir etwas später).

Beispiel: Schriftfarben

<html>
<head>
<title>Textauszeichnungen</title>
</head>

<body bgcolor="#ffffff" text="0033ff">
<font color="#cc0000">Ein dezentes Rot</font><br>
<font color="#009900">Ein hoffnungsvolles Grün</font><br>
<font color="#0099ff">Ein himmlisches Blau</font><br>
... usw.<br>
</body>
</html>

Sonderzeichen in HTML

Um sicherzugehen, dass sogenannte Sonderzeichen (z.B. deutsche Umlaute) richtig erscheinen, werden sie durch Kombinationen aus dem 7-Bit ASCII-Zeichensatz wiedergegeben, z.B. schreibt man "ü" für "ü".

Heute ist dieses Verfahren nicht mehr unbedingt zwingend, da man auch die Zeichensätze nach den ISO-Normen verwenden kann, für Mitteleuropa z.B. ISO 8859-1.

Ein weiteres Problem besteht bei den Zeichen "<" und ">", diese kennzeichnen, wie in der ersten Lektion beschrieben, die sogenannten Tags. Sollen sie als normale Zeichen im Text erscheinen, müssen sie dazu maskiert werden. Für "<" schreiben Sie "<", für ">" benutzen Sie ">".

Umlaute, Akzente und ß

Am häufigsten werden Sie die deutschen Umlaute und das "ß" ersetzen müssen. Die folgende Liste führt diese Zeichen und ihre HTML-Entsprechungen auf.

Ä = Ä
ä = ä

Ö = Ö
ö = ö

Ü = Ü
ü = &uuml

ß = &szlig:

> = >

< = <

“ = "

geschütztes Leerzeichen =  

Beispiel:

"Ähnlichkeit" wird durch die Maskierung so dargestellt: Ähnlichkeit
"Möglichkeit" wird durch die Maskierung so dargestellt: Möglichkeit
“Möbelstück” wird durch die Maskierung so dargestellt: Möbelstück

Überschriften

Damit Sie Überschriften unterschiedlicher Größe in Ihrem Dokument verwenden können, bietet HTML sechs Überschriftenebenen von <h1> ... </h1> bis <h6> ... </h6>. Mit ihrer Hilfe können Sie Ihr Dokument übersichtlich aufbauen und gliedern. Um die unterschiedlichen Überschriftenebenen kennenzulernen.

Aufgabe:

Öffnen Sie wieder einen beliebigen Texteditor und erstellen Sie das Grundgerüst der Datei.

Geben Sie als Titel "6. Schlagerfestival in Berlin" ein.

Geben Sie als nächstes folgenden Text ein:

Die Neuentdeckung auf dem 6. Schlagerfestival in Berlin waren das Gesangsduo "Ray und Dietrich". Schon nach dem ersten Lied "Ein Tag aus unserem Leben" war klar abzusehen, dass sie den Wettbewerb gewinnen werden.

Achtung: Denken Sie daran, die Sonderzeichen zu maskieren!

Speichern Sie die Datei unter dem Namen schlager1.html.

Jetzt fehlt nur noch eine Überschrift für den Text. Wie erwähnt, gibt es in HTML sechs Überschriftenebenen. Eine Überschrift oberster Hierachie lässt sich durch <h1>Überschrift</h1> im Dokument einsetzen. Probieren Sie es einfach aus. In Ihrem Texteditor sieht der HTML-Code dann wie in der Abbildung aus.

Beispiel:

<html>
<head>
<title>6. Schlagerfestival in Berlin</title>
</head>

<body bgcolor="#ffffff">
<h1>6. Schlagerfestival</h1>
Die Neuentdeckung auf dem 6. Schlagerfestival in Berlin waren das<br>
Gesangsduo "Ray und Dietrich". Schon nach dem ersten Lied "Ein Tag<br>
aus unserem Leben" war klar abzusehen, dass sie den Wettbewerb<br>
eindeutig gewinnen werden.<br>
</body>
</html>

Im Browser ist die zugewiesene Überschrift deutlich zu erkennen:

Setzen Sie eine zweite Überschrift unter der ersten ein, und zwar so:
<h2>Schlagerduo</h2>
Im Browser ist der Unterschied zwischen den beiden Überschriften
<h1>6. Schlagerfestival</h1>
und
<h2>Schlagerduo</h2>
gut zu sehen:

Hier noch einmal alle Überschrift zusammen:

Überschriften ausrichten

Ähnlich wie in einem Textverarbeitungsprogramm können Sie in HTML die Ausrichtung von Texten - also auch die Ausrichtung von Überschriften - ändern. Dazu muß das Tag für die Überschrift erweitert werden. Mit den Attributen align=left, align=center oder align=right wird die Ausrichtung festgelegt. Fehlt align, wird die Überschrift linksbündig ausgerichtet.

Beispiel:

Zum Zentrieren einer Überschrift der höchsten Ebene dient dieser HTML-Code:
<h1 align=center>Die goldene Mitte</h1>

Um eine Überschrift der höchsten Ebene rechtsbündig auszurichten, benutzen Sie:
<h1 align=right>on the right side</h1>

Soll eine Überschrift der höchsten Ebene jedoch linksbündig ausgerichtet sein, ändert sich der Code in:
<h1 align=left>Standardausrichtung</h1>

Absätze und Zeilenumbrüche

Ein Absatz wird durch das Tag <p> eingeleitet und mit </p> beendet.

Mit dem Attribut align im <p>-Tag kann man einem Absatz auch die gewünschte Ausrichtung geben.

<p align="center"> ... </p> = zentrierter Absatz
<p align="right"> ... </p> = rechtsbündiger Absatz
<p align="left"> ... </p> = linksbündiger Absatz

Probieren Sie es einfach einmal aus:

Aufgabe: Übung zum Ausrichten von Absätzen

Legen Sie im Texteditor eine neue Datei an.

Als erstes geben Sie wieder die notwendigen Befehle für das Grundgerüst der HTML-Datei ein.

Anschließend soll der unten abgebildete Text in den Body der Datei eingegeben werden. Maskieren Sie bitte auch hier wieder alle Sonderzeichen. Damit der Text gut leserlich bleibt, sind die Sonderzeichen in der Abbildung nicht maskiert dargestellt.

Speichern Sie die Datei unter dem Namen schlager2.html.

Beispiel:

<html>
<head>
<title>Die neuen Stars am Himmel des deutschen Schlagers</title>
</head>

<body bgcolor="#ffffff">
<h2 align=right>Der deutsche Schlager</h2>
<p align=center>Der deutsche Schlager erfreut sich wieder größerer Beliebtheit. Das war deutlich auf dem 6. Schlagerfestival in Berlin zu merken.</p>
<p align=left>Die Veranstaltung war schon Wochen vorher ausverkauft. Leider war es den Veranstaltern jedoch nicht möglich, ein Zusatzkonzert zu organisieren. Doch ein kleiner Trost: Die Gewinner "Ray und Dietrich" gehen im Sommer auf große Tournee und stellen ihr neues Album "Mein Leben mit dir" vor. Voraussichtlich werden sie am 26. Juni wieder in Berlin zu Gast sein.</p>
</body>
</html>

Im Internetbrowser sollte Ihr Ergebnis so aussehen: