Da WIKI CoderDojo Firenze.
Riga 5: Riga 5:
 
La scelta del valore per il rosso, verde o blu viene fatto inserendo un valore a scelta tra 0 e 255 per ciascuno dei tre colori.
 
La scelta del valore per il rosso, verde o blu viene fatto inserendo un valore a scelta tra 0 e 255 per ciascuno dei tre colori.
  
Consiste nella creazione, in una pagina HTML, di un quadrato inizialmente nero insieme a tre textbox in cui l'utente potrà inserire i tre valori scelti per la terna RGB.
+
Consiste nella creazione, in una pagina HTML, di un quadrato inizialmente nero insieme a tre box testuali in cui l'utente potrà inserire i tre valori scelti per la terna RGB.
  
 
In particolare il codice HTML è il seguente;
 
In particolare il codice HTML è il seguente;
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">&lt;html&gt;<br/>&nbsp; &nbsp; &lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Rosso (0 - 255): &lt;input type="Text" id="rosso" value=0 onblur="colora('colore')"&gt;&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Verde (0 - 255): &lt;input type="Text" id="verde" value=0 onblur="colora('colore')"&gt;&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Blu (0 - 255): &lt;input type="Text" id="blu" value=0 onblur="colora('colore')"&gt;&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Codice esadecimale del colore risultante: &lt;label id='codice'&gt;#000000&lt;/label&gt;&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div style="height:100px; width:100px; background-color:#000000; border:1" id="colore"&gt;&lt;/div&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;<br/></div>
+
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">&lt;html&gt;<br/>&nbsp; &nbsp; &lt;body&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Rosso (0 - 255): &lt;input type="Text" id="rosso" value=0 &gt;&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Verde (0 - 255): &lt;input type="Text" id="verde" value=0 &gt;&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Blu (0 - 255): &lt;input type="Text" id="blu" value=0 &gt;&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Codice esadecimale del colore risultante: &lt;label id='codice'&gt;#000000&lt;/label&gt;&lt;br/&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div style="height:100px; width:100px; background-color:#000000; border:1" id="colore"&gt;&lt;/div&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;<br/></div>
in cui si possono notare i tre elementi HTML &lt;input type="text"&gt; che conterranno i tre numeri (0-255) per i tre colori della terna RGB, cioè rosso, verde e blu.&nbsp;
+
in cui si possono notare i tre elementi HTML &lt;input type="text"&gt; che conterranno i tre numeri (0-255) per i tre colori della terna RGB, cioè rosso, verde e blu e che inzialmente sono a 0 (value=0).&nbsp;
 +
 
 +
Dopo questi tre campi è presente una etichetta (tag &lt;label&gt;) che riporterà il codice esadecimale del colore risultante dalla cobinazione dei tre colori base e cioè il codice della terna RGB.
 +
 
 +
Infine, è presente un tag &lt;div&gt; a cui sono state date le carattersitche di un quadrato nero grazie alle impostazione di stile: l'attributo style, infatti, ne specifica lo stile definedo un'altezza ed una base entrambe di 100px (height:100px; width:100px;), un colore di sfondo pari al nero (background-color:#000000;) ed un bordo sottile (border:1).
 +
 
 +
Il codice così riportato disegna una pagina del tipo:

Versione delle 17:30, 21 set 2014

Questo semplice tutorial combina conoscenze basiche di HTML, CSS e Javascript.

Il suo scopo è quello di colorare un quadrato inizialmente nero, scegliendo una combinazione dei tre colori base rosso, verde e blu (terna RGB: Red Green Blue) cioè scegliendo una terna RGB.

La scelta del valore per il rosso, verde o blu viene fatto inserendo un valore a scelta tra 0 e 255 per ciascuno dei tre colori.

Consiste nella creazione, in una pagina HTML, di un quadrato inizialmente nero insieme a tre box testuali in cui l'utente potrà inserire i tre valori scelti per la terna RGB.

In particolare il codice HTML è il seguente;

<html>
    <body>
        Rosso (0 - 255): <input type="Text" id="rosso" value=0 ><br/>
        Verde (0 - 255): <input type="Text" id="verde" value=0 ><br/>
        Blu (0 - 255): <input type="Text" id="blu" value=0 ><br/>
        Codice esadecimale del colore risultante: <label id='codice'>#000000</label><br/>
        <div style="height:100px; width:100px; background-color:#000000; border:1" id="colore"></div>
    </body>
</html>

in cui si possono notare i tre elementi HTML <input type="text"> che conterranno i tre numeri (0-255) per i tre colori della terna RGB, cioè rosso, verde e blu e che inzialmente sono a 0 (value=0). 

Dopo questi tre campi è presente una etichetta (tag <label>) che riporterà il codice esadecimale del colore risultante dalla cobinazione dei tre colori base e cioè il codice della terna RGB.

Infine, è presente un tag <div> a cui sono state date le carattersitche di un quadrato nero grazie alle impostazione di stile: l'attributo style, infatti, ne specifica lo stile definedo un'altezza ed una base entrambe di 100px (height:100px; width:100px;), un colore di sfondo pari al nero (background-color:#000000;) ed un bordo sottile (border:1).

Il codice così riportato disegna una pagina del tipo: