Colegio  

PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 
PRÁCTICA Nº 9. Vínculos de descarga

Vamos a trabajar con la página jueves.html. Lo que vamos a hacer es introducir

un texto que describa en un par de líneas lo que hiciste ese día e introducir una tabla
2x3 donde vamos a colocar algunas fotos de ese día:

En cada una de las celdas de la tabla introduciremos una imagen, pero, para
que la página no “pese” demasiado, es decir, para que los archivos de la página no
sean muy grandes y tarde mucho en cargarse, editamos las imágenes con
Photoshop/GIMP de la siguiente manera:

1. Abrimos la imagen
2. Con la herramienta TEXTO escribimos el lugar de la foto:

1
 
Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 
3. Guardamos la imagen para web: archivo → Guardar para web
4. En la pantalla que nos aparece, la hacemos más pequeña bajando el
porcentaje, de tal manera que la anchura de la misma (W) sea 200 px o menos, así
“cabrá” en la tabla que acabamos de crear (para todas las fotos lo mismo): 

5. Guardamos la imagen y la insertamos en nuestra página web.

Hacemos lo mismo para todas las fotos, nos debe quedar algo así:

2
 
Colegio  
PRÁCTICAS CON HTML Y Nvu 
San Agustín 
 
Como las fotos que hemos insertado son de poca calidad (las hemos bajado el
tamaño que ocupan), vamos a insertar un vínculo de descarga. Un vínculo de descarga
es cuando al pinchar sobre el texto del vínculo el navegador web no sabe mostrar el
archivo al que se refiere el vínculo y entonces aparece una ventana donde te pregunta
qué quieres hacer con dicho archivo, abrirlo con otro programa o guardarlo.
¿Qué archivo queremos que esté en el vínculo de descarga? Pues las fotos
ORIGINALES (sin reducir el tamaño) y algunas más (todas las que queramos)
comprimidas en un mismo archivo. Es decir, seleccionamos las imágenes que
queramos, las comprimimos y ese archivo resultante es el que queremos que se
descargue al pinchar en un texto en la página web.
Para insertar un vínculo de descarga lo único que hay que hacer es copiar el
siguiente código HTML en el lugar deseado dentro de la página web. Yo lo he
insertado DEBAJO de la tabla:

<a  title="Archivo  con  todas  las  fotos  del  día" 

href="fotos.rar">Descargar todas las fotos</a> 

Acaba la tabla con las imágenes 

En el caso mostrado, el archivo creado se tiene que llamar obligatoriamente

fotos.rar.
Subimos al servidor, tanto jueves.html, como las fotos en pequeño, como el
archivo fotos.rar.

3