SUCHE MIT Google
Web virtualuniversity.ch
HOME DIDAKTIK ECDL ELEKTRONIK GUIDES HR MANAGEMENT MATHEMATIK SOFTWARE TELEKOM
DIENSTE
Anmeldung
Newsletter abonnieren
Sag's einem Freund!
VirtualUniversity als Startseite
Zu den Favoriten hinzufügen
Feedback Formular
e-Learning für Lehrer
Spenden
Autoren login
KURSE SUCHEN
Kurse veröffentlichen

Suche nach Datum:

Suche mit Schlüsselwort:

Suche nach Land:

Suche nach Kategorie:
PARTNER
ausbildung24.ch - Ausbildungsportal, Seminare, Kursen... 

 
HTMLopen.de - Alles was ein Webmaster braucht

 
PCopen.de - PC LAN Netze und Netzwerke - alles was ein IT Profi und Systemtechnicker braucht

GUIDES UND TUTORIAL

Bilder

Eine Fehlermeldung?

Bilder und Grafiken können auf zwei Arten in HTML-Dokumente eingebunden werden, einmal über Hyperlinks, hier wird die Grafik erst bei Anwählen desLinks geladen und über ein Anzeigeprogramm dargestellt, oder als sogenanntes"inline image", hier befindet sich dir Grafik im Dokument zwischenden Textzeilen und wird direkt bei Laden des Dokumentes mitgeladen und angezeigt.Unterstützt werden derzeit die Formate GIF (.gif), JPeg (.jpg) und X Bitmap (.xbm). Über die Einbindung externer Programmeläßt sich die Darstellungsfähigkeit vieler Browser erweitern. Der beim Attribut ALT angegebene Text wird ausgegeben, wenn das Bild nicht dargestellt werden soll oder kann. Gibt man 'ALT=""' an, entfällt der Hinweis '[IMAGE]' beim Textbrowser Lynx.

Um den Speicherbedarf der Bilder zu reduzieren, kann man die passende Kompression wählen:

  • Bei Photos is JPEG mit einem passenden Kompressionsfaktor güstig.
  • Bei flächigen Bildern eignet sich das GIF-Format besser.
  • Wenn das Bild trotzdem zu groß ist, ein kleines Bild als Link anbringen.

Der Befehl zum Einbinden von Bildern lautet

                                        <IMG SRC="images/Bild-URL" ALIGN="Textansatz" ALT="Alternativdarstellung" 
                                          WIDTH="www" HEIGHT="hhh" BORDER="Randbreite"
                                          VSPACE="vvv" HSPACE="hhh">
                                        
  • Bild-URL: Dies ist ein URL auf die Grafik, im einfachsten Fall ist es eine lokale Datei, es kann aber auch ein Link auf eine Grafik auf einem weit entfernten Rechner sein.
  • Textansatz: Dieser Wert gibt an, wo die dem <IMG> nachfolgenden Textzeilen beginnen sollen, an der Oberkante, in der Mitte oder der Unterkante des Bildes. Mögliche Werte sind LEFT, RIGHT, TOP, MIDDLE oder BOTTOM. Diese Angabe ist optional, der voreingestellte Wert ist BOTTOM.
  • Alternativdarstellung: Gibt an, was bei nicht-grafikfähigen Browsern oder bei abgeschalteter Bilddarstellung an Stelle der Grafik gezeigt werden soll.Bei neueren Browserversionen wird der Text auch gezeigt, wenn man den Mauszeiger über die Grafik bewegt. Hier sollte in wenigen Worten erklärt werden, was das Bild darstellt. Auch diese Angabe ist optional, voreingestellt ist das Wort IMAGE. Will man keine Angabe, schreibt man ALT="".
  • Mit WIDTH und HEIGHT kann optional die Bildgröße in Pixeln angegeben werden. Das erleichtert dem Browser die Berechnung der Seitenaufteilung, da er die Bildgröße schon vor dem Laden des Bildes kennt. Die meisten Browser können auch das Bild entsprechend der Angaben vergrößern oder verkleinern. Unten einmal normal, einmal verkleinert (und fast unlesbar):
  • Die Parameter VSPACE und HSPACE geben an, wieviele Pixel Abstand zwischen Bild und umgebenden Text vertikal und horizontal frei bleiben sollen.
  • Der Parameter BORDER gibt schließlich an, wie breit der farbige Rand sein soll, wenn das Bild als Link dient. Will man keinen Rand, gibt man 0 an.
Hier zweimal das gleiche Bild, einmal Originalgröße und einmal auf 150 x 70 Pixel skaliert:

Der Textansatz bedarf einer weiteren Erläuterung, denn die Parameterwerte LEFT und RIGHT unterscheiden sich in der Darstellung erheblich von TOP, MIDDLE und BOTTOM. Bei diesen drei Werten wird jeweils nur eine Textzeile neben dem Bild angeordnet und aller weiterer Text kommt unter das Bild. Im Browser-Fenster sieht das dann so aus:

Beim Textansatz RIGHT und LEFT läuft dagegen der Text um das Bild herum, bei LEFT ist das Bild auf der linken Seite und der Text rechts, bei RIGHT umgekehrt. Man kann dies verwenden, um die Anordnung von Text und Bildern etwas aufzulockern. Man muß dabei das Bild auch nicht, wie im folgenden Beispiel, an den Textanfang setzen, sondern kann es auch mitten in den Text plazieren.

Wenn der Text zu knapp am Bild vorbei läuft, kann mit den Parametern VSPACE und HSPACE mehr "Luft" um das Bild geschaffen werden.

Man kann die verkleinerten Bilder auch zu Hyperlinks machen und beim Anklicken dieses Vorschaubildes ('Thumbnail') dann das Bild in voller Größe zeigen. In der Regel wird man zum kleinen Bild noch die Größe des Originals dazuschreiben (z. B. 'Original 1024 x 512 Pixel, 245 KByte').

Grafiken können also auch innerhalb von Links verwendet werden, so daß ein Anwählen der Grafik zu einem neuen Dokument führt. Dies wird folgendermaßen realisiert:

                                        <A HREF="anderes_Dokument.html"><IMG SRC="boom.gif"> Click Me!</A>
                                        
Hier sind sowohl das Wort "Click!" als auch die Grafik sensitiv. Die Grafil erhät in diesem Fall eine farbige Umrandung in der Farbe, die auch für den Linktext verwendet wird (links unten). Will man dies nicht, fügt man dem IMG-Tag die Option BORDER=0 hinzu (rechts unten).
Ein Beispiel:

Click Me!           Click Me!

Man sollte mit eingebundenen Grafiken sorgfältig umgehen. Insbesondere bei sehr langsamen Übertragungsleitungen sind lange Ladezeiten für Bilder ein Ärgernis. Viele Browser geben dem Benutzer auch die Möglichkeit, das automatische Laden von eingebundenen Grafiken auszuschalten und diese erst auf Wunsch anzuzeigen. Mehr zu Grafiken später.

Aufzählungen

Man kann eine Aufzählung statt mit <UL> auch mit Bildern als Aufzählungpunkte anlegen.

Rot ist die Liebe ...
Grün ist die Hoffnung ...
Blau hab' ich vergessen ....

Bildbeschreibung

Will man wirklich mehr Text neben einem Bild stehen haben und diesen Text auch genau plazieren, dann kann man zu einem kleinen Trick greifen. Man bastelt eine Tabelle, die nur eine Zeile und zwei Spalten besitzt. Das Bild kommt in die eine Spalte, der Text in die andere.

Der Trick mit dem blinden GIF

Um Satzgestaltung zu erreichen, z. B. den Einzug bei der ersten Zeile, positioniert man ein transparentes GIF-Bild der Größe 1 x 1 Pixeln vor den Text und gibt ihm mit WIDTH und HEIGHT die entsprechende Größe. Auch, um die Abstände zwischen Absätzen zu steuern, kann man das blinde GIF verwenden:
Bilder kann man auch als Links verwenden. Wer kein 'klickbares Bild' verwenden will, kann auch Einzelbilder nebeneinander plazieren, es darf dann aber kein Zeilenwechsel zwischen den Bildern vorkommmen, sonst gibt es bei einigen Browsern eine Lücke. Durch die Angabe von 'BORDER=0' wird der bei Links sonst übliche farbige Rand unterdrückt.

Hintergrund-Bilder

Eine weitere Anwendung von Bildern ist das Einbinden eines Hintergrundes. Dies geschieht durch den Parameter BACKGROUND="Bilder-Url" im BODY-Tag.

<BODY BACKGROUND="URL"> .... >>

Der Hintergrund wird durch ein Bild ersetzt, das durch die URL spezifiziert wird. Das Bild wird 'gekachelt', d. h. auf die Ausdehnung des Fensters neben- und untereinander wiederholt. Das kann dazu führen, daß bei der typischen Windows-Darstellung von 600 x 800 Pixeln das Hintergrundbild nur einmal erscheint, aber auf der Workstation mit hoher Auflösung mehrfach.

Das Hintergrundbild muß übrigens nicht groß sein, 8 Pixel hoch und 3000 Pixel ist ein guter Wert (die Breite reicht auch für Workstations aus). Wichtig ist jedoch, daß der Hintergrund nicht zu aufdringlich ist und die Lesbarkeit des Textes verschlechtert.

Man kann aber auch einen Hintergrund so gestalten, daß sich das Bild gut kacheln läßt, oberer und unterer bzw. rechter und linker Rand müssen dann genau zueinander passen. Man erhält so einen Textur-Effekt. Nebenbei: Das Hintergrundbild bei Windows macht es genauso.

Wichtig ist, daß man trotz Hintergrundbild auch die Hintergrundfarbe festlegt - und zwar im Farbton des Hintergrundbildes. Der Browser baut nämlich zuerst einen leeren Schirm in der Standard-Hintergrundfarbe auf. Dann wird der Hintergrund gemäß der Hintergrundfarbe im BODY-Tag eingefärbt. Das Hintergrundbild kommt meist erst viel später. Wenn der Hintergrund schon passend gefärbt ist, erscheint der Übergang sanfter.

DIPLOMARBEITEN UND BÜCHER

Diplomarbeiten zum Runterladen:

Suche im Katalog:
Architektur / Raumplanung
Betriebswirtschaft - Funktional
Erziehungswissenschaften
Geowissenschaften
Geschichtswissenschaften
Informatik
Kulturwissenschaften
Medien- und Kommunikationswissenschaften
Medizin
Psychologie
Physik
Rechtswissenschaft
Soziale Arbeit
Sozialwissenschaften


JOBS
HOME | E-LEARNING | SITEMAP | LOGIN AUTOREN | SUPPORT | FAQ | KONTAKT | IMPRESSUM
Virtual University in: Italiano - Français - English - Español
VirtualUniversity, WEB-SET Interactive GmbH, www.web-set.com, 6301 Zug

Partner:   Seminare7.de - PCopen.de - HTMLopen.de - WEB-SET.com - YesMMS.com - Ausbildung24.ch - Manager24.ch - Job und Karriere