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:
.
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
https://upload.wikimedia.org/wikipedia/commons/4/4f/Kitty_emoji.png
Ta da! Du hast alles gelernt, was es zum Hinzufügen von Bildern in Markdown braucht!
Auf zur nächsten Lektion!