Contenido del curso
Uso de etiquetas IMG y FIGURE en HTML
El elemento HTML <img> incrusta una imagen dentro de un documento. A continuación, veremos cómo funciona.
La etiqueta <img> va siempre dentro del contenedor <body>, pues es un elemento visible.
Funcionamiento de la etiqueta alt:
<img src=“ubicación de la imagen” alt=“descripción de la imagen”>
Con esta misma estructura, podemos utilizar el siguiente ejemplo de un estudiante cansado:
<img src=“https://www.ipp.edu.pe/blog/wp-content/uploads/2020/05/shutterstock_1489158410.jpg” alt=“estudiante cansado”>
Al añadir el código que acabamos de crear a un documento, la imagen que se mostrará en el navegador es la siguiente:
Atributos de la etiqueta img
La etiqueta img cuenta con dos atributos, el atributo “src” y el segundo atributo es “alt”. Ambos son importantes.
El atributo de “src” es para mostrar en dónde se encuentra la imagen que vamos a incrustar. Las imágenes se pueden obtener de alguna carpeta o una URL que obtengamos de internet.
alt sirve para agregar una descripción a nuestra imagen. Esto es útil por cuestiones de SEO y también para accesibilidad (por ejemplo para personas con visión reducida).
Aporte creado por: María del Pilar Chavez, Brayan Mamani
John Cardenas
Estudiante
Miguel Garcia
Estudiante
David Castro
Estudiante
Luis Bernaldo Morales Pérez
Estudiante
Matías Wasiak
Estudiante
Benjamín Pineda Rocha
Estudiante
Eduer Pallares Jiménez
Estudiante
Joel Dominguez Merino
Estudiante
Carlos Trujillo
Estudiante
Iván R. Artiles Bretón
Estudiante
Henry Noel Reyes Duarte
Estudiante
Andrés Bregant
Estudiante
Arnaldo José Cisneros Zambrano
Estudiante
Emilio Nicolás Mendoza Patti
Estudiante
Carlos Abad Garcia Perez
Estudiante
Jose Luis Grande Acevedo
Estudiante
Jesus Eduardo Sanchez Baños
EstudianteDavid Castro
EstudianteEduer Pallares Jiménez
EstudianteJoel Dominguez Merino
Estudiante
Christian Velázquez
Estudiante
Jose David Nicomedes Herrera Soto
Estudiante
Fabian Camilo Huertas Suarez
Estudiante
María Del Pilar Chávez Gutiérrez
Estudiante
mundial andrs
EstudianteAndres Sedliak
Estudiante
Fernando Cortes Briseño
Estudiante
Maria Celina Abaurre
Estudiante
Javier Tecún
Estudiante
Cristian Camilo Cortes Ortiz
Estudiante
Nestor Quiroga Suárez 🧑🏼🚀
Estudiante
Ines Valeria Foglino
Estudiante
Iván Arcos
Estudiante
Zuri Bernardo Rebollar Cid
Estudiante
Daniela Castro
Estudiante
Christian Juan Tambo Coaquira
Estudiante
Mateo De la Torre
Estudiante
Alonso Díaz
Estudiante
Jesús Andrés Monge Loor
Estudiante
Héctor Tello
Estudiante
Stephany Plaza
Estudiante
Diego Fernando Pedraza Cardenas
Estudiante
Luis Manuel Maya Castrejón
Estudiante
Andres Gazui
Estudiante
Miguel Angel Gonzalez
Estudiante
Andres Felipe Beltran Rojas
Estudiante
Roger Carlos Ariel Alba
EstudianteAndres Felipe Beltran Rojas
Estudiante
Manuel Alejandro Hermoso
Estudiante
Jesús Miguel Quinto Teran
EstudianteLa razón por la cuál la imagen se "rueda" un poquito de su posición original es porque la etiqueta <figure> trae unos márgenes por defecto, los cuales son de 40px a los lados izquierdo y derecho y 16px arriba y abajo. Antes de usar esta etiqueta, lo mejor es resetear sus estilos:
figure { margin: 0; }
Imagino que esto se verá en el módulo de CSS :)
Estos comentario por lo menos te ahorran 30 minutos de estrés. Thanks, bro
Esta aclaración es importante, algunas veces podemos confundirnos por no saber eso. Ggracias amigo John!
Una forma de optimizar nuestro sitio web con las imagenes o iframes, es colocando en la etiqueta img el atributo loading con el valor lazy.
<img loading="lazy" src="manzana.png" alt="People">
Atributo loading El atributo loading permite al navegador retrasar la carga de imáges y de iframes que están fuera de pantalla, hasta que el usuario haga scroll cerca de ellas. Éste atributo soporta 3 valores:
Buen aporte!
Buen dato, muchas gracias!!
Bueno esto va quedando así:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="description" content="Lista de frutas, verduras y carnes con deliciosas recetas" /> <meta name="robots" content="index, follow" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./css/style.css" /> <title>Soy la lista del super!</title> </head> <body> <header> <nav> <a href="#">Lista</a> </nav> </header> <main> <h1>Soy la lista del super!</h1> <ul> <li>Frutas</li> <ol> <li> <img src="./public/img/sandia.jpg" alt="Es la imagen de una Sandía" width="50" /> <a href="https://www.elespanol.com/cocinillas/recetas/20170623/recetas-ultrafaciles-refrescarte-base-sandia/1000903959597_30.html" >Sandía</a > </li> <li> <img src="./public/img/uvas.jpg" alt="Es la imagen de unas uvas" width="50" /> <a href="https://cookpad.com/co/recetas/115099-mermelada-de-uvas-casera" >Uvas</a > </li> <li> <img src="./public/img/peras.jpg" alt="Es la imagen de unas peras" width="50" /> <a href="https://antojandoando.com/recetas/postres-y-panaderia/peras-en-almibar/" >Peras</a > </li> </ol> <li>Carnes</li> <ol> <li> <img src="./public/img/bistec.jpg" alt="Es la imagen de un bistec" width="50" /> <a href="https://www.cocinafacil.com.mx/recetas-de-comida/receta/bistec-con-papas/" >Bistec</a > </li> <li> <img src="./public/img/pollo.jpg" alt="Es la imagen de un pollo asado" width="50" /> <a href="https://www.cocinafacil.com.mx/recetas-de-comida/receta/recetas-de-pollo-faciles/" >Pollo</a > </li> <li> <img src="./public/img/costillas_cerdo.jpg" alt="Costillas de Cerdo asado" width="50" /> <a href="https://www.youtube.com/watch?v=peJi_0fx3PM" >Costillas de Cerdo</a > </li> </ol> <li> Verduras <ol> <li> <img src="./public/img/brocoli.jpeg" alt="Imagen de un Brócoli" width="50" /> <a href="https://www.youtube.com/watch?v=J8dayLLFSVM">Brócoli</a> </li> <li> <img src="./public/img/papa.png" alt="Papas Criollas" width="50" /> <a href="https://antojandoando.com/recetas/papas/papas-en-mantequilla/" >Papas Criollas</a > </li> <li> <img src="./public/img/platano.jpg" alt="Imagen de Plátanos" width="50" /> <a href="https://www.quericavida.com/recetas/empanadas-de-platano-maduro-y-queso/21b4e266-eff2-4870-8b10-875045b015bb" >Plátano</a > </li> </ol> </li> </ul> </main> <footer> <p>Developer Eduerpj ©2020</p> </footer> </body> </html>
Muy buen trabajo!
Excelente! Con CSS ya le darás mucho más estilos!
Un dato curioso sobre Instagram y Alts en imágenes: Desde hace unos años, Facebook incorpora en sus productos una forma dinámica de asignar tags a las fotos. En este ejemplo (puede inspeccionar una imagen en Instagram y buscar la etiqueta img) automágicamente crea un alt con el nombre del usuario, las personas etiquetadas y, lo más interesante: un texto que dice lo que podría contener la imagen. Y como pueden ver, la predicción es buena contando personas.
[Inserte gif de ¡Nos destruirán a todos! aquí debajo]
Baia que interesante, gracias por el aporte.
Automágicamente. <3
Si ya hicieron el curso de GIT y GITHUB, pueden utilizar esas tecnologías para ayudarse en los demás cursos :) Por ejemplo, yo tengo una rama con el código que hace Diego en cada clase, y otra rama donde voy desarrollando el código de mi lista de supermercado
Justo estoy haciendo lo mismo, muy bueno el curso de git y github
No lo habia pensado, yo solamente estoy haciendo mi proyecto y haciendo push con los avances de cada clase
Hay una forma de poder generar la estructura básica de nuestro index sin que tengamos que codearlo todo: ¡ + tab o html:5 + Tab Se recomienda descargar los tamaños de imágenes grande, mediano y pequeña. Luego las tratamos en Tinypng. La etiqueta imagen nos ayuda a poder renderizar las imágenes, tiene 2 atributos, el primero es source src para decirle en donde se encuentra la imagen que queremos enseñar. Tenemos dos formas, podemos sacar la imagen de alguna carpeta o podemos sacar la imagen de alguna url que tengamos en internet. El segundo atributo es alt que es una descripción que le vamos a dar a la imagen y esto nos sirve para dos cosas: primero, cuando la imagen no se logre renderizar va poder decir ahí cual es la descripción de esa imagen en caso de que no se vea, el segundo es que el alt nos ayuda para temas de accesibilidad. Ambos son importantes
<img src="" alt=""> <img src="./small.jpg" alt="Es una imagen de un perrito" />
La etiqueta de imagen no es la única que tenemos, hay otra que se llama figure, esto nos ayuda para poder generar un contenedor para la imagen.
<figure> <img src="./small.jpg" alt="Es una imagen de un perrito" /> </figure>
Tus apuntes son muy buenos!
Datos importantes. Gracias Jose Luis !
Las carpetas de nuestros proyectos no pueden tener espacios en sus nombres. También es importante colocar la información de la imagen en el atributo alt para que si por algún motivo no se llega a cargar en el navegador se muestre la información suministrada. Además de ser necesaria para temas de accesibilidad.
Excelente aporte!
Gracias.
te quedo cool jose
La etiqueta <img> va dentro de <body> + <main> + <section> y la etiqueta va así:
<img src=“” alt=“”>La etiqueta img cuenta con dos atributos, el atributo “src” y el segundo atributo es “alt” ambos son importantes.
El atributo de “src” es para decirle en donde se encuentra la imagen que queremos enseñar, las imágenes se pueden sacar de alguna carpeta o alguna url que tengamos en internet.
Poniendo src=“./ solito VSCode te dará el nombre en donde esta ubicada tu imagen, solo das click y listo.
NOTA: En caso de que el nombre de tu imagen lleve algún espacio deberas sustituir ese espacio con un guion o guion medio.
<alt sirve para poner la descripción de nuestra imagen y también nos ayuda con temas de accesibilidad. Es importante poner alt.
muchas gracias
Minuto 2:31, el profesor agarra las imágenes y las arrastra desde una carpeta a la página tinypng Ya que estamos trabajando desde (WSL en mi caso) y en el curso de prework no se menciona, no hay forma desde el VScode de arrastrar las imágenes directo a la página tinypng, ya que el acceso queda denegado.
Luego de 30 min dando vueltas para saber que estaba pasando, porque no podía acceder a la carpeta pics y arrastrar las imágenes encontré que en VScode hay un atajo para abrir la carpeta en la cual estás trabajando desde WSL. Por si a alguien le paso lo mismo dejo la imagen, En caso de que alguien sepa como arrastras un archivo desde el VScode a Windows por favor avisar.
Muchas gracias, me paso similar y no vi que nadie abordara esto, la sección de comentarios complementa mucho. Saludos
Gracias Fernando por compartir! Llevaba más de media hora y no lo lograba!!!!! Saludos!
No me gusto mucho hacer una lista del super así que hice un lista de zapatos por marca usando 3 marcas diferentes
yo hice exactamente lo mismo!.
Hola amigos, les comparto el reto No. 2, usé la etiqueta <br> para el salto de línea, y adicionalmente a la etiqueta <img> le coloque los atributos width y height para modificar el tamaño de las imágenes directamente. (Intencionalmente ocacione un daño en la primera imagen para probar el atributo alt. .
Mil gracias por recordarme los atributos de medidas...!!
Para este tipo de ejercicios les recomiendo usar lorempixel y les irá generando imágenes de acuerdo a la selección que hayan puesto incluyendo el tamaño.
Por ejemplo, yo seleccioné Sports:
Y cada que refrescan les genera una nueva, espero les funcione :)
me acabo de enterar que existe el "lorempixel" ¡Gracias!
qué cool gracias :)
Recomiendo ingresar a la documentación https://devdocs.io/html/element/img
Con esta herramienta gestiona la documentación disponible de las tecnologías de desarrollo, e incluso puedes descargarla para verla en offline
¡Excelente aporte @Christian! 💯
Ver los archivos en Github
Como quedó:
Código:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content="Descripción de la página"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <header> <p>desafio</p> </header> <main> <section> <h1>Soy la lista del super!</h1> <ul> <li>Frutas</li> <ol> <section> <li>Manzana</li> <figure> <img src="https://lh3.googleusercontent.com/proxy/ZJIOVy5DpzARIFpU12vUUHCbgz7rEAyusd_cbtM6McMm1Ks1mgYVhKXI0qZTLV5zo8GOW0e3p98Ave0DtVsejlmqwZHQBOthkFm8KRNlRIQISefbkcHqjwQOdnWVQ-4jrlYfMv08unq79WGvBvmpqHeAGfBhd4uz-avjdNClCRyqJmSsk4I" width="150px" height="150px" alt="Una manzana"> </figure> </section> <section> <li>Plátano</li> <figure> <img src="https://thumbs.dreamstime.com/b/pl%C3%A1tano-pelado-2514268.jpg" width="150px" height="150px" alt=""> </figure> </section> </ol> <li>Carnes</li> <ol> <section> <li>Pollo</li> <figure> <img src="https://img.vixdata.io/pd/jpg-large/es/sites/default/files/imj/elgranchef/p/pollo-a-la-francesa.jpg" width="150px" height="150px" alt=""> </figure> </section> <section> <li>Carne molida</li> <figure> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Hackfleisch-1.jpg/1200px-Hackfleisch-1.jpg" width="150px" height="150px" alt=""> </figure> </section> </ol> <li>Verduras</li> <ol> <section> <li>Limón</li> <figure> <img src="https://cdn2.actitudfem.com/files/limon.jpg" width="150px" height="150px" alt=""> </figure> </section> <section> <li><a href="https://www.recetasgratis.net/Zanahoria-busqCate-1.html">Zanahoria</a></li> <figure> <img src="https://img.freepik.com/foto-gratis/zanahorias-frescas-aisladas_43284-1682.jpg?size=626&ext=jpg" width="150px" height="150px" alt=""> </figure> </section> </ol> </ul> </section> </main> <footer> <p>creado con amor</p> </footer> </body> </html>
esta chevere!!
esta es mi lista de pendientes :P
¿Porque se me genera también esta etiqueta meta cuando hago el shortcut (!) para generar lo básico de html?: <meta http-equiv="X-UA-Compatible" content="IE=edge"> ¿Qué significa?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Hola!, esta meta etiqueta es importante para configurar la compatibilidad de tu web con ciertos navegadores. Por ejemplo aquí se esta diciendo que la compatibilidad es desde Edge explorer en adelante, o sea que internet explorer no aparecería como compatible por su antigüedad :D
si hasta donde yo sabía era la compatibilidad de navegadores, desconozco alguna otra razón.
Hola PlatziNautas;
Adjunto el resultado del segundo desafío:
Saludos!
¡Muy bien!
¿Qué es lo que ha gustado más del curso?
Hola Carlos ,
Gracias por tu mensaje y lo que me ha gustado es el enfoque practico y profesional que transmite Diego en cada clase hace que nuestro propósito sea ser los mejores en lo que nos propongamos y sus pautas de producto con la experiencia de usuario incluida es un plus genial.
Saludos!
Necesito una Malta con un par de Empanadas de carne mechada...
