Impareremo oggi a inserire un immagine all'interno di una cella.
Il tag che determina un'immagine all'interno di un documento è <IMG>, al quale possono venire associati dei parametri come:
< SRC="nomefile.ext"> specifica il file grafico, affinchè l'immagine venga visualizzata E' l'unico tag da inserire obbligatoriamente
<ALIGN=TOP/MIDDLE/BOTTOM> Specifica, se il testo successivo deve essere allineato in alto (TOP), al centro (MIDDLE) o in basso (BOTTOM) rispetto all'immagine.
ALT="testo" specifica un testo alternativo che il browser dovrà utilizzare nel caso che non sia in grado di visualizzare correttamente l'immagine (o nel caso sia stata disattivata la funzione di caricamento automatico delle immagini). Utilizzatelo sempre con brevi descrizioni.
Questo testo è allineato in alto:
L'istruzione utilizzata Š <IMG SRC="pippo.jpg" ALIGN=top>
Insieme al nome del file con la sua estensione in questo caso pippo.jpg dovete scrivere tutto il percorso dove è situata l'immagine nel vostro computer. Esempio se l'immagine l'avete sul Desktop dovrete scrivere:
<IMG SRC="C:\Documents and Settings\Administrator\Desktop\pippo.jpg" ALIGN=top>.
Adesso torniamo all'esercizio della costruzione della tabella vista nella lezione 3:
<html>
<head>
<title>Home</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p> La mia prima pagina </p>
<table width="309" border="2" height="202" align="center">
<tr>
<td bordercolor="#00FF66">1 </td>
<td rowspan="2" align="center" bordercolor="#0000CC">3</td>
</tr>
<tr>
<td bordercolor="#FF0000" >2</td>
</tr>
</table>
</body>
</html>
ora qui inseriamo l'immagine:
<html>
<head>
<title>Home</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p> La mia prima pagina </p>
<table width="309" border="2" height="202" align="center">
<tr>
<td bordercolor="#00FF66">1 </td>
<td rowspan="2" align="center" bordercolor="#0000CC">3</td>
</tr>
<tr>
<td bordercolor="#FF0000" >2</td>
<IMG SRC="C:\Documents and Settings\Administrator\Desktop\pippo.jpg" ALIGN=top>
</tr>
</table>
</body></html>
In questo modo abbiamo inserito l'immagine nella pagina html ma non nella tabella.
Per farlo si fa cosŤ:
<html>
<head>
<title>Home</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p> La mia prima pagina </p>
<table width="309" border="2" height="202" align="center">
<tr>
<td bordercolor="#00FF66">1 </td>
<td rowspan="2" align="center" bordercolor="#0000CC"> <IMG SRC="C:\Documents and Settings\Administrator\Desktop\pippo.jpg" ALIGN=top>3</td>
</tr>
<tr>
<td bordercolor="#FF0000" >2</td>
</tr>
</table> </body>
</html>
Osservate il primo modo e poi il secondo. Qual è la differenza?
Dunque si puo dedurre da ciò che se si vuole inserire un immagine all'interno di una cella bisogna dare il comando di <IMG SRC="pippo.jpg"> subito dopo il tag di costruzione della cella in questione.
Proviamo ad inserire il testo all'interno della cella accanto all'immagine:
<html>
<head>
<title>Home</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p> La mia prima pagina </p>
<table width="309" border="2" height="202" align="center">
<tr>
<td bordercolor="#00FF66">1 </td>
<td rowspan="2" align="center" bordercolor="#0000CC"> pippo e il suo amico topolino<IMG SRC="C:\Documents and Settings\Administrator\Desktop\pippo.jpg" ALIGN=top>3</td>
</tr>
<tr>
<td bordercolor="#FF0000" >2</td>
</tr>
</table>
</body>
</html>
In questo modo avremo il testo pippo e il suo amico topolino posizionato sul top. Se invece lo volessimo al centro dovremmo inserire middle al posto di top
<html>
<head>
<title>Home</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p> La mia prima pagina </p>
<table width="309" border="2" height="202" align="center">
<tr>
<td bordercolor="#00FF66">1 </td>
<td rowspan="2" align="center" bordercolor="#0000CC"> pippo e il suo amico topolino<IMG SRC="C:\Documents and Settings\Administrator\Desktop\pippo.jpg" ALIGN=middle>3</td>
</tr>
<tr>
<td bordercolor="#FF0000" >2</td>
</tr>
</table>
</body>
</html>
SALVATE E AGGIORNATE SEMPRE PER POTER VEDERE I CAMBIAMENTI CHE EFFETTUATE!!!!!!
Dimensionamento delle immagini:
Tramite i parametri WIDTH=valore HEIGHT=valore, si specificano cosi le dimensioni esatte dell'immagine corrispondente. Il browser in questo modo fissa lo area opportuna all'interno della pagina.
Importante: i parametri WIDTH e HEIGHT devono indicare soltanto le dimensioni originali dell'immagine. Se si desidera rimpicciolirla o ingrandirla, è necessario farlo con un programma adatto per tale scopo.