Listas y Enlaces: Creando listas ordenadas/desordenadas y navegando por la web.

Guía de Estudio: Lección 1.4 – Listas y Enlaces 🔗

Esta guía te ayudará a consolidar tus conocimientos sobre cómo organizar información en listas y cómo crear hipervínculos para navegar entre páginas web.

1. Objetivos de la Lección

• Aprender a crear los dos tipos principales de listas en HTML: desordenadas y ordenadas.

• Entender la estructura anidada de las etiquetas de listas (<ul>/<ol>) y sus ítems (<li>).

• Crear hipervínculos funcionales usando la etiqueta <a>.

• Utilizar el atributo href para especificar la URL de destino de un enlace.

• Aprender a hacer que un enlace se abra en una nueva pestaña del navegador con el atributo target.

2. Creando Listas para Organizar Información

Las listas son fundamentales para presentar información de manera clara y estructurada. HTML ofrece dos tipos principales.

a) Listas Desordenadas (<ul>)

• Propósito: Se utilizan cuando el orden de los elementos no es importante. Son perfectas para listas de características, ingredientes o cualquier conjunto de ítems donde la secuencia no altera el significado.

• Etiquetas Clave:

• <ul>: Del inglés “Unordered List”. Es la etiqueta que envuelve toda la lista.

• <li>: Del inglés “List Item”. Cada elemento individual de la lista debe estar envuelto en su propia etiqueta <li>.

• Apariencia por Defecto: El navegador muestra cada ítem con una viñeta (bullet point).

Ejemplo de código:

HTML

<h3>Mi Lista de Compras</h3>

<ul>

  <li>Leche</li>

  <li>Pan</li>

  <li>Huevos</li>

</ul>

b) Listas Ordenadas (<ol>)

• Propósito: Se utilizan cuando la secuencia de los elementos sí es importante. Son ideales para recetas paso a paso, rankings, o cualquier tipo de instrucción.

• Etiquetas Clave:

• <ol>: Del inglés “Ordered List”. Es la etiqueta que envuelve toda la lista.

• <li>: Al igual que en las listas desordenadas, cada ítem se define con <li>.

• Apariencia por Defecto: El navegador numera automáticamente cada ítem (1, 2, 3, etc.).

Ejemplo de código:

HTML

<h3>Pasos para hacer un pastel</h3>

<ol>

  <li>Mezclar la harina y el azúcar.</li>

  <li>Añadir los huevos y la leche.</li>

  <li>Hornear por 30 minutos.</li>

</ol>

3. Creando Enlaces (Hipervínculos)

Los enlaces son la esencia de la web, permitiendo la navegación entre documentos y sitios.

• Etiqueta Principal: <a> (del inglés “anchor” o ancla).

La etiqueta <a> por sí sola no hace nada. Necesita atributos para funcionar correctamente.

Atributos Esenciales del Enlace

1. href (Hypertext Reference)

• Propósito: Este es el atributo más importante. Su valor es la URL (dirección web) a la que el usuario será dirigido al hacer clic.

• Sintaxis: href=”https://www.direccion-web.com”

Texto del Enlace: El contenido que se coloca entre la etiqueta de apertura <a> y la de cierre </a> es el texto visible y clicable para el usuario.

Ejemplo de código:

HTML

<p>

  Si quieres aprender más, puedes visitar <a href=”https://www.google.com”>Google</a>.

</p>

2. target (Destino)

• Propósito: Este atributo opcional especifica dónde se abrirá el enlace.

• Valor Común: target=”_blank”

• Función de _blank: Le indica al navegador que abra el enlace en una nueva pestaña, lo cual es muy útil para dirigir a los usuarios a sitios externos sin que abandonen tu propia página.

Ejemplo de código con target:

HTML

<p>

  Visita <a href=”https://www.google.com” target=”_blank”>Google en una nueva pestaña</a>.

</p>

4. Resumen de Conceptos Clave

¡Excelente! Con listas y enlaces, ya puedes crear páginas con contenido estructurado y conectado a la inmensa red de internet.