Gli Attributi: Il Colore
Il colore è considerato un Attributo nel linguaggio HTML, ovvero informazioni aggiuntive in un elemento.
Come abbiamo già verificato, gli elementi danno struttura ad un documento HTML e dicono al browser come vuoi che venga visualizzato il tuo sito web (per esempio, <br /> informa il browser che deve lasciare una linea vuota). In alcuni elementi si possono inserire informazioni aggiuntive. Queste informazioni aggiuntive quindi, vengono chiamate attributi.
Generalmente un elemento è formato da un tag iniziale con o senza uno o più attributi, del contenuto e un tag finale. Semplice no? Guarda la figura sotto.
L'attributo è contenuto nel tag iniziale, come esempio successivo.
Esempio 1:
<h2 style="background-color:#ff0000;">Mettiamo un po di rosso</h2>
Gli attributi vengono scritti sempre all'interno del tag di apertura e sono seguito da un segno di uguaglianza e dal dettaglio degli attributi tra apici. Il punto e virgola dopo gli attributi serve a separare i diversi comandi di stile. Torneremo su questo argomento più tardi.
---------------------------------------------------------------------------------------------------------
L'attributo usato nel precedente esempio si chiama style. Con l'attributo di stile puoi aggiungere un layout al tuo sito web. Per esempio un colore di sfondo rosso:
Esempio 2:
<html>
<head> </head>
<body style="background-color:#ff0000;"> </body>
</html>
Nota che alcuni tag e attributi usano l'ortografia degli USA, come per esempio color invece di colour. E' importante che usi la stessa ortografia che stiamo usando negli esempi di questo tutorial, altrimenti il browser non riuscirà ad interpretare il codice.
----------------------------------------------------------------------------------------------------------
Ogni colore è individuato dal suo proprio numero esadecimale. Vediamo un esempio:
White: #ffffff
Black: #000000 (zero)
Red: #ff0000
Blue: #0000ff
Green: #00ff00
Yellow: #ffff00
Un codice esadecimale per un colore è formato da una gratella (#) e da sei cifre o lettere.
-----------------------------------------------------------------------------------------------------------
Ci sono più di 1000 codici esadecimali e non è semplice capire la corrispondenza tra questi codici e uno specifico colore.
Per semplificare abbiamo una tabella dei 216 colori più utilizzati:
216 Tabella dei colori per il web.
Per la maggior parte dei colori puoi usare anche il nome inglese (white, black, red, blue, green e yellow).
Esempio 3:
<body style="background-color: red;">
NOTA: circa i colori supportati all'interno delle pagine web si faccia riferimento a questa tabella dei colori HTML
--------------------------------------------------------------------------------------------------------------
Ecco invece una tabella riassuntiva delle color keyword principali con relativi valori esadecimali (Hex) e RGB.
Oppure, VAI alla tabella interattiva:
http://fabrizio.zellini.org/tabella-interattiva-codici-e-nomi-dei-colori;
