Cualquier imagen que desee vincular en el sitio web HTML primero debe cargarse en el mismo lugar donde envía el HTML para la página web, ya sea que el sitio esté alojado en un servidor web al que accede por FTP o utiliza un servicio de alojamiento web. Si utiliza un servicio de alojamiento web, probablemente utilice un formulario de carga proporcionado por el servicio. Por lo general, estos formularios se encuentran en la sección de administración de su cuenta de alojamiento.
Subir su imagen al servicio de alojamiento es solo el primer paso. Luego, debe agregar una etiqueta en el HTML para identificarlo.
Carga de imágenes en el mismo directorio que HTML
Sus fotos pueden estar ubicadas en el mismo directorio que el HTML. Si ese es el caso:
- Sube una imagen a la raíz de tu sitio web.
- Agregue una etiqueta de imagen en su HTML para apuntar a la imagen.
- Sube el archivo HTML a la raíz de tu sitio web.
- Pruebe el archivo abriendo la página en su navegador web.
La etiqueta de la imagen tiene el siguiente formato:
Suponiendo que está subiendo una foto de la luna con el nombre "lunar.jpg", la etiqueta de la imagen tiene la siguiente forma:
La altura y el ancho son opcionales pero recomendados. Estos valores predeterminados están en píxeles, pero también pueden expresarse como porcentajes:
La etiqueta de imagen no requiere una etiqueta de cierre.
Si está vinculando a una imagen en otro documento, use etiquetas de anclaje y anide la etiqueta de la imagen dentro.
Carga de imágenes en un subdirectorio
Es más común almacenar imágenes en un subdirectorio, generalmente llamado Imagenes. Para apuntar a imágenes en ese directorio, necesita saber dónde está en relación con la raíz de su sitio web.
La raíz de su sitio web es donde se muestra la URL, sin ningún directorio al final. Por ejemplo, para un sitio web llamado "MyWebpage.com", la raíz sigue este formulario: http://MyWebpage.com/. Observe la barra al final. Así es como se suele indicar la raíz de un directorio. Los subdirectorios incluyen esa barra para mostrar dónde se encuentran en la estructura del directorio. El sitio de ejemplo de MyWebpage puede tener la estructura:
http://MyWebpage.com/ - el directorio raíz
http://MyWebpage.com/products/ - el directorio de productos
http://MyWebpage.com/products/documentation/ - el directorio de documentación bajo el directorio de productos
http://MyWebpage.com/images/ - el directorio de imágenes
En este caso, cuando apuntas a tu imagen en el directorio de imágenes, escribes:
Esto se llama camino absoluto a tu imagen.
Problemas comunes con imágenes que no se muestran
Hacer que las imágenes aparezcan en su página web puede ser un desafío al principio. Las dos razones más comunes son que la imagen no se cargó donde apunta el HTML o que el HTML está escrito incorrectamente.
Lo primero que debe hacer es ver si puede encontrar su imagen en línea. La mayoría de los proveedores de alojamiento tienen algún tipo de herramienta de administración que puede usar para ver dónde cargó sus imágenes. Una vez que crea que tiene la URL correcta para su imagen, escríbala en su navegador. Si aparece la imagen, entonces tienes la ubicación correcta.
Luego, verifique que su HTML apunte a esa imagen. La forma más sencilla de hacerlo es pegar el URL de la imagen que acaba de probar en el atributo SRC. Vuelva a cargar la página y pruebe.
El atributo SRC de su etiqueta de imagen nunca debe comenzar con C:\ o expediente: Aparecerá que funcionan cuando pruebes tu página web en tu propia computadora, pero todos los que visiten tu sitio verán una imagen rota. Esto se debe a que C: \ apunta a una ubicación en tu disco duro. Dado que la imagen está en su disco duro, se muestra cuando la ve, pero no para nadie más.