Esercizi di html
Provate a riprodurre i seguenti esercizi, senza guardare il codice sottostante.
Quando volete vedere la soluzione, cliccate col dasto destro del mouse per visualizzare il codice sorgente di questa pagina.
Alcune cose da tenere a mente:
- Scrivere tutti i tag in minuscolo per una questione di uniformità
- Chiudere sempre tutti i tag: i tag doppi con <tag> testo </tag> , i tag singoli con
<tag/>
- Ogni tag ha degli attributi, e gli attributi hanno dei valori. I valori degli attributi si scrivono tra le doppie virgolette " ".
Esempio: <tag attr1="val1" attr2="val2" ...> parte interna (pu? contenere altri tag) </tag>
- Annidamento: i tag possono essere annidati l'uno dentro l'altro.
Esempio:
<tag1 attributi> contenuto 1 <tag2> contenuto 2 </tag2> </tag1> - Indentazione: consiste nell'allineare apertura e chiusura del tag in modo che questi si trovino allo stesso livello, scorrendo il documento in verticale. Usate il tasto tab, a sinistra della lettera Q, per far rientrare il testo. Per il browser l'indentazione
? irrilevante, ma ? importante per le persone: una pagina complessa visualizzata in un unico blocco di testo sarebbe del tutto illeggibile per noi.
- Risorse che potrebbero essere utili:
Esercizio 1: tag di testo
- Testo verde grassetto
- Testo in Arial, corsivo sottolineato
- Testo in Lucida con il tag <blink>.
Il tag <blink> è un tag proprietario di Netscape, ed è disapprovato dalle
linee guida sull'accessibilit? rilasciate dal W3C, almeno fino a quando gli utenti non potranno controllarne l'effetto. Può infatti risultare molto fstidioso per chi legge.
Esercizio 2: liste
Lista non ordinata con pallini di tipo square
Lista ordinata
- Caffè
- Tè
- Latte
Lista ordinata con lettere
- Apples
- Bananas
- Lemons
- Oranges
Lista ordinata con numeri romani minuscoli
- Apples
- Bananas
- Lemons
- Oranges
Lista non ordinata annidata
Altra lista non ordinata annidata
Esercizio 3: tabelle
| Titolo 1 |
Titolo 2 |
Titolo 3 |
testo
testo
testo
|
DDD |
C |
| testo2testo2testo2 |
Testo E |
F |
Tabella con alcune celle unite: gli attributi colspan e rowspan
|
Media |
Occhi scuri |
| Altezza |
Peso |
| Maschi |
1.80 m |
75 kg |
50% |
| Femmine |
1.70 m |
55 kg |
60% |
Tabella senza bordi, con horizontal line <hr/>
|
|
Web sites hits |
|
| bbc.co.uk |
70% |
| cnn.com |
60% |
| nytimes.com |
40% |
| repubblica.it |
30% |
|