Certificado de HTML Intermedio

HTML (HyperText Markup Language) es el lenguaje fundamental para la creación de páginas web. Mientras que el HTML básico te permite crear documentos simples, el HTML intermedio te proporciona las herramientas necesarias para construir estructuras web sofisticadas y experiencias interactivas que los usuarios modernos esperan.

En este curso de HTML Intermedio, profundizaremos en los elementos y técnicas que te permitirán crear sitios web más estructurados, accesibles y profesionales. Aprenderás a organizar el contenido de manera eficiente, implementar formularios interactivos, incorporar elementos multimedia y utilizar las últimas características semánticas que mejoran tanto la experiencia del usuario como el posicionamiento en buscadores.

Organización

La organización adecuada del contenido es esencial para crear páginas web efectivas. Aprenderás a utilizar elementos de división como <div> para crear contenedores flexibles que facilitan la aplicación de estilos y comportamientos específicos.

Las listas HTML (<ul>, <ol>, <li>) te permitirán presentar información de manera ordenada y estructurada, perfectas para menús de navegación, índices de contenido o cualquier conjunto de elementos relacionados.

Las tablas HTML (<table>, <tr>, <td>, <th>) siguen siendo herramientas valiosas para presentar datos tabulares complejos, aunque su uso para maquetar páginas ha sido reemplazado por técnicas más modernas como Flexbox y Grid.

<table>
  <thead>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
      <th>Disponibilidad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Smartphone XYZ</td>
      <td>599€</td>
      <td>En stock</td>
    </tr>
  </tbody>
</table>

HTML semántico

El HTML semántico representa uno de los avances más significativos en el desarrollo web moderno. Elementos como <header>, <footer>, <nav>, <section>, <article> y <aside> no solo estructuran visualmente tu página, sino que también comunican el significado y la función de cada sección a navegadores, motores de búsqueda y tecnologías de asistencia.

<header>
  <h1>Mi Blog de Tecnología</h1>
  <nav>
    <ul>
      <li><a href="#inicio">Inicio</a></li>
      <li><a href="#articulos">Artículos</a></li>
      <li><a href="#contacto">Contacto</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Las tendencias web para 2023</h2>
    <p>El desarrollo web continúa evolucionando...</p>
  </article>
  
  <aside>
    <h3>Artículos relacionados</h3>
    <!-- Contenido del aside -->
  </aside>
</main>

<footer>
  <p>© 2023 Mi Blog de Tecnología</p>
</footer>

Implementar correctamente estas etiquetas semánticas mejora la accesibilidad de tu sitio y puede contribuir positivamente al SEO (Search Engine Optimization).

Contenido multimedia Responsive

En la web actual, el contenido multimedia es esencial. Aprenderás a implementar imágenes responsivas utilizando atributos como srcset y sizes, que permiten servir imágenes optimizadas según el dispositivo y la resolución de pantalla del usuario.

<img src="imagen-base.jpg" 
     srcset="imagen-pequeña.jpg 480w,
             imagen-mediana.jpg 800w,
             imagen-grande.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1000px) 800px,
            1200px"
     alt="Descripción de la imagen">

También exploraremos la integración de iconos utilizando bibliotecas como Font Awesome, que proporcionan símbolos vectoriales escalables que mejoran la interfaz de usuario sin sacrificar el rendimiento.

La incrustación de contenido mediante <iframe> te permitirá incorporar mapas, videos de plataformas externas o widgets interactivos en tus páginas.

Los elementos <audio> y <video> nativos de HTML5 ofrecen formas estandarizadas de incluir contenido multimedia con controles personalizables:

<video controls width="640" height="360">
  <source src="mi-video.mp4" type="video/mp4">
  <source src="mi-video.webm" type="video/webm">
  <p>Tu navegador no soporta el elemento video.</p>
</video>

Gráficos SVG y Canvas

Los gráficos vectoriales escalables (SVG) y el elemento <canvas> representan dos enfoques diferentes para crear gráficos en la web:

• SVG es ideal para ilustraciones vectoriales que mantienen su nitidez independientemente del tamaño o resolución.
• Canvas proporciona un lienzo de dibujo dinámico controlado mediante JavaScript, perfecto para animaciones complejas y visualizaciones de datos.

<!-- Ejemplo básico de SVG -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

<!-- Ejemplo básico de Canvas -->
<canvas id="miCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById("miCanvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 150, 80);
</script>

Formularios

Los formularios HTML son la principal herramienta de interacción entre usuarios y aplicaciones web. En este curso, aprenderás a crear formularios complejos utilizando diversos tipos de campos:

<form action="/procesar" method="post">
  <div>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required>
  </div>
  
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div>
    <label for="nacimiento">Fecha de nacimiento:</label>
    <input type="date" id="nacimiento" name="nacimiento">
  </div>
  
  <div>
    <label for="mensaje">Mensaje:</label>
    <textarea id="mensaje" name="mensaje" rows="4"></textarea>
  </div>
  
  <button type="submit">Enviar</button>
</form>

Exploraremos los tipos de input modernos como date, time, range, color, email, url, search y number, que proporcionan interfaces especializadas según el tipo de datos esperado.

Las validaciones de formularios nativas de HTML5 te permiten implementar verificaciones básicas sin JavaScript, mejorando la experiencia del usuario y reduciendo errores:

<input type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="text" minlength="3" maxlength="50">
<input type="number" min="1" max="100" step="0.5">

Aplicación práctica

A lo largo del curso, pondrás en práctica estos conocimientos mediante retos prácticos que te permitirán:

• Crear estructuras complejas con divs y elementos semánticos
• Implementar listas y tablas para organizar información
• Diseñar formularios interactivos con validaciones
• Integrar elementos multimedia responsivos

Estos ejercicios te ayudarán a consolidar tus habilidades y a desarrollar un pensamiento estructurado para abordar proyectos web reales.

Al dominar HTML intermedio, estarás preparado para crear sitios web profesionales que no solo se vean bien, sino que también sean accesibles, semánticamente correctos y optimizados para buscadores, sentando las bases para avanzar hacia tecnologías complementarias como CSS avanzado y JavaScript.