Ricordo che i contenuti di questa lezione sono estratti dal sito: "http://it.html.net/tutorials/html/" ed
adeguati alla lezione.
Questo il codice completo che potete rielaborare e trasformare in modo creativo e personale
<html>
<head>
<title>Il mio primoo sito web</title>
</head>
<body>
<p>Contenuti estratti e adattati da "http://it.html.net/tutorials/html/"<hr /></p>
<ul>
<li>Elemento della lista</li>
<li>Altro elemento della lista</li>
</ul>
<p>Is used for paragraphs.</p>
<b>This text must be bold.</b>
<h1>CARMINE</h1>
<h2>CARMINE</h2>
<h3>CARMINE</h3>
<h4>CARMINE</h4>
<h5>CARMINE</h5>
<h6>CARMINE</h6>
<br/>
<h1>Un titolo</h1>
<p>testo, testo, testo, testo</p>
<h2>Un sottotitolo</h2>
<p>testo, testo, testo, teso</p>
<br/>
<ul>
<li>Carmine</li>
<li>Carmine</li>
</ul>
<br/>
<a href="http://www.istcompazzanox.it/">Vai al sito della scuola</a>
<br/>
<br/>
<br/>
<h1>PROSSIMO ARGOMENTO</h1>
<p>Gli Attributi di un Elemento</p>
<br/>
<ul>
<li>Colore</li>
<li>Immagini</li>
</ul>
<br/>
<br/>
<p>Colore Rosso</p>
<h2 style="background-color:#ff0000;">Mettiamo un po di rosso</h2>
<br/>
<br/>
<p>Il Logo della Nostra Scuola</p>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" />
<br/>
<br/>
<h2 style="background-color:Green;">Mettiamo un po di verde</h2>
<br/>
<br/>
<br/>
<p>Il Logo della Nostra Scuola con LINK</p>
<a href="http://www.istcompazzanox.it/"> <img src="http://www.istcompazzanox.it/images/logo/logo.jpg" /></a>
<br/>
<br/>
<br/>
<p>Come usare l'attributo "alt"</p>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" alt="Logo Scuola IC Azzano X" />
<br/>
<br/>
<br/>
<p>Come usare l'attributo "title"</p>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" title="Logo Scuola IC Azzano X" />
<br/>
<br/>
<br/>
<p>Come usare l'attributo "width e height"</p>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="200" height="50" />
<br/>
<br/>
<br/>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="50" height="200" />
<br/>
<br/>
<br/>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="100" height="100" />
<br/>
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="200" height="100" />
<img src="http://www.istcompazzanox.it/images/logo/logo.jpg" width="200" height="100" />
<br/>
<br/>
<br/>
<br/>
<h1>Le Tabelle</h1>
<p>Oggi 14 Dicembre Parliamo di Tabelle</p>
<h2>Iniziamo con le tabelle senza bordo</h2>
<p>All'inizio può sembrare complicato, ma in realtà tutto è facile e logico, proprio come ogni altra cosa in HTML.</p>
<br/>
<br/>
<h2>Esempio di tabella senza bordo:</h2>
<table>
<tr>
<td>Cella 1</td>
<td>Cella 2</td>
</tr>
<tr>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
</table>
<br/>
<br/>
<h2>Esempio di tabella con 3 righe e 4 colonne:</h2>
<table>
<tr> <td>Cella 1</td>
<td>Cella 2</td>
<td>Cella 3</td>
<td>Cella 4</td> </tr>
<tr> <td>Cella 5</td>
<td>Cella 6</td>
<td>Cella 7</td>
<td>Cella 8</td> </tr>
<tr> <td>Cella 9</td>
<td>Cella 10</td>
<td>Cella 11</td>
<td>Cella 12</td> </tr>
</table>
<p>Sempre senza bordo</p>
<br/>
<br/>
<h2>Esempio di tabella con 2 righe, 2 colonne e bordo:</h2>
<table border="1">
<tr> <td>Cella 1</td>
<td>Cella 2</td> </tr>
<tr> <td>Cella 3</td>
<td>Cella 4</td> </tr>
</table>
<p>grazie all'uso dell'attributo border e il valore in pixel</p>
<br/>
<br/>
<h2>Ovviamente aumentando il valore, cresce il bordo</h2>
<table border="4">
<tr> <td>Cella 1</td>
<td>Cella 2</td> </tr>
<tr> <td>Cella 3</td>
<td>Cella 4</td> </tr>00:00 14/12/2016
</table>
<p>valore in pixel 4</p>
<br/>
<br/>
<h2>Possiamo anche aumentare la larghezza</h2>
<p>In pixel, oppure in percentuale rispetto allo schermo</p>
<table border="4" width="30%">
<tr> <td>Cella 1</td>
<td>Cella 2</td> </tr>
<tr> <td>Cella 3</td>
<td>Cella 4</td> </tr>
</table>
<p>In questo caso, valore 30%</p>
<br/>
<br/>
<h2>Oppure controllare la posizione del contenuto nella cella</h2>
<p>con gli attributi: align e valing</p>
<table border="4" width="250" height="150">
<tr> <td align="right">Cella 1</td>
<td valign="top">Cella 2</td> </tr>
<tr> <td align="left">Cella 3</td>
<td align="right" valign="top">Cella 4</td> </tr>
</table>
<p>aling, per il controllo "a sinistra, al centro, a destra</p>
<p>valing, per il controllo "in alto, al centro, in basso</p>
<br/>
<br/>
<h2>Altri attributi: colspan e rowspan</h2>
<p>Iniziamo con Colspan, dall'inglese "column span" (colonne accoppiate)</p>
<table border="1">
<tr> <td colspan="3">Cella 1</td>
</tr>
<tr> <td>Cella 2</td>
<td>Cella 3</td>
<td>Cella 4</td>
</tr>
</table>
<br/>
<br/>
<p>Se invece avessimo fissato colspan a "2"?</p>
<table border="1">
<tr> <td colspan="2">Cella 1</td>
<td>Cella 2</td>
</tr>
<tr> <td>Cella 3</td>
<td>Cella 4</td>
<td>Cella 5</td>
</tr>
</table>
<br/>
<br/>
<h2>Adesso invece usiamo "rowspan"</h2>
<p>Rosspan specifica quante righe dovrebbero essere comprese in una cella</p>
<p>Proviamo con Rowspan "3"</p>
<table border="1">
<tr> <td rowspan="3">Cella 1</td>
<td>Cella 2</td>
</tr>
<tr> <td>Cella 3</td>
</tr>
<tr> <td>Cella 4</td>
</tr>
</table>
<br/>
<br/>
<p>Come in precedenza per le colonne, adesso possiamo provare ad unire solo alcune righe</p>
<p>Per esempio con rowspan "2", anzichè "3"</p>
<table border="1">
<tr> <td rowspan="2">Cella 1</td>
<td>Cella 2</td>
</tr>
<tr> <td>Cella 3</td>
</tr>
<tr> <td>Cella 4</td>
<td>Cella 5</td>
</tr>
</table>
<br/>
</body>
</html>
