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