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



© www.web-link.it  Primi Passi in HTML con Style - Ver. 1.3.6

 

Le Immagini

Abbiamo visto nella lezione precedente come inserire del testo nella nostra prima pagina web, ma in una pagina web che si rispetti non possono 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 non va adoperato perchè c'è il rischio che non sia visualizzato da tutti i vari browser.

Si adoperano quelle di tipo gif quando servono immagini animate o che abbiano delle zone di trasparenza (quelle che lasciano vedere lo sfondo), mentre per tutti gli altri casi è preferibile adoperare quelle di tipo jpg che essendo un formato compresso risulta essere più leggero e di conseguenza 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 telefoniche superveloci (ADSL) ci sono ancora molti utenti che accedono alla rete con modem analogici che viaggiano a velocità modeste, fate dunque in modo da evitare immagini pesanti ed anzi, al contrario, preoccupatevi che queste siano sempre le più "leggere possibili" Operazione da fare con un programma di grafica.

Il formato .png è quello nato per ultimo più per problemi legali derivati dall'uso del formato gif che non per reali esigenze tecniche, è adoperato forse meno pur risultando migliore dal punto di vista qualitativo. Browser obsoleti, come IE6, non vedono le immagini di tipo .png

Passiamo ad inserire la nostra prima immagine. Supponiamo che questa si chiami web-link.gif, sarà inserita nel listato codice 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 infatti non ha bisogno del relativo tag di chiusura, non serve mettere </img> al contrario sarebbe un errore. Noterete anche che dopo la parola chiave: img, che indica "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 completo della sua estensione grafica. Tutto chiaro?

Bene, se adesso salvate il vostro file html sovvrascrivendo quello che avevate richiamato e lo andate a visualizzare nel browser, noterete che l'immagine non c'è; o meglio c'è qualcosa di nuovo nella pagina, dovreste avere questo quadratino: 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'è lo stesso file che avete appena modificato e salvato.

Vi consiglio di creare un'apposita cartella nel vostro PC e di metterci dentro tutto quello che vi serve, vi consiglio anche di lasciare perdere l'immagine web-link.gif che adopero io e di procurarvi una vostra immagine, una qualsiasi, quella che preferite, a patto che sia in uno dei tre formati descritti sopra: gif, jpg o png. Mettetela nella stessa cartella dove avete il file html, inserite il suo nome completo di estensione all'interno di src=" " nome esatto, fate attenzione a maiuscole e minuscole perchè poi una volta sul web faranno la differenza. Fatto?

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

Se avete fatto tutto 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 fatto del peso per le immagini. Anche tante piccole immagini vengono sommate e possono creare lo stesso problema di una sola immagine di molti kb. Per evitarlo, se le immagini sono molte, conviene distribuirle in più pagine da richiamare tramite i links, che vedremo più avanti.

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


Se la nostra immagine non si trova nella stessa cartella dove c'è il file che la richiama, dobbiamo necessariamente specificare il suo "path" cioè il percorso che identifica la sua posizione. Nell'esempio sopra si trova nella cartella immagini, avrebbe potuto essere anche un URL valido, cioè un indirizzo web di un sito Internet che la contiene.

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 due atributi dal nome in lingua inglese width ed height rispettivamente per larghezza ed altezza, sono adoperati sia da html che da css anche se con sintassi differenti, come da esempio. La versatilità dei css permette di specificare le dimensioni non soltanto in pixel (punti, unità di misura per le immagini) come farebbe html ma con un qualsiasi altro valore ammesso dai css.

PS: evitate di usare immagini grandi ridimensionandole poi con i valori degli attributi width ed height o immagini piccole ingrandite modificando gli stessi valori, ricordatevi la storia del peso, usate un programma di grafica per creare le immagini alla giusta dimensione. Specificare le giuste misure, quelle reali, agevola in velocità la visualizzazione dell'intera pagina.

<img src="weblink.gif" width="125" height="35">
<img src="weblink.gif" style="width: 125px; height: 35px;>

I numeri 125 e 35 sono pixel, l'unità di misura delle immagini grafiche, rispettivamente: width 125 px per la larghezza e height 35 px per l'altezza. Se usate questa dichiarazione in html è sufficiente il solo numero, se lo fate da css bisogna specificare anche px perchè il solo numero non basta dal momento che con i css i valori possono essere espressi in diverse unità di misura e non solo in px come invece succede per html.  

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 e dello 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 ed oltre che fastidioso la maggior parte delle volte risulta non voluto. Per questo motivo conviene inserirlo sempre ed impostarlo a 0.

<img src="weblink.gif" width="125" height="35" border="0">
<img src="weblink.gif" style="width: 125px; height: 35px; border: solid 0px>

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 " " per le dichiarazioni in html, i due punti : invece, ed il punto e virgola ; per i css. Notare che in css oltre a 0px nel border ho messo anche il tipo: solid, potevo mettere anche il colore, border accetta più parametri consecutivi e non serve separarli dal ; perchè facenti parte dello stesso attributo; essendo però impostato a 0 non serve a niente avere il tipo e/o il colore.

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 e alla guida CSS nel caso vi servisse conoscere l'elenco completo:

alt="descrizione dell'immagine". L'attributo alt (alternativa alla grafica) permette di specificare un testo che descrive l'immagine e non va confuso con title spiegato sotto. Il testo apparirà solo nel caso in cui l'immagine non venisse caricata, per questo motivo l'attributo ALT diventa obbligatorio per pagine valide dal punto di vista W3C.

logo non presente

title="nome dell'immagine". L'attributo title (titolo), permette di specificare un testo che descrive 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 Qualcuno avrà forse notato che anche portando il cursore sopra all'immagine con il solo ALT è possibile leggere la descrizione, questo è un difetto che hanno i browser IE, i quali interpretano erroneamente alt al pari di title.

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. lo vedremo in pratica nella prossima lezione: immagini e testo.

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 stessa, gli attributi di allineamento 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 per specificare le coordinate dello schermo e posizionarlo così in modo assolutamente preciso.

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

Questo il risultato del codice sopra: div align center
lìimmagine si trova al centro del box grigio che la contiene.

Facendo uso di css:

<div style="position: relative; top: 10px; left: 20px;">
<img src="weblink.gif" width="125" height="35" border="0">
</div>

Questo il risultato del codice sopra: position: relative; top: 10px; left: 20px;
l'immagine si trova posizionata a 10 pixel dal bordo superiore e 20 pixel dal bordo laterale sinistro del box grigio.




Anche per questa lezione credo possa bastare... Avete imparato alcuni attributi per le immagini, nella prossima lezione vedremo come combinare immagini e testo. Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Web-Link.it