Links und Bilder Spickzettel

Link-Syntax

Inline-Links

[Linktext](https://www.markdownlang.com)
[Link mit Titel](https://www.markdownlang.com "Linktitel")

Referenz-Links

[Linktext][ref]
[Linktext][]

[ref]: https://www.markdownlang.com "Optionaler Titel"
[Linktext]: https://www.markdownlang.com

Autolinks

<https://www.markdownlang.com>
<email@example.com>

Anker-Links

[Springe zu Überschrift](#überschrift-name)
[Zurück nach oben](#top)

Bild-Syntax

Inline-Bilder

![Alt-Text](image.jpg)
![Alt-Text](image.jpg "Bildtitel")

Referenz-Bilder

![Alt-Text][img-ref]

[img-ref]: image.jpg "Optionaler Titel"

Bild-Links

[![Alt-Text](image.jpg)](https://www.markdownlang.com)

Größe angeben

<img src="image.jpg" alt="Alt-Text" width="300" height="200">

Häufige Kombinationen

Verlinktes Bild

[![Projektlogo](logo.png)](https://github.com/user/repo)

Zentriertes Bild

<div align="center">
  <img src="image.jpg" alt="Beschreibung">
</div>

Bilder nebeneinander

<img src="img1.jpg" width="48%"> <img src="img2.jpg" width="48%">

Best Practices

Typ	Empfehlung	Beispiel
Linktext	Beschreibenden Text nutzen	✅ [Benutzerhandbuch]()
Linktext	Kein "hier klicken"	❌ [Hier klicken]()
Bilddatei	Relativen Pfad nutzen	✅ ./images/pic.jpg
Alt-Text	Bildinhalt beschreiben	✅ ![UI-Screenshot]()
Dateiformat	Webfreundliche Formate	✅ JPG, PNG, WebP

HTML-Ausgabe

Markdown	HTML
[text](url)	<a href="url">text</a>
	<img src="img" alt="alt">
<url>	<a href="url">url</a>

Häufige Fehler

❌ Falsche Beispiele:
[Link(https://www.markdownlang.com)     ← Fehlende rechte Klammer
![Bild](image.jpg             ← Fehlende rechte Klammer
[ Link ]( https://www.markdownlang.com ) ← Unnötige Leerzeichen

✅ Korrekte Beispiele:
[Link](https://www.markdownlang.com)
![Bild](image.jpg)
[Link](https://www.markdownlang.com)