msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'eede56ed13'
${ noResults }
Web-Dev-For-Beginners/translations/de/3-terrarium/1-intro-to-html/assignment.md

4.2 KiB
Raw Blame History Escape

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 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 ü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.