Weitersagen:

brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]

Text in HTML

HTML für Einsteiger - Kapitel 3-3

von Thomas Salvador.

Teil 1

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.

Dies ist Teil 3 von 3 des Kapitels.

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
&	&
<	<
>	>
"	"

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
ä, Ä	ä , Ä
ö, Ö	ö , Ö
ü, Ü	ü , Ü
ß	ß

Häufiger verwendet werden auch folgende:

Darstellung in HTML	Zeichen
©	©
®	®

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

Das   kennen wir schon aus Ausgabe #2. 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

und

Anno&nbsp;1999

verhindert, dass die Jahreszahl in eine neue Zeile kommt.

Abschließend wird im Fließtext höchstens ein Leerzeichen ausgegeben, d.h., darauf folgende Leerzeichen werden ignoriert. Durch   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.

Übungsaufgaben zu Kapitel - 3

Nichts bringt mehr, als es aktiv auszuprobieren. Es wird Ihnen meiner Meinung nach nützen, wenn Sie sich die Mühe machen und die Aufgaben bearbeiten. Sonst hätte ich Sie nicht erzeugt. Versuchen Sie es bitte möglichst, ohne in den Text zu schauen. Die Musterantworten sind am Ende des Letters.

Aufgabe 1

Erstellen Sie mit Ihrem bevorzugten Texteditor eine Datei 17-1.htm und in Ihr ein HTML-Dokument, welches den Text "Ich publiziere online! Das ist schön!" darstellt. Funktioniert es? Nein? Das macht nichts. Dafür ist eine solche Aufgabe da. Versuchen Sie es gleich nochmal. Ja. Schön. Weiter geht es. Sofern Sie es nicht von Anfang an gemacht haben. fügen Sie nun bitte die wichtigsten meta-Informationen hinzu, author, description, keywords. Wenn Sie nicht mehr genau wissen, was das ist, blättern Sie bitte nochmal rasch den zweiten Teil zur Struktur durch. Gut, vollendet.

Ach, welchen Titel haben Sie gewählt? Keinen, Dann machen Sie doch bitte rasch zehn Kniebeugen.

Aufgabe 2

Erstellen Sie ein HTML-Dokument, welches den Titel Transitivität in der Kopfzeile anzeigt und speichern Sie es in einer .htm-Datei beliebigen Namens. Das Dokument soll den Text Ist a<b und b<c, so ist a<c. darstellen.

Funktioniert? Super!

Der Text soll nun in Schwarz auf Weiß dargestellt werden. Das macht er eh? Hmm, Wer sagt Ihnen, dass dies bei mir auch so ist. Schlagen Sie immer die Farben für Ihr Dokument vor, beachten Sie aber, dass auch dies eben nur ein Vorschlag ist, der akzeptiert, oder auch ignoriert wird.

Tip: Weiß hat in allen Bestandteilen maximalen Wert, Schwarz minimalen.

Aufgabe 3

Greifen Sie bitte noch einmal rasch Ihre Datei aus Aufgabe 1 auf und erweitern diese, wie folgt.

1. machen den gesamten Text relativ zwei Einheiten größer, fett.
2. stellen den Text serifenlos in "arial,helvetica,sans-serif" dar.
3. Das Wort online soll rot sein.
4. Testen Sie es, bis es funktioniert.

Schauen Sie sich abschließend bitte die Musterantworten an, wie Ergebnisse zu diesen Aufgaben aussehen könnten.

Musterantworten

Teil 1 von Kapitel 3