Website basteln - Part 1 HTML

31.01.2026

Was erwartet dich hier?

Am Ende dieses Beitrags kannst du dir eine kleine Website mit mehreren Seiten, Links und Bildern selber bauen. Sounds good? Dann lies einfach weiter. Weitere Artikel, wie du deine Website bunter machen und online stellen kannst, folgen.

Warum das Ganze? Weil jede selbstgemachte und persönliche Website das Internet ein Stück schöner macht und deine Ideen auch außerhalb von Social Media sichtbar sind. Happy Coding für mehr Vielfalt im Netz! :)

Es gibt Vorteile und Nachteile, eine eigene Website zu bauen. Der Vorteil: Du bist unabhängig von großen Konzernen und Social-Media-Unternehmen. Das heißt, deine Daten gehören dir, und du kannst damit machen, was du möchtest. Du kannst die Website so gestalten, wie du willst. Du kannst schreiben und Bilder hochladen. Schreiben über Dinge, die nur dich interessieren. Deine Inhalte können nicht so einfach verschwinden, wenn ein Social-Media-Unternehmen keine Lust mehr hat, sein Portal weiterzuführen.

Der Nachteil: Kein Algorithmus bestimmt, wer deine Seite sieht. Niemand wird deine Seite von selbst finden, du musst sie aktiv empfehlen. Du musst also Freunden und Bekannten davon erzählen und ihnen zeigen, was du gebaut hast. Klingt nach Arbeit? Vielleicht. Aber dafür gehört die Seite wirklich dir. Sounds good? Dann lies weiter!

Meine erste eigene Website - HTML

Um eine Website zu erstellen, musst du ein bisschen die Auszeichnungssprache HTML können. Sie strukturiert die Texte auf deiner Website. Also: keine Programmiersprache, sondern nur Marker, die sagen, was eine Überschrift <h1> ist und was ein Text <p> ist. Wir machen das hier Schritt für Schritt und schauen uns die allgemeinen HTML-Tags < > an.

index.html erstellen

Erstelle in einem Ordner auf deinem PC zuerst eine Textdatei (.txt) und benenne sie in index.html um. Dadurch wird das Dateiformat geändert, und wenn du die Datei öffnest, wird sie automatisch in deinem Standard-Internetbrowser angezeigt.

Zum Bearbeiten öffnest du die Datei per Rechtsklick über „Öffnen mit“ in einem Texteditor und speicherst folgenden Text darin:

<h1>Meine erste Website</h1>
<p>Willkommen auf meiner ersten Website. Hier erzähle ich von meinen Intressen und Hobbies.</p>

Starte die Datei mit deinem Browser und ta da... Herzlichen Glückwunsch, du hast deine erste eigene Website erstellt. Easy oder?

HTML-Tags - Headlines und Paragraph

HTML struktuiert deine Inhalte. So viel wussten wir schon. <h1> steht für Headline 1. Diese sind hierarchisch, so kannst du auch Unterüberschriften nutzen – mit <h2>, <h3>, <h4> usw. Ein HTML-Tag hat ein Anfang <h1> und ein Ende </h1>. Dazwischen wird der Text struktiert bzw. gesetzt. <p> steht für Paragraph und macht aus deinem Text einen Absatz. Du kannst <p> auch weglassen, aber so entsteht eine schöne Lücke zwischen zwei Absätzen. Vergiss nicht den schließenden HTML-Tag </p>.

Texte gestalten - fett und kursiv

Du willst fetten Text oder kursiven Text? Kein Problem! Benutze dafür die Tags <strong></strong> oder <i></i>. Du kannst auch Tags verschacheln. Zum Beispiel kannst du in einem Paragraphen einzelne Wörter fett schreiben.

<p>Willkommen auf meiner <strong>ersten Website</strong>. Hier erzähle ich von meinen Intressen und Hobbies.</p>

Weitere nützliche Tags

Die folgenden Tags sind keine umschließenden Tags, wie <p></p> und <h1></h1>. Bei ihnen genügt nur die einfache Form <br>.
<hr> = Trennline (Horizontal ruler)
<br> = Umbruch (Break)

Listen - ungeordnet und geordnet

Listen sind super, um Dinge übersichtlich aufzuzählen, wie Hobbys oder Projekte. Ungeordnete Listen werden in HTML wie folgt strukturiert:

<h2>Meine Hobbies</h2>
    <ul>
        <li>Lesen</li>
        <li>Reiten</li>
        <li>Schwimmen</li>
    </ul>

<ul> steht für "unordered list" (ungeordnete Liste) und <li> für "list item" also Listengegenstand. Der Code ist so aufgebaut, dass wir zuerst sagen, dass eine ungeordnete Liste kommt, und dort drinnen fügen wir die Listeneinträge ein. Das <ul> wirkt wie eine Klammer um die Items und stellt sie mit Bulletpoints dar. Eine geordnete Liste nutzt Zahlen und wird mit <ol> angekündigt. Das Einrücken im Code macht man, damit man den Code besser lesen kann. Ansonsten kommen die Bulletpoints ganz automatisch.

<h2>Meine Hobbies</h2>
    <ol>
        <li>Lesen</li>
        <li>Reiten</li>
        <li>Schwimmen</li>
    </ol>

Intere und externe Links erstellen

Alles auf eine Seite zu schreiben, wird irgendwann unübersichtlich. Vielleicht brauchen die eigenen Hobbys eine eigene Seite. Um diese Seiten miteinander zu verbinden, benötigen wir Links. Als Erstes erstellen wir im Ordner eine zweite HTML-Datei namens "hobbies.html". In unsere Index-Seite schreiben wir dann an einer passenden Stelle folgenden Code:

<a href="/hobbies.html">Meine Hobbies</a>

Auf der Hobby-Seite kannst du nun einen Zurück-Link einfügen, um wieder auf deine Startseite zukommen.

<a href="/index.html">Zurück</a>

Zwischen <a> und </a> steht der Text, der auf der Website angezeigt wird – hier „Meine Hobbys“. Im ersten <a>-Tag steht der Link, wohin man weitergeleitet wird, wenn man auf „Meine Hobbys“ klickt. Die URL (Adresse) ist sehr kurz, da es ein interner Link ist und die "hobbies.html" im gleichen Ordner liegt wie die "index.html".

Wir können mit Links auch auf andere, externe Websites Besucher schicken. Egal wie: Links machen das Internet erst zu dem, was es ist – ein großes Netzwerk an Informationen.

<a href="https://variarchiv.de/">Zum Variarchiv</a>

oder

<a href="https://variarchiv.de/">https://variarchiv.de/</a>

Zwischen <a>und </a> musst du einen Text einfügen, damit der Link sichtbar ist. Du kannst auch einfach den Link selbst einfügen, dann wird er anklickbar.
Mit dem folgenden Code wird beim Klicken ein neuer Browser-Tab geöffnet. Als Handy-User vielleicht etwas lästig.

<a href="https://variarchiv.de/" target="_blank">Zum Variarchiv</a>

Bilder einfügen & anpassen

Eine Website ohne Bilder ist doch langweilig. Daher müssen Bilder unbedingt auf die Seite. Das macht man auch mit einem Link, jedoch mit einem Bild-Link <img>. Füge ein Bild in deinen Ordner, wo bereits deine "index.html" liegt und füge folgenden Code in deine HTML-Seite ein.

<img src="bild.jpg">

Das Bild muss für diesen Code im gleichen Ordner liegen. SRC steht für Source, also Quelle. Der Dateiname muss, wie bei den Links oben, in Anführungsstrichen geschrieben werden.
Ist das Bild dir zu groß? Dann passe den Code an und spiele ein bisschen mit der Zahl:

<img src="bild.jpg" width="400">

Das Bild weiter anzupassen, um es zum Beispiel zu zentrieren, schauen wir uns im nächsten Beitrag an, wenn es um CSS geht.

Bild als Link nutzen

Ein Bild kann auch anklickbar sein und zu einer anderen Seite führen. Modifiziere den Code dazu wie folgt:

<a href="/hobbies.html">
    <img src="bild.jpg" width="200">
</a>

Jetzt haben wir keinen Text als Link, sondern ein Bild zwischen den beiden <a>-Klammern. So wird das Bild zum Link.

PDF verlinken

Statt einer HTML-Seite kannst du auch eine PDF verlinken, die in deinem Website-Ordner liegt. Dazu passt du den Code einfach an und nutzt den richtigen Dateinamen der PDF.

<a href="beispiel.pdf">Meine PDF</a>

Ordnerstruktur

Irgendwann hast du mehrere Bilder und PDFs in deinem Website-Ordner, und es wird ganz schön unübersichtlich. Dann wird es Zeit, dass du Unterordner erstellst – zum Beispiel einen für Bilder und einen für deine PDFs.

Website (Ordner)
|
- Bilder (Ordner)
- PDFs (Ordner)
- index.html
- hobbies.html

Jetzt musst du nur noch deine Links anpassen. Denn bisher hast du die Dateien auf derselben Ebene verlinkt, auf der auch deine HTML-Dateien liegen. Erweitere deine Links einfach um die Ordnernamen:

"/PDFs/beispiel.pdf" oder
"/Bilder/Bild.jpg".

Website erstellen mit Head und Body

Jetzt hast du alles, was du für eine Website brauchst! Wir strukturieren die HTML-Seite noch etwas mit Head und Body und klammern alles mit <html> ein, um den Browser zu unterstützen, damit er weiß, was zur Website gehört. Im Head stehen viele Hintergrundinformationen, die nicht direkt auf deiner Website angezeigt werden, wie zum Beispiel der Titel. Dieser wird im Reiter des Browser-Tabs angezeigt. Füge den Head in alle deine HTML-Seiten ein.

Hier nun der Code für deine Website:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine erste Website</title>
</head>

<body>
    <h1>Meine erste Website</h1>
    <p>
        Willkommen auf meiner ersten Website.
        Hier erzähle ich von meinen Interessen und Hobbys.
    </p>
    <hr>

    <h2>Über mich</h2>
    <p>
        Hallo! Ich lerne gerade HTML und baue meine erste eigene Website.
        Das macht Spaß und ist einfacher als gedacht.
    </p>

    <h2>Meine Hobbys</h2>
    <ul>
        <li>Lesen</li>
        <li>Reiten</li>
        <li>Schwimmen</li>
    </ul>

    <h2>Meine Lieblingsseiten</h2>
    <p>
        <a href="https://variarchiv.de/">Variarchiv besuchen</a>
    </p>

    <h2>Weitere Seiten</h2>
    <p>
        <a href="hobbies.html">Meine Hobbys (eigene Seite)</a>
    </p>
    <hr>
    <p>
        © 2026 – Meine erste Website
    </p>

</body>
</html>

Farben und Layout mit CSS

Es geht noch weiter, denn es fehlen Farben und noch etwas Ordnung. Das machen wir mit CSS – damit kommt der Style rein. Das schauen wir uns aber in Teil 2 an, weil das etwas umfangreicher ist.

Kommentare in deinen Code

Du kannst auch Kommentare in deinem Code hinterlassen, damit du dir merken kannst, was die einzelnen Dinge tun. Ein Kommentar wird vom Browser einfach ignoriert. In HTML-Dateien kannst du so Kommentare schreiben:

<!-- Das ist ein Kommentar -->
 <h1>Meine Website</h1>

Herzlichen Glückwunsch! Du kannst nun HTML!

Weitere hilfreiche Websites zum HTML lernen

Zurück