Meine erste Website in HTML & CSS
- dann gehe nochmal eine Ebene höher und klicke dich dort durch
- und lies dir unseren Blogeintrag zu unserem Mindset durch
Meine erste Website in HTML & CSS
Genereller Kursablauf
Unsere Kurse laufen nach dem Schema ab, das auf den folgenden Bildern dargestellt ist. Da alle Gruppen von Teilnehmer*innen verschieden sind, kann es in den Kursen immer mal Abweichungen vom Ablauf geben. Dies hängt meistens von den folgenden Faktoren ab:
- Technik der Teilnehmenden: Falls der Kurs online stattfindet, können Gerät und Internetverbindung der Teilnehmer*innen Probleme machen. Daher wird häufig der Ablaufplan "durchgerüttelt".
- Vorwissen der Teilnehmer*innen: Dies lässt sich bspw. durch das "Alle, die"-Kennenlernspiel zu diagnostizieren, um grob einzuschätzen, wie viel Erfahrungen die Schüler*innen haben.
Kursablauf vor Ort
Kursablauf online
Programmieren 1 "WE INSPIRE"
Hier geht es darum, dass ihr als Inspiress oder Inspirer in das Programmieren einführt und die Basics erklärt.
Programmieren 2 "INSPIRE ME"
Im zweiten Programmierteil sind die Rollen sozusagen vertauscht. Denn jetzt kommt der proaktive Teil aus Sicht der Schülerinnen und Schüler. Nun sind diese an der Reihe und inspirieren sozusagen dich als Inspir*ess! Du hilfst, begeisterst und inspirierst aber natürlich entsprechend auf deine Art und Weise weiter.
Kennenlernen
Vorstellungsrunde mit Programmiererfahrung/Motivation
Ihr stellt euch vor und erzählt, wie ihr zur Hacker School und zum Coden gekommen seid.
Nun die Teilnehmer:
- Wie heißt Du? (Achtet darauf, dass die Kinder sich nur mit Vornamen vorstellen – Datenschutz.)
- Warum bist Du hier?
- Hast Du schon mal programmiert?
- Was willst Du lernen?
Vorstellung interaktiver gestalten? (!Klick mich an!)
In unserem Inspirer Handbuch findet ihr
weitere Spielideen.
Wenn Du die Vorstellung etwas interaktiver gestalten möchtest, empfehlen wir das Spiel “Alle, die”, was im folgenden erklärt wird:
Spielidee und Ziel
- Wir kommen locker und leicht mit den Teilnehmer*innen ins Gespräch und erfahren, was sie gerne mögen (positiver Beziehungsaufbau).
- Wir können eine erste Diagnose stellen, was die Schülerinnen und Schüler können, was sie gerne mögen.
Ablauf
- Stellt Euch vor die Klasse.
- Ein*e Inspirer sagt: “Alle, die”-Frage z.B: “Alle, die Sport in der Freizeit machen?”.
- Alle, die sich angesprochen fühlen, stehen von ihrem Platz auf.
- Die*der Inspirer stellt Rückfragen und kommt ins Gespräch mit den Teilnehmer*innen, z.B. “Cool, du in der ersten Reihe: Wie heißt du? [Antwort] Welchen Sport machst du denn gerne? [Gespräch entsteht] Super und du in der letzten Reihe…”.
- Die*der Inspirer sagt: "Alle wieder setzen".
- Die*der Inspirer stellt die nächste Frage: z.B. “Alle, die gerne Spiele auf dem Handy oder Computer spielen!”
- Siehe 3.-5.
- Spielt das Ganze etwa 5 min (nach Gefühl)
Sammlung möglicher Fragen (!Klick mich an!)
Diese Sammlung kann gern erweitert oder angepasst werden.
IT/Programmieren
- Wer hat schon mal programmiert?
- Wer kann sich vorstellen etwas mit Programmieren und IT zu machen?
Hobbies
- Wer von Euch macht Sport in der Freizeit?
- Wer spielt ein Instrument?
- Wer spielt Computerspiele?
- Wer spielt Handyspiele?
Lustiges
- Wer hat eine Schuhgröße größer als 35?
Letzte Frage
- Wer ist schon in repl.it angemeldet?
Tag 1
Vorstellung „Agenda“
~5 Minuten
Den Teilnehmer*innen 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
Unterstützt die Teilnehmer*innen bei der Repl.it-Anmeldung: www.repl.it
Dort wird dann gezeigt, wie ein neues Projekt angelegt wird. Das sollen alle Teilnehmer*innen gleich mitmachen.
WE INSPIRE: 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 Teilnehmer*innen 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 alle Teilnehmer*innen sehen sollten. 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 Teilnehmer*innen sollen sich nur innerhalb des Bodys bewegen und ausschließlich dort ihren Inhalt eintippen.
Überschriften
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:
1 2 | <h1>HTML / CSS Kurs</h1> |
Paragraph
Erstellen des ersten Paragraphen mit <p></p> in repl.it.
Text dazu:
1 2 3 4 | <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 <br/> ein Zeilenumbruch eingefügt werden.
Font-Styling
Jetzt soll der nächste Paragraph eingefügt werden und der Text anhand von font-styling Tags ein bisschen aufgehübscht werden:
1 2 3 4 5 | <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 <b></b> : Fett und dicke Buchstaben markieren
- Italic <i></i>: Befehle Kursiv machen
- Underline <u></u>: Zeichen unterstreichen
Diese Tags können auch beliebig miteinander verschachtelt werden, aber dabei muss man die Reihenfolge der öffnenden und schließenden Tags beachten.
<b><u>dicke Buchstaben</u></b>
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 Teilnehmer*innen 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 Teilnehmer*innen 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 Teilnehmer*innen besser einzubinden, kann man eine Liste der Lieblingstiere der Teilnehmer*innen 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“:
1 2 3 4 5 | <ul> <li>Katze</li> <li>Hase</li> <li>Wolf</li> |
Wenn es eine „unordered list“ gibt muss es auch eine „ordered list“ geben:
1 2 3 4 5 | <ol> <li>Katze</li> <li>Hase</li> <li>Wolf</li> |
INSPIRE ME: Pair Programming
~30 Minuten
Die Teilnehmer*innen 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.
WE INSPIRE: Style
~40 Minuten
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.
1 2 3 4 5 | <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
<p style="color:blue; 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 mitfont-size: 20px;
Einführung des <font>
-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:
<font style="color: red;">Farbe</font>
- Dann die Schriftgröße von des Wortes Größe im Text auf 14px ändern:
<font style="font-size: 14px;">Größe</font
INSPIRE ME (Übung): Einbindung von Styles in der eigenen Website
Stylesheet
Weil 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 selbst definieren. Dazu lernen wir zwei Methoden; die Definition eines Styles für einen bestimmten Tag oder die Definition eines Styles anhand einer Klasse.
H1-style definieren
1 2 3 4
h1{ font-size:40px; color: purple;
}.myClass Klasse definieren
1 2 3 4
.myClass{ font-size:14px; color: #004d00;
}Aufzeigen, wie diese Klasse im HTML-Tag aufgerufen werden kann mit
class="myClass"
, zum Bespiel im<p>
-Tag eines unserer Absätze1
<p class="myClass">Hier gilt jetzt die CSS Klasse myClass</p>
Fonts Teil 2
Weitere Stilelemente zur Gestaltung unseres Textes 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;
INSPIRE ME (ÜBUNG): Erstellung eines Stylesheets und eigener Definitionen für die eigene Website
Bilder einbinden
Um Bilder in den Code einzubinden, müsst ihr sie vorher 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.
1 2
<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)
1 2 3 4 5
.myCaption{ font-size: 12px; margin: 0px; font-style:italic;
}- Einbindung der Klasse im
<p>
-Tag.
INSPIRE ME (ÜBUNG): Einbetten von Bildern in der eigenen Webseite und Weiterführung des Konzeptes
Feedback-Runde
~10 Minuten
Ganz am Ende sollen die Teilnehmer*innen 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 Teilnehmer*innen zu fragen, was sie gestern gelernt haben. Vorteil daran ist, dass man damit auch gleich eine Wiederholung der gestrigen Themen durchführen kann.
Dabei sollen einfach alle Teilnehmer*innen der Reihe nach eine Sache/ein Thema erklären, die sie gestern im Kurs gelernt haben.
Farbenspiel
Wenn die Aufwärmübung etwas aufwändiger und spielerischer sein soll, kann auch das Farbenspiel genutzt werden. Dabei werden zuerst der Reihe nach alle Teilnehmer*innen nach ihrer 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 Teilnehmer*innen 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
Zusammenfassung der Themen von gestern
Kurz nochmal die Themen, die gestern bearbeitet wurden, aufzeigen. Falls es Unklarheiten oder Fragen gibt, sollten die Teilnehmer*innen diese gerne kurz aufbringen und erklären.
WE INSPIRE: 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 Kopie der Webseite auf dem eigenen Computer 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.
Die Teilnehmer*innen können dann selbst auf dieser Seite mit dem Inspektor spielen.
WE INSPIRE: 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 Teilnehmer*innen 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 Teilnehmer*innen nebenbei mitbauen sollen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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> |
INSPIRE ME (ÜBUNG): Bauen einer Tabelle in der eigenen Website
WE INSPIRE: 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.
1 2 3 4 5 6 7 | .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.
1 2 3 4 5 6 7 8 9 | .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
1 2 3 4 5
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 Teilnehmer*innen merken, dass die Tabelle etwas seltsam aussieht, weil der Rahmen der Tabelle vom Rahmen der Zellen durch kleine Abstände separiert ist.
- 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;
INSPIRE ME (ÜBUNG): Einbinden eines Rahmens in der eigenen Website, z.B. für die Tabelle.
WE INSPIRE: 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
Die Einbindung dieser Stilelemente soll auch in repl.it demonstriert werden.
1 2 3 4 | .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:
1 2 3 4 5 6 | .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):
1 2 3 4 5 6 | 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 Teilnehmer*innen 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:
1 2 | <a href="http://www.google.com"> <button>Mein Button</button> </a> |
Auch hier kann man wieder den CSS-Selektor „hover“ einbinden:
1 2 3 | button:hover{ background-color:yellow; } |
ÜBUNG: Einbinden von Abständen (und Buttons) in die eigene Website, z.B. für die Tabelle.
INSPIRE ME: 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 Teilnehmer*innen 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 Teilnehmer*innen, die Umfrage auszufüllen. Der Link dazu wird von der Hacker School versendet.