Questo sito contribuisce alla audience di Il Messaggero
Salvatore Aranzulla Day
Evento di formazione SEO con Salvatore Aranzulla. Scopri il programma

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 cose che non sei riuscito a comprendere ancora bene.

Ad esempio, vorresti qualche delucidazione su come inserire un’immagine in HTML, 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. Non perdiamo altro tempo e vediamo subito tutto quello che c’è da sapere sull’inserimento delle foto in siti Internet e blog tramite codice HTML.

Per capire come inserire un’immagine in HTML, devi memorizzare bene un concetto chiave: le immagini che vedi nelle pagine Web dei siti Internet, dei blog e dei forum non sono incorporate in queste ultime ma vengono richiamate da posizioni esterne. Questo significa che ciascuna foto deve avere un indirizzo univoco a cui l’utente può far riferimento per utilizzarla online.

L’indirizzo di un’immagine è composto in questo modo: all’inizio c’è l’indirizzo dello spazio Web su cui è ospitata (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 deve dunque avere una composizione del tipo https://www.aranzulla.it/immagine.jpg.

A questo punto, ti starai domandando, ma 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 dalla dicitura src= e dall’indirizzo dell’immagine da inserire nella pagina racchiuso fra virgolette. Continuando con l’esempio di prima, dovresti utilizzare la seguente formattazione:

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

Adesso sai come inserire un’immagine in HTML utilizzando del codice basilare, ma è possibile aggiungere altre variabili in modo da specificare dimensioni, allineamento e spaziatura delle foto nel contesto delle pagine in cui vengono inserite.

Per allineare un’immagine al centro, a sinistra, a destra, sopra o sotto nella pagina, non devi far altro che utilizzare la formattazione che abbiamo appena visto insieme ed aggiungere a quest’ultima la variabile align= seguita dal tipo di disposizione che vuoi far adottare alla foto. Ecco un esempio:

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

Con questo codice abbiamo allineato l’immagine al centro (valore center) ma in realtà è possibile usare tantissimi altri tipi di variabili per l’allineamento: left allinea le immagini a sinistra; right allinea le immagini a destra; bottom dispone la foto sulla parte bassa a destra della prima riga di testo; middle dispone la foto sulla parte centrale a destra della prima riga di testo; top dispone la foto sulla parte superiore a destra della prima riga di testo.

Come accennato in precedenza, attraverso il codice HTML è possibile anche ridimensionare le immagini (solo visivamente, senza modificare il 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 la spaziatura verticale. Ecco un esempio riguardante una foto di 300×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″>

Infine vediamo come associare un link ad un’immagine, in modo che cliccando su quest’ultima si venga reindirizzati su una determinata pagina o sito Web, e come inserire una descrizione testuale della foto da riprodurre nel caso in cui questa non possa essere visualizzata correttamente (es. per errori di server o di cancellazione della foto dalla sua posizione originale).

Per aggiungere un collegamento Internet ad un’immagine, non occorre far altro che anteporre il codice a href= seguito dall’indirizzo del sito da linkare al codice dell’immagine ed inserire il tag a alla fine del codice. Ecco un esempio in cui l’immagine che abbiamo usato finora per il nostro esempio linka l’indirizzo www.sitodalinkare.com:

<a href=”http://www.sitodalinkare.com”><img src=”https://www.aranzulla.it/immagine.jpg”></a>

Per quanto riguarda la descrizione testuale, invece, quest’ultima viene aggiunta alla foto mediante il codice alt che va usato in questo modo:

<img src=”https://www.aranzulla.it/immagine.jpg” alt=”nome dell’immagine”>

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, visto? E partendo da qui potrai approfondire l’argomento scoprendo tantissime altre funzioni che si possono sfruttare adoperando il linguaggio HTML. Buon divertimento!