Curso HTML Módulo 3

📖 Curso de HTML para Principiantes

Módulo 3: Enlaces e Imágenes

🎯 Objetivo

Aprender a insertar enlaces y mostrar imágenes en una página web, entendiendo sus atributos esenciales y buenas prácticas de accesibilidad.

1. Enlaces (<a>)

Los enlaces permiten navegar entre páginas o abrir recursos externos.

html

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

🔎 Explicación:

• <a> → etiqueta de enlace.
• href → atributo que indica la dirección del recurso.
• El texto entre <a>...</a> es lo que verá el usuario y sobre lo que hará clic.

💡 Tip: Puedes enlazar a otra página dentro de tu proyecto:

html

<a href="contacto.html">Página de contacto</a>

2. Enlaces con atributos útiles

• target="_blank" → abre el enlace en una nueva pestaña.
• title → muestra un texto al pasar el ratón por encima.

html

<a href="https://www.wikipedia.org" target="_blank" title="Enciclopedia online">
  Visitar Wikipedia
</a>

3. Imágenes (<img>)

Las imágenes se insertan con la etiqueta <img>, que es autocontenida (no necesita cierre).

html

<img src="foto.jpg" alt="Foto de perfil">

🔎 Explicación:

• src → ruta de la imagen (puede ser local o URL externa).
• alt → texto alternativo que describe la imagen (importante para accesibilidad y SEO).

Ejemplo con imagen externa:

html

<img src="https://www.example.com/logo.png" alt="Logotipo de ejemplo">

4. Ajustar tamaño de imágenes

Puedes usar atributos width y height (en píxeles):

html

<img src="foto.jpg" alt="Foto pequeña" width="200" height="150">

⚠️ Recomendación: Es mejor controlar el tamaño con CSS, pero para principiantes estos atributos son útiles.

5. Ejercicio práctico

👉 Crea un archivo enlaces_imagenes.html con:

• Un enlace a tu página favorita que se abra en una nueva pestaña.
• Una imagen local con un texto alternativo descriptivo.
• Una imagen externa (desde una URL).
• Un comentario que diga: <!-- Aquí van mis enlaces e imágenes -->.

6. Conceptos clave del módulo

• Los enlaces (<a>) conectan páginas y recursos.
• Los atributos href, target y title controlan su comportamiento.
• Las imágenes (<img>) necesitan siempre un src y un alt.
• El atributo alt es esencial para accesibilidad y buscadores.

📌 Mini-reto: Crea un enlace que lleve a tu propia imagen (<img>) y que al hacer clic abra la foto en grande en otra pestaña.

HTML	MÓDULOS
Curso HTML	MÓDULO 4. Listas y Tablas
PÁGINA ANTERIOR	PÁGINA SIGUIENTE