HTML

Lezione 5Immagini

URL

• Un Uniform Resource Locator o URL (Localizzatore di risorsa uniforme) è una sequenza di caratteri che identifica univocamente l'indirizzo di una risorsa in Internet, come un documento o un'immagine.

• Ogni URL si compone normalmente di tre parti:

tiposerver://nomehost/nomefile

– la prima parte indica il tipo di server, ovvero lo schema o protocollo utilizzato per indirizzare la risorsa (ad esempio http per il web);

– la seconda parte si riferisce al nome dell'host o server, oppure a un nome di dominio

– la terza infine indica il path o nome file della risorsa• Esempio

http://www.diflo.it/lezioni/lezione1.htm

URL assoluti e URL relativi

• Un URL assoluto è un URL completo che specifica l'esatta posizione dell'oggetto sul web come:

http://www.diflo.it/lezioni/lezione1.htm

• Un URL relativo fornisce invece la posizione di un oggetto sul web relativamente alla posizione sulla pagina che contiene l'URL.

Quando la pagina web contiene un URL relativo, il browser lo completa in modo da farlo diventare un URL assoluto completo. Questa operazione si chiama risoluzione dell'URL relativo e viene conformata a tre convenzioni.

Il file è contenuto nella stessa cartella

• Se l’URL relativo vuole indirizzare un file nella stessa cartella allora l'URL relativo è formato solo dal nome del file e questo viene completato dal browser con il percorso della cartella in cui sta il documento corrente.

• EsempioIl file

http://www.diflo.it/index.htm contiene un URL ad un file immagine logo.gif contenuto nella stessa cartella.

L’URL relativo sarà costituito solo dal nome del file.Il browser cercherà il file il cui URL assoluto è http://www.diflo.it/logo.gifformato dalla posizione assoluta del file che punta seguita dal nome del file puntato.

Il file è contenuto in una sottocartella

• Se l’URL relativo vuole indirizzare un file la cui risorsa è in una sottocartella, l'URL relativo è formato dal nome del file preceduto dal percorso delle cartelle che lo contengono.Il browser completa con il percorso della cartella in cui sta il documento corrente.

• EsempioIl file

http://www.diflo.it/index.htm contiene un URL ad un file immagine frecciasx.gif contenuta nella sottocartella immagini. Tale URL è indicato con “immagini/frecciasx.gif”.Il browser cercherà il file il cui URL assoluto èhttp://www.diflo.it/immagini/frecciasx.gif formato dalla posizione assoluta del file index.htm seguita dal nome della cartella e del file puntato.

Il file è contenuto in una cartella superiore

• Se l’URL relativo vuole indirizzare un file la cui risorsa è in una sottocartella, l'URL relativo è formato da ../ (punto-punto=risale di una cartella) seguito dal nome del file.E’ possibile ripetere più volte ../ quando si vuole risalire di più cartelle.

• EsempioIl file

http://www.diflo.it/lezioni/lezione1.htm contiene un URL ad un file immagine logo.gif contenuto nella cartella superiore (root).L’URL relativo sara “../logo.gif”Il browser cercherà il file il cui URL assoluto è http://www.diflo.it/logo.gif

Le convenzioni usate assieme

• Le tre convenzioni possono essare usate anche assieme: ad esempio il file lezione1.htm deve far riferimento all'immagine frecciasx.gif

• "../immagini/frecciasx.gif"• Esempio

Il file http://www.diflo.it/lezioni/lezione1.htm

contiene un URL ad un file immagine frecciasx.gif contenuto nella cartella immagini contenuta nella cartella superiore (root).L’URL relativo sara "../immagini/frecciasx.gif" Il browser cercherà il file il cui URL assoluto è http://www.diflo.it/immagini/frecciasx.gif

Immagini

•L’elemento HTML per l’inserimento di una immagine è IMG.La sintassi è

<img src="url_immagine" />

L’attributo src (acronimo si source = sorgente) specifica la posizione di una risorsa immagine. Esempi di formati d'immagine ampiamente riconosciuti includono GIF, JPEG e PNG.•L'elemento IMG incorpora un'immagine nel documento corrente alla posizione corrispondente alla definizione dell'elemento. •L'elemento IMG non ha contenuto; esso è di solito rimpiazzato in riga dall'immagine designata dall'attributo src.

Esempio

<p>Testo prima dell'immagine <img src="prova.jpg" />Testo dopo dell'immagine</p>

L’immagine è stata inserita in una paragrafo e viene posizionata in linea con il testo.

Esempio

<p>Testo del paragrafo prima dell'immagine </p><img src="prova.jpg" /><p>Testo del paragrafo dopo dell'immagine</p>

L’immagine è stata inserita al di fuori dei paragrafi in cui è stato inserito il testo e viene tracciata su una riga diversa da quella dei paragrafi.

Dimensioni dell’immagine

L’immagine viene tracciata nelle sue dimensioni naturali.Se si desidera modificare le dimensioni, occorre specificare con gli attributi width (larghezza) e height (altezza) il numero di pixel. Quando specificati, gli attributi width e height dicono al browser di annullare la dimensione naturale dell'immagine o dell'oggetto in favore di questi valori.L’immagine viene scalata. Gli attributi height e width forniscono al browser un'idea della dimensione dell'immagine, così che possano riservarvi uno spazio adeguato e continuare la riproduzione del documento, mentre sono in attesa dei dati dell'immagine.E’ bene quindi indicare width e height anche se sono quelli naturali dell’immagine.<img src="prova.jpg" width="200" height="300" />

Allineamento

Se si desidera posizionare l’immagine rispetto al testo circostante, usare l’attributo di stile float dandogli valori left o right

<img src="prova.jpg" width="200" height="300" style="float: left" />Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo

Posizionamento di più immagini

<p><img src="prova.jpg" style="float: left" />Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</p><p><img src="prova.jpg" style="float: left" />Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</p>I due paragrafi contengono una immagine e del testo, ma non vengono resi come si desidera, cioè uno sotto l’altro. Questo perché l’immagine posizionata con float risulta indipendente dal paragrafo che la contiene.

Posizionamento di più immagini<p><img src="prova.jpg" style="float: left" />Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</p><br style="clear: both"><p><img src="prova.jpg" style="float: left" />Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</p>Il problema viene risolto inserendo una interruzione di riga contenente un istruzione di stile che posiziona il secondo paragrafo nella posizione ottenuta quando tutto il contenuto precedente è stato posizionato.