World Wide Web - Eine Einführung in HTML & CSS
Willkommen zur letzten Stunde vor den Weihnachtsferien! 🎄
Heute erstellen wir unsere erste eigene Webseite und gestalten am Ende eine winterliche Schnee-Landschaft mit HTML, CSS und KI-Unterstützung!
Was ist das World Wide Web?
Das World Wide Web (WWW oder kurz "Web") ist ein System von verlinkten Dokumenten, die über das Internet abgerufen werden können. Es wurde 1989 von Tim Berners-Lee am CERN erfunden.
Wichtige Begriffe:
- HTML (HyperText Markup Language): Die Sprache, mit der Webseiten strukturiert werden
- CSS (Cascading Style Sheets): Die Sprache, mit der Webseiten gestaltet werden
- Browser: Das Programm, das HTML und CSS interpretiert und anzeigt (z.B. Chrome, Firefox, Safari)
- HTTP/HTTPS: Das Protokoll, über das Webseiten übertragen werden
Aufgabe 1: HTML Grundlagen
In dieser Aufgabe lernst du die wichtigsten HTML-Tags kennen und erstellst deine erste kleine Webseite!
Was ist HTML? HTML ist eine Auszeichnungssprache (Markup Language), die aus verschiedenen Tags besteht. Tags beschreiben, welche Art von Inhalt angezeigt werden soll:
<h1>bis<h6>: Überschriften (h1 ist die größte)<p>: Absatz (Paragraph)<a>: Link (Anchor)<img>: Bild (Image)<ul>und<li>: Ungeordnete Liste (Unordered List) und Listenpunkt (List Item)<div>: Container für andere Elemente (Division)
Die HTML-Grundstruktur:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Titel der Seite</title>
</head>
<body>
<!-- Hier kommt der sichtbare Inhalt -->
</body>
</html>Meine erste Webseite
Schritt 1 von 7
Schritt 1: HTML Grundstruktur
Erstelle die grundlegende HTML-Struktur mit <!DOCTYPE html>, <html>, <head> und <body>. Füge im <head> einen <title> mit "Meine Lieblingsthemen" hinzu.
Füge auch <meta charset="UTF-8"> und lang="de" zum html-Tag hinzu.
Code-Editor (Meine erste Webseite)
Aufgabe 2: CSS Grundlagen
Jetzt wird es bunt! Mit CSS kannst du deine Webseite gestalten und verschönern.
Was ist CSS? CSS steht für Cascading Style Sheets und wird verwendet, um HTML-Elementen ein Aussehen zu geben. CSS besteht aus Selektoren und Eigenschaften:
h1 {
color: blue;
font-size: 32px;
}Wichtige CSS-Eigenschaften:
color: Textfarbebackground-color: Hintergrundfarbefont-size: Schriftgröße (z.B.16px,1.5em)font-family: Schriftart (z.B.Arial,'Times New Roman')font-weight: Schriftstärke (bold,normal)margin: Außenabstandpadding: Innenabstandborder: Rahmen (z.B.2px solid black)border-radius: Abgerundete Ecken
Das CSS Box Model:
+---------------------------+
| margin |
| +--------------------+ |
| | border | |
| | +--------------+ | |
| | | padding | | |
| | | +--------+ | | |
| | | | Inhalt | | | |
| | | +--------+ | | |
| | +--------------+ | |
| +--------------------+ |
+---------------------------+Webseite mit CSS gestalten
Schritt 1 von 10
Schritt 1: Style-Tag hinzufügen
Füge ein style-Element im head deiner HTML-Seite hinzu. Hier werden wir alle CSS-Regeln schreiben.
Code-Editor (Webseite mit CSS gestalten)
🎄 Challenge: Schnee-Landschaft mit HTML, CSS & KI
Jetzt wird es kreativ! Erstelle mit HTML und CSS eine winterliche Schnee-Landschaft. Du darfst/sollst dafür KI-Tools wie ChatGPT, Claude oder andere nutzen!
Deine Aufgabe
Erstelle eine Webseite, die eine Schnee-Landschaft zeigt. Sie soll mindestens folgende Elemente enthalten:
Pflicht-Elemente:
- ⛄ Einen Schneemann (aus div-Elementen mit CSS gestylt)
- 🏔️ Berge im Hintergrund
- ❄️ Fallende Schneeflocken
- 🌲 Mindestens einen Tannenbaum
- 🏠 Optional: Ein Haus, ein Schlitten, Tiere, etc.
Technische Anforderungen:
Hinweis
Du kannst diese Anforderungen direkt so der KI Weitergeben, auch wenn du im Moment nicht alles verstehst. Zum Beispiel so:
Erstelle mir HTML und CSS Code für eine winterliche Schnee-Landschaft
mit einem Schneemann, Bergen, Schneeflocken und einem Tannenbaum.
Verwende nur div-Elemente und CSS (kein JavaScript).
Die Landschaft soll hübsch aussehen und winterlich wirken.- Verwende nur HTML und CSS (kein JavaScript)
- Nutze
div-Elemente für die Formen - Style mit CSS:
border-radius,background-color,width,height,position: absoluteoderposition: relative - Nutze
transform: rotate()für schräge Elemente - Verwende Farben, die zur Winterlandschaft passen
Dein Beitrag
- Passe die Farben, Größen und Positionen an
- Füge eigene kreative Elemente hinzu
- Experimentiere gemeinsam mit der KI im Dialog
- Passe im Code an, wenn du kannst!
Bewertungskriterien 🏆
Zum Schluss gibt es ein Voting mit den folgenden Kriterien:
- ⭐ Kreativität: Wie einzigartig ist deine Landschaft?
- ⭐ Details: Wie detailliert sind die Elemente gestaltet?
- ⭐ Farben: Passen die Farben zum Winter?
- ⭐ Vollständigkeit: Sind alle Pflicht-Elemente vorhanden?
Hilfreiche CSS-Eigenschaften für Formen
/* Kreis erstellen */
.kreis {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: white;
}
/* Dreieck erstellen (für Tannenbaum) */
.dreieck {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
}
/* Element positionieren */
.schneemann {
position: absolute;
left: 200px;
top: 300px;
}
/* Element drehen */
.schraeg {
transform: rotate(45deg);
}
/* Himmel als Hintergrund */
body {
background: linear-gradient(to bottom, #87CEEB, #ffffff);
height: 100vh;
margin: 0;
}Beispiel-Struktur (als Inspiration)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Winterliche Schnee-Landschaft</title>
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(to bottom, #87CEEB, #E0F6FF);
overflow: hidden;
position: relative;
}
/* Hier kommen deine CSS-Regeln */
</style>
</head>
<body>
<!-- Hier kommen deine HTML-Elemente -->
</body>
</html>Zusatzaufgaben (wenn noch Zeit ist)
Animationen hinzufügen: Lass die Schneeflocken mit CSS-Animationen fallen
css@keyframes fallen { from { top: -50px; } to { top: 100vh; } }Hover-Effekte: Lass Elemente reagieren, wenn man mit der Maus drüberfährt
css.schneemann:hover { transform: scale(1.1); }Mehr Details: Füge Fenster ins Haus, Äste an die Bäume, einen Schal am Schneemann, etc.