Übung: hack

Kontext

Webseiten sind textbasierte Bauanleitungen

Technisch betrachtet sind Webseiten nichts anderes als textbasierte Bauanleitungen. Diese Bauanleitungen enthalten den Inhalt der Webseite und beschreiben, wie die Webseite aussehen und funktionieren soll.

Vom Text zur Darstellung

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

Bauanleitung 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, verändert sich die Webseite direkt auf dem Bildschirm.

Schade: Diese Änderungen erscheinen nur in unserem Browser. Die Originaldatei auf dem Server bleibt unverändert.

Aufgabe

Wir wollen Webseiten in unserem Browser „hacken“ bzw. ihre Baunanleitungen verändern.

Schritte:

• Webseite im Browser öffnen
• Web Inspector öffnen und Änderung(en) vornehmen
• Screenshot machen

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;
• filter: blur(10px);