Corso di HTML

Inserire immagini e musiche di sottofondo

Per inserire un immagine in un documento html si usa il tag <IMG> che non ha bisogno di chiusura e la sintassi è la seguente:

<IMG SRC="immagine.gif">

Dove SRC sta per Search ed è il percorso dal quale il browser ricava l'immagine (in questo caso "immagine.gif"). Come detto si tratta di un tag singolo, quindi non va chiuso con </IMG>.

I browser (Netscape, MsIe, Opera ecc.) riconoscono molti formati grafici, anche se sono due quelli più utilizzati: GIF (Graphics Interchange Format) e JPEG (Joint Photographics Experts Group). 

All'elemento <IMG> si possono associare altri attributi molto utili ai fini del suo utilizzo. Vediamo insieme quali.

Questo elemento è molto importante quando si costruisce un sito per due motivi:

alcuni browser potrebbero essere impostati per non visualizzare le immagini;

i browser testuali quelli per non vedenti non riuscirebbero ad interpretare le immagini senza un commento.

Ecco la sintassi:

<IMG SRC="immagine.gif" ALT="Guida al pc">

Questi attributi servono per definire rispettivamente larghezza e altezza dell'immagine e se vengono omessi il browser penserà lui a cercarle automaticamente.

Ecco la sintassi:

<IMG SRC="immagine.gif" WIDTH=150 HEIGHT=170 ALT="Guida al Pc">

Dove WIDTH=150 è la dimensione orizzontale (larghezza) dell'immagine espressa in pixel, e HEIGHT=180 la dimensione verticale (altezza).

Con questi attributi si possono definire dimensioni differenti da quelle effettive dell'immagine. Però è consigliabile inserire immagini di dimensioni naturali ed esempio inseriamo un'immagine che è larga 100 pixel e noi diciamo al browser che la vogliamo di 200 pixel il risultato sarebbe orrendo.

Con l'attributo BORDER è possibile assegnare un bordo all'immagine.Più grande è il numero di pixel che noi indichiamo più grande è il bordo, se diamo il valore 0 non viene visualizzato nessun bordo. Se questo attributo viene omesso il browser non assegna nessun bordo, ma se l'immagine è anche un link viene automaticamente assegnato un BORDER=1.

Questa la sintassi:

<IMG SRC="immagine.gif" WIDTH=150 HEIGHT=170 BORDER=2 ALT="Guida al pc">

Con questi due attributi è possibile stabilire la distanza in pixel dell'immagine dagli oggetti che si trovano ai quattro lati della stessa.

HSPACE definisce la distanza dai lati destro e sinistro dell'immagine degli oggetti più vicini (testo, immagini, applet ecc.).

VSPACE definsice la distanza dai lati superiore e inferiore dell'immagine degli oggetti più vicini (testo, immagini, applet ecc.). Questa la corretta sintassi:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Guida al pc">

Questi attributi risultano utili quando si vuole distanziare l'immagine dagli oggetti più vicini.

L'attributo ALIGN permette di definire la posizione dell'immagine rispetto al testo cioe prima, dopo.

Ecco come:

ALIGN=top: allinea la prima riga di testo sulla sinistra al top dell'immagine.

ALIGN=middle: allinea la prima riga di testo sulla sinistra al centro dell'immagine.

ALIGN=bottom: allinea la prima riga di testo sulla sinistra nella parte più bassa dell'immagine.

ALIGN=left: allinea il testo sulla destra dell'immagine partendo dal top.

ALIGN=right: allinea il testo sulla sinistra dell'immagine partendo dal top.

Inserire una musica di sottofondo

Per inserire un suono ad esempio un file MIDI si usa il comando <BGSOUND> (che però funziona solo con MSIE)e con LOOP indichiamo  il numero delle volte che il midi deve essere ripetuto.
Ecco la sintassi:

<BGSOUND SRC="suono.mid" LOOP=INFINITE>



Per rendere possibile l'apertura automatica di un files audio sia con MSIE che con Netscape, si deve usare il comando <EMBED>:
Ecco la sintassi:

<EMBED SRC="suono.mid" AUTOSTART=true LOOP=true>

In entrambi i casi è possibile inserire oltre ai file MIDI anche files .WAV e .AUE' chiaro che se il file musicale si trova al di fuori della directory dove c'è la homepage, bisogna indicare il percorso corretto es. "../musica/suono.mid"