Questo glossario
raccoglie alcuni termini e le loro
spiegazioni ad uso e consumo.
La
tecnologia è in continua evoluzione, così come il suo vocabolario e
i vari termini in uso.
L'HTML (hypertext
markup language) è un sistema basato sul contrassegno che,
attraverso un'apposita sintassi (tag html) ci permette di
realizzare pagine web. In pratica, sfruttando i tag che l'html,
giunto ormai alla versione 4, ci mette a disposizione,
andiamo a dare al browser le coordinate per l'inserimento e
la formattazione di ciascun elemento.
Per chi
comincia da zero è consigliabile utilizzare il notepad di
windows per scrivere il codice html delle pagine che si
andranno a realizzare. Esse avranno sempre estensione .htm o
.html. Esistono tuttavia appositi editor visuali che
permettono di operare con maggiore semplicità (frontpage,
dreamweaver ecc...)
Tag e attributi
Un tag HTML è un
comando che permette di delineare un elemento, e di influenzarlo
attraverso l'istruzione che contiene. Ad esempio se vogliamo applicare
il grassetto ad una parola, useremo la coppia di tag <b></b> (tag di
apertura e tag di chiusura) e al loro interno digiteremo la parola in
questione. Un ATTRIBUTO, associato ad un tag, è un'ulteriore proprietà
di formattazione. ES: <font face=arial>testo</font> - l'attributo 'face'
formatta il nostro testo, associando ad esso il carattere Arial.
Impostare una
pagina HTML
Tutte
le pagine che vorremo realizzare, dovranno avere
necessariamente un'impostazione di base, per essere
riconosciute e processate dal browser di navigazione:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
I tag <html></html>
aprono e chiudono la pagina;
Nei tag <head></head> andranno (oltre al titolo della
pagina) meta-tag (che vedremo in seguito), script, fogli di
stile, ecc;
I tag <title></title> conterranno il titolo del
nostro documento;
Infine i tag <body></body> conterranno il corpo della
pagina, il testo e tutti gli altri tag per la formattazione
degli elementi che inseriremo.
Il tag Body
Come
abbiamo visto, all'interno dei tag <body></body>, vanno
tutti gli elementi che verranno visualizzati a video. Questo
tag supporta molti attributi, tra cui, i più importanti
sono:
ES:
<body topmargin=1 bgcolor=#ffffff></body> - in questo
caso il margine superiore della nostra pagina avrà ampiezza
1 e il colore di sfondo sarà bianco (#ffffff).
* Nome
colore o codice colore;
** Se non si trova nella stessa cartella, specificare il
path;
*** Valore numerico
Formattazione del testo
Quelli che
seguono sono i tag più usati per formattare il testo (stile
del testo, colore del testo, grandezza del testo).
La coppia
di tag è utilizzata per definire tipo, grandezza e colore
del testo racchiuso in essa.
Ad esempio, attraverso la riga di codice:
<font face=verdana size=2 color=#000000>testo</font>
stabilisco che la parola 'testo', contenuta nei tag
<font></font>, sia di tipo Verdana (attributo face), di
grandezza 2 (attributo size) e di colore nero (attributo
color).
Altri TAG
<b></b>:
applicano lo stile grassetto al testo che è racchiuso in
essi;
<i></i>: applicano lo stile corsivo al testo che è racchiuso
in essi;
<u></u>: applicano lo stile sottolineato al testo che è
racchiuso in essi.
Paragrafi, allineamento
e blocchi
Definire un
paragrafo e allineare il testo:
Per definire
un paragrafo occorre utilizzare gli appositi tag <p>testo
del paragrafo</p>. Tutto il testo che racchiudono, farà
parte dello stesso paragrafo.
Per allineare
il testo occorre utilizzare l'attributo align.
ES1: <p align=center>testo allineato al centro</p> - Il
testo sarà allineato al centro della pagina;
ES2: <p align=left>testo allineato a sinistra</p> - Il testo
sarà allineato sul lato sinistro della pagina;
ES3: <p align=right>testo allineato a destra</p> - Il testo
sarà allineato sul lato destro della pagina
ES4: <p align=justify>testo giustificato</p> - Il testo sarà
giustificato e si adatterà alla pagina e ai margini.
Interruzioni di riga
Le
interruzioni di riga servono per interrompere appunto una
riga di testo in un punto, facendola riprendere a capo rigo.
Il tag utilizzato è <br> (break) e non prevede un ulteriore
tag di chiusura.
Definire
dei blocchi
Spesso in html
è utile definire dei blocchi, siano essi di solo testo,
testo e immagini, o altri elementi. La coppia di tag
utilizzata è <div></div> che indicano l'inizio e la fine di
un blocco. Il tag <div> supporta l'attributo align (come
abbiamo visto per i paragrafi).
Inserire un'immagine
Per
inserire un'immagine in HTML, viene usato il tag <img>
insieme all'attributo src:
<img src="immagine"> (se l'immagine non si trova nella
stessa cartella, occorre definire il path). Come per il tag
<br>, anche il tag <img> è di sola apertura (non prevede un
tag di chiusura).
Principali
Attributi
Tra gli
attributi che il tag <img> supporta, quelli che occorre
conoscere sono:
src -
path immagine
alt -
testo che appare quando ci fermiamo col puntatore
sull'immagine o quando
non visualizziamo l'immagine stessa
border
- valore numerico
width -
valore numerico che esprime la larghezza in pixel
height
- valore numerico che esprime la larghezza in pixel
ES: <img
src="immagine.gif" width=40 height=70 alt="la mia immagine"
border="0"> - Stiamo inserendo l'immagine 'immagine.gif', la
larghezza è di 40 pixel, l'altezza di 70, il testo
alternativo o esplicativo è 'la mia immagine', il bordo è
uguale a 'zero' (nessun bordo).
Collegamenti
ipertestuali e ancoraggi con nome
Probabilmente rappresentano la parte più importante nell'HTML
poichè ci permettono di spostarci all'interno di un sito,
visitandone tutte le pagine, o da un sito all'altro.
La coppia
di tag utilizzata per inserire un collegamento ipertestuale
è <a></a>.
Al tag <a>
bisogna associare l'attributo href. All'interno dei tag
<a></a> andrà il testo o l'immagine, a cui vogliamo
assegnare il collegamento.
Se ad
esempio vogliamo fare in modo che il visitatore del sito,
cliccando sull'immagine 'immagine.gif' venga portato al sito
'http://www.vuolo.net', useremo la seguente sintassi:
Nel tag img
abbiamo utilizzato l'attributo 'border=0' per fare in modo
che l'immagine non sia bordata. Infatti, quando applichiamo
un link a un'immagine, essa, di default, viene bordata.
L'uso dei
TARGET*
Il tag <a>
prevede, tra gli altri, l'attributo target="destinazione del
collegamento", dove, per destinazione del collegamento si
intende in quale finestra sarà aperta la pagina a cui è
collegato il link su cui andremo a cliccare. Se non
impostiamo alcun target, verrà riutilizzata la medesima
finestra del browser. Se invece all'attributo target daremo
il valore _blank, vale a dire target="_blank", cliccando sul
collegamento ipertestuale, la pagina ad esso collegata sarà
aperta in una nuova finestra.
*L'impiego
dei target è molto utile se si utilizzano i frame.
Ancoraggi
con nome
Creare un
ancoraggio con nome significa definire un 'segnalibro'
all'interno di una pagina web e far puntare ad esso un
collegamento ipertestuale. Si tratta in pratica di
costituire un link che consente la navigazione all'interno
dello stesso documento web. Prima di tutto occorre definire
il segnalibro:
<a name="segnalibro">Testo</a>
In secondo
luogo bisognerà creare il collegamento che punta al
segnalibro così creato:
<a href="#segnalibro">Vai
al segnalibro creato</a>
Ora
cliccando sul link 'Vai al segnalibro creato', saremo
portati direttamente alla parola 'Testo'.
(è possibile assegnare segnalibri non solo al testo ma anche
ad altri elementi, come ad esempio alle immagini).
Le tabelle
Le tabelle,
in HTML, oltre ad un uso classico (catalogazione ecc..)
vengono usate per creare il layout delle pagine web. UN
giusto utilizzo, infatti, anche se comunque limitato,
consente di creare siti web di grande impatto visivo.
Per inserire
una tabella si utilizzano i tag <table></table>. Al loro
interno vanno ancora i tag <tr></tr> che marcano una
riga; nidificati tra questi, a loro volta, vanno i tag <td></td>
che delineano invece le colonne (celle). All'interno di questi
ultimi andranno gli elementi racchiusi nella tabella. Il codice
sorgente avrà così la seguente struttura:
Come si può
notare sono stati inseriti degli attributi propri delle tabelle
(e delle celle in esse contenute):
width
- larghezza tabella o cella espressa in pixel; height - altezza tabella o cella espressa in pixel; align - allineamento tabella o allineamento elementi
cella (center, left, right, justify); bgcolor - colore di sfondo della tabella o della cella,
espresso in codici esadecimali o nomi dei colori; background - immagine di sfondo della tabella o della
cella; valign - allineamento verticale degli elementi contenuti
nella cella (top, middle, bottom...); cellspacing - lo spazio (in pixel) tra le celle che
compongono la tabella; cellpadding - lo spessore (in pixel) del margine delle
celle che compongono la tabella;
Esistono
inoltre due ulteriori attributi, colspan=numero e rowspan=numero,
che applicati ad una cella (td) specificano rispettivamente il
numero di colonne e righe espandibili su una cella:
1-2-3 ecco il
codice che genera questa piccola tabella:
<table width="100"
border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
........................................(inizio prima riga)
<td>1</td> .............................(prima
cella/colonna)
<td>2</td> .............................(seconda
cella/colonna)
</tr> ......................................(fine prima
riga)
<tr> .......................................(inizio
seconda riga)
<td colspan="2">3</td> .........(terza cella/colonna)
</tr> ......................................(fine seconda
riga)
</table>
I moduli
Generalmente l'utilizzo dei moduli (form) è associato
all'impiego di script installati sul server (cgi ecc..) ma è
comunque possibile impiegarli senza ricorrere
necessariamente ad alcuno script.
I tag che vengono usati per
delineare un modulo in HTML sono <form></form>. Al
loro interno vengono inseriti ulteriori tag che richiamano
gli altri elementi del modulo:
<form
action="mailto:webmaster@guidainlinea.com" method="get/post">
(in questo esempio il modulo invia i dati che andremo ad
inserire all'indirizzo email contenuto nell'action; per il
metodo d'invio, method, si consiglia di utilizzare 'post'.
In questo modo i dati saranno inviati al server
separatamente.)
<input type="hidden"
name="nome1">
(tipo nascosto, utile per inviare informazioni ad uno script
installato sul server che rielaborerà i dati)
<input type="text"
size="30" maxlenght="50" name="nome2" value="valore_iniziale">
(visualizza una casella di testo all'interno della quale è
possibile digitare dei dati)
<input type="checkbox"
name="nome3" checked>
(visualizza una casella spuntata che può essere selezionata
o deselezionata dall'utente. In questo esempio è selezionata
poichè è presente l'attributo 'checked'. Naturalmente è
possibile inserire del testo prima o dopo il tag che
affiancherà la casella di testo)
<input type="password"
name="nome4" size="15" maxlenght="50">
(visualizza una casella di testo particolare, dedicata
all'inserimento delle password. Infatti, se proviamo ad
inserire del testo al suo interno, questo sarà criptato)
<input type="radio"
name="scelta" value="scelta1">
<input type="radio" name="scelta" value="scelta1"
checked >
<input type="radio" name="scelta" value="scelta1">
(utile allorchè si debba selezionare una sola tra più
opzioni di scelta. Infatti selezionandone una si
deselezionano automaticamente le altre. Come si può notare,
la casella centrale è già selezionata perchè è stato
inserito l'attributo 'checked' all'interno del tag)
<input type="reset"
value="reimposta">
(visualizza un pulsante che permette di resettare/azzerare
il modulo, cancellando eventualmente tutti i dati
precedentemente inseriti)
<input type="submit"
value="invia">
(visualizza un pulsante che
permette l'invio del modulo)
<input type="image"
src="path_immagine">
(visualizza un'immagine al posto del pulsante di 'submit')
<select size="1" name="elenco"> <option value="seleziona" selected>seleziona <option value="1">opzione1 <option value="2">opzione2 <option value="3">opzione3 </select>
(visualizza un elenco/menù a discesa, contenente valori
precedentemente inseriti che possono essere selezionati)
<textarea wrap="virtual"
row="numero righe" cols="numero colonne">
testo da visualizzare nel textarea </textarea>
(visualizza un'area dedicata all'inserimento di testo.
L'attributo wrap="virtual" fa in modo che il testo torni a
capo automaticamente una volta raggiunto il margine destro
del textarea. Impostato invece su 'physical' consente al
testo di procedere orizzontalmente, anche oltre il bordo del
textarea. In questo secondo caso compariranno le barre di
scrolling orizzontali)
</form>
Utilizzo dei
frame
L'utilizzo
dei frame in un sito web è da sempre stato oggetto di accesi
dibattiti. Molte volte si è discusso se fosse giusto o meno
suddividere una pagina web in più frame differenti..
Fondamentalmente si tratta di gusti personali visto che le
nuove versioni dei browser più diffusi li supportano
appieno. Diciamo solo che in termini di risorse tecniche,
una pagina che utilizza i frame ne richiede di più di una
che non li impiega (inoltre è più difficile il processo
d'indicizzazione sui motori di ricerca).
Infatti una
pagina contenente dei frame deve essere composta come minimo
da tre pagine html, una nella quale sono presenti le
istruzioni di base (frameset) e altre due che saranno
richiamate in due diverse finestre (o frame). L'una sarà
indipendente dall'altra.
Per prima
cosa bisogna creare un FRAMESET che conterrà i tag e gli
attributi necessari a determinare la struttura della pagina
completa. Esso avrà generalmente questa struttura:
<html>
<head>
<title>Frameset</title>
<frameset rows="50,*">
(il frameset crea un frame in alto con larghezza relativa,
100%, e altezza 50 pixel)
<frame src="intestazione.html"
name="intestazione">
(nel frame superiore è richiamato il file 'intestazione.html')
<frameset
cols="30%,*">
(il frameset crea due ulteriori frame affiancati, entrambi
con larghezza relativa 30% e 70%)
<frame src="sx.html"
name="sinistro">
(il tag richiama nel frame di sinistra il file 'sx.html')
<frame src="dx.html"
name="destro">
(il tag richiama nel frame di destra il file 'dx.html')
</frameset>
</frameset>
</html>
Alcuni
attributi del FRAMESET
Border -
spessore bordo espresso in pixel"
Frameborder - 1 per sì, 0 per no
Rows - misura1, misura2 ...
Cols - misura1, misura2 ...
L'attributo
TARGET e i frame
Supponendo di
avere una pagina composta da due frame, ipotizziamo di
aver creato nel frame superiore un collegamento ipertestuale
ad una nuova pagina con questa sintassi:
<a href="pagina.html">PAGINA</a>
Cliccando
sul link ci renderemo conto che il documento html verrà
visualizzato nell'interezza della finestra del browser
facendoci uscire dalla pagina con i frame. Da quio l'utilità
dell'attributo TARGET che ci consente di definire la
destinazione del collegamento ipertestuale. Se infatti
vogliamo che la pagina 'pagina.html' venga visualizzata nel
frame inferiore, supponendo di aver precedentemente nominato
questo frame 'inferiore' (con l'attributo 'name'), basterà
modificare il codice in questo modo:
Per evitare che
i browser di vecchia generazione, non compatibili con la
teconologia dei frame, visualizzino una pagina bianca al posto
di una pagina web composta da più frame, si utilizza la coppia
di tag <noframe></noframe>, inserendo al loro interno ciò che
vogliamo venga visualizzato in questa situazione.
IFRAME, il frame interno
La coppia di tag <iframe></iframe> ci permette di inserire un frame
interno, in un punto ben definito di una pagina web, e di
richiamare al suo interno un qualsiasi file html (come per i
normali frame). La sintassi utilizzata è la seguente:
