HTML Lezione 5 Immagini. URL Un Uniform Resource Locator o URL (Localizzatore di risorsa uniforme) è una sequenza di caratteri che identifica univocamente.

Presentazione sul tema: "HTML Lezione 5 Immagini. URL Un Uniform Resource Locator o URL (Localizzatore di risorsa uniforme) è una sequenza di caratteri che identifica univocamente."— Transcript della presentazione:

1 HTML Lezione 5 Immagini

2 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

3 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.

4 Il file è contenuto nella stessa cartella Se lURL 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. Esempio Il file http://www.diflo.it/index.htm contiene un URL ad un file immagine logo.gif contenuto nella stessa cartella. LURL relativo sarà costituito solo dal nome del file. Il browser cercherà il file il cui URL assoluto è http://www.diflo.it/logo.gif formato dalla posizione assoluta del file che punta seguita dal nome del file puntato.

5 Il file è contenuto in una sottocartella Se lURL 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. Esempio Il 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.

6 Il file è contenuto in una cartella superiore Se lURL 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. Esempio Il file http://www.diflo.it/lezioni/lezione1.htm contiene un URL ad un file immagine logo.gif contenuto nella cartella superiore (root). LURL relativo sara../logo.gif Il browser cercherà il file il cui URL assoluto è http://www.diflo.it/logo.gif

7 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). LURL relativo sara "../immagini/frecciasx.gif" Il browser cercherà il file il cui URL assoluto è http://www.diflo.it/immagini/frecciasx.gif

8 Immagini Lelemento HTML per linserimento di una immagine è IMG. La sintassi è Lattributo 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.

9 Esempio Testo prima dell'immagine Testo dopo dell'immagine Limmagine è stata inserita in una paragrafo e viene posizionata in linea con il testo.

10 Esempio Testo del paragrafo prima dell'immagine Testo del paragrafo dopo dell'immagine Limmagine è stata inserita al di fuori dei paragrafi in cui è stato inserito il testo e viene tracciata su una riga diversa da quella dei paragrafi.

11 Dimensioni dellimmagine Limmagine 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. Limmagine 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 dellimmagine.

12 Allineamento Se si desidera posizionare limmagine rispetto al testo circostante, usare lattributo di stile float dandogli valori left o right Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo

13 Posizionamento di più immagini Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo I due paragrafi contengono una immagine e del testo, ma non vengono resi come si desidera, cioè uno sotto laltro. Questo perché limmagine posizionata con float risulta indipendente dal paragrafo che la contiene.

14 Posizionamento di più immagini Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo 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.