Cualquier imagen que desee enlazar en el HTML de su sitio web debe ser cargada primero en el mismo lugar al que envía el HTML para la página web, ya sea que el sitio esté alojado en un servidor web al que llegue por FTP o que utilice un servicio de alojamiento web. Si utiliza un servicio de alojamiento web, probablemente utilice un formulario de carga proporcionado por el servicio. Estos formularios se encuentran normalmente en la sección de administración de su cuenta de hosting.
Subir su imagen al servicio de hosting es sólo el primer paso. Luego necesitas añadir una etiqueta en el HTML para identificarlo.
Subir imágenes al mismo directorio que el 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:
Asumiendo que está subiendo una foto de la luna con el nombre «lunar.jpg», la etiqueta de la imagen toma la siguiente forma:
La altura y el ancho son opcionales, pero se recomiendan. Tenga en cuenta que la etiqueta de imagen no requiere una etiqueta de cierre.
Si está enlazando a una imagen en otro documento, utilice etiquetas de anclaje y anide la etiqueta de imagen en su interior.
Carga de imágenes en un subdirectorio
Es más común almacenar imágenes en un subdirectorio, normalmente llamado Images. Para apuntar a las imágenes de 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/. Fíjese en la barra al final. Así es como se suele indicar la raíz de un directorio. Los subdirectorios incluyen esa barra oblicua para mostrar dónde se asientan en la estructura de directorios. El sitio de ejemplo de MyWebpage podría tener la estructura:
http://MyWebpage.com/ - el directorio raízhttp://MyWebpage.com/products/ - el directorio de productoshttp://MyWebpage.com/products/documentation/ - el directorio de documentación bajo el directorio de productoshttp://MyWebpage.com/images/ - el directorio de imágenes
>.
En este caso, cuando usted señala su imagen en el directorio de imágenes, usted escribe:
Esto se llama el camino absoluto a su imagen.
Problemas comunes con las imágenes que no se muestran
Obtener imágenes para que aparezcan en su página web puede ser un reto al principio. Las dos razones más comunes son que la imagen no fue cargada donde el HTML está apuntando, o que el HTML está escrito incorrectamente.
Lo primero que hay que 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 gestión que puedes utilizar para ver dónde has subido tus imágenes. Después de que piense que tiene la URL correcta para su imagen, escríbala en su navegador. Si la imagen aparece, entonces usted tiene la ubicación correcta.
A continuación, compruebe que su HTML está apuntando a esa imagen. La forma más fácil de hacerlo es pegar la 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 un archivo C: o : Éstos aparecerán cuando pruebe su página web en su propio ordenador, pero todos los que visiten su sitio verán una imagen rota. Esto se debe a que C: apunta a una ubicación en su disco duro. Como la imagen está en su disco duro, se muestra cuando usted la ve.
