Unintroduzione a HTML (II). 4-2 Includere figure con i tag immagine Le immagini possono essere usate...

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-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

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 …

Unintroduzione a HTML (II). 4-2 Includere figure con i tag immagine Le immagini possono essere usate...

Documents

Transcript of Unintroduzione a HTML (II). 4-2 Includere figure con i tag immagine Le immagini possono essere usate...