HTML10 - @Amenophis

HTML10 - @Amenophis

neanderix am 21.01.2001, 00:00 / 6 Antworten / Baumansicht

Hi Pharao ;-)

jetzt zum wahrscheinlich längsten Abschnitt bezüglich Textformatierung unter HTML.

Vorformatierte Textabschnitte

Als Windows-Anwender - wie ich ;-) - sind wir scho lange gewohnt, dass Text mit proportionalen Zeichensätzen dargestellt wird. Dabei hat nicht, wie bei der Schreibmaschine, jedes zeichen dieselbe Breite, sondern ein Zeichen beansprucht dabei gerade soviel Platz, wie es seiner "Natur" entspricht, d.h. gerade soviel, wie es wirklich braucht.
Nun gibt es besonders "schmale" Buchstaben, wie das "I", "i" oder "l" - aber auch extrem Breite, wie z.B. "m", "w","M" oder "W".
Versucht man, mit derartigen Schriften Tabellen oder andere Formatierungen dadurch darzustellen, in dem groessere Bereiche einfach mit Leerzeichen aufgefüllt werden, dann treten logischer WEise ungereimtheiten auf - an irgendeiner Stelle passt\'s dann halt nicht mehr.
Der Grund: Leerzeichen haben nunmal nur eine (feste) Breite.
Diese Probleme treten mit unproportionalen - sogenannten "Dicktengleichen" - Schriften nicht auf.

Ausserdem gibt es in HTML ein anderes Problem, dass der Formatierung mit Leerzeichen einen Riegel vorschiebt: dei Browser "rationalisieren" "überflüssige" Leerzeichen einfach weg.
Eine kunstvolle ASCII-Grafik wird auf diese Weise sehr schnell zu einem Zeichensalat ohne jeden Zusammenhang.

Ein anderes Einsatzgebiet fuer solche Formatierungen waere die Darstellung von Programmcode auf Hompages - dort muss man ja Strukturen wie z.B. Schleifen durch Einrueckungen kenntlich machen.

Soll also eije Passage unproportional, also in "dicktengleicher" Schrift, dargestellt werden, muss sie von den Tags <PRE>&lt/PRE> umschlossen werden.

Übrigens kann man dem <PRE> Tag (pre, von engl. prefromatted=vorformatiert) einen Parameter mitgeben, der die maximale Anzazhl von Zeichen in einer Zeile bestimmt:

<pre width=80> bewirkt, dass eine Zeile spaetestens nach 80 Zeichen umbrochen wird.

Ausserdem gibt es noch weitere Elemente, die unproportionale Darstellung erlauben.
<XMP> aktiviert eine Darstellung, die von 80 Zeichen pro zeile ausgeht, waehrend <LISTING> von 132 Zeichen pro Zeile ausgeht.

Und dann gibt es da noch den Tag <PLAINTEXT>. Problem: Netscape akzeptiert hier kein passendes End-Tag. Das jedoch führt dazu, dass meist wesentlich mehr, als der urspruenglich beabsichtigte Bereich als einfacher Text dargestellt wird.
Spaetestens, wenn auf deiner Seite die HTML-Tags im Klartext lesbar sind, statt ausgefuehrt zu werden, solltest du misstrauisch werden - dann ist naemlich was schiefgelaufen.

Achtung: die oben genannten Tags stehen - mit Ausnahme von <PRE> - auf der Abschussliste des W3C-Konsortiums. Sie sollten daher nicht mehr verwendet werden, und wurden von mir eigentlich nur der Vollstaendigkeit halber erwaehnt.

Aufgabe
Warum sind Leerzeichen im allgemeinen ein ungeeignetes Hilfmittel um Text in HTML zu formatieren. (Zwei Gründe)

Textauszeichnungen und -hervorhebungen

In HTML wird grundsaetzlich zwischen zwei Arten der Formatierung unterschieden: der logischen und der physischen Formatierung.
Bei der logischen Formatierung wird die Art und Weise der Gestaltung im Wesentlichen vom Browser bestimmt, der Nachteil ist, dass es zu durchaus erheblichen Unterschieden in der Seitendarstellung kommen kann - jman darf nicht vergessen, dass es durchaus noch Leute gibt, die mit DOS Bildschirmdarstellung oder aehnlichem arbeiten.

Bei der physischen hast du den Vorteil, wesentlich diffiziler eingreifen zu koennen - wenn du davon ausgehst, dass der überwiegende Teil des Publikums, das deine Seite besucht, mit grafischen Browsern arbeitet. Allerdings: vieles, was mit physischer Textauszeichnung moeglich ist, klappt mit CSS noch besser und genauer -- aber dazu kommen wir (vielleicht) noch.
Trotzdem ziehen HTML-Puristen die logische Textauszeichnung vor, denn die physische widerspricht eigentlich dem Ideal einer Seitenbeschreibungssprache.

Übrigens gibt es durchaus noch einen anderen Grund, logische, statt physische Textauszeichnung zu verwenden:

Ein HTML-Interpreter, der die Seiten fuer Blinde in synthetische Sprache oder auf einer Braille-zeile umsetzt, kann mit einer Auszeichnung wie "fett" kaum etwas anfangen; mit einer Auszeichnung wie "stark betont" (strong) hingegen sehrwohl.

Logische Textauszeichnung

In der folgenden Tabelle siehst du eine Übersicht über die verschiedenen Tags zu logischen Textauszeichnung:

Tag	Bedeutung
<STRONG></STRONG>	allg. Hervorhebung, in Browsern meist fett dargestellt
<EM></EM>	allgem. Hervorhebung, die meist kursiv dargestellt wird
<CITE></CITE>	Darstellung von Zitaten, in Browsern meist kursiv
<CODE></CODE>	Darstellung von Programmcode, meist dicktengleich
<KBD></KBD>	Darstellung von Benutzereingaben; dicktengleiche Schrift
<VAR></VAR>	Darstellung von Variablennamen; meist kursiv
<SAMP></SAMP>	Darstellung von Beispielen; wird meist dicktengleich dargestellt
<DFN></DFN>	Definition - erst ab HTML 3.2 verfuegbar.
<acronym>&lt/acronym>	dies ist eine Abkürzung -- erst ab HTML 4 verfuegbar
..." target="_blank" rel="nofollow">..." target="_blank" rel="nofollow">http://www.xyz.de/">...	formatiert mit der Bedeutung "Zitat von genannter URL" -- erst ab HTML 4 verfuegbar

Physische Textauszeichnung

In der nachfolgenden Tabelle sind alle Tags zur physischen Textauszeichnung mit ihrer Bedeutung aufgelistet:

Tag	Formatierung
<b></b>	fett
<i></i>	kursiv
<tt>&lt/tt>	Dicktengleiche Formatierung (tt von engl. "Teletyper"=Fernschreiber)
<u></u>	unterstrichen
<strike></strike>	durchgestrichen
<s></s>	durchgestrichen - ab HTML 4
<big></big>	groesser Formatieren des Textes
<small></small&gt	kleiner Formatieren
<sup></sup&gt	hochstellen
<sub></sub&gt	tiefstellen
<blink></blink&gt	wie der Name schon sagt ;-) Achtung, Netscape-Sonderlocke!

Achtung: die Tags <s>,<strike> und stehen lt. selfHTML auf der Abschussliste des W3C-Konsortiums. Daher ist deren Verwendung nicht mehr zu empfehlen.
Die mit diesen Tags erzeugten Auszeichnungen koennen bei Bedarf mittels CSS erreicht werden.
Das <blink>-Tag ist eine Spezialitaet des Netscape Communicator, wird also nur von diesem verstanden und sollte daher ebenfalls nicht verwendet werden; gleiches gilt umgekehrt fuer Tags, die nur der IE versteht.

Schriftgroesse,Schriftfarbe und Schriftart

Die folgenden Abschnitte behandeln die Moeglichkeiten der beiden Tags und <basefont>. Beide sind zu Zeit sehr beliebt und verbreitet, da sie unter reinem HTML die einzige Moeglichkeit darstellen, die angezeigte Schrift zu beeinflussen.

Aber Vorsicht: Beide Tags stehen seit HTML 4 auf der Abschussliste des W3C, werden also in Zukunft aus dem HTML-Standard entfernt werden.

Als Ersatz stehen auch hier die schon erwaehnten CSS (=> Cascading Style Sheets) zur Verfuegung.
Grundsaetzlich kann man den einsatz dieser Tags - vorallem im Hinblick auf die Rueckwaertskompatibilitaet zu aelteren Browsern, wie dem Netscape Navigator 3 - nicht Grundsaetzlich verdammen, andererseits ist nicht einzusehen, warum Nutzer moderner, CSS-faehiger Browser mit Restriktionen aus der NC-3 zeit belegt werden.

Wer es also ganz genau machen will, nutze beides nebeneinander - das funktioniert, weil CSS-faehige Browser selbige bevorzugt nutzen, andererseits Browser, die CSS noch nicht kennen, diese schlicht ignorieren.

Schriftgroesse

Zumindest die "Big Three" der Browser, naemlich IE, NC und Opera unterstuetzen die folgende Option, mit der man die Schriftgroesse im Text anpassen kann.
Die Groessenaenderung kann dabei, je nach Wunsch, entweder absolut oder relativ geschehen.
Letzteres bedeutet, dass die Groesse, in der der Text erscheint, abhaengig ist, von der im Browser eingestellten Standard-Schriftgroesse.

Das folgende Beispiel mag das veranschaulichen:

Relativ:
Augenpulver!
Etwas groesser, als der Standard
Und noch etwas groesser

Absolut:
Text in Groesse 1
Text in Groesse 2
Text in Groesse 3
Text in Groesse 4
Text in Groesse 5
Text in Groesse 6
Text in Groesse 7

Das zu folgender Anzeige fuehrt:

Relativ:

Augenpulver!

Etwas groesser, als der Standard

Und noch etwas groesser

Absolut:

Text in Groesse 1

Text in Groesse 2

Text in Groesse 3

Text in Groesse 4

Text in Groesse 5

Text in Groesse 6

Text in Groesse 7

Willst du nichts dem Zufall ueberlassen, dann kannst du natuerlich auch die Standardschriftgroesse direkt manipulieren:

Text etwas kleiner als
Normal
ausser bei "Normal"

Schriftart

Mit dem Tag laesst sich auch die Schriftart manipulieren.
Allerdings sollte man hiervon nur in Ausnahmefaellen gebrauch machen, denn:

Sieht nicht jede Schriftart auf jedem System gleich aus, auch nicht, wenn sie identische Namen haben. "Times Roman" auf dem Mac sieht nicht genauso aus, wie dieselbe Schriftart auf Windows-Systemen
Nutzt du einen selbsterstellten Font, dann sieht der nur bei dir gut aus. Andere muessten ihn erst downloaden - und das werden die wenigsten Surfer tun.
Und natuerlich sind da noch die, die entweder auf nicht-grafikfaehigen Systemen surfen (muessen), oder mit einem Textbrowser vorlieb nehmen (muessen).

Aus diesen Gruenden erwaehne ich diese Option auch eher der Vollstaendigkeit halber, ausserdem nicht vergessen: der Tag steht auf der Abschussliste des W3C.

Die Syntax fuer die Schriftart-Aenderung ist:

 wobei hier auf exakte Schreibweise des Namens zu achten ist!

Aus den oben genannten Gruenden erfolgt hier kein Beispiel, da ich nicht mit den Faehigkeiten des Nickles-Forums experimentieren moechte.

Aufgabe

Was, meinst du, ist wohl die Standard-Schriftart im WWW?

Schriftfarbe

Nachdem wir jetzt gesehen haben, dass sich sovieles manipulieren laesst, liegt die Frage nahe, ob das auch fuer den letzten Parameter, die Schriftfarbe gilt.
Die Antwort ist: na klar geht das.

Beispiel:

Knallroter Text
Knallgelber Text Macht blind... :-)
Blauer Text

Fuehrt zu:

Knallroter Text
Knallgelber Text Macht blind... :-)
Blauer Text

Wobei hier statt der Hex-Codes wieder die Farbnamen eingesetzt werden koennen.
Aber auch hier gilt das damals gesagte: die Hexcodes sind eindeutig, die Farbnamen nicht.

Zum Abschluss bleibt noch der Hinweis, dass sich alle Parameter auch in einer "font" Anweisung kombinieren lassen. Willst du also z.B. einen Abschnitt in "Baskerville", rot und Schriftgroesse 4 darstellen, so erledigt
 genau diese Aufgabe.

Zum Schluss dieser Einheit kommen wir noch zu den

Trennlinien

Manchmal ist es sinnvoll, Seitenabschnitte nicht nur vom Layout her, sondern auch optisch voneinander zu Trennen. Dann machen sich horizontale Trennlinien gut.
Eine solche Trennlinie wird vom <HR> Tag erzeugt, zu dem eis keinen Ende Tag gibt. Das ist auch nicht noetig, denn es erzeugt automatisch einen neuen Absatz:

Hier ist ein Abschnitt zuende<HR>
Hier beginnt ein Neuer

Fuehrt zu:

Hier ist ein Abschnitt zuende

Hier beginnt ein Neuer

Ob das Tag, wie hier, am Ende des vorigen Abschnitts steht, in einer eigenen Zeile oder am Anfang des folgenden Absatzes, macht keinen Unterschied.

Standardmaessig wird eine Trennlinie immer schattiert dargestellt - in modernen Browsern erscheint sie daher wie "eingraviert".
Soll sie wie eine normale, gezeichnete Linie erscheinen - kein Problem

<HR noshade> fuehrt zum gewuenschten Ergebnis, wie die folgenden zeilen beweisen:

Hier ist ein Abschnitt zuende

Hier beginnt ein Neuer, getrennt durch nicht-schattierte Linie

Ueblicher Weise nimmt eine Linie, wie die Beispiele gezeigt haben, die volle Bildschirmbreite ein. Nun, auch dies kann man aendern. Der Parameter width (von engl. "width"= breite) bewirkt, dass der Browser die Linie so breit zeigt, wie angegeben.
Als Wert hinter width kannst du entweder eine Zahl oder einen Prozentwert eingeben. Eine Zahl bewirkt, dass die Linie soviele Pixel lang ist, wie angegeben, ein Prozentwert bewirkt, dass die Linie soviel Browserfenster-Breite einnimmt, wie angegeben.

Ein Beispiel mag das verdeutlichen:

Nicht-schattierte Trennlinie, 60 Pixel breit <HR noshade width="60"gt;

nicht-schattierte Trennlinie mit 60% Fensterbreite, 5 Pixel "dick"
<hr noshade width="60%">

Nochetwas zeigt dieses Beispiel: erstens lassen sich auch hier alle Parameter kombinieren - so kannst du durch weglassen von noshade die "gravierte" Darstellung erreichen.
Zum Anderen zeigt das Beispiel, dass die Standardausrichtung einer Linie "zentriert" ist. Willst du andere Ausrichtungen, so hilft dir der Parameter ALIGN=, gefolgt von der gewuenschten Ausrichtung.
Linksbuendige Darstellung erhaelst du mit ALIGN="LEFT", rechtsbuendige mit ALIGN="RIGHT"

So, bleibt zum Schluss noch die Hoehe (= Dicke) der Linie. Auch die laesst sich durch einen Parameter beeinflussen. Der Parameter heisst, wie bei der Schrift, size.
Voreinstellung ist 2 Pixel Hoehe - mit size=1 kannst du eine extrem duenne, mit Werten groesser 2 auch dickere Linien erzeugen.

Und wie gesagt: alle Parameter sind untereinander kombinierbar - mit und ohne "noshade".

Der Vollstaendigkeit halber sei noch erwaehnt, dass man mittels des color-Parameters die Linienfarbe aendern kann -- allerdings nur im Internet-Explorer.

Aehnlich wie bei den Bullets begenen dir auf deinen Streifzuegen durch das Web auch schon mal andere, zum Teil sehr kunstvoll gestaltete Trennlinien.
Bei naeherem Hinsehen entpuppen sich diese als Bilder, die per <img> eingebunden wurden. Doch dazu kommen wir (viel) spaeter.

Damit sind wir am Ende dieser Lektion. Bleibt nur, dir noch was zu ueberlassen - die

Hausaufgaben

1. Welchen Nachteil hat der Einsatz des "face" - Parameters im "font" Tag?
2. Wie kannst du sicherstellen, dass eine Ueberschrift in einer ganz bestimmten Schriftart angezeigt wird?
3. Was ist der Unterschied zwischen logischer und physischer Textauszeichnung?
4. Wie kannst du eine farbige Wellenlinie als Trennlinie verwenden?

Wenn du diese Fragen beantwortet hast, wenden wir uns in der naechsten lektion den Tabellen zu, die zu einem sehr wichtigen Werkzeug zur Seitenformtierung in HTML geworden sind.
Die Lektion wird dann auch wieder mehrteilig sein.

Bis dennen,

Volker