Wir zeigen, wie Sie ein Übungs- oder Lernprojekt für die Website-Programmierung mit HTML, CSS und JavaScript auf dem eigenen Computer einrichten.
Webseiten werden erstellt mit der Markup-Sprache HTML (Hyper Text Markup Language), d.h. jede Webseite besteht aus einem HTML-Dokument. Dabei ist HTML für die Struktur und die Semantik des Dokuments verantwortlich.
CSS (Cascading Style Sheet) Anweisungen sorgen für das Aussehen, also das Layout (z.B. Farben, Schriftarten und -größen, Abstände) der Seite.
Mit Hilfe von JavaScript-Code können Elemente einer Webseite dynamisch verändert, hinzugefügt oder entfernt werden.
Hinweis: Der Begriff „Website“ wird meist verwendet für das gesamte Web-Projekt, also die Website mit all ihren Einzelseiten. Dagegen meint „Webseite“ die einzelne Seite.
Struktur einer Website auf dem lokalen Computer:
Erstellen Sie auf Ihrem Computer ein Projektverzeichnis für die Website, im Beispiel trägt es den Namen „Exercise“. Dieses Verzeichnis enthält alle Dateien und Ordner, die benötigt werden.
- index.html: Diese Datei enthält in der Regel den Inhalt Ihrer Homepage, d. h. die Startseite, die Besucher sehen, wenn sie zum ersten Mal Ihre Website besuchen.
- Ordner styles: Dieser Ordner enthält den CSS-Code, mit dem Sie Ihren Inhalt gestalten (z. B. Text- und Hintergrundfarben). Erstellen Sie einen Ordner namens styles in Ihrem Projekt-Verzeichnis.
- images-Ordner: Dieser Ordner wird alle Bilder enthalten, die Sie auf Ihrer Website verwenden. Erstellen Sie einen Ordner mit dem Namen images innerhalb Ihres Projekt-Ordners.
- Ordner scripts: Dieser Ordner enthält den gesamten JavaScript-Code, der verwendet wird, um Ihrer Website interaktive Funktionen hinzuzufügen (z. B. Schaltflächen, die Daten laden, wenn sie angeklickt werden). Erstellen Sie einen Ordner mit dem Namen scripts in Ihrem Projekt-Verzeichnis.
Images, Scripts und CSS-Dateien werden jeweils über Links in die index.html – Datei (oder in andere HTML-Dokumente) eingebunden:
Bilder einfügen, im body-Bereich:
<img src="images/new-tux.png" alt="Linux Tux" />CSS-Datei einbinden, im Header:
<link rel="stylesheet" href="styles/main.css">JavaScript-Datei einbinden, am Ende des body-Bereichs:
<script src="scripts/main.js"></script>So könnte dann das Grundgerüst der gesamten Datei index.html aussehen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/main.css">
<title>Document</title>
</head>
<body>
<img src="images/new-tux.png" alt="Linux Tux" />
<h2>Seitenüberschrift</h2>
<p>Ein Absatz mit regulärem Text.</p>
<script src="scripts/main.js"></script>
</body>
</html>Für unser Beispiel haben wir die IDE Visual Studio Code verwendet. Erstellen Sie hier eine leere Datei mit der Dateiendung .html und geben Sie die Zeichenfolge htm im Editor ein, so erhalten Sie bereits einen Vorschlag für das zu erstellende Grundgerüst einer Webseite.
Das Ergebnis Ihrer Programmierübung können Sie ganz einfach in einem Webbrowser Ihrer Wahl betrachten: laden Sie die Datei index.html über das Menü „Datei öffnen“.
Fazit
Grundkenntnisse in der Web-Programmierung sind hilfreich, um zu verstehen, wie die Komponenten einer Webseite zusammenwirken und auf was man bei der Erstellung achten sollte.
