Eine Seite voller Links

„Ten years ago every web site had a section of external links because people felt it was their personal responsibility to configure the environment and build the infrastructure … A site was not complete without links to other sites.“ — Olia Lialina, 2005

Vorbereitung (1)

Lesen: Laurel Schwulst: My website is a shifting house next to a river of knowledge. What could yours be? (2018)

Vorbereitung (2)

• Einen Account auf codepen anlegen.

Aufgabe

• Legt auf CodePen ein neues Pen an
• Gebt ihm einen Namen und speichert es ab
• Wählt bewusst 1-2 Absätze aus Laurel Schwulsts Essay aus
• Fügt diese Absätze in den HTML-Bereich des Pens ein
• Umschließt jeden, oder den einen Absatz, mit dem <p>-Tag</p>.
• Wählt in eurem Textfragment Wörter (oder Wortreihen) aus, die gut als Links funktionieren könnten (Was macht neugierig zu klicken? Womit könnt ihr weitererzählen)
• Umschließt die Wörter mit dem <a href="...">-Tag </a>.
• Findet Dinge (s.u.), die ihr mit euren Wörtern verlinkt, und fügt die Adressen in euer HTML (href="...") ein.
• Verlinkt die Quelle eures Textfragments.
• Vergesst nicht, immer wieder zu speichern!

Was kann verlinkt werden?

• Webseiten
• Bilder
• Videos
• Klänge
• Orte auf Google Maps
• etc.

Was erzählen die Links?

• Verstärkt oder illustriert der Link das Wort?
• Überrascht der Link, macht einen neuen Zusammenhang auf?
• Führt der Link weiter, lädt er zum weiterlesen / -bewegen ein?

CodePens

• einfacher Link
• einfacher Link, öffnet in neuem Tab
• ein Bild verlinken
• Einfaches Textbeispiel

CodePens, nur Fortgeschrittene

• neues Fenster
• neues Fenster, mit Größe und Position
• mehrere neue Fenster gleichzeitig – Achtung, ein bisschen voraussetzungsreich. Hinweise innerhalb des Beispiels beachten

Fortgeschritten

• Seite mit CSS gestalten

Abgabe

• Ihr schenkt am Ende eure Seite voller Links einer anderen Person im Kurs. Dafür werdet ihr die Seite von CodePen herunterladen und der Person übergeben.