Post on 01-May-2015
Un’introduzione a HTML(II)
4-2
Includere figure con i tag immagine
• Le immagini possono essere usate come link utilizzando i tag àncora
• Formato del tag immagine: <img src="nome del file">
– src sta per “source”, sorgente
– usa le regole sui path relativi e assoluti
– Esempio: <img src=“gatto.jpg”>inserisce una la figura memorizzata nel file gatto.jpg nel documento
• Immagini GIF e JPEG
– GIF: Graphic Interchange Format
– JPEG: Joint Photographic Experts Group
– l’estensione dei file (.gif, .jpg) dice al browser in quale formato è codificata l’immagine
4-3
Posizionare un’immagine nel documento
• Di default, le immagini sono inserite nella pagina nel punto dove il tag è specificato in HTML; il testo si allinea al margine inferiore
• Si può usare l’attributo align per allineare l’immagine con la riga superiore del testo o inferiore (top, middle, bottom)
• L’attributo align con valore left o right colloca l’immagine sul margine della finestra del browser — il testo le scorre intorno
• Per inserire un’immagine da sola, senza testo, basta racchiudere il relativo tag tra due tag di paragrafo <p> e </p>
Esempi
• <img src=“gatto.jpg” align=“top”>il testo è allineato al margine superiore della figura
• <img src=“gatto.jpg” align=“bottom”>il testo è allineato al margine inferiore della figura
• <img src=“gatto.jpg” align=“left”>il testo “scorre” a lato della figura: la figura viene allineata sul margine sinistro della pagina
• <img src=“gatto.jpg” align=“center”>il testo “scorre” ai lato della figura: la figura viene allineata al centro della pagina
• E’ possibile specificare le dimensioni della figura (in pixel):<img src=“gatto.jpg” height=“130”, width=“192”>
• E’ possibile anche definire una figura di sfondo per la pagina:<body background=“sfondo.jpg”>
4-5
Gestire i colori
• Si può colorare sia lo sfondo che il testo
• L’attributo bgcolor del tag body assegna un colore uniforme allo sfondo– specificato con un numero esadecimale (codifica
RGB), oppure
– utilizzando nomi di colori predefiniti
• L’attributo color si può usare con i tag del testo principale, link o font
4-6
4-7
4-8
4-9
Liste
• Puntata (non ordinata):– <ul> e </ul> all’inizio e alla fine
– <li> e </li> racchiudono gli elementi della lista
• Ordinata (numerata):– <ol> e </ol> all’inizio e alla fine
– utilizza lo stesso tag <li>
• Sottolista: una lista dentro un’altra
Esempi
• Lista non ordinata:<ul>
<li> mele </li> <li> pere </li> <li> arance </li>
</ul>• Lista ordinata:
<ol><li> Rossi </li>
<li>Melandri </li> <li> Capirossi
</li> </ol>
• mele• pere• arance
1. Rossi2. Melandri3. Capirossi
4-11
Tabelle
• Una tabella inizia e finisce con i tag <table> e </table>
• Ogni riga è racchiusa dalla coppia <tr> e </tr>
• Ogni cella è racchiusa dalla coppia <td> e </td>
• Si può creare un’intestazione centrata sopra la tabella con i tag <caption> e </caption>
• Le intestazioni di colonna sono specificate come prima riga della tabella inserendo al posto dei tag delle celle i tag <th> e </th>
Esempi
<table border="1"> <tr>
<th>Anno</th><th>Vendite</th></tr><tr>
<td>2000</td><td>$18M</td></tr><tr>
<td>2001</td><td>$25M</td></tr> <tr>
<td>2002</td><td>$36M</td></tr
</table>
Anno Vendite
2000 $18M
2001 $25M
2002 $36M
4-13
Corsi in rete sull’ HTML
• Introduzione all’HTML di Dave Raggett http://www.diodati.org/w3c/raggett/overview.asp
• Guida HTML di W. Cecchin http://basic.html.it/guide/leggi/51/guida-html/
• Molti altri …