Objetivos de aprendizaje

Al finalizar esta lección, serás capaz de:

Usar correctamente los encabezados (títulos) en HTML.
Escribir párrafos de texto.
Crear enlaces que dirijan a otras páginas o sitios.
Construir listas ordenadas y desordenadas para organizar información.

Contenidos teóricos con ejemplos claros y explicativos

🟩 Títulos (Encabezados)

HTML ofrece 6 niveles de encabezado, desde <h1> hasta <h6>, siendo <h1> el más importante (título principal) y <h6> el menos relevante.

<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>

📝 Consejo: Siempre usa los encabezados en orden jerárquico, sin saltarte niveles innecesariamente.

🟩 Párrafos

La etiqueta <p> se usa para crear bloques de texto.

<p>Este es un párrafo de ejemplo. Aquí puedes escribir texto común.</p>

🟩 Enlaces

Para crear enlaces usamos la etiqueta <a>, con el atributo href, que indica la dirección a la que apuntará.

<a href="https://www.google.com">Ir a Google</a>

Puedes enlazar también a otro archivo local, por ejemplo:

<a href="pagina2.html">Ir a la página 2</a>

El atributo target="_blank" sirve para abrir el enlace en una nueva pestaña:

<a href="https://www.google.com" target="_blank">Abrir Google en otra pestaña</a>

🟩 Listas

Hay dos tipos de listas principales:

Listas desordenadas (<ul>) → viñetas
Listas ordenadas (<ol>) → numeradas

Cada ítem se marca con <li> (list item).

<h3>Lista desordenada</h3>
<ul>
  <li>Pan</li>
  <li>Queso</li>
  <li>Leche</li>
</ul>

<h3>Lista ordenada</h3>
<ol>
  <li>Levantarse</li>
  <li>Ducharse</li>
  <li>Desayunar</li>
</ol>

Código paso a paso (comentado)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Texto y Listas en HTML</title>
</head>
<body>

  <h1>Mi Página Personal</h1>
  <!-- Título principal -->

  <h2>Sobre mí</h2>
  <!-- Título secundario -->

  <p>Me llamo Ana y estoy aprendiendo a crear páginas web con HTML.</p>
  <!-- Párrafo -->

  <p>Si quieres saber más sobre mí, visita mi perfil:</p>
  <a href="https://linkedin.com" target="_blank">Mi LinkedIn</a>
  <!-- Enlace externo -->

  <h2>Mis pasatiempos</h2>

  <ul>
    <li>Leer libros</li>
    <li>Jugar videojuegos</li>
    <li>Escuchar música</li>
  </ul>

  <h2>Mi rutina diaria</h2>

  <ol>
    <li>Despertarme</li>
    <li>Tomar desayuno</li>
    <li>Estudiar programación</li>
  </ol>

</body>
</html>

Resumen de los conceptos aprendidos

Los títulos se definen con etiquetas <h1> a <h6>.
Los párrafos se escriben con <p>.
Los enlaces se crean con <a href="">, y se pueden abrir en la misma ventana o en una nueva.
Las listas desordenadas usan <ul>, y las ordenadas <ol>. Los ítems van dentro de <li>.

Ejercicio práctico final basado en lo aprendido

Crea un archivo perfil.html con lo siguiente:

Un título principal con tu nombre completo (<h1>).
Un subtítulo con tu ocupación o área de interés (<h2>).
Un párrafo que describa tus objetivos al aprender desarrollo web.
Un enlace a tu sitio o red social favorita.
Una lista desordenada con tus 3 comidas favoritas.
Una lista ordenada con las 3 primeras cosas que haces al comenzar el día.

Guarda el archivo y ábrelo en tu navegador para revisar el resultado.

Recomendaciones o tips adicionales

Usa títulos para organizar el contenido como si fuese un documento: claro y jerárquico.
No abuses de los <br> para separar texto; es mejor usar <p> o márgenes con CSS.
Usa enlaces descriptivos (por ejemplo, "Visita mi portafolio" en vez de "haz clic aquí").
Las listas te ayudan a organizar información de forma clara y visual.

5 - HTML: Títulos, párrafos, enlaces y listas