HTML-Miniprojekt — persönliche Site
Zuvor hat die Zusammenfassung Ihr HTML-Toolkit kartiert und hier als Übungsschritt verwiesen. Diese Lektion ist keine weitere Skill-Karte. Sie ist ein Baubrief: drei Seiten planen, eine Nav-Hülle teilen, echten Inhalt füllen und die Site gegen eine kurze Abnahmetabelle beweisen.
Warum jetzt ein Miniprojekt
Direkte Antwort
1) Mindestens drei Dateien: index.html, about.html, contact.html. 2) Dieselben header/nav/footer-Landmarks auf jeder Seite mit funktionierenden Links. 3) Echte Intro auf Home, kurze Story auf About, beschriftetes Name/E-Mail/Nachricht-Formular auf Contact. 4) Ein informatives Bild mit sinnvoller alt plus Skills-Liste oder kleine Fakten-Tabelle. 5) Mit Tastatur tabben; fehlende Labels und kaputte Links reparieren. 6) Jede Abnahmezeile abhaken bevor „fertig“.
📊 Acceptance criteria
| Item | Done when |
|---|---|
| Shared nav | Same landmark links work on every page |
| Semantics | header, nav, main, and footer on each page |
| Home & about | Real paragraphs — not placeholder lorem forever |
| Media | At least one informative image with useful alt |
| Data | A skills list or a small facts table |
| Form | Labeled name, email, message + a real submit button |
| Quality | Keyboard tab order makes sense; no unlabeled controls |
Planen vor dem Tippen
Zuerst skizzieren: Site-Name, drei Seitenzwecke, welches Foto, welche Skills/Fakten. Ordnerlayout entscheiden — alle drei HTML-Dateien zusammen für einfache relative Links. Person/Marke einmal benennen, damit h1 und title konsistent bleiben.
Gemeinsame Hülle — hier starten
Header/nav in jede Seite kopieren; nur main-Inhalt ändern. Relative href müssen exakt zu Dateinamen passen. Später echten button type=submit — Submit nicht mit leerem div faken.
<header>
<h1>Alex Site</h1>
<nav aria-label="Main">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<!-- page content -->
</main>
<footer>
<p>© Alex</p>
</footer>
Die Hülle lesen
- header+nav+main+footer geben klare Landmarks
- aria-label am nav hilft bei zweiter Nav später
- Relative Links machen drei Dateien zu einer Site
- Hülle wiederholen; nur main tauschen
- Kurzen Titel auch in title jeder Seite
- Die Zusammenfassung nannte Gewohnheiten — hier zusammen anwenden
Kontaktformular-Starter
Die Kontaktseite verbindet Formular-Skills mit dem Projekt. Jedes Control mit sichtbarem label. name-Attribute für späteres Backend. Echten Submit im Markup auch ohne Server-Post.
<form action="#" method="post">
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
</p>
<p>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="5" required></textarea>
</p>
<button type="submit">Send</button>
</form>
Build-Reihenfolge die funktioniert
- Hülle in drei Dateien; Nav-Links bis alles erreichbar. 2. Home-Intro und About-Story (+ Liste/Tabelle). 3. Foto in images/ mit src und spezifischer alt. 4. Formular einfügen; Labels, names, Submit prüfen. 5. Alle drei Seiten öffnen; schmal; tabben bis Submit. 6. Abnahmezeilen abhaken — leichtes CSS später.
Typische Fehler in diesem Projekt
- Nav einmal kopieren, dann nur eine Seite editieren bis Links driftieren
- Kontaktfelder nur mit Placeholder ohne label
- Layout-Tabelle für die ganze Seite statt Landmarks
- Leeres alt auf bedeutungsvollem Foto
- Lorem stehen lassen und „fertig“ sagen
- Zu Frameworks/schwerem CSS springen bevor die drei Seiten halten
- Zusammenfassungs-Gewohnheit vergessen: Struktur und Labels zuerst
Zusammenfassung
- Diese Session ist ein praktischer Personal-Site-Build, keine weitere Kurskarte
- Drei Seiten teilen header/nav/main/footer mit funktionierenden relativen Links
- Medien, Liste oder Tabelle und beschriftetes Kontaktformular kombinieren
- Die Abnahmetabelle ist Ihre Definition von fertig
- Tastatur-Check vor CSS-Politur
- Optionale Folgethemen (SVG …) sind Extra — zuerst diese Site liefern
Kurze Erinnerung
Wenn Sie stecken, zurück zur Abnahmetabelle — nicht neue Tags auswendig. Ziel ist Übung: Kurs-Skills in einer kleinen, im Browser öffenbaren Site kombinieren.
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt