Benötigte Software
Um HTML Dokumente zu erstellen, reicht ein Texteditor aus, in dem der Quelltext geschrieben wird. Dieses Dokument können wir anschließend im Webbrowser betrachten.
Texteditor / Codeeditor
Ein einfacher Texteditor, wie er vom Betriebssystem bereitgestellt wird, reicht dafür zwar aus, aber diese eignen sich nicht besonders gut für das Umsetzen größerer Projekte. Im Internet gibt es zahlreiche kostenlose Tools, die für das Erstellen und bearbeiten von HTML-Dateien ausreichende Funktionen zur Verfügung stellen.
beliebte Texteditoren / Codeeditoren
Webbrowser
Windows Betriebssysteme hatten bis Windows 10, den "Internet-Explorer" als Standard-Browser, seit Windows 10 ist sein Nachfolger der Webbrowser "Microsoft Edge". Inzwischen hat Microsoft mit dem Webbrowser "Edge Chromium" nachgelegt, der seine Vorgänger um weiten voraus ist.
Weil die Microsoft-Browser bisher nicht die besten Freunde des Webentwicklers waren, wurde lieber mit alternativer Software gearbeitet.
beliebte Webbrowser
Nach der Installation des Webbrowsers sollte dieser als Standardbrowser in den Systemsteuerungen eingestellt werden.
Um in die Entwicklerumgebung des Webbrowsers zu gelangen, reicht es meistens aus, die Taste F12 (Funktionstaste 12) auf der Tastatur zu drücken. Alternativ gelangt man über einem Rechtsklick im aktuellen Browserfenster in ein Kontextmenü, über welches auch die Entwicklerumgebung geöffnet werden kann. Bei Chrome zum Beispiel heißt der Menüpunkt Untersuchen.
Die erste Datei erstellen
Bevor wir die erste HTML-Datei schreiben, erstellen wir noch einen Projektordner. Dieser Ordner kann irgendwo im System erstellt werden. Am schnellsten geht das allerdings, wenn ein neuer Ordner direkt auf dem Desktop erstellt wird (Rechtsklick Neu Ordner).
Der Name des Ordners kann ein beliebiger Name sein. Als Namensvorlage könnte "meine erste HTML" dienen.
Ab hier an gibt es zwei Möglichkeiten eine HTML-Datei in diesen Ordner zu schreiben.
Möglichkeit 1: Wir erstellen eine neue Textdatei in dem Projektordner, die mit dem Name "index.html" gespeichert wird.
Achtung!
Die Dateiendung muss unbedingt von ".txt" auf ".html" geändert werden.
Manchmal verändert sich die Dateiendung nicht wie gewünscht und dann trägt die Datei den Name "index.html.txt" und ist somit immer noch eine Textdatei.
Möglichkeit 2: Wir öffnen den Texteditor / Codeeditor und speichern einfach eine Datei mit dem Name "index.html" in den Projektordner, den wir erstellt haben.
HTML-Code erstellen
Der nachfolgende Code kann entweder abgetippt oder einfach kopiert und im Codeeditor eingefügt werden. Was das alles bedeutet, wird noch aufgeklärt.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Seitentitel</title>
</head>
<body>
<p>Sichtbarer Teil der Webseite</p>
</body>
</html>Nun können wir die Datei index.html speichern und anschließend im Browser aufrufen.
Datei im Browser öffnen
Jetzt öffnen wir die Datei "index.html" mit einem Doppelklick auf das Dateisymbol im Projektordner. Es sollte sich ein Webbrowser öffnen, in dem der Text: "Sichtbarer Teil der Webseite" zu lesen ist.
Betrachten wir den Code
Die Auszeichnung in HTML erfolgt durch genormte SGML Elemente.
Die meisten dieser Elemente werden durch ein Tag-Paar markiert (Start-Tag und End-Tag).
Ein Start-Tag beginnt mit dem < Zeichen, worauf der Elementname folgt wie das p (paragraph) für einen Absatz. Optional können noch zusätzliche Attribute angegeben werden. Dazu später mehr. Mit einem > Zeichen wird das Start-Tag geschlossen.
Das End-Tag beginnt mit der Zeichenfolge </ worauf der Name des Elements erfolgt, welches beendet werden soll. Am Ende wird wieder das Zeichen > gesetzt, um das End-Tag zu schließen. Start-Tag, End-Tag und alles dazwischen bilden ein Element.
Nicht alle Elemente in HTML bestehen aus eine Anfangs- und einen End-Tag. Es gibt in HTML die sogenannten Standalone-Tags, die für inhaltslose Elemente stehen. Das bedeutet nicht, dass diese nichts anzeigen, es bedeutet nur, dass diese Tags aus einen einzigen Tag bestehen und deshalb kein Ende benötigen. Es gibt halt keinen Inhalt, der dazwischen definiert wird.
Beispiele für solche Tags sind Bilder, erzwungene Zeilenumbruche, horizontale Linien, Links, Eingabefelder und noch einige mehr.
Weiter zum Grundgerüst