{"id":5150,"date":"2026-03-09T16:26:31","date_gmt":"2026-03-09T15:26:31","guid":{"rendered":"https:\/\/support.sparkles.io\/kennisbank\/how-to-html-css-basics-teil-1\/"},"modified":"2026-05-05T09:39:57","modified_gmt":"2026-05-05T08:39:57","slug":"how-to-html-css-basics-teil-1","status":"publish","type":"ht_kb","link":"https:\/\/support.sparkles.io\/de\/kennisbank\/how-to-html-css-basics-teil-1\/","title":{"rendered":"How to: HTML &amp; CSS Basics (Teil 1)"},"content":{"rendered":"\n<p>HTML und CSS bilden zusammen die Grundlage vieler Websites. HTML verwendest du, um den Inhalt aufzubauen, wie \u00dcberschriften, Texte, Links und Listen. CSS nutzt du, um diesen Inhalt zu gestalten, etwa Farben, Abst\u00e4nde, Schriftgr\u00f6\u00dfen und Ausrichtung. In dieser Anleitung lernst du Schritt f\u00fcr Schritt die Grundlagen kennen, ohne komplizierte Fachsprache.   <\/p>\n\n<p>Versuche die \u00dcbungen auf <a href=\"https:\/\/codepen.io\/pen\/\" target=\"_blank\" rel=\"noreferrer noopener\">dieser Seite<\/a><\/p>\n\n<h2 class=\"wp-block-heading\">Was ist HTML?<\/h2>\n\n<p>HTML steht f\u00fcr <strong>HyperText Markup Language<\/strong>. Es ist die Struktur einer Webseite. Du kannst es dir wie das Skelett eines Hauses vorstellen. Mit HTML gibst du an, was etwas ist: ein Titel, ein Absatz, ein Link, eine Liste oder ein Bild.   <\/p>\n\n<p>HTML arbeitet mit <strong>Elementen<\/strong>. Ein Element erkennst du meist an einem \u00f6ffnenden Tag und einem schlie\u00dfenden Tag. <\/p>\n\n<pre class=\"wp-block-preformatted\"><p>Dies ist ein Absatz<\/p><\/pre>\n\n<p>In diesem Beispiel ist <code>&lt;p&gt;<\/code> der \u00f6ffnende Tag und <code>&lt;\/p&gt;<\/code> der schlie\u00dfende Tag. Alles dazwischen ist der Inhalt. <\/p>\n\n<h2 class=\"wp-block-heading\">Was ist CSS?<\/h2>\n\n<p>CSS steht f\u00fcr <strong>Cascading Style Sheets<\/strong>. CSS bestimmt, wie HTML aussieht. Denke an Farbe, Schriftart, R\u00e4nder, Hintergrundfarbe und die Gr\u00f6\u00dfe von Elementen.  <\/p>\n\n<p>Stell dir HTML als den Inhalt eines Raumes vor und CSS als dessen Einrichtung und Styling.<\/p>\n\n<pre class=\"wp-block-preformatted\">p {\n  color: blue;\n  font-size: 18px;\n}<\/pre>\n\n<p>In diesem Beispiel erhalten alle Abs\u00e4tze eine blaue Farbe und eine Schriftgr\u00f6\u00dfe von 18 Pixeln.<\/p>\n\n<h2 class=\"wp-block-heading\">Wie sieht HTML aus?<\/h2>\n\n<p>Eine einfache HTML-Struktur kann so aussehen:<\/p>\n\n<pre class=\"wp-block-preformatted\"><h1>Willkommen auf meiner Seite<\/h1>\n<p>Dies ist mein erster Textabschnitt.<\/p>\n<a href=\"https:\/\/voorbeeld.nl\">Hier klicken<\/a><\/pre>\n\n<p>Hier siehst du drei verschiedene Elemente:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;h1&gt;<\/code>  f\u00fcr eine Haupt\u00fcberschrift<\/li>\n\n\n\n<li><code>&lt;p&gt;<\/code>  f\u00fcr einen Absatz<\/li>\n\n\n\n<li><code>&lt;a&gt;<\/code>  f\u00fcr einen Link<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Die wichtigsten HTML-Elemente<\/h2>\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Element<\/strong><\/td><td><strong>Wof\u00fcr verwendest du es?<\/strong><\/td><\/tr><tr><td><strong>&lt;h1&gt; bis &lt;h6&gt;<\/strong><\/td><td>F\u00fcr \u00dcberschriften und Zwischen\u00fcberschriften<\/td><\/tr><tr><td><strong>&lt;p&gt;<\/strong><\/td><td>F\u00fcr normalen Text in Abs\u00e4tzen<\/td><\/tr><tr><td><strong>&lt;a&gt;<\/strong><\/td><td>F\u00fcr Links<\/td><\/tr><tr><td><strong>&lt;ol&gt;<\/strong><\/td><td>F\u00fcr eine nummerierte Liste<\/td><\/tr><tr><td><strong>&lt;ul&gt;<\/strong><\/td><td>F\u00fcr eine Liste mit Aufz\u00e4hlungspunkten (Bullet Points)<\/td><\/tr><tr><td><strong>&lt;li&gt;<\/strong><\/td><td>F\u00fcr einen Eintrag innerhalb einer Liste<\/td><\/tr><tr><td><strong>&lt;div&gt;<\/strong><\/td><td>Zum Gruppieren gr\u00f6\u00dferer Bl\u00f6cke<\/td><\/tr><tr><td><strong>&lt;span&gt;<\/strong><\/td><td>F\u00fcr kleine Textst\u00fccke innerhalb einer Zeile<\/td><\/tr><tr><td><strong>&lt;img&gt;<\/strong><\/td><td>F\u00fcr Bilder<\/td><\/tr><tr><td><strong>&lt;strong&gt;<\/strong><\/td><td>F\u00fcr wichtigen Text, meist fettgedruckt<\/td><\/tr><tr><td><strong>&lt;em&gt;<\/strong><\/td><td>Zur Hervorhebung, meist kursiv<\/td><\/tr><tr><td><strong>&lt;br&gt;<\/strong><\/td><td>F\u00fcr einen Zeilenumbruch<\/td><\/tr><\/tbody><\/table><\/figure>\n\n<h2 class=\"wp-block-heading\">\u00dcberschriften: h1 bis h6<\/h2>\n\n<p>\u00dcberschriften verwendest du, um Struktur in deine Seite zu bringen. Das <code>&lt;h1&gt;<\/code> ist die wichtigste \u00dcberschrift auf der Seite. Danach folgen <code>&lt;h2&gt;<\/code>, <code>&lt;h3&gt;<\/code> und so weiter.  <\/p>\n\n<pre class=\"wp-block-preformatted\"><h1>Meine Website<\/h1>\n<h2>\u00dcber mich<\/h2>\n<h3>Meine Hobbys<\/h3><\/pre>\n\n<p>Benutze \u00dcberschriften nicht nur, weil sie gro\u00df sind, sondern vor allem, weil sie dem Inhalt Struktur geben.<\/p>\n\n<h2 class=\"wp-block-heading\">Abs\u00e4tze: p<\/h2>\n\n<p>Einen Absatz verwendest du f\u00fcr normale Textbl\u00f6cke.<\/p>\n\n<pre class=\"wp-block-preformatted\"><p>Ich lerne Schritt f\u00fcr Schritt, wie HTML funktioniert.<\/p><\/pre>\n\n<p>Fast der gesamte Flie\u00dftext auf einer Seite steht in einem <code>&lt;p&gt;<\/code>-Element.<\/p>\n\n<h2 class=\"wp-block-heading\">Links: a<\/h2>\n\n<p>Mit dem <code>&lt;a&gt;<\/code>-Element erstellst du einen Link. Die Adresse setzt du in das Attribut <code>href<\/code>. <\/p>\n\n<pre class=\"wp-block-preformatted\"><a href=\"https:\/\/www.google.com\">Gehe zu Google<\/a><\/pre>\n\n<p>Was zwischen den Tags steht, ist der klickbare Text.<\/p>\n\n<p>Du kannst einen Link auch in einem neuen Tab \u00f6ffnen:<\/p>\n\n<pre class=\"wp-block-preformatted\"><a href=\"https:\/\/www.google.com\" target=\"_blank\">Google in neuem Tab \u00f6ffnen<\/a><\/pre>\n\n<p>Hinweis: Verwende Links am besten f\u00fcr echte Verweise auf andere Seiten, nicht nur um Text zu formatieren.<\/p>\n\n<h2 class=\"wp-block-heading\">Listen: ul, ol und li<\/h2>\n\n<p>Es gibt zwei h\u00e4ufig verwendete Arten von Listen:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>ul<\/strong>: eine unnummerierte Liste mit Aufz\u00e4hlungspunkten<\/li>\n\n\n\n<li><strong>ol<\/strong>: eine nummerierte Liste<\/li>\n<\/ul>\n\n<p>Die Eintr\u00e4ge in der Liste setzt du immer in <code>&lt;li&gt;<\/code>-Elemente.<\/p>\n\n<p>Beispiel f\u00fcr eine Liste mit Aufz\u00e4hlungspunkten:<\/p>\n\n<pre class=\"wp-block-preformatted\"><ul>\n  <li>\u00c4pfel<\/li>\n  <li>Bananen<\/li>\n  <li>Birnen<\/li>\n<\/ul><\/pre>\n\n<p>Beispiel f\u00fcr eine nummerierte Liste:<\/p>\n\n<pre class=\"wp-block-preformatted\"><ol>\n  <li>\u00d6ffne deinen Editor<\/li>\n  <li>Schreibe HTML<\/li>\n  <li>Sieh dir das Ergebnis an<\/li>\n<\/ol><\/pre>\n\n<h2 class=\"wp-block-heading\">Bl\u00f6cke und Inline-Elemente: div und span<\/h2>\n\n<p>Dies ist ein wichtiger Unterschied in HTML.<\/p>\n\n<p>Ein <code>&lt;div&gt;<\/code> ist ein <strong>Block-Element<\/strong>. Es wird oft verwendet, um gr\u00f6\u00dfere Teile einer Seite zu gruppieren, wie eine Karte, einen Abschnitt oder eine Spalte. <\/p>\n\n<pre class=\"wp-block-preformatted\"><div>\n  <h2>Nachricht<\/h2>\n  <p>Dies ist eine kurze Nachricht.<\/p>\n<\/div><\/pre>\n\n<p>Ein <code>&lt;span&gt;<\/code> ist ein <strong>Inline-Element<\/strong>. Das bedeutet, dass es innerhalb einer Zeile bleibt. Du verwendest es oft, um ein kleines St\u00fcck Text separat zu stylen.  <\/p>\n\n<pre class=\"wp-block-preformatted\"><p>Dieser Text enth\u00e4lt ein <span>wichtiges Wort<\/span>.<\/p><\/pre>\n\n<p>Kurz gesagt:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Verwende <code>&lt;div&gt;<\/code> f\u00fcr gr\u00f6\u00dfere Bl\u00f6cke oder Gruppen<\/li>\n\n\n\n<li>Verwende <code>&lt;span&gt;<\/code> f\u00fcr kleine Textst\u00fccke innerhalb einer Zeile<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Bilder: img<\/h2>\n\n<p>Mit <code>&lt;img&gt;<\/code> f\u00fcgst du ein Bild hinzu. Dieses Element hat keinen schlie\u00dfenden Tag. <\/p>\n\n<pre class=\"wp-block-preformatted\"><img  title=\"\" decoding=\"async\" src=\"bloem.jpg\"  alt=\"bloem How to: HTML &amp; CSS Basics (Teil 1)\" \/><\/pre>\n\n<p>Dabei bedeutet:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>src<\/code>: der Pfad zum Bild<\/li>\n\n\n\n<li><code>alt<\/code>: eine Beschreibung des Bildes<\/li>\n<\/ul>\n\n<p>Der <code>alt<\/code>-Text ist wichtig f\u00fcr die Barrierefreiheit und wird auch angezeigt, wenn das Bild nicht geladen werden kann.<\/p>\n\n<h2 class=\"wp-block-heading\">Wichtiger Text: strong und em<\/h2>\n\n<p>Wenn du einem Wort oder Satz besonderen Nachdruck verleihen willst, verwendest du oft:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;strong&gt;<\/code>  f\u00fcr wichtigen Text<\/li>\n\n\n\n<li><code>&lt;em&gt;<\/code>  f\u00fcr Hervorhebung<\/li>\n<\/ul>\n\n<pre class=\"wp-block-preformatted\"><p>Dies ist <strong>sehr wichtig<\/strong>.<\/p>\n<p>Lies dir das <em>gut<\/em> durch.<\/p><\/pre>\n\n<h2 class=\"wp-block-heading\">Attribute in HTML<\/h2>\n\n<p>Manche HTML-Elemente ben\u00f6tigen zus\u00e4tzliche Informationen. Diese setzt du in <strong>Attribute<\/strong>. <\/p>\n\n<pre class=\"wp-block-preformatted\"><a href=\"https:\/\/voorbeeld.nl\">Besuche die Website<\/a><\/pre>\n\n<p>In diesem Beispiel ist <code>href<\/code> ein Attribut.<\/p>\n\n<p>Andere h\u00e4ufig verwendete Attribute sind zum Beispiel:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>class<\/code>  f\u00fcr CSS-Styling<\/li>\n\n\n\n<li><code>id<\/code>  f\u00fcr ein eindeutiges Element<\/li>\n\n\n\n<li><code>src<\/code>  f\u00fcr Bilder<\/li>\n\n\n\n<li><code>alt<\/code>  f\u00fcr Alternativtext<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Was ist eine Class?<\/h2>\n\n<p>Eine <code>class<\/code> verwendest du, um einem Element einen Namen zu geben, den du in CSS nutzen kannst.<\/p>\n\n<pre class=\"wp-block-preformatted\"><p class=\"intro\">Dies ist ein Einleitungstext.<\/p><\/pre>\n\n<p>In CSS kannst du diese Class dann so stylen:<\/p>\n\n<pre class=\"wp-block-preformatted\">.intro {\n  font-size: 20px;\n  color: darkblue;\n}<\/pre>\n\n<p>Der Punkt vor <code>.intro<\/code> in CSS bedeutet, dass du eine Class ansprichst.<\/p>\n\n<h2 class=\"wp-block-heading\">CSS mit HTML verkn\u00fcpfen<\/h2>\n\n<p>CSS kannst du auf mehrere Arten hinzuf\u00fcgen, aber f\u00fcr die Grundlagen ist es hilfreich zu verstehen, wie HTML und CSS zusammenh\u00e4ngen.<\/p>\n\n<p>Angenommen, du hast dieses HTML:<\/p>\n\n<pre class=\"wp-block-preformatted\"><p class=\"highlight\">Dieser Text f\u00e4llt auf.<\/p><\/pre>\n\n<p>Dann kannst du mit CSS sagen, wie dieses Element aussehen soll:<\/p>\n\n<pre class=\"wp-block-preformatted\">.highlight {\n  background-color: yellow;\n  padding: 10px;\n}<\/pre>\n\n<p>So gibst du diesem Absatz einen gelben Hintergrund und etwas Innenabstand.<\/p>\n\n<h2 class=\"wp-block-heading\">H\u00e4ufig verwendete CSS-Eigenschaften<\/h2>\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>CSS-Eigenschaft<\/strong><\/td><td><strong>Was macht sie?<\/strong><\/td><\/tr><tr><td><strong>color<\/strong><\/td><td>Bestimmt die Textfarbe<\/td><\/tr><tr><td><strong>background-color<\/strong><\/td><td>Bestimmt die Hintergrundfarbe<\/td><\/tr><tr><td><strong>font-size<\/strong><\/td><td>Bestimmt die Schriftgr\u00f6\u00dfe<\/td><\/tr><tr><td><strong>font-weight<\/strong><\/td><td>Macht Text zum Beispiel fett<\/td><\/tr><tr><td><strong>text-align<\/strong><\/td><td>Richtet Text links, rechts oder zentriert aus<\/td><\/tr><tr><td><strong>margin<\/strong><\/td><td>Abstand au\u00dferhalb eines Elements<\/td><\/tr><tr><td><strong>padding<\/strong><\/td><td>Abstand innerhalb eines Elements<\/td><\/tr><tr><td><strong>border<\/strong><\/td><td>Erzeugt einen Rand um ein Element<\/td><\/tr><tr><td><strong>width<\/strong><\/td><td>Bestimmt die Breite<\/td><\/tr><tr><td><strong>height<\/strong><\/td><td>Bestimmt die H\u00f6he<\/td><\/tr><\/tbody><\/table><\/figure>\n\n<h2 class=\"wp-block-heading\">Ein einfaches Praxisbeispiel<\/h2>\n\n<p>Hier unten siehst du ein kleines St\u00fcck HTML:<\/p>\n\n<pre class=\"wp-block-preformatted\"><div class=\"kaart\">\n  <h2>Willkommen<\/h2>\n  <p>Sch\u00f6n, dass du hier bist.<\/p>\n  <a href=\"#\">Mehr lesen<\/a>\n<\/div><\/pre>\n\n<p>Und dies ist das zugeh\u00f6rige CSS:<\/p>\n\n<pre class=\"wp-block-preformatted\">.kaart {\n  background-color: #f5f5f5;\n  padding: 20px;\n  border: 1px solid #dddddd;\n}\n\n.kaart h2 {\n  color: #333333;\n}\n\n.kaart a {\n  color: #0055cc;\n}<\/pre>\n\n<p>Was passiert hier?<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Das <code>div<\/code> erh\u00e4lt einen hellgrauen Hintergrund<\/li>\n\n\n\n<li>Es entsteht Platz innerhalb des Blocks<\/li>\n\n\n\n<li>Es entsteht ein Rand drumherum<\/li>\n\n\n\n<li>Die \u00dcberschrift und der Link erhalten ihre eigene Farbe<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Der Unterschied zwischen Margin und Padding<\/h2>\n\n<p>Anf\u00e4nger verwechseln diese beiden oft, das ist ganz normal.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>padding<\/strong> ist Platz <strong>innerhalb<\/strong> des Elements<\/li>\n\n\n\n<li><strong>margin<\/strong> ist Platz <strong>au\u00dferhalb<\/strong> des Elements<\/li>\n<\/ul>\n\n<p>Stell es dir wie einen Karton vor:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Padding ist der Platz zwischen dem Inhalt und dem Rand des Kartons<\/li>\n\n\n\n<li>Margin ist der Platz zwischen diesem Karton und anderen Kartons drumherum<\/li>\n<\/ul>\n\n<pre class=\"wp-block-preformatted\">.box {\n  padding: 20px;\n  margin: 30px;\n  border: 1px solid black;\n}<\/pre>\n\n<h2 class=\"wp-block-heading\">Kleine \u00dcbung 1<\/h2>\n\n<p>Erstelle selbst eine einfache Einleitung mit:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>einer Haupt\u00fcberschrift<\/li>\n\n\n\n<li>einem Absatz<\/li>\n\n\n\n<li>einem Link<\/li>\n<\/ul>\n\n<p>Versuche es erst selbst. Schau dir erst danach das Beispiel unten an. <\/p>\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Beispielantwort<\/summary>\n<pre class=\"wp-block-preformatted\"><h1>Willkommen auf meiner Seite<\/h1>\n<p>Ich lerne gerade, wie HTML funktioniert.<\/p>\n<a href=\"https:\/\/voorbeeld.nl\">Mehr ansehen<\/a><\/pre>\n<\/details>\n\n<h2 class=\"wp-block-heading\">Kleine \u00dcbung 2<\/h2>\n\n<p>Erstelle eine Einkaufsliste mit mindestens drei Eintr\u00e4gen. Verwende daf\u00fcr eine unnummerierte Liste. <\/p>\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Beispielantwort<\/summary>\n<pre class=\"wp-block-preformatted\"><ul>\n  <li>Brot<\/li>\n  <li>Milch<\/li>\n  <li>K\u00e4se<\/li>\n<\/ul><\/pre>\n<\/details>\n\n<h2 class=\"wp-block-heading\">Kleine \u00dcbung 3<\/h2>\n\n<p>Erstelle einen Block mit einem Titel und Text und gib diesem Block via CSS eine Hintergrundfarbe und Padding.<\/p>\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Beispielantwort<\/summary>\n<pre class=\"wp-block-preformatted\"><div class=\"info-blok\">\n  <h2>\u00dcber diesen Kurs<\/h2>\n  <p>Hier lernst du die Grundlagen von HTML und CSS.<\/p>\n<\/div><\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">.info-blok {\n  background-color: #eeeeee;\n  padding: 20px;\n}<\/pre>\n<\/details>\n\n<h2 class=\"wp-block-heading\">H\u00e4ufige Fehler bei Anf\u00e4ngern<\/h2>\n\n<ul class=\"wp-block-list\">\n<li>Einen schlie\u00dfenden Tag vergessen, wie zum Beispiel  <code>&lt;\/p&gt;<\/code><\/li>\n\n\n\n<li>Elemente falsch verschachteln, zum Beispiel ein <code>&lt;li&gt;<\/code> au\u00dferhalb einer Liste<\/li>\n\n\n\n<li>Eine <code>class<\/code> in HTML verwenden, aber diesen Namen in CSS nicht korrekt \u00fcbernehmen<\/li>\n\n\n\n<li>Zu viele <code>&lt;br&gt;<\/code>-Tags f\u00fcr Abst\u00e4nde verwenden, obwohl du eigentlich CSS-Margin oder Padding brauchst<\/li>\n\n\n\n<li>Ein <code>div<\/code> verwenden, wo ein besseres semantisches Element logischer w\u00e4re<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Was bedeutet semantisches HTML?<\/h2>\n\n<p>Semantisches HTML bedeutet, dass du Elemente basierend auf ihrer Bedeutung verwendest. Also nicht einfach alles in ein <code>&lt;div&gt;<\/code> setzen, sondern dar\u00fcber nachdenken, was etwas wirklich ist. <\/p>\n\n<p>Zum Beispiel:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Ein Titel ist eine \u00dcberschrift, also verwende <code>&lt;h1&gt;<\/code> oder  <code>&lt;h2&gt;<\/code><\/li>\n\n\n\n<li>Ein Textabschnitt ist ein Absatz, also verwende  <code>&lt;p&gt;<\/code><\/li>\n\n\n\n<li>Eine Liste ist ein <code>&lt;ul&gt;<\/code> oder  <code>&lt;ol&gt;<\/code><\/li>\n<\/ul>\n\n<p>Dies macht deinen Code klarer, sauberer und besser f\u00fcr Suchmaschinen sowie Barrierefreiheit.<\/p>\n\n<h2 class=\"wp-block-heading\">Wie wendest du das in der Praxis an?<\/h2>\n\n<p>Wenn du ein St\u00fcck Inhalt bauen willst, denke immer in dieser Reihenfolge:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Was m\u00f6chte ich zeigen?<\/li>\n\n\n\n<li>Welches HTML-Element passt dazu?<\/li>\n\n\n\n<li>M\u00f6chte ich es danach noch mit CSS stylen?<\/li>\n\n\n\n<li>Ben\u00f6tigt das Element eine Class?<\/li>\n<\/ul>\n\n<p>Zum Beispiel: Du m\u00f6chtest eine Karte mit einem Titel, Text und Button erstellen. Dann beginnst du mit HTML f\u00fcr die Struktur und f\u00fcgst erst danach CSS f\u00fcr die Gestaltung hinzu. <\/p>\n\n<h2 class=\"wp-block-heading\">Mini-Beispiel: ein einfacher Inhaltsblock<\/h2>\n\n<pre class=\"wp-block-preformatted\"><div class=\"content-blok\">\n  <h2>HTML und CSS lernen<\/h2>\n  <p>Mit ein paar Grundregeln kannst du schon schnell viel erreichen.<\/p>\n  <a href=\"#\">Direkt starten<\/a>\n<\/div><\/pre>\n\n<pre class=\"wp-block-preformatted\">.content-blok {\n  background-color: #f8f8f8;\n  padding: 24px;\n  border-radius: 8px;\n}\n\n.content-blok a {\n  color: #0066cc;\n  font-weight: bold;\n}<\/pre>\n\n<h2 class=\"wp-block-heading\">Zusammenfassung<\/h2>\n\n<p>Du hast nun die Grundlagen von HTML und CSS kennengelernt. HTML verwendest du, um den Inhalt und die Struktur einer Seite aufzubauen. CSS nutzt du, um diesen Inhalt zu gestalten. Die wichtigsten HTML-Elemente f\u00fcr Anf\u00e4nger sind \u00dcberschriften, Abs\u00e4tze, Links, Listen, Divs und Spans. Sobald du verstehst, was jedes Element macht, wird es viel einfacher, Seiten logisch aufzubauen.    <\/p>\n\n<p>Der beste Weg, dies zu lernen, ist, viele kleine St\u00fccke selbst zu erstellen, auszuprobieren und zu schauen, was passiert.<\/p>\n\n<h2 class=\"wp-block-heading\">\u00dcbungsaufgabe f\u00fcr dich selbst<\/h2>\n\n<p>Versuche selbst einen kleinen Profilblock zu erstellen mit:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>einem Titel mit deinem Namen<\/li>\n\n\n\n<li>einem kurzen Absatz \u00fcber dich selbst<\/li>\n\n\n\n<li>einer Liste mit drei Hobbys<\/li>\n\n\n\n<li>einem Link zu einer Website<\/li>\n<\/ul>\n\n<p>Gib dem Block danach in CSS eine Hintergrundfarbe, Padding und einen Rand. Wenn das klappt, hast du die wichtigsten Grundlagen schon gut verstanden. <\/p>\n\n<p>Probiere es auf <a href=\"https:\/\/codepen.io\/pen\/\">dieser Seite<\/a> selbst aus<\/p>\n","protected":false},"excerpt":{"rendered":"<p class=\"qua-blog-post-description\">HTML und CSS bilden zusammen die Grundlage vieler Websites. HTML verwendest du, um den Inhalt aufzubauen, wie \u00dcberschriften, Texte, Links und Listen. CSS nutzt du, um diesen Inhalt zu gestalten, etwa Farben, Abst\u00e4nde, Schriftgr\u00f6\u00dfen und Ausrichtung. In dieser Anleitung lernst du Schritt f\u00fcr Schritt die Grundlagen kennen, ohne komplizierte Fachsprache. Versuche die \u00dcbungen auf dieser [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"ht-kb-category":[429,483],"ht-kb-tag":[],"class_list":["post-5150","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-cms","ht_kb_category-verwalten"],"featured_img":false,"coauthors":[],"author_meta":{"author_link":"https:\/\/support.sparkles.io\/de\/author\/admin\/","display_name":"Sparkles Support"},"relative_dates":{"created":"Ver\u00f6ffentlicht 2\u00a0Monaten vor","modified":"Aktualisiert 2\u00a0Tagen vor"},"absolute_dates":{"created":"Ver\u00f6ffentlicht am 09\/03\/2026","modified":"Aktualisiert am 05\/05\/2026"},"absolute_dates_time":{"created":"Ver\u00f6ffentlicht am 09\/03\/2026 16:26","modified":"Aktualisiert am 05\/05\/2026 09:39"},"featured_img_caption":"","tax_additional":{"ht_kb_category":{"linked":["<a href=\"https:\/\/support.sparkles.io\/artikel-categorieen\/cms\/\" class=\"advgb-post-tax-term\">CMS<\/a>","<a href=\"https:\/\/support.sparkles.io\/de\/artikel-categorieen\/verwalten\/\" class=\"advgb-post-tax-term\">Verwalten<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">CMS<\/span>","<span class=\"advgb-post-tax-term\">Verwalten<\/span>"],"slug":"ht_kb_category","name":"Article Categories"},"ht_kb_tag":{"linked":[],"unlinked":[],"slug":"ht_kb_tag","name":"Article Tags"}},"series_order":"","_links":{"self":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/5150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/comments?post=5150"}],"version-history":[{"count":1,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/5150\/revisions"}],"predecessor-version":[{"id":5151,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb\/5150\/revisions\/5151"}],"wp:attachment":[{"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/media?parent=5150"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb-category?post=5150"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/support.sparkles.io\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=5150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}