Questo sito contribuisce alla audience di Il Messaggero

Come inserire un’immagine in HTML

di

Dopo aver provato diverse soluzioni pronte all’uso, che non richiedevano alcuna conoscenza della materia, hai deciso di cimentarti nella creazione di un sito Internet “sporcandoti le mani” con il codice HTML. La cosa ti appassiona molto, ma ci sono alcune procedure che non sei riuscito a comprendere ancora bene.

Ad esempio, vorresti qualche delucidazione in più su come inserire un’immagine in HTML, su quali sono i parametri corretti da utilizzare per la formattazione del codice e quali informazioni si possono inserire in quest’ultimo. Beh, sappi che sei capitato nel posto giusto al momento giusto! Nei prossimi paragrafi, infatti, ti mostrerò nel dettaglio come inserire foto in un sito, un blog o qualsiasi altro “contenitore” utilizzando il linguaggio HTML. Ti spiegherò poi come allinearle, come ridimensionarle, come inserire al loro interno dei link e persino come impostarle come sfondo in una pagina Web.

Allora, che ne dici? Sei pronto per iniziare? Sì? Benissimo! Mettiti bello comodo, prenditi tutto il tempo necessario per concentrarti sulla lettura delle prossime righe e, cosa ancora più importante, metti in atto le “dritte” che ti darò in relazione ai tag HTML da utilizzare per inserire le immagini nelle tue pagine Web. Vedrai, non vi è nulla di complicato nel compiere quest’operazione e, quando avrai finito di leggere il tutorial, saprai esattamente come procedere. Ti auguro buona lettura e, soprattutto, buon divertimento!

Indice

Inserire un’immagine in HTML

Per capire come inserire un’immagine in HTML, devi fissare in mente un concetto chiave: le immagini che vedi nelle pagine Web dei siti che visiti, dei blog e dei forum non sono incorporate in queste ultime ma vengono richiamate da posizioni esterne. Questo significa che ciascuna foto ha un indirizzo univoco, che permette di rintracciarla e visualizzarla.

L’indirizzo di un’immagine è composto in questo modo: all’inizio c’è l’indirizzo dello spazio Web su cui è ospitato il file (es. https://www.aranzulla.it/) e poi c’è il nome dell’immagine completo di estensione (es. immagine.jpg). L’indirizzo diretto di un’immagine sul Web, dunque, deve avere una composizione del tipo https://www.[dominio del sito]/[nome ed estensione dell’immagine], nel caso del nostro esempio https://www.aranzulla.it/immagine.jpg.

A questo punto, ti starai domandando come si fa a richiamare l’indirizzo di un’immagine in una pagina Web, in modo da rendere la foto visibile al pubblico? Nulla di più semplice! Basta adoperare il tag img seguito dall’attributo src= seguito dall’indirizzo dell’immagine da inserire nella pagina racchiuso fra virgolette. Continuando con l’esempio di prima, per inserire un’immagine in una pagina Web, dovresti utilizzare la seguente formattazione.

<img src=”https://www.aranzulla.it/immagine.jpg” />

Volendo, puoi anche aggiungere il tag alt all’immagine, così da configurare del testo alternativo (una sorta di descrizione del file caricato) da mostrare nel caso in cui questa non risulti disponibile (ad esempio per errori di connessione al server o di cancellazione della foto dalla sua posizione originale), il che favorisce anche l’indicizzazione dell’immagine stessa da parte dei motori di ricerca (come ti ho già spiegato in un altro tutorial). Il tag alt va inserito subito dopo l’elemento img, come nell’esempio che segue.

<img src=”https://www.aranzulla.it/immagine.jpg” alt”foto salvatore aranzulla” />

Come avrai notato, negli esempi che ti ho fatto poc’anzi non ho chiuso il tag img con il tag </img>: il motivo è che non c’è alcun bisogno di farlo, in quanto img è un tag “vuoto”. Tuttavia potrebbe essere pratico inserire uno spazio e uno slash / prima del simbolo maggiore >, così da rendere l’immagine compatibile anche con il formato XHTML, il linguaggio di marcatura che associa alcune proprietà dell’XML con le caratteristiche dell’HTML.

Mettere un’immagine in HTML a destra, sinistra e al centro

Ora che hai preso dimestichezza con l’uso del tag img, sicuramente ti interesserà sapere come spostarla a destra, a sinistra e al centro. Nelle prossime righe ti mostrerò proprio questo: come allineare un’immagine al centro, a sinistra, a destra, sopra o sotto nella pagina che la contiene, e anche come ridimensionarla.

Per allineare le immagini, non devi far altro che utilizzare la formattazione che abbiamo visto nelle righe precedenti e aggiungere a quest’ultima la variabile align=, seguita dal tipo di disposizione che vuoi far adottare alla foto: center, per allineare l’immagine al centro; left, per allinearla a sinistra; right, per allinearla a destra; bottom, per disporre la foto sulla parte bassa a destra della prima riga di testo; middle, per disporre la foto sulla parte centrale a destra della prima riga di testo; top, per disporla sulla parte superiore a destra della prima riga di testo.

<img src=”https://www.aranzulla.it/immagine.jpg” align=”center” />

Come accennato in precedenza, attraverso il codice HTML è possibile anche ridimensionare le immagini (solo visivamente, senza modificare le dimensioni del file originale) e specificare la spaziatura che devono avere rispetto agli altri elementi che compongono la pagina Web in cui sono inserite.

Per indicare le dimensioni che deve avere un’immagine, bisogna adoperare le variabili width ed height specificando i valori in pixel, mentre per quanto riguarda la spaziatura bisogna usare la voce hspace per indicare la spaziatura orizzontale e vspace per indicare quella verticale. Di seguito ti faccio l’esempio di una foto di 300 x 200 pixel avente una spaziatura verticale ed orizzontale di 20 pixel.

<img src=”https://www.aranzulla.it/immagine.jpg” width=”300″ height=”200″ vspace=”20″ hspace=”20″ />

Hai visto com’è stato semplice allineare e ridimensionare le immagini in HTML? Come ti dicevo è un’operazione tutt’altro che complicata, basta soltanto conoscere i tag da utilizzare e usare le variabili che più si preferiscono per far assumere alla foto caricata la posizione desiderata.

Inserire un’immagine in HTML come sfondo

Desideri inserire un’immagine in HTML e usarla come sfondo della pagina? Anche far questo è possibile, ma per procedere non dovrai ricorrere al tag img, bensì al tag body seguito dall’attributo background e dal percorso dell’immagine racchiuso fra virgolette. Ti garantisco che non vi è nulla di complicato nell’eseguire questa operazione: l’esempio che trovi di seguito può dimostrartelo.

<body background=”https://www.aranzulla.it/immagine.jpg”>

Dal momento che l’immagine inserita come sfondo nella pagina Web verrà ripetuta sia in orizzontale che in verticale, ti consiglio di adottare questa tecnica soltanto se hai a disposizione immagini che, anche se ripetute, permettano di ottenere un risultato estetico piacevole, per capirci una sorta di effetto mosaico.

Inserire un’immagine con link in HTML

Concludiamo questa guida scoprendo insieme come associare un link a un’immagine in HTML, in modo che cliccando su quest’ultima si venga reindirizzati su una determinata pagina Web. Per aggiungere un collegamento Internet ad un’immagine, non occorre far altro che anteporre il tag a href= seguito dall’indirizzo del sito da linkare al codice dell’immagine. Ecco un esempio in cui l’immagine che abbiamo usato finora in questo tutorial linka l’indirizzo www.sitodesempio.it:

<a href=”https://www.sitodesempio.it” target=”_blank” rel=”nofollow”><img src=”https://www.aranzulla.it/immagine.jpg”></a>

Direi che con questo è tutto! Ora conosci tutte le regole base per inserire un’immagine in HTML in blog e siti Web. Ci vuole pochissimo per impararle, hai notato? E partendo da qui potrai approfondire l’argomento scoprendo tantissime altre funzioni che si possono sfruttare adoperando il linguaggio HTML. Buon divertimento!