Para hacerlo desde una carpeta, debes entender donde estará ubicada la imagen cuando subas tu proyecto a internet. Es importante entender el concepto de ruta relativa. Básicamente es la ubicación desde el punto de donde se está solicitando. Es muy importante que entiendas esto para insertar una imagen en HTML ya que tendrás que usar dicha ruta de donde está tu imagen. Pero nos adelantemos, vamos paso a paso.
Paso 1: Preparación de la imagen
Lo primero que necesitas hacer es asegurarte de tener la imagen que deseas insertar en tu página web en una carpeta accesible en tu computadora. Puede ser cualquier imagen en formato jpg, png, gif, o cualquier otro formato de imagen que desees mostrar en tu página.
Paso 2: Crea un archivo HTML donde poner tu imagen
Abre tu editor de texto favorito (puede ser Notepad, Sublime Text, Visual Studio Code, entre otros) y crea un nuevo archivo HTML. Puedes llamarlo como quieras, por ejemplo, «index.html«. Este será el archivo en el que trabajarás para crear tu página web.
Cuáles son las 142 etiquetas de HTML
Aunque no es necesario que las conozcas o las apliques todas, siempre es bueno saber que existen y para qué sirven…
En tu carpeta debes tener los archivos ubicados correctamente. En este caso vamos a tener el archivo HTML que acabamos de crear, y una carpeta donde vamos a tener nuestra imagen.
Paso 3: Estructura básica de HTML
Todo archivo HTML necesita una estructura básica para funcionar correctamente. Empieza tu archivo HTML con las etiquetas <!DOCTYPE html> y <html>, seguidas de las etiquetas <head> y <body>. Tu código HTML debería verse así hasta ahora:
<!DOCTYPE html>
<html>
<head>
<title>Insertar Imagen</title>
</head>
<body>
</body>
</html>Paso 4: Inserta la imagen en tu HTML
Dentro del cuerpo de tu documento HTML, añade la etiqueta <img> para insertar la imagen. La etiqueta <img> no tiene una etiqueta de cierre, así que cierra la etiqueta con un slash al final si estás utilizando HTML5. Dentro de la etiqueta <img>, necesitarás especificar la ruta de la imagen en tu carpeta. Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Insertar Imagen</title>
</head>
<body>
<img src="carpeta/example.png" alt="Descripción de la imagen de ejemplo" />
</body>
</html>Asegúrate de reemplazar "carpeta/imagen.jpg" con la ruta de tu imagen y proporciona una descripción significativa en el atributo alt. Este atributo es importante para la accesibilidad de tu sitio web.
Paso 5: Guarda y visualiza tu página web
Guarda tu archivo HTML y abrelo en tu navegador web preferido. ¡Deberías ver la imagen que acabas de insertar en tu página web! Si no ves la imagen, verifica que la ruta de la imagen sea correcta y que la imagen esté en la ubicación especificada.
Si tienes alguna duda o quieres conocer más parámetros para tu imagen, como ser el ancho, el alto, el título para cuando trabajes accesibilidad, etc. Te recomiendo la mejor documentación de HTML de la web.
Importante: No Ser Demandado (Copyright) por una imagen
Evitar el copyright al insertar una imagen en HTML es crucial para respetar los derechos de autor y evitar posibles problemas legales. Aquí tienes algunas formas de hacerlo:
– Usa imágenes de dominio público o con licencia abierta
Utilizar imágenes que estén en el dominio público o que tengan una licencia abierta te permite utilizarlas libremente sin preocuparte por el copyright. Hay varios sitios web donde puedes encontrar este tipo de imágenes, como Unsplash, Pixabay, Pexels, entre otros. Siempre verifica las condiciones de uso de cada imagen antes de utilizarlas.
– Crea tus propias imágenes
Una forma segura de evitar problemas de copyright es creando tus propias imágenes. Si eres hábil con la fotografía o el diseño gráfico, puedes crear imágenes únicas y personalizadas para tu sitio web. Esto te garantiza que no estás utilizando material protegido por derechos de autor.
– Compra imágenes con licencia
Si necesitas utilizar imágenes específicas que no están disponibles de forma gratuita, considera comprar una licencia para usarlas. Muchos sitios web ofrecen imágenes de alta calidad a precios razonables con licencias que te permiten utilizarlas en tu proyecto.
– Utiliza imágenes con permiso explícito
Si tienes el permiso explícito del propietario de la imagen para utilizarla en tu sitio web, puedes hacerlo sin infringir el copyright. Asegúrate de obtener el permiso por escrito y de respetar cualquier condición que el propietario pueda tener, como dar crédito o limitar el uso de la imagen.
– Utiliza imágenes de stock con atribución adecuada
Algunos sitios de imágenes de stock ofrecen imágenes gratuitas con la condición de que se proporcione atribución al autor. Si decides utilizar este tipo de imágenes, asegúrate de incluir la atribución adecuada según las instrucciones del sitio web. Esto suele implicar incluir el nombre del autor y un enlace a la imagen original.
– Consulta las políticas de uso del sitio web
Si estás utilizando imágenes de un sitio web específico, asegúrate de revisar sus políticas de uso para conocer las condiciones bajo las cuales puedes utilizar las imágenes. Algunos sitios pueden tener restricciones o requisitos específicos que debes cumplir para utilizar su contenido de manera legal.
– Utiliza herramientas de búsqueda de imágenes con filtros de derechos de autor
Al buscar imágenes en línea, utiliza herramientas de búsqueda que te permitan filtrar los resultados por derechos de autor. Google Images, por ejemplo, te permite filtrar los resultados por «derechos de uso» para encontrar imágenes que puedas utilizar legalmente.
También puedes utilizar sitios que te permiten descargar imágenes que puedes usar sin problemas en internet. Existen muchos en internet, aquí te recomendamos algunas de ellas:
Consejos adicionales para insertar una imagen en HTML:
- Rutas relativas vs. Rutas absolutas: Puedes usar rutas relativas o absolutas para especificar la ubicación de tu imagen. Las rutas relativas son en relación con la ubicación del archivo HTML, mientras que las rutas absolutas especifican la ubicación completa desde la raíz del sistema de archivos.
- Nombres de archivo y sensibilidad a mayúsculas y minúsculas: Ten en cuenta que los sistemas de archivos son sensibles a mayúsculas y minúsculas, así que asegúrate de escribir correctamente el nombre de la carpeta y el de la imagen.
- Tamaño y optimización de la imagen: Para mejorar el rendimiento de tu sitio web, asegúrate de optimizar tus imágenes para la web. Puedes usar herramientas en línea o software de edición de imágenes para reducir el tamaño de archivo sin sacrificar demasiada calidad.
¡Y eso es todo! Ahora sabes cómo insertar una imagen en tu página web desde una carpeta en tu computadora. Experimenta con diferentes imágenes y diseños para hacer que tu página web sea aún más atractiva y visualmente impactante. ¡Diviértete creando!