| |
Materialien
|
| |
001 |
Hinweise zur Benutzung des Browsers
|
| |
002 |
Hinweise auf notwendige Programme
|
| |
003 |
Absatz und Zeilenumbruch
|
| |
004 |
Verweis in gleiche Datei
|
| |
005 |
Verweis in externe Datei
|
| |
006 |
Öffnung des e-Mail-Fensters
|
| |
007 |
ANSI-Tabelle
|
| |
008 |
Webseitenbilder - Bildquelle
|
| |
009 |
Webseitenbilder - Platzierung
|
| |
010 |
Standardfarbtafel
|
| |
011 |
Vollständige Farbtafel
|
| |
012 |
Anlage der Fenstergruppe
|
| |
013 |
Anlage eines Teilfensters
|
| |
014 |
Hexumrechnung
|
| |
015 |
Hintergrund für eine ganze Seite
|
| |
016 |
Startseite
|
| |
017 |
Linien im Dokument
|
| |
018 |
Sortierte und nicht sortierte Listen
|
| |
019 |
Die erste Seite im Internet
|
| |
020 |
Die erste Seite im Internet
|
| |
021 |
Die erste Seite im Internet
|
| |
022 |
Seitenaufbau im Internet
|
| |
023 |
Sonderzeichen
|
| |
024 |
Stylesheets -Absatz
|
| |
025 |
Stylesheets - Beispiel
|
| |
026 |
Stylesheets - Einbindung (1)
|
| |
027 |
Stylesheets - Einbindung (2)
|
| |
028 |
Stylesheets - Farben
|
| |
029 |
Stylesheets - Rahmen
|
| |
030 |
Stylesheets - Schrift (1)
|
| |
031 |
Stylesheets - Schrift (2)
|
| |
032 |
Tabellenanlage
|
| |
033 |
Zeilen in Tabellen
|
| |
034 |
Beispiel für Tabelle
|
| |
035 |
Physikalische Formatierung
|
| |
036 |
Überschriften und Schriftarten
|
| |
037 |
Schüleraufgaben
|
| |
038 |
Menübefehle mit Javascript I
|
| |
039 |
Menübefehle mit Javascript II
|
| | 040 | Sämtliche Materialseiten in obiger Reihenfolge |
| |
Folien
|
| |
041 |
Bilder ohne Tabelle
|
| |
042 |
Text umfließt das Bild
|
| |
043 |
Bilder in Tabelle
|
| |
044 |
Bilder am Rand
|
| |
045 |
Folie mit Hintergrund rot
|
| |
046 |
Folie mit Hintergrund kariert
|
| |
047 |
Folie mit Hintergrund beige
|
| |
048 |
Arten von Linien
|
| |
049 |
Arten von Listen
|
| |
050 |
Die erste Seite im Internet
|
| |
051 |
Die erste Seite im Internet
|
| |
052 |
Die erste Seite im Internet
|
| |
053 |
Beispiel für eine farbige Tabelle
|
| |
054 |
Formatierung mit Links
|
| |
055 |
Formatierung ohne Links mit Hintergrund
|
| |
056 |
Formatierung ohne Links ohne Hintergrund
|
| | 057 | Sämtliche Folien in obiger Reihenfolge |
| | 058 | Alle folgenden Dateien in komprimierter Form |
| |
Entkomprimieren Sie diese Datei erst auf die Festplatte!
|
| |
Der Inhalt dieser Datei HTML.EXE
|
| |
HTML-Seiten
|
| |
1. Kapitel - Seitenaufbau
|
| | Index.htm Startseite |
| |
2. Kapitel - Text, Linien, Listen, Tabellen
|
| | Linien.htm Liniengestaltung |
| | Listen.htm Sorten von Listen |
| | Textform.htm Formatierter Text |
| | Tabellen.htm Tabellenformen |
| |
3. Kapitel - Links
|
| | Index.htm Startseite |
| | Textform.htm Formatierter Text |
| | Linien.htm Liniengestaltung |
| | Listen.htm Sorten von Listen |
| | Tabellen.htm Tabellenformen |
| |
4. Kapitel - Bilder
|
| | Index.htm Startseite |
| | Textform.htm Formatierter Text |
| | Linien.htm Liniengestaltung |
| | Listen.htm Sorten von Listen |
| | Tabelle.htm Tabellenformen |
| | Bilder.htm Eingesetzte Bilder |
| | Einstein(1).gif Einstein - Zeichnung |
| | Einstein(1).jpg Einstein - Zeichnung |
| | Einstein(2).jpg Einstein an der Tafel |
| | Einstein(3).jpg Einstein auf der Straße |
| | Einstein(4).jpg Einstein mit herausgestreckter Zunge |
| | Einstein(5).jpg Einstein auf dem Fahrrad |
| | Einstein(6).jpg Einstein mit Schreibblock |
| |
5. Kapitel - Hintergrund
|
| | Index.htm Startseite |
| | Textform.htm Formatierter Text |
| | Linien.htm Liniengestaltung |
| | Listen.htm Sorten von Listen |
| | Tabellen.htm Tabellenformen |
| | Bilder.htm Eingesetzte Bilder |
| | Bground1.htm Hintergrund (1) |
| | Bground2.htm Hintergrund (2) |
| | Bground3.htm Hintergrund (3) |
| | Einstein(1).gif Einstein - Zeichnung |
| | Einstein(1).jpg Einstein - Zeichnung |
| | Einstein(2).jpg Einstein an der Tafel |
| | Einstein(3).jpg Einstein auf der Straße |
| | Einstein(4).jpg Einstein mit herausgestreckter Zunge |
| | Einstein(5).jpg Einstein auf dem Fahrrad |
| | Einstein(6).jpg Einstein mit Schreibblock |
| | Bgline(1).jpg Linie rot |
| | Bgline(2).jpg Linie gelb |
| | Bgpict(1).jpg Hintergrundbild mit grauer Struktur |
| | Bgpict(2).jpg Hintergrundbild mit beiger Struktur |
| | Bgpict(3).jpg Hintergrundbild mit bunter Struktur |
| | Bgpict(4).jpg Hintergrundbild mit grau-marmorierter Struktur |
| | Bgpict(5).jpg Hintergrundbild mit hellgrauer Struktur |
| | Bgpict(6).jpg Hintergrundbild mit dunkelgrauer Struktur |
| | Bgpnt(1).jpg Zeichnung - Quadrat |
| |
6. Kapitel - Frames
|
| | Index.htm Startseite |
| | Textform.htm Formatierter Text |
| | Linien.htm Liniengestaltung |
| | Listen.htm Sorten von Listen |
| | Tabellen.htm Tabellenformen |
| | Bilder.htm Eingesetzte Bilder |
| | Bground1.htm Hintergrund (1) |
| | Bground2.htm Hintergrund (2) |
| | Bground3.htm Hintergrund (3) |
| | Einstein(1).gif Einstein - Zeichnung |
| | Einstein(1).jpg Einstein - Zeichnung |
| | Einstein(2).jpg Einstein an der Tafel |
| | Einstein(3).jpg Einstein auf der Straße |
| | Einstein(4).jpg Einstein mit herausgestreckter Zunge |
| | Einstein(5).jpg Einstein auf dem Fahrrad |
| | Einstein(6).jpg Einstein mit Schreibblock |
| | Bgline(1).jpg Linie rot |
| | Bgline(2).jpg Linie gelb |
| | Bgpict(1).jpg Hintergrundbild mit grauer Struktur |
| | Bgpict(2).jpg Hintergrundbild mit beiger Struktur |
| | Bgpict(3).jpg Hintergrundbild mit bunter Struktur |
| | Bgpict(4).jpg Hintergrundbild mit grau-marmorierter Struktur |
| | Bgpict(5).jpg Hintergrundbild mit hellgrauer Struktur |
| | Bgpict(6).jpg Hintergrundbild mit dunkelgrauer Struktur |
| | Bgpnt(1).jpg Zeichnung - Quadrat |
| | Logo.htm Logo |
| | Menue.htm Menüführung |
| | Start.htm Startseite |
| |
7. Kapitel - Stylesheets
|
| | Index.htm Startseite |
| | Bground1.htm Hintergrund (1) |
| | Bground2.htm Hintergrund (2) |
| | Bground3.htm Hintergrund (3) |
| | Bilder.htm Eingesetzte Bilder |
| | Linien.htm Liniengestaltung |
| | Listen.htm Sorten von Listen |
| | Formate.css Formate |
| | Menue.htm Menüführung |
| | Start.htm Startseite |
| | Tabellen.htm Tabellenformen |
| | Textform.htm Formatierter Text |
| | Logo.htm Logo |
| | Einstein(1).gif Einstein - Zeichnung |
| | Einstein(1).jpg Einstein - Zeichnung |
| | Einstein(2).jpg Einstein an der Tafel |
| | Einstein(3).jpg Einstein auf der Straße |
| | Einstein(4).jpg Einstein mit herausgestreckter Zunge |
| | Einstein(5).jpg Einstein auf dem Fahrrad |
| | Einstein(6).jpg Einstein mit Schreibblock |
| | Bgline(1).jpg Linie rot |
| | Bgline(2).jpg Linie gelb |
| | Bgpict(1).jpg Hintergrundbild mit grauer Struktur |
| | Bgpict(2).jpg Hintergrundbild mit beiger Struktur |
| | Bgpict(3).jpg Hintergrundbild mit bunter Struktur |
| | Bgpict(4).jpg Hintergrundbild mit grau-marmorierter Struktur |
| | Bgpict(5).jpg Hintergrundbild mit hellgrauer Struktur |
| | Bgpict(6).jpg Hintergrundbild mit dunkelgrauer Struktur |
| | Bgpnt(1).jpg Zeichnung - Quadrat |
| |
8. Kapitel - Aufruf
|
| |
a)ohne Funktionen
|
| | Logo(Bilder).htm Logo - Eingesetzte Bilder |
| | Logo(Linien).htm Logo - Liniengestaltung |
| | Logo(Listen).htm Logo - Sorten von Listen |
| | Log(Hintergrund).htm Logo - Hintergrund |
| | Logo(Index).htm Logo - Index |
| | Logo(Tabellen).htm Logo - Tabellenformen |
| | Logo(Text).htm Formatierter Text |
| | Bground1.htm Hintergrund (1) |
| | Bground2.htm Hintergrund (2) |
| | Bground3.htm Hintergrund (3) |
| | Bilder.htm Eingesetzte Bilder |
| | Formate.css Formate |
| | Listen.htm Sorten von Listen |
| | Linien.htm Liniengestaltung |
| | Menue.htm Menüführung |
| | Start.htm Startseite |
| | Textform.htm Formatierter Text |
| | Einstein(1).gif Einstein - Zeichnung |
| | Einstein(1).jpg Einstein - Zeichnung |
| | Einstein(2).jpg Einstein an der Tafel |
| | Einstein(3).jpg Einstein auf der Straße |
| | Einstein(4).jpg Einstein mit herausgestreckter Zunge |
| | Einstein(5).jpg Einstein auf dem Fahrrad |
| | Einstein(6).jpg Einstein mit Schreibblock |
| | Bgline(1).jpg Linie rot |
| | Bgline(2).jpg Linie gelb |
| | Bgpict(1).jpg Hintergrundbild mit grauer Struktur |
| | Bgpict(2).jpg Hintergrundbild mit beiger Struktur |
| | Bgpict(3).jpg Hintergrundbild mit bunter Struktur |
| | Bgpict(4).jpg Hintergrundbild mit grau-marmorierter Struktur |
| | Bgpict(5).jpg Hintergrundbild mit hellgrauer Struktur |
| | Bgpict(6).jpg Hintergrundbild mit dunkelgrauer Struktur |
| | Bgpnt(1).jpg Zeichnung - Quadrat |
| |
b) durch Funktionen
|
| | Logo(Bilder).htm Logo - Eingesetzte Bilder |
| | Logo(Linien).htm Logo - Liniengestaltung |
| | Logo(Listen).htm Logo - Sorten von Listen |
| | Log(Hintergrund).htm Logo - Hintergrund |
| | Logo(Index).htm Logo - Index |
| | Logo(Tabellen).htm Logo - Tabellenformen |
| | Logo(Text).htm Formatierter Text |
| | Bground1.htm Hintergrund (1) |
| | Bground2.htm Hintergrund (2) |
| | Bground3.htm Hintergrund (3) |
| | Bilder.htm Eingesetzte Bilder |
| | Formate.css Formate |
| | Linien.htm Liniengestaltung |
| | Listen.htm Sorten von Listen |
| | Menue.htm Menüführung |
| | Start.htm Startseite |
| | Textform.htm Formatierter Text |
| | Einstein(1).gif Einstein - Zeichnung |
| | Einstein(1).jpg Einstein - Zeichnung |
| | Einstein(2).jpg Einstein an der Tafel |
| | Einstein(3).jpg Einstein auf der Straße |
| | Einstein(4).jpg Einstein mit herausgestreckter Zunge |
| | Einstein(5).jpg Einstein auf dem Fahrrad |
| | Einstein(6).jpg Einstein mit Schreibblock |
| | Bgline(1).jpg Linie rot |
| | Bgline(2).jpg Linie gelb |
| | Bgpict(1).jpg Hintergrundbild mit grauer Struktur |
| | Bgpict(2).jpg Hintergrundbild mit beiger Struktur |
| | Bgpict(3).jpg Hintergrundbild mit bunter Struktur |
| | Bgpict(4).jpg Hintergrundbild mit grau-marmorierter Struktur |
| | Bgpict(5).jpg Hintergrundbild mit hellgrauer Struktur |
| | Bgpict(6).jpg Hintergrundbild mit dunkelgrauer Struktur |
| | Bgpnt(1).jpg Zeichnung - Quadrat |
| |
Referenz für Schülerarbeiten
|
| | AbisZ.htm Begriffe A-Z |
| | Az_menue.htm Menü 1 |
| | Bf_menue.htm Menü 2 |
| | Bgpict_1.jpg Hintergrundbild mit grauer Struktur |
| | Bgpict_2.jpg Hintergrundbild mit beiger Struktur |
| | Bgpict_3.jpg Hintergrundbild mit bunter Struktur |
| | Bgpict_4.jpg Hintergrundbild mit grau-marmorierter Struktur |
| | Bilder.htm Eingesetzte Bilder |
| | Einstein(1).jpg Einstein - Zeichnung |
| | Einstein(2).jpg Einstein an der Tafel |
| | Einstein(3).jpg Einstein auf der Straße |
| | Einstein(4).jpg Einstein mit herausgestreckter Zunge |
| | Einstein(5).jpg Einstein auf dem Fahrrad |
| | Einstein(6).jpg Einstein mit Schreibblock |
| | Ex_bild.htm Bilder im Dokument |
| | Ex_linien.htm Linien im Dokument |
| | Ex_listen.htm Listen im Dokument |
| | Ex_menue.htm Menü im Dokument |
| | Ex_tabellen.htm Tabellen im Dokument |
| | Ex_text.htm Text im Dokument |
| | Formate.css Formate |
| | In_aufb1.htm Einfache Homepage |
| | In_aufb2.htm Homepage mit Stylesheets |
| | In_aufbau.htm Homepage für Einsteiger |
| | In_begriff.htm Datei ’Formate.css’ |
| | In_entw.htm Entwicklung von html 4.0 |
| | In_info.htm Information zur Erstellung der Homepage |
| | In_menue.htm Menü im Dokument |
| | In_start.htm Startseite im Dokument |
| | Index.htm Startseite |
| | Menue.htm Menüführung |
| | St_einbg.htm Stylesheet-Einbindungen |
| | St_farbe.htm Farben und Bilder ohne Hintergrund |
| | St_farben.htm Farben und Bilder mit Hintergrund |
| | St_menue.htm Menü |
| | St_rahmen.htm Rahmen als Stylesheet-Attribut |
| | St_schrift.htm Schrift als Stylesheet-Attribut |
| | Start.htm Startseite |
| | Th_absatz.htm Blockquote |
| | Th_anker.htm Verweise |
| | Th_bild.htm Bilder |
| | Th_frames.htm Frameset |
| | Th_linien.htm Linien |
| | Th_listen.htm Listen |
| | Th_menue.htm Menü |
| | Th_tabellen.htm Tabellen |
| | Th_text.htm Formatierter Text |
Html-Programmierung (Best. Nr. 4487)
Die Unterrichtseinheit ist so konzipiert, dass sich die Schüler fast völlig selbstständig in die HTML-Programmierung einarbeiten können. Das Lerntempo kann für jeden Schüler verschieden sein, er ist nicht an den Fortschritt der anderen gebunden.
Deshalb erhalten die Schüler alle jene Material-Blätter bzw. Folien in die Hand, die jeweils die Abschnitte abdecken, die der Lehrer behandeln möchte.
Selbstverständlich ist auch denkbar, dass die Folien vom Lehrer per Tageslichtprojektor an die Wand geworfen werden oder dass - sofern an der Schule vorhanden - ein Beamer die HTML-Seiten im Quelltext oder im Anzeigeformat auf eine Tafel projiziert. Diese Verfahren würden aber das Tempo der Schüler eher vereinheitlichen.
* Die Folien stellen dabei immer das Ziel dar, das der Schüler erreichen soll. So oder ähnlich soll seine Seite, die er erstellt, aussehen.
* Die Material-Blätter sind die Fundgrube, die dem Schüler das nötige Wissen vermitteln -
* Beispiele zeigen ihm, wie er den Quelltext schreiben muss.
* Mögliche Befehle oder Attribute bieten ihm die Auswahl für seine Aktionen an.
(Selbst wenn nicht zwingend nötig, sollten auch hexadezimale Zahlen verstanden werden.)
Gegliedert ist die Unterrichtseinheit in 8 Kapitel, die in der Regel aufeinander aufbauen. Selbstverständlich aber können die einzelnen Einheiten auch in anderer Reihenfolge behandelt oder um neue Seiten erweitert werden, man muss nur geringfügige Änderungen vornehmen, z.B. bei den Links, wenn sie dem neuen Stand angepasst werden müssen.
Jedes Kapitel verfügt grundsätzlich über alle Seiten und Dateien, die für die vollständige Darstellung im Browser benötigt werden, selbst wenn diese Dateien ohne jede Änderung aus vorigen Kapiteln übernommen wurden. Dies spart Ihnen die Mühe des Suchens, oft aber auch die des Änderns.
Ich hoffe, die Arbeit mit den Schülern macht Ihnen Freude, Ihnen spart Sie auf jeden Fall, wenn man vom Ausdrucken absieht, sehr viel Arbeit. In diesem Sinne wünschen Verlag und Autor viel Erfolg beim Einsatz der Einheit!
!!Wichtiger Hinweis - Die HTML-Dateien befinden sich mit Unterverzeichnissen in der Datei HTML.EXE und müssen erst - mit den Unterverzeichnissen - entkomprimiert werden.
