von Thomas Salvador.
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.
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.
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.
HTML bietet die üblichen Stile an:
b<b>fett</b>
liefert
fetti<i>kursiv</i>
liefert
kursivu<u>unterstrichen</u>
liefert
unterstrichentt<tt>Schreibmaschine</tt>
liefert
Schreibmaschinestrike, Kurzform s<strike>durchgestrichen</strike> und <s>durchgestrichen</s>
liefert
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.
subWasser: H<sub>2</sub>O
liefert
Wasser: H2Oba<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
liefert
a2 + b2 = c2HTML 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<strong>Wichtig!</strong>
liefert
Wichtig!em<em>Wichtig!</em>
liefert
Wichtig!cites. <cite>A.U.Tor, Das A vor dem U</cite>
liefert
s. A.U.Tor, Das A vor dem Ucode<code>function ok: boolean;</code>
liefert
function ok: boolean;samp<samp>Access denied.</samp>
liefert
Access denied.kbdcommand: <kbd>exit</kbd>
liefert
command: exitvar<var>eineVariable</var>
liefert
eineVariabledfn<dfn>Antwort auf alle Fragen = 42</dfn>
liefert
Antwort auf alle Fragen = 42Darüber hinaus gibt es Stile, die sich auf ganze Textblöcke beziehen. Diese werden wir später noch kennenlernen.
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.
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.
<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öß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.).
<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
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>
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 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 Nachname
Völlig analog verhindert
Anno 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 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 £ 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.
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.
Erstellen Sie mit Ihrem bevorzugten Texteditor eine Datei text-in-html-uebung-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.
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.
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.
<html> <head><title>Kniebeugenvermeidung: Aufgabe3-1</title> <meta name="author" content="Thomas Salvador"> <meta name="keywords" content="Musterantwort Übungsaufgabe"> <meta name="description" content="Musterantwort der Übungsaufgabe 1 des Abschnittes über Text in HTML"> </head> <body> Ich publiziere online! Das ist schön! </body> </html>
<html> <head><title>Trasitivität</title> <meta name="author" content="Thomas Salvador"> <meta name="keywords" content="Musterantwort, Übungsaufgabe, Trasitivität"> <meta name="description" content="Musterantwort der Übungsaufgabe 2 des Abschnittes über Text in HTML"> </head> <body> Ist a<b und b<c, so ist a<c. </body> </html>
<html> <head><title>Kniebeugenvermeidung: Aufgabe3-3</title> <meta name="author" content="Thomas Salvador"> <meta name="keywords" content="Musterantwort Übungsaufgabe"> <meta name="description" content="Musterantwort der Übungsaufgabe 3 des Abschnittes über Text in HTML"> </head> <body> <b><font face="arial,helvetica,sans-serif" size="+2">Ich publiziere <font color="#FF0000">online</font>! Das ist schön!</b></font> </body> </html>