Esercitazione in classe del 10/12/2009

Prepariamo il nostro sito

1. Creare la pagina vuota index.html
2. Creare la pagina vuota style.css
3. Salvarle entrambe in una nuova cartella che chiameremo "nomesito"
4. Al suo interno creare una cartella vuota e chiamarla "immagini"
5. Creare il nuovo sito "esercitazione3" dal pannello "files"
6. Collegare il file index e css (Format-Css styles-Attach style sheet)

Definire le proprietà di base di un foglio css definendo il tag body:

1. la famiglia di font usati (font-family)
2. la grandezza dei font usati (font-size)
3. margini, padding e bordi = 0 (margin, padding, border)
4. colore base di sfondo grigio scuro #171717 (background-color)
5. colore base del testo grigio chiaro #ddd (color)
6. l'allineamento del testo (text-align)

Impostare i contenuti della pagina html come segue:

• Definire il title del sito e nominarlo con il proprio nome e cognome
• Creare 3 div uno consecutivo all'altro: uno che si chiami "testata", uno "contenuto" e uno "footer"

Div "testata"

• All'interno del div "testata" inserire l'immagine "logo.gif" che rappresenta il logo del nostro sito e che avrete precedentemente salvato nella cartella nomesito/immagini
• L'immagine deve essere cliccabile (tag "a" inseribile dal pannello proprietà tenendo selezionata l'immagine) e permettere di andare alla pagina index.html

Div "contenuti"

• Creare un titolo (h1), almeno tre paragrafi (p) e un link esterno al sito (a)
• Creare una porzione di testo in grassetto (strong)
• Creare una lista non ordinata con almeno tre elementi (ul con elementi li)

Div "footer"

• Creare un paragrafo di una riga con scritte le informazioni riguardo al sito. Copiare le seguenti: Nomesito © Copyright 2009 - Indirizzo Via tal dei tali 00 - Milano - Partita iva 00000000000

Definire nel css tutti i tag che sono stati creati

Div "testata"

1. deve avere larghezza (width) di 540px, padding e bordi a zero
2. deve essere centrato lateralmente rispetto alla pagina (margin)
3. L'mmagine deve avere bordo = 0 per annullare l'effetto bordo del link (#testata img)

Div "contenuti"

1. deve avere larghezza FISICA totale di 540px
   ma con un bordo continuo (solid) su tutti e 4 i lati di 2px di colore grigio #ccc
   e un padding di 20px per tutti e 4 i lati.
   Calcolare pertanto il width giusto.
2. deve essere centrato lateralmente rispetto alla pagina (margin)
3. Definire il colore di sfondo (background-color) con il seguente colore: #666
4. Definire un font diverso per il titolo e che sia di un colore diverso che si accosti bene allo sfondo e di una grandezza di 16px
5. Definire margini e padding a piacere per i paragrafi
6. Definire un colore a piacere per i link nello stato normale (a) e nello stato hover (a:hover) purchè siano diversi dai colori standard (blu e viola)

Div "footer"

1. Deve avere larghezza (width) di 540px e deve essere centrato rispetto alla pagina (margin), con padding verticale = 10px e orizzontale = 0
2. Impostare il colore #666 e una grandezza più piccola (11px) per il testo del footer (#footer p)