Costruire un sito in HTML

Guida Topmanga

Come inserire le immagini in un documento HTML



Le immagini presenti nei siti internet e ammesse nel web sono sostanzialmente di tre tipi: GIF, JPG e PNG. Non usate quindi altre tipologie di immagini (tipo i file di photoshop psd).

Il codice per inserire una immagine è


<img src="immagine.gif" alt="descrizione della immagine" height="42" width="42" > 

Sostituisci il nome "immagine.gif" con il nome della tua immagine: attenzione anche all'estensione dell'immagine: jpg, gif...
Il codice appena usato ti permette di far vedere una immagine che sta nella stessa directory/cartella della pagina che la richiama. Se invece l'immagine dovesse trovarsi in un altro percorso, bisogna specficarlo. Esempio:
Mettiamo che la pagina html sia sul desktop e l'immagine che si vuole far vedere sia in una cartella chiamata IMMAGINI.
Il codice sarà così:

<img src="IMMAGINI/immagine.gif" alt="descrizione della immagine" height="42" 
width="42" > 
Il percorso specificato può essere anche un indirizzo completo (http://www... )

ALT specifica un testo alternativo per l'immagine.
HEIGHT e WIDTH specificano rispettivamente l'altezza e la larghezza dell' immagine in pixel.

Per andare a definire gli spazi dell'immagine dagli altri elementi circostanti (altre immagini o testi) o l'allineamento del testo con l'immagine, si usa il CSS in quanto i vecchi codici propriamente delle immagini non sono più supportati dall' HTML5.

Per l'allineamento del testo rispetto all' immagine in verticale scegli una delle voci del vertical-align: bottom | middle | top
Esempio con "bottom":

<img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="vertical-align:bottom">
Guarda il risultato per capire meglio l'allineamento verticale:
immagine con allineamento "vertical-align:bottom":

testo testo testo testo testo Smiley face testo testo testo testo testo

immagine con allineamento "vertical-align:middle":

testo testo testo testo testo Smiley face testo testo testo testo testo

immagine con allineamento "vertical-align:top":

testo testo testo testo testo Smiley face testo testo testo testo testo

Se vogliamo mettere l'immagine tutta a destra o tutta a sinistra non potremo più usare gli attributi ALIGN ormai deprecati, bensì useremo FLOAT con il CSS. Possiamo impostare left o right:

<img src="smiley.gif" style="float:left">
Esempio con float left (cioè immagine tutta a sinistra):

Testo testo Smiley facetesto testo testo