HTML - Inserire Imagini

Immagini

Tutto quello che ti serve è un elemento:

Esempio 1:

        
        <img src="nome-file.jpg" alt="nome-file" />

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).

Nota come l'elemento img venga aperto e chiuso nello stesso tag. Come il tag <br />, non è legato a nessun pezzo di testo.
"nome-file.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.

________________________________________________________________________
Approfondimento 

Cose importanti da sapere quando si usano le immagini.

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.
_________________________________________________________________________

COSA devi fare 

Primo, puoi inserire facilmente le immagini posizionate su un'altra cartella, o anche immagini posizionate su un altro sito web:

Esempio 2:

        
        <img src="images/nome-file.gif" />
        
        

Esempio 3:
           
             <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" />

Le immagini inoltre, posso avere collegamenti ipertestuali (link):

Esempio 4:

        <a href="http://www.istcompazzanox.it/">      

        <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" /></a>

------------------------------------------------------------------------------

Altri Attributi per 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. 



Esempio 5:

 
        <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" alt="Logo Scuola IC Azzano X" />
        
        
Alcuni browser mostrano il testo dell'attributo alt in una piccola box di pop-up quando si posiziona il cursore 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 invece, può essere usato per aggiungere informazioni all'immagine:


Esempio 6:


        <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" title="Logo Scuola IC Azzano X" />        
        
Senza cliccare, prova a posizionare il cursore sopra l'immagine, vedrai il testo "Impara l'HTML su HTML.net" apparire in una

box di pop-up. 






Altri due attributi importanti sono width e height:

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. 



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:

        

        <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="50" />        

___________________________________________________________________________________

Approfondimento

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.



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.