Hack

Kontext

Webseiten sind Bauanleitungen aus Text

Technisch betrachtet sind Webseiten nichts anderes als textbasierte Bauanleitungen. Diese Bauanleitungen sind reine Textdateien, die beschreiben, wie die Webseite aussehen und funktionieren soll – ähnlich wie ein Rezept.

Vom Text zur Darstellung

Wenn wir eine Webseite aufrufen, lädt der Browser diese Textdateien herunter und interpretiert sie: Er liest die Anweisungen und baut daraus die sichtbare Webseite zusammen.

Baupanleitung und fertige Webseite gleichzeitig

Das Besondere: Im Browser existieren Bauanleitung und fertige Webseite gleichzeitig nebeneinander. Mit dem Web Inspector können wir direkt in die Bauanleitung eingreifen – und der Browser baut sofort neu. Ändern wir einen Text oder eine Eigenschaft im Code, erscheint die Webseite sofort anders auf dem Bildschirm. Schade: Diese Änderungen bleiben nur in unserem Browser. Die Originaldatei auf dem Server bleibt unverändert.

Aufgabe

Wir wollen, ohne groß etwas zu verstehen, Webseiten in unserem Browser „hacken“ bzw., um im Bild zu bleiben, ihr Baunanleitungen verändern.

Schritte:

• Webseiten im Browser öffnen
• Web Inspector öffnen und Änderung(en) vornehmen
• Screenshot machen, falls happy

Einige mögliche Eigenschaften, die geändert werden können (alles Beispielwerte):

• font-size: 400px;
• letter-spacing: 10px;
• line-height: 3;
• color: yellow;
• background-color: red;
• border: 10px solid red;
• border-radius: 100px;
• padding: 100px;
• margin: 100px;
• box-shadow: 10px 10px 10px black;