Curso HTML – Módulo 3: Elementos Básicos de HTML

Publicada el por

Módulo 3: Elementos Básicos de HTML

Bienvenido al Módulo 3 de HTML, donde profundizaremos en los elementos esenciales que forman la base de cualquier página web. Este módulo está diseñado para proporcionarte una comprensión completa de cómo estructurar y estilizar contenido utilizando HTML y CSS.

Aprenderás a manejar encabezados, párrafos, formateo de texto, y a utilizar contenedores para organizar tu contenido de manera lógica y accesible.

Además, exploraremos cómo aplicar estilos internos con CSS, insertar imágenes, crear mapas de imagen, y usar iframes para integrar contenido externo.

Al finalizar este módulo, estarás equipado con las habilidades necesarias para crear páginas web visualmente atractivas y funcionales.

Diferentes herramientas necesarias

Antes de profundizar en los elementos esenciales de HTML, es fundamental asegurarse de que sabes cómo crear y visualizar archivos HTML, CSS y JavaScript, y para ello, puedes utilizar un editor de código en tu ordenador o una herramienta en línea.

A continuación, te proporcionamos una guía para ambas opciones:

1. Uso de Visual Studio Code (VS Code) en tu ordenador:

Visual Studio Code es un editor de código fuente gratuito y potente, ideal para el desarrollo web.

Pasos para comenzar:

  • Instalación:
    • Descarga VS Code desde su sitio oficial.
    • Sigue las instrucciones de instalación según tu sistema operativo.
  • Creación de archivos:
    • Abre VS Code.
    • Crea una nueva carpeta para tu proyecto y ábrela en VS Code.
    • Dentro de esta carpeta, crea los archivos necesarios, por ejemplo index.html
  • Visualización:
    • Guarda los archivos.
    • Abre index.html en tu navegador preferido para ver el resultado.

2. Uso de una herramienta en línea:

Si prefieres no instalar software adicional, existen editores de código en línea que te permiten escribir y probar HTML, CSS y JavaScript directamente desde tu navegador.

Opción recomendada:

  • CodePen:
    • Visita CodePen.
    • Crea una cuenta gratuita para guardar tus proyectos.
    • Inicia un nuevo «Pen» donde podrás escribir tu código HTML, CSS y JavaScript en paneles separados y ver una vista previa en tiempo real.

Con estas herramientas, estarás preparado para profundizar en los elementos básicos de HTML y comenzar a construir páginas web estructuradas y funcionales.

Encabezados y Párrafos

Los encabezados en HTML son esenciales para estructurar el contenido de una página web de manera jerárquica y accesible. Los seis niveles de encabezados, desde <h1> hasta <h6>, permiten a los desarrolladores organizar la información de mayor a menor importancia.

Esto no solo mejora la legibilidad para los usuarios, sino que también ayuda a los motores de búsqueda a entender la estructura y el contenido de la página, lo cual es crucial para el SEO.

<h1>Título Principal</h1>
<h2>Subtítulo Importante</h2>
<h3>Subsección Relevante</h3>
<h4>Detalle Adicional</h4>
<h5>Información Complementaria</h5>
<h6>Nota Menor</h6>
<p>Este es un párrafo de ejemplo que proporciona información adicional sobre el tema principal. Los párrafos se utilizan para agrupar bloques de texto y hacer que el contenido sea más fácil de leer y entender.</p>

Atributos Comunes:

  • id: Identificador único para el encabezado.
  • class: Clases CSS para aplicar estilos.
  • style: Estilos en línea para el encabezado.
  • title: Texto informativo que aparece al pasar el ratón sobre el encabezado.

Fuentes y Formateo

HTML ofrece una variedad de etiquetas para cambiar el estilo del texto, mejorando así la legibilidad y el énfasis en partes específicas del contenido. Algunas de las etiquetas más utilizadas incluyen:

  • <strong>: Utilizado para texto en negrita, indicando importancia semántica.
  • <em>: Utilizado para texto en cursiva, enfatizando el contenido.
  • <small>: Utilizado para texto más pequeño, generalmente para anotaciones o texto secundario.
  • <mark>: Utilizado para resaltar texto, similar a un marcador.
  • <del>: Utilizado para texto tachado, indicando eliminación o corrección.
  • <ins>: Utilizado para texto subrayado, indicando inserción o adición.
  • <sup> y <sub>: Utilizados para texto en superíndice y subíndice, respectivamente.
  • <code>: Utilizado para mostrar código en línea.
  • <pre>: Utilizado para mostrar texto preformateado, respetando espacios y saltos de línea.
  • <blockquote>: Utilizado para citas largas o bloques de texto citado.
  • <q>: Utilizado para citas cortas en línea.
  • <cite>: Utilizado para el título de una obra citada.
  • <b>: Utilizado para texto en negrita sin importancia semántica.
  • <i>: Utilizado para texto en cursiva sin énfasis semántico.
  • <u>: Utilizado para texto subrayado sin importancia semántica.
<p>Este texto es <strong>importante</strong> y este es <em>enfatizado</em>. <small>Texto secundario.</small></p>
<p><mark>Texto resaltado</mark> y <del>texto tachado</del>.</p>
<p>Esto es un ejemplo de texto con <sup>superíndice</sup> y <sub>subíndice</sub>.</p>
<p>Código en línea: <code>console.log('Hola Mundo');</code></p>
<pre>Texto preformateado que respeta espacios y saltos de línea.</pre>
<blockquote cite="https://www.example.com">
   <p>Esta es una cita larga de una fuente externa.</p>
</blockquote>
<p>Esta es una <q>cita corta</q> en línea.</p>
<p><cite>Título de la obra citada</cite></p>
<p><b>Texto en negrita</b> y <i>texto en cursiva</i> sin énfasis semántico.</p>
<p><u>Texto subrayado</u> sin importancia semántica.</p>

Bloques y Estructuras de Contenido

Los contenedores en HTML son fundamentales para organizar el contenido en bloques lógicos y semánticos. Cada contenedor tiene un propósito específico y ayuda a mejorar la accesibilidad y la estructura del documento:

  • <div>: Contenedor genérico utilizado para agrupar elementos y aplicar estilos CSS.
  • <section>: Define una sección temática dentro del contenido, como una sección de un capítulo.
  • <article>: Representa una composición independiente y autocontenida, como un artículo de blog o una publicación.
  • <aside>: Contenido tangencialmente relacionado con el contenido principal, como barras laterales o notas.
  • <header>: Encabezado de una sección o página, generalmente contiene títulos y logotipos.
  • <footer>: Pie de página de una sección o página, generalmente contiene información de derechos de autor y enlaces de navegación.
  • <nav>: Contiene enlaces de navegación principales.
  • <main>: Contenido principal de la página, único en el documento.
  • <figure> y <figcaption>: Utilizados para ilustraciones o diagramas con una leyenda.
<div class="contenedor">
   <header>
      <h1>Bienvenido a mi Sitio Web</h1>
      <nav>
         <ul>
            <li><a href="#inicio">Inicio</a></li>
            <li><a href="#acerca">Acerca</a></li>
            <li><a href="#contacto">Contacto</a></li>
         </ul>
      </nav>
   </header>
   <main>
      <section>
         <h2>Sección de Ejemplo</h2>
         <p>Contenido de la sección.</p>
      </section>
      <article>
         <h2>Artículo de Ejemplo</h2>
         <p>Contenido del artículo.</p>
      </article>
      <aside>
         <p>Información adicional o relacionada.</p>
      </aside>
      <figure>
         <img src="imagen.jpg" alt="Descripción de la imagen"> 
         <figcaption>Leyenda de la imagen.</figcaption>
      </figure>
   </main>
   <footer>
      <p>Derechos reservados © 2025</p>
   </footer>
</div>

Hojas de Estilo en HTML (CSS Interno)

Las hojas de estilo en cascada (CSS) se pueden incluir directamente en un documento HTML utilizando la etiqueta <style>. Esto es útil para aplicar estilos específicos a elementos HTML sin necesidad de un archivo CSS externo. Es ideal para estilos pequeños o específicos de una página, y permite una rápida personalización del diseño.

<head>
   <style>
      body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      line-height: 1.6;
      }
      .destacado {
      color: blue;
      font-weight: bold;
      background-color: #e0e0e0;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 20px;
      }
      header, footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 1em;
      }
      nav ul {
      list-style-type: none;
      padding: 0;
      }
      nav ul li {
      display: inline;
      margin-right: 10px;
      }
      nav ul li a {
      color: white;
      text-decoration: none;
      }
   </style>
</head>
<body>
   <header>
      <h1>Título del Sitio Web</h1>
   </header>
   <nav>
      <ul>
         <li><a href="#inicio">Inicio</a></li>
         <li><a href="#acerca">Acerca</a></li>
         <li><a href="#contacto">Contacto</a></li>
      </ul>
   </nav>
   <p class="destacado">Este párrafo está destacado y tiene estilos adicionales.</p>
   <footer>
      <p>Pie de página con estilo.</p>
   </footer>
</body>

Citas y Comentarios

Las citas son una excelente manera de incluir texto de otras fuentes en tu contenido. HTML proporciona dos etiquetas principales para citas:

  • <blockquote>: Utilizado para citas largas o bloques de texto citado. Puede incluir un atributo cite para especificar la fuente de la cita.
  • <q>: Utilizado para citas cortas en línea.

Los comentarios en HTML se utilizan para dejar notas en el código que no se muestran en el navegador. Son útiles para documentar el código, facilitar el mantenimiento y colaborar con otros desarrolladores.

<blockquote cite="https://www.example.com">
   <p>Esta es una cita larga de una fuente externa. Las citas largas se utilizan para bloques de texto citado.</p>
</blockquote>
<p>Esta es una <q>cita corta</q> en línea, utilizada para texto breve citado.</p>
<!-- Este es un comentario que explica el propósito del siguiente bloque de código -->
<p>Este párrafo sigue al comentario anterior.</p>

Manejo de Colores

HTML permite definir colores utilizando diferentes sistemas de color, cada uno con sus propias ventajas:

  • RGB: Combinación de rojo, verde y azul, especificada como rgb(r, g, b), donde cada valor puede ir de 0 a 255. También se puede usar rgba(r, g, b, a) para incluir la transparencia (alpha).
  • HEX: Código hexadecimal, especificado como #RRGGBB, donde cada par de dígitos representa un valor de color en hexadecimal. También se puede usar #RGB para colores abreviados.
  • HSL: Matiz, saturación y luminosidad, especificada como hsl(h, s, l), donde h es el matiz (0-360), s es la saturación (0-100%) y l es la luminosidad (0-100%). También se puede usar hsla(h, s, l, a) para incluir la transparencia.
  • Nombres de Colores: HTML también soporta nombres de colores predefinidos, como red, blue, green, etc.
<p style="color: rgb(255, 0, 0);">Texto en rojo RGB.</p>
<p style="color: rgba(0, 255, 0, 0.5);">Texto en verde RGBA con transparencia.</p>
<p style="color: #0000FF;">Texto en azul HEX.</p>
<p style="color: #0F0;">Texto en verde HEX abreviado.</p>
<p style="color: hsl(240, 100%, 50%);">Texto en azul HSL.</p>
<p style="color: hsla(120, 100%, 50%, 0.5);">Texto en verde HSLA con transparencia.</p>
<p style="color: red;">Texto en rojo utilizando nombre de color.</p>

Inserción de Imágenes

La etiqueta <img> se utiliza para insertar imágenes en una página web. Sus atributos principales incluyen:

  • src: Ruta de la imagen. Puede ser una URL relativa o absoluta.
  • alt: Texto alternativo que describe la imagen, crucial para la accesibilidad y el SEO.
  • width y height: Dimensiones de la imagen, especificadas en píxeles o porcentajes.
  • title: Texto que aparece como información sobre herramientas al pasar el ratón sobre la imagen.
  • loading: Atributo que puede ser lazy para cargar la imagen solo cuando esté cerca de la vista.
<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200" title="Título de la imagen" loading="lazy" />

Mapas de Imagen e Iframes

Los mapas de imagen permiten definir áreas clicables dentro de una imagen utilizando las etiquetas <map> y <area>. Esto es útil para crear interacciones específicas en diferentes partes de una imagen. Los iframes, definidos con <iframe>, permiten insertar contenido externo, como videos, mapas interactivos o incluso otras páginas web.

<img src="mapa.jpg" usemap="#mapa-ejemplo" alt="Mapa de ejemplo" />
<map name="mapa-ejemplo">
   <area shape="rect" coords="34,44,270,350" href="https://www.example.com" alt="Example" />
   <area shape="circle" coords="100,100,50" href="https://www.example.org" alt="Example Org" />
   <area shape="poly" coords="10,10,50,50,30,70" href="https://www.example.net" alt="Example Net" />
</map>
<iframe src="https://www.example.com" width="600" height="400" title="Contenido externo" allowfullscreen></iframe>

Elementos de Frase y Metaetiquetas

Los elementos de frase como <span> se utilizan para aplicar estilos a partes específicas del texto sin afectar su estructura. Las metaetiquetas, definidas con <meta>, proporcionan información sobre el documento HTML, como su codificación, descripción y configuración de la vista (viewport).

<img src="mapa.jpg" usemap="#mapa-ejemplo" alt="Mapa de ejemplo" />
<map name="mapa-ejemplo">
<area shape="rect" coords="34,44,270,350" href="https://www.example.com" alt="Example" />
<area shape="circle" coords="100,100,50" href="https://www.example.org" alt="Example Org" />

Clases e Identificadores

Las clases e identificadores (IDs) se utilizan para aplicar estilos CSS a elementos específicos. Las clases se definen con el atributo class y se pueden reutilizar en múltiples elementos. Los IDs, definidos con id, son únicos para cada elemento en una página y se utilizan para estilos o scripts específicos.

<style>
   .destacado {
   color: blue;
   font-weight: bold;
   background-color: #e0e0e0;
   padding: 10px;
   border-radius: 5px;
   margin-bottom: 20px;
   }
   #titulo-principal {
   font-size: 24px;
   text-align: center;
   margin-bottom: 20px;
   text-transform: uppercase;
   }
   .oculto {
   display: none;
   }
</style>
<h1 id="titulo-principal">Título Principal</h1>
<p class="destacado">Este párrafo está destacado y tiene estilos adicionales.</p>
<p class="destacado oculto">Este párrafo está oculto debido a la clase adicional.</p>

Fondo y Estilos de Fondo

Los estilos de fondo se pueden aplicar a elementos HTML utilizando propiedades CSS como background-color, background-image, background-repeat, background-size, background-position, background-attachment, y background-blend-mode. Estos permiten personalizar el aspecto visual de una página web, creando fondos atractivos y dinámicos.

<style>
   body {
   background-color: #f0f0f0;
   background-image: url('fondo.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   background-blend-mode: multiply;
   }
   .contenedor {
   background-color: rgba(255, 255, 255, 0.8);
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
</style>
<div class="contenedor">
   <p>Este contenedor tiene un fondo semitransparente, redondeado y con sombra.</p>
</div>

Listas

HTML proporciona varias etiquetas para crear listas, que son esenciales para organizar y presentar información de manera clara y accesible:

  • <ul>: Lista desordenada, utilizada para elementos no secuenciales.
  • <ol>: Lista ordenada, utilizada para elementos secuenciales.
  • <li>: Elemento de lista, utilizado dentro de <ul> o <ol>.
  • <dl>: Lista de descripción, utilizada para pares de término-descripción.
  • <dt>: Término en una lista de descripción.
  • <dd>: Descripción en una lista de descripción.
<ul>
   <li>Elemento de lista desordenada 1</li>
   <li>Elemento de lista desordenada 2</li>
</ul>
<ol>
   <li>Elemento de lista ordenada 1</li>
   <li>Elemento de lista ordenada 2</li>
</ol>
<dl>
   <dt>Término 1</dt>
   <dd>Descripción del término 1</dd>
   <dt>Término 2</dt>
   <dd>Descripción del término 2</dd>
</dl>

Tablas

Las tablas en HTML se utilizan para presentar datos estructurados en filas y columnas. Las etiquetas principales incluyen:

  • <table>: Define una tabla.
  • <tr>: Define una fila en una tabla.
  • <th>: Define una celda de encabezado en una tabla.
  • <td>: Define una celda de datos en una tabla.
  • <thead>: Agrupa el contenido del encabezado de una tabla.
  • <tbody>: Agrupa el contenido del cuerpo de una tabla.
  • <tfoot>: Agrupa el contenido del pie de una tabla.
  • <caption>: Define un título para una tabla.
  • <colgroup> y <col>: Definen grupos y propiedades de columnas.
<table>
   <caption>Tabla de Ejemplo</caption>
   <thead>
      <tr>
         <th>Encabezado 1</th>
         <th>Encabezado 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Dato 1</td>
         <td>Dato 2</td>
      </tr>
      <tr>
         <td>Dato 3</td>
         <td>Dato 4</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td>Pie 1</td>
         <td>Pie 2</td>
      </tr>
   </tfoot>
</table>

Formularios

Los formularios en HTML se utilizan para recopilar datos de los usuarios y enviarlos a un servidor para su procesamiento. Las etiquetas principales incluyen:

  • <form>: Define un formulario.
  • <input>: Campo de entrada para datos del usuario.
  • <textarea>: Área de texto para entrada multilínea.
  • <button>: Botón clicable.
  • <select> y <option>: Lista desplegable de opciones.
  • <label>: Etiqueta para un campo de entrada.
  • <fieldset> y <legend>: Agrupan campos relacionados y proporcionan un título.
<form action="/submit" method="post">
   <fieldset>
      <legend>Información Personal</legend>
      <label for="nombre">Nombre:</label>
      <input type="text" id="nombre" name="nombre" required>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
      <label for="mensaje">Mensaje:</label>
      <textarea id="mensaje" name="mensaje" rows="4" cols="50"></textarea>
      <label for="opciones">Opciones:</label>
      <select id="opciones" name="opciones">
         <option value="opcion1">Opción 1</option>
         <option value="opcion2">Opción 2</option>
      </select>
      <button type="submit">Enviar</button>
   </fieldset>
</form>

Enlaces

Los enlaces en HTML se definen con la etiqueta <a> y son fundamentales para la navegación entre páginas y recursos. Los atributos principales incluyen:

  • href: URL del recurso enlazado.
  • target: Contexto de navegación para el enlace (_blank, _self, _parent, _top).
  • download: Indica que el recurso enlazado debe descargarse.
  • rel: Relación entre el documento actual y el recurso enlazado.
  • title: Texto informativo que aparece al pasar el ratón sobre el enlace.
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer" title="Visitar Example">Visitar Example</a>
<a href="descargar.pdf" download>Descargar archivo</a>

Multimedia

HTML soporta la inclusión de multimedia como audio y video utilizando las etiquetas <audio> y <video>. Estas etiquetas permiten incrustar contenido multimedia directamente en la página.

<audio controls>
   <source src="audio.mp3" type="audio/mpeg">
   Tu navegador no soporta la etiqueta de audio.
</audio>
<video width="320" height="240" controls>
   <source src="video.mp4" type="video/mp4">
   Tu navegador no soporta la etiqueta de video.
</video>

Accesibilidad

La accesibilidad es crucial para garantizar que todos los usuarios, incluidos aquellos con discapacidades, puedan acceder y utilizar el contenido web. Algunas prácticas recomendadas incluyen:

  • Utilizar etiquetas semánticas adecuadas (<header>, <nav>, <main>, <footer>, etc.).
  • Proporcionar texto alternativo para imágenes con el atributo alt.
  • Utilizar etiquetas <label> para campos de formulario.
  • Proporcionar transcripciones y subtítulos para contenido multimedia.
  • Utilizar atributos ARIA (Accessible Rich Internet Applications) para mejorar la accesibilidad de componentes dinámicos.
<img src="imagen.jpg" alt="Descripción detallada de la imagen">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" aria-required="true">
<button aria-label="Enviar formulario">Enviar</button>

Ejercicios propuestos

  • Estructura Básica de HTML:
    • Crea un documento HTML con una estructura completa que incluya <header>, <nav>, <main>, y <footer>.
    • Añade comentarios explicativos en cada sección del código.
  • Uso de Encabezados y Párrafos:
    • Escribe un documento HTML que utilice todos los niveles de encabezados (<h1> a <h6>) y varios párrafos (<p>).
    • Aplica estilos CSS internos para cambiar el color y el tamaño de los encabezados.
  • Formateo de Texto:
    • Crea un documento HTML que incluya texto en negrita (<strong>), cursiva (<em>), subrayado (<u>), y resaltado (<mark>).
    • Añade una cita larga utilizando <blockquote> y una cita corta con <q>.
  • Inserción de Imágenes:
    • Inserta varias imágenes en un documento HTML utilizando la etiqueta <img>.
    • Aplica atributos como alt, width, height, y title.
    • Crea un mapa de imagen con áreas clicables utilizando <map> y <area>.
  • Uso de Listas:
    • Crea una lista desordenada (<ul>) y una lista ordenada (<ol>) con al menos cinco elementos cada una.
    • Añade una lista de descripción (<dl>) con términos (<dt>) y descripciones (<dd>).
  • Formularios:
    • Diseña un formulario de contacto que incluya campos de texto, correo electrónico, área de texto, y una lista desplegable.
    • Utiliza etiquetas <label> para cada campo y agrupa los campos relacionados con <fieldset> y <legend>.
  • Accesibilidad:
    • Revisa un documento HTML existente y añade atributos alt a todas las imágenes.
    • Asegúrate de que todos los campos de formulario tienen etiquetas (<label>) asociadas.
    • Añade atributos ARIA donde sea necesario para mejorar la accesibilidad.
  • Estilos de Fondo:
    • Aplica estilos de fondo a diferentes elementos utilizando propiedades CSS como background-color, background-image, y background-size.
    • Experimenta con background-attachment y background-blend-mode para crear efectos visuales.