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:

Markdown Plus


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>.