HTML Basics Tutorial: Einbau von Grafiken (Teil 1)

Super, jetzt können wir ja schon richtig gute Webseiten erstellen! Doch etwas fehlt noch um sie richtig "schön" zu machen: Ein Bild! Bilder und Grafiken in Webseiten einzubauen ist vom Befehl her etwas komplizierter, doch das dürfte für dich inzwischen kein Problem mehr sein. Hier ist der Befehl:

Hier komme ich leider nicht darum herum auch die Profi-Variante zu erklären, da du mich sonst danach fragen würdet - aber das ist gut so, da die Profi-Variante mehr Möglichkeiten bietet. Natürlich kannst du aber auch die Standard-Variante benutzen, sie funktioniert ebenfalls!

Fangen wir mit dem Standardbefehl an. Als erstes fällt auf, daß es wie immer einen Anfang und ein Ende gibt mit dazugehörigem Befehl. Alles zwischen diesen Befehlen beeinflußt das anzuzeigende Bild. img src="bild.jpg" ist der Inhalt. Was soll das? Ganz einfach: img ist eine Abkürzung für das englische "image" (Deutsch: Bild) und "src" die Abkürzung für "source" (Deutsch: Quelle). Übersetzt man alles in das Deutsche, versteht man den Befehl sofort:
Bild Quelle="bild.jpg"

Leider muß man das ganze dennoch in Englisch schreiben :)
Aber wir haben ja noch einen Teil des Befehls ausgelassen: "bild.jpg". Dies steht, wie du bestimmt schon geahnt hast, für die Quelle des Bildes. Das Programm muß wissen wo es das Bild finden kann und wie es heißt. In unserem Beispiel heißt es "bild.jpg". Das .jpg ist die Endung für eine Art von Bild, die besonders geeignet für Webseiten sind. Neben .jpg werden auch oft .gif oder .png benutzt. Welches mann benutzen muss, erfährt man am Namen der Bilddatei. Es gibt auch andere Bildformate, doch diese drei dürften zu Beginn die wichtigsten sein.

So, damit das Programm unser Bild auch finden kann, sollte das Bild am gleichen Ort sein, wo auch unsere Webseite ist (z.B. webseite1.html aus Tutorial1).

Ich sehe nur ein rotes X und kein Bild...

Stelle sicher, daß du den Namen der Bilddatei fehlerfrei geschrieben hast und stelle auch sicher, daß sich die Bilddatei im gleichen Ordner wie die Webseite befindet! Sollte deine Bilddatei nicht im aktuellen Ordner sein, musst du einen korrekten Dateipfad angeben, was zu Beginn manchmal etwas schwierig ist.

Wo bekomme ich Bilder her?

Im Internet gibt es viele Seiten, wo man sich hübsche Bilder herunterladen kann. Alternativ kann man sich mit einem Mal- oder Grafikprogramm auch selber Bilder erstellen. Auch auf CDs von Zeitschriften findet man Bilder. Aufpassen sollte man jedoch dann, wenn die Bilder ein Copyright haben und man sie kommerziell verwenden will!

Dies war die einfachste Methode Bilder einzubauen. Im nächsten Abschnitt wirst du einige sehr praktische Ergänzungen hierfür kennenlernen, die dir viel mehr Möglichkeiten eröffnen werden.

HTML

CSS

Suchen:

Webdesign

Sonstiges

PlanetHTML

HTML Basics Tutorial

1.5. Einbau von Grafiken (Teil 1)