Creare box in html per contenere testo, foto, multimedia

Creare box


Come creare box in html. In questo articolo PCWEBNEWS propone dei “box” da utilizzare e modificare liberamente in qualsiasi sito o blog

Ultimo aggiornamento: luglio 2016






Questo articolo non propone una lezione per creare box in html, ma mette, semplicemente, a disposizione alcuni esempi


Box 1

Esempio
TESTO e/o contenuto multimediale
Codice
<div style="height:100px;width:590px;background-color:#FDBCB7;margin:0 auto; 
border-radius:50px;"><div align="center">
TESTO e/o contenuto multimediale</div></div>   

Impostando valori uguali per altezza e larghezza (es.: height:200px;width:200px;) e la metà per il bordo (es.: border-radius:100px;) si otterrà un cerchio


Box 2

Esempio
TXT prova1
TXT prova2
TXT prova3
1
2
3
4
5
Codice
<div style="width:577px;height:100px;line-height:1,5em;overflow:scroll;padding:5px;background-color:#D2B48C;color:#993300;border:1px solid #908435;">
TXT prova1
TXT prova2
TXT prova3 
1
2
3
4
5
</div>


Box 3

Esempio

TESTO e/o contenuto multimediale

TESTO e/o contenuto multimediale

Codice
<center> 
<table border=1 width=98% cellspacing=0 cellpadding=15 cols=2> 
<tr> 
<td> 
<p align="left">TESTO e/o contenuto multimediale;/p> 
</td> 
<td> 
<p align="left">TESTO e/o contenuto multimediale;/p> 
</td> 
</tr> 
</table> 
</center>


Box 4

Esempio
TITOLO DEL BOX

… INSERIRE TESTO E/O CONTENUTI MULTIMEDIALI,
OPPURE CONTENUTI IN HTML …

Codice
<fieldset style="background: #EEFFFF; border: 1px solid #000000; width: 590px; padding:1px;"> 
<legend style="color: #003366; font: italic bold 1em Arial, 
Helvetica, Sans-serif">TITOLO DEL BOX</legend> 
... INSERIRE TESTO E/O CONTENUTI MULTIMEDIALI,
OPPURE CONTENUTI IN HTML ...
</fieldset>


Box 5

Esempio
TITOLO DEL BOX
    Box testo

  • Riga 1
  • Riga 2
  • Riga 3
  • Riga 4
  • Riga 5
  • Riga 6
  • Riga 7
Link esterno PCWEBNEWS
Codice
<fieldset style="border-bottom: #000000 1px solid; border-left: #000000 1px solid; padding-bottom: 5px; padding-left: 5px; width: 590px; padding-right: 5px; background: #CADABA; border-top: #000000 1px solid; border-right: #000000 1px solid; padding-top: 5px"><legend style="color: #FF0000;"><strong>TITOLO DEL BOX</strong></legend>    
<ul>
<img src="URL IMMAGINE" width="100" height="85" alt="Box testo" title="Box testo" align="right" style="border: 0px solid #800000">
<li>Riga 1</li>      
<li>Riga 2</li>      
<li>Riga 3</li>      
<li>Riga 4</li>      
<li>Riga 5</li>      
<li>Riga 6</li>      
<li>Riga 7</li>         
</ul>   
<div align="right"><span style="font-size: 10px">Link esterno </span><a href="http://pcwebnews.altervista.org/" target="_blank"><span style="font-size: 12px">PCWEBNEWS</span></a></div></fieldset>    


Box 6

Esempio
TESTO 0123456789 TESTO.
Codice
<div style="width:250px;padding:0px;
filter:shadow"><div style="width:570px;text-align:center;padding:10px;background-color:#E0EEEE;
border:1px solid black;font-size:12px;color:#7B1B02;">TESTO 0123456789 TESTO.</div></div>


Box 7

Esempio
TESTO 1234567890
TESTO 1234567890
TESTO 1234567890
TESTO 1234567890
Codice
<div style="width:590px; border:1px solid #FFF; 
background-color:#FFEC8E">TESTO 1234567890</div>

Ripetendo piu volte lo stesso codice si ottiene un risultato come quello mostrato nell’esempio (magari cambiando il codice del colore)


Box 8

Esempio

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

Codice
<p style="height:200px;width:100%;overflow:scroll;background:url(URL IMMAGINE) 
repeat fixed;">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 </p>

Per lo sfondo è stata utilizzata una sola immagine delle dimensioni di 100x90px, ma è possibile utilizzare qualunque dimensione


Box 9

Esempio
TESTO 1234567890 TESTO
Codice
<div style="background-color:#abcdef;width:590px;height:90px;">
<div align="center">TESTO 1234567890 TESTO</div></div>



In questo articolo Creare box in html vengono spesso utilizzati dei codici esadecimali per definire i colori,
potete trovare un elenco a questo undirizzo



Powered by PCWEBNEWS


Se questo articolo vi piace cliccate sul pulsante FaceBook posto all’inizio di questa pagina