Adición de imágenes a páginas web utilizando HTML

Adición de imágenes a páginas web utilizando HTML

Adición de imágenes a páginas web utilizando HTML

VALORACIÓN DEL ARTÍCULO:
5/5


Mira cualquier página web en línea hoy y notarás que comparten ciertas cosas en común. Uno de esos rasgos compartidos son las imágenes. Las imágenes correctas añaden mucho a la presentación de un sitio web. Algunas de esas imágenes, como el logotipo de una empresa, ayudan a marcar el sitio y a conectar esa entidad digital con su empresa física.

Para añadir una imagen, icono o gráfico a su página web, necesita utilizar la etiqueta en el código HTML de una página. La etiqueta IMG se coloca en el HTML exactamente donde se desea que se visualice el gráfico. El navegador web que está renderizando el código de la página reemplazará esta etiqueta con el gráfico apropiado una vez que la página sea vista. Volviendo al ejemplo del logotipo de nuestra compañía, aquí está la forma en que usted podría agregar esa imagen a su sitio:

Atributos de imagen

Mirando el código HTML de arriba, verá que el elemento incluye dos atributos. Cada uno de ellos es necesario para la imagen.

El primer atributo es el «src». Este es literalmente el archivo de imagen que desea que se muestre en la página. En nuestro ejemplo estamos usando un archivo llamado «logo.png». Este es el gráfico que el navegador mostrará cuando renderice el sitio.

También notará que antes de este nombre de archivo, hemos añadido información adicional, «/images/». Esta es la ruta del archivo. La barra oblicua inicial le dice al servidor que busque en la raíz del directorio. Luego buscará una carpeta llamada «images» y finalmente el archivo llamado «logo.png». Usar una carpeta llamada «images» para almacenar todos los gráficos de un sitio es una práctica bastante común, pero la ruta de su archivo cambiaría a lo que sea relevante para su sitio.

El segundo atributo obligatorio es el texto «alt». Este es el «texto alternativo» que se muestra si la imagen no se carga por alguna razón. Este texto, que en nuestro ejemplo dice «Logotipo de la empresa», se mostrará si la imagen no se carga. ¿Por qué pasaría eso? Una variedad de razones:

  • Ruta de archivo incorrecta
  • Nombre de archivo incorrecto o error ortográfico
  • Error de transmisión
  • El archivo se eliminó del servidor

Estas son sólo algunas de las razones por las que nuestra imagen especificada puede estar ausente. En estos casos, nuestro texto alternativo se mostraría en su lugar.

El texto alternativo también es utilizado por el software de lectura de pantalla para «leer» la imagen a un visitante con problemas de visión. Como no pueden ver la imagen como nosotros, este texto les permite saber qué es la imagen en sí. Esta es la razón por la que se requiere texto alternativo y por la que debe indicar claramente lo que es la imagen!

Un malentendido común del texto alternativo es que está destinado a los motores de búsqueda. Esto no es cierto. Mientras que Google y otros motores de búsqueda leen este texto para determinar qué es la imagen (recuerde, ellos tampoco pueden «ver» su imagen), usted no debe escribir texto alternativo para atraer únicamente a los motores de búsqueda. Autor de texto alternativo claro que está destinado a los seres humanos. Si también puede agregar algunas palabras clave en la etiqueta que atraen a los motores de búsqueda, eso está bien, pero siempre asegúrese de que el texto alternativo está cumpliendo su propósito principal, indicando cuál es la imagen para cualquiera que no pueda ver el archivo de gráficos.

Otros atributos

El tag IMG también tiene otros dos atributos que puede ver en uso cuando pone un gráfico en su página web: el ancho y el alto. Por ejemplo, si utiliza un editor WYSIWYG como Dreamweaver, automáticamente agrega esta información por usted. Aquí hay un ejemplo:

Los atributos WIDTH y HEIGHT indican al navegador el tamaño de la imagen. El navegador sabe entonces exactamente cuánto espacio en el diseño para asignar, y puede pasar al siguiente elemento de la página mientras la imagen se descarga. El problema con el uso de esta información en su HTML es que no siempre querrá que su imagen se muestre en ese tamaño exacto. Por ejemplo, si tiene un sitio web con capacidad de respuesta cuyo tamaño cambia en función del tamaño de la pantalla del visitante y del dispositivo, también querrá que sus imágenes sean flexibles. Si indica en su HTML cuál es el tamaño fijo, le resultará muy difícil invalidar con consultas de medios CSS con capacidad de respuesta. Por esta razón, y para mantener una separación de estilo (CSS) y estructura (HTML), se recomienda que NO añada atributos de ancho y alto a su código HTML.

Una nota: Si deja estas instrucciones de tamaño desactivadas y no especifica un tamaño en CSS, el navegador mostrará la imagen en su tamaño original predeterminado.

Editado por Jeremy Girard

TAMBIÉN TE INTERESA

Instagram-Creator-Marketplace

España, a la espera del Instagram Creator Marketplace

Instagram es una de las redes sociales de mayor impacto en la población española. Desde su irrupción, la figura del influencer ha crecido enormemente en el mundo del marketing y las marcas. La herramienta Instagram Creator Marketplace puede seguir fortaleciendo a estos prescriptores, visto el potencial que empieza a tener este servicio en Estados Unidos.

avatares-Roblox

Vámonos de shopping en Roblox: Mango inaugura su primera tienda

En dinámico mundo de los juegos online, Roblox (con más de 70 millones de usuarios activos diarios) se ha destacado como una plataforma que ofrece a los participantes una experiencia única y diversa. Una de las características más populares de Roblox es su sistema de personalización de avatares, que permite a los jugadores expresar su

Snapdragon-8-Gen-3

Snapdragon 8 Gen 3, el chip de Qualcomm que empujará la IA en los móviles

La IA ha llegado al universo de los smartphones. Los últimos lanzamientos ya se anuncian con la inteligencia como protagonista. De igual manera, las grandes actualizaciones de software vienen marcada por la presencia de nuevas funciones movidas bajo los parámetros de la inteligencia artificial generativa. Al margen de los desarrollos a nivel de software, es

Ecowatch-1-de-Maxcom

Con el Ecowatch 1 no tendrás excusas para pasarte a un reloj inteligente

Sabemos que es muy difícil convencer a un perfil de personas que reniegan de un smartwatch a comprarse un reloj inteligente y quitarse el de toda la vida. No obstante, vamos a intentarlo con el Ecowatch 1 de Maxcom.  Es tarea complicada porque el gusto por los relojes suele estar muy definido en ciertas personas.

simulador-de-bodas

¿Te casas? La IA y DeWeed pueden ayudarte en la planificación de tu boda

La planificación de una boda es un proceso emocionante pero a menudo abrumador. Desde la selección del lugar perfecto hasta la elección del vestido ideal, hay innumerables decisiones que tomar para que todo salga según lo planeado en el gran día. Tradicionalmente, esta tarea ha supuesto muchos quebraderos de cabeza para los novios. Una vez