Lezione 4

Editors
Lezione 1
Lezione 2
Lezione 3
Lezione 4
Lezione 5
Tabelle: Introduzione
Tabelle 1
Tabelle 2
Tabelle 3
Tabelle 4
Tabelle 5
Tabelle 6
Tabelle 7
E il gioco é fatto!
I colori di Netscape
I tag

Html

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.

[ Editors ] [ Lezione 1 ] [ Lezione 2 ] [ Lezione 3 ] [ Lezione 4 ] [ Lezione 5 ] [ Tabelle: Introduzione ] [ Tabelle 1 ] [ Tabelle 2 ] [ Tabelle 3 ] [ Tabelle 4 ] [ Tabelle 5 ] [ Tabelle 6 ] [ Tabelle 7 ] [ E il gioco é fatto! ] [ I colori di Netscape ] [ I tag ]

torna a Lezioni di HTML