Basics & Tooling

HTML · CSS · JavaScript

Dozent: Daniel Schlecht

Kurstag 1 - Basics & Tooling - Webentwicklung Grundlagen

Lernziele 🎯

Eine einfache HTML-Seite mit Überschrift, Absatz, Link und Bild erstellen (K3)
Varianten der Gestaltung beurteilen - Lesbarkeit, Usability, Wartbarkeit (K5)
Die JavaScript-Laufzeitumgebung starten und ein HelloWorld-Programm schreiben (K3)
Variablen korrekt deklarieren und verwenden (K3)

Facts zum Internet

Es wurde in den 1990er Jahren von Tim Berners-Lee entwickelt. HTML ermöglicht das Verlinken von Webseiten, wodurch das Internet, wie wir es heute kennen, entstand. Das Internet ist ein globales Netzwerk, das Milliarden von Nutzern weltweit verbindet.

Was ist HTML?

HTML (HyperText Markup Language) ist die Struktur-Sprache des Webs.

Definiert Inhalt und Aufbau einer Webseite
Wird vom Browser interpretiert
Nutzt sogenannte Tags

Grundstruktur eines
HTML-Dokuments

Grundstruktur eines HTML-Dokuments


    <!DOCTYPE html>
    <html lang="de">
      <head>
        <meta charset="UTF-8">
        <title>Meine erste Webseite</title>
      </head>
      <body>
        <h1>Hallo Welt!</h1>
        <p>Dies ist mein erster Absatz.</p>
      </body>
    </html>

Übung 1

🧩 Erstelle eine einfache Webseite:

Titel: „Meine erste Webseite“
Eine Überschrift, zwei Absätze
Ein Bild und einen Link

Speichere diese als index.html und
öffne sie mit dem Browser.

Gestaltung von HTML

⚠️ Schlecht

Zu viele verschachtelte <div>s
Inline-Styling oder -Scripts
Unklare Navigation oder unlesbarer Text
Fehlende Alt-Texte bei Bildern

💡 Gut

Klare Struktur mit semantischen Tags
Gute Lesbarkeit (Abstände, Schriftgrößen)
Responsive Design (mobile-first)
Trennung von Struktur (HTML), Stil (CSS), Logik (JS)

Laufzeitumgebung für JavaScript

Sprache für Interaktivität im Browser
Oder auf einem Server mit:
- Node.js
- DENO
- V8
- QuickJS

Erste Schritte 🥚

🧩 Teste dein erstes Script:


console.log("Hello World!");

Öffne die Browserkonsole mit F12 (Tab „Konsole“)

Variablen Typen

Variablen speichern Daten, die im Programm weiterverwendet werden können.


let name = "Alice";
const pi = 3.14159;
var age = 25;

console.log(name);

let - veränderbar, Blockscope
const - unveränderlich
var - veraltet (vermeiden!)

Blockscope und Variablen

Im Block Scope sind let- und const-Variablen nur innerhalb ihres Blocks sichtbar.


var gefaehrliche_globale_variable = 123;
{
    const konstante_variable = 1.6181;
    console.log("phi ist: " + konstante_variable);

    let lokale_variable = 135;
    console.log(lokale_variable);
}
console.log(gefaehrliche_globale_variable);
//console.log(konstante_variable);
//console.log(lokale_variable);

Übung 2

🧩 Schreibe ein JavaScript-Programm, das Folgendes ausgibt:

„Hello World!“ in der Konsole
Deinen Namen in einer Variable
Eine Berechnung: z. B. 65 - alter


let name = "Lisa";
console.log("Hello World!");
console.log("Mein Name ist " + name);
console.log("65 - 20 = " + (65 - 20));

Zusammenfassung

HTML = Struktur, CSS = Stil, JS = Verhalten
Semantik und gute Gestaltung sind entscheidend
JS ermöglicht dynamische Inhalte
Variablen speichern Daten für dein Programm

Nächster Kurstag

Thema: Building Blocks (HTML, CSS, JS)
mit Struktur, Stil & Logik

Wir lernen, wie man Webseiten
visuell gestaltet und interaktiv macht.

Fragen?

Was ist noch unklar?
Wer möchte sein Ergebnis zeigen?