Poner imágenes en nuestra web produce unos resultados asombrosos de una manera muy fácil. Vamos a mostrarte como puedes incluir una imagen y los atributos que puedes darle a la misma.
El tag básico para colocar una imagen es «img«. Este tag, a diferencia de la gran mayoría de los tags de html, no necesita un cierre. Va acompañado de diferentes atributos que te vamos a explicar a continuación.
El atributo «src» es imprescindible para poder colocar una imagen. Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se escribe así: <img src=»x»>, siendo «x» la dirección o la url dónde se encuentra situada la foto.
La foto podemos alinearla en la página como queramos mediante «align«, utilizando los atributos «left» para alinearla a la izquierda, «right» para alinearla a la derecha, «top» para alinearla arriba, «bottom» para alinearla abajo y «middle» para alinearla al centro.
También podemos poner una descripción de la imagen dentro de la misma para que la gente puede leerla al mantener el ratón encima de ella. Esta descripción podemos escribirla mediante el atributo «alt» y lo escribiríamos de la siguiente manera: alt= «x», siendo «x» la descripción que le gente leerá al pasar el ratón por encima.
Debemos aclarar que no con todos los navegadores podemos ver el «alt» de manera visual. Hay algunos que no lo representan.
Atributos opcionales pero muy recomendables, son el height y el width. El height marca la altura de la imagen, mientras que el width marca la anchura. Son recomendables porque así ayudaremos al navegador a representar la imagen.
Y por último, también queremos mostrarte que le puedes adjudicar un borde a la fotografía. El atributo ya te lo sabes: «border«. Después solo tendrás que definir cuál quieres que sea el grosor del borde.
Así las cosas, deberemos escribir este código…
<img src="html/imagenes/prueba.jpg" border="1" alt="Este es el ejemplo de un texto alternativo" width="400" height="300">
…para poder ver esta preciosa fotografía
Cómo hacer una imagen HTML responsive
En la creciente tendencia a la maquetación mobile first, debemos considerar la anchura máxima que una imagen debe tener para poder ser visualizada de forma correcta en diferentes tamaños de pantalla y diferentes dispositivos. Para ello podremos hacer uso de distintas reglas CSS, aplicadas tanto en las hojas de estilo como en el propio documento HTML.
Para hacer una imagen responsive adaptada al tamaño de su contenedor, tan solo tienes que añadir el siguiente atributo a la etiqueta img: style=»max-width:100%;width:auto;height:auto;». Con esto conseguirás que la imagen se adapte a los diferentes cambios en el tamaño de pantalla.
Un caso típico es, como dicen en este artículo sobre cómo hacer un logo profesional gratis, la inserción de un logotipo que responda, usando una misma imagen, a diferentes tamaños de pantalla.
Ejemplo:
Escribiendo este código:
<img src="html/imagenes/prueba.jpg" style="max-width:100%;width:auto;height:auto;">
Conseguiremos esta imagen responsive:
Yo me alludo mucho con todo, gracias.
Estas páginas de alojamiento gratis de imagines no son tan bobos para permitirnos alojar las imágenes gratis, solo chequea en el código HTML que dice claramente <a href= eso significa REFERIR A: y fijaste más para adelante donde después de <a href= aparece la URL del sitio de ellos, eso es para ellos referir personas atraves de tu propia imagen, Yo les recomiendo que lo hagan por si mismo hay muchos programas que los hacen, pero el que yo uso es "Adobe Dreamweaver CS6" o sino sube tu imagen a Google y cuando suba dale click derecho y elige copiar URL de la imagen, luego esa URL la pega en estas variables HTML, Y así no tiene que referir a nadie.
Totalmente con tú comentario.
Ahora pienso que las imágenes se ha vuelto más complejas y el uso del atributo srcset puede ser interesante, sobre todo para móviles.
Gracias, usé el codigo y funciona.
Excelente. Funciona y sin tanto código.
Gracias.
Gracias! justo lo que buscaba 🙂
En Adobe Dreamweaver CC se suprimió el atributo «Align» y en lugar de este se utiliza style=»float: right» , siendo este ultimo mejor ya que permite establecer un efecto «cuadrado de imagen de word» y el texto que se encuentre al rededor de este se acomode a la imagen.
estoy en lo correcto?
Gracias informacion muy valiosa estoy aprendiendo
Hola, tengo escrita las etiquetas tal y como se explican aquí; pero en internet solo se ve la imagen del logo y las demás no. Agradecería si me pudieran indicar qué puedo hacer. Saludos,
Muchisimas gracias, me ayudo UwU
Buenas noches quiero hacer una consulta, yo estoy creando una paguna simple en block de notas y e bajado una imagen pero me sale de costado e probado con otra imagen y me sigue saliendo igual como puedo girar la imagen
Gracias por la información, pero no entendí bien como sacar la ruta de la imagen en ordenador
¿Que atributo debo mover para que la imagen sea responsiva?
Una pagina muy útil para mi, ya que estoy aprendiendo y me ayuda con mis practicas.
¡Gracias!
Estoy aprendiendo y me ayudó mucho la información