Lezione 26 sett 2014 - 3 D SIA - esercizi in html - fonte Università di Genova

Esercizio 1

1. Creare una cartella sul desktop con il vostro cognome 
2. Creare nella cartella un documento HTML chiamato a piacere  con i seguenti elementi: 
1. sfondo: arancio (trovare il codice esadecimale corrispondente).
2. colore di base per il testo: blu (utilizzare il nome del colore).
3. dimensione di base del testo: 3.
4. titolo a piacere nell'intestazione
5. titolo H1 nel corpo del testo. Una ed una sola parola del titolo deve essere rossa e in corsivo.
6. 1 paragrafo con il font di dimensione invariata.
7. 1 paragrafo con il font di dimensione maggiore, usando le dimensioni relative (+1).
8. 1 paragrafo con il font di dimensione minore, usando le dimensioni assolute, di colore verde scuro (trovare il codice esadecimale corrispondente).
3. Materiale on-line:
1. Riassunto tag HTML principali 
2. Manuale HTML (in inglese) 
3. Manuale HTML (in italiano) 

Esercizio 2

2. Attraverso un motore di ricerca (ad es. Google) recuperate un'immagine di alcuni  pianeti del sistema solare (i siti di universita' italiane o straniere sono accessibili dal laboratorio.
   In alternativa ecco alcune immagini 
2. saturno
3. terra e luna 
4. luna
5. giove
6. marte
7. sistema solare
3. Creare una pagina HTML chiamata index.htm avente come sfondo una foto del cielo profondo
4. Nel corpo del testo inserire le  immagini (con o senza immagini) dei pianeti allineandole al centro,  a destra e sinistra
5. Provate ad allineare il testo alle immagini in vario modi utilizzando gli attributi del tag IMG

Esercizio 3

Per questo esercizio è necessario reperire le risorse nel proprio computer o in Internet, copiarle nella propria cartella e rinominarle come indicato dalle specifiche sottostanti rispettando le opportune estensioni. 

• Create un documento HTML chiamato index.htm che contenga la descrizione del sistema solare
• In index.htm deve essere presente una tavola dei contenuti (indice iniziale) costruita come lista che rimanda alle varie sezioni (paragrafi) (tramite i riferimenti interni) e una serie di ancore (link interni) che rimandano all'inizio della pagina alla fine di ogni sezione.
• Le sezioni devono essere separate da una linea orizzontale (tag HR)
• All'interno dei paragrafi di ogni sezione deve essere presente un'immagine.
• Ad ogni immagine si deve associare un link (cioe' cliccando sull'immagine si seguira' il link corrispondente)
• Alla fine di ogni sezione occorre inserire un link al menu principale (tavola dei contenuti) all'inizio della pagina

ESERCIZI DI HTML

-Primo esercizio

Home page con tabella

Pippo.jpg		Il personaggio (link 1)
Il personaggio (link 2)	Pluto.jpg

Link 1: storia di Pippo, link per tornare alla home page

Link 2: storia di Pluto, link per tornare alla home page

-Secondo esercizio

Costruire una tabella con 2 celle unite come da figura contenente 2 immagini della scuola e, al centro, l’intestazione della scuola e un link ad una pagina di nome APERTA.HTM che riporti giornate e orari di scuola aperta.

Foto 1	ITCS G.B. Bodoni	Foto 2
	Giornate di scuola aperta

1. Far comparire nella barra del titolo del browser il proprio nome e cognome
2. Far comparire nella barra di stato il proprio nome ed il proprio cognome
3. Visualizzare il proprio nome colorato in rosso, font comics sans e con carattere di dimensione 20 punti
4. Che cosa è un browser?
5. Che cosa serve per scrivere documenti HTML?
6. Che differenza c’è tra computer client e computer server?
7. Fare un esempio di elemento del linguaggio html con il solo tag di apertura.
8. Scrivi i tag  per  creare  una tabella di 3 righe e 4 colonne con contenuto a piacere.
9. Creare una tabella con l’orario scolastico della classe III B Mercurio del Bodoni.

La tabella deve essere del tipo:

	Lun	Mar	Merc	Giov	Ven	Sab
1
2
3
4
5
6

10. Come si fa a creare un link ad un altro documento?
11. Creare 3 link a siti di cui si conosce l’indirizzo adottando le seguenti indicazioni:
• Colorare in modo differente i tre link
• Inserirli in un elenco puntato e numerato
• Modificare il tipo di carattere del secondo font
• Inserire i link in una tabella centrata nella pagina e colorandone lo sfondo

12. Scrivete,usando il programma Wordpad di Windows95,un qualsiasi testo,salvatelo e provate a leggerlo con Netscape.
13. Trasferite lo stesso ipertesto su netview.ba.infn.it (la macchina col server) e provate a vederlo con Netscape .Per far questo potete usare lo stesso Netscape con l'url:

14.ftp://http@netview.ba.infn.it/users/default/http/temp/

trascinando il vostro file dalla finestra di gestione risorse alla finestra di Netscape.

15. I comandi HTML
    <h1> </h1>
    <h2> </h2>
    <h3> </h3>
    <p>
    <i> </i>
    permettono gia' di scrivere un articolo completo di titolo,capitoli, paragrafi e firma. Provate a scrivere un breve testo formattandolo in questo modo.
16. Un ipertesto completo HTML ha la seguente struttura:
    <html> <head>
    <title> titolo </title>
    </head>
    <body>
    </body> </html>
    Inserite il testo scritto prima in questo schema.
17. Usando i comandi HTML:
    <ul> <ol>
    <li> elemento della lista
    <li> elemento della lista
    </ul> </ol>
    Scrivete una lista di parole o frasi, magari inserendovi dentro un'altra lista.
18. Usando il comando:
    <a href=URL> scritta in blu </a>
    provate a scrivere quelle frasi blu che clickate richiamano un altro documento. Ad es: Oggi sono stato dal mio amico Clinton alla casa bianca.
    L'url della casa bianca e' http://www.whitehouse.gov/
19. Usando il comando:
    <img src=URL>
    provate a inserire un'immagine nel vostro ipertesto.Ad esempio l'immagine che ha come url: http://www.ba.infn.it/www/ist.gif
20. Create una lista di elementi usando le immagini che trovate su http://www.ba.infn.it/www/icones/ di nome blueball.gif,redball.gif etc, per distinguere i vari elementi della vostra lista (cioe' non usate i comandi <ol> e <ul> prima visti ma disegnate voi stessi i "pallini" che indicano gli elementi della lista).
21. Create la vostra personal home page presentandovi alla rete e inserendo una lista di link preferiti.
22. Decorate la vostra personal home pages usando gli sfondi e i separatori che trovate su: http://www.ba.infn.it/www/icones/
23. Per costruire una tabella di numeri, parole, immagini o altro bastano i comandi:
    <table> (inizia la tabella)
    <tr>(inizia una riga)
    <td> primo elemento della riga </td>
    <td> secondo elemento della riga </td>
    - -
    <td> ultimo elemento della riga </td>
    </tr> (finisce riga)
    (eventuali altre righe)
    </table>(termina tabella)
    Provate a creare una tabella .
24. Provate a creare un documento con indice iniziale marcando le varie parti del documento col comando <a name=nomeparte >
25. Uno dei modi migliori di imparare l'HTML e' di guardare i comandi usati nel realizzare una pagina che vi interessa. Per fare questo selezionate Document Source nel menu' View.Per questo esercizio, cercate di riprodurre la struttura di un documento ben fatto trovato in rete, ritagliando e incollando i suoi comandi nel vostro testo. (Consiglio:per facilitare la cosa, salvate prima il documento nella stessa directory dove state lavorando e usate Wordpad per il lavoro di taglia e incolla.)
26. Inserite un orologio Java nella vostra pagina Web col comando:

27.<APPLET  

28.                 CODE=fileapplet.class

29.                 CODEBASE=Url della directory contenente fileapplet.class

30.                 WIDTH=larghezza in pixel della finestra dell'applet 

31.                 HEIGHT=altezza in pixel della finestra dell'applet >

32.     </APPLET>

33. http://www.ba.infn.it/%7ezito/discussion.html
    per comunicare tra di voi. Ad esempio fate a turno delle domande del tipo "Trovate l'immagine di una tartaruga in rete" facendo a gara a chi per primo inserisce nel messaggio di risposta una tale immagine.
34. Procuratevi una calcolatrice Javascript.Scegliete dal seguente documento: http://www-sci.lib.uci.edu/HSG/RefCalculators.html
    Caricate la calcolatrice su disco locale e vedete se funziona ancora aprendola in Netscape con "open file".