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

Grafik in HTML

HTML für Einsteiger - Kapitel 8-1

von Thomas Salvador.

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

Prinzipiell kann jedes Grafikformat verwendet werden. Besonders verbreitet sind die von den meisten Browser direkt unterstützten Formate GIF und JPG. Daher empfiehlt es sich, wenn man sich auf diese Formate beschränkt. Sobald die Unterstützung für das Format PNG fortgeschritten ist, sollte man GIF den Rücken kehren. PNG ist GIF weit überlegen und zudem lizenzfrei verfügbar.

Versteht ein Browser ein Format nicht direkt, so wird i.a. eine externe Applikation gestartet oder die Datei lokal gespeichert. Näheres hatten wir in anonyme Verweise besprochen.

Dies ist Teil 1 von 2 des Kapitels.

Teil 1:

Grundlagen zur Grafik

Grafik wird über das img-Element eingebunden. Die einfachste Form ist

<img src="URL" />

wobei die URL beliebig ist, d.h. es kann eine Grafik eingebunden werden, die sich im selbem Verzeichnis befindet, aber auch eine Grafik, die sich irgendwo im Netz befindet.

(Kennt man die genaue Lokalisation und ist sich recht sicher, dass die Grafik dort bleibt, wo sie ist, kann man sie also von dort holen und eigene Kapazitäten sparen. Der Nachteil bei dieser Vorgehensweise ist, dass zu dem Server erst eine Verbindung aufgebaut werden muss. Befindet sie sich im selben Verzeichnis oder zumindest auf demselben Server, so besteht die Verbindung bereits. Das wiederum heißt, dass die Grafik insgesamt schneller verfügbar ist.)

Alternative Darstellung, Beschreibung

Wie wir bereits in einem frühen Abschnitt über Plattformunabhängigkeit besprochen haben, gibt es nicht-grafische Browser (oder der Benutzer hat z.B. die Grafik abgeschaltet). In diesem Fall ist also eine Ersatzdarstellung unbedingt erforderlich:

<img src="einbild.jpg" alt="Ein Bild" />

D.h. die alternative Darstellung wird im Attribut alt untergebracht. (Die Verwendung dieses Attributs wird vom Autor unbedingt empfohlen.)

Ausdehnung, Vergrößerung, Verkleinerung

Grafiken können erst dann geladen werden, wenn die HTML-Datei geladen wurde (sonst sind ja die Referenzen noch nicht bekannt). Üblicherweise stellen Browser die HTML-Datei sofort nach dem Empfangen dar, damit der Benutzer schon mal mit der Betrachtung anfangen kann.

Die Grafiken werden dabei durch einen kleinen Platzhalter mit, wenn angegeben, der Beschreibung (aus alt) dargestellt. Wurde nun eine Grafik übertragen, so wird das komplette Browserfenster neu gezeichnet. Dies liegt daran, dass i.a. die Ausdehnungen der Grafik nicht mit denen der bislang dargestellten Ersatzdarstellung übereinstimmen, und somit etwa der Text reformatiert werden muss.

Dies kann störend wirken.

Es besteht daher die Möglichkeit dem Browser in der HTML-Datei die Breite und die Höhe der Grafik über die Attribute width und height mitzuteilen. Ein diese Attribute auswertender Browser wird also die Ausdehnung sofort entsprechend wählen. Das Einladen der Grafik erfolgt dann in diese Bereiche und das Fenster muss nicht neu gezeichnet werden.

<img src="einbild.jpg"
     alt="Ein Bild" width="80" height="60" />

Die Attribute können auch dazu verwendet werden, um Bilder zu vergrößern oder zu verkleinern. Dies wird allerdings nicht von jedem Browser vernünftig dargestellt.

<img src="einbild.jpg"
     alt="Ein Bild" width="40" height="30" />

Die sicher naheliegende Idee diese Funktion auszunutzen, um Übersichten verfügbarer Bilder zu liefern, erweist sich schnell als ungünstig. Man mache sich klar, dass der Browser die Skalierung vornimmt, er empfängt freilich die gesamte Grafik. Daher ist zumindest aus den Gründen Übertragungszeit und -kosten der übliche Weg benutzerfreundlicher, bei dem zu den Bildern von vornherein zusätzlich kleine Bildchen zur Verfügung gestellt werden. Diese dienen i.a. als Icons, bei deren Anklicken die eigentliche (größere) Grafik geladen wird.

Ausrichten der Grafik

Grafiken werden, wenn nicht speziell anders erklärt, als Bestandteil des Fließtext aufgefasst. Mit der Ausrichtung kann beschrieben werden, wo die Grafik an den Fließtext angelegt wird. Hierfür ist das align Attribut zuständig. Gültige Werte sind top, middle und bottom.

Dies ist align="top"vergrößerter Button top-aligned

Dies ist align="middle"vergrößerter Button middle-aligned

Dies align="bottom"vergrößerter Button bottom-aligned

Sie sehen, dass weder middle, noch bottom wirklich schön sind. Das liegt an der Unterlänge des g von align. Das Alignment ist relativ zur Baseline. Das bekommt man auf anderen Wegen, die wir noch kennenlernen werden, besser hin.

Umfließen von Grafik

Grafiken werden, wenn nicht speziell anders erklärt, als Bestandteil des Fließtext aufgefasst. Soll eine Grafik aus dem Fließtext herausgenommen werden, so ist dies über das Attribut align mit den möglichen Werten left und right anzugeben. Die Grafik wird dann entsprechend an den linken bzw. rechten Rand gesetzt.

In dieser Form ist die Kontrolle unvollständig, d.h. der Browser wählt eine "geeignete" Position für die Grafik. Dabei kann es auch vorkommen, dass Grafiken direkt nebeneinander plaziert werden. Die kann durch einen erzwungenen Zeilenumbruch umgangen werden. Dabei wird dem br-Tag das Attribut clear mit den möglichen Werten left, right und all mitgegeben.

<br clear="left" />
führt dazu, dass die nächste Zeile frühestens nach dem Bild am linken Rand beginnt.

<br clear="right" />
führt dazu, dass die nächste Zeile frühestens nach dem Bild am rechten Rand beginnt.

<br clear="all" />
führt dazu, dass die nächste Zeile frühestens dort beginnt, vor weder am linken noch am rechten Rand ein Bild ist.

Liegt an der angegeben Seite kein Bild, dies ist der Fall, wenn etwa der Fließtext höher als das Bild ist, dann wirkt die Zeilenumbruch wie der nicht-attributierte <br> Umbruch.

Beispiel:

Die Bilder werden rechts und links gesetzt, jeweils mit einem <br /> dazwischen. Ein Bild rechts Button
Ein Bild links Button
Ein Bild rechts Button
Nochmal rechts Button
Die Bilder werden rechts und links gesetzt, jeweils mit einem <br clear=all> dazwischen. Ein Bild rechts Button
Ein Bild links Button
Ein Bild rechts Button
Nochmal rechts Button

Man sieht rechts klar die Wirkung von clear. Ohne clear kann es soweit gehen, dass der Browser die Button über den Text legt, einfach weil nicht genug Platz ist.

Abstand zum Fließtext

Fließtext liegt üblicherweise eng an einer Grafiken an bzw. umfließt die Grafik recht nahe. Mit den Attributen hspace bzw. vspace kann der horizontale bzw. vertikale Mindestabstand zwischen Grafik und Text angegeben werden.

<img src="einbild.jpg" alt="Ein Bild" width="120" height="90"
     hspace="40" vspace="30" />

Beispiel (übertriebene Werte):

ohne Abstände mit Abständen (hspace=32, vspace=10)
Button Fließtext liegt üblicherweise eng an einer Grafiken an bzw. umfließt die Grafik recht nahe. Mit den Attributen hspace bzw. vspace kann der horizontale bzw. vertikale Mindestabstand zwischen Grafik und Text angegeben werden. Button Fließtext liegt üblicherweise eng an einer Grafiken an bzw. umfließt die Grafik recht nahe. Mit den Attributen hspace bzw. vspace kann der horizontale bzw. vertikale Mindestabstand zwischen Grafik und Text angegeben werden.
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 8. Ausgabe.

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