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-1

von Thomas Salvador.

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 1 von 3 des Kapitels.

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>              <body>Formatierung ist nicht wichtig. </body>
Formatierung
   ist nicht        <body>Formatierung
wichtig.                     ist        nicht         wichtig.
</body>             </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 dieses 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. . Möchten Sie es ohne jede logische Bedeutung fett haben .

Feste Textstile

HTML bietet die üblichen Stile an:

b: (bold, fett): fett liefert fett
i: (italic, kursiv): kursiv liefert kursiv
u: (underlined, unterstrichen): unterstrichen liefert unterstrichen; (teletype, dickengleich): <tt>Schreibmaschine</tt> liefert Schreibmaschine
strike: (durchgestrichen): <strike>durchgestrichen</strike> liefert ~~durchgestrichen~~

Weiter gibt es s als Kurzform von strike.

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>.

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

sub (tiefgestellte Schrift) und sup (hochgestellte Schrift). werden 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 umhin.

Logische Textstile

HTML bietet einige Stile an, die man bitte auch nur im logischen Zusammenhang verwendet. Wir werden noch einige Beispiele kennenlernen, warum das so außerordentlich wichtig ist. Glauben Sie mir an dieser Stelle bitte erst einmal. Es ist wichtig.

strong: allgemeine Hervorhebung, meist fett dargestellt: Wichtig! liefert Wichtig!
em: allgemeine Hervorhebung, meist kursiv dargestellt: Wichtig! liefert Wichtig!
cite: Hervorhebung für Zitate (Buch-, Film-, ...), meist kursiv dargestellt: <cite>s. 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. fett) dargestellt: <samp>command:</samp> <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.

Blinken

Beispiel: "Blinkender Text"

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

liefert

Ausgabe auf Ihrem Browser

Dieser Text blinkt...

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

Teil 2