Inserimento di immagini

Una delle maggiori possibilità offerta dall'Html per rendere una pagina maggiormente professionale, o semplicemente più esplicativa, è l'inserimento di immagini, mediante il Tag vuoto <img>, ricordo che un Tag è vuoto quando non ha la relativa chiusura, in questo caso NON utilizzeremo qualcosa tipo </img>.

Per inserire fisicamente l'immagine utilizziamo l'attributo src (source) passandogli il nome (o percorso) dell'immagine con relativa estensione (ad esempio .jpg).

Prima di fornire qualche esempio e di analizzare tutti gli attributi di questo Tag è necessario chiarire quali sono i tipi di file immagine utilizzabili sul Web:

.jpg - formato a più di 16 milioni di colori, consigliato solo per fotografie che necessitino di una certa nitidità
.gif - più utilizzato sul Web leggero a 256 colori, questi file possono essere anche animati *
.png - simile al precedente, è un nuovo formato definibile come un potenziamento dei .gif
.bmp - valido ma sconsigliato, causa il suo "peso" rallenterebbe notevolmente i tempi di caricamento di una pagina

* I file .gif, come detto, possono anche essere animati, nel senso che è possibile utilizzare programmi che assemblano una serie di file .gif in più fotogrammi che, una volta uniti in un unico file, presentano l'animazione, per spratichirsi in questo ambito.

Vediamo ora un semplice esempio di inserimento di un file immagine su di una pagina Web:

<img src="immagine.gif">

Analizziamo i suoi principali attributi:

border
Consente di impostare un bordo all'immagine, oppure di eliminarlo nel caso in cui l'immagine sia un link (lezione successiva)

<img src="immagine.gif" border="1">

Il suo valore di default, nel caso non sia un link, è zero (0).

bordercolor
Imposta il colore del bordo dell'immagine

<img src="immagine.gif" border="1" bordercolor="#800000">

Per default è nero.

alt
Testo alternativo, utilissimo nel caso in cui l'immagine, ad esempio per un malfunzionamento momentaneo del server Web, l'immagine non venga riportata sulla pagina, fornisce quindi un testo all'interno dell'immagine non trovata, e comunque, al passaggio del mouse sull'immagine, appare un'etichetta gialla contenente il testo descrittivo associato:

<img src="immagine.gif" alt="Testo alternativo">

width
Imposta la larghezza dell'immagine (se omesso l'immagine prenderà le sue dimensioni di default)

<img src="immagine.gif" width="150">

height
Imposta l'altezza dell'immagine (se omesso l'immagine prenderà le sue dimensioni di default)

<img src="immagine.gif" height="150">

vspace
Imposta un distanziamento in verticale tra l'immagine e gli altri elementi Html presenti sopra e sotto l'immagine stessa

<img src="immagine.gif" vspace="30">

hspace
Come sopra, in orizzontale

<img src="immagine.gif" hspace="30">

Autore: Luca Ruggiero