DataViz & Storytelling

Erscheinungsbild

Grundlagen: DataViz & Web ​

Slides ​

📊 Theorie

Der Mehrwert der Data-Visualisierung im Web-Kontext

💻 Web-Lab

Grundlagen Internet/Web/HTML/CSS

Setup: Visual Studio Code ​

Für die praktischen Übungen in dieser Vorlesung verwenden wir zunächst Visual Studio Code.

  • Visual Studio Code ist ein moderner, leichtgewichtiger Editor für Programmierung und Webentwicklung. Er unterstützt HTML, CSS und JavaScript und lässt sich durch Erweiterungen flexibel anpassen.

  • Wir nutzen VS Code, um unsere Web-Lab Projekte zu erstellen, zu bearbeiten und direkt im Browser zu testen.

Übung: Erste eigene HTML-Seite ​

In dieser Übung erstellen wir gemeinsam eine vollständige HTML-Seite aus einem vorgegebenen Text – ohne CSS, nur Struktur.

Schritt 1 – Projektordner anlegen ​

Einen neuen Ordner auf dem Rechner anlegen, z. B. weblab-01. Diesen Ordner in VS Code öffnen über File → Open Folder.

Schritt 2 – HTML-Datei erstellen ​

Im Ordner eine neue Datei anlegen: index.html

Schritt 3 – Grundgerüst mit Emmet ​

In die leere Datei klicken, ! tippen und drücken:

SystemTastenkürzel
Mac! + Tab
Windows! + Tab

Emmet generiert automatisch das komplette HTML5-Grundgerüst:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Sprache anpassen

lang="en" zu lang="de" ändern und den <title> durch einen passenden Namen ersetzen.

Schritt 4 – Inhalt einfügen ​

Die Textdatei herunterladen und den Inhalt semantisch in HTML übertragen. Folgende Tags kommen zum Einsatz:

  • <main> – umschließt den gesamten Seiteninhalt
  • <h1> – für den Haupttitel
  • <section> – für jeden der drei Akte
  • <h2> – für die Akt-Überschriften
  • <p> – für Absätze
  • <ul> und <li> – für die Listen
  • <a href="..."> – für die Links

📄 Textvorlage

inhalt.txt

📦 Ergebnis

01_weblab.zip