Il sito per imparare gratuitamente a fare pagine Web

Le Immagini in HTML














Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip



Andrea Bianchi © www.web-link.it  Primi Passi in HTML 4.01 - Ver. 2.7.0 - Settembre 2011
 

Le Immagini Abbiamo visto nella lezione precedente come inserire del testo nella nostra prima pagina web, in una "bella" pagina web che si rispetti non possono però mancare le immagini, ed è proprio di immagini grafiche che ci occuperemo in questa lezione.

Aprite il vostro editor, qualunque esso sia, e richiamate la pagina che avevate creato, quella della lezione precedente per intenderci. Posizionate il cursore nel punto in cui dovrà essere inserita l'immagine, questo il TAG o elemento, da adoperare: <img src="xxx.yyy">
Dove xxx è il nome della vostra immagine e yyy la sua estensione. Le immagini consentite dal linguaggio html sono solo di tipo: .gif .jpg e .png qualsiasi altro formato rischia di non essere visto da tutti i browser.

Si adoperano quelle di tipo gif quando servono immagini animate o che abbiano delle zone in trasparenza (quelle che lasciano vedere lo sfondo), mentre per tutti gli altri casi è preferibile adoperare quelle di tipo jpg che essendo questo un formato compresso risulta essere molto più veloce da caricare non appesantendo troppo la pagina, un aspetto quest'ultimo da non trascurare mai quando si adoperano immagini. Ricordatevi che grandi dimensioni significa anche peso esagerato che si traduce in lunghi tempi di attesa. Sulla rete un'immagine da centinaia di Kb spesso induce il visitatore ad abbandonare il sito prima ancora che questa sia stata completamente visualizzata, ricordatevi anche che nonostante le attuali linee superveloci (ADSL) ci sono ancora molti utenti che accedono alla rete con modem analogici da 56 Kb, fate dunque in modo da evitare immagini pesanti ed anzi, al contrario, preoccupatevi che queste siano le più "leggere possibili".

Il formato .png nato per ultimo più per problemi legali che non per reali esigenze tecniche è adoperato meno frequentemente in quanto non risulta poi così "ottimale", ma questo è un modesto parere per altro del tutto personale.

Passiamo ad inserire la nostra prima immagine. Supponiamo che questa si chiami web-link.gif, sarà inserita nel listato in questa maniera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  </head>
  <body>
<p align="center">Ecco la mia prima pagina in html destinata al web.</p>
<img src="web-link.gif">
  </body>
</html>

Notate la sintassi del comando img che è leggermente diversa da quella adoperata per inserire il testo con <p> Il tag per le immagini non ha infatti il relativo tag di chiusura, non serve quindi mettere </img>. Noterete anche che dopo la parola chiave: img, che indica appunto "immagine", c'è un: "src" che significa: source, ovvero sorgente, cioè quale immagine deve essere visualizzata. Questo nome va inserito all'interno dei doppi apici ed è praticamente il nome dell'immagine stessa. Tutto chiaro?

Perfetto, se adesso salvate il vostro file htm sovvrascrivendo quello che avevate richiamato e lo andate a visualizzare nel browser, noterete che l'immagine non c'è; o meglio c'è qualcosa di nuovo ma non si vede. Dovreste avere questo: Come mai?

Perchè vi serve un'immagine che si chiami "web-link.gif" e che si trovi nella stessa cartella dove avete il file html, praticamente dove c'è questo file html che avete appena modificato e salvato.

Vi consiglio di lasciare perdere l'immagine web-link.gif che adopero io e di procurarvi una qualsiasi immagine vostra, quella che preferite, a patto che sia in uno dei tre formati descritti sopra: gif, jpg o png e mettetela nella stessa cartella dove avete il file html, cambiate il nome all'interno di src=" " inserendo il nome esatto della vostra immagine, fate attenzione a maiuscole e minuscole perchè sul web ci sono delle differenze. Fatto?

Adesso portatevi una riga sotto il tag che è servito per inserire l'immagine e scrivete adoperando un altro paragrafo: La mia prima pagina web ha finalmente anche la sua prima immagine.

Se avete fatto tutto quanto correttamente la vostra pagina comincia a prendere consistenza, con la stessa procedura potete inserire tutti i testi e tutte le immagini che vorrete, ricordatevi sempre il discorso del peso, di non superare mai certe dimensioni. Tante piccole immagini vengono sommate e potrebbero creare lo stesso problema di una sola immagine da molti kb. Per evitare questo, se le immagini sono molte, conviene suddividere in più pagine e richiamare poi queste altre pagine con i links, oggetto della prossima lezione.

Prima di proseguire vediamo cosa potremo aggiungere al tag: <img src="web-link.gif">


Se la nostra immagine non si trovasse nella stessa cartella dove c'è il file che la richiama, dovremo necessariamente specificare il suo "path" cioè il percorso che identifica la sua posizione all'interno del nostro PC, questo potrebbe essere anche un URL valido, cioè un indirizzo web di un sito Internet che la contiene, in questo caso però l'immagine sarà visibile soltanto nel momento in cui sarete collegati alla rete internet.

Questi alcuni possibili percorsi:

<img src="nome_cartella/weblink.gif">
<img src="http://www.web-link.it/weblink.gif">
<img src="../nome_cartella/weblink.gif">

Se specifichiamo le dimensioni dell'immagine aiuteremo il browser a visualizzare tutta la pagina con molta più rapidità, per cui è buona regola inserire sempre queste informazioni. Per farlo si adoperano i due termini in lingua inglese width ed height per larghezza ed altezza:

<img src="weblink.gif" width="125" height="35"> 

I numeri 125 e 35 sono i pixel, l'unità di misura delle immagini, rispettivamente: width 125 px per la larghezza, e height 35 px per l'altezza. E' anche possibile specificare se l'immagine deve avere un bordo e di quale spessore, per ottenere questo si adopera l'attributo: border dove è ammesso anche il valore zero nel caso in cui non si volesse visualizzare alcun bordo. Impostarlo a zero risulta particolarmente utile nel caso di immagini usate come link, cioè all'interno del tag href dove questo bordo risulterebbe visibile con lo stesso colore impostato per i links.

Attenzione: se non viene specificato alcun border, nel senso che l'attributo viene omesso, sarà assunto per default un bordo impostato ad 1 e spesso oltre che fastidioso risulta non voluto. Per questo motivo conviene inserirlo sempre.

<img src="weblink.gif" width="125" height="35" border="0">

Avrete certamente notato che tutti i vari attributi restano all'interno delle parentesi angolari, <queste> e non c'è un preciso ordine da rispettare, potrebbero essere messi anche in ordine diverso da quello che ho adoperato io a patto che ne sia rispettata la corretta sintassi e per sintassi si intende il segno di = uguale e le virgolette " ", anzi i doppi apici " ".

Ci sono molti altri attributi che potrebbero essere inseriti allo stesso modo, vi elenco quelli che secondo me si adoperano più spesso, rimandandovi alla guida HTML nel caso vi servisse conoscere l'elenco completo:

alt="descrizione dell'immagine". L'attributo alt (alternativa alla grafica) permette di specificare un testo per quei browser non grafici. Viene adoperato per descrivere l'immagine e non va confuso con title spiegato sotto. Il testo apparirà nel caso in cui l'immagine non venisse caricata, per questo motivo l'attributo ALT diventa obbligatorio ai fini di una validazione del W3C.logo non presente



title="nome dell'immagine". L'attributo Title (titolo), permette di specificare un testo che descriva l'immagine, simile ad alt viene interpretato correttamente a prescindere se l'immagine grafica sia visibile o meno. Portate il cursore del mouse sull'immagine per leggere il suo titolo. immagine logo di web-Link



align="valore". L'attributo align permette di specificare il tipo di allineamento dell'immagine rispetto alla riga di testo successiva, i valori ammessi sono: left, right, top, middle, baseline e bottom. I due valori principali: left e right (sinistro e destro) fanno si che l'immagine diventi di tipo flottante.



hspace e vspace="valore in pixel". L'attributo VSPACE così come l'attributo HSPACE vengono adoperati nelle immagini flottanti, cioè quelle immagini allineate con left e right, servono ad impostare rispettivamente degli spazi verticali ed orizzontali (Vertical Space ed Horizontal Space) fra il testo e l'immagine stessa ed anche fra l'immagine e la sua cornice.

Questo un esempio di un richiamo ad un'immagine adoperando tutti gli attributi fino ad ora descritti.

<img src="web-link.gif" width="128" height="64" border="0" alt="weblink tutto per la tua pagina web" title="immagine logo di web-link" align="left" hspace="20" vspace="20">

Da notare che fra un attributo e l'altro si lascia uno spazio vuoto.

Questo il risultato dell'immagine inserita nel testo, il nome dell'immagine deve essere scritto esattamente come è realmente, rispettando eventuali maiuscole/minuscole o spazi vuoti, questi ultimi andrebbero sempre evitati e se proprio necessari sostituiti magari dal simbolo underscore _ immagine logo di web-LinkTutta questa attenzione perchè a differenza di windows che non farebbe alcuna distinzione fra una maiuscola ed una minuscola inserita nel nome di un file, sul server web, una volta trasferito il lavoro, l'immagine di nome Web-link.gif sarà considerata un'immagine diversa dalla stessa immagine che si chiamasse invece WEB-link.gif
Una delle prime difficoltà che si incontrano quando si vogliono inserire delle immagini in una pagina web è il loro posizionamento preciso all'interno della pagina, gli attributi di allineamento visti sopra non bastano, sono riferiti al testo che di solito accompagna le immagini. Per posizionare una immagine si può fare uso di contenitori vuoti <div> ... </div> ai quali assegnare un tipo di allineamento: left, right, center o adoperando i css specificare le coordinate per posizionarlo in modo assolutamente preciso.

<div align="center">
<img src="weblink.gif" width="128" height="64" border="0">
</div>

Questo il risultato del codice sopra: div align center

Io consiglio di fare uso di una tabella, sebbene sia nata per tabulare dati si presta molto bene anche per impaginare, questa guida che state leggendo ne è un chiaro esempio essendo strutturata in una complessa tabella.

Anche per questa lezione credo possa bastare... Avete così imparato ad introdurre testi ed immagini, nella prossima lezione conosceremo i links, la vera forza delle pagine web. Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi