Du willst deine Traum-Webseite erstellen, aber sie soll nicht wie eine vorgefertigte Vorlage aussehen. Jeder, der sich mit Webdesign auskennt, wird dir sagen, dass du zuerst HTML kennen musst. Aber was ist HTML, und wie kannst du es lernen?
Die Webseite, die du veröffentlichst, soll sich abheben und originell sein. Du willst Elemente und Designs, die niemand sonst in deiner Branche verwendet. Schließlich ist deine Webseite der erste Eindruck, den viele potenzielle Kunden von deinem Unternehmen bekommen.
Aber bevor du das tun kannst, musst du eine Computersprache namens HTML lernen. Das ist die Sprache, in der festgelegt wird, was ein Webbrowser einem Besucher zeigen soll, wenn er auf deine Webseite kommt.
In diesem Artikel erklären wir dir, was HTML ist, wie es entstanden ist, wie es verwendet wird, wie es funktioniert und bieten dir einen HTML-Grundkurs mit Tipps, wie du mehr lernen kannst.
Bist du bereit zu lernen, wie du deine Webseite programmieren kannst, ohne eine kaputte Seite zu erstellen? Dann fangen wir gleich an.
Was ist HTML?
HTML steht für „Hypertext Markup Language“ und ist eine relativ einfache Sprache, mit der Webseiten erstellt werden können. Da sie keine Variablen oder Funktionen zulässt, gilt sie nicht als „Programmiersprache“, sondern eher als „Auszeichnungssprache“, eine Sprache, die Tags verwendet, um Elemente in einem Dokument zu definieren.
Wenn du jemanden aus der Welt des Webdesigns fragst, was HTML ist, bekommst du wahrscheinlich eine langatmige Erklärung, bei der dir der Kopf schwirrt, vor allem, wenn du wie die meisten Menschen keine Ahnung von Programmierung und der Erstellung einer Webseite hast.
Was bedeutet also „Hypertext Markup Language“? Lasst es uns aufschlüsseln.
Hypertext ist geordneter Text, der zusammenhängende Elemente miteinander verbindet, meist über Links (auch Hyperlinks genannt). Die Auszeichnungssprache beschreibt den Stil und die Struktur einer Seite für Webbrowser.
HTML sorgt also dafür, dass Text und Bilder an der richtigen Stelle erscheinen und dass die Nutzer/innen problemlos auf deiner Webseite navigieren können. Webbrowser laden diese Informationen von deinem Webserver, um die Webseiten zu erstellen, die du jeden Tag siehst.
Wenn du dir HTML in seiner Rohform ansiehst, wirst du eine Menge Symbole und Klammern sehen, die scheinbar keinen Sinn ergeben. Aber das alles trägt zum Endprodukt bei, das den Kunden präsentiert wird.
Die Struktur von Webseiten wird mit HTML erstellt. Diese Sprache arbeitet mit CSS (Cascading Style Sheets) und JavaScript zusammen, um optisch ansprechende und interaktive Webseiten zu erstellen, an denen sich die Benutzer/innen erfreuen können.
Unterm Strich ist HTML die Grundlage für eine gute Webseite. Ohne sie wärst du nicht in der Lage, Text mit den Besuchern deiner Webseite zu teilen, geschweige denn, deine persönliche Note in die Webseite deiner Träume einfließen zu lassen.
Die Geschichte von HTML
Sir Tim Berners-Lee schuf HTML Ende 1991, aber die Programmiersprache wurde erst 1993 für die breite Masse freigegeben.
Damals kam HTML1 zum ersten Mal heraus. Von Anfang an war es als Mittel zum Austausch von Daten über Webbrowser gedacht.
Das Wachstum von HTML kam kurz nach seiner Veröffentlichung ins Stocken, weil zu dieser Zeit nicht viele Entwickler/innen Webseiten erstellten.
HTML2 wurde 1995 mit zusätzlichen Funktionen veröffentlicht und wurde bis 1997 zur Standardauszeichnungssprache für das Webdesign.
Damals wurde HTML3 von Dave Raggett entwickelt. Es gab Webmastern mehr Möglichkeiten, um Seiten zu gestalten. Leider war sie ihrer Zeit voraus. Die Funktionen von HTML3 bremsten die Browser aus, da sie noch nicht in der Lage waren, sie anzuwenden.
HTML4.01 wurde 1999 entwickelt und bot Unterstützung für Multimedia-Optionen. Diese Aktualisierung umfasste auch Style Sheets, Druckfunktionen und zusätzliche Skriptsprachen.
In jüngerer Zeit wurde HTML5 im Jahr 2015 veröffentlicht. Mit der Einführung von HTML5 wurden mehr Medienspeicher und spezielle Inhaltselemente unterstützt. Inline-Doctype, Audio- und Videoeinbettung wurden ebenfalls viel einfacher gemacht.
Im Jahr 2022 arbeitet die Welt mit HTML5.2, das die Sicherheitsrichtlinien für Inhalte zu einem Zeitpunkt verbessert, an dem wir sie am meisten brauchen.
Außerdem wurde ein starker Fokus auf den E-Commerce gelegt, indem eine API für Zahlungsanfragen hinzugefügt wurde. Mit diesem Upgrade wurden auch barrierefreie Internetanwendungen für Menschen mit Behinderungen eingeführt.
Wofür wird HTML verwendet?
Die einfache Antwort auf diese Frage ist, dass HTML überall auf der Welt zur Erstellung von Webseiten für den privaten und geschäftlichen Gebrauch verwendet wird.
Die eigentliche Antwort ist aber viel detaillierter als das.
HTML ist seit den 1990er Jahren die Standardsprache für webbasierte Dokumente und Webseiten. Sie hilft den Browsern, die Struktur einer Webseite und den damit verbundenen Stil zu verstehen.
Im Grunde ist HTML ein Plan, der dem Webbrowser sagt, wie er deine Webseite für den Besucher zusammenstellen soll. Wenn ein Nutzer deine URL eingibt, setzt der Browser die Seite anhand der im HTML-Code festgelegten Bausteine zusammen.
In Kombination mit einem CSS-Stylesheet, das die Elemente in deinem HTML-Dokument formatiert, sieht die Seite dann so aus, wie sie vom Benutzer betrachtet werden soll.
Die aktuelle Version von HTML ermöglicht es auch, Videos, Audiodateien, Tabellenkalkulationen und andere Anwendungen direkt auf Webseiten auszuführen. Wenn du diese Elemente schon einmal auf einer Webseite bestaunt hast, verdankst du das HTML5.
Diese Auszeichnungssprache sorgt auch für eine reibungslose interne Navigation auf einer Webseite dank Hyperlinks.
Website-Designer/innen können mit HTML auch Formulare zur Lead-Generierung erstellen, um E-Mails und Namen zu sammeln (vorausgesetzt, du nutzt eine Datei, die in einer anderen Sprache codiert ist).
Wenn du externe Plugins verwendest, kannst du HTML auch nutzen, um Reservierungssysteme oder Suchformulare innerhalb einer Webseite zu erstellen, die eine einfachere Buchung und Navigation ermöglichen.
Mit HTML fügst du nicht-dynamische Inhalte auf einer Webseite ein – Inhalte, die jeder Besucher auf die gleiche Weise sehen soll. Wenn du dynamische Inhalte möchtest, musst du JavaScript, PHP oder andere Programmiersprachen einsetzen.
Wie funktioniert HTML?
Im Mai 2022 gibt es mehr als 3,56 Milliarden Seiten im Internet. Viele dieser Seiten sind einfache HTML-Dateien. (Wohlgemerkt, wir reden hier nicht von Webseiten, sondern von einzelnen Seiten im Internet.)
Wenn deine Webseite früher 150 Seiten hatte, hattest du wahrscheinlich auch 150 einzelne HTML-Dateien. Aber heute haben sich die Dinge geändert. Wenn du ein Content Management System (CMS) verwendest, und das tun die meisten, ist das nicht der Fall, da es die Seiten in der Regel dynamisch aus den in einer Datenbank gespeicherten Daten erstellt.
Diese Dateien werden auch HTML-Dokumente genannt und sie sind die Bausteine deiner Webseite. Jede Seite hat verschiedene On-Page- und Off-Page-Elemente, die alle ihren Platz in HTML-Dokumenten haben. Dazu gehören Backend-Elemente wie Meta-Tags, Title-Tags und Alt-Tags, aber auch physische Elemente wie Videos, Bilder, Textblöcke und andere benutzerorientierte Funktionen.
Was macht ein HTML-Dokument aus?
Alle HTML-Dokumente enden mit der Endung .html oder .htm. Diese Dokumente enthalten den gesamten Text und die Tags, die statische Informationen für einen Webbrowser bereitstellen.
Das HTML-Dokument ist die Gebrauchsanweisung, die der Webbrowser des Nutzers zum Aufbau der Webseite verwendet. Alle Dateien, auf die es verweist (CSS-Stylesheets, JavaScript-Dateien zur Steuerung dynamischer Elemente usw.), werden vom Browser gelesen, der die Seite dann entsprechend rendert, damit der Betrachter sie so sehen kann, wie sie gedacht ist. Das Rendern ist der eigentliche Aufbau und findet jedes Mal statt, wenn jemand zu einer bestimmten Seite auf deiner Webseite navigiert.
Wenn es Probleme mit deinem HTML-Dokument oder einer der darin enthaltenen Dateien gibt, wird die Seite nicht richtig dargestellt. Das wäre so, als würdest du versuchen, einen IKEA-Schreibtisch ohne ein wichtiges Teil oder Werkzeug zusammenzubauen.
Moderne Webseiten enthalten verschiedene HTML-Elemente, die aus Tags und Attributen bestehen. Diese Elemente bilden die Struktur einer Seite. Die Tags, die mit jedem Element verbunden sind, zeigen, wo es beginnt und wo es endet. Ohne ein Tag, das ein Element abschließt, platziert der Browser alle folgenden Inhalte in dieser Spalte oder Zeile, auch wenn das nicht deine Absicht ist.
Die Attribute, die mit jedem Element auf einer Seite verbunden sind, zeigen die verschiedenen Eigenschaften, aus denen sie bestehen.
Alle HTML-Dokumente beginnen mit einer <!DOCTYPE>-Deklaration. Diese Dokumenttyp-Definition, auch DTD genannt, legt die Struktur und die Elemente eines XML-Dokuments fest.
Während <div> früher die erste Wahl für die Erstellung von Inhaltsblöcken war, gibt es in HTML5 auch spezielle Blöcke wie <main>, die den Crawlern die Art des Inhalts anzeigen, der in einem Block enthalten ist – in diesem Fall der Hauptinhalt des Blogs/Artikels.
HTML-Grundlagen
Wenn du Webdesigner/in werden oder zumindest an der Gestaltung der Webseite deines Unternehmens mitwirken willst, musst du HTML lernen. Wie bei so ziemlich allem, was es in dieser Welt zu lernen gibt, musst du mit den Grundlagen beginnen, um ein gutes Verständnis für die fortgeschrittenen Elemente zu haben.
Du kannst natürlich auch einen kostenlosen HTML-Editor oder Sublime Text verwenden, aber wenn du weißt, wie HTML funktioniert, kannst du die von dir erstellten Webseiten besser personalisieren.
In den folgenden Abschnitten werden wir einige HTML-Grundlagen erläutern, damit du die ersten Schritte zum HTML-Know-how machst.
Elemente von HTML
Alle HTML-Elemente, unabhängig davon, was sie erstellen, haben die gleichen drei Komponenten. Du hast ein öffnendes Tag, den eigentlichen Inhalt und ein schließendes Tag.
Deine Opening Tags zeigen dem Webbrowser, wo die Elemente deiner Seite beginnen. Sie können zum Beispiel zeigen, wo ein Videoplayer oder ein Textabsatz auf der Seite beginnt. Alle öffnenden Tags verwenden öffnende und schließende spitze Klammern, um sich selbst zu kennzeichnen. Das öffnende Tag <em> hebt zum Beispiel Inhalte hervor, wie zum Beispiel kursive Schrift. Du würdest dieses Tag vor dem Text platzieren, den du hervorheben möchtest.
Der Inhalt selbst ist die eigentliche Information, die der Nutzer sieht. Das kann ein geschriebener Text sein, wie ein Blogbeitrag. Es kann auch ein Bild oder ein Einbettungscode für ein Video sein. Wenn er nach dem Eröffnungstag platziert wird, beginnt der Inhalt an der angegebenen Stelle.
Das schließende Tag ist dasselbe wie das öffnende Tag, aber es fügt einen Schrägstrich vor dem Namen des Elements hinzu. Um auf unser Beispiel mit dem Hervorhebungs-Tag zurückzukommen, würdest du das Tag </em> am Ende des Textes platzieren, den du hervorheben möchtest.
Wenn du also zum Beispiel das Wort „genau“ kursiv setzen willst, würdest du es so programmieren:
<em>Genau.</em>
Auf der eigentlichen Benutzerseite würde es dann so aussehen:
Genau.
HTML-Elemente enthalten auch Attribute, die einen Namen und einen Attributwert enthalten. Der Name des Attributs zeigt an, was der Benutzer hinzufügt, während der Wert zusätzliche Informationen liefert.
Bei Bild-Tags musst du natürlich angeben, welches Bild du zeigen willst. Das sieht dann so aus:
<img src=“img_girl.jpg“>
Wenn du einen Absatz auf deiner Seite rot färben möchtest und dabei die Schriftart Arial verwendest, kannst du das Attribut style verwenden:
<p style=“color:red;font-family:arial“>
In diesem Beispiel verwenden wir das öffnende Tag <p> für einen neuen Absatz. Mit diesen Attributen würde alles in diesem Absatz in der Schriftart Arial rot sein, bis zum schließenden Tag </p>.
In der modernen Webentwicklung ist es jedoch üblich, das HTML-Style-Attribut nicht zu verwenden, um das Design einzelner Elemente anzupassen, sondern die gesamte Seite mit einem separaten CSS-Stylesheet zu gestalten.
HTML class und ID sind zwei Attribute eines HTML-Elements, die es „benennen“ und dir helfen, diese Elemente später mit CSS oder JavaScript gezielt zu gestalten. Das hilft bei der Entwicklung und macht sie effektiver. Durch die Verwendung der ID oder Klasse eines Elements kannst du Stilinformationen in Elemente wie Hintergrundfarbe, Rahmen, Schriftfarbe und mehr einfügen.
Anstatt den Text im HTML-Dokument rot zu färben, könntest du zum Beispiel so vorgehen:
<p class=”redtext”>
And in the CSS stylesheet, target the class like this:
.redtext {
color:red;
font-family:arial;
}>/code>Die am häufigsten verwendeten HTML-Tags und HTML-Elemente
Es gibt 142 verschiedene HTML-Tags, mit denen du Elemente erstellen kannst. Diese bestehen sowohl aus Block-Level- als auch aus Inline-Elementen.
Block-Level-Elemente erstrecken sich über die gesamte Breite einer Seite und beginnen eine neue Zeile innerhalb eines Dokuments.
Hier sind ein paar gängige Block-Level-Tags, die du auf deiner Webseite verwenden kannst:
- <head> Dieser Tag dient dazu, Metainformationen wie den Titel der Seite aufzulisten.
- <html> Dies ist ein Root-Element. Es steht am Anfang und definiert das HTML-Dokument.
- <body> Der body-Tag kennzeichnet den Inhalt einer Seite.
- <h1> bis <h6> Diese sechs verschiedenen Tags kennzeichnen die verschiedenen Überschriften, die du verwenden kannst.
- <p> Dies ist das Absatz-Tag, das den Beginn eines neuen Absatzes in deinem Inhalt bestimmt.
- <ol> Dieser Tag erstellt eine geordnete Liste.
- <ul> Der ul-Tag erstellt ungeordnete Listen.
- <li> Das ist das Listenelement-Tag. Es wird in geordnete oder ungeordnete Listen-Tags für jedes Element in der Liste eingeschlossen.
- <div> Das ist ein Block-Element-Tag, das einen „Abschnitt“ erstellt, den du mit Inhalt füllen (und später mit CSS stylen) kannst. Die meisten Webseiten und Vorlagen verwenden dieses Element, um ihren Inhalt zu strukturieren.
- <header> Dies ist ein Block-Element-Tag, das speziell für Kopfzeileninhalte gedacht ist.
- <main> Dies ist ein Block-Tag speziell für den Hauptinhalt des Blogs.
- <footer> Dieser Block-Tag ist für deine Fußzeilen-Informationen, wie z.B. Copyright, Links, etc.
Inline-Elemente formatieren den Inhalt innerhalb deiner Block-Level-Elemente. Das können hervorgehobene Texte sein, wie fette und kursive Schriftarten. Inline-Inhalte können auch Links sein, sowohl zu internen als auch zu externen Inhalten.
Inline-Links formatieren den Text, ohne den Inhaltsfluss zu unterbrechen.
Es gibt einige gängige Inline-Tags, die du auf deiner Webseite verwenden kannst. Hier sind einige von ihnen, in keiner bestimmten Reihenfolge:
- <strong> Diesen Tag verwendest du, um fetten Text zu erstellen.
- <em> Das em-Tag, das wir bereits in einem Beispiel verwendet haben, zeigt kursiven Text an.
- <a> Das ist der Hyperlink-Tag. Es braucht auch ein href-Attribut, um zu zeigen, wohin der Link zeigt (genau wie img-Tags ein src-Attribut brauchen).
HTML, CSS und JavaScript
Wir haben CSS und JavaScript bereits kurz erwähnt. Sie gehen in der Regel Hand in Hand mit HTML, um fortschrittliche, moderne Webseiten mit individuellem Flair zu erstellen. Aber was sind CSS und JavaScript? Und wie unterscheiden sie sich von HTML?
Wie wir inzwischen wissen, wird HTML verwendet, um deine Seiten zu strukturieren und mit Elementen zu versehen. Aber du weißt auch, dass das nicht alles ist, was zu einem soliden Webseiten-Design gehört. An dieser Stelle kommen CSS und JavaScript ins Spiel.
CSS steht für Cascading Style Sheets. Das ist die Sprache und die Dateien, die moderne Webentwickler verwenden, um Hintergründe, Farben, Abstände, Layouts und Animationen auf einer Webseite zu gestalten. Im Wesentlichen beschreibt CSS die Darstellung eines HTML-Dokuments und gibt dem Webdesigner mehr Flexibilität und Kontrolle.
Mit Hilfe von .css-Dateien kannst du außerdem dieselbe Formatierung auf mehrere Webseiten anwenden. Diese Stylesheets sorgen dafür, dass du deine Formatierung nicht für jede Seite neu vornehmen musst. Außerdem kann die .css-Datei zwischengespeichert werden, was die Ladegeschwindigkeit zwischen Seiten mit demselben Format verringert.
Und dann ist da noch Javascript. Mit Javascript lassen sich dynamische Funktionen erstellen, z. B. Fotogalerien, Pop-ups und Slider. Es ist eine beliebte Programmiersprache, die von 97% aller Webseiten weltweit verwendet wird. Alle wichtigen Webbrowser enthalten spezielle Javascript-Engines, die die Implementierung dieser Funktionen einfacher und effektiver machen.
Javascript, CSS und HTML arbeiten zusammen, um das zu schaffen, was wir jeden Tag als eine komplette, gut gestaltete, interaktive Webseite auf Desktop- und mobilen Plattformen sehen.
Wie man HTML lernt
Wir haben uns damit beschäftigt, was HTML ist und was es mit den Grundlagen auf sich hat. Jetzt ist es an der Zeit, darüber zu sprechen, wie man HTML lernt und wie es dir bei deinen Zukunfts- und Karrierewünschen helfen kann.
HTML ist mehr als nur eine beliebte Programmiersprache. Es ist die Sprache des Internets, und das wird sich so schnell nicht ändern. Sie arbeitet Hand in Hand mit beliebten Diensten wie WordPress, und du kannst mit HTML viele WordPress-Vorlagen verändern, um sie in etwas Einzigartiges zu verwandeln.
Fangen wir also damit an, warum jemand überhaupt etwas über WordPress lernen möchte.
Warum HTML lernen?
HTML zu lernen ist wichtig für jeden, der eine Karriere in der Webentwicklung anstrebt. Talentierte Webentwickler/innen sind immer gefragt, egal ob sie für Agenturen oder selbstständig arbeiten, und HTML zu lernen ist die Grundlage für diese Fähigkeiten.
Es gibt nicht nur eine große Nachfrage nach dieser Position, sondern Webentwickler/innen können auch leicht sechsstellige Gehälter verdienen. Das durchschnittliche Gehalt eines Webentwicklers liegt im Jahr 2022 bei 98.565 $.
Gute HTML-Kenntnisse sind eine wichtige Voraussetzung, wenn Personalverantwortliche Webentwickler/innen einstellen.
Wenn du kein Webentwickler bist, aber einen einstellen willst, wird dir ein rudimentäres Verständnis von HTML, CSS und JS und deren Zusammenspiel bei den Bewerbungsgesprächen helfen. Du wirst wissen, welche Fragen du stellen musst, und kannst diejenigen, die nicht wissen, wovon sie reden, leicht aussortieren.
Lernressourcen
Für alle, die sich in HTML weiterbilden wollen, gibt es mehrere kostenlose Lernressourcen. Wir stellen dir ein paar der besten vor.
Codecademy
Codecademy ist ein Service, der kostenlose Einführungskurse anbietet. Er enthält interaktive Tutorials und zeigt die Ergebnisse deiner HTML-Codierung auf einem geteilten Bildschirm an.
Für 19,99 $ pro Monat kannst du über das Programm auf exklusive Inhalte zugreifen.
Coursera
Coursera bietet mehrere Kurse an, die HTML vertiefen und Beispiele aus der Praxis zeigen. Dieser Service kostet 49 US-Dollar pro Monat, du kannst ihn aber eine Woche lang kostenlos testen.
W3Schools
W3Schools ist ein weiterer kostenloser Dienst, der grundlegende HTML-Kenntnisse vermittelt. Dazu werden Beispiele, Übungen und verschiedene Ressourcen verwendet.
Du kannst auch $95 für einen offiziellen Kurs zum Selbststudium zahlen, der am Ende mit einem Zertifikat abgeschlossen wird.
General Assembly Dash
General Assembly Dash ist ein HTML-Lernprogramm, das Projekte für Anfänger/innen anbietet, die in die Welt des Webdesigns eintauchen wollen. Dieses Programm arbeitet mit einem zielorientierten Ansatz und hilft dir, die realen Anwendungen des Gelernten zu verstehen. Du kannst eine Webseite erstellen, anstatt nur Module zu absolvieren.
Wenn du diese Projekte fertiggestellt hast, kannst du einen Online-Mentorenkurs belegen, der dir nach Abschluss ein Zertifikat verleiht. Die volle Kursgebühr beträgt 3.950 $, aber es gibt flexible Finanzierungsmöglichkeiten und Ratenzahlungspläne.
Zusammenfassung
HTML wird auch in absehbarer Zukunft das Rückgrat des Webdesigns sein. Ein gutes Verständnis dieser Konzepte kann dir sogar dabei helfen, deine eigene WordPress-Webseite aus HTML zu erstellen.
Wenn es an der Zeit ist, eine neue Webseite zu erstellen, brauchst du ein stabiles Webseiten-Hosting. Wenn du mit dem Gedanken spielst, eine WordPress-Webseite zu erstellen, kontaktiere Kinsta noch heute, um eine Demo zu vereinbaren und herauszufinden, warum mehr als 24.000 Unternehmen ihre Online-Präsenz unserem Premium-Managed-Hosting-Service anvertraut haben.
