Posizionamento delle immagini con il codice HTML
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
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 Markdown Plus che ha il seguente URL: http://mdp.tylingsoft.com/icon.png
Digitiamo il seguente codice:
<div align="center"><img src="http://mdp.tylingsoft.com/icon.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>.