I vari brownser sono in grado di visualizzare le immagini, in questo modo i siti web si arricchiscono anche di una grafica che rende anche più piacevole la visita ad un sito internet.
I formati più usati per le immagini sono:
- GIF (Grapchics Interchange Format)
- Jpeg (Joint Photographic Experts Group)
(per più informazioni sui vari formati vedi i formati consentiti nel web dal menù)
Per inserire un immagine bisogna inserire questo codice Html:
<IMG SRC="nomeimmagine"> dove al posto di nomeimmagine verrà inserito l'url dell'immagine desiderata.
Il formato dell'immagine è stabilito in base all'estensione del nome del file contenente l'immagine cioè se l'immagine è in formato GIF il suo nome deve terminare con l'estensione .gif cosi come l'estensione JPEG deve terminare con .jpg
Solitamente quando si aggiunge un immagine e al suo fianco si trova del testo, quest'ultimo si troverà nell'angolo in basso a destra dell'immagine. Per cambiare allineamento si deve inserire uno dei seguenti parametri:
<IMG SRC="nomeimmagine" ALIGN=TOP> Per allineare il testo vicino al bordo superiore dell'imagine
<IMG SRC="nomeimmagine" ALIGN=MIDDLE> Per allineare il testo al centro dell'imagine
<IMG SRC="nomeimmagine" ALIGN=bottom> Per allineare il testo vicino al bordo inferiore dell'imagine. Solitamente quest'opzione è quella che viene sempre utilizzata e quindi può essere omessa.
Un immagine può anche diventare un link. Inserendo il codice per un collegamento di testo e quello dell'immagine si viene a creare un link attraverso un immagine. Ecco il codice:
<A HREF="url"> <IMG SRC="nomeimmagine"> </A>
Per togliere il bordo si dovrà aggiungere:
<A HREF="url"> <IMG SRC="nomeimmagine" BORDER="0"> </A>
Ogni volta che diventa impossibile visualizzare un immagine si può scegliere l'opzione ALT (alternate) che visualizzerà del testo al posto dell'immagine.
Questo è il codice:
<IMG SRC="nomeimmagine" ALT="descrizione">
E' inoltre possibile utilizzare quest'opzione per presentare ad un visitatore una breve descrizione del contenuto della pagina web che vorrà visualizzare, apparirà quindi una scritta con fondo giallo quando il visitatore passerà sopra all'immagine col mouse.
Risulta inoltre importante ridurre le dimensioni dell'immagine quando ciò diventa necessario. Il codice risulterà il seguente:
<IMG SRC="nomeimmagine" ALT="descrizione" WIDTH=n HEIGHT=n> Dove al posto di n verranno inserite le misure in pixel dell'immagine, di conseguenze WIDTh indicherà la larghezza mentre HEIGHT l'altezza.
Se un immagine si presenta troppo grande, e quindi richiede tanto tempo per il suo caricamento, l'utente può scegliere attraverso un link di visualizzarla o meno. Il codice è il seguente:
<A HREF="immagine"> Descrizione dell'immagine </A>