🌐 Thema 9: Sprachen des Webs

Überblick

In diesem Themenbereich geht es darum, wie Webseiten technisch aufgebaut sind. Eine Webseite ist nicht einfach nur das, was du im Browser siehst. Dahinter stehen mehrere Sprachen und Konzepte, die unterschiedliche Aufgaben übernehmen: HTML beschreibt Struktur und Inhalt, CSS gestaltet das Aussehen, und JavaScript ermöglicht Verhalten und Interaktion.

Du solltest nach der Wiederholung erklären können,

• wofür HTML, CSS und JavaScript jeweils eingesetzt werden,
• wie ein einfaches HTML-Dokument aufgebaut ist,
• was Tags, Elemente, Attribute und Attributwerte sind,
• wie Überschriften, Absätze, Listen, Bilder, Links und Tabellen in HTML dargestellt werden,
• warum HTML eine Auszeichnungssprache und keine Programmiersprache im engeren Sinn ist,
• wie CSS-Regeln mit Selektor, Eigenschaft und Wert aufgebaut sind,
• wie CSS direkt im HTML-Code, im <style>-Bereich oder als externe Datei eingebunden werden kann,
• worin sich Tag-, Klassen- und ID-Selektoren unterscheiden,
• warum responsives Design für moderne Webseiten wichtig ist,
• wie JavaScript auf Ereignisse reagieren und Inhalte einer Webseite verändern kann,
• warum JavaScript als Programmiersprache gilt,
• wie man HTML-, CSS- und JavaScript-Anteile in einem Codeausschnitt voneinander unterscheidet,
• warum clientseitiger Code kritisch geprüft werden muss,
• welche Chancen und Grenzen CMS-Systeme und Website-Baukästen haben,
• und warum Webgrundlagen auch dann relevant bleiben, wenn viele Webseiten heute mit grafischen Tools oder KI-Unterstützung erstellt werden.

Leitfrage

Wie arbeiten HTML, CSS und JavaScript zusammen, damit aus einer Textdatei eine strukturierte, gestaltete und interaktive Webseite wird – und warum hilft dieses Verständnis auch beim kritischen Umgang mit modernen Webtools?

Was ist eine Webseite?

Eine Webseite ist ein Dokument, das von einem Webbrowser gelesen und angezeigt wird. Solche Dokumente bestehen meist aus HTML-Code und werden oft durch CSS-Dateien, JavaScript-Code, Bilder, Videos oder andere Medien ergänzt.

Eine einzelne Seite kann zum Beispiel kontakt.html heißen. Eine gesamte Website besteht aus mehreren zusammengehörigen Webseiten, etwa Startseite, Kontaktseite, Bildergalerie und Impressum.

Begriff	Bedeutung	Beispiel
Webseite	einzelnes Webdokument	team.html
Website	Sammlung zusammengehöriger Webseiten	Schulhomepage mit mehreren Unterseiten
Webbrowser	Programm zum Anzeigen von Webseiten	Firefox, Chrome, Edge, Safari
Webserver	System, das Webseiten bereitstellt	Server einer Schule oder eines Hosting-Anbieters

Die Startseite einer Website heißt häufig index.html. Viele Webserver suchen automatisch nach einer Datei mit diesem Namen, wenn nur ein Ordner oder eine Domain aufgerufen wird.

Merksatz

Der Browser zeigt nicht einfach „eine fertige Seite“ an. Er liest Dateien, interpretiert HTML, lädt zusätzliche Ressourcen und baut daraus die sichtbare Webseite.

Internet und World Wide Web

Die Begriffe Internet und World Wide Web werden im Alltag oft gleich verwendet, bedeuten aber nicht dasselbe.

Begriff	Bedeutung
Internet	weltweites Netzwerk aus Geräten, Servern, Leitungen, Funkverbindungen und Routern
World Wide Web	Dienst im Internet, der Webseiten über Links miteinander verbindet
Hyperlink	anklickbarer Verweis auf ein anderes Ziel

Das Web ist also nur ein Teil des Internets. Auch E-Mail, Messenger, Videokonferenzen oder Dateiübertragungen nutzen das Internet, sind aber nicht automatisch Webseiten.

Die drei zentralen Websprachen

HTML, CSS und JavaScript erfüllen unterschiedliche Aufgaben. Diese Trennung ist wichtig, weil Webseiten dadurch übersichtlicher, leichter wartbar und besser erweiterbar werden.

Sprache	Hauptaufgabe	Typisches Beispiel
HTML	Struktur und Bedeutung von Inhalten	Überschrift, Absatz, Liste, Bild, Link
CSS	Gestaltung und Layout	Farbe, Schriftgröße, Abstand, Ausrichtung
JavaScript	Verhalten und Interaktion	Button-Klick, Berechnung, Formularprüfung

Merksatz

HTML beschreibt, was auf einer Webseite vorkommt. CSS beschreibt, wie es aussieht. JavaScript beschreibt, was passieren soll, wenn etwas geschieht.

Diese Trennung ist nicht nur eine technische Konvention. Sie hilft dir auch beim Denken über Webseiten: Wenn eine Überschrift falsch aussieht, liegt das eher an CSS. Wenn sie gar nicht als Überschrift ausgezeichnet ist, liegt das an HTML. Wenn ein Button nichts tut, betrifft das meist JavaScript.

HTML: Struktur und Inhalt

HTML steht für Hypertext Markup Language. Es handelt sich um eine Auszeichnungssprache. Das bedeutet: HTML markiert Inhalte und gibt ihnen eine Bedeutung. Ein Text kann als Überschrift, Absatz, Listeneintrag, Link oder Bildbeschreibung ausgezeichnet werden.

„Hypertext“ bedeutet, dass Dokumente über Links miteinander verbunden werden können. Genau dieses Prinzip macht das World Wide Web aus.

Grundstruktur eines HTML-Dokuments

Ein einfaches HTML-Dokument besteht aus einer festen Grundstruktur:

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

Bereich	Aufgabe
<!DOCTYPE html>	teilt dem Browser mit, dass modernes HTML verwendet wird
<html>	umschließt das gesamte HTML-Dokument
<head>	enthält Informationen über die Seite, die meist nicht direkt sichtbar sind
<meta charset="UTF-8">	sorgt dafür, dass Sonderzeichen korrekt dargestellt werden können
<title>	legt den Titel im Browser-Tab fest
<body>	enthält den sichtbaren Inhalt der Webseite

Stolperstelle

Der sichtbare Inhalt gehört grundsätzlich in den <body>. Informationen für den Browser, der Seitentitel und Verweise auf CSS-Dateien stehen im <head>.

Tags, Elemente und Attribute

HTML arbeitet mit Tags. Ein typisches Element besteht aus Start-Tag, Inhalt und End-Tag.

<p>Das ist ein Absatz.</p>

Teil	Beispiel	Bedeutung
Start-Tag	<p>	beginnt ein Element
Inhalt	Das ist ein Absatz.	sichtbarer oder verarbeiteter Inhalt
End-Tag	</p>	beendet ein Element
Element	<p>Das ist ein Absatz.</p>	gesamte Einheit aus Tags und Inhalt

Attribute stehen im Start-Tag und geben zusätzliche Informationen an.

<img src="bilder/logo.png" alt="Logo der Projektseite">

Hier ist src das Attribut für die Bildquelle. alt enthält einen Alternativtext, falls das Bild nicht geladen werden kann oder von einem Screenreader vorgelesen wird.

Merksatz

Attribute folgen meist dem Muster name="wert" und stehen im Start-Tag eines Elements.

Häufige HTML-Elemente

Zweck	HTML-Beispiel	Erklärung
Hauptüberschrift	<h1>Titel</h1>	wichtigste Überschrift der Seite
Unterüberschrift	<h2>Abschnitt</h2>	gliedert Inhalte
Absatz	<p>Text</p>	markiert Fließtext
starke Hervorhebung	<strong>wichtig</strong>	inhaltlich wichtige Stelle
Betonung	<em>betont</em>	betonte Stelle
ungeordnete Liste	<ul><li>Punkt</li></ul>	Aufzählung ohne feste Reihenfolge
geordnete Liste	<ol><li>Schritt</li></ol>	Liste mit Reihenfolge
Bild	<img src="bild.jpg" alt="Beschreibung">	bindet ein Bild ein
Link	<a href="seite.html">Weiter</a>	verweist auf ein Ziel
Tabelle	<table>...</table>	stellt Daten tabellarisch dar

Die Elemente <br>, <hr> und <img> sind leere Elemente. Sie haben keinen Inhalt zwischen Start- und End-Tag und benötigen daher kein eigenes End-Tag.

Semantisches HTML

HTML soll nicht nur Text sichtbar machen. Gute HTML-Struktur zeigt auch, welche Bedeutung ein Inhalt hat. Eine Überschrift sollte daher nicht nur groß und fett aussehen, sondern mit einem passenden Überschriften-Tag ausgezeichnet sein.

Schlecht:

<p style="font-size: 32px; font-weight: bold;">Projektübersicht</p>

Besser:

<h1>Projektübersicht</h1>

Warum ist das besser?

• Der Browser erkennt die Struktur.
• Suchmaschinen können Inhalte besser einordnen.
• Screenreader können die Seite sinnvoll vorlesen.
• CSS kann Überschriften gezielt gestalten.
• Der Code bleibt besser wartbar.

Stolperstelle

HTML ist nicht dafür gedacht, jedes Aussehen direkt im Tag festzulegen. Für Gestaltung ist CSS zuständig. HTML sollte zuerst Struktur und Bedeutung sauber beschreiben.

Sauberer HTML-Code

HTML ist im Browser oft fehlertolerant. Das bedeutet: Der Browser versucht, auch fehlerhaften Code irgendwie darzustellen. Für gutes Arbeiten reicht das aber nicht. Sauberer Code ist leichter zu verstehen, zu erweitern und zu korrigieren.

Verschachtelung

HTML-Elemente können ineinander verschachtelt werden. Dabei gilt: Das zuletzt geöffnete Element wird zuerst geschlossen.

Richtig:

<p>Die <strong>wichtigsten Inhalte</strong> stehen im Überblick.</p>

Falsch:

<p>Die <strong>wichtigsten Inhalte</p></strong>

Im falschen Beispiel wird der Absatz geschlossen, bevor die Hervorhebung beendet wurde. Dadurch entsteht eine unklare Struktur.

Einrückung

Leerzeichen und Zeilenumbrüche verändern die Darstellung meist nicht. Für dich als Entwickler·in sind sie trotzdem wichtig, weil sie die Struktur sichtbar machen.

<body>
  <section>
    <h2>Termine</h2>
    <ul>
      <li>Workshop</li>
      <li>Projektpräsentation</li>
    </ul>
  </section>
</body>

Die Einrückung zeigt: Die Liste gehört zum Abschnitt, und die Listeneinträge gehören zur Liste.

Kommentare

Kommentare sind Notizen im Code. Sie werden im Browser nicht sichtbar angezeigt.

<!-- Dieser Abschnitt enthält die Navigation -->
<nav>
  <a href="index.html">Start</a>
</nav>

Kommentare helfen beim Arbeiten, sollten aber keine Passwörter, Zugangsdaten oder vertraulichen Informationen enthalten. Im Seitenquelltext sind sie weiterhin sichtbar.

Links, Bilder und Pfade

Links verbinden Webseiten miteinander. Das zentrale Element dafür ist <a> mit dem Attribut href.

<a href="kontakt.html">Kontakt aufnehmen</a>

Ziel	Beispiel
lokale Seite	<a href="team.html">Team</a>
externe Webseite	<a href="https://example.org">Beispielseite</a>
Sprungmarke	<a href="#faq">Zu den Fragen</a>
E-Mail	<a href="mailto:info@example.org">E-Mail schreiben</a>

Ein Bild wird mit <img> eingefügt. Das Attribut src verweist auf die Bilddatei. Das Attribut alt beschreibt das Bild.

<img src="bilder/ausstellung.jpg" alt="Plakat einer digitalen Ausstellung">

Relative Pfade

Wenn HTML-Datei und Bild im selben Ordner liegen, reicht der Dateiname:

<img src="foto.jpg" alt="Projektfoto">

Liegt das Bild in einem Unterordner, muss der Ordner angegeben werden:

<img src="images/foto.jpg" alt="Projektfoto">

Stolperstelle

Wenn ein Bild nicht angezeigt wird, liegt es oft nicht am <img>-Tag selbst, sondern am Pfad: Dateiname, Ordnername, Groß- und Kleinschreibung oder Dateiendung stimmen nicht.

Tabellen in HTML

Tabellen sind für tabellarische Daten gedacht, nicht für das gesamte Seitenlayout. Eine einfache Tabelle besteht aus Tabellenzeilen und Zellen.

<table>
  <tr>
    <th>Sprache</th>
    <th>Aufgabe</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Struktur</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Gestaltung</td>
  </tr>
</table>

Element	Bedeutung
<table>	gesamte Tabelle
<tr>	Tabellenzeile
<th>	Überschriftenzelle
<td>	normale Datenzelle

Mit colspan und rowspan können Zellen über mehrere Spalten oder Zeilen reichen. Das ist nützlich, sollte aber sparsam eingesetzt werden, weil komplexe Tabellen schnell unübersichtlich werden.

CSS: Gestaltung vom Inhalt trennen

CSS steht für Cascading Style Sheets. Mit CSS legst du fest, wie HTML-Elemente aussehen: Farben, Schriftgrößen, Abstände, Rahmen, Ausrichtung, Hintergrundfarben und Layout.

Eine CSS-Regel besteht aus Selektor und Deklarationsblock.

h1 {
  color: darkblue;
  text-align: center;
  font-size: 24px;
}

Teil	Bedeutung
h1	Selektor: Welche Elemente werden gestaltet?
{ ... }	Deklarationsblock
color	Eigenschaft
darkblue	Wert
;	beendet eine Deklaration

Merksatz

CSS-Regeln folgen meist dem Muster: Selektor auswählen, Eigenschaft festlegen, Wert zuweisen.

CSS einbinden

CSS kann auf drei Arten eingebunden werden.

Inline-CSS steht direkt im HTML-Tag:

<p style="color: black; font-size: 16px;">Ein Absatz.</p>

Das ist für kurze Tests praktisch, wird aber schnell unübersichtlich.

Internes CSS steht im <style>-Bereich des HTML-Dokuments:

<head>
  <style>
    p {
      color: black;
      font-size: 16px;
    }
  </style>
</head>

Das eignet sich für kleine Einzelseiten.

Externes CSS wird in eine eigene Datei ausgelagert:

<head>
  <link rel="stylesheet" href="style.css">
</head>

In der Datei style.css steht dann zum Beispiel:

body {
  background-color: lightgray;
}

h1 {
  text-align: center;
  font-size: 24px;
  color: darkblue;
}

p {
  text-align: left;
  font-size: 16px;
  color: black;
}

Merksatz

Für größere Projekte ist eine externe CSS-Datei meist am saubersten, weil Struktur und Gestaltung getrennt bleiben.

Selektoren: Tag, Klasse und ID

CSS muss wissen, worauf eine Regel angewendet werden soll. Dafür gibt es Selektoren.

Selektor	Beispiel	Wirkung
Tag-Selektor	p	alle Absätze
Klassen-Selektor	.hinweis	alle Elemente mit class="hinweis"
ID-Selektor	#start	ein bestimmtes Element mit id="start"

HTML:

<p class="hinweis">Bitte beachte die Öffnungszeiten.</p>
<p id="start">Willkommen auf der Startseite.</p>

CSS:

.hinweis {
  color: darkgreen;
}

#start {
  font-size: 20px;
}

Klassen werden verwendet, wenn mehrere Elemente gleich gestaltet werden sollen. IDs sollten eindeutig sein und nur einmal pro Seite vorkommen.

Farben, Größen und Abstände

Farben können in CSS mit Farbnamen, HEX-Werten oder RGB-Werten angegeben werden.

body {
  background-color: lightgray;
}

h1 {
  color: #003366;
}

p {
  color: rgb(0, 0, 0);
}

Für Abstände und Rahmen sind drei Begriffe besonders wichtig:

Eigenschaft	Bedeutung
padding	Innenabstand zwischen Inhalt und Rahmen
border	Rahmen eines Elements
margin	Außenabstand zu anderen Elementen

.karte {
  margin: 12px;
  padding: 16px;
  border: 2px solid gray;
}

Merksatz

padding liegt innen, margin liegt außen. Der Rahmen border liegt dazwischen.

Responsives Design

Webseiten werden auf sehr unterschiedlichen Geräten angesehen: Smartphone, Tablet, Laptop, großer Bildschirm. Responsives Design bedeutet, dass sich eine Webseite an verschiedene Bildschirmgrößen anpasst.

Dazu gehören zum Beispiel:

• flexible Breiten statt starrer Pixelwerte,
• Bilder, die nicht über den Bildschirm hinausragen,
• Layouts, die sich bei kleinen Displays untereinander statt nebeneinander anordnen,
• gut lesbare Schriftgrößen,
• ausreichend große Buttons und Links für Touchscreens.

Ein einfaches Beispiel:

img {
  max-width: 100%;
  height: auto;
}

Damit wird ein Bild höchstens so breit wie sein umgebendes Element. Die Höhe passt sich automatisch an, sodass das Bild nicht verzerrt wird.

Stolperstelle

Ein Bild mit fester Breite, zum Beispiel width: 900px, kann auf kleinen Smartphone-Bildschirmen zu breit sein. Mit max-width: 100% bleibt es flexibler.

JavaScript: Verhalten und Interaktion

JavaScript ist eine Programmiersprache, die im Browser ausgeführt werden kann. Während HTML Inhalte strukturiert und CSS sie gestaltet, kann JavaScript auf Ereignisse reagieren, Inhalte verändern und Abläufe steuern. Dadurch wird aus einer statischen Webseite oft eine interaktive Anwendung.

Moderne Webseiten bestehen häufig nicht mehr nur aus mehreren fertig geladenen Dokumenten. Viele Seiten reagieren sofort auf Eingaben, laden Inhalte nach, prüfen Formulare, öffnen Menüs, zeigen Karten, filtern Produkte, aktualisieren Diagramme oder führen kleine Berechnungen direkt im Browser aus. Genau hier spielt JavaScript eine zentrale Rolle.

Typische Einsatzmöglichkeiten sind:

• Formulare prüfen, bevor Daten abgeschickt werden,
• Buttons, Menüs und Eingabefelder reagieren lassen,
• Inhalte ein- oder ausblenden,
• Werte berechnen,
• Animationen steuern,
• Daten von Servern nachladen, ohne die ganze Seite neu zu laden,
• interaktive Karten, Diagramme, Quizze oder Spiele ermöglichen,
• Benutzeroberflächen von Web-Apps steuern.

Merksatz

JavaScript ist heute eine Schlüsseltechnologie des Webs, weil viele Webseiten nicht nur Inhalte anzeigen, sondern wie Anwendungen funktionieren.

Ein einfaches Beispiel:

<p id="ausgabe">Noch nichts passiert.</p>
<button onclick="zeigeText()">Klick mich</button>

<script>
  function zeigeText() {
    document.getElementById("ausgabe").innerText = "Der Button wurde geklickt.";
  }
</script>

Was passiert hier?

1. Der Absatz hat die ID ausgabe.
2. Der Button ruft beim Klicken die Funktion zeigeText() auf.
3. JavaScript sucht das Element mit der ID ausgabe.
4. Der Text dieses Elements wird verändert.

Warum JavaScript eine Programmiersprache ist

JavaScript gilt als Programmiersprache, weil damit Abläufe formuliert werden können. Es gibt unter anderem:

• Variablen,
• Funktionen,
• Bedingungen,
• Schleifen,
• Berechnungen,
• Ereignisbehandlung,
• Zugriff auf Elemente der Webseite.

HTML und CSS beschreiben dagegen Struktur und Gestaltung. Sie enthalten keine Programmlogik im gleichen Sinn.

Sprache	Kann klassische Programmlogik formulieren?	Hauptaufgabe
HTML	nein	Struktur und Bedeutung
CSS	nein, nur Gestaltung und Regeln zur Darstellung	Aussehen und Layout
JavaScript	ja	Interaktion und Verhalten

DOM: Wie JavaScript die Webseite verändert

Wenn ein Browser eine HTML-Datei lädt, baut er daraus eine innere Baumstruktur auf: das Document Object Model, kurz DOM. JavaScript kann auf diese Struktur zugreifen.

Vereinfacht kann man sich das so vorstellen:

Dokument
└─ html
   ├─ head
   │  └─ title
   └─ body
      ├─ h1
      ├─ p
      └─ button

Mit JavaScript kann man DOM-Elemente suchen und verändern.

const feld = document.getElementById("status");
feld.innerText = "online";

Merksatz

JavaScript verändert nicht einfach „die Datei“, sondern die aktuell im Browser aufgebaute Darstellung der Webseite.

JavaScript in heutiger Webentwicklung

In vielen modernen Projekten ist JavaScript nicht nur eine kleine Ergänzung. Ganze Benutzeroberflächen können stark von JavaScript abhängen. Beispiele sind Online-Texteditoren, Lernplattformen, Kartenanwendungen, Mediatheken, Messenger im Browser oder interaktive Dashboards.

Das bedeutet aber nicht, dass HTML und CSS unwichtig werden. Auch eine stark interaktive Seite braucht eine sinnvolle Struktur, zugängliche Inhalte und eine Gestaltung, die auf verschiedenen Geräten funktioniert. JavaScript baut oft auf HTML und CSS auf: Es sucht Elemente, verändert Klassen, erzeugt neue Inhalte oder reagiert auf Eingaben.

Ein typisches Zusammenspiel sieht so aus:

Aufgabe	Zuständige Websprache	Beispiel
Inhalt bereitstellen	HTML	Eingabefeld, Button, Ergebnisbereich
Aussehen festlegen	CSS	Abstände, Farben, responsives Layout
Verhalten steuern	JavaScript	Klick auswerten, Ergebnis berechnen, Text ändern

Stolperstelle

Wenn eine Webseite ohne JavaScript gar nicht mehr sinnvoll nutzbar ist, kann das für Barrierefreiheit, Ladezeit und Fehlersuche problematisch werden. Gute Webentwicklung achtet daher darauf, Struktur, Gestaltung und Verhalten bewusst zu trennen.

Quellcode kritisch lesen

Eine Webseite kann professionell aussehen und trotzdem irreführend sein. Besonders bei JavaScript ist wichtig: Code, der im Browser läuft, kann grundsätzlich angesehen, verändert oder manipuliert werden.

Stell dir eine Webseite vor, die eine angebliche Zahl aktueller Unterstützungen anzeigt:

<p>Aktuelle Unterstützungen: <span id="zahl">0</span></p>

<script>
  function aktualisieren() {
    const zufall = Math.floor(Math.random() * 8) + 2;
    document.getElementById("zahl").innerText = zufall * 37;
    setTimeout(aktualisieren, 1200);
  }

  aktualisieren();
</script>

Auf den ersten Blick wirkt es so, als würde eine echte Statistik angezeigt. Tatsächlich wird aber nur im Browser immer wieder eine neue Zahl berechnet. Es gibt keinen Hinweis darauf, dass die Zahl von einem Server stammt oder echte Daten auswertet.

Woran erkennt man das?

• Die Zahl wird mit Math.random() erzeugt.
• Sie wird direkt mit innerText in die Seite geschrieben.
• Es gibt keine Datenbankabfrage.
• Es gibt keine überprüfbare Quelle für die Zahl.
• Die Berechnung findet clientseitig im Browser statt.

Stolperstelle

Eine Zahl auf einer Webseite ist nicht automatisch eine echte Messung. Wenn JavaScript im Browser Zufallswerte erzeugt oder Inhalte nur lokal verändert, wirkt die Anzeige zwar dynamisch, muss aber nicht glaubwürdig sein.

📝 Übung: Codeanteile unterscheiden

Analysiere den folgenden Ausschnitt:

<p class="meldung">Heute online: <span id="wert">0</span> Besucher·innen</p>

<script>
  function anzeigen() {
    let wert = Math.round(Math.random() * 300) + 50;
    document.getElementById("wert").innerText = wert;
  }

  setInterval(anzeigen, 2000);
</script>

Bearbeite folgende Aufgaben:

1. Markiere, welche Teile HTML sind.
2. Erkläre, welche Teile JavaScript sind.
3. Beschreibe, was die Funktion anzeigen() macht.
4. Beurteile, ob die angezeigte Zahl als echte Besucher·innenzahl gelten kann.

Lösungshinweis

HTML sind der Absatz <p>, das <span>-Element und die Attribute class und id. JavaScript steht im <script>-Block.

Die Funktion erzeugt mit Math.random() einen Zufallswert, rundet ihn, addiert 50 und schreibt das Ergebnis in das Element mit der ID wert.

Als echte Besucher·innenzahl ist das nicht glaubwürdig, weil keine Datenbank, kein Server und keine echte Datenquelle abgefragt werden. Die Zahl entsteht lokal im Browser.

HTML-Dateien strukturieren

Aus einem unstrukturierten Text soll eine übersichtliche Webseite werden. Ein sinnvoller Arbeitsweg ist:

1. Thema und Hauptüberschrift bestimmen.
2. Abschnitte erkennen.
3. Überschriftenhierarchie festlegen.
4. Fließtext in Absätze gliedern.
5. Listen dort verwenden, wo mehrere gleichartige Punkte vorkommen.
6. Bilder mit src und alt einfügen.
7. Gestaltung zunächst sparsam einsetzen.
8. Interaktion erst ergänzen, wenn die Struktur stimmt.

Beispiel:

<h1>Digitale Ausstellung: Lieblingsorte</h1>

<h2>Über das Projekt</h2>
<p>Die Ausstellung zeigt Orte, die für unsere Klasse eine besondere Bedeutung haben.</p>

<h2>Kategorien</h2>
<ul>
  <li>Schulhaus</li>
  <li>Freizeit</li>
  <li>Erinnerungen</li>
</ul>

<img src="images/ausstellung.jpg" alt="Collage mit mehreren Ausstellungsbildern">

Daraus entsteht eine Seite, die nicht nur sichtbar gegliedert ist, sondern deren Struktur auch im Code nachvollziehbar bleibt.

📝 Übung: Längeren Fließtext strukturieren

Der folgende Text wurde aus einer Planungsnotiz kopiert. Er ist inhaltlich verständlich, aber für eine Webseite noch völlig ungeordnet. Deine Aufgabe ist es, daraus eine sinnvolle HTML-Struktur zu machen.

Verwende mindestens:

• eine Hauptüberschrift,
• mehrere Unterüberschriften,
• sinnvolle Absätze,
• eine ungeordnete oder geordnete Liste,
• mindestens eine Hervorhebung mit <strong> oder <em>,
• einen Bildplatzhalter mit src und sinnvollem alt-Text,
• einen Link zu einer weiteren lokalen Seite, zum Beispiel programm.html.

Ausgangstext:

Robotik-Tag an der Schule Am Freitag findet im Informatiksaal ein Robotik-Tag statt. Schüler·innen verschiedener Klassen stellen kleine Projekte vor, die im Unterricht entstanden sind. Einige Gruppen zeigen Fahrzeuge, die einer Linie folgen können, andere Gruppen präsentieren Greifarme, Ampelmodelle oder kleine Spiele mit Sensoren. Ziel des Tages ist nicht nur, fertige Ergebnisse zu zeigen, sondern auch zu erklären, wie die Programme aufgebaut sind. Besonders interessant ist, dass viele Projekte aus denselben Grundideen bestehen: Eingaben werden gemessen, das Programm verarbeitet diese Werte und danach reagiert der Roboter mit Motoren, Licht oder Ton. Besucher·innen können an drei Stationen mitarbeiten. Station eins beschäftigt sich mit Sensoren. Station zwei zeigt einfache Programmierlogik mit Bedingungen. Station drei erklärt, wie Fehler gesucht und behoben werden. Bitte beachte: Manche Modelle sind empfindlich und dürfen nur unter Aufsicht ausprobiert werden. Ein Foto des Linienroboters soll ebenfalls eingebunden werden. Weitere Informationen zum Ablauf stehen auf der Programmseite.

Achte darauf, dass du nicht nur Zeilenumbrüche einfügst, sondern dem Text mit HTML eine erkennbare Bedeutung gibst.

Lösungshinweis

Eine mögliche Struktur könnte so aussehen:

<h1>Robotik-Tag an der Schule</h1>

<p>Am Freitag findet im Informatiksaal ein Robotik-Tag statt. Schüler·innen verschiedener Klassen stellen kleine Projekte vor, die im Unterricht entstanden sind.</p>

<h2>Gezeigte Projekte</h2>
<p>Einige Gruppen zeigen Fahrzeuge, die einer Linie folgen können, andere Gruppen präsentieren Greifarme, Ampelmodelle oder kleine Spiele mit Sensoren.</p>

<h2>Ziel des Tages</h2>
<p>Ziel des Tages ist nicht nur, fertige Ergebnisse zu zeigen, sondern auch zu erklären, <strong>wie die Programme aufgebaut sind</strong>.</p>

<p>Viele Projekte beruhen auf denselben Grundideen: Eingaben werden gemessen, das Programm verarbeitet diese Werte und danach reagiert der Roboter mit Motoren, Licht oder Ton.</p>

<h2>Mitmachstationen</h2>
<ul>
  <li>Station 1: Sensoren ausprobieren</li>
  <li>Station 2: Programmierlogik mit Bedingungen verstehen</li>
  <li>Station 3: Fehler suchen und beheben</li>
</ul>

<p><em>Bitte beachte:</em> Manche Modelle sind empfindlich und dürfen nur unter Aufsicht ausprobiert werden.</p>

<img src="images/linienroboter.jpg" alt="Kleiner Roboter, der einer schwarzen Linie folgt">

<p><a href="programm.html">Weitere Informationen zum Ablauf</a></p>

Andere Lösungen sind möglich. Wichtig ist, dass Überschriften, Absätze, Liste, Bild und Link eine nachvollziehbare Struktur ergeben.

📝 Übung: HTML-Struktur verbessern

Der folgende Code funktioniert teilweise, ist aber schlecht strukturiert:

<p style="font-size: 32px; font-weight: bold;">Unsere Projektwoche</p>
<p>Montag Dienstag Mittwoch</p>
<p>Wir arbeiten an Medien, Robotik und Webdesign.</p>

Überarbeite den Code so, dass er semantisch sinnvoller ist. Verwende eine passende Überschrift, einen Absatz und eine Liste.

Lösungshinweis

Eine mögliche Lösung:

<h1>Unsere Projektwoche</h1>

<p>Wir arbeiten an Medien, Robotik und Webdesign.</p>

<ul>
  <li>Montag</li>
  <li>Dienstag</li>
  <li>Mittwoch</li>
</ul>

Die Überschrift wird als echte Überschrift ausgezeichnet. Die Tage stehen als Liste, weil sie gleichartige Einträge bilden.

CSS sinnvoll auslagern

Inline-CSS ist schnell geschrieben, aber bei längeren Dokumenten schwer zu warten. Wenn dieselbe Farbe, Schriftgröße oder Ausrichtung an vielen Stellen wiederholt wird, ist eine externe CSS-Datei übersichtlicher.

Problematisch:

<h1 style="text-align: center; color: darkred;">Schulfest</h1>
<p style="font-size: 16px; color: black;">Alle Klassen präsentieren Projekte.</p>

Besser ist eine klare Trennung.

HTML:

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Schulfest</h1>
  <p>Alle Klassen präsentieren Projekte.</p>
</body>

CSS:

h1 {
  text-align: center;
  color: darkred;
}

p {
  font-size: 16px;
  color: black;
}

📝 Übung: CSS-Regeln formulieren

Erstelle eine CSS-Datei für eine kleine Projektseite:

• Der Seitenhintergrund soll hellgrau sein.
• Die Hauptüberschrift soll zentriert, 26px groß und dunkelblau sein.
• Absätze sollen linksbündig, 16px groß und schwarz sein.
• Hinweise mit der Klasse tipp sollen einen Innenabstand von 12px und einen grauen Rahmen erhalten.

Lösungshinweis

Eine mögliche Lösung:

body {
  background-color: lightgray;
}

h1 {
  text-align: center;
  font-size: 26px;
  color: darkblue;
}

p {
  text-align: left;
  font-size: 16px;
  color: black;
}

.tipp {
  padding: 12px;
  border: 1px solid gray;
}

Kleine JavaScript-Funktionen verstehen

JavaScript-Funktionen können Eingaben verarbeiten und Ergebnisse zurückgeben. Angenommen, eine Webseite enthält eine kleine Rechenfunktion für ein Spiel. Die Spielregel lautet: Zwei Zahlen werden addiert, danach werden zusätzlich 7 Punkte als Bonus vergeben.

function bonusRechnen(a, b) {
  return a + b + 7;
}

Diese Funktion ist echte Programmlogik: Sie nimmt Eingabewerte entgegen, berechnet ein Ergebnis und gibt es zurück.

Stolperstelle

In JavaScript-Kommentaren verwendet man // für eine Zeile oder /* ... */ für mehrere Zeilen. HTML-Kommentare wie <!-- ... --> gehören nicht in JavaScript-Code.

📝 Übung: Funktion ergänzen

Eine Webseite enthält ein Mini-Spiel. Zwei eingegebene Zahlen sollen addiert werden. Danach werden 3 Punkte abgezogen, weil im Spiel eine kleine Chaos-Regel gilt.

Ergänze die Funktion:

function chaosRechnen(a, b) {
  // Rückgabe ergänzen
}

Lösungshinweis

Eine passende Lösung ist:

function chaosRechnen(a, b) {
  return a + b - 3;
}

Die Funktion erhält zwei Werte, berechnet die Summe und zieht anschließend 3 ab.

CMS und Website-Baukästen

Viele Webseiten werden heute nicht mehr vollständig von Hand geschrieben. Content-Management-Systeme wie WordPress oder Website-Baukästen wie Wix oder Squarespace ermöglichen es, Inhalte über grafische Oberflächen zu erstellen.

Vorteile von CMS-Systemen

CMS-Systeme können sehr hilfreich sein:

• Inhalte lassen sich ohne tiefes Programmierwissen bearbeiten.
• Designvorlagen beschleunigen die Erstellung.
• Mehrere Personen können gemeinsam an einer Website arbeiten.
• Menüs, Blogbeiträge, Medienverwaltung und Benutzerrollen sind oft bereits eingebaut.
• Erweiterungen können zusätzliche Funktionen bereitstellen.

Für viele Vereine, Schulprojekte, Blogs oder kleinere Unternehmen ist das sinnvoll.

Warum HTML- und CSS-Grundlagen trotzdem wichtig bleiben

Auch wenn ein Tool viel automatisch erzeugt, hilft technisches Verständnis in vielen Situationen:

• Du erkennst, warum eine Überschrift falsch formatiert ist.
• Du verstehst, warum ein Bild nicht geladen wird.
• Du kannst kleine Anpassungen gezielt vornehmen.
• Du erkennst schlechten oder überladenen Code.
• Du kannst Barrierefreiheit und Struktur besser beurteilen.
• Du bist weniger abhängig von Vorlagen und Plattformen.
• Du kannst beurteilen, ob ein Tool glaubwürdig, sicher und passend ist.

Merksatz

Wer nur die Oberfläche eines Webtools bedient, sieht das Ergebnis. Wer HTML, CSS und JavaScript grundsätzlich versteht, kann auch erklären, warum das Ergebnis entsteht.

Moderne Webtools und KI-Unterstützung

Neben CMS-Systemen können heute auch KI-Werkzeuge bei der Webentwicklung unterstützen. Sie können zum Beispiel einen ersten Entwurf formulieren, Code erklären, Fehler suchen oder eine einfache responsive Struktur vorschlagen. Das kann hilfreich sein, wenn man bereits ungefähr versteht, was entstehen soll.

Trotzdem ersetzen solche Werkzeuge kein Grundverständnis. Du musst beurteilen können, ob eine Seite sinnvoll strukturiert ist, ob Bilder korrekt eingebunden sind, ob CSS wirklich zur Gestaltung passt und ob JavaScript tatsächlich benötigt wird. Ohne Grundwissen bleibt man abhängig von Vorschlägen, die zwar überzeugend aussehen, aber nicht unbedingt zur Aufgabe passen.

Merksatz

CMS, Baukästen und KI können beim Erstellen von Webseiten helfen. HTML- und CSS-Grundlagen brauchst du trotzdem, um Ergebnisse zu verstehen, zu prüfen und gezielt zu verbessern.

Grenzen und Risiken vorgefertigter Systeme

Bereich	Mögliche Grenze
Transparenz	automatisch erzeugter Code ist oft schwer nachvollziehbar
Datenschutz	Plugins oder externe Dienste können Daten übertragen
Sicherheit	veraltete Erweiterungen können Angriffsflächen schaffen
Abhängigkeit	Plattformwechsel kann schwierig sein
Gestaltung	Vorlagen begrenzen individuelle Lösungen
Performance	zu viele Erweiterungen können Webseiten langsam machen
Barrierefreiheit	schöne Vorlagen sind nicht automatisch zugänglich

Deshalb ist es sinnvoll, Webtools nicht nur zu verwenden, sondern auch kritisch zu verstehen.

JavaScript als allgemeinbildende Programmiersprache

Manchmal wird behauptet, Programmieren sei eine neue Grundbildung. Der Vergleich mit einer klassischen Bildungssprache kann bedeuten: Man lernt nicht nur konkrete Befehle, sondern auch eine Art zu denken.

Beim Lernen von JavaScript trainierst du zum Beispiel:

• genaue Syntax zu beachten,
• Abläufe logisch zu formulieren,
• Bedingungen und Fälle zu unterscheiden,
• Fehler systematisch zu suchen,
• Eingaben und Ausgaben auseinanderzuhalten,
• komplexe Aufgaben in kleinere Schritte zu zerlegen,
• fremden Code zu lesen und zu erklären.

Diese Kompetenzen sind nicht nur für Informatik wichtig. Sie helfen auch beim Analysieren von Texten, beim Modellieren von Problemen, beim Erstellen von Präsentationen, beim Umgang mit digitalen Werkzeugen und beim kritischen Prüfen von Informationen im Web.

Gleichzeitig sollte man den Vergleich nicht übertreiben. JavaScript ist nicht automatisch wichtiger als alle anderen Sprachen. Es ist aber besonders verbreitet, weil es direkt im Browser läuft und dadurch für Webseiten zentral ist.

Typische Fehler und Missverständnisse

Missverständnis	Korrektur
HTML ist eine Programmiersprache.	HTML ist eine Auszeichnungssprache für Struktur und Bedeutung.
CSS gehört nur zu Farben.	CSS regelt auch Layout, Abstände, Schrift, Responsivität und vieles mehr.
JavaScript ist dasselbe wie Java.	JavaScript und Java sind unterschiedliche Sprachen.
Eine Webseite ist sicher, wenn sie professionell aussieht.	Design sagt nichts über Sicherheit oder Datenqualität aus.
Inline-CSS ist immer schlecht.	Für kleine Tests okay, für größere Projekte meist unübersichtlich.
Eine dynamische Zahl ist automatisch echt.	Sie kann auch nur im Browser berechnet oder zufällig erzeugt sein.
Ein Bild braucht nur src.	Ein sinnvoller alt-Text ist wichtig für Barrierefreiheit und Fehlersituationen.
IDs und Klassen sind dasselbe.	IDs sollten eindeutig sein, Klassen können mehrfach verwendet werden.
Der Browser zeigt Fehler immer klar an.	Browser reparieren HTML oft stillschweigend; dadurch können Fehler verborgen bleiben.

Begriffe sicher erklären

Bei diesem Thema ist es besonders wichtig, Begriffe nicht nur auswendig zu kennen, sondern sie voneinander abzugrenzen.

Begriff	Kurz erklärt
HTML	Auszeichnungssprache für Struktur und Bedeutung von Webinhalten
CSS	Stylesheet-Sprache für Gestaltung und Layout
JavaScript	Programmiersprache für Interaktion und Verhalten im Browser
Tag	Markierung wie <p> oder </p>
Element	vollständige Einheit aus Start-Tag, Inhalt und End-Tag
Attribut	Zusatzinformation im Start-Tag
Selektor	Teil einer CSS-Regel, der festlegt, welche Elemente gestaltet werden
Klasse	wiederverwendbare Markierung für mehrere Elemente
ID	eindeutige Markierung für ein bestimmtes Element
DOM	vom Browser erzeugte Struktur des HTML-Dokuments
CMS	System zum Verwalten und Bearbeiten von Webinhalten
Responsives Design	Gestaltung, die sich an verschiedene Bildschirmgrößen anpasst

Systematisch über Websprachen sprechen

Wenn du einen Codeausschnitt erklärst, hilft eine feste Reihenfolge:

1. HTML erkennen: Welche Inhalte und Strukturelemente gibt es?
2. CSS erkennen: Wo wird Aussehen festgelegt?
3. JavaScript erkennen: Wo passiert Programmlogik?
4. Datenfluss prüfen: Woher kommen Werte? Werden echte Daten geladen oder lokal erzeugt?
5. Wirkung beschreiben: Was sieht oder erlebt die Nutzer·in?
6. Grenzen reflektieren: Ist die Anzeige zuverlässig, wartbar, barrierefrei und nachvollziehbar?

Merksatz

Gute Codeanalyse beschreibt nicht nur, was im Browser sichtbar ist, sondern auch, wie dieses Ergebnis technisch entsteht.

Prüfungsvorbereitung

Die folgenden Aufgaben sind bewusst allgemein formuliert. Sie trainieren zentrale Kompetenzen des Themenbereichs, ohne konkrete Aufgaben zu kopieren.

📝 Übung: Websprachen unterscheiden

Du findest in einem Schulprojekt folgenden Ausschnitt:

<h1 class="titel">Mediathek</h1>
<p id="hinweis">Noch keine Auswahl getroffen.</p>
<button onclick="auswahlSetzen()">Film wählen</button>

<script>
  function auswahlSetzen() {
    document.getElementById("hinweis").innerText = "Dokumentation ausgewählt";
  }
</script>

Erkläre,

• welche Teile HTML sind,
• welche Aufgabe die Attribute class und id haben,
• welche Rolle JavaScript übernimmt,
• und welche CSS-Regel du formulieren könntest, um die Überschrift zentriert und dunkelblau darzustellen.

Lösungshinweis

HTML sind Überschrift, Absatz, Button und der <script>-Block als Einbindung des Codes. Die Klasse titel könnte für Gestaltung verwendet werden. Die ID hinweis macht den Absatz eindeutig auffindbar. JavaScript verändert den Text dieses Absatzes nach einem Klick.

Eine mögliche CSS-Regel:

.titel {
  text-align: center;
  color: darkblue;
}

📝 Übung: CMS beurteilen

Eine Schüler·innengruppe erstellt eine Projektwebsite mit einem Baukastensystem. Die Seite sieht gut aus, lädt aber langsam, verwendet mehrere externe Plugins und lässt sich nur schwer exportieren.

Beurteile die Situation. Gehe auf mindestens drei Vorteile und drei mögliche Grenzen solcher Systeme ein. Formuliere abschließend, warum Grundkenntnisse in HTML und CSS trotzdem hilfreich sein können.

Lösungshinweis

Vorteile können sein: schnelle Erstellung, einfache Bearbeitung, Vorlagen, Benutzerverwaltung, keine vollständige Programmierung nötig. Grenzen können sein: Abhängigkeit vom Anbieter, schwer nachvollziehbarer Code, Datenschutzfragen, Performanceprobleme, Sicherheitsrisiken durch Plugins, eingeschränkte Anpassbarkeit.

HTML- und CSS-Grundlagen helfen, Probleme zu erkennen, kleine Anpassungen vorzunehmen und technische Entscheidungen besser zu beurteilen.

📝 Übung: Responsives Design verbessern

Eine Webseite enthält folgende CSS-Regel:

img {
  width: 900px;
}

Erkläre, warum das auf Smartphones problematisch sein kann, und formuliere eine bessere Regel.

Lösungshinweis

Eine feste Breite von 900px kann breiter als der Bildschirm sein. Dadurch entstehen horizontales Scrollen oder abgeschnittene Inhalte.

Eine bessere Regel:

img {
  max-width: 100%;
  height: auto;
}

Das Bild wird höchstens so breit wie sein umgebender Bereich und bleibt proportional.

Ich kann …

• Ich kann den Unterschied zwischen Internet, World Wide Web, Webseite und Website erklären.
• Ich kann HTML als Auszeichnungssprache beschreiben und von Programmiersprachen abgrenzen.
• Ich kann den Grundaufbau eines HTML-Dokuments erklären.
• Ich kann Tags, Elemente, Attribute und Attributwerte an Beispielen benennen.
• Ich kann typische HTML-Elemente für Überschriften, Absätze, Listen, Bilder, Links und Tabellen verwenden.
• Ich kann erklären, warum semantische Struktur wichtiger ist als bloß sichtbare Formatierung.
• Ich kann CSS-Regeln mit Selektor, Eigenschaft und Wert erklären.
• Ich kann inline-CSS, internes CSS und externe CSS-Dateien unterscheiden.
• Ich kann Klassen- und ID-Selektoren voneinander abgrenzen.
• Ich kann einfache CSS-Regeln für Farbe, Schriftgröße, Ausrichtung, Abstände und Rahmen formulieren.
• Ich kann erklären, was responsives Design bedeutet und warum es wichtig ist.
• Ich kann JavaScript als Programmiersprache für Interaktion beschreiben.
• Ich kann einfache JavaScript-Funktionen lesen und ihre Wirkung erklären.
• Ich kann erkennen, wenn JavaScript im Browser nur scheinbar echte Daten anzeigt.
• Ich kann begründen, warum Webgrundlagen trotz CMS, Baukastensystemen und KI-Unterstützung relevant bleiben.
• Ich kann Chancen und Grenzen von Website-Baukästen, CMS-Systemen und KI-Unterstützung reflektieren.
• Ich kann einen längeren unstrukturierten Text in eine sinnvolle HTML-Struktur überführen.
• Ich kann eigene Erfahrungen mit Webentwicklung auf allgemeine digitale Kompetenzen beziehen.

Mini-Check

Beantworte die Fragen zunächst ohne Lösung. Klappe die Kurzlösungen erst danach auf.

1. Wofür stehen HTML und CSS?
2. Welche Aufgabe hat der <body>-Bereich?
3. Was ist der Unterschied zwischen einem Tag und einem Element?
4. Wofür verwendet man das Attribut src?
5. Warum ist alt bei Bildern sinnvoll?
6. Wie bindet man eine externe CSS-Datei ein?
7. Was ist der Unterschied zwischen .hinweis und #hinweis in CSS?
8. Warum ist JavaScript eine Programmiersprache, HTML aber nicht?
9. Warum kann eine per JavaScript erzeugte Zahl auf einer Webseite problematisch sein?
10. Nenne zwei Gründe, warum HTML- und CSS-Grundlagen trotz CMS sinnvoll sind.
11. Welche HTML-Elemente würdest du verwenden, um einen langen Fließtext sinnvoll zu strukturieren?

Kurzlösungen

1. HTML steht für Hypertext Markup Language, CSS für Cascading Style Sheets.
2. Im <body> steht der sichtbare Inhalt der Webseite.
3. Ein Tag ist eine Markierung wie <p> oder </p>. Ein Element umfasst Start-Tag, Inhalt und End-Tag.
4. src gibt bei Bildern oder anderen Medien die Quelle beziehungsweise den Dateipfad an.
5. alt beschreibt das Bild, wenn es nicht angezeigt wird oder für Screenreader zugänglich sein soll.
6. Mit <link rel="stylesheet" href="style.css"> im <head>.
7. .hinweis spricht eine Klasse an, die mehrfach verwendet werden kann. #hinweis spricht eine eindeutige ID an.
8. JavaScript kann Abläufe, Berechnungen, Bedingungen und Funktionen ausführen. HTML strukturiert Inhalte.
9. Wenn die Zahl nur im Browser erzeugt wird, muss sie keine echte Messung oder Serverinformation sein.
10. Man versteht Fehler besser, kann gezielter anpassen, bleibt unabhängiger von Vorlagen und kann Struktur, Barrierefreiheit und Sicherheit besser beurteilen.
11. Je nach Inhalt zum Beispiel <h1>, <h2>, <p>, <ul>, <ol>, <li>, <strong>, <em>, <img> und <a>.