Come si inserisce un’immagine in HTML

Come inserire una immagine in html?

Inserire immagini html è molto semplice basterà usare il tag <img SRC=”#”> e aggiungere il codice nel punto dove vuoi che la tua immagine appaia sulla pagina WordPress. Ma è davvero così semplice? scopriamo insieme come fare.

Se vuoi migliorare l’aspetto del tuo sito ed ottimizzare i tempi di creazione allora ti consiglio di usare un CSS professionale da aggiungere al tuo blog. Vediamo come reperire le risorse esterne da inserire nella tua pagina web.

Il tag per inserire immagini nella tua pagina tramite codice html è questo: <img src=”url-della-immagine”> quello che dovrai fare è copiare ed incollare questo codice sulla tua pagina e sostituire la parola “url-della-immagine” con l’indirizzo della tua immagine sul server. Infatti la tua immagine potrebbe trovarsi già sul server in una cartella se è questo il caso ti consiglio di leggere questo articolo come inserire un immagine html da una cartella del server.

Se invece non hai ancora caricato l’immagine sul server dovrai caricarne una, potrai sceglierlo di fare tramite FTP o attraverso il pannello di controllo di WordPress cliccando sulla colonna di sinistra la voce di menù Media/aggiungi Nuova. Una volta che hai caricato la tua immagine copia la sua url generata ed incollala al posto di url-della-immagine presente nel tag img src.

Come inserire una immagine nella pagina web?

Come ho già detto nel paragrafo precedente per inserire una immagine abbiamo bisogno innanzi tutto di creare una immagine di successo, poi caricarla sul server, copiare il nostro url e aggiungere il tag <img> nel codice html della pagina web. Ma adesso andiamo al sodo, ti dirò tecnicamente come si può costruire una galleria fotografica usando il solo codice html ed il tag TAB cosi potrai migliorare l’aspetto del tuo blog WordPress in pochi passaggi. Scopri come nel prossimo paragrafo.

Realizzare una galleria fotografica in html

La via più semplice se non si vuole usare un plugin per WordPress è quella di costruire una galleria o un portfolio prodotti direttamente nella pagina web, aiutandoci con il codice html e le tab. Ecco di seguito un esempio pronto da essere usato sul tuo sito, ti basterà copiare ed incollarlo sulla tua pagina e trattarlo come ti ho spiegato sopra.

<img src="url-della-immagine"> cioè <img src="/percorso-immagine/nome-file.jpg/">

<!-- Copia fin qui -->

GALLERIA FOTOGRAFICA HTML + TABELLA

<!-- Copia questo codice ed incollalo sulla tua pagina web -->

<table style="width:100%">
<tr>
<th>COLONNA 1</th>
<th>COLONNA 2</th>
<th>COLONNA 3</th>
</tr>
<tr>
<td><img src="url-della-immagine"></td>
<td><img src="url-della-immagine"></td>
<td><img src="url-della-immagine"></td>
</tr>
<tr>
<td><img src="url-della-immagine"></td>
<td><img src="url-della-immagine"></td>
<td><img src="url-della-immagine"></td>
</tr>
<tr>
<td><img src="url-della-immagine"></td>
<td><img src="url-della-immagine"></td>
<td><img src="url-della-immagine"></td>
</tr>
</table>

Il risultato sarà:

Colonna tab 1	Colonna tab 2	Colonna tab 3

Come inserire un’immagine in una pagina WordPress con html

Adesso che conosci come inserire un’immagine tramite html nessuno ti potrà fermare, infatti la stessa procedura d’inserimento vale per tutti i CMS come wordPress che supportano il codice html. Se vuoi fare il salto di qualità nella ux design ti consiglio di usare delle Risorse per WordPress e istallare il codice CSS che trovi nel mio eBook qui sotto.

Potresti aver bisogno di creare un menù in una barra di navigazione del tuo sito da posizionare in un’area specifica per migliorare la UX, allora dovrai fare un elenco puntato orizzontale. Se vuoi fare la differenza ti consiglio di installare GetBootstrap sul tuo sito web per ottenere un elenco puntato orizzontale cosi come qui sotto:

Codice da copiare ed incollare sul tuo sito per creare un menu orizzontale costruito grazie ad un elenco puntato html.

<!-- Copia questo codice ed incollalo sulla tua pagina web -->

<img src="url-della-immagine"> cioè <img src="/percorso-immagine/nome-file.jpg/">

<!-- Copia fin qui -->