HTML

Generalità

HTML (Hyper Text Markup Language) è un linguaggio per computer che consente di creare pagine web.

I documenti scritti in HTML contengono 2 tipi di oggetti:

il testo del documento
i TAG HTML che indicano gli elementi, la struttura, la formattazione e i link
ipertestuali.

La maggior parte dei TAG ha il seguente aspetto:

<NOME TAG> ...testo influenzato dal TAG... </NOME TAG>

Il nome del TAG è racchiuso tra parentesi angolari;
Il TAG iniziale attiva una funzionalità (un titolo, il carattere grassetto, ecc.);
Il TAG finale disattiva la stessa funzionalità;
I TAG di chiusura sono preceduti dal carattere barra (/);
Nei TAG non si fa differenza tra lettere maiuscole e minuscole;
Quando un BROWSER elabora un documento HTML ogni genere di formattazione eseguita ; manualmente (spazi aggiuntivi, tabulazioni, etc.) viene ignorata;
L'unico elemento che può generare una formattazione è un TAG;
I TAG possono essere posizionati a piacere.

HTML definisce tre TAG per descrivere la struttura:

<HTML> - questo TAG specifica che il file è realizzato in linguaggio HTML

Tutto il testo e i comandi dovranno trovarsi all'interno dei TAG iniziali

e finali.

<HEAD> - Determina la parte iniziale del file HTML.

All'interno del TAG iniziale e finale possono apparire solo alcuni TAG

(in particolare il titolo del documento).

<BODY> - Racchiude sia TAG di formattazione che il testo, le immagini, i suoni ecc..

che si vogliono visualizzare.

Nel TAG BODY è possibile specificare i seguenti attributi per gestire i colori di vari

componenti:

bgcolor = "..." - colore dello sfondo della pagina
text = "..." - colore del testo
link="..." - colore dei collegamenti
alink="..." - colore dei collegamenti attivi
vlink="..." - colore dei collegamenti visitati

SFONDI AFFIANCATI

Se si desidera visualizzare sullo sfondo una immagine e ripeterla fino al riempimento

del video l'attributo da utilizzare sarà:

background="immagine.gif"

COMMENTI

Il tag  (tag di chiusura) permettono di scrivere

dei commenti in una pagina HTML.

Il testo compreso tra i tag che definiscono i commenti viene completamente

ignorato.

ES.:

CREAZIONE DI TITOLI

I tag che contrassegnano i titoli sono:

<H1> ... </H1> Titolo di livello 1

<H2> ... </H2> Titolo di livello 2

<H3> ... </H3> Titolo di livello 3

<H4> ... </H4> Titolo di livello 4

<H5> ... </H5> Titolo di livello 5

<H6> ... </H6> Titolo di livello 6

STILI FISICI

Permettono di alterare l'aspetto del testo e possono essere nidificati.

<B> ... </B> Applica al testo la formattazione del grassetto
<I> ... </I> Applica al testo la formattazione del corsivo
<TT> ... </TT> Spaziato
<U> ... </U> Sottolineato
<STRIKE> ... </STRIKE> Barrato
<SUP> ... </SUP> Superscript
<SUB> ... </SUB> SubScript

LINEE ORIZZONTALI

Il tag <HR>, al quale non è associato nessun tag di chiusura nè alcun testo,

crea una linea orizzontale nella pagina.

Gli attributi sono:

size=".." indica lo spessore in pixel della linea
width=".." indica la larghezza della linea
align=".." indica l'allineamento e può assumere uno dei seguenti valori:
Left, Right, Center.
COLOR=".." Red, Blue, Black, Yellow, White, etc.

CENTRARE IL TESTO

<center>....testo.....</center>

FONT

Il tag "font" permette la scelta del colore, delle dimensioni e del tipo di carattere

del testo.

<font face="Arial">testo in Arial</font>

I principali attributi sono:

face= carattere
color= colore
size= dimensione del carattere

IMMAGINI

Il tag <IMG> associato all'attributo SRC="..." permette di inserire una immagine

in un documento HTML.

I principali attributi sono:

SRC="..." - Percorso e nome dell'immagine

ALIGN="..." - "CENTER": centra l'immagine tra il margine sinistro e quello destro di

una pagina web.

"RIGHT": allinea l'immagine al margine destro di una pagina web.

"LEFT":Allinea l'immagine al margine sinistro di una pagina web.

ALT="..." - Alternativa all'immagine. Sostituisce all'immagine la stringa

specificata.

LOWSRC="..." - Il nome di una immagine alternativa che viene caricata prima della

immagine specificata in SRC. L'immagine alternativa è a bassa

risoluzione.

BORDER="..." - Lo spessore della cornice che circonda l'immagine

HSPACE="..." - Lo spazio in pixel tra l'immagine e il testo laterale.

VSPACE="..." - Lo spazio in pixel tra l'immagine e il testo superiore/inferiore.

WIDTH="..." - Larghezza dell'immagine

HEIGHT="..." - Altezza dell'immagine

LE LISTE

Le liste permettono di effettuare elenchi di dati.

<OL> ... </OL> LISTE NUMERATE

<MENU> ... </MENU> LISTE DI MENU'

<UL> ... </UL> LISTE NON NUMERATE (PALLINO)

<DL> ... </DL> LISTE A GLOSSARIO

<DT> ... <DD> PER LISTE A GLOSSARIO

<LI> PER TUTTE LE ALTRE LISTE

I LINK

Il TAG <A> ... </A> associato all'attributo href="...." permette di inserire un link

in un documento HTML.

FILE MULTIMEDIALI

File audio

Per richiamare un file audio si utilizza il tag di ancoraggio come per le immagini:

Es.:

<A HREF="audio/AUDIO.WAV"> Suono </A>

File video

I file video hanno

estensione MPEG e seguono le stesse regole dei file audio:

Es.:

<A HREF="images/video.mpeg"> Video </A>

SUONI DI SOTTOFONDO

<HTML>

<HEAD>

</HEAD>

</HTML>

In questo caso la musica di sottofondo suona a ciclo continuo.

TABELLE

Le tabelle sono delle strutture composte da righe e colonne che contengono numeri e

testo, collegamenti e grafica.

Per definire una tabella si utilizza i tag:

Gli attributi sono:

height="..." imposta l'altezza della tabella in pixel o in percentuale
Width="..." imposta la larghezza della tabella in pixel o in percentuale
border="..." imposta il bordo della tabella
cellspacing="..." imposta una linea a spazi più spessa intorno alla cella
cellpadding="..." imposta uno spazio uniforme all'interno della cella
bordercolor="..." imposta i colori dei bordi (vedi "I colori dello sfondo")
bgcolor="..." imposta i colori dello sfondo (vedi "I colori dello sfondo")

L'inizio e la fine di una riga della tabella si indica con i tag

L'intestazione delle colonne della tabella si indica con

gli attributi sono:

colspan="..." consente ad una riga di occupare più colonne.
rowspan="..." consente ad una colonna di occupare più righe
align="..." specifica l'allineamento orizzontale. I valori consentiti sono:
right, left e center.
valign="..." specifica l'allineamento verticale. I valori consentiti sono:
top, middle, bottom, baseline.
bgcolor="..." imposta i colori dello sfondo (vedi "I colori dello sfondo")

Il contenuto di ciascuna cella viene delimitato dai tag

gli attributi sono gli stessi del tag TH.

CASELLA DI TESTO

input name="mioTesto" type="text" value="qui il tuo testo" size="40" maxlength="200">

Gli attributi previsti sono:

NAME="..." imposta il nome dell'elemento
MAXLENGHT="..." indica il numero massimo di caratteri che il campo potrà contenere
SYZE="..." definisce la dimenzione del campo in caratteri
VALUE="..." indica il valore dell'elemento
TABINDEX="..." indica la sequenza di avanzamento del cursore alla pressione del tasto

di tabulazione [TAB], un valore negativo nega l'accesso

all'elemento.

READONLY imposta i campi di sola lettura.
DISABLED disabilitato

TEXTAREA

qui puoi scrivere il tuo testo

</textarea>

Gli attributi previsti sono:

NAME="..." imposta il nome dell'elemento
rows="..." indica il numero di righe della textarea,
cols="..." indica il numero di caratteri (cioè di colonne) che ogni riga può

contenere.

TABINDEX="..." indica la sequenza di avanzamento del cursore alla pressione del tasto di tabulazione [TAB].
READONLY imposta i campi di sola lettura

PASSWORD

Gli attributi previsti sono:

NAME="..." imposta il nome dell'elemento
MAXLENGHT="..." indica il numero massimo di caratteri che il campo potrà contenere
SYZE="..." definisce la dimenzione del campo in caratteri
VALUE="..." indica il valore dell'elemento
TABINDEX="..." indica la sequenza di avanzamento del cursore alla pressione del tasto

di tabulazione [TAB].

READONLY imposta i campi di sola lettura.
DISABLED disabilitato

CHECKBOX

Gli attributi previsti sono:

NAME="..." imposta il nome dell'elemento
VALUE="..." indica il valore dell'elemento
DISABLED disabilita una casella
CHECKED attiva la selezione ON

RADIOBUTTON

Gli attributi previsti sono:

NAME="..." imposta il nome dell'elemento
VALUE="..." indica il valore dell'elemento
DISABLED disabilita una casella
CHECKED attiva la selezione ON

COMBOBOX

Gli attributi previsti sono:

NAME="..." imposta il nome dell'elemento
SIZE=".." determina l'ampezza dell'elenco che verrà visualizzato: 'n'

corrisponde al numero delle voci dell'elenco quando verrà aperto.

MULTIPLE indica un elemento dal quale è possibile effettuare

contemporaneamente più di una selezione

TABINDEX="..." indica la sequenza di avanzamento del cursore alla pressione del

tasto di tabulazione [TAB], un valore negativo nega l'accesso

all'elemento.

Ogni voce che dovrà apparire nell'elenco verrà indicata dai tag:

Gli attributi previsti sono:

VALUE="..." indica il valore dell'elemento
SELECTED indica quale opzione risulterà selezionata per default

Es.:

<OPTION SELECTED VALUE="1">Verde </OPTION>

<OPTION VALUE="2">Bianco</OPTION>

<OPTION VALUE="3">Rosso </OPTION>

</SELECT>

BUTTON

<input type="submit" value="Invia" name="B1"> Il pulsante di Invio

<input type="reset" value="Annulla" name="B2"> Il pulsante di reimpostazione

<input type="button" value="Pulsante" onclick="Evento1" name="B3"> Il pulsante di comando personalizzato.

CAMPO FILE

Il campo "file", consente invece di inviare un file sul server, nel caso in cui la pagina di

risposta sia stata programmata correttamente. A fianco del modulo di testo compare il

pulsante "sfoglia" o "browse" (a seconda della lingua del browser dell’utente).

La sintassi è:

GLI EVENTI

In HTML sono previsti i seguenti gestori di eventi:

- onload: si verifica quando viene caricata una pagina HTML; può essere inserito nel

tag body. Es.:

(vedi es. GestArch.asp a lato)

- onunload: si verifica quando la pagina HTML viene rimossa per far posto ad un'altra

o viene chiusa.

- onClick: si verifica quando l'utente fa click sill'oggetto.

Es.:

<input type="submit" value="Cancella" name="BtnCancella" tabindex="-10"

onclick="javascript: return RicConfUte()">

(vedi es. GestArch.asp a lato)

- ondblClick: si verifica quando l'utente fa doppio click sull'oggetto.

- onMouseDown: si verifica quando il pulsante del mouse viene premuto.

- onMuoseUp: si verifica quando il pulsante del mouse viene rilasciato.

- onMouseOver: si verifica quando il cursore del mouse passa sopra l'oggetto.

(vedi es. SwapImages.txt a lato)

- onMousemove: si verifica quando il cursore del mouse viene mosso mentre è sopra

l'oggetto.

- onMouseOut: si verifica quando il cursore del mouse esce dall'oggetto.

(vedi es. SwapImages.txt a lato)

- onFocus: si verifica quando un oggetto ottiene il fuoco. Questo può avvenire in due

diversi modi o perchèl'utente vi ha portato il mouse o per mezzo del tasto

tabulazione (Oggetti di input, select, textarea, button).

- onBlur: si verifica quando l'oggetto perde il fuoco.

- onKeyPress: si verifica quando viene premuto un taso sopra l'oggetto.

- onKeyDown: si verifica quando un tasto viene abbassato sopra l'oggetto.

- onKeyUp: si verifica quando un tasto viene rilasciato sopra l'oggetto.

- onSubmit: si verifica quando viene inviata una form. Funziona solo con il tag form.

- onReset: si verifica quando viene azzerata una form. Funziona solo con il tag

form.

- onSelect: si verifica quando l'utente seleziona il testo in un tag input o textarea.

- onChange: si verifica quando il vlore del tag (input, select o textarea) è stato

modificato dall'utente.

La sintassi:

Evento="Gestore(Parametri)"

Gestore è una funzione o procedura javascript o visual basic che andrà definita a

parte.

Parametri (opzioonali) sono informazioni che la funzione o procedura dovrà utilizzare.

FRAME

I Frame consentono di suddividere la pagina WEB in vari pannelli ogniuno dei quali contiene un

proprio documento HTML.

I pannelli possono essere verticali e/o orizzontali.

1) I tag che definiscono un documento diviso in Frame sono:

con i seguenti attributi:

BORDER="n" definisce lo spessore del bordo
BORDCOLOR="#RRGGBB" definisce il colore del bordo del frame
BORDCOLOR="nome-Colore"
COLS="n, n" definisce il numero di colonne che compongono il frame.
FRAMEBORDER="n" specifica la presenza (1) o assenza (0) del bordo del frame.
FRAMESPACING"n" definisce lo spazio da lasciare tra i frame
ROWS="n, n" definisce il numero di righe del frame.

Per definire le operazioni da svolgere per i browser che non gestiscono i frame si usano i

tag:

ATTENZIONE: i documenti HTML che impostano i Frame non devono contenere nel loro interno i

tag <!DOCTYPE> e <BODY>.

Il tag che permette l'impostazione del Frame è:

<FRAME>

con i seguenti attributi:

NAME="..." nome del frame
SRC="url" identifica la pagina che dovrà essere visualizzata nel frame
BORDER="n" spessore del bordo
FRAMEBORDER="n" specifica la presenza (1) o assenza (0) del bordo del frame.
NORESIZE non permette il ridimensionamento del frame
SCROLLING="..." YES, NO, AUTO

Impostazioni collegamenti

Ogni collegamento di una pagina web suddivisa in frame deve prevedere l'attributo

TARGET="nome_frame" definisce la destinazione della pagina Web espressa con il nome

attribuito al frame.

HTML

Generalità

il testo del documento

i TAG HTML che indicano gli elementi, la struttura, la formattazione e i link

ipertestuali.

Il nome del TAG è racchiuso tra parentesi angolari;

Il TAG iniziale attiva una funzionalità (un titolo, il carattere grassetto, ecc.);

Il TAG finale disattiva la stessa funzionalità;

I TAG di chiusura sono preceduti dal carattere barra (/);

Nei TAG non si fa differenza tra lettere maiuscole e minuscole;

Quando un BROWSER elabora un documento HTML ogni genere di formattazione eseguita ; manualmente (spazi aggiuntivi, tabulazioni, etc.) viene ignorata;

L'unico elemento che può generare una formattazione è un TAG;

I TAG possono essere posizionati a piacere.