-
mariuskunk.
User deleted
Non sarebbe bello poter aggiungere una foto di Tim Bernes-Lee, l'inventore dell'HTML, proprio al centro della tua pagina?
Suona come un compito difficile...
Forse, ma invece è decisamente facile farlo. Tutto quello che ti serve è un elemento:
Esempio 1:CODICE<img src="tim.jpg" alt="Tim" />
sul tuo browser apparirà così:
Tutto quello che devi fare è per prima cosa dire al tuo browser che vuoi inserire un'immagine (img) e dove trovarla (src, sta per "source", cioè sorgente). Hai la foto?
Nota come l'elemento img venga aperto e chiuso nello stesso tag. Come il tag
, non è legato a nessun pezzo di testo.
"david.jpg" è il nome del file immagine che vuoi inserire nella tua pagina. ".jpg" è il tipo di file dell'immagine. Proprio come l'estensione ".htm" mostra che quel file è un documento HTML,".jpg" dice al browser che quel file è un'immagine. Ci sono tre tipi diversi di file immagine che possono essere inseriti nelle tue pagine:
GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
Le immagini GIF generalmente sono migliori per i grafici e i disegni, mentre le immaginni JPEG sono migliori per le fotografie. Questo per due ragioni principali: primo, le immagini GIF possono avere solo 256 colori, mentre le immagini JPEG sono formate da milioni di colori e secondo, il formato GIF è migliore per comprimere immagini semplici, mentre il formato JPEG è stato ottimizzato per immagini più complesse. Migliore è la compressione, più piccola sarà la dimensione del file immagine,e più veloce il caricamento sulla tua pagina. Come probabilmente sai già dall'esperienza, le pagine "pesanti" senza motivazione possono annoiare pesantemente un visitatore.
In passato i formati GIF e JPEG sono stati i due formati immagine dominanti. Negli ultimi anni il formato PNG è diventato sempre più popolare (soprattutto a spese del formato GIF). Il formato PNG è fatto in modo da avere il meglio da entrambi i formati JPEG e GIF: milioni di colori e una compressione efficace.
Da dove prendo le mie immagini?
Per fare le tue immagini ti serve un programma apposito per l'editing delle immagini. Un programma di editing delle immagini è uno degli strumenti più importanti per creare dei siti web bellissimi.
Sfortunatamente i programmi per l'editing delle immagini non sono compresi in Windows o negli altri sistemi operativi. Quindi dovresti considerare il fatto di investire in Paint Shop Pro, o PhotoShop o Macromedia Fireworks, che sono tre dei migliori programmi per immagini oggi sul mercato.
In ogni caso, come abbiamo già detto, non è necessatio comprare programmi costosi per terminare questo tutorial. Per il momento puoi scaricarti un eccellente programma per l'editing di immagini, IfranView , detto freeware, cioè gratuito.
O puoi prendere a prestito le immagini scaricandole da altri siti web. Ma per favore stai attento a non violare i diritti di copyrights quando scarichi le immagini. Tuttavia è bene sapere come si fa per scaricare delle immagini, quindi guarda qui come farlo:
Con il tasto destro del mouse posizionati su una qualsiasi immagine su Internet.
Scegli "Salva immagine come ..." dalla tendina di menu che ti appare.
Scegli una posizione sul tuo computer dove mettere l'immagine e premi "Salva".
Questo è tutto quello che mi serve sapere sulle immagini?
Ci sono un altro paio di cosette che dovresti sapere sulle immagini.
Primo, puoi inserire facilmente le immagini posizionate su un'altra cartella, o anche immagini posizioante su un altro sito web:
Esempio 2:CODICE<img src="images/logo.png" />
Esempio 3:CODICE<img src="http://www.html.net/logo.png" />
Secondo, le immagini posso avere collegamenti ipertestuali (link):
Esempio 4:CODICE<a href="http://www.html.net">
<img src="logo.png" /></a>
Ci sono altri attributi che dovrei conoscere?
Devi sempre usare l'attributo src, che dice al browser dove sono posizioante le immagini. Oltre a questo ci sono altri attributi che potrbbero essere utili quando inserisci le immagini.
L'attributo alt viene usato per fornire una descrizione alternativa di una immagine nel caso in cui, per qualche ragione, l'immagine non viene visualizzata all'utente. Questo attributo è particolarmente utile per utenti con disabilità visive, o se la pagina si carica molto lentamente. Pertanto, usa sempre l'attributoo alt:
Esempio 5:CODICE<img src="logo.gif" alt="HTML.net logo" />
Alcuni browser mostrano il testo dell'attributo alt in una piccola box di pop-up quando si posiziona ilc ursore del mouse sopra l'immagine. Per favore nota che l'uso dell'attributo alt ha lo scopo odi fornire una descrizione alternativa dell'immagine. Non dovrebbe quindi essere usato per creare messaggi speciali di pop-up dato che i non-vedenti sentiranno il messaggio senza sapere niente dell'immagine.
L'attributo title può essere usato per aggiungere informazioni all'immagine:
Esempio 6:CODICE<img src="logo.gif" title="Impara l'HTML su HTML.net" />
Altri due attributi importanti sono width e height:
Esempio 7:CODICE<img src="logo.png" width="141" height="32" />
Gli attributi width e height possono essere usati per impostare l'altezza e la larghezza di una immagine. Per impostare l'altezza e la larghezza viene usato un valore in pixel. I pixel sono l'unità di misura utilizzata per misurare la risoluzione degli schermi. (Gli schermi più comuni hanno una risoluzione di 1024x768 pixel). A differenza dei centimetri, i pixel sono unità di misura relative che dipendono dalla risoluzione dello schermo. Ad un utente con uno schermo ad alta risoluzione, 25 pixel possono corrispondere ad 1 centimetro, mentre gli stessi 25 pixel su uno schermo a bassa risoluzione possono corrispondere sullo schermo a 1.5 centimetri.
Se non vengono impostate l'altezza e la larghezza, l'immagine verrà inserita con le sue dimensioni originali. Modificando altezza e larghezza, invece, è possibile manipolare la dimensione della stessa immagine:
Esempio 8:CODICE<img src="logo.gif" width="32" height="32" />
Comunque vale la pena ricordare che la dimensione originale dell'immagine, in kilobyte, rimarrà la stessa. Quindi ci vorrà lo stesso tempo di prima per caricare l'immagine, anche se questa volta sullo schermo appare più piccola. Quindi, non dovresti mai diminuire la dimensione dell'immagine usando gli attributi width e height. Dovresti invece sempre ridimensionare l'immagine direttamente da un programma per l'editing di immagini, in modo da rendere le tue pagine più leggere e veloci.
Detto questo è ancora una buona idea usare gli attributi width e height perchè il browser sarà in grado di sapere lo spazio che servirà all'immagine nella pagina finale prima che sia cmpletamente scaricata. Questo permette al tuo browser di predisporre esattamente la pagina nella maniera più veloce.
.
Lezione 9: Immagini |
