I COLORI

"#A0CE00"

"ALICEBLUE"

"#FAEBD7"

"ANTIQUEWHITE"

"#00FFFF"

"AQUA"

"#7FFFD4"

"AQUAMARINE"

"#F0FFFF"

"AZURE"

"#F5F5DC"

"BEIGE"

"#FFE4C4"

"BISQUE"

"#000000"

"BLACK"

"#FFEBCD" "BLANCHEDALMOND"

"#0000FF"

"BLUE"

"#8A2BE2"

"BLUEVIOLET"

"#A52A2A"

"BROWN"

"#DEB887"

"BURLYWOOD"

"#5F9EA0"

"CADETBLUE"

"#7FFF00"

"CHARTREUSE"

"#D2691E"

"CHOCOLATE"

"#FF7F50"

"CORAL"

"#6495ED"

"CORNFLOWERBLUE"

"#FFF8DC"

"CORNSILK"

"#DC143C"

"CRIMSON"

"#00FFFF"

"CYAN"

"#00008B"

"DARKBLUE"

"#483D8B"

"DARKSLATEBLUE"

"##008B8B" "DARKCYAN"

"#B8860B"

"DARKGOLDENROD"

"#A9A9A9"

"DARKGRAY"

"#FF1493"

"DEEPPINK"

"#00BFFF"

"DEEPSKYBLUE"

"##696969"

"DIMGRAY"

"#1E90FF"

"DODGERBLUE"

"#822222"

"FIREBRICK"

"#FFFAF0"

"FLORALWHITE"

"#228B22"

"FORESTGREEN"

"#FF00FF"

"FUCHSIA"

"#DCDCDC" "GAINSBORO"

"#F8F8FF"

"GHOSTWHITE"

"#FFD700"

"GOLD"

"#DAA520"

"GOLDENROD"

"#808080"

"GRAY"

"#008800"

"GREEN"

"#ADFF2F"

"GREENYELLOW"

"#F0FFF0"

"HONEYDEW"

"#FF69B4"

"HOTPINK"

"#CD5C5C" "INDIANRED"

"#4B0082"

"INDIGO"

"#FFFFF0"

"IVORY"

"#F0E68C"

"KHAKY"

"#E6E6FA"

"LAVENDER"

"#FFF0F5"

"LAVENDERBLUSH"

"#FFFACD"

"LEMONCHIFFON"

"#ADD8E6"

"LIGHTBLUE"

"#F08080"

"LIGHTCORAL"

"#E0FFFF"

"LIGHTCYAN"

"#FAFAD2"

"LIGHTGOLDENRODYELLOW"

"#90EE90"

"LIGHTGREEN"

"#D3D3D3"

"LIGHTGRAY"

"#FFB6C1"

"LIGHTPINK"

"#FFA07A"

"LIGHTSALMON"

"#20B2AA"

"LIGHTSEAGREEN"

"#87CEFA"

"LIGHTSKYBLUE"

"#778899"

"LIGHTSLATEGRAY"

"#B0C4DE"

"LIGHTSTEELBLUE"

"#FFFFE0"

"LIGHTYELLOW"

"#00FF00"

"LIME"

"#32CD32"

"LIMEGREEN"

"#FAF0E6"

"LINEN"

"#FF00FF"

"MAGENTA"

"#800000"

"MAROON"

"#66CDAA"

"MEDIUMAQUAMARINE"

"#0000CD"

"MEDIUMBLUE"

"#BA55D3"

"MEDIUMMORCHID"

"#9370DB"

"MEDIUMPURPLE"

"#3CB371"

"MEDIUMSEAGREEN"

"#7B68EE"

"MEDIUMSLATEBLUE"

"#00FA9A"

"MEDIUMSPRINGGREEN"

"#48D1CC"

"MEDIUMTORQUOISE"

"#C71585"

"MEDIUMVIOLETRED"

"#191970"

"MIDNIGHTBLUE"

"#F5FFFA"

"MINTCREAM"

"#FFE4E1"

"MISTYROSE"

"#FFDEAD" "NAVAJOWHITE"

"#000080"

"NAVY"

"#FDF5E6"

"OLDLACE"

"#808000"

"OLIVE"

"#6B8E23"

"OLIVEDRAB"

"#FFA500"

"ORANGE"

"#FF4500"

"ORANGERED"

"#DA70D6"

"ORCHID"

"#EEE8AA"

"PALEGOLDENROD"

"#98FB98"

"PALEGREEN"

"#AFEEEE" "PALETURQUOISE"

"#DB7093"

"PALEVIOLETRED"

"#FFEFD5"

"PAPAYAWHIP"

"#FFDAB9"

"PEACHPUFF"

"#CD853F"

"PERU"

"#FFC0CB"

"PINK"

"#DDA0DD" "PLUM"

"#B0E0E6"

"POWDERBLUE"

"#800080"

"PURPLE"

"#FF0000"

"RED"

"#BC8F8F"

"ROSYBROWN"

"#4169E1"

"ROYALBLUE"

"#8B4513"

"SADDLEBROWN"

"#FA8072"

"SALMON"

"#F4A460"

"SANDYBROWN"

"#2E8B57"

"SEAGREEN"

"#FFF5EE"

"SEASHELL"

"#A0522D"

"SIENNA"

"#C0C0C0"

"SILVER"

"#87CEEB"

"SKYBLUE"

"#6A5ACD"

"SLATEBLUE"

"#708090"

"SLATEGRAY"

"#FFFAFA"

"SNOW"

"#00FF7F"

"SPRINGGREEN"

"#468284"

"STEELBLUE"

"#D2B48C"

"TAN"

"#008080"

"TEAL"

"#D8BFD8"

"THISTLE"

"#FF6347"

"TOMATO"

"#40E0D0"

"TURQUOISE"

"#EE82EE"

"VIOLET"

"#F5DEB3"

"WHEAT"

"#FFFFFF"

"WHITE"

"#F5F5F5"

"WHITESMOKE"

"#FFFF00"

"YELLOW"

"#9ACD32"

"YELLOWGREEN"

Oltre a questi colori fondamentali possibile ottenere tantissime

combinazioni. Ad esempio per le diverse tonalit del blu si possono usare:

altre

"#0000CC"
"#000088"
"#000055"
"#000022"

ma tutte le combinazioni possibili sono supportate solo da schede grafiche con

16M di colori.
Vai su http://users.libero.it/luclep/itaint.htm per la tabella interattiva dei colori.
Volendo raggruppare i colori a seconda della prevalenza, si ha:

COLORI A PREVALENZA ROSSA

DarkRed
(#8b0000)

SaddleBrown Brown
(#8b4513)
(#a52a2a)

Sienna (#a0522d)

Firebrick
(#b22222)

Crimson
(#dc143c)

Tomato
(#ff6347)

OrangeRed
(#ff4500)

DarkOrange
(#ff8c00)

Orange
(#ffa500)

Coral (#ff7f50)

LightCoral
(#f08080)

LightSalmon
(#ffa07a)

Salmon (#fa8072)

DarkSalmon
(#e9967a)

IndianRed
(#cd5c5c)

Gold (#ffd700) Pink (#ffc0cb)

LightPink (#ffb6c1)

MistyRose
(#ffe4e1)

HotPink
(#ff69b4)

DeepPink
(#ff1493)

PaleVioletRed
(#db7093)

MediumVioletRed RosyBrown
(#c71585)
(#bc8f8f)

Wheat
(#f5deb3)

Burlywood
(#deb887)

Tan (#d2b48c)

Goldenrod
(#daa520)

DarkKhaki
(#bdb76b)

Khaki
(#f0e68c)

PaleGoldenrod DarkGoldenrod
(#eee8aa)
(#b8860b)

Moccasin
(#ffe4b5)

NavajoWhite
(#ffdead)

Bisque
(#ffe4c4)

PapayaWhip
(#ffefd5)

Oldlace (#fdf5e6)

Cornsilk
(#fff8dc)

Seashell
(#fff5ee)

LavenderBlush
(#fff0f5)

SandyBrown
(#f4a460)

AntiqueWhite FloralWhite
(#faebd7)
(#fffaf0)

Chocolate
(#d2691e)

COLORI A PREVALENZA VERDE

SpringGreen
(#00ff7f)

LawnGreen (#7cfc00)

MediumSpringGreen
(#00fa9a)

GreenYellow
(#adff2f)

Chartreuse
(#7fff00)

PaleGreen (#98fb98)

LightGreen (#90ee90)

YellowGreen
(#9acd32)

LimeGreen
(#32cd32)

ForestGreen
(#228b22)

DarkGreen (#006400)

OliveDrab
(#6b8e23)

SeaGreen
(#2e8b57)

MediumSeaGreen
(#3cb371)

LightSeaGreen
(#20b2aa)

DarkSeaGreen
(#8fbc8b)

Aquamarine
(#7fffd4)

MediumAquamarine
(#66cdaa)

MediumTurquoise
(#48d1cc)

Turquoise
(#40e0d0)

DarkOliveGreen
(#556b2f)

MintCream
(#f5fffa)

COLORI A PREVALENZA BLU

DeepSkyBlue DodgerBlue
(#00bfff)
(#1e90ff)

CornflowerBlue MediumSlateBlue RoyalBlue

(#6495ed)
(#7b68ee)
(#4169e1)

SlateBlue
(#6a5acd)

DarkTurquoise MediumBlue
(#00ced1)
(#0000cd)

DarkSlateBlue
(#483d8b)

SteelBlue
(#4682b4)

DarkBlue
(#00008b)

Indigo
(#4b0082)

MidnightBlue
(#191970)

SkyBlue (#87ceeb)

LightSkyBlue
(#87cefa)

LightBlue
(#add8e6)

PowderBlue
(#b0e0e6)

LightSteelBlue
(#b0c4de)

CadetBlue
(#5f9ea0)

MediumPurple
(#9370db)

BlueViolet
(#8a2be2)

DarkViolet
(#9400d3)

DarkOrchid
(#9932cc)

MediumOrchid
(#ba55d3)

AliceBlue
(#f0f8ff)

COLORI CON DUE O TRE COMPONENTI UGUALI E PREVALENTI

DarkGray
(#a9a9a9)

DimGray (#696969)

SlateGray
(#708090)

LightSlateGray
(#778899)

LightGrey
(#d3d3d3)

DarkCyan (#008b8b)

Gainsboro
(#dcdcdc)

LightCyan (#e0ffff)

LightGoldenrodYellow (#fafad2)

Thistle (#d8bfd8) Lavender (#e6e6fa)

Azure (#f0ffff)

DarkSlateGray
(#2f4f4f)

GhostWhite
(#f8f8ff)

Snow (#fffafa)

LightYellow (#ffffe0) Ivory (#fffff0)

Beige (#f5f5dc)
PaleTurquoise
(#afeeee)

Un altro modo per conoscere il codice di un colore quello di

utilizzare un programma di grafica capace di restituire tale
informazione durante la selezione del colore. Vediamo come si
ottiene ci in Photoshop 5.5 della Adobe:
Fare doppio clic sul colore di primo piano nella barra degli
strumenti. Nella finestra Selettore colore (FIG 2) che si aprir,
selezionare il colore desiderato.

FIG. 2
Nella stessa finestra in basso a destra (FIG 3) vi una cella
preceduta dal simbolo: #, in essa si trova il codice esadecimale che
descrive il colore selezionato.

FIG. 3

A questo punto sar sufficiente copiarlo e incollarlo nel proprio

documento.

Non si possiede Photoshop? Allora ci si pu appoggiare a programmi

alternativi e non necessariamente a pagamento, per esempio si
potrebbe utilizzare il Composer di Netscape: leditor di pagine web
fornito gratuitamente assieme al browser. Vediamo come ottenere
da questo programma il codice di un arancione:
Aprire Netscape (browser), in basso a destra vi saranno alcune
icone, fare clic sullultima (foglietto e penna): il pulsante che
lancia il Composer
FIG. 4
Fare un clic sulla freccia posta a lato della cella font color, nella
barra degli strumenti di Composer (FIG 5).

FIG. 5
Se la piccola lista di colori non dovesse essere sufficiente fare un
clic sul pulsante Other (Altri) nella parte bassa del menu.
Selezionare il colore desiderato, ritornare nella finestra principale e
inserire del testo qualsiasi nel documento. Il testo apparir del
colore selezionato (FIG. 6).

FIG. 6
Aprire il menu view e fare clic su page source (FIG 7).

FIG. 7
Il documento html creato dal Composer sar visualizzato in una
nuova finestra, dove si trover anche il codice del colore utilizzato
per il testo (FIG. 8).

FIG. 8
A questo punto sar sufficiente copiarlo e incollarlo nel proprio
documento.

Caratteri speciali
6

Quando si vuole inserire, nel testo di un file HTML, un carattere diverso da un

numero, dalle lettere dell'alfabeto (maiuscole o minuscole), o dalla normale
punteggiatura, necessario utilizzare le entit per i caratteri speciali. Infatti
anche se tale carattere presente nella nostra tastiera non detto che venga
visualizzato correttamente dai browser.
Ad esempio se si vuole visualizzare il simbolo di maggiore non possibile digitarlo
semplicemente in quanto i browser lo interpreterebbero come inizio di un tag. Le
entit per i caratteri sono di due tipi:
- le entit numerate;
- le entit con nome.
Le prime sono disponibili per tutti i caratteri speciali le seconde solo per alcuni.
Entrambe iniziano con il simbolo & ("e" commerciale) e terminano con il punto e
virgola.
Le prime sono composte dal simbolo # (cancelletto) seguito da un numero, le
seconde
da
un
set
di
caratteri
che
richiama
il
nome.
Esempio:
x &lt; y <BR>
perch&eacute; x &#61; 2 e y&#61; 4

- Netscape: Guida HTML

_ X

x<y
perch x = 2 e y = 4

Si riporta di seguito una tabella nella quale sono riportate per ogni carattere
l'entit numerica corrispondente, una breve descrizione e, se esiste, l'entit a
caratteri.

Carattere

Entit numerica

Entit a caratteri

Descrizione

&#32;

Spazio

&#33;

Punto esclamativo

"

&#34;

&#35;

Cancelletto

&#36;

Dollaro

&#37;

Percentuale

&

&#38;

'

&#39;

Apostrofo

&#40;

Parentesi aperta

&#41;

Parentesi chiusa

&#42;

Asterisco

&#43;

Pi

&#44;

Virgola

&#45;

Meno

&#46;

Punto

&#47;

Barra

&#58;

Due punti

&#59;

Punto e virgola

<

&#60;

&#61;

>

&#62;

&#63;

Punto interrogativo

&#64;

Chiocciola - "at"

&#91;

Parentesi quadra aperta

&#92;

&quot;

Virgolette

&amp;

"e" commerciale

&lt;

Minore di
Uguale

&gt;

Maggiore di

Barra inversa

SCRITTURA EQUAZIONI MATEMATICHE E CHIMICHE

SUL WEB CON CSS
Doppia freccia nell'equazione chimica
CO2 C + O2
HTML Codice:

CSS Codice:

<div class="eq-c">

.rarrow {

CO₂ <span
class="rarrow">&rarr;<span
class="larrow">&larr;</span></span> C +
O₂

position: relative;
font-size: 125%;
font-family: serif;
top: -0.5ex;

</div>

margin: 0px 2px;

}
.larrow {
position: absolute;
left: 0px;
top: 0.8ex;
}

Come si scrivono le frazioni in pagine web

HTML Codice:

11

²&frasl;₁₁

c(NaOH) =
n(NaOH)/ V (NaOH)
= 1.2345 mol dm-3
HTML Codice:

CSS Codice:

<div class="eq-c">

.fraction {

<i>c</i>(NaOH) =
< div class="fraction">
<span class="fup"><i>n</i>(NaOH)</span>
<span class="bar">/</span>
<span class="fdn"><i>V</i>(NaOH)</span>
< /div>
= 1.2345 mol dm^-3

display: inline-block;
position: relative;
vertical-align: middle;
letter-spacing: 0.01em;
text-align: center;
}
.fraction > span {

</div>

display: block;
padding: 0.2em;
}
.fraction span.fdn {border-top: thin solid
black;}
.fraction span.bar {display: none;}

Scrivere i numeri di ossidazione degli elementi

O: Te+4O-22 H+16Te+6O-26 + 2eR: Cr+62O-272- + 6e- 2Cr+33+
HTML Codice:
<div class="eq-c">

CSS Codice:
.sy, .sy-r, .sy-g, .sy-b {

<b>O: </b>
< span class="sy-r">Te<span
class="oxbr">+4</span></span><span
class="sy">O<span class="oxbr">2</span></span>₂

position: relative;

< span class="rarrow">&rarr;<span

class="larrow">&larr;</span></span>

< span class="sy">H<span

class="oxbr">+1</span></span>₆<span
class="sy-r">Te<span
class="oxbr">+6</span></span><span
class="sy">O<span class="oxbr">2</span></span>₆ +
< span class="sy-g">2e^-</span>
10

padding-left: 1px;
font-size: 110%;
font-weight: 500;
text-align: center;
.sy-r {color: #f00;}
.sy-g {color: #4f8c4f;}
.sy-b {color: #00f;}
.oxbr {
position: absolute;
top: -1em;
left: 0px;

</div>

width: 100%;
font-family: serif;
font-size: 70%;

<div class="eq-c">
<b>R: </b>
< span class="sy-b">Cr<span
class="oxbr">+6</span></span>₂<span
class="sy">O<span class="oxbr">2</span></span>₇^2- +
< span class="sy-g">6e^-</span>

text-align: center;
}
.eq-l, .eq-c {
position: relative;
padding: 15px 50px;
font-size: 11pt;
font-weight: 500;

< span class="rarrow">&rarr;<span

class="larrow">&larr;</span></span>

}
.eq-l {text-align: left;}

2<span class="sy-b">Cr<span
class="oxbr">+3</span></span>³⁺

.eq-c {text-align: center;}

</div>

Vettori
A =
v/ t
HTML Codice:

CSS Codice:

<div class="eq-c">

.sy {

<span class="sy"><i>A</i><span
class="oncapital">&rarr;</span></span> =
< div class="fraction">
<span class="fup">&Delta;<span
class="sy"><i>v</i><span
class="onsmall">&rarr;</span></span></span>
<span class="bar">/</span>
<span class="fdn">&Delta; <i>t</i></span>
< /div>
</div>

position: relative;
padding-left: 1px;
font-size: 11pt;
font-weight: 500;
text-align: center;
}
.sy span.oncapital {
position: absolute;
top: -1em;
left: 0.2em;
font-size: 70%;
}
.sy span.onsmall {
position: absolute;

11

top: -0.6em;
left: 0.2em;
font-size: 70%;
}

Limiti
a=
lim t0
v/ t
146C

147N

HTML Codice:

CSS Codice:

<div class="eq-c">

.limes {

<i>a</i> =
< div class="limes">
< span class="overup">lim</span>
< span class="overdn">&Delta;
<i>t</i>&rarr;0</span>
< div class="fraction">
<span class="fup">&Delta;<i>v</i></span>
<span class="bar">/</span>
<span class="fdn">&Delta; <i>t</i></span>
< /div>

display: inline-block;
position: relative;
margin: 0 2px;
vertical-align: middle;
text-align: center;
}
.limes > span {
display: block;
}

</div>

.limes span.numup {
font-size: 70%;
}

<div class="eq-c">

.limes span.overdn {

<span class="limes"><span
class="numup">14</span><span
class="overdn">6</span></span>C &rarr;
< span class="limes"><span
class="numup">14</span><span
class="overdn">7</span>
< /span>N + <span class="sy">&nu;<span
class="onsmall">&ndash;</span></span>

font-size: 70%;
}

</div>
12

Somma e integrali
S=

n=0

(x + 1)n / n

0 sinx dx = 0

HTML Codice:

CSS Codice:

<div class="eq-c">

.intsuma {

<i>S</i> =

display: inline-block;

<span class="intsuma">

position: relative;

<span class="lim">5</span>

vertical-align: middle;

<span class="sum-frac">&sum;</span>

text-align: center;

<span class="lim"><i>n</i>=0</span>
</span>

margin-bottom: 0.5ex;

< div class="fraction">

<span class="fup">(<i>x</i> +

.intsuma .lim, .intsuma .lim-up {

1)^<i>n</i></span>

display: block;

<span class="bar">/</span>

font-size: 75%;

<span class="fdn"><i>n</i></span>

text-align: center;

< /div>

</div>

.intsuma .lim-up {
margin-bottom: 0;
<div class="eq-c">

margin-left: 0.8ex;

<span class="intsuma">

<span class="lim-up">2&pi;</span>

.intsuma .lim {margin-bottom: -0.6ex;}

<span class="sum">&int;</span>

.intsuma .sum {font-size: 1.2em;}

<span class="lim">0</span>

.intsuma .sum-frac {font-size: 2em;}

</span>
sin<i>x</i> d<i>x</i> = 0
</div>

Radicale
3

y=

81

+6

HTML Codice:

CSS Codice:

<div class="eq-c">

.n-root {

13

<span class="radical"><span class="n-

position: relative;

root">3</span>&radic;</span><span

top: -1.3em;

class="radicand">81</span>

left: 1.9ex;

</div>

font-size: 45%;
}
.radical {

<div class="eq-c">
<i>y</i> =

font-size: 1.7em;

<span class="radical">&radic;</span><span

vertical-align: middle;

class="radicand"><i>x</i>² +

6</span>

.radicand {

</div>

padding: 0.5ex;
border-top: thin black solid;
}

14