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

Blockorientierte Elemente in HTML

HTML für Einsteiger - Kapitel 5

von Thomas Salvador.

springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]

Blockorientierte Elemente sind solche, die im Gegensatz zu textorientierten Absätze erzeugen.

D.h. blockorientierte Elemente stellen immer einen eigenen Absatz dar und müssen nicht (und sollten auch nicht) extra als solche erklärt werden.

Wir nennen ein solches Element auch Umgebung, da sie neben ihrer logischen Bedeutung auch Stiländerungen durchführen, etwa Einrückungen oder Schriftänderungen und diese Änderung auf einen (eigenen) Absatz beziehen. Freilich lassen sich diese Änderungen (teilweise) im Inneren überschreiben.

Wir betrachten hier:

address
zum Setzen von Autorenangaben
blockquote
zum Setzen von (längeren) Zitaten
pre
zum Setzen von vorformatiertem Text, der sich z.B. besonders gut für Programmtexte eignet. Z.B. wird die pre hier benutzt, um die Quellen der Beispiele zu zeigen. Man muss sich jedoch klar machen, dass diese Umgebung keiner verbatim Umgebung im Sinne von z.B. TeX entspricht. Es wird sich zeigen, dass Maskierungen u.ä. nach wie vor zu machen sind und dass die sogar nützlich ist.

Address

Der address-Tag kapselt Angaben zur Adresse des HTML-Autoren. Innerhalb des Tag sollten keine weiteren blockorientierten Elemente benutzt werden. Denkbare Angabe sind z.B. Copyright, Name des HTML-Autor, Kontaktadresse, Datum der Erstellung, Datum der letzten Änderung und ähnliches. Beachten Sie, dass textorientierte Elemente zugelassen sind, d.h. Sie können z.B. einen EMail-Verweis setzen.

<address>
  &copy; 1999
  <a href="http://brauchbar.de/contact.php">
  Thomas Salvador</a>
</address>

liefert

Ausgabe auf Ihrem Browser
© 1999 Thomas Salvador

Hinweis: Address wird heute kaum noch verwendet und auch ich sehe keinen tieferen Sinn darin. Es genügt meiner Meinung nach, wenn Sie Ihre Kontaktadresse überhaupt angeben. Address gibt diesem Bereich zwar die logische Bedeutung, stellt ihn dann aber meist auch in irgendeinem Stil dar.

Hinweis-2 mailto: initiiert eine Email. Wir kommen im Abschnitt Verweise und Protokolle nochmal darauf zurück.

Blockquote

Die blockquote-Umgebung ist für längere Zitate z.B. aus fremden Arbeiten gedacht. Bei der Darstellung wird der Text mit eingerückten Rändern dargestellt.

Heinrich Hertz formulierte:
  <blockquote>
    &quot;Wir machen uns innere Scheinbilder oder Symbole der
    &auml;u&szlig;eren Gegenst&auml;nde, und zwar machen wir
    sie in solcher Art, da&szlig; die denknotwendigen Folgen
    der Bilder stets wieder Bilder seien von den
    naturnotwendigen Folgen der abgebildeten Gegenst&auml;nde.&quot;
  </blockquote>
Hier geht es nach dem Zitat weiter...

Ausgabe auf Ihrem Browser
Heinrich Hertz formulierte:
"Wir machen uns innere Scheinbilder oder Symbole der äußeren Gegenstände, und zwar machen wir sie in solcher Art, dass die denknotwendigen Folgen der Bilder stets wieder Bilder seien von den naturnotwendigen Folgen der abgebildeten Gegenstände."
Hier geht es nach dem Zitat weiter...

Hinweis: blockquote wird üblicherweise auch dazu missbraucht, Einrückungen zu erzeugen. Dieser Mißbrauch ist so verbreitet, dass es Browserherstellern empfohlen wird, blockquote nicht mit Stiländerungen (wie kursiv) zu verbinden. Dies würde nicht zuletzt die Notwendigkeit von Korrekturen an enormen Anzahlen bestehender Seiten verursachen. (cite stellt also i.a. kursiv dar, blockquote nicht.)

Ich empfehle Ihnen jedoch, dass Sie, wenn es irgendwie geht, von solchen Aktionen absehen. Es gibt auch andere Möglichkeiten, Einrückungen zu erzeugen, zu denen wir noch kommen werden.

Eine Zeckentfremdung von Tags führt zu extremen Problemen bei Benutzern mit nicht-graphischen Browsern. So existieren akustische Browser, wo ein blockquote durch Veränderungen in der synthetischen Stimme oder durch explizite Erwähnung ('es folgt ein Zitat') erfolgen könnte. Steht im Source nun ein zweckentfremdeter blockquote, so erfolgt die Kennzeichnung fälschlich. Man sollte benutzt niemals Tags benutzen, nur weil sie gerade passend aussehen oder einen passenden Effekt erzeugen, sondern ausschließlich, weil sie logisch passend sind.

Pre

Innerhalb der pre-Umgebung wird der automatische Zeilenumbruch der HTML-Browser abgeschaltet, d.h. die Umbrüche erscheinen dort, wo sie auch in der HTML-Datei stehen. Auch werden Leerzeichen so wie angegeben dargestellt, d.h. mehrfache Leerzeichen entsprechen hier nicht einem einzelnen Leerzeichen.

Die pre-Umgebung realisiert damit eine Umgebung zur Darstellung vorformatierten Textes. Die Darstellung wird üblicherweise in Schreibmaschinenschrift vorgenommen.

Wichtig: Die pre-Umgebung realisiert (nur) vorformatierten Text, keine verbatim-Umgebung. D.h. auch innerhalb der pre-Umgebung müssen Sonderzeichen maskiert werden.

Es wäre also falsch zu sagen, in einer pre-Umgebung wird alles so ausgegeben, wie es in der HTML-Datei erscheint.

<pre>
Wenn Sie diese Umlaute ä,ö,ü sehen, so ist das reiner Zufall.
Diese jedoch &auml;,&ouml;,&uuml; sind korrekt.
</pre>

liefert

Ausgabe auf Ihrem Browser
Wenn Sie diese Umlaute ,, sehen, so ist das reiner Zufall. Diese jedoch ä,ö,ü sind korrekt.

(Hinweis: Der Autor hat einen ASCII-Editor benutzt, unter der verbreiteten ANSI-Oberflächen (wie Windows) werden die Umlaute des ersten Beispieles i.a. falsch gesetzt. Dies dient der Verdeutlichung der Korrektheit der Behauptung und der Wichtigkeit der richtigen Maskierung. Betrachten Sie das Beispiel ggf. unter einem DOS-Browser, dort sollten die Umlaute beidesmal richtig gesetzt sein. Das erste Mal - man kann es nicht oft genug sagen - ist Zufall.)

Der enorme Vorteil liegt darin, dass damit auch Verweise und Textstile innerhalb der pre-Umgebung gesetzt werden können.

<pre>
Falsch:  Durch <b> und </b> wird fette Schrift gekapselt.
Richtig: Durch &lt;b&gt; und &lt;/b&gt; wird fette Schrift
         gekapselt.
</pre>

liefert

Falsch:  Durch  und  wird fette Schrift gekapselt.
Richtig: Durch <b> und </b> wird fette Schrift
         gekapselt.

Sie sehen, dass im fehlerhaften Beispiel "und" fett dargestellt wird, anstelle, dass die Stilsteuerung ausgegeben wird. Dies kann nutzbringend eingesetzt werden.

<pre>
  <code>function</code> test(a: string): boolean;
</pre>

liefert

Ausgabe auf Ihrem Browser

function test(a: string): boolean;

Im Source zur Angabe des Source der Beispiele muss dafür lediglich die Ersatzdarstellung ebenfalls maskiert dargestellt werden.

Wir wissen beispielsweise, dass &uuml; die Ersatzdarstellung für "ü" ist. Um die Ersatzdarstellung vom Browser anzeigen zu lassen, müssen wir auch den Ampersand "&" maskieren. D.h. die im Browser dargestellte Ersatzdarstellung wird mit &amp;uuml; erzeugt.

Dies lässt sich auch alles kombinieren, um etwa Beispiele übersichtlicher zu machen. Betrachten wir noch einmal den HTML-Code zum Beispiel des Zitates, diesmal werden Tag und Ersatzdarstellungen hervorgehoben. Dabei wird der Tag mit dem Stil code gekapselt, den wir bei logischen Textstilen kennengelernt hatten. Die Ersatzdarstellungen werden in einer anderen Farbe dargestellt. Dabei kommt font color zum Einsatz, den wir im Abschnitt Textfarbe besprochen hatten.

Heinrich Hertz formulierte:

<blockquote>
  &quot;Wir machen uns innere Scheinbilder  oder Symbole der
  &auml;u&szlig;eren Gegenst&auml;nde, und zwar machen wir sie in
  solcher Art, da&szlig; die denknotwendigen
  Folgen der Bilderstets wieder Bilder seien von den
  naturnotwendigen Folgen der abgebildeten Gegenst&auml;nde.
&quot;
  </blockquote>
  Hier geht es nach dem Zitat 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 5. Ausgabe.

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