ALT: Meine erste Website in HTML&CSS
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
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> |
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> |
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.
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:
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> |
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> |
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; |
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> |
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> |
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.
Und das wars! :)
Berufsorientierung und Feedback
~30 Minuten
- 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.
- 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