Inserire le immagini in una pagina Html

Autore: Luca Ruggiero | Tell a Friend Corso HTML Impara il linguaggio di marcatura per il Web. Corso CSS Web Design ed Accessibilità secondo il W3C! Corso Web Design Disegno di siti Web con HTML, CSS e Dynamic HTML.

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 è possibile scaricare dalla sezione download di questo sito il software Microsoft Gif Animator, semplice ed efficace assemblatore di immagini.

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

<img src="immagine.gif">

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

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

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

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

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

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

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