| Voglio fare la mia Prima Pagina Web! Quarta Lezione

> Parliamo di links.

> E' molto semplice. Faremo un link a Yahoo.
> Comincia con questo...

> `<BODY BGCOLOR="#FFFFFF">
> Go to Yahoo!
> </BODY>
> `

> Go to Yahoo!

> Poi aggiungi un paio di tags ancora (anchor).

> `<BODY BGCOLOR="#FFFFFF">
> Go to <A>Yahoo!</A>
> </BODY>
> `

> Go to Yahoo!

> Aggiungi l' URL ed è fatto! URL significa Universal Resource Locator. E' un termine un po' altisonante, che significa: indirizzo.

> `<BODY BGCOLOR="#FFFFFF">
> Go to <A HREF="http://www.yahoo.com/">Yahoo!</A>
> </BODY>
> `

> Go to Yahoo!

> Andiamo avanti.

> `<BODY BGCOLOR="#FFFFFF">
> Go to Netscape!
> </BODY>
> `

> Go to Netscape!

> `<BODY BGCOLOR="#FFFFFF">
> Go to <A HREF="http://home.netscape.com/">Netscape!</A>
> </BODY>
> `

> Go to Netscape!

> Un link ad un indirizzo email funziona nello stesso modo. Possiamo usare un indirizzo email come se fosse l'indirizzo di una pagina web.

> `<BODY BGCOLOR="#FFFFFF">
> Send me <A HREF="mailto:forrest@bubbagump.com">Mail!</A>
> </BODY>
> `

> Send me Mail!

> Possiamo inoltre usare un'immagine come link, se vogliamo. Usando il link d'esempio 'Go to Netscape!' possiamo semplicemente sostiture la parola `Netscape!` con il tag `<IMG>`

> `<BODY BGCOLOR="#FFFFFF">
> Go to <A HREF="http://home.netscape.com/"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68></A>
> </BODY>
> `

> Go to

> Una domanda frequente è questa: come posso togliere il bordo attorno all'immagine quando è un link? Semplice...

> `<BODY BGCOLOR="#FFFFFF">
> Go to <A HREF="http://home.netscape.com/"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68 BORDER=0></A>
> </BODY>
> `

> Go to

> Un'altra cosa: è perfettamente accettabile inserire links ad altre pagine senza chiederlo. I links sono ciò che hanno fatto il Web.

> Quando inserisci immagini nella tua pagina, ricorda che contengono molti dati e spesso possono essere molto lente da scaricare. Un modo per ridurre la grandezza (intendo Kb) è di ridurne le dimensioni. Ridurre grandezza e larghezza di un'immagine della metà però riduce la gradezza solo di 1/4 in Kb (in questo caso si intende ridurre "materialmente" l'immagine, non cambiare semplicemente le dimensioni di visualizzazione, come nell'esempio della lezione precedente: in quel caso infatti le dimensioni in Kb dell'immagine rimangono le stesse, viene modificata solo la visualizzazione - NdT).
> Si può allora ridurre il numero di colori. Alcuni esempi:

> Dimensione 310 x 304 Numero di colori - 238 Grandezza - 69 Kb
> Dimensione 207 x 203 Numero di colori- 238 Grandezza- 34 Kb | Dimensioni 207 x 203 Numero di colori - 48 Grandezza - 19 Kb

> Tutte le immagini sono state modificate con Paint Shop Pro.

> Sicuramente la prima immagine è di qualità superiore, però ... se la tua pagina impiega tantissimo tempo a scaricarsi, i tuoi visitatori probabilmente l'abbandoneranno e non vedranno assolutamente nulla.

> Gif Wizard è uno strumento davvero utile di Raspberry Hill Publishing che vi può aiutare a ridurre la grandezza delle vostre immagini. (Nota: GIF Wizard non fa parte di questo tutorial. E' un programma che risiede su un computer di Raspberry Hill Publishing. Questa è solamente un'interfaccia e devi essere on line per usarla).

> Step 1 |  | In un modo o nell'altro hanno bisogno di avere la tua immagine. Hai due possibilità... Prima possibilità: puoi scrivere l'url dell'immagine che risiede su un server web (l'indirizzo dell'immagine... non l'URL della pagina in cui si trova). - OR - Seconda possibilità: puoi inviare loro l'immagine direttamente dall'hard disk, ma questa opzione non e' supportata da MS Internet Explorer
> Step 2 A & B entrambi opzionali |  | A) Puoi mettere lo sfondo appropriato. E' preselezionato il bianco. "ND" sono i colori non sfumati (non-dithering). Se non sei sicuro non scrivere nulla. Red Green Blu B) La tua immagine può essere ridimensionata se vuoi. Inserisci le nuove dimensioni espresse in pixle o in percentuale. Lascia bianco per non cambiare le dimensioni. Width= Height=
> Step 3 |  | Avrai come risultato diverse versioni dell'immagine in diverse gradazioni di "ridimensionamento".

> Un'altra possibilità che puoi utilizzare per offrire un numero elevato di immagini è quella di fornire delle icone (thumbnails) che puntano a versioni più grandi di ogni singola immagine. Ad esempio in questo modo se volessi mostrare tre bellissime immagini delle mie macchine.

> Clicca sull'icona per vedere l'immagine.

> La prima cosa di cui hai bisogno per farlo è avviare un programma che permetta di processare le immagini e ridurne le dimensioni. Questo può aiutarti anche nel ridurre il numero di colori.

> Comincia con il tag `<IMG>`.

> `<BODY BGCOLOR="#FFFFFF">
> <IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60>
> </BODY>
> `

> Aggiungi il tag `<A>`.

> `<BODY BGCOLOR="#FFFFFF">
> <A><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60><A>
> </BODY>
> `

> Infine aggiungi l'URL ed è fatta!

> `<BODY BGCOLOR="#FFFFFF">
> <A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60><A>
> </BODY>
> `

> Se vuoi puoi togliere la cornice, anche se puoi lasciarla per far capire ai tuoi visitatori che si tratta di un link.

> `<BODY BGCOLOR="#FFFFFF">
> <A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60 BORDER=0><A>
> </BODY>
> `

> Un altro tipo di link consente di collegare punto specifico di una pagina. Clicca qui per essere trasferito automaticamente dove si parla di URLs.

> Ecco come fare. Il primo passo è stabilire quale punto della pagina linkare e inserirla tra i tag `<A>`.

> `<A>Aggiungi</A> l'indirizzo ed è fatto!`

> Ora, diamo a questo punto un `NOME (NAME)`.

> `<A NAME="upabit">Aggiungi</A> l'indirizzo ed è fatto!`

> Quello che hai fatto è marcare il punto. Ora deve essere assegnato il riferimento.

> Cominciamo a costruire il link.

> `Clicca <A>qui</A> per essere trasportato magicamente...`

> Aggiungi il documento di riferimento...

> `Clicca <A HREF="lesson04.html">qui</A> per essere trasportato magicamente...`

> E infine, aggiungi l'anchor `NAME` in questo modo...

> `Clicca <A HREF="lesson04.html#upabit">qui</A> per essere magicamente trasportato...`

> Ed è fatto.

> `<--BACK` `NEXT-->`

Introduzione | Lezione 1 | Lezione 2 | Lezione 3 | Lezione 4 | Lezione 5 | Indice