Seguimos en la semana del HTML en el blog de yoSEO Marketing. Ya hemos aprendido cosas, cosas chulas como hacer tablas, meter espacios o incluso ocultar el código fuente de nuestra página (o al menos intentarlo). Vamos con algo básico, códigos HTML para insertar imágenes en una web. Así es porque no hay nada más soso y poco atractivo que una web que es solo texto.

Códigos HTML para insertar imágenes

Para definir una imagen en HTML se utiliza la etiqueta <img>. Requiere dos atributos: src y alt. La línea de código quedaría así:

<img src=»imagen.jpg» alt=»Nombre de la imagen» height=»100″ width=»1000″>

El atributo src específica la url de la imagen, es decir, donde se encuentra alojada. Para los programadores novatos un error común es guardar la imagen en una carpeta de su equipo, de modo que cualquiera que se meta a la web desde otro ordenador será incapaz de verla. Para que la imagen se pueda visualizar sin problemas por cualquiera, debe estar en internet, así que lo normal es que entre todas las carpetas que conforman la web haya una para guardar todas las imágenes.

El atributo alt específica un texto alternativo para la imagen. Ese texto le aparecerá a quienes no les cargue la imagen correctamente, así que debe describir el contenido de la misma. Por ejemplo: “logo”.

Y los atributos height y width especifican respectivamente la altura y la anchura de la imagen. Puede ponerse en pixeles (poniendo px al lado del número o no poniendo nada) o en porcentaje (porcentaje de pantalla que ocupan).

Formatos de imágenes admitidos en HTML

Los formatos en los que se pueden publicar imágenes en HTML son los siguientes:

.gif         Acrónimo de Graphics Interchange Format. Los gif. son el formato predilecto para las animaciones.

.jpg o .jpeg         Acrónimo de Joint Photographic Experts Group. Las dos variables son indiferentes. Este formato comprime las imágenes para que ocupen menos espacio (espacio en bytes, no en pixeles).

.png       Acrónimo de Portable Network Grapic. Es un formato de mejor calidad que el .jpg, pero ocupa más espacio.

.bmp     Se trata de un mapa de bits. No muchos navegadores son capaces de mostrarlo como imagen, así que mejor usar jpg o png.

Usando estos sencillos códigos para insertar imágenes en HTML y podrás darle un aspecto más profesional y atractivo a tus páginas webs.

Te deSEO un buen día,

William Penguin.