Codici HTML per inserire immagini, video, o un intero sito in un box su blog o siti. HTML è l’acronimo di HyperText Markup Language, in informatica è il linguaggio di markup usato per la formattazione delle pagine web
Ultimo aggiornamento: maggio 2016
per visualizzare un video di youtube si puo utilizzare uno dei codici descritti sotto
(Il video occuperà il 100% della larghezza disponibile)
https://www.youtube.com/watch?feature=player_embedded&v=S35szWtzE6k |
https://www.youtube.com/watch?v=S35szWtzE6k |
Se volete cambiare le dimensioni del player potete utilizzare questo codice, intervenendo sui valori width e height:
| <iframe src="http://www.youtube.com/embed/S35szWtzE6k?feature=player_embedded" width="450" height="350"></iframe> |
Per cambiare video basta sostituire la stringa in nero, nel box del codice, con quella evidenziata nell’esempio della immagine sotto:
Se volete riportare un intero sito web all’interno di un box potete utilizzare questo codice:
(nell’esempio ho utilizzato il sito “www.ilmeteo.it“)
| <iframe src="http://www.ilmeteo.it/" width="590" height="200"></iframe> |
Codici HTML per inserire immagini
Codice base per immagini (inserire URL immagine al posto di PCWEBNEWS.jpg)
| <img src="PCWEBNEWS.jpg"> |
Dimensione (aggiungere i valori width=”LARGHEZZA PIXEL” e height=”ALTEZZA PIXEL”)
| <img src="PCWEBNEWS.jpg" width="100" height="100"> |
Cornice (aggiungere la stringa style=”border: 5px solid #800000″ dove 5px è lo spessore, solid è il tipo di bordo “dotted, solid, groove, dashed, inset, ecc.“, #800000″ è il colore
| <img src="PCWEBNEWS.jpg" style="border: 5px solid #800000"> |
Attributo alt, testo alternativo nel caso, per un qualsiasi motivo, l’immagine non venga caricata, (in questo box ho tolto l’immagine di proposito, vedete che al suo posto appare il testo) (obbligatorio ai fini della validazione W3C e SEO)
| <img src="PCWEBNEWS.jpg" alt="pcwebnews"> |
Attributo title, testo che appare in un pop-up al passaggio del mouse (provare a posizionare in mouse sull’immagine)
| <img src="PCWEBNEWS.jpg" title="pcwebnews"> |
Posizione immagine: alignleft (sinistra), aligncenter (centro), alignright (destra)
| <img class="aligncenter" src="PCWEBNEWS.jpg"> |
Oppure aggiungere il tag div align: left (sinistra), center (centro), right (destra)
| <div align="center"><img src="PCWEBNEWS.jpg"></div> |
In questa immagine sono stati utilizzati tutti gli attributi fin qui illustrati
| <img class="alignright" src="PCWEBNEWS.jpg" width="100" height="100" alt="pcwebnews" title="pcwebnews" style="border: 5px solid #800000"> |
Oppure utilizzare questa variante
| <div align="right"><img src="PCWEBNEWS.jpg" width="100" height="100" alt="pcwebnews" title="pcwebnews" style="border: 5px solid #800000"></div> |
Codice per allineamento del testo all’immagine
top allinea il testo in alto
middle allinea il testo al centro
bottom allinea il testo in basso
| <img src="PCWEBNEWS.jpg" align="top"> |
Codici HTML per inserire immagini in un contesto
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
| <img src="PCWEBNEWS.jpg" width="50" height="50" align="left" style="border: 3px solid #800000">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo |
Si puo disporre l’immagine a sinistra (left), a destra (right), al centro (center)
Codici HTML per inserire immagini che si ingrandiscono al passaggio del mouse
|
prova a posizionare il mouse sull’immagine
| <style> .dimensione { transition-duration: 1s; -ms-transition-duration: 1s; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-property: transform; -ms-transition-property: -ms-transform; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; overflow:hidden; } .dimensione:hover { -ms-transform: scale(2,2); -webkit-transform: scale(2,2); -moz-transform: scale(2,2); -o-transform: scale(2,2); } </style> <table border="0" cellpadding="2" cellspacing="0" style="width: 700px;"> <tbody> <tr> <td valign="top" width="200"><img class="dimensione" src="URL IMMAGINE" style="display: block; float: none; margin-left: auto; margin-right: auto;" width="100" /></td> </tr> </tbody></table> PER AGGIUNGERE UNA O PIU IMMAGINI AGGIUNGERE QUESTO PEZZO DI CODICE: <td valign="top" width="200"><img class="dimensione" src="URL IMMAGINE" style="display: block; float: none; margin-left: auto; margin-right: auto;" width="100" /></td> |
Codice per inserire banner
E’ possibile aggiungere tutti gli attributi descritti nel paragrafo dedicato alle immagini
| <a href="URL DI RIFERIMENTO" ><img src="URL IMMAGINE"></a> |
Per aprire la URL DI RIFERIMENTO in un’altra scheda aggiungere questa stringa
| <a href="URL DI RIFERIMENTO" target="_blank"><img src="URL IMMAGINE"></a> |
Codice per inserire banner in flash
E’ possibile modificare i valori height e width
| <object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" align="middle" height="65px" width="268px"><embed src="URL DEL FLASH" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" play="true" loop="true" wmode="transparent" allowfullscreen="true" flashvars="" type="application/x-shockwave-flash" align="middle" height="65px" width="268px"></object> |
Articoli correlati
