Come inserire un’immagine in HTML
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 impostare una foto come sfondo in un sito o un blog utilizzando i linguaggi HTML e CSS. Ti spiegherò poi come inserirle all’interno di qualsiasi altro elemento contenitore, come allinearle, come ridimensionarle, come inserire al loro interno dei link e persino come impostarle a mo’ di sfondo in una tabella.
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
- Informazioni preliminari
- Come inserire un'immagine in HTML come sfondo
- Come inserire un'immagine in una pagina HTML
- Come inserire un'immagine in una tabella HTML
Informazioni preliminari
Prima di passare al sodo e di spiegarti, nel concreto, come inserire un’immagine in HTML, è necessario che tu abbia ben chiaro come fare a “rintracciare” il file di tuo interesse. Innanzitutto, per incorporare un’immagine (e, in generale, qualsiasi altro elemento che non sia composto da codice) in una pagina Web è necessario innanzitutto che il file in questione risulti preventivamente caricato su un server e che sia raggiungibile dall’esterno.
Per far riferimento al file dall’interno della pagina Web, bisogna specificare l’indirizzo dello stesso nella parte di codice HTML (o CSS) che andrà a definirla. A tal proposito, è possibile dichiarare l’URL del file da incorporare in due modi diversi, a seconda di dove è fisicamente ubicata l’immagine.
- URL assoluto: se il file di tuo interesse è ospitato su un server diverso da quello su cui risiede il sito che stai realizzando, oppure in una cartella differente, puoi farvi riferimento dichiarando l’URL assoluto, che corrisponde al link vero e proprio dell’immagine (ad es.
https://www.aranzulla.it/foto/immagine.jpg). - URL relativo: se il file da incorporare risiede nella stessa cartella o in una sotto-cartella del sito di tuo interesse, puoi incorporarla usando il suo indirizzo relativo, ossia dichiarando soltanto la cartella in cui si trova rispetto al file HTML in cui è definita la pagina Web (ad es.
/foto/immagine.jpg). Questo approccio è ideale per evitare problemi dovuti da possibili cambi di dominio.
Se sei indeciso circa la posizione dell’immagine rispetto alle pagine del tuo sito, oppure se l’immagine va definita all’interno di un tag <style> o di un foglio di stile CSS, ti consiglio comunque di inserirla facendovi riferimento tramite il suo indirizzo assoluto, anche se risiede sullo stesso server operativo, onde evitare problemi di “percorso”.
Come inserire un’immagine in HTML come sfondo
Detto ciò, vediamo subito come inserire un’immagine in HTML come sfondo della pagina. Fino a qualche tempo fa, era sufficiente dichiarare l’attributo background all’interno del tag <body>, cioè quello che avvia la definizione del corpo della pagina. Dunque, la dichiarazione di un’immagine di sfondo per la pagina sarebbe qualcosa del tipo <body bakcground src="URL_immagine">.
Tuttavia, a partire da HTML5 l’attributo background per il tag body è stato deprecato e, di conseguenza, non è più utilizzabile. Per far fronte alla cosa, bisogna definire lo sfondo della pagina usando il CSS, dichiarando la proprietà background-image.
Puoi ottenere questo risultato in tre modi diversi: incorporando la dichiarazione di stile nel tag di apertura del corpo della pagina (<body>) tramite l’attributo style, usando il tag <style> all’interno dell’header della pagina (tra i tag <head> e </head>) oppure definendolo in un foglio di stile CSS separato, da importare all’interno della pagina HTML.
Supponiamo di voler inserire un’immagine nella pagina HTML corrente, senza che essa si ripeta né si sposti, e che assuma una dimensione pari a quella dell’intera pagina. Volendo definire il tutto all’interno del tag body, andremo a scrivere il codice seguente.
<body style="background-image: url('https://indirizzo_immagine.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%;">
[corpo della pagina]
</body>
Volendo, invece, dichiarare lo sfondo della pagina all’interno del tag <style> (che, ti ricordo, deve essere annidato all’interno del tag <head>), andremo invece a scrivere quanto segue.
<style>
body {
background-image: url('indirizzo_assoluto_immagine.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Puoi dichiarare l’immagine di sfondo esattamente allo stesso modo anche all’interno di un foglio CSS esterno, semplicemente eliminando i tag <style> e </style>. Per chiarezza, lascia che ti elenchi il preciso funzionamento delle proprietà definite all’interno del codice.
background-image: url(''): serve a specificare l’indirizzo in cui è ubicato il file da includere.background-repeat: serve a definire se l’immagine vada ripetuta oppure no (laddove la foto fosse più piccola della pagina/elemento).background-attachment:fa sì che l’immagine resti fissa nella sua posizione anche in caso di scrolling della pagina/elemento.background-size: consente di definire le dimensioni dell’immagine rispetto alla pagina/elemento a cui appartiene.
Come inserire un’immagine in una pagina HTML
Per inserire un’immagine all’interno di una pagina HTML (o di un elemento che vi appartiene) e definirne il comportamento, bisogna adoperare il tag <img>, insieme con tutti gli attributi supportati. Il tag in questione va inserito necessariamente nel corpo della pagina (dunque tra i tag <body> e </body>) e può essere indipendente, oppure annidato in altri elementi della pagina (ad es. <p> e </p>, oppure <div> e </div> o, ancora, <table> e </table>, e così via). Parliamo ora degli attributi che è possibile aggiungervi: l’attributo src è obbligatorio e serve per indicare l’indirizzo del file da incorporare nella pagina; dunque, per dichiarare un’immagine, andremo a scrivere quanto segue.
<img src="URL_immagine.jpg" />
Volendo, puoi anche aggiungere l’attributo 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). Ciò favorisce anche l’indicizzazione dell’immagine stessa da parte dei motori di ricerca (come ti ho già spiegato in un altro tutorial).
<img src="URL_immagine.jpg" alt="La mia foto personale" />
Altri due attributi particolarmente interessanti sono width ed height, i quali consentono di definire larghezza e altezza, in pixel, dell’immagine. Dunque, supponendo di voler incorporare un’immagine e ridimensionarla a 640 x 480 pixel, andremo a scrivere quanto segue.
<img src="URL_immagine.jpg" alt="La mia foto personale" width="640" height="480" />
Come avrai notato negli esempi che ti ho fatto, il tag <img> non è un tag contenitore e, pertanto, non va chiuso (dunque non bisogna specificare il tag </img> per segnalarne la fine); tuttavia, sarebbe indicato inserire uno spazio e un carattere slash (cioè /) prima della parentesi angolare chiusa, in modo tale 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.
Come mettere un’immagine in HTML a destra e a sinistra
Fino a qualche tempo fa, il metodo più semplice per definire l’allineamento di un’immagine (o di qualsiasi altro elemento del corpo di una pagina Web) era inserire, all’interno del tag contenitore, l’attributo align; quest’ultimo, però, non è più supportato da HTML5, ma si può ovviare alla cosa percorrendo alcune strade alternative.
Il primo, nonché il più semplice, consiste nel racchiudere l’immagine in un tag contenitore (ad es. <p>…</p> oppure <div>…</div>) e usare l’attributo CSS text-align, per definire l’allineamento dell’immagine annidata all’interno, accompagnato dalla proprietà right (per l’allineamento a destra) oppure left (per l’allineamento a sinistra).
<div style="text-align: right;">
<img src="URL_immagine.jpg" alt="La mia foto personale" />
</div>
Come mettere un’immagine centrata in HTML
Lo stesso discorso può essere fatto anche per le immagini centrate: giacché l’attributo align e il tag <center>…</center> (il tag contenitore che consentiva di centrare tutti gli elementi al suo interno) sono ormai obsoleti e non più supportato a partire da HTML5, bisogna racchiudere l'immagine in un elemento contenitore (ad es. <div>…</div>) e definire l’allineamento in quest’ultimo.
Esattamente come visto in precedenza, questo compito può essere assolto dall’attributo CSS text-align accompagnato, però, dalla proprietà center. Dunque, per mettere un’immagine centrata in HTML, andremo a scrivere quanto segue.
<div style="text-align: center;">
<img src="URL_immagine.jpg" alt="La mia foto personale" />
</div>
Come inserire un’immagine con link in HTML
Se poi hai necessità di associare un link a un’immagine, in modo tale che cliccando su quest’ultima si venga indirizzati su una determinata pagina Web, devi racchiudere l’immagine stessa all’interno del tag contenitore <a>…</a>, accompagnato dall’attributo href. Quindi, volendo inserire un’immagine con link al mio sito Web, andremmo a scrivere quanto segue.
<a href="https://www.aranzulla.it">
<img src="URL_immagine.jpg" alt="Aranzulla" />
</a>
Infine, se desideri che il link a cui punta l’immagine si apra in una nuova scheda (e non in quella in uso dalla tua pagina Web), aggiungi anche l’attributo target, accompagnato dal valore _blank, all’interno del tag <a>. Dunque, il codice di cui sopra diverrebbe di questo tipo.
<a href="https://www.aranzulla.it" target="_blank">
<img src="URL_immagine.jpg" alt="Aranzulla" />
</a>
Come inserire un’immagine in una tabella HTML
Per inserire un’immagine all’interno di una tabella HTML, puoi unire tutti i consigli che ti ho dato finora, a seconda della tipologia di risultato che vuoi ottenere. Se, per esempio, vuoi impostare un’immagine di sfondo per una tabella, devi dichiarare uno stile CSS come già visto in uno dei passaggi precedenti di questa guida; tuttavia, il mio consiglio è quello di dichiarare la proprietà background-image all’interno di una classe specifica e di applicare la classe alla tabella di tuo interesse, altrimenti tutte le tabelle della pagina avranno lo stesso sfondo! Di seguito ti propongo un esempio di codice.
<html>
<head><title>La mia prima pagina Web</title>
<style>
table.tabellaPers {
background-image: url('indirizzo_assoluto_immagine.jpg');
background-repeat: repeat;
}
</style>
</head>
<body>
<table class="tabellaPers">
<tr><td>Cella1</td><td>Cella2</td></tr>
<tr><td>Cella3</td><td>Cella4</td></tr>
</table>
</body>
Se poi vuoi inserire un’immagine all’interno di una tabella, devi racchiudere il già menzionato tag <img> (a sua volta annidato nel tag <a>, per inserire un immagine con link) all’interno del tag <td>, che è quello che definisce il contenuto della riga di una tabella. Di seguito una porzione di codice di esempio.
<table>
<tr><td><img src="https://sitodiprova.org/immagine.jpg" /></td><td>Cella2</td></tr>
<tr><td>Cella3</td><td>Cella4</td></tr>
</table>
Per completezza d’informazione, ti segnalo che qui, sul mio sito, è disponibile anche una guida specifica su come creare una pagina HTML, all’interno della quale ho avuto modo di spiegarti quelli che sono i fondamenti della programmazione in HTML (e dello scripting in CSS). Mi raccomando, dalle almeno uno sguardo!
Autore
Salvatore Aranzulla
Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e cura la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.
