docEsercitazione 2 - HTML "avanzato" + CSS base
download 
Reclamo Transcript
Esercitazione 2 - HTML "avanzato" + CSS base
Marco Porta – 2012/13
CIM – Web Design & Technologies
Esercitazione 2 – HTML "avanzato" + CSS base
Traccia di lavoro:
1. Creare la cartella web2 (sul desktop o dove si preferisce)
2. All’interno della cartella web2, creare il file di testo index.html (utilizzando 'Aptana Studio 3'
o un altro editor HTML o di testo puro)
3. In index.html inserire il codice che definisce una tabella come la seguente ("Lo strano caso del
dottor Jekyll e Mister Hyde" è un titolo <h1> e "Prospetto dei capitoli" è un titolo <h2>):
Lo strano caso del dottor Jekyll e Mister Hyde
Prospetto dei capitoli
Info \ Capitolo
Cap. 1
Cap. 2
Cap. 3
Cap. 4
Titolo
Storia della
porta
Alla ricerca del
signor Hyde
Il dr. Jekyll era
assolutamente
tranquillo
Il delitto Carew
Pagine
5 - 12
13 - 25
26 - 30
31 - 37
4. Modificare la tabella del punto 3 in modo che appaia come mostrato di seguito:
Info \ Capitolo
Titolo e pagine
Capitoli 1 - 4
Storia della
porta
Alla ricerca del
signor Hyde
Il dr. Jekyll era
assolutamente
tranquillo
Il delitto Carew
5 - 12
13 - 25
26 - 30
31 - 37
5.
Inserire alla fine della pagina, dopo la tabella, un link al file registrazione.html, che si
trova sempre in web2
6.
Creare, in web2, il file registrazione.html, e definire un contenuto che si presenti
grossomodo come mostrato nella pagina seguente. "Benvenuti nella pagina…" è un titolo <h1>,
mentre "Modulo di registrazione" è un titolo <h2>. "Inserendo i tuoi…" è un paragrafo (tag
<p>). Nel menù a tendina, oltre a "-Frequenza-", inserire "Giorno", "Settimana" e "Mese". Si
ricordi che per la definizione di caselle di testo, radiobutton, checkbox e bottoni di invio dei dati
inseriti in un form occorre usare il tag <input>, con valore dell’attributo type pari,
rispettivamente, a text, radio, checkbox e submit. Per definire menù a tendina si usa invece il tag
<select>, al cui interno si pongono tanti tag <option> quante sono le voci disponibili. Infine,
le aree di testo si definiscono con il tag <textarea>.
Marco Porta – 2012/13
7. Fare in modo che registrazione.html carichi il foglio di stile esterno miostile.css
(file di testo), posto nella cartella css (da creare dentro web2)
8. Nel foglio di stile miostile.css specificare che lo sfondo della pagina deve essere di un
colore a scelta (proprietà background-color)
9. Nel CSS, fare in modo che i titoli <h1> abbiano un font di tipo sans-serif, dimensione pari a
2 volte quella di default del loro contenitore, colore rosso, non siano in grassetto e centrati
(proprietà font-family, font-size, color, font-weight e text-align, con valori
sans-serif, 2em, red, normal e center)
10. Fare in modo che la pagina abbia un margine interno di 2.5 volte la dimensione del font di default
(valore 2.5em per la proprietà margin nello stile per il tag <body>)
11. In registrazione.html, fare in modo che il paragrafo ("Inserendo i tuoi dati…") sia blu,
utilizzando l’attributo style direttamente all’interno del tag <p> (proprietà color, valore
blue oppure #0000FF)
12. In miostile.css, definire lo stile per la classe importante del tag <span> in modo che il testo
corrispondente sia verde e in grassetto (proprietà color e font-weight, valori green e
bold). Utilizzare poi questo tag (e la relativa classe) per fare in modo che le parole "Cosa
aspetti?" nel paragrafo abbiano le relative caratteristiche
13. Fare in modo che i titoli <h2> siano circondati da un bordo rosso largo 5 pixel, distanziato dal
testo al suo interno di 20 pixel (proprietà border con valori solid red 5px e proprietà
padding con valore 20px)
14. Nel foglio di stile, impostare un’immagine (qualunque, ma in formato GIF, JPEG o PNG) come
sfondo (proprietà background-image del tag <body>, valore url(“…”))
