Cómo insertar Imágenes en HTML
Aprendamos cómo insertar imágenes en HTML: usaremos las etiquetas y los atributos apropiados y los escribiremos en un documento HTML. También aprenderemos a insertar imágenes desde URLs y carpetas. Esto se puede usar para agregar imágenes a nuestras páginas.
Insertar o poner una imagen en HTML es bastante sencillo, necesitamos usar la etiqueta <img/> y especificar qué archivo se carga y dónde se encuentra, para que el navegador lo muestre. Veamos cómo hacer eso.
Etiqueta img
Si bien muchas etiquetas tendrán una etiqueta de cierre correspondiente, la etiqueta <img/> no. Sin embargo, al igual que otras etiquetas, también tiene atributos que se pueden configurar y modificar según sea necesario.
Atributo src
Para indicar la ubicación o dirección de la imagen, usaremos el atributo src, la imagen se puede almacenar en la misma carpeta en la que almacenó su documento HTML o también se puede agregar desde una URL, por lo que se vería como este:
Insertar imagen en HTML desde una carpeta
Para insertar una imagen que está almacenada en la misma carpeta que nuestro documento HTML, simplemente pegaremos su nombre y extensión en el valor del atributo src de esta manera:
Insertar imagen HTML desde URL
Si tiene una imagen con un enlace a una URL externa, el atributo src mostrará la URL del sitio web externo.
El primer ejemplo de código inserta una imagen de la URL especificada, pero vamos a repetirlo.
Atributo alt
El atributo alt se refiere al texto alternativo que se muestra si hubo un problema al cargar dicha imagen. Es importante que este texto alternativo sea un resumen claro de la imagen. Es muy común obviar esta importantísima etiqueta al principio de nuestro aprendizaje, pero si existe algún error, igual el usuario tendría una noción de que trata la imagen de debía cargar.
Tambien es muy importante para el posicionamiento en los buscadores.
Tamaño de imagen
Para definir el tamaño de una imagen, podemos usar los atributos height (alto) y width (ancho). Esto determinará el tamaño de la imagen en píxeles o porcentaje.
En este ejemplo vamos a dar un ancho y alto a la imagen de 50px:
En este otro ejemplo vamos a dar un ancho y alto de la imagen del 50% conb respecto al original.
Atributo border
El atributo de borde se utiliza para dibujar un borde alrededor de una imagen. El valor proporcionado puede estar en píxeles o en cualquier unidad de medida admitida. También vale la pena señalar que CSS permite una personalización de imágenes más amplia que antes.
Vamos a dar un borde de 5px a nuesta imagen.
Cómo poner enlaces en imágenes HTML
Poner un hipervínculo en una imagen es sencillo, básicamente colocamos la etiqueta <img/> dentro de una etiqueta <a>