Insertar una imagen en HTML es una de las tareas más básicas para cualquier persona que esté comenzando a aprender HTML.
Las imágenes son uno de los elementos más importantes en un sitio web, a través de ellas se puede no solo hacer más atractivo a nivel visual un sitio web, también pueden servir de apoyo al contenido en formato texto.
A continuación, se explica cómo insertar una imagen en HTML paso a paso.
Pasos para insertar una imagen en html de forma simple
El primer paso es subir la imagen al servidor donde está alojado tu sitio web. Si estpas usando WordPress u otro cms, debes alojar la imagen en la carpeta public_html.
Asegurate de que el nombre de la imagen concuerda con el contenido de la misma. Es decir si la imagen es de unos zapatos guarda con el nombre zapatos.jpeg o la extensión que estés utilizando.
Mientras más descriptivo sea el nombre de la imagen, mejor será para el SEO.
En segundo lugar, hay que abrir el editor de temas.
Ubica el archivo donde deseas agregar tu imagen. Por ejemplo si la deseas agregar a la cabecera abre el archivo header.php.
Busca la línea donde empieza la etiqueta HTML body o <body>. Bajo la primera etiqueta <div>, inserta la etiqueta de imagen: <img>. Esta etiqueta debe estar seguida de una serie de atributos, que indican el tamaño de la imagen, el tamaño en pantalla, la ubicación de la imagen y otros detalles.
Ahora, hay que especificar la ubicación de la imagen. Esto se hace especificando la ruta de la imagen. Esto puede ser una ruta relativa, que indica la ubicación de la imagen en relación con la ubicación del documento HTML, o una ruta absoluta, que indica la ubicación de la imagen en el servidor. Para esto se usará el atributo img src.
Img src es un atributo del elemento HTML «img» que se usa para especificar la URL de la imagen que se va a mostrar en una página web.
Esta URL puede ser una dirección de una imagen en un servidor web, una dirección de una imagen almacenada localmente, o incluso una imagen codificada en base64.
Es importante usar una dirección de imagen válida y accesible, ya que de lo contrario la imagen no se mostrará correctamente en el sitio web.
Además, el atributo src también se puede usar para especificar la URL de una página web, en cuyo caso se mostrará una imagen miniatura de la misma.
img src=»images/nombre-archivo.jpg»
Una vez guardado, se puede ver el resultado visitando la página web en un navegador.
Cómo Establecer la anchura y altura de una imagen en html
1. Para establecer la anchura y altura de una imagen en HTML, primero debemos agregar la etiqueta <img> dentro de nuestro documento HTML.
2. Dentro de esta etiqueta, agregamos el atributo src para indicar la ubicación de nuestra imagen.
3. Ahora agregamos los atributos width (para establecer la anchura) y height (para establecer la altura) para indicar el tamaño de nuestra imagen. Estos atributos deben llevar un valor numérico que representa el tamaño en píxeles.
4. Por último, agregamos el atributo alt para indicar una pequeña descripción de la imagen. Esta etiqueta es importante ya que ayuda a los usuarios con discapacidad visuales a entender el contenido de la imagen.
5. Una vez que hayamos agregado todos estos atributos, nuestra etiqueta <img> debería verse algo como esto:
<img src=»URL_de_la_imagen» width=»anchura» height=»altura» alt=»Descripción de la imagen»>.
En resumen, se puede insertar una imagen en HTML de forma muy sencilla siguiendo los pasos de este tutorial. Si tienes alguna pregunta, no olvides que puedes hacerla en la sección de comentarios.