Kapitel 4: Bilder und Links meistern

In diesem Kapitel lernen Sie, wie man Bilder effektiv einbindet und Links professionell nutzt.

4.1 Bilder in Markdown

Grundlegende Bildsyntrax

![Alternativtext](bild.jpg)

Beispiel:

![Mein Hund](hund.jpg)

Bilder mit Titel

![Alternativtext](bild.jpg "Bildtitel")

Bilder in verschiedenen Formaten

![PNG Bild](bild.png)
![JPEG Bild](foto.jpg)
![GIF Bild](animation.gif)
![SVG Bild](vektor.svg)
![WebP Bild](bild.webp)

4.2 Bilder von URLs

![Logo](https://www.beispiel.de/logo.png)

Tipp: Verwenden Sie Relative URLs für lokale Bilder:

![Bild](./bilder/foto.jpg)

4.3 Bilder verlinken

Kombinieren Sie Bilder mit Links:

[Klicken Sie hier für das große Bild](großes-bild.jpg)

Oder als Bild-Link:

[![Thumbnail](thumb.jpg)](großes-bild.jpg)

4.4 Responsive Bilder (mit HTML)

Markdown allein unterstützt keine Bildgrößenanpassung. Nutzen Sie HTML:

<img src="bild.jpg" alt="Beschreibung" width="500"/>

Oder mit Style:

<img src="bild.jpg" alt="Beschreibung" style="width: 100%; max-width: 500px;"/>

4.5 Links in Markdown

Einfache Links

[Beschreibung](https://www.beispiel.de)

Links mit Titel

[Beschreibung](https://www.beispiel.de "Besuchen Sie unsere Webseite")

Relative Links

[Impressum](/impressum.html)
[Datenschutz](./datenschutz.md)
[Andere Seite](../andere-seite/)

4.6 Anker-Links (Sprung innerhalb der Seite)

Markdown generiert automatisch Anker aus Überschriften:

# Kapitel 1

Inhalt...

# Kapitel 2

Inhalt...

[Zurück zu Kapitel 1](#kapitel-1)

Regeln für Anker:

• Kleinbuchstaben
• Leerzeichen werden zu Bindestrichen (-)
• Sonderzeichen werden entfernt

Beispiel:

## Meine tolle Überschrift

[Link dazu](#meine-tolle-überschrift)

4.7 E-Mail-Links

[Kontaktieren Sie uns](mailto:info@beispiel.de)

Ergebnis: Öffnet das Standard-E-Mail-Programm.

4.8 Telefon-Links

[Rufen Sie uns an](tel:+49123456789)

4.9 Referenz-Links

Eine saubere Methode für lange Dokumente:

Das ist [ein Link][ref1] und das ist [noch einer][ref2].

Am Ende des Dokuments:

[ref1]: https://www.beispiel1.de "Beispiel 1"
[ref2]: https://www.beispiel2.de "Beispiel 2"

Vorteile:

• Bessere Lesbarkeit im Quellcode
• Einfaches Aktualisieren von URLs

4.10 Bilder optimal verwalten

Ordnerstruktur

mein-projekt/
├── bilder/
│   ├── profil.jpg
│   └── logo.png
├── docs/
│   └── README.md
└── index.md

In README.md:

![Logo](../bilder/logo.png)

Bilder optimieren

1. Komprimierung: TinyPNG, ImageOptim
2. Richtige Formate:
   • Fotos → JPEG
   • Grafiken → PNG/WebP
   • Animationen → GIF/WebP
3. Bildgrößen anpassen: Nicht 4000px breit für Web

4.11 Fehlerbehebung bei Bildern

Problem: Bild wird nicht angezeigt

Mögliche Ursachen:

1. Falscher Dateipfad
2. Dateiname falsch (Groß-/Kleinschreibung!)
3. Datei nicht vorhanden

Lösung:

<!-- Falsch -->
![Bild](Bild.JPG)

<!-- Richtig -->
![Bild](bild.jpg)

4.12 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Bilder einbinden (lokal und von URLs)
• ✅ Bilder verlinken
• ✅ Responsive Bilder mit HTML
• ✅ Verschiedene Link-Typen (intern, extern, E-Mail, Anker)
• ✅ Referenz-Links für bessere Organisation
• ✅ Bilder optimal verwalten

Im nächsten Kapitel werden wir Listen und Strukturierung vertiefen!

---

Übung: Erstellen Sie eine galerie.md Datei mit:

1. Einem Ordner bilder/ mit 3 Bildern (oder Platzhaltern)
2. Einer Galerie mit Vorschaubildern, die zu den großen Bildern verlinken
3. Einem Inhaltsverzeichnis mit Anker-Links zu den Abschnitten