El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Añadiendo Imágenes

Siguiente ►
►

En este tema, aprenderás cómo insertar imágenes en tus páginas HTML. Las imágenes son una parte esencial de cualquier sitio web, ya que ayudan a mejorar la apariencia visual y pueden proporcionar información adicional a los usuarios.

Conceptos Clave

  1. Etiqueta <img>: La etiqueta <img> se utiliza para insertar imágenes en HTML.
  2. Atributos de la etiqueta <img>:
    • src: Especifica la ruta de la imagen.
    • alt: Proporciona un texto alternativo para la imagen.
    • width y height: Especifican el tamaño de la imagen.

Estructura Básica de la Etiqueta <img>

La etiqueta <img> es una etiqueta vacía, lo que significa que no tiene una etiqueta de cierre. Aquí tienes un ejemplo básico:

<img src="ruta/de/la/imagen.jpg" alt="Descripción de la imagen">

Atributos de la Etiqueta <img>

  1. src (source): Este atributo es obligatorio y define la ruta de la imagen que deseas mostrar. Puede ser una ruta relativa o absoluta.

    • Ruta relativa: src="imagenes/foto.jpg"
    • Ruta absoluta: src="https://www.ejemplo.com/imagenes/foto.jpg"

  2. alt (alternative text): Este atributo es muy importante para la accesibilidad. Proporciona una descripción de la imagen que se mostrará si la imagen no puede cargarse. También es útil para los lectores de pantalla utilizados por personas con discapacidades visuales.

    • Ejemplo: alt="Una foto de un gato"

  3. width y height: Estos atributos opcionales definen el ancho y alto de la imagen en píxeles.

    • Ejemplo: width="300" height="200"

Ejemplo Práctico

Vamos a crear un ejemplo práctico donde insertamos una imagen en una página HTML.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Imagen</title>
</head>
<body>
    <h1>Bienvenido a mi página web</h1>
    <p>Esta es una imagen de ejemplo:</p>
    <img src="https://www.ejemplo.com/imagenes/gato.jpg" alt="Un gato adorable" width="300" height="200">
</body>
</html>

Explicación del Código

  1. Estructura HTML Básica: La estructura básica de un documento HTML con las etiquetas <html>, <head>, y <body>.
  2. Título y Encabezado: Un título en la etiqueta <title> y un encabezado <h1> en el cuerpo.
  3. Párrafo: Un párrafo <p> que introduce la imagen.
  4. Etiqueta <img>: La etiqueta <img> con los atributos src, alt, width, y height.

Ejercicio Práctico

Ejercicio 1: Insertar una Imagen Local

  1. Crea una carpeta llamada imagenes en el mismo directorio donde está tu archivo HTML.
  2. Guarda una imagen en la carpeta imagenes y nómbrala paisaje.jpg.
  3. Inserta la imagen en tu página HTML utilizando una ruta relativa.
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imagen Local</title>
</head>
<body>
    <h1>Mi Imagen Local</h1>
    <p>Esta es una imagen almacenada localmente:</p>
    <img src="imagenes/paisaje.jpg" alt="Un hermoso paisaje" width="400" height="300">
</body>
</html>

Solución

Asegúrate de que la imagen paisaje.jpg esté en la carpeta imagenes y que la ruta en el atributo src sea correcta.

Ejercicio 2: Insertar una Imagen desde una URL

  1. Busca una imagen en línea y copia su URL.
  2. Inserta la imagen en tu página HTML utilizando la URL.
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imagen desde URL</title>
</head>
<body>
    <h1>Imagen desde URL</h1>
    <p>Esta es una imagen cargada desde una URL:</p>
    <img src="URL_DE_LA_IMAGEN" alt="Descripción de la imagen" width="400" height="300">
</body>
</html>

Solución

Reemplaza URL_DE_LA_IMAGEN con la URL real de la imagen que encontraste en línea.

Errores Comunes y Consejos

  1. Ruta Incorrecta: Asegúrate de que la ruta de la imagen en el atributo src sea correcta. Verifica que la imagen esté en el lugar correcto y que el nombre del archivo sea exacto.
  2. Falta de Texto Alternativo: No olvides incluir el atributo alt para mejorar la accesibilidad de tu sitio web.
  3. Tamaño de Imagen Desproporcionado: Utiliza los atributos width y height para ajustar el tamaño de la imagen y mantener las proporciones adecuadas.

Conclusión

En esta lección, has aprendido cómo insertar imágenes en tus páginas HTML utilizando la etiqueta <img>. Ahora puedes mejorar la apariencia visual de tus sitios web y proporcionar contenido multimedia a tus usuarios. En la próxima lección, aprenderás cómo incrustar videos en HTML.

◄ Anterior
◄
Siguiente ►
►

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados