Así que tienes tu archivo de imagen, ya sea un archivo GIF o un JPEG. ¿Cómo lo consigues en una página web? Lo haces con la etiqueta IMG en HTML. La etiqueta IMG básica tiene el aspecto como esto:

img src="https://www.homeandlearn.co.uk/WD/some_image.gif">

No hay etiquetas de cierre para la etiqueta IMG. Así que no hagas esto:

img src="https://www.homeandlearn.co.uk/WD/some_image.gif"/IMG;

Entre un par de corchetes angulares, escribes las letras IMG (abreviatura de imagen, por supuesto). Después de un espacio, escribes SRC. Esto significa Fuente y significa el la ubicación de su imagen. Después de un signo igual, escribes el nombre de tu imagen entre un par de comillas dobles.

Sin embargo, es esencial que la parte del SRC sea correcta. Para hacerlo, necesitas para saber sobre la referencia de archivos absolutos versus relativos.

Referencia absoluta

Echa un vistazo a esta referencia de archivo:

C:N-Documentos de los usuariosN-HTML_imagen.gif

Empezando por el lado derecho, esto dice que hay una imagen llamada (etiqueta_13) alguna_imagen.gif . Esto ha sido guardado en una carpeta llamada HTML. El HTML está en la carpeta de Documentos. La carpeta de Documentos está en una carpeta llamada Propietario. La carpeta del Propietario está en una carpeta llamada Usuarios, que está en la unidad C. Esta es una referencia de archivo absoluta. Apunta a una ubicación específica en su C drive.

Sin embargo, esto no sería bueno en Internet. Aunque tendrás todo ...estas carpetas en tu disco C, alguien más que vea tu página web no lo hará. Pero el navegador de esa persona intentará buscar todas estas carpetas. Por supuesto que no ser capaz de encontrarlos, porque todas las carpetas están en tu ordenador, y no de ellos. Así que la imagen que especificó para usar en su página web no se mostrará a nadie más que a ti.

Otro ejemplo de una referencia absoluta es este:

http://www.homeandlearn.co.uk

Es una referencia absoluta a una página web en Internet. Perfectamente bien, y verás cómo añadir enlaces a páginas web más tarde. Pero las referencias absolutas y no es muy práctico cuando se trata de tus propias imágenes y tus propias páginas html. Las referencias relativas son mucho mejores.

Referencia relativa

Con la Referencia Relativa, el punto de partida no es tu propio ordenador, sino el archivo de imagen o el propio archivo HTML. Con la Referencia Absoluta, el navegador inicia la búsqueda de la imagen en el lado izquierdo:

Insertar imágenes en una página web

Con la Referencia Relativa, el navegador inicia la búsqueda de la imagen en el a la derecha:

Insertar imágenes en una página web

Así que con una referencia relativa, el navegador comienza a buscar un archivo llamado "Some_image.gif". Si sólo pones esto:

img src="https://www.homeandlearn.co.uk/WD/some_image.gif">

el navegador buscará el archivo en la misma carpeta donde guardaste tu página web. Si está ahí, no hay problema; el navegador mostrará la imagen. Usted no necesitan añadir nada más, porque el navegador dejará de buscar cuando la imagen ha sido encontrada. De hecho, el ÚNICO lugar donde el navegador buscará es en la misma carpeta donde guardaste tu página web.

Así que con la Referencia Relativa, si pones todas tus imágenes y páginas web en el misma carpeta, el navegador sabrá dónde encontrar todo. Y cuando estés pidiendo al navegador que muestre una imagen u otra página web, sólo necesitas el nombre de la imagen o página web. No necesitas hacer esto:

C:N-Documentos de los usuariosN-HTML_imagen.gif"N-

Puedes hacer esto:

img src="https://www.homeandlearn.co.uk/WD/some_image.gif">

En un nivel profesional, sin embargo, tirar todo en una carpeta es mal visto... sobre. Si creara una carpeta llamada "web_site" se esperaría que para crear otras carpetas dentro de esta. Una carpeta llamada "imágenes" para almacenar todos sus archivos de imagen; una carpeta llamada "scripts" para almacenar cualquier código externo; y algunas otras carpetas también.

Si haces eso, la Referencia Relativa se vuelve un poco más difícil. Por ejemplo, Supongamos que tienes una página web llamada index.html . Usted ha colocado esta web página dentro de una carpeta llamada web_site . Has creado otra carpeta dentro de la carpeta de tu sitio web. Has llamado a esta nueva carpeta imágenes . Así que tu estructura de archivos y carpetas tiene este aspecto:

Insertar imágenes en una página web

Por supuesto, habrá colocado todas sus imágenes en la carpeta de imágenes. Ahora, si quieres una de esas imágenes en la página index.html, no podrías hacer esto:

img src="https://www.homeandlearn.co.uk/WD/some_image.gif">

Si lo intentara, la imagen no se mostraría. Eso es porque no le has dicho a el navegador sobre esa carpeta llamada imágenes. Tendrías que hacer esto:

img src="https://www.homeandlearn.co.uk/WD/images/some_image.gif">

La barra inclinada hacia adelante significa "buscar una carpeta llamada... que está en el la misma carpeta que el archivo actual". En este caso, busque una carpeta llamada "imágenes". (El archivo actual es index.html, que es donde quieres la imagen que aparece.)

Si quisieras señalar una imagen que estuviera fuera del "web_site" la vida se volvió aún más difícil. (Verás cómo resolver esto más tarde). Pero como un principiante, si mantienes todo en la misma carpeta - imágenes y páginas web - entonces este tipo de referencia relativa debería funcionar:

img src="https://www.homeandlearn.co.uk/WD/some_image.gif">

En caso de que todas estas referencias de archivos no sean muy claras, haremos algunas prácticas trabajar en la siguiente sección. (Hemos producido un video sobre la referencia de archivos, aquí: Video de referencia de archivos.)

| Insertar imágenes parte 2