Cómo agregar una imagen en HTML

Si desea captar la atención de los usuarios cuando él/ella visita su sitio web, entonces agregar imágenes puede ser algo divertido de hacer. Las imágenes hacen que la aparición de su sitio web sea más atractiva, suministrando así la belleza general de su sitio web. Pero cómo agregar imágenes a un sitio web? Bueno, hemos sumado formas de usar qué imágenes se pueden insertar en páginas web.

Cómo agregar imágenes en html

Para agregar imágenes a las páginas web, use el etiqueta. Esta etiqueta está vacía y consiste en ciertos atributos y no tiene una etiqueta final.

Los atributos de la etiqueta son; el SRC atributo que se usa para definir la ruta de la imagen y el alternativo El atributo se usa como un texto alternativo en escenarios cuando la imagen no se carga debido a algún problema.

Aquí hemos mostrado cómo usar esta etiqueta para agregar imágenes.

Html

En el código anterior, estamos agregando tres imágenes a la página web utilizando la etiqueta. En cada etiqueta, la ruta de las imágenes se ha proporcionado al atributo SRC y se ha agregado un texto alternativo a estas etiquetas. Además, también estamos proporcionando un cierto ancho y altura a las imágenes.

Producción

Se han agregado imágenes a la página.

Cómo ajustar el ancho y la altura de la imagen

Si desea alterar el ancho y la altura de una imagen, simplemente use las propiedades de ancho y altura dentro de la etiqueta.

Html

El código anterior agregará imágenes a la página web que se especifica el ancho y la altura utilizando las propiedades de ancho y altura.

Producción

Ambas imágenes tienen diferentes anchos y alturas.

Cómo agregar imágenes de otra carpeta

Si las imágenes que desea incrustar en su página web están presentes en otra carpeta como se muestra en la captura de pantalla a continuación, agregue el nombre de la carpeta en el atributo SRC.

Las imágenes están presentes en la carpeta llamada "Imágenes".

Html

Para demostrar correctamente cómo agregar imágenes de otra carpeta, hemos adjunto una captura de pantalla del editor de códigos. La sección resaltada en rojo muestra que las imágenes están presentes en otra carpeta que está presente justo al lado del archivo HTML. El nombre de la carpeta junto con el nombre y el formato de la imagen se proporcionan al atributo SRC de la etiqueta como se destaca en verde.

Producción

La imagen se agregó desde otra carpeta.

Cómo agregar imágenes de otra página web

Para agregar imágenes de otra página web o fuente, debe proporcionar la URL completa de esa fuente al atributo SRC de la etiqueta.

Html

El código anterior obtendrá la imagen de la URL especificada y la agregará a nuestra página web.

Producción

La imagen se agregó con éxito desde otra página web.

Cómo agregar imágenes como enlaces

Si desea redirigir a su usuario a otra página web, puede usar imágenes para realizar esta tarea.

Html

En el código anterior, estamos en primer lugar proporcionando el enlace de la página web a la que queremos redirigir a nuestros usuarios y proporcionar este enlace al atributo HREF de la etiqueta y luego anidar nuestra imagen, que es un GIF en este caso dentro del ancla etiqueta.

Producción

Cuando el usuario haga clic en la imagen, él/ella será redirigido a la página web proporcionada como el enlace en la etiqueta de anclaje.

Conclusión

Con el fin de agregar imágenes en html use el etiqueta. Esta etiqueta está vacía, no tiene una etiqueta final y consta de dos atributos requeridos que son; el atributo SRC y el atributo ALT. El atributo SRC se utiliza para establecer la ruta de la imagen, mientras que el atributo ALT establece un texto que se muestra como un alternativo en caso de que la imagen no se cargue debido a algún problema. Usando esta etiqueta puede agregar imágenes de otra carpeta u otro sitio web, o usarlas como enlaces.