|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
|
|
|
"translation_date": "2025-10-03T08:31:55+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "de"
|
|
|
}
|
|
|
-->
|
|
|
# HTML-Übungsaufgabe: Erstellen eines Blog-Layouts
|
|
|
|
|
|
## Ziel
|
|
|
|
|
|
Entwerfen und schreiben Sie die HTML-Struktur für die Startseite eines persönlichen Blogs. Diese Übung hilft Ihnen, semantisches HTML, Layoutplanung und Codeorganisation zu üben.
|
|
|
|
|
|
## Anweisungen
|
|
|
|
|
|
1. **Entwerfen Sie Ihr Blog-Layout**
|
|
|
- Skizzieren Sie ein visuelles Layout Ihrer Blog-Startseite. Fügen Sie wichtige Bereiche wie Header, Navigation, Hauptinhalt, Sidebar und Footer ein.
|
|
|
- Sie können Papier verwenden und Ihre Skizze scannen oder digitale Tools nutzen (z. B. Figma, Adobe XD, Canva oder sogar PowerPoint).
|
|
|
|
|
|
2. **HTML-Elemente identifizieren**
|
|
|
- Listen Sie die HTML-Elemente auf, die Sie für jeden Bereich verwenden möchten (z. B. `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>` usw.).
|
|
|
|
|
|
3. **HTML-Markup schreiben**
|
|
|
- Schreiben Sie den HTML-Code für Ihr Layout. Konzentrieren Sie sich auf semantische Struktur und Best Practices.
|
|
|
- Verwenden Sie mindestens 10 verschiedene HTML-Elemente.
|
|
|
- Fügen Sie Kommentare hinzu, um Ihre Entscheidungen und die Struktur zu erklären.
|
|
|
|
|
|
4. **Reichen Sie Ihre Arbeit ein**
|
|
|
- Laden Sie Ihre Skizze/Ihr Layout und Ihre HTML-Datei hoch.
|
|
|
- Optional: Schreiben Sie eine kurze Reflexion (2–3 Sätze) über Ihre Designentscheidungen.
|
|
|
|
|
|
## Bewertungskriterien
|
|
|
|
|
|
| Kriterien | Hervorragend | Ausreichend | Verbesserungswürdig |
|
|
|
|------------------|--------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
|
|
|
| Visuelles Layout | Klare, detaillierte Skizze mit beschrifteten Bereichen und durchdachtem Layout | Grundlegende Skizze mit einigen beschrifteten Bereichen | Minimale oder unklare Skizze; keine Bereichsbeschriftungen |
|
|
|
| HTML-Elemente | Verwendet 10+ semantische HTML-Elemente; zeigt Verständnis für Struktur und Best Practices | Verwendet 5–9 HTML-Elemente; teilweise semantische Struktur | Verwendet weniger als 5 Elemente; keine semantische Struktur |
|
|
|
| Codequalität | Gut organisierter, lesbarer Code mit Kommentaren; entspricht HTML-Standards | Meistens organisierter Code; wenige Kommentare | Unorganisierter Code; keine Kommentare |
|
|
|
| Reflexion | Aufschlussreiche Reflexion über Designentscheidungen und Herausforderungen | Grundlegende Reflexion | Keine Reflexion oder irrelevant |
|
|
|
|
|
|
## Tipps
|
|
|
|
|
|
- Verwenden Sie semantische HTML-Tags für bessere Barrierefreiheit und SEO.
|
|
|
- Organisieren Sie Ihren Code mit Einrückungen und Kommentaren.
|
|
|
- Nutzen Sie die [MDN HTML-Elemente-Referenz](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) als Orientierungshilfe.
|
|
|
- Denken Sie darüber nach, wie Ihr Layout in zukünftigen Aufgaben erweitert oder gestaltet werden könnte.
|
|
|
|
|
|
---
|
|
|
|
|
|
**Haftungsausschluss**:
|
|
|
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben. |
