HTML und CSS: die Grundlage einer Weboberfläche

HTML beschreibt die Bedeutung und Struktur einer Webseite. CSS beschreibt ihre Darstellung. JavaScript ergänzt Verhalten. React erzeugt später solche HTML-Strukturen aus Komponenten. Vorher bauen wir eine kleine Seite ohne React. Ein sinnvoll gewähltes HTML-Element liefert bereits wichtige Funktionen für Tastatur und Hilfsmittel.

Beispieldateien

index.html

01Eine HTML-Datei öffnen

Speichere index.html und öffne sie im Browser. doctype wählt den modernen HTML-Modus. html lang gibt die Sprache an. head enthält Metadaten. body enthält den sichtbaren Inhalt. Das viewport-Metaelement unterstützt kleine Bildschirme.

index.html · htmlDatei öffnen

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>House notes</title>
  <style>
    body { font-family: system-ui; margin: 24px; color: #23483b; }
    main { max-width: 600px; margin: auto; }
    label, input, button { display: block; margin-bottom: 12px; }
    input, button { padding: 10px; font: inherit; }
  </style>
</head>
<body>
  <main>
    <h1>House notes</h1>
    <label for="title">Title</label>
    <input id="title" name="title">
    <button type="button">Save later</button>
  </main>
</body>
</html>

02Semantik verwenden

main markiert den Hauptinhalt. h1 ist die Hauptüberschrift. label verbindet einen Feldtitel mit einem Input über dessen ID. button ist von sich aus fokussierbar. Ein anklickbares div hätte diese Funktionen nicht automatisch.

03CSS-Regeln lesen

Ein Selektor wie main bestimmt die betroffenen Elemente. Die Deklarationen in geschweiften Klammern legen Eigenschaften fest. max-width begrenzt die Textbreite. margin: auto zentriert den Inhalt. Prüfe die Seite mit der Tab-Taste und bei einem schmalen Browserfenster.

Erwartetes Ergebnis

Eine Überschrift, ein beschriftetes Eingabefeld und ein per Tastatur erreichbarer Button. Der Button speichert noch nichts.

Deine Übung

Ergänze einen Absatz unter der Überschrift und eine sichtbare Fokusregel für den Button.

Lösung mit Erklärung anzeigen

Verwende ein p-Element für den Absatz. button:focus-visible { outline: 3px solid orange } macht Tastaturfokus sichtbar. Entferne den Standardfokus nicht ohne einen mindestens ebenso sichtbaren Ersatz.

Projektbezug und Quellen

Das Beispiel ist zum Lernen vereinfacht. Die verlinkte Codeversion zeigt die Anwendung im Projekt und die dortigen Prüfungen.

Hausakte