Du träumst davon, deine eigene Website zu erstellen, aber das Wort HTML klingt für dich nach einer Geheimsprache? Keine Sorge, du bist nicht allein! Viele Webentwickler haben mal ganz klein angefangen. Dieser Artikel ist dein persönlicher Leitfaden, der dir die wichtigsten HTML Grundlagen auf leicht verständliche Weise erklärt. Wir begleiten dich von Null zum kleinen Web-Helden. Los geht’s!
Was ist HTML überhaupt?
HTML steht für Hypertext Markup Language. Stell dir vor, HTML ist das Skelett einer Website. Es gibt die Struktur und den Inhalt vor, der dann mit CSS (für das Aussehen) und JavaScript (für die Funktionalität) zum Leben erweckt wird.
Einfach gesagt: HTML ist eine Sprache, die dem Webbrowser sagt, wie er Texte, Bilder, Links und andere Elemente auf einer Webseite darstellen soll. Ohne HTML gäbe es keine strukturierte Darstellung im Web, nur reinen Text.
Die Grundbausteine: Tags und Elemente
Das Herzstück von HTML sind Tags. Tags sind Schlüsselwörter, die in spitzen Klammern eingeschlossen sind (z.B. <p> für einen Absatz). Die meisten Tags kommen in Paaren vor: ein öffnender Tag (z.B. <p>) und ein schließender Tag (z.B. </p>). Der schließende Tag hat einen Schrägstrich vor dem Schlüsselwort.
Alles, was zwischen einem öffnenden und einem schließenden Tag steht, bildet ein Element. Ein HTML-Dokument besteht also aus einer Ansammlung von Elementen, die ineinander verschachtelt sein können.
Hier ein Beispiel für ein einfaches HTML-Element:
<p>Dies ist ein Absatz.</p>
In diesem Beispiel ist <p> der öffnende Tag, </p> der schließende Tag und „Dies ist ein Absatz.” der Inhalt des Elements.
Die wichtigsten HTML Tags für den Anfang
Es gibt unzählige HTML Tags, aber für den Anfang reichen ein paar wenige aus, um eine einfache Webseite zu erstellen:
<!DOCTYPE html>: Definiert den Dokumenttyp als HTML5 (die aktuellste Version). Dieser Tag steht immer ganz oben in deinem HTML-Dokument.<html>: Das Wurzelelement des HTML-Dokuments. Alles andere befindet sich innerhalb dieses Tags.<head>: Enthält Metadaten über das HTML-Dokument, wie den Titel, Stylesheets und Skripte. Der Inhalt des<head>-Bereichs ist nicht direkt auf der Webseite sichtbar.<title>: Definiert den Titel der Webseite, der in der Browser-Tab oder im Fenstertitel angezeigt wird.<body>: Enthält den sichtbaren Inhalt der Webseite, also alles, was der Benutzer tatsächlich sieht.<h1>bis<h6>: Überschriften verschiedener Ebenen.<h1>ist die wichtigste Überschrift,<h6>die unwichtigste.<p>: Definiert einen Absatz.<a href="URL">: Erstellt einen Link. Das Attributhrefgibt die Ziel-URL des Links an.<img src="URL" alt="Beschreibung">: Fügt ein Bild ein. Das Attributsrcgibt die URL des Bildes an, das Attributalteine alternative Beschreibung des Bildes (wichtig für SEO und Barrierefreiheit).<ul>: Definiert eine unsortierte Liste (mit Aufzählungspunkten).<ol>: Definiert eine sortierte Liste (mit Zahlen).<li>: Definiert ein Listenelement (innerhalb von<ul>oder<ol>).<div>: Ein generischer Container für HTML-Elemente. Oft verwendet, um Bereiche der Webseite zu strukturieren und mit CSS zu gestalten.<span>: Ähnlich wie<div>, aber ein Inline-Element (nimmt nur so viel Platz ein, wie der Inhalt benötigt).
Ein einfaches HTML-Dokument
Hier ist ein Beispiel für ein einfaches HTML-Dokument, das alle oben genannten Tags verwendet:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Willkommen auf meiner Webseite!</h1>
<p>Dies ist ein Absatz über mich. Ich bin ein angehender Webentwickler.</p>
<h2>Meine Interessen</h2>
<ul>
<li>Programmieren</li>
<li>Webdesign</li>
<li>Lesen</li>
</ul>
<img src="bild.jpg" alt="Ein Bild von mir">
<p><a href="https://www.google.de">Besuche Google!</a></p>
</body>
</html>
Kopiere diesen Code in eine Textdatei, speichere sie als index.html und öffne sie in deinem Webbrowser. Du solltest nun eine einfache Webseite sehen.
Wichtige Attribute
Attribute sind zusätzliche Informationen, die in den öffnenden Tag eines Elements eingefügt werden, um sein Verhalten oder seine Darstellung zu beeinflussen. Attribute bestehen aus einem Namen und einem Wert, getrennt durch ein Gleichheitszeichen (=). Der Wert wird in Anführungszeichen gesetzt.
Einige häufig verwendete Attribute sind:
href(für Links,<a>-Tag): Gibt die Ziel-URL des Links an.src(für Bilder,<img>-Tag): Gibt die URL des Bildes an.alt(für Bilder,<img>-Tag): Gibt eine alternative Beschreibung des Bildes an.class: Weist einem Element eine oder mehrere CSS-Klassen zu.id: Weist einem Element eine eindeutige ID zu.style: Ermöglicht Inline-Styling (direkte Formatierung des Elements mit CSS). Allerdings sollte diese Vorgehensweise vermieden werden, da sie die Wartbarkeit des Codes erschwert. Nutze stattdessen CSS-Dateien.
Tools für angehende Web-Helden
Es gibt viele großartige Tools, die dir den Einstieg in die Webentwicklung erleichtern:
- Texteditoren: VS Code, Sublime Text, Atom (kostenlos) oder Notepad++ (kostenlos). Diese Editoren bieten Syntax-Hervorhebung, Auto-Vervollständigung und andere hilfreiche Funktionen.
- Webbrowser: Chrome, Firefox, Safari, Edge. Nutze die Entwicklertools deines Browsers, um den HTML-Code deiner Webseite zu inspizieren und Fehler zu beheben.
- Online-Editoren: CodePen, JSFiddle, Replit. Diese Plattformen ermöglichen es dir, HTML, CSS und JavaScript direkt im Browser zu schreiben und auszuführen, ohne dass du etwas installieren musst.
Tipps und Tricks für den Erfolg
- Üben, üben, üben! Je mehr du mit HTML arbeitest, desto besser wirst du es verstehen.
- Nutze Online-Ressourcen. Es gibt unzählige Tutorials, Dokumentationen und Foren, die dir bei Fragen weiterhelfen können. Die offizielle Dokumentation von MDN Web Docs ist eine Goldgrube an Informationen.
- Inspiziere den Code anderer Webseiten. Mit den Entwicklertools deines Browsers kannst du den HTML-Code jeder Webseite ansehen und lernen, wie sie aufgebaut ist.
- Scheue dich nicht, Fehler zu machen. Fehler sind ein wichtiger Teil des Lernprozesses.
- Bleib am Ball! Die Webentwicklung ist ein sich ständig wandelndes Feld. Es gibt immer etwas Neues zu lernen.
Fazit: Dein Weg zum Web-Helden hat begonnen!
Mit diesen Grundlagen bist du bestens gerüstet, um deine ersten Schritte in die Welt der Webentwicklung zu wagen. Erinnere dich, dass HTML das Fundament jeder Webseite ist. Mit Fleiß und Übung wirst du bald deine eigenen beeindruckenden Webprojekte erstellen. Viel Erfolg auf deinem Weg vom Anfänger zum Web-Helden!