Stellen Sie sich vor, Sie möchten ein Haus bauen. Bevor Sie Farbe an die Wände bringen oder schöne Möbel aufstellen können, brauchen Sie zunächst ein stabiles Fundament und einen soliden Rohbau. Genau so funktioniert HTML für Websites - es ist das Grundgerüst, auf dem alles andere aufbaut.
HTML steht für "HyperText Markup Language" und ist die Grundsprache des Internets. Jede Website, die Sie jemals besucht haben, basiert auf HTML. Es ist wie das Skelett eines Menschen - man sieht es normalerweise nicht, aber ohne würde nichts zusammenhalten.
Was macht HTML eigentlich?
HTML ist überraschend einfach zu verstehen. Es funktioniert wie ein Textverarbeitungsprogramm, nur dass Sie dem Computer mit speziellen Befehlen sagen müssen, was ein Titel ist, wo ein Absatz beginnt oder wo ein Link hinführen soll. Diese Befehle nennt man "Tags" und sie sind das Herzstück von HTML.
Denken Sie an HTML wie an die Struktur eines Zeitungsartikels. Eine Zeitung hat Überschriften, Unterüberschriften, Absätze, Bilder und manchmal Listen. HTML macht genau das Gleiche für Websites - es sagt dem Browser, welcher Text eine Überschrift ist, welcher ein normaler Absatz und wo sich Bilder befinden sollen.
Das Schöne an HTML ist, dass Sie bereits nach wenigen Minuten Ihre erste eigene Webseite erstellen können. Sie brauchen keine teure Software - ein einfacher Texteditor wie Notepad reicht völlig aus.
Die Grundlagen verstehen: Tags und Elemente
HTML arbeitet mit sogenannten "Tags". Diese funktionieren wie Anweisungen in einer Rezeptanleitung. Sie sagen dem Browser: "Hey, das hier ist eine Überschrift!" oder "Dieser Text soll fett geschrieben werden!"
Ein Tag sieht immer so aus: Es beginnt mit einer spitzen Klammer auf, dann kommt der Befehl, und dann eine spitze Klammer zu. Die meisten Tags kommen in Paaren - ein öffnendes Tag am Anfang und ein schließendes Tag am Ende. Das schließende Tag erkennen Sie am Schrägstrich vor dem Befehl.
Hier ist ein einfaches Beispiel. Wenn Sie möchten, dass ein Text als Überschrift erscheint, schreiben Sie:
<h1>Das ist meine erste Überschrift</h1>
Das <h1> sagt dem Browser "Hier beginnt eine große Überschrift" und das </h1> bedeutet "Hier endet die Überschrift". Alles dazwischen wird als Überschrift angezeigt.
Für normalen Text verwenden Sie Absatz-Tags:
<p>Das ist ein normaler Absatz Text. Hier können Sie schreiben, was Sie möchten.</p>
Ihre erste HTML-Seite Schritt für Schritt
Jede HTML-Seite folgt einer bestimmten Grundstruktur, die Sie sich wie ein Briefformat vorstellen können. Genau wie ein Brief einen Kopf und einen Hauptteil hat, hat auch eine HTML-Seite verschiedene Bereiche.
Eine vollständige HTML-Seite sieht so aus:
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Website</title>
</head>
<body>
<h1>Willkommen auf meiner Website</h1>
<p>Das ist mein erster Absatz. Ich lerne gerade HTML!</p>
</body>
</html>
Lassen Sie uns das Schritt für Schritt durchgehen. Die erste Zeile <!DOCTYPE html> ist wie ein Briefkopf - sie sagt dem Browser, dass es sich um eine moderne HTML-Seite handelt. Das brauchen Sie nicht zu verstehen, schreiben Sie es einfach immer an den Anfang.
Das <html>-Tag umschließt die gesamte Seite. Stellen Sie sich vor, es wäre der Briefumschlag, in dem alles andere steckt.
Der <head>-Bereich ist wie die Adresse auf einem Brief - hier stehen Informationen über die Seite, die der Besucher normalerweise nicht direkt sieht. Das <title>-Tag bestimmt, was oben im Browser-Tab steht.
Der <body>-Bereich enthält alles, was der Besucher tatsächlich auf der Seite sehen soll - Überschriften, Texte, Bilder und so weiter.
Die wichtigsten HTML-Elemente für den Anfang
HTML bietet viele verschiedene Elemente, aber Sie brauchen nur eine Handvoll davon, um beeindruckende Websites zu erstellen. Denken Sie daran wie beim Kochen - Sie können bereits fantastische Gerichte zubereiten, wenn Sie nur die Grundzutaten beherrschen.
Für Überschriften gibt es sechs verschiedene Größen, von sehr groß bis sehr klein:
<h1>Die größte Überschrift</h1>
<h2>Eine etwas kleinere Überschrift</h2>
<h3>Eine mittlere Überschrift</h3>
Wenn Sie bestimmte Wörter hervorheben möchten, können Sie sie fett oder kursiv machen:
<p>Dieses Wort ist <strong>fett</strong> und dieses ist <em>kursiv</em>.</p>
Links zu anderen Websites erstellen Sie mit dem <a>-Tag. Das "a" steht für "anchor", also Anker:
<a href="https://www.google.de">Hier geht es zu Google</a>
Listen sind sehr nützlich und funktionieren wie in einem Textverarbeitungsprogramm:
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
</ul>
Das <ul> steht für "unordered list" (ungeordnete Liste) und jeder <li>-Tag ist ein Listenpunkt.
Bilder einfügen und verstehen
Bilder machen Websites lebendig und interessant. In HTML fügen Sie Bilder mit dem <img>-Tag ein. Dieses Tag ist etwas besonders, weil es kein schließendes Tag braucht - es steht alleine.
<img src="/mein-bild.jpg" alt="Beschreibung des Bildes">
Das src sagt dem Browser, wo das Bild zu finden ist, und alt ist eine Beschreibung für Menschen, die das Bild nicht sehen können. Stellen Sie sich alt wie eine Bildbeschreibung in einer Zeitung vor.
Wie Sie Ihre erste Seite testen können
Der aufregendste Moment kommt, wenn Sie Ihre erste HTML-Seite im Browser öffnen. Erstellen Sie eine neue Datei in einem Texteditor, fügen Sie den HTML-Code ein und speichern Sie die Datei mit der Endung ".html" ab, zum Beispiel "meine-seite.html".
Dann doppelklicken Sie einfach auf die Datei, und sie öffnet sich in Ihrem Browser. Wie von Zauberhand sehen Sie Ihre eigene Website! Das ist der Moment, in dem viele Menschen merken: "Das ist ja gar nicht so schwer!"
Häufige Anfängerfehler vermeiden
Jeder macht am Anfang Fehler, und das ist völlig normal. Der häufigste Fehler ist, vergessene schließende Tags. Wenn etwas nicht so aussieht, wie es soll, prüfen Sie, ob jedes öffnende Tag ein passendes schließendes Tag hat.
Ein weiterer typischer Fehler sind Tippfehler in den Tag-Namen. HTML ist sehr genau - <titel> funktioniert nicht, es muss <title> heißen. Achten Sie auch auf Groß- und Kleinschreibung bei Dateinamen.
Der nächste Schritt in Ihrer Lernreise
HTML ist wie das Alphabet - sobald Sie es beherrschen, können Sie anfangen, Wörter und später ganze Geschichten zu schreiben. Mit den Grundlagen, die Sie jetzt kennen, können Sie bereits einfache aber vollständige Websites erstellen.
Der nächste logische Schritt wäre CSS zu lernen, mit dem Sie Ihre HTML-Seiten schön gestalten können - Farben, Schriftarten, Layouts und vieles mehr. Aber lassen Sie sich Zeit und üben Sie erst einmal mit HTML, bis Sie sich sicher fühlen.
Das Wichtigste ist: Haben Sie keine Angst vor Fehlern! Jeder Webentwickler hat mal klein angefangen, und HTML ist eine sehr verzeihende Sprache. Im schlimmsten Fall sieht Ihre Seite etwas anders aus als geplant, aber sie wird nicht kaputt gehen.
HTML zu lernen ist wie Fahrradfahren - am Anfang wackelig, aber wenn Sie den Dreh einmal raus haben, vergessen Sie es nie wieder. Und das Beste daran: Sie können sofort anfangen und bereits heute Ihre erste eigene Website erstellen.
