Lernfabrik

📚 Zusammenfassung - Alles was du gelernt hast

🎉 Herzlichen Glückwunsch!
Du hast in den letzten 6 Einheiten die Grundlagen von HTML gelernt. Jetzt kannst du deine eigenen Webseiten bauen!

🏗️ 1. Das Grundgerüst

Jede HTML-Seite hat dieses Grundgerüst:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Meine Webseite</title>
</head>
<body>
  Hier kommt der sichtbare Inhalt hin
</body>
</html>
<!DOCTYPE html>

Sagt: "Das ist HTML5"

<html>

Das HTML-Dokument

<head>

Infos über die Seite (nicht sichtbar)

<body>

Der sichtbare Inhalt

📝 2. Überschriften & Absätze

<h1> - <h6>

Überschriften (Größe 1-6)

Beispiel:

<h1>Titel</h1>
<p>

Absatz (Textblock)

Beispiel:

<p>Text</p>
<br>

Zeilenumbruch

Beispiel:

Zeile 1<br>
Zeile 2
<strong>

Fetter Text (wichtig)

Beispiel:

<strong>wichtig</strong>
<em>

Kursiver Text (betont)

Beispiel:

<em>betont</em>

📋 3. Listen

<ul>

Ungeordnete Liste (Punkte)

<ul>
  <li>Punkt 1</li>
  <li>Punkt 2</li>
</ul>
<ol>

Geordnete Liste (Nummern)

<ol>
  <li>Schritt 1</li>
  <li>Schritt 2</li>
</ol>
<dl>

Definitionsliste

<dl>
  <dt>HTML</dt>
  <dd>...Erklärung...</dd>
</dl>

📊 4. Tabellen

<table>

Tabelle mit Rahmen

<table border="1">
  <tr>
    <th>Name</th>
    <th>Alter</th>
  </tr>
  <tr>
    <td>Max</td>
    <td>16</td>
  </tr>
</table>
<caption>

Tabellenüberschrift

<table>
  <caption>Meine Noten</caption>
  <tr>
    <th>Fach</th>
    <th>Note</th>
  </tr>
</table>

🖼️ 5. Bilder

<img>

Bild einfügen

<img src="bild.jpg" alt="Beschreibung">
src

Quelle (wo liegt das Bild?)

  • bild.jpg - gleicher Ordner
  • bilder/foto.jpg - Unterordner
  • ../logo.png - übergeordneter Ordner
  • https://...jpg - aus dem Internet
alt

Alternativtext (wichtig!)

Beispiel:

<img src="hund.jpg" alt="Ein niedlicher Hund">

🔗 6. Hyperlinks

<a>

Der Anker - Grundlage des Internets

<a href="Ziel">Text</a>

Verschiedene Arten von Links:

Typ Code Beispiel
Extern href="https://google.de" Google
Intern href="seite.html" Nach oben
E-Mail href="mailto:email@beispiel.de" E-Mail
Mit Beschreibung title="Beschreibung" Google

🧪 7. Teste dein Wissen

✏️ Aufgabe: Finde die Fehler!

In diesem Code sind 6 Fehler versteckt. Finde sie alle!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meine Webseite</title>
</head>
<body>
<h1>Willkommen<h1> ← Fehler!
<p>Das ist meine Webseite<p> ← Fehler!
<img src="bild.jpg"> ← Fehler!
<a href="https://google.de">Google</a>
<body> ← Fehler!
<html> ← Fehler!
🔍 Lösung anzeigen
  1. <h1>Willkommen</h1> → Schließendes </h1> fehlt!
  2. <p>Das ist meine Webseite</p> → Schließendes </p> fehlt!
  3. <img src="bild.jpg"> → Attribut alt fehlt!
  4. <body> (am Ende) → Muss </body> sein!
  5. <html> (am Ende) → Muss </html> sein!
  6. <html> (am Anfang) → Für Deutsch besser: <html lang="de">

📋 8. Alle wichtigen Tags - Cheat Sheet

Tag Name Verwendung Beispiel
<!DOCTYPE html> Dokumenttyp Muss immer ganz oben stehen <!DOCTYPE html>
<html> HTML-Dokument Umhüllt die ganze Seite <html lang="de">
<head> Kopf Infos über die Seite <head>...</head>
<title> Titel Zeigt im Browser-Tab <title>Meine Seite</title>
<body> Körper Alles Sichtbare kommt hier rein <body>...</body>
<h1> - <h6> Überschriften Text strukturieren <h1>Titel</h1>
<p> Absatz Normaler Text <p>Text</p>
<br> Zeilenumbruch Neue Zeile Text<br>neue Zeile
<strong> Fett Wichtiger Text <strong>wichtig</strong>
<em> Kursiv Betontes Wort <em>betont</em>
<ul> Ungeordnete Liste Aufzählung mit Punkten <ul><li>...</li></ul>
<ol> Geordnete Liste Nummerierte Liste <ol><li>...</li></ol>
<li> Listenelement Ein Punkt in einer Liste <li>Punkt</li>
<table> Tabelle Daten tabellarisch <table border="1">...</table>
<tr> Tabellenreihe Eine Zeile <tr>...</tr>
<th> Tabellenkopf Überschrift (fett) <th>Name</th>
<td> Tabellendaten Normale Zelle <td>Max</td>
<img> Bild Bild einfügen (selbstschließend) <img src="bild.jpg" alt="Beschreibung">
<a> Link Hyperlink erstellen <a href="ziel">Text</a>
<!-- --> Kommentar Notizen im Code (nicht sichtbar) <!-- Das ist ein Kommentar -->

✅ 9. Deine persönliche Checkliste

📋 Hake ab, was du schon kannst!
  • Ich kann das Grundgerüst einer HTML-Seite schreiben
  • Ich kann Überschriften (<h1> bis <h6>) verwenden
  • Ich kann Absätze (<p>) schreiben
  • Ich kann Zeilenumbrüche (<br>) einfügen
  • Ich kann Text fett (<strong>) machen
  • Ich kann Text kursiv (<em>) machen
  • Ich kann ungeordnete Listen (<ul>) erstellen
  • Ich kann geordnete Listen (<ol>) erstellen
  • Ich kann Tabellen (<table>) erstellen
  • Ich kann Bilder (<img>) einfügen
  • Ich kann Links (<a>) erstellen
  • Ich kann eine komplette Webseite von Grund auf bauen

🎉 Super gemacht! Du bist jetzt ein HTML-Anfänger!

Du hast die Grundlagen gelernt. Jetzt kannst du deine eigenen Webseiten bauen!

🚀 10. Was kommt als nächstes?

📘 CSS

Design und Styling

  • Farben ändern
  • Schriftarten
  • Layout gestalten
Weiter zu CSS

🖥️ Projekt

Deine eigene Webseite

  • Startseite erstellen
  • Navigation bauen
  • Alles kombinieren
Zum Projekt

📱 Responsive

Für alle Geräte

  • Mobile Ansicht
  • Tablet-Ansicht
  • Desktop-Ansicht
Weiter zu Responsive

🎯 11. Abschlussübung

✏️ Bau deine eigene Mini-Webseite!

Erstelle eine Webseite mit allen gelernten Elementen:

📄 Startseite (index.html)
  • <h1> mit Begrüßung
  • <p> mit kurzer Vorstellung
  • Navigation mit Links zu allen Seiten
  • Ein Bild
📄 Über mich (ueber_mich.html)
  • <h2> Über mich
  • <p> mit Beschreibung
  • <ul> mit Hobbys
  • Link zurück zur Startseite
📄 Meine Noten (noten.html)
  • <h2> Meine Noten
  • <table> mit Fächern und Noten
  • <caption> für Tabellenüberschrift
  • Link zurück zur Startseite
📄 Kontakt (kontakt.html)
  • <h2> Kontakt
  • <a href="mailto:..."> E-Mail-Link
  • Ein Bild
  • Link zurück zur Startseite
Zurück: Hyperlinks Zur Übersicht Starte dein Projekt!