HTML: allineare le immagini

Metodi per gestire le immagini in una pagina web

Utilizzare contemporaneamente testo e immagini in un articolo, guida al posizionamento dell'immagine

Abbiamo imparato come creare dal nulla una pagina web senza l'ausilio di software specifici. Ora affronteremo un codice semplice come tutti i codici HTML ma fondamentale per rendere migliori le nostre pagine dal punto di vista dell'impatto visivo. Il TAG per inserire le immagini è <IMG> e si completa con queste istruzioni (indicherò solo le principali, ma non sono le uniche):

ALIGN (indica la direzione in cui inserire l'immagine nel testo)

Esempio di posizionamento nel testo HTML:

<IMG SRC="img/foto_gatto.jpg" ALT="Questa è la foto di un gatto allineata a destra del testo" BORDER="0" ALIGN="RIGHT"> testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio.

il risultato:

testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio.

L'esempio è lampante. L'immagine del gatto che nella pagina precedenza era allineata a sinistra, ora è allineata a destra e ciò è stato possibile grazie all'istruzione "RIGHT" contenuta nel parametro ALIGN (ALIGN="RIGHT"). La traduzione letterale è quindi "allinea l'immagine a destra del testo".

Analogamente possiamo rifare l'esempio cambiando allineamento.

<IMG SRC="img/foto_gatto.jpg" ALT="Questa è la foto di un gatto allineata a sinistra del testo" BORDER="0" ALIGN="LEFT"> testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio testo di esempio.

il risultato:

Qual è il metodo migliore?
Decidetelo voi, dipende dalla larghezza a disposizione, dal tipo di foto, dalla quantità del testo e dalla presenza di ulteriore grafica di contorno. Non c'è un'indicazione di massima da seguire se non quella di scegliere foto e immagini che non siano eccessivamente grandi o eccessivamente piccole rispetto al testo.

Nota Finale:
Prestate molta attenzione ai nomi dei file delle immagini ed al loro formato. In questo caso l'immagine aveva estensione ".JPG" che, unitamente al formato ".GIF" è sicuramente tra i piu' diffusi su internet. Lo studio dei formati grafici con i relativi vantaggi / svantaggi verrà affrontato in seguito.
Nella prossima pagina vedremo come aggiustare l'allineamento delle immagini distanziandole dal testo a nostro piacimento.

Indice