Exercice HTML corrigé et facile: Les balises DIV et SPAN

Facebook Tweet Pin Email

<HTML>
<HEAD>
<TITLE>utilisation balises DIV et SPAN</TITLE>
<STYLE>
BODY    {BACKGROUND-COLOR:#6699CC;BACKGROUND-POSITION:0% 0%;COLOR:rgb(0,0,0);MARGIN-LEFT:10px}
.motif1 {BACKGROUND-COLOR:#ffcc66;FONT-SIZE:100px}
.motif2 {BACKGROUND-COLOR:#9933cc;FONT-SIZE:100px}
.motif3 {BACKGROUND-COLOR:blue;FONT-SIZE:100px}
.trait  {position: absolute;top:420px;left:10px}
.taillefont {FONT-SIZE:100px}
.posi1  {position:absolute;top:60px;left:10px}
.posi2  {position:absolute;top:60px;left:140px}
.posi3  {position:absolute;top:220px;left:140px}
</STYLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY>
<CENTER>
<B>Utilisations des balises DIV et SPAN<BR> ( images remplacées par des caractères de 
la fonte Webdings )</B></CENTER>
<HR><BR>
 
<DIV class="posi1"><B>3 blocs DIV <BR>(saut de ligne) </B><BR><BR>
<FONT face=webdings size=7>
<DIV class="motif1"> K </DIV>
<DIV class="motif1"> E </DIV>
<DIV class="motif1"> R </DIV></FONT><BR></DIV>
 
<DIV class="posi2">
<BR><B>3 éléments SPAN ( pas de saut de ligne )</B> <BR><BR>
<FONT face=webdings size=7>
<SPAN class="motif2">K</SPAN><SPAN class="motif2">E</SPAN><SPAN class="motif2">R</SPAN> 
</FONT><BR><HR><BR></DIV>.
 
<DIV class="posi3">
<BR><B>DIV et SPAN utilsés ensemble : </B><BR><BR>
<FONT face=webdings size=7>
<DIV class="taillefont">KE<SPAN class="motif3">JT</SPAN>ER</DIV></FONT><DIV><IMG src="../images/barre2.gif"></DIV>
</DIV>
 
<HR class="trait">
 
</BODY>
</HTML>