Informatica e laboratorio per biotecnologie

Esercitazione di venerdì 11 novembre 2005

L'obiettivo dell'esercitazione è quello di produrre una pagina html, di cui potete vedere un'anteprima. La costruzione della pagina sarà guidata passo passo...

La pagina va scritta direttamente, usando un editor (si vedano le istruzioni per l'uso dell'editor).

Preparazione della struttura della pagina

[soluzione: file html]
  1. Create innanzitutto il file aforismi.html usando l'editor conTEXT.
  2. Inserite titolo e sottotitolo, usando i tag h1 e h2 - anteprima
  3. Inserite una tabella con due righe e due colonne - anteprima
  4. Nelle due celle A1 e A2 inserite il testo, usando il tag h3 per i nomi degli autori e il tag p per il testo - anteprima
  5. Cercate su internet due immagini in tema e salvatene l'url. Inserite poi nelle celle A3 e A4 della vostra tabella queste due immagini - anteprima
  6. Usando gli attributi height e align per il tag img allineate le due immagini ai lati della pagina e dimensionatele in modo che abbiano altezza pari a 80px - anteprima
  7. Inserite infine l'ultimo paragrafo, usando l'attributo id="footer". Questo vi consentira' in seguito di personalizzare con un css apposito tale paragrafo. Inserite poi un link all'url http://db.peacelink.org/aforismi/browse.php - anteprima

Formattazione con fogli di stile

[soluzione: file html con incluso foglio di stile]

A questo punto, potete personalizzare la vostra pagina inserendo un foglio di stile nell'intestazione della pagina (tra i due tag <head> e </head>). Le regole devono essere racchiuse tra i tag <style> e </style>

  1. Impostare lo stile del tag body, in modo che il colore del testo sia #191970, il colore di sfondo sia #ffffcc e il carattere usato sia verdana, arial, helvetica sans serif - anteprima
  2. Modificare lo stile della tabella (in particolare del tag td), in modo che il testo risulti staccato dai bordi di 4em ai lati e 0.5em sopra - anteprima
  3. Modificare lo stile dell'intestazione h1 in modo che sia centrata, di dimensione 28px, con sfondo di colore #deeaff e testo di colore #4682b4 - anteprima
  4. Modificare lo stile dell'intestazione h2 in modo che sia centrate, di dimensione 24px, stile corsivo, non grassetto, con sfondo di colore #deeaff e testo di colore #4682b4 - anteprima
  5. Modificare lo stile dell'intestazione h3 in modo che sia di dimensione 22px, non grassetto, con bordo inferiore di spessore 1px - anteprima
  6. Modificare lo stile dei paragrafi in modo che il testo abbia dimensione 14px - anteprima
  7. Modificate lo stile del paragrafo che avete chiamato footer (usate il selettore p#footer), in modo che risulti centrato, corsivo, con testo di colore #ffffcc, su sfondo di colore #4682b4 con margini laterali del 20%. Inoltre, modificate lo stile del tag a in modo che il link risulti di colore #ffca27 - anteprima
  8. Usando la pseudo-class a:hover fate in modo che quando il mouse passa sul link, questo risulti scritto in blu su sfondo rosa - anteprima
  9. Per concludere, togliete i bordi della tabella, sostituendo l'attributo border="1" del tag table con l'attributo border="0" - risultato finale