{"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\/es\/code-html-css-js\/","title":{"rendered":"Incluye c\u00f3digo HTML, CSS y JS b\u00e1sico."},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-color has-link-color wp-elements-b811a28942ca2757d0d4f299fd4594c6\" style=\"color:#0c3237\">Incluye c\u00f3digo HTML, CSS y JS b\u00e1sico.<\/h2>\n\n\n\n<h2 class=\"wp-block-heading has-accent-color has-text-color has-link-color wp-elements-a375b967830d5f566e720aaf520c1dd9\">Enlaces simples en texto e im\u00e1genes.<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 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\">Insertar el enlace en el mensaje.<\/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\">Insertar el enlace en la imagen.<\/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\">Imagen ordinaria<\/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\">C\u00f3digo de ejemplo para una lista con vi\u00f1etas.<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><br>Esta es una etiqueta HTML que se utiliza para crear subelementos dentro de una lista. Se puede usar con listas de puntos o numeradas, donde cada elemento representa un elemento individual de la lista. Algunos ejemplos incluyen listas de productos, men\u00fas o instrucciones paso a paso. Es como tener \"un elemento\" en una lista, lo que permite que la informaci\u00f3n est\u00e9 organizada, sea f\u00e1cil de leer y comprender.<\/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\">C\u00f3digo CSS para eliminar un punto. <code>&lt;li&gt;<\/code> bala<\/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\">Eliminar vi\u00f1etas para todo. <code>&lt;ul&gt;<\/code> y <code>&lt;ol&gt;<\/code> No importa donde est\u00e9s.<\/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\">Eliminar las vi\u00f1etas que provienen de pseudoelementos.<\/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\">A\u00f1ade una imagen de icono.<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Los iconos son peque\u00f1as im\u00e1genes que representan significados o funciones espec\u00edficas. Por ejemplo, el icono de una casa representa la p\u00e1gina de inicio, el de una lupa, la funci\u00f3n de b\u00fasqueda, y el de una papelera, la funci\u00f3n de eliminaci\u00f3n. Ayudan a los usuarios a comprender r\u00e1pidamente lo que el sitio web o la aplicaci\u00f3n intenta transmitir sin tener que leer mucho texto, lo que facilita su uso, su dise\u00f1o moderno y la comunicaci\u00f3n r\u00e1pida.<\/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 Agregue una imagen simple de 20x20 px.<\/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\">Iconos de Font Awesome<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Los iconos de Font Awesome son conjuntos de iconos listos para usar en sitios web. Est\u00e1n disponibles en formato de fuente y vectorial, lo que facilita su cambio de tama\u00f1o, color y estilo, al igual que la personalizaci\u00f3n de fuentes. Pueden usarse para reemplazar diversos s\u00edmbolos, como iconos de inicio, tel\u00e9fono, correo electr\u00f3nico o redes sociales, lo que ayuda a que los sitios web se vean atractivos, modernos y carguen m\u00e1s r\u00e1pido sin necesidad de m\u00faltiples archivos de imagen.<\/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 Agregue Font Awesome CDN (si a\u00fan no lo tiene).<\/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 Agregar \u00edconos y ajustar su tama\u00f1o.<\/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 (Si necesitas el CSS separado)<\/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\">Un iFrame se utiliza para incrustar una p\u00e1gina web de otro sitio web.<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Un iframe es una etiqueta HTML que se utiliza para incrustar p\u00e1ginas web o contenido de otros sitios web en tu propia p\u00e1gina. Esto podr\u00eda incluir v\u00eddeos de YouTube, Google Maps u otros sitios web externos. Es como colocar una \"peque\u00f1a ventana\" de otro sitio web dentro del tuyo, donde el contenido sigue siendo del sitio web original, pero los usuarios pueden verlo e interactuar con \u00e9l sin salir de la p\u00e1gina.<\/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 para incrustar p\u00e1ginas web.<\/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 Incrustar v\u00eddeos de YouTube en un 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\">Mostrar texto explicativo (informaci\u00f3n sobre herramientas)<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Una descripci\u00f3n emergente es un peque\u00f1o cuadro de texto que muestra explicaciones adicionales al pasar el cursor sobre texto, iconos o botones o al pulsarlos. No obstruye la pantalla principal, lo que ayuda a explicar el significado o c\u00f3mo usar algo de forma m\u00e1s sencilla. Es ideal para proporcionar instrucciones breves, facilitando el uso de sitios web o aplicaciones y d\u00e1ndoles un aspecto m\u00e1s profesional.<\/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 Informaci\u00f3n sobre herramientas b\u00e1sica<\/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 Desvanecimiento y deslizamiento de informaci\u00f3n sobre herramientas: aspecto premium<\/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 La informaci\u00f3n sobre herramientas se muestra cuando se hace clic en el texto.<\/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\">Tarjeta emergente: haga clic en la tarjeta emergente.<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Las tarjetas emergentes clicables son una forma de mostrar informaci\u00f3n. Al hacer clic en un bot\u00f3n, texto o imagen, se abre una tarjeta en la pantalla que muestra m\u00e1s detalles, como una imagen, un nombre, un icono o una descripci\u00f3n, sin necesidad de cambiar de p\u00e1gina web. Esto facilita la visualizaci\u00f3n de la informaci\u00f3n, mantiene el sitio web ordenado y ofrece al usuario una apariencia moderna y profesional.<\/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 Haga clic en la tarjeta emergente (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 Haga clic en la tarjeta emergente que contiene la imagen, el \u00edcono y la descripci\u00f3n.<\/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 Tarjetas emergentes hermosas y optimizadas para SEO<\/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 Tarjetas emergentes din\u00e1micas (archivo HTML \u00fanico)<\/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\">C\u00f3digo de tabla b\u00e1sico <\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Una tabla es un formato para organizar datos en celdas, dispuestas en filas y columnas, para que la informaci\u00f3n se vea organizada y sea f\u00e1cil de comparar. Algunos ejemplos incluyen tablas de precios, listas de nombres o tablas de resultados de puntuaciones. Esto permite a los lectores ver la informaci\u00f3n con claridad, comprenderla r\u00e1pidamente y encontrar f\u00e1cilmente la informaci\u00f3n que necesitan.<\/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 C\u00f3digo b\u00e1sico de tabla responsiva (compatible con todos los dispositivos)<\/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 Tabla con iconos clicables + nombres + ventana emergente + bot\u00f3n de sitio web.<\/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 Tabla con iconos clicables + nombres + ventanas emergentes + botones de sitio web.<\/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\">El c\u00f3digo de bot\u00f3n de enlace m\u00e1s simple.<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><strong>Bot\u00f3n de enlace<\/strong> Los enlaces web, generalmente de texto sin formato, est\u00e1n dise\u00f1ados para parecerse a botones, lo que los hace m\u00e1s visibles, atractivos e indica claramente a qu\u00e9 conducir\u00e1 el clic (por ejemplo, visitar otro sitio web, registrarse o ver m\u00e1s detalles). Estos botones suelen crearse con HTML y CSS, manteniendo la funcionalidad de los enlaces normales (buenos para el SEO y f\u00e1ciles de usar), pero con un dise\u00f1o visualmente m\u00e1s atractivo que aumenta la probabilidad de clics.<\/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 Bot\u00f3n de enlace con efecto de desplazamiento.<\/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\">C\u00f3digo de men\u00fa b\u00e1sico<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">El c\u00f3digo de men\u00fa es un conjunto de instrucciones que se utiliza para crear una barra de men\u00fa en un sitio web, permitiendo a los usuarios navegar a diferentes p\u00e1ginas, como la p\u00e1gina de inicio, la de \"Sobre nosotros\", la de \"Servicios\" o la de \"Contacto\". Generalmente, el c\u00f3digo de men\u00fa consta de HTML para la estructura de enlaces, CSS para el estilo y puede incluir JavaScript para a\u00f1adir funciones especiales, como men\u00fas ampliables o men\u00fas m\u00f3viles. El c\u00f3digo de men\u00fa ayuda a que los sitios web sean intuitivos y organizados, y permite a los usuarios encontrar la informaci\u00f3n que necesitan con mayor rapidez.<\/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 Men\u00fa b\u00e1sico (men\u00fa de navegaci\u00f3n simple)<\/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 Men\u00fa adaptable (recomendado, funciona en todos los dispositivos)<\/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\">C\u00f3digo de cuadr\u00edcula de tarjetas<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><strong>Tarjeta de cuadr\u00edcula<\/strong> La cuadr\u00edcula es un formato de dise\u00f1o de contenido web que utiliza m\u00faltiples tarjetas dispuestas en cuadr\u00edcula. Cada tarjeta suele contener una imagen, un t\u00edtulo, una descripci\u00f3n y un bot\u00f3n o informaci\u00f3n importante. Es ideal para mostrar listados de productos, art\u00edculos, servicios o cursos. Las ventajas de la cuadr\u00edcula de tarjetas son su organizaci\u00f3n, su est\u00e9tica, su facilidad de lectura y el ajuste autom\u00e1tico del n\u00famero de columnas seg\u00fan el tama\u00f1o de la pantalla, lo que la hace compatible tanto con ordenadores como con dispositivos m\u00f3viles.<\/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 Cuadr\u00edcula de tarjetas (responsiva)<\/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":"Este curso presenta los fundamentos de HTML, CSS y JavaScript para crear y personalizar sitios web. Algunos ejemplos incluyen la inserci\u00f3n de enlaces en texto e im\u00e1genes, la organizaci\u00f3n de listas mediante vi\u00f1etas o numeraci\u00f3n, la adici\u00f3n de iconos con Font Awesome para una apariencia moderna y la incrustaci\u00f3n de contenido de otros sitios web mediante iFrames. Esto facilita a los principiantes la comprensi\u00f3n y aplicaci\u00f3n de estos conceptos en el desarrollo web.","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":{"0":"post-5394","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-website-creation","8":"category-html-css-javascript","9":"cs-entry"},"_links":{"self":[{"href":"https:\/\/siammakemoney.com\/es\/wp-json\/wp\/v2\/posts\/5394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siammakemoney.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/siammakemoney.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/es\/wp-json\/wp\/v2\/comments?post=5394"}],"version-history":[{"count":36,"href":"https:\/\/siammakemoney.com\/es\/wp-json\/wp\/v2\/posts\/5394\/revisions"}],"predecessor-version":[{"id":6077,"href":"https:\/\/siammakemoney.com\/es\/wp-json\/wp\/v2\/posts\/5394\/revisions\/6077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/es\/wp-json\/wp\/v2\/media\/6013"}],"wp:attachment":[{"href":"https:\/\/siammakemoney.com\/es\/wp-json\/wp\/v2\/media?parent=5394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/siammakemoney.com\/es\/wp-json\/wp\/v2\/categories?post=5394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/siammakemoney.com\/es\/wp-json\/wp\/v2\/tags?post=5394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}