HTML-Bilder

Um ein Bild auf einer Webseite zu platzieren, verwenden wir das <img>-Element. Dies ist ein Leer-Element (was bedeutet, dass es keine Kindinhalte haben und kein End-Tag haben kann), 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 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 zum Beispiel dinosaur.jpg heißt und sich im selben Verzeichnis wie Ihre HTML-Seite befindet, könnten Sie das Bild folgendermaßen einbetten:

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

Befindet sich das Bild in einem Unterordner images, der sich im gleichen Verzeichnis wie die HTML-Seite befindet, 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 Website verwenden möchten, selbst hosten, was in einfachen Setups bedeutet, dass Sie die Bilder für Ihre Website auf demselben Server wie Ihr HTML speichern. Darüber hinaus ist es effizienter, relative URLs anstelle von absoluten URLs zu verwenden, was die Wartung betrifft (wenn Sie Ihre Website auf eine andere Domain verschieben, müssen Sie nicht alle Ihre URLs mit der neuen Domain aktualisieren). In fortgeschritteneren Setups könnten Sie ein CDN (Content Delivery Network) verwenden, um Ihre Bilder zu liefern.

Wenn Sie die Bilder nicht erstellt haben, sollten Sie sicherstellen, dass Sie die Erlaubnis haben, sie unter den Bedingungen der Lizenz zu verwenden, unter der sie veröffentlicht wurden (siehe Medieninhalte und Lizenzierung unten für mehr Informationen).

Warning: Niemals das src-Attribut auf ein Bild verweisen lassen, das auf der Website eines anderen ohne Erlaubnis gehostet wird. Dies wird "Hotlinking" genannt und gilt als unethisch, da jemand anderes die Bandbreitenkosten für die Bereitstellung des Bildes zahlt, wenn jemand Ihre Seite besucht. Außerdem haben Sie keine Kontrolle darüber, ob das Bild entfernt oder durch etwas Peinliches ersetzt wird.

Der vorherige Code-Schnipsel, entweder mit der absoluten oder relativen URL, wird uns das folgende Ergebnis liefern:

Das nächste Attribut, das wir uns anschauen werden, ist alt. Sein Wert soll eine textliche Beschreibung des Bildes sein, die in Situationen verwendet wird, in denen das Bild nicht gesehen/angezeigt werden kann oder aufgrund einer langsamen Internetverbindung lange zum Rendern braucht. Beispielsweise 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" />

Die einfachste Möglichkeit, Ihren alt-Text zu testen, besteht darin, Ihren Dateinamen absichtlich falsch zu schreiben. Wenn unser Bildname zum Beispiel als dinosooooor.jpg falsch geschrieben wäre, würde der Browser das Bild nicht anzeigen und stattdessen den alt-Text anzeigen:

Warum sollten Sie also jemals alt-Text sehen oder benötigen? Es kann aus mehreren Gründen nützlich sein:

• Der Benutzer ist sehbehindert und verwendet einen Screen Reader, um das Web für ihn vorzulesen. Tatsächlich ist es für die meisten Benutzer nützlich, alt-Texte zur Beschreibung von Bildern zu haben.
• Wie oben beschrieben, könnte die Rechtschreibung des Datei- oder Pfadnamens falsch sein.
• Der Browser unterstützt den Bildtyp nicht. Einige Leute verwenden immer noch nur Textbrowser, wie Lynx, die den alt-Text der Bilder 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 ausgeschaltet, um Datenübertragungsvolumen und Ablenkungen zu reduzieren. Dies ist besonders häufig auf Mobiltelefonen und in Ländern, in denen Bandbreite begrenzt oder teuer ist.

Was genau sollten Sie also in Ihrem alt-Attribut schreiben? Das 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 alt="" hinzu. Wenn das Bild nicht Teil des Inhalts ist, sollte ein Screenreader keine Zeit damit verschwenden, es vorzulesen.
• Inhalt. Wenn Ihr Bild wesentliche Informationen liefert, geben Sie die gleichen Informationen in einem kurzen alt-Text an – oder noch besser, im Haupttext, den jeder sehen kann. Schreiben Sie keinen redundanten alt-Text. Wie nervig wäre es für einen sehenden Benutzer, wenn alle Absätze doppelt im Hauptinhalt geschrieben wären? Wenn das Bild im Haupttextteil ausreichend beschrieben ist, können Sie einfach alt="" verwenden.
• Link. Wenn Sie ein Bild innerhalb von <a>-Tags platzieren, um ein Bild in einen Link zu verwandeln, müssen Sie dennoch zugänglichen Linktext 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 einfügen. Wenn Ihre Hauptüberschrift einen Schlagschatten benötigt, verwenden Sie CSS dafür, anstatt den Text in ein Bild zu setzen. Wenn Sie dies wirklich nicht vermeiden können, sollten Sie den Text im alt-Attribut bereitstellen.

Im Wesentlichen besteht der Schlüssel darin, eine benutzerfreundliche Erfahrung zu bieten, selbst wenn die Bilder nicht gesehen werden können. Dies stellt sicher, dass alle Benutzer keinen ihrer Inhalte verpassen. Versuchen Sie, in Ihrem Browser Bilder auszuschalten und sehen Sie, wie es aussieht. Sie werden schnell merken, wie hilfreich alt-Text ist, wenn das Bild nicht angezeigt werden kann.

Sie können die Attribute width und height verwenden, um die Breite und Höhe Ihres Bildes anzugeben. Diese 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 Weise herausfinden. Auf dem Mac können Sie beispielsweise Cmd + I verwenden, um die Anzeigeinformationen für die Bilddatei zu erhalten. Zurück zu unserem Beispiel:

<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 für Ihre Seite und das Bild sind separate Ressourcen, die vom Browser als separate HTTP(S)-Anfragen abgerufen werden. Sobald der Browser das HTML erhalten hat, beginnt er, es dem Benutzer anzuzeigen. Wenn die Bilder noch nicht erhalten 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 haben 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 heruntergeladen hat, beginnt er, die Seite anzuzeigen.

Sobald das Bild geladen ist, fügt der Browser das Bild zur Seite hinzu. Da das Bild Platz einnimmt, muss der Browser den Text nach unten auf der Seite verschieben, um das Bild darüber zu passen:

Den Text auf diese Weise zu verschieben, lenkt die Benutzer extrem ab, insbesondere wenn sie ihn bereits begonnen haben zu lesen.

Wenn Sie die tatsächliche Größe des Bildes in Ihrem HTML mit den Attributen width und height angeben, dann weiß der Browser, bevor er das Bild heruntergeladen hat, wie viel Platz er dafür bereitstellen muss.

Dies bedeutet, dass der Browser den umgebenden Inhalt nicht verschieben muss, wenn das Bild heruntergeladen ist.

Für einen hervorragenden Artikel über die Geschichte dieser Funktion siehe Setting height and width on images is important again.

Wie bei Links können Sie auch title-Attribute zu Bildern hinzufügen, um bei Bedarf zusätzliche 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 bei Mausüberflug ein Tooltip, genau wie bei Linktiteln:

Dies wird jedoch nicht empfohlen — title hat eine Reihe von Zugänglichkeitproblemen, hauptsächlich basierend auf der Tatsache, dass die Unterstützung von Screenreadern sehr unvorhersehbar ist und die meisten Browser sie nicht anzeigen, es sei denn, Sie schweben mit einer Maus darüber (also z. B. kein Zugriff für Tastaturbenutzer). Wenn Sie an weiteren Informationen darüber interessiert sind, lesen Sie The Trials and Tribulations of the Title Attribute von Scott O'Hara.

Es ist besser, solche unterstützenden Informationen im Hauptartikeltext einzuschließen, anstatt dem Bild angehängt.

Jetzt sind Sie dran, zu spielen! Dieser Abschnitt des aktiven Lernens wird Sie mit einer Einbettungsübung in Schwung bringen. Sie erhalten einen grundlegenden <img>-Tag und wir möchten, dass Sie das Bild unter der folgenden URL einbetten:

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

Vorhin haben wir gesagt, Sie sollten niemals Hotlinks zu Bildern auf anderen Servern erstellen, aber das ist nur zu Lernzwecken, also lassen wir das diesmal durchgehen.

Wir möchten, dass Sie:

• Fügen Sie einige alt-Texte hinzu und prüfen Sie, ob sie funktionieren, indem Sie die Bild-URL falsch schreiben.
• Setzen Sie die korrekte width und height des Bildes (Hinweis: es ist 200px breit und 171px hoch), und experimentieren Sie dann mit anderen Werten, um den Effekt zu sehen.
• Setzen Sie einen title für das Bild.

Wenn Sie einen Fehler machen, können Sie es immer mit der Zurücksetzen-Taste zurücksetzen. Wenn Sie wirklich stecken bleiben, drücken Sie die Lösung anzeigen-Taste, um eine Antwort zu sehen:

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
<img>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

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

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

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

Lassen Sie uns einige allgemeine Kategorien von Lizenzen betrachten, die Sie wahrscheinlich im Web finden werden.

Alle Rechte vorbehalten

Urheber eines Originalwerks, wie Lieder, Bücher oder Software, veröffentlichen ihre Arbeit oft unter geschlossenem Urheberrechtsschutz. Das bedeutet, dass sie (oder ihr Verlag) standardmäßig exklusive Rechte haben, ihre Arbeit zu verwenden (zum Beispiel anzuzeigen oder zu verbreiten). 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 eine ausdrückliche, schriftliche Genehmigung vom Urheberrechtsinhaber.
• Zahlen Sie eine Lizenzgebühr, um sie zu verwenden. Dies kann eine einmalige Gebühr für uneingeschränkte Nutzung ("royalty-free") sein oder es könnte "rights-managed" sein, in diesem Fall müssen Sie möglicherweise spezifische Gebühren pro Nutzung nach Zeitfenster, geografischer Region, Branche oder Medientyp usw. zahlen.
• Beschränken Sie Ihre Nutzungen auf solche, die in Ihrem Rechtsgebiet als fair use oder fair dealing angesehen werden könnten.

Autoren müssen ihrem Werk keine Urheberrechtshinweise oder Lizenzbedingungen beifügen. Das Urheberrecht besteht automatisch in einem Originalwerk, sobald es in einem greifbaren Medium erstellt wird. Wenn Sie also ein Bild online finden und keine Urheberrechtshinweise oder Lizenzterms vorhanden sind, ist der sicherste Weg, anzunehmen, dass es durch Urheberrecht mit allen Rechten vorbehalten geschützt ist.

Erlaubnisgebend

Wenn das Bild unter einer erlaubnisgebenden Lizenz veröffentlicht wird, wie der MIT, BSD oder einer geeigneten Creative Commons (CC) Lizenz, müssen Sie keine Lizenzgebühr zahlen oder um Erlaubnis bitten, es zu verwenden. Trotzdem gibt es verschiedene Lizenzbedingungen, die Sie erfüllen müssen, die je nach Lizenz variieren.

Zum Beispiel müssen Sie möglicherweise:

• Einen Link zur ursprünglichen Quelle des Bildes bereitstellen und seinen Schöpfer nennen.
• Angeben, ob Änderungen daran vorgenommen wurden.
• Sämtliche abgeleiteten Werke, die mithilfe des Bildes erstellt wurden, unter der gleichen Lizenz wie das Original veröffentlichen.
• Sämtliche abgeleiteten Werke überhaupt nicht teilen.
• Das Bild in kommerziellen Werken nicht verwenden.
• Eine Kopie der Lizenz mit jeder Veröffentlichung, die das Bild verwendet, beifügen.

Sie sollten im anwendbaren Lizenztext nachsehen, um die spezifischen Terms, die Sie befolgen müssen, zu verstehen.

Copyleft-Lizenzen sind in der Softwarewelt prominent. Die Grundidee ist, dass ein neues Projekt, das mit dem Code eines Copyleft-lizenzierten Projekts erstellt wurde (das wird als "Fork" der ursprünglichen Software bezeichnet), ebenfalls unter derselben Copyleft-Lizenz lizenziert werden muss. Dies stellt sicher, dass der Quellcode des neuen Projekts auch für andere verfügbar gemacht wird, um ihn zu studieren und zu modifizieren. Beachten Sie, dass Lizenzen, die für Software entworfen wurden, wie die GPL, im Allgemeinen nicht als gute Lizenzen für Nicht-Software-Werke angesehen werden, da sie nicht mit Nicht-Software-Werken im Sinn entworfen wurden.

Erforschen Sie die Links, die früher in diesem Abschnitt bereitgestellt wurden, um über die verschiedenen Lizenztypen und die Arten von Bedingungen, die sie angeben, zu lesen.

Öffentlicher Bereich/CC0

Arbeiten, die in den öffentlichen Bereich veröffentlicht werden, werden manchmal als "keine Rechte vorbehalten" bezeichnet — kein Urheberrecht gilt für sie, und sie können ohne Erlaubnis und ohne Erfüllung von Lizenzbedingungen verwendet werden. Arbeiten können auf verschiedene Weise in den öffentlichen Bereich gelangen, wie z. B. durch das Erlöschen von Urheberrechten oder das spezifische Verzicht auf Rechte.

Eine der effektivsten Möglichkeiten, Arbeit in den öffentlichen Bereich zu stellen, besteht darin, sie unter CC0 zu lizenzieren, einer speziellen Creative Commons-Lizenz, die ein klares und unmissverständliches rechtliches Instrument für diesen Zweck bietet.

Wenn Sie Öffentlichkeitsbilder verwenden, erhalten Sie den Nachweis, dass das Bild im Public Domain ist, und behalten Sie den Nachweis für Ihre Aufzeichnungen. Zum Beispiel machen Sie einen Screenshot der ursprünglichen Quelle mit dem Lizenzstatus deutlich angezeigt und erwägen, eine Seite zu Ihrer Website hinzuzufügen, die eine Liste der erworbenen Bilder zusammen mit ihren Lizenzanforderungen enthält.

Sie können nach freien Bildern für Ihre Projekte mit einer Bildsuchmaschine oder direkt aus Bildbeständen suchen.

Suchen Sie nach Bildern mit einer Beschreibung des Bildes, das Sie suchen, zusammen mit entsprechenden Lizenzbedingungen. Zum Beispiel, wenn Sie nach "gelber Dinosaurier" suchen, fügen Sie "Öffentlichkeitsbilder", "Bibliothek öffentlicher Bilder", "freie lizenzierte Bilder" oder ähnliche Begriffe zur Suchanfrage hinzu.

Einige Suchmaschinen haben Tools, die Ihnen helfen können, nach Bildern mit erlaubnisgebenden Lizenzen zu suchen. Beispielsweise können Sie in Google zur Registerkarte "Bilder" gehen, um nachbildern zu suchen, und dann auf "Tools" klicken. Es gibt ein Dropdown-Menü "Verwendungsrechte" in der resultierenden Werkzeugleiste, wo Sie spezifisch nach Bildern unter Creative-Commons-Lizenzen suchen können.

Bildbestandseiten wie Flickr, ShutterStock und Pixabay haben Suchoptionen, die es Ihnen ermöglichen, nur nach frei lizenzierten Bildern zu suchen. Einige Seiten verteilen ausschließlich freie Bilder und Symbole, wie Picryl und The Noun Project.

Das Einhalten der Lizenz, unter der das Bild veröffentlicht wurde, ist eine Angelegenheit des Auffindens der Lizenzdetails, des Lesens der Lizenz- oder Anleitungsseite, die von der Quelle bereitgestellt wird, und dann dem Befolgen dieser Anweisungen. Seriöse Bildbestände machen ihre Lizenzbedingungen klar und einfach zu finden.

Apropos Beschriftungen, es gibt eine Reihe von Möglichkeiten, wie Sie eine Beschriftung zu Ihrem Bild hinzufügen könnten. Beispielsweise würde nichts dagegen sprechen, das Folgende 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 die benötigten Inhalte und lässt sich mit CSS schön stilisieren. Aber es gibt ein Problem: Es gibt nichts, was das Bild semantisch mit seiner Beschriftung verknüpft, was für Screenreader problematisch sein kann. Was ist zum Beispiel, wenn Sie 50 Bilder und Beschriftungen haben, welche Beschriftung gehört zu welchem Bild?

Eine bessere Lösung besteht darin, die HTML-Elemente <figure> und <figcaption> zu verwenden. Diese wurden genau für diesen Zweck erstellt: um einen semantischen Container für Figuren bereitzustellen und um die Figur klar mit der Beschriftung zu verknüpfen. 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 Browsern und unterstützender Technologie mit, dass die Beschriftung den anderen Inhalt des <figure>-Elements beschreibt.

Eine Figur muss kein Bild sein. Es ist eine eigenständige Einheit von Inhalten, die:

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

Eine Figur könnte mehrere Bilder, ein Code-Snippet, Audio, Video, Gleichungen, eine Tabelle oder etwas anderes sein.

In diesem Abschnitt des aktiven Lernens möchten wir, dass Sie den fertigen Code aus dem vorherigen aktiven Lernabschnitt nehmen und ihn in eine Figur verwandeln:

1. Wickeln Sie ihn in ein <figure>-Element ein.
2. Kopieren Sie den Text aus dem title-Attribut, entfernen Sie das title-Attribut und setzen Sie den Text in ein <figcaption>-Element unter das Bild.

Wenn Sie einen Fehler machen, können Sie ihn immer mit der Zurücksetzen-Taste zurücksetzen. Wenn Sie wirklich festsitzen, drücken Sie die Lösung anzeigen-Taste, um eine Antwort zu sehen:

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea
  id="code"
  class="input"
  style="min-height: 100px; width: 95%"></textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

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

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

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

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

Das resultierende eingebettete Bild ist möglicherweise einfacher zu positionieren und zu steuern als HTML-Bilder. Warum also HTML-Bilder verwenden? Wie oben angedeutet, sind CSS-Hintergrundbilder nur für Dekoration. Wenn Sie einfach etwas Hübsches auf Ihrer Seite hinzufügen möchten, um die visuellen Aspekte zu verbessern, ist das in Ordnung. Solche Bilder haben jedoch überhaupt keine semantische Bedeutung. Sie können keine Textäquivalente haben, sind für Screenreader unsichtbar und so weiter. Hier glänzen HTML-Bilder!

Zusammengefasst: Wenn ein Bild in Bezug auf Ihren Inhalt eine Bedeutung hat, sollten Sie ein HTML-Bild verwenden. Wenn ein Bild nur zur Dekoration dient, sollten Sie CSS-Hintergrundbilder verwenden (wir werden diese später in den Kernmodulen im Detail behandeln).

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie fortfahren – siehe Testen Sie Ihr Wissen: HTML-Bilder.

Das ist alles für jetzt. Wir haben Bilder und Beschriftungen im Detail behandelt. Im nächsten Artikel werden wir einen Gang höher schalten und uns ansehen, wie HTML verwendet wird, um Video- und Audiomaterialien in Webseiten einzubetten.

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