LINGUAGGIO HTML Titolo: Link e immagini

Linguaggio HTML – Link e immagini Argomenti trattati Collegamenti ipertestuali Collegamento a una risorsa esterna Collegamento interno al documento html Aprire un collegamento in una specifica finestra: TARGET o Esempio 22: Creare link a risorse esterne o interne alla pagina html Immagini o Esempio 23: Inserire una immagine in una pagina html Dimensionamento delle immagini Allineamento delle immagini o Esempio 24: Impostare le dimensioni e l’allineamento di immagini Spazi e bordi delle immagini Accessibilità e didascalie delle immagini Immagini cliccabili Elementi deprecati

Tag: a, img Collegamenti ipertestuali I collegamenti ipertestuali si creano associando l' indirizzo (percorso/nome file) del nodo di destinazione ad un elemento visualizzato nella pagina corrente che può essere una stringa di testo o un' immagine. Questa associazione è basata sull' utilizzo del tag a dove a sta per ancoraggio (anchor) ed HREF è l' abbreviazione di Hypertext-Reference (riferimento ipertestuale). Per creare un collegamento verso un' altra pagina dello stesso sito la sintassi è:

Collegamento a una risorsa esterna • A un file (documento, immagine, filmato, pagina web) nome del link • A un indirizzo di posta elettronica nome del link

Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

1

LINGUAGGIO HTML Titolo: Link e immagini

Collegamento interno al documento html Per prima cosa si definiscono le ancore dei collegamenti (segnalibri in Windows). Qui inizia l’argomento 1 Successivamente si impostano i collegamenti. Vai all’argomento 1 Si possono anche combinare collegamenti esterni e interni. Vai all’argomento 1 della pagina 2

Aprire un collegamento in una specifica finestra: TARGET nome del link L’attributo target consente di specificare come aprire la risorsa indirizzata da href. l’unico valore dell’attributo target che ritengo utile segnalare è_blank (oppure _new), che apre la risorsa in una nuova finestra. Se target non viene specificato, la risorsa si apre nella finestra corrente.

Esempio 22: Creare link a risorse esterne o interne alla pagina html esempio22.html

Link ad una risorsa esterna. L'apertura avviene in una nuova finestra: Dizionario Italiano Inglese

Link ad un'ancora interna: Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

2

LINGUAGGIO HTML Titolo: Link e immagini

Vai al titolo 2

Titolo 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry………………

Titolo 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry…………………

Immagini Per inserire un' immagine in una pagina HTML basta utilizzare il tag img. Il tag img non necessita di essere chiuso. L' immagine appare allineata alla base della riga di testo corrispondente, senza spazi aggiuntivi e mantiene le sue dimensioni assolute.

Esempio 23: Inserire una immagine in una pagina html esempio23.html

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?

Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

3

LINGUAGGIO HTML Titolo: Link e immagini

Dimensionamento delle immagini Gli attributi width e height permettono di specificare rispettivamente la larghezza e l’altezza in pixel. Quando si specificano le dimensioni di un' immagine è necessario conoscerne le dimensioni effettive per mantenere inalterato il rapporto larghezza/altezza evitando così di deformare l' immagine. Anche se si vuole visualizzare l' immagine a grandezza naturale è sempre preferibile specificare i valori di width e height perché così il browser ha maggiori informazioni per collocare l' immagine ed il caricamento della pagina risulta molto più rapido.

Allineamento delle immagini L’immagine può essere allineata rispetto al testo circostante mediante l' attributo align. I valori di align ammessi sono: Bottom: il lato inferiore dell' immagine appare allineato alla base della riga di testo (valore predefinito). Middle: il punto mediano dell' altezza dell' immagine si allinea alla base della riga di testo; il testo si spezza e prosegue sotto l' immagine. Left: l' immagine si posiziona sul lato sinistro della pagina e il testo scorre intorno a lei sul lato destro. Right: l' immagine si posiziona sul lato destro della pagina e il testo scorre intorno a lei sul lato sinistro.

Esempio 24: Impostare le dimensioni e l’allineamento di immagini esempio24.html

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. IMMAGINE ORIGINALE CON ALLINEAMENTO DI DEFAULT It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

4

LINGUAGGIO HTML Titolo: Link e immagini Why do we use it?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. IMMAGINE ORIGINALE CON ALLINEAMENTO MIDDLE It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. IMMAGINE RIDOTTA CON ALLINEAMENTO RIGHT It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?

Spazi e bordi delle immagini Nel caso in cui si voglia allontanare l' immagine dal testo si può aumentare lo spazio vuoto che circonda l' immagine attraverso gli attributi vspace (spazio verticale, in pixel) e hspace (spazio orizzontale, in pixel). Ad esempio scrivendo: oltre ad inserire nella pagina web image.jpg si specifica che sopra e sotto l' immagine devono rimanere 10 pixel vuoti, e a destra e sinistra dell' immagine devono rimanere 20 pixel vuoti. Si può anche aggiungere un bordo intorno all' immagine tramite l' attributo border che deve essere espresso in pixel secondo la sintassi: Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

5

LINGUAGGIO HTML Titolo: Link e immagini

Accessibilità e didascalie delle immagini Un attributo fondamentale del tag img è alt (testo alternativo). Grazie a tale attributo si può definire una didascalia associata all' immagine. La sintassi corretta è: Questa didascalia associata all' immagine appare durante il caricamento della pagina o quando si passa con il mouse sopra l' immagine. I vantaggi principali dell' usare l' attributo alt sono: − i visitatori possono capire prima del caricamento completo il contenuto delle immagini; − i browser speciali per non-vendenti sono in grado di interpretare correttamente la pagina; − diversi motori di ricerca tengono conto del valore dell' attributo ALT delle immagini di una pagina per catalogarla con precisione.

Immagini cliccabili Ad ogni immagine si può associare un collegamento ipertestuale includendo il tag img all' interno della coppia di tag a secondo la sintassi: Associare un collegamento ipertestuale ad un' immagine è molto utile quando si vuole creare ad esempio un menù grafico di navigazione per un sito web. Creando immagini ad hoc come icone o pulsanti il visitatore ne intuirà la funzione a colpo d' occhio. Tuttavia, quando un' immagine è cliccabile, appare generalmente circondata da un bordo di colore blu che risulta anti-estetico. In questo caso basta indicare all' interno del tag img l' attributo border="0" per fare in modo che il bordo resti invisibile.

Elementi deprecati (specifica HTML 4.01 del W3C) Attributi del tag img align vspace hspace border

Quest'opera è stata rilasciata sotto la licenza Creative Commons Attribuzione-Non commerciale 2.5 Italia. Per leggere una copia della licenza visita il sito web http://creativecommons.org/licenses/by-nc/2.5/it/ o spedisci una lettera a Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.

Autore: Bocchi Cinzia Ultimo aggiornamento: 23/09/2008

6