Torna alla pagina di Tecnologie Web
:: Laboratorio 1 ::
Esercizio 1
Scrivere un frammento di codice XHTML che rappresenti una lista di tre elementi, ognuno dei quali contiene un paragrafo e, rispettivamente, una lista non numerata, una lista numerata, una immagine.
SOLUZIONE
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Esercizio 1</title>
</head>
<body>
<ul>
<li>
<p>
<ul>
<li>primo elemento</li>
<li>secondo elemento</li>
<li>terzo elemento</li>
</ul>
</p>
</li>
<li>
<p>
<ol>
<li>primo elemento</li>
<li>secondo elemento</li>
<li>terzo elemento</li>
</ol>
</p>
</li>
<li>
<p>
<img src="http://islab.dico.unimi.it/martella/si/logo.jpg"
alt="Immagine non caricata :(" width="100px" height="100px"/>
</p>
</li>
</ul>
</body>
</html>
Esercizio 2
Scrivere un frammento di codice XHTML che rappresenti la tabellina delle moltiplicazioni fino al 5, con opportune intestazioni per gli operandi.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Esercizio 2</title>
</head>
<body>
<table>
<tr>
<th>
</th>
<td>
<th>1</th>
</td>
<td>
<th>2</th>
</td>
<td>
<th>3</th>
</td>
<td>
<th>4</th>
</td>
<td>
<th>5</th>
</td>
</tr>
<tr>
<th>
1
</th>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
</tr>
<tr>
<th>
2
</th>
<td>
2
</td>
<td>
4
</td>
<td>
6
</td>
<td>
8
</td>
<td>
10
</td>
</tr>
<tr>
<th>
3
</th>
<td>
3
</td>
<td>
6
</td>
<td>
9
</td>
<td>
12
</td>
<td>
15
</td>
</tr>
<tr>
<th>
4
</th>
<td>
4
</td>
<td>
8
</td>
<td>
12
</td>
<td>
16
</td>
<td>
20
</td>
</tr>
<tr>
<th>
5
</th>
<td>
5
</td>
<td>
10
</td>
<td>
15
</td>
<td>
20
</td>
<td>
25
</td>
</tr>
</table>
</body>
</html>
SOLUZIONE
Esercizio 3
Scrivere il codice XHTML per realizzare la form riportata in figura.
SOLUZIONE
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Esercizio 3</title>
</head>
<body>
<form>
<h2>Nuovo ordine</h2>
Nome: <input type="text" nome="nome" size="22"/>
Indirizzo: <input type="text" nome="indirizzo" size="38"/>
<br/><br/>
Citta': <input type="text" nome="citta" size="20"/>
Stato: <input type="text" nome="stato" size="20"/>
CAP: <input type="text" nome="cap" size="10"/>
<hr/>
<br/>
Tipo di capo: <select type="text" nome="tipo">
<option>cappotto</option>
<option>felpa</option>
<option>scarpe (rosa)</option>
<option>calze pecora</option>
<option>calze maiale</option>
</select>
Dimensione: XL <input type="radio" name="taglia" value="XL"/>
L <input type="radio" name="taglia" value="L"/>
M <input type="radio" name="taglia" value="M"/>
S <input type="radio" name="taglia" value="S" checked="checked"/>
<br/><br/>
Tipo di pagamento:
<input type="checkbox"/>Contrassegno
<input type="checkbox"/>Bonifico
<input type="checkbox"/>Carta di credito
<hr/>
<br/>
<input type="submit" value="invia ordine"/>
<input type="reset" value="cancella"/>
</form>
</body>
</html>
Esercizio 4
Considerare i seguenti codici:
dati.xml
<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="stile.css"?>
<classe>
<studente id=”Rossi”>
<nome>Mario</nome>
<cognome>Rossi</cognome>
<matricola>458962</matricola>
<recapito>
<via> via Risorgimento 78 </via>
<cap> 58962 </cap>
<comune> Udine </comune>
</recapito>
</studente>
<studente id=”Bianchi”>
<nome>Sara</nome>
<cognome>Bianchi</cognome>
<matricola>457125</matricola>
<recapito>
<via> via Aselli 5 </via>
<cap> 15777 </cap>
<comune> Cagliari </comune>
</recapito>
</studente>
<studente id=”Verdi”>
<nome>Simone</nome>
<cognome>Verdi</cognome>
<matricola>569862</matricola>
<recapito>
<via> via Rimembranze 6 </via>
<cap> 69321 </cap>
<comune> Aosta </comune>
</recapito>
</studente>
</classe>
stile.css
studente {
display: block;
width:10 cm;
background-color: orange;
color: black;
border: thick black solid:
margin 5mm;
}
nome, cognome, matricola {
display: block;
font-size: 20pt;
margin-left: 5pt;
}
recapito {
display: block;
font-family: monospace;
margin-left: 20pt;
}
Visualizzare il file dati.xml utilizzando il foglio di stile stile.css. Modificare a piacere il file di stile, consultando i manuali di riferimento disponibili in rete.
SOLUZIONE
Output senza modifiche:
Codice CSS modificato:
studente {
display: block;
width:10 cm;
background-color: #CEF6B7;
color: black;
border: thick black solid:
margin 5mm;
}
nome, cognome {
display: inline;
font-size: medium;
margin-left: auto;
font-family: "Times New Roman";
font-weight: bold;
}
matricola {
display: block;
font-style: normal;
}
recapito {
display: inline;
font-family: "Times New Roman";
margin-left: 10pt;
font-style: italic;
}
Output con qualche modifica:
Esercizio 5
Partendo dal documento XML dell’esercizio precedente, creare le regole per mostrare in blu i dati relativi allo studente Mario Rossi e in rosso quelli relativi a Sara Bianchi.
SOLUZIONE
studente {
display: block;
width:10 cm;
color: black;
border: thick black solid:
margin 5mm;
}
nome, cognome {
display: inline;
font-size: medium;
margin-left: auto;
font-family: "Times New Roman";
font-weight: bold;
}
matricola {
display: block;
font-style: normal;
}
recapito {
display: inline;
font-family: "Times New Roman";
margin-left: 10pt;
font-style: italic;
}
studente[id=Rossi] {
color:blue;
}
studente[id=Bianchi] {
color:red;
}
Output:
Esercizio 6
Creare una pagina XHTML contenente una serie di link. Usando CSS fare in modo che normalmente il colore dei link sia rosso; quando il cursore del mouse si posiziona su di essi il colore diventi giallo, e la grandezza del testo diventi 22 punti. Il colore dei link visitati deve essere blu.
SOLUZIONE
File XHTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>esercizio 6 </title> </head>
<body>
Questo collegamento ti porta a swappa : <a href="www.swappa.it"/>
<br/>
Questo a google : <a href="www.google.it"/> <br/>
MmMmMmMmMmMmMmMm!!
</body>
</html>
File CSS
a:LINK{
color:red;
}
a:HOVER {
color:yellow;
font-size: 22pt;
}
a:VISITED {
color:blue;
}
Torna alla pagina di Tecnologie Web
