En la sección anterior, usted aprendió acerca de los parientes de referencia de archivos. En esta sección, continuaremos la lección con algunas prácticas trabajo.

Navegue hasta el lugar de su disco duro donde guardó sus páginas HTML. Para nosotros, esto era una carpeta llamada HTML. Dentro de la carpeta HTML, crea dos más. Llama a una de las carpetas imágenes y las otras páginas . Si utilizas un sistema operativo Windows ordenador, la ventana del Explorador se verá así (Windows 7):

Folder structure for a web site

Haga doble clic en el archivo de texto de su plantilla y añada el siguiente código de imagen HTML:

Text editor showing image HTML code

Haz clic en File > Save As y guarda tu plantilla como un archivo HTML. Pero guarda en tu carpeta de nuevas páginas, y llámalo images.html . No te olvides de cambia el cuadro Guardar como tipo por Todos los archivos , si utilizas Windows:

Windows Explorer showing folder structure

Una vez que haya guardado su plantilla como una página web HTML, haga doble clic en ella para abrir en tu navegador. Deberías ver esto, si estás usando Firefox:

Firefox showing broken image reference

Sin embargo, si utiliza Internet Explorer, debería ver esto:

Internet Explorer showing broken image reference

En ambos casos, la imagen no se ha mostrado. Firefox muestra un archivo roto e Internet Explorer muestra un icono con una X roja. La razón es que el navegador no puede encontrar el archivo. Así que si ves alguno de esos iconos en el futuro, recuerda que el navegador te dice "Archivo de imagen no encontrado".

Para resolver este problema, tenemos algunos archivos para usted. El archivo que necesita está en la carpeta extra_files que venía con este curso. (Si no tienes los archivos extra aún, la ubicación de la descarga está aquí, bajo el título Web Diseño - Nuevo Curso : Descargue el Archivos extra necesarios para este curso (No necesitas las descargas para el curso antiguo.)

Haz doble clic en la carpeta extra_files , y luego haz doble clic en york_images . Copia el archivo york_minster.jpg y pégalo en tu HTML/páginas carpeta. La carpeta de páginas se verá así:

Windows Explorer showing folder structure

La imagen y la página web están en la misma carpeta, la carpeta de páginas . Fíjese en el tamaño del archivo de la imagen - 747 kilobytes. Podría ser un poco grande en la internet, y querríamos investigar esto.

Una vez que hayas copiado la imagen, actualiza tu página HTML en tu navegador. Debería ver aparecer la imagen:

An image showing in a browser

Si no ves una imagen, pero aún tienes el "Archivo de imagen no encontrado" asegúrate de que la parte SRC del HTML es correcta:

SRC="york_minster.jpg"

Fíjese en la ortografía en minúsculas y en las dos comillas dobles. Un error común es deletrear SRC como SCR. Asegúrate, también, de que la imagen y la página web son en la misma carpeta.

Una vez que se muestre la imagen en el navegador, crea otra carpeta dentro la carpeta de páginas . Llama a esta york_images . Tu ventana del explorador debería entonces verse así:

Windows Explorer showing folder structure

Ahora mueve la imagen york_minster.jpg a la carpeta york_images . Tu ventana del explorador tendrá entonces este aspecto:

Windows Explorer showing folder structure

Recargue su página web en su navegador. Deberías ver la "Imagen no encontrada" de nuevo.

Vuelve a tu código HTML y cambia la línea del IMG a esto:

img src="https://www.homeandlearn.co.uk/WD/york_images/york_minster.jpg">

Así que hemos añadido el nombre de la carpeta, y luego una barra oblicua. Esto denota una carpeta en el mismo directorio que la página HTML. Después de la barra oblicua, tenemos la nombre de la imagen. Lo que estamos diciendo aquí es, "En la misma carpeta que el images.html página, busca una carpeta llamada york_images . En esta carpeta hay un imagen llamada york_minster.jpg ".

Guarda tu trabajo y recarga la página web images.html en tu navegador. Deberías ver la imagen reaparecer.

Referenciación avanzada de archivos

Anteriormente, creaste una carpeta de imágenes y una carpeta de páginas. Esta:

Folder structure for a web site

Por el bien de la limpieza, esta es una buena idea: puedes tener la mayoría de tus páginas html en la carpeta de páginas, y todas tus fotos en la carpeta de imágenes . (Nosotros decir la mayoría de sus páginas html porque hay una excepción llamada index.html página. Aprenderás sobre esto un poco más tarde).

Una dificultad de este enfoque es que la referencia a los archivos se hace mucho más difícil. Supongamos que movimos la carpeta york_images dentro de la carpeta images . Si lo hiciéramos, el código que escribimos antes ya no funcionaría. Esta línea:

img src="https://www.homeandlearn.co.uk/WD/york_images/york_minster.jpg">

Eso es porque ya no habría una carpeta llamada york_images en la misma ubicación que el archivo images.html . La imagen es ahora una carpeta arriba de la carpeta de páginas . Por lo tanto, el código sería éste:

img src="https://www.homeandlearn.co.uk/WD/../images/york_images/york_minster.jpg">

Después de SRC ahora tenemos dos puntos y una barra inclinada hacia adelante. Dos puntos y una barra adelante La barra significa "sube una carpeta desde donde estás". (Recuerda, este es todo relativo a la página images.html , donde está el código). El navegador buscará entonces una carpeta llamada imágenes . Buscará esta carpeta para uno llamado york_images . Entonces buscará la imagen especificada.

No se preocupe si todo eso no está muy claro: mantendremos las imágenes y las carpetas de imágenes ...juntos, sólo por la simplicidad. Pero si todavía no estás seguro sobre el archivo de referencia, hemos producido un video para usted aquí: Archivo Video de referencia.

En la próxima lección, aprenderás sobre los Atributos de la Imagen.

Insertar imágenes parte 1 | Atributos de la imagen