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.