Aprender a insertar imágenes en HTML es muy importante, porque como crees que se vería una página web si no contiene ninguna imagen no sería tan atractiva para el usuario visitarla, si no hay nada que lo atraiga, además si quieres explicar cualquier cosa, cualquier tema, simplemente es más fácil explicarlo a través de una imagen que agregar largos textos sin ningún una imagen para mostrar la información, básicamente es importante aprender a insertar imágenes en HTML porque cualquier página web que existe contiene imágenes.
Insertar imágenes en HTML
La forma de insertar imágenes en HTML es muy sencilla de hacer, debido a que simplemente consta de colocar una etiqueta llamada <img> y dentro de esa etiqueta se debe de colocar el nombre de la imagen que se quiere insertar, para hacer esto se puede hacer de dos formas distintas, una de ellas es colocando el nombre de la imagen, pero para ello es necesario que la imagen este dentro de la misma carpeta donde se encuentra el archivo HTML y la otra forma es colocando en la URL de una imagen que se encuentra en Internet y al momento de cargar el archivo HTML se insertará la imagen automáticamente.
👊 ¿QUIERES INCREMENTAR TUS CONOCIMIENTOS EN HTML y CSS? 👊
Entonces te recomiendo tomar este curso de HTML y CSS donde aprenderás estos lenguajes desde cero hasta convertirte en un experto, realizando varios ejercicios prácticos para que puedas aprender de una mejor manera.
👇
CURSO COMPLETO
Insertar nombre de imagen
La primera forma de insertar imágenes en HTML es colocar dentro de la etiqueta <img/> en el atributo “src” el nombre de la imagen, como se muestra en el código a continuación que está desarrollado en HTML.
<p>Image on the same file</p>
<img src="img-8.png">
Al colocar el código cómo se muestra anteriormente es necesario que dentro de la misma carpeta se encuentra en la imagen descargada y de esa forma se va mostrar en el navegador como se muestra continuación.
Insertar imagen de internet
La segunda forma de insertar imágenes en HTML es insertar una imagen de Internet sin necesidad de tenerla agregada o descargada en tu carpeta principal, simplemente seguir los pasos anteriores, pero en vez de colocar el nombre de una imagen, se debe de colocar la URL completa donde se encuentra la imagen en internet y de esa forma cargara la imagen automáticamente.
A continuación se presenta el código de cómo se debería realizar.
<p>Image from internet</p> <img src="https://luiselectronic.com/wp-content/uploads/2022/06/Logo-Canal.png">
Cargar una imagen desde una URL puede ser un poco más tardado, debido a que como no se tiene la imagen en la misma carpeta, al momento de cargar la página web debe de descargar la imagen para poderla mostrar en la página y se mostraría como se presenta continuación.
Insertar texto en las imágenes
Para poder insertar un texto alternativo en una imagen se debe de colocar el atributo “alt”, y dentro de él se debe colocar el texto que defina la imagen, esto es muy importante realizarlo ya que será lo que se muestra en caso de que la página no carga la imagen correctamente, lo cual le dará al usuario una cierta información de lo que contendría la imagen, además de que es muy importante para los navegadores, debido a que sirve para el SEO de la página.
Cómo se debe de colocar el texto alternativo es como se muestra en el siguiente código.
<p>Insert alt text</p> <img src="img-8.png" alt="Test IMG">
De esta forma en caso de qué la página no carga la imagen correctamente por algún error, se mostrará el texto como se muestra continuación.
👊 ¿NECESITAS UN HOSTING PARA TU PAGINA WEB O TIENDA ONLINE? 👊
Entonces te recomiendo usar Hostinger, que cuenta con una gran cantidad de ventajas y herramientas para crear tu Web de manera sencilla y profesional.
Estas son una de las características al contratar Hostinger:
💽 Hospedaje Profesional
💻 Sitio Web seguro con SSL
🔋 Velocidad de procesamiento
🖲 Interfaz fácil de usar
💰 Dominio Gratis
Entre muchas otras cosas mas…
Definir tamaño de la imagen
Cada que se quieres insertar imágenes en HTML, existen ocasiones en que cuando se coloca una imagen esa imagen es demasiado grande y puede ocupar gran parte de la pantalla o simplemente se quiere tener la imagen más pequeña dentro de la página web para lo cual es posible definir un alto y un ancho de esa imagen dentro de la misma etiqueta, eso sería colocando los atributos como en el siguiente código.
<h3>Specific width and height</h3> <img src="img-8.png" alt="Test IMG" width="200px" height="100px">
Cómo se pudo observar, en este caso se está asignando un ancho de 200 pixeles y una altura de 100 pixeles, para lo cual cuando el navegador carga la página se va mostrar la imagen en esa anchura y altura específica, como se ve a continuación.
Ademas de insertar imágenes en HTML, también existen otras etiquetas y otras cosas más que se pueden hacer en un archivo HTML, para el cual si quieres seguir aprendiendo más te invito a que visites mi página principal, donde encontrarás muchos más temas sobre desarrollo web y cómo crear una página web desde cero.
