Esercizi HTML e CSS

Esercizi HTML e CSS
classe 3c/3d, Novembre 2012
Il dirimpettaio Asdrubale Verdolini è proprietario di un negozio di articoli … … … … … … … …
(a scelta tua). Tale Asdrubale vuole lanciare il suo negozio sul web ed ha commissionato a te,
esperto di fama locale, la realizzazione del sito.
Dovrai quindi crearlo come illustrato di seguito, usando pagine HTML e fogli di stile CSS.
Crea innanzitutto una pagina principale così strutturata:
• un menù a sinistra statico1 che contenga i link alle altre pagine del sito;
• una sezione sulla destra con le ultime novità ed offerte, anch'essa statica;
• un titolo centrato orizzontalmente nella pagina (utilizzando i parametri CSS left e right);
• un blocco centrale con la presentazione del negozio.
Per quanto possibile le dimensioni e le posizioni devono essere definite in percentuale.
Nel menù a sinistra dovranno essere presenti le voci: Home, Articoli, Carrello, Chi Siamo, Dove
Siamo, Richiesta Informazioni, Link utili. Il menù deve essere formattato utilizzando anche la
pseudoclasse “:hover” per evidenziare la voce corrispondente al passaggio del mouse.
La sezione con le novità ed offerte dovrà prevedere la possibilità di contenere una barra di
scorrimento nel caso le offerte non possano essere visualizzate in un'unica schermata.
Se vuoi, puoi liberamente inserire immagini opportune ed aggiungere ulteriori elementi utili ad
arricchire ed abbellire la pagina.
La pagina Articoli dovrà contenere un elenco di articoli in vendita, organizzati e disposti in modo
opportuno all'interno della pagina. Vi sarà un'immagine per ogni prodotto corredata di didascalia e
descrizione dettagliata del prodotto. Si predisponga anche un link per aggiungere al carrello ogni
articolo. Per gli oggetti che non risultano in vendita causa esaurimento scorte, sia “disabilitata” la
vendita; questo sia visibile anche graficamente modificando per esempio l'opacità (opacity)
dell'intero oggetto.
La pagina Carrello conterrà l'elenco degli oggetti acquistati, con il relativo prezzo e numero di
oggetti richiesti, nonché con l'ammontare totale della spesa. Non siamo ancora in grado di fare una
pagina dinamica, ovvero di creare un “vero” carrello che si aggiorni quando viene cliccato sulla
voce acquista: Per ora accontentiamoci quindi creare un semplice esempio statico ti tale pagina.
Per ogni prodotto il lista, predisporre anche un campo input per inserire il numero di oggetti
richiesti. Il prezzo dovrà essere aggiornato automaticamente così come il totale complessivo: gestire
ciò con uno script Javascript (suggerimento: visualizzare totale e prezzi all'interno di un campo
input disabilitato alla modifica).
La pagina Chi Siamo e quella Dove Siamo dovranno contenere informazioni come da titolo.
Alla voce Richiesta Informazioni dovrà esserci un link che fa riferimento all'indirizzo email del
negozio; dovrà inoltre essere presente anche un modulo (form) per l'immissione della richiesta di
informazioni. Dovrà essere presente quindi un campo di tipo textarea dove verrà inserito il corpo
del messaggio, un campo input di tipo text per inserire l'oggetto della domanda ed un altro dello
stesso tipo per inserire l'indirizzo email a cui deve essere risposto. Sarà presente un pulsante per
inviare la richiesta ed uno per resettare il form.
La pagina Link Utili dovrà contenere una lista di link relatici ai fornitori, ad altri negozi della
catena, ad informazioni sui prodotti in vendita.
1
Deve cioè rimanere nella stessa posizione identica anche quando la pagina viene scorsa
(seconda parte)
Amilcare, cugino di Asdrubale, gestisce una catena di Bed & Breakfast. Predisponi quindi una
pagina per le prenotazioni delle camere.
Dovrà comparire, al di sotto della lista degli alberghi disponibili, un form per l'invio dei dati che
riguardano la prenotazione. Dovranno essere presenti i campi: numero adulti (selezione con menù a
tendina), numero di bambini (selezione con menù a tendina), Nome di chi prenota, Cognome, Data
di nascita (creare tre campi input a tendina, uno per il giorno, uno per il mese, uno per la data),
Indirizzo, Numero di Telefono, codice fiscale, recapito Email, data di inizio soggiorno (nel formato
precedentemente espresso) e data di fine soggiorno. Aggiungere anche un campo checkbox con le
voci: con animali domestici, fumatori, con garage. Specificare anche un campo radiobutton con le
voci “arrivo in mattinata”,”arrivo in serata”, un altro che specifica il metodo di pagamento con voci
“carta di credito”,”assegno”, “contanti”, “bancomat”, un altro ancora che specifica il tipo di
trattamento “pensione completa”,”mezza pensione”, “bed and breakfast”.
Nel precedente form controllare con uno script JavasScript, che, prima dell'invio dei dati, siano
stati inseriti i dati minimi indispensabili necessari per la prenotazione. In caso contrario avvisare
con un “alert” dell'incompletezza dei dati immessi. Si inserisca anche un controllo sulla lunghezza
del codice fiscale immesso.
Per qualsiasi esempio, suggerimento o chiarimento si rimanda innanzitutto alle seguenti pagine:
• http://www.html.it/guide/guida-html/ per quanto cocerne l'HTML
• http://www.html.it/guide/guida-css-di-base/ per quanto riguarda i fogli di stile CSS
• http://www.html.it/guide/guida-javascript-per-esempi/ relativamente a JavaScript