Html: le immagini
Inserire una immagine
Il tag rappresenta il principale elemento per inserire un’immagine in una pagina HTML. La sintassi minima è la seguente:
<img src="URL_IMMAGINE" alt="DESCRIZIONE_IMMAGINE">
Anzitutto notiamo che il tag <img> è un tag senza un contenuto, per questo non ha un elemento </img> di chiusura. Esaminiamo il significato delle keyword e degli attributi principali:
img
È il nome del tag, abbreviazione di image (immagine)
src
Sta per source (origine), è l’indirizzo (URL) del file che vogliamo mostrare
alt
È il testo alternativo, ovvero il testo che appare se, per qualche motivo, il client non riesce a mostrare l’immagine. Possiamo anche omettere questo attributo, ma risulta utile per l’accessibilità e per i motori di ricerca
Immaginiamo di voler raggiungere l'immagine del logo del programma Markdown Plus che ha il seguente URL: [https://nmac.to/wp-content/uploads/2015/04/Markdown.Plus.png](https://nmac.to/wp-content/uploads/2015/04/Markdown.Plus.png)
Digitiamo il seguente codice:
<img src="https://nmac.to/wp-content/uploads/2015/04/Markdown.Plus_.png" alt="Markdown Plus">
E produrremo:
Inserire immagine a sinistra con testo al lato
Per posizionare una immagine a sinistra con il testo di lato digitare il seguente codice HTML:
<img src="url_percorso_immagine.png" align="left" Hspace="15" Vspace="0"
Border="0"> testo al lato
Si avrà un risultato come questo:
Markdown è una sintassi per la formattazione di testo puro, progettata in modo che possa essere convertito in HTML utilizzando un semplice script. Attualmente è comunemente usato come formato per file readme, per la formattazione di messaggi nei forum o in editor di testo per la creazione rapida di documenti di testo formattati e in molti CSM di uso comune. La sua semplicità lo rende facile da usare in tutti i contesti e in tutti i documenti o pagine web.
Nel codice c'è il codice HTML per definire spazi e bordi intorno all'immagine:
Hspace="15"
determina lo spazio orizzontale intorno all'immagine
Vspace="0"
determina lo spazio verticale intorno all'immagine
Border="0"
determina lo spessore del bordo intorno all'immagine
Inserire immagine a destra con testo al lato
Per posizionare una immagine a sinistra con il testo di lato digitare il seguente codice HTML:
<img src="url_percorso_immagine.png" align="right" Hspace="15" Vspace="0"
Border="0"> testo al lato
Si avrà un risultato come questo:
Markdown è una sintassi per la formattazione di testo puro, progettata in modo che possa essere convertito in HTML utilizzando un semplice script. Attualmente è comunemente usato come formato per file readme, per la formattazione di messaggi nei forum o in editor di testo per la creazione rapida di documenti di testo formattati e in molti CSM di uso comune. La sua semplicità lo rende facile da usare in tutti i contesti e in tutti i documenti o pagine web.
Nel codice c'è il codice HTML per definire spazi e bordi intorno all'immagine:
Hspace="15"
determina lo spazio orizzontale intorno all'immagine
Vspace="0"
determina lo spazio verticale intorno all'immagine
Border="0"
determina lo spessore del bordo intorno all'immagine
Centrare una immagine con il codice HTML
Se l'immagine è nel nostro PC, l'immagine deve essere inserita all'interno di una cartella posizionata all'interno della stessa cartella del documento. Le immagini possono essere in formato JPG o formato PNG.
Immaginiamo di aver inserito nella cartella "immagini_markdown" un file col nome "gatto.png" con l'immagine di un gatto.
Dovremo inserire il seguente codice HTML:
<div align="center"><img src="percorso dell' immagine"></div>
Nel nostro caso dovremo digitare il seguente codice HTML:
<div align="center"><img src="http://www.puntoinformaticofree.it/markdown_tutorial/resources/gatto.png"></div>
Produrremo:

Se invece vogliamo centrare una immagine (sempre in formato JPG o formato PNG) presente in rete. Quindi una immagine che ha un URL che permette di raggiungerla. Dobbiamo digitare il seguente codice:
<div align="center"><img src="link dell' immagine"></div>
Immaginiamo di voler raggiungere l'immagine del logo del programma MacDown che ha il seguente URL: [https://nmac.to/wp-content/uploads/2015/04/Markdown.Plus.png](https://nmac.to/wp-content/uploads/2015/04/Markdown.Plus.png)
Digitiamo il seguente codice:
<div align="center"><img src="https://nmac.to/wp-content/uploads/2015/04/Markdown.Plus_.png"></div>
E produrremo:

Usare una immagine per un link usando il codice HTML
Le immagini da usare devo essere caricate su internet bisognerà usare il loro percorso url. Le immagini possono essere in formato JPG o formato PNG.
Immaginiamo di aver inserito sul nostro server all'interno della cartella "markdown_tutorial" la cartella "resources", al cui interno abbiamo collocato un file col nome "google.png" con l'immagine del logo del motore di ricerca Google.
Quindi se voglio inserire il link della pagina di google: https://www.google.it
Dovremo inserire il seguente codice HTML:
<a href="url.html"><img src="url_percorso_immagine.png"></a>
Nel nostro caso dovremo digitare il seguente codice HTML:
<a href="https://www.google.it"><img src="http://www.puntoinformaticofree.it/markdown_tutorial/resources/google.png"></a>
Produrremo:
Se non hai inserito un'attributo border ("bordo") vedrai un piccolo bordo intorno all'immagine dopo che è stata trasformata in link. Per eliminare questo bordo, aggiungi semplicemente border="0"
al tag <img>
.