Peter Monadjemi
Trainer and educator for developer topics
🎨 Webseiten erstellen mit HTML und CSS (Teil 2)
Ich mache mir meine eigene Homepage mit HTML und CSS 🌸
Wiederholungen müssen sein
- Wann wurde das World Wide Web (kurz Web) erfunden?
- Wer hat das Web erfunden?
- Aus was besteht das Web?
- Warum heißt das Web so?
- Für was steht HTML?
HTML alleine ist sehr langweilig
- HTML ist wirklich nur Text
- Text wird im Browser immer gleich dargestellt
- Damit eine Webseite hübscht wird, braucht man CSS
💡 Was ist CSS?
CSS bedeutet:
Cascading Style Sheets
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 = eine Homepage so wie ich sie mir vorstelle
| HTML | CSS |
|---|---|
| Überschrift | Farbe |
| Bild | Größe |
| Liste | Abstand |
| Link | Hover-Effekt |
| Inhalt | Layout |
👉 HTML baut die Seite
👉 CSS macht sie schön
🌸 Unsere erste Homepage
Wir starten mit einer einfachen HTML-Seite
Die Datei ist Homepage_01.html
Inhalt:
- Überschrift
- Hobbys
- Schule
- Wohnort
🧩 Übung 1: Eine erste Änderung
Öffne Homepage_01.html
Ändere:
- den Namen
- die Hobbys
- den Wohnort
Zum Beispiel:
- Zeichnen
- Gaming
- Reiten
- Anime
- Musik
🌟 Ziel: Die Homepage soll zu DIR passen.
🖼️ Bilder machen Webseiten lebendig
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">
🧩 Übung 2: Eigenes Bild einbauen
Suche diese Zeile:
<img src="images/avatar01.jpg">
Ändere den Dateinamen oder die Größe
Zum Beispiel:
width="300"
💡 Was passiert mit dem Bild?
🔗 Webseiten können verlinken
In Homepage_03.html kommt ein Link dazu.
<a href="https://www.sonnenbergschule.de">
- Die Namen in den spitzen Klammern sind die Attribute.
- Jedes Attribut besitzt einen Wert, der in Anführungszeichen oder Apostrophe gesetzt wird.
🧩 Übung 3: Auf die Schulhomepage verlinken
Ersetze die Webseite durch die URL Deiner Schule (also Wiggy)
🏗️ Moderne Webseiten bestehen aus Bereichen
In Homepage_04.html gibt es neue HTML-Elemente:
<header><main><section><footer>
Das sind semantische Elemente
Das hilft:
- beim Strukturieren
- beim Design
- für Suchmaschinen
- für Barrierefreiheit
🎀 Jetzt kommt CSS!
In HomepageCSS_01.html wird erstmals CSS eingebunden:
<link rel="stylesheet" href="styles_01.css">
Damit wird eine externe CSS-Datei geladen.
🌸 Die erste CSS-Regel
- Eine CSS-Datei besteht aus Regeln.
- Eine Regel wird über einen Selektor einem oder mehreren HTML-Elementen zugeordnet.
- Eine Regel muss immer HTML-Elementen zugeordnet werden.
Datei: styles_01.css
body {
background-color: pink;
}
👉 Die komplette Webseite wird pink.
🧩 Übung 4: Farben ändern
Probiert andere Farben aus:
background-color: lightblue;
oder
background-color: black;
🌟 Welche Farbe gefällt euch am besten?
oder
background-color: lavendel;
✨ Überschriften gestalten
In styles_02.css wird zusätzlich die Überschrift verändert.
h1 {
color: deeppink;
}
🧩 Übung 5: Eigene Schriftfarben
Probiert:
- purple
- turquoise
- gold
- orange
- lime
Oder Hex-Farben:
color: #ff00aa;
💎 Webseiten noch schöner gestalten
In styles_03.css wird die Homepage richtig schön.
Neue optische Elemente:
- Schriftarten
- Zentrierung
- Rahmen
- runde Bilder
- Hover-Effekte
- Schatten
🧩 Übung 6: Design verändern
Ändert:
- die Schriftgröße
- die Rahmenfarbe
- die Bildgröße
- die Hintergrundfarbe
Zum Beispiel:
border-radius: 50%;
👉 Diese CSS-Eigenschaft macht Bilder rund.
🌈 Cosplay-Style & Neon-Design
Die Datei styles_04.css zeigt ein besonders auffälliges Design.
Highlights:
- Farbverläufe
- Neon-Effekte
- Schatten
- Glow
- futuristische Farben
🧩 Übung 7: Eine Homepage, die zu Dir passt
Jetzt dürft ihr kreativ werden 🎨
Ideen:
- Anime-Stil
- Gaming-Style
- Kawaii
- Cyberpunk
- Fantasy
- Minimalistisch
- Pastellfarben
🌟 Ziel: Eine Homepage, die euch gefällt.
Im Internet findet ihr viele CSS-Vorlagen, https://htmlrev.com/
🧠 Was gute Webseiten ausmacht
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.
📱 Warum UX heute so wichtig ist
Fast alle benutzen:
- Smartphones
- Apps
- Webseiten
- Online-Shops
- soziale Netzwerke
Darum brauchen Firmen Menschen, die:
- gut gestalten können
- kreativ sind
- logisch denken
- Nutzer verstehen
🚗 Berufsmöglichkeiten in Design & UX
Gerade bei uns gibt es viele spannende Möglichkeiten.
Zum Beispiel bei:
- Bei Daimler, Porsche, Bosch usw.
- Bei Maschinenbau-Unternehmen
- Bei Softwarefirmen
- Bei Medienagenturen
- Bei Spieleentwicklern
💼 Spannende Berufe
🎨 Mediengestalterin
Gestaltet Webseiten, Videos und digitale Inhalte.
💻 Webdesignerin
Entwirft moderne Webseiten.
📱 UX-Designerin
Verbessert Apps und Webseiten für Nutzer.
🎮 Game Designerin
Entwickelt Spielwelten und Benutzeroberflächen.
🚘 UI-Designerin in der Industrie
Gestaltet Displays und Bedienoberflächen in Autos oder Maschinen.
🤖 Design + KI = Zukunft
Künstliche Intelligenz verändert Design gerade enorm.
Beispiele:
- KI-Bildgeneratoren
- automatische Layouts
- Sprachsteuerung
- intelligente Assistenten
- virtuelle Welten
Wer kreativ UND technisch interessiert ist, hat in Zukunft sehr gute Chancen 🚀
🌟 Zum Schluss...
Heute habt ihr gelernt:
✅ HTML-Grundlagen
✅ CSS verwenden
✅ Farben & Design
✅ Bilder & Links
✅ moderne Webseiten gestalten
✅ was UX bedeutet
Und vor allem:
Ihr könnt Euch jetzt eine Homepage bauen 🎉
💖 Kleine Abschlussfrage
Wie würde Eure perfekte Homepage aussehen?
- Welche Farben?
- Welcher Stil?
- Welche Inhalte?
- Für wen?
🎨 Webseiten erstellen mit HTML und CSS (Teil 2)
By Peter Monadjemi
🎨 Webseiten erstellen mit HTML und CSS (Teil 2)
Teil 2 des Moduls "Homepage erstellen mit HTML und CSS" im Rahmen des Girls Digital Camp
- 9
