Einführung in HTML & CSS

HTML definiert die Struktur einer Webseite, CSS bestimmt ihr Aussehen. Zusammen bilden sie die Grundlage jeder modernen Website.

1. HTML – Struktur einer Webseite

HTML steht für Hypertext Markup Language und wird verwendet, um die Struktur und den Inhalt einer Webseite zu definieren.

1.1 Minimales HTML-Grundgerüst

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine Webseite</title>
</head>
<body>
  <h1>Willkommen!</h1>
  <p>Hier ist ein Absatz.</p>
</body>
</html>

1.2 Wichtige HTML-Elemente

Tag	Bedeutung
`<h1>…</h1>`	Überschrift der höchsten Ebene
`<p>…</p>`	Absatz
`<a href="url">…</a>`	Hyperlink
`<img src="bild.jpg" alt="…">`	Bild
`<ul>…</ul>`	Ungeordnete Liste
`<ol>…</ol>`	Geordnete Liste
`<li>…</li>`	Listenelement
`<table>…</table>`	Tabelle
`<tr>…</tr>`	Tabellenzeile
`<th>…</th>`	Tabellenkopfzelle
`<td>…</td>`	Tabellenzelle
`<div>…</div>`	Container / Box

2. CSS – Gestaltung einer Webseite

CSS steht für Cascading Style Sheets und gestaltet Farben, Schriftarten, Abstände und Layout.

2.1 Wichtige CSS-Eigenschaften

Eigenschaft	Bedeutung
`color: #333;`	Farbe des Textes
`font-size: 16px;`	Schriftgröße
`font-family: Arial, sans-serif;`	Schriftart
`background-color: #f1f1f1;`	Hintergrundfarbe
`margin: 10px;`	Außenabstand
`padding: 5px;`	Innenabstand
`border: 1px solid #ccc;`	Rahmen
`text-align: center;`	Textausrichtung

3. CSS in HTML einbinden

3.1 Extern (empfohlen)

<link rel="stylesheet" href="style.css">

3.2 Intern (im `<head>`)

<style>
  h1 { color: #337ab7; }
</style>

3.3 Inline

<h1 style="color: blue;">Willkommen!</h1>

4. Praxisbeispiele

4.1 Tabellen

Name	Alter
Max Mustermann	25
Erika Musterfrau	30

4.2 `<div>`-Elemente

Div Element 1

Ein Beispiel für die Verwendung von <div>-Elementen.

Div Element 2

Ein weiteres Beispiel für <div>-Elemente.

4.3 Umrandungen

Einfacher Rahmen
border: 1px solid black;

Roter Rahmen
border: 2px solid red;

Doppelter blauer Rahmen
border: 3px double blue;

5. Zusammenfassung

HTML strukturiert Inhalte mit Tags.
CSS gestaltet das Aussehen – extern, intern oder inline.
Semantische Tags wie <header>, <main> und <section> verbessern Struktur und SEO.

📦 Ordner zippen & entpacken

Damit du deine fertige Webseite abgeben oder verschicken kannst, packst du deinen Ordner 212 in eine ZIP-Datei. Das funktioniert wie ein Koffer: Alles kommt rein, wird verschlossen – und am Zielort wieder ausgepackt.

🔒 Teil 1: Ordner zippen (verpacken)

🪟 Windows 🍎 Mac

1️⃣ Rechtsklick auf den Ordner 212.

2️⃣ Windows: Wähle „Senden an" → „ZIP-komprimierten Ordner".
Mac: Wähle „Komprimieren".

3️⃣ Es entsteht eine neue Datei 212.zip direkt daneben. 📦

💡 Tipp: Benenne die ZIP-Datei am besten um in Nachname_Vorname_212.zip – dann kann deine Lehrkraft sie eindeutig zuordnen.

🔓 Teil 2: ZIP-Datei entpacken (auspacken)

🪟 Windows 🍎 Mac

1️⃣ Rechtsklick auf die Datei 212.zip.

2️⃣ Windows: Wähle „Alle extrahieren…" und dann einen Zielordner.
Mac: Doppelklick auf die ZIP-Datei – sie entpackt sich automatisch daneben.

3️⃣ Es entsteht wieder der Ordner 212 mit allen Dateien (index.html, zweite.html, dritte.html, bild.jpg).

💡 Tipp: Öffne nach dem Entpacken die Datei index.html im Browser – wenn alles angezeigt wird, hat das Entpacken funktioniert. ✅

🛠️ Arbeitsauftrag: Meine eigene kleine Webseite

Du baust drei HTML-Seiten, die alle untereinander verlinkt sind. Auf der ersten Seite zeigst du ein Bild, eine Tabelle und zwei Boxen mit Umrandung. Auf der zweiten Seite baust du Listen. Auf der dritten Seite probierst du farbige Texte mit CSS aus.
Wichtig: Den HTML-Code musst du dir selbst erschließen – schau im Unterrichtsteil oben nach, welche Tags du brauchst.

📁 Schritt 1 – Ordner anlegen

Lege einen neuen Ordner mit dem Namen 212 an. Alle Dateien kommen in diesen Ordner.

📁 212/
  ├── 🌐 index.html
  ├── 🌐 zweite.html
  ├── 🌐 dritte.html
  └── 🖼️ bild.jpg

🖼️ Schritt 2 – Bild speichern

Suche ein Bild aus dem Internet und speichere es im Ordner 212 unter dem Namen bild.jpg. Der Dateiname muss exakt so heißen.

📝 Schritt 3 – Datei index.html bauen

Deine Startseite soll enthalten:

✅ eine Überschrift <h1> „Willkommen auf meiner Startseite"
✅ eine Navigation mit Links zu index.html, zweite.html und dritte.html
✅ dein Bild bild.jpg (Breite ca. 300 px)
✅ eine Tabelle mit 2 Spalten und 3 Zeilen
✅ zwei <div>-Boxen mit Text und farbiger Umrandung

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Startseite</title>
</head>
<body>

  <!-- Navigation mit Links zu allen drei Seiten -->
  <!-- Überschrift -->
  <!-- Bild -->
  <!-- Tabelle -->
  <!-- Zwei Boxen mit Umrandung -->

</body>
</html>

📝 Schritt 4 – Datei zweite.html bauen

Deine zweite Seite soll enthalten:

✅ die Überschrift „Ich bin die zweite Seite"
✅ eine Navigation zu allen drei Seiten
✅ eine ungeordnete Liste <ul> mit deinen Hobbys
✅ eine geordnete Liste <ol> mit deinen Lieblingsfächern

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Zweite Seite</title>
</head>
<body>

  <!-- Navigation mit Links zu allen drei Seiten -->
  <!-- Überschrift -->
  <!-- Hobby-Liste -->
  <!-- Lieblingsfächer-Liste -->

</body>
</html>

⭐ Schritt 5 (Zusatzaufgabe) – Datei dritte.html mit Farben

Baue eine dritte Seite dritte.html, auf der du Überschrift, Absatz und Listenelemente in unterschiedlichen Farben darstellst. Nutze dafür CSS – entweder als <style>-Block im <head> oder inline.

Deine dritte Seite soll enthalten:

✅ eine Navigation zu allen drei Seiten
✅ eine Überschrift in roter Farbe
✅ einen Absatz in grüner Farbe
✅ eine Liste, bei der jedes Listenelement eine andere Farbe hat

▶️ Schritt 6 – Testen

Öffne index.html im Browser. Von jeder Seite musst du zu jeder anderen Seite navigieren können – und wieder zurück. Probier alle Wege aus!

📤 Schritt 7 – Abgabe: Ordner zippen & hochladen

Wenn alles funktioniert, verpackst du deinen Ordner:

Rechtsklick auf den Ordner 212
Windows: „Senden an" → „ZIP-komprimierten Ordner"
Mac: „Komprimieren"
Die Datei 212.zip umbenennen in Nachname_Vorname_212.zip
Die ZIP-Datei im Klassenordner / Moodle hochladen!

Zur Erinnerung: Wie das genau geht, steht oben im Abschnitt 📦 Ordner zippen & entpacken.

👀 So könnte dein Ergebnis aussehen

🌐 index.html

Start Zweite Dritte

Willkommen auf meiner Startseite

🖼️ bild.jpg

Hobby	Seit
Fußball	2018
Fotografieren	2020
Programmieren	2024

Über mich

Ich bin 15 Jahre alt.

Mein Ziel

Eine eigene Webseite bauen.

Seite 1 – index.html

🌐 zweite.html

Start Zweite Dritte

Ich bin die zweite Seite

Meine Hobbys

Fußball
Musik hören
Zocken

Meine Lieblingsfächer

Informatik
Sport
Mathe

Seite 2 – zweite.html

🌐 dritte.html

Start Zweite Dritte

Ich bin die dritte Seite

Dieser Absatz ist grün – gestaltet mit CSS.

Meine Farben-Liste

Blauer Listenpunkt
Oranger Listenpunkt
Lila Listenpunkt
Türkiser Listenpunkt

Seite 3 – dritte.html (Zusatzaufgabe)

✅ Geschafft! Du hast drei verlinkte HTML-Seiten gebaut und deinen Ordner als ZIP-Datei abgegeben.

1. HTML – Struktur einer Webseite

1.1 Minimales HTML-Grundgerüst

1.2 Wichtige HTML-Elemente

2. CSS – Gestaltung einer Webseite

2.1 Wichtige CSS-Eigenschaften

3. CSS in HTML einbinden

3.1 Extern (empfohlen)

3.2 Intern (im <head>)

3.3 Inline

4. Praxisbeispiele

4.1 Tabellen

4.2 <div>-Elemente

Div Element 1

Div Element 2

4.3 Umrandungen

5. Zusammenfassung

📦 Ordner zippen & entpacken

🔒 Teil 1: Ordner zippen (verpacken)

🔓 Teil 2: ZIP-Datei entpacken (auspacken)

🛠️ Arbeitsauftrag: Meine eigene kleine Webseite

👀 So könnte dein Ergebnis aussehen

Willkommen auf meiner Startseite

Über mich

Mein Ziel

Ich bin die zweite Seite

Meine Hobbys

Meine Lieblingsfächer

Ich bin die dritte Seite

Meine Farben-Liste

3.2 Intern (im `<head>`)

4.2 `<div>`-Elemente