Merklisten
Merkliste(n) anzeigen

HTML-Seite im Eigenbau

In diesem Workshop möchte ich Ihnen eine Anleitung zur Erstellung einer Homepage geben. Der WS, bezogen auf HTML, umfasst rd. 1 Lerneinheit. Im 2. Teil (CSS-Seite im Eigenbau) werden die Schüler schrittweise CSS einsetzen und die Navigation und den Content formatieren.

Im Vorfeld analysiere ich mit den S die Homepage, die wir nachbauen möchten: http://www.contao-theme.de/

Für diese Seite gebe ich einen Vorschlag für die Sturktur. Bitte die folgende Datei downlaoden.

Ordner anlegen

Im weiteren Schritt erstelle ich mit den S einen Arbeitsordner. Hier kommt die index.html und zwei weitere Ordner für die CSS-Dateien und die Bilder hinein. Den css-Ordner (benötigen wir später im Workshop CSS) - den img-Ordner benötigen wir gleich.

 

index.html erstellen

Laden Sie sich bitte die zip-Datei 01index.zip herunter und entpacken Sie dieses. Das ist die Lösungsdatei mit den Bereichen

header, nav_top, nav_left, content, footer

Anm.: Wenn ich mit den S dieses Beispiel (inkl. CSS) fertig habe, dann steige ich auf HTML5 um!

Beim Anzeigen im Browser sehen die S noch NICHTS, weil noch keine Bilder und kein Content hinzugefügt wurde - nur der Quelltext ist einsehbar. Erst beim WS CSS ergibt sich ein rundes Bild.

 

 

Bitte gehen Sie nun im Workshop CSS-Seite im Eigenbau weiter ...

Fußzeiel Bundesministerium für Bildung Gegestandsportale Education Group

Schnellübersicht

Fächer:

Informatik / IKT, Informations- und Officemanagement, 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 HTML-Tags verwenden
  • Die S können die HTML-Grundstruktur selbständig schreiben
  • Die S können zwischen browserbezogene Daten <head> und Browseranzeigedaten <body> unterscheiden
  • Die S können eine Seite mit Bereichen sinnvoll strukturieren

Anmerkungen

Die Schüler müssen bereits Grundkenntnisse in HTML besitzen. Dieses Beispiel arbeite ich mit meinen Schüler durch, bevor ich die erste Arbeit mit Ihnen schreiben (Test, BA, Schularbeit).

Ronnie Luft am 22.12.2013
letzte Änderung am: 15.04.2014