Tutte le immagini che vuoi collegare nel tuo sito web HTML deve essere prima caricato nello stesso punto in cui invii il codice HTML per la pagina web, indipendentemente dal fatto che il sito sia ospitato su un server web che raggiungi FTP oppure utilizzi un servizio di web hosting. Se utilizzi un servizio di web hosting, probabilmente utilizzi un modulo di caricamento fornito dal servizio. Questi moduli si trovano in genere nella sezione di amministrazione del tuo account di hosting.
Caricare la tua immagine sul servizio di hosting è solo il primo passo. Quindi è necessario aggiungere un tag nell'HTML per identificarlo.
Caricamento di immagini nella stessa directory dell'HTML
Le tue foto potrebbero trovarsi nella stessa directory dell'HTML. Se le cose stanno così:
- Carica un'immagine nella root del tuo sito web.
- Aggiungi un tag immagine nel tuo codice HTML per puntare all'immagine.
- Carica il file HTML nella root del tuo sito web.
- Prova il file aprendo la pagina nel tuo browser web.
Il tag immagine ha il seguente formato:
Supponendo che tu stia caricando una foto della luna con il nome "lunar.jpg", il tag dell'immagine assume la seguente forma:
L'altezza e la larghezza sono facoltative ma consigliate. Questi valori predefiniti sono in pixel ma possono anche essere espressi come percentuali:
Il tag immagine non richiede un tag di chiusura.
Se stai collegando un'immagine in un altro documento, usa i tag di ancoraggio e annida il tag dell'immagine all'interno.
Caricamento di immagini in una sottodirectory
È più comune memorizzare le immagini in una sottodirectory, solitamente chiamata immagini. Per puntare alle immagini in quella directory, devi sapere dove si trova in relazione alla radice del tuo sito web.
La radice del tuo sito Web è dove viene visualizzato l'URL, senza alcuna directory alla fine. Ad esempio, per un sito Web denominato "MyWebpage.com", la radice segue questo modulo: http://MyWebpage.com/. Notare la barra alla fine. Questo è il modo in cui viene solitamente indicata la radice di una directory. Le sottodirectory includono quella barra per mostrare dove si trovano nella struttura della directory. Il sito di esempio MyWebpage potrebbe avere la struttura:
http://MyWebpage.com/ — la directory principale
http://MyWebpage.com/products/ — la directory dei prodotti
http://MyWebpage.com/products/documentation/ — la directory della documentazione nella directory dei prodotti
http://MyWebpage.com/images/ — la directory delle immagini
In questo caso, quando punti alla tua immagine nella directory delle immagini, scrivi:
Questo si chiama percorso assoluto alla tua immagine.
Problemi comuni con immagini che non vengono visualizzate
Far apparire le immagini sulla tua pagina web può essere difficile all'inizio. I due motivi più comuni sono che l'immagine non è stata caricata nel punto in cui punta l'HTML o che l'HTML è stato scritto in modo errato.
La prima cosa da fare è vedere se riesci a trovare la tua immagine online. La maggior parte dei provider di hosting dispone di un qualche tipo di strumento di gestione che puoi utilizzare per vedere dove hai caricato le tue immagini. Dopo che pensi di avere l'URL corretto per la tua immagine, digitalo nel tuo browser. Se l'immagine viene visualizzata, allora hai la posizione corretta.
Quindi controlla che il tuo codice HTML punti a quell'immagine. Il modo più semplice per farlo è incollare il URL dell'immagine che hai appena testato nell'attributo SRC. Ricarica la pagina e prova.
L'attributo SRC del tuo tag immagine non dovrebbe mai iniziare con C:\ o file: Questi sembreranno funzionare quando provi la tua pagina web sul tuo computer, ma tutti coloro che visitano il tuo sito vedranno un'immagine rotta. Questo perché C:\ punta a una posizione su il tuo disco rigido. Poiché l'immagine è sul tuo disco rigido, viene visualizzata quando la visualizzi, ma non per nessun altro.