Informatica e laboratorio per biotecnologie

Esercitazione del 3 novembre 2005

I seguenti esercizi richiedono di produrre delle semplici pagine html, da scrivere direttamente usando un editor (si vedano le istruzioni per l'uso dell'editor)

E' opportuno creare nella propria home Z: una cartella chiamata esercizi_html nella quale raccogliere i file che verranno prodotti.

Esercizi sull'uso dell'html

1. Visualizzare il sorgente di questo file, salvarlo, aprirlo con l'editor e individuarne i tag.
2. Produrre la pagina web ciao.html contenente la scritta "Hello world!". facsimile
3. Modificare la pagina web precedente, definendo come titolo "Hello world!". Il titolo deve comparire nella barra superiore della finestra. facsimile
   
4. Produrre la pagina web testo.html analoga a questo facsimile, sperimentando i tag b, big, small, i, em, sub, sup
5. Costruire la pagina web sezioni.html sperimentando l'uso dei tag h1, h2, ... h6 per le intestazioni e il tag p per i paragrafi - facsimile
6. Produrre la pagina web liste.html contenente gli elenchi riprodotti in questo facsimile
7. Costruire la pagina web tabelle.html contenente delle tabelle, sulla falsa riga di questo facsimile
8. Costruire la pagina web link.html contenente dei link verso pagine esterne (es: al sito dell'unimi www.unimi.it), verso pagine locali (es: una di quelle costruite in precedenza) e verso frammenti di pagina (usate l'attributo name del tag a).
9. Creare una cartella immagini dove salvare un'immagine scaricata dal web. Creare quindi la pagina web immagini.html contenente
   • l'immagine che avete appena salvato (percorso relativo)
   • un'immagine disponibile sul web e che non avete salvato (url dell'immagine)

Esercizi sull'uso dei fogli di stile

1. Modificare il colore di sfondo e del testo del file ciao.html - facsimile
2. Usando l'attributo background-image del tag body, mettete un'immagine come sfondo della pagina ciao.html - facsimile
3. Modificare l'aspetto del file sezioni.html: personalizzare lo stile dei tag body, p, h1, h2, ... modificando i colori di sfondo e del testo, oltre che il tipo, la dimensione e lo stile dei caratteri - facsimile
4. Salvare il file paragrafi.html e e modificarne l'aspetto, sperimentando tipi diversi di spaziatura e allineamento. - facsimile.
   NOTA: per poter applicare diversi stili ai vari paragrafi è possibile attribuire una classe specifica ad un determinato paragrafo. Ad esempio, se mettiamo nell'intestazione le seguenti regole:

   	p.destra {text-align: right}
   	p.centro {text-align: center} 

   e nel documento scriviamo

   	<p class="destra">Paragrafo 1</p>
   	<p class="centro">Paragrafo 1</p> 

   allora il paragrafo 1 sarà allineato a destra, mentre il paragrafo 2 sarà centrato
5. Salvare il file paragrafi2.html e sperimentare l'uso di bordi, modificandone margini, padding, spessore, colore, tipo di linea - facsimile
6. Modificare l'aspetto del file liste.html usando diversi tipi di punti/numerazione o usando delle immagini come punti - facsimile
7. Modificare l'aspetto dei link nel file link.html usando diversi colori e caratteri. Sperimentare l'uso delle pseudo-classi a:link, a:visited e a:hover come in questo esempio