🌐 HTML – Dein Einstieg ins Web

💡 Was ist HTML?
HTML ist die Sprache des Internets. Jede Webseite, die du besuchst, besteht aus HTML-Code. Es ist wie das Skelett einer Webseite – es gibt die Struktur vor.

📝 Los geht's – Schritt für Schritt

Wir erstellen zusammen deine erste eigene HTML-Seite – von Null an!

1 Visual Studio Code installieren

VS Code ist ein kostenloser Texteditor speziell für Programmierung. Damit schreiben wir unseren Code.

➡️ Gehe auf code.visualstudio.com
➡️ Lade die Version für dein Betriebssystem herunter (Windows, Mac oder Linux)
➡️ Installiere VS Code – einfach immer "Weiter" klicken

💡 Tipp: Nach der Installation öffne VS Code und schließe es wieder – so ist es bereit für den nächsten Schritt.

2 Einen Ordner für deine Webseite anlegen

Lege einen Ordner auf deinem Computer an, in dem du alle Dateien für deine Webseite speicherst.

➡️ Klicke mit der rechten Maustaste auf deinen Desktop oder in "Dokumente"
➡️ Wähle "Neuer Ordner" und nenne ihn z.B. meine_erste_webseite

3 VS Code öffnen und den Ordner laden

➡️ Öffne Visual Studio Code
➡️ Klicke auf "Datei" → "Ordner öffnen"
➡️ Wähle den Ordner meine_erste_webseite aus und klicke auf "Ordner auswählen"

💡 Tipp: Jetzt siehst du links den Explorer – dort werden später deine Dateien angezeigt.

4 Die Datei `index.html` erstellen

Ganz wichtig: Die Hauptdatei einer Webseite heißt immer index.html.

➡️ Klicke im linken Explorer auf das Symbol "Neue Datei" (ein Blatt mit Stern) oder drücke Strg+N
➡️ Gib als Namen index.html ein und drücke Enter

⚠️ Achtung: Die Datei muss mit .html enden – sonst erkennt der Browser sie nicht!

5 Das Grundgerüst einfügen

Jetzt kommt der spannende Teil – wir schreiben unseren ersten HTML-Code!

Gib folgenden Code in deine index.html ein:

      <!-- Das ist das Grundgerüst jeder HTML-Seite -->

      <!DOCTYPE html>

      <html lang="de">

      <head>

        <meta charset="UTF-8">

        <title>Meine erste Webseite</title>

      </head>

      <body>

        <!-- Alles was hier steht, wird im Browser angezeigt -->

      </body>

      </html>

💡 Tipp: Du musst den Code nicht auswendig lernen – er ist immer gleich. Du kannst ihn einfach kopieren und einfügen!

6 Speichern – aber richtig!

➡️ Drücke Strg+S (Windows) oder Cmd+S (Mac)
➡️ Oder klicke auf "Datei" → "Speichern"

⚠️ Wichtig: Speichere regelmäßig – am besten nach jeder kleinen Änderung!

7 Die Seite im Browser öffnen

➡️ Gehe zu dem Ordner meine_erste_webseite auf deinem Computer
➡️ Doppelklicke auf die Datei index.html
➡️ Sie öffnet sich jetzt in deinem Standard-Browser (Chrome, Firefox, Edge ...)

🎉 Glückwunsch! Du hast deine erste Webseite erstellt – auch wenn sie noch leer ist. Jetzt füllen wir sie mit Leben!

✏️ Jetzt kommt Inhalt rein – Text formatieren

Füge zwischen <body> und </body> folgende Elemente ein. Speichere nach jedem Schritt und aktualisiere den Browser (F5).

1 Überschriften – `<h1>` bis `<h6>`

Überschriften gliedern deine Seite. <h1> ist die größte, <h6> die kleinste.

      <h1>Das ist die Hauptüberschrift</h1>

      <h2>Das ist eine Unterüberschrift</h2>

      <h3>Das ist eine kleinere Überschrift</h3>

Das ist die Hauptüberschrift

Das ist eine Unterüberschrift

Das ist eine kleinere Überschrift

2 Absätze – `<p>`

Mit <p> (paragraph) erstellst du Textabsätze. Der Browser macht automatisch Abstand zwischen den Absätzen.

      <p>Das ist der erste Absatz. Hier steht dein Einleitungstext.</p>

      <p>Das ist der zweite Absatz. Er ist inhaltlich getrennt vom ersten.</p>

Das ist der erste Absatz. Hier steht dein Einleitungstext.

Das ist der zweite Absatz. Er ist inhaltlich getrennt vom ersten.

3 Fett, kursiv und unterstrichen

Tag	Wirkung	Beispiel
`<strong>`	Wichtiger Text (fett)	Das ist wichtig!
`<b>`	Fett (optisch)	Fetter Text
`<em>`	Betonung (kursiv)	Das wird betont
`<i>`	Kursiv (optisch)	Kursiver Text
`<u>`	Unterstrichen	Unterstrichener Text
`<mark>`	Hervorgehoben (Marker)	Markierter Text

      <p>Das ist ein <strong>wichtiger</strong> Hinweis und <em>das hier wird betont</em>.</p>
    

Das ist ein wichtiger Hinweis und das hier wird betont.

4 Listen – `<ul>` und `<ol>`

Ungeordnete Liste (Punkte) und geordnete Liste (Nummerierung).

          <!-- Ungeordnete Liste -->

          <ul>

            <li>Punkt 1</li>

            <li>Punkt 2</li>

            <li>Punkt 3</li>

          </ul>

          <!-- Geordnete Liste -->

          <ol>

            <li>Schritt 1</li>

            <li>Schritt 2</li>

            <li>Schritt 3</li>

          </ol>

Punkt 1
Punkt 2
Punkt 3

Schritt 1
Schritt 2
Schritt 3

5 Links – `<a>`

Mit Links verbindest du deine Seite mit anderen Webseiten.

      <a href="https://www.google.de" target="_blank">Hier geht's zu Google</a>
    

Hier geht's zu Google (würde im echten Leben zu Google führen)

💡 Tipp: Mit target="_blank" öffnet sich der Link in einem neuen Tab.

6 Zeilenumbruch (`<br>`) & Trennlinie (`<hr>`)

      <p>Zeile 1<br>

      Zeile 2</p>

      <hr>

      <p>Text nach der Trennlinie</p>

Zeile 1
Zeile 2

Text nach der Trennlinie

🎯 Deine Aufgabe – jetzt bist du dran!

✏️ Erstelle deine eigene HTML-Seite

Füge in deine index.html folgende Elemente ein:

Eine Hauptüberschrift <h1> mit deinem Namen
Eine Unterüberschrift <h2> mit deinem Hobby oder Thema
Zwei Absätze <p> mit Text über dich
Ein fettes und ein kursives Wort
Eine ungeordnete Liste mit 3 deiner Lieblingsdinge
Einen Link zu deiner Lieblingswebseite
Eine horizontale Trennlinie zwischen zwei Abschnitten

⚠️ Nicht vergessen: Nach jeder Änderung speichern (Strg+S) und im Browser die Seite aktualisieren (F5)!

📊 Alle wichtigen Tags auf einen Blick

Tag	Bedeutung
`<!DOCTYPE html>`	Muss ganz oben stehen – sagt dem Browser: "Das ist HTML5"
`<html>`	Das Wurzelelement – umschließt alles
`<head>`	Kopfbereich – Infos über die Seite (nicht sichtbar)
`<title>`	Titel der Seite (steht im Browser-Tab)
`<body>`	Körper – alles hier wird angezeigt
`<h1>` – `<h6>`	Überschriften (1 = größte, 6 = kleinste)
`<p>`	Absatz (Textblock)
`<strong>` / `<b>`	Fett (strong = semantisch wichtig)
`<em>` / `<i>`	Kursiv (em = betont)
`<u>`	Unterstrichen
`<mark>`	Markiert (wie Textmarker)
`<ul>`	Ungeordnete Liste (Punkte)
`<ol>`	Geordnete Liste (Nummerierung)
`<li>`	Listenpunkt (innerhalb von ul/ol)
`<a href="...">`	Link (Hyperlink)
`<br>`	Zeilenumbruch (ohne schließendes Tag)
`<hr>`	Trennlinie (ohne schließendes Tag)

🖱️ Was passiert beim Doppelklick auf `index.html`?

Wenn du auf deine index.html doppelklickst, passiert Folgendes:

Dein Browser (Chrome, Firefox, Edge, Safari) wird geöffnet
Der Browser liest den HTML-Code Zeile für Zeile
Er interpretiert die Tags und zeigt die Seite so an, wie du sie gestaltet hast
Du siehst deine Überschriften, Absätze, Listen, Links und alles andere direkt im Browser

💡 Wichtig: Du kannst die index.html jederzeit ändern, speichern und dann im Browser mit F5 aktualisieren – deine Änderungen werden sofort sichtbar!