Un’introduzione a HTML
(II)
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-2
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>
4-3
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”>
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-5
4-6
4-7
4-8
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
4-9
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. Rossi
2. Melandri
3. Capirossi
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>
4-11
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 …