Back to the very first page/zurück zur allerersten Seite

Grafiken und Bilder auf Internetseiten einbinden


Startseite
Homepage-Bastler
        
Grundlagen HTML Grafiken einbinden Tabellen Linksammlung
Javaspielereien I Javaspielereien II schwebende
Navigationsleiste
Frames Formulare
Beispielseite I Beispielseite II Beispielseite III Beispielseite IV Frame Beispielseite
Hintergründe Buttons Cliparts    

Den richtigen Pepp bekommt eine Seite erst, wenn nicht nur Text, sondern auch Buttons (anklickbare farbige Flächen), Lines (farbige Trennlinien) und Bilder/Grafiken eingefügt werden.

Jegliche Grafiken, sei es Buttons oder Bilder, unterliegen bestimmten Regeln, damit sie überhaupt von allen Rechnern im weltweiten Internet gesehen werden können. Diese Grafiken dürfen nur im Format jpg oder gif abgespeichert werden. Das heißt, dass wenn Sie ein Bild in einem anderen Format z. B. cdr, psp ... haben, es erst einmal umwandeln müssen. In jedem gängigen Grafikprogramm gibt es diese Möglichkeit, entweder in der Menüzeile bei "Datei speichern unter.." oder "Datei exportieren als...". Es ist darauf zu achten, dass vielfarbige Motive, wie Fotos als jpg-Datei abgespeichert werden. Einfachere Grafiken und Grafiken, die sich später dem Hintergrund der Internetseite anpassen sollen (also einen transparenten Hintergrund haben sollen), als gif-Datei gesichert werden.

Wer selber Grafiken einscannen will, solte darauf achten, dass die Auflösung bei 75 dpi liegt, da dies der durchschnittlichen Darstellung im Netz entspricht. Weiterhin sollte auf eine Datenreduktion geachtet werden. Normalerweise haben Bilder im Internet eine Größe von maximal 20 kilobyte. Je größer eine Bilddatei ist, desto länger sind die Ladezeiten. Für die Berechnung der Ladezeiten müssen alle Bilder einer Seite zusammengerechnet werden. In vielen Fällen ist deshalb weniger mehr, um die Geduld der Betrachter nicht zu strapazieren.

Grafiken muss man heutzutage aber längst nicht mehr selber gestalten oder einscannen. Es gibt zahlreiche Cliparts-CDs im Handel zu kaufen. Auch im Internet bekommt man jede Art von Grafik zu Herunterladen geliefert - in vielen Fällen kostenfrei. Einige Links zu diesen kostenfreien Seiten finden sich in meiner Linksammlunge. Wenn einem eine Grafik gefällt, kann man mit der rechten Maustaste darauf klicken. Im dann erscheinenden Kontextmenü wählt man "Grafik speichern unter..." und speichert sie im entsprechenden Ordner auf seiner Festplatte ab. Bei der Namensvergabe ist es sinnvoll, sich auf 8 Buchstaben plus Endung zu beschränken. Auch empfiehlt sich eine eingängige Bezeichnung, um nachher in der Fülle der heruntergeladenen Bilder noch das Richtige finden zu können.
Hinweis: Bitte beachten Sie auch die jeweiligen Copyrights der Seitenbetreiber.

Einbinden der Grafik im HTML-Text

  • Wer einen HTML-Editor benutzt, hat meistens leichtes Spiel. Hier muss in der Regel nur der Cursor an der richtigen Stelle stehen und anschließend wird in der Bilderliste einfach auf den Namen des Bildes geklickt. Schon steht das Bild auf der Internetseite.

  • Wer dies nicht hat, muss das Bild nach folgendem Muster eingeben.
    <img src="bildname.jpg" width="373" height="551" border="0" alt="Bild von mir">

    Beispiel eines eingefügten Bildes
  • Mit den Befehlen width und height kann ich die Größe des Bildes bestimmen. jedoch ist eine Vergrößerung des Originalbildes meistens nicht möglich, eine Verkleinerung aber kein Problem, wenn man die Verkleinerung proportional eingibt. Das heißt: die Höhe und Breite muss immer im gleichen Verhältnis zueinander stehen, also Reduktion immer um jeweils 10%, 35% ... usw...

  • Mit dem Befehl border wird die Rahmendicke um das Bild bestimmt. Null bedeutet keinen Rahmen.

  • Mit dem Befehl alt kann dem Bild einen Namen oder ein ergänzender Text gegeben werden, der erscheint, wenn der Betrachter einen Moment mit der Maus auf dem Bild stehen bleibt.

  • Rechts sehen Sie ein so eingefügtes Bild mit einem dünnen Rahmen und Hilfstext.


zurück zum Seitenanfang


zurück zur Ausgangsseite Homepage-Erstellung


Zusätzliche Veränderung beim Grafik-Einfügen

  • Diverse Befehlskombinationen innerhalb des Bild-tags ermöglichen eine noch genauere Positionierung des Bildes in einem fortlaufenden Text. Bild ohne ZusatzangabenNormalerweise wird der fortlaufende Text an der Stelle unterbrochen, wo das Bild eingefügt wird und erst wieder nach dem Bild fortgesetzt, wie gerade hier zu sehen ist.

  • Bild mit align="left"Bild mit align="right"Will ich jedoch, dass der Text um das Bild herumfließt, so muss ich innerhalb des Bild-tags eine Befehlszeile eingeben, die folgendermaßen komplett aussieht.
    <img src="bildname.jpg" width="373" height="551" border="0" alt="Bild von mir" align="left">.
    Mit diesem Befehl align="left" erreiche ich, dass das Bild auf der linken Seite angezeigt wird und der Text rechts davon weiterfließt, wie gerade hier zu sehen ist.
    Das Gleiche geht natürlich auch mit der rechten Seite und dem Befehl align="right", wie es ebenfalls hier zu sehen ist.

    Vorsicht: Wenn die Bilder zu groß sind, oder nicht genügend Abstand voneinander haben, können Sie sich übereinanderschieben. Die einzig sichere Lösung für mehrere Bilder incl. Text ist deshalb die Einbindung in einer mehrspaltigen Tabelle, wobei jedes Bild und jeder Text in eine extra Spalte gestellt wird.

  • Benutze ich jedoch keine Tabelle, sondern will das Bild so zwischen den Text stellen, Bild mit align="left" und zusätzlich vspace="15" hspace="15"dann sollte man auch noch den Abstand des Bildes vom Text bestimmen. Dies geht mit den Befehlen vspace und hspace, was dem horizontalen und vertikalen Abstand vom Bild zum Text angibt.
    In unserem Beispiel hier habe ich einen Abstand von jeweils 15 Pixeln gewählt. Die ganze Befehlsfolge sieht wie folgt aus:
    <img src="bildname.jpg" width="373" height="551" border="0" alt="Bild von mir" align="left" vspace="15" hspace="15">
     
     
  • Wenn ich aus der Grafik einen anklickbaren Hyper-Link machen möchte, was bei der Benutzung von Buttons sinnvoll ist, dann setze ich den Verweis einfach vor den Bild-tag und den Verweis-Ende-tag hinter das Bild. Dies würde bei einem Button (Grafik) folgendermaßen aussehen:
    <a href="index.htm"> <img src="button.jpg" width="20" height="20" border="0" alt="Hier geht es zur Startseite" align="left" > Zurück zur Startseite </a>.
    Ein Beispiel sehen Sie hier: Bild als Link mit Hilfe des "a href"s-Befehl Zurück zur Startseite
    Bei obigem Beispiel können Sie sowohl auf den Button als auch auf den unterstrichenen Hyper-Link klicken, um zur Startseite zurück zu gelangen.

zurück zum Seitenanfang


zurück zur Ausgangsseite Homepage-Erstellung


Zurück zur ersten Seite Zurück zum Inhaltsverzeichnis Zum Übersichtsplan/to Sitemap