LabEx
EntrarÚnete

Crear estructura y etiquetas HTML básicas

HTMLBeginner
Practicar Ahora

Introducción

En este laboratorio, los estudiantes aprenderán las habilidades fundamentales para crear una estructura básica de documento HTML y comprender las etiquetas HTML esenciales. El laboratorio guía a los participantes a través de la configuración de un documento HTML con una declaración de DOCTYPE adecuada, la adición de la etiqueta raíz HTML, la configuración de la sección de encabezado y la exploración de diferentes tipos de etiquetas HTML.

Los participantes comenzarán creando un documento HTML5, aprendiendo cómo declarar el tipo de documento, estructurar el diseño básico de la página y comprender el propósito de elementos clave como <html>, <head> y <body>. Al final del laboratorio, los estudiantes tendrán una comprensión integral de cómo crear un documento HTML bien formado y utilizar diversas etiquetas HTML para estructurar el contenido de una página web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 85%. Ha recibido una tasa de reseñas positivas del 99% por parte de los estudiantes.

Configurar un documento HTML con la declaración DOCTYPE

En este paso, aprenderás cómo configurar la base básica de un documento HTML agregando la declaración de DOCTYPE. La declaración de DOCTYPE es crucial ya que le dice a los navegadores web qué versión de HTML está utilizando tu documento, lo que garantiza una representación adecuada y compatibilidad.

Primero, abre el WebIDE y crea un nuevo archivo llamado index.html en el directorio ~/project.

La declaración de DOCTYPE para HTML5 es simple y directa. La agregarás como la primera línea de tu documento HTML:

<!doctype html>

Esta declaración le dice a los navegadores que estás utilizando HTML5, la última versión de HTML. No distingue entre mayúsculas y minúsculas, pero se recomienda la versión en minúsculas para mantener la coherencia y la legibilidad.

Creemos una estructura completa de documento HTML básico con la declaración de DOCTYPE:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML!</h1>
  </body>
</html>
Estructura del documento HTML

Notas: Aprende más sobre Cómo previsualizar archivos HTML en el WebIDE.

La salida de ejemplo en el navegador mostraría:

Welcome to HTML!

Puntos clave a recordar:

  • La declaración de DOCTYPE debe ser la primera línea de tu documento HTML.
  • Ayuda a los navegadores a entender qué versión de HTML estás utilizando.
  • Para el desarrollo web moderno, utiliza <!DOCTYPE html> para HTML5.
  • La declaración no es una etiqueta HTML; es una instrucción para el navegador.

Agregar la etiqueta raíz HTML y la estructura básica

En este paso, aprenderás sobre la estructura fundamental de un documento HTML, centrándote en la etiqueta raíz HTML y la estructura básica del documento. La etiqueta <html> es el contenedor de todos los demás elementos HTML y sirve como el elemento raíz de una página HTML.

Abre el archivo index.html que creaste en el paso anterior en el WebIDE. Ampliemos la estructura HTML anterior agregando la etiqueta raíz completa y sus componentes esenciales:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML Structure</h1>
    <p>This is the basic structure of an HTML document.</p>
  </body>
</html>

Desglosemos los componentes clave:

  1. Etiqueta <html>: El elemento raíz que envuelve todo el contenido HTML restante.
  2. Atributo lang="en": Especifica el idioma del documento (inglés en este caso).
  3. Dos elementos hijos principales:
    • <head>: Contiene metadatos sobre el documento.
    • <body>: Contiene el contenido visible de la página web.

La salida de ejemplo en un navegador web se vería así:

Welcome to HTML Structure
This is the basic structure of an HTML document.

Puntos clave a recordar:

  • Todo documento HTML debe tener una etiqueta raíz <html>.
  • El atributo lang ayuda con la accesibilidad y la optimización para motores de búsqueda.
  • El documento se divide en secciones <head> y <body>.
  • La correcta anidación de etiquetas es crucial para un HTML válido.

Configurar la sección con etiquetas meta y </h2> <p data-line="2">En este paso, aprenderás sobre la sección <code><head></code> de un documento HTML y cómo utilizar las etiquetas meta y de título para proporcionar información importante sobre tu página web.</p> <p data-line="4">Abre tu archivo <code>index.html</code> en el WebIDE y actualiza la sección <code><head></code> con el siguiente ejemplo:</p> <pre data-line="6"><code class="language-html" language=html><span class="code-block"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="A simple HTML learning page" /> <title>My HTML Learning Journey</title> </head> <body> <h1>Welcome to HTML Metadata</h1> <p>This page demonstrates head section configuration.</p> </body> </html></span></code></pre> <p data-line="22">Desglosemos las principales etiquetas meta y sus propósitos:</p> <ol data-line="24"> <li><code><meta charset="UTF-8"></code>: Especifica la codificación de caracteres para el documento.</li> <li><code><meta name="viewport"></code>: Asegura una representación adecuada en diferentes dispositivos.</li> <li><code><meta name="description"></code>: Proporciona una breve descripción de la página para los motores de búsqueda.</li> <li><code><title></code>: Establece el título de la página que se muestra en la pestaña del navegador.</li> </ol> <p data-line="29">Salida de ejemplo en una pestaña del navegador:</p> <pre data-line="31"><code class="language-" language=><span class="code-block">My HTML Learning Journey</span></code></pre> <p data-line="35">Puntos clave a recordar:</p> <ul data-line="37"> <li>La sección <code><head></code> contiene metadatos sobre el documento HTML.</li> <li>Las etiquetas meta proporcionan información adicional a los navegadores y motores de búsqueda.</li> <li>La etiqueta <code><title></code> es crucial para la identificación de la página y el SEO (optimización para motores de búsqueda).</li> <li>Siempre incluye las etiquetas meta de codificación de caracteres y de viewport.</li> </ul> </article></div><!----><!--]--></div><!----><!--]--><!--[--><div class="pt-24 -mt-20 relative -z-10 anchor-item" id="comprender-las-etiquetas-html-simples-y-dobles" data-v-21a317ea></div><div id="md-position-4" class="md-editor md-editor-previewOnly" style="background-color:transparent;" data-v-21a317ea><!--[--><div id="md-position-4-preview-wrapper" class="md-editor-preview-wrapper"><article id="md-position-4-preview" class="md-editor-preview default-theme"><h2 data-line="0" id="Comprender las etiquetas HTML simples y dobles">Comprender las etiquetas HTML simples y dobles</h2> <p data-line="2">En este paso, aprenderás sobre los dos tipos de etiquetas HTML: las etiquetas simples (auto-cerradas) y las etiquetas dobles. Comprender la diferencia entre estas etiquetas es crucial para crear documentos HTML bien estructurados.</p> <p data-line="4">Abre tu archivo <code>index.html</code> en el WebIDE y actualiza la sección del cuerpo con el siguiente ejemplo:</p> <pre data-line="6"><code class="language-html" language=html><span class="code-block"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>HTML Tags Exploration</title> </head> <body> <!-- Double Tags (Opening and Closing) --> <h1>Welcome to HTML Tags</h1> <p>This is a paragraph with <strong>bold text</strong>.</p> <!-- Single (Self-Closing) Tags --> <img src="example.jpg" alt="Example Image" /> <br /> <input type="text" placeholder="Enter your name" /> </body> </html></span></code></pre> <p data-line="26">Desglosemos los diferentes tipos de etiquetas:</p> <p data-line="28">Etiquetas dobles (etiquetas pareadas):</p> <ul data-line="30"> <li>Tienen una etiqueta de apertura <code><tag></code> y una etiqueta de cierre <code></tag></code>.</li> <li>El contenido se coloca entre las etiquetas de apertura y cierre.</li> <li>Ejemplos: <code><h1></code>, <code><p></code>, <code><strong></code>, <code><div></code>.</li> </ul> <p data-line="34">Etiquetas simples (etiquetas auto-cerradas):</p> <ul data-line="36"> <li>No tienen una etiqueta de cierre separada.</li> <li>Se cierran a sí mismas dentro de la etiqueta.</li> <li>Ejemplos: <code><img></code>, <code><br></code>, <code><input></code>.</li> </ul> <p data-line="40">La salida de ejemplo en un navegador se mostraría así:</p> <pre data-line="42"><code class="language-" language=><span class="code-block">Welcome to HTML Tags This is a paragraph with bold text. [An image would be displayed here] [A text input field would be shown]</span></code></pre> <figure><img src="/cdn-cgi/image/format=auto,quality=60,onerror=redirect/https://file.labex.io/namespace/df87b950-1f37-4316-bc07-6537a1f2c481/web/lab-create-basic-html-structure-and-tags/es/../assets/20250110-10-53-27-6sPaawNK.png" alt="Salida de ejemplo de etiquetas HTML" class="md-zoom"></figure> <p data-line="51">Puntos clave a recordar:</p> <ul data-line="53"> <li>Las etiquetas dobles envuelven el contenido y requieren tanto una etiqueta de apertura como una de cierre.</li> <li>Las etiquetas simples son autónomas y no envuelven contenido.</li> <li>Siempre cierra las etiquetas dobles para mantener una estructura HTML adecuada.</li> <li>Algunas etiquetas simples pueden tener atributos para proporcionar información adicional.</li> </ul> </article></div><!----><!--]--></div><!----><!--]--><!--[--><div class="pt-24 -mt-20 relative -z-10 anchor-item" id="explorar-la-etiqueta-%3Cbody%3E-y-la-colocaci%C3%B3n-del-contenido-de-la-p%C3%A1gina" data-v-21a317ea></div><div id="md-position-5" class="md-editor md-editor-previewOnly" style="background-color:transparent;" data-v-21a317ea><!--[--><div id="md-position-5-preview-wrapper" class="md-editor-preview-wrapper"><article id="md-position-5-preview" class="md-editor-preview default-theme"><h2 data-line="0" id="Explorar la etiqueta <body> y la colocación del contenido de la página">Explorar la etiqueta <body> y la colocación del contenido de la página</h2> <p data-line="2">En este paso, aprenderás sobre la etiqueta <code><body></code> y cómo estructurar el contenido dentro de un documento HTML. La etiqueta de cuerpo es donde se coloca todo el contenido visible de una página web.</p> <p data-line="4">Abre tu archivo <code>index.html</code> en el WebIDE y actualiza la sección del cuerpo con el siguiente ejemplo:</p> <pre data-line="6"><code class="language-html" language=html><span class="code-block"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Content Placement Example</title> </head> <body> <!-- Headings --> <h1>Welcome to HTML Content Placement</h1> <h2>Subheading Level 2</h2> <h3>Subheading Level 3</h3> <!-- Paragraphs --> <p>This is a paragraph explaining the importance of content structure.</p> <!-- Lists --> <h4>Key HTML Elements:</h4> <ul> <li>Headings</li> <li>Paragraphs</li> <li>Lists</li> </ul> <!-- Div for grouping content --> <div> <p>This paragraph is inside a div container.</p> </div> <!-- Links and Images --> <a href="https://example.com">Visit Example Website</a> <img src="example.jpg" alt="Example Image" width="300" /> </body> </html></span></code></pre> <p data-line="42">La salida de ejemplo en un navegador se mostraría así:</p> <figure><img src="/cdn-cgi/image/format=auto,quality=60,onerror=redirect/https://file.labex.io/namespace/df87b950-1f37-4316-bc07-6537a1f2c481/web/lab-create-basic-html-structure-and-tags/es/../assets/20250113-15-36-31-2tbySUGL.png" alt="Salida de ejemplo de colocación de contenido HTML" class="md-zoom"></figure> <p data-line="46">Puntos clave a recordar:</p> <ul data-line="48"> <li>La etiqueta <code><body></code> contiene todo el contenido visible de la página.</li> <li>Utiliza las etiquetas de encabezado (<code><h1></code> a <code><h6></code>) para crear una jerarquía de contenido.</li> <li>Los párrafos, las listas y otros elementos ayudan a organizar la información.</li> <li>Las etiquetas <code><div></code> pueden agrupar y estructurar el contenido.</li> <li>Incluye enlaces y imágenes para mejorar la interactividad de la página.</li> </ul> </article></div><!----><!--]--></div><!----><!--]--><!--[--><div class="pt-24 -mt-20 relative -z-10 anchor-item" id="resumen" data-v-21a317ea></div><div id="md-position-6" class="md-editor md-editor-previewOnly" style="background-color:transparent;" data-v-21a317ea><!--[--><div id="md-position-6-preview-wrapper" class="md-editor-preview-wrapper"><article id="md-position-6-preview" class="md-editor-preview default-theme"><h2 data-line="0" id="Resumen">Resumen</h2> <p data-line="2">En este laboratorio (lab), los participantes aprendieron los pasos fundamentales para crear una estructura básica de documento HTML. El proceso comenzó con la configuración de la declaración DOCTYPE, que es crucial para garantizar una representación adecuada en el navegador y la compatibilidad con HTML5. Los aprendices exploraron las etiquetas HTML esenciales, incluyendo la etiqueta raíz <code><html></code>, las secciones <code><head></code> y <code><body></code>, y comprendieron sus roles específicos en la organización del documento.</p> <p data-line="4">El laboratorio guió a los estudiantes a través de la creación de un documento HTML completo, mostrando cómo agregar etiquetas meta, establecer la codificación de caracteres, definir un título de página y colocar contenido dentro de la etiqueta de cuerpo. Los participantes adquirieron experiencia práctica en la construcción de una página HTML bien estructurada, aprendiendo conceptos clave como las etiquetas HTML simples y dobles, la correcta anidación de etiquetas y la importancia del marcado semántico en el desarrollo web.</p> </article></div><!----><!--]--></div><!----><!--]--><!--]--></div><span></span></div><div class="w-40 hidden lg:block shrink-0 sticky top-24"><div id="tutorial-detail-sidebar"><div class="mb-10"><!--[--><p class="text-xs font-bold uppercase mt-10">compartir</p><div class="flex gap-2 mt-5"><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300" aria-label="Compartir en Twitter" href="https://twitter.com/intent/tweet?text=Crear%20estructura%20y%20etiquetas%20HTML%20b%C3%A1sicas%20%7C%20LabEx&url=https://labex.io/es/tutorials/html-create-basic-html-structure-and-tags-451029" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DM2q4mCJ.svg#twitter" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300" aria-label="Compartir en Facebook" href="https://www.facebook.com/sharer.php?title=Crear%20estructura%20y%20etiquetas%20HTML%20b%C3%A1sicas%20%7C%20LabEx&u=https://labex.io/es/tutorials/html-create-basic-html-structure-and-tags-451029" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DM2q4mCJ.svg#facebook" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300" aria-label="Compartir en Google Classroom" href="https://classroom.google.com/share?url=https://labex.io/es/tutorials/html-create-basic-html-structure-and-tags-451029" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DM2q4mCJ.svg#google-classroom-black" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--></div><!--]--></div><p class="text-xs font-bold uppercase">temas</p><div class="flex flex-wrap gap-1 mt-5"><!--[--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/linux"><!--[--><!--[--><!----><!--]--><!--[-->Linux<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/devops"><!--[--><!--[--><!----><!--]--><!--[-->DevOps<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/cybersecurity"><!--[--><!--[--><!----><!--]--><!--[-->Ciberseguridad<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/kali"><!--[--><!--[--><!----><!--]--><!--[-->Kali Linux<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/devops-engineer"><!--[--><!--[--><!----><!--]--><!--[-->DevOps Engineer<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/cybersecurity-engineer"><!--[--><!--[--><!----><!--]--><!--[-->Cybersecurity Engineer<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/database"><!--[--><!--[--><!----><!--]--><!--[-->Base de datos<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/datascience"><!--[--><!--[--><!----><!--]--><!--[-->Ciencia de datos<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/rhel"><!--[--><!--[--><!----><!--]--><!--[-->Red Hat Enterprise Linux<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/comptia"><!--[--><!--[--><!----><!--]--><!--[-->CompTIA<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/docker"><!--[--><!--[--><!----><!--]--><!--[-->Docker<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/kubernetes"><!--[--><!--[--><!----><!--]--><!--[-->Kubernetes<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/python"><!--[--><!--[--><!----><!--]--><!--[-->Python<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/git"><!--[--><!--[--><!----><!--]--><!--[-->Git<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/shell"><!--[--><!--[--><!----><!--]--><!--[-->Shell<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/nmap"><!--[--><!--[--><!----><!--]--><!--[-->Nmap<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/wireshark"><!--[--><!--[--><!----><!--]--><!--[-->Wireshark<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/hydra"><!--[--><!--[--><!----><!--]--><!--[-->Hydra<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/java"><!--[--><!--[--><!----><!--]--><!--[-->Java<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/sqlite"><!--[--><!--[--><!----><!--]--><!--[-->SQLite<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/postgresql"><!--[--><!--[--><!----><!--]--><!--[-->PostgreSQL<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/mysql"><!--[--><!--[--><!----><!--]--><!--[-->MySQL<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/redis"><!--[--><!--[--><!----><!--]--><!--[-->Redis<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/mongodb"><!--[--><!--[--><!----><!--]--><!--[-->MongoDB<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/go"><!--[--><!--[--><!----><!--]--><!--[-->Golang<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/cpp"><!--[--><!--[--><!----><!--]--><!--[-->C++<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/c"><!--[--><!--[--><!----><!--]--><!--[-->C<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/jenkins"><!--[--><!--[--><!----><!--]--><!--[-->Jenkins<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/ansible"><!--[--><!--[--><!----><!--]--><!--[-->Ansible<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/pandas"><!--[--><!--[--><!----><!--]--><!--[-->Pandas<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/numpy"><!--[--><!--[--><!----><!--]--><!--[-->NumPy<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/sklearn"><!--[--><!--[--><!----><!--]--><!--[-->scikit-learn<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/matplotlib"><!--[--><!--[--><!----><!--]--><!--[-->Matplotlib<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/webdev"><!--[--><!--[--><!----><!--]--><!--[-->Desarrollo web<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/css"><!--[--><!--[--><!----><!--]--><!--[-->CSS<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/javascript"><!--[--><!--[--><!----><!--]--><!--[-->JavaScript<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/es/tutorials/category/react"><!--[--><!--[--><!----><!--]--><!--[-->React<!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--]--></div></div></div></div><div class="py-20"><div class="flex items-center align-center text-center w-full flex-row"><div class="flex border-gray-200 dark:border-gray-800 w-full border-t border-solid"></div><!--[--><div class="font-medium text-gray-700 dark:text-gray-200 flex mx-3 whitespace-nowrap"><!--[--><span class="text-2xl">Relacionado <a href="/learn/html" class="">HTML Cursos</a></span><!--]--></div><div class="flex border-gray-200 dark:border-gray-800 w-full border-t border-solid"></div><!--]--></div><div class="grid grid-cols-12 gap-6 mt-10"><!--[--><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/es/courses/html-for-beginners" class="course-card" data-v-784b32aa><div class="text-gray-800 bg-white overflow-hidden rounded-md shadow l-hover-shadow l-hover-translate-y" data-v-784b32aa><div class="relative l-bg-divider overflow-hidden course-image" data-v-784b32aa><div class="overflow-hidden cover course undefined" data-v-784b32aa data-v-1737ff8a><img src="/cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=es" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="HTML para Principiantes" loading="lazy" data-nuxt-img sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, (max-width: 1199px) 33vw, 25vw" srcset="/cdn-cgi/image/width=300,height=154,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=es 300w, /cdn-cgi/image/width=327,height=168,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=es 327w, /cdn-cgi/image/width=384,height=197,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=es 384w, /cdn-cgi/image/width=565,height=291,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=es 565w, /cdn-cgi/image/width=600,height=308,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=es 600w, /cdn-cgi/image/width=654,height=336,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=es 654w, /cdn-cgi/image/width=768,height=394,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=es 768w, /cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=es 1130w" class="w-full h-auto" fetchpriority="auto" data-v-1737ff8a></div></div><div class="p-3" data-v-784b32aa><p class="h-14 text-xl font-semibold line-clamp-2 mb-4" data-v-784b32aa><span data-v-784b32aa>HTML para Principiantes</span></p><div class="flex items-center fs-0" data-v-784b32aa><div class="flex-auto truncate overflow-hidden" data-v-784b32aa><!--[--><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa><!--[-->html<!--]--></span><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa><!--[-->web-development<!--]--></span><!--]--></div></div></div></div></a></div><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/es/courses/project-build-a-tic-tac-toe-web-app" class="course-card" data-v-784b32aa><div class="text-gray-800 bg-white overflow-hidden rounded-md shadow l-hover-shadow l-hover-translate-y" data-v-784b32aa><div class="relative l-bg-divider overflow-hidden course-image" data-v-784b32aa><div class="overflow-hidden cover course undefined" data-v-784b32aa data-v-1737ff8a><img src="/cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=es" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="Construir una aplicación web de Tres en Raya" loading="lazy" data-nuxt-img sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, (max-width: 1199px) 33vw, 25vw" srcset="/cdn-cgi/image/width=300,height=154,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=es 300w, /cdn-cgi/image/width=327,height=168,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=es 327w, /cdn-cgi/image/width=384,height=197,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=es 384w, /cdn-cgi/image/width=565,height=291,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=es 565w, /cdn-cgi/image/width=600,height=308,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=es 600w, /cdn-cgi/image/width=654,height=336,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=es 654w, /cdn-cgi/image/width=768,height=394,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=es 768w, /cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=es 1130w" class="w-full h-auto" fetchpriority="auto" data-v-1737ff8a></div></div><div class="p-3" data-v-784b32aa><p class="h-14 text-xl font-semibold line-clamp-2 mb-4" data-v-784b32aa><span data-v-784b32aa>Construir una aplicación web de Tres en Raya</span></p><div class="flex items-center fs-0" data-v-784b32aa><div class="flex-auto truncate overflow-hidden" data-v-784b32aa><!--[--><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa><!--[-->javascript<!--]--></span><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa><!--[-->web-development<!--]--></span><!--]--></div></div></div></div></a></div><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/es/courses/project-creating-a-whack-a-mole-web-game" class="course-card" data-v-784b32aa><div class="text-gray-800 bg-white overflow-hidden rounded-md shadow l-hover-shadow l-hover-translate-y" data-v-784b32aa><div class="relative l-bg-divider overflow-hidden course-image" data-v-784b32aa><div class="overflow-hidden cover course undefined" data-v-784b32aa data-v-1737ff8a><img src="/cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=es" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="Creación de un juego web de Golpear al Topo" loading="lazy" data-nuxt-img sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, (max-width: 1199px) 33vw, 25vw" srcset="/cdn-cgi/image/width=300,height=154,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=es 300w, /cdn-cgi/image/width=327,height=168,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=es 327w, /cdn-cgi/image/width=384,height=197,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=es 384w, /cdn-cgi/image/width=565,height=291,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=es 565w, /cdn-cgi/image/width=600,height=308,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=es 600w, /cdn-cgi/image/width=654,height=336,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=es 654w, /cdn-cgi/image/width=768,height=394,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=es 768w, /cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=es 1130w" class="w-full h-auto" fetchpriority="auto" data-v-1737ff8a></div></div><div class="p-3" data-v-784b32aa><p class="h-14 text-xl font-semibold line-clamp-2 mb-4" data-v-784b32aa><span data-v-784b32aa>Creación de un juego web de Golpear al Topo</span></p><div class="flex items-center fs-0" data-v-784b32aa><div class="flex-auto truncate overflow-hidden" data-v-784b32aa><!--[--><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa><!--[-->javascript<!--]--></span><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa><!--[-->web-development<!--]--></span><!--]--></div></div></div></div></a></div><!--]--></div></div><!--]--></div></section><!----></div><!--]--><!--]--><span></span><span></span><footer class="bg-slate-800"><div class="pt-10 pb-1"><div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl"><!--[--><div class="flex flex-col"><div class="flex items-center justify-between w-full"><a href="/es" class="" aria-label="LabEx"><img src="/labex-logo-light.svg" onerror="this.setAttribute('data-error', 1)" width="98" height="30" alt="LabEx" loading="lazy" data-nuxt-img sizes="(max-width: 991px) 78px, 98px" srcset="/labex-logo-light.svg 78w, /labex-logo-light.svg 98w, /labex-logo-light.svg 156w, /labex-logo-light.svg 196w"></a><div><div class="language-switch" data-v-8a0b34f8><div data-headlessui-state class="relative inline-flex text-left rtl:text-right" data-v-8a0b34f8><div id="headlessui-menu-button-2jHQtkq50D:1" aria-haspopup="menu" aria-expanded="false" data-headlessui-state class="inline-flex w-full" role="button" data-n-ids="{"2jHQtkq50D:0":"2jHQtkq50D:1"}"><!--[--><button type="button" class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm px-2.5 py-1.5 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 flex items-center gap-2 text-white hover:text-white hover:bg-slate-700" data-v-8a0b34f8><!--[--><!--[--><!----><!--]--><!--[--><span data-v-8a0b34f8>🇪🇸 Español</span><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--></div><!----></div></div></div></div><p class="mt-4 mb-4 text-gray-400">Aprende Linux, DevOps y Ciberseguridad con Laboratorios Prácticos</p></div><div class="border-b border-gray-700 mb-8"></div><div class="grid gap-6 pb-10 lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-1"><!--[--><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">CURSOS PRÁCTICOS</div><!--[--><div class="flex flex-col gap-2"><a href="https://labex.io/es/learn/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Aprender Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/learn/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Aprender Python</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/learn/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Aprender Ciberseguridad</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/learn/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Aprender Docker</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/learn/comptia" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Aprender CompTIA</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/learn/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Aprender Java</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/learn/data-science" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Aprender Ciencia de Datos</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/learn/git" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Aprender Git</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/learn/kubernetes" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Aprender Kubernetes</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/learn/kali" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Aprender Kali Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/learn/ansible" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Aprender Ansible</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/learn/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Aprender DevOps</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/learn/ml" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Aprender Machine Learning</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/courses/rhcsa-certification-exam-practice-exercises" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Examen de Práctica RHCSA</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/courses/comptia-linux-plus-training-labs" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">CompTIA Linux+</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/exercises/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Ejercicios de Python</a></div><div class="flex flex-col gap-2"><a href="https://linux-commands.labex.io/" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Hoja de Comandos de Linux</a></div><!--]--></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">LABORATORIOS DE PRÁCTICA</div><!--[--><div class="flex flex-col gap-2"><a href="https://labex.io/es/projects/category/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Proyectos Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/projects/category/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Proyectos Python</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/projects/category/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Proyectos Java</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/projects/category/c" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Proyectos en Lenguaje C</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/projects/category/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Proyectos DevOps</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/projects/category/go" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Proyectos Golang</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/free-labs/git" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Práctica de Git</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/free-labs/shell" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Práctica de Shell</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/free-labs/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Práctica de Java</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/free-labs/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Práctica de Docker</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/free-labs/mysql" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Práctica de MySQL</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/free-labs/mongodb" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Práctica de MongoDB</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/free-labs/kubernetes" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Práctica de Kubernetes</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/free-labs/ml" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Práctica de Machine Learning</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/free-labs/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Práctica de Ciberseguridad</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/free-labs/nmap" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Práctica de Nmap</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/free-labs/wireshark" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Práctica de Wireshark</a></div><!--]--></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">ENTORNOS DE PRÁCTICA</div><!--[--><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/linux-online-linux-terminal-and-playground-372915" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Terminal Linux Online</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/docker-online-docker-playground-372912" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Entorno Docker</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/kubernetes-online-kubernetes-playground-593609" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Entorno Kubernetes</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/python-online-python-playground-372886" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Entorno Python</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/go-online-golang-playground-372913" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Entorno Golang</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/cpp-online-c-playground-372911" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Compilador C++ Online</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/ansible-online-ansible-playground-415831" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Entorno Ansible</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/jenkins-online-jenkins-playground-415838" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Entorno Jenkins</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/java-online-java-playground-372914" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Entorno Java</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/rust-online-rust-playground-372918" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Entorno Rust</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/kali-online-kali-linux-terminal-and-playground-592935" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Kali Linux Online</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/nmap-online-nmap-playground-593613" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Nmap Online</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/wireshark-online-wireshark-playground-593624" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Wireshark Online</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/mysql-online-mysql-playground-372916" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">MySQL Online</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/kali-online-postgresql-database-playground-593616" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">PostgreSQL Online</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/rhel-online-rhel-terminal-rhcsa-and-rhce-exam-playground-592933" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Simulador de Examen RHCSA</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/lesson/choosing-a-linux-distribution" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Mejor distribución Linux</a></div><!--]--></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">TUTORIALES</div><!--[--><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/category/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Tutorial de Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/category/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Tutorial de Docker</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/category/kubernetes" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Tutorial de Kubernetes</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/category/mongodb" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Tutorial de MongoDB</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/category/postgresql" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Tutorial de PostgreSQL</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/category/wireshark" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Tutorial de Wireshark</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/category/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Tutorial de DevOps</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/category/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Tutorial de Ciberseguridad</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/java-java-interview-questions-and-answers-593685" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Preguntas de Entrevista de Java</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/python-python-interview-questions-and-answers-593698" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Preguntas de Entrevista de Python</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/kubernetes-kubernetes-interview-questions-and-answers-593688" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Preguntas de Entrevista de Kubernetes</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/linux-devops-interview-questions-and-answers-593679" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Preguntas de Entrevista de DevOps</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/cybersecurity-cybersecurity-interview-questions-and-answers-593676" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Preguntas de Entrevista de Ciberseguridad</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/docker-docker-interview-questions-and-answers-593680" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Preguntas de Entrevista de Docker</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/linux-linux-interview-questions-and-answers-593689" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Preguntas de Entrevista de Linux</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/mongodb-mongodb-interview-questions-and-answers-593692" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Preguntas de Entrevista de MongoDB</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/es/tutorials/linux-database-interview-questions-and-answers-593677" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Preguntas de Entrevista de Bases de Datos</a></div><!--]--></div><!--]--></div><div class="flex flex-wrap justify-center items-center gap-2 text-sm text-gray-400"><a href="https://support.labex.io" target="_blank" class="hover:text-white">SOPORTE</a><span class="text-gray-600">|</span><a href="mailto:info@labex.io" class="hover:text-white">CONTACTO</a><span class="text-gray-600">|</span><a href="/es/forum" class="hover:text-white">FORO</a><span class="text-gray-600">|</span><a href="/es/tutorials" class="hover:text-white">TUTORIALES</a><span class="text-gray-600">|</span><a href="/es/free-labs" class="hover:text-white">LABORATORIOS GRATUITOS</a><span class="text-gray-600">|</span><a href="/es/linuxjourney" class="hover:text-white">LINUX JOURNEY</a><span class="text-gray-600">|</span><a href="/es/exercises" class="hover:text-white">EJERCICIOS</a><span class="text-gray-600">|</span><a href="/es/teams" class="hover:text-white">LABEX TEAMS</a><span class="text-gray-600">|</span><a href="https://labex.io/es/questions/labex-affiliate-program-a6jov663" rel="noopener noreferrer" class="hover:text-white">AFILIADOS</a><span class="text-gray-600">|</span><a href="https://sitemap.labex.io/" rel="noopener noreferrer" class="hover:text-white">MAPA DEL SITIO</a><span class="text-gray-600">|</span><a href="/es/privacy" class="hover:text-white">POLÍTICA DE PRIVACIDAD</a><span class="text-gray-600">|</span><a href="/es/terms" class="hover:text-white">TÉRMINOS DE SERVICIO</a></div><div class="sm:col-span-2 md:col-span-3 lg:col-span-4 text-gray-400 text-center"><div class="flex gap-2 mt-4 justify-center"><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Twitter" href="https://x.com/intent/follow?screen_name=wearelabex" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DM2q4mCJ.svg#x-black" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Facebook" href="https://www.facebook.com/WeAreLabEx/" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DM2q4mCJ.svg#facebook" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="LinkedIn" href="https://www.linkedin.com/company/wearelabex/mycompany/" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DM2q4mCJ.svg#linkedin" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="TikTok" href="https://www.tiktok.com/@labexcoding" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DM2q4mCJ.svg#tiktok" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="YouTube" href="https://www.youtube.com/@labexio" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DM2q4mCJ.svg#youtube" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Discord" href="https://discord.gg/J6k3u69nU6" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DM2q4mCJ.svg#discord" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Github" href="https://github.com/labex-labs" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DM2q4mCJ.svg#github" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Dockerhub" href="https://hub.docker.com/u/labex" rel="noopener noreferrer" target="_blank"><!--[--><!--[--><!----><!--]--><!--[--><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.DM2q4mCJ.svg#docker-white" fill="#333"></use></svg><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--></div></div><!--]--></div></div><div class="py-3"><div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl"><!--[--><p class="text-gray-400 font-medium text-center mb-0"> © 2017-2026 LabEx Technology Limited All Rights Reserved </p><!--]--></div></div></footer><!--]--><div class="alert-box" data-v-285a8eec><!--[--><!--]--></div><div></div><!--]--></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true">[["Reactive",1],{"data":2,"state":871,"once":1136,"_errors":1137,"serverRendered":298,"path":1138},{"footerData_es":3,"tutorialDetail-html-create-basic-html-structure-and-tags-451029-es":221,"skillTreeListData":342,"tutorialRecommendCourseListData":456,"skillTreeDetailData":480},{"groups":4},[5,59,113,167],{"name":6,"items":7},"CURSOS PRÁCTICOS",[8,11,14,17,20,23,26,29,32,35,38,41,44,47,50,53,56],{"name":9,"url":10},"Aprender Linux","https://labex.io/es/learn/linux",{"name":12,"url":13},"Aprender Python","https://labex.io/es/learn/python",{"name":15,"url":16},"Aprender Ciberseguridad","https://labex.io/es/learn/cybersecurity",{"name":18,"url":19},"Aprender Docker","https://labex.io/es/learn/docker",{"name":21,"url":22},"Aprender CompTIA","https://labex.io/es/learn/comptia",{"name":24,"url":25},"Aprender Java","https://labex.io/es/learn/java",{"name":27,"url":28},"Aprender Ciencia de Datos","https://labex.io/es/learn/data-science",{"name":30,"url":31},"Aprender Git","https://labex.io/es/learn/git",{"name":33,"url":34},"Aprender Kubernetes","https://labex.io/es/learn/kubernetes",{"name":36,"url":37},"Aprender Kali Linux","https://labex.io/es/learn/kali",{"name":39,"url":40},"Aprender Ansible","https://labex.io/es/learn/ansible",{"name":42,"url":43},"Aprender DevOps","https://labex.io/es/learn/devops",{"name":45,"url":46},"Aprender Machine Learning","https://labex.io/es/learn/ml",{"name":48,"url":49},"Examen de Práctica RHCSA","https://labex.io/es/courses/rhcsa-certification-exam-practice-exercises",{"name":51,"url":52},"CompTIA Linux+","https://labex.io/es/courses/comptia-linux-plus-training-labs",{"name":54,"url":55},"Ejercicios de Python","https://labex.io/es/exercises/python",{"name":57,"url":58},"Hoja de Comandos de Linux","https://linux-commands.labex.io/",{"name":60,"items":61},"LABORATORIOS DE PRÁCTICA",[62,65,68,71,74,77,80,83,86,89,92,95,98,101,104,107,110],{"name":63,"url":64},"Proyectos Linux","https://labex.io/es/projects/category/linux",{"name":66,"url":67},"Proyectos Python","https://labex.io/es/projects/category/python",{"name":69,"url":70},"Proyectos Java","https://labex.io/es/projects/category/java",{"name":72,"url":73},"Proyectos en Lenguaje C","https://labex.io/es/projects/category/c",{"name":75,"url":76},"Proyectos DevOps","https://labex.io/es/projects/category/devops",{"name":78,"url":79},"Proyectos Golang","https://labex.io/es/projects/category/go",{"name":81,"url":82},"Práctica de Git","https://labex.io/es/free-labs/git",{"name":84,"url":85},"Práctica de Shell","https://labex.io/es/free-labs/shell",{"name":87,"url":88},"Práctica de Java","https://labex.io/es/free-labs/java",{"name":90,"url":91},"Práctica de Docker","https://labex.io/es/free-labs/docker",{"name":93,"url":94},"Práctica de MySQL","https://labex.io/es/free-labs/mysql",{"name":96,"url":97},"Práctica de MongoDB","https://labex.io/es/free-labs/mongodb",{"name":99,"url":100},"Práctica de Kubernetes","https://labex.io/es/free-labs/kubernetes",{"name":102,"url":103},"Práctica de Machine Learning","https://labex.io/es/free-labs/ml",{"name":105,"url":106},"Práctica de Ciberseguridad","https://labex.io/es/free-labs/cybersecurity",{"name":108,"url":109},"Práctica de Nmap","https://labex.io/es/free-labs/nmap",{"name":111,"url":112},"Práctica de Wireshark","https://labex.io/es/free-labs/wireshark",{"name":114,"items":115},"ENTORNOS DE PRÁCTICA",[116,119,122,125,128,131,134,137,140,143,146,149,152,155,158,161,164],{"name":117,"url":118},"Terminal Linux Online","https://labex.io/es/tutorials/linux-online-linux-terminal-and-playground-372915",{"name":120,"url":121},"Entorno Docker","https://labex.io/es/tutorials/docker-online-docker-playground-372912",{"name":123,"url":124},"Entorno Kubernetes","https://labex.io/es/tutorials/kubernetes-online-kubernetes-playground-593609",{"name":126,"url":127},"Entorno Python","https://labex.io/es/tutorials/python-online-python-playground-372886",{"name":129,"url":130},"Entorno Golang","https://labex.io/es/tutorials/go-online-golang-playground-372913",{"name":132,"url":133},"Compilador C++ Online","https://labex.io/es/tutorials/cpp-online-c-playground-372911",{"name":135,"url":136},"Entorno Ansible","https://labex.io/es/tutorials/ansible-online-ansible-playground-415831",{"name":138,"url":139},"Entorno Jenkins","https://labex.io/es/tutorials/jenkins-online-jenkins-playground-415838",{"name":141,"url":142},"Entorno Java","https://labex.io/es/tutorials/java-online-java-playground-372914",{"name":144,"url":145},"Entorno Rust","https://labex.io/es/tutorials/rust-online-rust-playground-372918",{"name":147,"url":148},"Kali Linux Online","https://labex.io/es/tutorials/kali-online-kali-linux-terminal-and-playground-592935",{"name":150,"url":151},"Nmap Online","https://labex.io/es/tutorials/nmap-online-nmap-playground-593613",{"name":153,"url":154},"Wireshark Online","https://labex.io/es/tutorials/wireshark-online-wireshark-playground-593624",{"name":156,"url":157},"MySQL Online","https://labex.io/es/tutorials/mysql-online-mysql-playground-372916",{"name":159,"url":160},"PostgreSQL Online","https://labex.io/es/tutorials/kali-online-postgresql-database-playground-593616",{"name":162,"url":163},"Simulador de Examen RHCSA","https://labex.io/es/tutorials/rhel-online-rhel-terminal-rhcsa-and-rhce-exam-playground-592933",{"name":165,"url":166},"Mejor distribución Linux","https://labex.io/es/lesson/choosing-a-linux-distribution",{"name":168,"items":169},"TUTORIALES",[170,173,176,179,182,185,188,191,194,197,200,203,206,209,212,215,218],{"name":171,"url":172},"Tutorial de Linux","https://labex.io/es/tutorials/category/linux",{"name":174,"url":175},"Tutorial de Docker","https://labex.io/es/tutorials/category/docker",{"name":177,"url":178},"Tutorial de Kubernetes","https://labex.io/es/tutorials/category/kubernetes",{"name":180,"url":181},"Tutorial de MongoDB","https://labex.io/es/tutorials/category/mongodb",{"name":183,"url":184},"Tutorial de PostgreSQL","https://labex.io/es/tutorials/category/postgresql",{"name":186,"url":187},"Tutorial de Wireshark","https://labex.io/es/tutorials/category/wireshark",{"name":189,"url":190},"Tutorial de DevOps","https://labex.io/es/tutorials/category/devops",{"name":192,"url":193},"Tutorial de Ciberseguridad","https://labex.io/es/tutorials/category/cybersecurity",{"name":195,"url":196},"Preguntas de Entrevista de Java","https://labex.io/es/tutorials/java-java-interview-questions-and-answers-593685",{"name":198,"url":199},"Preguntas de Entrevista de Python","https://labex.io/es/tutorials/python-python-interview-questions-and-answers-593698",{"name":201,"url":202},"Preguntas de Entrevista de Kubernetes","https://labex.io/es/tutorials/kubernetes-kubernetes-interview-questions-and-answers-593688",{"name":204,"url":205},"Preguntas de Entrevista de DevOps","https://labex.io/es/tutorials/linux-devops-interview-questions-and-answers-593679",{"name":207,"url":208},"Preguntas de Entrevista de Ciberseguridad","https://labex.io/es/tutorials/cybersecurity-cybersecurity-interview-questions-and-answers-593676",{"name":210,"url":211},"Preguntas de Entrevista de Docker","https://labex.io/es/tutorials/docker-docker-interview-questions-and-answers-593680",{"name":213,"url":214},"Preguntas de Entrevista de Linux","https://labex.io/es/tutorials/linux-linux-interview-questions-and-answers-593689",{"name":216,"url":217},"Preguntas de Entrevista de MongoDB","https://labex.io/es/tutorials/mongodb-mongodb-interview-questions-and-answers-593692",{"name":219,"url":220},"Preguntas de Entrevista de Bases de Datos","https://labex.io/es/tutorials/linux-database-interview-questions-and-answers-593677",{"tutorial":222,"steps":312,"skilltrees":340},{"id":223,"name":224,"fee_type":225,"type":226,"difficulty":227,"time":228,"from_community":229,"max_lab_num":230,"allow_to_start":229,"remain_num":226,"allow_to_view":229,"skills":231,"hidden":229,"path":295,"alias":296,"icon":297,"show_in_tutorial":298,"description":299,"default_console_type":300,"meta_title":224,"meta_description":299,"meta_keywords":301,"skilltree_alias":237,"practice_url":239,"langs":302,"ai_verify":229},451029,"Crear estructura y etiquetas HTML básicas",2,0,"Beginner",25,false,-1,[232,244,250,256,262,268,277,286],{"key":233,"name":234,"desc":235,"project":236,"group":240},"html/basic_elems","Basic Elements","Basic HTML elements such as \u003Chtml>, \u003Chead>, \u003Ctitle>, and \u003Cbody> are essential components of any HTML document, providing the overall structure and content.",{"key":237,"name":238,"desc":239},"html","HTML","",{"key":241,"name":242,"desc":243},"html/BasicStructureGroup","Basic Structure","Basic Structure covers the fundamental elements and declarations necessary for creating the basic structure of an HTML document. It includes basic elements, head elements, character encoding, language declaration, and viewport declaration.",{"key":245,"name":246,"desc":247,"project":248,"group":249},"html/head_elems","Head Elements","Head elements like \u003Cmeta>, \u003Clink>, and \u003Cscript> are used to define metadata, link external resources, and include scripts in the document's head section.",{"key":237,"name":238,"desc":239},{"key":241,"name":242,"desc":243},{"key":251,"name":252,"desc":253,"project":254,"group":255},"html/charset","Character Encoding","Character encoding, specified with \u003Cmeta charset>, determines how characters are represented in the document, ensuring proper text rendering.",{"key":237,"name":238,"desc":239},{"key":241,"name":242,"desc":243},{"key":257,"name":258,"desc":259,"project":260,"group":261},"html/lang_decl","Language Declaration","The \u003Chtml> tag's 'lang' attribute declares the language of the document, aiding in accessibility and proper rendering for different languages.",{"key":237,"name":238,"desc":239},{"key":241,"name":242,"desc":243},{"key":263,"name":264,"desc":265,"project":266,"group":267},"html/viewport","Viewport Declaration","Viewport declarations using the \u003Cmeta viewport> tag help control how the web page is displayed on various devices, enhancing responsiveness.",{"key":237,"name":238,"desc":239},{"key":241,"name":242,"desc":243},{"key":269,"name":270,"desc":271,"project":272,"group":273},"html/text_head","Text and Headings","HTML provides tags like \u003Cp>, \u003Ch1> to \u003Ch6>, and \u003Cspan> for organizing and formatting text, including headings of various levels.",{"key":237,"name":238,"desc":239},{"key":274,"name":275,"desc":276},"html/TextContentandFormattingGroup","Text Content and Formatting","Text Content and Formatting focuses on working with text content, headings, paragraphs, lists, quotations, and text direction in HTML documents.",{"key":278,"name":279,"desc":280,"project":281,"group":282},"html/doc_flow","Document Flow Understanding","Understanding the natural document flow and display properties of HTML elements is essential for creating cohesive and responsive layouts.",{"key":237,"name":238,"desc":239},{"key":283,"name":284,"desc":285},"html/LayoutandSectioningGroup","Layout and Sectioning","Layout and Sectioning focuses on layout-related HTML elements, navigation, document flow, and considerations for effective web page structure.",{"key":287,"name":288,"desc":289,"project":290,"group":291},"html/inter_elems","Interactive and Dynamic Elements","Interactive and dynamic elements, such as \u003Ciframe>, \u003Caudio>, \u003Cvideo>, and \u003Ccanvas>, enable the creation of engaging and interactive web content that responds to user actions.",{"key":237,"name":238,"desc":239},{"key":292,"name":293,"desc":294},"html/AdvancedElementsGroup","Advanced Elements","Advanced Elements covers advanced HTML elements and features, including custom data attributes, accessibility considerations, and HTML templating.","web/lab-create-basic-html-structure-and-tags","html-create-basic-html-structure-and-tags-451029","https://icons.labex.io/create-basic-html-structure-and-tags.png",true,"Aprende cómo crear una estructura básica de documento HTML, comprende las etiquetas HTML esenciales y construye una página web fundamental con un marcado semántico adecuado.",4,"HTML, desarrollo web, etiquetas HTML, estructura de documento, DOCTYPE, etiquetas meta, HTML5",[303,304,305,306,307,308,309,310,311],"zh","es","fr","de","ja","ru","ko","pt","en",[313,317,322,325,329,332,336],{"position":226,"title":314,"layout":315,"text":316,"need_verify":229,"has_solution":229},"Introducción","doc-fullscreen","## Introducción\n\nEn este laboratorio, los estudiantes aprenderán las habilidades fundamentales para crear una estructura básica de documento HTML y comprender las etiquetas HTML esenciales. El laboratorio guía a los participantes a través de la configuración de un documento HTML con una declaración de DOCTYPE adecuada, la adición de la etiqueta raíz HTML, la configuración de la sección de encabezado y la exploración de diferentes tipos de etiquetas HTML.\n\nLos participantes comenzarán creando un documento HTML5, aprendiendo cómo declarar el tipo de documento, estructurar el diseño básico de la página y comprender el propósito de elementos clave como `\u003Chtml>`, `\u003Chead>` y `\u003Cbody>`. Al final del laboratorio, los estudiantes tendrán una comprensión integral de cómo crear un documento HTML bien formado y utilizar diversas etiquetas HTML para estructurar el contenido de una página web.\n\n\u003Cdiv class=\"text-xs border-t mt-4 pt-2\">\nEste es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel \u003Cspan class=\"text-green-600\">principiante\u003C/span> con una tasa de finalización del \u003Cspan class=\"text-green-600\">85%\u003C/span>. Ha recibido una tasa de reseñas positivas del \u003Cspan class=\"text-primary-600\">99%\u003C/span> por parte de los estudiantes.\n\u003C/div>\n",{"position":318,"title":319,"layout":320,"text":321,"need_verify":298,"has_solution":229},1,"Configurar un documento HTML con la declaración DOCTYPE","doc-workbench-split","## Configurar un documento HTML con la declaración DOCTYPE\n\nEn este paso, aprenderás cómo configurar la base básica de un documento HTML agregando la declaración de DOCTYPE. La declaración de DOCTYPE es crucial ya que le dice a los navegadores web qué versión de HTML está utilizando tu documento, lo que garantiza una representación adecuada y compatibilidad.\n\nPrimero, abre el WebIDE y crea un nuevo archivo llamado `index.html` en el directorio `~/project`.\n\nLa declaración de DOCTYPE para HTML5 es simple y directa. La agregarás como la primera línea de tu documento HTML:\n\n```html\n\u003C!doctype html>\n```\n\nEsta declaración le dice a los navegadores que estás utilizando HTML5, la última versión de HTML. No distingue entre mayúsculas y minúsculas, pero se recomienda la versión en minúsculas para mantener la coherencia y la legibilidad.\n\nCreemos una estructura completa de documento HTML básico con la declaración de DOCTYPE:\n\n```html\n\u003C!doctype html>\n\u003Chtml lang=\"en\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\" />\n \u003Ctitle>My First HTML Page\u003C/title>\n \u003C/head>\n \u003Cbody>\n \u003Ch1>Welcome to HTML!\u003C/h1>\n \u003C/body>\n\u003C/html>\n```\n\n![Estructura del documento HTML](https://file.labex.io/namespace/df87b950-1f37-4316-bc07-6537a1f2c481/web/lab-create-basic-html-structure-and-tags/es/../assets/20250110-10-11-33-jardiBc9.png)\n\n> Notas: Aprende más sobre [Cómo previsualizar archivos HTML en el WebIDE](https://support.labex.io/en/labex-vm/webide#preview-html).\n\nLa salida de ejemplo en el navegador mostraría:\n\n```\nWelcome to HTML!\n```\n\nPuntos clave a recordar:\n\n- La declaración de DOCTYPE debe ser la primera línea de tu documento HTML.\n- Ayuda a los navegadores a entender qué versión de HTML estás utilizando.\n- Para el desarrollo web moderno, utiliza `\u003C!DOCTYPE html>` para HTML5.\n- La declaración no es una etiqueta HTML; es una instrucción para el navegador.\n",{"position":225,"title":323,"layout":320,"text":324,"need_verify":298,"has_solution":229},"Agregar la etiqueta raíz HTML y la estructura básica","## Agregar la etiqueta raíz HTML y la estructura básica\n\nEn este paso, aprenderás sobre la estructura fundamental de un documento HTML, centrándote en la etiqueta raíz HTML y la estructura básica del documento. La etiqueta `\u003Chtml>` es el contenedor de todos los demás elementos HTML y sirve como el elemento raíz de una página HTML.\n\nAbre el archivo `index.html` que creaste en el paso anterior en el WebIDE. Ampliemos la estructura HTML anterior agregando la etiqueta raíz completa y sus componentes esenciales:\n\n```html\n\u003C!doctype html>\n\u003Chtml lang=\"en\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\" />\n \u003Ctitle>My First HTML Page\u003C/title>\n \u003C/head>\n \u003Cbody>\n \u003Ch1>Welcome to HTML Structure\u003C/h1>\n \u003Cp>This is the basic structure of an HTML document.\u003C/p>\n \u003C/body>\n\u003C/html>\n```\n\nDesglosemos los componentes clave:\n\n1. Etiqueta `\u003Chtml>`: El elemento raíz que envuelve todo el contenido HTML restante.\n2. Atributo `lang=\"en\"`: Especifica el idioma del documento (inglés en este caso).\n3. Dos elementos hijos principales:\n - `\u003Chead>`: Contiene metadatos sobre el documento.\n - `\u003Cbody>`: Contiene el contenido visible de la página web.\n\nLa salida de ejemplo en un navegador web se vería así:\n\n```\nWelcome to HTML Structure\nThis is the basic structure of an HTML document.\n```\n\nPuntos clave a recordar:\n\n- Todo documento HTML debe tener una etiqueta raíz `\u003Chtml>`.\n- El atributo `lang` ayuda con la accesibilidad y la optimización para motores de búsqueda.\n- El documento se divide en secciones `\u003Chead>` y `\u003Cbody>`.\n- La correcta anidación de etiquetas es crucial para un HTML válido.\n",{"position":326,"title":327,"layout":320,"text":328,"need_verify":298,"has_solution":229},3,"Configurar la sección \u003Chead> con etiquetas meta y \u003Ctitle>","## Configurar la sección \u003Chead> con etiquetas meta y \u003Ctitle>\n\nEn este paso, aprenderás sobre la sección `\u003Chead>` de un documento HTML y cómo utilizar las etiquetas meta y de título para proporcionar información importante sobre tu página web.\n\nAbre tu archivo `index.html` en el WebIDE y actualiza la sección `\u003Chead>` con el siguiente ejemplo:\n\n```html\n\u003C!doctype html>\n\u003Chtml lang=\"en\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\" />\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n \u003Cmeta name=\"description\" content=\"A simple HTML learning page\" />\n \u003Ctitle>My HTML Learning Journey\u003C/title>\n \u003C/head>\n \u003Cbody>\n \u003Ch1>Welcome to HTML Metadata\u003C/h1>\n \u003Cp>This page demonstrates head section configuration.\u003C/p>\n \u003C/body>\n\u003C/html>\n```\n\nDesglosemos las principales etiquetas meta y sus propósitos:\n\n1. `\u003Cmeta charset=\"UTF-8\">`: Especifica la codificación de caracteres para el documento.\n2. `\u003Cmeta name=\"viewport\">`: Asegura una representación adecuada en diferentes dispositivos.\n3. `\u003Cmeta name=\"description\">`: Proporciona una breve descripción de la página para los motores de búsqueda.\n4. `\u003Ctitle>`: Establece el título de la página que se muestra en la pestaña del navegador.\n\nSalida de ejemplo en una pestaña del navegador:\n\n```\nMy HTML Learning Journey\n```\n\nPuntos clave a recordar:\n\n- La sección `\u003Chead>` contiene metadatos sobre el documento HTML.\n- Las etiquetas meta proporcionan información adicional a los navegadores y motores de búsqueda.\n- La etiqueta `\u003Ctitle>` es crucial para la identificación de la página y el SEO (optimización para motores de búsqueda).\n- Siempre incluye las etiquetas meta de codificación de caracteres y de viewport.\n",{"position":300,"title":330,"layout":320,"text":331,"need_verify":298,"has_solution":229},"Comprender las etiquetas HTML simples y dobles","## Comprender las etiquetas HTML simples y dobles\n\nEn este paso, aprenderás sobre los dos tipos de etiquetas HTML: las etiquetas simples (auto-cerradas) y las etiquetas dobles. Comprender la diferencia entre estas etiquetas es crucial para crear documentos HTML bien estructurados.\n\nAbre tu archivo `index.html` en el WebIDE y actualiza la sección del cuerpo con el siguiente ejemplo:\n\n```html\n\u003C!doctype html>\n\u003Chtml lang=\"en\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\" />\n \u003Ctitle>HTML Tags Exploration\u003C/title>\n \u003C/head>\n \u003Cbody>\n \u003C!-- Double Tags (Opening and Closing) -->\n \u003Ch1>Welcome to HTML Tags\u003C/h1>\n \u003Cp>This is a paragraph with \u003Cstrong>bold text\u003C/strong>.\u003C/p>\n\n \u003C!-- Single (Self-Closing) Tags -->\n \u003Cimg src=\"example.jpg\" alt=\"Example Image\" />\n \u003Cbr />\n \u003Cinput type=\"text\" placeholder=\"Enter your name\" />\n \u003C/body>\n\u003C/html>\n```\n\nDesglosemos los diferentes tipos de etiquetas:\n\nEtiquetas dobles (etiquetas pareadas):\n\n- Tienen una etiqueta de apertura `\u003Ctag>` y una etiqueta de cierre `\u003C/tag>`.\n- El contenido se coloca entre las etiquetas de apertura y cierre.\n- Ejemplos: `\u003Ch1>`, `\u003Cp>`, `\u003Cstrong>`, `\u003Cdiv>`.\n\nEtiquetas simples (etiquetas auto-cerradas):\n\n- No tienen una etiqueta de cierre separada.\n- Se cierran a sí mismas dentro de la etiqueta.\n- Ejemplos: `\u003Cimg>`, `\u003Cbr>`, `\u003Cinput>`.\n\nLa salida de ejemplo en un navegador se mostraría así:\n\n```\nWelcome to HTML Tags\nThis is a paragraph with bold text.\n[An image would be displayed here]\n[A text input field would be shown]\n```\n\n![Salida de ejemplo de etiquetas HTML](https://file.labex.io/namespace/df87b950-1f37-4316-bc07-6537a1f2c481/web/lab-create-basic-html-structure-and-tags/es/../assets/20250110-10-53-27-6sPaawNK.png)\n\nPuntos clave a recordar:\n\n- Las etiquetas dobles envuelven el contenido y requieren tanto una etiqueta de apertura como una de cierre.\n- Las etiquetas simples son autónomas y no envuelven contenido.\n- Siempre cierra las etiquetas dobles para mantener una estructura HTML adecuada.\n- Algunas etiquetas simples pueden tener atributos para proporcionar información adicional.\n",{"position":333,"title":334,"layout":320,"text":335,"need_verify":298,"has_solution":229},5,"Explorar la etiqueta \u003Cbody> y la colocación del contenido de la página","## Explorar la etiqueta \u003Cbody> y la colocación del contenido de la página\n\nEn este paso, aprenderás sobre la etiqueta `\u003Cbody>` y cómo estructurar el contenido dentro de un documento HTML. La etiqueta de cuerpo es donde se coloca todo el contenido visible de una página web.\n\nAbre tu archivo `index.html` en el WebIDE y actualiza la sección del cuerpo con el siguiente ejemplo:\n\n```html\n\u003C!doctype html>\n\u003Chtml lang=\"en\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\" />\n \u003Ctitle>Content Placement Example\u003C/title>\n \u003C/head>\n \u003Cbody>\n \u003C!-- Headings -->\n \u003Ch1>Welcome to HTML Content Placement\u003C/h1>\n \u003Ch2>Subheading Level 2\u003C/h2>\n \u003Ch3>Subheading Level 3\u003C/h3>\n\n \u003C!-- Paragraphs -->\n \u003Cp>This is a paragraph explaining the importance of content structure.\u003C/p>\n\n \u003C!-- Lists -->\n \u003Ch4>Key HTML Elements:\u003C/h4>\n \u003Cul>\n \u003Cli>Headings\u003C/li>\n \u003Cli>Paragraphs\u003C/li>\n \u003Cli>Lists\u003C/li>\n \u003C/ul>\n\n \u003C!-- Div for grouping content -->\n \u003Cdiv>\n \u003Cp>This paragraph is inside a div container.\u003C/p>\n \u003C/div>\n\n \u003C!-- Links and Images -->\n \u003Ca href=\"https://example.com\">Visit Example Website\u003C/a>\n \u003Cimg src=\"example.jpg\" alt=\"Example Image\" width=\"300\" />\n \u003C/body>\n\u003C/html>\n```\n\nLa salida de ejemplo en un navegador se mostraría así:\n\n![Salida de ejemplo de colocación de contenido HTML](https://file.labex.io/namespace/df87b950-1f37-4316-bc07-6537a1f2c481/web/lab-create-basic-html-structure-and-tags/es/../assets/20250113-15-36-31-2tbySUGL.png)\n\nPuntos clave a recordar:\n\n- La etiqueta `\u003Cbody>` contiene todo el contenido visible de la página.\n- Utiliza las etiquetas de encabezado (`\u003Ch1>` a `\u003Ch6>`) para crear una jerarquía de contenido.\n- Los párrafos, las listas y otros elementos ayudan a organizar la información.\n- Las etiquetas `\u003Cdiv>` pueden agrupar y estructurar el contenido.\n- Incluye enlaces y imágenes para mejorar la interactividad de la página.\n",{"position":337,"title":338,"layout":315,"text":339,"need_verify":229,"has_solution":229},6,"Resumen","## Resumen\n\nEn este laboratorio (lab), los participantes aprendieron los pasos fundamentales para crear una estructura básica de documento HTML. El proceso comenzó con la configuración de la declaración DOCTYPE, que es crucial para garantizar una representación adecuada en el navegador y la compatibilidad con HTML5. Los aprendices exploraron las etiquetas HTML esenciales, incluyendo la etiqueta raíz `\u003Chtml>`, las secciones `\u003Chead>` y `\u003Cbody>`, y comprendieron sus roles específicos en la organización del documento.\n\nEl laboratorio guió a los estudiantes a través de la creación de un documento HTML completo, mostrando cómo agregar etiquetas meta, establecer la codificación de caracteres, definir un título de página y colocar contenido dentro de la etiqueta de cuerpo. Los participantes adquirieron experiencia práctica en la construcción de una página HTML bien estructurada, aprendiendo conceptos clave como las etiquetas HTML simples y dobles, la correcta anidación de etiquetas y la importancia del marcado semántico en el desarrollo web.\n",[341],{"name":238,"alias":237},{"paths":343},[344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,447,450,453],{"alias":345,"name":346},"linux","Linux",{"alias":348,"name":349},"devops","DevOps",{"alias":351,"name":352},"cybersecurity","Ciberseguridad",{"alias":354,"name":355},"kali","Kali Linux",{"alias":357,"name":358},"devops-engineer","DevOps Engineer",{"alias":360,"name":361},"cybersecurity-engineer","Cybersecurity Engineer",{"alias":363,"name":364},"database","Base de datos",{"alias":366,"name":367},"datascience","Ciencia de datos",{"alias":369,"name":370},"rhel","Red Hat Enterprise Linux",{"alias":372,"name":373},"comptia","CompTIA",{"alias":375,"name":376},"docker","Docker",{"alias":378,"name":379},"kubernetes","Kubernetes",{"alias":381,"name":382},"python","Python",{"alias":384,"name":385},"git","Git",{"alias":387,"name":388},"shell","Shell",{"alias":390,"name":391},"nmap","Nmap",{"alias":393,"name":394},"wireshark","Wireshark",{"alias":396,"name":397},"hydra","Hydra",{"alias":399,"name":400},"java","Java",{"alias":402,"name":403},"sqlite","SQLite",{"alias":405,"name":406},"postgresql","PostgreSQL",{"alias":408,"name":409},"mysql","MySQL",{"alias":411,"name":412},"redis","Redis",{"alias":414,"name":415},"mongodb","MongoDB",{"alias":417,"name":418},"go","Golang",{"alias":420,"name":421},"cpp","C++",{"alias":423,"name":424},"c","C",{"alias":426,"name":427},"jenkins","Jenkins",{"alias":429,"name":430},"ansible","Ansible",{"alias":432,"name":433},"pandas","Pandas",{"alias":435,"name":436},"numpy","NumPy",{"alias":438,"name":439},"sklearn","scikit-learn",{"alias":441,"name":442},"matplotlib","Matplotlib",{"alias":444,"name":445},"webdev","Desarrollo web",{"alias":237,"name":238},{"alias":448,"name":449},"css","CSS",{"alias":451,"name":452},"javascript","JavaScript",{"alias":454,"name":455},"react","React",{"courses":457},[458,466,473],{"id":459,"alias":460,"name":461,"cover":462,"user_count":463,"level":318,"fee_type":226,"lab_coins":226,"tags":464,"type":226,"status":318,"has_cert":298,"hidden":229},9428,"html-for-beginners","HTML para Principiantes","https://course-cover.labex.io/html-for-beginners.png?lang=es",3795,[237,465],"web-development",{"id":467,"alias":468,"name":469,"cover":470,"user_count":471,"level":318,"fee_type":226,"lab_coins":226,"tags":472,"type":326,"status":318,"has_cert":298,"hidden":229},1823,"project-build-a-tic-tac-toe-web-app","Construir una aplicación web de Tres en Raya","https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=es",143,[451,465],{"id":474,"alias":475,"name":476,"cover":477,"user_count":478,"level":318,"fee_type":226,"lab_coins":226,"tags":479,"type":326,"status":318,"has_cert":298,"hidden":229},1827,"project-creating-a-whack-a-mole-web-game","Creación de un juego web de Golpear al Topo","https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=es",36,[451,465],{"path":481,"team":870},{"id":482,"alias":237,"name":238,"img_url":483,"course_count":318,"hours":484,"enable_uid":229,"skills_count":485,"is_online":298,"is_followed":229,"has_cert":298,"cert_threshold":486,"skilltree":237,"project_count":487,"category":239,"followers_count":488,"tags":489,"url":239,"description":490,"icon":239,"authors":491,"labs_count":333,"levels":492,"learned_skills_count":226,"is_path_group":229,"groups":852,"meta_title":853,"meta_description":854,"meta_keywords":855,"parent_paths":856,"langs":868,"first_lab_alias":869,"first_course_alias":460},52,"https://file.labex.io/upload/u/1991/eGCPCGgBJ3WY.png",30,28,8000,57,12372,[],"Learn HTML, the cornerstone of web development, with this comprehensive learning path. Designed for beginners, this roadmap provides a structured approach to mastering HTML. The interactive HTML courses cover document structure, tags, and semantic markup. Gain real-world experience by completing hands-on, non-video exercises in a dynamic HTML playground to create well-structured web pages.",[],[493,500],{"level":318,"name":494,"courses":495},"courses",[496],{"id":459,"alias":460,"name":497,"cover":498,"user_count":463,"level":318,"fee_type":226,"lab_coins":226,"tags":499,"type":226,"status":318,"has_cert":298,"hidden":229},"HTML for Beginners","https://course-cover.labex.io/html-for-beginners.png",[237,465],{"level":225,"name":501,"courses":502},"projects",[503,507,511,518,525,532,538,545,551,557,563,569,576,582,588,594,600,606,612,619,627,633,639,646,653,659,665,671,677,683,689,695,701,707,713,719,725,731,737,743,749,755,761,767,773,779,785,791,797,803,809,815,821,827,833,839,845],{"id":467,"alias":468,"name":504,"cover":505,"user_count":471,"level":318,"fee_type":226,"lab_coins":226,"tags":506,"type":326,"status":318,"has_cert":298,"hidden":229},"Build a Tic-Tac-Toe Web App","https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png",[451,465],{"id":474,"alias":475,"name":508,"cover":509,"user_count":478,"level":318,"fee_type":226,"lab_coins":226,"tags":510,"type":326,"status":318,"has_cert":298,"hidden":229},"Creating a Whack-a-Mole Web Game","https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png",[451,465],{"id":512,"alias":513,"name":514,"cover":515,"user_count":516,"level":318,"fee_type":226,"lab_coins":226,"tags":517,"type":326,"status":318,"has_cert":298,"hidden":229},2117,"project-create-a-notes-app-using-react","Create a Notes App Using React","https://course-cover.labex.io/project-create-a-notes-app-using-react.png",63,[454,451,465],{"id":519,"alias":520,"name":521,"cover":522,"user_count":523,"level":318,"fee_type":226,"lab_coins":226,"tags":524,"type":326,"status":318,"has_cert":298,"hidden":229},2120,"project-building-a-expense-splitter-web-app","Building a Modern Expense Splitter Web App","https://course-cover.labex.io/project-building-a-expense-splitter-web-app.png",16,[451,465],{"id":526,"alias":527,"name":528,"cover":529,"user_count":530,"level":318,"fee_type":226,"lab_coins":226,"tags":531,"type":326,"status":318,"has_cert":298,"hidden":229},2121,"project-creating-a-drawing-board-web-app","Creating a Drawing Board Web App","https://course-cover.labex.io/project-creating-a-drawing-board-web-app.png",10,[451,465],{"id":533,"alias":534,"name":535,"cover":536,"user_count":523,"level":318,"fee_type":226,"lab_coins":226,"tags":537,"type":326,"status":318,"has_cert":298,"hidden":229},2126,"project-creating-a-task-timer-web-app","Creating a Task Timer Web App","https://course-cover.labex.io/project-creating-a-task-timer-web-app.png",[451,465],{"id":539,"alias":540,"name":541,"cover":542,"user_count":543,"level":318,"fee_type":226,"lab_coins":226,"tags":544,"type":326,"status":318,"has_cert":298,"hidden":229},2152,"project-create-a-swiper-carousel-web-app","Create a Swiper Carousel Web App","https://course-cover.labex.io/project-create-a-swiper-carousel-web-app.png",9,[451,465],{"id":546,"alias":547,"name":548,"cover":549,"user_count":225,"level":318,"fee_type":226,"lab_coins":226,"tags":550,"type":326,"status":318,"has_cert":298,"hidden":229},2205,"project-monty-hall-problem-simulation-web-app","Monty Hall Simulation Web App","https://course-cover.labex.io/project-monty-hall-problem-simulation-web-app.png",[451,465],{"id":552,"alias":553,"name":554,"cover":555,"user_count":300,"level":225,"fee_type":226,"lab_coins":226,"tags":556,"type":326,"status":318,"has_cert":298,"hidden":229},2217,"project-building-a-web-avoiding-block-game","Building a Web Avoiding Block Game","https://course-cover.labex.io/project-building-a-web-avoiding-block-game.png",[451,465],{"id":558,"alias":559,"name":560,"cover":561,"user_count":333,"level":318,"fee_type":226,"lab_coins":226,"tags":562,"type":326,"status":318,"has_cert":298,"hidden":229},2243,"project-2048-web-game-using-jquery","2048 Web Game Using jQuery","https://course-cover.labex.io/project-2048-web-game-using-jquery.png",[451,465],{"id":564,"alias":565,"name":566,"cover":567,"user_count":523,"level":318,"fee_type":226,"lab_coins":226,"tags":568,"type":326,"status":318,"has_cert":298,"hidden":229},2250,"project-developing-a-simple-online-chat-room-using-flask","Developing a Simple Online Chat Room Using Flask","https://course-cover.labex.io/project-developing-a-simple-online-chat-room-using-flask.png",[381,465],{"id":570,"alias":571,"name":572,"cover":573,"user_count":574,"level":318,"fee_type":226,"lab_coins":226,"tags":575,"type":326,"status":318,"has_cert":298,"hidden":229},2260,"project-build-a-sliding-puzzle-game-with-javascript","Build a Sliding Puzzle Game With JavaScript","https://course-cover.labex.io/project-build-a-sliding-puzzle-game-with-javascript.png",8,[451,465],{"id":577,"alias":578,"name":579,"cover":580,"user_count":333,"level":318,"fee_type":226,"lab_coins":226,"tags":581,"type":326,"status":318,"has_cert":298,"hidden":229},2261,"project-create-a-pixel-art-animator-with-react","Create a Pixel Art Animator With React","https://course-cover.labex.io/project-create-a-pixel-art-animator-with-react.png",[454,451,465],{"id":583,"alias":584,"name":585,"cover":586,"user_count":300,"level":318,"fee_type":226,"lab_coins":226,"tags":587,"type":326,"status":318,"has_cert":298,"hidden":229},2262,"project-jquery-flip-puzzle-game","jQuery Flip Puzzle Game","https://course-cover.labex.io/project-jquery-flip-puzzle-game.png",[451,465],{"id":589,"alias":590,"name":591,"cover":592,"user_count":300,"level":318,"fee_type":226,"lab_coins":226,"tags":593,"type":326,"status":318,"has_cert":298,"hidden":229},2293,"project-creating-a-minesweeper-game-with-javascript","Creating a Minesweeper Game With JavaScript","https://course-cover.labex.io/project-creating-a-minesweeper-game-with-javascript.png",[451,465],{"id":595,"alias":596,"name":597,"cover":598,"user_count":300,"level":318,"fee_type":226,"lab_coins":226,"tags":599,"type":326,"status":318,"has_cert":298,"hidden":229},2320,"project-build-a-simple-markdown-editor-with-live-preview","Build a Simple Markdown Editor With Live Preview","https://course-cover.labex.io/project-build-a-simple-markdown-editor-with-live-preview.png",[451,465],{"id":601,"alias":602,"name":603,"cover":604,"user_count":318,"level":318,"fee_type":226,"lab_coins":226,"tags":605,"type":326,"status":318,"has_cert":298,"hidden":229},2321,"project-implement-a-magnifying-glass-effect-using-canvas","Implement a Magnifying Glass Effect Using Canvas","https://course-cover.labex.io/project-implement-a-magnifying-glass-effect-using-canvas.png",[451,465],{"id":607,"alias":608,"name":609,"cover":610,"user_count":226,"level":318,"fee_type":226,"lab_coins":226,"tags":611,"type":326,"status":318,"has_cert":298,"hidden":229},2363,"project-build-an-image-cropping-tool-using-html5","Build an Image Cropping Tool Using HTML5","https://course-cover.labex.io/project-build-an-image-cropping-tool-using-html5.png",[451,465],{"id":613,"alias":614,"name":615,"cover":616,"user_count":617,"level":225,"fee_type":226,"lab_coins":226,"tags":618,"type":326,"status":318,"has_cert":298,"hidden":229},2826,"project-building-a-christmas-wish-list-builder-in-react","Building a Christmas Wish List Builder in React","https://course-cover.labex.io/project-building-a-christmas-wish-list-builder-in-react.png",21,[454,451,465],{"id":620,"alias":621,"name":622,"cover":623,"user_count":624,"level":318,"fee_type":226,"lab_coins":226,"tags":625,"type":326,"status":318,"has_cert":298,"hidden":229},4544,"project-deploying-mobilenet-with-tensorflowjs-and-flask","Deploying MobileNet With TensorFlow.js and Flask","https://course-cover.labex.io/project-deploying-mobilenet-with-tensorflowjs-and-flask.png",11,[381,626],"data-science",{"id":628,"alias":629,"name":630,"cover":631,"user_count":318,"level":318,"fee_type":226,"lab_coins":226,"tags":632,"type":326,"status":318,"has_cert":298,"hidden":229},4573,"project-dont-step-on-the-white-tile","Don't Step on the White Tile","https://course-cover.labex.io/project-dont-step-on-the-white-tile.png",[451,465],{"id":634,"alias":635,"name":636,"cover":637,"user_count":225,"level":318,"fee_type":226,"lab_coins":226,"tags":638,"type":326,"status":318,"has_cert":298,"hidden":229},4574,"project-scratch-card-game","Build a Scratch Card Web Game","https://course-cover.labex.io/project-scratch-card-game.png",[451,465],{"id":640,"alias":641,"name":642,"cover":643,"user_count":644,"level":326,"fee_type":226,"lab_coins":226,"tags":645,"type":326,"status":318,"has_cert":298,"hidden":229},4719,"project-build-a-simple-url-shortener-with-flask-and-mysql","Build a Simple URL Shortener With Flask and MySQL","https://course-cover.labex.io/project-build-a-simple-url-shortener-with-flask-and-mysql.png",31,[451,465],{"id":647,"alias":648,"name":649,"cover":650,"user_count":651,"level":318,"fee_type":226,"lab_coins":226,"tags":652,"type":326,"status":318,"has_cert":298,"hidden":229},4871,"project-build-a-web-based-tcp-port-scanner","Build a Web Based TCP Port Scanner","https://course-cover.labex.io/project-build-a-web-based-tcp-port-scanner.png",12,[351,390,345],{"id":654,"alias":655,"name":656,"cover":657,"user_count":300,"level":318,"fee_type":226,"lab_coins":226,"tags":658,"type":326,"status":318,"has_cert":298,"hidden":229},5455,"project-do-a-search","Vue.js Search Functionality Development","https://course-cover.labex.io/project-do-a-search.png",[451,465],{"id":660,"alias":661,"name":662,"cover":663,"user_count":333,"level":318,"fee_type":226,"lab_coins":226,"tags":664,"type":326,"status":318,"has_cert":298,"hidden":229},5456,"project-dynamic-tab-bar","Implement Dynamic Sticky Tab Bar","https://course-cover.labex.io/project-dynamic-tab-bar.png",[448,465],{"id":666,"alias":667,"name":668,"cover":669,"user_count":225,"level":318,"fee_type":226,"lab_coins":226,"tags":670,"type":326,"status":318,"has_cert":298,"hidden":229},5459,"project-a-good-review-for-the-takeout","A Good Review for the Takeout","https://course-cover.labex.io/project-a-good-review-for-the-takeout.png",[451,465],{"id":672,"alias":673,"name":674,"cover":675,"user_count":326,"level":318,"fee_type":226,"lab_coins":226,"tags":676,"type":326,"status":318,"has_cert":298,"hidden":229},5460,"project-add-new-address","Address Management Web Application","https://course-cover.labex.io/project-add-new-address.png",[451,465],{"id":678,"alias":679,"name":680,"cover":681,"user_count":318,"level":318,"fee_type":226,"lab_coins":226,"tags":682,"type":326,"status":318,"has_cert":298,"hidden":229},5467,"project-holiday-greeting-card","Random Greeting Card Generator","https://course-cover.labex.io/project-holiday-greeting-card.png",[451,465],{"id":684,"alias":685,"name":686,"cover":687,"user_count":326,"level":318,"fee_type":226,"lab_coins":226,"tags":688,"type":326,"status":318,"has_cert":298,"hidden":229},5468,"project-movie-ticket-reservation","Movie Ticket Reservation System","https://course-cover.labex.io/project-movie-ticket-reservation.png",[451,465],{"id":690,"alias":691,"name":692,"cover":693,"user_count":225,"level":318,"fee_type":226,"lab_coins":226,"tags":694,"type":326,"status":318,"has_cert":298,"hidden":229},5476,"project-web-ppt","Web-based HTML Presentation Builder","https://course-cover.labex.io/project-web-ppt.png",[451,465],{"id":696,"alias":697,"name":698,"cover":699,"user_count":226,"level":318,"fee_type":226,"lab_coins":226,"tags":700,"type":326,"status":318,"has_cert":298,"hidden":229},5479,"project-fun-shopping","Vue.js Shopping Cart with Drag and Drop","https://course-cover.labex.io/project-fun-shopping.png",[451,465],{"id":702,"alias":703,"name":704,"cover":705,"user_count":318,"level":318,"fee_type":226,"lab_coins":226,"tags":706,"type":326,"status":318,"has_cert":298,"hidden":229},5481,"project-layout-switch","Product List with Layout Switching","https://course-cover.labex.io/project-layout-switch.png",[451,465],{"id":708,"alias":709,"name":710,"cover":711,"user_count":226,"level":318,"fee_type":226,"lab_coins":226,"tags":712,"type":326,"status":318,"has_cert":298,"hidden":229},5485,"project-read-it","Build a Vue.js E-book Reader","https://course-cover.labex.io/project-read-it.png",[451,465],{"id":714,"alias":715,"name":716,"cover":717,"user_count":226,"level":318,"fee_type":226,"lab_coins":226,"tags":718,"type":326,"status":318,"has_cert":298,"hidden":229},5488,"project-switch-business-status","Building a Vue.js Store Status Switcher","https://course-cover.labex.io/project-switch-business-status.png",[451,465],{"id":720,"alias":721,"name":722,"cover":723,"user_count":318,"level":318,"fee_type":226,"lab_coins":226,"tags":724,"type":326,"status":318,"has_cert":298,"hidden":229},5537,"project-atomic-css","Implement Atomic Flex Layout with CSS","https://course-cover.labex.io/project-atomic-css.png",[448,465],{"id":726,"alias":727,"name":728,"cover":729,"user_count":326,"level":318,"fee_type":226,"lab_coins":226,"tags":730,"type":326,"status":318,"has_cert":298,"hidden":229},5538,"project-creating-website-homepage","Building a Responsive News Website Homepage","https://course-cover.labex.io/project-creating-website-homepage.png",[448,465],{"id":732,"alias":733,"name":734,"cover":735,"user_count":326,"level":318,"fee_type":226,"lab_coins":226,"tags":736,"type":326,"status":318,"has_cert":298,"hidden":229},5539,"project-creative-billboard","Creative Billboard Design with Wooden Textures","https://course-cover.labex.io/project-creative-billboard.png",[448,465],{"id":738,"alias":739,"name":740,"cover":741,"user_count":300,"level":318,"fee_type":226,"lab_coins":226,"tags":742,"type":326,"status":318,"has_cert":298,"hidden":229},5543,"project-fix-website-display","Fixing Website Display Issues","https://course-cover.labex.io/project-fix-website-display.png",[448,465],{"id":744,"alias":745,"name":746,"cover":747,"user_count":333,"level":318,"fee_type":226,"lab_coins":226,"tags":748,"type":326,"status":318,"has_cert":298,"hidden":229},5544,"project-flex-dice-layout","Responsive Dice Layout with Flexbox","https://course-cover.labex.io/project-flex-dice-layout.png",[448,465],{"id":750,"alias":751,"name":752,"cover":753,"user_count":326,"level":318,"fee_type":226,"lab_coins":226,"tags":754,"type":326,"status":318,"has_cert":298,"hidden":229},5549,"project-give-your-page-a-makeover","Give Your Page a Makeover","https://course-cover.labex.io/project-give-your-page-a-makeover.png",[448,465],{"id":756,"alias":757,"name":758,"cover":759,"user_count":530,"level":318,"fee_type":226,"lab_coins":226,"tags":760,"type":326,"status":318,"has_cert":298,"hidden":229},5550,"project-labex-knowledge-network","Simple and Beautiful Home Page Design","https://course-cover.labex.io/project-labex-knowledge-network.png",[448,465],{"id":762,"alias":763,"name":764,"cover":765,"user_count":300,"level":318,"fee_type":226,"lab_coins":226,"tags":766,"type":326,"status":318,"has_cert":298,"hidden":229},5551,"project-movie-theater-seat-arrangement","Movie Theater Seat Arrangement","https://course-cover.labex.io/project-movie-theater-seat-arrangement.png",[448,465],{"id":768,"alias":769,"name":770,"cover":771,"user_count":318,"level":318,"fee_type":226,"lab_coins":226,"tags":772,"type":326,"status":318,"has_cert":298,"hidden":229},5552,"project-responsive-page-layout","Responsive Web Design with Gulp","https://course-cover.labex.io/project-responsive-page-layout.png",[448,465],{"id":774,"alias":775,"name":776,"cover":777,"user_count":333,"level":318,"fee_type":226,"lab_coins":226,"tags":778,"type":326,"status":318,"has_cert":298,"hidden":229},5553,"project-responsive-web-design","Responsive Web Design for All Screens","https://course-cover.labex.io/project-responsive-web-design.png",[448,465],{"id":780,"alias":781,"name":782,"cover":783,"user_count":318,"level":318,"fee_type":226,"lab_coins":226,"tags":784,"type":326,"status":318,"has_cert":298,"hidden":229},5594,"project-table-data-conversion","Data Formatting and Visualization with Vue.js","https://course-cover.labex.io/project-table-data-conversion.png",[451,465],{"id":786,"alias":787,"name":788,"cover":789,"user_count":300,"level":318,"fee_type":226,"lab_coins":226,"tags":790,"type":326,"status":318,"has_cert":298,"hidden":229},5595,"project-vanished-into-thin-air","Vanished Into Thin Air","https://course-cover.labex.io/project-vanished-into-thin-air.png",[451,465],{"id":792,"alias":793,"name":794,"cover":795,"user_count":226,"level":318,"fee_type":226,"lab_coins":226,"tags":796,"type":326,"status":318,"has_cert":298,"hidden":229},5596,"project-wish-sticky-note","Wish Sticky Note App with Vue.js","https://course-cover.labex.io/project-wish-sticky-note.png",[451,465],{"id":798,"alias":799,"name":800,"cover":801,"user_count":226,"level":318,"fee_type":226,"lab_coins":226,"tags":802,"type":326,"status":318,"has_cert":298,"hidden":229},5607,"project-dynamization-of-homepage-data","Dynamization of Homepage Data","https://course-cover.labex.io/project-dynamization-of-homepage-data.png",[451,465],{"id":804,"alias":805,"name":806,"cover":807,"user_count":225,"level":318,"fee_type":226,"lab_coins":226,"tags":808,"type":326,"status":318,"has_cert":298,"hidden":229},5609,"project-food-protein-revealed","Data Visualization with Echarts and JSON","https://course-cover.labex.io/project-food-protein-revealed.png",[451,465],{"id":810,"alias":811,"name":812,"cover":813,"user_count":226,"level":318,"fee_type":226,"lab_coins":226,"tags":814,"type":326,"status":318,"has_cert":298,"hidden":229},5611,"project-lets-have-a-meeting-together","Let’s Have a Meeting Together","https://course-cover.labex.io/project-lets-have-a-meeting-together.png",[451,465],{"id":816,"alias":817,"name":818,"cover":819,"user_count":318,"level":318,"fee_type":226,"lab_coins":226,"tags":820,"type":326,"status":318,"has_cert":298,"hidden":229},5612,"project-missing-token","Building Login with Vue.js and Vuex","https://course-cover.labex.io/project-missing-token.png",[451,465],{"id":822,"alias":823,"name":824,"cover":825,"user_count":226,"level":318,"fee_type":226,"lab_coins":226,"tags":826,"type":326,"status":318,"has_cert":298,"hidden":229},5618,"project-time-management-master","Build a Vue.js Task Manager","https://course-cover.labex.io/project-time-management-master.png",[451,465],{"id":828,"alias":829,"name":830,"cover":831,"user_count":226,"level":318,"fee_type":226,"lab_coins":226,"tags":832,"type":326,"status":318,"has_cert":298,"hidden":229},5695,"project-implement-user-login-function","Implement User Login Function","https://course-cover.labex.io/project-implement-user-login-function.png",[451,465],{"id":834,"alias":835,"name":836,"cover":837,"user_count":318,"level":318,"fee_type":226,"lab_coins":226,"tags":838,"type":326,"status":318,"has_cert":298,"hidden":229},5713,"project-time-with-your-phone","Time With Your Phone","https://course-cover.labex.io/project-time-with-your-phone.png",[451,465],{"id":840,"alias":841,"name":842,"cover":843,"user_count":318,"level":318,"fee_type":226,"lab_coins":226,"tags":844,"type":326,"status":318,"has_cert":298,"hidden":229},5714,"project-weather-trend","Weather Trend Chart with Vue and Echarts","https://course-cover.labex.io/project-weather-trend.png",[451,465],{"id":846,"alias":847,"name":848,"cover":849,"user_count":850,"level":318,"fee_type":226,"lab_coins":226,"tags":851,"type":326,"status":318,"has_cert":298,"hidden":229},5720,"project-counting-access-times-by-ip","Counting Access Times by IP","https://course-cover.labex.io/project-counting-access-times-by-ip.png",13,[399],[],"Learn HTML | HTML Courses Online","Learn HTML with a structured learning path designed for beginners. These interactive HTML courses allow you to practice web design in a dynamic HTML playground and build foundational skills.","Learn HTML, HTML Courses, HTML for beginners, learn html online, html tutorials, web fundamentals, html basics, html practice",[857],{"id":858,"alias":465,"name":859,"img_url":860,"course_count":333,"hours":861,"enable_uid":229,"skills_count":862,"is_online":298,"is_followed":229,"has_cert":298,"cert_threshold":486,"skilltree":465,"project_count":863,"category":239,"followers_count":864,"tags":865,"url":239,"description":866,"icon":239,"authors":867,"labs_count":644},71,"Web Development","https://file.labex.io/upload/u/1991/Y5b0Qn21hQLI.png",300,99,130,12884,[],"Learn Web Development with this comprehensive learning path designed for beginners. These structured Web Development Courses provide a clear roadmap to master both front-end and back-end technologies, from fundamentals like HTML, CSS, and JavaScript to popular frameworks. Through hands-on, non-video modules and practical coding exercises, you will build real-world websites and web applications in an interactive environment.",[],[303,307,304,305,306,308,309,310,311],"html-html-document-structure-597898",[],{"$snuxt-i18n-meta":872,"$scolor-mode":873,"$suser":-1,"$scopywriting":875,"$sjoined_teams":1122,"$sowned_teams":1123,"$sjoined_skill_strees":1124,"$sget_joined_skill_strees_pending":298,"$suser_streaks":1125,"$stoday_get_streak":229,"$snext_skill_badge":1125,"$snext_streak_badge":1125,"$sis_pc":298,"$swindow_width":226,"$slabby_settings":1126,"$schat_list":1128,"$schat_pending":298,"$schat_branch":229,"$schat_error_msg":239,"$schat_background":1125,"$sstep_questins":1129,"$sshow_panel":229,"$sshow_transition":298,"$stransition_height":226,"$spanel_width":226,"$sacquired_badges":1130,"$sstop_generating":229,"$scan_stop_generating":229,"$sshow_driver":229,"$scurrent_lab_steps":1131,"$scurrent_step_index":226,"$ssite-config":1132},{},{"preference":874,"value":874,"unknown":298,"forced":229},"light",[876,917,994,1057,1062],{"key":877,"text":239,"tags":878,"data":880},"free_modal",[879],"free_user",{"close":881,"free_modal":883},{"hours":882},24,{"confirm_button":884,"sub_title":897,"title":907},{"label":885,"type":895,"url":896},{"de":886,"en":887,"es":888,"fr":889,"ja":890,"ko":891,"pt":892,"ru":893,"zh":894},"Level up mit LabEx Pro","Level Up With LabEx Pro","Sube de nivel con LabEx Pro","Montez de niveau avec LabEx Pro","LabEx Pro にレベルアップ","LabEx Pro로 레벨업","Suba de nível com LabEx Pro","Повысьте уровень с LabEx Pro","升级到 LabEx Pro","link","/pricing",{"de":898,"en":899,"es":900,"fr":901,"ja":902,"ko":903,"pt":904,"ru":905,"zh":906},"🚀 Seit 2017 · Vertraut von 900K+ Lernenden · 100% Praxisorientiert","🚀 Since 2017 · Trusted by 900K+ Learners · 100% Hands-On","🚀 Desde 2017 · Confiado por 900K+ Estudiantes · 100% Práctico","🚀 Depuis 2017 · Fait confiance par 900K+ Apprenants · 100% Pratique","🚀 2017年以来 · 90万人以上の学習者に信頼 · 100% ハンズオン","🚀 2017년부터 · 90만명+ 학습자가 신뢰 · 100% 실습","🚀 Desde 2017 · Confiado por 900K+ Aprendizes · 100% Prático","🚀 С 2017 года · Доверие 900К+ учащихся · 100% Практика","🚀 自2017年 · 90万+学习者信赖 · 100% 动手实践",{"de":908,"en":909,"es":910,"fr":911,"ja":912,"ko":913,"pt":914,"ru":915,"zh":916},"Kostenloser Plan auf 3 VM-Starts pro Tag begrenzt","Free Plan Limited to 3 VM Launches Per Day","Plan gratuito limitado a 3 lanzamientos de VM por día","Plan gratuit limité à 3 lancements de VM par jour","無料プランは1日3回のVM起動に制限されています","무료 플랜은 하루 3회 VM 실행으로 제한됩니다","Plano gratuito limitado a 3 inicializações de VM por dia","Бесплатный план ограничен 3 запусками ВМ в день","免费计划每天限制启动3个虚拟机",{"key":918,"text":239,"tags":919,"data":920},"country_codes",[879],{"codes":921},[922,925,928,931,934,937,940,943,946,949,952,955,958,961,964,967,970,973,976,979,982,985,988,991],{"code":923,"emoji":924},"IN","🇮🇳",{"code":926,"emoji":927},"ID","🇮🇩",{"code":929,"emoji":930},"EG","🇪🇬",{"code":932,"emoji":933},"PK","🇵🇰",{"code":935,"emoji":936},"MY","🇲🇾",{"code":938,"emoji":939},"VN","🇻🇳",{"code":941,"emoji":942},"UG","🇺🇬",{"code":944,"emoji":945},"PH","🇵🇭",{"code":947,"emoji":948},"BR","🇧🇷",{"code":950,"emoji":951},"ET","🇪🇹",{"code":953,"emoji":954},"BD","🇧🇩",{"code":956,"emoji":957},"NG","🇳🇬",{"code":959,"emoji":960},"KE","🇰🇪",{"code":962,"emoji":963},"IR","🇮🇷",{"code":965,"emoji":966},"MX","🇲🇽",{"code":968,"emoji":969},"TR","🇹🇷",{"code":971,"emoji":972},"DZ","🇩🇿",{"code":974,"emoji":975},"SD","🇸🇩",{"code":977,"emoji":978},"AO","🇦🇴",{"code":980,"emoji":981},"PE","🇵🇪",{"code":983,"emoji":984},"GH","🇬🇭",{"code":986,"emoji":987},"MZ","🇲🇿",{"code":989,"emoji":990},"IQ","🇮🇶",{"code":992,"emoji":993},"UZ","🇺🇿",{"key":995,"text":996,"tags":997,"data":1001},"free_labs_page","free labs 页面 TDK",[879,998,999,1000],"trial_user","pro_user","not_logged_in",{"free_labs_page":1002},[1003,1009,1015,1021,1027,1033,1039,1045,1051],{"description":1004,"lang":311,"meta_description":1005,"meta_keywords":1006,"meta_title":1007,"title":1008},"1000+ Free Interactive Labs in 30+ Tech Fields for Developers and Students. Practice and enhance your skills with free hands-on exercises and real-world scenarios.\n","Discover LabEx's 1000+ free interactive labs across Linux, DevOps, Cybersecurity, Data Science, Web Development, Machine Learning, and more. Gain free access to expert-led training and hands-on practice in a dynamic environment.\n","Free Labs, LabEx, Interactive Labs, Free Tech Skills, Free Hands-On Practice, Online Learning\n","Free Labs | Interactive Practice in 30+ Tech Fields","Free Labs",{"description":1010,"lang":303,"meta_description":1011,"meta_keywords":1012,"meta_title":1013,"title":1014},"为开发者和学生量身打造的 1000+ 免费互动实验，覆盖 30+ 技术领域。 通过免费实践练习和真实场景，提升您的技能。\n","探索 LabEx 提供的 1000+ 免费互动实验，涵盖 Linux、DevOps、网络安全、数据科学、 Web 开发、机器学习等领域。在动态环境中免费获得专家指导的培训和实践机会。\n","免费实验, LabEx, 互动实验, 免费技术技能, 免费实践练习, 在线学习\n","免费实验 | 30+ 技术领域互动实践","免费实验",{"description":1016,"lang":304,"meta_description":1017,"meta_keywords":1018,"meta_title":1019,"title":1020},"Más de 1000 laboratorios interactivos gratuitos en más de 30 áreas tecnológicas para desarrolladores y estudiantes. Mejora tus habilidades con ejercicios prácticos gratuitos y escenarios del mundo real.\n","Explora más de 1000 laboratorios interactivos gratuitos de LabEx en Linux, DevOps, Ciberseguridad, Ciencia de Datos, Desarrollo Web, Machine Learning y más. Accede gratis a formación guiada por expertos y práctica en entornos dinámicos.\n","Laboratorios Gratuitos, LabEx, Laboratorios Interactivos, Habilidades Técnicas Gratis, Práctica Práctica Gratuita, Aprendizaje en Línea\n","Laboratorios Gratuitos | Práctica Interactiva en Más de 30 Áreas Tecnológicas","Laboratorios Gratuitos",{"description":1022,"lang":305,"meta_description":1023,"meta_keywords":1024,"meta_title":1025,"title":1026},"Plus de 1000 laboratoires interactifs gratuits dans plus de 30 domaines technologiques pour les développeurs et les étudiants. Améliorez vos compétences avec des exercices pratiques gratuits et des scénarios réels.\n","Découvrez plus de 1000 laboratoires interactifs gratuits de LabEx en Linux, DevOps, Cybersécurité, Science des Données, Développement Web, Machine Learning et plus encore. Accédez gratuitement à des formations dirigées par des experts et à des exercices pratiques dans un environnement dynamique.\n","Laboratoires Gratuits, LabEx, Laboratoires Interactifs, Compétences Techniques Gratuites, Pratique Pratique Gratuite, Apprentissage en Ligne\n","Laboratoires Gratuits | Pratique Interactive dans Plus de 30 Domaines Technologiques","Laboratoires Gratuits",{"description":1028,"lang":306,"meta_description":1029,"meta_keywords":1030,"meta_title":1031,"title":1032},"Über 1000 kostenlose interaktive Labs in über 30 Technologiebereichen für Entwickler und Studierende. Verbessere deine Fähigkeiten mit kostenlosen praktischen Übungen und realen Szenarien.\n","Entdecke über 1000 kostenlose interaktive Labs von LabEx in Bereichen wie Linux, DevOps, Cybersicherheit, Datenwissenschaft, Webentwicklung, maschinelles Lernen und mehr. Erhalte kostenlosen Zugang zu von Experten geleiteten Schulungen und praktischen Übungen in einer dynamischen Umgebung.\n","Kostenlose Labs, LabEx, Interaktive Labs, Kostenlose Technische Fähigkeiten, Kostenlose Praktische Übungen, Online-Lernen\n","Kostenlose Labs | Interaktive Übungen in Über 30 Technologiebereichen","Kostenlose Labs",{"description":1034,"lang":307,"meta_description":1035,"meta_keywords":1036,"meta_title":1037,"title":1038},"開発者や学生向けに、30以上の技術分野をカバーする1000以上の無料インタラクティブなラボ。 無料の実践練習と現実のシナリオでスキルを向上させましょう。\n","LabExの1000以上の無料インタラクティブなラボを、Linux、DevOps、サイバーセキュリティ、 データサイエンス、ウェブ開発、機械学習などで体験。専門家による指導とダイナミックな環境での 無料実践練習を利用できます。\n","無料ラボ, LabEx, インタラクティブなラボ, 無料技術スキル, 無料実践練習, オンライン学習\n","無料ラボ | 30以上の技術分野でインタラクティブな実践","無料ラボ",{"description":1040,"lang":308,"meta_description":1041,"meta_keywords":1042,"meta_title":1043,"title":1044},"Более 1000 бесплатных интерактивных лабораторий в более чем 30 технических областях для разработчиков и студентов. Совершенствуйте свои навыки с бесплатными практическими упражнениями и реальными сценариями.\n","Ознакомьтесь с более чем 1000 бесплатных интерактивных лабораторий от LabEx по Linux, DevOps, кибербезопасности, науке о данных, веб-разработке, машинному обучению и многому другому. Получите бесплатный доступ к обучению под руководством экспертов и практическим упражнениям в динамичной среде.\n","Бесплатные Лаборатории, LabEx, Интерактивные Лаборатории, Бесплатные Технические Навыки, Бесплатная Практика, Онлайн-Обучение\n","Бесплатные Лаборатории | Интерактивная Практика в Более Чем 30 Технических Областях","Бесплатные Лаборатории",{"description":1046,"lang":309,"meta_description":1047,"meta_keywords":1048,"meta_title":1049,"title":1050},"개발자와 학생을 위해 30개 이상의 기술 분야를 다루는 1000개 이상의 무료 인터랙티브 랩. 무료 실습 연습과 실제 시나리오로 스킬을 향상하세요.\n","LabEx의 1000개 이상의 무료 인터랙티브 랩을 통해 Linux, DevOps, 사이버 보안, 데이터 사이언스, 웹 개발, 머신 러닝 등을 탐구하세요. 전문가가 이끄는 교육과 동적 환경에서의 무료 실습 기회를 누리세요.\n","무료 랩, LabEx, 인터랙티브 랩, 무료 기술 스킬, 무료 실습 연습, 온라인 학습\n","무료 랩 | 30개 이상의 기술 분야에서 인터랙티브 연습","무료 랩",{"description":1052,"lang":310,"meta_description":1053,"meta_keywords":1054,"meta_title":1055,"title":1056},"Mais de 1000 laboratórios interativos gratuitos em mais de 30 áreas tecnológicas para desenvolvedores e estudantes. Aprimore suas habilidades com exercícios práticos gratuitos e cenários do mundo real.\n","Explore mais de 1000 laboratórios interativos gratuitos da LabEx em Linux, DevOps, Cibersegurança, Ciência de Dados, Desenvolvimento Web, Machine Learning e mais. Obtenha acesso gratuito a treinamentos liderados por especialistas e prática em ambientes dinâmicos.\n","Laboratórios Gratuitos, LabEx, Laboratórios Interativos, Habilidades Técnicas Gratuitas, Prática Prática Gratuita, Aprendizado Online\n","Laboratórios Gratuitos | Prática Interativa em Mais de 30 Áreas Tecnológicas","Laboratórios Gratuitos",{"key":1058,"text":1059,"tags":1060,"data":1061},"ai_check","ai inspect 是否开启",[879,998,999],{"ai_check":298},{"key":1063,"text":1064,"tags":1065,"data":1066},"exercises_page","Exercises 页面 TDK",[879,998,999,1000],{"exercises_page":1067},[1068,1074,1080,1086,1092,1098,1104,1110,1116],{"description":1069,"lang":311,"meta_description":1070,"meta_keywords":1071,"meta_title":1072,"title":1073},"Explore 2000+ hands-on exercises and real-world challenges across 30+ tech domains. Build your skills with guided practice and interactive scenarios.\n","Practice hands-on skills across Linux, Python, DevOps, Cybersecurity, and more. Level up through guided tasks, troubleshooting labs, and scenario-based exercises built for real-world learning.\n","Exercises, Challenges, LabEx, Hands-On Practice, Tech Skills, Interactive Learning, Online Exercises\n","Interactive Exercises & Real-World Challenges","Exercises",{"description":1075,"lang":303,"meta_description":1076,"meta_keywords":1077,"meta_title":1078,"title":1079},"探索覆盖 30+ 技术领域的 2000+ 动手练习和真实挑战，通过引导式练习提升实战能力。\n","覆盖 Linux、Python、DevOps、网络安全等领域的动手技能练习。 通过引导任务、故障排查实验和基于场景的练习，提升实战能力。\n","技术练习, 挑战任务, LabEx, 动手实践, 技术技能提升, 在线练习, 互动学习\n","互动练习与真实挑战","技术练习",{"description":1081,"lang":304,"meta_description":1082,"meta_keywords":1083,"meta_title":1084,"title":1085},"Explora más de 2000 ejercicios prácticos y desafíos reales en más de 30 áreas tecnológicas. Mejora tus habilidades con práctica guiada e interactiva.\n","Practica habilidades prácticas en Linux, Python, DevOps, Ciberseguridad y más. Mejora con tareas guiadas, laboratorios de resolución de problemas y ejercicios basados en escenarios reales.\n","Ejercicios, Desafíos, LabEx, Práctica Práctica, Habilidades Técnicas, Aprendizaje Interactivo, Ejercicios en Línea\n","Ejercicios Interactivos y Desafíos Reales","Ejercicios",{"description":1087,"lang":305,"meta_description":1088,"meta_keywords":1089,"meta_title":1090,"title":1091},"Découvrez plus de 2000 exercices pratiques et défis concrets dans plus de 30 domaines technologiques. Renforcez vos compétences grâce à une pratique guidée et interactive.\n","Pratiquez des compétences pratiques en Linux, Python, DevOps, Cybersécurité et plus encore. Progressez grâce à des tâches guidées, des labs de dépannage et des exercices basés sur des scénarios réels.\n","Exercices, Défis, LabEx, Pratique Interactive, Compétences Techniques, Apprentissage en Ligne\n","Exercices Interactifs et Défis Concrets","Exercices",{"description":1093,"lang":306,"meta_description":1094,"meta_keywords":1095,"meta_title":1096,"title":1097},"Über 2000 praktische Übungen und reale Herausforderungen in über 30 Technologiebereichen. Stärke deine Fähigkeiten durch geführte und interaktive Praxis.\n","Trainiere praktische Fähigkeiten in Linux, Python, DevOps, Cybersicherheit und mehr. Steigere dein Können mit geführten Aufgaben, Fehlersuche-Labs und szenariobasierten Übungen für echtes Lernen.\n","Übungen, Herausforderungen, LabEx, Praktische Übung, Technische Fähigkeiten, Interaktives Lernen, Online-Übungen\n","Interaktive Übungen & Reale Herausforderungen","Übungen",{"description":1099,"lang":307,"meta_description":1100,"meta_keywords":1101,"meta_title":1102,"title":1103},"30以上の技術分野にわたる2000以上の実践的な練習問題やチャレンジを体験。ガイド付きの練習でスキルを磨きましょう。\n","Linux、Python、DevOps、サイバーセキュリティなどの実践スキルを習得しましょう。 ガイド付きタスクやトラブルシューティングラボ、シナリオに基づいた演習でスキルを向上させましょう。\n","練習問題, チャレンジ, LabEx, 実践スキル, 技術力向上, インタラクティブラーニング, オンライン練習\n","インタラクティブな練習問題と現実的なチャレンジ","練習問題",{"description":1105,"lang":308,"meta_description":1106,"meta_keywords":1107,"meta_title":1108,"title":1109},"Более 2000 практических упражнений и реальных задач в более чем 30 технических областях. Развивайте свои навыки через интерактивную практику.\n","Отрабатывайте практические навыки в Linux, Python, DevOps, кибербезопасности и других областях. Повышайте уровень через пошаговые задания, лаборатории по устранению неполадок и упражнения, основанные на реальных сценариях.\n","Упражнения, Задачи, LabEx, Практика, Технические Навыки, Интерактивное Обучение, Онлайн Упражнения\n","Интерактивные Упражнения и Реальные Задачи","Упражнения",{"description":1111,"lang":309,"meta_description":1112,"meta_keywords":1113,"meta_title":1114,"title":1115},"30개 이상의 기술 분야에 걸친 2000개 이상의 실습 연습 및 실제 과제를 경험하세요. 가이드형 실습으로 기술 능력을 향상하세요。\n","Linux, Python, DevOps, 사이버 보안 등 다양한 분야의 실습 스킬을 연습하세요. 가이드 과제, 문제 해결 랩, 시나리오 기반 연습을 통해 실전 역량을 향상하세요.\n","연습문제, 도전과제, LabEx, 실습훈련, 기술역량 향상, 인터랙티브 학습, 온라인 연습\n","인터랙티브 연습 & 실전 도전 과제","연습문제",{"description":1117,"lang":310,"meta_description":1118,"meta_keywords":1119,"meta_title":1120,"title":1121},"Explore mais de 2000 exercícios práticos e desafios reais em mais de 30 áreas tecnológicas. Melhore suas habilidades com prática guiada e interativa.\n","Pratique habilidades práticas em Linux, Python, DevOps, Cibersegurança e mais. Evolua com tarefas guiadas, laboratórios de resolução de problemas e exercícios baseados em cenários reais.\n","Exercícios, Desafios, LabEx, Prática Interativa, Habilidades Técnicas, Exercícios Online, Aprendizado Prático\n","Exercícios Interativos e Desafios Reais","Exercícios",[],[],[],null,{"fontSize":1127,"darkTheme":229,"monitoring":229},"md",[],[],[],[],{"currentLocale":304,"defaultLocale":311,"env":1133,"name":1134,"url":1135},"production","LabEx","https://labex.io",["Set"],{"tutorialDetail-html-create-basic-html-structure-and-tags-451029-es":1125,"footerData_es":1125,"skillTreeDetailData":1125,"skillTreeListData":1125,"tutorialRecommendCourseListData":1125},"/es/tutorials/html-create-basic-html-structure-and-tags-451029"]</script> <script>window.__NUXT__={};window.__NUXT__.config={public:{turnstile:{siteKey:"0x4AAAAAAAKM2eNgDcxF-9yH"},env:"production",appVersion:"7ef5353",cookie:{domain:""},gtag:{id:"G-ZFCX52ZJTZ"},ads:{id:"AW-882002536",registerConversionTag:"MBFrCIGFxNQYEOiUyaQD",subscriptionConversionTag:"crfuCO_z2tQYEOiUyaQD",purchaseConversionTag:"53Q2COvEvO0YEOiUyaQD"},gtm:{id:"GTM-TN7PC69C"},clarityProjectId:"qfnofdz0u8",apiBaseUrl:"https://labex.io/api/v2",ossBaseUrl:"https://file.labex.io",paypalClientId:"AZZ0ZORi-uwIWCMBvvWS8pN7yKq3dEmOuztg95XoqmPv0WihfrIU3XYEByj3y1sZcB6g2CW5tjcQOlHX",googleClientId:"359324822670-0i8infpcje3uh1ttca1d6stgdmdmhk1a.apps.googleusercontent.com",webPushServerKey:"BHIC0R48BSznqt8oCmKfQJkty77I0SV-EWdNqJ-3EPJ-HUBqnXKlrw_6cowDynxkVdNA26Y1q6s-VTaUdBYYICU",xAuth:"",stripeKey:"pk_live_51NnFfaISCR4x8ogMvIwl9UJQpDybg8tc41t8igKNOtejuDkPiQBvjShWmA94hm6Ii7hBpCxyiJ5CceACBNvIJWFj00KyBHumTT",i18n:{baseUrl:"https://labex.io",defaultLocale:"en",defaultDirection:"ltr",strategy:"prefix_except_default",lazy:false,rootRedirect:"",routesNameSeparator:"___",defaultLocaleRouteNameSuffix:"default",skipSettingLocaleOnNavigate:false,differentDomains:false,trailingSlash:false,locales:[{code:"en",iso:"en-US",language:"en",files:["/app/i18n/locales/en.json","/app/i18n/locales/linuxjourney/en.yml"],dir:"ltr",name:"English",flag:"🇺🇸"},{code:"zh",iso:"zh-CN",language:"zh",files:["/app/i18n/locales/zh.json","/app/i18n/locales/linuxjourney/zh.yml"],dir:"ltr",name:"简体中文",flag:"🇨🇳"},{code:"es",iso:"es-ES",language:"es",files:["/app/i18n/locales/es.json","/app/i18n/locales/linuxjourney/es.yml"],dir:"ltr",name:"Español",flag:"🇪🇸"},{code:"ja",iso:"ja-JP",language:"ja",files:["/app/i18n/locales/ja.json","/app/i18n/locales/linuxjourney/ja.yml"],dir:"ltr",name:"日本語",flag:"🇯🇵"},{code:"fr",iso:"fr-FR",language:"fr",files:["/app/i18n/locales/fr.json","/app/i18n/locales/linuxjourney/fr.yml"],dir:"ltr",name:"Français",flag:"🇫🇷"},{code:"de",iso:"de-DE",language:"de",files:["/app/i18n/locales/de.json","/app/i18n/locales/linuxjourney/de.yml"],dir:"ltr",name:"Deutsch",flag:"🇩🇪"},{code:"ru",iso:"ru-RU",language:"ru",files:["/app/i18n/locales/ru.json","/app/i18n/locales/linuxjourney/ru.yml"],dir:"ltr",name:"Русский",flag:"🇷🇺"},{code:"pt",iso:"pt-PT",language:"pt",files:["/app/i18n/locales/pt.json","/app/i18n/locales/linuxjourney/pt.yml"],dir:"ltr",name:"Português",flag:"🇧🇷"},{code:"ko",iso:"ko-KR",language:"ko",files:["/app/i18n/locales/ko.json","/app/i18n/locales/linuxjourney/ko.yml"],dir:"ltr",name:"한국어",flag:"🇰🇷"}],detectBrowserLanguage:false,experimental:{localeDetector:"",switchLocalePathLinkSSR:false,autoImportTranslationFunctions:false,typedPages:true,typedOptionsAndMessages:false},multiDomainLocales:false}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script> <script type="application/ld+json" id="schema-org-graph" data-hid="3437552">{"@context":"https://schema.org","@graph":[{"@id":"https://labex.io#website","@type":"WebSite","inLanguage":"es","name":"LabEx","url":"https://labex.io"},{"@id":"https://labex.io/es/tutorials/html-create-basic-html-structure-and-tags-451029#webpage","@type":"WebPage","description":"Aprende cómo crear una estructura básica de documento HTML, comprende las etiquetas HTML esenciales y construye una página web fundamental con un marcado semántico adecuado.","name":"Crear estructura y etiquetas HTML básicas | LabEx","url":"https://labex.io/es/tutorials/html-create-basic-html-structure-and-tags-451029","isPartOf":{"@id":"https://labex.io#website"},"potentialAction":[{"@type":"ReadAction","target":["https://labex.io/es/tutorials/html-create-basic-html-structure-and-tags-451029"]}]}]}</script></body></html><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9e77c6f05e496102',t:'MTc3NTM4Mzk3NA=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>