Webseiten erstellen mit HTML, CSS und JavaScript

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 des Dokuments verantwortlich.

CSS Anweisungen sorgen für das Aussehen, also das Layout der Seite.

Mit Hilfe von JavaScript-Code können Elemente einer Webseite verändert, hinzugefügt oder entfernt werden.

Verzeichnis-Struktur einer Website auf dem lokalen Computer:

Erstellen Sie auf Ihrem Computer ein Projektverzeichnis für die Webseite, im Beispiel trägt es den Namen „Exercise“. Diese Verzeichnis soll alle Dateien und Ordner aufnehmen, 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.

Die Verzeichnis-Struktur im Explorer von Visual Studio Code. — Verzeichnis-Struktur in VSCode

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/102px-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>

HTML Grundlagen

HTML (Hyper Text Markup Language) ist eine Auszeichnungssprache, die zum Erstellen von Webseiten eingesetzt wird. Ähnlich wie in anderen Auszeichnungssprachen, wird die Struktur des Dokuments, der Webseite, mit einer Art Steuerzeichen – die hier „Tags“ heißen – gestaltet.

So wird beispielsweise Überschriften gekennzeichnet durch ein h (heading), gefolgt von einer Zahl für die Ebene, umgeben von spitzen Klammern. Der eigentliche Text befindet sich jeweils zwischen einem öffnenden und einem schließenden Tag. Der schließende Tag mit einem Schrägstrich:

<h1>
    Meine Überschrift Ebene 1
</h1>

Ein Absatz, gekennzeichnet durch ein p (paragraph):

<p>
    Ein Absatz in einem HTML-Dokument.
</p>

Auf dem eigenen Computer

Um ein einfaches HTML-Dokument zu erstellen, genügt ein normaler Text-Editor z.B. Notepad unter Windows, TextEdit auf dem Mac oder Gedit auf einem Linux-System. Das neu erstellte Dokument wird mit der Dateiendung html gespeichert.

Anschließend können Sie es in einem Browser wie Firefox, Safari oder Google Chrome öffnen. Im Allgemeinen öffnet ein Doppelklick die Datei automatisch im Standard-Browser. Sie sehen dann das reine Dokument mit seiner Struktur aber – fast – ohne Formatierung. Das Format, in der Ihr Text erscheint, steuert der jeweilige Browser bei.

Ein HTML-Dokument im Browser Safari, weißer Hintergrund mit schwarzer Schrift, keine Formatierung. — HTML-Dokument in Safari

Die Formatierung des Dokuments wird üblicherweise in einer separaten CSS- Datei (Cascading Style Sheet) festgelegt.

Komfortabler als in einem reinen Texteditor erstellen Sie eine HTML- Datei in einer IDE wie z.B. Visual Studio Code. Mit einem Plugin speziell für HTML und CSS wird auf Knopfdruck das Grundgerüst der Seite erstellt und Sie erhalten während der Eingabe Vorschläge für Textergänzungen.

VS Code ERweiterung "HTML CSS Support" — VS Code Erweiterung

Mit der Eingabe der ersten Buchstaben „htm …“ erhalten Sie bereits einen Vorschlag für den einzufügenden Text:

Ein Grundgerüst für ein HTML-Dokument:

VS Code: das Grundgerüst eines html-Dokuments im Editor-Bereich — Grundgerüst eines HTML-Dokuments in VS Code

Developer Tools

Im Browser stehen Ihnen mit den Entwicklerwerkzeugen weitere Möglichkeiten zur Prüfung und Bearbeitung des Dokuments zur Verfügung. Mit der Option „Seitenquelltext anzeigen“ im Menü „Entwickler“ lassen Sie sich die HTML-Struktur, und vieles mehr, jeder Webseite anzeigen.

Safari Entwicklerwerkzeuge:: ein Fenster mit dem Quelltext — Safari „Seitenquelltext“

Auch in diesem separaten Fenster vergrößert man den Inhalt mit cmd + Plus-Taste (auf dem Mac) bzw. ctrl + Plus-Taste.

Hinweis: In Safari muss in den Einstellungen > Erweitert die Option „Funktionen für Webentwickler anzeigen“ aktiviert sein. Nur dann erscheint der Menüpunkt „Entwickler“ in der oberen Leiste.

In anderen Browsern finden Sie die Entwicklertools im Menü „Weitere Werkzeuge“.

Sehr umfangreiche Funktionen bieten die Entwicklerwerkzeuge in Google-Chrome.

Auch hier lässt sich der Werkzeugbereich in der Größe ändern bei gedrückter ctrl– (strg) bzw. cmd– Taste mit dem Mausrad oder Trackpad.

Für eine bessere Übersicht können die Entwicklerwerkzeuge in einem separaten Fenster angezeigt werden. Die Option verbirgt sich hinter den drei Punkten rechts oben in der Leiste. Der obere und untere Fensterbereich lässt sich jeweils vergrößern durch verschieben der mittleren Leiste:

Sie können hier testen, wie ein HTML-Dokument auf einem anderen Gerät dargestellt wird. Oder ein konkretes Seitenelement betrachten, indem Sie es entweder im Dokument oder in der Browser-Seite mit der Maus ansteuern.

Developertools in Google Chrome in separatem Fenster. Links ein Browser-Fenster mit der Webseite auf einem Mobilgerät. — Developertools in Google Chrome

Developertools in Google Chrome, links in einem Browser-Fenster ist ein Text-Absatz blau hinterlegt, der zugehörige Bereich im Quelltext, angezeigt im rechten Fenster, ist ebenfalls markiert. — Developertools in Google Chrome

Im Browser Firefox:

Firefox stellt die Tools auch einzeln zur Verfügung.

Das Menü "Weitere Werkzeuge" in Firefox — Entwicklertools im Browser Firefox

Opera:

Im Browser Opera lässt sich das separate Fenster mit den Entwicklerwerkzeugen nicht in der Größe verändern, bei Safari, Chrome und Firefox kann man mit der Maus am Fensterrand die Größe beliebig anpassen.

Online Lern- Plattformen

Deutsch-sprachige Kurse:

SelfHTML

SelfHTML ist eigentlich ein Wiki, das sich mit den verschiedenen Aspekten der Webentwicklung befasst. Die Seite stellt seit 1995 eine deutschsprachige Dokumentation zu HTML und verwandten Technologien zur Verfügung. Anfängern werden Grundlagen vermittelt und Kurse in deutscher Sprache angeboten, für Fortgeschrittene wird ein Nachschlagewerk bereitgestellt.

Besprochen werden die Auszeichnungssprachen HTML, XML und SVG, die Layoutsprachen CSS und XSL, die Skriptsprachen JavaScript und PHP. Für jedes Thema wird ein Quelltext-Beispiel gezeigt, welches sowohl angeschaut als auch selbst verändert werden kann. Anschließend folgt eine Erklärung des Beispiels.

HTML-Seminar:

html-Seminar

Schritt für Schritt mit allen Grundlagen bis zur eigenen fertigen Website…

Anhand von drei Beispiel- Projekten werden die verschiedenen üblichen Webdesigns nachgebaut. Sie lernen die Zusammenhänge von HTML, CSS und Design.

Die Kursunterlagen sind auch (kostenpflichtig) als E-Book im PDF-Format verfügbar.

OpenHPI

openHPI – Wie designe ich meine eigene Homepage? : Ein Kurs zum Programmieren einer Webseite im Selbststudium. Videotutorial mit Lernmaterial als PDF zum Download. Kostenlos, Anmeldung erforderlich.

openHPI – Programmieren fürs Web : Ein Kurs zur clientseitigen und serverseitigen Programmierung. Videotutorial mit Lernmaterial als PDF zum Download. Kostenlos, Anmeldung erforderlich

Englisch-sprachige Kurse:

w3schools

Hier können Sie in einem online-Editor jeweils Beispiele zur aktuellen Lektion ausprobieren. Die einzelnen Lektionen sind nicht zu lang und die Inhalte sehr gut erklärt. Zu allen Lektionen gibt es Übungen. Sie können einen kostenlosen Account anlegen, dann wird der Lernfortschritt in Ihrem Konto gespeichert. Zusätzlich können Sie kostenfrei eine eigene Webseite erstellen und noch viele weitere Programmiersprachen erkunden.

HTML-Online-Editoren:

w3schools-online-editor, mit dunklem Modus und gut zu lesen, aber leider mit fest verankertem Header-Bereich, der beim Vergrößern der Seite einen Teil verdeckt. Das Ergebnis wird in einem Vorschaufenster angezeigt.

w3schools online html-Editor — w3schools online-HTML-Editor

w3schools online-editor mit vergrößerter Schrift sind nicht mehr alle Bereiche im Fenster sichtbar. — w3schools online-HTML-Editor

Der Klassiker: CodePen, mit vielen Funktionen. Der Editor lässt sich gut anpassen und Sie können einen kostenlosen Account anlegen, um Ihre Code-Beispiele zu sichern. Für das HTML-Dokument kann auch gleich, separat in einem anderen Editor-Tab CSS und JavaScript bearbeitet werden. Das Ergebnis ist unmittelbar im Vorschaufenster zu sehen.

CodePen mit vergrößerter Anzeige — CodePen online-Editor

CSS Basics

Mit CSS (Cascading Style Sheets) legen Sie das Aussehen der einzelnen Komponenten eines HTML- Dokuments fest. Sie können z.B. bestimmen, welche Farbe die Überschriften oder der Dokumentenhintergrund haben sollen oder welche Schriftart eingesetzt wird.

Grundsätzlich kann zwar CSS innerhalb eines HTML- Dokuments eingefügt werden, üblich ist es aber, eine separate Datei zu erstellen. Diese Formatierungsdateien haben die Dateiendung .css.

Sie werden über einen Link in das HTML-Dokument, konkret in den Header, eingebunden. Man findet unterschiedliche Schreibweisen:

<link rel="stylesheet" href="main.css">

oder

<link href="styles/styles.css" type="text/css" rel="stylesheet" />

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Bestandteile:

der Link-Tag: <link > oder <link />, der Schrägstrich vor der abschließenden spitzen Klammer ist optional.
das Attribut rel, zeigt die Relation zwischen dem Dokument und der eingebundenen Datei an.
das Attribut type ist hier otional, weil der Browser bereits aus der rel– Angabe stylesheet ableiten kann, dass es sich um „css/text“ handelt.
styles/styles.css gibt den Pfad zur Datei an: hier befindet sich die Datei styles.css im Ordner styles

Beispiel:

alle Überschriften der ersten Ebene: h1
mit der Textfarbe: color
Farbe: darkred

formatieren

h1 {
 color: darkred;
}

Dabei ist h1 ein sogenannter „Selektor“ mit dem Sie auswählen, welches Element im HTML- Dokument formatiert werden soll. Innerhalb der geschweiften Klammern steht, wie formatiert werden soll. Die Eigenschaft Textfarbe color, gefolgt von einem Doppelpunkt und der Wert darkred .

Das Dokument ohne Formatierung:

Die vollständigen Dateien:

<!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>Demo</title>
</head>
<body>
   <h1>Meine Überschrift</h1>
   <p>Ein Absatz</p>
</body>
</html>

/* demo css file for index.html */

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.5em;
}

h1 {
   color:darkred;
}

Die Ansicht im Browser:

html-Dokument im Browser — HTML-Dokument im Browser

html-Dokument mit CSS-Formatierung im Browser — HTML-Dokument im Browser

Tutorials:

w3schools CSS-tutorial

SelfHTML: CSS

Mozilla Developer: CSS first steps

JavaScript

JavaScript wird häufig verwendet, um Webseiten, also HTML-Dokumente, mit dynamischen Effekten zu versehen. Die Scriptsprache benötigt einen sog. Interpreter, um auf einem Computer ausgeführt werden zu können. Der Interpreter übersetzt das, was als Programm in einer Datei gespeichert wurde in maschinenlesbaren Code. Im allgemeinen ist ein Interpreter Bestandteil einer Laufzeitumgebung. Für JavaScript bringen alle Browser eine Laufzeitumgebung mit, so dass Sie ein Javascript- Programm einfach im Browser ausführen können. Sie benötigen dazu aber ein HTML-Dokument, in das die JavaScript- Datei eingebettet wird.

Eigene Lernumgebung

Um JavaScript auf dem eigenen Computer auszuprobieren, legen Sie am besten einen Projektordner mit beliebigem Namen an. In diesem Ordner wiederum erstellen Sie einen Ordner für CSS-Dateien und einen für JavaScript-Dateien. Dies entspricht der grundlegenden Ordner-Struktur für eine Webseite.

Das HTML-Dokument, von dem aus Sie starten, trägt üblicherweise den Namen index.html und befindet sich direkt im Projektordner.

Beispiel der Ordnerstruktur in Visual Studio Code:

Visual Studio Code: links der Dateibaum mit den Ordnern, rechts im Editor ein geöffnetes html-Dokument. — Verzeichnis-Struktur in VSCode

Um JavaScript ausführen zu können, erstellen Sie zunächst ein einfaches HTML-Dokument, in welches die JavaScript-Datei eingebunden wird. Dies geschieht über ein Skript – Tag:

<script src="script/main.js"></script>

Dieser wird am Ende des Bereichs <body> ...</body> eingefügt.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Demo</title>
</head>
<body>
   <h1>Meine Überschrift</h1>
   <p>Ein Absatz</p>
   <script src="script/main.js"></script>
</body>
</html>

Exkurs: Fehlermeldung

Die Fehlermeldung „Not allowed to load local resource“ in Safari und „Failed to load resource: net::ERR_FILE_NOT_FOUND “ beruht immer auf falschen Pfadangaben. Der Browser beginnt den Pfad zu der verlinkten Datei immer an dem Ort, den er als Projektverzeichnis ansieht und das ist der Ordner, in dem die html-Datei abgelegt ist. Von hier aus wird direkt in den Ordner „scripts“ gewechselt

Safari Entwickler-Werkzeuge mit Fehlermeldung "Not allowed to load local resource" — Safari Konsole mit Fehlermeldung

Befindet sich die index.html nicht auf der ersten Ebene, also direkt im Projektverzeichnis, sondern in einem Unterordner, z.B. im Ordern „html" , müssen Sie bei der Pfadangabe zunächst aus dem Unterordner „herausspringen“ in das Projektverzeichnis (also eine Ebene höher) und dann von dort aus wieder in das scripts – Verzeichnis wechseln.

Infografik: Pfadangaben für script- und styles- Verzeichnis, index.html in separatem Ordner

Infografik: Pfadangaben für script- und styles- Verzeichnis

Liegt also das HTML-Dokument in einem Unterverzeichnis, beginnt die Pfadangabe mit zwei Punkten, gefolgt von einem Schrägstrich. Diese signalisieren den Wechsel in das übergeordnete Verzeichnis:

<script src="../script/main.js"></script>

Für einen ersten Text legen Sie eine einfache JavaScript- Datei mit der Dateiendung .js im Verzeichnis scripts an, mit dem Inhalt:

alert("hello world");

Die Anweisung erzeugt ein Dialogfenster beim Öffnen der Datei im Browser. Das Aussehen dieses Fensters ist abhängig vom verwendeten Browser.

Screenshot des Dialogfensters beim Öffnen der html-Datei mit JavaScript in Safari — Dialogfenster in Safari

Wer Visual Studio Code benutzt, kann die Erweiterung „Open in Browser“ installieren, um das Öffnen des HTML-Dokuments zu vereinfachen. Damit können Sie das Dokument per Tastenkombination Alt + B aus dem Editor heraus im Standard-Browser oder mit Shift + Alt + B in einem beliebigen Browser öffnen.

Visual Studio Code: die Erweiterung "open in browser", links eine Übersicht mit allen Erweiterungen, rechts die zu installierende Erweiterung mit Erläuterungen — VScode Erweiterung

Online-Tutorials

SelfHtml – JavaScript

In englischer Sprache:

w3schools – JavaScript

Mozilla developer, web_docs – JavaScript

Online-Editoren

JSFilddle: Separate Editor-Fenster für JavaScript, HTML, CSS und Vorschau, allerdings werden beim Vergrößern der Seite die Editor-Fenster nicht neu sortiert und werden zu klein. Die Umstellung der Seite auf eine Tab-Ansicht im Menü Settings bringt Abhilfe.

w3Schools: Der JavaScript-Code muss hier aber direkt innerhalb des HTML-Dokuments eingefügt werden.

CodePen: Separate Editor-Fenster für JavaScript, HTML, CSS und Vorschau, gut anpassbar.

Share on Facebook

Post on X