In questa esercitazione continuiamo a produrre documenti HTML.
I frame sono suddivisioni rettangolari di una pagina web. Il contenuto di un frame è una pagina web a sé stante, contenuta in un proprio file .html, ed è indipendente dal contenuto degli altri frame.
Il contenuto di un frame si può cambiare caricando una nuova pagina .html, e si può fare scorrere in su e in giù indipendentemente dagli altri frame.
Un uso tipico dei frame è creare un'area fissa che contiene il menu di navigazione, e un'area variabile in cui viene caricato il contenuto richiesto di volta in volta.
A questo indirizzo si può vedere un esempio di pagina strutturata in frame. (Guardare come è scritto il codice html dell'esempio.)
Per creare una pagina strutturata in frame sono necessari tre ingredienti:
Un documento di tipo frameset è un documento html che segue una sintassi leggermente diversa da quella che abbiamo visto finora.
Prima di tutto, la prima riga appare come segue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT"
"http://www.w3.org/TR/html4/frameset.dtd">
Poi, anzichè avere una parte BODY, c'è una parte delimitata dai tag <frameset> e </frameset>
Il contenuto dei vari riquadri è fornito da una serie di normali file html.
Infine, i collegamenti tra i riquadri si ottengono:
Una spiegazione sull'uso dei frame si può trovare a questo indirizzo.
Esercizio 1In HTML, normalmente il flusso dell'informazione è dal server all'utilizzatore.
Tuttavia, in alcuni casi l'utilizzatore deve inviare dei dati verso il server. Questo è per esempio il caso dei siti in cui è richiesto di autenticarsi (username e password), come i servizi di e-mail; lo stesso meccanismo viene usato nei forum, in cui gli utenti mandano i propri messaggi che vengono affissi a una "bacheca elettronica" pubblica.
A questo scopo, HTML consente di creare delle pagine che funzionano come i moduli da compilare (in inglese "fill-in forms")
Anche i forms si fanno con tre ingredienti:
L'area della pagina che è racchiusa tra i tag <form> e </form> è quella che contiene il form. Può contenere anche altri elementi html. Per esempio, di solito i controlli dei form sono inseriti all'interno di una tabella, in modo da mantenerli ordinati e allineati.
I controlli si creano con una serie di tag appositi: il tag <input>, che può essere di vari tipi (attributo type= del tag <input>), per realizzare liste di scelta, pulsanti, eccetera, e il tag <textarea>, per inserire testo libero
Infine, l'indicazione di cosa dovrà fare il server con i dati che gli invio viene data attraverso l'attributo action= del tag <form>
L'uso dei form è descritto a questo indirizzo
Esercizio 2<form action="mailto: ....." method="post">
<form enctype="text/plain" action="mailto: ....." method="post">
<form action="http://www.disi.unige.it/person/RibaudoM/didattica/infogen/aa0304/risposta.php" method="post">
PROMEMORIA: un file miostile.css si richiama nel codice html usando il tag link nel modo seguente:
<link rel="stylesheet"
type="text/css"
href"miostile.css"
>
Riprendete i documenti prodotti nelle esercitazioni precedenti, ripulite il codice HTML di tutti gli aspetti legati allo stile e applicate il foglio di stile che avete appena creato.
Aprite i file HTML con più browser.
La mia pagina HTML è scritta correttamente?
Il WWW Consortium (w3c) mette a disposizione dei programmi di validazione in linea.
Questi programmi guardano se il codice rispetta lo standard e, se non è così, cercano di capire quanto è grave l'errore.
Non è solo il w3c a offrire questo servizio (però molti richiedono che la pagina sia pubblicata per poterla verificare).
Inoltre non solo la correttezza dell'HTML e del CSS possono essere validate, ma per esempio anche il rispetto delle direttive di accessibilità (vedi Bobby).
Verificate la correttezza del vostro codice.
SUGGERIMENTO: se si ottiene qualche messaggio strano riguardo al doctype, la prima cosa da fare è aggiungere le righe indicate in precedenza (ossia in questo punto della terza esercitazione). Ricordiamo di metterle al posto giusto: