I Colori e Simboli Speciali in HTML

1

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"

2

"#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 altre combinazioni. Ad esempio per le diverse tonalità del blu si possono usare:

"#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 (#8b4513)

Brown (#a52a2a) Sienna (#a0522d)

Firebrick (#b22222)

Crimson Tomato OrangeRed DarkOrange Orange

http://users.libero.it/luclep/itaint.htm

3

(#dc143c) (#ff6347) (#ff4500) (#ff8c00) (#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 (#c71585)

RosyBrown (#bc8f8f)

Wheat (#f5deb3)

Burlywood (#deb887)

Tan (#d2b48c)Goldenrod (#daa520)

Chocolate (#d2691e)

DarkKhaki (#bdb76b)

Khaki (#f0e68c)

PaleGoldenrod (#eee8aa)

DarkGoldenrod (#b8860b)

Moccasin (#ffe4b5)

NavajoWhite (#ffdead)

Bisque (#ffe4c4)

PapayaWhip (#ffefd5) Oldlace (#fdf5e6) Cornsilk

(#fff8dc)

AntiqueWhite (#faebd7)

FloralWhite (#fffaf0)

Seashell (#fff5ee)

LavenderBlush (#fff0f5)

SandyBrown (#f4a460)

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)

DarkOliveGreen (#556b2f) SeaGreen (#2e8b57)

MediumSeaGreen (#3cb371)

LightSeaGreen (#20b2aa)

DarkSeaGreen (#8fbc8b)

Aquamarine (#7fffd4)

MediumAquamarine (#66cdaa)

MediumTurquoise (#48d1cc)

Turquoise (#40e0d0)

MintCream (#f5fffa)

COLORI A PREVALENZA BLU

DeepSkyBlue (#00bfff)

DodgerBlue (#1e90ff)

CornflowerBlue (#6495ed)

MediumSlateBlue (#7b68ee)

RoyalBlue (#4169e1)

SlateBlue (#6a5acd)

DarkTurquoise (#00ced1)

MediumBlue (#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)

4

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) Beige (#f5f5dc)

Snow (#fffafa) LightYellow (#ffffe0) Ivory (#fffff0) 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

5

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: l’editor 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 sull’ultima (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).

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

7

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 < y perché x = 2 e y= 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

Spazio

! ! Punto esclamativo

" " " Virgolette

# # Cancelletto

$ $ Dollaro

% % Percentuale

& & & "e" commerciale

' ' Apostrofo

( ( Parentesi aperta

) ) Parentesi chiusa

* * Asterisco

8

+ + Più

, , Virgola

- - Meno

. . Punto

/ / Barra

: : Due punti

; ; Punto e virgola

< < < Minore di

= = Uguale

> > > Maggiore di

? ? Punto interrogativo

@ @ Chiocciola - "at"

[ [ Parentesi quadra aperta

\ \ Barra inversa

] ] Parentesi quadra chiusa

^ ^ Accento circonflesso

_ _ Barra orizzontale

` ` Accento grave

{ { Parentesi graffa aperta

| | Barra verticale

} } Parentesi graffa chiusa

~ ~ Tilde

Spazio non interrompibile

¡ ¡ ¡ Punto esclamativo invertito

¢ ¢ ¢ Cent

9

£ £ &puond; Sterlina

¤ ¤ ¤ Simbolo di valuta generico

¥ ¥ ¥ Yen

¦ ¦ ¦ Barra verticale spezzata

§ § § Sezione

¨ ¨ ¨ o &die; Umlaut (dieresi)

© © © Copyright

ª ª ª Ordinale femminile

« « « Parentesi angolari aperte

¬ ¬ ¬ Not

Trattino opzionale

® ® ® Marchio registrato

¯ ¯ ¯ o &hibar; Accento macron

° ° ° Gradi

± ± ± Più o meno

² ² ² 2 in apice

³ ³ ³ 3 in apice

´ ´ ´ Accento acuto

µ µ µ Micro

¶ ¶ ¶ Paragrafo

· · · Punto centrale

¸ ¹ ¸ Cedilla

¹ ¹ ¹ 1 in apice

º º º Ordinale maschile

» » » Parentesi angolari chiuse

10

¼ ¼ ¼ Un quarto

½ ½ ½ Un mezzo

¾ ¾ ¾ Tre quarti

¿ ¿ &iqurst; Punto interrogativo invertito

À À À A maiuscola con accento grave

Á Á Á A maiuscola con accento acuto

Â Â Â A maiuscola con accento circonflesso

Ã Ã Ã A maiuscola tilde

Ä Ä Ä A maiuscola dieresi

Å Å Å A maiuscola anello

Æ Æ Æ Dittongo AE maiuscolo

Ç Ç Ç C maiuscola cedilla

È È È E maiuscola con accento grave

É É É E maiuscola con accento acuto

Ê Ê Ê E maiuscola con accento circonflesso

Ë Ë Ë E maiuscola dieresi

Ì Ì Ì I maiuscola con accento grave

Í Í Í I maiuscola con accento acuto

Î Î Î I maiuscola con accento circonflesso

Ï Ï Ï I maiuscola dieresi

Ð Ð Ð Eth maiuscola, Islandese;

Ñ Ñ Ñ N maiuscola tilde

Ò Ò Ò O maiuscola con accento grave

Ó Ó Ó O maiuscola con accento acuto

Ô Ô Ô O maiuscola con accento circonflesso

11

Õ Õ Õ O maiuscola tilde

Ö Ö Ö O maiuscola dieresi

× × × Moltiplicazione

Ø Ø Ø O maiuscola barrata

Ù Ù Ù U maiuscola con accento grave

Ú Ú Ú U maiuscola con accento acuto

Û Û Û U maiuscola con accento circonflesso

Ü Ü Ü U maiuscola dieresi

Ý Ý Ý Y maiuscola con accento acuto

Þ Þ Þ Thorn maiuscola, Islandese

ß ß ß S tedesca

à à à A minuscola con accento grave

á á á A minuscola con accento acuto

â â â A minuscola con accento circonflesso

ã ã ã A minuscola tilde

ä ä ä A minuscola dieresi

å Ü å A minuscola anello

æ æ æ Dittongo ae minuscolo

ç ç ç C minuscola cedilla

è è è E minuscola con accento grave

é é é E minuscola con accento acuto

ê ê ê E minuscola con accento circonflesso

ë ë ë E minuscola dieresi

ì ì ì I minuscola con accento grave

í í í I minuscola con accento acuto

12

î î î I minuscola con accento circonflesso

ï ï ï I minuscola dieresi

ð ð ð Eth minuscola, Islandese

ñ ñ ñ N minuscola tilde

ò ò ò O minuscola con accento grave

ó ó ó O minuscola con accento acuto

ô ô ô O minuscola con accento circonflesso

õ õ õ O minuscola tilde

ö ö ö O minuscola dieresi

÷ ÷ ÷ Divisione

ø ø ø O minuscola barrata

ù ù ù U minuscola con accento grave

ú ú ú U minuscola con accento acuto

û û û U minuscola con accento circonflesso

ü ü ü U minuscola dieresi

ý ý ý Y minuscola con accento acuto

þ þ þ Thorn minuscola, Islandese

ÿ ÿ ÿ Y minuscola dieresi

SCRITTURA EQUAZIONI MATEMATICHE E CHIMICHESUL WEB CON CSS

Doppia freccia nell'equazione chimica

13

CO2 →← C + O2

HTML Codice: CSS Codice:

<div class="eq-c">

CO2 →← C +

O2

</div>

.rarrow {

position: relative;

font-size: 125%;

font-family: serif;

top: -0.5ex;

margin: 0px 2px;

}

.larrow {

position: absolute;

left: 0px;

top: 0.8ex;

}

Come si scrivono le frazioni in pagine web

HTML Codice:

2⁄11 2&frasl;11

c(NaOH) =

n(NaOH)/ V(NaOH)

= 1.2345 mol dm-3


<div class="eq-c">

c(NaOH) =

< div class="fraction">

n(NaOH)

/

V(NaOH)

< /div>

= 1.2345 mol dm-3

</div>

.fraction {

display: inline-block;

position: relative;

vertical-align: middle;

letter-spacing: 0.01em;

text-align: center;

}

.fraction > span {

14

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 + 2e-

R: Cr+62O-272- + 6e- →← 2Cr+33+


<div class="eq-c">

O: 

Te+4O-

22

→←

H+16Te+66 +

2e-

</div>

<div class="eq-c">

R: 

Cr+6272- +

6e-

.sy, .sy-r, .sy-g, .sy-b {

position: relative;

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;

width: 100%;

font-family: serif;

font-size: 70%;

text-align: center;

}

.eq-l, .eq-c {

position: relative;

padding: 15px 50px;

font-size: 11pt;

font-weight: 500;

15

→←

2Cr+33+

</div>

}

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

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

Vettori

A→ =

Δv→/ Δ t


<div class="eq-c">

A→ =


Δv→


Δ t

< /div>

</div>

.sy {

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;

top: -0.6em;

left: 0.2em;

font-size: 70%;

}

Limitia =

limΔ t→0

16

Δv/ Δ t

146C → 147N + ν–


<div class="eq-c">

a =

< div class="limes">

lim

Δ

t→0


Δv


Δ t

< /div>

</div>

<div class="eq-c">

146C →

147

N + ν–

</div>

.limes {


position: relative;

margin: 0 2px;


text-align: center;

}

.limes > span {

display: block;

}

.limes span.numup {

font-size: 70%;

}

.limes span.overdn {

font-size: 70%;

}

Somma e integrali

S = 5∑ n=0

(x + 1)n/ n

2π∫ 0 sinx dx = 0


<div class="eq-c"> .intsuma {

17

S =



5

∑

n=0




(x +

1)n


n

< /div>

</div>

<div class="eq-c">



2π

∫

0



sinx dx = 0

</div>


position: relative;


text-align: center;

margin-bottom: 0.5ex;

}

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

display: block;

font-size: 75%;

text-align: center;

}

.intsuma .lim-up {

margin-bottom: 0;

margin-left: 0.8ex;

}

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

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

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

Radicale

3√ 81

y = √ x2 + 6


<div class="eq-c">

3√81

</div>

<div class="eq-c">

y =

√<span

.n-root {

position: relative;

top: -1.3em;

left: 1.9ex;

font-size: 45%;

}

.radical {

font-size: 1.7em;

18

class="radicand">x2 +

6

</div>

}

.radicand {

padding: 0.5ex;

border-top: thin black solid;

}

I Colori e Simboli Speciali in HTML

Documents

Transcript of I Colori e Simboli Speciali in HTML