Imágenes: añada imágenes a su página
Inserte y dé formato a imágenes en su página web
Imágenes: añada imágenes a su página es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML for Kids, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML for Kids incluye 4 lecciones en total.
Imágenes: agregar imágenes a su página
¡Bienvenido a la siguiente lección! Hoy aprenderá a agregar imágenes a sus páginas web. ¡Las imágenes hacen que sus páginas sean más atractivas y entretenidas!
¿Qué son las imágenes en HTML?
Las imágenes se agregan a las páginas web mediante la etiqueta <img>. Esta es una etiqueta de autocierre, lo que significa que no necesita una etiqueta de cierre como </img>.
¡Aprendamos a usarla!
Agregar una imagen
Para agregar una imagen, use el atributo src para especificar la ubicación del archivo de imagen.
Ejemplo:
En este ejemplo:
src: Especifica el archivo de imagen.alt: Proporciona un texto alternativo si no se puede mostrar la imagen.
<img src="https://www.w3.org/html/logo/img/html5-display.png"
alt="A beautiful view" />
Texto alternativo (atributo alt)
El atributo alt describe la imagen. Es importante para la accesibilidad y ayuda a los motores de búsqueda a comprender la imagen.
Ejemplo:
Si la imagen no se carga, aparecerá en su lugar el texto "A beautiful sunset over the ocean".
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A beautiful sunset over the ocean" />
Agregar dimensiones a las imágenes
Puede controlar el tamaño de la imagen mediante los atributos width y height.
Ejemplo:
Este ejemplo establece que la imagen tenga 300 píxeles de ancho y 200 píxeles de alto.
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A red flower" width="300" height="200" />
Enlazar imágenes
Puede convertir una imagen en un enlace en el que se pueda hacer clic colocándola dentro de una etiqueta <a>.
Ejemplo:
Al hacer clic en la imagen, el usuario irá a https://example.com.
<a href="https://example.com">
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Example Logo" />
</a>
Usar imágenes en línea
Puede usar imágenes alojadas en línea especificando su URL en el atributo src.
Ejemplo:
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Online Image" />
Pruébelo usted mismo
Vamos a crear una página web sencilla con imágenes. Este es un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>My Image Page</title>
</head>
<body>
<h1>Welcome to My Gallery</h1>
<img src="cat.jpg" alt="A cute cat" width="400" />
<p>This is my adorable cat!</p>
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A playful dog" />
<p>This is a friendly dog from the internet!</p>
</body>
</html>
¡Excelente trabajo!
¡Felicidades! Ha aprendido a agregar imágenes a sus páginas web, establecer sus dimensiones e incluso enlazarlas con otras páginas. Las imágenes hacen que sus páginas web sean más interesantes y atractivas visualmente. En la próxima lección, aprenderá a crear tablas para organizar datos. ¡Prepárese para hacer que sus páginas sean aún más funcionales!
Preguntas frecuentes
¿La lección «Imágenes: añada imágenes a su página» es gratis?
Sí — el texto completo de «Imágenes: añada imágenes a su página» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML for Kids, actualiza a CoddyKit PRO. El curso de HTML for Kids incluye 4 lecciones en total.
¿Qué aprenderé en «Imágenes: añada imágenes a su página»?
Inserte y dé formato a imágenes en su página web Practicas HTML for Kids con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML for Kids?
No se requiere experiencia previa. HTML for Kids en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Imágenes: añada imágenes a su página»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML for Kids?
Sí. Cada lección de HTML for Kids incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Encabezados y párrafos
- Listas: ordenadas y no ordenadas
- Enlaces: conectando la Web
- Imágenes: añada imágenes a su página