3-Spalten-Layout mit HTML5

In diesem Workshop werden die Schüler mit HTML und CSS ein 3-Spalten-Layout erstellen und dieses als Vorlage für weitere Übungen verwenden.

Arbeitsblatt

Folgendes Arbeitsblatt beinhaltet einen Einleitungsteil und weitere drei Aufgabenstellungen zur Entwicklung eines 3-Spalten-Layouts mit HTML5.

Lösung Aufgabe1

Die folgende Zip-Datei beinhaltet die Lösung zur Erstellung eines 3-Spalten-Layouts OHNE HTML5. Bitte entpacken und die index.html starten.

Lösung Aufgabe2

Die folgende Zip-Datei beinhaltet die Lösung zur Erstellung eines 3-Spalten-Layouts MIT HTML5. In diesem Beispiel verzichten die Schüler beim Entwickeln des Dokuments auf die Tags <section>, <article> und <aside>.

Bitte entpacken und index.html starten.

Lösung Aufgabe3

Die folgende Zip-Datei beinhaltet die Lösung zur Erstellung eines 3-Spalten-Layouts MIT HTML5 UND der tags <section>, <article>, <aside>.

Bitte entpacken und index.html starten.

Link

Auf der Homepage von w3schools werden die neuen HTML5-Elemente vorgestellt. Für jedes Tag gibt es eine kurze Erklärung und ebenso ein Beispiel zum Ansehen bzw. selber Ausprobieren.

w3schools html5-Elemente

Schnellübersicht

Fächer:

Informatik / IKT, Wirtschaftsinformatik

Erstellt von:

Ronnie Luft

Zeitdauer:

1 UE

 

Schulstufe(n)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

Kompetenzen

4.8 Ich kann HTML-Dokumente lesen und manuell erstellen.

Lernziele

  • Die S können das HTML-Grundgerüst selber schreiben.
  • Die S können ein HTML-Dokument in Bereich gliedern.
  • Die S können mit CSS die Seite strukturieren.

Anmerkungen

Die Schüler erstellen mit HTML ein Grundgerüst und formatieren mit CSS das HTML-Dokument.