Neue HTML-Einstiegstutorials

[db1844]

Ich habe mit meiner Realschulklasse die verschiedenen Lektionen 1-5 durchgemacht. Es war eine sehr tolle, übersichtliche und kleinschrittige Einführung in die HTML-Sprache. Die Abschnitte waren aufbauend und verständlich.

https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg/Kapitel1 (-6)

Nun nach Lektion 5 wird ersichtlich, dass die ganzen Links nicht mehr funktionieren, und anderweitig belegt sind.

Der neue Aufbau finde ich für Einsteiger überladen und wenig einladend und weniger verständlich.

Die vollzogenen Änderungen finde ich sehr Schade, und dass in Lektion 3 schon gleich mit CSS in Konfrontation getreten wird, sehr schade.

Mein Apell, bitte lasst diesen einfachen, aufbauenden Aufbau der alten Websites, und packt nicht alles in eine Lektion.

Der Vorteil des neuen Aufbaus erschließt sich mir leider nicht.

[Tabellenkalk]

Hallo,

Ich habe mit meiner Realschulklasse die verschiedenen Lektionen 1-5 durchgemacht. Es war eine sehr tolle, übersichtliche und kleinschrittige Einführung in die HTML-Sprache. Die Abschnitte waren aufbauend und verständlich.

Ja, das Tutorial ist echt gut!

Nun nach Lektion 5 wird ersichtlich, dass die ganzen Links nicht mehr funktionieren, und anderweitig belegt sind.

Mir scheint, da ist tatsächlich grad ein Umbau im Gange…

Die vollzogenen Änderungen finde ich sehr Schade, und dass in Lektion 3 schon gleich mit CSS in Konfrontation getreten wird, sehr schade.

In Kapitel 1 und 2 sind die wesentlichen Elemente behandelt. Ohne CSS stellt der Browser sie pauschal dar, jetzt gehts an die Individualisierung. HTML ohne CSS ist wie Brot ohne Kräuterbutter, wie Häuser ohne Verputz…

Mein Apell, bitte lasst diesen einfachen, aufbauenden Aufbau der alten Websites, und packt nicht alles in eine Lektion.

Was hättest du statt CSS gerne noch vorher gesehen?

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

Mir scheint, da ist tatsächlich grad ein Umbau im Gange…

Ja, Matthias ist da gerade schwer am Werkeln. Ich habe den neuen Kurs allerdings noch nicht durchgelesen. Sollte ich vielleicht mal tun, andere auch, aber bisher war Matthias der didaktischen Überforderung eher unverdächtig.

Die Einheiten sind länger, was aber nicht stören dürfte. Man muss ja nicht alles auf einmal lesen. Und ohne CSS sieht HTML nach nichts aus, da kommt man nicht drum herum.

Rolf

[Matthias Scharwies]

Servus!

Ich habe mit meiner Realschulklasse die verschiedenen Lektionen 1-5 durchgemacht. Es war eine sehr tolle, übersichtliche und kleinschrittige Einführung in die HTML-Sprache. Die Abschnitte waren aufbauend und verständlich.

https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg/Kapitel1 (-6)

Hallo db1844,

Ja, wir haben etwas verändert. Jeder Kurs sollte ein (oder höchstens zwei) Lernziel(e) und einen ungefähr abgeschätzten, zeitlich machbaren Umfang haben. Deshalb hatten wir die Zahl der Kapitel von vorher 11 auf 7 gekürzt. Trotzdem hatten wir Kritik / Feedback erhalten, dass es im ersten Kapitel ca. 20min um die reine Theorie ginge, bis man „richtig loslegen“ könne.

1. HTML

Im Kapitel 1 (vorher 2) geht es nun gleich mit HTML und der Textauszeichnung los. Überschriften, Absätze und wenig später auch Listen bringen einen ersten Eindruck, was man mit HTML machen kann. Das Kapitel wurde übrigens inhaltlich nicht verändert, nur das Grundgerüst aus dem ehemals ersten Kapitel wurde als Kopiervorlage hinzugefügt. Wer hier mehr erfahren will, kann sich das dort verlinkte HTML/Tutorials/HTML5/Grundgerüst vornehmen.

2. Hypertext

Danach folgte als zweite Seite eine Preistabelle. Tabellen sind wichtige Bestandteile von HTMl, uns wichtiger war der zweite Aspekt von HTML - der Hypertext mit Links.

Hier wäre eine gute, kleinschrittige Erklärung/ ein Beispiel /eine Praxisaufgabe vom reinen Seitennamen index.html hin zu ganzen URLs nötig. Hast du da eine Idee?

Die Bilder haben viel mit den Links zu tun - deshalb haben wir diese beiden Elemente in einem Kapitel zusammengefasst.

Dateiorganisation und Namenskonventionen

Das ist ein wichtiges Thema, das mit HTML an sich erst mal wenig, mit Webdesign und dem praktischen Arbeiten sehr viel zu tun hat.

Es wird im 2. Kapitel kurz erwähnt, dort wird auf unser Webprojekte-Tutorial hingewiesen:

• /HTML/Tutorials/Webprojekte/Konventionen_für_Dateinamen

Nun nach Lektion 5 wird ersichtlich, dass die ganzen Links nicht mehr funktionieren, und anderweitig belegt sind.

Der neue Aufbau finde ich für Einsteiger überladen und wenig einladend und weniger verständlich.

Kapitel 2 wird noch überarbeitet und gestrafft. Gerade das bisherige Verzerren von Bildern hat eigentlich keinen praktischen Nutzen und sollte deshalb nicht in einem Anfänger-Tutorial erklärt werden.

Es gab bis eben noch Kapitel 5, das habe ich durch eine Weiterleitung zum aktuellen Kapitel weiter vorne ersetzt.

4. CSS

Die vollzogenen Änderungen finde ich sehr Schade, und dass in Lektion 3 schon gleich mit CSS in Konfrontation getreten wird, sehr schade.

Bis jetzt gab es erst noch Tabellen in schwarz-weiß und ein Theoriekapitel über die oben erwähnte Dateiorganisation. Viele andere wollen aber so schnell wie möglich ihre Webseiten nicht nur richtig auszeichnen, sondern die Tabellen, Texte und Überschriften auch farbig gestalten.

In diesem Kapitel kann nicht alles erklärt werden. Allerdings kann man unbekannte CSS-Eigenschaften mit dem Seiteninspektor anschauen und ausprobieren. Dass muss noch aufgenommen werden. Als das Tutorial 2009 geschrieben wurde, gab es das noch nicht.

Mein Apell, bitte lasst diesen einfachen, aufbauenden Aufbau der alten Websites, und packt nicht alles in eine Lektion.

Danke für deinen Appell. Wir werden das intern besprechen, hatten aber gute Gründe, das Tutorial auf 4 gleichlange Kapitel aufzuteilen und einige Sachen, die in anderen Tutorials erklärt werden, hier herauszunehmen.

Wenn Du konkrete Vorschläge hast,

• wie man etwas besser erklärt
• was noch fehlt
• was gestrichen werden sollte

… immer her damit!

Herzliche Grüße

Matthias Scharwies

[db1844]

Vielen herzlichen Dank für die tolle Community. Die rasche Beteiligung lässt einen sehr erfreuen.

Ich habe zwei Nachteile. Erstens, ist kein Präsenzunterricht möglich, (Einführung, etc.) also eigentlich alles Selbst Erlernen, und ich habe nur Mädchen in der Klasse. Der vorherige langsame Aufbau, Überschriften, Listen, Tabellen (gut für Stundenplan), Einbettung von Medien und Links fand ich ausgezeichnet, und man hat dann pro Woche nie die Schüler überfordert. Wenn jemand die Aufgaben nicht gemacht hat, hat er auch schnell den Anschluss wieder finden können. Jetzt nach 5 Wochen, finde ich die Basis gelegt, die Schüler(innen) auch mit CSS, Klassen u.ä. vertraut zu machen.

Weitgehend synchron dazu, habe ich die YOutube-VIdeos von Mega-Chris als Unterstützung begleitend dazu geben können, (manchmal ist es etwas abgewichen, auch in der Reihenfolge). 10-15 Min. Video, 15.-20 Minuten Lesezeit, als Schüler muss man sicher das etwas langsamer, und vielleicht wiederholt lesen, fand ich das Lektionspensum ideal! Wer schneller möchte, kann einfach auf nächstes Kapitel drücken. Didaktisch wertvoll, auch das Erfolgserlebnis, eine Lektion abgehakt und verstanden zu haben.

Zu sagen, man soll nur bis zu diesem und jenen Abschnitt den Lernstoff erarbeiten, finde ich nicht persönlich jenseits von optimal.

Ich habe die Lektionen jetzt nicht mehr vor Augen, aber die einzelnen Lektionen 1-6 waren wesentlich umfangreicher und detaillierter und umfangreicher, wie jetzt. Jetzt wird lediglich ein ganz kleiner Abschnitt zu Überschriften und Listen.

Ich freue mich, wenn die Anregungen im Gremium besprochen werden, und es evtl. auch im Fokus didaktischer Einsätze, Betrachtung findet.

Es ist keine Website für Schüler, aber bis zur letzten Änderung lies es sich auch dafür gebrauchen. Schön, wenn das auch weiterhin so bleiben könnte, auch wenn man die vielen anderen Rückmeldungen gehör schenken sollte.

Danke für das tolle Forum! Ihr seid Spitze. Man merkt, da ist Herz dabei.

[Matthias Scharwies]

Servus!

Vielen herzlichen Dank für die tolle Community. Die rasche Beteiligung lässt einen sehr erfreuen.

Ich habe zwei Nachteile. Erstens, ist kein Präsenzunterricht möglich, (Einführung, etc.) also eigentlich alles Selbst Erlernen, und ich habe nur Mädchen in der Klasse.

Ich bin auch Lehrer! Wir haben seit 4 Wochen unsere 10. wieder da, seit letzter Woche die 5.-9. Da bei uns in Bayern beschlossen wurde, die Faschingsferien durchzuarbeiten, ist selbst bei den Fleißigen die Luft raus.

Das mit den Mädchen würd' ich aber so nicht unterschreiben!

Der vorherige langsame Aufbau, Überschriften, Listen, Tabellen (gut für Stundenplan),

Ha, das ist mir völlig entgangen! Was ich eben erreichen möchte, ist neben der Schilderung, wie man eine Webseite aufbaut eben auch immer wieder die Formulierung von Praxisaufgaben. Eine Aufgabe "Erstelle für Deine Klasse einen Stundenplan in HTML!" klingt gut!

Das Kapitel Tabellen ist wieder da.

Einbettung von Medien und Links fand ich ausgezeichnet, und man hat dann pro Woche nie die Schüler überfordert. Wenn jemand die Aufgaben nicht gemacht hat, hat er auch schnell den Anschluss wieder finden können.

Ich glaub, dass beide Elemente (Links und Bilder, evtl auch. video) sehr viele Gemeinsamkeiten haben und deshalb ruhig zusammengehören.

Ich habe das in Kapitel 2 zusammengefasst und hoffe, dass es im Endzustand nicht zu viel ist. Vor allem der ZIP-Ordner mit seiner vorgefertigten Ordner-Struktur soll hier für mehr Übersicht sorgen.

Jetzt nach 5 Wochen, finde ich die Basis gelegt, die Schüler(innen) auch mit CSS, Klassen u.ä. vertraut zu machen.

Klingt gut! Das erste Arbeiten mit CSS kann ja durchaus ohne Klassen und ids erfolgen. Hauptsache, die Schüler können etwas selbst gestalten.

CSS/Tutorials/Einstieg finde ich sehr gut, ist für Schüler wsl. zu trocken.

Weitgehend synchron dazu, habe ich die YOutube-VIdeos von Mega-Chris als Unterstützung begleitend dazu geben können, (manchmal ist es etwas abgewichen, auch in der Reihenfolge).

Das war der Anlass für unsere Umarbeitung: wir haben einen Youtube-Kanal und wollen Ostern mit ein paar Videos starten. Was liegt da näher, als mit dem HTML-Einstieg einzusteigen?

10-15 Min. Video, 15.-20 Minuten Lesezeit, als Schüler muss man sicher das etwas langsamer, und vielleicht wiederholt lesen, fand ich das Lektionspensum ideal! Wer schneller möchte, kann einfach auf nächstes Kapitel drücken. Didaktisch wertvoll, auch das Erfolgserlebnis, eine Lektion abgehakt und verstanden zu haben.

Stimmt. Hast du Arbeitsblätter dazu oder gibst Du die Aufträge per Mebis, moodle oder Teams?

Zu sagen, man soll nur bis zu diesem und jenen Abschnitt den Lernstoff erarbeiten, finde ich nicht persönlich jenseits von optimal.

Stimmt!

Ich habe die Lektionen jetzt nicht mehr vor Augen, aber die einzelnen Lektionen 1-6 waren wesentlich umfangreicher und detaillierter und umfangreicher, wie jetzt. Jetzt wird lediglich ein ganz kleiner Abschnitt zu Überschriften und Listen.

# [[HTML/Tutorials/Einstieg/Kapitel1|'''grundlegender Aufbau''']]
#* Das Grundgerüst einer HTML-Seite
#* Grundprinzipien von HTML
#* Der Titel einer HTML-Seite
# [[HTML/Tutorials/Einstieg/Kapitel2|'''Auszeichnung des sichtbaren Inhalts''']]
#*Überschriften
#* Absätze
#* Listen
# [[HTML/Tutorials/Einstieg/Kapitel3|'''Preistabelle''']]
#* Tabellen
#* eine zweite Seite
#* Organisation der Dateien
# [[/Kapitel4|'''Ein Menü''']]
#* Auf Seiten verlinken
#*   Das Menü
#*  Pfadangaben
# [[/Kapitel5|'''Bilder''']]
#* Bilder einfügen
#* Bilder verzerren
# '''[[/Kapitel6|Gestaltung mit CSS]]'''
#* Festlegung von Formatierungen
#** Schriftgröße
#** Schriftart
#** Hintergrundfarbe
#** Ausrichtung
#* Einbindung von Stylesheets
# [[/Kapitel7|Gestaltung: Liste hervorheben]]
#* Elemente zusammenfassen
#* Ein Element optisch deutlich hervorheben
#* Wie geht es weiter? (Nachwort)

Ich freue mich, wenn die Anregungen im Gremium besprochen werden, und es evtl. auch im Fokus didaktischer Einsätze, Betrachtung findet.

Es ist keine Website für Schüler, aber bis zur letzten Änderung lies es sich auch dafür gebrauchen. Schön, wenn das auch weiterhin so bleiben könnte, auch wenn man die vielen anderen Rückmeldungen gehör schenken sollte.

Danke für das tolle Forum! Ihr seid Spitze. Man merkt, da ist Herz dabei.

Vielen Dank!

Herzliche Grüße

Matthias Scharwies

[db1844]

Danke für das tolle Feedback.

Ja, Arbeitsblätter habe ich da nicht. Habe die Arbeitsaufträge einfach über die Lernplattform Lo-Net2 hochgestellt.

Ich freue mich sehr, wenn es dazu auch aufbauende, schrittweise, erklärende und einheitliche Videos gibt. Im Internet gibt es viele Videos (besonders nicht deutsche Videos). Aber sowas wie Mega-Chris, bloß nun nach 8 Jahren wieder etwas aktualisiert, ist eine tolle Errungenschaft. Ich hoffe, die Videos sind kleinschrittig und nicht zu lang.

Nochmals ein großes Lob für die Community.

[Henry]

Hallo db1844,

Im Internet gibt es viele Videos (besonders nicht deutsche Videos). Aber sowas wie Mega-Chris, bloß nun nach 8 Jahren wieder etwas aktualisiert, ist eine tolle Errungenschaft.

na ja, das sehen wohl nicht viele so, wenn ich mir den geringen Erfolg auf Youtube bei ihm anschaue. Ist aber auch kein Wunder, Videos sind denkbar schlecht geeignet für so eine Thematik. Beim Lesen hast du die Möglichkeit selbst zu steuern, was dich interessiert anderes zu überlesen, schnell nachzuprobieren, eben eine Übersicht zu haben. Beim Video wirst du berieselt und musst mühsam die Codes abtippen, vorspulen zurückspulen, stoppen, keine Suchfunktion um etwas zu finden, eben absolut abhängig und nicht wirklich steuerbar. Auf einer Textseite, sehe ich, aha das im unteren Abschnitt scheint interessant, das andere kenne ich schon, beim Video erst mal den ganzen uninteressanten Kram anschauen.

Wie auch immer, ausser deinem bevorzugten Youtuber, habe ich mir gerade mal auch andere Videos zu dem Thema angeschaut. Grauenhaft, aber dennoch manchmal ein paar 100tausend Aufrufe. Gut, habs jetzt nicht geprüft ob diese Aufrufe echt sind, aber insgesamt, Neee Video... nicht bei diesem Thema.

Gruss
Henry

[Felix Riesterer]

Liebe(r) db1844,

Aber sowas wie Mega-Chris, bloß nun nach 8 Jahren wieder etwas aktualisiert, ist eine tolle Errungenschaft.

vom didaktischen Standpunkt aus ist das ein Griff ins Klo gewesen. Schon damals vor acht Jahren. Nicht empfehlenswert!

Liebe Grüße

Felix Riesterer

[Henry]

Hallo Felix,

vom didaktischen Standpunkt aus ist das ein Griff ins Klo gewesen. Schon damals vor acht Jahren. Nicht empfehlenswert!

hat sich auch vor 3-4 Jahren nichts verändert. Vor allem nicht mal die Mühe gemacht das zu erklären, lediglich methodenlos runtergerasselt.

Gruss
Henry

[Rolf B]

Hallo Felix,

in der Tat. Didaktisch fand ich das zu konfus. Er hat sich, wie es scheint, hingesetzt und einfach ein paar Minuten lang erzählt. Kann man in der Nachhilfestunde machen und vielleicht kommt das auch gut bei Gleichaltrigen an, mich hat es aber hibbelig gemacht. Und sein Rumspielen mit Leerzeilen im Notepad++ fand ich ebenfalls schwierig.

Inhaltlich fand ich Teil 1 fast ok, ich hätte als Grundgerüst noch <!doctype> hinzugefügt. Aber Teil 2 habe ich dann abgebrochen. Bei <body bgcolor="..."> dachte ich noch: ok, er will styles vermeiden, aber dann kam <font> und ich dachte nur: Nö. Schlechte Entscheidung. Dann lieber für den Anfang das Default-Styling behalten.

Rolf

[Matthias Scharwies]

Servus!

Danke für das tolle Feedback.

Danke, ebenfalls! Eigentlich gibst Du uns das Feedback, oder? 😀 Auf Diskussion:HTML/Tutorials/Einstieg sammeln wir Ideen, Verbesserungsvorschläge und Errata, die wir dann gemeinsam abarbeiten.

---

Ich möchte einmal einige Diskussionen zusammenfassen:

Erklärvideos

@Marc schlug am 01.03. vor, dass SELFHTML Erklärvideos als Ergänzung zur Doku anbietet:

Erklärvideos sind ja sehr beliebt. … für viele Menschen ist es einfacher das nachzuvollziehen, was sie sehen und hören, als das was sie lesen.

Meine Idee ist es, zu den Wiki-Einträgen Videos zu erstellen. Ich weiß jetzt schon, dass ich nicht viele schaffen werde, aber vielleicht hat noch jemand Lust dazu.

Bei einigen (wenigen) Artikeln gäbe es dann ggfs. zukünftig ein Video, bei den anderen nicht. Ich fände das nicht schlimm, ist halt ein zusätzliches Angebot.

Das klingt ganz gut und deshalb hatten Matthias Apsel und ich einen Youtube-Kanal eingerichtet, der jetzt mit Leben gefüllt werden kann.

Unter Hilfe:YouTube könnt ihr mal sehen, was noch zu tun ist, bzw. welche möglichen Themen es gibt.

Didaktik

Ich hoffe, die Videos sind kleinschrittig und nicht zu lang.

Ja, kleinschrittig ist gut. Ich möchte aber trotzdem mal einiges zum Thema Didaktik loswerden. Als Englischlehrer sehe ich, wie verschiedene Konzepte sich gegeseitig ergänzen.

1. Grammatik-Übersetzungs-Methode: Der Klassiker aus der Lateinschule von vor 500 Jahren. Erst erklärt der Lehrer die Regeln, dann die Ausnahmen und dann geht's los mit den Aufgaben für die Schüler. So sind die meisten Tutorials über Webdesign aufgebaut.

2. audiolinguale Methode: Der Psychologe Skinner regte an Sätze von Schallplatte zu hören und dann nachzusprechen und die Schüler bei Erfolg zu belohnen. Aus 500 nachgesprochenen, auswendig gelernten Sätzen sollte dann automatisch selbständig produzierter Text werden. (Das funktionierte 1942 bei US-Offizieren, die so in 6 Wochen Deutsch, bzw. Japanisch lernten - nicht jedoch im Sprachlabor der 70er.)

„Bereits Mitte der 70er Jahre vollzog sich in Fachkreisen ein Wandel des Didaktikverständnisses: weg von der Vermittlungsperspektive und hin zu Aneingnungsperspektive und Teilnehmerorientierung. Dieses Verständnis ist jedoch leider bis heute noch nicht bei allen Lehrern und Trainern angekommen.

Viel zu oft gibt es noch Frontalbeschallung und für Teilnehmende nicht zufriedenstellende Lernerlebnisse.^[1]“

Viele Schüler nutzen YouTube-Videos zur Wiederholung von in der Schule gelerntem Stoff. Jetzt in der Zeit des Distanz-Unterricht sind vorhandene YouTube-Clips eine willkommene Auflockerung, Ergänzung oder sogar Ersatz für Unterricht. Allerdings sind sie eben didaktisch auf dem Stand des Frontalunterrichts vor 500 Jahren: Ein Hipster mit Bart steht da und erklärt die Welt. Eine nuschelnde Stimme aus dem Off zuckt mit der Maus über den Bildschirm. Auch wenn Frontalunterricht an sich nicht schlecht ist, ist es oft doch "more of the same"!

Was ich mir wünschen würde, wären Videos, die unsere Kurse aufnehmen und die gleiche Botschaft mehrkanalig vermitteln. Wenn Schüler dabei eigenständig produktiv tätig würden, umso besser!

Methodik

Die oben erwähnt Kleinschrittigkeit würde ich eher hier hin packen.

1. Formulierung von Lernzielen (dabei didaktische Reduktion - nicht alles kann heute erklärt werden!)
2. motivierender Einstieg (In Geschichte: Fragestellung, warum etwas passiert ist. IN IT: Wie man eine Webseite für ... erstellt. )
3. Erarbeitung in Tutorial, Frickl, YouTube-Video
4. schriftl. Fixierung des Lernstoffs oder Abgabe eines Produkts (eigene Webseite)

Der erwähnte HTML #1 Der Aufbau & die Basics erwähnt in der 1. Minute bereits PHP (≠ Isolierung der Schwierigkeiten) und hält sich dann 15 Minuten beim Grundgerüst auf, was imho eine viel bessere Formulierung für die „Basics “ wäre. Gut finde ich, dass er gleich die YouTube-Seite als Beispiel für ein HTML-Dokument erwähnt und dann den Seiteninspektor zeigt.

Hier kann ich immer wieder nur @Felix Riesterer mit seinem HTML-Kurs erwähnen, der die Textauszeichnung vorwegnimmt, um ein Aha-Erlebnis zu erzielen, dass die Schüler hoffentlich motiviert, dranzubleiben.

Dann folgt das Grundgerüst mit Erklärung und Kopiervorlage und im 2. Kapitel kann man anstelle der Preistabelle (gähn) dann gleich Links auf andere Seiten, bzw. Bilder und Filme einbinden. Schnelle Ergebnisse - und das kombiniert mit einem Erklärvideo, in dem das Tutorial noch einmal visualisiert wird.

@db1844 @all

Es wäre schön, wenn wir weiterhin Feedback und Ideen sammeln könnten.

Herzliche Grüße

Matthias Scharwies

---

1. https://brucker-solutions.de/didaktik-ist-das-eigentlich/ ↩︎