yourschool
HTML&CSS: Meine erste eigene Website
Python Gaming (Grundlagen): Code dein Spiel
Scratch: Pong
Scratch: Flappy Bird
Python IT-Security: Verschlüsselung
Bash IT-Security: Verschlüsselung
ALT: Meine erste Website in HTML&CSS
yourschoolPLUS
Classic

ALT: Meine erste Website in HTML&CSS

Das klare Verständnis über die Grundidee und den Ablauf unseres yourschool-Formates ist notwendige Voraussetzung zur Durchführung der Kurse. Bitte hole das jetzt nach, falls bei dir noch Fragen zur Grundidee aufkommen.

ALT: Meine erste Website in HTML&CSS

ACHTUNG: Dieses Konzept wurde erneuert --> hier entlang.


Was passiert heute?

Heute erstellen wir uns eine Website mit möglichst einfachen Mitteln. Ergebnisse, die aus diesem Kurs entstehen können, könnt ihr euch hier anschauen:
https://tyler-3.schoolhacker.repl.co/

Programmieren

Zeit: ~ 3h + 30 min Pause
Ort: Kleingruppe
Verantwortlich: Inspirer

Hallo Welt!

  • Teilt euren Bildschirm und erstellt den Grundaufbau eures HTML-Dokumentes.

  • Geht auf jeden Fall auf die absoluten Basics ein:

    • Was machen die Tags? -> Haben die Teilnehmenden Ideen, kommen sie vielleicht sogar von selbst drauf?
    • Wieso wird das so komisch eingerückt?
  • Lasst die Teilnehmenden gerne auch mit anderen Texten herumspielen. Lasst sie es vor allem selbst einmal schreiben, auch wenn das vielleicht ein bisschen dauern wird.

Lernziele

  • Grundverständnis von Tags
  • Was <head>, <body> und <title> machen

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
    </head>
    <body>
        <h1>Hallo Welt!</h1>
        <p>Oh, schön hier.</p>
    </body>
</html>

tags, tags, tags

Wie ja schon die Überschrift andeutet, werden wir hier versuchen, sie mit Tags vertraut zu machen. Erweitert euer Beispiel durch eine (zweite) Überschrift und lasst sie das bei sich reproduzieren. Macht danach das Gleiche für Absätze, Links, und Listen. Achtet darauf, das Tempo an die Gruppe anzupassen.

  • <h1></h1>..<h6></h6>
  • <p>
  • <a href="https://mozilla.org">Hier!<a/>
  • <ol>, <ul>, und <li>

Lernziel(e)

  • Mit eben diesen Elementen sinnvoll umgehen können

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
    </head>
    <body>
        <p>Ein Echo?</p>
        <h1>Hallo</h1>
        <h2>Hallo</h2>
        <h3>Hallo</h3>
        <h4>Hallo</h4>
        <h1>Welt!</h1>
        <h2>Welt!</h2>
        <h3>Welt!</h3>
        <h4>Welt!</h4>
        <p>Anscheinend. Und was ist mit dieser Seite? <a href="https://de.wikipedia.org/wiki/Website">hier</a>?</p>
        <ol>
            <li>Hm.</li>
            <li>Die</li>
            <li>Nicht.</li>
        </ol>
    </body>
</html>

Der Inspektor

Der Inspektor ist das Tool, das man in der Website-Entwicklung sehr oft benutzt. Mit ihm kann man sich bestehende Website ansehen und temporär ihren Code verändern.

Jetzt wird es spannend. Schnappt euch eine (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.

Artikel im Internet bieten sich zum Beispiel sehr gut an (witzige Headlines), aber auch Seiten, auf denen man Dinge kaufen kann (kostenlose Einkäufe? - oder sehr teure?).
Ganz besonders wichtig bleibt natürlich, dass die Teilnehmenden verstehen, was da passiert - nicht die Website selbst wird geändert, sondern nur ihre lokale Kopie davon.
Ideen:

Aber zurück zum Code.
oder schon in eine erste Pause? - schaut auf die Stimmung, es könnte sich lohnen.

Style, Teil 1

Soo, bis jetzt wurde am Inhalt einer Website herumgespielt - nun wenden wir uns dem Style der Website zu.
Das machen wir (zunächst) über Attribute im HTML. Ein Attribut haben die Teilnehmenden gerade schon gesehen, und zwar das hypertext reference-Attribut von <a>. Hier führen wir nun das style-Attribut ein, das man an HTML-Elemente anfügen kann.
Das geht so:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
    </head>
    <body>
        <h1 style="color: blue;">Hallo Welt!</h1>
        <p style="font-size: 10px">Oh, schön hier. Aber winzig.</p>
    </body>
</html>

Wahrscheinlich geht ihr am besten Schritt für Schritt, und mit folgenden (einfachen) CSS-Eigenschaften, vor:

  • font-size, color, font-weight
  • background-color
  • width, height

Und, wie immer: Weicht gerne von unserem Konzept ab, und lasst die Teilnehmenden damit ein bisschen herumspielen :)

Style, Teil 2 - Stylesheets

Jetzt werden wir professionell - zeigt den Kids, wie sie die Style-Attribute auslagern können, und was das bringt.

Lernziele

  • verstehen, was die Idee hinter einem Stylesheet ist (Auslagerung aller Styles + Abstraktion)
  • verstehen, wie ein style.css funktioniert - und wie es eingebunden wird.
  • ids (#) und Klassen (.) verstehen

Damit all das funktioniert, müsst ihr zunächst ein Stylesheet im <head> einbinden. Das geht so:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Hallo Welt!</h1>
        <p>Und hier ein Bild:</p>
        <img src="Bild.jpg"/>
        <p>Oh, schön hier.</p>
    </body>
</html>

Und jetzt kommt auch die style.css. Wenn der Link so aussieht, sollte sie in den gleichen Ordner kommen - ihr erstellt also in repl auf gleicher Ebene eine style.css mit folgendem (oder ähnlichem) Inhalt und lasst die Teilnehmenden raten, was passiert/passieren könnte.

1
2
3
4
5
6
7
8
9
p {
    background: lightblue;
}
.myClass {
    background: darkred;
}
#ganzSpeziell {
    background: limegreen;
}

Dann allerdings passiert erst einmal noch wenig. Denn ihr habt ja ganz vergessen, die ID und die Klasse auch im HTML hinzuzufügen. Macht gerne auch "absichtlich" diesen Fehler (oder macht auf eine andere Art und Weise deutlich, dass das wichtig ist), denn so können die Teilnehmenden das besser wiedererkennen, und es schneller selbstständig hinbekommen.
So könnte es nach einer Zuordnung von HTML-Tags zu CSS-Eigenschaften aussehen:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 class="myClass">Hallo Welt!</h1>
        <p>Und hier ein Bild:</p>
        <img src="Bild.jpg"/>
        <p class="myClass">Oh, schön hier.</p>
        <p id="ganzSpeziell">Oder?</p>
    </body>
</html>

Bilder & Videos

Und jetzt noch das, womit unsere Websites so richtig zum Leben erwachen können: Bilder (und gleich auch noch Videos).
Die können so eingebunden werden:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <title>Ohoo, ein Titel.</title>
    </head>
    <body>
        <h1>Hallo Welt!</h1>
        <p>Und hier ein Bild:</p>
        <img src="Bild.jpg"/>
        <p>Oh, schön hier.</p>
    </body>
</html>

Damit das auch klappt, müsst ihr natürlich das Bild mit genau diesem Namen in der gleichen Ebene des Dateisystems (in repl.it) ablegen.
Hier wichtig zu beachten: <img> ist einer der wenigen tags, der "sich selbst schließt", also bei dem alles innnerhalb der spitzen Klammern abspielt.

(Youtube-)Videos funktionieren folgendermaßen:
Ihr geht bei Youtube auf Rechtsklick auf das Video > Einbettungscode kopieren und dann fügt ihr ihn an der gewollten Stelle ein :)

Die erste eigene Website

Und jetzt kommt ...(Trommelwirbel)... das Endprojekt. Versucht, ab hier die Teilnehmenden so frei wie möglich atbeiten zu lassen, und seid mehr ein Coach, der ihre Fragen beantwortet, sie aber nicht allzu sehr beeinflusst. Normalerweise kommen nämlich so die coolsten Ideen zum Vorschein. Eine gute Referenz für HTML und CSS sind die W3Schools-HowTos - ebenso gibt es fertige Templates.
Ebenso gibt es auch einige frei zugängliche Cheat Sheets, so wie das hier. Dort findet ihr ebenso ein Template.

Hier ist vor allem wichtig, dass die Teilnehmenden merken, dass sie kreativ werden können (und dürfen) - dann kommen oft richtig gute Sachen dabei raus.

Haben eure Teilnehmenden wirklich gar keine Ideen? Oder hat ein*e Teilnehmer*in schon mehr Erfahrung? Dann können sie sehr gerne hiermit herumspielen, und vielleicht die Hintergrundbilder, die Geschichte, oder sogar die Animationen verändern:

Das Projekt hinter der Website könnt ihr euch als Zip herunterladen oder auf euren eigenen Repl.it-Account kopieren.

Hier ist es sinnvoll (auch, um die Website zu verstehen), einmal auf die sehr gute Dokumentation von Mozilla zu verweisen.

Da findet man für gewöhnlich alles, was man so braucht.
Inklusive Guides und weiteren Ressourcen auf anderen Seiten, auf denen man sehr viel lernen kann :)

Und das wars! :)

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
  • Die Teilnehmenden, die möchten, stellen ihre Projekte vor
  • Die Berufsorientierung wird von der Team Inspiress oder dem Team Inspirer eingeleitet
  • 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.
  • In unserem Inspirer Handbuch findet ihr noch weitere Tipps für eine spannende Berufsorientierung
  • (Wenn erwünscht, bekommt der*die Lehrer*in kurz das Wort)
  • Feedbacklinks werden von den Team-Inspirern geteilt