Inserire le immagini in una pagina Html

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione 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">
Analizziamo adesso 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">

I più cliccati della sezione Html

:: Impedire ad un testo di andare a capo in Html (32.979)

:: Le tabelle Html (31.000)

:: Formattazione del testo in Html (25.042)

:: Referenze dei Tag Html (18.963)

:: Creare tabelle con i bordi curvi (17.800)

:: Guida XHTML (16.237)

:: Struttura di un file Html (14.801)

:: Inserire un'icona nella barra degli indirizzi di MSIE (13.525)

:: Sovrapporre un'immagine ad un layer senza posizionamento assoluto (10.705)

:: Ritorno a capo nei button di form Html (9.528)

IN EVIDENZA
DOWNLOAD