(colora il box) |
|||
Riga 1: | Riga 1: | ||
− | Questo semplice tutorial combina conoscenze basiche di | + | 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. | + | 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. | 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 | + | 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. |
+ | |||
+ | In particolare il codice HTML è il seguente; | ||
+ | <div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><html><br/> <body><br/> Rosso (0 - 255): <input type="Text" id="rosso" value=0 onblur="colora('colore')"><br/><br/> Verde (0 - 255): <input type="Text" id="verde" value=0 onblur="colora('colore')"><br/><br/> Blu (0 - 255): <input type="Text" id="blu" value=0 onblur="colora('colore')"><br/><br/> Codice esadecimale del colore risultante: <label id='codice'>#000000</label><br/><br/> <div style="height:100px; width:100px; background-color:#000000; border:1" id="colore"></div><br/> </body><br/></html><br/></div> | ||
+ | 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. |
Versione delle 18:20, 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 textbox in cui l'utente potrà inserire i tre valori scelti per la terna RGB.
In particolare il codice HTML è il seguente;
<body>
Rosso (0 - 255): <input type="Text" id="rosso" value=0 onblur="colora('colore')"><br/>
Verde (0 - 255): <input type="Text" id="verde" value=0 onblur="colora('colore')"><br/>
Blu (0 - 255): <input type="Text" id="blu" value=0 onblur="colora('colore')"><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.