SITO FANCLUB Di VASCO ROSSI
Total Page:16
File Type:pdf, Size:1020Kb
SITO FANCLUB di VASCO ROSSI Struttura della pagina web (creare con il programma BLOCCO NOTE) <HTML> <HEAD> <TITLE>Vasco Rossi FanSite</TITLE> </HEAD> <BODY> </BODY> </HTML> Salviamo con il nome home.html e visualizziamo il risultato (OSSERVATE IL TITOLO IN ALTO) Creiamo una tabella per inserire I dati (all’interno di BODY) <TABLE WIDTH=100%> <TR> <TD HEIGHT=80>Vasco Rossi FanSite</TD> ‘Il Titolo in una riga di altezza 80 </TR> <TR HEIGHT=400> <TD><IMG SRC="vasco.jpg"></TD> ‘La foto in una riga di altezza 400 </TR> </TABLE> Salviamo e visualizziamo il risultato Mettiamo il titolo più grande <TD HEIGHT=80><H1>Vasco Rossi FanSite</H1></TD> Mettiamo il titolo al centro <TD HEIGHT=80 ALIGN=center><H1>Vasco Rossi FanSite</H1></TD> Salviamo e visualizziamo il risultato Mettiamo l’immagineo al centro <TD ALIGN=center><IMG SRC="vasco.jpg"></TD> Salviamo e visualizziamo il risultato Coloriamo lo sfondo di nero e il testo di rosso <BODY BGCOLOR=black> … <TD HEIGHT=80 ALIGN=center><FONT Color=red><H1>Vasco Rossi FanSite</H1></FONT></TD> Salviamo e visualizziamo il risultato Inseriamo, tra la riga del titolo e quella dell’immagine, una riga contenente i link per spostarsi tra le pagine: <TR HEIGHT=10> <TD ID="nav" BGCOLOR=Red ALIGN=center> <FONT Color=black> ‘sfondo della riga rosso e testo nero <A HREF=home.html>Homepage</A> - <A HREF=disco.html>Discografia</A> - <A HREF=concerti.html>Concerti</A> <A HREF=biblio.html>Bibliografia</A> <A HREF=canzoni.html>Canzoni</A> </FONT> </TD> </TR> Salviamo e visualizziamo il risultato Aggiungiamo un’ultima riga con una citazione di Vasco <TR> <TD HEIGHT=40 ALIGN=right> So che non è così quello che avevi in testa<BR> non ci puoi fare niente, la vita non si ferma. </TD> </TR> Salviamo e visualizziamo il risultato (COSA SI NOTA?: NIENTE???) Applichiamo il colore bianco e la dimensione piccola al carattere del testo della citazione <TR> <TD HEIGHT=40 ALIGN=right> <FONT COLOR=white SIZE=1> So che non è così quello che avevi in testa<BR> non ci puoi fare niente, la vita non si ferma. </FONT> </TD> </TR> Salviamo e visualizziamo il risultato Applichiamo uno stile grafico ai link (nella sezione HEAD) <HEAD> <TITLE>Vasco Rossi FanSite</TITLE> <STYLE TYPE="text/css"> a:link{ color:black; background-color: red; text-decoration: none; } a:visited{ color:black; background-color: red; text-decoration: none; } a:hover { color:red; background-color: black; } </STYLE> </HEAD> Salviamo e visualizziamo il risultato. LA HOME PAGE è terminata. Possiamo chiudere il file di blocco note. CREIAMO LA PAGINA PER LA DISCOGRAFIA (disco.html) Copiamo il file home.html nel file disco.html Apriamo il file disco.html con il programma blocco note Cambiamo il titolo <TD HEIGHT=80 ALIGN=center><FONT Color=red><H1>Discografia</H1></FONT></TD> Inseriamo le immagini e i titoli per la discografia nella sezione dove c’è la foto di Vasco <TR HEIGHT=400> <TD ALIGN=center> <FONT COLOR=yellow> <IMG SRC="sono-innocente.jpg"><BR>Sono innocente - 2014<BR> <IMG SRC="il-mondo-che-vorrei.jpg"><BR>Il mondo che vorrei - 2008<BR> <IMG SRC="buoni-o-cattivi.jpg"><BR>Buoni o Cattivi - 2004<BR> <IMG SRC="stupido-hotel.jpg"><BR>Stupido Hotel - 2001<BR> </FONT> </TD> </TR> Salviamo e visualizziamo il risultato Proviamo a passare dalla homepage alla discografia cliccando sui link CREIAMO LA PAGINA PER I CONCERTI (concerti.html) Copiamo il file home.html nel file concerti.html Apriamo il file concerti.html con il programma blocco note Cambiamo il titolo <TD HEIGHT=80 ALIGN=center><FONT Color=red><H1>Concerti</H1></FONT></TD> Inseriamo le immagini e i titoli per i concerti nella sezione dove c’è la foto di Vasco <TR HEIGHT=400> <TD ALIGN=center> <FONT COLOR=yellow> <IMG SRC="roma.jpg"><FONT COLOR=yellow>Roma</FONT><BR> <IMG SRC="sansiro2014.jpg"><FONT COLOR=yellow>S. Siro 2014</FONT><BR> <IMG SRC="vasco.jpg"><FONT COLOR=yellow>Castellaneta</FONT><BR> </FONT> </TD> </TR> Salviamo e visualizziamo il risultato Proviamo a navigare nel sito cliccando sui link. BUONA ‘NAVIGAZIONE’. .