Manuale di HTML
Elementi multimediali
Inserimento di immagini
Molto probabilmente il WWW (World Wide Web, ossia il Web a livello mondiale) non avrebbe avuto lo sviluppo che lo ha visto protagonista in questi ultimi 10 anni se non ci fossero state le immagini, se non fosse stato possibile introdurre elementi di grafica nelle pagine che si presentavano. Le immagini, che possono essere fotografie, disegni o anche effetti colorati, contribuiscono a dare un tocco di vitalità alla pagina e, soprattutto, ad attirare maggiormente l'occhio del visitatore.
Esistono diversi formati di immagine, decine; l'HTML ne riconosce solo 2: GIF e JPEG. Un terzo formato, il PNG, potrebbe lentamente sostituire le GIF per ragioni che riguardano i diritti di autore, ma fino ad oggi è stato implementato solo in parte. Di solito è conveniente usare il formato JPEG per le fotografie, ricche di dettagli, e riservare il formato GIF per i disegni e i diagrammi a schema realizzati con appositi programmi di disegno.
I browser attuali sono molto robusti e permettono di visualizzare un numero elevato di formati grafici ma è bene non allontanarsi troppo dagli standard per questioni di compatibilità e di spazio occupato.
Oltre ai programmi di disegno e alla propria macchina fotografica digitale o il proprio scanner, le immagini possono essere reperite sul Web o nei siti FTP, prestando la dovuta attenzione all'utilizzo di materiale tutelato da copyright.
Il tag necessario per l'inserimento di una immagine è <IMG> che non ha tag di chiusura, una volta inserita l'immagine non ha senso dire al browser dove l'immagine finisce.
Il tag <IMG> scritto da solo non ha però alcun effetto sulla pagina; esso riconosce alcuni attributi, di cui uno è obbligatorio: occorre dire al documento qual'è l'immagine da inserire. L'attributo SRC="..." indica il percorso della immagine da caricare; può essere assoluto, e quindi essere del tipo SRC="http://www.sito.it/cartella/immagine.gif" oppure, se la immagine si trova ospitata sullo stesso sito, può essere relativo, del tipo SRC="cartella/immagine.gif"; l'importante è specificare il percorso corretto.
Una precisazione importante riguardo ai nomi delle immagini e in generale di qualunque file. I server di tipo Unix/Linux fanno distinzione tra nomi MAIUSCOLI e minuscoli, è bene fare attenzione sul tipo di carattere che si usa, e nel dubbio preferire l'uso del carattere minuscolo.
Quindi ci sono gli attributi opzionali, ma che servono se si vuole dare una impostazione diversa all'immagine introdotta. Se si carica la pagina web su un browser in cui lo scaricamento delle immagini è stato disattivato (per ragioni di velocità dei collegamenti, ma la pagina sembrerà più spoglia) è possibile non privare gli utenti di tutte le informazioni; l'attributo ALT="..." permette di inserire un testo alternativo al posto dell'immagine. Questo testo viene visualizzato quando si passa sopra all'immagine con il mouse, quando l'immagine manca oppure si utilizza un browser testuale.
Gli attributi WIDTH="x" e HEIGHT="y" determinano le dimensioni della immagine, in larghezza e in altezza. I numeri x e y possono essere sia numeri assoluti e indicano il numero di pixel che misura l'immagine, oppure una percentuale della dimensione della finestra. Se questi attributi sono assenti l'immagine viene mostrata alla sua grandezza naturale. Se è presente uno solo dei due attributi, l'altro si adegua in proporzione.
Su alcuni browser è implementato anche l'attributo STYLE="..." che racchiude questi due attributi in uno solo; la sua sintassi è: STYLE="height:x; width:y".
L'attributo BORDER="x" indica lo spessore in pixel della cornice che si vuole mettere attorno all'immagine; il colore del bordo è nero; se è assente, l'immagine viene visualizzata senza bordo aggiuntivo.
L'attributo ALIGN="..." è qui più complesso che negli altri tag in cui compariva. Può avere i seguenti valori: "left", "right", "bottom", "top" e "middle" (oppure "absmiddle"); ce ne sono altri, ma hanno lo stesso significato di questi ultimi tre. I valori "left" e "right" indicano che l'immagine è messa alla sinistra o alla destra di ciò che segue, se c'è un testo, e se l'immagine è piuttosto grande, questo viene disposto su più righe accanto all'immagine. I valori "bottom", "top" e "middle" specificano che l'immagine viene visualizzata nella riga in cui è posizionata e il testo è allineato in una sola riga (anche se l'immagine è grande) al bordo inferiore o superiore o al centro dell'immagine. Se questo attributo è assente, il valore predefinito è "bottom".
Infine gli attributi HSPACE="x" e VSPACE="y" indicano quanti pixel di spazio vuoto lasciare attorno alla immagine, rispettivamente a sinistra/destra e sopra/sotto, come una cornice vuota.
Con questo finiscono gli attributi del tag <IMG> e i modi in cui una immagine può essere posizionata con questo tag; naturalmente esistono modi per visualizzare in maniera più complessa una immagine o gruppi di immagini, ma per fare questo si dovrà fare ricorso alle tabelle, oppure, per avere il massimo, ai fogli di stile CSS.
Vediamo di applicare con un piccolo esempio le nozioni appena introdotte.
<HTML> <HEAD> <TITLE>Guida di HTML</TITLE> .... </HEAD> <BODY BGCOLOR="#BBFFBB"> <P ALIGN="justify"> <IMG SRC="nonna.jpg" ALIGN="left" width="60"> Qui l'immagine è stata messa a sinistra e il testo alla sua destra (con allineamento giustificato) su più righe.</P> <P ALIGN="justify">Il testo continua al lato dell'immagine nonstante il segno di paragrafo.</P> Qui invece si è inserita <IMG SRC="haha.gif" align="absmiddle"> una immagine dentro il testo, e siccome era piccola si è potuta inserirla centrata con il testo, in modo da trovare una cosa accettabile graficamente.</P> <P ALIGN="justify"> <IMG SRC="manca.jpg" WIDTH="122" HEIGHT="50" ALT="Immagine mancante, compare un testo"><BR> Qui sopra l'immagine non viene trovata, oppure non viene mostrata, e al suo posto compare il testo alternativo. Notare come il testo viene troncato se non entra nello spazio. Con Netscape il testo compare solo quando si passa col mouse sopra l'immagine.</P> <P ALIGN="justify"> <IMG SRC="nonna.jpg" ALIGN="right" WIDTH="60" HEIGHT="60" HSPACE="15" BORDER="3"> Qui l'immagine è stata messa a destra; l'immagine appare distorta perché le abbiamo dato delle dimensioni non proporzionate con le originali. Si noti lo spazio orizzontale lasciato ai lati della immagine.</P> .... </BODY> </HTML> |
Il testo continua al lato dell'immagine nonstante il segno di paragrafo. Qui invece si è inserita una immagine dentro il testo, e siccome era piccola si è potuta inserirla centrata con il testo, in modo da trovare una cosa accettabile graficamente.
|
Qui l'immagine è stata messa a sinistra e il testo alla sua destra (con allineamento giustificato) su più righe.
Nei prossimi capitoli descriveremo come introdurre all'interno del documento suoni e animazioni.