Dateien
Bisher konnten wir alle Beispiele direkt hier im Browser bearbeiten. Ab einem gewissen Punkt ist das aber nicht mehr wirklich praktikabel und komfortabel. Zum Bearbeiten von Quelltext-Dateien (egal ob HTML, CSS oder JavaScript) benötigen wir einen Text-Editor. Zwar sind unter Windows, macOS und auch unter vielen Linux-Varianten standardmäßig einfache Text-Editoren installiert. Diese haben aber häufig einen sehr eingeschränkten Funktionsumfang.
Ein guter Text-Editor unterstützt beim Schreiben von Quelltext. Beispielsweise machen viele Text-Editoren Vorschläge für HTML-Tags oder CSS-Eigenschaften, sobald du ein paar Zeichen eintippst. Oder sie warnen, wenn es an einer bestimmten Stelle im Quelltext einen Syntax-Fehler gibt.
Ein guter Text-Editor (unter vielen) ist Sublime Text. Sublime Text ist für Windows, macOS und Linux erhältlich. Das Programm kann unebgrenzt lange kostenlos getestet werden. Wenn du es anschließend weiterverwenden möchtest, solltest du allerdings eine Lizenz erwerben.
Nachdem du Sublime Text installiert hast und zum ersten mal öffnest, siehst du ein leeres Fenster mit einer leeren Text-Datei:
In diese leere Datei kannst du beliebigen HTML-Quelltext schreiben. Wenn du CSS oder JavaScript verwenden möchtest, kannst du dazu entweder separate Dateien anlegen. Alternativ kannst du sowohl CSS als auch JavaScript direkt in einer HTML-Datei einbetten. Dazu gibt es die style- bzw. script-Tags. Das erste Beispiel mit in der HTML-Datei eingebettetem CSS und JavaScript sieht z. B. wie folgt aus. Du kannst die Beispiel-HTML-Datei hier auch abspeichern/herunterladen.
<!doctype html>
<html>
<!-- Das head-Element enthält spezielle Meta-Informationen über die
HTML-Seite. Das kann z. B. der Dokument-Titel sein (s. u.). Oder
eine kurze Beschreibung des Seiteninhalts, die in Suchmaschinen
oder beim Teilen der Webseite in sozialen Netzwerken angezeigt
wird. -->
<head>
<!-- Der Inhalt des title-Elements wird in der Tab-Leiste bzw. in
der Titelleiste des Browser-Fensters angezeigt. -->
<title>Meine erste Webseite</title>
<meta charset="utf-8">
<style>
h1 {
font-size: 30px;
font-family: Courier New;
color: darkblue;
}
input {
border: 2px solid red;
padding: 10px;
}
button {
background-color: green;
color: white;
border: none;
border: 2px solid black;
font-weight: bold;
padding: 10px;
}
</style>
</head>
<!-- Das body-Element enthält den tatsächlich sichtbaren Inhalt
der Webseite.
-->
<body>
<h1>Herzlich Willkommen!</h1>
<input type="text" placeholder="Gib deinen Namen ein …" />
<button>Sag Hallo!</button>
<script>
let input = document.querySelector('input');
let button = document.querySelector('button');
function sayHello() {
alert('Hallo, ' + input.value + '!');
}
button.addEventListener('click', sayHello);
</script>
</body>
</html>
Nachdem du ersten HTML, CSS und/oder JavaScript-Code geschrieben hast, solltest du die Datei speichern. Erstelle dazu zunächst einen neuen Ordner nur für deine Webseite. Du kannst den Ordner an beliebiger Stelle auf deinem Computer speichern – Hauptsache, du findest ihn später wieder.
Wähle anschließend im File-Menü die Option Save. Unter Windows kannst du dafür auch die Tastenkombination Strg + S verwenden. Unter macOS ist die Tastenkombination Cmd + S.
Es öffnet sich ein Fenster, das je nach Betriebssystem unterschiedlich aussehen kann. Wähle als Speicherort für die Datei den zuvor erstellten Ordner aus. Als Dateinamen wähle index.html. Es ist wichtig, dass auch die Dateiendung korrekt .html lautet!
Öffne nun den Datei-Browser (bzw. den Finder unter macOS) und navigiere zu dem Ordner, in dem du zuvor die HTML-Datei gespeichert hast. Klicke doppelt auf die Datei. Et voilà – deine erste Webseite öffnet sich in deinem Standard-Webbrowser!