Unterrichtsbesuch im Fach Informatik
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Studienseminar für Gymnasien Darmstadt
Andreas Olf, StRef
Mathematik/Informatik
Intensivphase I
3. Unterrichtsbesuch im Fach Informatik
Thema der Unterrichtsreihe: Internet/(X)HTML
Thema der Unterrichtsstunde: Einführung in CSS
Kurs: 11
Datum:
Zeit:
Raum:
Seminarleitung:
Schulleiter:
stellv. Schulleiter:
Fachleiter:
EG-Seminarleiterin:1 Analyse der Unterrichtssituation
1.1 Zum Bild des Kurses
Der Informatikkurs der Klassenstufe 11 besteht aus 23 Schülern1 und setzt sich aus neun
Schülerinnen und 14 Schülern zusammen. Ich unterrichte ihn eigenverantwortlich seit Beginn
des Schuljahres (bisher insgesamt 8 Stunden). Es ist ein sogenannter „Anfängerkurs“, das
heißt, dass nahezu alle Schüler keinen Wahlpflichtunterricht Informatik in der Sekundarstufe I
besucht haben und auch im privaten Bereich – außer dem anwendungsorientierten Nutzen
eines Computers (jeder Schüler hat von zu Hause aus die Möglichkeit, die Dienste des
Internets zu nutzen) – noch keinen intensiven Kontakt mit der Informatik hatten. Von daher
ist das Ausgangswissen relativ ausgeglichen, wenngleich einige Schüler schon etwas
Erfahrung – gerade im Bereich HTML2 – haben. Der Umgang mit dem PC stellt für keinen
Schüler ein Problem dar.
Der Kurs ist insgesamt sehr interessiert3 und engagiert: Arbeitsaufträge werden konzentriert
erledigt, es herrscht eine angenehme Arbeitsatmosphäre. Selbst anfangs, in den eher
„trockenen“ Theoriestunden über das Internet, konnte ich ein aktives Lernen über eine
Doppelstunde hinweg wahrnehmen. Auf Grund der oben geschilderten Situation finden
Unterrichtsgespräche häufig eine breite Beteiligung, und auch Schüler, die sich nicht recht
getrauen, sich zu melden, zeigen durch Ermunterung meinerseits erfolgreich ihr Wissen bzw.
ihr Ergebnis des Arbeitsauftrages.
23 Schüler sind für einen Informatikunterricht in meinen Augen verhältnismäßig viele; es
herrscht bei mir im Vergleich zu anderen Informatikgruppen insgesamt der leichte Eindruck
einer gewissen Enge im Raum vor. Da nur ca. 16 Computer zur Verfügung stehen, arbeiten
die Schüler in den Phasen des Rechnereinsatzes zwangsläufig in Partnerarbeit oder 3er-
Gruppen zusammen. Dabei habe ich in einigen wenigen Gruppen schon beobachtet, dass
derjenige, der nicht am PC sitzt und tippt, der Versuchung erlegen ist, gedanklich
abzuschalten.
Bisher hat sich noch keine Gelegenheit zur Präsentation der Ergebnisse via Beamer ergeben;
die Schüler haben vielmehr ihre Resultate im Plenum mündlich vorgetragen.
Sechs Schüler konnten die Einführungsstunden zu XHTML auf Grund eines
Schüleraustausches nicht besuchen; sie haben damit auch nicht an dem Miniprojekt
mitarbeiten können. Vor dem Unterrichtsbesuch verbleibt mir eine Stunde, sie zu integrieren.
1
Im Folgenden bezeichnet der Ausdruck „Schüler“ immer die Vertreter beiderlei Geschlechts.
2
Hypertext-Markup-Language
3
was in meinen Augen durch viele kluge Nachfragen deutlich wird
11.2 Zur Lernausgangslage
Seit vier Stunden behandle ich das Thema XHTML4. Dabei haben die Schüler das
Grundkonzept von HTML, die Grundstruktur einer XHTML-Datei sowie die (X)HTML-Tags
für Überschriften, Verweise, Listen, Bilder und Paragraphen kennengelernt. Da die meisten
Schüler – wie oben erwähnt – wenige bis keine Vorkenntnisse hatten, habe ich von Beginn an
darauf geachtet, nur vollständig XHTML-kompatiblen Kode den Schülern beizubringen5. Die
Schüler kennen die Möglichkeit, den Kode via W3C-Validator6 auf Korrektheit zu
überprüfen. Außerdem habe ich Wert darauf gelegt, den XHTML-Kode barrierefrei7 zu
programmieren, also auch Menschen mit körperlichen Einschränkungen zugänglich zu
machen. Zudem habe ich bis zu dieser Stunde komplett auf die Verwendung von Attributen
verzichtet, die die Darstellung der Seite beeinflussen; vielmehr habe ich bei Vorschlägen,
solche Attribute anzugeben, immer deutlich darauf hingewiesen, dass wir Struktur bzw. Inhalt
und Design trennen wollen.
Zum Erstellen einer XHTML-Datei verfügen die Schüler über eine Vorlage, zur Bearbeitung
des Quellkodes einer XHTML-Datei benutzen sie den Editor Phase5.
Als einfaches Projekt, das zur Umsetzung der vermittelten Inhalte dienen soll, habe ich ein
„kleines Länderlexikon“ gewählt. In Partnerarbeit bzw. 3er-Gruppe haben die Schüler
Informationen aus dem Internet zusammengetragen und eine entsprechende XHTML-Seite
erstellt, in der alle fünf besprochenen (X)HTML-Tags vorkommen. Wie im Screenshot zu
sehen ist, wurde komplett auf design-beeinflussende Attribute verzichtet.
4
extensible Hypertext-Markup-Language
5
s. hierzu und den nachfolgenden Aspekten auch in Didaktische Überlegungen
6
www.w3c.org, 29.09.04
7
„Barrierefreies Webdesign ... ist die Kunst, Webseiten so zu programmieren, dass jeder sie lesen kann.“
(www.barierrefreies-webdesign.de, 29.09.04)
22 Sachanalyse
Cascading Style-Sheets (CSS) sind kein Bestandteil von XHTML, sondern eine eigene
Sprachentwicklung. Auf den Punkt gebracht sind CSS Formatvorlagen; Formatierungen, die
in einer Internet-Seite immer wiederkehren, werden so nur einmal erstellt.
Die Vorteile bei der Benutzung von CSS liegen auf der Hand:
` Aussehen und Positionierung von Elementen können nun derart beeinflusst werden,
wie es bislang nur von Desktop-Publishing-Programmen bekannt war.
` Auf dem Weg zum barrierefreien Web-Design stellt die CSS einige sinnvolle
Techniken zur Verfügung (z.B. Organisation der Inhalte)
` Bei Auslagerung in einer externen Datei erfolgt eine Trennung von Inhalt (dieser bzw.
diese findet sich in den XHTML-Dokumenten) und Formatierungen (diese werden aus
der separaten CSS-Datei bezogen).
` Die Seiten werden dadurch kleiner (und damit leichter lesbar), die Übertragung erfolgt
schneller, kostengünstiger und anwenderfreundlicher.
` Die Pflege einer bestehenden Internet-Präsentation ist einfacher und schneller.
Cascading Style-Sheets bestehen aus Formaten, die bestimmte (X)HTML-Elemente oder eine
bestimmte Auswahl von (X)HTML-Elementen umdefinieren. Zum Auswählen einer
bestimmten Gruppe von (X)HTML-Elementen, für die ein Format gelten soll, gibt es in CSS
die Syntax der so genannten Selektoren. Die Anweisung
p { color:red; }
beispielsweise färbt die Schrift aller Paragraphen im Dokument rot ein. Formate können auch
für Klassen definiert werden. Damit können etwa Überschriften 1. Ordnung in zwei Varianten
formatiert werden. Angewendet werden solche Klassen in (X)HTML mit dem
Universalattribut class.
CSS-Formate lassen sich entweder in einem zentralen Style-Bereich definieren, in einer
externen CSS-Datei oder direkt im einleitenden Tag eines HTML-Elements. Die sinnvollste
Variante ist die Einbindung einer externen Datei, die über folgende Anweisung innerhalb des
head-Tags des XHTML-Dokumentes geschieht:
Die beiden (X)HTML-Elemente div und span haben besondere Bedeutung für Stylesheets.
Der Grund ist, dass sie selbst relativ eigenschaftslos sind. Der einzige Unterschied besteht
darin, dass das div-Element eine neue Zeile im Textfluss erzwingt, während span zur
Verwendung innerhalb eines Textes verwendet werden kann und daher überhaupt keine
Eigenschaften hat. Mit diesen beiden Elementen kann man also für eine zusätzliche logische
Strukturierung innerhalb des Dokumentes sorgen. CSS bietet weitere, vielfältige
Möglichkeiten der Darstellung von Internetseiten, auf die ich an dieser Stelle nicht näher
eingehen möchte; ich verweise auf die einschlägige Literatur8.
8
z.B. www.selfhtml.net (03.10.04)
33 Didaktische Überlegungen
3.1 Zur Unterrichtseinheit
Im Lehrplan für die Sekundarstufe II befindet sich die Aussage, dass die Schüler mit
Vorkenntnissen in die Jahrgangsstufe 11 kommen, die
„im Sinne eines Spiralcurriculums (...) im Grundkurs 11 vertieft [werden]“9
sollen. Da es sich – wie erwähnt – um einen Anfängerkurs handelt, sind die Voraussetzungen
für diesen Kurs ein wenig anders: Die meisten Schüler haben keine oder nur rudimentäre
Vorkenntnisse. Daraus ergibt sich die glückliche Lage, dass die Schüler die Grundlagen von
XHTML direkt erlernen können – ohne XHTML-inkompatiblen, evtl. verwirrenden Ballast
mitschleppen zu müssen. Zur Begründung, warum die Behandlung von HTML in der Schule
sinnvoll ist, verweise ich auf meinen Entwurf zum 2. Unterrichtsbesuch in Informatik. Was ist
aber der Vorteil von XHTML gegenüber HTML? Webseiten werden in naher Zukunft nicht
nur auf traditionellen PCs lauffähig sein, sondern müssen auf unterschiedlichen Systemen
darstellbar sein (etwa auf Handy, PDAs oder sogar Kühlschränken). Damit ergibt sich für die
Merkmale von Internetseiten aber folgende Notwendigkeiten, die von XHTML auf Grund
seiner XML10-basierenden Technologie erfüllt werden:
Erweiterbarkeit
Die Sprache ist durch die zu Grunde liegende DTD (Document-Type-Definition)
erweiterbar, was für zukünftige Entwicklungen wichtig ist.
Funktionalität
Durch die Erweiterbarkeit werden Web-Autoren in die Lage versetzt, zum Beispiel
mathematische Inhalte mit Formeln zu versehen, ohne diese als Bild einbauen zu
müssen.
Portabilität
Dokumente müssen auf unterschiedlichen Systemen und Plattformen mit
verschiedenen Leistungsmerkmalen darstellbar sein. Mit XML ist eine offene
Schnittstelle für jegliche Anwendungen verfügbar.
Damit wird auf die Forderung des Lehrplans eingegangen,
„Repräsentations- und Dokumentationstechniken (...), welche zum einen über die sonst in
diesem Bereich übliche lineare Struktur hinausgehen und zum anderen der Vielfalt der
Informationssysteme dadurch Rechnung tragen, dass sie vom Ausgabemedium weitgehend
unabhängig sind“11,
zu vermitteln.
9
Lehrplan Informatik, Hess. Kultusministerium, S. 8
10
extensible Markup Language
11
Lehrplan Informatik, Hess. Kultusministerium, S. 8
4XHTML führt dazu, dass die Schüler Dokumente wohlgeformt programmieren müssen:
Verstöße (z.B. gegen die Verschachtelungslogik) werden geahndet und nicht wie meist in
HTML vom Browser kulant behandelt. Damit lernen die Schüler eine erste formale Sprache
kennen. Durch Einsatz des W3C-Validators gibt es hier sogar Analogien zum Kompilieren
von Quellprogrammen herkömmlicher Programmiersprachen: Syntaktische Fehler werden mit
Zeilennummer und (vermeintlicher) Ursache offengelegt. Die Fehlerbehebung als ein
wichtiger Bestandteil der Softwareentwicklung wird so schon frühzeitig thematisiert.
Vergleicht man die Einheit (X)HTML mit den vier Leitlinien, denen Informatikunterricht in
der Schule unterliegen soll, findet man folgende konkrete Umsetzungen:
Umgang mit Informationen
Die Schüler lernen, Informationen logisch einwandfrei strukturiert und adäquat
darzustellen. Welche Informationen sind unnütz, welche sollten als Meta-
Informationen angegeben werden?
Wirkprinzipien von Informatiksystemen
Die auf Hyperlinks basierende Struktur des Internets wird durch das Erstellen eigener
Seiten weiter verdeutlicht.
Informatische Modellierung
Die Schüler müssen ihre Ideen mit der formalen Sprache XHTML beschreiben und
strukturieren, lernen geeignete Werkzeuge kennen, diese Ideen umzusetzen und eignen
sich Methoden und Techniken zur Effizienzsteigerung an.
Wechselwirkung zwischen Informatiksystemen, Individuum und Gesellschaft
Beim Design von Webseiten wird oft nicht berücksichtigt, dass viele Menschen
körperliche Einschränkungen haben. Fehlende Texte zur Beschreibung von Grafiken,
eine unglückliche Auswahl der Farbkombinationen oder unklar strukturierte
Webseiten bilden dann eine Barriere. „Gute“ Programmierung erleichtert Menschen
mit Sinnes- und Körperbehinderungen das Surfen im Netz, anstatt sie daran zu
hindern. Die Einheit (X)HTML bietet den Schülern die Möglichkeit, sich der
Auswirkung von Informatiksystemen bewusst zu werden.
3.2 Zur Unterrichtsstunde
Neben vielfältigen Formatierungsmöglichkeiten bietet – wie in der Sachanalyse bereits
erwähnt – CSS Techniken zum barrierefreien Webdesign und zur Trennung von Inhalt und
Form. Gerade die letzten beiden Technologien stellen für mich die zentralen Eigenschaften
von CSS und damit die Berechtigung dar, CSS in der Schule zu behandeln.
Mit der Aufteilung in die Bereiche „Inhalt“ und „Design“ offenbart sich nämlich ein
wichtiges Grundprinzip der Informatik: Darzustellende Informationen müssen analysiert (Was
ist Inhalt? Was ist Design?) und entsprechend separat aufbereitet werden. Diese „strukturierte
Zerlegung“ stellt nach Schubert/Schwill eine sogenannte Masteridee dar, d.i.
5„eine phasenübergreifende Idee, [die] in allen Stadien der Softwareentwicklung eine
12
herausragende Rolle“
spielt (den Softwareentwicklungsprozess nehmen Schubert/Schwill als Ausgangspunkt, um
zentrale Elemente der Informatik zu beleuchten). Aber auch die Masteridee „Sprache“ kommt
durch die Behandlung von CSS zur Geltung: Die Schüler müssen ihre Vorstellungen
syntaktisch korrekt formulieren und lernen damit ein grundlegendes Problem der Informatik
kennen: Mit Hilfe vorgegebener Computersprachen das eigene Vorhaben so auszudrücken,
dass der Computer bzw. das Softwaresystem das Richtige tut. Diese beiden (von drei)
Masterideen sind nach Schubert/Schwill im Übrigen spezielle fundamentale Ideen, die im
Allgemeinen einige Kriterien erfüllen müssen, um als fundamental bezeichnet werden zu
können. Baumann13 sieht das Eruieren der fundamentalen Ideen (das „Wesen“ oder der
„Bildungskern“ des Faches) als ein Teilproblem des Legimitationsproblems, warum ein Fach
in der Schule unterrichtet werden darf, an. Untersucht man die Behandlung von CSS (hier
speziell unter dem Aspekt der Formatvorlage bzw. abstrahiert als Mustervorlage) im Hinblick
auf die von Schubert/Schwill aufgestellten Kriterien, ergeben sich folgende Gesichtspunkte,
die für CSS als Unterrichtsinhalt sprechen:
(1) Horizontalkriterium
Die Idee der Formatvorlage findet sich in vielen Bereichen wieder: Beispielsweise in
der Textverarbeitung oder auch bei Makros in Programmiersprachen.
(2) Vertikalkriterium
Allein in der Textverarbeitung ergeben sich von der einfachen Druckvorlage
angefangen bis hin zur komplexen Dokumentenvorlage mehrere Schwierigkeits-
Niveaus.
(3) Zielkriterium
Praxistaugliche Muster für den Alltag schaffen.
(4) Zeitkriterium
Angefangen von den Lettern Gutenbergs als Mustervorlage bis hin zur elektronischen
Stempelung erstreckt sich eine Reihe von kulturellen Entwicklungen.
(5) Sinnkriterium
Prägetechnik in Firmen, Ausstechen von Plätzchen oder Stempel für die eigene
Adresse sind nur einige Beispiele aus der Lebenswelt.
Bei der Verwendung von CSS muss man nicht zwangsläufig Inhalt und Formatanweisungen
physisch trennen – in den Tags eingebettete style-Attribute könnten ebenso verwendet
werden. Wenngleich damit oder auch mit weiteren Konstrukten auch eine logische Trennung
vollzogen wäre, werde ich die verschiedenen Möglichkeiten in der Einführungsstunde auf den
Weg einer externen CSS-Datei reduzieren, weil damit die oben beschriebenen Vorzüge erst
richtig zur Geltung kommen. Zentrales Ziel dieser Stunde ist es also, folgende Vorteile den
Schülern erfahrbar zu machen:
12
Didaktik der Informatik, S. 89, Schubert S./Schwill A.
13
Didaktik der Informatik, S. 115, R. Baumann
6` Die Seiten werden kleiner,
` damit leichter lesbar,
` die Übertragung erfolgt schneller, kostengünstiger und anwenderfreundlicher und
` die Pflege einer bestehenden Internet-Präsentation ist einfacher und schneller –
wobei der letzte Spiegelpunkt in meinen Augen den wichtigsten, im Zeitalter von immer
schneller werdenden Internetverbindungen, praxisorientiertesten Aspekt darstellt.
Damit dies gelingt, müssen zunächst einfache Grundlagen in der Anwendung von CSS
behandelt werden, damit die Schüler ein Gefühl dafür bekommen, was CSS überhaupt ist; die
weiterführende Untersuchung wäre ansonsten zu abstrakt und ohne Fundierung. Als
Ausgangspunkt für CSS nehme ich hierbei das Definieren von Formaten für (X)HTML-
Elementen. In der Reduktion der Möglichkeiten von CSS anfangs auf diese Technik sehe ich
einen Einstieg, der von den Schüler nachvollzogen werden kann und sie nicht überfordert.14
Als konkrete Beispiele im Hinblick auf Lerneffekt und Umsetzbarkeit habe ich mich für
folgende Formatierungen von (X)HTML-Elemente entschieden:
- alle Paragraphen werden rot geschrieben
- alle Überschriften 3. Ordnung werden zentriert dargestellt
- alle Listenpunkte werden ausgeblendet
- der Hintergrund der Überschrift 1. Ordnung15 wird gelb eingefärbt
Wichtig dabei ist, dass die Schüler die Vorteile selbst/handlungsorientiert erfahren, um sie so
intensiver zu verinnerlichen. Neben der Vergrößerung der Handlungskompetenz im
Rechnereinsatz wird auch so die Aktivität der Schüler verstärkt, was eine gute
Lernvoraussetzung schafft. Durch das Erstellen eines Handlungsproduktes wird zudem die
Motivation erhöht16, weshalb die Schüler die Grundlagen direkt in ihrer Länderseite umsetzen
sollen.
Für den zweiten wichtigen Aspekt von CSS ist Folgendes zu sagen: Nicht nur, dass aus
öffentlicher Hand finanzierte Webauftritte nach dem 31. Dezember 2005 per Gesetz17
zwingend behindertengerecht sein müssen – barrierefreies Webdesign erfordert eine
erweiterte Analyse (Welche Struktur liegt vor? Welche Linearisierung ist sinnvoll? Welche
Formatierungen sind adäquat?) der darzustellenden Informationen. CSS bietet auch hier
entsprechende Techniken18, die jedoch in der Einführungsstunde den Rahmen sprengen
würden. In den Folgestunden wird dies jedoch zentrales Thema sein.
14
Verbleibt noch Zeit am Ende der Stunde können weitere CSS-Techniken besprochen werden, etwa, wie man
gleiche HTML-Elemente unterschiedlich formatiert oder Bereiche definiert. Dies kann jedoch auch als
Hausaufgabe aufgegeben werden.
15
genaugenommen aller Überschriften 1. Ordnung
16
vgl. Unterrichtsmethoden II: Praxisband, H. Meyer (1987), Cornelsen Verlag, Berlin
17
„Verordnung zur Schaffung barrierefreier Informationstechnik“ – Rechtverordnung zu §11 des
Behindertengleichstellungsgesetzes (BGG)
18
s. bspw. unter http://www.barrierefreies-webdesign.de/knowhow/css-design/organisation.php, ff.
(03.10.04)
74 Lernziele
4.1 Didaktisches Zentrum
Die Schüler sollen grundlegende CSS-Elemente sowie die Vorteile der physischen Trennung
von Inhalt und Design kennenlernen.
4.2 Weitere Lernziele
Die Schüler sollen...
... Formatierungen identifizieren und in CSS realisieren können
... im Internet recherchieren, einen Sachtext analysieren und die Erkenntnisse direkt
umsetzen können.
... in Partnerarbeit oder Kleingruppen an einem Problem arbeiten können.
... ihre „Produkte“ dem Kurs präsentieren können.
5 Methodische Überlegungen
Zu Beginn der Stunde stelle ich den bisherigen Stand des Miniprojektes „Länderlexikon“ vor,
damit alle Schüler (nochmals) einen Überblick darüber bekommen.
Die Motivation, die Seiten gestalterisch zu verändern, muss ich nicht großartig fördern:
Einige Schüler mit HTML Vorkenntnissen haben dies bereits in den vergangenen Stunden mit
HTML-eigenen Mitteln versucht. Da ich dies an der jeweiligen Stelle mit dem Verweis auf
CSS immer unterbunden habe, verbinden einige Schüler den Begriff CSS schon mit
Formatierungen, während andere ihn wohl noch nicht gehört haben, so dass ich hier ein
klärendes Lehrer-Schüler-Gespräch starten werde.
Anschließend werde ich sukzessiv einfache Formatierungen an meiner Länderseite
vornehmen, die die Schüler beschreiben (Identifizieren19) sollen (dabei sehen die Schüler
schon gleichsam undokumentiert, da ich dies via Beamer durchführe, dass dazu lediglich eine
Veränderung einer Datei notwendig ist20). Im Hinblick auf eine spätere Umsetzung
(Realisieren) halte ich die Punkte an der Tafel fest. Dieses Verfahren ist den Schülern schon
bei der Einführung der wichtigsten XHTML-Tags begegnet.
Alternativ hatte ich überlegt – um den Schülern einen kurzen Einblick zu gewähren, was das
Ziel der nächsten Stunden sein wird, den Inhalt einer – unter Einbindung von CSS –
19
Identifizieren und Realisieren, nach Bruder (Situationen und Strategien beim Lehren und Lernen von
Mathematik, R. Bruder, S. 53) elementare Aneignungshandlungen neuen Stoffes
20
ich überschreibe dabei jeweils die alte CSS-Datei durch eine veränderte Datei
8umfangreich gestalteten Länderseite mit einer entsprechenden Bemerkung anzuzeigen. Doch
im Hinblick auf die Gefahr einer Überfrachtung bzw. fehlerhaften oder zumindest
mangelnden Identifizierung der benutzen Formatierungen habe ich darauf verzichtet. In einem
aus leistungsstarken und mit Vorkenntnissen besitzenden Schülern bestehenden Kurs hätte
man auch auf die Seite www.csszengarden.com (03.10.04) verweisen können, in der die
Schüler selbstständig die dort verwendeten, herunterladbaren HTML- und CSS-Dateien
analysieren sollen.
Bevor es nun in die Partner- bzw. Gruppenphase zur Erarbeitung der CSS-Grundlagen geht,
will ich noch zentral klären, wie die Einbindung einer CSS-Datei in einem XHTML-
Dokument erfolgt. Zentral deshalb, weil mir der trennende Charakter sehr wichtig ist und ich
erhoffe, dass er dadurch allen Schülern bewusst wird.
Die Partner- bzw. Gruppenphase ist den Schülern aus den letzten Stunden vertraut,
wenngleich sie dort ohne Aufgabenblatt gearbeitet haben. Da die Arbeitsaufträge in diesem
Fall ein wenig komplexer sind, gebe ich in dieser Stunde jedoch ein solches aus. Zudem habe
ich dort alternativ zur Recherche im Internet die Anleitung abgedruckt, wie man Formate für
HTML-Elemente definiert. Zum Einen, damit die Schüler mehrere Wege gehen können, an
die Informationen zu gelangen, um Anderen, weil sie somit gedruckte Unterlagen zum
Nachlesen an der Hand haben.
Nach der Arbeitsphase erfolgt die Sicherung gemeinsam am Lehrer-Rechner, indem die
einzelnen Formatierungen nacheinander von Schülerseite in einer zentralen Datei eingetragen
werden. Da die Schüler in meinem Unterricht noch keine Gelegenheit zu einer Präsentation
hatten, führe ich dies in „kleinen Häppchen“ ein. Anschließend haben Schüler die
Möglichkeit, ihre erweiterten Formatierungen aus Aufgabe 421 vorzustellen. Diese stellt eine
erweitere Präsentationskompentenz bzw. ein wenig mehr Mut voraus, so dass die ganze
Gruppe die Ergebnisse präsentieren darf. Eine Abstimmung soll entscheiden, welches die
gelungenste Umsetzung ist; dabei sollen die Schüler begründen, warum sie sich jeweils dafür
entschieden haben. Die entsprechende CSS-Datei werde ich dann in den Länderlexikon-
Ordner kopieren; die Schüler werden (erstaunt22) feststellen, dass sich das auf alle
Länderseiten auswirkt. In diesem Zusammenhang werden nun in einem Lehrer-Schüler-
Gespräch die Vorteile der Trennung von Inhalt und Design herausgestellt und an der Tafel
gesichert.
21
s. Anlage
22
evtl. Bedarf es hier einem entsprechenden Hinweis
96 Geplanter Unterrichtsverlauf
Zeit Phase Inhalt Methode23 Medien
2’ Wiederholung Vorstellen des bisherigen Mini- LSG Beamer
Projektes
3’ Einstieg L: Noch sieht unsere Seite ja ein LSG
wenig langweilig aus; wir haben uns
noch keine Gedanken über Design
gemacht.
L: Heute wollen wir eine Technik
kennenlernen, mit der eine
Homepage elegant und effizient
gestaltet werden kann.
L: Der Name der Technik ist schon
gefallen, kann sich jemand denken,
wie sie heißt?
Thema der Stunde wird notiert Tafel
10’ Zwischenerarbeitung L demonstriert sukzessiv vier LSG Beamer
Veränderungen
Zwischensicherung Formatierungen werden festgehalten Tafel
Zwischenerarbeitung L: Wie wird die externe Datei in Tafel
Zwischensicherung
XHTML eingebunden?
15’ Erarbeitung Durch ein Arbeitsblatt angeleitete PA/GA Arbeitsblatt/
Recherche im Internet mit der Internet/
Umsetzung der gefundenen Phase5-Editor
Formatierungen
8’ Sicherung I Einige Schüler geben die CSS- PRÄ Beamer/
Anweisungen in einer zentralen Phase5-Editor
Datei auf dem Lehrer-Rechner ein.
Minimalziel
7’ Sicherung I Einige Schüler demonstrieren die LSG Beamer
(Fortsetzung) Ergebnisse der Aufgabe 4.
Abstimmung
Erarbeitung Vorteile der Trennung von Inhalt Tafel
Sicherung II und Design
Maximalziel
23
LV – Lehrervortrag, LSG – Lehrer-Schüler-Gespräch, EA – Einzelarbeit, PA – Partnerarbeit, PRÄ –
Präsentation
107 Literatur
BAUMANN, R. (1996), Didaktik der Informatik, 2. Auflage, Klett-Verlag, Stuttgart
BRUDER R. (2002), Situationen und Strategien beim Lehren und Lernen von Mathematik, Skript zur Vorlesung
an der TU Darmstadt WS 2002/2003, Darmstadt
HESSISCHES KULTUSMINISTERIUM (2003), Lehrplan Informatik
HUBWIESER, P. (2001), Didaktik der Informatik, 1. korr. Nachdruck, Springer-Verlag, Heidelberg
PIDUN, U. (2004), Internet ohne Ausgrenzung, Teil 1, in: c’t magazin (18/2004), S. 186, Heise-Verlag Hannover
PIDUN, U. (2004), Internet ohne Ausgrenzung, Teil 2, in: c’t magazin (19/2004), S. 194, Heise-Verlag Hannover
SCHUBERT, S./SCHWILL, A. (2004), Didaktik der Informatik, Spektrum-Verlag, Heidelberg
ZUBER, J. (2002), XHTML+CSS, Bildungsverlag EINS GmbH, Troisdorf
8 Links
Informationen über barrierefreies Webdesign
www.barierrefreies-webdesign.de, Stand: 29.09.04
Beispiele für die Verwendung von CSS
www.csszengarden.com, Stand: 03.10.04
HTML-Dateien selbst erstellen
www.selfhtml.net, Stand: 03.10.04
World Wide Web Consortium
www.w3c.org, Stand: 29.09.04
119 Anhang
9.1 Aufgabenblatt
1. Informiere Dich entweder auf www.selfhtml.net oder mit Hilfe des untenstehendes Textes darüber,
wie man Formate für HTML-Elemente definiert.
2. Kopiere Deine land.htm-Datei aus dem Länderlexikon-Ordner in Deinen privaten Ordner, lege dort eine
CSS-Datei mit dem Namen llexikon.css an und binde sie in Deine XHTML-Datei ein.
3. Versuche, die vorgeführten Formatänderungen nachzuahmen; Informationen zu den einzelnen
Eigenschaften und ihren möglichen Werten findest Du unter
http://www.selfhtml.net/navigation/css.htm
4. Experimentiere ein wenig mit weiteren Formateinstellungen!
Formate für (X)HTML-Elemente definieren
In einer externen CSS-Datei können Sie für HTML-Elementtypen (Tags) CSS-Formate definieren. Wenn Sie entsprechende
HTML-Elemente dann in der HTML-Datei verwenden, werden alle Formate angewendet, die Sie für den Elementtyp definiert
haben. So können Sie beispielsweise für Überschriften 1. Ordnung, definieren, dass diese in der Schriftart Helvetica, 20 Punkt,
rot, fett und kursiv angezeigt werden. Wenn Sie dann im Text der HTML-Datei eine Überschrift 1. Ordnung wie gewohnt
definieren, werden diese Formateigenschaften bei berücksichtigt.
Beispiel:
body {
background-color:yellow;
margin-left:100px;
}
h1 { font-size:48pt;
color:red;
font-style:italic;
border-bottom:solid thin black;
}
p,li { font-size:12pt;
line-height:14pt;
font-family:Helvetica,Arial,sans-serif;
letter-spacing:0.2mm;
word-spacing:0.8mm;
color:blue;
}
Erläuterung:
Um ein zentrales Format für alle HTML-Elemente eines bestimmten Typs zu definieren, notieren Sie als Selektor (Als "Selektor"
wird das bezeichnet, was vor den geschweiften Klammern steht; er wählt aus, wofür die folgenden Definitionen gelten sollen)
den Namen des HTML-Elementtyps – und zwar ohne spitze Klammern. Im obigen Beispiel werden body (Dokument), h1
(Überschriften 1. Ordnung), p (Textabsätze) und li (Listeneinträge) auf diese Weise notiert. Wenn Sie ein Format für mehrere
HTML-Elementtypen definieren wollen, geben Sie alle gewünschten Elementtypen an und trennen Sie diese durch Kommata, so
wie im obigen Beispiel p,li.
Dahinter folgen die gewünschten Definitionen. Im obigen Beispiel wird dem body-Element eine gelbe Hintergrundfarbe
(background-color:yellow;) und ein linker Randabstand von 100 Pixeln (margin-left:100px;) zugewiesen. Überschriften 1.
Ordnung (h1) erhalten eine Schriftgröße von 48 Punkt (font-size:48pt;), die Schriftfarbe rot (color:red;) und den Schriftstil
kursiv (font-style:italic;). Textabsätze (p) und Listenpunkte (li) sollen in 12 Punkt Schriftgröße (font-size:12pt;) mit
einer Zeilenhöhe von 14 Punkt (line-height:14pt;) in Schriftart Helvetica, oder wenn nicht verfügbar, dann in Arial, und
wenn ebenfalls nicht verfügbar, in irgendeiner Sans-Serif-Schrift dargestellt werden (font-family:Helvetica,Arial,sans-
serif;). Außerdem werden auch noch Angaben zum Zeichenabstand (letter-spacing), Wortabstand (word-spacing) und zur
Textfarbe gemacht.
12Sie können auch lesen
