Cómo insertar imágenes en HTML
Contenido del curso
Cómo insertar imágenes en HTML
Contenido del curso
Raúl Adolfo Sánchez Rodríguez
Natan Mamani Flores
Matiaso Echavarria
Carlos Bazan
Daniel Josue Ramirez Rios
Juan Pablo Tibaduiza Calderon
Angel Arturo Mendez Cordero
Ezequiel Choque
Dario Mendoza
Flavio S Barajas Torres
Anderzon Yeferzon Paau Pérez
Kevin Adelso Ramírez Avalos
Valeria Taborda Santana
Laura Lugo Colin
Dany Manuel Caal Can
Fredy Gilberto Pacham Coy
Paola Andrea Hernández
Yoni Alexander Bá Pop
José Alejandro,Colaj pichiya
Darvin Gabriel Bol Cu
Marvin Alejandro Matías Jiménez
Brayan Yovany García Ortíz
Anderson Anthony Xé Caal
Natalia Rodriguez
Alamo Avila
Maximiliano Escobar Zapata
Raymundo Emiliano Cac Ché
Edwer Adelso Xitumul Castro
Brayan Yovany García Ortíz
Brayan Emilio Vásquez Son
Mi profesor en el instituto me dio el siguiente tip para las imágenes:
Ancho: 640 px
Largo: 426 px
Ancho: 1906 px
Largo: 1019 px
¿Cómo las corto?
Puede ser en Photoshop o Figma. Mira el sgte. paso a paso utilizando FIGMA:
Explora más: linktr.ee/codingwithraul
muy interesante la información
Dios me super ayudo, muchas gracias
Me parece que se repite la explicación final sobre el uso la etiqueta figure.
Si es cierto
Pense que era un Dejabu
Para poner en pŕactica lo aprendido en este curso, hice un sitio con los pesonajes de Mario Kart, algunos, después le haré mejoras para que se vea mejor, pero en poco tiempo, esto fue lo que logré:
Aquí el code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mario Kart</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="titulo-mario-kart">
<h1>Mario Kart</h1>
<p>Estos son algunos de los personajes que aparecen en Mario Kart</p>
</div>
<div class="characters-img-and-info">
<h2>Mario</h2>
<figure>
<img src="./img/mario.webp" alt="Mario Bros" />
<figcaption>
Mario es el icono líder de los videojuegos, el personaje que salvó la
industria en el año 1985, y emblema de Nintendo.
</figcaption>
</figure>
</div>
<div class="characters-img-and-info">
<h2>Donkey Kong</h2>
<figure>
<img src="./img/donkey_kong.webp" alt="Donkey Kong" />
<figcaption>
El personaje fue creado originalmente como el antagonista del juego de
arcade Donkey Kong de 1981, en el que secuestra a la novia de Mario,
Pauline, y la lleva a la cima de un edificio, lo que lleva a Mario a
tener que rescatarla.
</figcaption>
</figure>
</div>
<div class="characters-img-and-info">
<figure>
<h2>Bowser</h2>
<img src="./img/bowser.webp" alt="Bowser" />
<figcaption>
Bowser, también conocido como el rey Koopa, es el principal
antagonista de la franquicia de videojuegos de Mario de Nintendo.
</figcaption>
</figure>
</div>
<div class="characters-img-and-info">
<h2>Kirby</h2>
<figure>
<img src="./img/kirby.webp" alt="Kirby" />
<figcaption>
Kirby es conocido por su apariencia redonda y su habilidad para
absorber a sus enemigos y copiar sus habilidades. También es capaz de
volar y flotar en el aire por un corto período de tiempo.
</figcaption>
</figure>
</div>
<div class="characters-img-and-info">
<h2>Koopa Troopa</h2>
<figure>
<img src="./img/koopa_troopa.webp" alt="Koopa Troopa" />
<figcaption>
Comúnmente se les conoce genéricamente como Koopas, una raza que
incluye a Bowser, el rey de los Koopas, los Koopalings, Lakitu y
otros.
</figcaption>
</figure>
</div>
<div class="characters-img-and-info">
<h2>Samus Aran</h2>
<figure>
<img src="./img/samus-aran.webp" alt="Samus Aran" />
<figcaption>
Es una cazadora de recompensas intergaláctica que trabaja para la
Federación Galáctica y es conocida por su traje icónico de armadura,
que le permite realizar hazañas sobrehumanas como saltar alturas
increíbles y resistir el fuego y las explosiones.
</figcaption>
</figure>
</div>
<div class="characters-img-and-info">
<h2>Peach</h2>
<figure>
<img src="./img/princesa.webp" alt="Peach" />
<figcaption>
La Princesa Peach es un personaje recurrente en la serie de
videojuegos de Super Mario de Nintendo. Fue creada por Shigeru
Miyamoto y apareció por primera vez en el juego original de Super
Mario Bros en 1985. Peach es la princesa del Reino Champiñón y vive en
su castillo en Toadstool junto con su pueblo de Toads.
</figcaption>
</figure>
</div>
<div class="characters-img-and-info">
<h2>Bowser Jr.</h2>
<figure>
<img src="./img/bowser_jr.webp" alt="Bowser Jr" />
<figcaption>
Bowser Jr. es un personaje de la franquicia de videojuegos de Super
Mario y el hijo de Bowser, el principal antagonista de la serie.
</figcaption>
</figure>
</div>
</body>
</html>
Tal vez este equivocado, figcaption es mas como titulo corta de la foto que uno esta viendo en la img, estas usando la etiqueta para una descripcion que puede ir en un <p>. Claro semanticamente lo digo, para practica puedes hacer lo que desees a base de divs si quieres.</p>
Para insertar imágenes en HTML, se utiliza la etiqueta <img>. Esta etiqueta es auto-cerrada y no requiere una etiqueta de cierre. La estructura básica es:
<img src="ruta_de_la_imagen" alt="Descripción de la imagen">
Es importante optimizar las imágenes para asegurar una carga rápida en el navegador; se recomienda que pesen menos de 200-250 KB. Utiliza herramientas como TinyPNG para comprimir imágenes. Además, considera utilizar la etiqueta <figure> junto con <figcaption> si deseas incluir una descripción visible.
Muy bien flavio
<u>Interesante</u>
Hola grado once
EXCELENTE LA INFORMACIÓN
Excelente información
hola
como meto las imagenes en la carpeta img en la clase-03_imagenes
Para guardar imágenes dentro de tu carpeta img, puedes arrastrarlas y soltarlas directamente sobre la carpeta desde tu explorador de archivos o tu sistema operativo.
También puedes hacer clic derecho en la carpeta, abrirla en tu explorador y pegar los archivos de imagen ahí mismo. ¿Quieres que veamos cómo referenciarlas luego en el código?
no lo sé
éxito para todos
asii
00000000
que buenas las clases😎
gracias profe
como poner la imagen
Para poner una imagen usas la etiqueta <img>, que es especial porque no necesita etiqueta de cierre. Solo debes indicarle la ruta del archivo con el atributo src y una descripción con alt para accesibilidad.
¿Qué atributo usarías para decirle al navegador exactamente en qué carpeta y archivo está la imagen que quieres mostrar?
Gracias
buena explicación
