Mira cualquiera página web en línea hoy y notará que comparten ciertas cosas en común. Uno de esos rasgos compartidos son las imágenes. Las imágenes correctas aportan 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.
Cómo agregar una imagen a una página web usando HTML
Para agregar una imagen, icono o gráficos a su página web, debe usar la etiqueta en el código HTML de una página. Coloca el.
IMGetiqueta en tu. HTML exactamente donde desea que se muestre el gráfico. El navegador web que muestra el código de la página reemplazará esta etiqueta con el gráfico apropiado una vez que se visualice la página. Volviendo al ejemplo del logotipo de nuestra empresa, así es como puede agregar esa imagen a su sitio:
El atributo SRC
Si observa el código HTML anterior, verá que el elemento incluye dos atributos. Cada uno de ellos es obligatorio 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 mostraría el navegador web cuando renderizara el sitio.
También notará que antes de este nombre de archivo, agregamos información adicional, "/ images /". Esta es la ruta del archivo. La barra inclinada inicial le dice al servidor que busque en la raíz del directorio. Luego buscará una carpeta llamada "imágenes" y finalmente el archivo llamado "logo.png". El uso de una carpeta llamada "imágenes" para almacenar todos los gráficos de un sitio es una práctica bastante común, pero la ruta del archivo se cambiaría a lo que sea relevante para su sitio.
El atributo Alt
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? Varias razones:
- Ruta de archivo incorrecta
- Nombre de archivo incorrecto o falta de ortografía
- Error de transmisión
- El archivo fue eliminado del servidor
Estas son solo algunas posibilidades de por qué puede faltar nuestra imagen especificada. En estos casos, nuestro texto alternativo se mostraría en su lugar.
¿Para qué se utiliza el texto alternativo?
El software de lectura de pantalla también utiliza texto alternativo para "leer" la imagen a un visitante con problemas de visión. Dado que no pueden ver la imagen como nosotros, este texto les permite saber qué es la imagen en sí. ¡Es por eso que se requiere texto alternativo y por qué debe indicar claramente qué es la imagen!
Un malentendido común del texto alternativo es que está destinado a los motores de búsqueda. Esto no es verdad. Si bien Google y otros motores de búsqueda leen este texto para determinar cuál es la imagen (recuerde, tampoco pueden "ver" tu imagen), no debes escribir texto alternativo para apelar únicamente a la búsqueda motores. Cree un texto alternativo claro destinado a los seres humanos. Si también puede agregar algunas palabras clave en la etiqueta que atraigan a los motores de búsqueda, está bien, pero asegúrese siempre el texto alternativo cumple su propósito principal al indicar cuál es la imagen para cualquiera que no pueda ver los gráficos expediente.
Otros atributos de imagen
La.
IMG.
La etiqueta también tiene otros dos atributos que puede ver en uso cuando coloca un gráfico en su página web: el ancho y el alto. Por ejemplo, si usa un editor WYSIWYG como Dreamweaver, automáticamente agrega esta información por usted. He aquí un ejemplo:
La.
ANCHO.
y.
ALTURA.
Los atributos le dicen al navegador el tamaño de la imagen. Luego, el navegador sabe exactamente cuánto espacio en el diseño asignar y puede pasar al siguiente elemento de la página mientras se descarga la imagen. El problema con el uso de esta información en su HTML es que es posible que no siempre desee que su imagen se muestre en ese tamaño exacto. Por ejemplo, si tiene un.
sitio web adaptable
cuyo tamaño cambia según la pantalla de los visitantes y el tamaño 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 anularlo con responsive.
Consultas de medios CSS
. Por esta razón, y para mantener una separación de estilo (CSS) y estructura (HTML), se recomienda que NO agregue 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 predeterminado de todos modos.
Editado por Jeremy Girard