Inserimento di un'immagine all'interno di pagine web:

La modalità classica per inserire un'immagine all'interno di un sito web è metterla attraverso l'utilizzo del tag corrispondente nell'html. La prima cosa da fare è avere l'immagine salvata sul nostro computer, quindi potremmo ad esempio scaricarla da Google immagini e dovrà necessariamente essere di dimensione esatta altrimenti va scontornata con l'utilizzo di programmi di fotoritocco come Gimp.

es: Sergio Castellitto -> size: 296x454 -> visualizza immagine -> tasto destro del mouse -> salva come:

Andremo, quindi a salvare l'immagine scelta dentro la cartella del sito su cui stiamo lavorando.
                
Per inserire l'immagine attraverso l'utilizzo dei codici html, ci serviremo del programma Coffe Cup.
La sintassi per inserire una immagine è:

<img src="http://miosito.it/miaImmagine.gif" alt="testo" />

 

I formati ammessi per il web sono sostanzialmente tre:

 

1) GIF: (Graphic Interchange Format)Questo formato consente di rappresentare anche semplici animazioni(Gif animate), esse hanno una tavolozza che non supera i 256 colori, per questo vengono utilizzate spesso per grafici o icone.

 

2) JPG (JPEG): È l’acronimo del gruppo di ricerca che ha ideato questo formato (il Joint Photographic Experts Group), idoneo per le immagini di qualità fotografica.

3) PNG: (Portable Network Graphic) Il PNG è un tipo di immagine introdotto più recentemente, elaborato dal W3C per risolvere i problemi di copyright del formato GIF (che è invece proprietario); tuttavia oggi il PNG è letto oramai da tutti i browser e offre alcune caratteristiche che gli altri formati non hanno. PNG permette sia di rappresentare immagini di qualità fotografica, sia di ottimizzare i colori in modo simile a GIF.

 

 Sarà, quindi inutile provare a inserire un file “.psd” (formato nativo di Photoshop) all’interno della vostra pagina HTML: con grande probabilità il browser non caricherà il file (dovete infatti prima convertire il file in uno dei formati sopra-indicati).

È importante, dunque cercare sempre di ottimizzare i file evitando di caricare immagini troppo pesanti; Bisogna evitare anche di sovraccaricare una pagina con troppe immagini. Un peso eccessivo rende le pagine lente da caricare e questo può diventare un problema sia per gli utenti che fruiscono il sito web, sia per i motori di ricerca.

Dal momento che il browser normalmente non sa quali siano le dimensioni dell’immagine, finché questa non sia caricata completamente, è un’ottima abitudine quella di indicare già nel codice la larghezza (width) e l’altezza (height) dell’immagine: in questo modo si evita di vedere la pagina costruirsi man mano che viene caricata, poiché stiamo dando al browser un’idea dell’ingombro. Per esempio:

 

<img src="logo.gif" width="224" height="69" />

 

Infine l’attributo alt è utile per specificare il testo alternativo (alternative text), fintanto che l’immagine non viene caricata o nel caso in cui non lo sia affatto: l’attributo alt è di estrema utilità per rendere il sito accessibile a tutti gli utenti: i disabili che non sono in grado di vedere nitidamente le immagini sullo schermo potrebbero avere delle difficoltà, nel caso in cui l’attributo alt non sia specificato.

Disporre le Immagini in un contesto: 

Se inserita in un testo, normalmente un'immagine è allineata con il testo.
Per esempio:

  <p>HTML.it è il primo sito italiano sul web publishing <img src=”logo.gif” width=”224″ height=”69″ border=”0″> con centinaia di esempi e guide esplicative </p> 

In questo modo il risultato sarà semplicemente di ritrovare l'immagine inserita, allineata con il testo stesso:

 HTML.it è il primo sito italiano sul web publishing con centinaia di esempi e guide esplicative.

Abbiamo tuttavia la possibilità di allineare l'immagine utilizzando l'attributo align. Vediamo di seguito come vengono utilizzati gli attributi align=”left” e align=”right”:

Esempio di immagine allineata a sinistra:

 <p><img src=”logo.gif” width=”224″height=”69″border=”1″align=”left”>
HTML.it èil primo sito italianosul web publishing, con centinaia di esempi e guide esplicative</p>ù

Vedremo qualcosa del genere:

  HTML.it è il primo sito italiano sul web publishing, con centinaia di esempi e guide esplicative.

 

Esempio con immagine allineata a destra:

<p> <img src=”logo.gif” width=”224″ height=”69″ border=”1″ align=”right”>
HTML.it è il primo sito italiano sul web publishing, con centinaia di esempi e guide esplicative </p> 

Vedremo qualcosa del genere:
 
 HTML.it è il primo sito italiano sul web publishing, con centinaiadi esempi e guide esplicative.

Altri valori possibili sono:

Valore di align	Visualizzazione
bottom	allinea la prima riga di testo sulla sinistra nella parte bassa dell’immagine (è così di default).
middle	allinea la prima riga di testo sulla sinistra al centro dell’immagine.
top	allinea la prima riga di testo sulla sinistra nel lato superiore dell’immagine.

 
Da notare che, mentre align=”left” e align=”right”, sono utili per spostare l’immagine a sinistra o a destra, gli altri valori servono piuttosto per disporre le posizioni verticali di testo e immagini.
Infine con hspace (horizontal space, cioè “spazio orizzontale”) e vspace (vertical space, cioè “spazio veritcale”) possiamo impostare lo spazio (in pixel) che deve essere lasciata tra l’immagine e cioè che la circonda.

Nel caso di hspace, impostiamo uno spazio orizzontale da ambo i lati dell'immagine:


<img src=”logo.gif” width=”224″ height=”69″ hspace=”20″> 

Nel caso di vspace, impostiamo lo spazio verticale sempre da ambo i lati dell'immagine:

<img src=”logo.gif” width=”224″ height=”69″ vspace=”20″>