Suche
MenüSchließen
Astro für Anfänger · Teil 6TutorialEinsteiger

Astro

Astro-Kurs 06: HTML-Grundlagen für Astro

Die wichtigsten HTML-Tags korrekt einsetzen. Schritt-für-Schritt-Lektion für den Astro-Anfängerkurs der Know-How-Schmiede.

Veröffentlicht am

Etappe 1 – Grundlagen · Lektion 6 von 11 · Lernziel: Die wichtigsten HTML-Tags korrekt einsetzen.

Voraussetzung: Grundlagen aus Lektion 5; arbeite im selben Projekt modellbau-webseite.

HTML beschreibt die Struktur

HTML besteht aus Elementen, häufig mit öffnendem und schließendem Tag: <p>Mein Text</p>. Manche Elemente wie <img> haben keinen schließenden Tag. Semantisches HTML beschreibt die Bedeutung eines Inhalts: <nav> für Navigation, <main> für Hauptinhalt und <footer> für Fußzeile.

Die häufigsten Elemente

Element Aufgabe
<h1> bis <h6> Überschriften in Hierarchie
<p> Absatz
<a href="..."> Link
<ul>, <li> Aufzählung
<img src="..." alt="..."> Bild mit Alternativtext
<section> Thematischer Abschnitt
<article> Eigenständiger Inhalt

Praktische Übung im Astro-Projekt

Ersetze src/pages/index.astro durch:

---
const titel = 'Meine Modellbau-Werkstatt';
---

<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{titel}</title>
  </head>
  <body>
    <header><h1>{titel}</h1></header>
    <main>
      <section>
        <h2>Meine Interessen</h2>
        <p>Ich baue Modelle und drucke eigene Bauteile.</p>
        <ul>
          <li>Modellflug</li>
          <li>3D-Druck</li>
          <li>Elektronik</li>
        </ul>
      </section>
      <section>
        <h2>Mein erstes Projekt</h2>
        <img src="/bilder/projekt.jpg" alt="Mein aktuelles Modellbauprojekt" width="420" />
        <p>Mehr Projekte folgen bald.</p>
      </section>
    </main>
    <footer><p>Meine Modellbau-Werkstatt</p></footer>
  </body>
</html>

Das Bild aus Lektion 05 muss unter public/bilder/projekt.jpg vorhanden sein. Wenn du noch kein Bild hast, entferne die <img>-Zeile bis du eines hinzugefügt hast.

Warum ist alt wichtig?

Der Alternativtext beschreibt das Bild, wenn es nicht angezeigt werden kann oder wenn die Webseite mit einem Screenreader gelesen wird. Schreibe eine tatsächliche Bildbeschreibung statt nur „Bild“.

Übung

Ergänze einen vierten Listenpunkt und einen Link auf die Astro-Dokumentation:

<a href="https://docs.astro.build/de/">Astro-Dokumentation</a>

Kontrolle: Die Überschriften erscheinen in der richtigen Reihenfolge, die Liste hat vier Einträge und der Link lässt sich öffnen.

Weitere Informationen: Offizielle Astro-Dokumentation.