Impostare il colore di fondo

Incominciamo col vedere come ottenere la nostra prima pagina HTML nel modo in cui desideriamo visualizzarla.

Se vogliamo impostare un colore di sfondo è necessario impostare il relativo attributo del tag body. Così:

<body bgcolor="blue">

bgcolor sta per "background color", cioè "colore di sfondo". Molti colori sono disponibili utilizzando le corrispondenti parole chiave in inglese.

Qui potete trovare un esempio della pagina con lo sfondo blu

Tuttavia non è consigliabile inserire la notazione del colore facendo riferimento a questo tipo di sintassi, dal momento che non possiamo sapere esattamente a quale tonalità di colore corrisponda il blu del computer dell’utente. È preferibile in molti casi utilizzare la corrispondente codifica esadecimale del colore, che ci permette – tra le altre cose – di scegliere anche tonalità di colore non standard. Con la notazione esadecimale il nostro esempio diventa:

<body bgcolor="#0000FF">

Ecco una tabella con la notazione di alcuni colori (molti di essi sono disponibili anche nelle varianti "dark" e "light", ad esempio: "darkblue", "lightblue"):

colore

parola chiave

notazione esadecimale

arancione

orange

#FFA500

blu

blue

#0000FF

bianco

white

#FFFFFF

giallo

yellow

#FFFF00

grigio

gray

#808080

marrone

brown

#A52A2A

nero

black

#000000

rosso

red

#FF0000

verde

green

#008000

viola

violet

#EE82EE


Il numero di colori che l’utente ha a disposizione dipende dalla scheda video. Oggi si va da una risoluzione minima di 256 colori a una risoluzione che prevede svariati milioni di colori.

Per capire di cosa stiamo parlando, provate a visualizzare questa pagina: cambiando il numero di colori visualizzati sul monitor. Per fare ciò, in Windows, andate in: Pannello di controllo > Schermo > Impostazioni e cambiate il numero dei colori, applicate i cambiameni e tornate a visualizzare la pagina. Come si vede la visualizzazione della tonalità di colore è sensibilmente diversa passando da 256 a 65.536 colori (16 bit).

Poiché non c’è modo di sapere quale scheda video abbia l’utente (o come l’abbia impostata), i webdesigner per molto tempo hanno fatto riferimento alla "palette sicura" dei 256 colori che sicuramente l’utente è in grado di visualizzare. Si tratta della cosiddetta palette web safe (cfr. articoli su "palette WEB SAFE" nella sezione PRO).

C’è però da dire che oramai la stragrande maggioranza dei computer è impostata per visualizzare almeno migliaia di colori, dunque l’utilizzo della palette "web safe" non è più così strettamente necessaria (lo era nei primi anni del web).

 

Html Head Title e Body


I primi quattro elementi che analizzeremo sono <HTML> <HEAD> <TITLE> <BODY>. Si noti che il linguaggio HTML è case insensitive: quindi <HEAD> è equivalente a <HeAd>.

<HTML>: é il primo tag di struttura presente in ogni documento HTML e specifica che il file é realizzato in linguaggio HTML. Tutto il testo e gli altri comandi Html presenti in un documento dovranno trovarsi all'interno dei tag HTML iniziale e finale.

Il secondo elemento, <HEAD>, specifica che le linee comprese fra il punto iniziale e quello finale del tag sono il prologo della parte rimanente del file e non viene visualizzato sullo schermo WWW.

All'interno della parte <HEAD> del documento possono apparire solo alcuni tag; in particolare il titolo <TITLE> del documento.
In visualizzazione il titolo diventa il titolo della finestra e viene registrato nella history .
 La funzione principale del titolo è quella di consentire di rintracciare la pagina, quindi il titolo deve essere pensato con cura.

Ecco un tipico esempio di utilizzo del tag <HEAD>:
<HTML>
<HEAD>
<TITLE>Corso: il linguaggio html - i primi quattro elementi </TITLE>
</HEAD>
.........
</HTML>

L'elemento <BODY>contiene la pagina vera e propria così come dovrà essere visualizzata. All'interno di questo elemento verrà posto il testo della pagina, i collegamenti ad altre pagine, ad immagini o ad altri oggetti utili per realizzare l'ipertesto.
<HTML>
<HEAD>
<TITLE>Corso il linguaggio Html - i primi quattro elementi </TITLE>
</HEAD>
<BODY>
......testo, immagini, link, liste ecc.......
</BODY>
</HTML>
Il tag </BODY> prevede alcuni attributi che di seguito andiamo ad analizzare.

Colore del fondo e del testo

Gli attributi di <body>

<body background= bgcolor= text= link= alink= vlink=>

Gli attributi devono essere aggiunti al marcatore <body>.
Usando gli attributi possiamo definire:
che un'immagine faccia da sfondo al documento - background---immagine
che un colore faccia da sfondo al documento - bgcolor --- colore del fondo
che il testo abbia un colore definito - text --- colore del testo
che il link abbia un colore definito -link --- colore del link visitato
che il link visitato abbia un colore definito -vlink --- colore del link visitato
che il link attivo abbia un colore definito -alink --- colore del link attivo

Il seguente attributo si può utilizzare per far sì che una immagine venga a costituire lo sfondo di una pagina:

background="file-grafico"
(es.: <body background="stucco.gif">)

Nel caso in cui l'immagine fosse più piccola rispetto alla pagina, essa viene automaticamente duplicata e affiancata alle sue copie come mattonelle su una parete.
Allo sfondo di colore uniforme si è sostituita una immagine.

Ovviamente abbiamo precedentemente provveduto a creare, oppure a prelevare da qualche archivio, l'immagine usata per lo sfondo. Quando si ricorre a simili accorgimenti, si consideri che la leggibilità del testo impaginato può diminuire, specie se i colori dell'immagine non contrastano sufficientemente con quelli usati per i caratteri.

In alternativa all'attributo background, si può usare:

bgcolor="#colore RGB"
(es.: <body bgcolor="#FFFFFF">)

che permette di assegnare un colore allo sfondo. Notate che per indicare il colore occorre utilizzare il sistema RGB in notazione esadecimale. RGB sta per Red, Green, Blue, i tre colori fondamentali e che, come è noto, miscelati opportunamente producono tutti i colori dello spettro. Per motivi strettamente informatici, la miscelazione degli indici RGB avviene in notazione numerica esadecimale (una notazione che ha base 16, e utilizza le dieci cifre della notazione decimale più le lettere fino alla F, ovvero: 0 1 2 3 4 5 6 7 8 9 A B C D E F, dove B, ad esempio, vale 11, e F vale 15).

Sembra complicato, ma vediamo come risolvere il problema nella pratica. Immaginiamo di voler ottenere, per il nostro sfondo, un bianco. Tornando indietro con la memoria ai nostri studi scolastici, ricorderemo che il bianco si ottiene con la somma di tutti i colori dell'iride. Nel nostro caso perciò dovremo assegnare ai nostri 3 indici (red, green, blue) il massimo valore, che nella notazione esadecimale si scrive FF, cioè: <body bgcolor="#FFFFFF"> (FF per il rosso, FF per il verde, FF per il blu). Volendo ottenere il nero, ovvero la sottrazione di tutti i colori, assegneremo ai nostri tre indici il valore più basso (zero, 00 in esadecimale), quindi: <body bgcolor="#000000">. Ancora, sapendo che il giallo è ottenuto con la somma di rosso e verde, scriveremo: <body bgcolor="#FFFF00">. Volendo ottenere, infine, un giallo più pallido, aggiungeremo un po' di blu nella nostra tavolozza elettronica, passando da 00 a 77: <body bgcolor="#FFFF77">.

Vi sembra ancora complicato? Niente paura, per fortuna ci sono due scappatoie. La prima consiste nel ricorso a programmi appositamente realizzati, come Color Manipulation Device, o a programmi di grafica come Paint Shop Pro, Corel Photo-Paint o BME (per Macintosh), grazie ai quali è sufficiente un click del mouse sul colore desiderato per vedersi restituire il suo valore numerico. L'altra scappatoia consiste nel ricorso al nome per esteso del colore, secondo questo elenco:

Nome colore Colore
Aqua (Celestino)  
Black  
Blue  
Fuchsia  
Gray  
Green  
Lime (Verde Chiaro)  
Maroon  
Navy (Blu Mare)  
Olive (Verde oliva)  
Purple  
Red  
Silver (Grigio Chiaro)  
Teal  
White  
Yellow  

Es.: <body bgcolor="yellow">. Quest'ultima soluzione è decisamente la più semplice, ma riduce a 16 il numero di colori che possiamo adottare (contro i 16 milioni della notazione esadecimale).

Per definire i colori del text, del link, del vlink, del alink devo procedere esattamente come per il bgcolor

(es.: <body bgcolor="#FFFFFF" text="#000000"
link="#red" alink="#000000" vlink="#navy" >)

 

Liste

Le liste che HTML è in grado di gestire sono di tipo numerato, non numerato e liste di definizioni. La struttura generica di una lista è:

  • elemento di inizio della lista;
  • sequenza di voci;
  • elemento di chiusura della lista.

Gli elementi di inizio delle liste possono essere:

  • <UL> per le liste non numerate ( Unnumbered List);
  • <OL> per le liste numerate ( Ordered List);
  • <DL> per le liste di definizioni ( Definition List).

Gli elementi di chiusura sono, per ogni tipo di lista, il corrispondente elemento di inizio preceduto dal carattere /.

Per le liste numerate e non, ogni voce è indicata da <LI> ( List Item), mentre per quelle di definizioni si devono usare:

  • <DT> per la dichiarazione di un nome;
  • <DD> per la definizione stessa.

button Basic Listings

Liste non numerate <ul><li>...</ul>

  • Oggi
  • Domani
 <ul>
<li>Oggi
<li>Domani
</ul>
  • UNO
    • DUE
      • TRE
 
<ul><li>UNO

    <ul><li>DUE

        <ul><li>TRE

</ul></ul></ul>

Liste numerate <ol><li>...</ol>

  1. Oggi
  2. Domani
 <ol>
<li>Today
<li>Tommorow
</ol>
  1. UNO
    1. DUE
      1. TRE
 
<ol><li>UNO

    <ol><li>DUE

        <ol><li>TRE

</ol></ol></ol>

Liste di definizione <dl><dt>...<dd>...</dl>

Mosaic
Mosaic è un browser per HTML che...
Netscape
Netscape è un altro browser per HTML più recente e .....
 <dl>
<dt>Mosaic
<dd>Mosaic è un browser per HTML che...
<dt>Netscape
<dd>Netscape è un altro browser per HTML più recente e .....
</dl>

Liste Compatte <dl compact><dt>...<dd>...</dl>

Oggi
Oggi sto meglio di ieri.
Domani
Domani starò meglio di oggi.
 <dl compact>
<dt>Oggi
<dd>Oggi sto meglio di ieri.
<dt>Domani
<dd>Domani starò meglio di oggi
</dl>

button Tipi di Liste

Stili per liste non numerate<li type=#> #=disk, circle, square

  • UNO
  • DUE
  • TRE
 <ul>
<li type=disc>UNO
<li type=circle>DUE
<li type=square>TRE
</ul>

Stili per liste numerate - uso di lettere e numeri <li type=#> #=A, a, I, i, 1

  1. UNO-UNO
  2. UNO-DUE

 

 <ol>
<li type=A>UNO-UNO
<li>UNO-DUE
</ol>

 
  1. UNO-UNO
  2. UNO-DUE

 

 <ol>
<li type=a>UNO-UNO
<li>UNO-DUE
</ol>

 
  1. UNO-UNO
  2. UNO-DUE

 

 <ol>
<li type=I>UNO-UNO
<li>UNO-DUE
</ol>

 
  1. UNO-UNO
  2. UNO-DUE

 

 <ol>
<li type=i>UNO-UNO
<li>UNO-DUE
</ol>

 
  1. UNO-UNO
  2. UNO-DUE

 

 <ol>
<li type=1>UNO-UNO
<li>UNO-DUE
</ol>

 

Stili per liste numerate (da quale lettera o numero) <ol start=#> #=number


  2. UNO-DUE
  3. UNO-DUE
    1. DUE-UNO
    2. DUE-UNO
 
<ol start=5>

<li type=A>UNO-UNO

<li>UNO-DUE

        <ol start=10>

               <li type=i>DUE-UNO

<li>DUE-UNO

</ol></ol>

 

Le liste possono essere annidate a piacere. Ogni livello ha un suo simbolo per indicare l'inizio di una nuova voce. In più una lista può contenere un'unica voce e ogni singola voce può contenere più paragrafi.

 

Ciaoo!

Font Face Semplici

<font face="Arial">Arial...</font>
Arial --- ABCdef123

 

<font face="Comic Sans MS">Comic Sans MS...</font>
Comic Sans MS --- ABCdef123

 

<font face="Courier">Courier...</font>
Courier --- ABCdef123

 

<font face="Courier New">Courier New...</font>
Courier New --- ABCdef123

 

<font face="Modern">Modern...</font>
Modern --- ABCdef123

 

<font face="MS Sans Serif">MS Sans Serif...</font>
MS Sans Serif --- ABCdef123

 

<font face="MS Serif">MS Serif...</font>
MS Serif --- ABCdef123

 

<font face="MS-DOS CP 932">MS-DOS CP 932...</font>
MS-DOS CP 932 --- ABCdef123

 

<font face="Roman">Roman...</font>
Roman --- ABCdef123

 

<font face="Script">Script...</font>
Script --- ABCdef123

 

<font face="Small Fonts">Small Fonts...</font>
Small Fonts --- ABCdef123

 

<font face="Symbol">Symbol...</font>
Symbol --- ABCdef123

 

<font face="Times Roman">Times Roman...</font>
Times Roman --- ABCdef123

 

<font face="Times New Roman">Times New Roman...</font>
Times New Roman --- ABCdef123

 

<font face="WingDings">WingDings...</font>
WingDings --- ABCdef123

 

+ Font Color

Specifica di un colore <font color=#> ... </font>

#=rrggbb Numero corrispondente al colore in esadecimale, oppure nome del colore:

Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
Black
Black		 
<font color=#000000>Black</font>



<font color=black>black</font>

 

 

Se vi piace quello che vedete e volete riprodurlo per il vostro sito,qui di seguito trovate i Tag per la sintassi di questo esempio di forte impatto per  l'effetto visivo.

niente di più facile che seguire le mie istruzioni e provate anche a cambiare i colori nella stringa preposta,oramai a questo punto sono sicuro che la sapete individuare anche se questa non è solo HTML ma anche Java e Turbo Pascal,la sintassi è quella per realizzare una scritta con i colori che cambiano automaticamente;Buon divertimento.Bruno. Nel caso vi do un piccolo aiuto dicendovi che è quella numerica,quindi colori esadecimali.La seguente:

 

 

<div><font face="verdana">&nbsp;</font></div>
<div align="center"><font face="Comic Sans MS" size="3"><b><script type="text/javascript">
//<![CDATA[
var text=" Vostro testo-prova<br>vostro testo prova !"
var speed=80
if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '<\/span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","4B","60","74","88","9C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
//]]>
</script></b></font></div>