HTML-Bilder

Um ein Bild auf einer Webseite einzufügen, verwenden wir das <img>-Element. Dies ist ein leeres Element (das heißt, es kann keinen Kinderinhalt haben und keinen End-Tag haben), das zwei Attribute benötigt, um nützlich zu sein: src und alt. Das src-Attribut enthält eine URL, die auf das Bild zeigt, das Sie in die Seite einbetten möchten. Wie beim href-Attribut für <a>-Elemente kann das src-Attribut eine relative URL oder eine absolute URL sein. Ohne ein src-Attribut hat ein img-Element kein Bild zum Laden.

Das alt-Attribut wird weiter unten beschrieben.

Wenn Ihr Bild beispielsweise dinosaurier.jpg heißt und sich im selben Verzeichnis wie Ihre HTML-Seite befindet, könnten Sie das Bild wie folgt einbetten:

<img src="dinosaur.jpg" alt="Dinosaur" />

Wenn sich das Bild in einem Unterverzeichnis namens images befindet, das im selben Verzeichnis wie die HTML-Seite liegt, dann würden Sie es so einbetten:

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Und so weiter.

Sie könnten das Bild auch mit seiner absoluten URL einbetten, zum Beispiel:

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

Das Verlinken über absolute URLs wird jedoch nicht empfohlen. Sie sollten die Bilder, die Sie auf Ihrer Seite verwenden möchten, auf Ihrer eigenen Website hosten, was in einfachen Setups bedeutet, die Bilder für Ihre Website auf dem gleichen Server wie Ihr HTML zu speichern. Zusätzlich ist es effizienter, relative URLs anstelle von absoluten URLs in Bezug auf die Wartung zu verwenden (wenn Sie Ihre Seite auf eine andere Domain verschieben, müssen Sie nicht alle Ihre URLs aktualisieren, um die neue Domain einzuschließen). In fortgeschritteneren Setups könnten Sie ein CDN (Content Delivery Network) verwenden, um Ihre Bilder bereitzustellen.

Wenn Sie die Bilder nicht selbst erstellt haben, sollten Sie sicherstellen, dass Sie die Erlaubnis haben, sie gemäß den Bedingungen der Lizenz zu verwenden, unter der sie veröffentlicht sind (siehe Medienassets und Lizenzierung unten für weitere Informationen).

Der vorherige Code-Schnipsel, egal ob mit der absoluten oder der relativen URL, ergibt das folgende Ergebnis:

Das nächste Attribut, das wir uns ansehen werden, ist alt. Sein Wert sollte eine textuelle Beschreibung des Bildes sein, die in Situationen verwendet wird, in denen das Bild nicht gesehen/angezeigt werden kann oder lange zum Rendern benötigt, weil die Internetverbindung langsam ist. Zum Beispiel könnte unser obiger Code folgendermaßen modifiziert werden:

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

Der einfachste Weg, um Ihren alt-Text zu testen, ist, den Dateinamen absichtlich falsch zu schreiben. Wenn zum Beispiel unser Bildname fälschlicherweise dinosooooor.jpg geschrieben wird, würde der Browser das Bild nicht anzeigen und stattdessen den Alternativtext anzeigen:

Warum sollten Sie überhaupt Alternativtext sehen oder benötigen? Er kann aus mehreren Gründen nützlich sein:

• Der Benutzer ist sehbehindert und verwendet einen Bildschirmleser, um das Web für ihn vorzulesen. Tatsächlich ist es für die meisten Benutzer nützlich, über Alt-Text zu verfügen, um Bilder zu beschreiben.
• Wie oben beschrieben, könnte die Schreibweise des Datei- oder Pfadnamens falsch sein.
• Der Browser unterstützt den Bildtyp nicht. Einige Menschen verwenden immer noch reine Textbrowser, wie Lynx, die den Alternativtext von Bildern anzeigen.
• Sie möchten möglicherweise Text bereitstellen, den Suchmaschinen nutzen können; Suchmaschinen können zum Beispiel Alt-Text mit Suchanfragen abgleichen.
• Benutzer haben Bilder deaktiviert, um das Datenübertragungsvolumen zu reduzieren und Ablenkungen zu vermeiden. Dies ist besonders auf Mobiltelefonen üblich und in Ländern, in denen die Bandbreite begrenzt oder teuer ist.

Was genau sollten Sie in Ihr alt-Attribut schreiben? Es hängt davon ab, warum das Bild überhaupt da ist. Mit anderen Worten, was Sie verlieren, wenn Ihr Bild nicht angezeigt wird:

• Dekoration. Sie sollten CSS-Hintergrundbilder für dekorative Bilder verwenden, aber wenn Sie HTML verwenden müssen, fügen Sie ein leeres alt="". Wenn das Bild nicht Teil des Inhalts ist, sollte ein Bildschirmleser keine Zeit damit verschwenden, es vorzulesen.
• Inhalt. Wenn Ihr Bild signifikante Informationen bereitstellt, geben Sie dieselben Informationen in einem kurzen Alt-Text an – oder noch besser im Haupttext, den jeder sehen kann. Schreiben Sie keinen redundanten Alt-Text. Wie ärgerlich wäre es für Benutzer mit Sehvermögen, wenn alle Absätze im Hauptinhalt zweimal geschrieben würden? Wenn das Bild im Haupttext ausreichend beschrieben wird, können Sie einfach alt="" verwenden.
• Link. Wenn Sie ein Bild in <a>-Tags einfügen, um ein Bild in einen Link zu verwandeln, müssen Sie trotzdem zugänglichen Link-Text bereitstellen. In solchen Fällen können Sie ihn entweder innerhalb desselben <a>-Elements oder im alt-Attribut des Bildes schreiben – je nachdem, was in Ihrem Fall am besten funktioniert.
• Text. Sie sollten Ihren Text nicht in Bilder einbetten. Wenn Ihre Hauptüberschrift beispielsweise einen Schattenwurf benötigt, verwenden Sie CSS dafür, anstatt den Text in ein Bild zu setzen. Sollten Sie wirklich nicht darum herumkommen, sollten Sie den Text im alt-Attribut bereitstellen.

Im Wesentlichen geht es darum, eine nutzbare Erfahrung zu bieten, auch wenn die Bilder nicht gesehen werden können. Dies stellt sicher, dass alle Benutzer keinen Inhalt verpassen. Versuchen Sie, in Ihrem Browser Bilder auszuschalten, und schauen Sie, wie es aussieht. Sie werden schnell merken, wie hilfreich Alt-Text ist, wenn das Bild nicht gesehen werden kann.

Sie können die Attribute width und height verwenden, um die Breite und Höhe Ihres Bildes zu spezifizieren. Sie werden als Ganzzahlen ohne Einheit angegeben und stellen die Breite und Höhe des Bildes in Pixel dar.

Sie können die Breite und Höhe Ihres Bildes auf verschiedene Weisen herausfinden. Zum Beispiel auf dem Mac können Sie Cmd + I verwenden, um die Anzeigeinformationen für die Bilddatei zu erhalten. Zurück zu unserem Beispiel, könnten wir dies tun:

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

Es gibt einen sehr guten Grund, dies zu tun. Das HTML Ihrer Seite und das Bild sind separate Ressourcen, die vom Browser als separate HTTP(S)-Anfragen abgerufen werden. Sobald der Browser das HTML empfangen hat, beginnt er, es dem Benutzer anzuzeigen. Wenn die Bilder noch nicht empfangen wurden (und dies wird oft der Fall sein, da Bilddateigrößen oft viel größer sind als HTML-Dateien), rendert der Browser nur das HTML und aktualisiert die Seite mit dem Bild, sobald es empfangen wurde.

Angenommen, wir hätten etwas Text nach dem Bild:

<h1>Images in HTML</h1>

<img
  src="dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
  title="A T-Rex on display in the Manchester University Museum" />
<blockquote>
  <p>
    But down there it would be dark now, and not the lovely lighted aquarium she
    imagined it to be during the daylight hours, eddying with schools of tiny,
    delicate animals floating and dancing slowly to their own serene currents
    and creating the look of a living painting. That was wrong, in any case. The
    ocean was different from an aquarium, which was an artificial environment.
    The ocean was a world. And a world is not art. Dorothy thought about the
    living things that moved in that world: large, ruthless and hungry. Like us
    up here.
  </p>
  <footer>- Rachel Ingalls, <cite>Mrs. Caliban</cite></footer>
</blockquote>

Sobald der Browser das HTML herunterlädt, beginnt er, die Seite darzustellen.

Sobald das Bild geladen ist, fügt der Browser das Bild zur Seite hinzu. Da das Bild Platz benötigt, muss der Browser den Text nach unten auf der Seite verschieben, um das Bild darüber einzufügen:

Das Bewegen des Textes auf diese Weise ist für Benutzer äußerst ablenkend, insbesondere wenn sie bereits angefangen haben, ihn zu lesen.

Wenn Sie die tatsächliche Größe des Bildes in Ihrem HTML angeben, indem Sie die Attribute width und height verwenden, weiß der Browser bereits, bevor er das Bild heruntergeladen hat, wie viel Platz er dafür einplanen muss.

Das bedeutet, dass der Browser das umliegende Inhalt nicht verschieben muss, sobald das Bild heruntergeladen wurde.

Für einen ausgezeichneten Artikel über die Geschichte dieser Funktion siehe Das Festlegen von Höhe und Breite bei Bildern ist wieder wichtig.

Wie bei Links können Sie auch title-Attribute zu Bildern hinzufügen, um bei Bedarf weitere unterstützende Informationen bereitzustellen. In unserem Beispiel könnten wir dies tun:

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum" />

Dies gibt uns ein Tooltip bei Maus-Hover, genau wie bei Linktiteln:

Dies wird jedoch nicht empfohlen — title hat eine Reihe von Zugänglichkeitsproblemen, hauptsächlich basierend darauf, dass die Unterstützung durch Bildschirmleser sehr unvorhersehbar ist und die meisten Browser es nicht anzeigen, es sei denn, Sie bewegen den Mauszeiger (also z.B. kein Zugang für Tastaturbenutzer). Wenn Sie sich für mehr Informationen darüber interessieren, lesen Sie Die Prüfungen und Tribulationen des Titelattributs von Scott O'Hara.

Es ist besser, solche unterstützenden Informationen im Hauptartikeltext anstelle des Bildes anzugeben.

Jetzt sind Sie an der Reihe! Diese Aufgabe bringt Sie dazu, ein Bild einzubetten.

1. Klicken Sie auf "Play" im folgenden Codeblock, um das Beispiel im MDN Playground zu bearbeiten.

2. Bearbeiten Sie das bestehende <img>-Tag so, dass es das Bild von der folgenden URL einbettet:

   url

   https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg
   

   Hinweis: Wir haben zuvor gesagt, ohne Erlaubnis keine direkt eingebetteten Links zu Bildern von anderen Servern zu verwenden, aber dieses Bild ist in unserem GitHub-Repo, also ist das in Ordnung.

3. Fügen Sie dem Bild ein alt-Attribut hinzu. Sie können überprüfen, ob der Alt-Text funktioniert, indem Sie die Bild-URL vorübergehend falsch schreiben.

4. Setzen Sie die richtige width und height des Bildes (Hinweis: es ist 200px breit und 171px hoch) und experimentieren Sie dann mit anderen Werten, um zu sehen, was der Effekt ist.

5. Setzen Sie einen title auf das Bild.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit der Reset-Taste im MDN Playground löschen. Wenn Sie wirklich feststecken, können Sie die Lösung unter dem Codeblock anzeigen.

<img />

<img
  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
  alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
  width="200"
  height="171"
  title="A T-Rex on display in the Manchester University Museum" />

Bilder (und andere Arten von Medienressourcen), die Sie im Web finden, werden unter verschiedenen Lizenztypen veröffentlicht. Bevor Sie ein Bild auf einer Seite verwenden, die Sie erstellen, stellen Sie sicher, dass Sie es besitzen, die Erlaubnis haben, es zu verwenden, oder die Lizenzbedingungen des Eigentümers einhalten.

Lassen Sie uns einige gängige Kategorien von Lizenzen betrachten, die Sie wahrscheinlich im Internet finden werden.

Alle Rechte vorbehalten

Schöpfer von Originalwerken wie Songs, Büchern oder Software veröffentlichen ihre Arbeiten oft unter geschlossenem Urheberrechtsschutz. Das bedeutet, dass sie (oder ihr Herausgeber) standardmäßig die exklusiven Rechte haben, ihre Arbeit zu nutzen (z.B. anzuzeigen oder zu verteilen). Wenn Sie urheberrechtlich geschützte Bilder mit einer alle Rechte vorbehalten-Lizenz verwenden möchten, müssen Sie eine der folgenden Maßnahmen ergreifen:

• Holen Sie sich die ausdrückliche, schriftliche Erlaubnis des Urheberrechtsinhabers.
• Zahlen Sie eine Lizenzgebühr, um sie zu verwenden. Dies kann eine einmalige Gebühr für unbegrenzte Nutzung ("lizenzfrei") sein, oder es könnte sich um "rechteverwaltet" handeln, in diesem Fall müssen Sie möglicherweise spezifische Gebühren pro Nutzung entrichten, z.B. nach Zeitschlitz, geografischer Region, Branche oder Medientyp, etc.
• Beschränken Sie Ihre Nutzung auf solche, die in Ihrem Zuständigkeitsbereich als Fair Use oder Fair Dealing gelten würden.

Autoren sind nicht verpflichtet, eine Urheberrechtsvermerk oder Lizenzbedingungen mit ihrem Werk zu veröffentlichen. Das Urheberrecht besteht automatisch an einem Originalwerk der Autoren, sobald es in einem greifbaren Medium erstellt wird. Wenn Sie also ein Bild online finden und es keine Urheberrechtsvermerke oder Lizenzbedingungen gibt, ist der sicherste Weg, anzunehmen, dass es durch das Urheberrecht mit allen Rechten vorbehalten geschützt ist.

Erlaubniserteilung

Wenn das Bild unter einer erlaubniserteilten Lizenz veröffentlicht wird, wie z.B. MIT, BSD, oder einer geeigneten Creative Commons (CC)-Lizenz, müssen Sie keine Lizenzgebühr bezahlen oder um Erlaubnis bitten, es zu verwenden. Es gibt jedoch verschiedene Lizenzbedingungen, die Sie erfüllen müssen, die sich abhängig von der Lizenz unterscheiden.

Zum Beispiel müssen Sie möglicherweise:

• Einen Link zur ursprünglichen Quelle des Bildes angeben und den Ersteller des Bilder benennen.
• Angeben, ob Änderungen daran vorgenommen wurden.
• Abgeleitete Werke, die unter Verwendung des Bildes erstellt wurden, unter derselben Lizenz wie das Original freigeben.
• Keine abgeleiteten Werke überhaupt teilen.
• Das Bild nicht in kommerziellen Arbeiten verwenden.
• Eine Kopie der Lizenz zusammen mit jeder Veröffentlichung bereitstellen, die das Bild verwendet.

Sie sollten die anwendbare Lizenz konsultieren, um die spezifischen Bedingungen zu erfahren, die Sie befolgen müssen.

Copyleft-Lizenzen sind in der Softwarewelt prominent. Die grundlegende Idee ist, dass ein neues Projekt, das mit dem Code eines Copyleft-lizenzierten Projekts entwickelt wurde (dies ist als "Fork" der Originalsoftware bekannt), ebenfalls unter derselben Copyleft-Lizenz lizenziert werden muss. Dies stellt sicher, dass der Quellcode des neuen Projekts auch zum Studium und zur Modifikation verfügbar gemacht wird. Beachten Sie, dass im Allgemeinen Lizenzen, die für Software erstellt wurden, wie GPL, nicht als gute Lizenzen für Nicht-Software-Arbeiten betrachtet werden, da sie nicht mit Nicht-Software-Arbeiten im Kopf erstellt wurden.

Erkunden Sie die früher in diesem Abschnitt bereitgestellten Links, um mehr über die verschiedenen Lizenztypen und die Arten von Bedingungen zu erfahren, die sie vorschreiben.

Öffentliches Eigentum/CC0

Arbeiten, die in das öffentliche Eigentum übergegangen sind, werden manchmal als "keine Rechte vorbehalten" bezeichnet — es gelten keine Urheberrechte dafür, und sie können ohne Erlaubnis und ohne Erfüllung von Lizenzbedingungen verwendet werden. Arbeiten können verschiedene Wege ins öffentliche Eigentum gelangen, wie z.B. Ablauf des Urheberrechts oder spezifisches Verzichten auf Rechte.

Eine der effektivsten Möglichkeiten, Arbeiten in das öffentliche Eigentum zu bringen, ist die Lizenzierung unter CC0, einer spezifischen Creative Commons-Lizenz, die ein klares und eindeutiges rechtliches Werkzeug für diesen Zweck bietet.

Beim Verwenden öffentlicher Domain-Bilder holen Sie Beweise ein, dass das Bild im öffentlichen Domain ist und behalten Sie diesen Nachweis für Ihre Unterlagen. Zum Beispiel, erstellen Sie einen Screenshot der ursprünglichen Quelle mit dem Lizenstatus deutlich angezeigt und erwägen Sie, eine Seite auf Ihrer Website mit einer Liste der erworbenen Bilder und ihren Lizenzanforderungen hinzuzufügen.

Sie können nach erlaubniserteilten Bildern für Ihr Projekt mit einer Bildsuchmaschine oder direkt aus Bildarchiven suchen.

Suchen Sie nach Bildern, indem Sie eine Beschreibung des gesuchten Bildes zusammen mit relevanten Lizenzbedingungen eingeben. Zum Beispiel, wenn Sie nach "gelber Dinosaurier" suchen, fügen Sie "Bilder im öffentlichen Domain", "Bibliothek öffentlicher Domain-Bilder", "offen lizenzierte Bilder" oder ähnliche Begriffe zur Suchanfrage hinzu.

Einige Suchmaschinen haben Tools, die Ihnen helfen, nach Bildern mit erlaubniserteilten Lizenzen zu suchen. Zum Beispiel, wenn Sie Google verwenden, gehen Sie zum Tab "Bilder" um nach Bildern zu suchen, klicken Sie dann auf "Tools". Es gibt ein Dropdown-Menü "Nutzungsrechte" in der resultierenden Werkzeugleiste, wo Sie speziell nach Bildern unter Creative Commons-Lizenzen suchen können.

Bildrepository-Sites, wie Flickr, ShutterStock, und Pixabay, haben Suchoptionen, die es Ihnen erlauben, nur nach erlaubniserteilten Bildern zu suchen. Einige Seiten verteilen ausschließlich erlaubniserteilte Bilder und Symbole, wie Picryl und The Noun Project.

Die Einhaltung der Lizenz, unter der das Bild veröffentlicht wurde, besteht darin, die Lizenzdetails zu finden, die Lizenz oder die bereitgestellte Anleitungsseite der Quelle zu lesen und dann diese Anweisungen zu befolgen. Seriöse Bildrepositorys machen ihre Lizenzbedingungen klar und einfach zu finden.

Apropos Bildunterschriften, es gibt eine Reihe von Möglichkeiten, wie Sie eine Bildunterschrift zu Ihrem Bild hinzufügen können. Zum Beispiel, es würde nichts dagegen sprechen, dies zu tun:

<div class="figure">
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

Das ist in Ordnung. Es enthält den benötigten Inhalt und ist mit CSS schön stylisierbar. Aber es gibt ein Problem: Es gibt nichts, das das Bild semantisch mit seiner Bildunterschrift verlinkt, was Probleme für Bildschirmleser verursachen kann. Zum Beispiel, wenn Sie 50 Bilder und Bildunterschriften haben, welche Bildunterschrift gehört zu welchem Bild?

Eine bessere Lösung ist die Verwendung der HTML-Elemente <figure> und <figcaption>. Diese wurden genau für diesen Zweck geschaffen: um einen semantischen Container für Abbildungen bereitzustellen und die Abbildung klar mit der Bildunterschrift zu verlinken. Unser obiges Beispiel könnte so umgeschrieben werden:

<figure>
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />

  <figcaption>
    A T-Rex on display in the Manchester University Museum.
  </figcaption>
</figure>

Das <figcaption>-Element teilt den Browsern und unterstützenden Technologien mit, dass die Bildunterschrift den anderen Inhalt des <figure>-Elements beschreibt.

Eine Abbildung muss nicht unbedingt ein Bild sein. Es ist eine unabhängige Einheit von Inhalten, die:

• Ihre Bedeutung auf eine kompakte, leicht verständliche Weise ausdrückt.
• An mehreren Stellen im linearen Fluss der Seite eingefügt werden könnte.
• Wesentliche Informationen zur Unterstützung des Haupttextes liefert.

Eine Abbildung könnte mehrere Bilder, ein Codeschnipsel, Audio, Video, Gleichungen, eine Tabelle oder etwas anderes sein.

In dieser Aufgabe möchten wir, dass Sie den abgeschlossenen Code aus der vorherigen Aufgabe als Ausgangspunkt nehmen und ihn in eine Abbildung umwandeln:

1. Klicken Sie auf "Play" im folgenden Codeblock, um das Beispiel im MDN Playground zu bearbeiten.
2. Wickeln Sie das <img>-Element in ein <figure>-Element.
3. Kopieren Sie den Text aus dem title-Attribut, fügen Sie ihn in ein <figcaption>-Element unter dem <img>-Element ein, und entfernen Sie dann das title-Attribut.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit der Reset-Taste im MDN Playground löschen. Wenn Sie wirklich feststecken, können Sie die Lösung unter dem Codeblock anzeigen.

<img
  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
  alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
  width="200"
  height="171"
  title="A T-Rex on display in the Manchester University Museum" />

<figure>
  <img
    src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
    alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
    width="200"
    height="171" />
  <figcaption>
    A T-Rex on display in the Manchester University Museum
  </figcaption>
</figure>

Sie können auch CSS verwenden, um Bilder in Webseiten einzubetten (und JavaScript, aber das ist eine völlig andere Geschichte). Die CSS-Eigenschaft background-image und die anderen background-* Eigenschaften werden verwendet, um die Platzierung von Hintergrundbildern zu steuern. Zum Beispiel, um ein Hintergrundbild auf jedem Absatz einer Seite zu platzieren, könnten Sie dies tun:

p {
  background-image: url("images/dinosaur.jpg");
}

Das resultierende eingebettete Bild ist wohl einfacher zu positionieren und zu kontrollieren als HTML-Bilder. Warum sich also mit HTML-Bildern abmühen? Wie bereits angedeutet, sind CSS-Hintergrundbilder nur zur Dekoration gedacht. Wenn Sie einfach etwas Schönes hinzufügen möchten, um die visuelle Wirkung Ihrer Seite zu verbessern, ist das in Ordnung. Solche Bilder haben jedoch keine semantische Bedeutung. Sie können keine Textequivalente haben, sind für Bildschirmleser unsichtbar und so weiter. An dieser Stelle glänzen HTML-Bilder!

Zusammenfassend: Wenn ein Bild inhaltliche Bedeutung hat, sollten Sie ein HTML-Bild verwenden. Wenn ein Bild rein dekorativ ist, sollten Sie CSS-Hintergrundbilder verwenden (wir werden diese später in den Core-Modulen im Detail behandeln).

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, dass Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Prüfen Sie Ihre Fähigkeiten: HTML-Bilder.

Das war alles für jetzt. Wir haben Bilder und Bildunterschriften ausführlich behandelt. Im nächsten Artikel werden wir einen Gang höher schalten und uns damit beschäftigen, wie man HTML für das Einbetten von Video- und Audiomaterial auf Webseiten verwendet.

• Zurück
• Übersicht: Strukturierung von Inhalten mit HTML
• Weiter