Author Message
admin

Administrators

Online status

92 posts

#51   10-12-11 18:13 GMT+1 hour      
Una home page di un sito vale molti soldi.
Più pubblicità può contenere e comunicare più alto è il guadagno. Anche una piccola porzione del video ha grande valore economico.
La pagina deve avere molte informazioni, al contrario una pagina con grandi immagini viene a noia, è sconveniente economicamente e informa poco. Se osserviamo le home pace di www.yahoo.it www.tiscali.it per esempio, si vedono immagini miniature, brevi testi delle notizie e curiosità e, spesso, la loro rotazione ciclica. Questo è proprio per aumentare il numero delle informazioni e della pubblicità collegata ad esse. Se non bastasse, ci sono ulteriori finestre (popup) che si aprono sopra la pagina principale, rendendo ancora più stressante la navigazione. E' certo una contraddizione tra la necessità di informare e la motivazione commerciale.

Noi ci limitiamo ad imparare come si mette il link a una immagine di medio formato da una miniatura [thumbnail].

Esercizio: creazione di un link a una immagine media dalla sua miniatura.

I dati sono la miniatura 1-2a11.jpg e l'immagine grande 1-2a11g.jpg.

Per prima cosa salviamo le immagini prendendole dal sesto riquadro del post
http://www.tuscus.com/myblog/forums.php?m=posts&q=26

e le salviamo nella nostra sotto-cartella(directory) [images] della cartella (directory)[html].

il link alla immagine grossa sarà <a href="images/1-2a11g.jpg"></a>e l'immagine link sarà <img src="images/1-2a11.jpg">
mettendo il listato nel giusto ordine avremo:

<a href="images/1-2a11g.jpg"><img src="images/1-2a11.jpg"></a>

salviamo la nostra pagina col nome [linkthumb.htm] apriamo nel browser e vediamo se funziona. Poi aggiungiamo nel tag della miniatura l'utilità di un messaggio di spiegazione con la funzione [alt] e sistemiamo al centro. Avremo così:

<center><p><a href="images/1-2a11g.jpg" ><img src="images/1-2a11.jpg" alt="guarda l'immagine
grande della classe seconda A"></a></p></center>

This post was edited by admin (11-12-11 22:36 GMT+1 hour, ago)
admin

Administrators

Online status

92 posts

#169   12-02-13 03:22 GMT+1 hour      
Esercizio due:
Esercizio su immagini e miniature



In questo esercizio HTML vedremo come usare i tag giusti per collegare l'apertura
di una immagine grande partendo da una sua miniatura. La miniatura dell'immagine grande non è una vera e propria
immagine miniatura (thumbnail) ma la riduzione dell'immagine
vera in miniatura mediante solo codice HTML. Questi tag sono utili anche quando dobbiamo ridurre
una immagine a dimensioni di larghezza obligata.

1)creare il link all'immagine grande

useremo il codice HTML seguente:

<a href="http://tongiorgi.scuole.pisa.it/images/stories/p1020913.jpg"
title="clicca per ingrandire alle sue vere dimensioni"> </a>






2)inseriremo il codice per la miniatura della stessa immagine che sarà l'immagine
su cui sarà attivato il link e sarà:


<img src="http://tongiorgi.scuole.pisa.it/images/stories/p1020913.jpg" width="320" height="240">


dove width="320" height="240" è l'istruzione per la riduzione delle dimensioni




3)il codice intero finale sarà:

<a href="http://tongiorgi.scuole.pisa.it/images/stories/p1020913.jpg" title="clicca per
ingrandire alle sue vere dimensioni"><img src="http://tongiorgi.scuole.pisa.it/images/stories/p1020913.jpg" width="320" height="240"></a>

Può essere usato come tag provvisorio se non disponiamo al momento della miniatura,
ma ci possono essere dei rallentamenti nello scaricamento dell'immagine seppure ridotta.


Ecco qui sotto come usare una miniatura vera.


1)Scrivere il link all'immagine grande

<a href="http://tongiorgi.scuole.pisa.it/images/stories/p1020913.jpg" title="clicca per ingrandire alle sue vere dimensioni">

</a>


2)scrivere il tag di caricamento dell'immagine:
<img src=”http://www.tuscus.com/myblog/miniatura2013.jpg”>


3) immettere il tag di (2) nel precedente




<a href="http://tongiorgi.scuole.pisa.it/images/stories/p1020913.jpg"
title="clicca per ingrandire alle sue vere dimensioni"> <img src=”http://www.tuscus.com/myblog/miniatura2013.jpg”></a>
Paolo Bacciottini--mail to Webkeeper