Este tutorial básico de HTML explicará cómo insertar una imagen en HTML. Así que sigue leyendo para que puedas poner imágenes en HTML, ya sea una imagen guardada en tu pc o una imagen de internet.
Etiqueta para poner una imagen en HTML
Para insertar imágenes en HTML se utiliza la etiqueta <img>. Se usa de la siguiente manera:
<img src="imagen.jpg" alt="Texto alternativo">
- El atributo alt especifica un texto alternativo. Este aparecerá si la imagen no logra cargarse, por tanto debe ser un texto descriptivo de la imagen.
- El atributo src indica la ruta hacia la imagen. La ruta dependerá de dónde tienes alojada tu imagen.
Insertar una imagen de la misma carpeta
Si la imagen está guardada en la misma carpeta que el archivo de HTML, entonces solo debemos indicar el nombre y extensión de la imagen, así:
<img src="imagen.jpg" alt="Imagen en la misma carpeta">
Insertar una imagen de una subcarpeta
Si la imagen está guardada en una subcarpeta, entonces debemos indicar toda la ruta desde donde se encuentra el archivo de HTML. Por ejemplo, digamos que nuestro archivo imagen.jpg está dentro de la carpeta imágenes, entonces sería así:
<img src="imagenes/imagen.jpg" alt="Imagen en una subcarpeta">
Insertar una imagen de internet
Si queremos insertar una imagen de otro sitio web, entonces debemos indicar la ruta completa. Por ejemplo:
<img src="https://regardis.com/wp-content/uploads/stockth.png" alt="Imagen desde URL de internet">
Ahora que sabes cómo insertar una imagen en HTML, puedes aprender cómo centrarla o alinearla a la izquierda o derecha. Además, también puedes hacer que tu imagen se convierta en un hipervínculo. Así podrás crear enlaces fácilmente de una imagen a una página web.
No te olvides que si tienes alguna pregunta, nos puedes dejar un comentario para ayudarte.
