Links und Bilder

Webseiten leben von Verbindungen und visuellen Inhalten.
Ohne Links gäbe es kein „World Wide Web“, und ohne Bilder wären Seiten kaum ansprechend.

In dieser Lektion lernst du:

wie du Seiten miteinander verknüpfst,
wie du Bilder einfügst und beschreibst,
und was relative vs. absolute Pfade bedeuten.

1. Links erstellen

Ein Link wird mit dem <a>-Tag erstellt (steht für anchor, also „Anker“).

Grundaufbau:

<a href="https://informatik-pruefung.de">Zur Website</a>

Der Browser zeigt den Text „Zur Website“ als klickbaren Link an.
Beim Klick öffnet sich die angegebene URL.

2. Relative und absolute Pfade

Ein Link kann auf eine externe oder interne Seite zeigen.

Typ	Beispiel	Bedeutung
Absolut	`https://informatik-pruefung.de/kurs/html`	vollständige URL – verweist auf eine externe Seite
Relativ	`kontakt.html`	verweist auf eine Datei im selben Ordner
Relativ (Unterordner)	`unterseiten/info.html`	Datei liegt in einem Unterordner
Relativ (eine Ebene höher)	`../index.html`	greift auf Datei im übergeordneten Ordner zu

Praxis-Tipp:
Verwende für dein eigenes Projekt relative Pfade, wenn du innerhalb deines Webverzeichnisses bleibst.

3. Link-Attribute

Attribut	Zweck	Beispiel
`href`	Zieladresse	`<a href="seite.html">`
`target="_blank"`	Öffnet Link in neuem Tab	`<a href="seite.html" target="_blank">`
`title`	Tooltip beim Überfahren	`<a href="seite.html" title="Mehr erfahren">`

Beispiel:

<a href="https://informatik-pruefung.de" target="_blank" title="Zur Lernplattform">
  Informatik Prüfung öffnen
</a>

4. Bilder einfügen

Mit <img> kannst du Bilder darstellen.
Dieses Tag ist leer (es gibt kein schließendes </img>).

<img src="hund.jpg" alt="Ein Labrador mit Sonnenbrille">

Attribut	Bedeutung
`src`	Pfad zur Bilddatei
`alt`	Alternativtext (wird angezeigt, wenn das Bild fehlt oder für Screenreader)
`width` / `height`	Größe in Pixeln
`title`	Zusatzinfo beim Überfahren mit der Maus

Beispiel:

<img src="images/ava.jpg" alt="Ava im Garten" width="300" title="Mein Hund Ava">

Hinweis:
Das Attribut alt ist Pflicht – es verbessert Barrierefreiheit und SEO.

5. Kombination aus Link und Bild

Ein Bild kann selbst ein Link sein:

<a href="https://flashly.art" target="_blank">
  <img src="flashly_logo.png" alt="Flashly Logo" width="150">
</a>

Beim Klick auf das Bild öffnet sich die verlinkte Seite.

6. Beispielseite

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Links und Bilder</title>
  </head>
  <body>
    <h1>Links und Bilder</h1>

    <p>Ein externer Link:</p>
    <a href="https://informatik-pruefung.de" target="_blank">
      Zur Lernplattform
    </a>

    <p>Ein interner Link:</p>
    <a href="kontakt.html">Zu meiner Kontaktseite</a>

    <p>Ein eingebettetes Bild:</p>
    <img src="ava.jpg" alt="Mein Hund Ava" width="300">

    <p>Bild als Link:</p>
    <a href="https://reichert.studio" target="_blank">
      <img src="reichert_logo.png" alt="Studio Reichert Logo" width="200">
    </a>
  </body>
</html>