Esempi di pagine HTML

Esercizio 1 (pagina con semplice testo scritto)

<HTML>

<HEAD>

<TITLE>L'adolescenza</TITLE>

</HEAD>

<BODY>

«L'<B>adolescenza</B> è quell'età in cui i ragazzi non sanno se continuare a picchiare le ragazze o cominciare a baciarle.»

</BODY>

</HTML>



Esercizio 2 (pagina con testo scritto in corsivo)

<HTML>

<HEAD>

<TITLE>L'adolescenza</TITLE>

</HEAD>

<BODY>

<I>«L'<B>adolescenza</B> è quell'età in cui i ragazzi non sanno se continuare a picchiare le ragazze o cominciare a baciarle.»</I>

</BODY>

</HTML>



Esercizio 3 (pagina con titolo nella barra omonima e sfondo colorato)

<HTML>

<HEAD>

<TITLE>Guarda in alto nella barra del titolo!!!</TITLE>

</HEAD>

<BODY bgcolor="#00CC33">

</BODY>

</HTML>



Esercizio 4 (pagina con testo e sfondo colorato)

<HTML>

<HEAD>

<TITLE>RACCONTO</TITLE>

</HEAD>

<BODY bgcolor="#EB7525">

Ospiti e letti.

La casa in cui vivo con la mia famiglia è piccola ma accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti. Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.

L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali. L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.

A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunché spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...

...(continua)

</BODY>

</HTML>



Esercizio 5 (pagina con testo con differenti caratteristiche e colori)

<HTML>

<HEAD>

<TITLE>RACCONTO</TITLE>

</HEAD>

<BODY>

<H1 align=center>

<FONT face="comic sans ms" color="#003333">

Ospiti e letti

</FONT>

</H1>

<P>

<FONT face="comic sans ms" color="#FF9933"> La casa in cui vivo con la mia famiglia è <FONT size=-1> piccola</FONT> ma <FONT size=+1>accogliente</FONT>, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti.<BR>

Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.</FONT>

<P>

<FONT face="comic sans ms" color="#CC9933"> L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali.<BR>

L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.</FONT>

<P>

<FONT face="comic sans ms" color="#FF9933">A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...

<BR> ...(continua)</P>

</BODY>

</HTML>



Esercizio 6 (pagina con testo con elenco e sfondo colorato)

<HTML>

<HEAD>

<TITLE>Esercizio 6</TITLE>

</HEAD>

<BODY bgcolor="#A4A8D9">

<P>la classifica dei miei libri preferiti

<OL>

<LI><STRONG>Il signore degli anelli</STRONG> - J. R. Tolkien</LI>

<LI><STRONG>Se questo è un uomo</STRONG> - P. Levi</LI>

<LI><STRONG>Il piano infinito</STRONG> - I. Allende</LI>

<LI><STRONG>Orlando</STRONG> - V. Woolf</LI>

<LI><STRONG>Avere o essere</STRONG> - E. Fromm</LI>

</OL>

</BODY>

</HTML>



Esercizio 7 (pagina con inserita un'immagine e sfondo colorato)
lo svolgimento di questo esercizio necessita del materiale contenuto in una cartella

<HTML>

<HEAD>

<TITLE>PIERO DELLA FRANCESCA</TITLE>

</HEAD>

<BODY bgcolor="#ADFA9A" text="#000080">

<P align="center">

<FONT size="5" face="comic sans ms">

<B>PIERO DELLA FRANCESCA</B>

</FONT>

<BR>

<BR>

<BR>

<IMG src="federico.jpg" width="176" height="248"><BR>

<BR>

<BR>

</P>

<P align="left"><FONT size="4">Il più perfetto esempio di corte umanistica è il palazzo Ducale eretto da Federico da Montefeltro nella piccola Urbino.

<BR>

Con una lungimiranza veramente eccezionale, il duca ospita ad Urbino letterati, umanisti, architetti e pittori di varie nazioni, ciascuno dei quali contribuisce ad un dialogo internazionale sull'arte di altissimo livello. Su tutti spicca Piero della Francesca, che esegue opere destinate a diventare esempi assoluti, come la <EM>Pala Montefeltro</EM>, oggi nella Pinacoteca di Brera a Milano, modello insuperabile di sintesi prospettica di forma e colore.

</FONT></P>

</BODY>

</HTML>



Esercizio 8 (pagina con inserita un'immagine, testo e per sfondo un'altra immagine)
lo svolgimento di questo esercizio necessita del materiale contenuto di una cartella

<HTML>

<HEAD>

<TITLE>ANDREA MANTEGNA</TITLE>

</HEAD>

<BODY background="bg_blue.jpg" text="#000080">

<P align="center"><font size="5" face="comic sans ms">

<B>ANDREA MANTEGNA</B></FONT><BR>

<BR>

<BR>

<IMG src="sposi.jpg" width="327" height="263"><BR>

<BR>

<BR>

</P>

<P align="left"><FONT size="4">L'idea umanistica della corte nasce a Mantova dal cenacolo culturale e artistico creatosi attorno ai Gonzaga e dalle consuetudini che questo aveva generato.<BR>

Il teorico di questo modo di vivere è Baldassare Castiglioni nella sua opera <EM>Il cortigiano</EM>.<BR>

L'artista che meglio rappresenta quest'epoca è Andrea Mantenga che descrive l'ambiente di Mantova nella splendida <EM>Camera degli sposi</EM> nel Castello di San Giorgio.</FONT></P>

</BODY>

</HTML>



Esercizio 9 (pagina con inserita una tabella contenente testo)
lo svolgimento di questo esercizio necessita del materiale contenuto in una cartella

<HTML>

<HEAD>

<TITLE>PITTORI OLANDESI</TITLE>

</HEAD>

<BODY background="bg_color.gif" text="#000080">

<P align="center"><BR>

<FONT size="5"><B>PITTORI OLANDESI DELLA PRIMA META' DEL 600'</B>

</FONT><BR>

<BR>

</P>

<DIV align="center"><CENTER>

<TABLE border="2" width="100%" bgcolor="#DCEFFA">

<TR><FONT size="2">

<TD><B>NOME</B></TD>

<TD><B>NASCITA/MORTE</B></TD>

<TD><B>SOGGETTI TIPICI</B></TD>

<TD><B>INFLUENZE</B></TD>

</TR>

<TR>

<TD>DIRCK VAN BABUREN</TD>

<TD>(C. 1590-1624)</TD>

<TD>RELIGIOSI</TD>

<TD>CARAVAGGIO</TD>

</TR>

<TR>

<TD>JAN VAN GOYEN</TD>

<TD>(1596-1656)</TD>

<TD>PAESAGGI</TD>

<TD>ESAIAS VAN DE VELDE</TD>

</TR>

<TR>

<TD>REMBRANDT VAN RIJN</TD>

<TD>(1606-1669)</TD>

<TD>RITRATTI</TD>

<TD>LASTMAN E LIEVENSZ</TD>

</TR>

<TR>

<TD>JAN CORNELISZ VERSPRONCK</TD>

<TD>(1597-1662)</TD>

<TD>RITRATTI DI BAMBINI</TD>

<TD>FRANS HALS</TD>

</TR>

<TR>

<TD>SIMON DE VLIEGER</TD>

<TD>(1601-1653)</TD>

<TD>PAESAGGI MARINI</TD>

<TD>VROOM</TD>

</TR>

</FONT>

</TABLE>

</CENTER>

</DIV>

</BODY>

</HTML>



Esercizio 10 (pagina con inserita una tabella contenente un'immagine)
lo svolgimento di questo esercizio necessita del materiale contenutoin una cartella

<HTML>

<HEAD>

<TITLE>GLI OLANDESI</TITLE>

</HEAD>

<BODY background="bg_color.gif" text="#000080">

<P align="center"><BR>

<FONT size="5"><B>GLI OLANDESI</B></FONT><BR>

<BR>

<BR>

</P>

<DIV align="center"><CENTER>

<TABLE border="10" cellpadding="0" cellspacing="0" bordercolordark="#000080" bordercolorlight="#0000ff">

<TR>

<TD width="100%"><p align="left"><img src="windmill.jpg" width="150" height="117"></P>

</TD>

</TR>

</TABLE>

</CENTER></DIV>

<P align="left"><FONT size="4"> Gli olandesi hanno scelto il contenuto delle loro manifestazioni da loro stessi, dal presente della loro vita e non si può rimproverare loro di aver dato ancora una volta realtà a questo presente per mezzo dell'arte. ciò che è portato dinanzi agli occhi e allo spirito dei contemporanei deve appartenere anche a questi se deve pretendere tutto il loro interesse. per sapere in che consisteva l'interesse contemporaneo degli olandesi, noi dobbiamo interrogare la loro storia.<BR>

</P>

<P align="center"><BR>HEGEL</FONT></P>

</BODY>

</HTML>



Esercizio 11 (pagina con inserita una tabella nascosta contenente un'immagine e del testo)
lo svolgimento di questo esercizio necessita del materiale contenuto in una cartella

<HTML>

<HEAD>

<TITLE>GLI OLANDESI</TITLE>

</HEAD>

<BODY background="bg_color.gif" text="#000080">

<P align="center"><BR>

<FONT size="5"><B>GLI OLANDESI</B></FONT><BR>

<BR>

<BR>

<DIV align="center">

<TABLE border="0" cellpadding="10" cellspacing="10" width="95%">

<TR>

<TD width="50%"><p align="center"><IMG src="windmill.jpg" width="150" height="117"></P>

</TD>

<TD width="50%"><FONT size="4">

Gli olandesi hanno scelto il contenuto delle loro manifestazioni da loro stessi, dal presente della loro vita e non si può rimproverare loro di aver dato ancora una volta realtà a questo presente per mezzo dell'arte. ciò che è portato dinanzi agli occhi e allo spirito dei contemporanei deve appartenere anche a questi se deve pretendere tutto il loro interesse. per sapere in che consisteva l'interesse contemporaneo degli olandesi, noi dobbiamo interrogare la loro storia.</FONT><BR>

<BR>

<FONT size="4">HEGEL</FONT></TD>

</TR></P>

</TABLE>

</DIV>

</BODY>

</HTML>



Esercizio 12 (pagina con un file musicale midi di sottofondo)
lo svolgimento di questo esercizio necessita del materiale contenuto in una cartella

<HTML>

<HEAD>

<TITLE>ANTONIN DVORAK</TITLE>

<BGSOUND src="nuovo.mid" loop="infinite">

</HEAD>

<BODY background="bg_music.gif">

<P align="center">

<FONT color="#412e01" face="arial"><BR>

<STRONG>ANTONIN DVORAK</STRONG>

<BR>

<BR>

<IMG src="dvorak.jpg" width="173" height="246"><br>

<BR>

</P>

<P align="left">

<STRONG>ANTONIN DVORAK</STRONG> è il principale musicista boemo e il primo a rompere l'egemonia di Italia, Francia e Germania nel campo della musica classica europea.<BR>

<BR>

Con le sue <STRONG>DANZE SLAVE</STRONG> contribuì alla rinascita della cultura del suo paese e di quelli limitrofi nell'ambito del decadente impero asburgico.<BR>

<BR>

La sua musica trasmette allegria, vigore ed ha un effetto rilassante su quanti l'ascoltano.</FONT></P>

</BODY>

</HTML>



Esercizio 13 (insieme di pagine tra di loro collegate)
lo svolgimento di questo esercizio necessita del materiale contenuto in una cartella
Realizzate le tre pagine seguenti:

index.htm

<HTML>

<HEAD>

<TITLE>BLINK 182</TITLE>

</HEAD>

<BODY background="bg_index.jpg" text="#0000ff">

<P align="center"><IMG src="anim_1.gif" width="108" height="91"></P>

<P align="center"><BR>

<FONT size="7"><B>BLINK 182</B></FONT><BR>

<BR>

</P>

<DIV align="center">

<TABLE border="0" cellpadding="10" cellspacing="10" width="95%">

<TR>

<TD align="center" width="50%">

<A href="storia.htm"><IMG src="anim_2.gif" border="0" width="107" height="91">

</A><P>

<A href="storia.htm"><FONT size="5"><B>LA STORIA</B></FONT></A></P>

</TD>

<TD align="center" width="50%">

<A href="musica.htm"><IMG src="anim_3.gif" border="0" width="107" height="91">

</A><P>

<A href="musica.htm"><FONT size="5"><B>LA MUSICA</B>

</FONT></A></P>

</TD>

</TR>

</TABLE>

</DIV>

</BODY>

</HTML>


storia.htm

<HTML>

<HEAD>

<TITLE>LA STORIA</TITLE>

</HEAD>

<BODY background="bg_storia.jpg" text="#000080">

<P align="center"><FONT size="6"><B>LA STORIA</B></FONT></P>

<P align="center"><IMG src="storia.jpg" width="187" height="204"></P>

<DIV align="center">

<TABLE border="0" cellpadding="10" cellspacing="10" width="95%">

<TR>

<TD width="100%"><B> I Blink-182, originari di San Diego (California), emettono i primi vagiti nell'autunno del 1991, quando il 18enne Mark Hoppus (basso, voce) ha incontrato Tom Delonge (chitarra, voce), che all'epoca aveva 14 anni. Al duo, che all'inizio si fa chiamare semplicemente Blink, si aggiunge poi il batterista Scott Raynor; il gruppo comincia a suonare in giro per club a San Diego e dintorni, facendo tra l'altro amicizia con la band dei Vandals - la cui minuscola etichetta, la Kung Fu, permette loro di pubblicare la debut-cassette, "Buddha", nel 1994. Meno di un anno dopo, la Cargo Records mette il trio sotto contratto: anche se per un solo album, "Cheshire cat", peraltro non troppo fortunato.<BR>

<BR>

Grazie al disco, comunque, i Blink allargano il loro seguito, in particolar modo in Australia - cosa che convince la MCA a prendere il trio sotto la sua ala protettrice. Nel 1997, così, i Blink - che nel frattempo hanno aggiunto un "182" al loro nome, pubblicano "Dude ranch", che diventa disco di platino in Australia, d'oro in Canada e negli Stati Uniti. Grazie alla spinta delle radio, "Dammit", il primo singolo tratto dall'album, diventa inoltre uno dei cinque brani più presenti nell'airplay statunitense. I Blink continuano la loro attività live, e alla fine del 1998 Scott Raynor lascia la band: a quanto pare, amichevolmente. Viene sostituito da Travis Barker, già batterista dei Vandals, che assieme a Hoppus e Delonge si mette a lavorare a "Enema of the state", pubblicato nel luglio del 1999. <BR>

<BR>

A seguito dell'uscita del primo singolo, e del primo video del gruppo "What's My Age Again?", sorgono numerose polemiche: comincia a girare la voce che la rivista "Playboy" abbia chiesto ai Blink di procurarsi alcune foto di fans nude, per pubblicarle (cosa che "Playboy" nega), e inoltre le punk band di San Diego e dintorni si dissociano dall'atteggiamento troppo frivolo dei Blink, che scelgono una pornostar per illustrare la copertina del loro cd. Nonostante le difficoltà il gruppo non demorde presentando il loro secondo singolo e con lui il secondo video "All the Small Things" prendendo in giro le più famose boy band del mondo riescono ad affermarsi nel palco internazionale così da portarsi addirittura al cinema con una piccola parte nel film American Pie. <BR>

<BR>

Dopo alcuni concerti in giro per il mondo (fra i quali anche quello a Milano del 17/4/2000) si ripresentano con il terzo singolo tratto dall'album "Enema of the state" si tratta di "Adam's Song" dove la band fa capire a tutto il mondo che è in grado di realizzare anche canzoni ad un certo livello musicale, infatti il singolo sale velocemente in cima alle classifiche internazionali. <BR>

<BR>

Finito il tour la band decide di farsi viva nei negozi di dischi e pubblica apposta per i loro fans "The Mark, Tom And Travis Show" quest'album è camposto da 20 canzoni tutti pezzi dal vivo a parte l'inedita "Man Overboard" che con un video piuttosto bizzarro dove la band decide di prendersi in giro da sola. <BR>

<BR>

Nel Giugno del 2001 compare il nuovo video "The Rock Show" questo è semplicemente un'anteprima dell'album "Take Off Your Pants And Jacket" uscito da poco tempo, in edizione limitata con due tracce bonus.</STRONG></TD>

</TR>

</TABLE>

</DIV>

<BR>

<P align="center"><BR>

<A href="index.htm"><IMG src="home.gif" border="0" width="60" height="20">

</A> </P>

<P align="center">

<A href="index.htm"><STRONG>TORNA ALLA PAGINA INIZIALE</STRONG>

</A></P>

</BODY>

</HTML>


musica.htm

<HTML>

<HEAD>

<TITLE>LA MUSICA</TITLE>

</HEAD>

<BODY background="bg_musica.jpg" text="#0000ff">

<P align="center"><FONT size="6"><STRONG>LA MUSICA</STRONG></FONT></P>

<P align="center"><IMG src="musica.gif" width="107" height="150"><BR>

<BR>

<FONT color="#ff0000" size="4"><EM><STRONG>SE VOLETE POTETE ASCOLTARE I FILES MIDI DELLE SEGUENTI CANZONI</STRONG></EM></FONT>

<BR>

<BR>

<BR>

<A href="mms.mid" target="_blank">

<EM><B>M+M'S</B></EM></A><BR>

<BR>

<A href="dammit.mid" target="_blank">

<EM><B>DAMMIT</B></EM></A><BR>

<BR>

<A href="josie.mid" target="_blank">

<EM><B>JOSIE</B></EM></A><BR>

<BR>

<A href="what.mid" target="_blank">

<EM><B>WHAT'S MY AGE AGAIN?</B></EM></A><BR>

<BR>

<A href="adams.mid" target="_blank">

<EM><B>ADAM'S SONG</B></EM></A><BR>

<BR>

<A href="all.mid" target="_blank">

<EM><B>ALL THE SMALL THINGS</B></EM></A><BR>

<BR>

<BR>

<BR>

<A href="index.htm"><img src="home.gif" border="0" width="60" height="20">

</A></P><P align="center">

<A href="index.htm"><B>TORNA ALLA PAGINA INIZIALE</B>

</A></P>

</BODY>

</HTML>



Esercizio 14 (pagina con collegamenti a pagine di altri siti web e indirizzi internet)
lo svolgimento di questo esercizio necessita del materiale contenuto in una cartella

<HTML>

<HEAD>

<TITLE>LINKS PER I BLINK 182</TITLE>

<BGSOUND src="adams.mid" loop="1">

</HEAD>

<BODY background="bg_link.gif">

<P align="center"><font size="6"><B>LINKS</B></FONT><BR>

<BR>

<BR>

<FONT size="4"><B>PER MAGGIORI INFORMAZIONI SUI BLINK SI POSSONO VISITARE I SEGUENTI SITI:</B></FONT><BR>

<BR>

<A href="http://www.blink182.com" target="_blank">http://www.blink182.com</A><BR>

<BR>

<A href="http://members.xoom.it/blink_182"target="_blank">http://members.xoom.it/blink_182</A>

<BR>

<BR>

<A href="http://www.blink-182.org" target="_blank">http://www.blink-182.org</A><BR>

<BR>

<A href=http://www.theblink182show.com target="_blank">http://www.theblink182show.com</A><BR>

<BR>

<BR>

<B>OPPURE SCRIVERE AL SEGUENTE INDIRIZZO:</B>

</FONT><BR>

<BR>

<BR>

<A href="mailto:blink@music.it"><IMG src="mail.gif" border="0" width="32"height="32"></A><BR>

<A href="mailto:blink@music.it">blink@music.it</A><BR>

<BR>

<BR>

</P>

</BODY>

</HTML>

Dopo aver denominato la pagina links.htm (o in un altro modo opportuno), potete inserirla nel sistema di pagine dell'esercizio 13 realizzando gli opportuni collegamenti.



Esercizio 15 (pagina con collegamenti all'interno della stessa)
lo svolgimento di questo esercizio necessita del materiale contenuto in una cartella

<HTML>

<HEAD>

<TITLE>LA MUSICA DEI PINK FLOYD</TITLE>

<BGSOUND src="thewall.mid" loop="infinite">

</HEAD>

<BODY background="bg_pink.jpg">

<P align="center"><BR>

<BR>

<IMG src="pf1.jpg" width="474" height="278"><BR>

<BR>

</P>

<DIV align="center"><CENTER>

<TABLE border="0" cellpadding="10" cellspacing="10" width="95%">

<TR>

<TD width="100%"><P align="center"><A name="inizio">

<FONT size="6" face="arial"><B>LA MUSICA DEI PINK FLOYD</B></A><BR>

<BR>

</FONT></P>

<FONT size="3" face="arial"><P>

I Pink Floyd nascono ufficialmente nel 1967 con l'uscita del loro primo album <I>The piper at the gates of down</I>. Il gruppo come spesso accade per le band inglesi, si forma qualche anno prima sui banchi di scuola: Manson, Barrett, Waters e Wrigth si frequentavano infatti dai tempi del liceo.<BR>

<BR>

La leggenda dice che il nome del gruppo fu scelto da Barrett ispirato da due bluesman che apprezzava moltissimo ovvero <I>Pink Anderson</I> e <I>Floyd Council</I>. Sin dai primi tempi però Barrett, che era la mente compositiva del gruppo, cominciò a manifestare seri problemi mentali a causa dell'uso di droghe come l'LSD che usava per ispirarsi e comporre le canzoni dei P.F. Lo stato di Barrett peggiorò al punto che i membri della band furono costretti a sostituirlo durante le registrazioni dell'album <I>A sacerful of secrets</I>, il sostituto fu un certo David Giulmur....., a questo punto la band assume la formazione che è arrivata a noi fino al 1979 circa.

</P>

<DIV align="center"><CENTER>

<TABLE border="0" cellpadding="10" cellspacing="10" width="95%">

<TR>

<TD width="100%"><P align="center">

<IMG src="pf2.gif" width="189" height="272"></P>

</TD>

</TR>

</TABLE>

</CENTER></DIV>

<P align="center"><FONT size="3" face="arial"><BR><A href="#inizio">

<B>TORNA ALL'INIZIO DELLA PAGINA</B></FONT></A><font size="3" face="arial"><BR>

<BR>

<BR>

</FONT>

<P>Non è semplice classificare la musica dei Pink Floyd, essa infatti è tentacolare. Nei trenta anni di musica che hanno prodotto hanno fatto e sperimentato tutto il possibile. Celebri sono le <I>suites</I>, brani strumentali che accompagnano l'ascoltatore in un mondo fatto di suggestioni e ispirazione. Una <I>suite</I> che mi ha sempre impressionato anche se ha un breve testo, è quella che apre e chiude l'album <B>Shine on your crazy diamond</B>, (potrebbe essere definita una canzone io, la considero una <I>suite</I>).<BR>

Proprio le <I>suites</I> sono forse l'elemento più importante della musica dei Pink Floyd, in esse infatti si ritrova quella vena creativa che contraddistingueva il gruppo quando ancora Barrett stava bene. Ispirazione, ricerca e abbinamento del connubio <B>immagini/musica</B> sono dirompenti nell'album/film <I>Live at Pompeii</I>, dove il gruppo in alcuni tratti si lascia trasportare dal luogo e dà libero sfogo all'improvvisazione.

</P>

<DIV align="center"><CENTER>

<TABLE border="0" cellpadding="10" cellspacing="10" width="95%">

<TR>

<TD width="100%"><P align="center">

<IMG src="pf3.gif" width="192" height="289">

</P>

</TD>

</TR>

</TABLE>

</CENTER></DIV>

<P align="center"><FONT size="3" face="arial"><BR><A href="#inizio">

<B>TORNA ALL'INIZIO DELLA PAGINA</B></FONT></A><font size="3" face="arial"><BR>

<BR>

<BR>

</FONT>

<P>I Pink Floyd hanno sempre visto la loro musica in funzione dello spettacolo <I>live</I>, essi infatti furono i primi a studiare il modo di sonorizzare gli ambienti dove suonavano in modo da far sembrare al pubblico di essere <B>immersi nella musica</B> a360°. Allo scopo pensarono anche di usare delle diapositive proiettate durante i concerti. In questo modo ottenevano un duplice effetto: rapivano con le immagini l'attenzione del pubblico e grazie alla musica, che sembrava <I>descrivere</I> le immagini, li trasportava direttamente nei luoghi rappresentati.<BR>
Questa caratteristica i Pink Floyd non l'hanno mai persa arrivando negli ultimi anni, a presentare dei concerti spettacolari per trovate, scenografie, luci e filmati.

</P>

<DIV align="center"><CENTER>

<TABLE border="0" cellpadding="10" cellspacing="10" width="95%">

<TR>

<TD width="100%"><P align="center">

<IMG src="pf4.gif" width="224" height="244"></P></TD></TR>

</TABLE>

</CENTER></DIV><P>

Il sound dei Pink Floyd è segnato in modo indelebile dal suono delle chitarre. Molti dei loro brani ne sono dominati, ogni strumento comunque ha il suo posto nell'anima dei brani. Le sonorità degli strumenti sono sfruttate per dare atmosfera alle <I>suites</I> e a rendere le canzoni uniche tra loro. <BR>
I Pink Floyd non hanno mai smesso di sperimentare nella loro musica; questa ricerca di soluzioni originali è palese in canzoni come <B>Wish you were here</B> o The <B>great gig in the sky</B> dove i Floyd costruiscono una canzone sulla voce delle coriste.

<BR>

</P>

</TD>

</TR>

</TABLE>

</CENTER></DIV>

<FONT size="3" face="arial">

<P align="center"><A href="#inizio">

<B>TORNA ALL'INIZIO DELLA PAGINA</B></A><BR>

<BR>

<BR>

</FONT></P>

</BODY>

</HTML>



Esercizio 16 (insieme di pagine con frame laterale sinistro)
lo svolgimento di questo esercizio necessita del materiale contenuto in una cartella
Realizzate le cinque seguenti pagine:

index.htm

<HTML>

<HEAD>

<TITLE>BRUCE CHATWIN: UNA VITA NOMADE</TITLE>

</HEAD>

<FRAMESET cols="150,*">

<FRAME name="menu" target="principale" scrolling="auto" src="menu.htm">

<FRAME name="home" target="home" scrolling="auto" src="home.htm">

</FRAMESET>

</HTML>

menu.htm

<HTML>

<HEAD>

<TITLE>MENU</TITLE>

<BASE target="principale">

</HEAD>

<BODY background="bg.gif" text="#800000" link="#800000" vlink="#800000" alink="#800000">

<P><BR>

<IMG src="chat.jpg" width="123" height="153"><BR>

<FONT size="4" face="Comic Sans MS"><B><BR>

</B><A href="vita.htm" target="home">

<B>LA VITA</B></A><BR>

<BR>

<BR>

<A href="opere.htm" target="home">

<B>LE OPERE</B></A><BR>

<BR>

<BR>

<IMG src="under.gif" width="93" height="60"><BR>

<BR>

</FONT></P>

</BODY>

</HTML>

home.htm

<HTML>

<HEAD>

<TITLE>HOME</TITLE>

<BASE target="home">

</HEAD>

<BODY background="bg.gif" text="#800000" link="#800000" vlink="#800000" alink="#800000">

<DIV align="right">

<TABLE border="0" cellpadding="10" cellspacing="10" width="100%">

<TR>

<TD width="100%"><P align="center">

<font face="Comic Sans MS"><IMG src="titolo.jpg" width="384" height="28"><BR>

<BR>

</FONT></P>

<P align="left"><FONT face="Comic Sans MS">Bruce Chatwin, rivoluzionario o conservatore, scrittore o saggista, esteta raffinato e snob o esaltatore del gusto popolare, autore elitario o divulgatore destinato al vasto pubblico?<BR>

Dava l'impressione di essere una cosa e, al tempo stesso, il suo esatto contrario. E se mai qualcuno ha saputo approfittare della difficile arte degli opposti, questo fu Bruce Chatwin. ombra di <B>Un ruolo gli si addiceva senza dubbio: quello del grande viaggiatore</B>; viaggiatore privilegiato dalla propria cultura e dalle possibilità economiche, ma capace di percepire lo spirito dei luoghi e delle persone, anche se umili e modesti.<BR>

</FONT>

</P>

</TD>

</TR>

</TABLE>

</DIV>

</BODY>

</HTML>

opere.htm

<HTML>

<HEAD>

<TITLE>LE OPERE</TITLE>

<BASE target="home">

</HEAD>

<BODY background="bg.gif" text="#800000" link="#800000" vlink="#800000" alink="#800000">

<DIV align="right">

<TABLE border="0" cellpadding="10" cellspacing="10" width="100%">

<TR><TD width="100%"><P align="center">

<FONT face="Comic Sans MS"><IMG src="titolo.jpg" width="384" height="28"><BR>

<BR>

</FONT></P><DIV align="center">

<CENTER><TABLE border="0" cellpadding="10" cellspacing="10" width="95%">

<TR>

<TD align="center" width="50%"><IMG src="anatomia.jpg" width="138" height="214">

</TD>

<TD align="center" width="50%"><IMG src="che.jpg" width="138" height="214">

</TD>

</TR>

<TR>

<TD align="center" width="50%"><IMG src="collina.jpg" width="138" height="214">

</TD>

<TD align="center" width="50%"><IMG src="ouidah.jpg" width="138" height="214">

</TD>

</TR>

<TR>

<TD align="center" width="50%"><IMG src="patagon.jpg" width="138" height="214">

</TD>

<TD align="center" width="50%"><IMG src="ritorno.jpg" width="138" height="214">

</TD>

</TR>

<TR>

<TD align="center" width="50%"><IMG src="utz.jpg" width="138" height="214">

</TD>

<TD align="center" width="50%"><IMG src="vie.jpg" width="138" height="214">

</TD>

</TR>

</TABLE>

</CENTER></DIV><P align="center"><BR>

<A href="home.htm" target="home">

<IMG src="indietro.gif" border="0" width="100" height="38"></FONT></A><BR>

<BR>

<BR>

</P>

</TD>

</TR>

</TABLE>

</DIV>

</BODY>

</HTML>


vita.htm

<HTML>

<HEAD>

<TITLE>LA VITA</TITLE>

<BASE target="home">

</HEAD>

<BODY background="bg.gif" text="#800000" link="#800000" vlink="#800000" alink="#800000">

<DIV align="right">

<TABLE border="0" cellpadding="10" cellspacing="10" width="100%">

<TR>

<TD width="100%"><P align="center"><FONT face="Comic Sans MS">

<IMG src="titolo.jpg" width="384" height="28">

</FONT><FONT size="2" face="Comic Sans MS"><BR>

<BR>

<BR>

<BR>

</FONT></P>

<P align="left"><FONT size="3" face="Comic Sans MS">Dopo quasi otto anni di ricerche e di libero accesso a tutti gli archivi dello scrittore, compreso quello di Elizabeth Chatwin, e decine di colloqui con coloro che lo conobbero, esce la biografia forse definitiva, per la sua completezza documentaria sulla figura del Grande Nomade, Bruce Chatwin, realizzata da Nicholas Shakespeare. <BR>

<BR>

Nel 1989, si spegneva, malato d'AIDS, quello che Salman Rushdie definì "l'intelligenza piu'brillante mai incontrata nei miei viaggi". Fotografo per talento estetico, scrittore per passione, Chatwin esordì nel 1979 con un libro che ha segnato la storia del viaggio:"In Patagonia".<BR>

<BR>

Animo inquieto, i suoi libri tradotti in Italia da Adelphi, grazie all'amicizia che legò Roberto Calasso allo scrittore inglese, riveleranno nella descrizione della sua idea di vita nomade un incredibile talento narrativo: "Le vie dei canti", "Anatomia dell'irrequietezza", "Cosa ci faccio io qui?", acquerelli di viaggio carichi di quei colori intensi che Chatwin amo' nell'arte e nella fotografia come nella vita.<BR>

<BR>

</P>

<P align="center"><BR>

<A href="home.htm" target="home">

<IMG src="indietro.gif" border="0" width="100" height="38"></FONT></A><BR>

<BR>

<BR>

</FONT></P>

</TD>

</TR>

</TABLE>

</DIV>

</BODY>

</HTML>



Esercizio 17 (pagina con campi di testo e radiobutton per questionario da inviare via Email)
lo svolgimento di questo esercizio necessita del materiale contenuto in una cartella


<HTML>

<HEAD>

<TITLE>QUESTIONARIO PREFERENZE LETTERARIE</TITLE>

</HEAD>

<BODY background="bg_book.gif">

<FORM action="mailto:littlepan@tin.it"method="post">

<P><FONT size="4">

<B>QUESTIONARIO PREFERENZE LETTERARIE</B></FONT><BR>

<BR>

</P>

</FORM>

<FORM>

<STRONG>Inserisci il tuo nome</STRONG><BR>

<INPUT type="text" value="il tuo Nome" name="Nome" maxlength="20" size="20"></P>

<B>Inserisci il tuo Cognome</B><BR>

<INPUT type="text" value="il tuo Cognome" name="Cognome" maxlength="20" size="20"><P>

<B>Inserisci il tuo Indirizzo</B><BR>

<INPUT type="text" value="il tuo indirizzo" name="indirizzo" maxlength="50" size="50">

<P><B>Inserisci il tuo E-mail</B><BR>

<INPUT type="text" value="il tuo E-mail" name="E-mail" maxlength="30" size="30">

<P><B>Inserisci il tuo autore preferito</B><BR>

<INPUT type="text" value="il tuo autore" name="autore" maxlength="50" size="30">

<P><B>Inserisci il tuo libro preferito</B><BR>

<INPUT type="text" value="il tuo libro" name="libro" maxlength="50" size="30">

<BR>

<BR>

<BR>

<P><INPUT type="submit" value="INVIA!!!"></P>

</FORM>

</BODY>

</HTML>



Esercizio 18 (pagina con metatag per indicarne il contenuto ai motori di ricerca)
lo svolgimento di questo esercizio necessita del materiale contenuto in una cartella

<HTML>

<HEAD>

<TITLE>Combattere la depressione</TITLE>

<META name=”keywords” content=”depressione, disturbi dell’umore”>

<META name=”description” content=”depressione, tre sistemi per prevenirla o combatterla”>

</HEAD>

<BODY background="bk_dep.jpg">

<P align="center"><br>

<IMG src="boy.gif" width="103" height="74"><br>

<BR>

</P>

<P>I TRE METODI CHE UTILIZZO PER TIRARMI SU DI MORALE:

<UL>

<UL>

<LI>Faccio un salto in videoteca e prendo un film di Billie Crystal oppure uno di avventura, hai presente quei film in cui al protagonista capita di tutto, (roba che un comune mortale morirebbe 10 volte solo nel primo tempo) ma arriva sempre alla fine del film con la moglie uccisa, il figlio massacrato, lui stesso ha qualche costola rotta una sigaretta spezzata che gli pende dalle labbra e un viso invariabilmente sporco di fumo nero delle 26.000 esplosioni che hanno costellato il film tra una battuta ed un'altra e conclude dicendo pressappoco così: "Ehi, Jack, in fondo poteva andare peggio!!!"<BR>

<BR>

<LI>In assetto da combattimento, bandana sulla testa e cucchiaino tra i denti supero lo sbarramento di un fratello una sorella e una mamma di troppo e con sprezzo del pericolo assalto in solitaria un barattolo di Nutella formato famiglia.<BR>

<BR>

<LI>Inizio a pensare di essere morto e immagino che tutte le persone che conosco siano sinceramente disperate e mi piangano con insanabile dolore. M'immagino tutta la scena del mio funerale facendo attenzione a rendere sinanche i più piccoli dettagli. Alla fine, la scena appare così vivida che io stesso mi sento meglio … quando realizzo che sono ancora vivo :-)<BR>

<BR>

</UL>

</BODY>

</HTML>



Esercizio 19 (pagina con un javascript che produce una scritta nella barra di stato in basso oppure un javascript che impedisce l'uso del pulsante si destra del mouse)
lo svolgimento di questo esercizio necessita della pagina realizzata a conclusione dell'esercizio 15

Riprendete l'esercizio 15 e inserite nella quarta riga dopo <TITLE>LA MUSICA DEI PINK FLOYD</TITLE> il seguente javascript che produce una scritta nella barra di stato:

<SCRIPT language=JavaScript>

<!-- Hide from old browsers

message = " BENVENUTI NEL " + " GRANDE SITO DEDICATO" + " AI PINK FLOYD"

scrollSpeed=25

lineDelay=1500

txt = ""; function scrollText(pos) {if (message.charAt(pos) != '^') {txt = txt + message.charAt(pos); status = txt;pauze = scrollSpeed}; else {pauze = lineDelay; txt = ""; if (pos == message.length-1) pos = -1}; pos++; setTimeout("scrollText('"+pos+"')",pauze)} scrollText(0)

</SCRIPT>

In alternativa in fondo alla terzultima riga prima di </BODY> potete inserire un altro javascript che impedisce l'uso del pulsante si destra del mouse:

<SCRIPT language=JavaScript>

var message="SPIACENTE NON SI PUÒ FARE";

function click(e) {if (document.all) {if (event.button == 2) {alert(message); return false;}} if (document.layers) {if (e.which == 3) {alert(message); return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);} document.onmousedown=click;

</SCRIPT>

Ultime modifiche: martedì, 3 marzo 2020, 10:33