HTML (Hyper Text Markup Language) ist eine Auszeichnungssprache, die zum Erstellen von Webseiten eingesetzt wird. Wir zeigen die ersten Schritte zum Erstellen und Testen.
Ähnlich wie in anderen Auszeichnungssprachen, wird die Struktur des Dokuments, der Webseite, mit einer Art Steuerzeichen – die hier „Tags“ heißen – gestaltet.
So werden 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>Demo Seite</h1>Ein Absatz, gekennzeichnet durch ein p (paragraph):
<p>Und ein erster Absatz, alles ohne Formatierung</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 das Dokument in einem Browser wie Firefox, Safari oder Google Chrome öffnen. Im Allgemeinen öffnet ein Doppelklick die Datei automatisch im Standard-Browser. Im Browser sorgt eine integrierte Browser-Engine dafür, dass Sie ein „normales“ Dokument sehen, mit seiner Struktur aber – fast – ohne Formatierung. Das Format, in der Ihr Text erscheint, steuert der jeweilige Browser bei.
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.
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:
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. Sie können von hier aus auf allen Webseiten ausprobieren, was passiert, wenn man einzelne Werte, z.B. für Schriftgrößen oder Abstände ändert. Ihrer Experimentierfreude sind da keine Grenzen gesetzt – außer dass Änderungen nicht gespeichert werden und sich eben nur auf die Darstellung in Ihrem eigenen Browser auswirken.
Auch in diesem separaten Fenster vergrößert man den Inhalt mit cmd + Plus-Taste bzw. Strg + 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“.
Google-Chrome
Sehr umfangreiche Funktionen bieten die Entwicklerwerkzeuge im Webbrowser 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 auch 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.
Im Browser Firefox:
Firefox stellt die Tools auch einzeln zur Verfügung.
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 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 AuszeichnungssprachenHTML, 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.
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 – 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:
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.
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.
