L'Html non è un vero e proprio linguaggio di programmazione, ma un
sistema a marcatori per il posizionamento di testo, immagini ed altri
oggetti all'interno di un documento che avrà come estensione .htm o .
html.
<HTML>
<HEAD>
<TITLE>Titolo della pagina</TITLE>
</HEAD>
<BODY>
Testo della pagina
</BODY>
</HTML>
Il tag <TITLE></TITLE> serve per assegnare un titolo al documento che
comparirà nella finestra di visualizzazione del tuo browser. Guarda da
noi, c'è scritto "RISORSE.NET - Le basi di un documento <- La guida ad
Html".
Mentre il tag <BODY> contiene il testo e le immagini del documento. Ad
esempio in Risorse.net è ciò che stai leggendo adesso.
Andiamo adesso ad analizzare il primo tag veramente importante in
Html, <HEAD>
<HEAD>
Definisce le poprietà del documento Html. Altri tags contenuti all'interno
dell'Header possono essere:
<TITLE>
assegna un titolo alla pagina.
<BASE>
serve per indicare l'url del documento (poco usato).
<NEXTID>
identifica il documento successivo (poco usato).
<LINK>
mette in relazione uno o più documenti Html (poco usato).
<ISINDEX>
significa che all'interno della pagina è presente un comando di ricerca. In
Html 4 è stato in seguito sostituito con <INPUT>.
<META>
informazioni aggiuntive del documento in questione, utile soprattutto per
i motori di ricerca. Troverai informazioni più dettagliate a proposito nella
seconda puntata di questa guida.
<BODY>
Come abbiamo anticipato nell'introduzione alla puntata, il <BODY> contiene
il testo e le immagini della pagina. Gli attributi di tale marcatore sono:
BGCOLOR=colore
Ad esempio <BODY BGCOLOR=BLACK> così la pagina avrà uno sfondo nero. Il
colore può essere specificato anche con il sistema esadecimale (#000000 è
nero, #FFFFFF è bianco ecc.)
BACKGROUND=indirizzo
Ad esempio <BODY BACKGROUND=img/sfondo.gif> in questo modo, il documento
avrà come sfondo il file sfondo.gif contenuto nella cartella img.
TEXT=colore
Ad esempio <BODY TEXT=FFFFFF> in questo caso la pagina avra' lo sfondo
nero ed il testo bianco.
LINK=colore
Ad esempio
<BODY LINK="#C0C0C0">
i link saranno grigi. Di default sono blu.
ALINK=colore
Ad esempio <BODY ALINK="#800000"> i collegamenti attivi (Active Link) saranno
bordeaux. Di default sono rossi.
VLINK=colore
Ad esempio <BODY BLINK="FFFF00"> gli ipertesti visitati (Visited Link) saranno
gialli. Di default sono viola.
Esistono poi altri tags, letti però solo da Internet Explorer release 3.0 o
superiori:
BGPROPERTIES=FIXED
Ad esempio <BODY BGPROPERTIES=FIXED> allo scorrere della pagina, lo sfondo
rimane bloccato.
TOPMARGIN="valore"
Ad esempio <BODY TOPMARGIN=5> la distanza in pixel dal margine superiore.
Il rispettivo attributo in Netscape è MARGINHEIGHT.
LEFTMARGIN=valore
Ad esempio <BODY LEFTMARGIN=16> la distanza in pixel dal margine di
sinistra. Per ottenere l'identico risultato con Netscape è necessario
utilizzare MARGINWIDTH.
I documenti Html, sono solitamente testi non formattati, ossia durante la
loro compilazione, il browser non tiene conto degli spazi inseriti. Ad
esempio se volessimo distanziare una riga dall'altra, non possiamo
utilizzare il normale doppio Invio della tastiera (come in tutti i programmi
di videoscrittura), ma dovremmo imparare alcuni tags.
Vediamo insieme quali sono i marcatori per la formattazione del testo:
<P>
Serve per ritornare a capo e con relativo avanzamento di riga. Il tag di
chiusura (</P>) non è obbligatorio. L'attributo di Paragraph è ALIGN. I valori
di questo attributo sono:
<P ALIGN="left/center/right/justify">
Allinea il testo e gli altri elementi rispettivamente a sinistra, al centro, a
destra e giustificato. Di default il valore predefinito è left.
Per vedere un esempio clicca qui.
<DIV>
Serve per dividere il documento in modo tale da raggruppare alcuni
elementi. L'attributo specifico è ALIGN. I valori per ALIGN sono:
<DIV ALIGN="left/center/right/justify">
Allinea il testo e gli altri elementi rispettivamente a sinistra, al centro, a
destra e giustificato. Di default il valore predefinito è left.
Per vedere un esempio clicca qui.
Acronimo di Break row, viene utilizzato per eseguire uno o più ritorni
a capo. Non ha un rispettivo tag di chiusura.
Per questo marcatore, è previsto un solo attributo, tra l'altro poco usato,
che è CLEAR.
I valori per CLEAR sono:
<BR>
<BR CLEAR="left/right">
Ritorna a capo e riallinea tutto rispettivamente a sinistra e a destra.
<BR CLEAR="all">
Ritorna a capo e si posiziona all'altezza dei due margini puliti.
<HR>
Acronimo di Horizontal rule, serve a tracciare una riga orizzontale che
faccia da separatore. Gli attributi di questo tag sono:
WIDTH="valore"
Per esempio <HR WIDTH="500"> o <HR WIDTH="80%">. Nel primo caso, la riga sarà
lunga 500 pixel, nel secondo occuperà l'80% della larghezza della
pagina.
SIZE="valore"
Per esempio
<HR SIZE="4">.
La riga, avrà una grandezza pari a 4.
ALIGN="left/center/right"
Per esempio <HR ALIGN="center"> o <HR ALIGN="RIGHT"> o <HR ALIGN="LEFT">. Tre casi
in cui si allinea la riga rispettivamente al centro, a destra ed a sinistra.
NOSHADE
Per esempio
<HR NOSHADE>.
Elimina la tipica ombraggiatura alla riga.
COLOR=colore
Attribuisce un colore alla riga. Per esempio <HR COLOR=blue> o <HR
COLOR="#FF0000">. Purtroppo questo attributo funziona esclusivamente con
Microsoft Explorer.
Per vedere un esempio clicca qui.
<Hx>
(Heading) - Sono i sei livelli di intestazione che l'Html consente: da 1 a
6. Bisogna quindi sostituire <Hx> con <H1> o <H2> fino ad <H1>. Il rispettivo
tag di chiusura è </Hx>.
Al tag di heading si può associare un attributo: ALIGN.
Allinea il contenuto dell'heading rispettivamente
a sinistra (default), al centro, a destra e infine giustificato.
<Hx ALIGN="left/center/right/justify">
Per vedere un esempio clicca qui.
<FONT>
Questo tag, determina la dimensione, il colore e il carattere del testo
racchiuso fino a </FONT>. Gli attributi del marcatore sono:
SIZE=valore
Per esempio <FONT SIZE=2> Specifica la grandezza del testo, i valori vanno
da 1 a 7, di default è 3.
COLOR=colore
Per esempio
testo.
FACE=carattere
<FONT COLOR=RED>
o
<FONT COLOR=FF0000>
Specifica il colore del
Per esempio <FONT FACE=ARIAL> o <FONT FACE="ARIAL, VERDANA">. Specifica il
carattere del testo. Si possono attribuire più caratteri, in modo tale che
se, il visitatore non avesse quel font specifico, userebbe il sostituto.
I meta tags sono una parte fondamentale in un sito Web. Pur non
essendo visibili a livello grafico, consentono una migliore indicizzazione
nei motori di ricerca.
Non tutti i meta tags però sono legati ai motori di ricerca: ne esistono
altri che permettono di impostare cookies, cambiare pagina o aggiornare
la stessa dopo un tot di secondi, inserire effetti grafici all'entrata o
all'uscita dalla pagina, stabilire il copyright e altro ancora...
Vediamo di esaminare da vicino questi marcatori nascosti:
<META>
Innanzitutto bisogna indicare la posizione in cui vanno inseriti i meta
tags. E' importante che essi siano presenti nell'<HEAD></HEAD>.
Vediamo di esaminare i meta tags uno per uno:
<META NAME="DC.Title" CONTENT="Titolo">
Specifica il titolo al documento. A differenza di <TITLE></TITLE> non
attribuisce un nome alla finestra aperta e quindi non apparirà nel
browser.
<META NAME="description" CONTENT="Descrizione del documento">
Specifica una breve descrizione del sito che non deve avere più di 300
caratteri. Questo riassunto dei contenuti del sito verrà utilizzato dai
motori di ricerca per indiricizzare il sito.
<META NAME="keywords" CONTENT="Parole, chiave">
In questo meta tag vanno inserite le principali parole chiave degli
argomenti trattati dal sito separate una dall'altra con una virgola. E'
indispensabile utilizzare solo le parole adatte e non superare i 1.000
caratteri.
<META NAME="robots" CONTENT="index/noindex/follow/nofollow">
Questo meta tag permette ai robots dei motori di ricerca di indicizzare o
meno il documento. I valori sono:
index la pagina viene indicizzata.
noindex la pagina non viene indicizzata.
follow le pagine linkate al documento in questione vengono indicizzate.
nofollow le pagine linkate al documento in questione non vengono
indicizzate.
<META NAME="revisit-after" CONTENT="15 days">
Invita il robot del motore di ricerca a ritornare ed indicizzare la pagina
nel periodo impostato nell'attributo CONTENT (in questo caso 15).
<META NAME=GENERATOR CONTENT="nome del tuo editor">
Specifica l'editor utilizzato per creare il documento. Se il supporto di
Risorse.net con i tutorial e le mailing list presenti ti è stato di aiuto per
realizzare il tuo sito, puoi inserire:
<META NAME=GENERATOR CONTENT="Risorse.net - http://www.risorse.net">.
<META NAME="copyright" CONTENT="Copyritght.Autore.1998">
Specifica chi è il detentore dei diritti d'autore dei contenuti pubblicati in
quel documento.
<META HTTP-EQUIV="expires" CONTENT="Sun, 01 Jan 2000 01:10:00 GMT">
Indica al browser quando il documento dovrà essere cancellato. La data
va inserita nel formato Gmt, e quindi giorno, numero del mese, anno e
ora. Il tutto in inglese.
<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx;expires=Sunday, 01-Jan-00 01:10:00
GMT; path=/">
Imposta un cookie con la data di scadenza (sempre in formato Gmt e in
inglese).
<META http-equiv="REFRESH" content="5">
Aggiorna una pagina dopo i secondi stabiliti nell'attributo CONTENT
(nell'esempio 5). Per far sì che dopo i secondi stabiliti il visitatore venga
mandato su una nuova pagina il codice da usare è:
<META http-equiv="REFRESH" content="5; url=pagina.htm">
<META name="language" content="it">
Indica la lingua usata nel documento. Nel caso di possibilità di scelta, si
può usare:
<meta name="language" content="it, eng">
<META name="AUTHOR" content="Nome e cognome autori">
Specifica l'autore materiale della pagina.
<META name="reply-to" content="indirizzo email autori">
Indica l'indirizzo email da utilizzare per contattare gli autori materiali
della pagina.
Esiste un altro meta tag che solo sul browser Internet Explorer permette
di ottenere gradevoli effetti in entrata o in uscita di pagina.
<meta http-equiv="Page" content="revealTrans(Duration=x,Transition=x)">
Per ottenere un effetto in entrata di pagina, bisogna sostituire la dicitura
Page con Page-Enter, mentre per l'uscita di pagina si utilizza Page-Exit. Nel
meta tag si può anche impostare la durata (Duration) e il tipo (Transition) di
animazione. La durata va espressa in secondi, quindi per un effetto di 3
secondi si digita Duration=3. I tipi di transizione sono molti e ti consigliamo
di cercare il tuo preferito impostando Transition su un valore a random,
per esempio Transition=9.
In Html è possibile specificare lo stile
in cui deve essere visualizzato il testo. Esistono molti tags, per gli effetti
più disparati:
<U>
Appone una sottolineatura al testo compreso tra i tags
visualizzare un esempio, clicca qui.
<U></U>.
Per
<EM>
Rende corsivo il testo compreso tra i tags <EM></EM>. Lo stesso risultato si
può ottenere con il tag <I></I>. Per vedere un esempio pratico, clicca qui.
<STRONG>
Rende grassetto il testo accluso ai tag <STRONG></STRONG>. Lo stesso effetto
si può raggiungere utlizzando i tags <B></B>. Anche per questo marcatore
è disponibile un esempio.
<BIG>
Ingrandisce il testo di un valore. Il rispettivo tag di chiusura è
L'esempio è reperibile qui.
</BIG>.
<SMALL>
Esattamente l'effetto contrario del tag
chuide con </SMALL>. Ecco un esempio.
<BIG>.
La marcatura
<SMALL>,
si
<SUB>
Il testo racchiuso tra i tags <SUB></SUB> appare con un indice più basso e
un font minore. Clicca per vedere un esempio.
<SUP>
Il testo racchiuso tra i tag <SUP></SUP> appare con un indice più alto e un
font minore. Anche per questo marcatore, Risorse.net ha preparato un
esempio.
<CODE>
Il testo racchiuso tra i marcatori <CODE></CODE> appare come un esempio
di codice con una spaziatura fissa. Clicca qui per visualizzare un
esempio.
<STRIKE>
Depenna il testo incluso ai tag <STRIKE></STRIKE>. Lo stesso effetto si può
ottenere con <DEL></DEL>. Vedi l'esempio.
<BLINK>
Rende il testo lampeggiante. Compatibile però solo con Netscape. Per
rendere questo tag compatibile sia da Ns che da Ms Ie bisogna ricorrere
a Dynamic Html. Per saperne di più, visita la nostra raccolta Dhtml con
297 scripts e consulta l'arretrato della mailing list "Una demo Dhtml a
settimana" in cui si è trattato questo esempio. Per vedere comunque
questo marcatore in funzione, clicca qui (solo con Ns).
<MARQUEE>
Tag proprietario di Microsoft Internet Explorer, serve per far scorrere il
testo. Il rispettivo marcatore di chiusura è </MARQUEE>. Come il comando
precedente, anche questo può diventare compatibile con il browser
concorrente (in questo caso Netscape) grazie all'asusilio di Dynamic
Html: vedi a tal proposito l'arretrato della lista "Una demo Dhtml a
settimana" in cui si è trattato questo esempio.
Esistono comunque degli attributi per <MARQUEE>:
BORDER=valore
Per esempio: <MARQUEE BORDER="0"> fa sì che lo spazio assegnato al testo
scorrevole non abbia il bordo.
BEHAVIOR="slide/alternate"
Per esempio: <MARQUEE BEHAVIOR="slide"> fa scorrere il testo con l'opzione
"bloccato". Se al posto di slide mettessimo alternate, allora l'opzione sarebbe
"alternato".
DIRECTION="right/left"
Per esempio:
<MARQUEE DIRECTION=right>
fa scorrere il testo verso destra.
WIDTH="valore"
Per esempio:
pixel.
<MARQUEE width="100">
delimita la larghezza del testo a 100
<MARQUEE height="20">
delimita l'altezza del testo a 20 pixel.
HEIGHT="valore"
Per esempio:
BGCOLOR="colore"
Per esempio: <MARQUEE bgcolor="#800000"> imposta il colore di sfondo. Se non
aggiungessimo questo attributo, il marquee avrebbe lo stesso colore
dello sfondo del documento.
LOOP="infinite/valore"
Per esempio: <MARQUEE loop="2"> specifica quante volte deve scorrere il
testo. Se non impostassimo tale parametro, il ciclo sarebbe continuo.
SCROLLMOUNT=valore
Indica il numero di pixel tra successivi marquee.
SCROLLDELAY=valore
Imposta la velocità di scorrimento.
VSPACE=valore
Specifica la distanza dal margine superiore e inferiore dal quale
comincerà lo scorrimento della frase.
HSPACE=valore
Definisce la distanza dal margine destro e sinistro dal quale comincerà lo
scorrimento.
Finora abbiamo esaminato come inserire del testo, formattarlo e dargli
uno stile. E' possibile però, non solo l'inserimento delle immagini, ma
anche la loro corretta disposizione all'interno della pagina:
<IMG>
Il comando utilizzato per visualizzare un'immagine, è strettamente legato
all'attributo SRC. Ad esempio: <IMG SRC="percorsoimmagine">. Questo tag però,
possiede molti attributi, qui sotto tutti elencati:
WIDTH=valore
Attribuisce la larghezza dell'immagine; è possibile ometterlo, ma la sua
mancanza può rallentare il caricamento del documento.
HEIGHT=valore
Imposta l'altezza dell'immagine; anch'esso può essere omesso, ma come
per l'attributo precedente, la sua mancanza può rallentare il caricamento
del documento.
BORDER=valore
Stabilisce la grandezza del bordo che circonda l'immagine. Anche questo
attributo può venire meno, ma è altamente consigliato nel caso in cui
venga associato un link all'immagine. In tal caso infatti, il bordo, avrà
come valore di default 1.
ALT=testo
Inserisce il testo che deve essere visualizzato in alternativa all'immagine
(alternate text).
HSPACE=valore
Imposta la distanza a sinistra e a destra dell'immagine.
VSPACE=valore
Imposta la distanza in alto e in basso dell'immagine.
LOWSRC=percorsoimmagine
Permette, nel caso in cui si debba caricare un'immagine di grosse
dimensioni, di visualizzarla con una risoluzione più bassa, in attesa che la
stessa venga visualizzata all'esatta risoluzione.
ALIGN="top/bottom/middle/absmiddle/absbottom/right/left"
Allinea l'immagine in base alle proprie esigenze. I valori da usare sono:
top: In alto.
bottom: In basso.
middle: In mezzo.
absmiddle: In mezzo rispetto al testo.
absbottom: Il testo viene allineato alla base dell'immagine.
right: A destra.
left: A sinistra.
Fine modulo
Adesso, passiamo invece alla gestione di liste, all'interno di
un documento ipertestuale.
Ultim'ora
Windows XP
come
Longhorn
Liste ordinate
Colpire MsIE
La lista è una sequenza di paragrafi. Il tag che realizza una con Java,
usando però
lista ordinata è: <OL>, mentre quello che individua ogni
FireFox
singolo elemento è <LI>. La presenza del tag </LI> non è
obbligatoria.
Nuova
È possibile inoltre annidare varie liste, ossia inserire un lista versione di
Linux SuSe
all'interno di un'altra. Questo tag, ha tre attributi:
TYPE="valore"
Che serve a definire una numerazione. I valori possono
essere numerici (1,2,3,4) o alfabetici (a,b,c,d).
START="valore"
Nel caso in cui si voglia cominciare la lista con numeri o
lettere diverse da 1 e A.
Precipita
l'Italia nel
campo ICT
IBM conferma
la leadership
nel mercato
dei server
Prendi »
VALUE="valore"
Se si volesse attribuire un valore estraneo alla conformità della lista. Per
esempio:
<ol type="A">
<li>Prova 1</li>
<li>Prova 2</li>
<li>Prova 3</li>
<ol type="I" start="2">
<li>Prova A</li>
<li type="1" value="10">Prova B</li>
<li>Prova C</li>
</ol>
</ol>
Clicca qui per vedere il risultato del suddetto esempio.
Liste non ordinate
Il tag utilizzato è <UL>. Ogni elemento della lista va racchiuso tra i tag
e il corrispettivo tag non obbligatorio </LI>. L'attributo di tale tag è:
<LI>
type=circle
Imposta la punteggiatura a forma di piccolo cerchio.
type=square
Imposta la punteggiatura a forma di quadrato.
Clicca qui per vedere un esempio di lista non ordinata.
Liste discorsive
Serve a gestire oggetti che abbiano dei paragrafi di spiegazione. Il tag è
<DL>. Le voci sono identificate dal tag <DT> e i paragrafi da <DD>. Nessun
attributo è previsto da questo tag.
Riprendiamo il discorso delle immagini iniziato nella scorsa puntata e
vediamo come creare mappe cliccabili grazie all'ausilio di Html.
Prima di cominciare, vorremmo sottolineare l'esistenza di due tipi di
mappe: lato client e lato server. Quest'ultime funzionano interagendo in
modo simile a quelle lato client (che tratteremo in questa puntata):
cliccando su una regione attiva dell'immagine, verranno inviate al server
le coordinate che restituirà un documento oppure eseguirà uno script.
Esaminiamo ora le mappe lato client.
Le immagini cliccabili suddivise in regioni vengono chiamate "image
map". Ogni parte cliccabile viene chiamata "hot spot". Per definire una
mappa si utilizza il seguente schema:
<MAP NAME="nome">
<AREA SHAPE="forma" COORDS="x,y,z..." HREF="link" TITLE="testo">
</MAP>
<IMG SRC="immagine" USEMAP="#nome" BORDER=0>
Vediamo di esaminare i tags e gli attributi usati per realizzare una
mappa:
NAME="nome"
Identifica il nome da dare alla mappa in modo da essere richiamato
all'interno del tag <IMG> e più precisamente nell'attributo USEMAP.
SHAPE="rect/oval/circle/point"
Stabilisce la forma da dare a una regione cliccabile all'interno
dell'immagine. I possibili attributi sono:
rect: di default. Disegna un rettangolo. Le coordinate da specificare sono
due coppie: il punto in alto a destra e quello in basso a sinistra.
oval: disegna un ovale. Le coordinate da specificare sono due coppie: il
punto in alto a destra e quello in basso a sinistra del rettangolo che
racchiude la figura.
circle: disegna un cerchio. Le coordinate da specificare sono due coppie: il
centro e un punto qualsiasi della circonferenza.
point: una coppia di punti.
HREF=link
Imposta un collegamento ipertestuale a cui deve portare una
determinata regione dell'immagine.
TITLE="testo"
Equiparabile all'attributo ALT per le immagini. Definisce quindi un
alternate text per la zona delimitata dall'attributo SHAPE. Questo attributo
è compatibile solo con Ms Ie.
Adesso che abbiamo esaminato il codice di una mappa, vediamo di
mettere alla prova ciò che abbiamo imparato creando proprio un esempio
ad hoc. Per vederlo, fai click qui.
Una parte molto importante e complessa di Html, è rappresentata dalle
tabelle, usate, nel 90% dei casi per impostare il layout di un sito,
piuttosto che elencare dati. E' per questo, che abbiamo dedicato
un'intera puntata a questo argomento così vasto.
<TABLE>
Una tabella è strutturata in righe, composte da celle. Le celle possono
contenere immagini, collegamenti, testi; la dimensione delle stesse,
viene gestita automaticamente a seconda della dimensione dei suoi
contenuti, oppure impostando attraverso degli appropriati attributi i
valori per la grandezza e l'altezza delle celle.
Ogni riga viene definita con <TR> (Table rows). Per dividere ogni riga in
celle differenti, il tag corretto è <TD>.
Per vedere come utilizzare questi marcatori assieme, creando una
tabella, guarda la figura qui sotto:
Vediamo ora gli attributi del comando
<TABLE>:
BORDER="valore"
Serve per assegnare un bordo alla tabella (sia alle righe che alle celle).
Di default tale valore è uguale a 0 (su Ms Ie, su Netscape il default è 1,
ma di colore trasparente).
WIDTH="valore"
Imposta la larghezza della tabella. Può essere espresso sia in pixel che in
percentuale. Questo attributo, può essere omesso, se comunque
presente all'interno dei tags <TR> e <TD>.
HEIGHT="valore"
Definisce l'altezza della tabella. Può anch'esso mancare, se si verificano
le condizioni di cui sopra. Come il precedente attributo, i valori possono
essere espressi sia in pixel che in percentuale.
ALIGN="left/center/right"
Dove va allineata la tabella rispetto al documento. I valori di
possono essere: right, left o center.
align,
CELLPADDING="valore"
Attribuisce lo spazio in pixel che deve esistere tra il contenuto della cella
e il bordo della stessa. Di default è uguale a 1.
CELLSPACING="valore"
La larghezza del bordo delle celle. Di default è uguale a 2.
BGCOLOR="colore"
Specifica un colore si sfondo alla tabella o alla cella (a seconda del tag di
cui fa parte). Il colore può essere specificato sia con valori esadecimali
(#FFFFFF = bianco) sia con valori testuali (white = bianco).
BACKGROUND="percorso"
Assegna un file d'immagine come sfondo alla tabella. Il file può essere
richiamato includendo l'indirizzo di host (http://...) oppure segnalando il
semplice nome del file (sfondo.gif). Anche questo attributo può essere
specificato solo a una cella e anzi, questa seconda procedura è
consigliabile perché, se questo attributo venisse specificato direttamente
nel tag <TABLE>, Netscape lo interpreterà come accluso ad ogni marcatore
<TD>, mostrando quindi lo stesso sfondo in tutte le celle.
Per vedere un esempio di tabella con background inserito nel comando
<TABLE>, clicca qui (con Netscape si noterà l'errore).
BORDERCOLOR="colore"
Imposta un colore al bordo. Naturalmente, il valore del bordo deve
essere maggiore di 0. E' compatibile solo con Ms Ie.
BORDERCOLORLIGHT="colore"
Definisce un colore alla parte chiara del bordo della tabella. E'
compatibile solo con Ms Ie.
BORDERCOLORDARK="colore"
Definisce un colore alla parte scura del bordo della tabella. E' compatibile
solo con Ms Ie.
Anche il tag per suddividere ogni tabella in righe (<TR>), ha un paio di
attributi:
ALIGN="left/center/right"
Allinea orizzontalmente il testo contenuto in tutte le celle della riga, in
base al valore impostato. Codesto valore, può essere: left, center o right. Di
default è left.
VALIGN="top/middle/bottom/baseline"
Allinea in maniera verticale il contenuto di tutte le celle della riga, in base
al valore impostato. Il valore, può essere: top in alto, middle in mezzo, bottom
in basso, oppure baseline alla linea di base. Di default, è middle.
Adesso vediamo gli attributi del tag <TD>, il quale, ricordiamolo, serve a
dividere in celle le varie righe impostate con <TR>. Molti degli attributi di
<TD>, sono ripresi da quelli di <TABLE>. Vediamo comunque di analizzarli
tutti, uno a uno.
ALIGN="left/center/right"
Allinea orizzontalmente il contenuto della cella in questione. I valori di
align sono uguali a quelli dei tags <TABLE> e <TR>.
VALIGN="top/middle/bottom/baseline"
Allinea verticalmente il contenuto della cella in questione. I valori di
sono uguali a quelli dei marcatori <TABLE> e <TR>.
WIDTH="valore"
valign
Specifica in pixel o in percentuale la larghezza della cella.
HEIGHT="valore"
In pixel o in percentuale, l'altezza della cella.
BGCOLOR="colore"
Il colore di sfondo della cella. Anche in questo caso (come tutti gli altri
del resto), può essere indicato in maniera esadecimale (#000000 = nero) o
testuale (black = nero).
BACKGROUND="immagine"
Assegna un'immagine di sfondo alla cella.
NOWRAP
Serve ad evitare la divisione della linea contenuta nella cella.
ROWSPAN=valore
Specifica il numero di righe della tabella che la cella deve occupare. In
parole povere unisce due celle verticalmente. Il valore di default é
naturalmente 1 (cioé unisce una cella, quindi non fa alcun effetto).
Clicca qui per vedere un esempio in merito.
COLSPAN=valore
Specifica il numero di colonne che la cella deve occupare. Praticamente
unisce due celle orizzontalmente. Il valore di default, anche in questo
caso è 1.
Clicca qui per vedere un esempio con colspan.
Esistono altri due marcatori che servono all'allineamento del testo
all'interno di varie colonne. Questi due sono <COL> e <COLGROUP>.
<COL>
Allinea il testo in tutte le celle appartenenti a una stessa colonna. Di
default, l'allineamento è a destra (right), ma può essere left o center. Come si
può quindi capire, uno degli attributi di questo comando è ALIGN.
Un altro attributo è SPAN che specifica il numero di colonne che
assumeranno l'allineamento.
Clicca qui per vedere un esempio.
<COLGROUP>
Permette di specificare gli attributi align e valign per gruppi di colonne
permettendo così la loro definizione. Il numero di colonne per le quali
deve valere la definizione di tali attributi è specificato dal valore
assegnato a span.
Come <COL> quindi, anche <COLGROUP> ha gli attributi align e span. Il primo di
questi due può assumere i valori:
left: il contenuto delle colonne a cui fa riferimento, viene allineato a
sinistra.
right: il contenuto delle colonne a cui fa riferimento, viene allineato a
destra.
center: il contenuto delle colonne a cui fa riferimento, viene centrato.
justify: il contenuto delle colonne a cui fa riferimento, viene giustificato.
share: indica un carattere rispetto al quale deve avvenire l'allineamento del
contenuto della cella.
Microsoft Internet Explorer 4 o superiore, permette di visualizzare un
bordo esterno alla tabella. Per ottenere questo effetto, l'attributo da
usare è FRAME che va inserito nel tag <TABLE>, solo però se presente l'altro
attributo border.
I valori di frame sono:
below: visualizza solo i bordi esterni inferiori della tabella.
rhs: visualizza solo i bordi destri della tabella.
hsides: visualizza solo i bordi esterni orizzontali della tabella.
lhs: visualizza solo i bordi sinistri della tabella.
void: rimuove i bordi esterni della tabella.
above: visualizza solo i bordi esterni superiori della tabella.
box: visualizza tutti i bordi esterni della tabella.
vsides: visualizza i bordi esterni sia a destra che a sinistra della tabella.
Un altro attributo che, come frame, funziona solo se in presenza
dell'attributo border, è rules. Questo attributo però, vuole anche la presenza
dei marcatori <THEAD>, <TBODY> e <TFOOT>.
I valori di rules sono:
cols: visualizza i bordi verticali tra tutte le colonne.
rows: visualizza i bordi orizzontali tra tutte le righe.
none: rimuove tutte le righe interne alla tabella.
basic: visualizza i bordi orizzontali tra le sezioni <THEAD>, <TBODY> e <TFOOT>.
all: rende visibili tutte le righe all'interno della tabella.
In questa puntata spiegheremo come inserire i form, ossia i moduli per
l'immissione di dati; siano essi testo o numeri. Un argomento
particolarmente interessante e utile per i Web masters desiderosi di
rendere più interattive le proprie pagine.
In questa puntata, trattaremo solo la mera creazione dei moduli, non il
loro invio. Per questo, si veda la sezione Gratis e quella Script(s), alle
categorie Form to mail.
<FORM>
L'elemento <FORM> permette di definire un'area all'interno della quale un
utente può inserire qualsiasi dato (numeri, testo, valori booleani).
Gli attributi sono:
ACTION
E' l'indirizzo che individua lo script responsabile della ricezione e gestione
dei dati trasmessi. Se non specificato, di default verrà assegnato al
documento stesso che contiene la form. Il modo con cui vengono
trasmessi i dati cambia a seconda del valore di METHOD e ENCTYPE.
METHOD
Definisce la modalità di ricezione. Può assumere valore GET o POST. Nel
primo caso i dati vengono concatenati all'Url, il server li estrae e li passa
allo script; con POST i dati vengono direttamente al server. Per default è
GET.
ENCTYPE
Indica il formato dei dati trasmessi nel caso in cui il protocollo non
imponga un formato proprio. Se risulta METHOD=POST il valore di questo
attributo deve essere MIME.
<INPUT>
E' il comando principale per creare una forma di immissione dati.
NAME=nome
Identifica un campo per l'invio di un suo contenuto o la modifica dello
stesso, grazie ai linguaggi di programmazione per il Web (per esempio
Javascript).
VALUE=valore
Valore iniziale visualizzato all'interno del campo.
TYPE="checkbox/image/radio/password/text/submit/hidden/reset"
Imposta il tipo di dati che il campo accetterà.
Specificando all'interno dell'attributo TYPE, i valori
specificare altri parametri, vediamo quali:
password
e
text,
si possono
SIZE=valore
Imposta la dimensione del campo in caratteri.
MAXLENGHT=valore
Indica il numero massimo di caratteri che possono essere digitati in un
campo. Di default la sua lunghezza è pari a 20, ma l'input dell'utente è
illimitato, poiché la riga di testo scorrerà orizzontalmente. Tale valore
quindi potrà essere più grande di quello specificato nell'attributo SIZE, in
tal caso il campo scorrerà in modo appropriato.
TYPE=text
scrivi qualcosa
Continuando tra i possibile valori dell'attributo
vediamo gli altri possibili valori.
TYPE=password
...anche qui
TYPE
del tag
<INPUT>,
)
(esempio:
Sono le tipiche caselle spuntabili. Grazie a questo attributo, è possibile
selezionare più caselle di scelta. Se associaste ad esso il parametro
CHECKED, la casella risulterà automaticamente spuntata. Per esempio:
<INPUT TYPE=CHECKBOX CHECKED>.
CHECKBOX
)
(esempio:
Altra versione di caselle spuntabili. A differenza di CHECKBOX, all'interno di
un modulo è possibile selezionare una sola voce. Se associaste ad esso il
parametro CHECKED, la casella risulterà automaticamente spuntata. Per
esempio: <INPUT TYPE=RADIO CHECKED>.
RADIO
Inseriti tutti i campi destinati alla compilazione del modulo da parte
dell'utente, è necessario inserire i classici bottoni "Invia" e "Resetta" il
modulo.
Questi bottoni permettono di inviare un formulario o cancellarne il
contenuto riportandolo alle opzioni di default.
Per creare un bottone "Invia", o "Submit" è necessario digitare:
<INPUT TYPE=submit VALUE="Invia">
Per il tasto "Resetta", o "Reset":
<INPUT TYPE=reset VALUE="Resetta">
Come abbiamo visto, per inviare un modulo è necessario creare un grigio
tasto. E' possibile però personalizzare il "Submit" utilizzando
un'immagine. Ad esempio:
<INPUT TYPE=image SRC="image.gif" ALT="Invia">
E' inoltre possibile animare questi bottoni, per sapere come, leggi
l'arretrato della mailing list "Una demo Dhtml a settimana".
In certi casi, alcuni campi di un modulo devono essere nascosti. Per far
ciò, si utilizza il parametro TYPE=HIDDEN.
<TEXTAREA>
Questo marcatore permette di utilizzare più linee di testo. Gli attributi
ROWS=valore e COLS=valore ne definiscono rispettivamente l'altezza e la
larghezza in numeri di carattere.
Netscape nelle sue ultime versioni ha introdotto un nuovo attributo:
WRAP=off/virtual/phisical che permette di elaborare i dati inseriti nella textarea. I
valori servono a:
off: non elabora i dati.
virtual: inserisce un ritorno automatico. Questa modifica non viene resa
effettiva nell'invio del modulo.
phisical: come il valore virtual, inserisce un ritorno automatico che però
verrà inviato all'interno del forumulario.
Questa è una textarea alta 3 rig
<SELECT>
Il marcatore <SELECT> crea un menù a tendina. Ogni voce del menù viene
introdotta dal tag <OPTION>. All'interno del menù è possibile scegliere una
sola voce. Per far sì che sia permessa una scelta multipla (tenendo
premuto Ctrl), si dovrà aggiungere l'attributo multiple. Infine, l'attributo
SIZE=valore definisce l'altezza del campo <SELECT> (solo se presente il multiple).
Senza
multiple
Con
multiple
Opzione 1
Opzione 2
Opzione 1
I frames rappresentano, da quando sono stati implementati nel
linguaggio Html, amore e odio da parte dei Web masters più o meno
affermati. Usati ed abusati in certi casi, rimangono comunque il miglior
metodo per richiamare in una stessa pagina, più documenti Html, in
modo da lasciarne alcuni fissi.
<FRAMESET>
All'interno di questo tag, viene richiamata la struttura dei frames. A
questo marcatore non va avvicinato il marcatore <body> che
comporterebbe un errore nella pagina.
All'interno del
<FRAMESET>
sono presenti gli attributi:
ROWS="valore, valore, ecc."
Indica la larghezza orizzontale di ciarscuna riga che contiene il frame. I
valori possono essere espressi in percentuale ed in pixel. Per esempio:
<FRAMESET ROWS="50%, 25%, 25%">
<FRAME SRC="1.htm">
<FRAME SRC="2.htm">
<FRAME SRC="3.htm">
</FRAMESET>
Ed ecco come apparirebbe la pagina precedentemente divisa in riquadri:
1.htm
2.htm
3.htm
Sempre nel
<FRAMESET>
può essere inserito l'attributo:
COLS="valore, valore, ecc."
Imposta la larghezza delle colonne. Per esempio:
<FRAMESET COLS="50%, 25%, 25%">
<FRAME SRC="a.htm">
<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
Ed ecco come apparirebbe la pagina precedentemente divisa in riquadri:
a.htm
b.ht
m
c.ht
m
Naturalmente i due attributi possono essere utilizzati congiuntamente,
per esempio:
<FRAMESET ROWS="100,*">
<FRAME SRC="1.htm">
<FRAMESET COLS="150,*">
<FRAME SRC="a.htm">
<FRAME SRC="b.htm">
</FRAMESET>
</FRAMESET>
Ed ecco il risultato:
1.htm
a.ht
m
b.htm
I valori di ROWS e COLS possono essere espressi in tre modi differenti:
pixel: definisce le misure dei riquadri in pixel. E' un sistema poco
consigliabile da utilizzare.
percentuale: imposta la grandezza del riquadro in riferimento alla
dimensione totale della finestra.
*: la larghezza/altezza del riquadro sarà la parte massima che può
occupare il frame sottraendo l'area occupata dagli altri documenti.
Continuando con gli attributi di
<FRAMESET>,
troviamo:
BORDER="valore"
Specifica la larghezza in pixel del margine tracciato intorno ai frames.
FRAMEBORDER="yes/no"
Imposta un margine grigio intorno ai frames. Il valore
yes
è di default.
BORDERCOLOR="colore"
Consente di definire un colore per la cornice del frame.
FRAMESPACING="valore"
Lo spazio in pixel tra i frames.
Come abbiamo visto negli esempi prima proposti, tra
<FRAMESET></FRAMESET> vanno inseriti i vari frames. Ecco come:
<FRAME>
All'interno di questo marcatore vanno inseriti gli attributi per definirne le
caratteristiche. Essi sono:
SRC="pagina.htm"
Qui va impostato l'indirizzo in cui è presente la pagina Html che verrà
caricata nel riquadro. Se non venisse inserito, l'area del frame sarà
vuota.
NAME="nome"
Assegna un nome al frame. Esso verrà riutilizzato all'interno del tag <A
HREF="pagina.htm" TARGET="nome">. In questo modo, la pagina verrà richiamata
all'interno del frame con il nome presente nel TARGET="nome".
SCROLLING="yes/no/auto"
Indica la possibità di visualizzare (yes) o meno (no) la barra di
scorrimento. Con il valore auto (che è di default) la barra verrà inserita nel
momento in cui la quantità di oggetti presenti nella pagina occupi un'area
maggiore di quella riservata del riquadro.
NORESIZE
Se inserito, impedisce all'utente di modificare il frame trascinando con il
cursore le barre che lo delimitano.
MARGINWIDTH="valore"
Imposta il margine destro e sinistro dei frames. E' espresso in pixel ed il
suo valore non può essere inferiore ad 1.
MARGINHEIGHT="valore"
Imposta il margine inferiore e superiore dei frames. E' espresso in pixel
ed il suo valore non può essere inferiore ad 1.
BORDER="valore"
Definisce l'ampiezza in pixel del margine che contorna il riquadro.
FRAMEBORDER="yes/no"
Permette la creazione di frame senza bordo.
Una pagina Web non è formata di solo testo ed immagini. Esistono molti
altri oggetti che possono essere inseriti, come suoni, video, applet Java,
Vbscript o Javascript ecc.
Inziamo inserendo un suono di sottofondo:
<BGSOUND>
Questo comando permette di inserire suoni in formato Wav, Au e Mid.
All'interno del <BGSOUND> sono presenti gli attributi:
SRC
Specifica l'indirizzo del suono da riprodurre.
LOOP=infinite/valore
Specifica quante volte il suono deve essere riprodotto. Se
suono verrebbe ripetuto infinite volte.
loop=infinite
il
DELAY=valore
Indica l'intervallo di tempo espresso in secondi tra una riproduzione e
l'altra.
Vediamo ora come inserire un video in un sito Internet. Per farlo, è
necessario aggiungere degli attributi al classico tag <IMG> che abbiamo
visto nel corso della quarta puntata di questa guida.
DYNSRC=video
(DYnamic SouRCe): specifica l'indirizzo del video. Per esempio: <IMG
SRC="img.gif" DYNRSC="video.avi">, visualizza il video di nome video.avi se il
browser lo permette. In caso contrario, carica l'immagine img.gif.
START=fileopen/mouseover
Specifica quando il video dovrà cominciare. I valori possono essere:
fileopen: Il video inizierà non appena la nostra pagina Web verrà caricata.
mouseover: Non appena il cursore sarà posizionato sull'immagine il video
verrà caricato.
<OBJECT>
Questo comando permette di inserire nei documenti Html oggetti come
immagini, applet, Active X...
All'interno del <OBJECT> sono presenti gli attributi:
ALIGN="baseline/center/left/middle/right/textbottom/textmiddle/texttop"
Controlla l'allineamento dell'oggetto. I valori che puo assumere sono i
seguenti:
baseline: la base dell'oggetto si allinea con l'ultima riga del testo
circostante.
center: l'oggetto viene centrato.
left: l'oggetto si allinea con il margine sinistro e il testo che segue si
sviluppa lungo la parte destra dell'oggetto.
middle: la parte centrale dell'oggetto si allinea con l'ultima riga del testo
circostante.
right: l'oggetto si allinea con il margine destro e il testo che segue si
sviluppa lungo la parte sinistra dell'oggetto.
textbottom: la base dell'oggetto si allinea con l'ultima riga del testo
circostante.
textmiddle: la parte centrale dell'oggetto si allinea con la riga centrale del
testo circostante.
texttop: la parte superiore dell'oggetto si allinea con la parte superiore del
testo circostante.
BORDER=valore
Specifica la larghezza del bordo, espressa in numero.
CLASSID=url
Identifica l'oggetto.
DATA=url
Indica un data stream già esistente per inizializzare lo stato dell'oggetto.
DECLARE
Dichiara l'oggetto senza inizializzarlo.
HEIGHT=valore
Imposta la lunghezza dell'oggetto.
WIDTH=valore
Specifica la larghezza dell'oggetto, espressa in numero.
HSPACE=valore
Imposta lo spazio orizzontale a destra e a sinistra dell'oggetto. I valori
sono espressi in numero.
NAME=nome
Associa un nome all'oggetto. Utilizzato nel caso di invii tramite form.
STANDBY=messaggio
Indica il messaggio che deve apparire in attesa del caricamento
dell'oggetto.
TYPE
Specifica il tipo di dati.
USEMAP=url
Indica l'immagine che rappresenta una mappa da usare con l'oggetto.
Continuando nell'analisi dei tags necessari per l'inserimento di applet
Java, troviamo il marcatore <PARAM>, in cui sono presenti gli attributi:
NAME
Imposta il nome della proprietà.
VALUE
Imposta il valore della proprietà.
VALUETYPE=data/ref/object
Specifica come deve essere interpretato il valore. I valori possono
essere:
data: il valore è un dato (default).
ref: il valore è un Url.
object: il valore è un Url di un oggetto nello stesso documento.
TYPE
Specifica il tipo dell'oggetto.
<APPLET>
Questo comando permette di inserire un applet Java in un documento
Html. Ad esempio:
<APPLET CODE="nomeapplet.class" WIDHT=100 HEIGHT=200></APPLET>
Gli attributi del marcatore sono:
ALIGN="left/right/top/texttop/middle/absmiddle/baseline/bottom/absbottom"
Specifica l'allineamento del testo. I valori sono gli stessi del tag
esaminato nel corso della quarta puntata di questa guida.
<IMG>
ALT="testo alternativo"
Nel caso il browser non riuscisse a caricare l'applet, viene visualizzato il
testo alternativo.
CODE=nomefile
Indica il nome del file che contiene l'applet compilato.
CODEBASE=url
Specifica l'Url di base dell'applet. Altrimenti viene utilizzato l'Url del
documento.
HEIGHT=valore
Specifica il valore della lunghezza dell'area che deve essere lasciata
disponibile per la visualizzazione dell'applet. E' espresso in pixel.
WIDTH=valore
Indica il valore in pixel della larghezza dell'area che deve essere lasciata
disponibile per la visualizzazione dell'applet.
HSPACE=valore
Indica il numero di pixel che devono essere lasciati liberi a destra e a
sinistra dell'applet.
VSPACE=valore
Indica il numero di pixel che devono essere lasciati liberi sopra e sotto
l'applet.
NAME=nome
Assegna un nome all'applet. Viene utilizzato ad esempio per far
comunicare diversi applet presenti nello stesso documento.
<SCRIPT>
Questo comando permette di inserire nei documenti Html scripts
Javascript, Jscript o Vbscript. Qui esamineremo solo la sintassi per
richiamarli. Nell'undicesima puntata vedremo come imparare ad
utilizzarli.
Esistono due attributi per questo marcatore:
LANGUAGE=Javascript/Jscript/Vbscript
Specifica il linguaggio utilizzato nello script. I valori:
Javascript: la sintassi utilizzata viene scritta in Javascript.
Jscript: il codice presente è scritto in Jscript, la versione Javascript
implementata da Microsoft.
Vbscript: all'interno dello script è presente sintassi Vbscript.
SRC=nomefile
Richiama un file, nel caso in cui la sintassi scripting fosse presente in un
archivio esterno. Se presente, rende superfluo l'utilizzo dell'attributo
LANGUAGE.
Html è nato come linguaggio di impaginazione, ovvero veniva utilizzato
esclusivamente per pubblicare informazioni in modo da essere lette da
qualsiasi macchina collegata alla Rete. Non era importante che la pagina
avesse una grafica apprezzabile o che potesse interagire con l'utente,
con i database o altre applicazioni. Il suo unico scopo era quello di
rendere disponibile del testo.
Con l'avanzare delle versioni, Html, arrivato ora alla 4, ha visto
implementare funzioni e caratteristiche che permettevano ai nuovi Web
masters di inserire immagini, suoni, sintassi scripting, posizione elementi
e tanto altro ancora.
Una delle estensioni apportate ad Html originale, sono stati proprio i Css,
versione 1 e 2, resi disponibili insieme all'ultima versione del "vecchio",
la 4 per l'appunto.
Questi Cascade style sheets, o fogli di stile a cascata, in italianao, hanno
il grande pregio di dividere lo stile di un sito Web dai suoi contenuti.
Mentre in Html tutto ciò era ed è in molti casi tutt'ora, raggruppato in
unico codice, con i Css questo viene meno. Se per esempio, Html
imposta lo stile del testo in questo modo:
<HEAD>
</HEAD>
<BODY>
<FONT FACE=ARIAL COLOR=RED>Qui c'è il testo</FONT>
</BODY>
Con i Css è possibile predefinire lo stile del testo e far sì che gli elementi
specificati abbiano una grafica unifome:
<HEAD>
<STYLE>
font {font- family:arial; color:red}
</STYLE>
</HEAD>
<BODY>
<FONT>Qui c'è il testo</FONT>
</BODY>
Questo è solo un banale esempio, ma permette di capire le
caratteristiche dei Css.
Per imparare ad utilizzare questa tecnologia, semplice quanto Html, ma
indispensabile per siti di qualità, ti consigliamo di consultare la guida ai
Css pubblicata su Risorse.net.
Scarica
