Grafiken (Bilder)

Zurück zur Übersicht

Heute lernen wir, wie man Grafiken (Bilder) in HTML-Seiten einfügt.

1. Grafik einbinden (allgemein)

Um eine Grafik in eine HTML-Datei einzubinden, referenziert man die gewünschte Grafikdatei an der gewünschten Stelle im HTML-Quelltext. Geeignete Dateiformate für WWW-gerechte Grafiken sind GIF und JPEG, allmählich aber auch PNG.

Beispiel:

Erläuterung:

Die Grafikreferenz beginnt mit <img src= (img = image = Bild, src = source = Quelle). Hinter dem Istgleichzeichen gibt man den Namen der Grafikdatei an, auf die verwiesen wird (in den Beispielen: "datei.gif" bzw. "datei.jpg"). Der Dateiname muß in Anführungszeichen stehen. Der Befehl für die Grafikreferenz endet mit >.

Die obigen Beispiele setzen voraus, dass sich die Grafikdatei im gleichen Ordner befindet wie die HTML-Datei, in der die Grafik referenziert wird. Man kann auch eine Grafik aus einem anderen Ordner und sogar eine beliebige Grafik aus dem WWW einbinden.

Um eine Grafik alleine - ohne Text daneben - anzuzeigen, schreibst Du die Grafikreferenz am besten in einen eigenen Absatz. Also zum Beispiel: <p><img src="datei.gif"></p>.

AUFGABE

Dein Steckbrief soll ein Foto vom Fest zur Verleihung des Titels "Schule ohne Rassismus" enthalten. Die entsprechende Grafik-Datei befindet sich unter dem Namen DBG.jpg bereits in Deinem Ordner.

Füge nun direkt unter dem Absatz "Meine Schule" in Deinem Steckbrief einen neuen Absatz (<p>...</p>) ein.
Schreibe dann in diesen Absatz die Grafikreferenz, also z. B. <img src="DBG.jpg">.
Speichere Deine HTML-Datei ab und kontrolliere im Browser (Aktualisieren!), ob die Grafik (das DBG-Foto) angezeigt wird.

2. Grafik aus einem anderen Ordner einbinden

Wenn sich die gewünschte Grafik nicht in demselben Ordner befindet wie die HTML-Datei, muss man (wie bei Verweisen) den genauen Pfad zur gewünschten Grafik-Datei angeben.

Beispiele:

Erläuterung:

Für die Grafikreferenz gelten der HTML-Befehl und die Bedingungen für Grafik einbinden (allgemein). Die Grafikreferenz besteht aus der relativen Pfad-Angabe und dem Dateinamen der Grafikdatei.

Bei relativen Pfad-Angaben ist der Ordner, in dem die HTML-Datei steht, die die Grafikreferenz enthält, der Bezugspunkt (im folgenden "aktueller Ordner" genannt).

Wenn sich die Grafikdatei in einem Ordner unterhalb des aktuellen Ordners befindet, notierst Du den Namen des Unterordners, dann einen Schrägstrich, dann den Namen der Grafikdatei. Wenn sich die Grafikdatei im nächsthöheren Ordner zu dem aktuellen Ordner befindet, notierst Du zwei Punkte, einen Schrägstrich und dahinter den Namen der Grafikdatei. Bei weiter entfernten Grafikdateien musst Du mehrere Ordner aneinanderreihen, so wie in den obigen Beispielen.

Verwende zum Trennen der Ordner-Namen immer den einfachen Schrägstrich, auch bei Windows. Der WWW-Browser benötigt die Angabe in Form von einfachen Schrägstrichen.

AUFGABE

Füge irgendwo in Deinem Steckbrief die Grafik SOR.jpg ein. Sie befindet sich im Ordner 00_Alle7b. Beachte, dass Du den richtigen Pfad (von Deinem Ordner aus) angeben musst!

3. Grafik aus dem WWW einbinden

Jede Grafik, die auf einer Internetseite vorkommt, ist eine eigene Datei und hat deshalb eine eigene Internet-Adresse. Du kannst jede beliebige Grafikdatei, deren genaue Internet-Adresse Du kennst, in Deine HTML-Seite einbinden.

Beispiel:

Erläuterung:

Für die Grafikreferenz gelten der HTML-Befehl und die Bedingungen für Grafik einbinden (allgemein). Die Grafikreferenz besteht aus der Internet-Adresse der Grafikdatei.

Wenn Du eine Grafik aus einer fremden Internetseite einbindest, frage den Autor der betreffenden Seiten vorher, ob er damit einverstanden ist (Urheberrecht).

Bei Grafikreferenzen von fremden Internetseiten musst Du auch damit rechnen, daß die Grafikreferenz plötzlich nicht mehr funktioniert, weil auf der fremden Internetseite womöglich die Grafik entfernt oder umbenannt wurde.

4. Grafik als Verweis

Bei einem Verweis muss immer eine Verweisbeschreibung angegeben werden, also ein Text, der dem Anwender als anklickbar dargestellt wird. Anstelle eines Textes kann man jedoch auch eine beliebige Grafik angeben. Dann ist die gesamte Grafik anklickbar, und beim Anklicken der Grafik wird der Verweis ausgeführt.

Beispiel:

Anzeige im Browser:

Erläuterung:

Für das Setzen des Verweises gilt das Schema für Verweise in HTML. Das Verweisziel kann ein beliebiges erlaubtes Ziel sein. Anstelle des Verweistextes wird einfach eine Grafik eingebunden.

5. Weitere Grafiken in Deinem Steckbrief

ZUSATZ-AUFGABEN

Füge in Deinem Steckbrief weitere Grafiken ein, die Du zuvor aus dem WWW in Deinen Ordner heruntergeladen hast, oder Du gibst die genaue Internetadresse der gewünschten Grafikdatei an. Wenn Du willst, kannst Du auch Grafiken als Verweise verwenden.

Zurück zur Übersicht

 © 2024 - Christian Bauer - cn.bauer@gmx.de