Alle Sidepanels auf-/zuklappen

Meine erste Website in HTML & CSS

Tag 1

Begrüßung

~15 Minuten

Vorstellungsrunde (mit Programmiererfahrung / Motivation)

Die Inspirer stellen sich vor und erzählen, wie sie zur Hacker School und zum Coden gekommen sind.

Nun die Teilnehmer:

Wie heißt Du?
Warum bist du hier?
Hast Du schon mal programmiert?
Was willst Du lernen?

am besten jetzt schon überlegen, wie man die Kinder in Paare einteilen kann
Bei einer Pair Session (in der Teilnehmende also schon mit einem festen Partner ankommen) können die Paare sich auch gegenseitig vorstellen

Vorstellung „Agenda“

~5 Minuten

Den Kindern kurz erklären, wie der Tag abläuft:

Was ist HTML & CSS, was werden wir heute machen?
Theoriephase
Übungen (Einteilung in Teams) 🡪 Übung wird sein, eine eigene Webseite zu erstellen
Mittagspause 11:45-12:15

Anmeldung in Repl.it

~5 Minuten

Die Kinder sollen sich in Repl.it anmelden: www.repl.it
Dort wird dann gezeigt, wie ein neues Projekt angelegt wird. Das soll jedes Kind gleich mitmachen.

HTML

~20 Minuten

HTML: HTML steht für Hypertext Markup Language, also eine Sprache, die das Aussehen von Texten beschreibt. Das bedeutet einfach, dass eine Überschrift anders aussieht als ein Text-Absatz oder eine Liste.
Texte stehen immer zwischen zwei "Tags", die man an den spitzen Klammern erkennt. Es gibt (fast) immer ein öffnendes und ein schließendes Tag, das schließende erkennt man am Schrägstrich.

Idealerweise sollen immer die „Buchstaben“ des Tags erklärt werden und die Kinder sollen ihre Englisch-Kenntnisse nutzen, um zu erraten wofür die Tags stehen
(z.B. <ul> steht für „unordered list“, was heißt das auf deutsch?)

Aufbau eines HTML Dokumentes

Zuerst soll das „leere“ HTML-Dokument erklärt werden, das jetzt jedes Kind sehen sollte. Hier ist einiges an Text nämlich schon automatisch eingefügt, denn ein HTML-Dokument besteht immer aus einem Head (Kopf) und einem Body (Körper).

Die Kinder sollen sich nur innerhalb des Bodys bewegen und ausschließlich dort ihren Inhalt eintippen.

Header

Es gibt in HTML sechs unterschiedliche Überschriften (h1-h6), vergleichbar mit den Überschriften und Unterüberschriften eines langen Artikels oder Aufsatzes.

Diese werden als erstes in repl.it eingefügt:

<h1>HTML / CSS Kurs</h1>
<h2>Hypertext Markup Language</h2>

Paragraph

Erstellen des ersten Paragraphen mit in repl.it.

Text dazu:

<p> HTML ist eine „Sprache“ für Computer und die Abkürzung des
englischen Begriffes „Hypertext Markup Language“. Übersetzt könnte
man sagen: „Auszeichnungssprache für Hypertext“. HTML ist die
Grundlage für alle Seiten im Internet und besteht seit 1992. </p>

Innerhalb eines Paragraphen kann mittels ein Zeilenumbruch eingefügt werden.

Fontstyling

Jetzt soll der nächste Paragraph eingefügt werden und der Text anhand von font-styling Tags ein bisschen aufgehübscht werden:

<p> Auszeichnungssprache nennt man eine Art,
dem Computer zu sagen, wie ein Text aussehen soll. Wenn man zum
Beispiel will, dass ein Wort fett geschrieben ist, mit dicken
Buchstaben, dann gibt man das in der Auszeichnungssprache an.
Dafür verwendet man besondere Befehle und Zeichen. </p>

Bold : Fett und dicke Buchstaben markieren
Italic : Befehle Kursiv machen
Underline : Zeichen unterstreichen

Diese Tags können auch beliebig miteinander verschachtelt werden, aber dabei muss man die Reihenfolge der öffnenden und schließenden Tags beachten.

dicke Buchstaben

Links

Als nächstes zeigen wir, wie man auf andere Webseiten verlinken kann. Dazu im Text das Wort Computer verlinken zur Wikipedia-Seite: https://de.wikipedia.org/wiki/Computer

<a href="https://de.wikipedia.org/wiki/Computer">Computer</a>

Hier sehen die Kinder erstmalig die Nutzung eines Attributes innerhalb eines Tags, nämlich in diesem Fall das „href“-Attribut. Attribute werden im weiteren Verlauf öfter genutzt und sollten explizit angesprochen werden.
Sollten die Kinder danach fragen oder daran interessiert sein, kann auch das target-Attribut erklärt werden, um Webseiten in einem neuen Tab zu öffnen.

<a href="https://de.wikipedia.org/wiki/Computer" target="_blank">Computer</a>

Listen

Text kann auch als Aufzählungen dargestellt werden. Dazu gibt es zwei Möglichkeiten, die aufgezeigt werden sollen: die Stichpunktliste und die Nummerierte Liste.

Um die Kinder besser einzubinden, kann man eine Liste der Lieblingstiere der Kinder aufstellen (als ungeordnete Liste) und dann im Nachgang wählen lassen, welches das beste ist und daraus die geordnete Liste erstellen.

Wir beginnen mit der „unordered list“:

<ul>
    <li >Katze</li>
    <li>Hase</li>
    <li>Wolf</li>
</ul>

Wenn es eine „unordered list“ gibt muss es auch eine „ordered list“ geben:

<ol>
    <li >Katze</li>
    <li>Hase</li>
    <li>Wolf</li>
</ol>

Pair Programming

~30 Minuten

Die Kinder werden erstmalig in ihre Gruppen/Pärchen geschickt und sollen zuerst ein Konzept erstellen für die eigene Webseite, z.B. eine Homepage für das Lieblingstier oder ein Hobby. Dazu sollten die erlernten HTML-Elemente schon mal eingebunden werden.

MITTAGSPAUSE (11:45 – 12:15)

Style

~40 Minuten

Nachdem die Webseite aktuell etwas langweilig aussieht, wollen wir das ganze anhand von Styles „aufhübschen“. Das macht man üblicherweise mit CSS, wir beginnen aber damit, den style direkt in den Tags mit aufzunehmen.

Colors

Den nächsten Text bearbeiten wir mit Farbe. Somit erst den Text einfügen, das Style-Attribut erklären und dann an sämtlichen Stellen einfärben.

<p>So lässt sich nicht nur festlegen, welcher Text angezeigt wird,
sondern auch in welcher Farbe und in welcher Größe. Außerdem kann
man mit HTML zum Beispiel auch bestimmen, welche Farbe der Hintergrund
hat und wo ein bestimmtes Bild angezeigt wird. Aus dem HTML-Text
macht der Computer dann einen richtigen, gut lesbaren Text.</p>

Style-Attribut einführen und damit den Absatz einfärben anhand von color und background-color.

Resultat:

Den ganzen Absatz blau färben mit style=“color: blue;“.

Den Hintergrund des Absatzes hellgrau färben mit background-color: lightgray

Farben können anhand des Color Pickers gewählt werden:
https://www.w3schools.com/colors/colors_picker.asp

Dazu sollten die verschiedenen Schreibweisen der Farben erklärt werden:

Aufruf der Farbe über default-HTML-Werte (z.B. blue, red, yellow, etc.)
Aufruf der Farbe über die rgb (Red, Green, Blue) Zusammensetzung
Aufruf der Farbe über die Hexadezimal-Schreibweise

Fonts

Font-size einführen: Die Schriftgröße des ganzen oberen Absatzes ändern mit
font-size:20px;

Einführung des -tags: Um nur einzelne Wörter anders zu färben brauchen die einen eigenen Tag, anhand dessen der Style definiert werden kann.

Markieren des Wortes Farbe im Text in rot:
Farbe
Dann die Schriftgröße von des Wortes Größe im Text auf 14px ändern:
Größe</font

ÜBUNG: Einbindung von Styles in der eigenen Website

Stylesheet

Nachdem es etwas kompliziert ist, jeden style im HTML-Tag selber zu definieren, lagern wir so was in Stylesheets (

stylesheet.css) aus. Damit können wir bestimmtes Aussehen für beliebige Elemente selber definieren. Dazu lernen wir zwei Methoden, einmal die Definition eines Styles für einen bestimmten Tag, oder die Definition eines Styles anhand einer Klasse.

H1-style definieren

h1{
font-size:40px;
color: purple;
}

.myClass Klasse definieren

.myClass{
font-size:14px;
color: #004d00;
}

Aufzeigen, wie diese Klasse im HTML-Tag aufgerufen werden kann mit class="myClass", zum Bespiel im -Tag eines unserer Absätze
1
Hier gilt jetzt die CSS Klasse myClass

Fonts Teil 2

Weitere Stilelemente, um unseren Text zu gestalten, sind die

Schriftart und die Ausrichtung des Textes.

Font-family: Der Style-Definition von h1 wird diese Zeile hinzugefügt
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
Align: der Klasse .myText wird diese Zeile hinzugefügt
text-align: center;

ÜBUNG: Erstellung eines Stylesheets und eigener Definitionen für die eigene Website

Bilder einbinden

Um Bilder in den Code einzubinden, müsst ihr diese vorher noch von eurem Rechner in Repl.it hochladen

Aufzeigen, wie ein Bild in repl.it über die „Upload File“-Funktion hochgeladen werden kann.
Vorführen, wie das Bild umbenannt werden kann. Das ist wichtig für die vereinfachte Einbindung des Bildes im HTML-Dokument.
Einbindung des Bilds auf der Website mit <img>-Tag
<img src="Bild1.jpg" />
Festlegung von height und width (einzeln und beides). Dabei ist zu beachten, dass durch die Angabe nur eines Wertes der andere Wert relativ berechnet wird. Mit der Angabe beider Werte kann sich das Bild stark verzerren.
<img src="Bild1.jpg" height="100px"/>

Bildunterschrift als nächsten Absatz hinzufügen.

<p> Tim Berners-Lee aus Großbritannien: Er gilt nicht nur als
Erfinder des Webs, sondern auch der Sprache HTML. <p>

Style für die Bildunterschrift mit neuer Klasse im CSS definieren: (Vroni)

.myCaption{
    font-size: 12px;
    margin: 0px;
    font-style:italic;}

Einbindung der Klasse im -Tag.

ÜBUNG: Einbetten von Bildern in der eigenen Webseite und Weiterführung des Konzeptes

Feedback-Runde

~10 Minuten

Ganz am Ende sollen die Kids Feedback zum heutigen Tag geben (jeder soll kurz was dazu sagen):

Was hat euch gut gefallen?
Was hat euch weniger gefallen?
Was würde euch noch interessieren?
Was sollen wir weiter ausführen?

Daran können sich die Inspirer orientieren, um eventuell den nächsten Tag anders zu gestalten oder optionale zusätzliche Sessions während der Übungen aufzusetzen.

Tag 2

Einleitung

~30 Minuten

Aufwärmübung

Den Tag mit einem Eisbrecher beginnen. Dazu hier zwei Vorschläge für Eisbrecher:

Wiederholungsspiel
Die einfache und effektive Variante einer Aufwärmübung ist einfach, die Kinder zu fragen, was sie gestern gelernt haben. Vorteil daran ist, dass man damit auch gleich eine Wiederholung der gestrigen Themen durchführen kann.
Dabei soll einfach jedes Kind nach der Reihe eine Sache/ein Thema erklären, die es gestern im Kurs gelernt hat.

Farbenspiel
Wenn die Aufwärmübung etwas aufwändiger und spielerischer sein soll, kann auch das Farbenspiel genutzt werden. Dabei wird zuerst der Reihe nach jedes Kind nach seiner Lieblingsfarbe gefragt und, darauf basierend, gleich eine zweite Frage aus der Liste gestellt:

Rot= Was möchtest du als erstes in den Ferien tun?
Orange= Was ist dein Lieblingsfach in der Schule?
Gelb= Wo möchtest du eines Tages leben?
Grün= Wohin möchtest du gerne mal reisen?
Blau= Was wäre dein Traumberuf?
Lila= Wer ist dein Lieblings-Disney-Held oder Heldin?
Pink= Was ist dein Lieblingsbuch?
Schwarz= Was war das beste Geschenk das du jemals bekommen hast?
Braun= Was ist dein größtes Hobby?
Türkis= Was ist dein Lieblingsessen?
Other= Was würdest du mit einer Million Euro tun?

Agenda

Den Kindern kurz erklären, wie der Tag abläuft (ähnlich wie gestern):

Theoriephase (was haben wir geplant heute zu lernen)
Übungen (eigene Webseite weiterbauen)
Zusätzlich angefragte Themen (basierend auf dem Feedback von gestern sollten zusätzliche Themen angeboten werden, für diejenigen die daran interessiert sind)
Mittagspause 12:00-12:30

** Ablauf kann sich anhand des gestrigen Feedbacks ändern, also flexibel sein!

Zusammenfassung der Themen von gestern

Kurz nochmal die Themen, die gestern bearbeitet wurden, aufzeigen. Falls es Unklarheiten oder Fragen gibt, sollten die Kinder diese gerne kurz aufbringen und erklären.

Inspektor

~15 Minuten

Im Browser kann man den Code von Webseiten anschauen und sogar verändern. Das geht so: Eine Seite aufrufen (Newsseiten sind gut geeignet), einen Rechtsklick auf den Inhalt machen und "Untersuchen" oder "Inspect" wählen (je nach Browser etwas unterschiedlich). Dann geht die Konsole auf, in der man den Code anschauen kann und Texte und Bilder ersetzt oder Styles verändert. Wenn man die Seite neu lädt, sind alle Änderungen wieder weg! Das liegt daran, dass nur eine lokale Kopie der Webseite gespeichert wird.

Alle Teilnehmer*innen können sie nur eine Webseite ihrer Wahl aufrufen und dort Texte und Bilder verändern, zum Beispiel indem sie einen Artikel auf einer Nachrichtenseite über sich selbst schreiben.

Als konkretes Beispiel zum Vorführen eignet sich diese Seite:
https://www.rki.de/DE/Content/InfAZ/N/Neuartiges_Coronavirus/Fallzahlen.html/
Idealerweise vorher prüfen und entscheiden was man konkret anpassen möchte, um den Vorführeffekt zu vermeiden.

Kinder können dann selbst auf dieser Seite mit dem Inspektor spielen.

Tabelle

~15 Minuten

Auf der Webseite der Inspektorübung findet sich eine Tabelle. Wir selbst wollen natürlich auch Tabellen basteln, wobei das etwas komplizierter ist als die bisherigen Tags. Hier sind wieder die Englischkenntnisse gefragt und die Kinder sollen immer raten wofür die Tags stehen und übersetzen.

Zum Umrahmen der Tabelle nutzen wir das <table>-Tag.
Jede neue Reihe wird mit <tr> (tr = table row) umfasst.
Spaltenüberschriften definieren wir mit <th> (th = table header) und jede normale Zelle wird durch <td> (td = table data) dargestellt. Dabei ist zu beachten dass in jeder erstellen Reihe immer die gleiche Anzahl Spalten mittels th und td erstellt werden müssen!
Damit in repl.it eine Tabelle aufbauen, die die Kids nebenbei mitbauen sollen.

<table>
    <tr>
        <th>Sprache</th>
        <th>Steht für...</th>
        <th>Zweck</th>
    </tr>
    <tr>
        <td>HTML</td>
        <td>Hypertext Markup Language</td>
        <td>Wird genutzt um die Struktur einer Webseite zu bauen.</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>Cascading Style Sheets</td>
        <td>Wird genutzt um das Aussehen der Webseite zu gestalten.</td>
    </tr>
</table>

ÜBUNG: Bauen einer Tabelle in der eigenen Website

MITTAGSPAUSE (12:00 – 12:30)

Border

~10 Minuten

Rahmen allgemein

Rahmen werden grundsätzlich durch drei Attribute definiert:

Die Stärke des Rahmens: <border-width>
Die Farbe des Rahmens:<border-color>
Die Art des Rahmens:<border-style>

Erstellung einer neuen Klasse myBorder in repl.it zum Aufzeigen dieser Attribute.
Zusätzlich kann man einen border-radius definieren, um die Ecken zu runden.

.myBorder{
    border-width: 1px;
    border-color:blue;
    border-style:solid;

    border-radius: 5px;
}

Mit Angabe von „bottom“, „top“, „right“ oder „left“, kann man auch den Rahmen für jede Seite einzeln definieren.

.myBorder{
    border-bottom-width: 1px;
    border-bottom-color:blue;
    border-bottom-style:solid;

    border-left-width: 5px;
    border-left-color:yellow;
    border-left-style:groove;
}

Rahmen von Tabellen

Auch der Rahmen für Tabellen soll einmal vorgeführt werden

Dazu zuerst einen Rahmen für den <table>-Tag definieren

table{
    border-width: 3px;
    border-color:blue;
    border-style:dashed;
}

Als zweites einen Rahmen für td,th definieren und dabei die Möglichkeit der Verbindung von verschiedenen Tags in der Definition eines Styles vorführen
1 2 3 4 5
td,th{ border-width: 1px; border-color:blue; border-style:solid; }
Hier sollten die Kinder merken, dass die Tabelle etwas seltsam aussieht, weil der Rahmen der Tabelle vom Rahmen der Zellen durch kleine Abstände separiert ist.
(Bild fehlt)
Um dem Entgegenzuwirken und die Rahmen miteinander zu verbinden, brauchen wir bei Tabellen noch eine zusätzliche Angabe für das <table>-Tag:
border-collapse: collapse;

ÜBUNG: Einbinden eines Rahmens in der eigenen Website, z.B. für die Tabelle.

Padding/Margin

~5 Minuten

Border, Padding und Margin sind sehr eng miteinander verwandt.

Border bezeichnet den Rahmen der um ein Element gezogen werden kann
Padding ist der Abstand von Inhalt (z.B. der Text) zum Rahmen
Margin ist der Abstand außerdem des Rahmens zu anderen Elementen

(bild fehlt)
Die Einbindung dieser Stilelemente soll auch in repl.it demonstriert werden.

.myClass{
    margin: 100px;
    padding: 40px;
}

Ähnlich wie bei Border, können auch bei Padding und Margin mit der Angabe von „bottom“, „top“, „right“ oder „left“ die Abstände jeder Seite für sich definiert werden:

.myClass{
    margin-right: 100px;
    margin-bottom: 20px;
    padding-left: 40px;
    padding-top: 75px;
}

Button, Hover

Jetzt wird erstmals ein zusätzlicher CSS-Selektor eingeführt, nämlich

“hover“. Damit kann definiert werden, dass sich das Aussehen von HTML-Elementen verändert, wenn man mit der Maus drüber fährt. Am häufigsten wird „hover“ verwendet, um Interaktive hervorzuheben, z.B. bei Links oder Buttons.
Die hover-Funktion wird auf zwei Weisen demonstriert, mit Angabe eines Tags (z.B. <a>) und mit Angabe einer eigenen Klasse (z.B. .myClass):

a:hover{
    color:yellow;
}
.myClass:hover{
    background-color:brown;
}

Wenn man dann mit der Maus über diese Elemente auf der Webseite selbst fährt, können die Kinder sehen, wie sich die Farbe entsprechend den Angaben verändert.

Buttons können mit dem <button>-Tag eingefügt werden, entweder eigenständig oder innerhalb eines <a>-Tags als Link auf eine andere Seite:

<a href="http://www.google.com"> <button>Mein Button</button> </a>
<button onClick="alert('Hello World')">Knopf</button>

Auch hier kann man wieder den CSS-Selektor „hover“ einbinden:

button:hover{
    background-color:yellow;
}

ÜBUNG: Einbinden von Abständen (und Buttons) in die eigene Website, z.B. für die Tabelle.

Vorstellung der Webseiten

~30 Minuten

Jedes Team soll die eigens erstellte Webseite vorstellen.

Erklärung des Inhaltes und warum dieses Thema gewählt wurde
Aufzeigen der HTML/CSS Elemente die eingebaut wurden

Feedback-Runde

~10 Minuten

Ganz am Ende sollen die Kids Feedback zum heutigen Tag geben (jeder soll kurz was dazu sagen):

Was hat euch gut gefallen?
Was hat euch weniger gefallen?
Wurden die Erwartungen, die gestern definiert wurden erfüllt?

Außerdem bitten die Kids, den Survey auszufüllen, Link wird von der Hacker School versendet.

← Klimaquiz mit HTML, CSS und Javascript

Energienetzwerke in Svelte →