HTML&CSS: Meine erste eigene Website

Das Verständnis zur Grundidee und zum Ablauf der Kurse in unserem yourschoolPLUS-Format ist notwendige Voraussetzung zur Durchführung eines Kurses. Unsicher?

dann gehe nochmal eine Ebene höher und klicke dich dort durch
und lies dir unseren Blogeintrag zu unserem Mindset durch

Entwicklungsumgebung

Wir arbeiten während dem Kurs mit dem Online-Editor Repl.it:

https://repl.it
Wir loggen uns im Kurs gemeinsam mit den Schüler*innen in Repl.it ein und erstellt dort die Projekte.

Kennenlernen

~5 Minuten

Das Kennenlernen machen wir in Yourschool PLUS Kursen meist durch ein kurzes Aufwärmspiel mit den Schüler*innen. Zudem wird der Team Inspirer oder die Team Inspiress euch am Anfang des Kurses bitten, euch kurz vorzustellen.

Programmieren Teil 1: WE INSPIRE - HTML

~75 Minuten

1. Replit und Tastatur

~5 Minuten

Wie funktioniert die Entwicklungsumgebung (IDE)?

Nach dem Erstellen des eigenen Projekts sieht die Index.html-Datei in repl.it sehr voll aus. Daher löschen wir den Inhalt erst einmal, um von Null aus zu starten. Gehe dann kurz auf "RUN" ein, mehr braucht ihr zur Entwicklungsumgebung nicht zu sagen (falls es später Fragen dazu gibt, gerne). Wir wollen schnell ins Machen und Programmieren kommen und die Schüler*innen nicht animieren durch weitere Replit-Funktionen abgelenkt zu werden ;).

Bevor es nun losgeht, stellt den Schüler*innen zwei Websiten vor, die andere schon vor ihnen in einem Hacker School Kurs erstellt haben, zum Beispiel diese beiden hier:

2. Grundverstädnis von Tags

~10 Minuten

Teilt euren Bildschirm und erstellt den Grundaufbau eures HTML-Dokumentes.
Fangt einfach und mit den absoluten Basics an, zum Beispiel so:

Schachteln mit Deckel
Eine Schachtel kann geöffnet werden und weitere kleinere Schachteln (Tags) können reingetan werden. Am Ende ist es nur wichtig, dass alle Tags/Schachteln, die geöffnet wurden, auch irgendwann wieder mit einem Deckel verschlossen werden.
Das Öffnen kann hier mit dem Starttag und das Schließen mit dem Endtag verglichen werden.

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
    </head>
    <body>
        <h1>Hallo Welt!</h1>
        <p>Oh, schön hier.</p>
    </body>
</html>

Geht noch nicht detailliert auf den <h1> und <p> tag ein. Das kommt dann im nächsten Schritt ;)

Wie erkläre ich die allgemeinen Tags am besten? (!Klick mich an!)

<!DOCTYPE html>-Tag

"Geht hier nicht zu detailliert darauf ein, eher wenn Nachfragen kommen - Erklärung dann ungefähr so: Dies gibt dem Webbrowser an, was für dein Dokumenttyp die Seite ist --> hier HTML5-Seite. Es hilft dem Browser, die Webseite korrekt zu verstehen (interpretieren)."

<html>-Tag?

"Geht hier nicht zu detailliert darauf ein, eher wenn Nachfragen kommen - Erklärung dann ungefähr so: Dieser Tag ist sozusagen der Startpunkt, an dem die Beschreibung der Webseite beginnt. Der Browser liest den HTML-Code von oben nach unten und versteht (interpretiert) die darin enthaltenen Tags, bis zum Endtag </html>. Dadurch erstellt der Browser die Website."

Wieso wird das so komisch eingerückt?

"Das ist kein Muss, allerdings ist die Einrückung in HTML-Code sehr wichtig. Warum? Da sie die Lesbarkeit und die Wartbarkeit des Codes verbessert. Wenn der Code ordentlich und einheitlich eingerückt ist, wird es für mich als Entwickler*in und andere Personen, die den Code lesen, viel einfacher, die Struktur der Webseite zu verstehen."

Was ist der <body>-Tag?

Hier kommt der eigentlich sichtbare Teil einer Webseite hin.

Es ist wahrscheinlich, dass ihr jetzt festgestellt habt, dass viele Schüler*innen nicht so fit im Umgang mit der Tastatur sind. Daher teilt ihnen gerne folgende Bilder, je nach Situation:

3. erste eigene Überschrift

~5 Minuten

Tags sind notwendig, damit Sachen auf unserer Website auf eine bestimmte Art und Weise angezeigt werden können. Damit ihr das einfach versteht, fangen wir mit einer Überschrift an.

Gibt den Schülern*innen 5 min Zeit, um sich ein Thema und eine Überschrift zu überlegen. Anregung: Hobbys, Lieblingsfilme, etc.

Nun könnt ihr ihnen mit Hilfe des <h1> - Tags zeigen, wie man eine Überschrift setzt:

<h1> Das ist eine Überschrift </h1>
<h2> Das ist eine Überschrift </h2>
<h3> Das ist eine Überschrift </h3>

4. erster eigener Paragraph

~5 Minuten

Nun sollen die Schüler*innen ja nicht nur eine Überschrift auf der Webseite haben, sondern passend zum Thema auch einen kleinen Infotext. Lasst Sie hier einen kleinen Text schreiben.
Hier kann beispielsweise ein Wikipedia Text eingefügt werden, um zu zeigen, dass alles hintereinander weggeschrieben wird.

Damit der Text besser formatiert angezeigt wird, könnt ihr mit Hilfe des <p> - Tags Ihnen zeigen wie man einen Paragraphen setzt:

<p> Die Kleinen Pandas, auch Rote Pandas oder
Katzenbären genannt sind eine Säugetiergattung,
die im östlichen Himalaya und im Südwesten Chinas
beheimatet ist und sich vorwiegend von Bambus
ernährt. </p>

Hier findet Ihr Möglichkeiten zur Vertiefung.

Wie mache ich einen Zeilenumbruch (<br>)?

Der HTML-Tag <br> wird verwendet, um einen Zeilenumbruch innerhalb eines Textes oder Absatzes zu erzeugen, ohne einen neuen Absatz zu beginnen.

Wie mache ich eine Horizontale Linie (<hr>)?

Der HTML-Tag <hr> wird verwendet, um eine horizontale Linie zu erzeugen, die dazu dient, visuell Elemente zu trennen oder einen Abschnitt abzuschließen.

5. Tags, Tags, Tags

~10 Minuten

Zeigt den Teilnehmenden ein paar weitere Tags, um den Text zu formatieren.
h Tag(headline), b Tag(fett), i Tag(kursiv), mark(markieren) Tag oder Ähnliches können hier gezeigt werden.

<html>
    <p>Mein erster Text!</p>
    <h1>Das ist eine Überschrift!</h1>
    <b>Das ist fett!</b>
    <i>Das ist kursiv!</i>
    <mark>Das ist markiert!</mark>
</html>

Wichtig ist immer wieder auf das Prinzip wie die Tags funktionieren hinzuweisen (Tag öffnen, Inhalt einfügen, Tag schließen). Lasst den Schüler*innen auch genug Zeit, um Ihre Webseite zu vervollständigen!

Wie stelle ich sicher, dass das Prinzip von allen verstanden wurde? (!Klick mich an!)

Sprich die Schüler*innen proaktiv mit Vornamen an und ermutige sie Fragen zu stellen, wenn es ihnen nicht klar ist.

Gehe durch die einzelnen HTML-Dokumente der Schüler*innen. Am besten, indem ihr sie dir in einzelnen Tabs öffnet.
Nimmt euch Zeit, wir haben keine Eile. Auch wenn ihr so nicht durch das ganze Konzept kommt - nicht schlimm ;)

Noch besteht die Webseite nur aus Überschriften und Text, dies sollen die Schüler*innen mit Hilfe unterschiedlicher Tags ändern. Hierbei soll das Verständnis der Tags gefestigt werden.

Nun könnt ihr mit Hilfe des Listen - Tags Ihnen zeigen wie man eine Liste setzt:

geordnete Liste - ordered list (ol)

<ol>
    <li>Pizza</li>
    <li>Döner</li>
    <li>Kaiserschmarn</li>
</ol>

ungeordnete Liste - unordered list (ul)

<ul>
   <li>Pizza</li>
   <li>Döner</li>
   <li>Kaiserschmarn</li>
</ul>

Lasst sie unbedingt ihre eigene Liste passend zu ihrer persönlichen Website erstellen.

Hier ist ein guter Moment durch die Replits der Teilnehmenden zu gucken um Hilfe zu leisten.

Hier findet Ihr Möglichkeiten zur Vertiefung.

VERSCHACHTELUNG
Nun gibt es auch die Möglichkeiten, unterschiedliche Tags zu verschachteln, das heißt mehrere Tags für einen Satz/Wort zu benutzen.
Kein Muss dies zu zeigen.

<h1><ins>Überschrift 1</ins></h1>
<h2><b>Überschrift 1</b></h2>
<h3><i>Überschrift 1</i></h3>

6. Der Inspektor

~10 Minuten

Jetzt geht es in die konkrete noch "echtere" Anwendung und ihr zeigt den Schüler*innen den Inspektor.
Das könnt ihr nun super als Auflockerung und neue Motivation für sie nutzen!
Der Inspektor ist das Tool, das man in der Website-Entwicklung sehr oft benutzt. Mit ihm kann man sich bestehende Websiten ansehen und temporär ihren Code verändern.
Jetzt wird es spannend. Schnappt euch am besten ein Projekt der Schüler*innen oder eine "einfache" euch bekannte Website und verändert ihren Inhalt.
Mit Rechtsklick -> Untersuchen oder F12 kommt ihr zum Inspektor. In Safari braucht ihr ein bisschen mehr, siehe hier.

Falls ihr keine Ideen, habt nutzt einfach die schon oben genannten Beispielseiten:

Aber zurück zum Code ;)

7. Entscheidung

Nun seid ihr als Inspirer*ess gefragt:

Wenn ihr merkt, dass die Schüler*innen es schon super verstanden haben, dann gehe sofort in den "INSPIRE ME"-Teil über und teile mit den Schüler*innen das Cheatsheet.

Wenn ihr merkt, dass die Schülerinnen und Schüler noch etwas mehr Anleitung und Inspiration von dir brauchen, dann zeige ihnen noch, wie man Videos und Bilder einfügt (!Klick mich an!)

YOUTUBE Videos einfügen

Geht auf ein beliebiges Youtube-Video.
Dann geht unten auf Teilen.

Weiter auf Einbetten.

Dann weiter auf kopieren

Anschließend mit Hilfe der Tasten Strg & V wieder auf deiner Webseite eingefügen.

Beispielcodeschnipsel

<iframe width="560" height="315" src="
https://www.youtube.com/embed/E7EefIh-q1U"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture;
web-share" allowfullscreen></iframe>

Bilder einfügen

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

Als erstes lasst ihr die Schüler*innen ein Bild in Google suchen (passend zu ihrem Thema).
Wenn Sie das passende Bild gefunden haben, müssen Sie rechtsklick darauf machen und die Option “Bild speichern unter” auszuwählen.
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" />

Was sind Attribute?

In HTML sind Attribute wie besondere Anweisungen, die wir den verschiedenen Teilen einer Webseite geben, um ihnen zu sagen, wie sie sich verhalten sollen. Sie helfen uns, Dinge wie Farben, Größen oder Positionen von Texten, Bildern und anderen Elementen auf der Webseite anzupassen. Attribute sind wie kleine Zusatzinfos, die uns helfen, unsere Webseite so zu gestalten, wie wir es möchten.

An dieser Stelle kann man auch gerne schon mal zeigen, wie man das Bild mit Hilfe von Attributen anpassen kann.
Zum Beispiel

width & height: Diese Attribute legen die Breite und Höhe des Bildes in Pixeln fest.
style: Mit diesem Attribute könnt ihr direkt im HTML-Code Stile für das Bild festlegen, wie z.B. Farben, Ränder oder Abstände.
title: Dieses Attribute zeigt einen Text an, wenn jemand mit der Maus über das Bild geht.
alt: Dieses Attribute gibt eine alternative Beschreibung des Bildes an, die angezeigt wird, wenn das Bild nicht geladen werden kann.

8. INSPIRE ME - HTML

~30 Minuten

Jetzt kommt der proaktive "INSPIRE ME"-Teil aus Sicht der Schülerinnen und Schüler. Nun sind diese an der Reihe und inspirieren sozusagen dich als Inspir*ess!
Gib den Schüler*innen dazu folgendes Cheatsheet und lasse sie ihre eigene Website gestalten:
Cheatsheet

Ab hier habt ihr Zeit, die Schüler*innen frei arbeiten zu lassen. Lasst eure Teilnehmenden wissen, dass sie nun alle Grundfunktionen von HTML kennen und sich ihrer eigenen Webseite widmen können.

Steht nun für alle Fragen zur Verfügung.
Passt euch hier an die Dynamik der Gruppe an. Wenn die Schüler*innen eher zurückhaltend sind, geht durch die Dateien euer Teilnehmenden durch und sprecht die Schüler*innen direkt an.

Wenn die Gruppe ohnehin schon viel mit euch kommuniziert, helft ihnen dabei, ihre Probleme zu lösen und Ideen umzusetzen.

Jetzt ist spätestens Zeit für eine Pause.

Programmieren Teil 2: INSPIRE ME - CSS

~75 Minuten

ChatGPT richtig nutzen?

Wenn ihr möchtet, könnt ihr jetzt zusammen mit den Schüler*innen ChatGPT öffnen und ChatGPT nach einer Lösung für das Spiel fragen. Vergleicht dann das Ergebnis von ChatGPT mit dem Ergebnis der Schüler*innen. "Was findet ihr heraus?”

Nach der Pause geht es weiter mit dem Styles-Teil.

1. Einführung Styles

~10 Minuten

Fangt dabei im Plenum an und führt dieses Thema kurz ein.

Schreibt am Besten einen neuen p-Tag und erklärt nun, dass ihr diesen anders aussehen lassen möchtet als die anderen p-Tags. Fangt damit an, etwas Einfaches zu verändern, wie die Schriftfarbe oder die Schriftgröße.

<p style="font-size: 40px">Großer Text</p>

Macht einen weiteren P-Tag und ändert einen weiteren Style.

<p style="color:red">Dieser Text ist rot</p>

Zeigt nun in einem dritten P-Tag, dass auch mehrere Styles für einen Tag festgelegt werden können, wie z.B. Schriftfarbe und Hintergrundfarbe.

<p style="background-color:blue">Der Hintergrund ist blau</p>
<p style="font-size:5px; font-weight: bold;">Der Text ist klein
und fett </p>

Erklärt, dass es sehr viele verschiedene Styles gibt und diese auch je nach Tag unterschiedlich sein können.

Lassst die Schüler*innen nun beliebig die Website erweitern und schön machen.

Was sind Attribute? (!Klick mich an!)

An dieser Stelle kann man auch gerne schon mal zeigen, wie man das Bild mit Hilfe von Attributen anpassen kann.
Zum Beispiel

width & height: Diese Attribute legen die Breite und Höhe des Bildes in Pixeln fest.
style: Mit diesem Attribute könnt ihr direkt im HTML-Code Stile für das Bild festlegen, wie z.B. Farben, Ränder oder Abstände.
title: Dieses Attribute zeigt einen Text an, wenn jemand mit der Maus über das Bild geht.
alt: Dieses Attribute gibt eine alternative Beschreibung des Bildes an, die angezeigt wird, wenn das Bild nicht geladen werden kann.

<head>-Tag?

Dieser Bereich enthält Informationen über die Webseite, die nicht sichtbar sind, aber wichtig für das Funktionieren und das Aussehen der Seite sind ("Meta-Daten"). Zum Beispiel den Titel der Seite, der im Browser-Tab angezeigt wird oder Verknüpfungen zu externen Dateien.

Geht auch hier nicht zu detailliert darauf ein, eher wenn Nachfragen kommen.

Wo finde ich Styles im Cheatsheet?

Cheatsheet

Klicke im Menü auf "CSS":

2. INSPIRE ME

~verbleibende Zeit

Lasst die Schüler*innen nun die restliche Zeit programmieren und geht auf individuelle Fragen ein.
Wichtig dabei: Habt immer die einzelnen Dokumente und Projekte im Blick, in dem ihr diese in einem neuen Tab geöffnet habt.

Soll ich Styles weiter vertiefen?

Wenn eure Gruppe Interesse an Styles zeigt, kann es sich lohnen, noch tiefer auf das "stylesheet" (style.css) einzugehen.

Dies wird genutzt, um Styles zu verwalten, sodass man einen einmal festgelegten Style für ganz viele Tags benutzen kann.
Vergesst nicht, das Stylesheet in die index.html - Datei einzubinden
und den head Tag zu erklären.

<head>
    <link rel="stylesheet" href="style.css">
</head>

<head>-Tag?

Geht auch hier nicht zu detailliert darauf ein, eher wenn Nachfragen kommen.

3. Häufige Fragen

~verbleibende Zeit

Wünscht ihr euch hier Antworten zu häufigen Konzeptfragen und weitere Inspiration?
Wenn ja, dann kommentiert hier direkt, in dem ihr hier links neben diesen Text klickt. Dort erscheint eine Sprechblase und ihr könnt kommentieren.

Berufsorientierung und Feedback

~30 Minuten

In eurer Gruppe:

~5 min

Wenn ihr eurer Gruppe am Ende noch Feedback geben wollt, dann nehmt euch gerne jetzt Zeit dafür.
Fragt nach, ob jemand (in der Abschlussrunde im großen Plenum) vorstellen möchte, was ihr so gemacht habt.

Im Plenum:

~25 min

Auch die Berufsorientierung wird von der Team Inspiress oder dem Team Inspirer eingeleitet
In unserem Inspirer Handbuch findet ihr noch weitere Tipps für eine spannende Berufsorientierung
Hier erzählt ihr in einem Gespräch mit dem Team Inspirer oder der Team Inspiress davon, wie ihr in die IT gekommen seid und was euch daran Spaß macht.
Am Ende des Kurses wird den Schüler*innen die Möglichkeit gegeben, ihre Projekte vor der ganzen Klassen vorzustellen. Manchmal wollen das total viele, manchmal aber auch nicht so viel.
Nach der Projektvorstellung folgt noch das Live-Feedback der Schüler*innen, wo ihr dann auch direkt sehen könnt, wie der Kurs angekommen ist

Weitere Kurse?

Ihr möchtet noch mehr Schüler*innen begeistern!

Hier geht es zur Buchung und dem Inspirer Checkin.

← Scratch: Flappy Bird

Python Gaming: Code dein Spiel →