Inhalt

• Aufgabenstellung
  • 1. Inhalt mit HTML
  • 2. Aussehen mit CSS
• Ressourcen

Aufgabenstellung

Es ist eine HTML-Seite zu erstellen und das Design an eine vorgegeben Vorlage anzupassen.

1. Inhalt mit HTML

Umsetzen der Seite in HTML:

• Verwende unterschiedliche Tags (<div>, <h1>, <table>, …) um die untenstehende Ausgabe zu erreichen
• Achte auf sauberen Quelltext

2. Aussehen mit CSS

Passe das Aussehen der Seite so an, dass sie der Vorlage entspricht.

• Lege eine externe Style-Datei an und binde sie in die HTML-Seite ein
• Verwende die verschiedenen Arten von Selektieren sinnvoll
  • Tag-Selektoren, z.B.: h1 { ... }
  • Klassen-Selektoren, z.B.: .rot { ... }
  • ID-Selektoren, z.B.: #container { ... }
• Achte auf eine saubere Ordnerstruktur (eigene Verzeichnisse für CSS-Dateien und Bilder)

Ressourcen

• .zip des leeren Projekts
• star.png
• heart.png
• search.png

• tune.png

• Mozilla.org - HTML Basics
• Mozilla.org - CSS Basics
• Mozilla.org - CSS Selectors

HTML und CSS

• Aufgabe 1 - HTML-Portfolio
• Aufgabe 2 - CSS-Portfolio
• Aufgabe 3 - Formulare
• Aufgabe - Wiederholung HTML und CSS