{"id":5394,"date":"2025-09-25T13:52:28","date_gmt":"2025-09-25T06:52:28","guid":{"rendered":"https:\/\/siammakemoney.com\/?p=5394"},"modified":"2026-01-30T17:35:20","modified_gmt":"2026-01-30T10:35:20","slug":"code-html-css-js","status":"publish","type":"post","link":"https:\/\/siammakemoney.com\/de\/code-html-css-js\/","title":{"rendered":"Beinhaltet grundlegenden HTML-, CSS- und JS-Code."},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-color has-link-color wp-elements-b811a28942ca2757d0d4f299fd4594c6\" style=\"color:#0c3237\">Beinhaltet grundlegenden HTML-, CSS- und JS-Code.<\/h2>\n\n\n\n<h2 class=\"wp-block-heading has-accent-color has-text-color has-link-color wp-elements-a375b967830d5f566e720aaf520c1dd9\">Einfache Verlinkungen in Text und Bildern.<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-767f52782f39e0b3c47c611b337d606b\">F\u00fcgen Sie den Link in die Nachricht ein.<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-50200cfd227cffefe741b68107661577\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;p&gt;\n  Visit my website:\n  &lt;a href=\"https:\/\/siammakemoney.com\" target=\"_blank\"&gt;\n    SiamMakeMoney\n  &lt;\/a&gt;\n&lt;\/p&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-75adf87f1edfd1785f973fcef4d6723d\">F\u00fcge den Link in das Bild ein.<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-63527b0e77ae93fe577833ed05cd1694\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;a href=\"https:\/\/siammakemoney.com\" target=\"_blank\"&gt;\n  &lt;img src=\"https:\/\/via.placeholder.com\/300x200\" alt=\"SiamMakeMoney\"&gt;\n&lt;\/a&gt;\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Gew\u00f6hnliches Bild<\/h2>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-2beab887686d068e39024df708e1f59e\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;img src=\"https:\/\/via.placeholder.com\/300x200\" alt=\"Sample Image\"&gt;<\/code><\/pre>\n\n\n<style scoped>.gc-numhead{align-items:center;display:flex;flex-wrap:wrap;margin-bottom:30px}@media only screen and (min-width:480px){.gc-numhead{flex-wrap:nowrap}}.gc-numhead__title{margin:0!important}.gc-numhead__sub{line-height:20px;margin-top:5px;opacity:.5}.gc-numhead__circle{border:3px solid #111;border-radius:50%;box-sizing:content-box;display:inline-block;font-size:23px;font-weight:700;height:40px;line-height:40px;margin-right:19px;min-width:40px;text-align:center;width:40px}.gc-numhead__position{color:#d3d3d3;font-size:70px;font-weight:700;line-height:1;margin-right:19px}.gc-numhead__position span{line-height:.78}.gc-numhead__position span:after{content:\".\"}.gc-numhead__logo{margin-left:auto;margin-top:18px;width:100%}@media only screen and (min-width:480px){.gc-numhead__logo{margin-top:0;width:auto}}.gc-numhead__logo img{max-height:60px;width:auto!important}.gc-numhead__logo-cont{display:inline-block;max-height:60px;max-width:150px}.gc-numhead__mcenter{display:block;text-align:center}@media only screen and (min-width:480px){.gc-numhead__mcenter{display:flex;text-align:inherit}}.gc-numhead__mcenter .gc-numhead__circle{margin-bottom:15px;margin-right:0}@media only screen and (min-width:480px){.gc-numhead__mcenter .gc-numhead__circle{margin-bottom:0;margin-right:19px}}.gc-numhead__mcenter .gc-numhead__position{margin-bottom:15px;margin-right:0}@media only screen and (min-width:480px){.gc-numhead__mcenter .gc-numhead__position{margin-bottom:0;margin-right:19px}}<\/style><div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead090e\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>1<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#10a399\">Beispielcode f\u00fcr eine Stichpunktliste.<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><br>Dies ist ein HTML-Tag, mit dem Unterpunkte innerhalb einer Liste erstellt werden. Es kann in gepunkteten oder nummerierten Listen verwendet werden, wobei jeder Unterpunkt einen einzelnen Listeneintrag repr\u00e4sentiert. Beispiele hierf\u00fcr sind Produktlisten, Men\u00fcs oder Schritt-f\u00fcr-Schritt-Anleitungen. Es ist, als ob man \u201eeinen einzigen Eintrag\u201c in einer Liste h\u00e4tte, wodurch die Informationen \u00fcbersichtlich, leicht lesbar und klar verst\u00e4ndlich werden.<\/div><\/div><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"732\" height=\"516\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot.webp\" alt=\"\" class=\"wp-image-6036\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot.webp 732w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot-300x211.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot-18x12.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot-400x282.webp 400w\" sizes=\"auto, (max-width: 732px) 100vw, 732px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-8713bff98c6ffac55c14922eb51d4f22\" style=\"border-style:none;border-width:0px\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n}\n\n\/* Section box *\/\n.list-box {\n  max-width: 600px;\n  background: #fff;\n  padding: 25px 30px;\n  border-radius: 14px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n  margin-bottom: 30px;\n}\n\nh2 {\n  color: #333;\n}\n\n\/* Unordered list *\/\nul.custom-ul {\n  list-style: none;\n  padding-left: 0;\n}\n\nul.custom-ul li {\n  padding-left: 28px;\n  margin-bottom: 12px;\n  position: relative;\n}\n\nul.custom-ul li::before {\n  content: \"\u2714\";\n  position: absolute;\n  left: 0;\n  color: #4a6cff;\n  font-weight: bold;\n}\n\n\/* Ordered list *\/\nol.custom-ol {\n  counter-reset: item;\n  list-style: none;\n  padding-left: 0;\n}\n\nol.custom-ol li {\n  counter-increment: item;\n  margin-bottom: 12px;\n  padding-left: 30px;\n  position: relative;\n}\n\nol.custom-ol li::before {\n  content: counter(item);\n  position: absolute;\n  left: 0;\n  background: #4a6cff;\n  color: #fff;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  text-align: center;\n  line-height: 22px;\n  font-size: 13px;\n}\n&lt;\/style&gt;\n\n\n&lt;div class=\"list-box\"&gt;\n  &lt;h2&gt;Unordered List (Bullet)&lt;\/h2&gt;\n  &lt;ul class=\"custom-ul\"&gt;\n    &lt;li&gt;Learn HTML basics&lt;\/li&gt;\n    &lt;li&gt;Style pages with CSS&lt;\/li&gt;\n    &lt;li&gt;Make websites interactive with JavaScript&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/div&gt;\n\n&lt;div class=\"list-box\"&gt;\n  &lt;h2&gt;Ordered List (Numbered)&lt;\/h2&gt;\n  &lt;ol class=\"custom-ol\"&gt;\n    &lt;li&gt;Plan your website structure&lt;\/li&gt;\n    &lt;li&gt;Design the layout and style&lt;\/li&gt;\n    &lt;li&gt;Publish and improve continuously&lt;\/li&gt;\n  &lt;\/ol&gt;\n&lt;\/div&gt;\n\n<\/code><\/pre>\n\n\n<style scoped>\n            .gc-box{margin-bottom:30px;padding:20px;border-left:5px solid transparent;line-height:24px}.gc-box .label-info{background-color:#5bc0de;display:inline-block;margin:0 5px 10px 0;padding:3px 6px;font-size:75%;font-weight:700;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;line-height:14px}.gc-box.green_type{color:#3c763d;background-color:#dff0d8;border-color:#cae6be}.gc-box.blue_type{color:#31708f;background-color:#d9edf7;border-color:#bcdff1}.gc-box.red_type{color:#a94442;background-color:#f2dede;border-color:#e8c4c4}.gc-box.grey_type{background:#ddd;border-color:#ccc;color:#444}.gc-box.info_type{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.gc-box.info_type svg{fill:#30a030}.gc-box.download_type{color:#004085;background-color:#cce5ff;border-color:#b8daff}.gc-box.download_type svg{fill:#3a9aff}.gc-box.update_type{color:#004458;background-color:#d9edf7;border:1px solid #bce8f1}.gc-box.notice_type{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.gc-box.notice_type svg{fill:#f7a000}.gc-box.error_type{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.gc-box.error_type svg{fill:#c70000}.gc-box.border_type{border:2px solid #ddd}.gc-box.icon_type{display:flex}.gc-box.icon_type .gc-box-icon{width:28px}.gc-box.icon_type .gc-box-text{flex-grow:1;margin:0 15px}.gc-box-text > *{margin-bottom: 20px;}\n        .gc-box-text > *:last-child{margin-bottom:0}        \n        <\/style><div class=\"gc-box notice_type icon_type\" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><svg x=\"0px\" y=\"0px\" viewbox=\"0 0 486.463 486.463\" > <g> <g> <path d=\"M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4 C268.225,344.682,256.925,333.382,243.225,333.382z\"\/> <path d=\"M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4 l-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8 C430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8 c-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8 l156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z\"\/> <path d=\"M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7 c0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9 c0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z\"\/> <\/g> <\/g> <\/svg><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<h3 class=\"wp-block-heading\" style=\"font-size:25px\">CSS-Code zum Entfernen eines Punktes. <code>&lt;li&gt;<\/code> Kugel<\/h3>\n\n\n\n<h4 class=\"wp-block-heading has-accent-color has-text-color has-link-color wp-elements-45844484e48bbc7ee1d499a6c0cbaf91\" style=\"font-size:20px\">Entfernen Sie alle Stichpunkte. <code>&lt;ul&gt;<\/code> Und <code>&lt;ol&gt;<\/code> Ganz egal, wo du bist.<\/h4>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-c4b5f2d9a6fad49062aba6419f743610\" style=\"border-style:none;border-width:0px\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>ul, ol {\n  list-style: none !important;\n  padding-left: 0 !important;\n  margin-left: 0 !important;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading has-accent-color has-text-color has-link-color wp-elements-770e044898238e85bdf58fe560daf7f3\" style=\"font-size:20px\">Entfernen Sie die Aufz\u00e4hlungspunkte, die von Pseudoelementen stammen.<\/h4>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-9c50b371256024dadd0ba2f01c9b8a7e\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>li::before {\n  content: none !important;\n}<\/code><\/pre>\n\n<\/div>\n\t\t<\/div>\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead2583\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>2<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#10a399\">F\u00fcge ein Symbolbild hinzu.<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Icons sind kleine Bilder, die bestimmte Bedeutungen oder Funktionen repr\u00e4sentieren. Beispielsweise steht ein Haus-Icon f\u00fcr die Startseite, ein Lupen-Icon f\u00fcr die Suchfunktion und ein Papierkorb-Icon f\u00fcr das L\u00f6schen von Dateien. Sie helfen Nutzern, die Botschaft einer Website oder App schnell zu erfassen, ohne viel Text lesen zu m\u00fcssen. Das macht die Website benutzerfreundlich, modern und f\u00f6rdert die schnelle Kommunikation.<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-fb0a2eac9dd9798fe60eee3b644d9657\" style=\"font-size:25px\">2.1 F\u00fcgen Sie ein einfaches 20x20 px gro\u00dfes Bild hinzu.<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-6530248047e7b151c7c6b1fb18bc49b0\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;img src=\"https:\/\/example.com\/icon.png\" alt=\"icon\" width=\"20\" height=\"20\"&gt;<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead426e\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>3<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">Font Awesome-Icons<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Font Awesome-Icons sind vorgefertigte Icon-Sets f\u00fcr Webseiten. Sie sind sowohl als Schriftart als auch als Vektorgrafik verf\u00fcgbar und lassen sich daher \u2013 genau wie Schriftarten \u2013 einfach in Gr\u00f6\u00dfe, Farbe und Stil anpassen. Sie k\u00f6nnen verschiedene Symbole wie Haus-, Telefon-, E-Mail- oder Social-Media-Icons ersetzen und tragen so zu einem ansprechenden, modernen Webseiten-Design und k\u00fcrzeren Ladezeiten bei, ohne dass mehrere Bilddateien ben\u00f6tigt werden.<\/div><\/div><\/div>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"405\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1024x405.webp\" alt=\"\" class=\"wp-image-6027\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1024x405.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-300x119.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-768x304.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1536x607.webp 1536w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-18x7.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-400x158.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-800x316.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-832x329.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1664x658.webp 1664w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1248x493.webp 1248w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon.webp 2004w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-efc57c181c9c30496effd82d139032fc\" style=\"font-size:25px\">3.1 F\u00fcgen Sie das Font Awesome CDN hinzu (falls Sie es noch nicht haben).<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-0d131670acc49fbb35bb2c7b02dc97e3\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;head&gt;\n  &lt;!-- Font Awesome CDN --&gt;\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-ebf410f16baa182aa355893340da6bd5\" style=\"font-size:25px\">3.2 F\u00fcge Symbole hinzu und passe deren Gr\u00f6\u00dfe an.<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-1de3b5a75ca4b7c8b3fc066f91c8d8f6\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>\n&lt;i class=\"fa-solid fa-house\" style=\"font-size:20px;\"&gt;&lt;\/i&gt;\n\n&lt;i class=\"fa-solid fa-star\" style=\"font-size:20px;\"&gt;&lt;\/i&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-9e6d002dcb1d0dace3520e2a83ec95f1\" style=\"font-size:25px\">3.3 (Falls Sie das CSS separat ben\u00f6tigen)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-a1a28e39adb1eb430cc73362bfb399e0\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;style&gt;\n.icon-small {\n  font-size: 20px;\n  color: #000; \n}\n&lt;\/style&gt;\n\n&lt;i class=\"fa-solid fa-heart icon-small\"&gt;&lt;\/i&gt;<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead240e\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>4<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">Ein iFrame dient dazu, eine Webseite von einer anderen Webseite einzubetten.<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Ein iFrame ist ein HTML-Tag, mit dem Sie Webseiten oder Inhalte anderer Websites in Ihre eigene Webseite einbetten k\u00f6nnen. Dies k\u00f6nnen beispielsweise YouTube-Videos, Google Maps oder andere externe Websites sein. Es ist, als w\u00fcrden Sie ein kleines Fenster einer anderen Website in Ihre eigene einf\u00fcgen. Die Inhalte stammen weiterhin von der urspr\u00fcnglichen Website, aber die Nutzer k\u00f6nnen sie ansehen und mit ihnen interagieren, ohne die Seite zu verlassen.<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-167b651b5126e27136ee3b955a5737ab\" style=\"font-size:25px\">4.1 iFrame zum Einbetten von Webseiten.<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-3b99d783d68e46503064bd2227526660\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;iframe \n  src=\"https:\/\/www.example.com\" \n  width=\"800\" \n  height=\"600\"&gt;\n&lt;\/iframe&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-1e3378980d6076d9e6262afe2b791d7c\" style=\"font-size:25px\">4.2 Einbetten von YouTube-Videos in einen iFrame.<\/h3>\n\n\n\n<iframe loading=\"lazy\" \n  width=\"1349\" \n  height=\"759\" \n  src=\"https:\/\/www.youtube.com\/embed\/DZIASl9q90s\" \n  frameborder=\"0\" \n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n  allowfullscreen>\n<\/iframe>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-f412d5d701357354f05f2b4e805fe408\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;iframe \n  width=\"1349\" \n  height=\"759\" \n  src=\"https:\/\/www.youtube.com\/embed\/DZIASl9q90s\" \n  frameborder=\"0\" \n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n  allowfullscreen&gt;\n&lt;\/iframe&gt;<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead76c4\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>5<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">Erl\u00e4uternder Text anzeigen (Tooltip)<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Ein Tooltip ist ein kleines Textfeld, das zus\u00e4tzliche Erkl\u00e4rungen anzeigt, wenn der Nutzer mit der Maus \u00fcber Text, Symbole oder Schaltfl\u00e4chen f\u00e4hrt oder diese antippt. Er verdeckt nicht den Hauptbildschirm und hilft, Bedeutungen oder die Verwendung von Elementen einfacher zu erkl\u00e4ren. Er eignet sich ideal f\u00fcr kurze Anleitungen und macht Websites und Apps benutzerfreundlicher und professioneller.<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-786acdfe787af4679552bfc6a678900a\" style=\"font-size:25px\">5.1 Grundlegende Tooltips<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-8d641a6ecd812cb1847eaea0cd0eba0e\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;style&gt;\n.tooltip {\n  position: relative;\n  cursor: pointer;\n  color: #6a5acd;\n  font-weight: bold;\n}\n\n.tooltip::after {\n  content: attr(data-text);\n  position: absolute;\n  bottom: 140%;\n  left: 50%;\n  transform: translateX(-50%);\n  background: #333;\n  color: #fff;\n  padding: 8px 12px;\n  border-radius: 8px;\n  white-space: nowrap;\n  opacity: 0;\n  pointer-events: none;\n  transition: 0.3s;\n}\n\n.tooltip::before {\n  content: \"\";\n  position: absolute;\n  bottom: 120%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 6px solid transparent;\n  border-top-color: #333;\n  opacity: 0;\n  transition: 0.3s;\n}\n\n.tooltip:hover::after,\n.tooltip:hover::before {\n  opacity: 1;\n}\n&lt;\/style&gt;\n\n&lt;p&gt;\n  Hover over &lt;span class=\"tooltip\" data-text=\"HTML defines the structure of a web page\"&gt;HTML&lt;\/span&gt;\n&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-e8881a9309d5e49a1af04071914ed456\" style=\"font-size:25px\">5.2 Tooltip-Ein- und Ausblenden \u2013 Premium-Look<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-32eadd517c5b65910ec3a432a6557092\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;style&gt;\n.tooltip-box {\n  position: relative;\n  display: inline-block;\n  color: #009688;\n  cursor: pointer;\n}\n\n.tooltip-box .tooltip-text {\n  position: absolute;\n  bottom: 130%;\n  left: 50%;\n  transform: translateX(-50%) translateY(10px);\n  background-color: #009688;\n  color: #fff;\n  padding: 8px 14px;\n  border-radius: 20px;\n  opacity: 0;\n  white-space: nowrap;\n  transition: all 0.3s ease;\n}\n\n.tooltip-box:hover .tooltip-text {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n&lt;\/style&gt;\n\n&lt;p&gt;\n  Hover over \n  &lt;span class=\"tooltip-box\"&gt;\n    CSS\n    &lt;span class=\"tooltip-text\"&gt;CSS styles the website&lt;\/span&gt;\n  &lt;\/span&gt;\n&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-c24b0ec93269f50d664a891f68cbe6a5\" style=\"font-size:25px\">5.3 Ein Tooltip wird angezeigt, wenn auf den Text geklickt wird.<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-179aa18ce73793954316672bb3d86b3f\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;style&gt;\n.click-tooltip {\n  position: relative;\n  display: inline-block;\n  color: #e91e63;\n  cursor: pointer;\n}\n\n.click-tooltip .tooltip-content {\n  display: none;\n  position: absolute;\n  top: 120%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #e91e63;\n  color: #fff;\n  padding: 10px;\n  border-radius: 10px;\n  white-space: nowrap;\n}\n&lt;\/style&gt;\n\n&lt;p&gt;\n  &lt;span class=\"click-tooltip\" onclick=\"toggleTooltip(this)\"&gt;\n    JavaScript\n    &lt;span class=\"tooltip-content\"&gt;JavaScript makes websites interactive&lt;\/span&gt;\n  &lt;\/span&gt;\n&lt;\/p&gt;\n\n&lt;script&gt;\nfunction toggleTooltip(element) {\n  const tooltip = element.querySelector(\".tooltip-content\");\n  tooltip.style.display = tooltip.style.display === \"block\" ? \"none\" : \"block\";\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nheadfba6\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>6<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">Popup-Karte \u2013 Klicken Sie auf die Popup-Karte.<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Klickbare Pop-up-Karten erm\u00f6glichen die Anzeige von Informationen, indem beim Anklicken eines Buttons, Textes oder Bildes eine \u201eKarte\u201c mit weiteren Details wie Bild, Name, Symbol oder Beschreibung eingeblendet wird, ohne dass die Webseite gewechselt werden muss. Dies sorgt f\u00fcr eine komfortable Informationsanzeige, h\u00e4lt die Webseite \u00fcbersichtlich und vermittelt dem Nutzer ein modernes und professionelles Erscheinungsbild.<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-90d7334c6be800ad2f23231d6538a0a5\" style=\"font-size:25px\">6.1 Klicken Sie auf die Pop-up-Karte (HTML + CSS + JS)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-1d9b7262c9a3c037011e08855c4c615f\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f4f6f8;\n  text-align: center;\n  padding-top: 100px;\n}\n\n\/* Button *\/\n.open-btn {\n  padding: 12px 24px;\n  font-size: 16px;\n  background: #4a6cff;\n  color: #fff;\n  border: none;\n  border-radius: 30px;\n  cursor: pointer;\n}\n\n\/* Overlay *\/\n.overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* Card *\/\n.popup-card {\n  background: #fff;\n  width: 360px;\n  padding: 30px;\n  border-radius: 16px;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.2);\n  animation: pop 0.3s ease;\n}\n\n@keyframes pop {\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n\/* Close button *\/\n.close-btn {\n  margin-top: 20px;\n  padding: 8px 18px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n\n\n&lt;body&gt;\n\n&lt;button class=\"open-btn\" onclick=\"openCard()\"&gt;Click Me&lt;\/button&gt;\n\n&lt;div class=\"overlay\" id=\"overlay\"&gt;\n  &lt;div class=\"popup-card\"&gt;\n    &lt;h2&gt;Hello \ud83d\udc4b&lt;\/h2&gt;\n    &lt;p&gt;This is a popup card shown after clicking.&lt;\/p&gt;\n    &lt;button class=\"close-btn\" onclick=\"closeCard()\"&gt;Close&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nfunction openCard() {\n  document.getElementById(\"overlay\").style.display = \"flex\";\n}\n\nfunction closeCard() {\n  document.getElementById(\"overlay\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-fe97618ef2ac43f8bd432493dd5007e9\" style=\"font-size:25px\">6.2 Klicken Sie auf die Popup-Karte, die das Bild, das Symbol und die Beschreibung enth\u00e4lt.<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-4b02252c0563fdf208b0fc8feed879d4\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Popup Card with Image&lt;\/title&gt;\n\n&lt;!-- Font Awesome --&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f2f4f8;\n  text-align: center;\n  padding-top: 100px;\n}\n\n\/* Button *\/\n.open-btn {\n  padding: 12px 26px;\n  background: #4a6cff;\n  color: #fff;\n  border: none;\n  border-radius: 30px;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n\/* Overlay *\/\n.overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* Card *\/\n.card {\n  background: #fff;\n  width: 360px;\n  border-radius: 18px;\n  overflow: hidden;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.25);\n  animation: pop 0.3s ease;\n}\n\n@keyframes pop {\n  from { transform: scale(0.85); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n\/* Image *\/\n.card img {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n}\n\n\/* Content *\/\n.card-content {\n  padding: 24px;\n}\n\n.card-content h2 {\n  margin: 10px 0;\n}\n\n.icon {\n  font-size: 32px;\n  color: #4a6cff;\n}\n\n.description {\n  color: #555;\n  margin-top: 10px;\n  font-size: 15px;\n}\n\n\/* Close button *\/\n.close-btn {\n  margin-top: 20px;\n  padding: 8px 20px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;button class=\"open-btn\" onclick=\"openCard()\"&gt;Show Card&lt;\/button&gt;\n\n&lt;div class=\"overlay\" id=\"overlay\" onclick=\"closeCard()\"&gt;\n  &lt;div class=\"card\" onclick=\"event.stopPropagation()\"&gt;\n\n    &lt;img src=\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f\" alt=\"Image\"&gt;\n\n    &lt;div class=\"card-content\"&gt;\n      &lt;div class=\"icon\"&gt;\n        &lt;i class=\"fa-solid fa-lightbulb\"&gt;&lt;\/i&gt;\n      &lt;\/div&gt;\n\n      &lt;h2&gt;SiamMakeMoney&lt;\/h2&gt;\n\n      &lt;p class=\"description\"&gt;\n        Learn digital skills and build online income with practical knowledge.\n      &lt;\/p&gt;\n\n      &lt;button class=\"close-btn\" onclick=\"closeCard()\"&gt;Close&lt;\/button&gt;\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nfunction openCard() {\n  document.getElementById(\"overlay\").style.display = \"flex\";\n}\n\nfunction closeCard() {\n  document.getElementById(\"overlay\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-a99c6ed2018709a9c635f087ae46c6be\" style=\"font-size:25px\">6.3 Attraktive und SEO-optimierte Pop-up-Karten<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-035a3e51e43c3a51f85be6ef989f15e6\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;SiamMakeMoney \u2013 SEO Friendly Popup&lt;\/title&gt;\n&lt;meta name=\"description\" content=\"Learn digital skills and build online income with SiamMakeMoney\"&gt;\n\n&lt;!-- Font Awesome --&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 60px;\n  text-align: center;\n}\n\n\/* Main content *\/\nh1 {\n  color: #333;\n}\n\np {\n  color: #555;\n  max-width: 600px;\n  margin: 20px auto;\n}\n\n\/* Button *\/\n.open-btn {\n  padding: 10px 22px;\n  border-radius: 25px;\n  border: none;\n  background: #4a6cff;\n  color: #fff;\n  cursor: pointer;\n  font-size: 15px;\n}\n\n\/* Overlay *\/\n.popup-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* Card *\/\n.popup-card {\n  background: #fff;\n  width: 380px;\n  border-radius: 18px;\n  overflow: hidden;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.25);\n  animation: popup 0.3s ease;\n}\n\n@keyframes popup {\n  from { transform: scale(0.9); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n\/* Image *\/\n.popup-card img {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n}\n\n\/* Content *\/\n.card-content {\n  padding: 24px;\n}\n\n.card-content h2 {\n  margin: 12px 0;\n  color: #333;\n}\n\n.icon {\n  font-size: 30px;\n  color: #4a6cff;\n}\n\n.description {\n  font-size: 15px;\n  color: #555;\n  margin-top: 10px;\n}\n\n\/* Close button *\/\n.close-btn {\n  margin-top: 18px;\n  padding: 8px 18px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;main&gt;\n  &lt;!-- SEO main content --&gt;\n  &lt;h1&gt;SiamMakeMoney&lt;\/h1&gt;\n  &lt;p&gt;\n    SiamMakeMoney helps people learn digital skills and build sustainable\n    online income with practical knowledge.\n  &lt;\/p&gt;\n\n  &lt;button class=\"open-btn\" onclick=\"openPopup()\"&gt;Learn More&lt;\/button&gt;\n\n  &lt;!-- Popup (content already in HTML = SEO friendly) --&gt;\n  &lt;section class=\"popup-overlay\" id=\"popup\" onclick=\"closePopup()\"&gt;\n    &lt;article class=\"popup-card\" onclick=\"event.stopPropagation()\"&gt;\n\n      &lt;img src=\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f\" alt=\"Digital learning\"&gt;\n\n      &lt;div class=\"card-content\"&gt;\n        &lt;div class=\"icon\"&gt;\n          &lt;i class=\"fa-solid fa-lightbulb\"&gt;&lt;\/i&gt;\n        &lt;\/div&gt;\n\n        &lt;h2&gt;Digital Knowledge&lt;\/h2&gt;\n\n        &lt;p class=\"description\"&gt;\n          Learn online business, marketing, and digital skills with step-by-step\n          guidance designed for real results.\n        &lt;\/p&gt;\n\n        &lt;button class=\"close-btn\" onclick=\"closePopup()\"&gt;Close&lt;\/button&gt;\n      &lt;\/div&gt;\n\n    &lt;\/article&gt;\n  &lt;\/section&gt;\n&lt;\/main&gt;\n\n&lt;script&gt;\nfunction openPopup() {\n  document.getElementById(\"popup\").style.display = \"flex\";\n}\n\nfunction closePopup() {\n  document.getElementById(\"popup\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-341849e52864bae4837641281e02cba5\" style=\"font-size:25px\">6.4 Dynamische Popup-Karten (Einzelne HTML-Datei)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-f4cc34b69257d73b29db6e07c173d73b\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;SiamMakeMoney \u2013 Dynamic Cards&lt;\/title&gt;\n&lt;meta name=\"description\" content=\"Learn digital skills and build online income with SiamMakeMoney\"&gt;\n\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n  text-align: center;\n}\n\n\/* Grid *\/\n.card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 20px;\n  max-width: 900px;\n  margin: 40px auto;\n}\n\n\/* Card item *\/\n.card-item {\n  background: #fff;\n  padding: 20px;\n  border-radius: 16px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n  cursor: pointer;\n  transition: transform 0.2s;\n}\n\n.card-item:hover {\n  transform: translateY(-5px);\n}\n\n.card-item i {\n  font-size: 32px;\n  color: #4a6cff;\n}\n\n.card-item h3 {\n  margin-top: 10px;\n  color: #333;\n}\n\n\/* Popup *\/\n.popup-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n.popup-card {\n  background: #fff;\n  width: 380px;\n  border-radius: 18px;\n  overflow: hidden;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.25);\n  animation: popup 0.3s ease;\n}\n\n@keyframes popup {\n  from { transform: scale(0.9); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.popup-card img {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n}\n\n.popup-content {\n  padding: 24px;\n}\n\n.popup-content h2 {\n  margin: 10px 0;\n}\n\n.popup-content p {\n  color: #555;\n}\n\n.close-btn {\n  margin-top: 15px;\n  padding: 8px 18px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h1&gt;SiamMakeMoney&lt;\/h1&gt;\n&lt;p&gt;Click a card to learn more&lt;\/p&gt;\n\n&lt;!-- Cards --&gt;\n&lt;div class=\"card-grid\" id=\"cardGrid\"&gt;&lt;\/div&gt;\n\n&lt;!-- Popup --&gt;\n&lt;div class=\"popup-overlay\" id=\"popup\" onclick=\"closePopup()\"&gt;\n  &lt;div class=\"popup-card\" onclick=\"event.stopPropagation()\"&gt;\n    &lt;img id=\"popupImage\" src=\"\" alt=\"\"&gt;\n    &lt;div class=\"popup-content\"&gt;\n      &lt;i id=\"popupIcon\" class=\"\"&gt;&lt;\/i&gt;\n      &lt;h2 id=\"popupTitle\"&gt;&lt;\/h2&gt;\n      &lt;p id=\"popupDescription\"&gt;&lt;\/p&gt;\n      &lt;button class=\"close-btn\" onclick=\"closePopup()\"&gt;Close&lt;\/button&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n\/\/ Card data (Dynamic)\nconst cards = &#91;\n  {\n    title: \"Online Business\",\n    icon: \"fa-solid fa-briefcase\",\n    image: \"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f\",\n    description: \"Learn how to build and grow online businesses step by step.\"\n  },\n  {\n    title: \"Digital Marketing\",\n    icon: \"fa-solid fa-bullhorn\",\n    image: \"https:\/\/images.unsplash.com\/photo-1557838923-2985c318be48\",\n    description: \"Understand SEO, ads, and social media marketing strategies.\"\n  },\n  {\n    title: \"Passive Income\",\n    icon: \"fa-solid fa-coins\",\n    image: \"https:\/\/images.unsplash.com\/photo-1605902711622-cfb43c44367f\",\n    description: \"Create income streams that work for you automatically.\"\n  }\n];\n\n\/\/ Render cards\nconst cardGrid = document.getElementById(\"cardGrid\");\n\ncards.forEach((card, index) =&gt; {\n  const div = document.createElement(\"div\");\n  div.className = \"card-item\";\n  div.innerHTML = `\n    &lt;i class=\"${card.icon}\"&gt;&lt;\/i&gt;\n    &lt;h3&gt;${card.title}&lt;\/h3&gt;\n  `;\n  div.onclick = () =&gt; openPopup(card);\n  cardGrid.appendChild(div);\n});\n\n\/\/ Popup functions\nfunction openPopup(card) {\n  document.getElementById(\"popupImage\").src = card.image;\n  document.getElementById(\"popupImage\").alt = card.title;\n  document.getElementById(\"popupIcon\").className = card.icon;\n  document.getElementById(\"popupTitle\").textContent = card.title;\n  document.getElementById(\"popupDescription\").textContent = card.description;\n  document.getElementById(\"popup\").style.display = \"flex\";\n}\n\nfunction closePopup() {\n  document.getElementById(\"popup\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead8c10\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>7<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">Grundlegender Tabellencode <\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Eine Tabelle ist ein Format zur Organisation von Daten in Zellen, die in Zeilen und Spalten angeordnet sind, um die Informationen \u00fcbersichtlich darzustellen und einen einfachen Vergleich zu erm\u00f6glichen. Beispiele hierf\u00fcr sind Preistabellen, Namenslisten oder Ergebnistabellen. Dadurch k\u00f6nnen Leser die Informationen klar erkennen, schnell verstehen und die ben\u00f6tigten Informationen leicht finden.<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-189b8720b8b13e81ef51e39d896407c8\" style=\"font-size:25px\">7.1 Grundlegender responsiver Tabellencode (Kompatibel mit allen Ger\u00e4ten)<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"245\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-1024x245.webp\" alt=\"\" class=\"wp-image-6026\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-1024x245.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-300x72.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-768x184.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-18x4.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-400x96.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-800x191.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-832x199.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot.webp 1171w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-56002361d52eb72fde2e629e31cc7905\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Responsive Table&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n}\n\n\/* Table wrapper *\/\n.table-container {\n  max-width: 1000px;\n  margin: auto;\n  overflow-x: auto;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n}\n\n\/* Table *\/\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 600px;\n}\n\nthead {\n  background: #4a6cff;\n  color: #fff;\n}\n\nth, td {\n  padding: 14px 16px;\n  text-align: left;\n}\n\nth {\n  font-weight: bold;\n}\n\ntbody tr:nth-child(even) {\n  background: #f2f4f8;\n}\n\ntbody tr:hover {\n  background: #eaf0ff;\n}\n\n\/* Mobile view *\/\n@media (max-width: 600px) {\n  table {\n    min-width: 100%;\n  }\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h2&gt;Course List&lt;\/h2&gt;\n\n&lt;div class=\"table-container\"&gt;\n  &lt;table&gt;\n    &lt;thead&gt;\n      &lt;tr&gt;\n        &lt;th&gt;Course&lt;\/th&gt;\n        &lt;th&gt;Level&lt;\/th&gt;\n        &lt;th&gt;Duration&lt;\/th&gt;\n        &lt;th&gt;Price&lt;\/th&gt;\n      &lt;\/tr&gt;\n    &lt;\/thead&gt;\n    &lt;tbody&gt;\n      &lt;tr&gt;\n        &lt;td&gt;HTML Basics&lt;\/td&gt;\n        &lt;td&gt;Beginner&lt;\/td&gt;\n        &lt;td&gt;4 Weeks&lt;\/td&gt;\n        &lt;td&gt;Free&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;CSS Design&lt;\/td&gt;\n        &lt;td&gt;Intermediate&lt;\/td&gt;\n        &lt;td&gt;6 Weeks&lt;\/td&gt;\n        &lt;td&gt;$49&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;JavaScript&lt;\/td&gt;\n        &lt;td&gt;Advanced&lt;\/td&gt;\n        &lt;td&gt;8 Weeks&lt;\/td&gt;\n        &lt;td&gt;$99&lt;\/td&gt;\n      &lt;\/tr&gt;\n    &lt;\/tbody&gt;\n  &lt;\/table&gt;\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-1808e3d519b53641e88c42a29458d625\" style=\"font-size:25px\">7.2 Tabelle mit anklickbaren Symbolen + Namen + Pop-up + Website-Schaltfl\u00e4che.<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"215\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-1024x215.webp\" alt=\"\" class=\"wp-image-6039\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-1024x215.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-300x63.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-768x162.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-18x4.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-400x84.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-800x168.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-832x175.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot.webp 1122w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-f5ec3b4fdbf29eff44000d516fd6ed24\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Interactive Table&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;!-- Font Awesome --&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n}\n\n\/* Table container *\/\n.table-container {\n  max-width: 1000px;\n  margin: auto;\n  overflow-x: auto;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 700px;\n}\n\nthead {\n  background: #4a6cff;\n  color: #fff;\n}\n\nth, td {\n  padding: 14px 16px;\n  text-align: left;\n}\n\ntbody tr:nth-child(even) {\n  background: #f2f4f8;\n}\n\n\/* Name clickable *\/\n.name {\n  color: #4a6cff;\n  font-weight: bold;\n  cursor: pointer;\n}\n\n.icon {\n  margin-right: 8px;\n  color: #4a6cff;\n}\n\n\/* Button *\/\n.visit-btn {\n  padding: 8px 16px;\n  background: #4caf50;\n  color: #fff;\n  text-decoration: none;\n  border-radius: 20px;\n  font-size: 14px;\n}\n\n\/* Popup *\/\n.popup-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n.popup-card {\n  background: #fff;\n  width: 360px;\n  border-radius: 16px;\n  padding: 24px;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.25);\n  animation: pop 0.3s ease;\n}\n\n@keyframes pop {\n  from { transform: scale(0.9); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.close-btn {\n  margin-top: 16px;\n  padding: 8px 18px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h2&gt;Learning Platforms&lt;\/h2&gt;\n\n&lt;div class=\"table-container\"&gt;\n&lt;table&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;Name&lt;\/th&gt;\n      &lt;th&gt;Category&lt;\/th&gt;\n      &lt;th&gt;Website&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;td&gt;\n        &lt;i class=\"fa-solid fa-lightbulb icon\"&gt;&lt;\/i&gt;\n        &lt;span class=\"name\" onclick=\"openPopup('SiamMakeMoney','A platform that teaches digital skills and online income step by step.')\"&gt;\n          SiamMakeMoney\n        &lt;\/span&gt;\n      &lt;\/td&gt;\n      &lt;td&gt;Online Business&lt;\/td&gt;\n      &lt;td&gt;\n        &lt;a class=\"visit-btn\" href=\"https:\/\/siammakemoney.com\" target=\"_blank\"&gt;\n          Visit\n        &lt;\/a&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n\n    &lt;tr&gt;\n      &lt;td&gt;\n        &lt;i class=\"fa-solid fa-code icon\"&gt;&lt;\/i&gt;\n        &lt;span class=\"name\" onclick=\"openPopup('Web Learning','Learn HTML, CSS, and JavaScript from beginner to advanced.')\"&gt;\n          Web Learning\n        &lt;\/span&gt;\n      &lt;\/td&gt;\n      &lt;td&gt;Programming&lt;\/td&gt;\n      &lt;td&gt;\n        &lt;a class=\"visit-btn\" href=\"https:\/\/www.w3schools.com\" target=\"_blank\"&gt;\n          Visit\n        &lt;\/a&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;\/div&gt;\n\n&lt;!-- Popup --&gt;\n&lt;div class=\"popup-overlay\" id=\"popup\" onclick=\"closePopup()\"&gt;\n  &lt;div class=\"popup-card\" onclick=\"event.stopPropagation()\"&gt;\n    &lt;h3 id=\"popupTitle\"&gt;&lt;\/h3&gt;\n    &lt;p id=\"popupDescription\"&gt;&lt;\/p&gt;\n    &lt;button class=\"close-btn\" onclick=\"closePopup()\"&gt;Close&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nfunction openPopup(title, description) {\n  document.getElementById(\"popupTitle\").textContent = title;\n  document.getElementById(\"popupDescription\").textContent = description;\n  document.getElementById(\"popup\").style.display = \"flex\";\n}\n\nfunction closePopup() {\n  document.getElementById(\"popup\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-95efdbd3e1e42505cda07415c1c5cf04\" style=\"font-size:25px\">7.3 Tabelle mit anklickbaren Symbolen + Namen + Pop-ups + Website-Schaltfl\u00e4chen.<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"466\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-1024x466.webp\" alt=\"\" class=\"wp-image-6042\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-1024x466.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-300x137.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-768x350.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-18x8.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-400x182.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-800x364.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-832x379.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot.webp 1236w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-89acb2b87593e298c37c25923d332590\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Advanced Table with Popup&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n}\n\n\/* Table container *\/\n.table-container {\n  max-width: 1100px;\n  margin: auto;\n  overflow-x: auto;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 800px;\n}\n\nthead {\n  background: #4a6cff;\n  color: #fff;\n}\n\nth, td {\n  padding: 14px 16px;\n  text-align: left;\n}\n\ntbody tr:nth-child(even) {\n  background: #f2f4f8;\n}\n\n\/* Icon image *\/\n.icon-img {\n  width: 20px;\n  height: 20px;\n  vertical-align: middle;\n  margin-right: 8px;\n}\n\n\/* Clickable name *\/\n.name {\n  color: #4a6cff;\n  font-weight: bold;\n  cursor: pointer;\n}\n\n\/* Stars *\/\n.stars {\n  color: #ffb400;\n  font-size: 16px;\n}\n\n\/* Popup *\/\n.popup-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.55);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n.popup-card {\n  background: #fff;\n  width: 400px;\n  border-radius: 18px;\n  overflow: hidden;\n  box-shadow: 0 25px 50px rgba(0,0,0,0.3);\n  animation: popup 0.3s ease;\n}\n\n@keyframes popup {\n  from { transform: scale(0.9); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.popup-card img {\n  width: 100%;\n  height: 220px;\n  object-fit: cover;\n}\n\n.popup-content {\n  padding: 24px;\n}\n\n.popup-content h3 {\n  margin: 10px 0;\n}\n\n.popup-content p {\n  color: #555;\n  font-size: 15px;\n}\n\n.price {\n  margin: 12px 0;\n  font-size: 18px;\n  font-weight: bold;\n  color: #4caf50;\n}\n\n.popup-actions {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 16px;\n}\n\n.visit-btn {\n  padding: 10px 18px;\n  background: #4a6cff;\n  color: #fff;\n  text-decoration: none;\n  border-radius: 22px;\n  font-size: 14px;\n}\n\n.close-btn {\n  padding: 8px 16px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h2&gt;Recommended Platforms&lt;\/h2&gt;\n\n&lt;div class=\"table-container\"&gt;\n&lt;table&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;Name&lt;\/th&gt;\n      &lt;th&gt;Category&lt;\/th&gt;\n      &lt;th&gt;Rating&lt;\/th&gt;\n      &lt;th&gt;Website&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;td&gt;\n        &lt;img src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1828\/1828884.png\" class=\"icon-img\" alt=\"icon\"&gt;\n        &lt;span class=\"name\"\n          onclick=\"openPopup(\n            'SiamMakeMoney',\n            'https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f',\n            'A platform that teaches digital skills and online income step by step.',\n            '$49 \/ month',\n            'https:\/\/siammakemoney.com'\n          )\"&gt;\n          SiamMakeMoney\n        &lt;\/span&gt;\n      &lt;\/td&gt;\n      &lt;td&gt;Online Business&lt;\/td&gt;\n      &lt;td class=\"stars\"&gt;\u2605\u2605\u2605\u2605\u2605&lt;\/td&gt;\n      &lt;td&gt;\n        &lt;a class=\"visit-btn\" href=\"https:\/\/siammakemoney.com\" target=\"_blank\"&gt;Visit&lt;\/a&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n\n    &lt;tr&gt;\n      &lt;td&gt;\n        &lt;img src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1055\/1055687.png\" class=\"icon-img\" alt=\"icon\"&gt;\n        &lt;span class=\"name\"\n          onclick=\"openPopup(\n            'Web Learning',\n            'https:\/\/images.unsplash.com\/photo-1518770660439-4636190af475',\n            'Learn HTML, CSS, and JavaScript from beginner to advanced.',\n            'Free',\n            'https:\/\/www.w3schools.com'\n          )\"&gt;\n          Web Learning\n        &lt;\/span&gt;\n      &lt;\/td&gt;\n      &lt;td&gt;Programming&lt;\/td&gt;\n      &lt;td class=\"stars\"&gt;\u2605\u2605\u2605\u2605\u2606&lt;\/td&gt;\n      &lt;td&gt;\n        &lt;a class=\"visit-btn\" href=\"https:\/\/www.w3schools.com\" target=\"_blank\"&gt;Visit&lt;\/a&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;\/div&gt;\n\n&lt;!-- Popup --&gt;\n&lt;div class=\"popup-overlay\" id=\"popup\" onclick=\"closePopup()\"&gt;\n  &lt;div class=\"popup-card\" onclick=\"event.stopPropagation()\"&gt;\n    &lt;img id=\"popupImage\" src=\"\" alt=\"\"&gt;\n    &lt;div class=\"popup-content\"&gt;\n      &lt;h3 id=\"popupTitle\"&gt;&lt;\/h3&gt;\n      &lt;p id=\"popupDescription\"&gt;&lt;\/p&gt;\n      &lt;div class=\"price\" id=\"popupPrice\"&gt;&lt;\/div&gt;\n\n      &lt;div class=\"popup-actions\"&gt;\n        &lt;a id=\"popupLink\" class=\"visit-btn\" href=\"#\" target=\"_blank\"&gt;Visit Website&lt;\/a&gt;\n        &lt;button class=\"close-btn\" onclick=\"closePopup()\"&gt;Close&lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nfunction openPopup(title, image, description, price, link) {\n  document.getElementById(\"popupTitle\").textContent = title;\n  document.getElementById(\"popupImage\").src = image;\n  document.getElementById(\"popupDescription\").textContent = description;\n  document.getElementById(\"popupPrice\").textContent = price;\n  document.getElementById(\"popupLink\").href = link;\n  document.getElementById(\"popup\").style.display = \"flex\";\n}\n\nfunction closePopup() {\n  document.getElementById(\"popup\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nheadcb35\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>8<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">Der einfachste Link-Button-Code.<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><strong>Link-Schaltfl\u00e4che<\/strong> Weblinks, \u00fcblicherweise einfacher Text, werden so gestaltet, dass sie wie Schaltfl\u00e4chen aussehen. Dadurch sind sie besser sichtbar, ansprechender und zeigen klar an, wohin ein Klick f\u00fchrt (z. B. Besuch einer anderen Website, Anmeldung oder Anzeige weiterer Details). Diese Schaltfl\u00e4chen werden in der Regel mit HTML und CSS erstellt und behalten ihre Funktionalit\u00e4t als normale Links (gut f\u00fcr die Suchmaschinenoptimierung und benutzerfreundlich), bieten aber ein optisch ansprechenderes Design, das die Klickwahrscheinlichkeit erh\u00f6ht.<\/div><\/div><\/div>\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-53ce3d46c3f858939580183275f08348\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;style&gt;\n.btn {\n  display: inline-block;\n  padding: 12px 24px;\n  background: #4a6cff;\n  color: #ffffff;\n  text-decoration: none;\n  border-radius: 25px;\n  font-size: 16px;\n}\n&lt;\/style&gt;\n&lt;a href=\"https:\/\/siammakemoney.com\" class=\"btn\" target=\"_blank\"&gt;\n  Visit Website\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-00a9c7e39d2e8868fec38719966748c3\" style=\"font-size:25px\">8.1 Link-Schaltfl\u00e4che mit Hover-Effekt.<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-ff11b34ce6a5bfc4f388c4cf5368a9fc\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;style&gt;\n.btn {\n  padding: 12px 24px;\n  background: #4a6cff;\n  color: white;\n  text-decoration: none;\n  border-radius: 30px;\n  transition: 0.3s;\n}\n\n.btn:hover {\n  background: #324de3;\n  transform: translateY(-2px);\n}\n&lt;\/style&gt;\n\n&lt;br&gt;\n&lt;a href=\"https:\/\/siammakemoney.com\" class=\"btn\" target=\"_blank\"&gt;\n  Visit Website\n&lt;\/a&gt;<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nheadcdff\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>9<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">Grundlegender Men\u00fccode<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Der Men\u00fccode besteht aus Anweisungen, die eine Men\u00fcleiste auf einer Website erstellen und Nutzern die Navigation zu verschiedenen Seiten wie der Startseite, \u201e\u00dcber uns\u201c, \u201eLeistungen\u201c oder \u201eKontakt\u201c erm\u00f6glichen. Im Allgemeinen setzt sich der Men\u00fccode aus HTML f\u00fcr die Linkstruktur, CSS f\u00fcr das Styling und gegebenenfalls JavaScript f\u00fcr spezielle Funktionen wie zoombare\/erweiterbare Men\u00fcs oder mobile Men\u00fcs zusammen. Er tr\u00e4gt dazu bei, Websites benutzerfreundlich und \u00fcbersichtlich zu gestalten und erm\u00f6glicht es Nutzern, die ben\u00f6tigten Informationen schneller zu finden.<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-a557623bcb2cb8411ecaf81b004eb889\" style=\"font-size:25px\">9.1 Grundmen\u00fc (Einfaches Navigationsmen\u00fc)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-4d5a3900ab9150a6e9acc99dae941c35\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Simple Menu&lt;\/title&gt;\n&lt;style&gt;\nbody {\n  margin: 0;\n  font-family: Arial, sans-serif;\n}\n\nnav {\n  background: #4a6cff;\n  padding: 12px 24px;\n}\n\nnav a {\n  color: #fff;\n  text-decoration: none;\n  margin-right: 20px;\n  font-weight: bold;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;nav&gt;\n  &lt;a href=\"#\"&gt;Home&lt;\/a&gt;\n  &lt;a href=\"#\"&gt;About&lt;\/a&gt;\n  &lt;a href=\"#\"&gt;Services&lt;\/a&gt;\n  &lt;a href=\"#\"&gt;Contact&lt;\/a&gt;\n&lt;\/nav&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-13624e31f5eddf0b15196cbcc9bdac8d\" style=\"font-size:25px\">9.2 Responsives Men\u00fc (Empfohlen, funktioniert auf allen Ger\u00e4ten)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-3f3f5c4f77f40fab47342a64872210be\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Responsive Menu&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;style&gt;\nbody {\n  margin: 0;\n  font-family: Arial, sans-serif;\n}\n\nnav {\n  background: #4a6cff;\n  padding: 14px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.logo {\n  color: #fff;\n  font-size: 20px;\n  font-weight: bold;\n}\n\n.menu {\n  display: flex;\n  gap: 20px;\n}\n\n.menu a {\n  color: #fff;\n  text-decoration: none;\n  font-weight: bold;\n}\n\n.menu-btn {\n  display: none;\n  font-size: 24px;\n  color: #fff;\n  cursor: pointer;\n}\n\n\/* Mobile *\/\n@media (max-width: 768px) {\n  .menu {\n    display: none;\n    flex-direction: column;\n    background: #4a6cff;\n    position: absolute;\n    top: 56px;\n    right: 0;\n    width: 100%;\n    text-align: center;\n    padding: 20px 0;\n  }\n\n  .menu.show {\n    display: flex;\n  }\n\n  .menu-btn {\n    display: block;\n  }\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;nav&gt;\n  &lt;div class=\"logo\"&gt;MyWebsite&lt;\/div&gt;\n\n  &lt;div class=\"menu-btn\" onclick=\"toggleMenu()\"&gt;\u2630&lt;\/div&gt;\n\n  &lt;div class=\"menu\" id=\"menu\"&gt;\n    &lt;a href=\"#\"&gt;Home&lt;\/a&gt;\n    &lt;a href=\"#\"&gt;About&lt;\/a&gt;\n    &lt;a href=\"#\"&gt;Services&lt;\/a&gt;\n    &lt;a href=\"#\"&gt;Contact&lt;\/a&gt;\n  &lt;\/div&gt;\n&lt;\/nav&gt;\n\n&lt;script&gt;\nfunction toggleMenu() {\n  document.getElementById(\"menu\").classList.toggle(\"show\");\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead0b83\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>10<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">Kartenrastercode<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><strong>Rasterkarte<\/strong> Grid ist ein Layoutformat f\u00fcr Webseiteninhalte, das mehrere \u201eKarten\u201c in einem Raster anordnet. Jede Karte enth\u00e4lt typischerweise ein Bild, einen Titel, eine Beschreibung und eine Schaltfl\u00e4che oder wichtige Informationen. Es eignet sich f\u00fcr die Darstellung von Produktlisten, Artikeln, Dienstleistungen oder Kursen. Die Vorteile des Kartenrasters liegen in seiner \u00fcbersichtlichen, ansprechenden und gut lesbaren Darstellung. Zudem passt es die Spaltenanzahl automatisch an die Bildschirmgr\u00f6\u00dfe an und ist somit sowohl auf Computern als auch auf Mobilger\u00e4ten nutzbar.<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-41067ab524c48302a507b4f6ad3d09ae\" style=\"font-size:25px\">10.1 Kartenraster (Responsiv)<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"285\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-1024x285.webp\" alt=\"\" class=\"wp-image-6064\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-1024x285.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-300x84.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-768x214.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-18x5.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-400x111.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-800x223.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-832x232.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-1248x348.webp 1248w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot.webp 1349w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-18910c19484491f33915ff7c5ef370d2\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Beautiful Card Grid&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;style&gt;\nbody {\n  margin: 0;\n  padding: 40px;\n  font-family: Arial, sans-serif;\n  background: #f0f2f5;\n}\n\n\/* Grid *\/\n.grid {\n  max-width: 1200px;\n  margin: auto;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 30px;\n}\n\n\/* Card *\/\n.card {\n  background: #fff;\n  border-radius: 20px;\n  padding: 24px;\n  box-shadow: 0 15px 35px rgba(0,0,0,0.1);\n  position: relative;\n  transition: 0.3s;\n}\n\n.card:hover {\n  transform: translateY(-8px);\n  box-shadow: 0 25px 50px rgba(0,0,0,0.15);\n}\n\n\/* Badge *\/\n.badge {\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  background: #ff5722;\n  color: #fff;\n  font-size: 12px;\n  padding: 6px 12px;\n  border-radius: 20px;\n}\n\n\/* Icon *\/\n.icon {\n  font-size: 40px;\n  margin-bottom: 16px;\n}\n\n\/* Content *\/\n.card h3 {\n  margin: 0 0 10px;\n}\n\n.card p {\n  font-size: 14px;\n  color: #555;\n}\n\n\/* Button *\/\n.card a {\n  display: inline-block;\n  margin-top: 16px;\n  padding: 10px 18px;\n  background: #4a6cff;\n  color: #fff;\n  text-decoration: none;\n  border-radius: 24px;\n  font-size: 14px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h2 style=\"text-align:center;\"&gt;Our Services&lt;\/h2&gt;\n\n&lt;div class=\"grid\"&gt;\n\n  &lt;div class=\"card\"&gt;\n    &lt;span class=\"badge\"&gt;Popular&lt;\/span&gt;\n    &lt;div class=\"icon\"&gt;\ud83d\ude80&lt;\/div&gt;\n    &lt;h3&gt;Online Business&lt;\/h3&gt;\n    &lt;p&gt;Learn how to build online income step by step.&lt;\/p&gt;\n    &lt;a href=\"#\"&gt;Learn More&lt;\/a&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=\"card\"&gt;\n    &lt;span class=\"badge\"&gt;New&lt;\/span&gt;\n    &lt;div class=\"icon\"&gt;\ud83d\udcbb&lt;\/div&gt;\n    &lt;h3&gt;Web Development&lt;\/h3&gt;\n    &lt;p&gt;HTML, CSS, JavaScript for beginners.&lt;\/p&gt;\n    &lt;a href=\"#\"&gt;Learn More&lt;\/a&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=\"card\"&gt;\n    &lt;div class=\"icon\"&gt;\ud83d\udcc8&lt;\/div&gt;\n    &lt;h3&gt;Digital Marketing&lt;\/h3&gt;\n    &lt;p&gt;Grow your business with online marketing.&lt;\/p&gt;\n    &lt;a href=\"#\"&gt;Learn More&lt;\/a&gt;\n  &lt;\/div&gt;\n\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>","protected":false},"excerpt":{"rendered":"Dieser Kurs vermittelt die Grundlagen von HTML, CSS und JavaScript f\u00fcr die Erstellung und Anpassung von Websites. Beispiele hierf\u00fcr sind das Einf\u00fcgen von Links in Text und Bilder, das Strukturieren von Listen mit Aufz\u00e4hlungszeichen oder Nummerierung, das Hinzuf\u00fcgen von Symbolen mit Font Awesome f\u00fcr ein modernes Design und das Einbetten von Inhalten anderer Websites mithilfe von iFrames. Dadurch wird es Anf\u00e4ngern erleichtert, diese Konzepte in der Webentwicklung zu verstehen und anzuwenden.","protected":false},"author":1,"featured_media":6013,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[23,28],"tags":[],"class_list":["post-5394","post","type-post","status-publish","format-standard","has-post-thumbnail","category-website-creation","category-html-css-javascript","cs-entry"],"_links":{"self":[{"href":"https:\/\/siammakemoney.com\/de\/wp-json\/wp\/v2\/posts\/5394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siammakemoney.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/siammakemoney.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/de\/wp-json\/wp\/v2\/comments?post=5394"}],"version-history":[{"count":36,"href":"https:\/\/siammakemoney.com\/de\/wp-json\/wp\/v2\/posts\/5394\/revisions"}],"predecessor-version":[{"id":6077,"href":"https:\/\/siammakemoney.com\/de\/wp-json\/wp\/v2\/posts\/5394\/revisions\/6077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/de\/wp-json\/wp\/v2\/media\/6013"}],"wp:attachment":[{"href":"https:\/\/siammakemoney.com\/de\/wp-json\/wp\/v2\/media?parent=5394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/siammakemoney.com\/de\/wp-json\/wp\/v2\/categories?post=5394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/siammakemoney.com\/de\/wp-json\/wp\/v2\/tags?post=5394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}