Crea sito

Codici HTML per inserire immagini e video in un sito

Codici HTML per inserire immagini


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:

Multimedia


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


Codici HTML per inserire immagini

Codice base per immagini (inserire URL immagine al posto di PCWEBNEWS.jpg)

<img src="PCWEBNEWS.jpg">



Codici HTML per inserire immagini

Dimensione (aggiungere i valori width=”LARGHEZZA PIXEL” e height=”ALTEZZA PIXEL”)

<img src="PCWEBNEWS.jpg" width="100" height="100">



Codici HTML per inserire immagini

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



pcwebnews

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



Codici HTML per inserire immagini

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



Codici HTML per inserire immagini

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>



Codici HTML per inserire immagini



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



Codici HTML per inserire immagini
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


Codici HTML per inserire immagini top allinea il testo in alto

Codici HTML per inserire immagini middle allinea il testo al centro

Codici HTML per inserire immagini bottom allinea il testo in basso

<img src="PCWEBNEWS.jpg" align="top">



Codici HTML per inserire immagini in un contesto


Codici HTML per inserire immaginitesto 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


Codici HTML per inserire immagini


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


Codici HTML per inserire immagini

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>