Aprire il file HTML per la pagina Web a cui si desidera aggiungere un'immagine in un editor di testo come Blocco note o software di sviluppo Web.
Aggiungi un tag al file. Posiziona il tag dopo l'elemento sotto il quale vuoi che appaia un'immagine quando il file HTML viene aperto in un browser. Il tag non ha un tag di chiusura separato. All'interno del tag, è necessario specificare la fonte dell'immagine che si desidera visualizzare digitando la posizione dell'immagine su Internet con il src attributo. Se l'immagine è archiviata nella stessa cartella del file HTML, digita il nome e l'estensione dell'immagine. Se l'immagine è archiviata altrove, digita l'URL completo dell'immagine.
Aggiungi il alt attribuisci al tuo tag. In HTML5, l'attributo alt è obbligatorio. Usa questo attributo per descrivere l'immagine nel caso non possa essere caricata. Se non è possibile caricare un'immagine, il browser visualizza il testo immesso dopo l'attributo alt. Inoltre, l'attributo alt è importante per i software di lettura dello schermo utilizzati da persone con disabilità visive. Il software legge il testo nell'attributo alt in modo che la persona con disabilità visiva che visualizza il tuo sito web possa sentire cosa c'è nell'immagine anche se non può vederlo.
Specificare le dimensioni dell'immagine in pixel con il altezza e larghezza attributi. Se non specifichi le dimensioni, il browser non sa quanto spazio lasciare per l'immagine durante il caricamento della pagina. Ciò si traduce in una pagina che si carica in modo discontinuo, poiché il testo viene caricato per primo, lasciando un piccolo spazio per l'immagine, quindi si separa quando l'immagine si carica e fa espandere lo spazio. Con le dimensioni specificate, il browser lascia esattamente la giusta quantità di spazio tra gli altri elementi della pagina affinché l'immagine possa riempirsi al termine del caricamento.
Testa il tuo codice per assicurarti che l'immagine venga visualizzata nella posizione corretta aprendo il file HTML in un browser.
Usa i CSS per spostare un'immagine sul lato sinistro o destro dello schermo o per disporre il testo attorno ad essa. Ad esempio, puoi usare style="float: left;" o style="float: right;" all'interno del tag.
Se non conosci sia l'altezza che la larghezza di un'immagine, va bene utilizzare solo l'attributo altezza o larghezza. Puoi anche usare i CSS per specificare l'altezza e la larghezza; ad esempio, con un'immagine di 100 x 100 pixel, usa l'attributo style: style="height: 100px; larghezza: 100 px."
Trasforma l'immagine in un link cliccabile inserendo il tag all'interno di una coppia di tag "a href". Ad esempio, se desideri collegare un'immagine a Facebook, digita quanto segue.
Non utilizzare l'attributo alt per cercare di aumentare il SEO della tua pagina. I motori di ricerca sanno da tempo che alcuni web designer cercano di riempire l'attributo alt con parole chiave extra, e quindi ignorano il testo nell'attributo alt.
