SELFHTML: HTML / Grafik / Grafiken einbinden

SELFHTML/Quickbar HTML Grafik in HTML

	Grafiken einbinden
	Grafik referenzieren (allgemein) Grafik in anderem Verzeichnis referenzieren Grafik auf einem anderen WWW-Server referenzieren Alternativer Text Rahmen um Grafiken Namen für Grafiken URL-Adresse mit Beschreibung für Grafiken Weitere Möglichkeiten

Grafik referenzieren (allgemein)

Anzeigebeispiel: So sieht's aus

Um Grafiken in Ihre HTML-Dateien einzubinden, referenzieren Sie die Grafikdateien an gewünschten Stellen im HTML-Quelltext. Geeignete Dateiformate für WWW-gerechte Grafiken sind GIF und JPEG (siehe hierzu WWW-gerechte Grafiken).

Beispiel:

<img src="datei.gif">
<img src="datei.jpg">

Erläuterung:

Die Grafikreferenz beginnt mit <img src= (img = image = Bild, src = source = Quelle). Hinter dem Istgleichzeichen geben Sie 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 >.

Beachten Sie:

Die obigen Beispiele setzen voraus, daß sich die Grafikdatei im gleichen Verzeichnis befindet wie die HTML-Datei, in der die Grafik referenziert wird. Sie können auch Grafiken in anderen Verzeichnissen und sogar beliebige Grafiken auf anderen WWW-Servern referenzieren.

Wenn Sie HTML-Dateien für's WWW erstellen, sollten Sie darauf achten, daß die darin referenzierten Grafiken nicht zu groß sind, denn aufwendige Grafiken verursachen lange Ladezeiten und Mißmut beim Anwender. Reduzieren Sie in Ihren Grafiken gegebenenfalls die Anzahl der Farben, verringern Sie die Bildgröße und stopfen Sie nicht zu viele Grafik-Referenzen in eine einzige HTML-Datei. In jedem Fall sollten Sie Breite und Höhe der Grafik mit angeben.

Um eine Grafik alleine - ohne Text daneben - anzuzeigen, notieren Sie am besten vor und nach der Grafikreferenz eine Absatzschaltung für Textabsätze. Also zum Beispiel: <p><img src="datei.gif"></p>. Ansonsten können Sie Grafiken beschriften oder Text um die Grafik fließen lassen.

Unter grafischen Benutzeroberflächen wie MS-Windows, Macintosh, OS/2 und anderen können WWW-Browser die referenzierten Grafiken direkt im Anzeigefenster anzeigen. WWW-Browser für textorientierte Oberflächen (z.B. DOS-Textmodus, Unix-Textmodus) müssen ein separates Grafik-Betrachtungsprogramm aufrufen, um eine Grafik anzuzeigen.

Wenn Sie wichtige HTML-Dateien Ihres WWW-Projekts, etwa die Einstiegsseite, vollständig grafisch gestalten, also fast keinen Text, dafür nur Grafikreferenzen verwenden, erschweren Sie automatischen Suchprogrammen, die von vielen Suchdiensten im WWW eingesetzt werden, die Identifizierung des Inhalts Ihres Projekts. Im Zweifelsfall müssen Sie abwägen, was Ihnen wichtiger ist: das grafische Erscheinungsbild oder die inhaltliche Identifizierbarkeit. Falls Sie wichtige HTML-Dateien Ihres WWW-Projekts vorwiegend durch Grafikreferenzen gestalten, sollten Sie zumindest die Möglichkeit der Meta-Informationen nutzen.

Grafik in anderem Verzeichnis referenzieren

Anzeigebeispiel: So sieht's aus

Bei größeren Projekten ist es sinnvoll, die Dateien auf mehrere Verzeichnisse zu verteilen. Dies dient der besseren Übersicht. Damit die Projekte auf andere Rechner mit anderen Verzeichnisstrukturen übertragbar bleiben, sollten Sie aber bei Grafikreferenzen mit relativen Pfadnamen arbeiten.

Beispiel:

<img src="verzeichnis/datei.gif">
<img src="verzeichnis/unterverz/datei.gif">
<img src="../datei.gif">
<img src="../../../datei.gif">
<img src="../woanders/datei.gif">

Erläuterung:

Für die Grafikreferenz gelten der HTML-Befehl und die Bedingungen für Grafiken referenzieren (allgemein). Die Grafikreferenz besteht aus der relativen Pfadangabe und dem Dateinamen der Grafikdatei.

Bei relativen Pfadnamen ist das Verzeichnis, in dem die HTML-Datei steht, die die Grafikreferenz enthält, der Bezugspunkt (im folgenden "aktuelles Verzeichnis" genannt).

Wenn sich die Grafikdatei in einem Verzeichnis unterhalb des aktuellen Verzeichnisses befindet, notieren Sie den Namen des Unterverzeichnisses, dann einen Schrägstrich, dann den Namen der Grafikdatei. Wenn sich die Grafikdatei im nächsthöheren Verzeichnis zu dem aktuellen Verzeichnis befindet, notieren Sie zwei Punkte, einen Schrägstrich und dahinter den Namen der Grafikdatei. Bei weiter entfernten Grafikdateien müssen Sie mehrere Verzeichnisse aneinanderreihen, so wie in den obigen Beispielen.

Beachten Sie:

Verwenden Sie zum Trennen der Verzeichnisnamen immer den einfachen Schrägstrich, auch, wenn Sie Ihr Projekt innerhalb einer DOS-/Windows-Umgebung erstellen. Der WWW-Browser benötigt die Angabe in Form von einfachen Schrägstrichen.

Grafik auf einem anderen WWW-Server referenzieren

Anzeigebeispiel: So sieht's aus

Jede Grafik, die in einem WWW-Projekt vorkommt, ist eine eigene Datei und hat deshalb eine eigene Internet-Adresse. Sie können jede beliebige Grafikdatei, deren genaue Internet-Adresse Sie kennen, in Ihrem WWW-Projekt referenzieren.

Beispiel:

<img src="http://www.netzwelt.com/selfhtml/xdance1.gif">

Erläuterung:

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

Beachten Sie:

Wenn Sie Grafiken von anderen WWW-Servern referenzieren, verursachen Sie zusätzliche Netzlast. Grafikreferenzen von fremden Internet-Servern sollten schon aus diesem Grund die Ausnahme sein.

Wenn Sie Grafiken aus einem fremden WWW-Projekt referenzieren, fragen Sie den Anbieter der betreffenden Seiten vorher, ob er damit einverstanden ist.

Bei Grafikreferenzen von fremden WWW-Projekten müssen Sie damit rechnen, daß die Grafikreferenz plötzlich nicht mehr funktioniert, weil der andere Anbieter beispielsweise sein Projekt geändert und die Grafik dabei entfernt oder umbenannt hat.

Alternativer Text

Anzeigebeispiel: So sieht's aus

Wenn Sie HTML-Dateien für's WWW erstellen, sollten Sie bei Grafikreferenzen so weit wie möglich von der Möglichkeit Gebrauch machen, eine Textalternative zur Grafik mit einzubinden. Der Text wird angezeigt, wenn die Grafik aus irgendwelchen Gründen (und da gibt es viele!) beim Anwender nicht angezeigt werden kann. Manche Browser zeigen den Alternativtext auch als kleines "Tooltip"-Fenster an, wenn man langsam mit der Maus über die Grafik fährt.

Beispiel:

<img src="datei.gif" alt="Kurzbeschreibung des Bildes">

Erläuterung:

Der alternativ zur Grafik anzuzeigende Text wird innerhalb des Befehls für die Grafikreferenz notiert. Eingeleitet wird die Anweisung für die Textalternative durch alt= (alt = alternative). Dahinter folgt, in Anführungszeichen eingeschlossen, der Alternativtext.

Beachten Sie:

Der alternative Text wird bei größeren Grafiken auch angezeigt, bevor die Grafiken geladen sind. So kann der Anwender sich schon über den Inhalt der Grafik informieren, bevor die Grafik selbst am Bildschirm angezeigt wird.

Rahmen um Grafiken

Anzeigebeispiel: So sieht's aus

Sie können festlegen, daß der Browser einen Rahmen um die Grafik zeichnet.

Beispiel:

<img src="datei.gif" border=10>

Erläuterung:

Durch die Angabe border= innerhalb der Grafikreferenz wird ein Rahmen um die Grafik definiert (border = Rand). Die Angabe erfolgt in Pixeln und bedeutet die Rahmendicke.

Namen für Grafiken

Sie können festlegen, daß eine Grafik einen Namen erhält. Dies ist in Verbindung mit JavaScript sinnvoll. Der Name einer Grafik kann zum Beispiel beim JavaScript-Objekt Image-Objekt von Bedeutung sein.

Beispiel:

<img src="datei.gif" name="MeineGrafik">

Erläuterung:

Mit name= innerhalb der Grafikreferenz vergeben Sie einen Namen für die Grafik. Der Name muß in Anführungszeichen stehen, sollte nicht zu lang sein und darf keine Leerzeichen, Sonderzeichen oder deutsche Umlaute enthalten. Nur Buchstaben, Ziffern und der Unterstrich "_" sind erlaubt. Groß- und Kleinschreibung werden unterschieden.

URL-Adresse mit Beschreibung für Grafiken

Wenn Ihnen die Möglichkeit, einen kurzen Alternativtext für eine Grafik zu notieren, nicht genügt, können Sie ab HTML 4.0 auch zu einer anderen Stelle oder Datei verweisen, wo sich nähere Textinformation zu der Grafik befindet. Der Browser könnte beispielsweise nur dann einen Verweis zu dieser Stelle anbieten, wenn die Grafik nicht anzeigbar ist.

Beispiel:

<h1><a name="Beschreibung">Infos zur Grafik</a></h1>
usw.
<img src="datei.gif" longdesc="#Beschreibung">

Erläuterung:

Mit dem Attribut longdesc= können Sie auf eine Stelle verweisen, wo die Grafik in Textform näher beschrieben wird. Im Beispiel befindet sich das Verweisziel in der gleichen Datei wie die Grafik. Hinter longdesc= ist ein Verweis zu einem Anker definiert, und mit <a name=> wird an einer anderen Stelle ein Anker dieses Namens definiert. Das funktioniert genau so wie bei Verweisen innerhalb einer Datei. Sie können hinter longdesc= aber auch eine andere Datei oder eine absolute URL-Adresse angeben. Die Angabe muß in Anführungszeichen stehen.

Weitere Möglichkeiten

Das <img>-Tag kann Universalattribute enthalten.

Wenn Sie HTML bereits etwas besser kennen, probieren Sie auch mal die Möglichkeiten aus, die Ihnen CSS Style-Sheets bieten. Damit können Sie Grafiken zusätzlich formatieren. Zunächst müssen Sie dazu wissen, wie man Style-Sheets definieren kann. Anschließend sind Sie in der Lage, Style-Sheet-Angaben anzuwenden. Interessant sind im hier beschriebenen Zusammenhang beispielsweise folgende Style-Sheet-Angaben:
Abstände, Ränder, Ausrichtung
Rahmen und Innenabstände
Hintergrundfarben und -bilder
Elemente positionieren


weiter:	Breite und Höhe von Grafiken
zurück:	Browser-interne Verweise

SELFHTML/Quickbar HTML Grafik in HTML