====== HTML-Seiten erstellen ======

===== Kurzbeschreibung =====

Zwei Doppelstunden als Einführung zum Thema HTML-Seiten erstellen. Die Schüler*innen lernen zuerst durch selbstständiges Ausprobieren beim Erstellen eines Steckbriefes die wichtigsten HTML-Elemente kennen. Die neu gewonnenen Kenntnisse werden dann bei einem Team-Projekt geübt und vertieft. Es soll eine interaktive Geschichte mit mehreren Auswahlmöglichkeiten und verlinkten HTML-Seiten erstellt werden. Dabei wird unter anderem auch die Kreativität und Teamfähigkeit der Schüler*innen gefördert.

==== Keywords ====

HTML\\
AHS, 9. Schulstufe

==== Anwendungskontext ====

Geeignet für:  Schulunterricht
==== Zielgruppe ====


  * Alter: ungefähr 15 Jahre, wobei das Konzept vermutlich auch mit ein wenig mehr Zeit mit jüngeren Schüler*innen durchgeführt werden kann
  * Schulform und Fach: AHS, Informatik
  * Schulstufe: 5. Klasse AHS (9. Schulstufe)
  * Gruppengröße: irrelevant
 
==== AutorInnen und Entstehung ====

  * AutorInnen: Judith Ammann
  * Rückfragen bitte an: Judith Ammann ([[mailto:judith.ammann@univie.ac.at|judith.ammann@univie.ac.at]])
  * Lehrveranstaltung: Unterrichtsbeobachtung und Vorbereitung sowie Supervision und Erfahrungssicherung, Sommersemester 2022, bei Prof. Renate Motschnig und Christian Cenker
  * Datum der Erstellung: 06.06.2022

===== Voraussetzung =====

Für das Konzept müssen die folgenden Voraussetzungen von Lernenden und Lehrenden erfüllt sein.\\

==== Seitens der Lehrenden ====

  * Kenntnisse der Lehrenden:
    * HTML-Grundkenntnisse
  * Vorbereitungsaufwand: 1-2 Std (wenn alle Materialen übernommen werden und Grundkenntnisse über HTML bereits vorhanden sind)
  * Raum und Ausstattung:
    * Beamer 
    * Tafel mit Kreiden / Whiteboard mit Stiften / Magic Board
    * PC's/Laptops mit Internetzugang für jede*n Schüler*in
    * optional: A3-Papier und Stifte

==== Seitens der Lernenden ====

=== Vorwissen ===
SchülerInnen benötigen folgendes Vorwissen:\\
keines (Schüler*innen sollten die Internetrecherche beherrschen)

===== Beschreibung =====

==== 1. und 2. Einheit (Doppelstunde) ====
Zu Beginn der ersten Einheit werden für den Stundeneinstieg einige Fragen an die Schüler*innen gestellt, um ihr Vorwissen zu aktivieren und ihr Interesse zu wecken. Zuerst werden Webseiten im Allgemeinen besprochen und dann zu HTML und den wichtigsten Tags übergeleitet. Anschließend erstellen die Schüler*innen selbstständig einen Steckbrief, wodurch sie verschiedene Tags ausprobieren und kennenlernen. Im Anschluss wird das Projekt für die nächste Stunde vorgestellt - das Erstellen einer interaktiven Geschichte mit HTML. Es werden Teams gebildet und der Verlauf der Geschichte mit allen Abzweigungen wird auf Papier entworfen. 
==== 3. und 4. Einheit (Doppelstunde) ====
Nach einer kurzen Wiederholung der letzten Doppelstunde wird der Plan der Geschichte auf Papier fertiggestellt. Anschließend erstellen die Schüler*innen Team-Accounts im Online-Editor und fangen an, die HTML-Seiten für ihre Geschichte zu erstellen. Am Ende der Doppelstunde sind sie vermutlich noch nicht ganz fertig damit. Man kann das Projekt noch in einer nächsten Stunde weiterführen oder man ist zufrieden mit den sehr tollen noch nicht ganz fertigen Geschichten. Nach diesen Stunden haben die meisten Schüler*innen beinahe alle Lernziele erfüllt. Manche kennen sich besser mit Bildern aus und manche besser mit Links, aber alle können eine HTML-Seite erstellen und wissen, wie man Tags findet.

===== Planungsmatrix =====
{{ :wiki:informatik_und_gesellschaft:html-seiten_erstellen:html_planungsmatrix.xlsx | Planungsmatrix für den Unterricht}}

===== Didaktischer Ansatz =====

Entsprechend der Lerntheorie des Konstruktivismus soll die selbstständige Konstruktion von Wissen bei den Lernenden gefördert werden. Anfangs gibt es einen kleinen Teil, bei dem die Lehrperson Wissen vermittelt, danach sollen die Lernenden im Sinne des „learning by doing“ bzw. forschenden Lernens durch Ausprobieren und bereitgestellte Lernmaterialien sich selbstständig Wissen aneignen. Die Gruppenarbeit sollt dabei den sozialen Aspekt des Lernens fördern. Die Lehrperson handelt als Lernbegleiter und unterstützt den Lernprozess.

===== Verankerung im Lehrplan =====

  * Konstruktiver Informatikunterricht ist auch Sprachunterricht. Der Mensch-Maschine-Kommunikation liegt im Gegensatz zu natürlichen Sprachen eine abstrakte formale Sprache zugrunde.
  * Der Umgang mit Informationstechnologie gibt den Schülerinnen und Schülern Gelegenheit, selbst kreativ tätig zu sein und Gestaltungserfahrungen zu machen.
  * Begriffe und Konzepte der Informatik verstehen und Methoden und Arbeitsweisen anwenden können.
  * Standardsoftware zur Kommunikation und Dokumentation sowie zur Erstellung, Publikation und multimedialen Präsentation eigener Arbeiten einsetzen können.
  * Informationsquellen erschließen, Inhalte systematisieren, strukturieren, bewerten, verarbeiten und unterschiedliche Informationsdarstellungen verwenden können.

===== Lehr- und Lernziele =====

  * SuS können eine einfache HTML-Website erstellen
  * SuS können verschiedene HTML-Elemente anwenden.
  * SuS können Bilder und Videos in eine HTML-Seite einbetten.
  * SuS können HTML-Seiten untereinander verlinken.
  * SuS können HTML-Seiten lokal am Computer speichern.
  * SuS können konstruktiv in einem Team zusammenarbeiten.

===== Motivation =====

==== Motivation der Schüler*innen ====
Im Sinne des ARCS-Motivationsmodells von John M. Keller wird am Anfang der Stunde die Aufmerksamkeit und das Interesse (Attention) der Schüler*innen erlangt, indem die Erfahrung der Schüler*innen angesprochen wird und darauf aufgebaut wird. Auch die Relevanz (relevance) wird dabei gezeigt. Ebenso wird eine nicht zu komplizierte Seite als Lernziel vorgestellt. Dies ist direkt verbunden mit dem Punkt Erfolgszuversicht (Confidence), da die Beispielseite so gestaltet ist, dass sie kein unüberwindbares Hindernis für die Schüler*innen darstellt. Die Schüler*innen dürfen anschließend sehr selbstständig arbeiten und ausprobieren, was ebenfalls die Selbstsicherheit stärkt. Es werden zusätzliche Unterrichtsmaterialien angeboten, sodass die Schüler*innen das Schwierigkeitsniveau an ihre Fähigkeiten anpassen können und weder überfordert noch unterfordert sind. Beim HTML-Programmieren gibt es eine sehr schöne und direkte Rückmeldung über den Erfolg (Website ist schön oder nicht), wodurch der letzte Punkt Zufriedenheit (Satisfaction) schon teilweise angesprochen wird. Durch das abschließende gegenseitige „Durchspielen“ der Projekte bekommen die Lernenden ebenfalls gute Rückmeldungen von der Lehrperson sowie ihren Mitschüler*innen. 

==== Motivation der Lehrperson ====
HTML und auch CSS, wobei dies hier nicht genauer besprochen wird, sind wichtige Grundlagen, denen man unbewusst im Leben oft begegnet, deshalb sollen Lernende ein Grundverständnis davon haben. Zudem kann die einfache Umsetzung von HTML und die direkte Kontrolle der Ergebnisse die Motivation steigern und Schüler*innen für kompliziertere Programmierung begeistern. Ebenso wird das logische Denken und die Kreativität der Lernenden gefördert.



===== Handbuch für Lehrende =====

{{ :wiki:informatik_und_gesellschaft:html-seiten_erstellen:handbuch_lehrperson.pdf | Handbuch für Lehrende}}

===== Evaluation und Zielerreichung (Leistungbeurteilung) =====

Die Unterrichtseinheit ist als eine leistungsbewertungsfreie Zeit vorgesehen. Allerdings kann anhand der Projektabgaben am Ende das Erreichen der Lehr-/Lernziele festgestellt werden. Ebenso kann durch Beobachtung durch die Lehrperson der Lernfortschritt festgestellt werden.

===== Lehr- und Lernmaterialien  =====

{{ :wiki:informatik_und_gesellschaft:html-seiten_erstellen:html_arbeitsblatt_allgemein.pdf | Arbeitsblatt für die Schüler*innen}}\\
{{ :wiki:informatik_und_gesellschaft:html-seiten_erstellen:eisbaerensteckbrief.pdf | Steckbrief Eisbär (Entwurf und Code)}}
 
===== Weiterführende Materialien =====


==== Hilfreiche Links ====
=== Online-Editor ===
  * https://www.w3schools.com/

=== Übersicht über HTML-Elemente ===
  * https://www.w3schools.com/tags/default.asp
  * https://drive.google.com/file/d/0BzMVvLOySsXMYjV3RjNTVnBRNFk/view?resourcekey=0-m6NlvNVwmE4Fr450d3FCGA, 
  * https://www.html-seminar.de/befehlsuebersicht.htm

=== Grundstruktur eines HTML-Dokuments ===
  * https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst

=== HTML-Tutorials ===
  * [[https://www.html-seminar.de/]]
  * [[https://www.htmling.net/]]

=== Bildersuche ===
  * [[https://unsplash.com/]] 
  * [[https://www.pexels.com/de-de/]]
  * [[https://pdpics.com/]]
  * [[https://www.1millionfreepictures.com/]]
  * [[https://nos.twnsnd.co/]]


===== Quellen =====

  * [[http://kaindel.net/absturz/]]
  * [[https://www.zoom-erlebniswelt.de/alaska/tierlexikon/eisbaer.html#:~:text=Steckbrief%20Eisb%C3%A4r&text=Der%20Eisb%C3%A4r%20ist%20eines%20der,Tiere%20in%20Eis%20und%20Schnee.]]


===== Kategorien =====

[[wiki:Informatik und Gesellschaft:HTML-Seiten erstellen:teachingmaterials|Unterrichtsmaterialien]]\\
[[wiki:Informatik und Gesellschaft:HTML-Seiten erstellen:internalteachingmaterials|interne Unterrichtsmaterialien]]

{{tag>Tag_Bsp._1 Tag_Bsp._2}}

~~DISCUSSION~~