Bilder

Wenn Sie wissen, wie man Links in Markdown erstellt, können Sie auch Bilder erstellen. Die Syntax ist fast dieselbe.

Für Bilder gibt es ebenfalls zwei Stile, genau wie für Links, und beide werden auf genau dieselbe Weise dargestellt. Der Unterschied zwischen Links und Bildern ist, dass Bilder ein Ausrufezeichen ( ! ) vorangestellt wird.

Der erste Bildstil wird als Inline-Image-Link bezeichnet. Um einen Inline-Image-Link zu erstellen, geben Sie ein Ausrufezeichen ( ! ) ein, setzen den Alt-Text in eckige Klammern ( [ ] ) und setzen dann den Link in Klammern ( ( ) ). (Der Alt-Text ist eine Phrase oder ein Satz, der das Bild für sehbehinderte Menschen beschreibt).

Um zum Beispiel einen Inline-Image-Link zu https://octodex.github.com/images/bannekat.png zu erstellen, mit einem Alt-Text, der besagt: Benjamin Bannekat, würden Sie folgendes in Markdown schreiben: ![Benjamin Bannekat](https://octodex.github.com/images/bannekat.png).

Drehen Sie im Feld unten den Link zu einem Bild um, und füllen Sie die Klammern für den Alt-Text mit "Ein schöner Tiger" aus:


Wunderschön!

Sie müssen zwar keinen Alt-Text hinzufügen, aber er macht Ihre Inhalte für Ihr Publikum zugänglich, auch für Menschen, die sehbehindert sind, Bildschirmlesegeräte benutzen oder nicht über eine schnelle Internetverbindung verfügen.

Für ein Referenzbild folgen Sie demselben Muster wie für einen Referenzlink. Sie stellen dem Markdown ein Ausrufezeichen voran, dann zwei Klammern für den Alt-Text und zwei weitere für das Bild-Tag, etwa so: ![The founding father][Father]. Am Ende der Markdown-Seite definieren Sie ein Bild für den Tag, etwa so: [Father]: http://octodex.github.com/images/founding-father.jpg

Im Feld unten haben wir damit begonnen, einige Referenzbilder zu platzieren; Sie müssen sie vervollständigen, genau wie in der letzten Lektion. Nennen Sie das erste Referenz-Tag "Schwarze", und verknüpfen Sie es mit https://upload.wikimedia.org/wikipedia/commons/a/a3/81_INF_DIV_SSI.jpgVerlinken Sie das zweite Bild auf http://icons.iconarchive.com/icons/google/noto-emoji-animals-nature/256/22221-cat-icon.png


Ta da! Du hast alles gelernt, was es zum Hinzufügen von Bildern in Markdown braucht!

Auf zur nächsten Lektion!