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

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


verwandte Artikel und Seiten

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. <strong>. Möchten Sie es ohne jede logische Bedeutung fett haben <b>.

Feste Textstile

HTML bietet die üblichen Stile an:

b
(bold, fett): <b>fett</b> liefert fett
i
(italic, kursiv): <i>kursiv</i> liefert kursiv
u
(underlined, unterstrichen): <u>unterstrichen</u> 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 <u><tt>kombinieren</u></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: <strong>Wichtig!</strong> liefert Wichtig!
em
allgemeine Hervorhebung, meist kursiv dargestellt: <em>Wichtig!</em> 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 weiter
springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 3. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/17.html .