Ich mache mir meine eigene Homepage mit HTML und CSS 🌸
CSS bedeutet:
Mit CSS bestimmen wir das Aussehen einer Webseite.
HTML ist für den Inhalt zuständig CSS für das Design (also das Aussehen)
Mit CSS gibt es Farben, andere Schriftarten, Abstände, Animationen, kurz ein modernes Design
Mit CSS ist sehr viel möglich
| HTML | CSS |
|---|---|
| Überschrift | Farbe |
| Bild | Größe |
| Liste | Abstand |
| Link | Hover-Effekt |
| Inhalt | Layout |
👉 HTML baut die Seite
👉 CSS macht sie schön
Wir starten mit einer einfachen HTML-Seite
Die Datei ist Homepage_01.html
Inhalt:
Öffne Homepage_01.html
Ändere:
Zum Beispiel:
🌟 Ziel: Die Homepage soll zu DIR passen.
In der nächsten Version wird ein Avatarbild eingefügt.
Die Datei Homepage_02.html
Neu:
<img src="images/avatar01.jpg" alt="Mein Avatar" width="200">
Suche diese Zeile:
<img src="images/avatar01.jpg">
Ändere den Dateinamen oder die Größe
Zum Beispiel:
width="300"
💡 Was passiert mit dem Bild?
In Homepage_03.html kommt ein Link dazu.
<a href="https://www.sonnenbergschule.de">
Ersetze die Webseite durch die URL Deiner Schule (also Wiggy)
In Homepage_04.html gibt es neue HTML-Elemente:
<header><main><section><footer>Das sind semantische Elemente
Das hilft:
In HomepageCSS_01.html wird erstmals CSS eingebunden:
<link rel="stylesheet" href="styles_01.css">
Damit wird eine externe CSS-Datei geladen.
Datei: styles_01.css
body {
background-color: pink;
}
👉 Die komplette Webseite wird pink.
Probiert andere Farben aus:
background-color: lightblue;
oder
background-color: black;
🌟 Welche Farbe gefällt euch am besten?
oder
background-color: lavendel;
In styles_02.css wird zusätzlich die Überschrift verändert.
h1 {
color: deeppink;
}
Probiert:
Oder Hex-Farben:
color: #ff00aa;
In styles_03.css wird die Homepage richtig schön.
Neue optische Elemente:
Ändert:
Zum Beispiel:
border-radius: 50%;
👉 Diese CSS-Eigenschaft macht Bilder rund.
Die Datei styles_04.css zeigt ein besonders auffälliges Design.
Highlights:
Jetzt dürft ihr kreativ werden 🎨
Ideen:
🌟 Ziel: Eine Homepage, die euch gefällt.
Im Internet findet ihr viele CSS-Vorlagen, https://htmlrev.com/
Eine gute Webseite ist:
✅ schön
✅ verständlich
✅ übersichtlich
✅ schnell
✅ gut lesbar
✅ angenehm zu bedienen
Das nennt man: UX = User Experience
👉 Wie sich eine Webseite für Menschen anfühlt.
Fast alle benutzen:
Darum brauchen Firmen Menschen, die:
Gerade bei uns gibt es viele spannende Möglichkeiten.
Zum Beispiel bei:
Gestaltet Webseiten, Videos und digitale Inhalte.
Entwirft moderne Webseiten.
Verbessert Apps und Webseiten für Nutzer.
Entwickelt Spielwelten und Benutzeroberflächen.
Gestaltet Displays und Bedienoberflächen in Autos oder Maschinen.
Künstliche Intelligenz verändert Design gerade enorm.
Beispiele:
Wer kreativ UND technisch interessiert ist, hat in Zukunft sehr gute Chancen 🚀
Heute habt ihr gelernt:
✅ HTML-Grundlagen
✅ CSS verwenden
✅ Farben & Design
✅ Bilder & Links
✅ moderne Webseiten gestalten
✅ was UX bedeutet
Und vor allem: