In diesem Kurs bauen wir Schritt für Schritt eine kleine Webseite über die vier Elemente (Feuer, Erde, Luft, Wasser) auf. Jede Aufgabe baut auf der vorherigen auf – die Dateien, die du einmal angelegt hast, werden immer weiter ausgebaut.
vier-elemente/). Alle Dateien, die du erstellst, kommen in diesen Ordner.
| Nr. | Aufgabe | Thema / Tags | Lösung |
|---|---|---|---|
| A01 | Das Grundgerüst – index.html anlegen | <html> <head> <body> <title> <meta> HTML | Musterlösung |
| A02 | Feuer – Erste Textstruktur | <h1> <h2> <p> HTML | Musterlösung |
| A03 | Feuer – Textauszeichnung & Sonderzeichen | <strong> <em> <br> & ° ² HTML | Musterlösung |
| A04 | Erde – Listen | <ul> <ol> <li> HTML | Musterlösung |
| A05 | Startseite – Navigation & Links | <a href> <nav> <ul> HTML | Musterlösung |
| A06 | Luft – Tabellen | <table> <tr> <th> <td> <thead> <tbody> HTML | Musterlösung |
| A07 | Wasser – Bilder einbinden | <img> alt-Attribut <figure> <figcaption> HTML | Musterlösung |
| Nr. | Aufgabe | Thema / Eigenschaften | Lösung |
|---|---|---|---|
| A08 | Erstes CSS – Farben & Schrift | color font-family font-size background-color CSS | Musterlösung |
| A09 | Externes Stylesheet – alle Seiten stylen | <link rel="stylesheet"> Kaskade Vererbung CSS | Musterlösung (CSS) |
| A10 | Selektoren – gezielt stylen | Klassen IDs Pseudoklassen :hover :nth-child CSS | Musterlösung (CSS) |
| A11 | Flexbox – Navigation & Startseite layouten | display:flex flex-direction justify-content align-items gap CSS | Musterlösung |
| A12 | Grid – Elementseiten layouten | display:grid grid-template-columns grid-area CSS | Musterlösung |
| Nr. | Aufgabe | Thema / Eigenschaften | Lösung |
|---|---|---|---|
| A13 | Media Queries – Responsive Design | @media max-width min-width CSS | Musterlösung (CSS) |
| A14 | WebFonts & Symbole | Google Fonts @font-face Icon Fonts CSS | Musterlösung (CSS) |
| A15 | Bonus: Kontaktformular | <form> <input> <label> <button> HTML CSS | Musterlösung |
| A16 | jQuery UI | $( function() { ... } ); JS | Musterlösung |
BOK HTML5-Einführungskurs · Aufgabenkatalog „Die vier Elemente"